/* Mantafarm site — layout system.
 *
 * The chassis is carried forward from the internal review build: the
 * dark hero over a light paper body, the mono eyebrow / display headline pairing.
 *
 * Every colour comes from design/colors.css, which is generated. There are no
 * hex literals in this file — if you need a colour that is not a token, the
 * token layer is what changes.
 *
 * The rule this file exists to enforce: a program's `--accent` may fill, ring
 * and rule, but TYPE uses `--accent-ink` (its onPaper sibling) on paper and
 * `--accent-ink-dark` (onDark) on a dark band. Six of the nine accents fail
 * WCAG AA as small type on paper; the review page this was transferred from
 * had all six of its own labels unreadable for exactly this reason.
 */

/* Self-hosted faces (Iter H/I/J typography, codified): Lexend for display,
   Routed Gothic for in-scene/HUD ink — a drafting face is the correct
   register for ink laid over a graticule. Eurostile's web licence is
   unconfirmed (SPEC §6) and it is deliberately NOT loaded. */
@font-face {
  font-family: "Lexend"; src: url("fonts/lexend-var.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Routed Gothic"; src: url("fonts/routed-gothic.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Routed Gothic Wide"; src: url("fonts/routed-gothic-wide.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}

:root {
  --display: "Lexend", "Avenir Next", "Century Gothic", Futura, sans-serif;
  --body: Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --hud: "Routed Gothic", "SFMono-Regular", Consolas, monospace;
  --shell: min(1420px, calc(100vw - 48px));
  --topbar-h: 66px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; background: var(--paper); scroll-padding-top: var(--topbar-h) }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 15px/1.55 var(--body); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin-top: 0 }
a { color: inherit }
button, input, select { font: inherit }
button { cursor: pointer }

/* min(..., 100%) is load-bearing. In Iter 02 the section WAS the shell
   (`<section class="capability-section shell">`), so its padding and its width
   were one box. Iter 03 nests `<section class="band"><div class="shell">`, and
   .band adds 4vw of its own padding — so a shell sized from 100vw overflowed
   the band's content box and the page scrolled sideways by 25px at 1425. */
.shell { width: min(var(--shell), 100%); margin-inline: auto }
.skip {
  position: fixed; top: -60px; left: 12px; z-index: 1000; padding: 10px 14px;
  background: var(--biogenic); color: var(--deep-ui); font: 700 11px var(--mono);
}
.skip:focus { top: 12px }

:focus-visible { outline: 2px solid var(--surface); outline-offset: 2px }

/* ── topbar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 100; height: var(--topbar-h);
  display: grid; grid-template-columns: 310px 1fr auto; align-items: center;
  background: color-mix(in srgb, var(--abyss) 95%, transparent);
  border-bottom: 1px solid var(--line-on-dark); color: var(--ink-on-dark);
  backdrop-filter: blur(16px);
}
.mark {
  height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 20px;
  border-right: 1px solid var(--line-on-dark); text-decoration: none;
}
/* The logomark carries its own brand colours — the gold gradient and the
   tropic ribs are fixed, not tokenised, so it is an <img> rather than inline
   SVG: no id collisions with the baked world's gradients, one cached fetch
   shared with the icon, and no 11 KB of paths in the HTML. */
.mark .logomark {
  width: 54px; height: 32px; display: block; flex: none;
}
.mark b { display: block; font: 600 12px var(--display); letter-spacing: .04em }
.mark small {
  display: block; color: var(--ink-on-dark-dim); font: 8px var(--mono); letter-spacing: .1em;
}

.sitenav { justify-self: center; display: flex; height: 100% }
.sitenav a {
  display: flex; align-items: center; padding: 0 22px; text-decoration: none;
  color: var(--ink-on-dark-dim); font: 600 9px var(--mono); letter-spacing: .08em;
  text-transform: uppercase; border-bottom: 2px solid transparent;
}
.sitenav a:hover { color: var(--ink-on-dark) }
.sitenav a.here { color: var(--biogenic); border-bottom-color: var(--biogenic) }

.top-actions { height: 100%; display: flex }
.top-actions .cta {
  display: flex; align-items: center; padding: 0 20px; text-decoration: none;
  background: var(--biogenic); color: var(--deep-ui);
  font: 700 9px var(--mono); letter-spacing: .06em; text-transform: uppercase;
}

/* ── the orbital hero (Iter K — spec held internally) ─────────────────────
   Flat compositing throughout: no preserve-3d, so traps 1–4 (flattened
   subtrees, dropped masks) cannot occur. The stage is the camera's frame;
   the baked world covers it under xMidYMid slice so the projection is never
   distorted. HUD elements live in viewport-anchored zones (SPEC §7.1). */
.orbital { position: relative; background: var(--abyss); color: var(--ink-on-dark) }
.orbital .stage {
  position: relative; overflow: hidden;
  height: clamp(620px, calc(100svh - var(--topbar-h)), 900px);
}
.world-drift { position: absolute; inset: 0 -60px }
.world-drift svg { width: 100%; height: 100%; display: block }
@keyframes world-drift {                    /* flight along the parallel */
  from { transform: translateX(0) } to { transform: translateX(60px) }
}
.world-drift { animation: world-drift var(--world-drift, 240s) linear infinite alternate }
/* legibility scrim for the masthead — plain rgba over a dark ground,
   NOT mix-blend-mode (SPEC trap 2) */
.stage-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--abyss) 62%, transparent) 0%,
    color-mix(in srgb, var(--abyss) 30%, transparent) 38%,
    transparent 58%);
}

/* in-scene ink inherited by the injected world (font only — geometry ink is
   styled by the SVG's own embedded stylesheet, emitted by the generator) */
.camstrip {
  position: absolute; z-index: 3; top: 18px; right: 22px; text-align: right;
  font: 10px/1.7 var(--hud); letter-spacing: .08em; color: var(--ink-on-dark-mute);
  text-transform: uppercase;
}
.camstrip b { display: block; color: var(--ink-on-dark); font-weight: 400 }
.camstrip small { display: block; font-size: 8px; color: var(--ink-on-dark-dim) }

.hero-main {
  position: relative; z-index: 2; max-width: 720px;
  padding: clamp(48px, 9vh, 110px) max(4vw, 36px) 40px;
}
.eyebrow {
  max-width: 760px; display: flex; justify-content: space-between; margin-bottom: 36px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-on-dark);
  color: var(--seafoam); font: 600 8px var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.hero-main h1 {
  max-width: 14ch; margin: 0 0 30px;
  /* Capped at 76px, not 88px. At 88 the headline's last line ran into the
     world's in-scene LIMB label on any viewport around 1400-1500 — measured
     14px of overlap at 1425. Capping clears it by ~40px and reads better on a
     wide screen, where 88px was oversized rather than emphatic. */
  font: 500 clamp(46px, 5.8vw, 76px)/.96 var(--display); letter-spacing: -.045em;
  text-shadow: 0 1px 22px color-mix(in srgb, var(--abyss) 80%, transparent);
}
.hero-main h1 em { color: var(--biogenic); font-style: normal }
.hero-lede {
  max-width: 54ch; margin: 0; color: var(--ink-on-dark-mute); font-size: 16px;
  text-shadow: 0 1px 14px color-mix(in srgb, var(--abyss) 90%, transparent);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px }

.btn {
  display: inline-flex; align-items: center; padding: 13px 18px;
  border: 1px solid var(--line-on-dark); background: transparent; color: inherit;
  text-decoration: none; font: 700 9px var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.btn:hover { border-color: var(--seafoam) }
.btn.primary { background: var(--biogenic); border-color: var(--biogenic); color: var(--deep-ui) }
.btn.primary:hover { background: var(--gold-to); border-color: var(--gold-to) }
.btn.wide { width: 100%; justify-content: center; padding: 15px }

/* ── the hero object: the sea column, right third, running off-frame ──────
   Five-leaf construction approximated in flat CSS: warm rim via layered
   drop-shadows in the sea-of-gold, one radial key-glow behind (SPEC §4).
   The eye lands here last — and the rim is the SAME ink as the primary CTA
   (biogenic/gold), so the reading path terminates on the call to action. */
.column-fig {
  position: absolute; z-index: 2; margin: 0;
  /* Sits inside the right edge rather than bleeding past it. The bleed used
     to be off the BOTTOM, which carried the caption — and with it the
     illustration disclosure — off the stage entirely. */
  right: clamp(10px, 2.2vw, 44px); bottom: 16px;
  width: clamp(340px, 35vmin, 540px);
}
.column-fig::before {
  content: ""; position: absolute; inset: -12% -16%;
  background: radial-gradient(50% 46% at 52% 44%,
    color-mix(in srgb, var(--gold-from) 22%, transparent) 0%,
    color-mix(in srgb, var(--tropic) 10%, transparent) 55%, transparent 75%);
  pointer-events: none;
}
.column-fig img {
  position: relative; width: 100%; height: auto; display: block;
  filter:
    drop-shadow(0 0 1px color-mix(in srgb, var(--gold-to) 60%, transparent))
    drop-shadow(-4px -6px 22px color-mix(in srgb, var(--gold-from) 28%, transparent))
    drop-shadow(0 18px 34px color-mix(in srgb, var(--abyss) 85%, transparent));
}
.phase-ring { position: absolute; inset: 0; overflow: visible; width: 100%; height: 100% }
.phase-ring .pr-orbit {
  fill: none; stroke: var(--tropic); stroke-opacity: .35;
  stroke-width: 1; stroke-dasharray: 3 6;
}
.phase-ring .pr-node circle {
  fill: var(--abyss); stroke: var(--tropic); stroke-width: 1.4;
}
.phase-ring .pr-node text {
  font: 13px var(--hud); letter-spacing: .06em; fill: var(--ink-on-dark);
  paint-order: stroke fill; stroke: var(--abyss); stroke-width: 2.6px; stroke-linejoin: round;
}
.phase-ring .pr-node .pr-idx { font-size: 10px; fill: var(--tropic); letter-spacing: 0 }
.phase-ring .pr-node .pr-gloss { font-size: 10.5px; fill: var(--ink-on-dark-mute) }
.phase-ring .pr-node.harvest circle { stroke: var(--biogenic) }
.phase-ring .pr-node.harvest text { fill: var(--biogenic) }
@keyframes pr-pulse {
  50% { stroke-opacity: .4; r: 11 }
}
.phase-ring .pr-node.active circle {
  stroke: var(--biogenic); fill: color-mix(in srgb, var(--biogenic) 24%, var(--abyss));
  animation: pr-pulse 3s ease-in-out infinite;
}
.phase-ring .pr-node.active .pr-lab { fill: var(--ink-on-dark) }
.phase-ring .pr-node.active .pr-idx { fill: var(--biogenic) }
.column-fig figcaption {
  margin-top: 7px; text-align: right; max-width: 100%;
  font: 8px/1.6 var(--hud); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-on-dark-dim);
}
.column-fig figcaption b { color: var(--gold-to); font-weight: 400 }
#dielReadout { color: var(--seafoam) }

/* ── section heads ──────────────────────────────────────────────────────── */
.band { padding: 100px 4vw }
.section-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 50px;
}
.section-head h2 {
  max-width: 17ch; margin: 0; font: 500 clamp(36px, 4.4vw, 62px)/1 var(--display);
  letter-spacing: -.05em;
}
.section-head > p { max-width: 58ch; margin: 0; color: var(--ink-muted) }
.section-head > div > span, .capture-head > span, .stage-copy > span,
.who-copy > span, .milestone-layout > div > span {
  display: block; margin-bottom: 16px; color: var(--depth);
  font: 700 8px var(--mono); letter-spacing: .13em; text-transform: uppercase;
}

/* ── 01 · desired outcome ───────────────────────────────────────────────── */
.outcome-section { background: var(--paper) }
.outcome-grid {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); border-right: 0;
}
.outcome-card { padding: 34px 30px 38px; border-right: 1px solid var(--line) }
.outcome-card > span {
  display: block; margin-bottom: 26px; color: var(--depth);
  font: 500 21px var(--mono);
}
.outcome-card h3 { margin: 0 0 10px; font: 600 17px var(--display); letter-spacing: -.02em }
.outcome-card p { margin: 0; color: var(--ink-muted); font-size: 13px }

/* ── 02 · current stage ─────────────────────────────────────────────────── */
.stage-section { background: var(--paper-sunk); border-block: 1px solid var(--line) }
.stage-layout { display: grid; grid-template-columns: 1fr 300px; gap: 70px; align-items: start }
.stage-copy h2 {
  max-width: 14ch; margin: 0 0 22px; font: 500 clamp(34px, 4vw, 54px)/1 var(--display);
  letter-spacing: -.05em;
}
.stage-copy > p { max-width: 60ch; margin: 0; color: var(--ink-muted) }
/* the negative claim: bounds every evidence row below it, so it is set as a
   statement of record, not as fine print (ARCHITECTURE.md §5) */
.stage-copy .negative {
  margin-top: 26px; padding: 18px 22px; max-width: 60ch;
  border-left: 2px solid var(--caution);
  background: color-mix(in srgb, var(--caution) 7%, transparent);
  color: var(--ink); font-size: 13px;
}
.stage-facts {
  margin: 0; padding: 0; display: grid; grid-template-columns: 1fr auto;
  border-top: 1px solid var(--line);
}
.stage-facts dt, .stage-facts dd {
  margin: 0; padding: 15px 0; border-bottom: 1px solid var(--line);
  font: 700 8px var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.stage-facts dt { color: var(--ink-muted) }
.stage-facts dd { text-align: right; color: var(--ink) }

/* ── 03 · evidence, as claim → artifact edges ───────────────────────────── */
.evidence-section { background: var(--paper) }
.claims { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line) }
.claim {
  display: grid; grid-template-columns: 300px 1fr; gap: 0; background: var(--paper);
}
.claim-head { padding: 32px 30px; border-right: 1px solid var(--line) }
.claim-head h3 {
  margin: 0 0 8px; font: 600 17px var(--display); letter-spacing: -.02em;
}
.claim-head p { margin: 0; color: var(--ink-muted); font-size: 12px }

.artifacts { margin: 0; padding: 0; list-style: none }
.artifact {
  display: grid; grid-template-columns: 54px 1fr; gap: 4px;
  padding: 22px 30px 22px 22px; border-bottom: 1px solid var(--line);
}
.artifact:last-child { border-bottom: 0 }
.a-n { color: var(--ink-muted); font: 400 12px var(--mono) }
.a-body h4 { margin: 0 0 5px; font: 600 14px var(--display); letter-spacing: -.01em }
.a-body p { margin: 0 0 10px; max-width: 62ch; color: var(--ink-muted); font-size: 12.5px }
.a-meta { display: flex; gap: 8px; flex-wrap: wrap }
.a-kind, .a-tier {
  padding: 3px 8px; border: 1px solid var(--line);
  font: 700 7px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); white-space: nowrap;
}
.a-kind { border-color: var(--depth); color: var(--depth) }
/* external work is someone else's result and never reads as ours */
.artifact[data-kind="external"] { background: var(--paper-sunk) }
.artifact[data-kind="external"] .a-kind {
  border-color: var(--sand); background: var(--sand); color: var(--benthic);
}
.artifact[data-kind="modeled"] .a-kind { border-color: var(--ink-muted); color: var(--ink-muted) }
.a-tier[data-tier="dataroom"] { border-color: var(--caution); color: var(--caution) }
.evidence-foot {
  margin: 18px 0 0; color: var(--ink-muted);
  font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase;
}

/* ── 04 · who is building it ────────────────────────────────────────────
   Paper-sunk, so the rhythm alternates paper (evidence) -> sunk (who) ->
   dark (milestone) and the ask still lands on the one dark band. Reuses the
   .stage-facts dl rather than inventing a second key/value treatment. */
.who-section { background: var(--paper-sunk); border-block: 1px solid var(--line) }
.who-layout { display: grid; grid-template-columns: 1fr 300px; gap: 70px; align-items: start }
.who-copy h2 {
  max-width: 14ch; margin: 0 0 22px; font: 500 clamp(34px, 4vw, 54px)/1 var(--display);
  letter-spacing: -.05em;
}
.who-copy > p { max-width: 60ch; margin: 0; color: var(--ink-mid, var(--ink-muted)) }
.who-link { margin-top: 18px !important }
.who-link a {
  color: var(--depth); font: 700 8px var(--mono); letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--depth) 40%, transparent);
  padding-bottom: 2px;
}
.who-link a:hover { border-bottom-color: var(--depth) }

/* ── 04 · near-term milestone ───────────────────────────────────────────── */
.milestone-section { background: var(--deep-ui); color: var(--ink-on-dark) }
.milestone-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start }
.milestone-layout > div > span { color: var(--seafoam) }
.milestone-layout h2 {
  max-width: 15ch; margin: 0; font: 500 clamp(34px, 4.2vw, 58px)/1 var(--display);
  letter-spacing: -.05em;
}
.milestone-copy > p { max-width: 56ch; margin: 0; color: var(--ink-on-dark-mute) }
.milestone-cta { margin: 30px 0 14px }
.milestone-note { margin: 0; max-width: 52ch; color: var(--ink-on-dark-dim); font-size: 12px }

/* ── interest and opportunity capture ───────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.capture-section { padding: 100px 4vw; display: grid; place-items: center; background: var(--paper) }
.capture {
  width: min(560px, 100%); padding: 44px 40px;
  background: var(--paper-sunk); border: 1px solid var(--line);
}
.capture-head { text-align: center; margin-bottom: 26px }
.capture-head h2 { font: 500 30px/1.1 var(--display); letter-spacing: -.04em; margin-bottom: 12px }
.capture-head p { margin: 0; color: var(--ink-muted); font-size: 12px }

/* the intent selector does all the routing three separate forms would */
.intents {
  margin: 0 0 12px; padding: 0; border: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.intent { position: relative; display: block }
.intent input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.intent span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; padding: 8px 6px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink-muted);
  font: 700 8px var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.intent input:checked + span { border-color: var(--depth); background: var(--depth); color: var(--paper) }
.intent input:focus-visible + span { outline: 2px solid var(--surface); outline-offset: 2px }
.intent-blurb {
  margin: 0 0 24px; padding: 12px 14px; background: var(--paper);
  border-left: 2px solid var(--depth); color: var(--ink-muted);
  font-size: 12px; line-height: 1.5;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.field { display: block; margin-bottom: 14px }
.field[hidden] { display: none }
.field > span {
  display: block; margin-bottom: 6px; color: var(--ink-muted);
  font: 700 8px var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.field input, .field textarea {
  width: 100%; padding: 12px 13px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-size: 14px;
}
.field textarea { resize: vertical; font-family: inherit; line-height: 1.5 }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--depth) }
.field input[aria-invalid="true"] { border-color: var(--caution) }

/* The honeypot. Positioned off-canvas rather than `display: none`, because a
   bot that parses CSS skips a display:none field and fills this one — which is
   the entire point. Never `hidden` and never `required`: a required field a
   sighted user cannot see would block the form for everyone. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; margin: 6px 0 22px }
.check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--depth) }
.check span { color: var(--ink-muted); font-size: 11px; line-height: 1.5 }
.check a { color: var(--depth) }

.capture-note { margin: 14px 0 0; min-height: 1.2em; font: 8px var(--mono); text-align: center }
.capture-note[data-tone="ok"] { color: var(--depth) }
.capture-note[data-tone="err"] { color: var(--caution) }
.capture-alt { margin: 18px 0 0; text-align: center; color: var(--ink-muted); font-size: 11px }
.capture-alt a { color: var(--depth) }


/* ── footer ─────────────────────────────────────────────────────────────── */
.footer {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center;
  padding: 30px 34px; background: var(--abyss); color: var(--ink-on-dark);
}
.footer b { display: block; font: 600 11px var(--display) }
.footer > div span {
  display: block; margin-top: 4px; color: var(--ink-on-dark-dim); font: 7px var(--mono);
}
.footer nav { display: flex; gap: 18px }
.footer nav a {
  color: var(--ink-on-dark-dim); font: 700 8px var(--mono); text-decoration: none;
  text-transform: uppercase; letter-spacing: .06em;
}
.footer nav a:hover { color: var(--biogenic) }
.footer p {
  margin: 0; justify-self: end; max-width: 46ch; text-align: right;
  color: var(--ink-on-dark-dim); font: 9px/1.5 var(--mono);
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1150px) {
  .topbar { grid-template-columns: 250px 1fr auto }
  .orbital .stage {
    height: auto; min-height: 640px; padding-bottom: 40px;
    display: flex; flex-direction: column;
  }
  .camstrip {
    position: relative; order: 0; inset: auto;
    margin: 14px 16px 0; text-align: right;
  }
  .hero-main { order: 1 }
  .column-fig {
    position: relative; order: 2; right: auto; bottom: auto;
    margin: 26px auto 0; width: min(480px, 86vw);
  }
  /* Stacked portrait puts the hero copy directly over the limb glow, which
     is the brightest thing in the world SVG. The landscape scrim (55% → 0 by
     45%) was not enough ground and the lede read through it. */
  .stage-scrim {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--abyss) 90%, transparent) 0%,
      color-mix(in srgb, var(--abyss) 82%, transparent) 46%,
      color-mix(in srgb, var(--abyss) 40%, transparent) 62%,
      transparent 78%);
  }
  /* the baked world's in-scene ink is illegible under a portrait slice-crop —
     the geometry stays as backdrop, the ink zones take over */
  #mf-world text, #mf-world .w-leader { display: none }
  .stage-layout, .who-layout { grid-template-columns: 1fr; gap: 40px }
  .claim { grid-template-columns: 230px 1fr }
  .milestone-layout { grid-template-columns: 1fr; gap: 30px }
}
@media (max-width: 760px) {
  :root { --shell: calc(100vw - 18px) }
  .topbar { height: auto; min-height: 58px; grid-template-columns: 1fr auto }
  .mark { border-right: 0 }
  .sitenav { grid-row: 2; grid-column: 1 / -1; width: 100%; border-top: 1px solid var(--line-on-dark) }
  .sitenav a { flex: 1; justify-content: center; padding: 12px 6px }
  .hero-main { padding: 76px 20px }
  .band, .capture-section { padding: 70px 14px }
  .section-head { grid-template-columns: 1fr; gap: 26px }
  .outcome-grid { grid-template-columns: 1fr; border-right: 1px solid var(--line) }
  .outcome-card { border-right: 0; border-bottom: 1px solid var(--line) }
  .outcome-card:last-child { border-bottom: 0 }
  .claim { grid-template-columns: 1fr }
  .claim-head { border-right: 0; border-bottom: 1px solid var(--line) }
  .artifact { padding: 20px 16px; grid-template-columns: 40px 1fr }
  .capture { padding: 32px 22px }
  /* three intent chips do not fit a phone row at a legible size */
  .intents { grid-template-columns: 1fr }
  .field-row { grid-template-columns: 1fr }
  .footer { grid-template-columns: 1fr; text-align: center }
  .footer nav { justify-content: center; flex-wrap: wrap }
  .footer p { justify-self: center; text-align: center }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
  /* both clocks freeze: the world at drift 0, the diel cycle at φ = 0 —
     app.js checks the same media query for the ring/readout */
}