/* Page composition and local exceptions. Shared primitives: ../../design-system/. */
/* ============================================================
   Tokens — specs/design-system.md §2 Typography, §3 Spacing, §4 Radius
   ============================================================ */
:root {

  --signal-text: #7A5310;

  /* Text on the dark surfaces this page carries. The colour contract in
     specs/design-system.md requires every text colour to resolve to a :root
     token, but its recipe pre-composes against --bg, which only covers text on
     the light page. These compose against their own surface instead, so they
     get their own row rather than a --text-* name. All solid, no alpha. */
  --on-dark-strong: #FFFFFF;
  --on-dark-mono: #C9D6EE;
  --on-dark-code: #E8EEF8;
  --on-dark-ok: #8FD9B6;
  --on-dark-warn: #FFC08A;
  --on-dark-alert: #FFB4A2;
  --on-dark-dim: #93A6C4;

  /* Cobalt tints. --org-executor-ink and --depth-line carry the junior executor tier,
     which has to read as a step down from --depth without changing hue. */
  --org-executor-ink: #5B7099;
  --depth-line: #8FA3C7;
  --depth-deep: #14213D;
  --depth-term: #12203F;
  --text-tertiary: #9B978E;

  /* Cards sit pure white against the off-white page, so this is not --bg. */
  --card: #FFFFFF;

  /* The document graph, drawn on --depth-deep. Nodes and links are one hue at
     two weights; hubs and their labels are the only things allowed to break out. */
  --graph-link: #8FA6C9;
  --graph-node: #7E93B5;
  --graph-hub: #F4DFA8;
  --graph-label: #DCE4F0;

}

body {

   text-rendering: optimizeLegibility;
}

img {   height: auto; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   Shared primitives
   ============================================================ */
.band { position: relative; }

.bg-bg      { background: var(--bg); }
.bg-surface { background: var(--surface); }
.bg-sage    { background: var(--sage); }
.bg-frost   { background: var(--frost); }
/* The former red-review chapters remain in source for comparison, but their
   strongest ideas now live in the operating-decisions register above. */
.review-overengineered { display: none; }

/* Chapter eyebrow — numbered section label, same voice as the other cases
   (voice-first-party-game): "01 · Label", quiet, no rule, no internal "Act". */

.eyebrow {

  margin-bottom: var(--s-16);
}
.bg-frost .eyebrow { color: var(--indigo); }

h2.h-band { margin-bottom: var(--s-24); max-width: 22ch; }
/* Full-measure heading — sits on one line on desktop, wraps naturally below. */
h2.h-band.full { max-width: none; }

p { font-size: var(--body-size); line-height: 1.7; }
p + p { margin-top: var(--s-20); }

/* Two-column prose — D4 */
/* column-fill: balance is the default; paragraphs are allowed to break across the
   gutter so both columns end level (D4). Orphans/widows keep the break readable. */
.prose-2 { columns: 2; column-gap: var(--s-64); orphans: 3; widows: 3; }
.prose-2 p:first-child { margin-top: 0; }
/* clean-top: each column starts with a whole paragraph, no break across the gutter
   (author request on band 3 — top edges must align on clean paragraphs). Trades D4's
   level-bottom for a clean top; the browser balances by whole paragraphs instead. */
.prose-2.clean-top p { -webkit-column-break-inside: avoid; break-inside: avoid; }
/* col2-start: force column 2 to open on this paragraph so the three instruments stay
   together in column 1 (author call on band 3 — balance deliberately sacrificed for a
   contiguous first/second/third read). margin-top:0 keeps its top edge level with
   column 1. Only in the 2-column zone; below 900px the single column stacks normally. */
@media (min-width: 901px) {
  .prose-2.clean-top .col2-start { -webkit-column-break-before: always; break-before: column; margin-top: 0; }
}
@media (max-width: 900px) { .prose-2 { columns: 1; } }

/* Split — text plus artifact, always top-aligned (D6) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-64); align-items: start; }
.split.wide-right { grid-template-columns: 0.8fr 1.2fr; }
.split.wide-left  { grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 1024px) {
  .split, .split.wide-right, .split.wide-left { grid-template-columns: 1fr; gap: var(--s-48); }
}

.figure-caption { max-width: 66ch; }
.recon-tag {
  display: inline-block; font-family: var(--f-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-text);
  border: 1px solid var(--signal); border-radius: 999px; padding: 3px 10px; margin-bottom: var(--s-16);
}
.pull {
  font-family: var(--f-quote); font-style: italic; font-size: 21px; line-height: 1.5;
  color: var(--text-primary); border-left: 2px solid var(--signal);
  padding-left: var(--s-24); margin-top: var(--s-32); max-width: 46ch;
}

/* ============================================================
   STAKEHOLDER-FIRST NARRATIVE LAYER
   Plain-language orientation plus the editorial decision register.
   ============================================================ */
.executive-intro { max-width: 74ch; font-size: var(--body-large-size); line-height: 1.7; }
.executive-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-48) var(--s-64); margin-top: var(--s-48);
}
.executive-item .label {
  display: block; font-family: var(--f-display); font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary);
  margin-bottom: var(--s-8);
}
.executive-item h3 {
  font-family: var(--f-display); font-size: 24px; line-height: 1.2;
  letter-spacing: -0.015em; margin-bottom: var(--s-12);
}
.executive-item p { color: var(--text-secondary); }
.executive-thesis {
  max-width: 31ch; margin-top: var(--s-64);
  font-family: var(--f-personal); font-size: clamp(28px, 3.3vw, 44px);
  line-height: 1.2; letter-spacing: -0.012em;
}

.process-path {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-24); margin-top: var(--s-48); padding-top: var(--s-32);
}
.process-path::before {
  content: ''; position: absolute; top: 7px; left: 8px; right: 8px;
  height: 2px; background: var(--depth-line);
}
.process-move { position: relative; }
.process-move::before {
  content: ''; position: absolute; top: calc(-1 * var(--s-32) - 1px); left: 0;
  width: 16px; height: 16px; border-radius: 50%; background: var(--depth);
  box-shadow: 0 0 0 6px var(--surface);
}
.process-move h3 {
  font-family: var(--f-display); font-size: 20px; line-height: 1.2;
  letter-spacing: -0.01em; margin-bottom: var(--s-8);
}
.process-move p { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }

.decision-intro { max-width: 74ch; font-size: var(--body-large-size); line-height: 1.7; }
.decision-register { display: grid; gap: var(--s-16); margin-top: var(--s-48); }
.decision-tile {
  display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  column-gap: var(--s-64); row-gap: var(--s-24);
  padding: var(--s-32); background: var(--card); border-radius: var(--r-lg);
  box-shadow: 0 18px 44px -36px rgba(28,27,24,.42);
}
.decision-head { align-self: start; }
.decision-kind {
  display: block; font-family: var(--f-body); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--primary);
  margin-bottom: var(--s-8);
}
.decision-head h3 {
  font-family: var(--f-display); font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.12; letter-spacing: -.02em;
}
.decision-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-32); }
.decision-body p { font-size: 16px; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.decision-body strong {
  display: block; font-family: var(--f-display); font-size: 13px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary);
  margin-bottom: var(--s-8);
}
.decision-proof {
  grid-column: 2; margin: 0; padding-top: var(--s-16);
  border-top: 2px solid var(--depth-line);
  font-family: var(--f-mono); font-size: 13px; line-height: 1.65; color: var(--depth);
}
.decision-proof span {
  font-family: var(--f-body); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-right: var(--s-12);
}
@media (max-width: 900px) {
  .executive-grid { grid-template-columns: 1fr; gap: var(--s-32); }
  .process-path { grid-template-columns: 1fr; gap: var(--s-32); padding-top: 0; padding-left: var(--s-32); }
  .process-path::before { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto; }
  .process-move::before { top: 1px; left: calc(-1 * var(--s-32) - 1px); box-shadow: 0 0 0 6px var(--surface); }
  .decision-tile { grid-template-columns: 1fr; gap: var(--s-24); }
  .decision-body { grid-template-columns: 1fr; gap: var(--s-20); }
  .decision-proof { grid-column: 1; }
}

/* Artifact card — the page's one recurring container */
.artifact {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.bg-bg .artifact { background: var(--card); }
.artifact .head {
  background: var(--text-primary); color: var(--on-dark);
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em;
  padding: var(--s-12) var(--s-20); display: flex; justify-content: space-between; gap: var(--s-16);
}
.artifact .body { padding: var(--s-24); }
.artifact .row { display: flex; gap: var(--s-16); padding: var(--s-12) 0; border-top: 1px solid var(--border); }
.artifact .row:first-child { border-top: 0; padding-top: 0; }
.artifact .k {
  font-family: var(--f-display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary);
  flex: 0 0 128px; padding-top: 3px;
}
.artifact .v { font-size: 15.5px; line-height: 1.6; }
.artifact .v code {
  font-family: var(--f-mono); font-size: 13.5px;
  background: var(--surface); padding: 1px 5px; border-radius: 4px;
}

/* ============================================================
   COVER — Cover B, cobalt slab + signal rule + meta row
   ============================================================ */
.cover .inner { max-width: var(--content-wide); margin: 0 auto; padding: var(--s-80) var(--gutter) var(--s-64); }
.cover h1 {

  --cover-title-size: clamp(40px, 5vw, 68px); --cover-title-leading: 1.06; --cover-title-tracking: -0.025em;
    max-width: 24ch;
}
/* Lede in three moves (problem / what I built / how it works). One measure for
   all three, 770px, so full lines land at a consistent width; each move is a
   segment separated by a gap that marks the manual break. */
.cover .lede {    max-width: 770px; margin-top: var(--s-24); }
.cover .lede .seg { display: block; }
.cover .lede .seg + .seg { margin-top: var(--s-16); }
.cover .rule {    margin: var(--s-32) 0 var(--s-16); }

/* ============================================================
   PROBLEM STATEMENT
   ============================================================ */
.problems-intro { max-width: none; margin-top: var(--s-24); font-size: var(--body-large-size); line-height: 1.6; color: var(--text-secondary); }

/* ============================================================
   BAND 3 — the team as an org (illustrative example)
   A responsibility tree, full-bleed under the section text: levels
   read up the quiet left rail, each node is a zone that level owns,
   cobalt depth encodes experience, and the branching shows who holds
   whom. It rhymes with the actor org of band 6 by design. Hover lights
   a node's line of command; there is no scroll-reveal — the tree reads
   statically the moment it is in view.
   ============================================================ */
.team-block { margin-top: var(--s-32); }
/* From 1440px up the whole tree fits without a horizontal scroll, so pulling the
   full-bleed diagram up into the prose's dead space is safe: the right column ends
   high, and the tree begins level with the left column's last few lines — one
   vertical composition, not stacked blocks. Below 1440 the diagram scrolls
   horizontally, so it stays below the prose where scrolled nodes never cross the
   left column's text. */
@media (min-width: 1440px) { .team-block { margin-top: -30px; } }

.team-foundation { width: 100vw; margin-left: calc(50% - 50vw); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
/* margin auto centres the stage when it fits and pins it left (scroll right) when
   the viewport is narrower than the floor width — never a two-sided centre-crop. */
.team-sizer { position: relative; margin: 0 auto; }
.team-stage { position: absolute; top: 0; left: 0; width: 1600px; height: 494px; transform-origin: top left; transform: scale(var(--s, 1)); }

/* quiet, left-aligned level rail */
.team-stage .ax { position: absolute; left: 8px; width: 190px; text-align: left; transform: translateY(-50%); opacity: 1; }
.team-stage .ax .n { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: .01em; color: var(--text-tertiary); display: block; line-height: 1.1; }
.team-stage .ax .s { font-size: 15px; color: var(--text-tertiary); display: block; line-height: 1.3; margin-top: 2px; }

.team-stage .conns { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.team-stage .conns path { fill: none; stroke: var(--border); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

.tnode { position: absolute; height: 78px; width: max-content; max-width: 270px;
  background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--acc);
  border-radius: var(--r-md); padding: 0 16px; display: flex; flex-direction: column; justify-content: center;
  transform: translateX(-50%); opacity: 1; }
.tnode .zone { font-family: var(--f-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.2; white-space: nowrap; }
.tnode .detail { font-size: 15px; color: var(--text-secondary); line-height: 1.3; margin-top: 4px; white-space: nowrap; }
/* leaf nodes (Junior craft tasks) carry the name only — the row is dense, and the
   scope is already named by the level rail. Keeps nine of them scannable. */
.tnode.leaf { height: 60px; }

/* Hover focus transitions, on the base so both enter and leave animate. No
   scroll-reveal — the tree is fully visible the moment it scrolls into view. */
.tnode { transition: opacity .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.team-stage .ax { transition: opacity .2s var(--ease); }
.team-stage .conns path { transition: opacity .2s var(--ease), stroke .2s var(--ease); }

/* Hover focus (pointer devices only): lift the hovered node, trace its line of
   command up to the lead and down to every task it owns, dim everything else, and
   surface what that role holds. Shows the delegation the org chart is really about. */
@media (hover: hover) {
  .team-stage.focus .tnode:not(.hot):not(.lit) { opacity: .24; }
  .team-stage.focus .ax { opacity: .24; }
  .team-stage.focus .conns path:not(.lit) { opacity: .18; }
  .team-stage.focus .conns path.lit { stroke: var(--depth); stroke-width: 2; }
  .team-stage.focus .tnode.hot { box-shadow: 0 8px 26px rgba(30,61,123,.18); transform: translateX(-50%) translateY(-3px); z-index: 3; cursor: default; }
  .team-stage.focus .tnode.lit { border-color: rgba(30,61,123,.35); }
}
.team-tip, .org-tip {
  position: fixed; z-index: 60; max-width: 264px; padding: 11px 14px;
  background: var(--depth); color: #fff; border-radius: 11px;
  font-family: var(--f-body); font-size: 14px; line-height: 1.45; letter-spacing: .002em;
  box-shadow: 0 10px 34px rgba(15,25,50,.24);
  opacity: 0; transform: translateY(5px); transition: opacity .16s var(--ease), transform .16s var(--ease);
  pointer-events: none;
}
.team-tip.show, .org-tip.show { opacity: 1; transform: translateY(0); }
.team-tip::after, .org-tip::after {
  content: ''; position: absolute; left: var(--tipx, 50%); transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--depth);
  top: 100%;
}
.team-tip.below::after, .org-tip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--depth); }
/* 420 rather than 300: the tip is fixed-positioned, so it does not scale with
   the stage and eats upward into the diagram as the viewport narrows. The wider
   box drops the tallest tip from 136px to 116px, which keeps the band under the
   Lead card free for the dispatch note at every scale — and gives the tip prose
   a 59-character measure instead of 41. */
.org-tip { max-width: 420px; }
/* the lead is the one tip that opens downward, into the band that carries the
   dispatch note. It keeps the narrow box so its right edge stops at the card's
   own right edge and the note beside it stays readable. */
.org-tip.below { max-width: 300px; }

.rituals { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-32); }
.rituals span {
  font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
}

/* ============================================================
   PROBLEM STATEMENT — tiles + baseline
   ============================================================ */
.fmodes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-16); margin-top: var(--s-32); }
.fmode { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-24); }
.fmode h3 { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: var(--s-8); }
.fmode p { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }
@media (max-width: 900px) { .fmodes { grid-template-columns: 1fr; } }

/* The working baseline is the section's one real metric, not a seventh failure
   tile (D2). No card, no rule: teal figures (rhyming with the section eyebrow)
   sit beside their reasoning as a two-column data statement, both columns
   vertically centred on each other (author call, over D6's top-align for this
   one component), clear of the tile grid on air. */
.baseline { margin-top: var(--s-64); display: grid; grid-template-columns: auto 1fr; gap: clamp(var(--s-32), 5vw, var(--s-64)); align-items: center; }
.baseline .figs { display: flex; align-items: center; gap: var(--s-16); }
.baseline .big { font-family: var(--f-display); font-weight: 900; font-size: clamp(56px, 6vw, 80px); letter-spacing: -0.03em; line-height: 0.92; color: var(--primary); white-space: nowrap; }
.baseline .arrow { font-family: var(--f-display); font-weight: 700; font-size: 26px; color: var(--text-secondary); }
.baseline p { font-size: 16px; max-width: none; }
@media (max-width: 820px) { .baseline { grid-template-columns: 1fr; gap: var(--s-24); align-items: start; } .baseline .big { font-size: clamp(44px, 12vw, 60px); } }

/* ============================================================
   The diagnosis bridge — sits right after the team diagram in band 3,
   on the same surface, turning the human specialist team into the case
   for specialist agents. The old diagnosis band, folded in here.
   ============================================================ */
.hinge {

  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.15; letter-spacing: -0.015em;
   max-width: 34ch; margin: var(--s-64) 0 var(--s-32);
}
.bridge { margin-bottom: 0; }
@media (max-width: 640px) { .hinge { max-width: 100%; } .hinge br { display: none; } }

/* ============================================================
   THE ORGANISATION — the actor org as one infographic.

   The band-3 tree drew a hierarchy. This one draws the two axes the
   hierarchy hides: authority runs down (lead, bus, eleven roles) and
   collaboration runs across (fifty-three arcs, one per boundary a
   charter declares against another role). Under all of it a dashed
   cut, with the judges past it and not one arc crossing — the
   founding decision, proved by the geometry rather than asserted.

   Geometry is generated (scripts kept in the case's scratch), not
   hand-placed, and ships as static SVG: the diagram reads with
   scripting off. JS adds only the fit-to-viewport scale and the
   focus interaction. Prose lives inside the stage, anchored to the
   part it explains.
   ============================================================ */
.org-block { margin-top: var(--s-48); }
/* the canvas carries 12px of its own air at the top and 36px at the foot, so
   the outer margins are set to land on 60px of clear space on both sides */
/* D4: a caption under a full-bleed diagram still belongs to the page reading
   column, so it fills .inner in two columns rather than sitting as a narrow strip
   with empty field beside it. Two columns keep the measure at ~58 characters. */
/* A grid, not CSS columns. Flowed columns split this caption mid-sentence across
   the gutter, which for six lines is a reading cost with nothing to show for it.
   One whole paragraph per cell instead, redistributed so both end level (D4). */
.org-block + .figure-caption { margin-top: var(--s-24); max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-64); }
.org-block + .figure-caption p { margin: 0; }
@media (max-width: 900px) { .org-block + .figure-caption { grid-template-columns: 1fr; row-gap: var(--s-16); } }
.org-foundation { width: 100vw; margin-left: calc(50% - 50vw); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
/* full size by default so the scene stands up with scripting off; the fit script
   overwrites both values once it can measure the viewport */
/* The canvas is the content box plus an equal 70px gutter on both sides
   (content runs 70 → 1558), so the diagram's optical centre lands on the
   page centre rather than 14px to the right of it. */
.org-sizer { position: relative; margin: 0 auto; width: 1628px; height: 1284px; }
.org-stage { position: absolute; top: 0; left: 0; width: 1628px; height: 1284px; transform-origin: top left; transform: scale(var(--os, 1)); }
.org-wires { position: absolute; top: 0; left: 0; overflow: visible; }

/* the dispatch tree — hairlines, the same weight as the band-3 connectors */
.org-wires .wire { fill: none; stroke: var(--border); stroke-width: 1.5; stroke-linecap: round; }
/* one arc per declared boundary. At rest they are a fabric; the weave
   itself is the message, and a single arc is only ever read on focus. */
.org-wires .arc { fill: none; stroke: rgba(30,61,123,.19); stroke-width: 1; transition: stroke .2s var(--ease), stroke-width .2s var(--ease), opacity .2s var(--ease); }
/* the cut carries the indigo of the judgment lane */
.org-wires .cut { fill: none; stroke: var(--indigo); stroke-width: 1.5; stroke-dasharray: 7 7; opacity: .5; }

.org-node { position: absolute; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); transition: box-shadow .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease), border-color .2s var(--ease); }
.org-node .nm { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.012em; color: var(--text-primary); }
.org-node.lead { border-left: 4px solid var(--depth); display: flex; flex-direction: column; justify-content: center; padding: 0 var(--s-20); gap: 2px; }
.org-node.lead .cls { font-family: var(--f-mono); font-size: 16px; color: var(--depth); }
.org-node.lead .nm { font-size: 27px; line-height: 1.05; }
.org-node.role { border-left: 4px solid var(--depth); display: flex; align-items: center; padding: 0 14px; }
.org-node.role .nm { font-size: 17px; line-height: 1.16; }
/* The tile carries one name, and it is the failure the thing catches rather than
   its filename: five words scan in the time this row gets, where five agent ids
   read as five synonyms for "reviewer". The filename is not lost, it moves to the
   tip. The card runs taller than its content, so the block is centred rather than
   settling against the top edge. */
.org-node.judge { border-left: 4px solid var(--indigo); padding: var(--s-16) var(--s-20); display: flex; flex-direction: column; justify-content: center; gap: var(--s-8); }
.org-node.judge .jhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-8); }
.org-node.judge .jn { font-family: var(--f-mono); font-size: 16px; line-height: 1.2; color: var(--indigo); }
/* the pinned model, in the same slot and the same mono as the executors' tier
   chip above: the row is where "judgment gets the strongest model" is provable
   rather than asserted, and where the one cheap tier explains itself */
.org-node.judge .jtier { font-family: var(--f-mono); font-size: 16px; line-height: 1.2; color: var(--text-secondary); white-space: nowrap; }
.org-node.judge .jw { font-size: 16px; line-height: 1.45; color: var(--text-secondary); }

/* prose that lives on the diagram: same body face, quieter, and always
   sitting against the element it describes */
/* margin-top:0 keeps the page's `p + p` prose rhythm out of the stage —
   these are placed labels, and an inherited 20px would silently move them
   off the coordinates the geometry was generated against. */
/* No bold lead sentence: these are captions on a diagram, and a bolded first
   line followed by a plain one is deck grammar, not editorial grammar. */
/* The stage is authored at 1628px and scaled down to fit, so every size here
   renders at roughly 88% of its value on a 1440 viewport: 17px lands at 15px.
   One size for the whole stage, annotations and tile content alike. Setting the
   annotations larger to reach the page's own 17px prose was tried and cut: at
   this measure they stopped reading as notes on a diagram and started competing
   with the section around them. Subordinate to the page, legible on their own. */
.org-say { position: absolute; margin-top: 0; font-size: 17px; line-height: 1.5; color: var(--text-secondary); }
/* A class token pairs with the prose on its right (A5) or with the pipeline
   names on its own line (A2). The mono line box is shorter than the body one,
   so a shared `top` would not give a shared baseline — the tokens carry the
   1.5px compensation in their coordinates. */
.org-cls { position: absolute; font-family: var(--f-mono); font-size: 17px; line-height: 1.2; color: var(--depth); }
.org-cls.judge-cls { color: var(--indigo); }
.org-pipe { position: absolute; font-family: var(--f-body); font-size: 17px; font-weight: 600; line-height: 1.2; color: var(--text-secondary); text-align: center; }

/* Focus: light one role's own boundaries and dim the rest. Direction is
   carried by colour AND spelled out in the tip, never by colour alone. */
.org-stage.focus .arc { opacity: .07; }
.org-stage.focus .arc.out { stroke: var(--depth); stroke-width: 1.75; opacity: 1; }
.org-stage.focus .arc.in { stroke: var(--primary); stroke-width: 1.75; opacity: 1; }
.org-stage.focus .org-node:not(.hot):not(.lit) { opacity: .26; }
.org-stage.focus .org-say, .org-stage.focus .org-pipe, .org-stage.focus .org-cls { opacity: .26; transition: opacity .2s var(--ease); }
.org-stage.focus .org-node.hot { box-shadow: 0 8px 26px rgba(30,61,123,.18); transform: translateY(-3px); z-index: 3; }
.org-stage.focus .org-node.lit { border-color: rgba(30,61,123,.4); }
.org-stage.focus .org-node.exec.lit { border-color: var(--border); border-left-color: var(--depth); }
.org-stage.focus .org-node.exec.a4.lit { border-left-color: var(--depth-line); }
.org-stage.focus.branch-on .branch-say { opacity: 1; }
.org-node:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* the opened branch — one role's executors, shown once so A3 and A4 are concrete
   rather than a claim in the margin. Its wires read lighter than the dispatch tree
   above, because this is a zoom into one node, not another level of the org. */
.org-wires .wire.branch { stroke: var(--border); }
.org-wires .wire.halo { stroke: var(--bg); stroke-width: 7; }
.org-wires .chev { fill: none; stroke: var(--border); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.org-node.exec { display: flex; flex-direction: column; padding: var(--s-16) var(--s-20); border-left: 4px solid var(--depth); }
.org-node.exec.a4 { border-left-color: var(--depth-line); }
.org-node.exec:hover { box-shadow: 0 8px 26px rgba(30,61,123,.18); transform: translateY(-3px); z-index: 3; }
.org-node.exec .ex-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-8); }
.org-node.exec .cls { font-family: var(--f-mono); font-size: 16px; line-height: 1.2; color: var(--depth); }
.org-node.exec.a4 .cls { color: var(--org-executor-ink); }
.org-node.exec .ex-tier { font-family: var(--f-mono); font-size: 16px; line-height: 1.2; color: var(--text-secondary); }
.org-node.exec .ex-nm { font-family: var(--f-mono); font-size: 16px; line-height: 1.26; color: var(--text-primary); margin-top: var(--s-8); }
.org-node.exec .ex-d { font-size: 16px; line-height: 1.4; color: var(--text-secondary); margin-top: var(--s-8); }

.org-tipnums { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.22); font-family: var(--f-mono); font-size: 13px; color: var(--on-dark-mono); }

/* ============================================================
   BANDS 7 + 8 — one handoff story at two scales.
   The QA-to-developer charter is the close-up. The session-to-disk drawing
   beneath it pulls back to show the same contract across the whole team.
   ============================================================ */
.zone-band > .inner { max-width: var(--page-max); padding-top: var(--s-80); padding-bottom: var(--s-96); }
.handoff-reading { width: min(1104px, 100%); margin-inline: auto; }
.zone-lede-wrap {
  width: min(1104px, 100%); margin: var(--s-48) auto var(--s-24);
}
.zone-lede {
  max-width: 76ch;
  font-size: var(--body-large-size); line-height: 1.7; color: var(--text-secondary);
}
.zone-composition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(160px, 15vw, 184px) minmax(0, 1fr);
  grid-template-areas:
    'qa transfer dev'
    'return return return';
  width: min(960px, 100%); margin-inline: auto; position: relative; align-items: start;
}
.zone-role {
  min-width: 0; min-height: 288px; position: relative; z-index: 2;
  display: flex; flex-direction: column; padding: var(--s-24);
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--depth); border-radius: var(--r-md);
}
.zone-role.qa { grid-area: qa; }
.zone-role.dev { grid-area: dev; }
.zone-role h2, .zone-role h3 { margin: 0; }
.zone-role .role-name {
  display: block; margin-bottom: var(--s-16);
  font-family: var(--f-display); font-size: 18px; font-weight: 800;
  line-height: 1; letter-spacing: -.012em; color: var(--depth);
}
.zone-role .role-claim {
  display: block; max-width: none; white-space: nowrap;
  font-family: var(--f-display); font-size: clamp(29px, 2.35vw, 34px);
  font-weight: 850; line-height: 1; letter-spacing: -.035em;
  color: var(--text-primary);
}
.zone-role-intro {
  max-width: 35ch; margin-top: var(--s-12);
  font-size: 16px; line-height: 1.55; color: var(--text-secondary);
}
.zone-actions {
  list-style: none; counter-reset: zone-step;
  display: grid; gap: var(--s-8); margin-top: auto; padding-top: var(--s-20);
}
.zone-actions li {
  counter-increment: zone-step;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-12);
  align-items: baseline; font-size: 16px; line-height: 1.45;
}
.zone-actions li::before {
  content: '0' counter(zone-step);
  font-family: var(--f-mono); font-size: 13px; color: var(--org-executor-ink);
}

/* The wire is the same 1.5px open-chevron construction used by the org's
   opened branch. The document covers its middle without turning into a node. */
.zone-transfer {
  grid-area: transfer; min-height: 288px; position: relative; z-index: 1;
  display: grid; place-items: center;
}
.zone-outbound {
  position: absolute; left: 0; top: calc(50% - 12px);
  width: 100%; height: 24px; overflow: visible;
}
.zone-wire, .zone-chev {
  fill: none; stroke: var(--depth-line); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.zone-chev { stroke: var(--depth); }
.zone-document {
  width: 152px; min-height: 128px; padding: var(--s-20) var(--s-16) var(--s-16);
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: var(--depth); color: var(--on-dark);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.zone-document::after {
  content: ''; position: absolute; top: 0; right: 0; width: 24px; height: 24px;
  background: rgba(255,255,255,.2); clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.zone-handoff-stop {
  display: block; margin-top: var(--s-8);
  font-family: var(--f-body); font-size: 14px; font-weight: 500;
  line-height: 1.35; color: var(--on-dark-mono);
}
.zone-handoff-packet {
  display: block; white-space: nowrap;
  font-family: var(--f-body); font-size: 17px; font-weight: 700;
  line-height: 1.2; letter-spacing: -.01em;
}

/* The changed build stays secondary: an org-style elbow returning to QA. */
.zone-return {
  grid-area: return; min-height: 96px; position: relative;
}
.zone-return-wire { position: absolute; inset: 0 0 auto; width: 100%; height: 60px; overflow: visible; }
.zone-return strong, .zone-return-origin { position: absolute; z-index: 1; width: fit-content; }
.zone-return strong {
  left: 50%; top: 68px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--f-display); font-size: 19px; line-height: 1.2;
  letter-spacing: -.015em; color: var(--text-primary);
}
.zone-return-origin {
  left: 50%; top: 35px; transform: translateX(-50%);
  background: var(--frost); padding: 0 var(--s-12);
  font-family: var(--f-mono); font-size: 13px; color: var(--depth); white-space: nowrap;
}
.zone-proof {
  display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  width: min(1104px, 100%); gap: var(--s-64); align-items: start;
  margin: var(--s-32) auto 0;
}
.zone-proof code {
  font-family: var(--f-mono); font-size: 13px; line-height: 1.6;
  color: var(--depth); overflow-wrap: anywhere;
}
.zone-proof p {
  margin: 0; font-size: var(--body-size); line-height: 1.6; color: var(--text-secondary);
}

@media (max-width: 900px) {
  .zone-band > .inner { padding-top: var(--s-64); padding-bottom: var(--s-64); }
  .zone-lede-wrap { margin: var(--s-48) 0 var(--s-32); }
  .zone-composition {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'qa' 'transfer' 'dev' 'return';
  }
  .zone-role { min-height: 0; padding: var(--s-24); }
  .zone-transfer { min-height: 240px; }
  .zone-outbound {
    top: 50%; left: 50%; width: 240px;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .zone-return { min-height: 138px; }
  .zone-return strong { top: 86px; max-width: calc(100% - 48px); white-space: normal; text-align: center; }
  .zone-proof { grid-template-columns: 1fr; gap: var(--s-24); margin-top: var(--s-32); }
}

@media (max-width: 640px) {
  .zone-role .role-claim { font-size: clamp(29px, 8vw, 32px); }
}

/* The team-scale section drawing. Sessions are air: no fill, no box, because they
   are the part that does not survive. The disk is ground: a solid slab that runs
   past them on both sides. Every stroke above the floor is VERTICAL, and the only
   horizontal in the picture is the disk's own top edge — so a route from one
   session to another has to descend, travel along the surface, and climb. That is
   the claim, drawn rather than asserted. The slab is --depth-deep, the same
   surface band 14's document graph uses, because both are the file layer.
   Replaces the `.lanes` swimlane, whose caption promised arrows it never drew. */
.seam-wrap { margin-top: var(--s-80); }
.seam-intro {
  display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  width: min(1104px, 100%); gap: var(--s-64); align-items: start;
  margin: 0 auto var(--s-48);
}
.seam-title {
  font-family: var(--f-display); font-size: 26px; font-weight: 800;
  line-height: 1.16; letter-spacing: -.018em; color: var(--text-primary);
}
.seam-lede { margin: 0; font-size: var(--body-size); line-height: 1.6; color: var(--text-secondary); }
/* `.col` is display:contents so each session, its arrows and its file stay one DOM
   unit — that pairing is what has to survive at phone width — while the desktop
   grid still places them on three explicit rows. */
/* Row 1 hangs off a common bottom edge so the session rules form one line; rows 2
   and 3 top-align (D6), so every path on the disk starts on the same baseline. */
.seam {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, 1.2fr);
  column-gap: var(--s-24); align-items: start;
  width: min(1628px, calc(100vw - 2 * var(--s-16)));
  margin-left: calc(50% - min(814px, 50vw - var(--s-16)));
}
.seam .col { display: contents; }
.seam .ss { grid-row: 1; align-self: end; }
.seam .ar { grid-row: 2; }
.seam .seg { grid-row: 3; position: relative; z-index: 1; }
/* An explicit grid-row with an auto column makes the placement cursor run past
   track 5 and generate five implicit ones, which collapses the 1fr tracks to
   min-content. Pin the column too. Scoped to the wide layout so the narrow
   media query has nothing to override. */
@media (min-width: 1355px) {
  .seam .col:nth-child(1) > * { grid-column: 1; }
  .seam .col:nth-child(2) > * { grid-column: 2; }
  .seam .col:nth-child(3) > * { grid-column: 3; }
  .seam .col:nth-child(4) > * { grid-column: 4; }
  .seam .col:nth-child(5) > * { grid-column: 5; }
}
/* The slab itself: one element under all five segments, bleeding past them. */
.seam::after {
  content: ''; grid-row: 3; grid-column: 1 / -1;
  /* The container is align-items:start, which would leave an empty pseudo-element
     at zero height — a 1px border and no slab. It has to stretch to the row. */
  align-self: stretch;
  margin: calc(-1 * var(--s-20)) calc(-1 * var(--s-24)) calc(-1 * var(--s-24));
  /* No border on the top edge: a light line there is invisible between a cream
     page and a near-black slab. The cream-to-navy edge IS the horizontal, and it
     is the only one in the drawing. Square at the top, rounded below — a floor
     has a surface, not a lid. */
  background: var(--depth-deep);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* No underline under the sessions. It would be a horizontal stroke above the
   floor, and the legend claims there are none — so there are none. The common
   bottom edge is implied by align-self:end and by where the strokes start. */
.seam .ss { padding-bottom: var(--s-16); }
.seam .ss .r { display: block; white-space: nowrap; font-family: var(--f-mono); font-size: 14px; font-weight: 600; color: var(--depth); }
.seam .ss .w { display: block; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin-top: 4px; }
.seam .ss.dead .r { color: var(--text-secondary); }

/* The strokes. Each terminates ON the disk surface, never short of it. */
/* The slab's top edge sits --s-20 above the segment row (its negative top margin),
   so the strokes stop --s-20 short of their own cell — landing exactly on the
   surface rather than 20px inside it. */
.seam .ar { position: relative; height: 98px; font-family: var(--f-mono); font-size: 14px; }
.seam .ar .v { position: absolute; top: 0; bottom: var(--s-20); width: 1px; background: var(--depth); }
.seam .ar .v.dash { background: none; border-left: 1px dashed var(--text-secondary); }
.seam .ar .v::after {
  content: ''; position: absolute; left: -3.5px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.seam .ar .v.dn::after { bottom: -1px; border-top: 6px solid var(--depth); }
.seam .ar .v.up::after { top: -1px; border-bottom: 6px solid var(--depth); }
.seam .ar .v.dash.dn::after { border-top-color: var(--text-secondary); }
.seam .ar .v.up { left: calc(50% - 40px); }
.seam .ar .v.dn { left: calc(50% + 40px); }
.seam .ar .v.solo { left: 50%; }

/* The first or only stroke belongs to the role name, not to its unequal grid
   track. `ch` is exact here because both the role and the arrow cell use the
   same monospace face and size. Paired write strokes keep the system position. */
.seam .col:nth-child(1) .v.solo { left: 7.5ch; }
.seam .col:nth-child(2) .v.up { left: 4.5ch; }
.seam .col:nth-child(3) .v.solo { left: 10.5ch; }
.seam .col:nth-child(4) .v.up { left: 4.5ch; }
.seam .col:nth-child(5) .v.solo { left: 4ch; }

@media (min-width: 1355px) {
  .seam .col:nth-child(4) .ss .w { white-space: nowrap; }
}

.seam .seg .p {
  display: block; white-space: nowrap; font-family: var(--f-mono); font-size: 13px; line-height: 1.5;
  letter-spacing: -.02em; color: var(--on-dark-code);
  /* JetBrains Mono ligates `>-` into an arrow, which silently rewrites a path. */
  font-variant-ligatures: none;
}
.seam .seg .wr { display: block; font-size: 13px; line-height: 1.5; color: var(--on-dark-dim); margin-top: 6px; }
.seam .seg.none .p { color: var(--on-dark-dim); }

.seam-legend {
  width: min(1104px, 100%); margin: var(--s-24) auto 0;
  font-size: 17px; line-height: 1.6; color: var(--text-secondary);
}
.seam-wrap .chain-cap { width: min(1104px, 100%); margin: var(--s-24) auto 0; }

@media (max-width: 1354px) {
  /* Each session keeps its own file directly beneath it, and the slab rotates
     onto `.seam` itself as one unbroken left rail — per-block borders would have
     split the floor into five pieces, which is the opposite of the claim. */
  .seam {
    display: block; width: min(1104px, 100%); margin-inline: auto;
    border-left: 3px solid var(--depth-deep); padding-left: var(--s-20);
  }
  .seam::after { display: none; }
  .seam .col { display: block; margin-top: var(--s-32); }
  .seam .col:first-child { margin-top: 0; }
  .seam .ss { padding-bottom: 0; }
  .seam .ar { display: none; }
  .seam .seg {
    margin-top: var(--s-12); padding: var(--s-16);
    background: var(--depth-deep); border-radius: var(--r-md);
  }
  .seam .seg .p { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 900px) {
  .seam-intro { grid-template-columns: 1fr; gap: var(--s-16); margin-bottom: var(--s-32); }
}

/* ============================================================
   BAND 9 — the distribution. The page's only statistical form and its only
   proof of scale. One mark per task, so D2 cannot be violated by construction:
   the encoding IS the count, and 33 stripes are countable. The axis runs 1..19
   unbroken, because the nine empty columns between 9 and 19 are data — they are
   how far the outlier actually sits. Positions 1 and 2 carry the argument: the
   rule allows two, and nothing has ever been written with fewer than three.
   ============================================================ */
.dist-wrap {
  margin-top: var(--s-48);
  width: min(1320px, calc(100vw - 2 * var(--s-24)));
  margin-left: calc(50% - min(660px, 50vw - var(--s-24)));
}
.dist-lede { font-size: var(--body-size); line-height: 1.6; color: var(--text-secondary); max-width: 76ch; margin-bottom: var(--s-32); }
.dist { display: grid; grid-template-columns: repeat(19, 1fr); column-gap: 8px; align-items: end; }
/* The axis label comes FIRST in the DOM so the rotated phone layout places each
   label and its marks on one grid row (sparse packing sends a col-1 item to the
   next row if a col-2 item was placed before it). column-reverse restores the
   visual order here: marks on top, number underneath. */
.dist .c { display: flex; flex-direction: column-reverse; }
.dist .st { display: flex; flex-direction: column-reverse; gap: 2px; }
.dist .st i { display: block; height: 7px; background: var(--depth); border-radius: 2px; }
.dist .c.out .st i { background: var(--signal); }
.dist .ax {
  margin-top: var(--s-12); padding-top: var(--s-8); border-top: 1px solid var(--border);
  font-family: var(--f-mono); font-size: 13px; color: var(--text-secondary); text-align: center;
}
/* Notes hang under the axis at the positions they describe. align-self:start
   overrides the container's end-alignment, which would otherwise hang a one-line
   note off the bottom of a three-line one. */
.dist .note {
  grid-row: 2; align-self: start; margin-top: var(--s-12);
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.dist .note.floor { grid-column: 1 / 6; }
.dist .note.out { grid-column: 13 / -1; text-align: right; color: var(--signal-text); }
.dist .note .mn { font-family: var(--f-mono); font-size: 13px; }

/* The pair: one criterion, two commits, byte-identical sentence. Only the x and
   the appended observation differ, so both lines start on the same pixel and the
   deltas are the only thing coloured. Not band 11's chain — that traces one claim
   across three files; this is one line carrying its own prediction and outcome. */
.pair { margin-top: var(--s-64); }
.pair .row { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-24); align-items: baseline; }
.pair .row + .row { margin-top: var(--s-12); }
.pair .when { font-family: var(--f-mono); font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.pair .ln {
  font-family: var(--f-mono); font-size: 13.5px; line-height: 1.6; color: var(--text-primary);
  font-variant-ligatures: none;
}
.pair .ln b { color: var(--primary); font-weight: 600; }
.pair .src { font-family: var(--f-mono); font-size: 13px; color: var(--text-secondary); margin-top: var(--s-16); }

@media (max-width: 900px) {
  /* Nineteen columns cannot survive a phone, so the chart turns on its side:
     one row per count, marks running left, which keeps every value countable. */
  .dist { grid-template-columns: auto 1fr; column-gap: var(--s-16); row-gap: 6px; align-items: center; }
  .dist .c { display: contents; }
  .dist .ax { grid-column: 1; margin-top: 0; padding-top: 0; border-top: 0; text-align: right; }
  .dist .st { grid-column: 2; flex-direction: row; }
  .dist .st i { height: 14px; width: 7px; }
  /* grid-row must be released too, or both notes stack into row 2 — the row that
     belongs to the count of two — and print on top of each other. */
  .dist .note, .dist .note.floor, .dist .note.out {
    grid-row: auto; grid-column: 1 / -1; text-align: left; margin-top: var(--s-16);
  }
  .pair .row { grid-template-columns: 1fr; row-gap: 2px; }
}

/* ============================================================
   BAND 10 — the disarm stack. Every other band on this page shows a machine:
   a hook, a gate, a judge. This rule has none, so the section is deliberately
   the page's only one with NO container and NO drawn line — type alone.
   The nine rows share one grid (`.rw { display: contents }`) so the phrase
   every task repeats lands on a common left edge; the bracketed rows hang
   their `[` into the gutter (text-indent: -1ch) so the R still aligns.
   NOT a boundary drawing: band 7 owns that, and this is a refrain, not a cut.
   ============================================================ */
/* Each of the three zones opens with the same head row: what it is on the left,
   where it lives on the right, spanning the full column so no zone strands a
   narrow block against an empty field (D4/j). */
.brief-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-32);
}
/* nowrap belongs to the addresses only — a wrapped path is unreadable, a wrapped
   lede is normal. */
.brief-src .p,
.brief-anti .p {
  font-family: var(--f-mono); font-size: 13px; line-height: 1.6;
  color: var(--text-secondary); white-space: nowrap;
}
.brief-lede { font-family: var(--f-mono); font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.brief-src { margin-top: var(--s-48); }
.brief-src .fld {
  font-family: var(--f-mono); font-size: 13.5px; font-weight: 600; color: var(--depth);
}
.brief-src .q {
  font-family: var(--f-mono); font-size: 15px; line-height: 1.7;
  color: var(--depth); max-width: 84ch; margin-top: var(--s-12); text-indent: -1ch;
}

/* The lede shares its row with the source glob, so all three zones carry a path
   and no zone leaves an empty field beside a narrow column (D4/j). */
.brief-lede-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-32); margin-top: var(--s-64);
}
.brief-lede { max-width: 76ch; white-space: normal; }
.brief-src + .brief-lede-row { margin-top: var(--s-64); }
.brief-anti + .figure-caption { margin-top: var(--s-48); }
.brief-lede-a {
  font-family: var(--f-mono); font-size: 13px; color: var(--text-secondary); white-space: nowrap;
}
.brief-stack {
  margin-top: var(--s-20);
  display: grid; grid-template-columns: auto auto 1fr auto;
  column-gap: var(--s-16); row-gap: 13px; align-items: baseline;
}
.brief-stack .rw { display: contents; }
.brief-stack .n { font-family: var(--f-mono); font-size: 13px; color: var(--text-secondary); }
.brief-stack .l {
  font-family: var(--f-mono); font-size: 13.5px; font-weight: 600; color: var(--depth);
  white-space: nowrap;
}
.brief-stack .rw.brk .l { text-indent: -1ch; }
.brief-stack .r { font-family: var(--f-mono); font-size: 13.5px; line-height: 1.6; color: var(--text-primary); }
.brief-stack .a {
  font-family: var(--f-mono); font-size: 13px; color: var(--text-secondary);
  white-space: nowrap; text-align: right;
}

/* The failure the ten sentences exist to stop. Amber is the page's alarm, and
   --signal-text is its only AA-safe weight on --bg. Separated by space and
   size, never by a rule: band 11's gate line already owns hairline-over-text. */
.brief-anti { margin-top: var(--s-64); }
.brief-anti .nm {
  font-family: var(--f-mono); font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--signal-text);
}
/* Mono is the section's rule for quoted material: everything set in it came off
   disk verbatim, everything in the body face is the author's. */
.brief-anti .d {
  font-family: var(--f-mono); font-size: 13.5px; line-height: 1.7;
  color: var(--text-primary); max-width: 84ch; margin-top: var(--s-12);
}

@media (max-width: 900px) {
  /* The head rows carry a nowrap path that cannot share a line at phone width,
     so the label and its address stack instead of colliding. */
  .brief-head, .brief-lede-row { flex-direction: column; align-items: flex-start; gap: var(--s-8); }
  .brief-stack { display: block; }
  .brief-stack .rw { display: block; padding: var(--s-12) 0; }
  .brief-stack .n { margin-right: 1ch; }
  /* The two halves become one flowing sentence here, so they need the word space
     the grid gap was supplying at full width. */
  .brief-stack .l, .brief-stack .rw.brk .l { white-space: normal; text-indent: 0; margin-right: .6ch; }
  .brief-stack .a { display: block; text-align: left; margin-top: 3px; }
  .brief-src .q { text-indent: 0; }
}

/* ============================================================
   BAND 11 — the evidence chain. One real acceptance criterion traced through
   the three files it touches, with the address it cites (assistant-charter.md:45)
   pinned to the same horizontal in all three, so the thread is geometric rather
   than asserted. The rework bracket above the row is the round that failed.
   Deliberately NOT a terminal: band 13 already owns the refusal-output form.
   ============================================================ */
/* The chain runs wider than the reading column (A4): three monospace extracts need
   the measure, and the thread reads better with room around it. Centred on .inner
   rather than full-bleed, so the page keeps its margins. */
.chain-wrap {
  margin-top: var(--s-48);
  width: min(1320px, calc(100vw - 2 * var(--s-24)));
  margin-left: calc(50% - min(660px, 50vw - var(--s-24)));
}

/* Rework bracket — spans the centre of station 1 to the centre of station 2.
   Three equal columns make station 2's centre exactly 50%; station 1's centre is
   16.667% less half a gap. Dashed and signal-coloured so it reads as a refusal,
   not as one of the org diagram's boundary arcs. */
.rework { position: relative; height: 46px; }
.rework .bracket {
  position: absolute; left: calc(16.667% - 8px); right: 50%; top: 0; bottom: 0;
  border: 1px dashed var(--signal); border-bottom: 0; border-radius: 10px 10px 0 0;
}
/* Arrowhead at the left end, pointing back down into the claim. */
.rework .bracket::after {
  content: ''; position: absolute; left: -4.5px; bottom: -1px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid var(--signal);
}
.rework .lbl {
  position: absolute; left: calc(33.333% - 4px); top: 50%; transform: translate(-50%, -50%);
  background: var(--sage); padding: 0 var(--s-12); white-space: nowrap;
  font-family: var(--f-mono); font-size: 13px; color: var(--signal-text);
}

.chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
.stn {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-20);
}
/* Connector between stations. Hung off the address row itself rather than off the
   station box, so it centres on the address text by construction instead of by a
   hand-tuned offset — the whole point of the section is that the thread lines up. */
.stn + .stn .addr::before {
  content: ''; position: absolute;
  left: calc(-1 * (var(--s-20) + var(--s-24) + 1px)); width: var(--s-24);
  top: 50%; border-top: 1px solid var(--signal);
}
.stn .role {
  font-family: var(--f-display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary);
}
.stn .when { font-size: 15px; line-height: 1.5; color: var(--text-secondary); margin-top: var(--s-4); }
/* Paths break at the <wbr> after each directory, never mid-token: break-all split
   words like "…-in-staffin / g.md", which reads as a rendering fault. */
.stn .path {
  font-family: var(--f-mono); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  margin-top: var(--s-12); padding-top: var(--s-12); border-top: 1px solid var(--border);
  overflow-wrap: break-word;
}
/* Extracts flow rather than preserving source line breaks: hand-wrapped monospace
   plus the browser's own wrap produced a ragged double-break at this measure. */
.stn .ex {
  font-family: var(--f-mono); font-size: 13.5px; line-height: 1.7;
  margin-top: var(--s-12);
}
.stn .ex .ln {
  color: var(--text-tertiary); margin-right: var(--s-8);
  border-right: 1px solid var(--border); padding-right: var(--s-8);
}
.stn .ex .tick { color: var(--primary); font-weight: 600; }
.stn .ex .pass { color: var(--primary); font-weight: 600; }
.stn .ex .ln { color: var(--text-tertiary); }
.stn .ex .tag { color: var(--signal-text); }
/* The thread. Pushed to the foot of every station by margin-top:auto, which is
   what puts the three addresses on one horizontal regardless of extract length. */
.stn .addr {
  position: relative; margin-top: auto;
  font-family: var(--f-mono); font-size: 13.5px; font-weight: 600;
  color: var(--signal-text); height: 46px; display: flex; align-items: center;
}

/* Annotation hung under station 2, tied to it by a hairline. */
.chain-note { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
.chain-note .n2 { grid-column: 2; position: relative; padding-top: var(--s-32); }
/* --border is near-invisible on sage; the leader needs a tint that actually reads. */
.chain-note .n2::before {
  content: ''; position: absolute; left: 50%; top: 0; height: var(--s-24);
  border-left: 1px solid var(--text-tertiary);
}
.chain-note p { font-size: var(--body-size); line-height: 1.6; color: var(--text-secondary); }

/* The hook, stated rather than screenshotted (D1 — band 13 already shows the
   refusal-output form). Held to a monospace measure: at the chain's full width a
   single line ran past 130 characters. */
.gate-rule {
  margin-top: var(--s-32); padding-top: var(--s-20); border-top: 1px solid var(--text-tertiary);
  font-family: var(--f-mono); font-size: 13.5px; line-height: 1.75;
  color: var(--text-primary);
}
/* The rule divides the whole chain, so the line runs full width while the text
   inside it keeps a monospace measure. */
.gate-rule .f { display: block; color: var(--signal-text); font-weight: 600; margin-bottom: var(--s-4); }
.gate-rule .txt { display: block; max-width: 46em; }
.gate-rule .h { color: var(--signal-text); font-weight: 600; }

/* The caption belongs to the chain, so it takes the chain's width — and at that
   width it needs two cells to stay inside a readable measure (D4). A GRID, not
   CSS columns: flowed columns split it mid-sentence across the gutter, which the
   author rejected on band 3. One whole thought per cell. */
.chain-cap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-64); margin-top: var(--s-24); }
.chain-cap .figure-caption { max-width: none; margin-top: 0; }
@media (max-width: 900px) { .chain-cap { grid-template-columns: 1fr; gap: var(--s-16); } }

@media (max-width: 900px) {
  .chain, .chain-note { grid-template-columns: 1fr; }
  .rework { display: none; }
  /* Stacked: the thread runs down the gaps instead of across, so it hangs off the
     station box again — the address row is no longer the thing being aligned. */
  .stn + .stn .addr::before { display: none; }
  .stn + .stn::before {
    content: ''; position: absolute; left: 50%; top: calc(-1 * var(--s-24) - 1px);
    height: var(--s-24); border-left: 1px solid var(--signal);
  }
  .stn .addr { margin-top: var(--s-16); height: auto; }
  .chain-note .n2 { grid-column: 1; padding-top: var(--s-24); }
  .chain-note .n2::before { display: none; }
}

/* ============================================================
   BAND 13 — the rubric, the page's widest artifact (A4)
   ============================================================ */
.rubric-wrap { max-width: var(--page-max); margin: var(--s-48) auto 0; padding: 0 var(--gutter); }
.rubric { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-12); }
.dim { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-20); }
.dim .n { font-family: var(--f-mono); font-size: 13px; color: var(--signal-text); }
.dim h3 { font-family: var(--f-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; margin: var(--s-4) 0 var(--s-12); }
.dim ul { list-style: none; }
.dim li { font-size: 15px; line-height: 1.5; color: var(--text-secondary); padding-left: var(--s-16); position: relative; margin-top: var(--s-8); }
.dim li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--indigo); }
@media (max-width: 1000px) { .rubric { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rubric { grid-template-columns: 1fr; } .rubric-wrap { padding: 0 var(--s-24); } }

.gate {
  margin-top: var(--s-32); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--text-primary);
}
.gate .bar { font-family: var(--f-mono); font-size: 13px; color: var(--on-dark-soft); padding: var(--s-12) var(--s-20); border-bottom: 1px solid rgba(255,255,255,.14); }
.gate pre {
  font-family: var(--f-mono); font-size: 13.5px; line-height: 1.7; color: var(--on-dark);
  padding: var(--s-20); overflow-x: auto; white-space: pre;
}
.gate .blocked { color: var(--on-dark-alert); font-weight: 600; }

/* ============================================================
   BAND 14 — options fan (gallery of equals, D5)
   ============================================================ */
.fan { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-12); margin-top: var(--s-48); }
.opt { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-16); background: var(--bg); }
.opt .t { font-family: var(--f-display); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; margin-bottom: var(--s-8); }
.opt .d { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.opt .src { font-family: var(--f-mono); font-size: 13px; color: var(--signal-text); margin-top: var(--s-12); display: block; }
.opt.picked { border: 2px solid var(--primary); }
.opt .mark { font-family: var(--f-display); font-weight: 800; font-size: var(--label-size); letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); display: block; margin-bottom: var(--s-8); }
@media (max-width: 1100px) { .fan { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .fan { grid-template-columns: 1fr; } }

/* ============================================================
   BAND 15 — tool boundaries
   ============================================================ */
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-12); margin-top: var(--s-48); }
.tool { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-20); }
.tool h3 { font-family: var(--f-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; margin-bottom: var(--s-8); }
.tool .owns { font-size: 15px; line-height: 1.55; }
.tool .not { font-size: 15px; line-height: 1.55; color: var(--text-secondary); margin-top: var(--s-12); padding-top: var(--s-12); border-top: 1px solid var(--border); }
.tool .not b { font-family: var(--f-display); font-size: var(--label-size); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-text); display: block; margin-bottom: 4px; }
@media (max-width: 1000px) { .tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .tools { grid-template-columns: 1fr; } }

/* ============================================================
   BAND 16 — the two ladders
   ============================================================ */
.ladders { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-32); margin-top: var(--s-48); }
.lad { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
.lad .cap { font-family: var(--f-display); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; padding: var(--s-16) var(--s-20); background: var(--surface); color: var(--depth); }
.lad .step2 { display: grid; grid-template-columns: 128px 1fr; gap: var(--s-16); padding: var(--s-16) var(--s-20); border-top: 1px solid var(--border); }
.lad .step2 .name { font-family: var(--f-mono); font-size: 14px; color: var(--depth); }
.lad .step2 .txt { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.lad.auth .step2 { grid-template-columns: 28px 1fr; }
.lad.auth .rank { font-family: var(--f-display); font-weight: 800; font-size: 14px; color: var(--signal-text); }
.lad.auth .txt { color: var(--text-primary); font-size: 15.5px; }
@media (max-width: 900px) { .ladders { grid-template-columns: 1fr; } }

/* ============================================================
   BAND 17 — the document graph
   ============================================================ */
.graph-wrap { max-width: var(--page-max); margin: var(--s-48) auto 0; padding: 0 var(--gutter); }
.graph { border-radius: var(--r-lg); overflow: hidden; background: var(--depth-deep); }
.graph svg { display: block; width: 100%; height: auto; }
.gstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-16); margin-top: var(--s-24); }
.gstats .c { border-top: 2px solid var(--text-primary); padding-top: var(--s-12); }
.gstats .n { font-family: var(--f-display); font-weight: 900; font-size: 30px; letter-spacing: -0.02em; line-height: 1; }
.gstats .k { font-size: 14px; color: var(--text-secondary); margin-top: 6px; line-height: 1.45; }
@media (max-width: 700px) { .gstats { grid-template-columns: repeat(2, 1fr); } .graph-wrap { padding: 0 var(--s-24); } }

/* ============================================================
   BANDS 20-21 — phase artifact sets
   ============================================================ */
.waves { display: flex; flex-direction: column; gap: var(--s-8); }
.wave { display: grid; grid-template-columns: 104px 1fr; gap: var(--s-16); align-items: start; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-16); }
.wave .w { font-family: var(--f-mono); font-size: 13px; color: var(--signal-text); padding-top: 2px; }
.wave .what { font-size: 15.5px; line-height: 1.55; }
.wave.gate { border-color: var(--signal); background: rgba(212,148,28,.09); }
.wave .files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-8); }
.wave .files code { font-family: var(--f-mono); font-size: 13px; background: var(--surface); border: 1px solid var(--border); padding: 3px 8px; border-radius: 5px; }
@media (max-width: 640px) { .wave { grid-template-columns: 1fr; gap: var(--s-8); } }

/* ============================================================
   BAND 21 — the reversal
   ============================================================ */
.reversal { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-12); margin-top: var(--s-48); }
.rev { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-20); }
.rev .n { font-family: var(--f-display); font-weight: 800; font-size: var(--label-size); letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); }
.rev h3 { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin: var(--s-4) 0 var(--s-8); }
.rev p { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.rev.kill { border-color: var(--depth); border-width: 2px; }
.rev.kill .n { color: var(--depth); }
@media (max-width: 1000px) { .reversal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .reversal { grid-template-columns: 1fr; } }

.sweep { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-24); }
.sweep code { font-family: var(--f-mono); font-size: 13px; background: var(--bg); border: 1px solid var(--border); padding: 4px 9px; border-radius: 5px; }

/* ============================================================
   BAND 22 — regression test, cobalt peak
   ============================================================ */
.peak { background: var(--depth); color: var(--on-dark); }
.peak h2.h-band { color: var(--card); }
.peak .eyebrow { color: var(--signal-on-dark); }
.peak p { color: var(--on-dark); }
.term { margin-top: var(--s-48); border-radius: var(--r-lg); overflow: hidden; background: var(--depth-term); border: 1px solid rgba(255,255,255,.14); }
.term .bar { font-family: var(--f-mono); font-size: 13px; color: var(--on-dark-soft); padding: var(--s-12) var(--s-20); border-bottom: 1px solid rgba(255,255,255,.14); }
.term pre { font-family: var(--f-mono); font-size: 13.5px; line-height: 1.75; color: var(--on-dark-code); padding: var(--s-20); overflow-x: auto; white-space: pre; }
.term .ok { color: var(--on-dark-ok); }
.term .miss { color: var(--on-dark-warn); font-weight: 600; }
.term .dim2 { color: var(--on-dark-dim); }

/* ============================================================
   BAND 23 — trust to gate
   ============================================================ */
.t2g { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-16); margin-top: var(--s-48); }
.t2g .c { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-24); }
.t2g .c .lab { font-family: var(--f-display); font-weight: 800; font-size: var(--label-size); letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--s-8); }
.t2g .c p { font-size: 15.5px; line-height: 1.6; }
.t2g .c.gate { background: var(--depth); color: var(--on-dark); }
.t2g .c.gate .lab { color: var(--signal-on-dark); }
@media (max-width: 900px) { .t2g { grid-template-columns: 1fr; } }

/* ============================================================
   BAND 24 — proof
   ============================================================ */
.proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-16); margin-top: var(--s-48); }
.pcard { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-24); display: block; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(28,27,24,.4); }
.pcard .k { font-family: var(--f-body); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
.pcard h3 { font-family: var(--f-display); font-weight: 800; font-size: 23px; letter-spacing: -0.015em; margin: var(--s-8) 0 var(--s-12); }
.pcard p { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }
.pcard .go { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--depth); margin-top: var(--s-16); display: inline-block; }
@media (max-width: 800px) { .proof { grid-template-columns: 1fr; } }

/* ============================================================
   BAND 25 — takeaway + next case
   ============================================================ */
.takeaway .body { max-width: 68ch; }
.takeaway .body p { font-size: var(--body-large-size); line-height: 1.75; }

/* ============================================================
   FOOTER
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .band > .inner, .cover .inner { padding-left: var(--s-32); padding-right: var(--s-32); }
  .rubric-wrap, .graph-wrap { padding-left: var(--s-32); padding-right: var(--s-32); }
}
@media (max-width: 640px) {
  .band > .inner, .cover .inner { padding-left: var(--s-24); padding-right: var(--s-24); }
  .cover .inner { padding-top: var(--s-64); padding-bottom: var(--s-64); }
  .cover h1 { --cover-title-size: clamp(34px, 8.5vw, 42px); }
  .cover h1 br { display: none; }
  h2.h-band br { display: none; }
}

.hinge { font-style: normal; text-wrap: wrap; }