/* ============================================================================
   FIELD NINE — styles.css
   The whole system in one file: faces, tokens, grid, type, chrome, components,
   motion, preferences.

   THE IDEA
   A specimen sheet. Paper ground, warm ink, one crimson that only ever appears
   where something crossed a line. Nothing glows, nothing rounds past 2px,
   nothing shadows. Depth is a hairline and a half-step of surface value.
   Hierarchy is made of four things only: size, tracking, weight, value.

   COLOUR
   Warm neutrals (hue ~40, sat 4–6%) so the page reads as printed matter rather
   than a screen, and a single crimson — #BC002D, the Hinomaru/Munsell 5R 4/12
   value — which is the only hue in the system and clears 6.4:1 on paper, so it
   can carry text as well as marks. On ink grounds the red is a different hex
   (#E3617A, 5.6:1) because a saturated red on near-black cannot be read.

   INK RAMP
   One ink, five values, derived by alpha. There is no "grey-500" in this file:
   hairline, muted and secondary text all come out of the same #121110.

   MOTION
   Transform and opacity only. Two curves — an expo-out for anything the
   visitor causes, a near-mechanical ease for anything the instrument does.
   Every transition has a reason to exist and a reduced-motion equivalent.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   0 · FACES
   Three variable faces, 79 KB total, subset to the characters this site sets.
   Archivo carries the claims, Instrument Sans the reading, Geist Mono the
   instrument (all digits monospaced, slashed zero, so readouts never jitter).

   The fallback faces are metric-overridden against the real files: Archivo and
   Instrument Sans are ~101–102% of Arial's advance, Geist Mono is 116% because
   it is monospaced at 600/1000 while the system mono is not. Net result: the
   swap is invisible and CLS on the headline is zero.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 101.01%;
  ascent-override: 96.99%;
  descent-override: 99.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 101.92%;
  ascent-override: 107.15%;
  descent-override: 117.97%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Menlo"), local("Courier New"), local("DejaVu Sans Mono");
  size-adjust: 116.5%;
  ascent-override: 111.02%;
  descent-override: 139.21%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2195,
    U+21D2, U+21E2, U+2212, U+2215, U+25B6, U+25B8, U+FEFF, U+FFFD,
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-0300, U+0304,
    U+0308, U+030B, U+0329, U+1D00-1DFF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2195,
    U+21D2, U+21E2, U+2212, U+2215, U+25B6, U+25B8, U+FEFF, U+FFFD,
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-0300, U+0304,
    U+0308, U+030B, U+0329, U+1D00-1DFF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2195, U+21D2,
    U+21E2, U+2212, U+2215, U+25B6, U+25B8, U+FEFF, U+FFFD,
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-0300, U+0304,
    U+0308, U+030B, U+0329, U+1D00-1DFF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   1 · TOKENS
   ------------------------------------------------------------------------ */

:root {
  /* — Grounds: paper, four steps. The page is #FDFDFB; plates sit below it. — */
  --paper-0: #fdfdfb;
  --paper-1: #f7f6f2;
  --paper-2: #efede6;
  --paper-3: #e7e4dc;

  /* — Ink: one value, five reads. — */
  --ink-0: #121110;
  --ink-1: #2a2825;
  --ink-2: #4a4741;
  --ink-70: rgb(18 17 16 / 0.72);
  --ink-52: rgb(18 17 16 / 0.54);
  --ink-38: rgb(18 17 16 / 0.4);
  --ink-20: rgb(18 17 16 / 0.2);
  --ink-11: rgb(18 17 16 / 0.11);
  --ink-06: rgb(18 17 16 / 0.06);
  --ink-03: rgb(18 17 16 / 0.03);

  /* — Rules: the only separator this system uses. — */
  --rule: #e0ddd5;
  --rule-2: #cbc7bd;
  --rule-3: #a8a49a;

  /* — Red: one hue, six steps. On paper the top three; on ink, red-ink. — */
  --red: #bc002d;
  --red-mid: #a8142a;
  --red-deep: #8c0f1f;
  --red-hi: #d02445;
  --red-ink: #e3617a;
  --red-wash: rgb(188 0 45 / 0.06);
  --red-wash-2: rgb(188 0 45 / 0.11);
  --red-line: rgb(188 0 45 / 0.3);

  /* — Semantic aliases. Tones re-point these; no rule ever hard-codes a hex. — */
  --bg: var(--paper-0);
  --fg: var(--ink-0);
  --fg-2: var(--ink-70);
  --fg-3: var(--ink-52);
  --fg-4: var(--ink-38);
  --accent: var(--red);
  --accent-fg: #fff;
  --line: var(--rule);
  --line-2: var(--rule-2);
  --plate: var(--paper-1);
  --hairline: var(--ink-11);

  /* — Type. Tracking scales with size, not in fixed steps: display is tight,
       labels open up, data sits in between. — */
  /* Real face first, metric-matched fallback second: the browser uses the
     webfont when it arrives and the adjusted system face only when it does
     not. Reversing the order makes the fallback win outright and the webfont
     is never used at all — measured, not assumed. */
  --font-display: "Archivo", "Archivo Fallback", "Instrument Sans", system-ui,
    sans-serif;
  --font-sans: "Instrument Sans", "Instrument Fallback", "Archivo",
    "Archivo Fallback", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "Geist Fallback", ui-monospace, "SF Mono", Menlo,
    monospace;

  --t-hero: clamp(2.6rem, 1.15rem + 6.2vw, 7rem);
  --t-display: clamp(2.1rem, 1.05rem + 4.4vw, 5rem);
  --t-h2: clamp(1.55rem, 0.9rem + 2.6vw, 2.75rem);
  --t-h3: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --t-lead: clamp(1.06rem, 0.98rem + 0.42vw, 1.3rem);
  --t-body: clamp(0.97rem, 0.94rem + 0.16vw, 1.06rem);
  --t-small: 0.875rem;
  --t-label: 0.6875rem;
  --t-micro: 0.625rem;

  --track-hero: -0.046em;
  --track-display: -0.036em;
  --track-head: -0.026em;
  --track-body: -0.006em;
  --track-label: 0.14em;
  --track-mark: 0.2em;

  --lh-hero: 0.86;
  --lh-display: 0.94;
  --lh-head: 1.08;
  --lh-body: 1.66;
  --measure: 68ch;
  --measure-tight: 46ch;

  /* — Grid. Derived, never declared: one formula covers 320px → ultrawide. — */
  --gutter: clamp(18px, 4.2vw, 60px);
  --max: 1560px;
  --nav-h: 62px;
  --rhythm: clamp(76px, 9vw, 146px);
  --rhythm-s: clamp(58px, 7vw, 100px);
  --radius: 2px;
  --hair: 1px;

  /* — Motion. Two curves, six durations, no easing invented per component. — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mech: cubic-bezier(0.43, 0.01, 0.46, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-tap: 140ms;
  --t-ui: 260ms;
  --t-panel: 420ms;
  --t-scene: 760ms;
  --t-enter: 1000ms;

  /* — Key light: one soft source above the fold, no glow anywhere else. — */
  --key-light: radial-gradient(
    120% 42% at 50% -8%,
    rgb(255 255 255 / 0.9) 0%,
    rgb(255 255 255 / 0) 64%
  );
  --bevel: inset 0 1px 0 rgb(255 255 255 / 0.7);

  color-scheme: light;
}

/* An ink ground: the inverted instrument bands. Re-points the semantic layer
   and paints itself with the new ground — every component keeps working and
   the palette simply flips. */
.tone-ink {
  --bg: #121110;
  --fg: #f7f6f2;
  --fg-2: rgb(247 246 242 / 0.72);
  --fg-3: rgb(247 246 242 / 0.5);
  --fg-4: rgb(247 246 242 / 0.34);
  --accent: var(--red-ink);
  --accent-fg: #121110;
  --line: rgb(247 246 242 / 0.16);
  --line-2: rgb(247 246 242 / 0.3);
  --plate: #1a1917;
  --hairline: rgb(247 246 242 / 0.13);
  --red-wash: rgb(227 97 122 / 0.1);
  --red-wash-2: rgb(227 97 122 / 0.16);
  --red-line: rgb(227 97 122 / 0.42);
  background-color: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}

.tone-red {
  --bg: var(--red);
  --fg: #fff;
  --fg-2: rgb(255 255 255 / 0.78);
  --fg-3: rgb(255 255 255 / 0.6);
  --fg-4: rgb(255 255 255 / 0.4);
  --accent: #fff;
  --accent-fg: var(--red);
  --line: rgb(255 255 255 / 0.34);
  --line-2: rgb(255 255 255 / 0.5);
  --plate: #a8142a;
  --hairline: rgb(255 255 255 / 0.28);
  --red-wash: rgb(255 255 255 / 0.1);
  --red-wash-2: rgb(255 255 255 / 0.16);
  --red-line: rgb(255 255 255 / 0.44);
  background-color: var(--bg);
  color: var(--fg);
}

/* ---------------------------------------------------------------------------
   2 · BASE
   ------------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  background: var(--paper-0);
}

body {
  margin: 0;
  background: var(--key-light), var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--t-panel) var(--ease-out);
}

/* One place decides selection colour, and it follows the accent. */
::selection {
  background: var(--accent);
  color: var(--accent-fg);
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
sup { line-height: 0; }

/* Numeric readouts are instruments: tabular figures, slashed zero, and a
   slashed zero only where a value could be mistaken for an O. */
.mono,
.tnum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1, "kern" 1;
}

/* A single, consistent focus ring. Red on paper, light red on ink — it is the
   one place a keyboard visitor gets the signal colour as pure chrome. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

/* First tab stop on every page: off-screen until it is asked for, then on the
   bar's own colour so it reads as chrome rather than content. */
.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 80;
  padding: 10px 16px;
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--t-ui) var(--ease-out);
}
.skip:focus-visible { transform: none; outline-offset: 2px; }

/* Cross-page transitions: a short, quiet handoff with a crimson rule that
   runs the top edge while the pages swap. */
@keyframes f9-page-out {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes f9-page-in {
  from { opacity: 0; transform: translateY(10px); }
}
::view-transition-old(root) { animation: f9-page-out 200ms ease both; }
::view-transition-new(root) { animation: f9-page-in 420ms var(--ease-out) both; }
::view-transition-group(root) { animation-duration: 320ms; }

/* ---------------------------------------------------------------------------
   3 · TYPE
   Three voices, one hierarchy. Display is Archivo at heavy weights and tight
   tracking; prose is Instrument Sans at a fixed 68ch measure; every label,
   index, readout and caption is Geist Mono, uppercase, opened up.
   ------------------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-wrap: balance;
}

/* — Claims. The site is a series of claims; they are set, not shouted. — */
.statement {
  font-size: var(--t-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  font-weight: 600;
  max-width: 22ch;
  text-wrap: balance;
}
.statement--wide { max-width: 30ch; }

/* The claim holds the left of the hero; the field gets the room it needs to
   read as an instrument rather than a texture. Twelve characters is the widest
   measure that still leaves the composition two columns at every width. */
h1 {
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--track-hero);
  font-weight: 700;
  max-width: 12ch;
}
h1.t-display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  max-width: 20ch;
}

/* — Reading voice. One measure, generous leading, warm value. — */
.lede,
.section-lede {
  font-size: var(--t-lead);
  line-height: 1.58;
  letter-spacing: var(--track-body);
  color: var(--fg-2);
  max-width: var(--measure);
  text-wrap: pretty;
}
.section-lede + .section-lede { margin-top: 1.1em; }
.section-lede strong { color: var(--fg); font-weight: 600; }
.lede { max-width: 54ch; }

/* — Instrument voice: labels, ids, telemetry, captions. — */
.label,
.section-no,
.mono {
  font-size: var(--t-label);
  line-height: 1.4;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
}
.mono--micro { font-size: var(--t-micro); letter-spacing: 0.16em; }
.mono--data {
  font-size: var(--t-small);
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* The site names objects in the system in the mark voice: FIELD NINE, STATE,
   ACTION, TRAJECTORY, BOUNDARY, WITNESS. Those words are system objects, not
   copy, so they get the widest tracking and the heaviest weight. */
.mark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  font-feature-settings: "kern" 1;
}

.dim { color: var(--fg-3); }
.dimmer { color: var(--fg-4); }
.accent { color: var(--accent); }

/* ---------------------------------------------------------------------------
   4 · LAYOUT
   The grid is derived, so every inset and full-bleed is arithmetic on two
   variables rather than a breakpoint guess.
   ------------------------------------------------------------------------ */

.wrap {
  width: min(100% - var(--gutter) * 2, var(--max));
  margin-inline: auto;
}
.wrap--wide { width: min(100% - var(--gutter) * 2, var(--max)); }
.wrap--read { width: min(100% - var(--gutter) * 2, 860px); }

/* An edge-aligned rail: nav, HUD and footer all resolve to the same margin. */
.pad-rail {
  padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
}

main { display: block; }

.chapter {
  position: relative;
  padding-block: var(--rhythm);
  border-top: var(--hair) solid var(--line);
}
.chapter:first-of-type { border-top: 0; }
.chapter--tight { padding-block: var(--rhythm-s); }

/* Section head: a number column and a claim column, on the derived grid. */
.section-head {
  display: grid;
  grid-template-columns: minmax(120px, 15%) 1fr;
  gap: 0 clamp(24px, 4vw, 72px);
  margin-bottom: clamp(36px, 5vw, 68px);
}
.section-no {
  padding-top: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section-no em {
  font-style: normal;
  color: var(--fg-4);
}
.section-no::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 4px;
  background: linear-gradient(
    90deg,
    var(--accent) 0 26%,
    transparent 26% 34%,
    var(--line-2) 34% 62%,
    transparent 62% 70%,
    var(--line-2) 70% 100%
  );
}
.section-body { min-width: 0; }
.section-body > * + * { margin-top: clamp(20px, 2.4vw, 32px); }

/* A full-bleed band: pulls out of the wrap using the wrap's own arithmetic. */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.bleed--pad { padding-inline: max(var(--gutter), (100% - var(--max)) / 2); }

/* ---------------------------------------------------------------------------
   5 · NAV
   Mark and wordmark left, chapters optically centred, one action right.
   Active chapter is a single crimson dot — no pill, no card, no shadow.
   ------------------------------------------------------------------------ */

.f9-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgb(253 253 251 / 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: var(--hair) solid transparent;
  transition:
    background-color var(--t-ui) var(--ease-out),
    border-color var(--t-ui) var(--ease-out);
}
.f9-nav.is-scrolled {
  background: rgb(253 253 251 / 0.94);
  border-bottom-color: var(--line);
}

/* The bar re-grounds itself over an inverted section. Same components, same
   geometry — only the semantic tokens move, so the chrome never loses
   contrast against what it is floating over. */
.f9-nav.is-ink {
  --fg: #f7f6f2;
  --fg-2: rgb(247 246 242 / 0.74);
  --fg-3: rgb(247 246 242 / 0.56);
  --fg-4: rgb(247 246 242 / 0.4);
  --accent: var(--red-ink);
  --line: rgb(247 246 242 / 0.16);
  --line-2: rgb(247 246 242 / 0.34);
  background: rgb(18 17 16 / 0.76);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: rgb(247 246 242 / 0.12);
}
.f9-nav.is-ink.is-scrolled { background: rgb(18 17 16 / 0.94); }
.f9-nav.is-ink .f9-mark { box-shadow: 0 0 0 1px rgb(247 246 242 / 0.2); }

.f9-nav-inner {
  width: 100%;
  padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 28px);
  position: relative;
  transition: height var(--t-ui) var(--ease-out);
}
.f9-nav.is-scrolled .f9-nav-inner { height: calc(var(--nav-h) - 6px); }

/* — Lockup — */
.f9-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  color: var(--fg);
}
.f9-mark {
  width: 26px;
  height: 26px;
  flex: none;
  transition: transform var(--t-ui) var(--ease-mech);
}
.f9-brand:hover .f9-mark { transform: rotate(-8deg); }
.f9-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  white-space: nowrap;
}

/* — Chapter states — */
.f9-state {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.f9-state a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-4);
  transition: color var(--t-ui) var(--ease-out);
}
.f9-state a .n { display: none; }
.f9-state a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-2);
  flex: none;
  transition:
    background-color var(--t-ui) var(--ease-out),
    transform var(--t-ui) var(--ease-mech);
}
.f9-state a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition:
    transform var(--t-panel) var(--ease-out),
    opacity var(--t-ui) ease;
}
.f9-state a:hover { color: var(--fg-2); }
.f9-state a:hover::after { opacity: 0.5; transform: scaleX(1); }
.f9-state a[aria-current="true"] { color: var(--fg); }
.f9-state a[aria-current="true"]::before {
  background: var(--accent);
  transform: scale(1.25);
}
.f9-state a[aria-current="true"]::after {
  background: var(--accent);
  opacity: 1;
  transform: scaleX(1);
}
/* The sheet's cross-page action only exists inside the sheet. */
.f9-state-foot { display: none; }

@media (min-width: 861px) {
  /* Optically centred, so the lockup and the action never shove the states. */
  .f9-state {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* — Actions — */
.f9-nav-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.f9-enter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding-inline: 14px;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--radius);
  transition:
    border-color var(--t-ui) var(--ease-out),
    background-color var(--t-ui) var(--ease-out),
    color var(--t-ui) var(--ease-out);
}
.f9-enter i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform var(--t-ui) var(--ease-mech);
}
.f9-enter:hover {
  border-color: var(--accent);
  background: var(--red-wash);
  color: var(--accent);
}
.f9-enter:hover i { transform: scale(1.6); }

/* — Menu control: two bars that resolve into a cross. — */
.f9-index-toggle {
  display: none;
  width: 42px;
  height: 34px;
  border: var(--hair) solid var(--line-2);
  border-radius: var(--radius);
  color: var(--fg);
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease-out);
}
.f9-index-toggle:hover { border-color: var(--accent); }
.f9-toggle-ico {
  display: block;
  position: relative;
  width: 16px;
  height: 9px;
  margin-inline: auto;
}
.f9-toggle-ico::before,
.f9-toggle-ico::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition:
    top var(--t-panel) var(--ease-mech),
    transform var(--t-panel) var(--ease-mech);
}
.f9-toggle-ico::before { top: 0; }
.f9-toggle-ico::after { top: 7.5px; }
.f9-index-toggle[aria-expanded="true"] .f9-toggle-ico::before {
  top: 3.75px;
  transform: rotate(45deg);
}
.f9-index-toggle[aria-expanded="true"] .f9-toggle-ico::after {
  top: 3.75px;
  transform: rotate(-45deg);
}

/* — Edge index: the dossier contents, revealed only at the edge. — */
.f9-edge {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 55;
  padding: 18px 18px 18px 16px;
  background: var(--bg);
  border: var(--hair) solid var(--line);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  opacity: 0;
  transform: translate(-10px, -50%);
  pointer-events: none;
  transition:
    opacity var(--t-ui) var(--ease-out),
    transform var(--t-panel) var(--ease-out);
}
.f9-edge ol { display: grid; gap: 10px; }
.f9-edge a {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-4);
  white-space: nowrap;
  transition: color var(--t-ui) var(--ease-out);
}
.f9-edge a:hover { color: var(--fg-2); }
.f9-edge a.on { color: var(--accent); }
body.edge-hot .f9-edge { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }

/* — Mobile sheet — */
@media (max-width: 860px) {
  .f9-index-toggle { display: block; }
  .f9-state {
    display: none;
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--paper-0);
    border-bottom: var(--hair) solid var(--line);
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .f9-state.open { display: flex; }
  .f9-state li { border-bottom: var(--hair) solid var(--rule); }
  .f9-state li:last-child { border-bottom: 0; }
  .f9-state a {
    padding: 20px 0;
    min-height: 58px;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--fg);
  }
  .f9-state a .n {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 400;
    letter-spacing: var(--track-label);
    color: var(--fg-4);
    order: 2;
    margin-left: auto;
  }
  .f9-state a::before { order: 3; }
  .f9-state a::after { display: none; }
  .f9-state.open li { animation: f9SheetItem var(--t-panel) var(--ease-out) both; }
  .f9-state.open li:nth-child(1) { animation-delay: 40ms; }
  .f9-state.open li:nth-child(2) { animation-delay: 80ms; }
  .f9-state.open li:nth-child(3) { animation-delay: 120ms; }
  .f9-state.open li:nth-child(4) { animation-delay: 160ms; }
  .f9-state.open li:nth-child(5) { animation-delay: 200ms; }
  .f9-state.open li:nth-child(6) { animation-delay: 240ms; }
  .f9-state.open li:nth-child(7) { animation-delay: 280ms; }

  /* The sheet's own action: full width, below the chapters, on a hairline. */
  .f9-state-foot {
    display: block;
    margin-top: 10px;
  }
  .f9-enter--sheet {
    width: 100%;
    height: 52px;
    justify-content: center;
    gap: 12px;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
  }
}

/* Below this width the bar keeps the lockup and the menu only. The page it
   points at is the last row of the sheet instead (built by ds-nav.js), so the
   link is never lost — it just moves. */
@media (max-width: 560px) {
  .f9-enter { display: none; }
}

@keyframes f9SheetItem {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   6 · ACTIONS
   The primary button is a split control: the label cell is nailed down and
   only the arrow cell travels. Cheaper than any glow, and it reads machined.
   ------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: stretch;
  border: var(--hair) solid var(--line-2);
  border-radius: var(--radius);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg);
  overflow: hidden;
  transition:
    border-color var(--t-ui) var(--ease-out),
    color var(--t-ui) var(--ease-out);
}
.btn__label {
  padding: 15px 20px;
  background: var(--fg);
  color: var(--bg);
  transition: background-color var(--t-ui) var(--ease-out);
}
.btn__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  border-left: var(--hair) solid var(--line-2);
  color: var(--fg);
  transition:
    transform var(--t-ui) var(--ease-mech),
    background-color var(--t-ui) var(--ease-out),
    color var(--t-ui) var(--ease-out);
}
.btn:hover { border-color: var(--accent); }
.btn:hover .btn__arrow {
  background: var(--accent);
  border-left-color: var(--accent);
  color: var(--accent-fg);
  transform: translateX(2px);
}

/* Secondary: a text link that draws its own underline from the left. */
.link {
  position: relative;
  display: inline-block;
  padding-block: 4px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color var(--t-ui) var(--ease-out);
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.001);
  transform-origin: 0 50%;
  transition: transform var(--t-panel) var(--ease-out);
}
.link:hover { color: var(--accent); }
.link:hover::after { transform: scaleX(1); }
.link--live { color: var(--accent); }
.link--live::after { transform: scaleX(1); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

/* ---------------------------------------------------------------------------
   7 · LEDGER — the site's list primitive
   Ruled rows, never cards. An ordinal in mono, the entry, and metadata. The
   page's rhythm is set by hairlines; a table is more honest than a grid of
   rounded rectangles.
   ------------------------------------------------------------------------ */

.ledger {
  border-top: var(--hair) solid var(--line);
}
.ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px clamp(16px, 2.6vw, 40px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: var(--hair) solid var(--line);
  transition: background-color var(--t-ui) var(--ease-out);
}
/* The ordinal column carries its own tick, so the eye can find the row even
   when the entry is a single word. */
.ledger-n::after {
  content: "";
  display: block;
  width: 18px;
  height: 1px;
  margin-top: 10px;
  background: var(--line-2);
  transition: width var(--t-panel) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.ledger-row:hover .ledger-n::after { width: 30px; background: var(--accent); }
.ledger-n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: var(--track-label);
  color: var(--fg-4);
  transition: color var(--t-ui) var(--ease-out);
}
.ledger-t {
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.18rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.014em;
  color: var(--fg);
}
.ledger-t em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: var(--t-body);
  line-height: 1.6;
  letter-spacing: var(--track-body);
  color: var(--fg-3);
  max-width: 58ch;
}
.ledger-m {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-4);
  white-space: nowrap;
  text-align: right;
}
.ledger-row:has(a:hover) { background: var(--red-wash); }
.ledger-row:has(a:hover) .ledger-n { color: var(--accent); }
.ledger-row a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ledger-row a:focus-visible { outline-offset: -3px; }

/* A ledger row that shows a sequence: index → term → consequence. */
.ledger-row--flow .ledger-t { font-family: var(--font-display); font-weight: 600; }
/* The connective mark between the two halves of a flow row. It has to be
   legible at a glance and it has to travel on hover — it is the only motion
   in a ledger row. */
.ledger-arrow {
  display: inline-block;
  margin-inline: 0.55em;
  color: var(--fg-3);
  font-family: var(--font-display);
  font-size: 0.95em;
  font-weight: 500;
  transition: transform var(--t-ui) var(--ease-mech), color var(--t-ui) var(--ease-out);
}
.ledger-row--flow:hover .ledger-arrow { color: var(--accent); transform: translateX(4px); }

/* ---------------------------------------------------------------------------
   8 · PLATES
   Specifications and commitments: a hairline grid, one value of separation.
   ------------------------------------------------------------------------ */

.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
  background: var(--line);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
}
.spec-cell {
  background: var(--bg);
  padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2vw, 26px);
  box-shadow: var(--bevel);
}
.spec-cell h3 {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg);
}
.spec-cell p {
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* Severity scale: L1–L4, the ordinal lit in red, the rest in ink. */
.scale {
  border-top: var(--hair) solid var(--line);
}
.scale-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 11rem) minmax(0, 1fr);
  gap: 6px clamp(16px, 2.4vw, 34px);
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: var(--hair) solid var(--line);
}
.scale-row > span {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: var(--track-label);
  color: var(--accent);
}
.scale-row b {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--fg);
}
.scale-row p {
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--fg-2);
  max-width: 64ch;
  text-wrap: pretty;
}

/* The limits note is the most credibility-bearing line on the site: a red
   margin rule, held slightly apart from the argument above it. */
.limits {
  max-width: var(--measure);
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  font-size: var(--t-body);
  line-height: 1.68;
  color: var(--fg-3);
  text-wrap: pretty;
}

/* The reticle is a position inside whatever it frames. Figure plates are
   already `position: relative`, so their `.reticle-frame` needs nothing; only
   the full-bleed hero needs a positioned wrapper of its own. Putting the
   `reticle` class on the plate itself made the plate absolute and collapsed
   it — the class belongs on the hero wrapper and nowhere else. */
.hero > .reticle {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.hero > .reticle {
  --ret-inset: clamp(10px, 1.4vw, 20px);
  --ret-inset-block-start: calc(var(--nav-h) + 14px);
}

/* ---------------------------------------------------------------------------
   9 · HERO
   One claim, low in a tall field. The instrument runs behind it and the
   geometry is kept out of the reading zone by the engine's safe region.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--nav-h) + 12vh) clamp(56px, 7vh, 88px);
  isolation: isolate;
}
.hero__inner { position: relative; z-index: 3; }

/* An open hero: the claim sits high and the argument follows immediately. Used
   where the page is a reference rather than an opening statement. */
.chapter--open {
  padding-block: calc(var(--nav-h) + clamp(52px, 11vh, 124px)) clamp(60px, 8vw, 116px);
}
.chapter--open h1 { margin: 0; }
.chapter--open .chain { margin-top: clamp(36px, 5vw, 60px); }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
}
.hero-eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.hero-support {
  max-width: 46ch;
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: var(--t-lead);
  line-height: 1.56;
  letter-spacing: var(--track-body);
  color: var(--fg-2);
  text-wrap: pretty;
}
.hero-actions { margin-top: clamp(28px, 3.4vw, 40px); }

/* The vocabulary chain, set as an instrument readout under a hairline. */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: clamp(48px, 7vh, 92px);
  padding-top: 18px;
  border-top: var(--hair) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-4);
}
.chain span { white-space: nowrap; }
.chain b {
  font-weight: 400;
  color: var(--line-2);
  transition: color var(--t-ui) var(--ease-out);
}
.chain:hover b { color: var(--accent); }
.chain em { font-style: normal; color: var(--accent); }

/* Exit: the close of the argument, inverted. */
.chapter--exit {
  padding-block: clamp(88px, 11vw, 156px) clamp(68px, 8vw, 124px);
  border-top: var(--hair) solid var(--line);
}
.chapter--exit h2 {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-weight: 700;
  max-width: 18ch;
}

/* ---------------------------------------------------------------------------
   10 · CONTACT + FOOTER
   The footer is a registration line: a publication prints its own id.
   ------------------------------------------------------------------------ */

.contact-line {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.1rem + 3.4vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--fg);
  overflow-wrap: anywhere;
  transition: color var(--t-ui) var(--ease-out);
}
.contact-line span { color: var(--fg-2); transition: color var(--t-ui) var(--ease-out); }
.contact-line:hover { color: var(--accent); }
.contact-line:hover span { color: var(--fg); }

footer {
  padding-block: clamp(56px, 7vw, 96px) clamp(36px, 4vw, 56px);
  border-top: var(--hair) solid var(--line);
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 3vw, 48px);
  padding-bottom: clamp(36px, 4vw, 56px);
}
.foot-col h2 {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 14px;
}
.foot-col ul { display: grid; gap: 10px; }
.foot-col a {
  font-size: var(--t-small);
  color: var(--fg-2);
  transition: color var(--t-ui) var(--ease-out);
}
.foot-col a:hover { color: var(--accent); }

/* Registration line: the site's serial number, set like a stamp on a print. */
.foot-register {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding-top: 20px;
  border-top: var(--hair) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.foot-register b { font-weight: 400; color: var(--fg-3); }
.foot-register .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.foot-register .spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------------------------
   11 · REVEALS
   One primitive, two forms. Words rise out of their own line box; everything
   else fades and lifts a little. Both are transform+opacity only, so they
   composite and never touch layout.
   ------------------------------------------------------------------------ */

/* Each word carries its own clip so a rising word cannot slide over its
   neighbour. The clip box has to be tall enough to hold the full glyph ink:
   at 0.86 line-height the ink of a descender runs 0.118em below the content
   box, and a shorter clip shaves the tail off every g, j, p, q and y in the
   headline. The negative margin pays the padding straight back, so the line
   rhythm is untouched. */
.split .w {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.split .w > .wi {
  display: inline-block;
  transform: translateY(104%);
  opacity: 0;
  transition:
    transform var(--t-scene) var(--ease-out),
    opacity calc(var(--t-scene) * 0.7) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.split.split-in .w > .wi { transform: none; opacity: 1; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--t-scene) var(--ease-out),
    transform var(--t-scene) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* A rule that draws itself in from the left, once, on entry. */
.draw-rule {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-scene) var(--ease-out);
}
.in .draw-rule,
.draw-rule.in { transform: scaleX(1); }

/* ---------------------------------------------------------------------------
   11b · SMALL SCREENS
   Below 720px the three-column instruments collapse rather than shrink: the
   ordinal and the label stay on one line, and the description moves under
   them. Nothing is allowed to squeeze a measure of prose out of existence.
   ------------------------------------------------------------------------ */

@media (max-width: 720px) {
  .scale-row {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 4px 14px;
  }
  .scale-row b { grid-column: 2; }
  .scale-row p { grid-column: 2; max-width: none; }

  .ledger-row {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 4px 14px;
  }
  .ledger-m {
    grid-column: 2;
    text-align: left;
    white-space: normal;
    padding-top: 6px;
  }
  .ledger-t em { font-size: 0.9375rem; }

  .actions { gap: 12px 18px; }
  .btn { flex: 1 1 auto; }
  .btn__label { padding: 14px 16px; }
  .btn__arrow { width: 44px; }

  .foot-register { gap: 8px 14px; letter-spacing: 0.11em; }
  .foot-register .spacer { flex-basis: 100%; height: 0; }

  .spec { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* The eyebrow is one line of identity, not a paragraph: at phone widths the
     tracking is opened less rather than letting it wrap. */
  .hero-eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    gap: 10px;
  }
  /* Terms stay terms; the arrows go, because a line break can orphan one. */
  .chain b { display: none; }
  .chain { gap: 4px 16px; }
}

@media (max-width: 420px) {
  .f9-word { font-size: 11px; letter-spacing: 0.16em; }
  .btn__label { font-size: 0.625rem; letter-spacing: 0.12em; }
  .btn__arrow { width: 40px; }
  .chain { font-size: 0.625rem; letter-spacing: 0.12em; gap: 4px 8px; }
}

/* ---------------------------------------------------------------------------
   12 · PREFERENCES
   Every motion above has a still equivalent; every transparency has a solid.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .split .w > .wi { transform: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; }
  .draw-rule { transform: scaleX(1); }
  .f9-edge { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .f9-nav,
  .f9-state { background: var(--paper-0); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root {
    --rule: #b9b4a9;
    --rule-2: #8d887d;
    --ink-70: rgb(18 17 16 / 0.86);
    --ink-52: rgb(18 17 16 / 0.72);
    --ink-38: rgb(18 17 16 / 0.6);
  }
  .tone-ink { --line: rgb(247 246 242 / 0.4); --line-2: rgb(247 246 242 / 0.6); }
}

@media (forced-colors: active) {
  .f9-state a::before,
  .chain span + span::before { forced-color-adjust: none; }
  .ledger-row a::after { outline: 1px solid CanvasText; }
}