@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --field: #1f5a47;
  --field-ink: #f1e9dc;
  --page: #f2ece2;
  --card: #fbf8f2;
  --ink: #1b1f1d;
  --ink-2: #565e5a;
  --accent: #1f5a47;
  --line: rgb(27 31 29 / 14%);
  --focus: #0a84ff;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --width: min(1120px, calc(100% - 48px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-press: 120ms;
  --t-fast: 180ms;
  --t-move: 240ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d0f0e;
    --card: #161a18;
    --ink: #ece6dc;
    --ink-2: #a3aaa6;
    --accent: #8fc7bc;
    --line: rgb(236 230 220 / 14%);
    --focus: #409cff;
  }
}

@media (prefers-contrast: more) {
  :root { --ink-2: #3b4240; --line: rgb(27 31 29 / 40%); }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --ink-2: #d2d8d5; --line: rgb(236 230 220 / 45%); }
}

* { box-sizing: border-box; }

/* Safari tints its top and bottom bars and fills the overscroll from the body
   background, so the body is field green and the page colour lives on main. The header
   and the footer are green bands, which keeps both bars and both overscrolls on brand. */
html { background: var(--field); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--field);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

.skip-link {
  position: fixed;
  z-index: 50;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--page);
  background: var(--ink);
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

.site-header {
  position: relative;
  display: flex;
  isolation: isolate;
  color: var(--field-ink);
  background: var(--field);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) max(24px, calc((100% - 1120px) / 2)) 14px;
}

.site-header::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("grain.png") 0 0 / 192px;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  content: "";
}

.identity { display: inline-flex; align-items: center; min-height: 44px; color: var(--field-ink); }

.site-header .mark { display: block; width: 64px; height: auto; fill: currentColor; }

.site-nav { display: flex; gap: 4px; }

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--field-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  opacity: 0.82;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] { opacity: 1; }

/* The page colour runs edge to edge behind the narrow column; the body is green. The
   clip-path also clips vertically at this box, so nothing inside may overflow it. */
.page-shell {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  background: var(--page);
  box-shadow: 0 0 0 100vmax var(--page);
  clip-path: inset(0 -100vmax);
  padding: 80px 0 120px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 20px;
  font: 400 clamp(44px, 7vw, 76px)/1 var(--serif);
  letter-spacing: -0.02em;
}

h2 {
  margin: 0 0 12px;
  font: 400 clamp(28px, 3.4vw, 36px)/1.1 var(--serif);
  letter-spacing: -0.01em;
}

h3 { margin: 24px 0 8px; font: 600 18px/1.35 var(--sans); }
p { margin: 0 0 14px; }

.lede { max-width: 40ch; color: var(--ink-2); font-size: 20px; line-height: 1.45; }
.updated { margin-top: 18px; color: var(--ink-2); font-size: 14px; }

.fact-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  margin: 48px 0 56px;
}

.fact { padding-top: 14px; border-top: 2px solid var(--accent); }
.fact strong, .fact span { display: block; }
.fact strong { font: 400 22px/1.2 var(--serif); }
.fact span { margin-top: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.45; }

.document { margin-top: 48px; }
.document section { padding: 36px 0; border-top: 1px solid var(--line); }
.document section:first-child { border-top: 0; padding-top: 0; }
.document p, .document li { color: var(--ink-2); }
.document p strong, .document li strong { color: var(--ink); }
.document ul { margin: 12px 0 0; padding-left: 1.25em; }
.document li + li { margin-top: 8px; }
.document li::marker { color: var(--accent); }

.contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 48px 0;
  padding: 24px 28px;
  border-radius: 20px;
  color: var(--field-ink);
  background: var(--field);
}

.contact-card h2 { margin-bottom: 4px; font-size: 26px; }
.contact-card p { margin: 0; opacity: 0.86; font-size: 15px; }
.contact-card a { display: inline-flex; align-items: center; min-height: 44px; flex: none; color: var(--field-ink); font-weight: 600; }

.task-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }

summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 16px 44px 16px 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  position: absolute;
  right: 4px;
  color: var(--accent);
  content: "+";
  font-size: 26px;
  font-weight: 400;
  transition: transform var(--t-move) var(--ease-out);
}

details[open] summary::after { transform: rotate(45deg); }

:root { interpolate-size: allow-keywords; }

details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--t-move) var(--ease-out), content-visibility var(--t-move) allow-discrete;
}

details[open]::details-content { block-size: auto; }
details > div { max-width: 62ch; padding: 0 44px 24px 0; color: var(--ink-2); }

.legal-summary {
  margin: 40px 0 16px;
  padding: 20px 24px;
  border-radius: 16px;
  color: var(--ink-2);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  width: var(--width);
  margin: 0 auto;
  padding: 40px 0 max(56px, env(safe-area-inset-bottom));
  color: var(--field-ink);
}

.site-footer :focus-visible { outline-color: var(--field-ink); }
.site-footer .mark { width: 64px; height: auto; fill: currentColor; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: currentColor; font-size: 15px; text-decoration: none; opacity: 0.82; }
.site-footer nav a:hover, .site-footer nav a:focus-visible { opacity: 1; }
@media (prefers-contrast: more) { .site-footer nav a { opacity: 1; } }

@media (max-width: 640px) {
  .page-shell { width: calc(100% - 40px); padding: 56px 0 88px; }
  .lede { font-size: 18px; }
  .fact-strip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .contact-card { align-items: flex-start; flex-direction: column; }
  .site-nav a { padding: 0 9px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  summary::after { transition: none; }
}

@media print {
  .site-header, .site-footer nav, .skip-link { display: none; }
  body, .site-footer { color: #000; background: #fff; }
  .page-shell { width: 100%; padding: 0; box-shadow: none; clip-path: none; }
}

/* Nav: one shared highlight glides to the hovered or focused item and rests on the
   current page. Links only change colour; the pill carries the motion. */
[data-pill-nav] { position: relative; isolation: isolate; }

.nav-pill {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: var(--w, 0);
  height: 36px;
  border-radius: 999px;
  background: rgb(255 255 255 / 13%);
  opacity: 0;
  transform: translate(var(--x, 0), -50%);
  transition:
    transform var(--t-move) var(--ease-out),
    width var(--t-move) var(--ease-out),
    opacity var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  pointer-events: none;
}

.nav-pill.is-visible { opacity: 1; }
.nav-pill.is-instant { transition: none; }
.nav-pill.is-focus { box-shadow: 0 0 0 2px var(--field-ink); }
.has-pill a:focus-visible { outline: none; }

[data-pill-nav] a {
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-press) var(--ease-out);
}

[data-pill-nav] a:active { transform: scale(0.97); }

/* Text links draw their underline in from the left. */
.text-link,
.document a,
.faq-contact a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--t-move) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover,
  .document a:hover,
  .faq-contact a:hover { background-size: 100% 1px; }
}

.text-link:focus-visible,
.document a:focus-visible,
.faq-contact a:focus-visible { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 0ms; --t-fast: 0ms; --t-move: 0ms; }
}