/* Tokens: see DESIGN.md. Do not substitute values. */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url(/fonts/bricolage-700.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400 600; font-display: swap; src: url(/fonts/sourceserif4.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/sourceserif4-italic.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/fonts/plexmono-500.woff2) format("woff2"); }

:root {
  --ink: #12302F;
  --surface: #F5F7EF;
  --accent: #AECD5A;
  --gold: #E4C448;
  --teal: #22494B;
  --muted: #55645F;
  --rule: color-mix(in srgb, var(--ink) 18%, transparent);

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(16px, 5vw, 72px);
  --measure: 38rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--body);
  font-optical-sizing: auto;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--gold); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  background: var(--gold); color: var(--ink); padding: 8px 12px;
  font: 500 0.875rem var(--mono);
}
.skip:focus { top: 12px; }

h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
.mono { font-family: var(--mono); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.01em; line-height: 1.5; }

/* ---------- The field: the hero image's gradient, made live ---------- */
.field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(150deg, #3F7F5F 0%, var(--teal) 55%, var(--ink) 100%);
}
.field__light {
  position: absolute; z-index: -2;
  left: 0; top: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
/* Gold leads; lime trails it with more inertia (momentum). */
.field__light--gold {
  width: 95vmax; height: 95vmax;
  background: radial-gradient(closest-side, rgb(228 196 72 / 0.95), rgb(228 196 72 / 0.45) 45%, rgb(228 196 72 / 0) 100%);
}
.field__light--lime {
  width: 120vmax; height: 120vmax;
  background: radial-gradient(closest-side, rgb(174 205 90 / 0.7), rgb(114 169 100 / 0.35) 50%, rgb(114 169 100 / 0) 100%);
}
.field__light--deep {
  width: 110vmax; height: 110vmax;
  transform: translate(35vw, 30vh);
  background: radial-gradient(closest-side, rgb(18 48 47 / 0.75), rgb(18 48 47 / 0) 100%);
}
/* Keeps white text legible wherever the light sits. */
.field::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(18 48 47 / 0.66) 0%, rgb(18 48 47 / 0.52) 52%, rgb(18 48 47 / 0.08) 88%);
}
@media (max-width: 720px) {
  .field::after { background: rgb(18 48 47 / 0.56); }
}

/* ---------- Header ---------- */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px var(--gutter) 0;
}
.masthead__logo { display: block; width: clamp(170px, 22vw, 230px); }
.masthead__logo img { width: 100%; height: auto; }
.masthead nav { display: flex; gap: clamp(14px, 3vw, 32px); }
.masthead nav a { text-decoration: none; color: rgb(255 255 255 / 0.88); }
.masthead nav a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 560px) {
  .masthead { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Hero ---------- */
.hero {
  min-height: min(92vh, 860px);
  display: flex; flex-direction: column;
}
.hero__body {
  margin-top: auto;
  padding: clamp(72px, 14vh, 160px) var(--gutter) clamp(56px, 10vh, 112px);
  max-width: 62rem;
}
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 5.2rem); max-width: 17ch; }
.hero__lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); max-width: 34rem; margin: 28px 0 40px; color: rgb(255 255 255 / 0.94); }

.button {
  display: inline-block;
  padding: 15px 22px 14px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--ink);
  font: 700 1.0625rem/1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color 160ms ease;
}
.button:hover { background: #C2DD73; }

/* ---------- Ledger rows (the one primitive) ---------- */
.section { padding: clamp(64px, 11vw, 128px) 0 0; }
.section__head { padding: 0 var(--gutter) clamp(28px, 4vw, 44px); max-width: 52rem; }
.section__head h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.section__head p { color: var(--muted); max-width: var(--measure); margin: 18px 0 0; }

.ledger { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.ledger > li {
  display: grid;
  grid-template-columns: minmax(150px, 15rem) minmax(0, var(--measure));
  gap: 12px clamp(24px, 5vw, 80px);
  padding: 26px var(--gutter) 30px;
  border-top: 1px solid var(--rule);
}
.ledger > li:last-child { border-bottom: 1px solid var(--rule); }
.ledger__label { margin: 0; padding-top: 5px; color: var(--teal); }
.ledger p { margin: 0; }
.ledger p + p { margin-top: 0.75em; }
/* Real sequence, so it earns its numbers. */
.ledger--steps .ledger__label::before {
  counter-increment: step;
  content: counter(step) ".";
  display: inline-block; min-width: 2ch; margin-right: 0.6ch; color: var(--muted);
}
@media (max-width: 720px) {
  .ledger > li { grid-template-columns: 1fr; padding-top: 22px; padding-bottom: 26px; }
  .ledger__label { padding-top: 0; }
}

/* ---------- Closing contact band (second, last appearance of the field) ---------- */
.contact { margin-top: clamp(80px, 12vw, 144px); }
.contact__body { padding: clamp(72px, 11vw, 136px) var(--gutter); max-width: 52rem; }
.contact h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 16ch; }
.contact__body > p { max-width: 32rem; margin: 22px 0 36px; color: rgb(255 255 255 / 0.94); }

/* ---------- Footer ---------- */
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px;
  padding: 28px var(--gutter) 36px;
  color: var(--muted);
}
.footer p { margin: 0; }
.footer nav { display: flex; gap: 24px; }

/* ---------- Legal pages: static ink band, readable column ---------- */
.band { background: var(--ink); }
.band .masthead { padding-bottom: 28px; }
.doc { padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(64px, 9vw, 112px); }
.doc > * { max-width: var(--measure); }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.doc h1 + p { font-family: var(--mono); font-weight: 500; font-size: 0.8125rem; color: var(--muted); margin: 14px 0 40px; }
.doc h2 { font-size: 1.6rem; letter-spacing: -0.015em; margin: 2.4em 0 0.5em; padding-top: 1.1em; border-top: 1px solid var(--rule); }
.doc h3 { font: 600 1.125rem/1.4 var(--body); margin: 1.6em 0 0.3em; }
.doc p, .doc li { overflow-wrap: anywhere; }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: 0.4em; }
.doc + .footer { border-top: 1px solid var(--rule); }

/* 404 */
.lost { padding: clamp(64px, 12vw, 140px) var(--gutter); }
.lost h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.lost p { max-width: var(--measure); }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}