/*
 * site.css — Intent-as-Source adoption site design system ("Matter of Record").
 *
 * DESIGN SPEC LIVES ELSEWHERE. The full, authoritative design specification
 * (role-token tables with computed WCAG ratios, type roles, the primitive
 * usage table, the docket-term inventory, motion tokens, poster art direction,
 * font provenance and subset commands, and the pre-paint theme snippet) is a
 * PRIVATE document at prd/req/site/DESIGN.md in the internal prd repository,
 * per the author ruling that design specs stay private. This stylesheet is the
 * implementation; that file is the record of intent behind it. Ratified state:
 * PROVISIONAL until G3a.
 *
 * Gate contract (scripts/check-site.mjs paths module): no CSS `content` beyond
 * none / '' / ""; no attr(); no counters; relative url() only; no banned
 * vocabulary. This file is authored to those rules and verified by the gate.
 *
 * Theme machinery: role tokens are assigned literal values INSIDE theme scopes
 * only (dark default at :root, light at prefers-color-scheme, explicit
 * [data-theme] override winning) — never as var() indirection at bare :root,
 * which is the reveal-time theme bug this project has hit before.
 */

/* ========================================================================
 * 1. Fonts — self-hosted OFL subsets (see prd/req/site/DESIGN.md for
 *    provenance + the exact pyftsubset commands and recorded unicode-range).
 *    Besley = display, Source Serif 4 = body/argued, Courier Prime = measured.
 * ==================================================================== */

@font-face {
  font-family: "Besley";
  src: url("../fonts/besley-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========================================================================
 * 2. Non-color tokens (theme-independent — literals, safe at :root).
 *    Type roles: mono is reserved for MEASURED artifacts (ground rule 6);
 *    the display stack lists Source Serif 4 as a per-glyph fallback so № and
 *    → (which Besley lacks) still resolve inside a display heading.
 * ==================================================================== */

:root {
  /* Font stacks */
  --font-display: "Besley", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "Courier Prime", "Courier New", Courier, monospace;

  /* Fluid type scale (modular ~1.22; clamps hold CLS < 0.1) */
  --text-caption: clamp(0.79rem, 0.76rem + 0.14vw, 0.86rem);
  --text-small:   clamp(0.9rem, 0.87rem + 0.16vw, 0.97rem);
  --text-body:    clamp(1.06rem, 1.01rem + 0.25vw, 1.19rem);
  --text-lead:    clamp(1.2rem, 1.12rem + 0.4vw, 1.42rem);
  --text-h3:      clamp(1.3rem, 1.19rem + 0.55vw, 1.62rem);
  --text-h2:      clamp(1.7rem, 1.45rem + 1.25vw, 2.55rem);
  --text-display: clamp(2.6rem, 1.9rem + 3.6vw, 5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.28;
  --leading-body: 1.62;
  --measure: 66ch;
  --tracking-stamp: 0.14em;
  --tracking-label: 0.06em;

  /* Spacing scale (rem, ~1.5 ratio from 0.25rem) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  /* Structure */
  --wrap-max: 74rem;
  --wrap-text: 42rem;
  --wrap-pad: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
  --radius-sm: 3px;
  --radius-md: 5px;
  --hairline: 1px;
  --rule-weight: 2px;
  --margin-rule-weight: 4px;

  /* Motion tokens (draw + stamp are the two motion verbs). Reduced-motion
     floor at section 9 pins draws to their finished state. */
  --motion-draw-dur: 720ms;
  --motion-stamp-dur: 260ms;
  --motion-fade-dur: 420ms;
  --ease-draw: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-stamp: cubic-bezier(0.34, 1.32, 0.5, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  /* Draw progress: 0 = un-drawn, 1 = fully drawn. Default 1 so JS-off and
     reduced-motion always show the finished artifact. Animators tween it. */
  --draw-progress: 1;

  --z-poster: 0;
  --z-content: 1;
  --z-header: 50;
}

/* ========================================================================
 * 3. Theme role tokens — assigned as literals inside theme scopes only.
 *    Order: dark default -> OS-light (no explicit choice) -> explicit choice.
 *    Both themes are complete. Computed WCAG ratios: see DESIGN.md.
 * ==================================================================== */

/* Dark default — "The Microfiche" */
:root {
  color-scheme: dark;
  --ground: #121417;
  --surface: #1B1E23;
  --sunken: #0C0E11;
  --ink: #E8E9E2;
  --ink-muted: #ABACA2;
  --ink-faint: #8A8B81;
  --rule-color: #333F4B;
  --adjud: #F0736A;

  --amber-ink: #F0B75C;   /* human judgment */
  --blue-ink: #84B6F4;    /* automated / AI */
  --green-ink: #7FCB87;   /* both, split by the judgment gate */
  --amber-fill: #3A2E17;
  --blue-fill: #182838;
  --green-fill: #17301B;
  --amber-line: #C77700;
  --blue-line: #4E90DE;
  --green-line: #3E9E48;

  --link: #84B6F4;
  --focus: #84B6F4;
  --selection-bg: #2C3A4B;
  --shadow-color: 0deg 0% 0%;
  --shadow-strength: 0.5;
  --poster-a: #171B21;
  --poster-b: #0E1013;
  --poster-glow: rgba(132, 182, 244, 0.10);
}

/* OS asks for light, user has not chosen — "The Record" */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --ground: #F3F4EF;
    --surface: #FBFBF6;
    --sunken: #E7E8E0;
    --ink: #1C1B17;
    --ink-muted: #56544B;
    --ink-faint: #676558;
    --rule-color: #B8C6D6;
    --adjud: #A31D2B;

    --amber-ink: #8A5A00;
    --blue-ink: #1E5FB0;
    --green-ink: #256C2E;
    --amber-fill: #F6E7C8;
    --blue-fill: #D7E6FB;
    --green-fill: #D9EFDC;
    --amber-line: #C77700;
    --blue-line: #2268C4;
    --green-line: #2E7D32;

    --link: #1E5FB0;
    --focus: #1E5FB0;
    --selection-bg: #DCE6D9;
    --shadow-color: 30deg 12% 45%;
    --shadow-strength: 0.16;
    --poster-a: #EDEEE7;
    --poster-b: #F6F6F1;
    --poster-glow: rgba(163, 29, 43, 0.06);
  }
}

/* Explicit user choice always wins (set by the pre-paint snippet in P2). */
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #F3F4EF;
  --surface: #FBFBF6;
  --sunken: #E7E8E0;
  --ink: #1C1B17;
  --ink-muted: #56544B;
  --ink-faint: #676558;
  --rule-color: #B8C6D6;
  --adjud: #A31D2B;

  --amber-ink: #8A5A00;
  --blue-ink: #1E5FB0;
  --green-ink: #256C2E;
  --amber-fill: #F6E7C8;
  --blue-fill: #D7E6FB;
  --green-fill: #D9EFDC;
  --amber-line: #C77700;
  --blue-line: #2268C4;
  --green-line: #2E7D32;

  --link: #1E5FB0;
  --focus: #1E5FB0;
  --selection-bg: #DCE6D9;
  --shadow-color: 30deg 12% 45%;
  --shadow-strength: 0.16;
  --poster-a: #EDEEE7;
  --poster-b: #F6F6F1;
  --poster-glow: rgba(163, 29, 43, 0.06);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #121417;
  --surface: #1B1E23;
  --sunken: #0C0E11;
  --ink: #E8E9E2;
  --ink-muted: #ABACA2;
  --ink-faint: #8A8B81;
  --rule-color: #333F4B;
  --adjud: #F0736A;

  --amber-ink: #F0B75C;
  --blue-ink: #84B6F4;
  --green-ink: #7FCB87;
  --amber-fill: #3A2E17;
  --blue-fill: #182838;
  --green-fill: #17301B;
  --amber-line: #C77700;
  --blue-line: #4E90DE;
  --green-line: #3E9E48;

  --link: #84B6F4;
  --focus: #84B6F4;
  --selection-bg: #2C3A4B;
  --shadow-color: 0deg 0% 0%;
  --shadow-strength: 0.5;
  --poster-a: #171B21;
  --poster-b: #0E1013;
  --poster-glow: rgba(132, 182, 244, 0.10);
}

/* ========================================================================
 * 4. Base — reset, document, selection, focus.
 * ==================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 2;
}

body {
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
svg { height: auto; }

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

:where(a, button, [tabindex], summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ========================================================================
 * 5. Typography — display = Besley, argued = Source Serif 4, measured = mono.
 * ==================================================================== */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--text-display); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }

p, li { max-width: var(--measure); }
p + p { margin-top: var(--space-sm); }

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--ink);
}

small, .caption {
  font-size: var(--text-caption);
  color: var(--ink-faint);
  line-height: var(--leading-snug);
}

strong, b { font-weight: 600; }
em, i { font-style: italic; }

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--link) 55%, transparent);
  transition: text-decoration-color var(--motion-fade-dur) var(--ease-standard);
}
a:hover { text-decoration-color: var(--link); }

/* Measured artifacts — the mono voice, tabular figures for register rows. */
code, pre, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
pre { overflow-x: auto; }

blockquote {
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  padding-left: var(--space-md);
  border-left: var(--rule-weight) solid var(--rule-color);
}

hr {
  border: 0;
  border-top: var(--hairline) solid var(--rule-color);
  margin-block: var(--space-lg);
}

/* ========================================================================
 * 6. Layout helpers.
 * ==================================================================== */

.wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--wrap-pad); }
.wrap--text { max-width: calc(var(--wrap-text) + 2 * var(--wrap-pad)); }
.stack > * + * { margin-top: var(--space-md); }
.section { padding-block: var(--space-2xl); position: relative; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip / ramp link — visible on focus (dead-anchor gate: target id must exist). */
.skip-link {
  position: absolute;
  left: var(--space-sm); top: var(--space-sm);
  z-index: var(--z-header);
  transform: translateY(-160%);
  background-color: var(--surface);
  color: var(--ink);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: transform var(--motion-fade-dur) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); }

/* JS-only decorations stay out of the JS-off render entirely. Content is
   never hidden here — hidden initial states live only in the matchMedia
   context (ground rule 4); this hides purely decorative, JS-driven layers. */
html:not(.has-js) .js-only { display: none !important; }

/* ========================================================================
 * 7. Register structure — ruling lines and the adjudicative margin rule.
 *    "ruling" is the feint ledger hairline; the red margin rule is the
 *    adjudicative variant (drawn via scaleY in P2, static end-state here).
 * ==================================================================== */

.ruling {
  border: 0;
  border-top: var(--rule-weight) solid var(--rule-color);
  width: 100%;
}
.ruling--faint { border-top-width: var(--hairline); }
.ruling--double {
  border-top: var(--hairline) solid var(--rule-color);
  box-shadow: 0 3px 0 -1px var(--rule-color);
}

/* Adjudicative margin rule — a red vertical rule that "draws" down the page.
   Uses --draw-progress for its height so animation and the static/RM floor
   share one source of truth. */
.margin-rule {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: var(--margin-rule-weight);
  height: 100%;
  background-color: var(--adjud);
  transform: scaleY(var(--draw-progress));
  transform-origin: top;
}

/* ========================================================================
 * 8. Primitives — stamp, chip, draw. (ruling is section 7.)
 *    See the primitive usage table in prd/req/site/DESIGN.md.
 * ==================================================================== */

/* --- stamp: an adjudication mark. Measured voice (mono), letterspaced,
       double-ruled frame, seated with a small rotation. Semantic by modifier;
       color is never the sole channel — the stamp always carries a word. --- */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  line-height: 1;
  padding: var(--space-2xs) var(--space-xs);
  color: var(--ink-muted);
  border: var(--rule-weight) solid currentColor;
  border-radius: var(--radius-sm);
  background-color: transparent;
  transform: rotate(-1.5deg);
  position: relative;
}
.stamp::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: var(--hairline) solid currentColor;
  border-radius: 2px;
  opacity: 0.55;
  pointer-events: none;
}
.stamp--adjud { color: var(--adjud); }
.stamp--accepted, .stamp--met { color: var(--green-ink); }
.stamp--missed { color: var(--adjud); }
.stamp--tier { color: var(--blue-ink); transform: rotate(0deg); }

/* --- chip: a small tag carrying a caveat, a tier, a semantic-trio marker, or
       a sentence digest. Fill + border + text; label always present. --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-caption);
  line-height: 1.2;
  padding: 0.2em 0.6em;
  border: var(--hairline) solid var(--rule-color);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--ink);
  white-space: nowrap;
}
/* Caveat/qualification chips carry full limiting sentences (e.g. the PAY-482
   qualification, the FP-band bound) — they MUST wrap. Override the base chip's
   nowrap + pill radius so multi-line text sets cleanly and never overflows a
   narrow data-fact-group. */
.chip--caveat {
  border-color: var(--adjud);
  color: var(--ink);
  white-space: normal;
  text-align: left;
  align-items: flex-start;
  border-radius: var(--radius-md);
  line-height: 1.35;
  padding: 0.35em 0.7em;
}
/* Sentence-digest chip (ground rule 6): a body-voice label ("sha-256 of this
   sentence") above the bare measured digest — labeled in the DOM as a digest of
   the exact sentence shown, NEVER presented as a lock hash. The label is body
   voice; only the digest hex is the mono/measured artifact (mono=measured). The
   hex breaks so a 64-char digest never overflows a narrow card. */
.chip--digest {
  font-size: var(--text-caption);
  background-color: var(--sunken);
  border-color: var(--rule-color);
  border-radius: var(--radius-sm);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
  white-space: normal;
  max-inline-size: 100%;
}
.chip--digest .facsimile__digest-label,
.chip--digest .ledger__digest-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86em;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.chip--digest .facsimile__digest-hex,
.chip--digest .ledger__digest-hex {
  word-break: break-all;
  color: var(--ink-muted);
  line-height: 1.4;
}
/* Semantic trio — meanings fixed from the README loop diagram, values
   re-derived per theme and ratio-checked. */
.chip--amber { background-color: var(--amber-fill); border-color: var(--amber-line); color: var(--ink); }
.chip--blue  { background-color: var(--blue-fill);  border-color: var(--blue-line);  color: var(--ink); }
.chip--green { background-color: var(--green-fill);  border-color: var(--green-line); color: var(--ink); }

/* Semantic accent as text/icon ink (e.g. the loop node labels). */
.ink-amber { color: var(--amber-ink); }
.ink-blue  { color: var(--blue-ink); }
.ink-green { color: var(--green-ink); }

/* --- draw: the reveal motion verb. Elements marked .draw expose their
       finished state by default (JS-off/RM safe) and are animated by tweening
       --draw-progress. Marker-sweep (PAY-482) and line-draw share it. --- */
.draw { --draw-progress: 1; }
.draw--sweep {
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--amber-fill) 92%, transparent) 0%,
    color-mix(in srgb, var(--amber-fill) 92%, transparent) 100%);
  background-repeat: no-repeat;
  background-size: calc(var(--draw-progress) * 100%) 88%;
  background-position: 0 60%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.draw--line {
  height: var(--rule-weight);
  background-color: var(--rule-color);
  width: 100%;
  transform: scaleX(var(--draw-progress));
  transform-origin: left;
}

/* Card that holds a stat and its qualification as one bounding box
   (crop-safe, ground rule 8) — the qualification is a DOM child of this box. */
.record-card {
  background-color: var(--surface);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow:
    0 1px 2px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.7)),
    0 4px 12px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.5));
}

/* Docket-term marker (ground rule 9): a subtle dotted underline flags a term
   whose plain-language equivalent appears within the same component. The gloss
   is real text, not a CSS tooltip — this is decoration only. */
[data-term] {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--ink-faint);
}

/* ========================================================================
 * 9. Hero poster — the designed static fallback (default render, and the
 *    permanent path for JS-off / reduced-motion / WebGL-fail). Vanta draws
 *    OVER this when the capability gate passes (P2). CSS-only, no image.
 * ==================================================================== */

.hero__poster {
  position: absolute;
  inset: 0;
  z-index: var(--z-poster);
  background-color: var(--poster-a);
  background-image:
    radial-gradient(120% 90% at 78% 12%, var(--poster-glow) 0%, transparent 55%),
    repeating-linear-gradient(
      104deg,
      var(--poster-a) 0,
      var(--poster-a) 3px,
      var(--poster-b) 3px,
      var(--poster-b) 7px),
    linear-gradient(160deg, var(--poster-a) 0%, var(--poster-b) 100%);
  background-blend-mode: normal, soft-light, normal;
  pointer-events: none;
}
.hero { position: relative; isolation: isolate; }
.hero > :not(.hero__poster) { position: relative; z-index: var(--z-content); }

/* ========================================================================
 * 10. Motion — reduced-motion floor. GSAP honors its own matchMedia in P2;
 *     this is the CSS-level floor and the finished-state pin.
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  :root {
    --draw-progress: 1;
    --motion-draw-dur: 0.001ms;
    --motion-stamp-dur: 0.001ms;
    --motion-fade-dur: 0.001ms;
  }
  .stamp, .stamp--tier { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ========================================================================
 * 11. P2 — masthead, hero, and the failure-shape register (section 2).
 *     Content is styled in its finished state; JS-driven reveals set their
 *     own initial state inside gsap.matchMedia (ground rule 4). Purely
 *     decorative draws (margin rule, ruling) are .js-only + start un-drawn
 *     under html.has-js so there is no finished-then-redraw flash — the
 *     has-js class is set pre-paint, so this applies at first paint.
 * ==================================================================== */

/* --- masthead: a slim, persistent document header (brand + Monday CTA). --- */
.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: color-mix(in srgb, var(--ground) 84%, transparent);
  border-bottom: var(--hairline) solid var(--rule-color);
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-2xs);
}
.masthead__brand {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.masthead__brand:hover { color: var(--ink-muted); }
.masthead__nav { display: flex; align-items: center; gap: var(--space-sm); }
/* theme toggle — a half-disc contrast mark + label. Functions only with JS
   (it flips data-theme + persists the choice), so it is hidden when JS is off;
   the OS preference still governs the theme through prefers-color-scheme. */
.masthead__theme {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  background-color: transparent;
  border: var(--hairline) solid var(--rule-color);
  border-radius: 999px;
  padding: var(--space-3xs) var(--space-sm);
  cursor: pointer;
  transition: color var(--motion-fade-dur) var(--ease-standard),
              border-color var(--motion-fade-dur) var(--ease-standard);
}
.masthead__theme:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 30%, var(--rule-color));
}
.masthead__theme-icon { inline-size: 0.95em; block-size: 0.95em; display: block; }
html:not(.has-js) .masthead__theme { display: none; }
.masthead__cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-small);
  letter-spacing: 0.01em;
  color: var(--link);
  text-decoration: none;
  padding: var(--space-3xs) var(--space-sm);
  border: var(--hairline) solid color-mix(in srgb, var(--link) 42%, var(--rule-color));
  border-radius: 999px;
  transition: border-color var(--motion-fade-dur) var(--ease-standard),
              background-color var(--motion-fade-dur) var(--ease-standard);
}
.masthead__cta:hover {
  border-color: var(--link);
  background-color: color-mix(in srgb, var(--link) 10%, transparent);
}

/* --- hero: full-viewport open-record plate; poster + optional Vanta fog
       behind the one question. --- */
.hero {
  display: flex;
  align-items: center;
  min-height: min(92svh, 52rem);
  overflow: hidden;
  padding-block: var(--space-3xl) var(--space-2xl);
}
.hero > .hero__vanta {
  position: absolute;
  inset: 0;
  z-index: var(--z-poster);
}
.hero > .hero__rule {
  position: absolute;
  inset-block: 0;
  inset-inline-start: clamp(0.5rem, 2vw, 1.75rem);
  inline-size: var(--margin-rule-weight);
  z-index: var(--z-content);
}
.hero__inner { inline-size: 100%; }
.hero__kicker { color: var(--ink-muted); margin-bottom: var(--space-md); }
.hero__question { max-inline-size: 46rem; }
.hero__q {
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 1.1rem + 2.6vw, 3.05rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.017em;
  color: var(--ink);
  text-wrap: balance;
}
/* SplitText's mask:'lines' wraps each line in an overflow-clipped element so it
   can rise into view from below the baseline. Ships visible; JS adds the mask. */
.hero__src {
  display: inline-block;
  margin-top: var(--space-lg);
}

/* Source citation link — a small uppercase register mark, reused site-wide. */
.src {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 0.22em;
  align-self: flex-start;
}

/* --- kicker (section eyebrow), shared by hero + sections. --- */
.kicker {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- section 2: the failure-shape register. --- */
.shape .kicker { margin-bottom: var(--space-2xs); }
.shape__rule { margin-block: var(--space-md) 0; max-inline-size: 7rem; }

.register { margin-top: var(--space-xl); }
.register__row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  padding-block: var(--space-xl);
}
.register__row + .register__row { border-top: var(--hairline) solid var(--rule-color); }
.register__domain {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: var(--space-3xs);
}
.register__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* record-card holds a stat + its caveats + source as one crop-safe box. */
.register .record-card {
  flex: 1 1 17rem;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.record-card--raised { border-inline-start: 3px solid var(--amber-line); }
.record-card--quote { flex-basis: 100%; }

.stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  max-inline-size: none;
}
.stat__num {
  font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.stat__cap {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--ink-muted);
}
.stat__quote {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--ink);
  border-inline-start: var(--rule-weight) solid var(--adjud);
  padding-inline-start: var(--space-md);
  max-inline-size: none;
}

.chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  max-inline-size: none;
}
.chips .chip { max-inline-size: 100%; }

/* Decorative scroll cue at the foot of the hero (js-only, no text). Centred by
   offset (not translateX) so GSAP's scaleY draw does not fight the transform. */
.hero__scroll {
  position: absolute;
  inset-block-end: var(--space-md);
  inset-inline-start: calc(50% - var(--hairline) / 2);
  inline-size: var(--hairline);
  block-size: var(--space-lg);
  transform-origin: top;
  background-color: color-mix(in srgb, var(--ink) 45%, transparent);
  z-index: var(--z-content);
}

/* JS-present pages start decorative draws un-drawn; GSAP tweens them to 1.
   RM+JS is handled by GSAP's reduced-motion branch (sets the finished state).
   JS-off pages never show these (.js-only display:none) — decoration only. */
html.has-js .hero__rule .margin-rule,
html.has-js .shape__rule { --draw-progress: 0; }
html.has-js .hero__scroll { transform: scaleY(0); }

/* --- section 2 responsive: stack the register rows on narrow screens. --- */
@media (max-width: 40rem) {
  .register__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    padding-block: var(--space-lg);
  }
  .register__domain { padding-top: 0; }
  .register__facts { flex-direction: column; }
  .register .record-card { flex-basis: auto; }
  .hero__question { max-inline-size: none; }
}

/* ========================================================================
 * 12. P2-hybrid — amplitude: the exhibit wall, the mechanism loop, the
 *     stamped evidence band. Retains the Matter-of-Record identity; raises
 *     amplitude. Every added artifact renders finished with JS off and under
 *     reduced motion (static is the one source of truth); the has-js collapsed
 *     initial states live ONLY inside prefers-reduced-motion: no-preference,
 *     so reduced-motion and JS-off both keep the assembled composition. See
 *     prd/req/site/DESIGN.md §12 "Amplitude — the hybrid opening".
 * ==================================================================== */

/* --- hero variant: the wall opens the case. The wall is a decorative data-
       visualization (aria-hidden); its accessible text equivalent is the
       registered "40 of 41 / outcomes missed" readout in the cover. The poster
       + Vanta fog remain the atmosphere UNDER the wall (they show in the tile
       gaps and the left margin). --- */
.hero--wall {
  align-items: center;
  justify-content: flex-start;
  padding-inline: clamp(1rem, 4vw, 4rem);
}

/* Specificity note: the base rule `.hero > :not(.hero__poster)` (0,2,0) sets
   position:relative + z-index on every hero child, so the wall/scrim/cover
   overrides below are written as `.hero--wall <child>` (0,2,0) and placed later
   so they win the cascade and can leave the flow / restack. */
.hero--wall .wall {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 1.2rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(94px, auto);
  gap: 0.7rem;
  align-content: center;
  pointer-events: none;
}
.extile {
  background-color: var(--surface);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.5rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  box-shadow: 0 1px 2px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.5));
  transform: rotate(-0.6deg);
}
.extile:nth-child(3n) { transform: rotate(0.7deg); }
.extile:nth-child(4n) { transform: rotate(-1.1deg); }
.extile:nth-child(5n) { transform: rotate(1.1deg); }
.extile__id {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
}
.extile__verdict {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--adjud);
  border: 1.5px solid var(--adjud);
  border-radius: 2px;
  padding: 0.28rem 0.2rem;
  line-height: 1.05;
}
/* the success pole (EX-41) — the one green outcome, placed in a prominent
   visible cell so it reads against the field of red. */
.extile--met {
  grid-column: 6;
  grid-row: 3;
  border-color: var(--green-line);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green-ink) 45%, transparent),
              0 6px 18px color-mix(in srgb, var(--green-ink) 30%, transparent);
  transform: rotate(0.6deg) scale(1.05);
  z-index: 1;
}
.extile--met .extile__id { color: var(--green-ink); }
.extile--met .extile__verdict { color: var(--green-ink); border-color: var(--green-ink); }

/* the two inverse cases (EX-12 OceanGate, EX-15 Bristol) — failure by the
   ABSENCE of a spec, not by satisfying one. A dashed neutral verdict, cooler
   than the hot-red spec-met failures, so the wall shows the library's full
   taxonomy at a glance: spec-met failures, no-spec failures, the one success.
   (Claim discipline holds even in decoration — no "SPEC MET" on a no-spec case.) */
.extile--inverse .extile__id { color: var(--ink-muted); }
.extile--inverse .extile__verdict {
  color: var(--ink-muted);
  border-color: var(--ink-muted);
  border-style: dashed;
}

/* dim the wall on the cover side so the docket sheet reads as foreground. */
.hero--wall .wall__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ground) 62%, transparent) 0%,
    color-mix(in srgb, var(--ground) 14%, transparent) 42%,
    transparent 70%);
}

/* the docket cover sheet — opaque, floats over the wall, holds the one
   question at poster scale + the register readout. */
.hero--wall .hero__cover {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-inline-size: 32rem;
  padding: 2.2rem 2.4rem 2rem;
  background-color: var(--ground);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 70px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.9)),
              0 6px 18px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.6));
}
.hero--wall .hero__q {
  font-weight: 800;
  font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  max-inline-size: none;
}
.hero__key { font-style: normal; color: var(--adjud); }
.hero--wall .hero__question { max-inline-size: none; }
.hero__count {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin: 0;
}
.hero__count-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3.4rem);
  line-height: 0.9;
  color: var(--adjud);
  letter-spacing: -0.01em;
}
.hero__count-cap {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  max-inline-size: 9rem;
}

/* --- beat 2: the mechanism in one loop. Arc ring (decorative SVG) + labelled
       nodes (registered) coded amber = human, blue = automated, green = both. --- */
.mechanism__kicker { color: var(--blue-ink); margin-bottom: var(--space-2xs); }
.mechanism__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-top: var(--space-lg);
}
.loop {
  position: relative;
  inline-size: 100%;
  max-inline-size: 38rem;
  margin-inline: auto;
  aspect-ratio: 620 / 560;
}
.loop__svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}
.loop__arc {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 3;
  stroke-linecap: round;
}
.loop__arc--feedback {
  stroke: var(--amber-ink);
  stroke-width: 3;
  stroke-dasharray: 8 6;
}
.loop__node {
  position: absolute;
  transform: translate(-50%, -50%);
  inline-size: 9.2rem;
  padding: 0.5rem 0.55rem 0.55rem;
  border: 2px solid var(--rule-color);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  text-align: center;
  box-shadow: 0 4px 14px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.7));
}
.loop__node--amber { background-color: var(--amber-fill); border-color: var(--amber-line); }
.loop__node--blue  { background-color: var(--blue-fill);  border-color: var(--blue-line); }
.loop__node--green { background-color: var(--green-fill); border-color: var(--green-line); }
.loop__node--intent  { left: 50%;    top: 10.71%; }
.loop__node--compile { left: 82.21%; top: 36.63%; }
.loop__node--verify  { left: 69.91%; top: 78.55%; }
.loop__node--lock    { left: 30.09%; top: 78.55%; }
.loop__node--execute { left: 17.79%; top: 36.63%; }
.loop__actor { display: block; font-size: 0.95rem; line-height: 1; }
.loop__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.05;
  margin-top: 0.12rem;
}
.loop__feedback {
  position: absolute;
  left: 26%;
  top: 11.5%;
  transform: translate(-50%, -50%);
  inline-size: 8.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-style: italic;
  color: var(--amber-ink);
  text-align: center;
  line-height: 1.2;
}
.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.legend__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: var(--text-small);
}
.legend__sw {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border-radius: var(--radius-sm);
  border: 2px solid;
  flex: none;
  align-self: center;
}
.legend__sw--amber { background: var(--amber-fill); border-color: var(--amber-line); }
.legend__sw--blue  { background: var(--blue-fill);  border-color: var(--blue-line); }
.legend__sw--green { background: var(--green-fill); border-color: var(--green-line); }
.legend__label { font-weight: 700; color: var(--ink); }
.legend__desc { color: var(--ink-muted); }

/* --- evidence band: the three register rows, each seated with a verdict
       stamp. Same facts, same quals, same source links — the stamp is added
       chrome that names the shape all three share. --- */
.register__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: flex-start;
}
.exh-stamp {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--adjud);
  border: 1.5px solid var(--adjud);
  border-radius: 2px;
  padding: 0.25rem 0.45rem;
  line-height: 1.1;
  transform: rotate(-2deg);
}

/* --- has-js collapsed initial states — ONLY under no-preference, so reduced
       motion and JS-off both render the assembled composition. GSAP tweens
       each to its finished state (see docs/js/site.js). --- */
@media (prefers-reduced-motion: no-preference) {
  html.has-js .extile { opacity: 0; }
  html.has-js .loop__node,
  html.has-js .loop__arc,
  html.has-js .loop__feedback { opacity: 0; }
  html.has-js .exh-stamp { opacity: 0; transform: scale(1.3) rotate(-8deg); }
}

/* --- hybrid responsive --- */
@media (max-width: 60rem) {
  .mechanism__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .loop { max-inline-size: 32rem; }
  .legend { flex-direction: row; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
}
@media (max-width: 46rem) {
  /* wall stacks below the cover so the red mass stays in flow (the opaque
     cover cannot hide it); the wall stops being an absolute overlay. The
     `.hero--wall <child>` specificity (0,2,0) is required to win against the
     desktop overrides above. */
  .hero--wall {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm) var(--space-lg);
  }
  .hero--wall .wall {
    position: static;
    order: 2;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 0.5rem;
    padding: 0;
  }
  .hero--wall .extile--met { grid-column: auto; grid-row: auto; }
  .hero--wall .wall__scrim { display: none; }
  .hero--wall .hero__cover {
    order: 1;
    max-inline-size: none;
    padding: 1.5rem 1.4rem 1.4rem;
  }
}
/* G3a fold: tighten the Start Monday pill at narrow widths so it never wraps. */
@media (max-width: 26rem) {
  .masthead__cta {
    white-space: nowrap;
    padding: var(--space-3xs) var(--space-xs);
    font-size: var(--text-caption);
    letter-spacing: 0;
  }
  .masthead__theme {
    padding: var(--space-3xs) var(--space-xs);
    font-size: var(--text-caption);
    letter-spacing: 0;
  }
  .masthead__inner { gap: var(--space-sm); }
  .masthead__nav { gap: var(--space-2xs); }
}

/* ========================================================================
 * 13. P3 — the exhibit register (section 3) + PAY-482 worked example
 *     (section 4) + dressed placeholders (sections 5-10). The register is
 *     the DETAIL layer of the hero wall: same 38/2/1 taxonomy, now with
 *     registered case findings. NO pinning (PREMORTEM #4) — a static grid
 *     with a ScrollTrigger.batch entrance. Every content reveal collapses
 *     ONLY under prefers-reduced-motion: no-preference, so reduced-motion
 *     and JS-off render the finished, assembled composition.
 * ==================================================================== */

/* --- section 3: the exhibit register --- */
.register-section__kicker { color: var(--adjud); margin-bottom: var(--space-2xs); }
.register-section__rule { margin-block: var(--space-md) 0; max-inline-size: 7rem; }
.register-skip {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 0.2em;
}

.register { margin-top: var(--space-xl); }

/* the governing caveat — framing epigraph for the whole register. */
.register__caveat {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--ink);
  max-inline-size: var(--measure);
  border-inline-start: var(--rule-weight) solid var(--adjud);
  padding-inline-start: var(--space-md);
}
.register__caveat-src { margin-top: var(--space-2xs); }

/* count-first disclosure — summary is the readout strip; the grid expands. */
.register__disclosure { margin-top: var(--space-lg); }
.register__summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  cursor: pointer;
  padding-block: var(--space-sm);
  border-block: var(--hairline) solid var(--rule-color);
  list-style: none;
}
.register__summary::-webkit-details-marker { display: none; }
.register__count {
  font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  line-height: 0.9;
  color: var(--adjud);
  letter-spacing: -0.01em;
}
.register__count-cap {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-muted);
}

.register__grid {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
  gap: var(--space-sm);
}

.excase {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-sm) var(--space-xs);
  background-color: var(--surface);
  border: var(--hairline) solid var(--rule-color);
  border-inline-start-width: 3px;
  border-inline-start-color: var(--adjud);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.5));
}
.excase__finding {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--ink);
  max-inline-size: none;
}
.excase__verdict {
  align-self: flex-start;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.4rem;
}
.excase__src { margin-top: auto; }

/* verdict-stamp variants — colour is never the sole channel (the words
   differ, and the border STYLE differs: solid vs dashed). */
.exh-stamp--nospec { color: var(--ink-muted); border-color: var(--ink-muted); border-style: dashed; }
.exh-stamp--met { color: var(--green-ink); border-color: var(--green-ink); }

/* the two inverse cases (no spec) read cooler; the success pole reads green. */
.excase--nospec { border-inline-start-color: var(--ink-muted); border-inline-start-style: dashed; }
.excase--met {
  border-inline-start-color: var(--green-line);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--green-ink) 40%, transparent),
              0 4px 14px color-mix(in srgb, var(--green-ink) 22%, transparent);
}
.excase--met .excase__finding { color: var(--ink); }

/* the governing qualification, restated small at the register's foot — the
   single visible data-qual that satisfies every case tile (crop-safe: it
   shares the register data-fact-group with all 41 findings). */
.register__govqual {
  margin-top: var(--space-lg);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--ink-faint);
  max-inline-size: var(--measure);
  padding-top: var(--space-sm);
  border-top: var(--hairline) solid var(--rule-color);
}

/* --- section 4: PAY-482 worked example --- */
.pay482__kicker { color: var(--amber-ink); margin-bottom: var(--space-2xs); }
.pay482__rule { margin-block: var(--space-md) 0; max-inline-size: 7rem; }
.pay482__grid {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.facsimile {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--surface);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.7)),
    0 4px 12px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.5));
}
/* the payoff/result panel spans full width beneath the before/after pair. */
.facsimile--result { grid-column: 1 / -1; }
.facsimile--before { border-inline-start: 3px solid var(--adjud); }
.facsimile--after { border-inline-start: 3px solid var(--amber-line); }

/* the scannable one-line takeaway that leads each PAY-482 panel (G4 readability
   wave): a plain-language headline above the category label. */
.facsimile__takeaway {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  max-inline-size: none;
}
.facsimile__label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-muted);
}
.pullblock { display: flex; flex-direction: column; gap: var(--space-2xs); }
.facsimile__pull {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  font-weight: 500;
  color: var(--ink);
  max-inline-size: none;
  align-self: flex-start;
}
.facsimile__pull--payoff { font-weight: 600; }
/* digest chip inside a facsimile — sits where the paired reference strip used to
   be (P4: the second rendering of a shared excerpt gives way to a digest chip,
   ground rule 6). Full-width within its card so the hex wraps cleanly. */
.facsimile__digest { align-self: stretch; margin-top: var(--space-2xs); }
/* the full excerpt beside each pull-quote — the anti-mining context body. */
.facsimile__context {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--ink-faint);
  background-color: var(--sunken);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  max-inline-size: none;
}
.facsimile__qual { align-self: flex-start; max-inline-size: 100%; }

/* early-exit ramp → the Monday CTA. */
.ramp { margin-top: var(--space-xl); }
.ramp__link {
  display: block;
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background-color: var(--sunken);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fade-dur) var(--ease-standard),
              background-color var(--motion-fade-dur) var(--ease-standard);
}
.ramp__link:hover {
  border-color: var(--link);
  background-color: color-mix(in srgb, var(--link) 8%, var(--sunken));
}

/* --- dressed placeholders (sections 5-10): kicker + heading + short rule,
       styled to the register grammar so the scroll does not jar between
       polished beats. No content yet — later phases build these out. --- */
.section--placeholder { padding-block: var(--space-xl); }
.placeholder__kicker { color: var(--ink-muted); margin-bottom: var(--space-2xs); }
.section--placeholder h2 { color: var(--ink-muted); }
.placeholder__rule {
  display: block;
  margin-top: var(--space-md);
  inline-size: 4rem;
  block-size: var(--rule-weight);
  background-color: var(--rule-color);
}

/* --- has-js collapsed initial states (decorative js-only draws collapse
       always; content reveals collapse ONLY under no-preference, so
       reduced-motion and JS-off keep the finished composition). --- */
html.has-js .register-section__rule,
html.has-js .pay482__rule { --draw-progress: 0; }

@media (prefers-reduced-motion: no-preference) {
  html.has-js .excase { opacity: 0; }
  html.has-js .facsimile__pull.draw--sweep { --draw-progress: 0; }
}

/* --- P3 responsive --- */
@media (max-width: 52rem) {
  .pay482__grid { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .register__grid { grid-template-columns: 1fr; }
}
/* panel 2.3 — facsimiles stack single-column at <=480px (already 1fr by 52rem,
   restated so the intent is explicit at the mobile breakpoint). */
@media (max-width: 30rem) {
  .pay482__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .facsimile { padding: var(--space-sm); }
}

/* ========================================================================
 * 14. §5 — the loop set-piece: the scrubbed six-beat mechanism resolving into
 *     the LOCK LEDGER. The finished diagram + ledger are the JS-off / reduced-
 *     motion render; motion only reveals a state that is already the static
 *     truth. Pinned scrub lives in site.js on fine-pointer wide viewports only.
 * ==================================================================== */
.loop-section__kicker { color: var(--green-ink); margin-bottom: var(--space-2xs); }
.loop-section__rule { margin-block: var(--space-md) 0; max-inline-size: 7rem; }
.loop-section__skip {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--text-small);
  color: var(--link);
  text-decoration: none;
}
.loop-section__skip:hover { text-decoration: underline; }

.loop-piece {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
.loop-piece__lead {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  max-inline-size: 46rem;
  color: var(--ink);
}
.loop-piece__intro .src,
.loop-piece__legend .src { display: inline-block; margin-top: var(--space-2xs); }

/* --- the six-beat mechanism diagram --- */
.loop-piece__beats-lead { color: var(--ink-muted); margin-bottom: var(--space-md); }
.loop-flow { display: flex; gap: var(--space-md); align-items: stretch; }
.loop-spine { flex: 0 0 auto; inline-size: 2.2rem; block-size: auto; align-self: stretch; }
.loop-spine__flow { fill: none; stroke: var(--rule-color); stroke-width: 2.5; stroke-linecap: round; }
.loop-spine__feedback { fill: none; stroke: var(--amber-line); stroke-width: 2; stroke-dasharray: 5 6; }
.loop-spine marker path { fill: var(--rule-color); }

.loop-beats {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-sm);
  flex: 1 1 auto;
}
.loop-beat {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--surface);
  border: var(--hairline) solid var(--rule-color);
  border-inline-start: 3px solid var(--rule-color);
  border-radius: var(--radius-sm);
}
.loop-beat--amber { border-inline-start-color: var(--amber-line); }
.loop-beat--blue  { border-inline-start-color: var(--blue-line); }
.loop-beat--green { border-inline-start-color: var(--green-line); }
.loop-beat--feedback { border-style: dashed; }
.loop-beat__no { font-size: var(--text-caption); color: var(--ink-faint); }
.loop-beat__actor { font-size: 1.05rem; line-height: 1; }
.loop-beat__label { font-weight: 600; color: var(--ink); }
.loop-beat--amber .loop-beat__label { color: var(--amber-ink); }
.loop-beat--blue  .loop-beat__label { color: var(--blue-ink); }
.loop-beat--green .loop-beat__label { color: var(--green-ink); }

.loop-piece__legend { margin-top: var(--space-sm); }
.loop-legend__quote {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--ink-muted);
  border-inline-start: 2px solid var(--rule-color);
  padding-inline-start: var(--space-sm);
  margin: 0;
}

/* --- the LOCK LEDGER (append-only register grammar) --- */
.ledger { display: flex; flex-direction: column; gap: var(--space-md); }
.ledger__title { color: var(--ink); margin-bottom: var(--space-2xs); }
.ledger__lead { color: var(--ink-muted); font-size: var(--text-small); margin: 0; }
.ledger__lead + .ledger__lead { margin-top: var(--space-3xs); }
.ledger__cols {
  list-style: none; margin: var(--space-xs) 0 0; padding: 0 0 var(--space-xs);
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-faint);
  border-block-end: var(--hairline) solid var(--rule-color);
}
.ledger__row {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--surface);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.7));
}
.ledger__row--superseded { background-color: var(--sunken); }
.ledger__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.ledger__lockid { font-weight: 700; color: var(--ink); }
.ledger__supersede-gloss { font-size: var(--text-caption); color: var(--ink-faint); font-style: italic; }
.ledger__req {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--ink);
  max-inline-size: 62ch;
  margin: 0;
}
.ledger__digest { align-self: flex-start; }
.ledger__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.ledger__dissent { color: var(--ink-faint); }
.ledger__dissent-chip { font-size: var(--text-caption); }

/* has-js collapsed initial states — ONLY under no-preference, so reduced-motion
   and JS-off keep the finished diagram + ledger (static is the source of truth). */
html.has-js .loop-section__rule { --draw-progress: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.has-js .loop-beat { opacity: 0; }
  html.has-js .ledger__row { opacity: 0; }
  html.has-js .ledger__stamp { opacity: 0; transform: scale(1.3) rotate(-8deg); }
}

/* §5 responsive — the loop diagram + ledger stack cleanly on narrow screens;
   the pinned scrub is disabled for touch/narrow in site.js (static instead). */
@media (max-width: 46rem) {
  .loop-flow { gap: var(--space-sm); }
  .loop-spine { inline-size: 1.6rem; }
  .loop-beat { padding: var(--space-xs) var(--space-sm); gap: var(--space-xs); }
  .ledger__row { padding: var(--space-sm); }
}

/* ========================================================================
 * 15. P5 — §6 Why now · §7 The evidence · §8 The Bun run. Each stat shares one
 *     crop-safe data-fact-group with its qualifications (ground rule 8);
 *     partial pull-quotes render their COMPLETE excerpt as a visible context
 *     body (ground rule 7c). Every artifact renders finished with JS off and
 *     under reduced motion; the thin section rules are the only js-only draws.
 * ==================================================================== */

/* --- §6 Why now: the load-moves thesis + the old GORE cost --- */
.whynow__kicker { color: var(--blue-ink); margin-bottom: var(--space-2xs); }
.whynow__rule { margin-block: var(--space-md) 0; max-inline-size: 7rem; }
.whynow__body {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: var(--space-xl);
  align-items: start;
}
.whynow__thesis { display: flex; flex-direction: column; gap: var(--space-md); min-inline-size: 0; }
.whynow__pull {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--ink);
  border-inline-start: var(--rule-weight) solid var(--adjud);
  padding-inline-start: var(--space-md);
  max-inline-size: 42rem;
}
.whynow__full-cap {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-faint);
  margin: 0;
}
/* the full abstract — the anti-mining context body, rendered small + secondary
   but fully visible (never clipped): the whole record is on the page. */
.whynow__context {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--ink-muted);
  background-color: var(--sunken);
  border: var(--hairline) solid var(--rule-color);
  border-inline-start: var(--rule-weight) solid var(--rule-color);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  max-inline-size: none;
}
.whynow__cost {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-inline-start: 3px solid var(--blue-line);
}
.whynow__cost-head {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-muted);
  margin: 0;
}
.whynow__cost .stat__num { font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.3rem); }

@media (max-width: 52rem) {
  .whynow__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

/* --- §7 The evidence: tier stamps, the drift demo, the FP bar, the stance --- */
.evidence__kicker { color: var(--green-ink); margin-bottom: var(--space-2xs); }
.evidence__rule { margin-block: var(--space-md) 0; max-inline-size: 7rem; }
.evidence__body {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* the four evidence tiers — sourced ident stamps, one per epistemic level */
.ev-tiers { display: flex; flex-direction: column; gap: var(--space-sm); }
.ev-tiers__cap {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-faint);
  margin: 0;
}
.ev-tiers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.ev-tiers__list > li { max-inline-size: none; }
/* tier stamp: use the stamp primitive (double-ruled mono frame) but drop the
   uppercase — the tier names are phrases, not short marks — and let colour code
   the level (never colour-alone: the word "Measured/Hypothesis/Open" carries it). */
.ev-tier {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: var(--text-caption);
  transform: none;
}
.ev-tier--measured { color: var(--green-ink); }
.ev-tier--hypothesis { color: var(--amber-ink); }
.ev-tier--open { color: var(--ink-muted); border-style: dashed; }
.ev-tiers .src { display: inline-block; align-self: flex-start; }

/* the drift-detection demo — both judge scores + the full measured passage */
.ev-drift { display: flex; flex-direction: column; gap: var(--space-md); }
.ev-drift__head {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.ev-judges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.ev-judge {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--surface);
  border: var(--hairline) solid var(--rule-color);
  border-inline-start: 3px solid var(--green-line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.6));
}
.ev-judge__pull {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--ink);
  border: 0;
  padding: 0;
  margin: 0;
  max-inline-size: none;
}
.ev-score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  font-size: 1.5em;
  color: var(--adjud);
  white-space: nowrap;
}

/* the anti-mining context body — the complete passage, fully visible (never
   clipped): small, secondary, a raw record block. The measured passage is
   verbatim (markdown reference markers included) — the whole is on the page. */
.ev-context-cap {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-faint);
  margin: 0;
}
.ev-context {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--ink-muted);
  background-color: var(--sunken);
  border: var(--hairline) solid var(--rule-color);
  border-inline-start: var(--rule-weight) solid var(--rule-color);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin: var(--space-2xs) 0 0;
  max-inline-size: none;
}
.ev-drift .src, .ev-limits .src, .ev-stance .src, .ev-combined .src, .ev-fp .src {
  display: inline-block;
  margin-top: var(--space-2xs);
  align-self: flex-start;
}

/* progressive-disclosure record blocks (gate6, author-ruled at G4): the
   registered caption becomes a native <summary>, and the verbatim passage
   collapses one tap away — closed by default, native with JS off. The affordance
   is the browser's own disclosure marker; a CSS `content` marker is gate-banned,
   so none is used. The source link stays outside the <details>, always visible. */
.ctx-disclosure { margin-top: var(--space-2xs); }
.ctx-disclosure > summary {
  cursor: pointer;
  width: fit-content;
  max-inline-size: 100%;
  list-style-position: inside;
  padding-block: var(--space-3xs);
}
.ctx-disclosure > summary:hover { color: var(--ink-muted); }
.ctx-disclosure > blockquote { margin-top: var(--space-2xs); }

/* the FP bar (bound-before-value): the 20–80% band renders before the number */
.evidence__pair {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
.ev-fp { display: flex; flex-direction: column; gap: var(--space-sm); }
.ev-fp__head, .ev-stance__head {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-muted);
  margin: 0;
}
.ev-fp__bar {
  position: relative;
  height: 0.85rem;
  border-radius: 999px;
  background-color: var(--sunken);
  border: var(--hairline) solid var(--rule-color);
  margin-block: var(--space-3xs) var(--space-2xs);
}
.ev-fp__band {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 20%;
  inset-inline-end: 20%;
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--amber-line), var(--adjud));
  opacity: 0.6;
}
.ev-fp__mark {
  position: absolute;
  inset-block: -3px;
  inline-size: 2px;
  background-color: var(--ink);
}
.ev-fp__mark--lo { inset-inline-start: 20%; }
.ev-fp__mark--hi { inset-inline-start: 80%; }
.ev-fp .stat__num { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }

.ev-combined { display: flex; flex-direction: column; gap: var(--space-sm); }
.ev-combined__pull {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--ink);
  border-inline-start: var(--rule-weight) solid var(--rule-color);
  padding-inline-start: var(--space-md);
  margin: 0;
  max-inline-size: none;
}

.ev-limits { display: flex; flex-direction: column; gap: var(--space-sm); }
.ev-limits__pull {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--ink);
  border-inline-start: var(--rule-weight) solid var(--adjud);
  padding-inline-start: var(--space-md);
  margin: 0;
  max-inline-size: 46rem;
}

/* the stance — the falsification invitation closes the evidence section */
.ev-stance {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--sunken);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-md);
}
.ev-stance__pull {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--ink);
  border: 0;
  padding: 0;
  margin: 0;
  max-inline-size: 46rem;
}

@media (max-width: 52rem) {
  .ev-judges { grid-template-columns: 1fr; }
  .evidence__pair { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* --- §8 The Bun run: the reported stat band + first-hand account + the sting --- */
.bun__kicker { color: var(--green-ink); margin-bottom: var(--space-2xs); }
.bun__rule { margin-block: var(--space-md) 0; max-inline-size: 7rem; }
.bun__body {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* the reported run — the stat band and first-hand account under ONE caveat */
.bun-run {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--surface);
  border: var(--hairline) solid var(--rule-color);
  border-inline-start: 3px solid var(--green-line);
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.7)),
    0 4px 12px hsl(var(--shadow-color) / calc(var(--shadow-strength) * 0.5));
}
.bun-run__head {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-muted);
  margin: 0;
}

/* the ledger-total stat band — a double rule top and bottom (a run total) */
.bun-ledger {
  list-style: none;
  margin: 0;
  padding: var(--space-md) 0;
  border-block: 3px double var(--ink-faint);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-md) var(--space-lg);
}
.bun-fig { display: flex; flex-direction: column; gap: 0.1rem; max-inline-size: none; }
.bun-fig__num {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.bun-fig__cap {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--ink-muted);
  line-height: var(--leading-snug);
}

/* the first-party caveat, attached to the band by a drawn leader line — no
   figure travels without its disclosure (crop-safe, PREMORTEM #2). */
.bun-run__caveat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
}
.bun-leader {
  inline-size: var(--rule-weight);
  block-size: 100%;
  min-block-size: 1.5rem;
  background-color: var(--adjud);
  transform: scaleY(var(--draw-progress));
  transform-origin: top;
  border-radius: 1px;
}
.bun-run__caveat-chip { margin: 0; }
.bun-run__src { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: 0; }

/* how the outcome held — the first-hand account (the Intent-as-Source-shaped controls) */
.bun-machinery {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--hairline) solid var(--rule-color);
}
.bun-machinery__head {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-faint);
  margin: 0;
}
.bun-quote {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--ink);
  border-inline-start: var(--rule-weight) solid var(--rule-color);
  padding-inline-start: var(--space-md);
  margin: 0;
  max-inline-size: 62ch;
}
.bun-machinery .src { display: inline-block; align-self: flex-start; }

/* citation status + the waiver sting share the evidence__pair grid */
.bun-caveat, .bun-waiver {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--sunken);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-md);
}
.bun-waiver { border-inline-start: 3px solid var(--adjud); }
.bun-caveat__head, .bun-waiver__head {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-muted);
  margin: 0;
}
.bun-caveat__pull {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--ink);
  border: 0;
  padding: 0;
  margin: 0;
  max-inline-size: none;
}
.bun-waiver__pull {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--ink);
  border: 0;
  padding: 0;
  margin: 0;
  max-inline-size: none;
}
.bun-waiver__stamp { align-self: flex-start; }
.bun-caveat .src, .bun-waiver .src { display: inline-block; align-self: flex-start; }

@media (max-width: 40rem) {
  .bun-run { padding: var(--space-md); }
  .bun-ledger { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--space-sm) var(--space-md); }
}

/* has-js: the three P5 section rules + the leader line start un-drawn
   (decorative js-only draws); JS tweens them to 1, reduced-motion settles them. */
html.has-js .whynow__rule,
html.has-js .evidence__rule,
html.has-js .bun__rule,
html.has-js .bun-leader { --draw-progress: 0; }

/* ========================================================================
 * 15. §9 The adoption ladder — four optional rungs + the rung-2 kill
 *     criterion at equal weight. A ledger/register cadence: the stance frames
 *     the section, then a numbered rail of rungs, then the kill-criterion card.
 *     Renders complete JS-off / reduced motion (the rule is the only js-only
 *     decoration).
 * ==================================================================== */
.ladder__kicker { color: var(--ink-muted); margin-bottom: var(--space-2xs); }
.ladder__rule { margin-block: var(--space-md) 0; max-inline-size: 7rem; }
.ladder__body {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* the stance — a display-voice lead that frames the ladder */
.ladder__stance {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--sunken);
  border: var(--hairline) solid var(--rule-color);
  border-inline-start: var(--margin-rule-weight) solid var(--adjud);
  border-radius: var(--radius-md);
}
.ladder__stance-pull {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--ink);
  border: 0;
  padding: 0;
  margin: 0;
  max-inline-size: 46rem;
}
.ladder__stance .src { display: inline-block; align-self: flex-start; margin-top: var(--space-2xs); }

/* the rungs — a numbered rail. Numbering is the registered "Rung N" labels,
   never a CSS counter (counters are gate-banned and their computed content
   would fail the runtime allowlist). */
.rungs {
  list-style: none;
  padding: 0;
  margin: 0;
  border-inline-start: var(--hairline) solid var(--rule-color);
}
.rung {
  max-inline-size: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  padding-inline-start: var(--space-lg);
}
.rung + .rung { border-top: var(--hairline) solid var(--rule-color); }
.rung__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
}
.rung__no {
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--adjud);
}
.rung__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--ink);
}
.rung__pull {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--ink);
  border-inline-start: var(--rule-weight) solid var(--rule-color);
  padding-inline-start: var(--space-md);
  margin: 0;
  max-inline-size: 46rem;
}
.rung__context { margin-top: 0; }
.rung .ev-context-cap { align-self: flex-start; }
.rung .src { display: inline-block; align-self: flex-start; }

/* the kill criterion — a crop-safe record-card at equal weight to the rungs */
.ladder__kill {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-inline-size: 34rem;
  border-inline-start: 3px solid var(--adjud);
}
.ladder__kill-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
}
.ladder__kill-label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-muted);
}
.ladder__kill .stat__num { color: var(--adjud); }
.ladder__kill .src { display: inline-block; align-self: flex-start; }

/* the rung-2 eval on-ramp — a crop-safe record-card at equal weight to the kill
   criterion; a neutral rule accent marks it as an on-ramp, not a kill. */
.ladder__evals {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-inline-size: 46rem;
  border-inline-start: 3px solid var(--rule-color);
}
.ladder__evals-pull {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--ink);
  border: 0;
  padding: 0;
  margin: 0;
  max-inline-size: 44rem;
}
.ladder__evals .src { display: inline-block; align-self: flex-start; }

/* has-js: the §9 section rule starts un-drawn (decorative js-only draw). */
html.has-js .ladder__rule { --draw-progress: 0; }

@media (max-width: 40rem) {
  .ladder__stance { padding: var(--space-md); }
  .rung { padding-inline-start: var(--space-md); }
}

/* ========================================================================
 * 16. §10 Start Monday — the three CTAs (ask / install / falsify), the
 *     specified-not-shipped honesty note, and the close. The delta: "make the
 *     second one cheap," framed as a design claim with the pilot as its test
 *     (the L3-framing close). Renders complete JS-off / reduced motion; the
 *     copy control is the only JS-gated affordance (hidden with JS off).
 * ==================================================================== */
.monday__kicker { color: var(--ink-muted); margin-bottom: var(--space-2xs); }
.monday__rule { margin-block: var(--space-md) 0; max-inline-size: 7rem; }
.monday__body {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* the three CTAs — a stacked sequence of action cards */
.ctas { display: flex; flex-direction: column; gap: var(--space-md); }
.cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--surface);
  border: var(--hairline) solid var(--rule-color);
  border-inline-start: 3px solid var(--link);
  border-radius: var(--radius-md);
}
.cta__head {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--ink);
  margin: 0;
  max-inline-size: none;
}
.cta__pull {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--ink);
  border-inline-start: var(--rule-weight) solid var(--rule-color);
  padding-inline-start: var(--space-md);
  margin: 0;
  max-inline-size: 46rem;
}
.cta .ev-context-cap, .cta .src { align-self: flex-start; }
.cta .src { display: inline-block; }

/* the install line: the cp -r command + a clipboard copy control */
.install {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-2xs);
}
.install__code {
  flex: 1 1 20rem;
  min-inline-size: 0;
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--ink);
  background-color: var(--sunken);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  overflow-x: auto;
  white-space: pre;
  max-inline-size: none;
}
.install__copy {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--link);
  background-color: transparent;
  border: var(--hairline) solid color-mix(in srgb, var(--link) 42%, var(--rule-color));
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-md);
  cursor: pointer;
  transition: border-color var(--motion-fade-dur) var(--ease-standard),
              background-color var(--motion-fade-dur) var(--ease-standard),
              color var(--motion-fade-dur) var(--ease-standard);
}
.install__copy:hover {
  border-color: var(--link);
  background-color: color-mix(in srgb, var(--link) 10%, transparent);
}
/* the copy button is a JS enhancement — hidden when JS is off (its action
   cannot run), so the command stays available for manual selection instead. */
html:not(.has-js) .install__copy { display: none; }
.install__copy-label--done { display: none; }
.install__copy.is-copied { color: var(--green-ink); border-color: var(--green-line); }
.install__copy.is-copied .install__copy-label--idle { display: none; }
.install__copy.is-copied .install__copy-label--done { display: inline; }
/* AT channel for the visible Copy->Copied flip: a visually-hidden polite live
   region whose "Copied" text (registered chrome) is display:none at rest, so the
   region has nothing to announce on load. The same copy class that flips the
   button label reveals this text into the accessibility tree, which the region
   announces; removing the class on reset re-arms it for the next copy. */
.install__status {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.install__status-text { display: none; }
.install__copy.is-copied ~ .install__status .install__status-text { display: inline; }

/* the honesty note — specified, not shipped */
.monday__ships { display: flex; flex-direction: column; gap: var(--space-sm); }
.ships__head, .close__head {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-muted);
  margin: 0;
}
.ships__pull {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--ink);
  border-inline-start: var(--rule-weight) solid var(--adjud);
  padding-inline-start: var(--space-md);
  margin: 0;
  max-inline-size: 46rem;
}
.monday__ships .ev-context-cap, .monday__ships .src { align-self: flex-start; }
.monday__ships .src { display: inline-block; }

/* the close — the delta, set at display weight */
.monday__close {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--sunken);
  border: var(--hairline) solid var(--rule-color);
  border-inline-start: var(--margin-rule-weight) solid var(--adjud);
  border-radius: var(--radius-md);
}
.close__line {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
  border: 0;
  padding: 0;
  margin: 0;
  max-inline-size: none;
  text-wrap: balance;
}
.monday__close .ev-context-cap, .monday__close .src { align-self: flex-start; }
.monday__close .src { display: inline-block; }

/* has-js: the §10 section rule starts un-drawn (decorative js-only draw). */
html.has-js .monday__rule { --draw-progress: 0; }

@media (max-width: 40rem) {
  .cta, .monday__close { padding: var(--space-md); }
  .install__code { flex-basis: 100%; }
  .install__copy { align-self: flex-start; }
}