/* ============================================================================
   Ztakora — the collateral load line for on-chain liabilities
   Editorial visual system: Fraunces display, Schibsted Grotesk body,
   IBM Plex Mono for every number, symbol and label. Grounds are maritime and
   restrained: bone paper, petrol ink, deep sea teal, and one oxide-red that is
   reserved for the load line itself.

   All four fonts are self-hosted variable faces under assets/fonts (SIL OFL).
   Nothing here makes a runtime request, so the page renders identically from
   file://, from a bucket, and from a Vercel deployment.

   Layout contract
   ───────────────
   .band      a full-bleed ground with its own ink set and texture
   .shell     the 1180px content column; .shell--narrow is 800px
   .cols      the grid used inside a band; never nested more than two deep
   Everything is mobile-first at the component level: bands are fluid, and the
   only fixed widths are the gauge and the code column.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: 'Fraunces';
  src: url('./assets/fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('./assets/fonts/schibsted-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./assets/fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./assets/fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./assets/fonts/plex-mono-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ tokens
   Three ink sets, because the page has light and dark bands and a theme
   toggle, and a token that is right on paper is wrong on ink. Each band
   re-declares the same names; every component then reads the names rather than
   hard-coding a colour, which is what lets night mode work without a second
   stylesheet.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* grounds. `--paper` is whatever a card paints in this scope and `--paper-3` the
     outline numeral under it; the hover is `--card` everywhere, so there is no
     middle step. */
  --paper: #f2efe7;
  --paper-3: #dcd6c8;
  --ink: #0b171d;
  --ink-2: #11242c;
  --sea: #10303a;
  --sea-2: #16404c;
  --slate: #1b3944;
  --slate-2: #224855;

  /* accents. Oxide red is the load line and nothing else; if it appears
     anywhere that is not a ceiling, a refusal or a breach it is wrong.
     The three reds are one signal read at three distances from the ground:
     `--sig` is the bright oxide used on fills, strokes and chips where the colour
     itself is the thing being looked at; `--sig-deep` is the same red darkened
     until it carries words on paper (`--sig` measured 4.09:1 on a hovered card,
     which is a paragraph you have to lean at); `--sig-soft` and `--sig-lift` are
     it lightened for the dark water, `--sig-soft` for the band itself at large
     sizes and `--sig-lift` wherever it is a word at body size — on a slate card
     `--sig-soft` sat at 4.01:1. `--brass` is the paper-side of the same problem:
     it carries the role numerals, where the old value sat at 3.44:1. None of
     these moved hue enough to stop reading as the colour it was. */
  --sig: #c0402a;
  --sig-soft: #ee8a75;
  --sig-lift: #f4a48f;
  --sig-deep: #8f2d1c;
  --teal: #126b6f;
  --teal-lift: #7ad3cf;
  --brass: #7a5f24;
  --brass-lift: #e6cd94;

  /* semantic aliases, remapped per band.
     This is a ladder of four weights and every rung of it carries words: `--fg`
     for headings, `--fg-body` for paragraphs, `--fg-mut` for the small labels and
     notes, `--fg-faint` for the kicker, the table heads and the units under a
     figure. The bottom rung used to be a decorative grey that measured 2.94:1 on
     paper and 3.96:1 on slate, which reads as a stylistic choice until someone
     tells you the section numbers are a smudge. AA for text this size is 4.5:1,
     and on these grounds nothing lighter than roughly #556c73 clears it — so the
     ladder is compressed toward dark and the hierarchy is carried by size, weight
     and letter-spacing instead of by wash. `--accent` and `--accent-2` are the
     same rule one layer up: they are the colours that carry *words* in a band —
     an inline `strong`, a link, a section numeral — and so each band answers with
     the version of the signal that clears 4.5:1 on the grounds it paints.
     `build/web-check.mjs` measures every pair in this block against every ground
     in its scope and refuses the build when a word falls below the line. */
  --fg: #14262d;
  --fg-body: #21343b;
  --fg-mut: #35525c;
  --fg-faint: #4a626a;
  --accent: var(--sig-deep);
  /* The stroke an outline numeral is drawn with. The fill behind it is the colour of the
     card — these numerals are hollow figures — so the only readable ink is the 1px stroke,
     and it takes the brass strength the ground allows exactly as `--accent` takes the red.
     `--brass` as a literal here read 2.89:1 on night paper, and a numeral is a word. */
  --stroke: var(--brass);
  /* The ink printed *on* an `--accent` ground — the section numeral badge in a kicker.
     It is a token and not a literal because the badge inverts with the ladder: cream on
     deep oxide in a light scope, near-black on lifted salmon in a dark one. It belongs
     here rather than in three `.band--* .kicker` rules because an instrument that paints
     its own dark ground inside a paper band — the calculator — has no band rule to catch
     it, and the badge it inherits was cream on a colour that had already lifted. */
  --accent-on: #fffdf8;
  --accent-2: var(--teal);
  /* The three readings an instrument prints, in the strength the ground allows.
     They exist because `--teal`, `--brass` and `--sig` are the *light* versions of
     those signals: a pill that painted `var(--teal)` was unreadable in a slate band
     and unreadable again at night, because the band swap only reached the two bands
     someone remembered to write a rule for. Each scope below answers with the
     version that clears 4.5:1 on what it paints, and the components use the token
     instead of a colour — which is what lets `build/web-check.mjs` prove it. */
  --ok: var(--teal);
  --warn: var(--brass);
  --no: var(--sig-deep);
  /* The chip ground that each reading sits on. It is a token rather than a literal
     on `.pill--ok` because the tint is the half of the pair that moves with the
     ground, and it moves *away* from the label: a chip washes itself with the
     strength of its hue that is farthest from the text printed on it, so the ground
     can read as colour without sliding toward the colour already in the words. Here
     that is the lifted signal — a 22% mint, straw or blush over bone paper, which
     still clears AA on the tinted panel (`--plate`), the worst ground in this scope.
     The dark scopes below answer with the mid strength for the same reason. With the
     tint in the ladder the pill is one rule and every scope answers it, which is why
     the three `.band--* .pill--*` overrides are gone. */
  --ok-bg: rgba(122, 211, 207, .22);
  --warn-bg: rgba(230, 205, 148, .22);
  --no-bg: rgba(244, 164, 143, .22);
  --rule: rgba(20, 38, 45, .16);
  --rule-2: rgba(20, 38, 45, .09);
  --plate: rgba(20, 38, 45, .045);
  --plate-2: rgba(20, 38, 45, .075);
  --card: #fffdf8;
  --line-hi: var(--sig);

  --disp: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --text: 'Schibsted Grotesk', ui-sans-serif, system-ui, 'Helvetica Neue', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --shell: 1180px;
  --narrow: 820px;
  --gut: clamp(20px, 4vw, 56px);
  --band-y: clamp(56px, 8vw, 116px);
  --r: 3px;                    /* near-square: this is an instrument, not a app */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 0 rgba(20, 38, 45, .05), 0 12px 34px -22px rgba(11, 23, 29, .45);
}

/* The water ladder, and everything that paints water. Two bands and three cards —
   the non-goals grid, the register and the governance gate — declare a slate or sea
   ground of their own, so they carry these tokens wherever they stand rather than
   only when a band happens to be behind them. */
.band--slate,
.band--sea,
.ng__item,
.reg__c,
.gate__i {
  --fg: #f4f1ea;
  --fg-body: rgba(244, 241, 234, .84);
  /* The same compression as the paper ladder, read in the other direction: on
     `--slate` a card is one step *lighter* than the band, so the rungs have to be
     lighter too or the faint one lands at 4.47:1 on the card it sits on. .74 and
     .66 clear 4.5 everywhere in this scope, including the hover ground. */
  --fg-mut: rgba(244, 241, 234, .74);
  --fg-faint: rgba(244, 241, 234, .66);
  --accent: var(--sig-lift);
  --accent-on: #0b171d;
  --stroke: var(--brass-lift);
  --accent-2: var(--teal-lift);
  --ok: var(--teal-lift);
  --warn: var(--brass-lift);
  --no: var(--sig-lift);
  --ok-bg: rgba(18, 107, 111, .32);
  --warn-bg: rgba(122, 95, 36, .42);
  --no-bg: rgba(192, 64, 42, .24);
  --rule: rgba(244, 241, 234, .2);
  --rule-2: rgba(244, 241, 234, .1);
  --plate: rgba(0, 0, 0, .18);
  --plate-2: rgba(0, 0, 0, .28);
  --card: rgba(255, 255, 255, .045);
}
/* The same ground swap `.band--ink` makes below: these two bands are dark, so a
   card painted `var(--paper)` has to paint dark water here too. Each takes the
   next ground of its own family rather than a borrowed one, so a sea card still
   reads as sea and a slate card as slate. */
.band--sea {
  --paper: var(--sea-2);
  --paper-3: #245c6b;
}
.band--slate {
  --paper: var(--slate-2);
  --paper-3: #336574;
}
/* The ink band's tokens, and the components that are ink wherever they stand: the
   equation plate, the readout, the code block, the footer, the roadmap's current
   phase, the nav bar, a cycle step, the calculator and the decision panel. Each
   paints its own deep ground (`--ink`, `#0b171d`, `#081217`, or 88% of `--ink` over
   the page) in whichever band it happens to sit in, so it has to carry the dark
   tokens with them. Without this, an inline `strong` in a code comment on a paper
   band — or the calculator's own labels, which sit on an ink card in the middle of
   the paper one — asked the light ladder for a light-on-dark answer. Nothing here is
   measured twice: every ground an instrument paints is at least as dark as `--ink`,
   so a token that passes on the ink band's grounds passes inside an instrument too. */
.band--ink,
.eq,
.readout,
.code,
.foot,
.phase.is-now,
#nav,
.step,
.calc,
.brief > div {
  --fg: #f6f3ec;
  --fg-body: rgba(246, 243, 236, .85);
  --fg-mut: rgba(246, 243, 236, .74);
  --fg-faint: rgba(246, 243, 236, .66);
  --accent: var(--sig-lift);
  --accent-on: #0b171d;
  --stroke: var(--brass-lift);
  --accent-2: var(--brass-lift);
  --ok: var(--teal-lift);
  --warn: var(--brass-lift);
  --no: var(--sig-lift);
  /* The same three washes as the water bands above, and deliberately the same
     numbers: an instrument is darker than any band, so a chip that survives slate
     survives ink, and one fewer pair of values is one fewer thing that can drift. */
  --ok-bg: rgba(18, 107, 111, .32);
  --warn-bg: rgba(122, 95, 36, .42);
  --no-bg: rgba(192, 64, 42, .24);
  --rule: rgba(246, 243, 236, .18);
  --rule-2: rgba(246, 243, 236, .08);
  --plate: rgba(0, 0, 0, .22);
  --plate-2: rgba(0, 0, 0, .34);
  --card: rgba(255, 255, 255, .04);
  /* The grounds swap too, and this is the line that keeps a card out of trouble.
     `.con`, `.term`, `.role`, `.spec`, `.phase` and the measure grid all paint
     `background: var(--paper)` and write their text in `--fg`; inside a dark band
     that pairing is cream on cream, which is a paragraph you cannot read rather
     than a paragraph that is missing. Each dark band gets the *next* ground of its
     own family, so the card still lifts off the band the way it lifts off paper,
     and `--paper-3` follows it because it is the outline-numeral colour. Night
     mode does the same thing one level up, at `html[data-theme="night"]`; a band
     cannot assume it. */
  --paper: var(--ink-2);
  --paper-3: #1d3d49;
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--text);
  font-size: clamp(16px, .35vw + 15px, 17.5px);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--disp); font-weight: 600; margin: 0; }
p, ul, ol, dl, table, figure, blockquote { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--accent); }
b, strong { font-weight: 700; }
em { font-style: italic; }
cite { font-style: normal; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--sig-soft); color: #0b171d; }

.vis-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; top: -100px; left: 16px; z-index: 90;
  background: var(--ink); color: #fff; padding: 12px 18px;
  font: 500 13px/1 var(--mono); text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------- bands */
.band {
  position: relative;
  padding: var(--band-y) var(--gut);
  color: var(--fg);
}
.band::after {                    /* hairline that separates every ground */
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--rule-2);
}
.band--paper { background: var(--paper); color: var(--fg); }
.band--paper::before {            /* survey-paper texture: dots on a 6px grid */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(20, 38, 45, .16) 1px, transparent 0);
  background-size: 26px 26px;
  opacity: .14;
}
.band--ink { background: var(--ink); }
.band--ink::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% -10%, rgba(122, 211, 207, .13), transparent 60%),
    radial-gradient(90% 70% at 8% 108%, rgba(224, 112, 90, .12), transparent 62%);
}
.band--sea { background: var(--sea); }
.band--sea::before {              /* a quiet swell, not a pattern that competes */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(122deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 9px),
    radial-gradient(100% 120% at 50% -20%, rgba(122, 211, 207, .1), transparent 55%);
}
.band--slate { background: var(--slate); }
.band--slate::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 96px 100%,
    radial-gradient(80% 100% at 100% 0, rgba(230, 205, 148, .08), transparent 60%);
}
.band > *, .hero > * { position: relative; z-index: 1; }

.shell { max-width: var(--shell); margin-inline: auto; }
.shell--narrow { max-width: var(--narrow); }

.band__head { margin-bottom: clamp(28px, 4vw, 50px); max-width: 74ch; }
.band__head h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.022em; }
.band__sub {
  margin-top: 14px; max-width: 68ch; color: var(--fg-mut);
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6;
}
.h--sm {
  font-family: var(--disp); font-size: clamp(19px, 1.6vw, 23px); font-weight: 600;
  letter-spacing: -.012em; line-height: 1.25; margin: 0 0 12px;
}
.h--sm + p, .h--sm + table, .h--sm + ul { margin-top: 0; }

/* every kicker carries its section number, set as data rather than prose */
.kicker {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font: 500 11.5px/1 var(--mono); letter-spacing: .17em; text-transform: uppercase;
  color: var(--fg-faint); margin: 0 0 18px;
}
/* The badge is ink on `--accent`, so both halves come from the ladder: a light scope
   prints cream on deep oxide, a dark one prints near-black on lifted salmon. This used
   to be three band rules plus two night rules, which is how the calculator's kicker —
   an ink card standing in a paper band, so no band rule reached it — ended up cream on
   pale blush at 1.96:1. The token is the same one `build/web-check.mjs` measures. */
.kicker span:first-child {
  color: var(--accent-on); background: var(--accent); padding: 5px 8px 4px;
  font-weight: 600; letter-spacing: .1em;
}
.kicker + h2 { margin-top: 2px; }

/* ---------------------------------------------------------------- numbers */
.num {
  font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums;
  font-size: .93em; letter-spacing: -.01em; color: var(--fg);
}
.num--lg { font-size: clamp(26px, 3vw, 40px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.strong { font-weight: 600; color: var(--accent); }
.fine { font-size: 13.5px; line-height: 1.55; color: var(--fg-mut); }
code { font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }

/* --------------------------------------------------------------- typography
   components */
.prose p { margin-bottom: 1.05em; max-width: 68ch; }
.prose--wide { max-width: none; }
.lede { display: grid; gap: 18px; margin-bottom: clamp(30px, 4vw, 46px); }
.lede__main {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.42; letter-spacing: -.012em;
  max-width: 60ch; color: var(--fg);
}
.lede__main em { color: var(--accent); font-style: italic; }

.pull {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 20px; margin: 26px 0 4px;
  font-family: var(--disp); font-size: clamp(18px, 1.7vw, 23px); line-height: 1.35;
  letter-spacing: -.014em; max-width: 44ch; color: var(--fg);
}
.pull--paper { border-color: var(--sig); color: var(--fg-body); }
.note {
  margin-top: 18px; padding: 15px 18px; background: var(--plate);
  border-left: 2px solid var(--accent-2);
  font-size: 14.5px; line-height: 1.56; color: var(--fg-mut); max-width: 74ch;
}
.note b { color: var(--fg); }
.note--dark { background: var(--plate); }

/* grids ------------------------------------------------------------------ */
.cols { display: grid; gap: clamp(26px, 3.4vw, 48px); margin-top: clamp(26px, 3vw, 40px); }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--32 { grid-template-columns: minmax(0, 1fr); minmax(0, 2.05fr); }
.panel {
  background: var(--card); border: 1px solid var(--rule);
  padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r);
}
.panel p { font-size: 15.5px; line-height: 1.6; color: var(--fg-body); }
.panel + .note { margin-top: 16px; }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r);
  font: 600 14px/1 var(--mono); letter-spacing: .03em; text-decoration: none;
  background: var(--sig); color: #fff; border: 1px solid var(--sig);
  transition: transform .2s var(--ease-out), background .2s, box-shadow .2s, color .2s;
  box-shadow: 0 0 0 0 rgba(192, 64, 42, 0);
}
.btn:hover { background: var(--sig-deep); border-color: var(--sig-deep); transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(192, 64, 42, .9); color: #fff; }
.btn:active { transform: translateY(0); }
.band--paper .btn:not(.btn--ghost) { background: var(--ink); border-color: var(--ink); }
.band--paper .btn:not(.btn--ghost):hover { background: var(--sig); border-color: var(--sig); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--rule); }
.btn--ghost:hover { background: var(--fg); color: var(--paper); border-color: var(--fg); }
.btn--sm { padding: 9px 14px; font-size: 12px; }
.btn--lg { padding: 15px 26px; font-size: 14.5px; }
.linkbtn {
  font: 500 13px/1 var(--mono); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: .2em; color: inherit;
}
.linkbtn:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ------------------------------------------------------------------- nav */
#nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 0 var(--gut); height: 62px;
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(246, 243, 236, .12);
  color: var(--fg);
}
.nav__brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--disp); font-weight: 700; font-size: 18px; letter-spacing: -.01em;
}
.nav__brand em {
  font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: .1em;
  color: var(--brass-lift); border: 1px solid rgba(230, 205, 148, .35); padding: 3px 5px 2px;
}
.brandmark { width: 22px; height: 22px; color: var(--accent); flex: none; }
.nav__brand:hover .brandmark { color: var(--fg); transform: rotate(-4deg); }
.brandmark { transition: color .25s, transform .35s var(--ease-out); }

.nav__links {
  display: flex; gap: 2px; margin-left: auto; overflow-x: auto;
  scrollbar-width: none; font: 500 12.5px/1 var(--mono);
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a {
  position: relative; padding: 8px 11px; text-decoration: none; white-space: nowrap;
  color: var(--fg-mut); letter-spacing: .02em; transition: color .2s;
}
.nav__links a::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 1px;
  background: var(--sig-soft); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a:hover::after, .nav__links a.is-here::after { transform: scaleX(1); }
.nav__links a.is-here { color: var(--fg); }

.nav__right { display: flex; align-items: center; gap: 12px; flex: none; }
.themebtn {
  display: flex; align-items: center; gap: 0; border: 1px solid rgba(246, 243, 236, .22);
  border-radius: var(--r); overflow: hidden; font: 500 10.5px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
}
.themebtn span { padding: 7px 9px; color: var(--fg-faint); transition: background .25s, color .25s; }
.themebtn .themebtn__a { background: rgba(246, 243, 236, .1); color: var(--fg); }
.themebtn[aria-pressed="true"] .themebtn__a { background: transparent; color: var(--fg-faint); }
.themebtn[aria-pressed="true"] .themebtn__b { background: rgba(230, 205, 148, .22); color: var(--fg); }
#nav .btn--sm { background: var(--sig); border-color: var(--sig); color: #fff; }
#nav .btn--sm:hover { background: #fff; color: var(--ink); border-color: #fff; }

.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; background: transparent; }
.progress i { display: block; height: 100%; width: 0; background: var(--sig-soft);
  box-shadow: 0 0 14px rgba(224, 112, 90, .8); transition: width .12s linear; }

/* ------------------------------------------------------------------ hero */
.hero { padding-top: clamp(52px, 7vw, 92px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(30px, 5vw, 64px); align-items: center;
}
.hero__title {
  font-size: clamp(38px, 6.6vw, 82px); line-height: .98; font-weight: 600;
  letter-spacing: -.035em; font-variation-settings: 'opsz' 100;
}
.hero__line { position: relative; color: var(--accent); white-space: nowrap; }
.hero__line::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .1em; height: 3px;
  background: var(--sig); transform: scaleX(0); transform-origin: left;
  animation: drawline 1.1s .5s var(--ease-out) forwards;
}
@keyframes drawline { to { transform: scaleX(1); } }
.hero__claim {
  margin-top: 22px; font-family: var(--disp); font-style: italic; font-weight: 400;
  font-size: clamp(17px, 1.8vw, 22px); color: var(--brass-lift); letter-spacing: -.01em;
}
.hero__sub {
  margin-top: 14px; max-width: 56ch; color: var(--fg-body);
  font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.6;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero__fine {
  margin-top: 26px; max-width: 58ch; padding-top: 16px;
  border-top: 1px solid var(--rule-2);
  font-size: 13px; line-height: 1.6; color: var(--fg-faint);
}

/* the ztakora mark */
.hero__mark { display: grid; justify-items: center; gap: 18px; }
.hero__mark svg { width: min(340px, 78vw); height: auto; overflow: visible; }
.m-ring { fill: none; stroke: rgba(246, 243, 236, .78); stroke-width: 7; }
.m-line { fill: var(--sig); }
.m-tick line, .m-tick--lo line { stroke: rgba(246, 243, 236, .4); stroke-width: 3; }
.m-draft { stroke: var(--brass-lift); stroke-width: 2.5; stroke-dasharray: 7 6; }
.m-lab { font: 500 12px/1 var(--mono); letter-spacing: .06em; fill: var(--brass-lift); }
.m-lab--hi { fill: var(--sig-soft); }
.hero__mark figcaption {
  max-width: 40ch; text-align: center; font-size: 13px; line-height: 1.55;
  color: var(--fg-faint);
}
.js .hero__mark svg { animation: markrise 1.15s var(--ease-out) both; }
@keyframes markrise { from { opacity: 0; transform: translateY(20px) scale(.96); } }
.js .m-draft { animation: draft 2.6s 1s var(--ease-out) both; }
@keyframes draft { from { stroke-dashoffset: 300; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }

/* status strip: the honesty panel, laid out as an instrument readout */
.hero__status {
  margin-top: clamp(38px, 5vw, 62px); padding-top: 22px;
  border-top: 1px solid var(--rule-2);
}
.hero__statuslab {
  font: 600 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.hero__status dl {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--rule-2);
}
.hero__status dl > div { background: rgba(255, 255, 255, .03); padding: 16px 18px; transition: background .25s; }
.hero__status dl > div:hover { background: rgba(255, 255, 255, .07); }
.hero__status dt {
  font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 8px;
}
.hero__status dd { font-size: 14px; line-height: 1.5; color: var(--fg-body); }
.hero__status dd a { color: var(--brass-lift); }

/* ---------------------------------------------------------------- 01 cards */
.specs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--rule); margin-bottom: clamp(30px, 4vw, 46px);
}
.spec {
  background: var(--paper); padding: clamp(18px, 2vw, 26px);
  position: relative; transition: background .3s var(--ease), transform .3s var(--ease-out);
}
.spec:hover { background: var(--card); transform: translateY(-3px); z-index: 2;
  box-shadow: var(--shadow); }
.spec__n {
  display: block; font: 600 11px/1 var(--mono); letter-spacing: .14em;
  color: var(--warn); margin-bottom: 14px;
}
.spec h3 { font-size: 17.5px; line-height: 1.25; letter-spacing: -.014em; margin-bottom: 9px; }
.spec p { font-size: 14px; line-height: 1.55; color: var(--fg-mut); }

.ctx {
  border-top: 2px solid var(--sig); padding-top: 22px;
  display: grid; gap: 20px;
}
.ctx__lab {
  font: 600 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-faint);
}
.ctx dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.ctx__fig dt {
  font-family: var(--mono); font-weight: 500; letter-spacing: -.045em;
  font-size: clamp(34px, 4.6vw, 62px); line-height: .92; color: var(--no);
  font-variant-numeric: tabular-nums;
}
.ctx__fig dd {
  margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--fg-mut);
  max-width: 34ch;
}
.ctx__fig dd cite a { font: 500 11px/1 var(--mono); color: var(--ok); }
.ctx__note {
  font-size: 13.5px; line-height: 1.6; color: var(--fg-mut); max-width: 88ch;
  padding: 14px 18px; background: var(--plate); border-left: 2px solid var(--teal);
}
.ctx__note cite a { font: 500 11px/1 var(--mono); color: var(--ok); }

/* ---------------------------------------------------------------- tables */
.tbl { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 14px; }
.tbl caption {
  caption-side: top; text-align: left; padding: 0 0 10px;
  font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-faint);
}
.tbl th, .tbl td { padding: 11px 13px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule-2); }
.tbl thead th {
  font: 600 10.5px/1.35 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-faint); border-bottom: 1px solid var(--rule);
}
.tbl tbody tr { transition: background .2s; }
.tbl tbody tr:hover { background: var(--plate); }
.tbl tbody th { font-weight: 600; color: var(--fg); width: 30%; }
.tbl tfoot td {
  padding-top: 12px; font-size: 13px; line-height: 1.55; color: var(--fg-mut);
  border-bottom: 0; border-top: 1px solid var(--rule);
}
.tbl .num { color: var(--fg-body); }
.tbl--tight th, .tbl--tight td { padding: 8px 10px; font-size: 13.5px; }
.tbl--dark th, .tbl--dark td { border-color: rgba(246, 243, 236, .12); }
.tbl--dark caption { color: var(--fg-mut); }
.tbl--dark thead th { color: var(--fg-faint); border-color: rgba(246, 243, 236, .25); }
.tbl--dark tbody tr:hover { background: rgba(255, 255, 255, .05); }
.tbl--flow td:first-child { font-weight: 600; }
.tbl--risk td:nth-child(3) { width: 84px; }
.tbl--risk td:last-child { width: 24%; color: var(--fg-mut); }
.tbl--risk tbody th { width: 46px; }
.tbl .is-final td { background: var(--plate-2); }

.tag {
  display: inline-block; padding: 3px 7px 2px; border-radius: 2px; white-space: nowrap;
  font: 600 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.tag--remove { color: var(--ok); }
.tag--cap { color: var(--warn); }
.tag--detect { color: var(--no); }
.tag--recover { color: var(--fg-body); }
.tag--todo { color: var(--fg-faint); border-style: dashed; }
/* No `.band--slate .tag--x` rules any more, and there used to be three. They covered
   the three dark bands and nothing else — night mode paints the light bands dark and
   a chip carrying `--teal` was still carrying `--teal` there, which is the same defect
   with a toggle on it. `--ok`/`--warn`/`--no` answer for every scope instead. */

.pill {
  display: inline-block; padding: 4px 9px; border-radius: 2px; white-space: nowrap;
  font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--no { background: var(--no-bg); color: var(--no); }
.pill--short { background: var(--sig); color: #fff; }
/* The chip is three rules long now. It used to be six: a paper version plus a
   `.band--sea/.band--ink` copy of the ground, which covered two of the three dark
   bands, no instrument, and no night mode — `.band--slate .pill--ok` was missing
   outright, so a status chip on a slate band painted `--teal` on `--teal`. The tint
   moved into the token ladder as `--ok-bg`/`--warn-bg`/`--no-bg` and each scope
   answers with its own, which is the same fix the tags got above. */
.band--sea .pill--short, .band--ink .pill--short { background: var(--sig-soft); color: #26100b; }

/* ------------------------------------------------------------ lists */
.ticks li, .open li { position: relative; padding-left: 24px; margin-bottom: 11px;
  font-size: 15px; line-height: 1.55; color: var(--fg-body); }
.ticks li::before {
  content: ''; position: absolute; left: 2px; top: .62em; width: 11px; height: 2px;
  background: var(--accent);
}
.ticks--dark li { color: var(--fg-body); }
.ticks--dark li::before { background: var(--sig-soft); }
.ticks b { color: var(--fg); }

.fail { counter-reset: f; margin-top: 20px; }
.fail li {
  counter-increment: f; position: relative; padding-left: 42px; margin-bottom: 18px;
  font-size: 15.5px; line-height: 1.58; color: var(--fg-body); max-width: 62ch;
}
.fail li::before {
  content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font: 600 12px/1 var(--mono); color: var(--no); letter-spacing: .04em;
  border-bottom: 2px solid var(--sig); padding-bottom: 5px;
}
.fail b { color: var(--fg); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.chips li {
  font: 500 11.5px/1 var(--mono); letter-spacing: .02em; padding: 6px 9px;
  background: var(--plate); border: 1px solid var(--rule-2); color: var(--fg-mut);
  transition: border-color .2s, color .2s;
}
.layer:hover .chips li { border-color: var(--rule); color: var(--fg-body); }

/* ------------------------------------------------------ 03 foundations */
.cons { display: grid; gap: 1px; background: var(--rule); }
.con {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: clamp(14px, 2vw, 28px);
  align-items: start; background: var(--paper); padding: clamp(18px, 2.2vw, 26px);
  transition: background .3s;
}
.con:hover { background: var(--card); }
.con > i {
  font: 500 clamp(30px, 3.4vw, 46px)/1 var(--mono); font-style: normal; letter-spacing: -.05em;
  color: var(--paper-3); -webkit-text-stroke: 1px var(--stroke);
}
.con h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.016em; margin-bottom: 7px; }
.con div p { font-size: 14.5px; line-height: 1.6; color: var(--fg-mut); max-width: 78ch; }

/* --------------------------------------------------------- non-goals */
.ng { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(246, 243, 236, .12); }
.ng__item { background: var(--slate); padding: clamp(18px, 2.2vw, 26px); transition: background .3s; }
.ng__item:hover { background: var(--slate-2); }
.ng__item > b {
  display: block; font-family: var(--disp); font-size: 17px; letter-spacing: -.012em;
  color: var(--accent); margin-bottom: 8px;
}
.ng__item p { font-size: 14px; line-height: 1.6; color: var(--fg-mut); }

/* ------------------------------------------------------- 04 equation */
.eq {
  margin: 0 0 clamp(28px, 3.6vw, 44px); padding: clamp(22px, 3vw, 34px);
  background: var(--ink); color: var(--fg); border-radius: var(--r);
  box-shadow: var(--shadow); overflow-x: auto;
}
.eq__body {
  display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); flex-wrap: nowrap;
  min-width: 520px; font-family: var(--disp); font-size: clamp(22px, 3.2vw, 40px);
  letter-spacing: -.01em;
}
.eq__lhs { color: var(--accent); font-weight: 600; }
.eq__op { color: var(--fg-faint); font-family: var(--mono); font-size: .7em; }
.eq__grp { display: flex; align-items: center; gap: 10px; }
.eq__sum { color: var(--brass-lift); font-size: .95em; position: relative; padding: 0 4px; }
.eq__sum sub, .eq__sum .eq__sub {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -.75em;
  font: 500 .3em/1 var(--mono); color: var(--fg-faint); white-space: nowrap;
}
.eq__term { color: var(--fg); }
.eq__term em, .eq__paren em { font-style: italic; }
.eq__paren { color: var(--fg-body); }
.eq sub { font-size: .45em; font-family: var(--mono); }
.eq figcaption {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(246, 243, 236, .14);
  font-size: 14px; line-height: 1.6; color: var(--fg-mut); max-width: 74ch;
}
.eq figcaption b { color: var(--accent); font-family: var(--mono); font-size: .95em; }

.terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
.term { background: var(--paper); padding: clamp(16px, 1.9vw, 24px); transition: background .3s, transform .3s; }
.term:hover { background: var(--card); transform: translateY(-2px); }
.term__sym {
  display: block; font-family: var(--disp); font-style: italic; font-size: clamp(24px, 2.6vw, 34px);
  color: var(--no); letter-spacing: -.02em; margin-bottom: 6px;
}
.term__sym sub { font-size: .5em; font-family: var(--mono); font-style: normal; }
.term h3 { font-size: 16.5px; letter-spacing: -.012em; margin-bottom: 12px; }
.term dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; }
.term dt { font: 600 9.5px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--fg-faint); }
.term dd { font-size: 13px; line-height: 1.5; color: var(--fg-mut); }

.eqeq {
  font-family: var(--disp); font-size: clamp(16px, 1.6vw, 20px); letter-spacing: -.008em;
  background: var(--plate); padding: 16px 18px; margin: 4px 0 18px !important;
  border-left: 2px solid var(--accent); line-height: 1.7;
}
.eqeq sub { font-family: var(--mono); font-size: .6em; }
.panel .eqeq, .band--ink .eqeq, .band--sea .eqeq, .band--slate .eqeq { background: rgba(0, 0, 0, .22); }

/* --------------------------------------------------- 04.4 calculator */
.calc {
  margin-top: clamp(34px, 4.4vw, 58px); padding: clamp(22px, 3vw, 38px);
  background: var(--ink); color: var(--fg); border-radius: var(--r);
  box-shadow: 0 30px 70px -50px rgba(11, 23, 29, .9);
}
.calc__head { max-width: 72ch; margin-bottom: clamp(22px, 2.6vw, 34px); }
.calc__head h3 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.024em; line-height: 1.1; }
.calc__head p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--fg-mut); }
.calc__head .kicker { color: var(--fg-faint); }
.calc__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(26px, 3.4vw, 46px); }
.calc__inputs { display: grid; gap: 20px; align-content: start; }
.fld label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--fg-body);
  margin-bottom: 4px;
}
.fld__v { color: var(--brass-lift); font-weight: 600; font-variant-numeric: tabular-nums; }
.fld__h { font-size: 11.5px; line-height: 1.5; color: var(--fg-mut); margin-top: 5px; }
.fld__h em { font-family: var(--mono); font-style: normal; color: var(--fg-mut); }
.fld--wide { padding-top: 6px; border-top: 1px solid rgba(246, 243, 236, .12); }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; cursor: grab;
}
input[type=range]:active { cursor: grabbing; }
input[type=range]::-webkit-slider-runnable-track {
  height: 3px; background: rgba(246, 243, 236, .2);
}
input[type=range]::-moz-range-track { height: 3px; background: rgba(246, 243, 236, .2); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; margin-top: -6px; border-radius: 50%;
  background: var(--sig-soft); border: 2px solid #0b171d;
  box-shadow: 0 0 0 0 rgba(224, 112, 90, .35); transition: box-shadow .2s, transform .2s;
}
input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: var(--sig-soft);
  border: 2px solid #0b171d;
}
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 7px rgba(224, 112, 90, .16); }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(230, 205, 148, .3); }
#in-liab::-webkit-slider-thumb { background: var(--brass-lift); }
#in-age::-webkit-slider-thumb { background: var(--teal-lift); }
.calc__reset { margin-top: 4px; }
.calc__reset .btn--ghost { border-color: rgba(246, 243, 236, .25); color: var(--fg-body); }
.calc__reset .btn--ghost:hover { background: #f6f3ec; color: var(--ink); }

.calc__out { display: grid; gap: 20px; align-content: start; justify-items: center; }
.gauge { width: min(268px, 62vw); height: auto; }
.gauge__hull { fill: rgba(246, 243, 236, .05); stroke: rgba(246, 243, 236, .3); stroke-width: 1.5; }
.gauge__water {
  fill: rgba(122, 211, 207, .13); stroke: none;
  transition: y .55s var(--ease-out), height .55s var(--ease-out);
}
.gauge__ceil { stroke: var(--sig); stroke-width: 4; transition: y1 .55s var(--ease-out), y2 .55s var(--ease-out); }
.gauge__deck { stroke: var(--brass-lift); stroke-width: 2; stroke-dasharray: 6 5;
  transition: y1 .55s var(--ease-out), y2 .55s var(--ease-out); }
.gauge__ring { fill: none; stroke: rgba(246, 243, 236, .5); stroke-width: 3; }
.gauge__ruler line { stroke: rgba(246, 243, 236, .22); stroke-width: 1; }
/* A tick label is a word, so it takes the ladder like one. The literal .4 wash this
   replaced measured 3.55:1 at 8.5px — under AA for text that small — and the gauge is
   only ever painted inside the calculator, whose ink ground has no light band to lean on. */
.gauge__ruler text { font: 400 8.5px/1 var(--mono); fill: var(--fg-faint); }
.gauge text.gauge__cl, .gauge text.gauge__dl {
  font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  transition: y .55s var(--ease-out);
}
.gauge__cl { fill: var(--sig-soft); }
.gauge__dl { fill: var(--brass-lift); }
.readout { width: 100%; display: grid; gap: 1px; background: rgba(246, 243, 236, .12); }
.readout > div { background: #0b171d; padding: 10px 14px; display: flex;
  justify-content: space-between; align-items: baseline; gap: 12px; }
.readout dt { font: 500 10.5px/1.4 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  color: var(--fg-faint); }
.readout dt sub { font-size: .72em; }
.readout dd { font-family: var(--mono); font-weight: 500; font-size: 16px;
  color: var(--brass-lift); font-variant-numeric: tabular-nums; text-align: right; }
.readout .num--lg, .readout dd.big { font-size: 21px; letter-spacing: -.03em; }
.readout__verdict dd { color: var(--teal-lift); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; }
.readout__verdict[data-state="over"] dd { color: var(--accent); }
.readout__verdict[data-state="stale"] dd { color: var(--brass-lift); }
.calc__foot { font-size: 11.5px; line-height: 1.6; color: var(--fg-mut); text-align: center; }
.calc__foot .num { color: var(--fg-mut); }

/* --------------------------------------------------- 05 attestation */
.cycle { margin-bottom: clamp(32px, 4vw, 52px); }
/* the rail shares the viewBox width with the card row, so each arrow lands
   exactly on a card boundary at any viewport width */
.cycle__rail svg { width: 100%; height: auto; display: block; margin-bottom: 6px; }
#cycle-path { stroke: rgba(246, 243, 236, .28); stroke-width: 1.5; fill: none;
  stroke-dasharray: 900; stroke-dashoffset: 900; }
.js #cycle-path.is-drawn { animation: traceline 1.6s var(--ease-out) forwards; }
@keyframes traceline { to { stroke-dashoffset: 0; } }
.cycle__arrows path { fill: rgba(246, 243, 236, .38); }

.cycle__steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: rgba(246, 243, 236, .14);
}
.step {
  text-align: left; background: var(--ink); padding: clamp(16px, 1.9vw, 24px);
  color: var(--fg-mut); transition: background .3s, color .3s;
  display: grid; gap: 9px; cursor: pointer;
}
.step i { font: 600 10.5px/1 var(--mono); font-style: normal; letter-spacing: .14em;
  color: var(--fg-faint); }
.step b { font-family: var(--disp); font-size: 18px; font-weight: 600; letter-spacing: -.014em;
  color: var(--fg); }
.step span { font-size: 13.5px; line-height: 1.55; }
.step:hover { background: var(--ink-2); color: var(--fg-body); }
/* A paper island, and the mirror of the instrument rule above: the active step paints
   the cream ground wherever it stands, so it has to carry the light ladder with it.
   Without this the step's numeral asked the ink band for a dark-water answer and printed
   #f4a48f on #f6f3ec — 1.80:1, a number a reader cannot see. */
.step.is-active {
  --fg: #14262d; --fg-body: #21343b; --fg-mut: #35525c; --fg-faint: #4a626a;
  --accent: var(--sig-deep); --accent-on: #fffdf8; --accent-2: var(--teal);
  --ok: var(--teal); --warn: var(--brass); --no: var(--sig-deep);
  --ok-bg: rgba(122, 211, 207, .22); --warn-bg: rgba(230, 205, 148, .22); --no-bg: rgba(244, 164, 143, .22);
  --rule: rgba(20, 38, 45, .16); --rule-2: rgba(20, 38, 45, .09);
  --plate: rgba(20, 38, 45, .045); --card: #fffdf8;
  background: #f6f3ec; color: var(--fg-body);
}
.step.is-active i { color: var(--no); }
.step.is-active b { color: var(--ink); }
.step.is-active span { color: var(--fg-mut); }
.cycle__detail {
  margin-top: 1px; padding: clamp(20px, 2.6vw, 32px); background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(246, 243, 236, .12); border-top: 0;
}
.cycle__detail .h--sm { color: var(--fg); font-family: var(--disp); }
.cycle__detail p { font-size: 15px; line-height: 1.62; color: var(--fg-mut); max-width: 62ch; }
.cycle__detail .tbl--dark th { width: 34%; }
.cycle__detail .tbl td { color: var(--fg-mut); font-family: var(--mono); font-size: 12.5px; }
.cycle__detail .ticks li { margin-bottom: 8px; }
.js .cycle__detail > .cols { animation: swapin .45s var(--ease-out) both; }
@keyframes swapin { from { opacity: 0; transform: translateY(9px); } }

/* ------------------------------------------------------- 06 roles */
.roles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
.role { background: var(--paper); padding: clamp(16px, 1.7vw, 22px); position: relative;
  transition: background .3s, transform .3s var(--ease-out); }
.role:hover { background: var(--card); transform: translateY(-3px); z-index: 2; box-shadow: var(--shadow); }
.role__n {
  display: block; font: 600 11px/1 var(--mono); letter-spacing: .16em; color: var(--warn);
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-2);
}
.role h3 { font-size: 18px; letter-spacing: -.016em; margin-bottom: 12px; }
.role dl { display: grid; gap: 10px; }
.role dt { font: 600 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--no); margin-bottom: 3px; }
.role dd { font-size: 13px; line-height: 1.52; color: var(--fg-mut); }

/* --------------------------------------------------- 07 architecture */
.stack { display: grid; gap: 12px; }
.layer {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: clamp(14px, 2vw, 28px);
  align-items: start; padding: clamp(16px, 2vw, 24px);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  transition: border-color .3s, transform .3s var(--ease-out), background .3s;
}
.layer:hover { border-color: var(--accent); transform: translateX(4px); }
.layer__tag {
  font: 600 10.5px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-2); padding-top: 6px;
}
.layer h3 { font-size: 19px; letter-spacing: -.018em; margin-bottom: 8px; }
.layer p { font-size: 14.5px; line-height: 1.6; color: var(--fg-body); max-width: 76ch; }
.layer code { color: var(--no); }

.iface { margin-top: clamp(30px, 3.6vw, 46px); }
.iface__intro { max-width: 72ch; color: var(--fg-mut); font-size: 15px; margin-bottom: 16px; }
.code {
  position: relative;
  margin: 0 0 20px; padding: clamp(16px, 2vw, 24px); overflow-x: auto;
  background: #081217; color: #d9e6e4; border: 1px solid rgba(246, 243, 236, .14);
  border-radius: var(--r); font: 400 12.5px/1.72 var(--mono);
  tab-size: 4; -webkit-overflow-scrolling: touch;
}
.code code { font: inherit; color: inherit; }
.code .c-kw { color: var(--brass-lift); }
.code .c-fn { color: var(--teal-lift); }
.code .c-cm { color: var(--fg-mut); font-style: italic; }
.code .c-er { color: var(--accent); }
.copybtn {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-mut); background: rgba(246, 243, 236, .07);
  border: 1px solid rgba(246, 243, 236, .22); border-radius: var(--r);
  padding: 6px 9px; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.copybtn:hover { color: var(--fg); border-color: var(--accent); background: rgba(246, 243, 236, .14); }
.code { padding-top: clamp(34px, 3vw, 44px); }
@media print { .copybtn { display: none !important; } }

.agentico { margin-top: clamp(30px, 3.6vw, 46px); padding-top: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid var(--rule); }
.agentico .h--sm { max-width: 60ch; }

.reg { margin-top: clamp(30px, 3.6vw, 46px); }
.reg__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: rgba(246, 243, 236, .12); margin-top: 14px; }
.reg__c { background: var(--slate); padding: clamp(16px, 1.8vw, 22px); }
.reg__c b { display: block; font-family: var(--disp); font-size: 16px; color: var(--accent);
  margin-bottom: 9px; letter-spacing: -.012em; }
.reg__c p { font-size: 13.5px; line-height: 1.55; color: var(--fg-mut); }
.reg__c .num { color: var(--brass-lift); font-size: 12px; }

/* --------------------------------------------------- 09 waterfall */
.wf { margin-bottom: clamp(28px, 3.4vw, 42px); }
.wf__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.wf__s {
  position: relative; padding: clamp(16px, 1.7vw, 20px);
  background: rgba(255, 255, 255, .05); border-top: 2px solid var(--brass-lift);
  transition: background .3s, transform .3s var(--ease-out);
}
.wf__s:hover { background: rgba(255, 255, 255, .09); transform: translateY(-3px); }
.wf__s i { display: block; font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .16em;
  color: var(--fg-faint); margin-bottom: 10px; }
.wf__s b { display: block; font-family: var(--disp); font-size: 16.5px; letter-spacing: -.014em;
  color: var(--fg); margin-bottom: 7px; }
.wf__s span { font-size: 13px; line-height: 1.52; color: var(--fg-mut); }
.wf__s.is-short { border-top-color: var(--sig); background: rgba(192, 64, 42, .14); }
.wf__s.is-short b { color: var(--accent); }

/* --------------------------------------------------- 10 governance */
.gate { counter-reset: g; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: rgba(246, 243, 236, .13); }
.gate__i {
  counter-increment: g; background: var(--slate); padding: clamp(16px, 1.9vw, 22px) clamp(16px, 1.9vw, 22px) clamp(16px, 1.9vw, 22px) 62px;
  position: relative; font-size: 14.5px; line-height: 1.58; color: var(--fg-mut);
  transition: background .3s;
}
.gate__i:hover { background: var(--slate-2); }
.gate__i::before {
  content: counter(g, decimal-leading-zero); position: absolute; left: 20px; top: 17px;
  font: 600 13px/1 var(--mono); color: var(--accent);
}
.gate__i b { color: var(--fg); }

/* --------------------------------------------------- 13 roadmap */
.phases { display: grid; gap: 1px; background: var(--rule); }
.phase {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: clamp(14px, 2vw, 28px);
  background: var(--paper); padding: clamp(18px, 2.2vw, 26px);
  transition: background .3s, transform .3s var(--ease-out);
}
.phase:hover { background: var(--card); transform: translateX(4px); }
/* The phase numeral is the reader's index into the roadmap, not a watermark, so it
   takes the faintest rung the ladder measures — the same one the current phase uses
   on its ink ground. A literal `--paper-3` here read 1.26:1 on paper: the numeral
   was painted in the colour of the card it sits on. */
.phase > i { font: 500 clamp(32px, 4vw, 52px)/1 var(--mono); font-style: normal;
  letter-spacing: -.05em; color: var(--fg-faint); }
.phase:hover > i { color: var(--no); }
.phase h3 { font-size: 20px; letter-spacing: -.018em; margin-bottom: 8px; }
.phase p { font-size: 14.5px; line-height: 1.6; color: var(--fg-mut); max-width: 74ch; }
.phase dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--rule-2); }
.phase dt { font: 600 9.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--no); }
.phase dd { font-size: 13.5px; line-height: 1.55; color: var(--fg-body); }
.phase.is-now { background: var(--ink); color: var(--fg); }
.phase.is-now dt { color: var(--accent); }
.phase.is-now h3, .phase.is-now p { color: var(--fg); }
.phase.is-now p, .phase.is-now dd { color: var(--fg-mut); }
.phase.is-now:hover { background: var(--ink-2); }
.phase.is-now > i { color: var(--fg-faint); }
.phase.is-now:hover > i { color: var(--accent); }
.phase.is-now dl { border-color: rgba(246, 243, 236, .16); }
.phase__now {
  display: inline-block; margin-bottom: 9px; padding: 4px 8px 3px; background: var(--sig);
  color: #fff; font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}

.measure { margin-top: clamp(30px, 3.6vw, 46px); }
.measure__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--rule); margin-top: 16px; }
.measure__grid > div { background: var(--paper); padding: clamp(16px, 1.9vw, 22px);
  transition: background .3s; }
.measure__grid > div:hover { background: var(--card); }
.measure .num--lg { color: var(--no); display: block; margin-bottom: 9px; }
.measure p { font-size: 13.5px; line-height: 1.55; color: var(--fg-mut); }

/* --------------------------------------------------- 15 decision */
.brief { display: grid; gap: 1px; background: rgba(246, 243, 236, .14); }
.brief > div { background: var(--ink); padding: clamp(20px, 2.6vw, 30px); }
.brief .h--sm { color: var(--brass-lift); font-size: 15px; letter-spacing: .02em; margin-bottom: 12px; }
.brief p, .brief li { font-size: 15px; line-height: 1.62; color: var(--fg-mut); }
.brief__rec { border-left: 3px solid var(--teal-lift) !important; }
.brief__rec b { color: var(--fg); }
.brief__no { border-left: 3px solid var(--sig) !important; }
.brief__open { border-left: 3px solid var(--brass-lift) !important; }
.brief__open .open { margin-top: 4px; }
.brief__open .open li { color: var(--fg-mut); }
.open { counter-reset: o; }
.open li { counter-increment: o; padding-left: 30px; }
.open li::before {
  content: counter(o); position: absolute; left: 0; top: 0;
  font: 600 11px/1.7 var(--mono); color: var(--accent);
}

/* --------------------------------------------------- appendix */
.gloss dt { font: 600 13px/1.4 var(--mono); color: var(--no); margin-top: 18px; letter-spacing: .01em; }
.gloss dt:first-child { margin-top: 0; }
.gloss dd { font-size: 14px; line-height: 1.58; color: var(--fg-mut); margin: 5px 0 0; max-width: 70ch; }
.refs { counter-reset: r; display: grid; gap: 14px; }
.refs li { counter-increment: r; position: relative; padding-left: 34px;
  font-size: 13.5px; line-height: 1.6; color: var(--fg-mut); }
.refs li::before {
  content: counter(r); position: absolute; left: 0; top: 1px; width: 22px; height: 22px;
  display: grid; place-items: center; background: var(--plate); color: var(--fg);
  font: 600 11px/1 var(--mono);
}
.refs li b { color: var(--fg); }
.refs a { color: var(--ok); word-break: break-word; text-decoration-thickness: 1px; }
.refs a:hover { color: var(--no); }

/* --------------------------------------------------- footer */
.foot { background: var(--ink); color: var(--fg-mut); padding: clamp(40px, 5vw, 68px) var(--gut); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .75fr) minmax(0, 1.4fr);
  gap: clamp(26px, 4vw, 54px); }
.foot__brand { display: grid; gap: 14px; align-content: start; }
.foot__brand .brandmark { width: 30px; height: 30px; color: var(--accent); }
.foot__brand p { font-size: 13.5px; line-height: 1.62; max-width: 42ch; }
.foot__brand b { font-family: var(--disp); font-size: 19px; color: var(--fg); letter-spacing: -.012em; }
.foot__nav { display: grid; gap: 9px; align-content: start;
  font: 500 12.5px/1.4 var(--mono); letter-spacing: .04em; }
.foot__nav a { color: var(--fg-faint); text-decoration: none; transition: color .2s, transform .2s;
  width: fit-content; }
.foot__nav a:hover { color: var(--accent); transform: translateX(3px); }
.foot__meta { display: grid; gap: 12px; align-content: start; }
.foot__meta .fine { color: var(--fg-faint); }
.foot__meta a { color: var(--brass-lift); }
.foot__ok { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.foot__ok .linkbtn { color: var(--fg-mut); }

/* ---------------------------------------------- 08.2 fee split */
.split { display: grid; gap: 14px; margin: 4px 0 20px; }
.split__bar { display: flex; height: 34px; border: 1px solid var(--rule); overflow: hidden; }
.split__bar i {
  display: block; width: var(--w); position: relative;
  background: repeating-linear-gradient(118deg, var(--brass) 0 5px, transparent 5px 10px);
  border-right: 1px solid var(--rule);
  transition: filter .25s, transform .4s var(--ease-out);
  transform-origin: bottom;
}
.split__bar i:nth-child(1) { background-color: rgba(157, 123, 52, .22); }
.split__bar i:nth-child(2) { background-color: rgba(18, 107, 111, .22);
  background-image: repeating-linear-gradient(118deg, var(--teal) 0 5px, transparent 5px 10px); }
.split__bar i:nth-child(3) { background-color: rgba(192, 64, 42, .18);
  background-image: repeating-linear-gradient(118deg, var(--sig) 0 5px, transparent 5px 10px); }
.split__bar i:nth-child(4) { background-color: rgba(20, 38, 45, .1);
  background-image: repeating-linear-gradient(118deg, var(--fg-faint) 0 5px, transparent 5px 10px); }
.split:hover .split__bar i { filter: saturate(1.5); }
.band--ink .split__bar, .band--sea .split__bar, .band--slate .split__bar { border-color: rgba(246, 243, 236, .25); }
.band--ink .split__bar i, .band--sea .split__bar i, .band--slate .split__bar i {
  background-image: repeating-linear-gradient(118deg, var(--brass-lift) 0 5px, transparent 5px 10px);
}

/* --------------------------------------------------- 16. multi-page furniture
   The site is five pages that must read as one document: a page-level nav with
   an explicit current page, an in-page table of contents for the specification,
   the address block on the deployment pages, and the live panel on /network.
   Nothing here invents a colour — every rule re-uses the band tokens. */

/* header: which page am I on */
.nav__links a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }

/* the specification's own contents list, directly under the hero */
.toc { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: clamp(22px, 3vw, 34px); }
.toc a {
  font: 500 11.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; color: var(--fg-mut); border: 1px solid var(--rule);
  padding: 7px 10px; border-radius: var(--r); background: var(--plate);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.toc a b { color: var(--accent); font-weight: 600; margin-right: 6px; }
.toc a:hover { color: var(--fg); border-color: var(--accent); background: var(--card); transform: translateY(-2px); }
.band--ink .toc a, .band--sea .toc a, .band--slate .toc a {
  color: var(--fg-mut); border-color: rgba(246, 243, 236, .18); background: rgba(246, 243, 236, .06);
}
.band--ink .toc a:hover, .band--sea .toc a:hover, .band--slate .toc a:hover {
  color: var(--fg); border-color: var(--accent); background: rgba(246, 243, 236, .1);
}

/* address and parameter facts: a definition list that stays legible when a
   hex string is longer than its column */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
/* A cell in a hairline grid is painted twice: the gap colour is the container's
   background, and `--plate` on its own is translucent, so the rule showed through the
   tint and the reader was looking at three stacked layers where the ladder measures two
   — `--fg-faint` landed at 3.83:1 and the teal link at 3.7. The tint now sits on an
   opaque ground of its own, which is the pair `build/web-check.mjs` actually checks, and
   that is also why the three `.band--* .facts` rules are gone: `--rule` is already a
   light hairline and `--paper` already a dark card in the water and ink bands. */
.facts > div {
  background: var(--paper) linear-gradient(var(--plate), var(--plate));
  padding: clamp(13px, 1.5vw, 18px) clamp(15px, 1.7vw, 20px);
}
.facts dt { font: 600 9.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.facts dd { margin: 7px 0 0; font-size: 14px; line-height: 1.45; color: var(--fg-body); }
.facts a { color: var(--accent-2); }
.num--break { word-break: break-all; }
/* A 42-character address and a 66-character hash have no break opportunity at
   all, so their min-content width is the whole token: in a narrow column they
   push the column instead of the word. Anything marked .num may break anywhere —
   this is a chain value, and half an address on the next line reads correctly. */
.num, .num a { overflow-wrap: anywhere; }
.tbl--addr td a, .tbl--addr th code { word-break: break-all; }
.tbl--addr th { width: 20%; }
.tbl--addr td:last-child { width: 90px; }

/* The deployment-history table carries full 42-character addresses, so the
   generation column gives the width to the address column rather than taking
   the 20% the component table uses, and the pill column has room for one line
   of text plus the byte count under it. Fixed layout is what makes that
   division hold: with auto layout the 25-character book path in the first
   column wins the argument and the address is left to wrap four times.
   Under fixed layout only the first row sizes the columns, and the extra width
   is split equally when the declared widths do not add up — so the five widths
   are declared on the header cells and they add to 100%. */
.tbl--hist { table-layout: fixed; }
.tbl--hist thead th:nth-child(1) { width: 13%; }
.tbl--hist thead th:nth-child(2) { width: 32%; }
.tbl--hist thead th:nth-child(3) { width: 24%; }
.tbl--hist thead th:nth-child(4) { width: 12%; }
.tbl--hist thead th:nth-child(5) { width: 19%; }
.tbl--hist th small, .tbl--hist td small {
  display: block; margin-top: 4px; font: 400 11px/1.4 var(--mono);
  letter-spacing: 0; color: var(--fg-mut); word-break: break-all;
}
.band--ink .tbl--hist th small, .band--ink .tbl--hist td small { color: var(--fg-mut); }
/* The wide shell is for the table; the two paragraphs keep the reading measure
   they would have had in the narrow one. */
#orphan .lede__main, #orphan .fine { max-width: 78ch; }
@media (max-width: 600px) {
  /* Fixed layout with percentage columns holds down to about 600px — below that
     the address column is narrower than three characters of padding and the
     byte count under the pill wraps six times. So the grid stops being a grid:
     one generation per block, each line labelled from its own cell. */
  .tbl--hist thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .tbl--hist, .tbl--hist tbody, .tbl--hist tr, .tbl--hist th, .tbl--hist td,
  .tbl--hist td:last-child {
    display: block; width: auto; table-layout: auto;
  }
  .tbl--hist tbody tr { padding: 4px 0 14px; border-bottom: 1px solid rgba(246, 243, 236, .12); }
  .tbl--hist tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .tbl--hist th, .tbl--hist td { padding: 0 0 7px; border: 0; }
  .tbl--hist [data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font: 600 9.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
    color: var(--fg-faint);
  }
  .tbl--hist th small, .tbl--hist td small { margin-top: 1px; }
}

/* the live panel on /network */
.live { display: grid; gap: 14px; margin-top: clamp(22px, 3vw, 32px); }
.live__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font: 500 11.5px/1.4 var(--mono); color: var(--fg-mut); }
.live__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
.live__c {
  /* the same opaque cell as `.facts > div` above: a translucent tint over the grid's own
     hairline colour is not the ground the ladder measures. */
  background: var(--paper) linear-gradient(var(--plate), var(--plate));
  padding: clamp(14px, 1.7vw, 20px);
}
.live__c dt { font: 600 9.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.live__c dd { margin: 8px 0 0; font: 500 clamp(19px, 2.2vw, 27px)/1.15 var(--mono); letter-spacing: -.02em; color: var(--fg-body); word-break: break-word; }
.live__c dd small { display: block; font: 400 12px/1.5 var(--text); color: var(--fg-mut); letter-spacing: 0; margin-top: 6px; }
.band--ink .live__c dd { color: var(--fg); }
.live__note { font-size: 13.5px; line-height: 1.6; color: var(--fg-mut); max-width: 74ch; }
.live.is-stale .live__bar .pill { color: var(--warn); }
.live.is-down .live__bar .pill { color: var(--no); }

/* page-to-page footer pager */
.pager { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 3vw, 30px); }

/* the operator playbook: the .cons hairline grid, but numbered by the browser
   rather than by hand, so adding an entry cannot mis-label the entries below it */
.play { counter-reset: pb; }
.play > .con {
  display: block; counter-increment: pb; position: relative;
  padding-left: clamp(62px, 7vw, 96px);
}
.play > .con::before {
  content: counter(pb, decimal-leading-zero);
  position: absolute; left: clamp(18px, 2.2vw, 30px); top: clamp(18px, 2.2vw, 26px);
  font: 500 clamp(21px, 2.4vw, 30px)/1 var(--mono); letter-spacing: -.05em;
  color: var(--paper-3); -webkit-text-stroke: 1px var(--stroke);
}
.play > .con h3 { font-size: 18px; margin-bottom: 8px; }
.play > .con p, .play > .con .fine { font-size: 14.5px; line-height: 1.62; color: var(--fg-mut); max-width: 84ch; }
.play > .con h3 code { font-size: 13.5px; color: var(--fg-body); }

@media (max-width: 860px) {
  .play > .con { padding-left: 52px; }
  .play > .con::before { left: 16px; font-size: 19px; }
}

@media (max-width: 860px) {
  .facts, .live__grid { grid-template-columns: minmax(0, 1fr); }
  .tbl--addr th { width: auto; }
}

/* --------------------------------------------------- reveal motion
   Only runs when .js is present (set by the inline head script) so a blocked
   or failed app.js can never leave the page permanently invisible. */
html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .reveal.is-in { opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
html.js .reveal-stagger > * { opacity: 0; transform: translateY(14px); }
html.js .reveal-stagger.is-in > * { opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out) calc(var(--i, 0) * 70ms),
              transform .6s var(--ease-out) calc(var(--i, 0) * 70ms); }

/* --------------------------------------------------- night mode
   Day/night swaps the two light grounds for deep water and keeps the dark
   bands dark, so section rhythm survives the toggle. */
html[data-theme="night"] {
  --paper: #0e1c22;
  --paper-3: #1c333c;
  --fg: #f2efe7;
  --fg-body: rgba(242, 239, 231, .84);
  --fg-mut: rgba(242, 239, 231, .66);
  --fg-faint: rgba(242, 239, 231, .56);
  --rule: rgba(242, 239, 231, .16);
  --rule-2: rgba(242, 239, 231, .08);
  --plate: rgba(255, 255, 255, .05);
  --plate-2: rgba(255, 255, 255, .09);
  --card: #13262d;
  /* Both accents flip with the ground: night mode paints the light bands dark, so
     the daylight red and the daylight teal — which are AA on paper — would be
     2.78:1 and unreadable here. The hover ground is `--card` in this scope too, so
     the base `:hover` rules need no night override. */
  --accent: var(--sig-soft);
  --accent-on: #0b171d;
  --stroke: var(--brass-lift);
  --accent-2: var(--teal-lift);
  --ok: var(--teal-lift);
  --warn: var(--brass-lift);
  --no: var(--sig-soft);
  /* The light grounds are deep water by night, so the chips take the water bands'
     washes: a 22% mint would be barely a mark on #0e1c22 under a lifted label. */
  --ok-bg: rgba(18, 107, 111, .32);
  --warn-bg: rgba(122, 95, 36, .42);
  --no-bg: rgba(192, 64, 42, .24);
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 36px -24px rgba(0, 0, 0, .8);
}
html[data-theme="night"] body { background: #081217; }
/* Nothing else needs a night rule. `.band--paper` and every card — `.spec`, `.con`,
   `.role`, `.phase`, `.term`, the measure grid — already paint `var(--paper)` and
   hover to `var(--card)`, which is what the two blocks above remap, so by night they
   are the dark ground with the light text and the hover still works. */
html[data-theme="night"] .band--paper::before { opacity: .22;
  background-image: radial-gradient(circle at 1px 1px, rgba(242, 239, 231, .3) 1px, transparent 0); }
html[data-theme="night"] .band--paper .btn:not(.btn--ghost) { background: var(--sig); border-color: var(--sig); color: #fff; }
html[data-theme="night"] .band--paper .btn:not(.btn--ghost):hover { background: #fff; color: var(--ink); border-color: #fff; }
html[data-theme="night"] .pull--paper, html[data-theme="night"] .pull { color: var(--fg); border-color: var(--accent); }
html[data-theme="night"] .eq { background: #081217; }

/* The system-preference scope, and it has to carry the same declarations as the
   stored one above: a reader who never touches the toggle gets the preference their
   OS set, and if the two lists drift the page is AA for one of them. The gate reads
   both and refuses a token that is in one and not the other. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="day"]) {
    --paper: #0e1c22; --paper-3: #1c333c;
    --fg: #f2efe7; --fg-body: rgba(242, 239, 231, .84); --fg-mut: rgba(242, 239, 231, .66);
    --fg-faint: rgba(242, 239, 231, .56);
    --rule: rgba(242, 239, 231, .16); --rule-2: rgba(242, 239, 231, .08);
    --plate: rgba(255, 255, 255, .05); --plate-2: rgba(255, 255, 255, .09);
    --card: #13262d;
    --accent: var(--sig-soft); --accent-on: #0b171d; --stroke: var(--brass-lift); --accent-2: var(--teal-lift);
    --ok: var(--teal-lift); --warn: var(--brass-lift); --no: var(--sig-soft);
    --ok-bg: rgba(18, 107, 111, .32); --warn-bg: rgba(122, 95, 36, .42); --no-bg: rgba(192, 64, 42, .24);
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 36px -24px rgba(0, 0, 0, .8);
  }
  html:not([data-theme="day"]) body { background: #081217; }
}

/* --------------------------------------------------- responsive
   Every collapsed column here is written minmax(0, 1fr), never bare 1fr. A bare
   1fr track is minmax(auto, 1fr), and auto means the item's minimum content
   width — so one unbreakable 42-character address or one long code line pushes
   the track past the viewport and the whole page scrolls sideways. */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__mark { order: -1; justify-items: start; }
  .hero__mark figcaption { text-align: left; }
  .specs, .terms, .roles, .ctx dl, .reg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cycle__steps, .wf__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the rail is a four-across connector; below that it would point at
     card centres, so it stops pretending */
  .cycle__rail { display: none; }
  .cols--32 { grid-template-columns: minmax(0, 1fr); }
  .calc__grid { grid-template-columns: minmax(0, 1fr); }
  .measure__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gate { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__status dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .nav__links { display: none; }
  #nav { gap: 10px; }
  .cols--2 { grid-template-columns: minmax(0, 1fr); }
  .layer, .con, .phase { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .layer__tag { padding-top: 0; }
  .ng { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  /* A data table has a minimum content width and seven columns of numbers will
     not fit in 360px. Rather than let it push the page sideways — body hides
     overflow-x, so the tail of a wide table is simply unreachable — the table
     becomes its own scroller: the columns move, the page does not. */
  .tbl { display: block; overflow-x: auto; }
}
@media (max-width: 600px) {
  :root { --band-y: 46px; }
  .specs, .terms, .roles, .ctx dl, .cycle__steps, .wf__steps, .reg__grid,
  .measure__grid, .hero__status dl { grid-template-columns: minmax(0, 1fr); }
  .con { grid-template-columns: 54px minmax(0, 1fr); }
  .hero__title { font-size: clamp(31px, 9.6vw, 44px); }
  .hero__line { white-space: normal; }
  .hero__cta { gap: 9px; }
  .btn { width: 100%; justify-content: center; }
  .hero__cta .btn { width: auto; }
  .role dl, .spec p { font-size: 13.5px; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .eq__body { min-width: 440px; }
  .tbl { font-size: 13px; }
  .tbl th, .tbl td { padding: 9px 8px; }
  .tbl--risk td:nth-child(3), .tbl--risk td:last-child { width: auto; }
  /* The nav is a wordmark, a two-state theme control and one call to action.
     Measured at 360px that row wants 378px of a 309px bar, and body's overflow-x
     hides the difference — a reader on a small phone never sees the Live state
     button at all. So everything in it gets tighter, and the row is allowed to
     wrap rather than be cut. */
  #nav { height: auto; min-height: 56px; padding-block: 9px; gap: 8px 10px; flex-wrap: wrap; }
  .nav__brand { font-size: 16px; gap: 7px; min-width: 0; }
  .nav__brand em { font-size: 9.5px; padding: 2px 4px 1px; letter-spacing: .08em; }
  .nav__right { gap: 7px; margin-left: auto; }
  .themebtn { letter-spacing: .08em; }
  .themebtn span { padding: 6px 7px; }
  #nav .btn--sm { width: auto; padding: 7px 10px; font-size: 11.5px; }
}
@media (max-width: 430px) {
  .gate__i { padding-left: 48px; }
  .gate__i::before { left: 14px; }
}

@media (hover: none) {
  .spec:hover, .con:hover, .role:hover, .phase:hover, .term:hover, .layer:hover,
  .wf__s:hover, .gate__i:hover, .measure__grid > div:hover { transform: none; box-shadow: none; }
}

/* --------------------------------------------------- motion prefs */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.js .reveal, html.js .reveal-stagger > * { opacity: 1; transform: none; }
  .hero__line::after { transform: scaleX(1); }
}

/* --------------------------------------------------- print
   The document is meant to be circulated as a PDF, so print output is a
   first-class target rather than an afterthought. */
@media print {
  :root { --band-y: 22px; }
  html.js .reveal, html.js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  #nav, .progress, .skip, .hero__cta, .calc__reset, .themebtn, .foot__ok, .pager, .live__bar { display: none !important; }
  body { background: #fff; color: #111; font-size: 10.5pt; }
  .band, .foot { padding: 16px 0 !important; background: #fff !important; color: #111 !important;
    border-bottom: 1px solid #ccc; }
  .band::before, .band--paper::before, .band--ink::before, .band--sea::before, .band--slate::before { display: none; }
  .band * , .foot * { color: #111 !important; background: transparent !important; }
  .eq, .calc, .code { border: 1px solid #999; }
  .code { white-space: pre-wrap; font-size: 8.5pt; }
  .con, .spec, .role, .phase, .layer, .gate__i, .wf__s, .ng__item, .reg__c, .step, .term { break-inside: avoid; }
  .tbl { break-inside: auto; }
  .tbl thead { display: table-header-group; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; word-break: break-all; }
  .hero__mark svg { width: 180px; }
  .band { page-break-inside: avoid; }
}