/* ============================================================================
   SECOND SHIFT — design system for "Light and Dark Software Factories"
   ----------------------------------------------------------------------------
   Argued in specs/design.md; frozen visually in design.html at the repo root.

   The metaphor is the traveller: the route card that rides with a part through
   every station on a factory floor and is stamped at each one. Chapters are
   stations. Sources are inspection stamps. The gutter is the punch column.

   Day shift is warm daylight. Second shift is the same floor under machine
   light — colder, still running, nobody on it. The theme toggle is not chrome;
   it is the site's thesis, operable.

   Three accents, each carrying meaning, none decorating:
     --lit        safety amber ... human judgment, gates with the lights on
     --auto       machine steel .. automated, unattended, machine-verified
     --contested  oxblood ....... disputed evidence, walked-back claims

   HOUSE RULES that survive any later edit:
   - tokens on :root, dark variant re-declares them under html.dark
   - paper is never pure white, ink never pure black
   - inline SVG diagrams use var(--…) / currentColor and NEVER a literal hex,
     or they break the moment the shift changes
   ========================================================================== */

/* ---------- tokens: day shift ---------- */

:root {
  --paper: #F2ECE0;          /* mill paper, never white */
  --paper-2: #E9E1D2;        /* raised surface: figures, table head */
  --paper-3: #DED4C0;        /* wash */
  --ink: #221F1A;            /* warm near-black, never #000 */
  --ink-2: #5C564C;
  --ink-3: #6F6759;          /* AA on paper (4.7:1) — it carries figure labels, not just chrome */
  --rule: #CDC3B0;
  --rule-hard: #221F1A;

  --lit: #8F4F06;            /* MEANING: human judgment / the lights on (AA on paper) */
  --lit-mark: #C67F1D;       /* same amber for strokes and fills — never body text */
  --lit-wash: rgba(198, 127, 29, .11);
  --auto: #2A5674;           /* MEANING: machine step — unattended, cheap, green */
  --auto-mark: #3E7EA6;
  --auto-wash: rgba(42, 86, 116, .09);
  --contested: #8E3324;      /* MEANING: disputed or walked back — never repeat as fact */

  --font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-body: "Literata", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --measure: 35rem;          /* reading column */
  --rail: 15rem;             /* the punch column */
  --wide: 54rem;             /* figures, tables, registry */
  --page: 72rem;
  --gap: 2.25rem;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* ---------- tokens: second shift (the same floor under machine light) ---------- */

html.dark {
  --paper: #14161A;
  --paper-2: #1B1E24;
  --paper-3: #23272E;
  --ink: #DDD8CE;
  --ink-2: #9A968C;
  --ink-3: #847F75;          /* AA on the night ground (4.6:1) */
  --rule: #2E323A;
  --rule-hard: #DDD8CE;

  --lit: #E0A448;
  --lit-mark: #E0A448;
  --lit-wash: rgba(224, 164, 72, .13);
  --auto: #7FB2D4;
  --auto-mark: #7FB2D4;
  --auto-wash: rgba(127, 178, 212, .11);
  --contested: #D96A54;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' fill='%23ffffff' opacity='.035'/%3E%3C/svg%3E");
}

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

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  /* tiled, never a fixed overlay — fixed layers seam-band in stitched captures */
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-optical-sizing: auto;
  transition: background-color .25s ease, color .25s ease;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.012em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem); line-height: 1.05; letter-spacing: -.021em; font-weight: 800; }
h2 { font-size: clamp(1.42rem, 1.15rem + 1.1vw, 1.95rem); margin: 2.9rem 0 .2rem; }
h3 { font-size: 1.06rem; letter-spacing: .005em; margin: 2rem 0 .4rem; }

p { margin: 0 0 1.15rem; }

a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: .18em; text-decoration-color: var(--ink-3); }
a:hover { text-decoration-color: var(--lit); }

code, pre, .data { font-family: var(--font-mono); font-size: .9em; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--lit); color: var(--paper); padding: .5rem 1rem;
  font-family: var(--font-mono); font-size: .8rem;
}
.skip-link:focus { left: 0; z-index: 40; }

/* ---------- shared marks ---------- */

.kicker {
  font-family: var(--font-mono);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .17em;
  color: var(--ink-3); font-weight: 500; display: block; margin: 0 0 .55rem;
}

.lead { font-size: 1.2rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 1.5rem; }

.rule-hard { border: 0; border-top: 2px solid var(--rule-hard); margin: 0 0 1.4rem; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 2.2rem 0; }
h2 + .rule-hard { margin-bottom: 1.15rem; }

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 2px solid var(--rule-hard);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20;
}

.masthead__inner {
  max-width: calc(var(--rail) + var(--wide) + 4rem);
  margin: 0 auto; padding: .7rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}

.brand { text-decoration: none; color: var(--ink); }
.brand__title {
  font-family: var(--font-display); font-weight: 700; font-size: .98rem;
  letter-spacing: -.01em; line-height: 1.15; display: block;
}
.brand__sub {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-top: .15rem;
}

.masthead__links {
  margin-left: auto; display: flex; align-items: center; gap: 1.1rem;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
}

.navlink { color: var(--ink-2); text-decoration: none; }
.navlink:hover { color: var(--lit); }

.masthead__burger { display: none; }

/* the switch: the site's mark, and the only interactive chrome that matters */
.theme-toggle {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  padding: .34rem .6rem;
  font-family: var(--font-mono); font-size: .63rem; letter-spacing: .14em; text-transform: uppercase;
}
.theme-toggle:hover { border-color: var(--lit); color: var(--ink); }
/* the label is CSS-driven so it is already correct at first paint and with JS off */
.theme-toggle .on-night { display: none; }
html.dark .theme-toggle .on-day { display: none; }
html.dark .theme-toggle .on-night { display: inline; }
.switch { display: inline-flex; gap: 2px; }
.switch i { width: 7px; height: 13px; display: block; background: var(--ink-3); }
.switch i:first-child { background: var(--lit); }
html.dark .switch i:first-child { background: var(--ink-3); }
html.dark .switch i:last-child { background: var(--auto); }

@media (max-width: 44rem) {
  .masthead { position: static; }
  .masthead__inner { padding: .65rem 1.25rem; flex-wrap: wrap; }
  .masthead__links { gap: .85rem; margin-left: 0; width: 100%; flex-wrap: wrap; font-size: .63rem; }
}

/* ---------- the traveller grid: punch column + reading column ---------- */

/* One page container for every layout, so hero, prose and the traveller grid
   share a left edge with the masthead. Blocks cap their own width inside it. */
.hero,
.prose,
.trav {
  max-width: calc(var(--rail) + var(--wide) + 4rem);
  margin: 2rem auto 4rem;
  padding: 0 1.5rem;
}

.hero { margin: 0 auto; padding-top: 3.2rem; padding-bottom: .5rem; }
.hero > * { max-width: var(--wide); }
.hero__title { max-width: 20ch; margin: .1em 0 .5rem; }
.hero__dek { max-width: 52ch; font-size: 1.2rem; line-height: 1.6; color: var(--ink-2); margin: 0; }

.prose > * { max-width: var(--measure); }
.prose > .bleed,
.prose > figure,
.prose > .tablewrap,
.prose > .stations { max-width: var(--wide); }

.trav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.trav > * { min-width: 0; }

@media (min-width: 70rem) {
  .trav { grid-template-columns: var(--rail) minmax(0, var(--measure)); column-gap: var(--gap); }
  .trav > * { grid-column: 2; }
  .trav > .rail { grid-column: 1; text-align: right; }
  .trav > .bleed { grid-column: 1 / -1; width: 100%; max-width: var(--wide); }
}

.bleed { max-width: var(--wide); }

.rail {
  font-family: var(--font-mono); font-size: .66rem; line-height: 1.65;
  color: var(--ink-3); letter-spacing: .06em; padding-top: .5rem;
}
.rail p { margin: 0 0 1rem; }
.rail b { display: block; color: var(--ink-2); font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }

@media (max-width: 69.99rem) {
  /* the punch column drops below the title rather than ahead of it */
  .trav > header { order: -1; }
  .rail { text-align: left; border-left: 2px solid var(--rule); padding: .15rem 0 .15rem .9rem; margin: .4rem 0 1.8rem; }
  .rail p { display: inline-block; margin: 0 1.6rem .5rem 0; vertical-align: top; }
}

/* ---------- station header ---------- */

.station { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: .2rem; }
.station .kicker { margin: 0; }
.ladder { display: inline-flex; gap: 3px; align-items: center; }
.ladder i { width: 14px; height: 3px; background: var(--rule); }
.ladder i.on { background: var(--lit); }

/* ---------- inspection stamps: the evidence tier system ----------
   Tier is encoded in the RULE, not a fill — four coloured pills would compete
   with the two semantic accents and dilute them. */

.stamp {
  display: inline-flex; align-items: center; gap: .34rem;
  font-family: var(--font-mono);
  font-size: .615rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  padding: .16rem .44rem; border: 1px solid var(--ink-2); color: var(--ink-2);
  white-space: nowrap; line-height: 1.5; vertical-align: .1em;
}
.stamp--primary { border-color: var(--ink); color: var(--ink); border-width: 1.5px; }
.stamp--secondary { border-color: var(--rule); color: var(--ink-3); }
.stamp--vendor { border-style: dashed; border-color: var(--ink-3); color: var(--ink-3); }
.stamp--contested { border-color: var(--contested); color: var(--contested); }
/* First-hand is close to the evidence and unverifiable by the reader — so it must
   not wear Primary's clothes. Ink border for proximity, amber mark because the
   record is a person's own: the same accent that marks every human gate. */
.stamp--firsthand { border-color: var(--ink); color: var(--ink); }
.stamp--firsthand::before { content: ""; width: 6px; height: 6px; background: var(--lit); flex: none; }
.stamp--asof { border: 0; padding-left: 0; color: var(--ink-3); }

/* ---------- figures & diagrams ---------- */

figure { margin: 2.1rem 0; padding: 0; }

.fig {
  border: 1px solid var(--rule);
  background:
    radial-gradient(var(--rule) .9px, transparent .9px) 0 0 / 24px 24px,
    var(--paper-2);
  padding: 1.5rem 1.2rem 1.1rem;
}
.fig svg { display: block; width: 100%; height: auto; }

/* Wide process chains keep their label size and scroll inside the figure. The
   edge shadows are the affordance — without them a clipped chain reads as a
   chain that ends there, which for a diagram about a *closed* loop is a lie. */
.scrollx {
  overflow-x: auto; overscroll-behavior-x: contain;
  background:
    linear-gradient(to right, var(--paper-2), transparent) 0 0 / 2.2rem 100% no-repeat local,
    linear-gradient(to left, var(--paper-2), transparent) 100% 0 / 2.2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--auto-wash), transparent) 0 0 / .9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--auto-wash), transparent) 100% 0 / .9rem 100% no-repeat scroll;
}
.scrollx svg { min-width: 32rem; }

.scroll-hint { display: none; }
@media (max-width: 46rem) {
  .scroll-hint {
    display: block; margin: .55rem 0 0; text-align: right;
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--lit);
  }
}

/* A stacked reading of a wide chain, for viewports where the chain cannot fit.
   Not a fallback for the diagram — the same content, laid out for the screen. */
.chain-stack { display: none; }
@media (max-width: 46rem) {
  .scrollx--stacked { display: none; }
  .chain-stack { display: block; list-style: none; margin: 0; padding: 0; }
  .chain-stack li {
    display: grid; grid-template-columns: .55rem 1fr; gap: 0 .8rem;
    padding: .6rem 0; border-bottom: 1px solid var(--rule);
  }
  .chain-stack li:last-child { border-bottom: 0; }
  .chain-stack li::before { content: ""; grid-row: 1 / 3; background: var(--auto); }
  .chain-stack li.is-human::before { background: var(--lit); }
  .chain-stack b {
    grid-column: 2; display: block; margin-bottom: .2rem;
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
    text-transform: uppercase;
  }
  .chain-stack li.is-human b { color: var(--lit); }
  .chain-stack span { grid-column: 2; font-size: .85rem; line-height: 1.5; color: var(--ink-2); }
}

figcaption {
  font-family: var(--font-mono); font-size: .68rem; line-height: 1.65;
  color: var(--ink-2); margin-top: .75rem; letter-spacing: .02em;
}
.fig-no { color: var(--lit); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin-right: .5rem; }

.legend {
  display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: 1rem;
  font-family: var(--font-mono); font-size: .63rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-2);
}
.legend b { display: inline-block; width: 11px; height: 11px; margin-right: .4rem; vertical-align: -1px; }
.legend .h { background: var(--lit-mark); }
.legend .m { background: var(--auto-mark); }
/* the two-tone gate: a machine step capped by a human one */
.legend .hm { background: var(--auto-mark); border-top: 4px solid var(--lit-mark); }

/* ---------- from the floor: the site's first-hand evidence device ----------
   Whenever the site speaks from its own operating experience rather than from
   a source, it goes in a marked, signed box. */

.floor {
  border: 1px solid var(--lit); border-left-width: 4px;
  background: var(--lit-wash); padding: 1.15rem 1.25rem .3rem; margin: 2.4rem 0;
}
.floor .kicker { color: var(--lit); letter-spacing: .16em; }
.floor p { font-size: .99rem; line-height: 1.63; }
.floor .sig {
  font-family: var(--font-mono); font-size: .63rem; letter-spacing: .08em; color: var(--ink-2);
  border-top: 1px solid color-mix(in srgb, var(--lit) 35%, transparent);
  padding-top: .6rem; margin-bottom: 1rem;
}

/* ---------- checklist with the switch mark ---------- */

.check { list-style: none; padding: 0; margin: 1.3rem 0; }
.check li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; }
.check li::before { content: ""; position: absolute; left: 0; top: .52em; width: 7px; height: 12px; background: var(--lit); }
.check li::after { content: ""; position: absolute; left: 9px; top: .52em; width: 7px; height: 12px; border: 1px solid var(--ink-3); }

/* ---------- registry table ---------- */

.tablewrap {
  overflow-x: auto; margin: 1.8rem 0;
  border-top: 2px solid var(--rule-hard); border-bottom: 1px solid var(--rule);
}
.tablewrap table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .79rem; min-width: 46rem; }
.tablewrap thead th {
  text-align: left; font-weight: 500; font-size: .63rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2); padding: .7rem .8rem; border-bottom: 1px solid var(--rule);
  white-space: nowrap; background: var(--paper-2);
}
/* the affordance appears only once JS has actually wired the headers up */
.tablewrap table.is-live th.is-sortable { cursor: pointer; }
.tablewrap table.is-live th.is-sortable::after { content: " ↕"; opacity: .4; }
.tablewrap table.is-live th.is-sortable:hover { color: var(--lit); }
.tablewrap table.is-live th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; color: var(--lit); }
.tablewrap table.is-live th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--lit); }
.tablewrap table.is-live th.is-sortable:focus-visible { outline: 2px solid var(--lit); outline-offset: -2px; }
.tablewrap tbody td { padding: .72rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tablewrap tbody tr:hover { background: var(--auto-wash); }
td.name { font-family: var(--font-display); font-weight: 600; font-size: .87rem; letter-spacing: -.005em; white-space: nowrap; }
td.name small {
  display: block; font-family: var(--font-mono); font-weight: 400; font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: .15rem;
}
td.num { font-variant-numeric: tabular-nums; }
td.date { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }

.lvl { display: inline-flex; gap: 2px; align-items: center; }
.lvl i { width: 5px; height: 12px; background: var(--rule); }
.lvl i.on { background: var(--auto); }
.lvl i.on.is-dark { background: var(--lit); }
.lvl-n { font-family: var(--font-mono); font-size: .63rem; color: var(--ink-3); margin-left: .45rem; letter-spacing: .08em; white-space: nowrap; }

/* Below the table's own minimum, rows become stacked cards. Horizontal scroll
   would put the as-of date and the evidence stamp off-screen — and on this site
   a figure without those two is not a figure. */
@media (max-width: 46rem) {
  .tablewrap { overflow-x: visible; border-bottom: 0; }
  .tablewrap table { min-width: 0; display: block; }
  .tablewrap thead { display: none; }
  .tablewrap tbody, .tablewrap tr, .tablewrap td { display: block; width: 100%; }
  .tablewrap tr { padding: .95rem 0; border-bottom: 1px solid var(--rule); }
  .tablewrap tbody td { border: 0; padding: 0 0 .35rem; }
  .tablewrap td.name { white-space: normal; font-size: 1rem; }
  .tablewrap td:nth-child(2) { display: inline-block; width: auto; margin-right: .9rem; }
  .tablewrap td.date { display: inline-block; width: auto; margin-right: .9rem; font-size: .7rem; }
  .tablewrap td:last-child { display: inline-block; width: auto; }
  /* the description reads as prose once it is no longer a table cell */
  .tablewrap td:nth-child(3) {
    color: var(--ink-2); padding-top: .3rem;
    font-family: var(--font-body); font-size: .92rem; line-height: 1.55;
  }
}

/* ---------- prose defaults (markdown pages) ---------- */

.prose img { max-width: 100%; height: auto; }
.prose blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.1rem;
  border-left: 3px solid var(--lit); color: var(--ink-2);
}
.prose table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .45rem .6rem; text-align: left; }
.prose th { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- station index (home) ---------- */

.stations { list-style: none; padding: 0; margin: 2.6rem 0 0; border-top: 1px solid var(--rule); }
.stations li {
  display: grid; grid-template-columns: 4.2rem 1fr auto; gap: 1rem; align-items: baseline;
  padding: .62rem 0; border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: .71rem; letter-spacing: .06em; color: var(--ink-3);
}
.stations b { font-family: var(--font-display); font-weight: 600; font-size: .97rem; letter-spacing: -.005em; color: var(--ink); }
.stations a { text-decoration: none; }
.stations li:hover b { color: var(--lit); }

.btn {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  border: 1.5px solid var(--rule-hard); padding: .62rem 1.05rem;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: var(--rule-hard); color: var(--paper); }
.btn b { white-space: nowrap; font-weight: 600; }   /* never break "Station 01" across lines */
.btn span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; color: var(--ink-3); }
@media (max-width: 30rem) { .btn { flex-direction: column; align-items: flex-start; gap: .25rem; } }
.btn:hover span { color: var(--paper); }

/* ---------- colophon ---------- */

.colophon { border-top: 1px solid var(--rule); margin-top: 2rem; }
.colophon__inner {
  max-width: calc(var(--rail) + var(--wide) + 4rem); margin: 0 auto; padding: 2rem 1.5rem 2.5rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-3);
}
.colophon__title { font-family: var(--font-display); font-size: .95rem; letter-spacing: -.01em; color: var(--ink); margin: 0 0 .6rem; }
.colophon__links { display: flex; flex-wrap: wrap; gap: 1.2rem; text-transform: uppercase; letter-spacing: .11em; font-size: .66rem; }
.colophon__links a { color: var(--ink-2); text-decoration: none; }
.colophon__links a:hover { color: var(--lit); }
.colophon__foot { margin-top: 1.25rem; }
.colophon__note { margin-top: 1.25rem; max-width: 58ch; line-height: 1.75; }

/* ---------- facts rendered from the registry ---------- */

.fact {
  display: block; margin: 1.5rem 0; padding: .85rem 0 .85rem 1rem;
  border-left: 3px solid var(--auto);
}
.fact__v {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; line-height: 1.15; letter-spacing: -.015em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fact__l { display: block; font-size: .95rem; line-height: 1.55; color: var(--ink-2); margin-top: .2rem; }
.fact__meta {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem;
  font-family: var(--font-mono); font-size: .63rem; letter-spacing: .11em; text-transform: uppercase;
}
.fact__d { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fact--missing { border-left-color: var(--contested); color: var(--contested); font-family: var(--font-mono); }

/* compact variant, for registry pages where the surrounding text is already the label */
.entry .fact { margin: .9rem 0; padding: .5rem 0 .5rem .85rem; border-left-width: 2px; }
.entry .fact__v { font-size: 1.15rem; }
.entry .fact__l { font-size: .88rem; }

/* ---------- the three layers: a definition stack ---------- */

.layers { margin: 1.6rem 0 2rem; border-top: 1px solid var(--rule); }
.layers div {
  display: grid; grid-template-columns: auto 1fr; gap: 0 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--rule);
}
.layers dt {
  grid-column: 2; font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -.005em;
}
.layers dd { grid-column: 2; margin: .15rem 0 0; color: var(--ink-2); font-size: .97rem; line-height: 1.6; }
.layers b { grid-row: 1 / 3; width: 12px; height: 12px; margin-top: .45rem; background: var(--auto-mark); }
.layers div:nth-child(3) b { background: var(--lit-mark); }

/* accent drop cap, first paragraph of a station */
.drop::first-letter {
  float: left; font-family: var(--font-display); font-weight: 800;
  font-size: 3.35rem; line-height: .82; padding: .1rem .5rem 0 0; color: var(--lit);
}

/* ---------- earns it / never will ----------
   Station 6 is the load-bearing chapter, so its worked examples use the site's
   own semantics: amber where a human stays, steel where a machine may run. */

.verdicts { margin: 1.6rem 0 2rem; }
.verdict {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 1.1rem;
  padding: .9rem 0 .9rem 1rem; border-left: 3px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.verdict dt {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; padding-top: .2rem;
}
.verdict dd { margin: 0; font-size: .97rem; line-height: 1.62; }
.verdict--earns { border-left-color: var(--auto); }
.verdict--earns dt { color: var(--auto); }
.verdict--never { border-left-color: var(--lit); }
.verdict--never dt { color: var(--lit); }
@media (max-width: 34rem) {
  .verdict { grid-template-columns: 1fr; }
  .verdict dt { padding-bottom: .35rem; }
}

/* ---------- the autonomy ladder ---------- */

.rungs { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.rungs li {
  display: grid; gap: .2rem 1rem; align-items: baseline;
  grid-template-columns: 2.4rem auto 1fr;
  padding: .75rem 0; border-bottom: 1px solid var(--rule);
}
.rungs li:last-child { border-bottom: 0; }
.rung__n { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--ink-3); }
.rung__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.005em; }
.rung__d { grid-column: 3; font-size: .93rem; line-height: 1.55; color: var(--ink-2); }
.rungs .lvl { grid-column: 2; }
.rungs li.rung--dark .rung__name { color: var(--lit); }
@media (max-width: 34rem) {
  .rungs li { grid-template-columns: 2.4rem 1fr; }
  .rungs .lvl { grid-column: 2; }
  .rung__name, .rung__d { grid-column: 2; }
}

/* ---------- the guides/sensors matrix ---------- */

.matrix { display: grid; grid-template-columns: 8.5rem 1fr 1fr; gap: 1px; background: var(--rule); }
.matrix > * { background: var(--paper-2); padding: .8rem .9rem; }
.matrix__corner { background: var(--paper-2); }
.matrix__head, .matrix__side {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
.matrix__head small, .matrix__side small {
  display: block; margin-top: .3rem; letter-spacing: .06em; text-transform: none;
  color: var(--ink-3); font-size: .62rem; line-height: 1.5;
}
.matrix__cell p { font-size: .88rem; line-height: 1.55; margin: 0 0 .6rem; }
.matrix__cell p:last-child { margin-bottom: 0; }
.matrix__eg {
  font-family: var(--font-mono); font-size: .64rem !important; letter-spacing: .04em;
  color: var(--ink-3); line-height: 1.7 !important;
}
.matrix__cell--auto { border-top: 3px solid var(--auto); }
.matrix__cell--lit { border-top: 3px solid var(--lit); }
/* Below the two-column threshold the grid collapses, so each cell has to carry
   its own coordinates — otherwise the cross-classification, which is the entire
   point of the figure, survives only as a 3px border colour. */
@media (max-width: 46rem) {
  .matrix { grid-template-columns: 1fr; }
  .matrix__corner, .matrix__head, .matrix__side { display: none; }
  .matrix__cell::before {
    content: attr(data-cell); display: block; margin-bottom: .55rem;
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  }
  .matrix__cell--auto::before { color: var(--auto); }
  .matrix__cell--lit::before { color: var(--lit); }
  .matrix__cell--auto::after,
  .matrix__cell--lit::after {
    display: block; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--rule);
    font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  }
  .matrix__cell--auto::after { content: "may gate — deterministic"; color: var(--auto); }
  .matrix__cell--lit::after { content: "may advise — judgment"; color: var(--lit); }
}

/* ---------- home rings ---------- */

.rings { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin: 2.4rem 0 1rem; }
@media (min-width: 44rem) { .rings { grid-template-columns: 1fr 1fr; } }
.ring { border: 1px solid var(--rule); background: var(--paper-2); padding: 1.2rem 1rem .9rem; }
.ring h3 { margin: 0 0 .1rem; font-size: .95rem; letter-spacing: .02em; }
.ring .kicker { margin-bottom: .9rem; }
.ring--lit { border-color: var(--lit); }
.ring svg { display: block; width: 100%; height: auto; }
.ring p { font-size: .87rem; line-height: 1.6; color: var(--ink-2); margin: .9rem 0 0; }

/* ---------- chapter pager ---------- */

.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: 3.5rem 0 0; border-top: 2px solid var(--rule-hard); padding-top: 1.1rem;
}
.pager a { text-decoration: none; display: block; }
.pager span {
  display: block; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .2rem;
}
.pager b { font-family: var(--font-display); font-weight: 600; font-size: .97rem; letter-spacing: -.005em; }
.pager a:hover b { color: var(--lit); }
.pager__next { text-align: right; }

/* ---------- source & glossary registers ---------- */

.register { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.register > li { padding: 1rem 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 5rem; }
.register__head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.register__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.005em; }
.register__meta {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em;
  color: var(--ink-3); margin-top: .25rem;
}
.register__body { font-size: .93rem; line-height: 1.6; color: var(--ink-2); margin: .45rem 0 0; }
.register__body a { color: var(--auto); }

/* ---------- landscape entry detail ---------- */

.entry { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 5rem; }
.entry__head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .7rem; }
.entry__name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.008em; margin: 0; }
.entry__kind {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.entry__summary { margin: .5rem 0 0; }
.entry__detail { font-size: .93rem; line-height: 1.62; color: var(--ink-2); }
.entry .fact { margin: 1rem 0; }

/* ---------- empty state ---------- */

.empty {
  border: 1px dashed var(--rule); padding: 1.5rem 1.4rem; margin: 2rem 0;
  color: var(--ink-2);
}
.empty .kicker { color: var(--ink-3); }

/* ---------- motion & print floor (non-negotiable) ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .masthead, .colophon, .theme-toggle, .skip-link { display: none; }
  body { background: #fff; color: #000; background-image: none; }
}