/* Reflexmark — reflexmark.com · StrongMocha House System v2 · Register: FOUNDRY
   Mirror of ~/Dev/Design_System/tokens/house.css + tokens/foundry.css (source of truth there).
   Accent: Roast #E4581F — registry N°001 (Thorsten Meyer AI) rendered, not redrawn (Law I).
   Text on roast fills is roast ink #17130E (5.11:1 AA); white on roast is 3.68:1 and is NOT used.
   Self-hosted fonts only. No CDNs, no external requests. */

/* ---------- fonts (copied from ~/Dev/Design_System/brand/fonts/) ---------- */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; src: url('fonts/Fraunces-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; src: url('fonts/Fraunces-400i.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 900; src: url('fonts/Fraunces-900.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; src: url('fonts/IBMPlexMono-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; src: url('fonts/IBMPlexMono-500.woff2') format('woff2'); font-display: swap; }

/* ---------- house layer (tokens/house.css) ---------- */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: 96px;
  --ease: cubic-bezier(0.2, 0, 0, 1); --dur: 180ms;
  --shell-max: 1200px; --measure-max: 66ch;

  /* Geometry the ink planes share with the shell grid, so a plane's open edge
     always lands in the gutter between the two columns at every viewport width.
     A fixed percentage cannot do this: the shell caps at 1200px while the outer
     gutters keep growing, so the column boundary keeps moving. */
  --gutter: max(0px, (100vw - 1200px) / 2);
  --pad: clamp(16px, 4vw, 40px);
  --gap: clamp(24px, 4vw, 64px);
  --inner: calc(min(100vw, 1200px) - 2 * var(--pad) - var(--gap));
}
.u-label { font-family: var(--font-label); font-size: 11px; font-weight: var(--label-weight, 500); letter-spacing: .15em; text-transform: uppercase; }
.u-tnum { font-variant-numeric: tabular-nums; }
.u-rule-hard { border-top: 2px solid var(--ink); }
.u-rule-soft { border-top: 1px solid var(--line); }
.attribution { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-label); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.attribution::before { content: ""; width: 7px; height: 7px; background: var(--group-accent); flex: none; }
.attribution b { color: var(--ink); font-weight: 600; }
.attribution:hover, .attribution:hover b { color: var(--group-accent); }
.reg-no { font-family: var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: .1em; }

/* ---------- register: FOUNDRY (tokens/foundry.css) ---------- */
.reg-foundry {
  --paper: #17130E;        /* roast ink */
  --card:  #1F1A13;
  --panel: #241E16;
  --ink:   #F2EDE0;        /* cream */
  --muted: #A79C87;
  --agate: #877D69;
  --line:  #383024;
  --group-accent: #C9A24B; /* brass — house, ≤10% of surface */
  --group-accent-contrast: #17130E;
  --ember: #B4552D;
  /* child accent, Law VI — one accent, everywhere */
  --child-accent: #E4581F;
  --child-accent-contrast: #17130E;
  --child-accent-soft: #F07A45;

  --font-display: 'Fraunces', Georgia, serif;
  --font-ui:      'Fraunces', Georgia, serif;
  --font-label:   'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-data:    'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --label-weight: 400;
  --radius: 0px;

  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
/* the house's ONE sanctioned gradient (Law III) */
.reg-foundry .hero-lift { background: radial-gradient(90% 120% at 50% -20%, #2A2114 0%, var(--paper) 60%); }

/* ---------- base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; min-width: 0; }
img, video, svg { max-width: 100%; }
a { color: var(--child-accent-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 900; line-height: 1.06; letter-spacing: -0.015em; margin: 0; overflow-wrap: break-word; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--child-accent); letter-spacing: 0; }
p { margin: 0 0 1em; max-width: var(--measure-max); }
p:last-child { margin-bottom: 0; }
.shell { max-width: var(--shell-max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.kicker { font-family: var(--font-label); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.kicker::before { content: ""; width: 7px; height: 7px; background: var(--child-accent); flex: none; }
.lede { font-size: clamp(1.08rem, 1.2vw + .65rem, 1.35rem); line-height: 1.5; color: var(--ink); max-width: 52ch; }
.muted { color: var(--muted); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--child-accent); color: var(--child-accent-contrast); font-family: var(--font-label); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 14px 18px; text-decoration: none; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--child-accent-soft); outline-offset: 3px; }
/* [hidden] must beat any display: rule a component sets, or elements the
   markup hides stay visible when JavaScript never runs to unhide them. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; font-family: var(--font-label); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--child-accent); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn--primary { background: var(--child-accent); color: var(--child-accent-contrast); font-weight: 500; }
.btn--primary:hover { background: var(--child-accent-soft); border-color: var(--child-accent-soft); color: var(--child-accent-contrast); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-3); }

/* ---------- header / nav ---------- */
.site-header { border-bottom: 1px solid var(--line); position: relative; z-index: 20; background: var(--paper); }
.site-header .shell { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 72px; }
.wordmark { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.2rem, 2.4vw, 1.45rem); letter-spacing: -0.025em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap; }
.wordmark i { width: 10px; height: 10px; background: var(--child-accent); display: inline-block; flex: none; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { font-family: var(--font-label); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 0 11px; min-height: 44px; display: inline-flex; align-items: center; transition: color var(--dur) var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a.nav-cta { color: var(--child-accent-soft); }
.menu-btn { display: none; min-height: 44px; min-width: 44px; padding: 0 14px; background: transparent; color: var(--ink); border: 1px solid var(--line); font-family: var(--font-label); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--card); border-bottom: 1px solid var(--line); padding: var(--sp-1) 0; }
  .nav.is-open { display: flex; }
  .nav a { padding: 0 clamp(16px, 4vw, 40px); min-height: 48px; }
  .no-js .nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; border: 0; background: transparent; padding: 0 0 var(--sp-1); }
  .no-js .nav a { padding: 0 11px; }
}

/* ---------- media plate (video bands) ----------
   Every plate keeps a solid --panel ground, so a section looks finished
   even when its clip has not been delivered yet.

   The overlay system is three FLAT colour fills — never blur, never glass,
   never a gradient (Law III):
     .wash       a light flat fill over the whole frame, so the footage reads
                 as footage. Default .30.
     .ink-plane  a heavier flat plane, bleeding to one viewport edge, that
                 carries the type. Its open edge is a hairline, so the split
                 reads as a deliberate rule rather than a soft fade.
     .ink-band   the same idea turned horizontal, for the interlude title card.
   Alphas are measured, not guessed — see _verify/REPORT.md. */
.plate { position: absolute; inset: 0; z-index: 0; background: var(--panel); overflow: hidden; }
.plate video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wash { position: absolute; inset: 0; z-index: 1; background: rgba(23, 19, 14, var(--wash, .30)); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--panel); border-bottom: 1px solid var(--line); min-height: min(88vh, 860px); display: flex; align-items: flex-end; padding: clamp(96px, 16vw, 200px) 0 clamp(40px, 6vw, 80px); --wash: .30; }
.hero .shell { position: relative; z-index: 2; }
/* the type plane: full height, bleeding off the left edge, hairline on the open side */
.hero .ink-plane { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: calc(var(--gutter) + var(--pad) + var(--inner) * 0.625 + var(--gap) / 2); background: rgba(23, 19, 14, .70); border-right: 1px solid rgba(167, 156, 135, .38); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.hero h1 { font-size: clamp(2.5rem, 7.2vw + .2rem, 6rem); }
.hero .lede { margin-top: var(--sp-3); }
.hero .btn-row { margin-top: var(--sp-4); }
/* the aside sits out on the open side of the frame, so it carries its own plane */
.hero-aside { border-left: 1px solid var(--child-accent); background: rgba(23, 19, 14, .82); padding: var(--sp-2) var(--sp-3); color: var(--muted); font-size: .95rem; max-width: 40ch; }
.hero-aside b { display: block; color: var(--ink); font-family: var(--font-label); font-weight: 500; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 10px; }
.hero-aside p { margin: 0; max-width: none; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* phone: the type covers the whole frame, so the plane does too — heavier
     than the desktop plane, still lighter than the old full-bleed scrim */
  .hero .ink-plane { width: 100%; border-right: 0; background: rgba(23, 19, 14, .78); }
  .hero-aside { border-left: 0; border-top: 1px solid var(--child-accent); background: none; padding: var(--sp-2) 0 0; max-width: none; }
}

.telemetry { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--agate); font-family: var(--font-label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--agate); font-variant-numeric: tabular-nums; }
.telemetry b { color: var(--muted); font-weight: 500; }

/* ---------- sections ---------- */
.section { padding: clamp(48px, 7vw, 100px) 0; border-bottom: 1px solid var(--line); }
.section--flush { border-bottom: 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--sp-3) var(--sp-5); align-items: end; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head h2 { font-size: clamp(1.85rem, 3.4vw + .4rem, 3rem); }
.section-head p { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }

/* ---------- media section: the clip runs, the type sits on a plane ----------
   .shell becomes a two-track grid: the copy lives in one track, the other
   track is left open so the footage is visible at close to full strength.
   The plane behind the copy bleeds off the nearer viewport edge. */
.section--media { position: relative; overflow: hidden; background: var(--panel); --sec-pad: clamp(48px, 7vw, 100px); --wash: .30; padding: var(--sec-pad) 0; }
.section--media > .shell { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.section--media .media-col { grid-column: 1; min-width: 0; position: static; }
.section--media .section-head { grid-template-columns: 1fr; align-items: start; }
.section--media .section-head p { color: var(--ink); }
.media-copy { max-width: 60ch; }
.media-copy p { color: var(--ink); }
/* the plane — a flat fill bleeding to the left viewport edge, hairline on the open side */
.section--media .ink-plane { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: calc(var(--gutter) + var(--pad) + var(--inner) * 0.6 + var(--gap) / 2); background: rgba(23, 19, 14, var(--plane, .79)); border-right: 1px solid rgba(167, 156, 135, .38); }
/* mirrored variant, so three media sections in a row do not march in step */
.section--media--right > .shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.section--media--right .media-col { grid-column: 2; }
.section--media--right .ink-plane { left: auto; right: 0; width: calc(100vw - (var(--gutter) + var(--pad) + var(--inner) * 0.4 + var(--gap) / 2)); border-right: 0; border-left: 1px solid rgba(167, 156, 135, .38); }
/* the shell grid must use the same gap the plane geometry assumes */
.section--media > .shell, .hero-grid { gap: var(--gap); }
@media (max-width: 900px) {
  .section--media > .shell, .section--media--right > .shell { grid-template-columns: 1fr; }
  .section--media .media-col, .section--media--right .media-col { grid-column: 1; }
  .section--media .ink-plane { width: 100%; left: 0; right: 0; border-right: 0; border-left: 0; background: rgba(23, 19, 14, var(--plane-phone, .80)); }
}

/* ---------- interlude: a full-bleed title card ----------
   The clip runs at near full strength; one line of display type sits on a
   flat horizontal band with a hairline top and bottom. */
.interlude { position: relative; overflow: hidden; background: var(--panel); border-bottom: 1px solid var(--line); --wash: .26; min-height: min(70vh, 700px); display: flex; align-items: center; padding: clamp(56px, 10vw, 120px) 0; }
/* the band wraps the line, so it is always exactly as tall as the type it carries */
.interlude .ink-band { position: relative; z-index: 2; width: 100%; background: rgba(23, 19, 14, .80); border-top: 1px solid rgba(167, 156, 135, .38); border-bottom: 1px solid rgba(167, 156, 135, .38); padding: clamp(28px, 5vw, 56px) 0; }
.interlude h2 { font-size: clamp(2rem, 5.4vw + .3rem, 4.4rem); max-width: 22ch; }
.interlude em { color: var(--child-accent-soft); }
@media (max-width: 640px) { .interlude { min-height: 52vh; } .interlude .ink-band { background: rgba(23, 19, 14, .84); } }

/* ---------- contrast over a moving plate ----------
   Accent and the faintest greys are lifted; every string was measured against
   the brightest sampled frame of its own clip (see _verify/REPORT.md). */
.hero em, .section--media em { color: var(--child-accent-soft); }
/* agate is too faint once a warm frame lifts the plane — over footage it goes muted */
.section--media .code-note, .interlude .code-note { color: var(--muted); }
.hero .telemetry, .section--media .telemetry { color: var(--muted); }
.hero .kicker::before, .section--media .kicker::before, .interlude .kicker::before { background: var(--child-accent-soft); }


/* ---------- question-type ledger ---------- */
.types { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.types > li { display: grid; grid-template-columns: 120px minmax(0, .75fr) minmax(0, 1.45fr); gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.types .t-name { font-family: var(--font-label); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--child-accent); }
.types .t-what { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; line-height: 1.25; }
.types .t-out { color: var(--muted); font-size: .97rem; margin: 0; max-width: none; }
@media (max-width: 860px) { .types > li { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- step ledger ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.steps > li { list-style: none; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-top: 1px solid var(--line); min-width: 0; }
.steps > li + li { border-left: 1px solid var(--line); padding-left: var(--sp-3); }
.steps .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .25em; color: var(--group-accent); }
.steps h3 { font-size: 1.2rem; margin: var(--sp-1) 0 8px; }
.steps p { color: var(--muted); margin: 0; font-size: .95rem; max-width: none; }
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps > li:nth-child(odd) { border-left: 0; padding-left: 0; } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } .steps > li + li { border-left: 0; padding-left: 0; } .steps > li { padding-right: 0; } }

/* ---------- code / wire example ---------- */
.wire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.wire > figure { margin: 0; background: var(--paper); padding: var(--sp-3); min-width: 0; }
.wire figcaption { font-family: var(--font-label); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--agate); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: 10px; }
.wire figcaption::before { content: ""; width: 7px; height: 7px; background: var(--group-accent); flex: none; }
pre { margin: 0; overflow-x: auto; font-family: var(--font-data); font-size: 12.5px; line-height: 1.7; color: var(--ink); -webkit-overflow-scrolling: touch; }
pre code { font: inherit; white-space: pre; }
.code-note { font-family: var(--font-label); font-size: 11px; line-height: 1.7; letter-spacing: .12em; text-transform: uppercase; color: var(--agate); margin-top: var(--sp-2); max-width: 80ch; }
@media (max-width: 1024px) { .wire { grid-template-columns: 1fr; } }
code.chip { font-family: var(--font-data); font-size: .88em; background: var(--card); border: 1px solid var(--line); padding: 1px 6px; white-space: nowrap; }

/* ---------- surface grid (agent surfaces) ---------- */
.surfaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.surfaces > article { background: var(--paper); padding: var(--sp-3); min-width: 0; }
.surfaces h3 { font-size: 1.15rem; margin-bottom: 8px; }
.surfaces .u-label { color: var(--child-accent); display: block; margin-bottom: 10px; }
.surfaces p { color: var(--muted); font-size: .95rem; margin: 0; max-width: none; }
.surfaces pre { margin-top: var(--sp-2); font-size: 12px; }
@media (max-width: 760px) { .surfaces { grid-template-columns: 1fr; } }

/* ---------- KPI row ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); border-top: 2px solid var(--ink); padding-top: var(--sp-3); }
.kpis > div { min-width: 0; }
.kpis .v { font-family: var(--font-display); font-weight: 900; font-variant-numeric: tabular-nums; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; display: block; }
.kpis .k { display: block; margin-top: 10px; color: var(--muted); font-family: var(--font-label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
@media (max-width: 760px) { .kpis { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* ---------- principles ---------- */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.principles article { border-top: 1px solid var(--child-accent); padding-top: var(--sp-2); min-width: 0; }
.principles h3 { font-size: 1.25rem; margin-bottom: 8px; }
.principles p { color: var(--muted); margin: 0; font-size: .97rem; max-width: none; }
@media (max-width: 860px) { .principles { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* ---------- status note ---------- */
.notice { border-left: 2px solid var(--ember); padding: 14px 18px; background: var(--card); color: var(--muted); margin: var(--sp-3) 0; max-width: var(--measure-max); }
.notice b { color: var(--ink); }
.notice p { max-width: none; }
.notice p + p { margin-top: .7em; }

/* ---------- faq ---------- */
.faq { border-top: 2px solid var(--ink); max-width: 840px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: 18px 0; min-height: 44px; font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-data); color: var(--child-accent); font-size: 1.25rem; flex: none; transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); margin: 0 0 18px; }

/* ---------- cta band ---------- */
.cta-band { padding: clamp(56px, 8vw, 116px) 0; text-align: center; }
.cta-band h2 { font-size: clamp(2rem, 4.6vw + .5rem, 3.8rem); margin: 0 auto var(--sp-2); max-width: 18ch; }
.cta-band p { margin: 0 auto var(--sp-3); color: var(--muted); }
.cta-band .btn-row { justify-content: center; margin-top: 0; }
.cta-band .kicker { justify-content: center; }
.cta-band .mail { font-family: var(--font-label); font-size: 13px; letter-spacing: .08em; display: inline-block; margin-top: var(--sp-3); word-break: break-word; }

/* ---------- prose pages ---------- */
.page-head { padding: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw + .5rem, 3.8rem); }
.page-head .lede { margin-top: var(--sp-2); }
.prose { padding: clamp(40px, 6vw, 76px) 0; }
.prose .shell > * { max-width: 72ch; }
.prose h2 { font-size: 1.45rem; margin: var(--sp-4) 0 var(--sp-1); }
.prose .shell > h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.12rem; margin: var(--sp-3) 0 6px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: 6px 0; max-width: var(--measure-max); }
.prose .updated { font-family: var(--font-label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--agate); margin-bottom: var(--sp-3); }
.address { font-style: normal; line-height: 1.75; }
.contact-card { border: 1px solid var(--line); padding: var(--sp-3); display: grid; gap: 8px; max-width: 560px; }
.contact-card .u-label { color: var(--agate); }
.contact-card a.big { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.15rem, 3.6vw, 1.9rem); color: var(--ink); text-decoration: none; word-break: break-word; line-height: 1.2; }
.contact-card a.big:hover { color: var(--child-accent-soft); }
.definitions dt { font-family: var(--font-display); font-weight: 900; margin-top: var(--sp-2); }
.definitions dd { margin: 4px 0 0; color: var(--muted); max-width: var(--measure-max); }
.tablewrap { overflow-x: auto; margin: var(--sp-3) 0; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--agate); border-bottom-color: var(--ink); border-bottom-width: 2px; }

/* ---------- 404 ---------- */
.gone { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: clamp(56px, 10vw, 120px) 0; }
.gone h1 { font-size: clamp(2.8rem, 11vw, 7rem); margin: var(--sp-2) 0; }
.gone p { margin-left: auto; margin-right: auto; }
.gone .btn-row { justify-content: center; }
.gone .code { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--child-accent); letter-spacing: .4em; font-size: 12px; text-transform: uppercase; }

/* ---------- footer ---------- */
.site-footer { padding: var(--sp-5) 0 var(--sp-4); border-top: 1px solid var(--line); }
.site-footer .top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.site-footer .top p { color: var(--muted); font-size: .93rem; margin: 12px 0 0; }
.site-footer h2 { font-family: var(--font-label); font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--agate); margin: 0 0 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; font-size: .95rem; }
.site-footer li a:hover { color: var(--ink); }
.site-footer .bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); padding-top: var(--sp-3); }
.registry-chip { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-label); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.hallmark { width: 26px; height: 26px; border: 2px solid var(--ink); display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 11px; color: var(--ink); position: relative; flex: none; }
.hallmark::after { content: ""; position: absolute; inset: 2px; border: 1px solid var(--group-accent); }
.copy { font-family: var(--font-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--agate); }
@media (max-width: 860px) { .site-footer .top { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .site-footer .top > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer .top { grid-template-columns: 1fr; } }

/* ---------- motion (DESIGN.md §Motion — 150–200ms, opacity & transform only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(10px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  .r-1 { transition-delay: 0ms; } .r-2 { transition-delay: 90ms; } .r-3 { transition-delay: 180ms; } .r-4 { transition-delay: 270ms; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
/* With JavaScript off nothing is ever hidden. */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- phone: give code blocks as much room as possible ----------
   They stay horizontally scrollable rather than wrapping: broken JSON
   and a broken shell line are worse than a scrollbar. */
@media (max-width: 640px) {
  .wire > figure, .surfaces > article { padding: var(--sp-2); }
  pre { font-size: 11.5px; }
}

/* ---------- surfaces inside a media column ----------
   The copy column is 60% of the shell, which is too narrow for two cards to
   hold the CLI line without clipping it, so they stack into full-width bands.
   The clip gets more of the section in exchange. */
.section--media .surfaces { grid-template-columns: 1fr; }

/* ---------- analytics opt-out control (privacy page) ---------- */
.optout { border-left: 2px solid var(--child-accent); padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; display: grid; gap: var(--sp-2); justify-items: start; }
.optout .optout-state { margin: 0; color: var(--muted); font-size: .95rem; }
button.btn { cursor: pointer; font-family: var(--font-label); }