/* assay.guide stylesheet: the signal box. One world for every page; self-hosted fonts, no framework, no build step. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-condensed-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700-latin.woff2") format("woff2"); }
@font-face { font-family: "B612"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/b612-400-latin.woff2") format("woff2"); }
@font-face { font-family: "B612"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/b612-700-latin.woff2") format("woff2"); }
@font-face { font-family: "B612 Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/b612-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "B612 Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/b612-mono-700-latin.woff2") format("woff2"); }

/* ---------- Theme tokens ----------
   Both themes define the full set on :root, so no color has a hardcoded-only
   value. Default :root = light (the house white-document rule); the media query
   flips to dark when the system prefers it. */
:root {
  color-scheme: light;
  /* the board: enamel, iron, brass; signal red reserved; track green as the accent */
  --paper:#E9E4D2;
  --panel:#F1ECDC;
  --panel-2:#DDD6C0;
  --ink:#1A1A1A;
  --muted:#4A4A46;
  --line:#BFB79F;
  --line-strong:#7E6220;
  --accent:#2E5E4E;      /* track green */
  --accent-soft:#DCE6E1;
  --red:#B3271E;         /* signal red: reserved for the single adverse event and the gate at danger */
  --red-soft:#F0DAD6;
  --on-accent:#F4F1EA;
  --brass:#B08D3C;
  --brass-deep:#7E6220;
  --iron:#1A1A1A;
  --gold:#D4A21F;
  --gold-deep:#A87F12;
  --amber:#F2B33D;
  --amber-text:#8A5A00;
  --phos:#39FF6A;
  --phos-dim:#1F9C45;
  --phos-text:#157A36;
  --sheet:var(--paper);
  --sheet-deep:var(--panel-2);
  --ink-2:var(--muted);
  --rule:var(--line);
  --f-inst:"Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body:"B612", system-ui, sans-serif;
  --f-mono:"B612 Mono", ui-monospace, monospace;
  --serif:var(--f-body);
  --mono:var(--f-mono);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper:#1C1F1E;
    --panel:#242826;
    --panel-2:#2C302E;
    --ink:#ECE9E1;
    --muted:#B8B5AC;
    --line:#3A3E3B;
    --line-strong:#B08D3C;
    --accent:#7FC9A8;
    --accent-soft:#20302a;
    --red:#E0685C;
    --red-soft:#382019;
    --on-accent:#132019;
    --amber-text:#F2B33D;
    --phos-text:#39FF6A;
    --iron:#ECE9E1;   /* the frame reads light on the dark enamel; plates, station rings and rules stay visible */
  }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* safety net: wide content scrolls in its own container, never the body */
}
img, svg { max-width:100%; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }

/* Visible keyboard focus everywhere (a11y floor) */
a:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
summary:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--paper);
}

.shell { max-width:74rem; margin:0 auto; padding:0 clamp(18px,4vw,44px); }
.measure { max-width:46rem; }

/* ---------- small typographic parts ---------- */
.kicker {
  font-family:var(--f-inst);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.kicker b { color:var(--accent); font-weight:600; }
.exhibit-tag {
  display:inline-block;
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--ink);
  padding:5px 10px;
}
.exhibit-tag.red { background:var(--red); }
.rule-double { border:0; border-top:4px double var(--brass); margin:0; }
.small { font-size:.85rem; color:var(--muted); }

/* ---------- header (shared across every page) ---------- */
.site-header {
  display:flex;
  align-items:center;
  gap:1rem 1.4rem;
  flex-wrap:wrap;
  padding:14px clamp(18px,4vw,44px);
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.site-header .brand { display:flex; align-items:center; gap:.6rem; }
.site-header .brand img { display:block; height:30px; width:30px; }
.site-header .wordmark {
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:1.4rem;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:.01em;
}
.site-header .wordmark:hover { text-decoration:none; color:var(--accent); }
.site-header .header-tag { font-size:.85rem; color:var(--muted); font-style:italic; }
.site-header nav { margin-left:auto; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.site-header nav a {
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  padding:8px 0;
  border-bottom:2px solid transparent;
}
.site-header nav a:hover { border-bottom-color:var(--accent); text-decoration:none; }

/* grouped nav — a group label is a REAL LINK to its section landing page;
   the chevron <button> beside it discloses the group's menu, which opens as a
   small filing card: panel ground, hairline frame, and the double-rule top
   border of the exhibit idiom. assets/nav.js wires aria-expanded, Esc, arrow
   keys, hover-open and outside-click; without it the html:not(.js) fallback
   below reveals the card on hover / keyboard focus. On narrow screens the card
   files inline in the flow instead of floating — see the 700px block below. */
.site-header nav .nav-group {
  position:relative;
  display:inline-flex;
  align-items:center;
}
.site-header nav .nav-toggle {
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:0;
  margin:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  align-self:stretch;
  padding:0;
  color:var(--ink);
}
.site-header nav .nav-toggle::before {
  content:"";
  width:.4em;
  height:.4em;
  margin-top:-.25em;
  border-right:1.5px solid var(--line-strong);
  border-bottom:1.5px solid var(--line-strong);
  transform:rotate(45deg);
  transition:transform .15s ease;
}
.site-header nav .nav-toggle:hover::before { border-color:var(--accent); }
.site-header nav .nav-group.open > .nav-toggle::before { transform:rotate(225deg); margin-top:.15em; }
.site-header nav .nav-menu {
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:60;
  min-width:12.5rem;
  padding:6px 0;
  background:var(--panel);
  border:1px solid var(--line);
  border-top:4px double var(--line-strong);
  box-shadow:0 12px 28px rgba(33,29,22,.12);
}
.site-header nav .nav-group.open > .nav-menu { display:block; }
/* no-JS fallback: the card still reveals on hover and on keyboard focus */
html:not(.js) .site-header nav .nav-group:hover > .nav-menu,
html:not(.js) .site-header nav .nav-group:focus-within > .nav-menu { display:block; }
.site-header nav .nav-menu a {
  display:block;
  padding:9px 18px;
  border-bottom:0;
}
.site-header nav .nav-menu a:hover {
  background:var(--accent-soft);
  color:var(--accent);
  border-bottom:0;
}
/* location marks: the section you are in keeps a quiet accent underline at the
   top level; the exact page is stamped in ledger green inside its card */
.site-header nav > a.here,
.site-header nav > a[aria-current],
.site-header nav .nav-group > a[aria-current] { border-bottom-color:var(--accent); }
.site-header nav .nav-menu a[aria-current] { color:var(--accent); font-weight:600; }
@media (prefers-reduced-motion: reduce) {
  .site-header nav .nav-toggle::before { transition:none; }
}

/* ---------- hero ---------- */
.hero { padding:clamp(44px,7vw,84px) 0 clamp(30px,4vw,48px); }
.hero h1 {
  font-size:clamp(2rem,4.6vw,3.3rem);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.012em;
  max-width:22ch;
  margin:14px 0 20px;
}
.hero .lede { font-size:clamp(1.02rem,1.6vw,1.2rem); max-width:56ch; color:var(--ink); }
.hero .lede em { font-style:italic; }

.honest {
  margin:26px 0 0;
  max-width:56ch;
  border-left:4px solid var(--accent);
  background:var(--accent-soft);
  padding:14px 18px;
}
.honest .kicker { color:var(--accent); }
.honest p { margin-top:6px; font-size:.98rem; }

.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

/* ---------- buttons ---------- */
.btn {
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:13px 20px;
  text-decoration:none;
  border:1.5px solid var(--ink);
  color:var(--ink);
  background:transparent;
  display:inline-block;
}
.btn:hover { text-decoration:none; background:var(--panel-2); }
.btn.primary,
.btn-primary { background:var(--ink); color:var(--paper); }
.btn.primary:hover,
.btn-primary:hover { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
/* legacy alias: the outline button on pages not yet migrated */
.btn-secondary { background:transparent; border:1.5px solid var(--ink); color:var(--ink); }

/* ---------- exhibits / filing register ---------- */
.exhibit {
  margin:clamp(30px,4vw,44px) 0 0;
  border-top:4px double var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  background:var(--panel);
}
.exhibit.spaced { margin-top:24px; }
.exhibit-head {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.exhibit-head.divided { border-top:1px solid var(--line); }
.exhibit-head .title { font-style:italic; font-size:1rem; }
.tablewrap { overflow-x:auto; padding:0 18px 16px; }
table.register {
  width:100%;
  border-collapse:collapse;
  min-width:600px;
  font-size:.92rem;
}
table.register caption {
  caption-side:bottom;
  text-align:left;
  padding:12px 2px 2px;
  font-size:.82rem;
  color:var(--muted);
  font-style:italic;
}
table.register th {
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:14px 14px 8px 2px;
  border-bottom:1px solid var(--line-strong);
}
table.register td {
  padding:11px 14px 11px 2px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
table.register td.c-obj { font-weight:600; min-width:11rem; }
table.register td.c-status { font-family:var(--mono); font-size:.78rem; white-space:nowrap; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--accent); margin-right:7px; vertical-align:baseline; }
.dot.red { background:var(--red); }

/* ---------- hero grid ---------- */
.herogrid { display:block; }
.heroleft { min-width:0; }
.heroright { min-width:0; margin-top:38px; }
@media (min-width:1080px) {
  .herogrid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,510px);
    column-gap:clamp(36px,4.5vw,72px);
    align-items:start;
  }
  .heroright { margin-top:6px; }
}
.heroright .exhibit { margin:0; }
.heroright .dwrap { padding:14px 14px 8px; }

/* ---------- marginalia rail (filing apparatus) ----------
   The rail grid holds ONLY the section head, the prose column, and the sticky rail.
   Full-width exhibits live in a SIBLING .shell after the grid, so the sticky rail's
   containing block ends before them — it can never travel over an exhibit. */
.railmain, .rail, .railhead { min-width:0; }
.rail { margin-top:30px; }
@media (min-width:1140px) {
  .railgrid { display:grid; grid-template-columns:minmax(0,1fr) 230px; column-gap:clamp(40px,4.5vw,72px); }
  .railgrid > .railhead { grid-column:1 / -1; grid-row:1; }
  .railgrid > .railmain { grid-column:1; grid-row:2; }
  .railgrid > .rail { grid-column:2; grid-row:2; margin-top:10px; position:sticky; top:24px; align-self:start; }
}
.railcard { border-top:3px double var(--line-strong); padding:12px 2px 4px; max-width:46rem; }
.railcard + .railcard { margin-top:18px; }
.railcard .rk {
  display:block;
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}
.railcard p,
section.doc .railcard p {
  font-size:.86rem;
  line-height:1.55;
  color:var(--muted);
  font-style:italic;
  margin:0 0 8px;
  max-width:none;
}
.railcard a { color:var(--accent); }
.pathscard { margin-top:18px; }

/* ---------- filing stamp ---------- */
.stamp {
  display:inline-block;
  margin-top:24px;
  padding:10px 18px 12px;
  border:2px solid var(--accent);
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--accent);
  color:var(--accent);
  font-family:var(--mono);
  text-transform:uppercase;
  text-align:center;
  transform:rotate(-2.5deg);
}
.stamp .s1 { display:block; font-size:1.05rem; font-weight:600; letter-spacing:.3em; padding-left:.3em; }
.stamp .s2 { display:block; font-size:.76rem; letter-spacing:.22em; margin-top:5px; padding-left:.22em; }
.stamp .s3 { display:block; font-size:.76rem; letter-spacing:.18em; margin-top:3px; color:var(--muted); }

/* ---------- fact strip ---------- */
.factstrip {
  margin:clamp(34px,5vw,52px) 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border:1px solid var(--line-strong);
  border-top:4px double var(--line-strong);
  background:var(--panel);
}
.fact { padding:20px 20px 22px; border-bottom:1px solid var(--line); }
.fact:last-child { border-bottom:0; }
@media (min-width:820px) {
  .fact { border-bottom:0; border-right:1px solid var(--line); }
  .fact:last-child { border-right:0; }
}
.fact h2 { font-size:1.02rem; font-weight:600; margin:8px 0 6px; }
.fact p { font-size:.92rem; color:var(--muted); }
.fact .kicker { font-size:.76rem; }

/* ---------- document sections ---------- */
section.doc { padding:clamp(44px,7vw,80px) 0 0; }
section.doc .rule-double { margin-bottom:26px; }
section.doc h2 {
  font-size:clamp(1.5rem,2.8vw,2.15rem);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.01em;
  margin:14px 0 16px;
  max-width:26ch;
}
section.doc h3 { font-size:1.08rem; font-weight:600; margin:26px 0 8px; }
section.doc p { max-width:60ch; margin-bottom:14px; }
section.doc p.small { max-width:60ch; }

blockquote.board {
  margin:26px 0;
  border-left:4px solid var(--ink);
  padding:16px 22px;
  background:var(--panel);
  max-width:58ch;
  font-size:1.08rem;
  font-style:italic;
  line-height:1.55;
}
blockquote.board footer {
  font-style:normal;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:10px;
}

/* mapping table */
table.map { width:100%; border-collapse:collapse; min-width:640px; font-size:.94rem; }
table.map th {
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:12px 16px 8px 2px;
  border-bottom:1px solid var(--line-strong);
}
table.map td { padding:12px 16px 12px 2px; border-bottom:1px solid var(--line); vertical-align:top; }
table.map td:first-child { font-weight:600; white-space:nowrap; font-size:.9rem; }
.mapwrap { overflow-x:auto; margin:18px 0 8px; border-top:4px double var(--line-strong); background:var(--panel); padding:0 18px 8px; }

/* ---------- adverse event exhibit ---------- */
.event {
  margin:26px 0 10px;
  border-top:4px double var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  background:var(--panel);
}
.event .exhibit-head { border-bottom:1px solid var(--line); }
.event .exhibit-tag { background:var(--red); }
.event .diagram { margin:0; }
.codewrap { overflow-x:auto; padding:16px 18px; }
pre.filing {
  font-family:var(--mono);
  font-size:.8rem;
  line-height:1.7;
  min-width:560px;
}
pre.filing .path { color:var(--muted); }
pre.filing .del {
  display:block;
  background:var(--red-soft);
  color:var(--red);
  padding:1px 8px;
  margin:0 -8px;
}
pre.filing .ctx { color:var(--muted); }
pre.filing .fail { color:var(--red); font-weight:600; }
pre.filing .ok { color:var(--accent); }
pre.filing .cmd { font-weight:600; }
.event-captions {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border-top:1px solid var(--line);
}
.event-cap { padding:16px 18px 18px; }
.event-cap + .event-cap { border-top:1px solid var(--line); }
@media (min-width:820px) {
  .event-cap + .event-cap { border-top:0; border-left:1px solid var(--line); }
}
.event-cap h3 { margin:6px 0 6px !important; font-size:.98rem !important; }
.event-cap p { font-size:.9rem; color:var(--muted); margin-bottom:0 !important; }

/* ---------- mechanism cards ---------- */
.mechgrid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  margin:24px 0 8px;
}
.mech {
  border:1px solid var(--line-strong);
  border-top:3px solid var(--ink);
  background:var(--panel);
  padding:18px 18px 20px;
}
.mech .num { font-family:var(--mono); font-size:.76rem; font-weight:600; letter-spacing:.14em; color:var(--accent); }
.mech h3 { margin:8px 0 6px !important; font-size:1.02rem !important; }
.mech p { font-size:.9rem; color:var(--muted); margin-bottom:0 !important; max-width:none !important; }

/* ---------- diagrams (inline SVG, theme-aware via currentColor + tokens) ---------- */
figure.diagram { margin:26px 0 10px; }
figure.diagram .dwrap { overflow-x:auto; padding:18px 18px 10px; }
figure.diagram svg { display:block; width:100%; height:auto; }
figure.diagram figcaption {
  padding:12px 18px 16px;
  font-size:.85rem;
  color:var(--muted);
  font-style:italic;
  border-top:1px solid var(--line);
  line-height:1.55;
}
/* per-diagram intrinsic widths — the SVG scrolls inside .dwrap, never the page */
#svg-schematic { min-width:460px; }
#svg-c0 { min-width:700px; }
#svg-d0 { min-width:760px; }

.dg-box { fill:var(--panel-2); stroke:currentColor; stroke-width:1.2; }
.dg-ghost { fill:var(--panel); }
.dg-ln { stroke:currentColor; stroke-width:1.2; fill:none; }
.dg-thin { stroke:var(--line); stroke-width:1; }
.dg-dash { stroke-dasharray:5 5; }
.dg-mut { stroke:var(--muted); }
.dg-acc { stroke:var(--accent); }
.dg-accf { fill:var(--accent); }
.dg-redl { stroke:var(--red); }
.dg-redf { fill:var(--red); }
.dg-redsoftf { fill:var(--red-soft); }
.dg-panelf { fill:var(--panel); }
.dg-t { font-family:var(--mono); font-size:12px; letter-spacing:.05em; fill:currentColor; }
.dg-th { font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.dg-tm { fill:var(--muted); }
.dg-ta { fill:var(--accent); }
.dg-tr { fill:var(--red); }
.dg-ts { font-family:var(--serif); font-style:italic; font-size:12.5px; letter-spacing:0; }
.dg-num { font-family:var(--mono); font-weight:600; font-size:12px; fill:currentColor; }

/* ---------- limits ---------- */
.limits {
  border:1.5px solid var(--ink);
  background:var(--panel);
  padding:22px 24px 10px;
  margin:24px 0 8px;
  max-width:60ch;
}
.limits ul { list-style:none; }
.limits li {
  padding:10px 0 12px 26px;
  position:relative;
  border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.limits li:last-child { border-bottom:0; }
.limits li::before { content:"—"; position:absolute; left:0; color:var(--red); font-weight:600; }
.limits li b { font-weight:600; }

/* ---------- tiers ---------- */
.tiers {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin:24px 0 8px;
}
.tier {
  border:1px solid var(--line-strong);
  background:var(--panel);
  display:flex;
  flex-direction:column;
  padding:22px 22px 24px;
}
.tier.lead { border:2px solid var(--accent); background:var(--panel); }
.tier .price {
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.tier.lead .price { color:var(--accent); }
.tier h3 { font-size:1.25rem !important; margin:8px 0 4px !important; }
.tier .stage { font-size:.78rem; font-style:italic; color:var(--muted); margin-bottom:10px; }
.tier ul { list-style:none; margin:8px 0 18px; flex:1; }
.tier li { padding:7px 0 7px 20px; position:relative; font-size:.92rem; border-bottom:1px solid var(--line); }
.tier li:last-child { border-bottom:0; }
.tier li::before { content:"·"; position:absolute; left:4px; color:var(--accent); font-weight:700; }
.tier .btn { text-align:center; }

/* ---------- close ---------- */
.close-band {
  margin-top:clamp(48px,7vw,84px);
  border-top:4px double var(--line-strong);
  background:var(--panel-2);
  padding:clamp(40px,6vw,64px) 0;
}
.close-band h2 { font-size:clamp(1.6rem,3vw,2.3rem); font-weight:600; line-height:1.15; max-width:24ch; margin:12px 0 14px; }
.close-band p { max-width:56ch; margin-bottom:22px; }

/* ---------- footer (shared across every page) ---------- */
.site-footer {
  border-top:1px solid var(--line);
  padding:28px clamp(18px,4vw,44px) 46px;
  margin-top:0;
  background:var(--paper);
  color:var(--muted);
}
.site-footer .container { max-width:74rem; margin:0 auto; padding:0; }
.site-footer p { font-size:.82rem; margin:.35rem 0; color:var(--muted); }
.site-footer > .container > p:first-child {
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--ink);
}
.site-footer a { color:var(--accent); }
.site-footer .legal { font-size:.76rem; line-height:1.6; color:var(--muted); max-width:82ch; }
.site-footer .legal + .legal { margin-top:8px; }
.site-footer .footer-nav { font-size:.82rem; margin-top:.6rem; }
.site-footer .footer-nav a { text-decoration:none; }
.site-footer .footer-nav a:hover { text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width:700px) {
  .site-header { gap:.75rem 1rem; }
  .site-header nav { margin-left:0; width:100%; gap:.35rem 1rem; }
  .site-header nav a { min-height:40px; display:inline-flex; align-items:center; }
  /* groups file inline: the open card sits in the flow on its own row,
     framed by a left rule instead of floating over the page */
  .site-header nav .nav-group { position:static; flex-wrap:wrap; }
  .site-header nav .nav-group.open,
  html:not(.js) .site-header nav .nav-group:focus-within { width:100%; }
  .site-header nav .nav-toggle { width:34px; min-height:40px; align-self:auto; }
  .site-header nav .nav-menu {
    position:static;
    width:100%;
    min-width:0;
    margin:2px 0 8px;
    padding:2px 0 2px 14px;
    border:0;
    border-left:2px solid var(--line-strong);
    box-shadow:none;
  }
  .site-header nav .nav-menu a { min-height:36px; padding:6px 10px; }
}
@media (max-width:420px) {
  body { font-size:16px; }
  .hero h1 { font-size:1.9rem; }
}

/* ---------- explainer pages (methodology, briefs, registers, lifecycle, statusgen) ----------
   The mechanism explainers compose the shared header/footer and the exhibit / section /
   register system above; these parts are specific to long-form reference prose. */

/* inline code — register apparatus, mono on a faint panel */
code {
  font-family:var(--mono);
  font-size:.84em;
  background:var(--panel-2);
  padding:.1em .4em;
  color:var(--ink);
}
a code { color:inherit; }

/* running prose lists — the reset zeroes list padding, so restore it (scoped to
   .measure so the landing's custom-bulleted .limits / .tier lists are untouched) */
.measure ul, .measure ol { padding-left:1.35em; margin:0 0 14px; max-width:60ch; }
.measure li { margin:6px 0; padding-left:3px; }
.measure li::marker { color:var(--accent); }

/* a boxed note / caveat in the filing idiom — candor is load-bearing */
.note {
  margin:22px 0;
  max-width:60ch;
  border-left:4px solid var(--line-strong);
  background:var(--panel);
  padding:14px 20px 16px;
}
.note .rk {
  display:block;
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}
.note p { font-size:.95rem; margin:0; max-width:none; }
.note p + p { margin-top:10px; }
.note strong, .note b { font-weight:600; color:var(--ink); }

/* "Reading" article slots — pending-publication cards on the mech grid */
.mech h4 { margin:8px 0 6px; font-size:1.02rem; font-weight:600; }
.mech .coming {
  font-family:var(--mono);
  font-size:.76rem !important;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:12px !important;
}

/* the lifecycle token arc — a short state-flow strip in ledger green */
pre.stateflow {
  font-family:var(--mono);
  font-size:.88rem;
  letter-spacing:.03em;
  color:var(--accent);
}

/* bottom page navigation (back-links), mono, above a hairline */
.pagenav {
  border-top:1px solid var(--line);
  margin-top:clamp(40px,6vw,64px);
  padding-top:20px;
}
.pagenav a {
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* metrics ("how it runs") page — state badges and value/family cells.
   Red stays reserved for the adverse-event exhibit, so could-not-check reads as a
   dashed, muted absence rather than an alarm. */
.state {
  display:inline-block;
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:2px 7px;
  border:1px solid var(--line-strong);
  color:var(--muted);
  white-space:nowrap;
}
.state-measured { color:var(--accent); border-color:var(--accent); }
.state-partial { color:var(--ink); border-color:var(--line-strong); }
.state-cnc { color:var(--muted); border-style:dashed; }
table.register td.m-value { font-family:var(--mono); font-size:.8rem; white-space:normal; }
.m-family {
  display:block;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:3px;
}
/* Client-render states for the live "how it runs" table: a muted, italic
   loading line, and an error line that reads as an absence — never red, which
   stays reserved for the adverse-event exhibit. */
.js-loading { color:var(--muted); font-style:italic; }
.js-error { color:var(--muted); font-style:italic; }

/* explainer diagram intrinsic widths — each SVG scrolls inside .dwrap, never the page */
#intake-loop-svg { min-width:720px; }
#desk-flow-svg { min-width:760px; }
#feedback-loop-svg { min-width:600px; }
#lc-svg { min-width:740px; }
#dr-svg { min-width:720px; }
#sw-svg { min-width:600px; }
#gl-svg { min-width:560px; }
#tr-svg { min-width:740px; }
#lc-svg, #dr-svg, #sw-svg, #gl-svg, #tr-svg { display:block; width:100%; height:auto; max-width:960px; margin:0 auto; }
.board-figure .scroll { overflow-x:auto; }
.dg-small { font-size:10.5px; }
.dg-gatebox { stroke-width:2; }
.dg-dashbox { stroke-dasharray:5 4; }
.dg-hatch { fill:url(#gl-hatch); }
.dg-hatchln { stroke:var(--line-strong); stroke-width:1; }

/* ---------- reduced motion (a11y floor) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; }
}

/* ---------- GitHub Apps page (apps.html) ---------- */
.apps-owner { padding:18px 20px 6px; }
.apps-owner p { margin:0 0 14px; }
.apps-owner label {
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-block;
  min-width:14ch;
}
.apps-owner input {
  font-family:var(--mono);
  font-size:.9rem;
  padding:7px 10px;
  border:1.5px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  min-width:28ch;
  max-width:100%;
}
.apps-owner input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.apps-owner .legal,
.apps-table .legal { display:block; font-size:.78rem; line-height:1.5; color:var(--muted); margin-top:6px; max-width:70ch; }
.apps-table form { margin:0; }
.apps-table .btn { padding:9px 14px; white-space:nowrap; }
.apps-table td { vertical-align:middle; }
.apps-nojs[hidden] { display:none; }

/* the fleet's toolset register (auth section) — the in/never marks are mono text,
   green for carried and muted for absent; never red (red stays reserved for the
   single adverse-event exhibit). */
.apps-tool {
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.apps-tool.in { color:var(--accent); }
.apps-tool.never { color:var(--muted); }

/* sample icon family — square filing swatches, ledger-green line art, theme-aware
   through currentColor (one accent only, no gold). */
.icon-family {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:14px;
  padding:18px 18px 22px;
}
.icon-item { text-align:center; }
.icon-avatar {
  width:64px;
  height:64px;
  margin:0 auto 9px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  background:var(--panel);
  color:var(--accent);
}
.icon-avatar svg { width:40px; height:40px; display:block; stroke:currentColor; fill:none; }
.icon-item span {
  display:block;
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* apps-created.html: the seven avatars as one clean register table — a swatch,
   the role, its filename, and a download button per row. Reuses the .icon-avatar
   swatch, dropping the family grid's bottom margin inside a cell. */
.icon-table td { vertical-align:middle; }
.icon-table td.c-icon { width:80px; padding-top:10px; padding-bottom:10px; }
.icon-table .icon-avatar { width:52px; height:52px; margin:0; }
.icon-table .icon-avatar img { display:block; width:44px; height:44px; }
.icon-table .btn { padding:8px 14px; white-space:nowrap; }

/* apps-created.html: the assembled-command block's actions (copy + create
   another), sitting under the generated script inside its exhibit. */
.assembled-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:4px 18px 16px;
}

/* ---------- research register (concepts · overviews) ----------
   The /concepts register, /concept theme folios, and /overviews event pages
   read as the assay office's general ledger, aimed at the AI engineers who
   write the harnesses the talks are about: every claim carries a witness
   column (source counts, dates, events), status is a MARK not a colored pill,
   and sections keep one fixed order so any folio can be cited by section
   number. House
   tokens only; red stays reserved for the adverse event and never appears
   here — an honest gap is a mark, not an alarm. */

/* folio strip — the mono metadata row that opens every research page */
.folio {
  display:flex; align-items:baseline; gap:.6rem 1.2rem; flex-wrap:wrap;
  margin:26px 0 0; padding:9px 2px;
  border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.76rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.folio a { color:var(--muted); text-decoration:none; }
.folio a:hover { color:var(--accent); }
.folio .f-right { margin-left:auto; }
.folio .f-here { color:var(--ink); }

/* marks — state is a mark, not a hue. One drawing system: CSS shapes on the
   text baseline, 7px square, stroke 1.5px; the word always rides with the
   glyph so color and shape never carry meaning alone. Two families: SQUARES
   are the corroboration ladder; the diamond/circle set is Assay's position. */
.mk {
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--mono); font-size:.76rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap;
}
.mk::before { content:""; flex:none; width:7px; height:7px; background:var(--ink); }
.mk.mk-lead::before { background:var(--accent); transform:rotate(45deg); }
.mk.mk-lead { color:var(--accent); }
.mk.mk-match::before { border-radius:50%; }
.mk.mk-gap::before { background:transparent; border:1.5px solid var(--muted); border-radius:50%; }
.mk.mk-gap { color:var(--muted); }
/* corroboration ladder: squares, fill = strength */
.mk.mk-established::before { background:var(--accent); }
.mk.mk-established { color:var(--accent); }
.mk.mk-corroborated::before { }
.mk.mk-emerging::before { background:transparent; border:1.5px solid var(--ink); }
.mk.mk-fading { color:var(--muted); }
.mk.mk-fading::before { background:transparent; border:1.5px solid var(--line-strong); }

/* witness line — the counts row under a hero (sources · events · reviewed) */
.witness {
  font-family:var(--mono); font-size:.76rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  margin:14px 0 0;
}
.witness b { color:var(--ink); font-weight:600; }

/* section numbers — the fixed citation order of a folio */
.secno {
  font-family:var(--mono); font-size:.72em; font-weight:600;
  letter-spacing:.08em; color:var(--accent); margin-right:.55rem;
  vertical-align:.08em;
}

/* the ledger — ruled rows for sightings, talks, watch items */
ul.ledger, .ledger ul { list-style:none; margin:0; padding:0; }
.ledger li {
  position:relative; padding:13px 0 13px 0; border-bottom:1px solid var(--line);
}
.ledger li:last-child { border-bottom:0; }
.ledger .lref {
  font-family:var(--mono); font-size:.76rem; font-weight:600;
  letter-spacing:.1em; color:var(--accent); margin-right:.6rem;
}
.ledger .lby { font-family:var(--mono); font-size:.76rem; color:var(--muted); letter-spacing:.04em; }
.ledger .lwit { font-size:.94rem; color:var(--muted); margin:4px 0 0; max-width:58ch; }
.ledger a { text-decoration:none; }
.ledger a:hover { text-decoration:underline; }

/* event head — the grouping row above a sighting block */
.evhead {
  font-family:var(--mono); font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  margin:26px 0 2px; padding-bottom:7px; border-bottom:1px solid var(--line-strong);
}
.evhead .n { color:var(--muted); font-weight:500; }

/* folio nav — prev / register / next along a double rule; sits directly
   under the hero (the folio's carry-forward line), matching the old pn slot */
.folio-nav {
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:2.4rem; padding:14px 2px 0; border-top:4px double var(--line-strong);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
}
.folio-nav a { color:var(--ink); text-decoration:none; }
.folio-nav a:hover { color:var(--accent); text-decoration:underline; }
.folio-nav .fn-mid { color:var(--muted); }

/* sighting gallery — YouTube thumbnails as the sightings face of a concept
   folio. Images load lazily from i.ytimg.com (plain image fetches, no
   cookies, no scripts — the CSP carries the img-src entry). */
ul.gallery {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:14px;
}
ul.gallery > li {
  border:1px solid var(--line);
  background:var(--panel);
  display:flex; flex-direction:column;
}
ul.gallery > li:hover { border-color:var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  ul.gallery > li { transition:border-color .12s ease-out; }
}
ul.gallery .thumb { display:block; position:relative; text-decoration:none; }
ul.gallery .thumb img {
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover;
  filter:saturate(.82) contrast(1.02);
  border-bottom:1px solid var(--line);
}
ul.gallery .thumb .lref {
  position:absolute; left:0; bottom:0;
  background:var(--paper); color:var(--accent);
  font-family:var(--mono); font-size:.76rem; font-weight:600;
  letter-spacing:.1em; padding:3px 8px;
  border-top:1px solid var(--line); border-right:1px solid var(--line);
}
ul.gallery .s-body { padding:12px 14px 13px; }
ul.gallery .s-body .s-title {
  color:var(--ink); text-decoration:none; font-size:.98rem; font-weight:600;
  display:block; line-height:1.35;
}
ul.gallery .s-body .s-title:hover { color:var(--accent); text-decoration:underline; }
ul.gallery .s-body .lby {
  display:block; font-family:var(--mono); font-size:.76rem;
  color:var(--muted); letter-spacing:.06em; margin-top:6px;
}
ul.gallery .s-body .lwit { font-size:.85rem; color:var(--muted); margin:8px 0 0; line-height:1.5; }

/* witness strip — the compact status summary row under a theme folio hero */
.witstrip { display:flex; gap:.5rem 1.6rem; flex-wrap:wrap; margin:16px 0 0; }

/* learnings / numbered evidence rows on event pages */
ol.evrows { list-style:none; margin:0; padding:0; counter-reset:evrow; }
ol.evrows > li {
  counter-increment:evrow; position:relative;
  padding:16px 0 16px 3.2rem; border-bottom:1px solid var(--line);
}
ol.evrows > li:last-child { border-bottom:0; }
ol.evrows > li::before {
  content:"0" counter(evrow); position:absolute; left:0; top:18px;
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  letter-spacing:.1em; color:var(--accent);
}
ol.evrows > li p { max-width:60ch; margin:0 0 10px; }
ol.evrows > li p:last-child { margin-bottom:0; }

/* events ledger on the overviews cover */
ul.events { list-style:none; margin:0; padding:0; }
ul.events > li {
  display:grid; grid-template-columns:9.5rem minmax(0,1fr) auto; gap:2px 1.4rem;
  padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
ul.events > li:last-child { border-bottom:0; }
ul.events .e-when { font-family:var(--mono); font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
ul.events .e-when b { display:block; color:var(--ink); font-size:1rem; letter-spacing:.02em; }
ul.events .e-what p { font-size:.95rem; color:var(--muted); margin:4px 0 0; max-width:56ch; }
ul.events .e-what a { color:var(--ink); text-decoration:none; font-size:1.12rem; }
ul.events .e-what a:hover { color:var(--accent); text-decoration:underline; }
ul.events .e-wit { font-family:var(--mono); font-size:.76rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
@media (max-width:760px) {
  ul.events > li { grid-template-columns:1fr; }
  ul.events .e-wit { order:3; }
}

/* theme rows on the concepts cover (the 14-theme reading order) */
.theme-ledger { list-style:none; margin:0; padding:0; }
.theme-ledger > li {
  display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; gap:2px 1.4rem;
  padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.theme-ledger > li:last-child { border-bottom:0; }
.theme-ledger .t-no {
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  letter-spacing:.1em; color:var(--accent);
}
.theme-ledger .t-body h3 { font-size:1.16rem; font-weight:600; margin:0 0 6px; }
.theme-ledger .t-body h3 a { color:var(--ink); text-decoration:none; }
.theme-ledger .t-body h3 a:hover { color:var(--accent); text-decoration:underline; }
.theme-ledger .t-body p { font-size:.95rem; color:var(--muted); margin:0; max-width:58ch; }
.theme-ledger .t-wit {
  font-family:var(--mono); font-size:.76rem; color:var(--muted);
  letter-spacing:.09em; text-transform:uppercase; text-align:right; line-height:1.9;
}
.theme-ledger .t-wit b { color:var(--ink); font-weight:600; }
@media (max-width:760px) {
  .theme-ledger > li { grid-template-columns:1fr; }
  .theme-ledger .t-wit { text-align:left; order:3; }
}

/* the witness ramp — a theme's corroboration profile as an instrument: one
   column per concept (theme order), height = independent-source count,
   column treatment = ladder status. Structure carries the data; hover a
   column for its concept. Miniature form rides the hub's theme rows. */
.ramp { display:block; }
.ramp rect { fill:var(--ink); }
.ramp rect.rm-a, .ramp rect.rm-st-a { fill:var(--accent); }
.ramp rect.rm-c, .ramp rect.rm-st-c { fill:var(--ink); }
.ramp rect.rm-e, .ramp rect.rm-f, .ramp rect.rm-st-e, .ramp rect.rm-st-f { fill:transparent; stroke:var(--muted); stroke-width:1.5; }
.ramp .rm-base { stroke:var(--line-strong); stroke-width:1; }
.ramp .rm-tick { stroke:var(--line); stroke-width:1; }
.rampband { margin:30px 0 0; padding:18px 0 14px; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line); }
.rampband svg { max-width:100%; height:auto; }
.theme-ledger .t-wit .ramp-mini { margin:2px 0 8px; height:46px; width:auto; }
.theme-ledger .t-wit .ramp-mini rect { fill:var(--ink); }
.theme-ledger .t-wit .ramp-mini rect.rm-a, .theme-ledger .t-wit .ramp-mini rect.rm-st-a { fill:var(--accent); }
.theme-ledger .t-wit .ramp-mini rect.rm-e, .theme-ledger .t-wit .ramp-mini rect.rm-f { fill:transparent; stroke:var(--muted); stroke-width:1.5; }
/* the concepts index — names, marks, counts; the glosses live one level down
   on the concept pages themselves */
ul.concept-idx { list-style:none; margin:0; padding:0; }
ul.concept-idx li {
  display:flex; align-items:baseline; gap:1rem;
  padding:10px 2px; border-bottom:1px solid var(--line); font-size:.98rem;
}
ul.concept-idx li:last-child { border-bottom:0; }
ul.concept-idx a { color:var(--ink); text-decoration:none; }
ul.concept-idx a:hover { color:var(--accent); text-decoration:underline; }
ul.concept-idx .idx-src { margin-left:auto; font-family:var(--mono); font-size:.76rem; color:var(--muted); }

/* the themes hub (/concepts) — reads as the blog gallery: the same card, chip
   and category-strip grammar (blog.css is linked on that page), with a theme
   panel in place of an article thumbnail. The panel carries the theme number
   and the theme's witness ramp — one column per concept, height = source
   count — so the corroboration profile rides along without a chart legend. */
.theme-gallery { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
.card .thumb.theme-thumb {
  aspect-ratio:auto; min-height:92px;
  justify-content:space-between; align-items:flex-end;
  padding:14px 18px 12px; gap:18px;
}
.card .thumb.theme-thumb .t-num {
  font-family:var(--serif); font-size:2.9rem; font-weight:300; line-height:.9;
  letter-spacing:-.02em; text-transform:none; color:var(--ink);
}
.theme-thumb .t-ramp { display:block; line-height:0; max-width:58%; min-width:0; flex:0 1 auto; }
.theme-thumb .t-ramp svg { width:auto; height:48px; max-width:100%; display:block; }
.theme-thumb .t-ramp rect { fill:var(--line-strong); }
.theme-thumb .t-ramp rect.rm-st-a { fill:var(--accent); }
.theme-thumb .t-ramp rect.rm-st-c { fill:var(--ink); }
.theme-thumb .t-ramp rect.rm-st-e, .theme-thumb .t-ramp rect.rm-st-f { fill:transparent; stroke:var(--muted); stroke-width:1.5; }
.theme-thumb .t-ramp .rm-base { stroke:var(--line-strong); }
.theme-thumb .t-ramp .rm-tick { stroke:transparent; }
.card.theme-card a.card-link:hover .t-num { color:var(--accent); }
.chip.chip-theme { color:var(--accent); border-color:var(--accent); }
.railcard .rail-note { font-size:.9rem; color:var(--muted); font-style:italic; }
.railcard .mk { margin-bottom:3px; font-style:normal; }
/* the excerpt note under a theme page's curated talks gallery */
.gallery-note { font-size:.92rem; color:var(--muted); font-style:italic; margin:14px 0 0; }

/* ── "how it runs": the composite score, its four sub-score meters, and the
   demoted raw-activity fold. ────────────────────────────────────────────────
   One hue does all the work here. The sub-scores are four readings of the same
   0–100 quantity, so they are a magnitude comparison, not four identities: a
   categorical palette would imply the dimensions are different KINDS of thing
   and would spend four hues saying nothing. Each bar is the accent on a lighter
   step of the same ramp, with the value printed beside it — the number is the
   dependable channel, the bar is the glance.

   Red is not used at any point on this page. It stays reserved for the single
   adverse-event exhibit, and a low sub-score is a diagnostic reading rather than
   an alarm; painting it red would editorialise a number whose whole argument is
   that it is reported without spin. */
.scorecard {
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  border:1px solid var(--line);
  background:var(--panel);
  padding:26px 24px;
  margin-top:22px;
}
@media (min-width:820px) {
  .scorecard { grid-template-columns:minmax(200px,270px) 1fr; gap:40px; align-items:start; }
}
.scorehero { border-bottom:1px solid var(--line); padding-bottom:20px; }
@media (min-width:820px) {
  .scorehero { border-bottom:0; border-right:1px solid var(--line); padding-bottom:0; padding-right:34px; }
}
.scorefig {
  font-family:var(--mono);
  font-size:clamp(3.2rem,8vw,4.4rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--accent);
  margin:10px 0 14px;
}
/* No number to show. An em-dash set at hero size reads as a broken glyph rather
   than as an absence, and "—/100" reads as a rendering fault, so the figure drops
   to body scale and the scale suffix is dropped with it; the badge underneath
   carries the state. */
.scorefig.scorefig-cnc { color:var(--muted); font-size:2rem; }
.scorefig.scorefig-cnc .scoreof { display:none; }
.scorefig .scoreof {
  font-size:1rem;
  letter-spacing:.02em;
  color:var(--muted);
  margin-left:4px;
}
.scorehero .small { margin-top:12px; }
.scorebreak-note { margin-top:16px; }

.meter { margin-bottom:20px; }
.meter:last-of-type { margin-bottom:0; }
.meter-head { display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.meter-label { font-weight:600; font-size:.98rem; color:var(--ink); }
/* Values wear a text token, never the bar's colour — the mark beside them
   carries the identity, and accent-coloured digits read as a link. */
.meter-value {
  font-family:var(--mono);
  font-size:.86rem;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.meter-track {
  position:relative;
  height:10px;
  margin-top:7px;
  background:var(--accent-soft);
  border:1px solid var(--line);
}
.meter-fill {
  height:100%;
  background:var(--accent);
  border-radius:0 4px 4px 0;  /* rounded at the data end, square at the baseline */
  min-width:2px;
}
/* An unmeasured dimension gets a hatched, empty track. It must not be able to be
   mistaken for a bar sitting at zero: no fill is drawn at all, and the words
   could-not-check are printed where the value would be. */
.meter-track-cnc {
  background:repeating-linear-gradient(
    135deg, transparent 0 5px, var(--line) 5px 6px);
  border-style:dashed;
}
.meter-note { font-size:.82rem; color:var(--muted); margin-top:6px; max-width:62ch; }

.mono-inline { font-family:var(--mono); font-size:.86em; }

/* The demoted counters. Collapsed by default: kept and checkable, but no longer
   the first thing the page says. */
details.fold {
  border:1px solid var(--line);
  background:var(--panel);
  margin-top:18px;
}
details.fold > summary {
  cursor:pointer;
  padding:14px 20px;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  list-style-position:inside;
}
details.fold > summary:hover { color:var(--ink); }
details.fold[open] > summary { border-bottom:1px solid var(--line); color:var(--ink); }
details.fold .fold-body { padding:18px 20px 22px; }
details.fold .fold-body .tablewrap { margin-bottom:14px; }
details.fold .fold-body p.small { max-width:74ch; }
details.fold .fold-body p.small + p.small { margin-top:10px; }

/* ---------- key-terms strip (shared across every page, under the header) ----------
   A quiet, always-present path from any page to the definition of the core
   vocabulary. It is the site-wide half of "define before first use": a reader who
   meets a house term anywhere is one click from its meaning. */
.keyterms {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.35rem .9rem;
  padding:7px clamp(18px,4vw,44px);
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
  font-size:.9rem;
}
.keyterms .kt-label {
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.keyterms a { font-family:var(--mono); font-size:.82rem; }

/* ---------- glossary definition list ---------- */
.glossary { margin-top:6px; }
.glossary dt {
  font-family:var(--mono);
  font-weight:600;
  font-size:1rem;
  color:var(--ink);
  margin-top:22px;
  scroll-margin-top:90px;
}
.glossary dt:first-of-type { margin-top:0; }
.glossary dd {
  margin:6px 0 0;
  max-width:52rem;
  color:var(--ink);
}
.glossary dd em { color:var(--muted); }

/* ---------- comparison residue list ---------- */
ul.limits-list { list-style:none; margin:6px 0 0; max-width:52rem; }
ul.limits-list li {
  padding:12px 0 12px 20px;
  border-top:1px solid var(--line);
  position:relative;
}
ul.limits-list li::before {
  content:"";
  position:absolute;
  left:2px; top:20px;
  width:7px; height:7px;
  background:var(--accent);
}
ul.limits-list li:last-child { border-bottom:1px solid var(--line); }

/* ---------- start-here reading order (audience hub) ---------- */
.startgrid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));
  gap:24px;
  margin-top:6px;
}
.startpath h3 {
  font-size:1.05rem;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
ol.reading-order {
  list-style:none;
  counter-reset:ro;
  margin:14px 0 0;
}
ol.reading-order li {
  counter-increment:ro;
  position:relative;
  padding:0 0 16px 2.6rem;
}
ol.reading-order li::before {
  content:counter(ro);
  position:absolute;
  left:0; top:-2px;
  width:1.8rem; height:1.8rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:600;
  color:var(--on-accent);
  background:var(--accent);
}
ol.reading-order li > a { font-weight:600; }
ol.reading-order .why {
  display:block;
  margin-top:3px;
  font-size:.9rem;
  color:var(--muted);
}

/* ---------- blog framing line: what the writing is ---------- */
p.framing {
  margin-top:12px;
  padding-left:14px;
  border-left:3px solid var(--accent);
  font-size:.95rem;
  color:var(--muted);
  max-width:46rem;
}


/* ================= Signal Box world: overrides on the shared vocabulary ================= */
h1, h2, h3, h4 { font-family: var(--f-inst); letter-spacing: .01em; }
h2, h3 { text-transform: uppercase; letter-spacing: .04em; }
.site-header { border-bottom: 2px solid var(--brass); box-shadow: inset 0 -1px 0 var(--iron); }
.site-header .wordmark { font-family: var(--f-inst); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 1.45rem; }
.site-header .header-tag { font-family: var(--f-mono); font-style: normal; font-size: .76rem; }
.site-header nav a { font-family: var(--f-inst); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; font-size: .9rem; }
.site-header nav .nav-menu { border: 2px solid var(--iron); box-shadow: 0 8px 14px rgba(0,0,0,.12); }
.site-header nav .nav-menu a { text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-weight: 400; }
.exhibit-tag, .chip, .state, .kt-label, th { font-family: var(--f-inst); letter-spacing: .08em; }
.exhibit { border-color: var(--brass); }
.exhibit-head { border-bottom: 2px solid var(--brass); }
.btn, .btn-primary, .btn-secondary { font-family: var(--f-inst); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; border-radius: 0; }
.btn-primary:hover, .btn:hover { background: var(--gold); color: #141414; border-color: var(--gold-deep); }
.card, .railcard, .pathscard, .scorecard { border-radius: 0; border-color: var(--line-strong); }
code, pre, .mono-inline, .cmd { font-family: var(--f-mono); }
::selection { background: var(--gold); color: #141414; }
.state-measured { color: var(--phos-text); }
.state-partial, .state-cnc { color: var(--amber-text); }


/* ================= the page kit: inner pages composed in the Signal Box =================
   Every explainer, adopt, reference, live and audience page is built from these parts and
   nothing from the retired vocabulary (exhibit, railgrid, hero, kicker, factstrip, mechgrid).
   The retired rules stay below only for the blog and research registers. */

/* page head: an engraved plate, then the lede */
.plate-head { border-top: 3px solid var(--iron); border-bottom: 2px solid var(--brass); padding: 28px 0 24px; margin-bottom: 8px; }
.plate-head .plate-line { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); letter-spacing: .02em; margin-bottom: 10px; }
.plate-head h1 { font-family: var(--f-inst); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.05; letter-spacing: .01em; margin: 0 0 14px; max-width: 24ch; }
.plate-head .lede { font-size: 1.1rem; line-height: 1.55; max-width: 62ch; }

/* the page body: one column of bands, an optional margin column from 1024px */
.page { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .page.with-margin { grid-template-columns: minmax(0, 1fr) 18rem; column-gap: 48px; align-items: start; } .page.with-margin > .margin { position: sticky; top: 24px; } }
.band { border-top: 1px solid var(--iron); padding-top: 48px; padding-bottom: 48px; }
.band > h2 { margin-bottom: 20px; }
.band > h3 { margin: 28px 0 10px; }
.band p, .band li, .band dd { max-width: 68ch; }
.band p + p { margin-top: 12px; }
.band ul, .band ol { padding-left: 1.3rem; margin: 12px 0; }
.band li + li { margin-top: 6px; }

/* margin notes: a brass-ruled plate, never a card or a border-left */
.margin { display: grid; gap: 24px; }
.margin-note { border-top: 2px solid var(--brass); padding-top: 10px; }
.margin-note .plate-label, .plate-label { font-family: var(--f-inst); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--muted); display: block; margin-bottom: 6px; }
.margin-note p { font-size: .92rem; color: var(--ink); max-width: none; }
.margin-note a { color: var(--ink); }

/* engraved plate label on a section: replaces exhibit-tag and kicker */
.plate-tag { display: inline-block; font-family: var(--f-inst); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--paper); background: var(--iron); padding: 4px 10px; margin-bottom: 12px; }
.plate-tag.danger { background: var(--red); }

/* stations along a rail: ordered steps, states, desks, install steps */
.stations { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 0; counter-reset: station; }
.station { position: relative; padding: 16px 0 16px 3.2rem; border-top: 1px solid var(--line); }
.station:last-child { border-bottom: 1px solid var(--line); }
.station::before { counter-increment: station; content: counter(station); position: absolute; left: 0; top: 14px; width: 2.2rem; height: 2.2rem; border: 2px solid var(--iron); border-radius: 50%; background: var(--paper); font-family: var(--f-inst); font-weight: 700; font-size: .95rem; display: grid; place-items: center; }
.station.gate::before { border-color: var(--red); color: var(--red); }
.station.gate > strong::after { content: " · waits for you"; color: var(--red); font-weight: 600; letter-spacing: 0; text-transform: none; font-family: var(--f-mono); font-size: .8rem; }
.station > strong { font-family: var(--f-inst); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; display: block; margin-bottom: 4px; }
.station p { font-size: .95rem; max-width: 64ch; }
.station .runs { display: block; font-family: var(--f-mono); font-size: .78rem; color: var(--phos-text); margin-top: 6px; }
.station .why { display: block; font-family: var(--f-mono); font-size: .78rem; color: var(--muted); margin-top: 6px; }
@media (min-width: 900px) { .stations.rail { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 24px; } .stations.rail .station { border-top: 3px solid var(--iron); border-bottom: 0; padding-left: 0; padding-top: 3.2rem; } .stations.rail .station::before { top: 12px; } .stations.rail .station:last-child { border-bottom: 0; } }

/* the instrument row for facts (shares the readout cell) */
.instruments { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); padding: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0; }
@media (min-width: 720px) { .instruments { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.instrument { background: var(--paper); padding: 14px; display: grid; gap: .3rem; align-content: start; }
.instrument .plate-label { margin: 0; }
.instrument .value { font-family: var(--f-inst); font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.instrument .unit { font-family: var(--f-mono); font-size: .78rem; color: var(--muted); }

/* spec table: brass rules, sticky first column when wide */
.spec { overflow-x: auto; border: 1px solid var(--iron); padding: 12px; margin: 16px 0; background: var(--paper); }
.spec table { min-width: 560px; }
.spec th, .spec td { border-bottom: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.spec thead th { background: var(--panel-2); font-family: var(--f-inst); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.spec th:first-child, .spec td:first-child { font-family: var(--f-mono); font-size: .82rem; white-space: nowrap; }

/* code on the board: the packet's black glass */
.glassblock { display: block; font-family: var(--f-mono); font-size: .9rem; background: #141414; color: var(--phos); padding: 14px 16px; border: 1px solid #000; white-space: pre-wrap; word-break: break-word; line-height: 1.5; margin: 12px 0; max-width: 72ch; }

/* the one adverse event on a page */
.danger { border: 2px solid var(--red); padding: 14px 16px; margin: 16px 0; }
.danger .plate-label { color: var(--red); }

/* page navigation: two plates */
.plate-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; border-top: 3px solid var(--iron); padding-top: 20px; margin-top: 8px; }
.plate-nav a { font-family: var(--f-inst); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; text-decoration: none; padding: 10px 16px; border: 2px solid var(--iron); }
.plate-nav a:hover { background: var(--gold); color: #141414; border-color: var(--gold-deep); }

/* key terms strip as a plate */
.terms { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: .82rem; }
.terms .plate-label { margin: 0; }

/* diagrams stay: they are content. Give them a framed board. */
.board-figure { border: 3px solid var(--iron); box-shadow: inset 0 0 0 2px var(--brass); padding: 16px; background: var(--paper); margin: 16px 0; }
.board-figure figcaption { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); padding-top: 8px; }


/* coverage shading: state as a labelled plate, never a hue alone */
.shade { display: inline-block; font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; padding: .1rem .45rem; border: 1px solid currentColor; margin-left: .4rem; vertical-align: middle; }
.shade-covered { color: var(--phos-text); }
.shade-partial { color: var(--amber-text); }
.shade-yours { color: var(--red); }
.margin-note .shade { margin: 0 .4rem 0 0; }

/* == area: explainers == */
/* methodology, briefs, registers, lifecycle, desk-roles, statusgen. Four kit parts also carry
   their retired twin as a second class (plate-line+kicker, margin+rail, plate-nav+pagenav,
   plate-tag+exhibit-tag) so tools/build-methodology-md.cjs keeps skipping the same chrome; the
   twins' leftover properties are reset here. */
.explainer .plate-head { margin-top: 32px; }
.explainer .plate-line { font-weight: 400; text-transform: none; letter-spacing: .02em; }
.explainer .page > .margin { margin-top: 0; }
.explainer .plate-nav { margin-top: 48px; }
.explainer .offline { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 16px 0 8px; }
.explainer .offline .fine { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); max-width: 48ch; }
.explainer .spec table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.explainer .spec th { text-align: left; }
.explainer .board-figure .scroll { overflow-x: auto; }
.explainer .board-figure svg { display: block; width: 100%; height: auto; }
.explainer .station .desc { display: block; font-size: .95rem; }
/* the state rail on lifecycle: the kit's .stations.rail layout under a name the paper builder does
   not skip ("rail" is on its chrome list) */
.explainer .stations.states .station.gate > strong::after { display: block; margin-top: 2px; }
@media (min-width: 900px) { .explainer .stations.states { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0 20px; } .explainer .stations.states .station { border-top: 3px solid var(--iron); border-bottom: 0; padding-left: 0; padding-top: 3.2rem; } .explainer .stations.states .station::before { top: 12px; } .explainer .stations.states .station:last-child { border-bottom: 0; } }
.explainer .station.off::before { content: "\00b7"; counter-increment: none; border-style: dashed; color: var(--muted); }
.explainer .stations.long .station { padding-top: 40px; padding-bottom: 40px; }
.explainer .stations.long .station::before { top: 44px; }
.explainer .stations.long .station > h2 { margin: 0 0 20px; }
.explainer .stations.long .station > h3 { margin: 28px 0 10px; }
.explainer .stations.long .station p, .explainer .stations.long .station li { font-size: 1rem; max-width: 68ch; }
.explainer .stations.long .station ul { padding-left: 1.3rem; margin: 12px 0; }
.explainer .stations.long .station li + li { margin-top: 6px; }
.explainer .stations.long .station p + p { margin-top: 12px; }
.explainer .station .plate-tag, .explainer .band .plate-tag { margin-top: 20px; }
.explainer .band > .plate-tag:first-child { margin-top: 0; }
.explainer .reading { list-style: none; padding: 0; margin: 12px 0; }
.explainer .reading li { border-top: 1px solid var(--line); padding: 12px 0; margin: 0; }
.explainer .reading li:last-child { border-bottom: 1px solid var(--line); }
.explainer .reading strong { font-family: var(--f-inst); font-size: 1.15rem; display: block; }
.explainer .pending { display: block; font-family: var(--f-mono); font-size: .78rem; color: var(--muted); margin-top: 4px; }
.explainer .band .fine { font-size: .9rem; color: var(--muted); }
.explainer .danger p { max-width: 64ch; }
/* == /area: explainers == */

/* == area: adopt == */
/* margin notes stack their lines (the reset zeroes paragraph margins) */
main.adopt .margin-note p + p { margin-top: 6px; }
/* air between the page's last plate and the footer */
main.adopt .plate-nav { margin-bottom: 48px; }
/* an instrument whose value is a word (macOS · Linux) keeps the readout size in check */
main.adopt .instrument .value { font-size: clamp(1.3rem, 2.2vw, 1.6rem); overflow-wrap: anywhere; }
/* small print inside a band or station: the no-JS fallback, a permission caveat */
main.adopt .band .legal { display: block; font-size: .8rem; line-height: 1.5; color: var(--muted); margin-top: 6px; max-width: 70ch; }
/* a grid item's min-width is auto: a station holding a spec table or a wide code block would widen
   the page at phone width rather than scroll inside its own frame */
main.adopt .station, main.adopt .page > * { min-width: 0; }
/* blocks inside a station sit in the station's column, under its title */
main.adopt .station .glassblock, main.adopt .station .spec { margin: 10px 0; }
/* a hash or an asset name in a spec cell breaks where it must rather than forcing the table to scroll */
main.adopt .spec td code { overflow-wrap: anywhere; }
/* an inline token (an env key, an installation URL) is longer than a phone is wide: let it break rather than push the page */
main.adopt .band code, main.adopt .margin-note code, main.adopt .plate-head code { overflow-wrap: anywhere; }
main.adopt .station p + p, main.adopt .station .spec + p, main.adopt .station .glassblock + p, main.adopt .station ul + p { margin-top: 10px; }
main.adopt .station ul { margin: 10px 0; padding-left: 1.3rem; }
main.adopt .station li + li { margin-top: 6px; }
/* apps.html — the owner-and-naming form on its own plate now that the exhibit frame is gone */
main.adopt .apps-owner { border: 1px solid var(--iron); padding: 18px 20px 6px; margin: 0 0 8px; }
/* apps.html — the nine App stations: name and permissions in the first column, the create form at the right */
main.adopt .apps-stations .station { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
main.adopt .apps-stations .station > strong, main.adopt .apps-stations .station > p { grid-column: 1; margin: 0; }
main.adopt .apps-stations .station > p + p { margin-top: 4px; }
main.adopt .apps-stations .station > form { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
main.adopt .apps-stations .perms { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); }
main.adopt .apps-stations .perms .legal { display: inline; margin: 0; }
@media (max-width: 599px) { main.adopt .apps-stations .station { grid-template-columns: minmax(0, 1fr); } main.adopt .apps-stations .station > form { grid-column: 1; grid-row: auto; margin-top: 10px; } }
/* apps.html — the icon family inside its board figure carries no second padding */
main.adopt .board-figure .icon-family { padding: 0; }
/* apps-created.html — the saved script is a long file: keep its lines whole and let the block scroll rather than wrap 150 lines down the page */
main.adopt #create-app-script { white-space: pre; overflow: auto; max-height: 30rem; max-width: none; }
main.adopt #assembled-run, main.adopt #batch-command { max-width: none; }
/* apps-created.html — the copy / pick / clear actions sit under the glass, flush with the station text */
main.adopt .station .assembled-actions { padding: 6px 0 2px; }
main.adopt .station .assembled-actions .btn { padding: 9px 14px; }
/* tiering.html — the reading list: two forthcoming articles, ruled rows, publication state in mono */
main.adopt .reading-list { list-style: none; padding: 0; margin: 12px 0 16px; }
main.adopt .reading-list li { border-top: 1px solid var(--line); padding: 14px 0; }
main.adopt .reading-list li:last-child { border-bottom: 1px solid var(--line); }
main.adopt .reading-list strong { font-family: var(--f-inst); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; display: block; margin-bottom: 4px; }
main.adopt .reading-list .pending { display: block; font-family: var(--f-mono); font-size: .78rem; color: var(--amber-text); margin-top: 6px; }
/* dark scheme: --iron stays #1A1A1A while --paper goes to #1C1F1E, so an iron plate on enamel, a plate-tag's
   paper-on-iron text, and a station's iron ring all vanish. Scoped to these pages until the kit takes it up. */
@media (prefers-color-scheme: dark) {
  main.adopt .plate-tag { background: var(--ink); color: var(--paper); }
  main.adopt .plate-tag.danger { background: var(--red); color: #fff; }
  main.adopt .station::before, main.adopt .plate-nav a, main.adopt .spec, main.adopt .apps-owner, main.adopt .board-figure { border-color: var(--ink); }
  main.adopt .plate-head, main.adopt .band, main.adopt .plate-nav, main.adopt .stations.rail .station { border-top-color: var(--ink); }
}
/* == /area: adopt == */

/* == area: live == */
/* the two live pages (board, how it runs): generated by render-metrics.py, filled by
   metrics.js into frozen ids. The kit does the composition; these rules dress the
   slots the script writes (.meter, .scorefig, .m-value, .codewrap) as instruments. */
.live .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.live .instrument .value.reading-mono { font-family: var(--f-mono); font-weight: 400; font-size: .95rem; line-height: 1.4; word-break: break-word; }
.live .instrument .value.reading-text { font-family: var(--f-body); font-weight: 400; font-size: .92rem; line-height: 1.4; }
.live .instrument .value > .state { font-size: .8rem; vertical-align: middle; }
.live .band > .instruments:first-child { margin-top: 0; }
.live .spec table { min-width: 720px; }
.live .spec td:last-child { min-width: 18rem; }
.live .spec td.c-obj { font-weight: 600; }
.live .spec td.m-value { font-family: var(--f-mono); font-size: .82rem; white-space: normal; }
.live-metrics .spec th:first-child, .live-metrics .spec td:first-child { font-family: var(--f-body); font-size: .95rem; white-space: normal; min-width: 11rem; }
.live .board-constraint td { background: var(--panel); }
.live .gatelist { margin-bottom: 8px; }
.live .gatelist .reading { display: block; font-family: var(--f-inst); font-weight: 700; font-size: 1.6rem; line-height: 1.1; margin: 2px 0 4px; }
.live .band-noscript { border-top: 0; padding-top: 0; padding-bottom: 24px; }
.live .band .plate-tag { margin-top: 8px; background: var(--ink); color: var(--paper); }
.live details.fold > summary { font-family: var(--f-inst); font-size: .95rem; text-transform: none; letter-spacing: .02em; }
.live .plate-nav { margin-top: 32px; }
.live .margin-note p + p { margin-top: 8px; }
/* the metrics margin is long: it reads in flow beside the page, never pinned */
.live-metrics .page.with-margin > .margin { position: static; }
/* the score: one composite instrument beside the four sub-score instruments */
.live .score { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 16px 0; }
@media (min-width: 900px) { .live .score { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; } }
.live .score .instrument.composite { border: 1px solid var(--line); }
.live .score .instrument.composite p + p { margin-top: 8px; }
.live .score .subscores .plate-label { margin-bottom: 8px; }
.live .score .instruments { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .live .score .instruments { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.live .scorefig { font-family: var(--f-inst); font-weight: 700; font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1; letter-spacing: 0; color: var(--ink); margin: 4px 0 10px; }
.live .scorefig .scoreof { font-family: var(--f-mono); font-size: 1rem; }
.live .scorefig.scorefig-cnc { font-size: 2rem; color: var(--muted); }
.live .instruments > .meter { background: var(--paper); padding: 14px; margin: 0; display: grid; gap: .3rem; align-content: start; }
.live .meter-label { font-family: var(--f-inst); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--muted); }
.live .meter-value { font-family: var(--f-inst); font-weight: 700; font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
.live .meter-track { margin-top: 4px; }
.live .meter-fill { border-radius: 0; }
.live .meter-note { font-size: .78rem; margin-top: 4px; }
/* the trend probe's own words, on the packet's black glass (metrics.js writes .codewrap > pre) */
.live #js-trend-quote .codewrap { padding: 0; overflow: visible; }
.live #js-trend-quote pre { font-family: var(--f-mono); font-size: .85rem; background: #141414; color: var(--phos); padding: 14px 16px; border: 1px solid #000; white-space: pre-wrap; word-break: break-word; line-height: 1.5; margin: 12px 0; max-width: 72ch; }
.live details.fold .fold-body .spec { margin-top: 0; }
/* == /area: live == */

/* == area: audience == */
/* stations inside a band are one rail, not a list: no inter-item gap, so the rail's circles sit level */
.band .stations .station + .station { margin-top: 0; }
/* a margin that runs longer than a viewport (one boundary note per reader) reads in flow, not stuck to the top */
@media (min-width: 1024px) { .page.with-margin > .margin.long { position: static; } }
/* == /area: audience == */

/* ---------- box page chrome ---------- */
.wrap { width: min(100% - 2 * clamp(16px, 4vw, 48px), 1360px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: #141414; padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: 8px; top: 8px; }
.sheet { position: relative; background-color: var(--paper); background-image: repeating-linear-gradient(0deg, transparent 0 95px, color-mix(in srgb, var(--line) 70%, transparent) 95px 96px); }
.sheet > * { position: relative; }
.page-head { padding-top: 40px; padding-bottom: 24px; }
.page-head .lede { font-size: 1.1rem; margin-top: 16px; }
.page-head h1 { font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 700; line-height: 1.05; }
.sheet .doc { padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--line); }
.sheet .doc h2 { margin-bottom: 20px; }
.sheet .doc p, .sheet .doc li { max-width: 68ch; }
.sheet .doc .note { font-family: var(--f-mono); font-size: .82rem; color: var(--muted); }
.legend { font-family: var(--f-inst); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--muted); }

/* ---------- first viewport ---------- */
.bench {
  display: grid; gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 32px 40px;
}
@media (min-width: 960px) {
  .bench { grid-template-columns: 22rem minmax(0, 1fr); align-items: start; }
}

/* the packet — the folded state, and the standing call to action */
.packet {
  background: var(--gold); color: #141414;
  padding: 24px;
  border: 2px solid var(--gold-deep);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transform-origin: left center;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.packet::after { /* foil fold line */
  content: ""; position: absolute; left: 24px; right: 24px; bottom: 24px; height: 1px; background: var(--gold-deep); opacity: .7;
}
.packet h1 { color: #141414; }
.packet .lede { color: #2A2308; font-size: 1.02rem; }
.packet .cmd {
  display: block; font-family: var(--f-mono); font-size: .92rem; background: #141414; color: var(--phos);
  padding: 12px 16px; border: 1px solid #000; white-space: pre-wrap; word-break: break-word; line-height: 1.5;
}
.packet .pull {
  appearance: none; border: 2px solid #141414; background: #141414; color: var(--gold);
  font-family: var(--f-inst); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 1.05rem;
  padding: 12px 20px; cursor: pointer; text-decoration: none; text-align: center;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.packet .pull:hover { background: var(--gold-deep); color: #141414; }
.packet .pull .tab { display: inline-block; width: 1.4em; height: .7em; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%); }
.packet .fine { font-family: var(--f-mono); font-size: .78rem; color: #2A2308; }


/* the readouts — seven-segment drawn in SVG */
.readouts { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); padding: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .readout:last-child { grid-column: span 2; } }
.readout { background: var(--sheet); padding: 12px; display: grid; gap: .35rem; align-content: start; min-height: 7.6rem; }
.readout .r-name { font-family: var(--f-inst); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.readout .r-seg { display: block; width: 100%; height: 2.6rem; background: #0B0E0C; border: 1px solid #000; padding: .3rem .5rem; }
.readout .r-seg svg { height: 100%; width: auto; display: block; }
.readout .r-seg .off { fill: #1D2A22; }
.readout .r-seg .on { fill: var(--phos); }
.readout[data-state="could-not-check"] .r-seg .on { fill: #1D2A22; }
.readout[data-state="could-not-check"] .r-seg { border-color: var(--amber); }
.readout .r-unit { font-family: var(--f-mono); font-size: .76rem; color: var(--ink-2); }
.readout .r-state { font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.readout[data-state="measured"] .r-state { color: var(--phos-text); }
.readout[data-state="partial"] .r-state { color: var(--amber-text); }
.readout[data-state="could-not-check"] .r-state { color: var(--amber-text); }
.readout .r-text { font-family: var(--f-mono); font-size: .8rem; color: var(--ink); }
.readout-note { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-2); padding-top: 8px; max-width: 90ch; }


/* ---------- the diagram board: instrument row, track, signals, lever frame ---------- */
.board { display: grid; gap: 0; border: 3px solid var(--iron); background: var(--sheet); box-shadow: inset 0 0 0 2px var(--brass), 0 2px 0 var(--iron); }
.board > * { border-top: 2px solid var(--brass); }
.board > :first-child { border-top: 0; }
.board .plate { font-family: var(--f-inst); font-weight: 700; letter-spacing: .06em; font-size: .9rem; color: var(--sheet); background: var(--iron); padding: 6px 12px; display: flex; justify-content: space-between; gap: 1rem; }
.board .plate .armed { color: var(--amber); }
.readouts { padding: 1px; }
.readout { background: var(--sheet); border: 1px solid var(--brass); }
.readout .r-seg { border: 2px solid var(--brass); height: 2.2rem; }
.board .readout { min-height: 0; padding: 10px 12px; }
.track { position: relative; padding: 8px 12px 4px; }
.track svg { display: block; width: 100%; height: auto; }
.track .rail { stroke: var(--iron); stroke-width: 3; fill: none; }
.track .tie { stroke: var(--iron); stroke-width: 1; opacity: .5; }
.track .post { stroke: var(--iron); stroke-width: 2; }
.track .lamp { fill: var(--track-green); stroke: var(--iron); stroke-width: 1.5; }
.track .lamp.red { fill: var(--signal-red); }
.track .lamp.gate { }
.track .stn { font-family: var(--f-inst); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink); }
.track .stn.gate { fill: var(--signal-red); }
.track .brief { fill: var(--brass); stroke: var(--iron); stroke-width: 1.5; }
.track .brief-id { font-family: var(--f-mono); font-size: 12px; fill: var(--iron); }
.track figcaption { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-2); padding: 6px 4px 0; }
.frame { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 12px; padding: 12px; background: var(--sheet-deep); }
.lever { appearance: none; border: 2px solid var(--iron); background: var(--sheet); color: var(--ink); padding: 12px; text-align: left; cursor: pointer; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .4rem .8rem; align-items: start; font-family: var(--f-inst); }
.lever .handle { grid-row: 1 / span 2; width: 1.1rem; height: 3.4rem; background: var(--iron); border-radius: 2px 2px 0 0; position: relative; transform-origin: bottom center; transition: transform .35s cubic-bezier(.2,.9,.2,1); }
.lever .handle::before { content: ""; position: absolute; top: -.5rem; left: 50%; width: 1.5rem; height: 1rem; transform: translateX(-50%); background: var(--brass); border: 1px solid var(--iron); border-radius: 50%; }
.lever[aria-pressed="true"] .handle { transform: rotate(-38deg); }
.lever[aria-pressed="true"] .handle::before { background: var(--signal-red); }
.lever .l-name { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.lever .l-val { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-2); }
.lever[data-locked] { cursor: not-allowed; }
.lever[data-locked] .handle { background: repeating-linear-gradient(45deg, var(--iron) 0 3px, var(--sheet-deep) 3px 6px); }
.lever[data-locked] .handle::before { background: var(--sheet-deep); }
.lever:hover { background: var(--sheet-deep); }
.lever[data-locked]:hover { background: var(--sheet); }
.lever.packet-lever { background: var(--gold); border-color: var(--gold-deep); }
.lever.packet-lever .handle { background: var(--gold-deep); }
.lever.packet-lever .l-val { color: #2A2308; }


/* ---------- now · next · later ---------- */
.nnl { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); border: 3px solid var(--iron); box-shadow: inset 0 0 0 2px var(--brass); padding: 16px; background: var(--paper); }
@media (min-width: 860px) { .nnl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nnl-col:nth-child(4) { grid-column: 1 / -1; } }
.nnl-col { min-width: 0; border-top: 2px solid var(--brass); padding-top: 8px; }
.nnl-col h3 { font-family: var(--f-inst); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 1.05rem; margin: 0; }
.nnl-sub { font-family: var(--f-mono); font-size: .78rem; color: var(--muted); margin: 4px 0 12px; max-width: none; }
.nnl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.nnl-list li { padding: 8px 0; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.4; max-width: none; }
.nnl-list li:last-child { border-bottom: 1px solid var(--line); }
.nnl-list .id { font-family: var(--f-mono); font-size: .8rem; color: var(--accent); white-space: nowrap; }
.nnl-list .nnl-meta { display: block; font-family: var(--f-mono); font-size: .76rem; color: var(--muted); margin-top: 2px; }
.nnl-list .nnl-empty { color: var(--muted); font-family: var(--f-mono); font-size: .8rem; }

/* ---------- sections on the sheet ---------- */
/* .band is defined once, in the page kit above; the landing page uses the same band. */
.band .intro { margin-bottom: 24px; font-size: 1.05rem; }
.two { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .two { grid-template-columns: 1fr 1fr; } }
.gatelist, .desklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.gatelist li, .desklist li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .9rem; padding: 12.8px 0; border-top: 1px solid var(--rule); }
.gatelist li:last-child, .desklist li:last-child { border-bottom: 1px solid var(--rule); }
.gatelist .mark, .desklist .mark { width: 2.2rem; height: 2.2rem; display: block; }
.gatelist strong, .desklist strong { font-family: var(--f-inst); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; display: block; }
.gatelist p, .desklist p { font-size: .92rem; color: var(--ink-2); max-width: none; }
.gatelist .why { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-2); }
.desklist .runs { color: var(--phos-text); font-family: var(--f-mono); font-size: .78rem; }

/* the deployed sheet — waves × briefs */
.deploy { overflow-x: auto; border: 1px solid var(--ink); background: var(--sheet); padding: 12px; }
.deploy:focus-visible { outline-offset: -2px; }
.deploy table { min-width: 720px; }
.deploy th, .deploy td { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: .45rem .55rem; }
.deploy th:first-child, .deploy td:first-child { position: sticky; left: 0; background: var(--sheet); font-family: var(--f-mono); font-size: .82rem; white-space: nowrap; border-right: 1px solid var(--ink); }
.deploy thead th { background: var(--sheet-deep); font-size: .78rem; text-align: center; }
.deploy td.cells { white-space: nowrap; }
.cell { display: inline-block; width: 1.05rem; height: 1.05rem; margin-right: .15rem; vertical-align: middle; border: 1px solid var(--ink-2); position: relative; background: transparent; }
.cell[data-s="in-progress"]::after { content: ""; position: absolute; left: 0; top: 0; width: 50%; height: 100%; background: var(--crease-v); }
.cell[data-s="implemented"]::after { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 20%; background: var(--ink); }
.cell[data-s="verified"] { background: repeating-linear-gradient(45deg, transparent 0 2px, var(--ink) 2px 3px); }
.cell[data-s="done"]::before, .cell[data-s="done"]::after { content: ""; position: absolute; left: -15%; right: -15%; top: 50%; height: 2px; background: var(--ink); transform: rotate(45deg); }
.cell[data-s="done"]::after { transform: rotate(-45deg); }
.cell[data-s="blocked"] { border-color: var(--amber); }
.cell[data-s="blocked"]::after { content: ""; position: absolute; right: -1px; top: -1px; width: 55%; height: 55%; background: var(--amber); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.marks { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-family: var(--f-mono); font-size: .8rem; color: var(--ink-2); padding-top: 8px; }
.marks span { display: inline-flex; align-items: center; gap: .4rem; }
.totals { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-2); margin-top: 8px; }

/* limits, stamp, close */
.claims-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .claims-grid { grid-template-columns: minmax(0, 1fr) 16rem; } }
.hallmark { display: grid; justify-items: center; align-content: start; gap: .6rem; text-align: center; }
.hallmark img { width: 120px; height: 120px; }
.hallmark .legend { text-transform: none; letter-spacing: .02em; font-size: .95rem; color: var(--ink); }
.hallmark .fine { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-2); }
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.claims li { padding-left: 1.4rem; position: relative; max-width: var(--measure); }
.claims li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: 2px; background: var(--ink); }
.close { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 860px) { .close { grid-template-columns: minmax(0, 1fr) auto; } }
.btn { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--f-inst); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; text-decoration: none; padding: 12px 20px; border: 2px solid var(--ink); background: var(--ink); color: var(--sheet); }
.btn:hover { background: var(--gold); color: #141414; border-color: var(--gold-deep); }
.btn.quiet { background: transparent; color: var(--ink); }
.btn.quiet:hover { background: var(--sheet-deep); color: var(--ink); border-color: var(--ink); }
.site-footer { border-top: 1px solid var(--ink); padding-top: 32px; padding-bottom: 32px; font-family: var(--f-mono); font-size: .8rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .6rem 2rem; }


/* ---------- motion: the unfold, once ---------- */
.js .unfold { transform-style: preserve-3d; perspective: 1200px; }
.js .unfold > .fold-row { transform-origin: top center; backface-visibility: hidden; }
.js .folded .unfold > .fold-row { transform: rotateX(-88deg); opacity: 0; }
.js .unfold > .fold-row { transition: transform .9s cubic-bezier(.16,.84,.24,1), opacity .5s ease-out; }
.js .unfold > .fold-row:nth-child(2) { transition-delay: .12s; }
.js .folded .packet { box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.js .packet { transition: box-shadow .9s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .js .folded .unfold > .fold-row { transform: none; opacity: 1; }
  .js .unfold > .fold-row, .lever .handle, .js .packet { transition: none; }
}

/* ---------- layers.html: the stack, drawn as plates in one frame ----------
   Five enamel plates bolted into a single cast frame, bottom plate the forge, top plate the
   desks; the runtime is a separate rail bolted BESIDE the frame, never a plate in it. Hatching
   marks what is optional: a hatched edge on the method plate, a hatched rail for the runtime. */
.stackfig.board-figure { margin: 28px 0 8px; }
.stackfig .scroll { overflow-x: auto; }
.stackfig svg { display: block; width: 100%; height: auto; }
#layers-svg { min-width: 440px; max-width: 720px; margin: 0 auto; }
.ly-frame { fill: none; stroke: var(--iron); stroke-width: 3; }
.ly-brass { fill: none; stroke: var(--brass); stroke-width: 2; }
.ly-brk { fill: none; stroke: var(--brass-deep); stroke-width: 1.5; }
.ly-plate { fill: var(--panel-2); stroke: var(--iron); stroke-width: 1.5; }
.ly-hatched { fill: url(#ly-hatch); stroke: var(--iron); stroke-width: 1.5; }
.ly-hatchln { stroke: var(--line-strong); stroke-width: 1; }
.ly-inner { fill: var(--paper); stroke: var(--iron); stroke-width: 1; }
.ly-tie { fill: none; stroke: var(--ink); stroke-width: 1.4; color: var(--ink); }
.ly-dash { stroke-dasharray: 5 4; }
.ly-name { font-family: var(--f-inst); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink); }
.ly-sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .02em; fill: var(--muted); }
.ly-lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; fill: var(--ink); }
.ly-call { font-family: var(--f-body); font-style: italic; font-size: 11px; fill: var(--muted); }
.ly-link-t { fill: var(--accent); }
.ly-inside .ly-sub:first-of-type { fill: var(--phos-text); }
.ly-a { color: inherit; text-decoration: none; cursor: pointer; }
.ly-a:hover .ly-plate, .ly-a:focus .ly-plate, .ly-a:hover .ly-inner, .ly-a:focus .ly-inner, .ly-a:hover .ly-hatched, .ly-a:focus .ly-hatched { stroke: var(--gold-deep); stroke-width: 2.5; }
.ly-a:hover .ly-name, .ly-a:focus .ly-name { fill: var(--gold-deep); }
.ly-a:focus { outline: none; }
.ly-legend { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--brass); }
.ly-legend li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .9rem; line-height: 1.5; }
.ly-legend li > a { font-family: var(--f-inst); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; color: var(--ink); text-decoration: none; border-bottom: 0; align-self: start; }
.ly-legend li > a:hover { color: var(--gold-deep); }
.ly-legend code { font-size: .8rem; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ly-legend li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.stackfig figcaption { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); padding-top: 10px; max-width: 72ch; }

/* the two statements the page exists to make */
.statements { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin: 28px 0 8px; }
@media (min-width: 860px) { .statements { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.statement { border-top: 3px solid var(--iron); padding-top: 14px; }
.statement .say { font-family: var(--f-inst); font-weight: 600; font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.15; letter-spacing: .01em; max-width: 24ch; margin: 0 0 10px; text-wrap: balance; }
.statement .because { font-size: .95rem; max-width: 54ch; }
.instruments + .fine, .measured { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); max-width: 72ch; }