/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * Hallmark · theme: studied-DNA (source: https://centralhq.com/) · design-system: site/tokens.css
 * observed-fonts: American Grotesk Condensed Bold + Söhne + Söhne Mono (Klim, commercial)
 *   → rebuilt by role as Archivo wdth 62/700 + Archivo wdth 100 + Geist Mono
 * observed-paper: #0e0e0e  ·  observed-accent: #e50000  ·  studied: yes  ·  DNA-source: url
 * rhythm: measured live at 1009px — 800px content spine, fixed 200px voids between
 *   major blocks, centred display fold over left-aligned body.
 *
 * Four pages, four macrostructures, one system. The pages are deliberately
 * NOT the same shape:
 *   index          Marquee Hero (DNA variant: the source keeps a lede and a
 *                  CTA pair in the fold, so this one does too; the action row
 *                  sits off the centre axis per gate 6)
 *   probabilities  Catalogue      two models as two specimens of one thing
 *   record         Index-First    the page is the ledger, no hero at all
 *   about          Manifesto      declarations in bleed bands, no step list
 * nav: N12 status banner + retracting bar · footer: Ft5 statement
 * mono discipline: Geist Mono holds two roles only, tabular numerals and
 *   micro-labels. Chrome text is the body face.
 * contrast: pass (40-41) · nav/footer slop: pass (42-45) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · mobile: pass (34, 49, 50-57)
 */

/* ---- base ---------------------------------------------------------------- */

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

html, body {
  /* clip, not hidden: hidden on the root kills position:sticky in Safari */
  overflow-x: clip;
}

html {
  background: var(--color-paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-variation-settings: "wdth" var(--width-normal);
  font-size: var(--text-base);
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--spine);
  margin: 0 auto;
  padding-inline: var(--page-gutter);
  /* clears the banner and the bar at rest */
  padding-top: calc(var(--banner-h) + var(--bar-h) + var(--space-3xl));
}

/* The home fold centres itself in what is left of the viewport, so it does
   not want the standard block of top padding on top of that. */
body[data-page="home"] main {
  padding-top: calc(var(--banner-h) + var(--bar-h));
}

/* The Manifesto page bleeds edge to edge, so it opts out of the spine. */
body[data-page="about"] main {
  max-width: none;
  padding-inline: 0;
  /* the first band carries its own void, so main only clears the nav */
  padding-top: calc(var(--banner-h) + var(--bar-h));
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }

a { color: inherit; }

code { font-family: var(--font-data); }

:focus-visible {
  outline: var(--rule-firm) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-cell);
}

::selection { background: var(--color-accent); color: var(--color-accent-ink); }


/* ---- N12 · status banner + retracting bar -------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  transform: translateY(0);
  transition: transform var(--dur-short) var(--ease-out);
}
.nav.is-compact { transform: translateY(calc(var(--banner-h) * -1)); }
.nav.is-dismissed { transform: none; }
.nav.is-dismissed .nav-banner { display: none; }

.nav-banner {
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding-inline: var(--space-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
#banner-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-banner b { font-weight: 500; }
.nav-banner .sep { opacity: 0.55; }

.nav-x {
  position: absolute;
  right: var(--space-sm);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.nav-x:hover { opacity: 1; }
.nav-x:active { transform: translateY(1px); }
.nav-x:disabled { opacity: 0.4; cursor: not-allowed; }

.nav-bar {
  height: var(--bar-h);
  background: color-mix(in oklab, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.nav-inner {
  height: 100%;
  max-width: var(--spine);
  margin: 0 auto;
  padding-inline: var(--page-gutter);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* The lockup: a staggered starting grid, pole cell in accent, then the name.
   Six cells in two offset columns is the one shape that reads as an F1 grid
   and as a probability matrix at the same time, which is the whole site. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--width-condensed);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}
.mark {
  height: 1.05em;
  width: auto;
  display: block;
  overflow: visible;
}
.mark rect { fill: var(--color-ink-2); transition: fill var(--dur-micro) var(--ease-out); }
.mark .pole { fill: var(--color-accent); }
/* The pole cell is the only moving part in the chrome. */
.wordmark:hover .mark rect { fill: var(--color-ink); }
.wordmark:hover .mark .pole { fill: var(--color-accent-text); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.nav-links a:hover { color: var(--color-ink); }
.nav-links a:active { color: var(--color-accent-text); }
.nav-links a[aria-current="page"] {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), transform 160ms var(--ease-out);
}
.btn:hover { background: var(--color-accent-text); }
.btn:active { background: var(--color-accent); transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-paper-3);
  color: var(--color-muted);
}

.btn-quiet {
  background: var(--color-paper-3);
  color: var(--color-ink);
}
.btn-quiet:hover { background: var(--color-paper-4); }


/* ---- index · Marquee Hero ------------------------------------------------ */

/* The fold is two columns: the claim on the left, the live call on the right.
   It used to be claim-only over a 200px void with the call card below the
   crease, which left the right half of every wide screen empty and made the
   card look stranded. The card belongs in the fold: it is the thing the
   headline is promising. */
.marquee {
  min-height: calc(72dvh - var(--bar-h));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3xl);
  text-align: left;
  padding-block: var(--space-3xl);
}
.marquee h1 {
  font-variation-settings: "wdth" var(--width-condensed);
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 14ch;
}
/* The source dims the opening word rather than highlighting a later one.
   The headline reads as if it fades up into itself. */
.marquee h1 .dim { color: var(--color-dim); }
.marquee .sub {
  max-width: 46ch;
  margin-top: var(--space-xl);
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.45;
}
/* Gate 6: the headline and lede are centred, so the action row breaks the
   axis and sits flush to the spine. Three things on one centre line is the
   AI hero shape. */
.marquee .cta {
  margin-top: var(--space-2xl);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* The fixed void is the whole rhythm. Nothing else separates blocks. */
.void { height: var(--void); }

/* The animation targets the copy column, so it needs to be a grid item. */
.marquee-copy { min-width: 0; }

/* The nav is fixed, so an in-page anchor has to duck under it. */
[id] { scroll-margin-top: calc(var(--banner-h) + var(--bar-h) + var(--space-lg)); }

/* ---- the reading column --------------------------------------------------
   Blocks fill the spine. Only prose is held back, and it is held back by
   --measure, not by a second frame. The earlier version capped every block at
   800px inside the 1152px frame: the result was a centred page whose content
   all sat in its left two thirds, which reads as a mistake rather than as a
   margin. Tables want the width, prose does not, so the cap belongs on the
   paragraph and nowhere else. */

.lede { max-width: var(--measure); color: var(--color-ink-2); }

/* ---- the next-call block (index + probabilities) --------------------------
   The call header is one panel component: strap, event head, and whatever the
   page adds (leaders table on home, commit stamps on probabilities). Dense
   dashboard padding, paper-2 surface, hairline frame. */

.panel {
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}

/* The fold's call card: the same panel, stacked instead of spread, because it
   lives in a half-width column next to the headline. */
.call {
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.call-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-md);
  padding-block: var(--space-lg) var(--space-md);
}
.call .clock { margin-bottom: var(--space-md); }
.call .stamps {
  margin: 0;
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
}
.call .entry-title { font-size: var(--text-2xl); }

/* Below the fold: the leaders table with the record rail beside it. Two
   columns so the block ends on the same right edge as the fold above it. */
.board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}
.board-side { min-width: 0; }
.sec-h {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule-firm);
}

.strap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.strap .accent { color: var(--color-accent-text); }

.entry-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}
.entry-title {
  font-variation-settings: "wdth" 80;
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.entry-sub {
  margin-top: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.circuit { width: 84px; height: 84px; display: block; }
.circuit path { fill: none; stroke: var(--color-ink-2); stroke-width: 2.5; stroke-linejoin: round; }
.circuit path.glow { stroke: var(--color-accent); stroke-width: 6; opacity: 0.28; }

.clock { display: flex; gap: var(--space-2xs); }
.clock .unit {
  min-width: 3.5rem;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper-3);
  border-radius: var(--radius-cell);
  text-align: right;
}
.clock .v {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-ink);
}
.clock .l {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.clock .done { color: var(--color-muted); font-size: var(--text-sm); }

.leaders { margin-top: var(--space-md); }
.leaders table { width: 100%; border-collapse: collapse; }
.leaders caption {
  caption-side: bottom;
  padding-top: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: left;
}
.leaders th {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule-firm);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: right;
}
.leaders th:first-child { text-align: left; }
.leaders td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  text-align: right;
  transition: background var(--dur-micro) var(--ease-out);
}
.leaders td:first-child { text-align: left; letter-spacing: 0.04em; }
.leaders tbody tr:hover td { background: var(--color-paper-3); }

.stripe {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-right: var(--space-xs);
  vertical-align: -0.1em;
  background: var(--team);
}

/* KPI stat tiles: one bordered cell per number, dashboard style. */
.tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-sm);
}
.tally > div {
  padding: var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.tally .n {
  display: block;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  line-height: 1;
}
.tally .k {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.win { color: var(--color-good); }
.bad { color: var(--color-accent-text); }

.more {
  display: inline-block;
  margin-top: var(--space-2xl);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  text-decoration: none;
  white-space: nowrap;
}
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
.more:active { color: var(--color-accent); }

.empty, .waiting {
  padding: var(--space-2xl) 0;
  color: var(--color-muted);
  max-width: var(--measure);
}

/* ---- probabilities · Catalogue ------------------------------------------- */

/* Catalogue leads with a mark and a count, not a display headline. The two
   columns are the site's standing shape: label left, prose right, both edges
   flush to the spine. Baseline-aligning a heading and a paragraph on one flex
   line left the paragraph floating in the middle of the page. */
.cat-head {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-lg) var(--space-3xl);
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-firm) solid var(--color-rule-firm);
}
.cat-head h1 {
  font-variation-settings: "wdth" var(--width-condensed);
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.cat-head p { color: var(--color-ink-2); font-size: var(--text-base); max-width: var(--measure); }

/* ---- prose notes on a data page -----------------------------------------
   Same two columns as .cat-head and the about bands, so a reading block never
   changes the page's left or right edge. */
.notes {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-lg) var(--space-3xl);
  margin-top: var(--void);
  padding-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.notes h2 {
  font-variation-settings: "wdth" var(--width-condensed);
  font-size: var(--text-xl);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.notes .kicker {
  margin-top: var(--space-sm);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.notes p:not(.kicker) {
  max-width: var(--measure);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.55;
}
.notes p + p { margin-top: var(--space-md); }
.notes strong { color: var(--color-ink); font-weight: 500; }
.notes .body > p:first-child { margin-top: 0; }
.notes a { color: var(--color-accent-text); text-underline-offset: 3px; }

.stamps {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.stamps b { color: var(--color-ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.stamps code { color: var(--color-ink-2); }

/* ---- predicted order · starting-grid formation ---------------------------
   The staggered two-column formation: odd positions (P1, P3, P5) sit left,
   even positions (P2, P4, P6) indent right, like a real F1 starting grid. */

.grid-panel {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}

.grid-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.grid-view[data-active="combined"] .grid-split { display: none; }
.grid-view[data-active="split"] .grid-combined { display: none; }

.grid-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

.grid-label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  margin-bottom: var(--space-md);
}

.grid-slots {
  /* Single column, not a grid: the stagger is horizontal indent, not a second
     column, so every slot has the same vertical gap regardless of side. */
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  max-width: 22rem;
  margin: 0 auto;
}

.grid-slot {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 42%;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper-3);
  border-radius: var(--radius-cell);
  transition: background var(--dur-micro) var(--ease-out);
}
.grid-slot:hover { background: var(--color-paper-4); }

/* Left slots on the left edge, right slots on the right edge,
   with clear space between them (100% - 42% - 42% = 16% gap). */
.grid-slot.left  { align-self: flex-start; }
.grid-slot.right { align-self: flex-end; }

.grid-pos {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-muted);
  min-width: 2rem;
}

.grid-driver {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

/* Pole: accent fill, matching the logo's red first block. */
.grid-slot.left:first-child {
  background: var(--color-accent);
}
.grid-slot.left:first-child .grid-pos { color: var(--color-accent-ink); opacity: 0.7; }
.grid-slot.left:first-child .grid-driver { color: var(--color-accent-ink); }
.grid-slot.left:first-child .stripe { background: var(--color-accent-ink); opacity: 0.4; }
.grid-slot.left:first-child:hover { background: var(--color-accent-text); }

@media (max-width: 46rem) {
  .grid-split { grid-template-columns: 1fr; gap: var(--space-xl); }
  .grid-slots { max-width: 18rem; gap: var(--space-3xs) var(--space-xl); }
}

/* One specimen per row. A 20x20 matrix needs the whole spine; side by side
   the two cards were 520px each and both scrolled internally, which defeats
   the point of showing the matrix at all. */
.figs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

/* Each model is one card in the catalogue: same frame, same size, one variant. */
.fig {
  margin: 0;
  min-width: 0;
  padding: var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.fig-title {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.fig .scroll { overflow-x: auto; margin-top: var(--space-md); }
/* Full width so the matrix ends on the same right edge as everything else,
   with a floor that makes the card scroll internally on a phone rather than
   crushing the cells. */
.fig table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-family: var(--font-data);
  font-size: var(--text-xs);
}
.fig th {
  padding: var(--space-2xs);
  font-weight: 400;
  color: var(--color-muted);
  text-align: center;
}
.fig td { padding: var(--space-3xs); transition: background var(--dur-micro) var(--ease-out); }
.fig tbody tr:hover td { background: var(--color-paper-4); }
.fig td.d {
  position: sticky;
  left: 0;
  padding-right: var(--space-sm);
  background: var(--color-paper-2);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fig tbody tr:hover td.d { background: var(--color-paper-4); }
.fig td.c div {
  /* the cell takes whatever width the table hands it, so twenty positions
     fill the spine at any window size. The height is fixed and shorter than
     the width on purpose: twenty-two square rows made the card taller than
     the screen, and a heatmap reads the same from a rectangle. */
  width: 100%;
  min-width: 20px;
  height: 22px;
  border-radius: var(--radius-cell);
  background: color-mix(in oklab, var(--color-accent) calc(var(--f) * 100%), var(--color-paper-3));
}
.fig th.n, .fig td.n {
  padding-inline: var(--space-2xs);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-2);
}
.fig th.first, .fig td.first { padding-left: var(--space-md); }
.fig figcaption {
  margin-top: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.bars { margin-top: var(--space-2xl); }
.seg {
  display: inline-flex;
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  background: var(--color-paper-2);
  border-radius: var(--radius-pill);
}
.seg button {
  min-height: 36px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-muted);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform 160ms var(--ease-out);
}
.seg button:hover { color: var(--color-ink); }
.seg button:active { transform: scale(0.97); }
.seg button:disabled { opacity: 0.55; cursor: not-allowed; }
.seg button[aria-pressed="true"] { background: var(--color-paper-4); color: var(--color-ink); }

.legend {
  display: flex;
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.legend i { display: inline-block; width: 14px; height: 6px; margin-right: var(--space-xs); }
.legend .direct i { background: var(--color-accent); }
.legend .sim i { background: var(--color-ink-2); }

.bar-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 7rem;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  transition: background var(--dur-micro) var(--ease-out);
}
.bar-row:hover { background: var(--color-paper-2); }
.bar-row .code {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.bar-row .track { display: grid; gap: var(--space-3xs); min-width: 0; }
.bar-row .bar { height: 7px; border-radius: var(--radius-cell); transform-origin: left; }
.bar-row .bar.direct { background: var(--color-accent); }
.bar-row .bar.sim { background: var(--color-ink-2); }
.bar-row .nums {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-align: right;
}
.bar-row .nums b { color: var(--color-ink); font-weight: 400; }

/* ---- record · Index-First ------------------------------------------------ */

/* No hero. One short paragraph, then the list. */
.index-head {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-lg) var(--space-3xl);
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-firm) solid var(--color-rule-firm);
}
.index-head h1 {
  font-variation-settings: "wdth" var(--width-condensed);
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.index-head p {
  max-width: var(--measure);
  color: var(--color-ink-2);
  font-size: var(--text-base);
}

.standings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
.standings .col {
  padding: var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.standings .col-h {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.standings .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  font-family: var(--font-data);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.standings .row b {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.standings .row.base { color: var(--color-muted); }
.standings .row.base b { color: var(--color-muted); }

.ledger-head, .ledger-total, .race > summary {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 5rem 5rem 5rem;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}
.ledger-head {
  margin-top: var(--space-2xl);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-firm);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.ledger-head span:nth-child(n+3),
.ledger-total span:nth-child(n+3),
.race > summary span:nth-child(n+3) { text-align: right; }

.race { border-bottom: var(--rule-hair) solid var(--color-rule); }
.race > summary {
  padding-block: var(--space-sm);
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-micro) var(--ease-out);
}
.race > summary::-webkit-details-marker { display: none; }
.race > summary:hover { background: var(--color-paper-2); }
.race > summary:active { background: var(--color-paper-3); }
.race .rnd { color: var(--color-muted); }
.race .ev { display: block; color: var(--color-ink); }
.race .call {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.pend {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.rec-figs.figs { margin: var(--space-md) 0 var(--space-lg); }
.fig td.c.actual div { box-shadow: inset 0 0 0 2px var(--color-ink); }

.drivers { padding: var(--space-md) 0 var(--space-lg); }
.drv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem 5rem 5rem;
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
.drv span:nth-child(n+2) { text-align: right; }
.drv.hd {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.drv .code { text-align: left; letter-spacing: 0.04em; }

.ledger-total {
  padding-block: var(--space-md);
  border-bottom: var(--rule-firm) solid var(--color-rule-firm);
  color: var(--color-ink);
}

/* ---- about · Manifesto --------------------------------------------------- */

/* Bleed bands, not hairlines. Each band is one assertion, big enough to read
   across the room. No numbered steps, no card grid, no section eyebrows. */
.band {
  padding-block: var(--void);
}
/* The gutter goes on the inner box, not on the full-bleed band. Padding the
   band and then centring a max-width child inside it pushes the content one
   gutter left of every other block on the site. */
.band > * {
  max-width: var(--spine);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  /* Claim left, argument right. One column put every claim and every
     paragraph in the left half of a centred frame and left the right half
     empty down the whole page. */
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-xl) var(--space-3xl);
}
.band .body { min-width: 0; }
/* Blocks that are their own argument span both columns. */
.band .rules, .band .specs, .band .wide { grid-column: 1 / -1; }
.band-ink { background: var(--color-paper); }
.band-raised { background: var(--color-paper-2); }
/* Gate 23 caps the accent at ~5% of a viewport. A full-bleed accent band
   measured 73%, so the Manifesto bleed survives as an edge-to-edge rule and
   the claim itself carries the colour. */
.band-accent {
  border-top: var(--space-xs) solid var(--color-accent);
}
.band-accent .claim { color: var(--color-accent-text); }

.claim {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--width-condensed);
  font-weight: 700;
  font-size: var(--text-display-s);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.claim .dim { color: var(--color-dim); }
.band .after {
  max-width: var(--measure);
  margin-top: var(--space-md);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-ink-2);
}
.band .body > .after:first-child { margin-top: 0; }
.band .after strong { color: var(--color-ink); font-weight: 500; }
.band .after code {
  font-size: 0.9em;
  color: var(--color-ink);
  background: var(--color-paper-3);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-cell);
}
.band .after a { color: var(--color-accent-text); text-underline-offset: 3px; }

/* A named sub-point inside a band's argument. Not a heading level: a label. */
.band h3 {
  margin-top: var(--space-xl);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.band h3 + .after { margin-top: var(--space-xs); }

/* The two-column fact grid: short technical statements that belong under a
   claim but are not prose. */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.specs dt {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.specs dd {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-2);
}
.specs dd b {
  display: block;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--space-2xs);
}

/* The one place the about page is allowed a list: the two data rules, which
   are a pair by nature. Still not a card grid. */
.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.rules > div {
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.rules h2 {
  font-variation-settings: "wdth" 80;
  font-size: var(--text-lg);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-firm) solid var(--color-accent);
}
.rules p {
  margin-top: var(--space-md);
  color: var(--color-ink-2);
}

/* ---- Ft5 · statement footer ---------------------------------------------- */

.foot {
  margin-top: var(--void);
  padding-block: var(--space-3xl) var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
body[data-page="about"] .foot { margin-top: 0; }
.foot-inner { max-width: var(--spine); margin-inline: auto; padding-inline: var(--page-gutter); }
.foot-line {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--width-condensed);
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 20ch;
  overflow-wrap: anywhere;
}
.foot-line .dim { color: var(--color-dim); }
.foot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  align-items: baseline;
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.foot-meta a { color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.foot-meta a:hover { color: var(--color-ink); }

/* ---- motion --------------------------------------------------------------
   Two primitives, no more: one entrance on the fold, one horizontal sweep on
   the bars. The source's own reveals are subtle; loud ones would fight the
   type. */

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes sweep { from { transform: scaleX(0); } }

.marquee-copy > *, .cat-head > *, .index-head > * {
  animation: rise var(--dur-long) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.bar-row .bar { animation: sweep var(--dur-long) var(--ease-out) both; }

/* The JS-rendered blocks land after a fetch; without an entrance they pop in.
   Same rise primitive, short stagger, opacity and transform only. */
.panel, .call, .tally > div, .fig, .grid-panel, .standings .col {
  animation: rise var(--dur-long) var(--ease-out) both;
}
.tally > div:nth-child(2), .fig:nth-child(2), .standings .col:nth-child(2) { animation-delay: 60ms; }
.tally > div:nth-child(3), .standings .col:nth-child(3) { animation-delay: 120ms; }
.tally > div:nth-child(n+4) { animation-delay: 180ms; }

.race[open] .drivers { animation: rise var(--dur-short) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
  .nav { transition: none; }
}

/* ---- responsive ---------------------------------------------------------- */

/* Every two-column block on the site collapses at the same width, so the page
   never has one block in two columns and the next in one. */
@media (max-width: 62rem) {
  .marquee, .band > *, .cat-head, .index-head, .notes, .board {
    grid-template-columns: minmax(0, 1fr);
  }
  .marquee { min-height: 0; gap: var(--space-2xl); }
  .board { gap: var(--space-2xl); }
  .cat-head, .index-head, .notes { gap: var(--space-md); }
  .band > * { gap: var(--space-lg); }
}

@media (max-width: 46rem) {
  .entry-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
  }
  .circuit { width: 64px; height: 64px; }
  .clock { grid-column: 1 / -1; justify-content: flex-start; order: 3; }

  .ledger-head, .ledger-total, .race > summary {
    grid-template-columns: 2rem minmax(0, 1fr) 4rem 4rem;
  }
  /* the baseline column is the first thing to go: it repeats per row */
  .ledger-head span:last-child,
  .ledger-total span:last-child,
  .race > summary span:last-child { display: none; }

  .drv { grid-template-columns: minmax(0, 1fr) 2.75rem 2.75rem 4rem 4rem; }
}

@media (max-width: 34rem) {
  /* The four links plus the wordmark need 454px. Rather than let them run off
     the edge, the bar becomes two rows and grows to suit. */
  :root { --bar-h: 88px; }
  .nav-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2xs);
  }
  .wordmark { margin-right: 0; font-size: var(--text-md); }
  .nav-links { gap: var(--space-md); }
  .nav-links a { font-size: var(--text-xs); letter-spacing: 0.04em; }
  .nav-banner { font-size: var(--text-xs); letter-spacing: 0.02em; }
  .marquee { min-height: 0; padding-block: var(--space-2xl) var(--space-3xl); }
  .bar-row { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .bar-row .nums { grid-column: 1 / -1; text-align: left; }
  .drv { grid-template-columns: minmax(0, 1fr) 2.5rem 3.5rem 3.5rem; }
  .drv span:nth-child(2) { display: none; }  /* grid goes first; finish is the one that matters */
}