/* ============================================================
   CRITFIELD · site stylesheet
   Independent research on players, reviews, and game communities.
   Design system: classic pixel RPG meets modern research
   publication. Obsidian night base, torch gold, data blue,
   value emerald, risk crimson, veteran violet, parchment text.
   No external assets, no CDN, no remote fonts.
   ============================================================ */

:root {
  /* base surfaces */
  --obsidian: #08090f;
  --obsidian-2: #0b0d16;
  --panel: #10131f;
  --panel-2: #151928;
  --panel-glass: rgba(21, 25, 40, 0.72);
  --line: #232a40;
  --line-soft: #1a2033;

  /* accent palette
     Two-part accent system:
       · pale arcane gold — brand, editorial warmth, and anything CHARTED
       · ice cyan        — the signature interactive accent: links, chevrons,
                           focus, hover borders, and anything PLANNED
     The old bronze (#dfae55) was doing both jobs at once, which read muddy
     and template-like. Gold is now paler and warmer; cyan carries the UI. */
  --gold: #eccf92;
  --gold-bright: #f8e6bd;
  --gold-soft: rgba(236, 207, 146, 0.32);
  --gold-faint: rgba(236, 207, 146, 0.09);
  --blue: #7ddcff;
  --blue-soft: rgba(125, 220, 255, 0.32);

  /* signature interactive accent (alias of the blue ramp, named by intent) */
  --ice: #7ddcff;
  --ice-bright: #b3ecff;
  --ice-soft: rgba(125, 220, 255, 0.34);
  --ice-faint: rgba(125, 220, 255, 0.10);
  --emerald: #4fd99a;
  --emerald-soft: rgba(79, 217, 154, 0.3);
  --crimson: #ff5c6e;
  --crimson-soft: rgba(255, 92, 110, 0.32);
  --violet: #a78bfa;
  --violet-soft: rgba(167, 139, 250, 0.32);
  --parchment: #e9e3d3;
  --parchment-soft: rgba(233, 227, 211, 0.28);

  /* text */
  --text: #edeff6;
  /* Phase 8.4B: a real reading tone for long-form prose — --muted (a caption
     colour) was doing a paragraph's job. Consumed by .hero-sub only this
     phase; the site-wide body-copy sweep is 8.4C's chapter-compression work. */
  --body: #c6cee1;
  --muted: #9aa6c0;
  --muted-2: #76829e;

  /* default section theme (overridden via data-theme) */
  --accent: var(--gold);
  --accent-soft: var(--gold-soft);
  --accent-faint: var(--gold-faint);

  /* structural steel — frames, rails and dividers that must read as built,
     not decorative. Keeps gold off anything that is merely structure. */
  --steel: #8ea3c4;
  --steel-dim: #5d6d8c;

  /* radius scale — chips/rings, small controls, cards, large surfaces, pills */
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* one line-weight scale for every border, rule, divider and ornament */
  --hair: 1px;
  --rule: 2px;

  /* focus: one ring everywhere, always ice, never clipped */
  --focus: 0 0 0 2px var(--obsidian), 0 0 0 4px var(--ice);

  /* motion scale */
  /* the hero's castle skyline is absolutely positioned at bottom:0; the frame
     reserves exactly its height so content never lands on top of it and the
     reserved band is never empty */
  --skyline-h: clamp(80px, 14vw, 150px);

  --dur-fast: 0.16s;
  --dur: 0.28s;
  --dur-slow: 0.55s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --serif: Georgia, "Times New Roman", "Palatino Linotype", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 16px;

  /* ============================================================
     Phase 3 — design tokens foundation (additive only). Nothing
     below this point is consumed by any selector yet; Phase 4+
     apply them deliberately. CRITFIELD_UI_UPGRADE_PLAN.md §7.1–7.5.
     ============================================================ */

  /* content widths — semantic roles, §7.1. .section's own 1220px
     is untouched and still governs current layout. */
  --w-prose: 720px;    /* long-form body copy, method, caveats */
  --w-narrow: 900px;   /* headlines, theses, one-column evidence */
  --w-content: 1160px; /* standard section: cards, two-up figures */
  --w-wide: 1320px;    /* large tables, wide evidence, data objects */

  /* spacing scale, §7.2 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* vertical rhythm roles, §7.2 — desktop/default value; redefined
     for phone just below the theme blocks. Not applied to .section
     yet (Phase 4 owns application). */
  --rhythm-chapter: 96px; /* between arguments (chapter to chapter) */
  --rhythm-block: 40px;   /* inside one argument (thesis, figure, reading) */

  /* metadata tracking, §7.3 — already the de facto value on .ic-cat
     and .deep summary::after; aliased here, not yet applied elsewhere.
     --tracking-kicker / --tracking-tight deliberately not added: no
     single current letter-spacing value is consistently used for
     either role today (values scatter from 0.04em to 0.22em across
     kicker-shaped elements) — picking one now would assert a
     canonical value that doesn't exist yet, which is Phase 4/5 work. */
  --tracking-meta: 1.6px;

  /* ------------------------------------------------------------
     Container grammar, §7.4/§7.5 — THREE levels, and only three.
     Phase 3 reserved four of these names as unconsumed aliases;
     Phase 6 gives them their real values and consumes them, so
     there is one card vocabulary rather than a second parallel one.

       SURFACE  quiet structural environment. Holds objects, is not
                itself an object, must never look clickable.
       OBJECT   one discrete evidence/content thing. Clearest edge.
       INSET    supporting/technical region recessed INTO a surface
                or object — carved in, never a third stacked card.

     Depth is fill + border + radius together, never one alone:
     page < surface < object, with inset cut back below its host.
     Differences stay small — dark and atmospheric, not a grey
     staircase. No new colour: every value resolves to an existing
     palette variable or a literal already in use. */
  --surface-quiet: linear-gradient(180deg, rgba(21, 25, 40, 0.45), rgba(16, 19, 31, 0.26));
  --surface-panel: linear-gradient(180deg, var(--panel-2), var(--panel));
  --surface-inset: rgba(9, 11, 19, 0.5);

  /* border roles, §7.5 — structure / emphasis / accent. Gold is NOT a
     border role: it marks charted evidence and published research
     only. Ice stays interaction (D-011); per-chapter --accent-soft
     rails stay local and semantic. */
  --border-structure: var(--line);
  --border-quiet: var(--line-soft);
  --border-emphasis: var(--ice-soft);

  /* one Object radius, one quieter Inset radius, one large Surface
     radius. Protected RPG geometry (study frame 22px, codex/dossier
     --radius-lg, seals, pills, pixel sigils) is deliberately outside
     this scale — see §7.4 "special". */
  --radius-surface: var(--radius);
  --radius-object: 12px;
  --radius-inset: var(--radius-sm);
  --shadow-object: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/*
  Breakpoints:
  wide 1320
  desktop 1200
  laptop 1024
  tablet 820
  phone 560

  Component boundary:
  data viewers <=767 mobile / >=768 inline desktop

  Retained exceptions (justified at each rule, not here): 1020, 980, 900
  (.grid2 only), 700, 640, 520, 480, 430.
*/
@media (max-width: 560px) {
  :root {
    --rhythm-chapter: 60px;
    --rhythm-block: 28px;
  }
}

/* chapter themes */
.section[data-theme="gold"],
.section[data-theme="amber"] { --accent: var(--gold); --accent-soft: var(--gold-soft); --accent-faint: var(--gold-faint); }
.section[data-theme="blue"] { --accent: var(--blue); --accent-soft: var(--blue-soft); --accent-faint: rgba(92, 200, 255, 0.08); }
.section[data-theme="emerald"] { --accent: var(--emerald); --accent-soft: var(--emerald-soft); --accent-faint: rgba(79, 217, 154, 0.07); }
.section[data-theme="crimson"] { --accent: var(--crimson); --accent-soft: var(--crimson-soft); --accent-faint: rgba(255, 92, 110, 0.07); }
.section[data-theme="violet"] { --accent: var(--violet); --accent-soft: var(--violet-soft); --accent-faint: rgba(167, 139, 250, 0.08); }
.section[data-theme="parchment"] { --accent: var(--parchment); --accent-soft: var(--parchment-soft); --accent-faint: rgba(233, 227, 211, 0.05); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* .topnav is sticky and 52px tall; without this every deep link (#playtime,
     #waves, #method …) parked its target heading underneath the bar */
  scroll-padding-top: 76px;
}

/* ---- accessibility: skip link + visible focus ---- */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 200;
  background: var(--gold-bright); color: #08090f;
  padding: 10px 16px; border-radius: 8px; font-weight: 700;
  font-family: var(--sans); text-decoration: none;
  transition: top 0.16s ease;
}
.skip-link:focus { top: 12px; outline: 3px solid #08090f; outline-offset: 2px; }

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ice-bright);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ============================================================
   CONTAINER GRAMMAR (Phase 6, §7.4)
   Three shared recipes. Every framed container composes one of them
   and adds only its own identity delta (accent rail, corner tick,
   wax seal, gradient border, hover lift). These rules sit above the
   component layer so any component below can still override one
   property — that cascade order is what lets identity survive
   consolidation. Only fill, edge, radius and depth live here; padding
   and layout stay each component's own business.
   ============================================================ */

/* ---- SURFACE: quiet structural environment ---- */
.chart-block,
.latest,
#explorer-table {
  background: var(--surface-quiet);
  border: var(--hair) solid var(--border-quiet);
  border-radius: var(--radius-surface);
  box-shadow: none;
}

/* ---- OBJECT: one discrete evidence/content object ---- */
.stat,
.bigstat,
.latest .lt-metrics > div,
.journey-panel,
.mini-card,
.card,
.issue-card,
.persp,
.cap,
.lens,
.route,
.channel,
.dispatch,
.press-contact,
.doc-card,
.asset {
  background: var(--surface-panel);
  border: var(--hair) solid var(--border-structure);
  border-radius: var(--radius-object);
  box-shadow: var(--shadow-object);
}

/* ---- INSET: recessed supporting / technical region ---- */
.qblock,
.deep,
.aud,
.dir,
.mc-viz,
.explorer-controls,
.fact-list li,
.citation-box,
.asset .asset-preview {
  background: var(--surface-inset);
  border: var(--hair) solid var(--border-quiet);
  border-radius: var(--radius-inset);
  box-shadow: none;
}

/* ---- layered background: obsidian + radial glows ---- */
body {
  background:
    radial-gradient(1300px 640px at 78% -140px, rgba(92, 200, 255, 0.075), transparent 62%),
    radial-gradient(1000px 520px at 6% -60px, rgba(236, 207, 146, 0.085), transparent 58%),
    radial-gradient(900px 700px at 92% 38%, rgba(167, 139, 250, 0.05), transparent 60%),
    radial-gradient(1100px 800px at 4% 74%, rgba(79, 217, 154, 0.04), transparent 55%),
    radial-gradient(1000px 620px at 88% 96%, rgba(255, 92, 110, 0.04), transparent 60%),
    linear-gradient(180deg, var(--obsidian-2), var(--obsidian) 22%, #090a12 58%, #0a0b13 100%);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.62;
  overflow-x: hidden;
  position: relative;
}

/* faint film grain over the background (pure CSS, no files) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
}

/* barely-there cartographic grid */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(92, 200, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.02) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(1200px 900px at 50% 30%, black, transparent 85%);
  -webkit-mask-image: radial-gradient(1200px 900px at 50% 30%, black, transparent 85%);
}

/* constellation route (inline SVG in the markup) */
.bg-map {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.5;
}

/* all content above background layers */
.topnav, .rpg-hero, main, .footer { position: relative; z-index: 1; }

::selection { background: var(--gold-soft); color: #fff; }

/* ============ NAVIGATION ============ */
.topnav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 9, 15, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.nav-inner {
  /* Phase 4: matches .section's new var(--w-content) so the nav's edges stay
     aligned with the content below it (was 1220px, same value as .section). */
  max-width: var(--w-content); margin: 0 auto; padding: 11px 24px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.nav-brand {
  font-family: var(--serif); font-weight: 700; font-size: 0.98rem;
  color: var(--gold-bright); letter-spacing: 0.8px; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
/* tiny pixel sigil: a 3×3 shield built from box-shadow */
.brand-px {
  display: inline-block; width: 4px; height: 4px; background: var(--gold);
  box-shadow:
    4px 0 var(--gold), 8px 0 var(--gold),
    0 4px var(--gold-bright), 4px 4px var(--gold), 8px 4px var(--gold-bright),
    4px 8px var(--gold);
  margin-right: 8px; margin-bottom: 6px;
}
.nav-links { display: flex; gap: 4px 14px; flex-wrap: wrap; }
.nav-links a {
  color: var(--muted); text-decoration: none; font-size: 0.83rem;
  padding: 3px 2px; border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover { color: var(--ice-bright); border-bottom-color: var(--ice-soft); }
/* active section — previously marked only in the markup, with no visual state */
.nav-links a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--ice);
}

/* ============ PIXEL RPG START PAGE ============ */
.rpg-hero {
  position: relative; overflow: hidden;
  padding: 90px 24px 0;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #070812 0%, #0a0d1c 45%, #0e1020 78%, #0b0d16 100%);
}

/* --- sky --- */
.rpg-sky { position: absolute; inset: 0; pointer-events: none; }
.stars {
  position: absolute; width: 2px; height: 2px; border-radius: 0;
  background: transparent;
}
/* two star fields with slow alternating twinkle */
.stars-a {
  top: 40px; left: 30px;
  box-shadow:
    40px 10px #cdd6ea, 160px 60px #8fa4cf, 320px 24px #cdd6ea, 470px 90px #8fa4cf,
    620px 30px #cdd6ea, 760px 70px #8fa4cf, 900px 20px #cdd6ea, 1050px 80px #8fa4cf,
    1190px 40px #cdd6ea, 1330px 100px #8fa4cf, 240px 130px #6f80a4, 540px 150px #6f80a4,
    840px 140px #6f80a4, 1140px 150px #6f80a4;
  animation: twinkle 5s ease-in-out infinite;
}
.stars-b {
  top: 70px; left: 90px;
  box-shadow:
    30px 40px #8fa4cf, 190px 8px #6f80a4, 350px 70px #cdd6ea, 500px 20px #6f80a4,
    660px 90px #8fa4cf, 810px 12px #cdd6ea, 960px 60px #6f80a4, 1100px 16px #8fa4cf,
    1260px 70px #cdd6ea, 90px 120px #6f80a4, 420px 140px #8fa4cf, 720px 150px #6f80a4,
    1020px 130px #8fa4cf;
  animation: twinkle 5s ease-in-out 2.5s infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.moon {
  position: absolute; top: 56px; right: 12%;
  width: 46px; height: 46px; background: #dfe6f4; border-radius: 50%;
  box-shadow: 0 0 40px rgba(223, 230, 244, 0.35), inset -12px -8px 0 #b9c3da;
  opacity: 0.9;
}
.cloud {
  position: absolute; height: 14px; border-radius: 7px;
  background: rgba(70, 82, 116, 0.35); filter: blur(1px);
}
.cloud::before {
  content: ""; position: absolute; top: -8px; left: 22%;
  width: 45%; height: 12px; border-radius: 6px; background: inherit;
}
.cloud-1 { top: 120px; left: -140px; width: 140px; animation: drift 90s linear infinite; }
.cloud-2 { top: 180px; left: -240px; width: 200px; animation: drift 130s linear 20s infinite; }
@keyframes drift { to { transform: translateX(calc(100vw + 300px)); } }

/* --- castle skyline --- */
.castle {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: var(--skyline-h); pointer-events: none; opacity: 0.9;
}
.castle .win { animation: winFlicker 4s ease-in-out infinite; }
.castle .w2 { animation-delay: 0.9s; }
.castle .w3 { animation-delay: 1.7s; }
.castle .w4 { animation-delay: 2.6s; }
.castle .w5 { animation-delay: 3.2s; }
@keyframes winFlicker { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* --- hero frame (codex panel above the skyline) --- */
.rpg-frame {
  position: relative; z-index: 2;
  max-width: 1060px; margin: 0 auto;
  /* The bottom padding was a flat clamp(120px, 16vw, 180px) — 180px of dead
     space at 1440 that stacked with the next section's 76px padding-top. It is
     now tied to the skyline it exists to clear, so the band is always occupied
     and the codex can never sit on top of the castle. */
  padding: 46px clamp(22px, 5vw, 64px) calc(var(--skyline-h) + 20px);
  text-align: center;
}

/* torches framing the panel */
.torch { position: absolute; top: 120px; width: 8px; }
.torch-l { left: clamp(4px, 2vw, 20px); }
.torch-r { right: clamp(4px, 2vw, 20px); }
.torch .stick {
  display: block; width: 8px; height: 46px; margin-top: 14px;
  background: linear-gradient(180deg, #6b4a2a, #3d2b18);
}
.torch .flame {
  position: absolute; top: 0; left: -2px;
  width: 12px; height: 16px; border-radius: 50% 50% 35% 35%;
  background: radial-gradient(circle at 50% 80%, #ffe9a8 0%, #f2b34c 45%, #d96a2b 80%, transparent 100%);
  box-shadow: 0 0 22px rgba(242, 179, 76, 0.55), 0 0 60px rgba(242, 179, 76, 0.18);
  animation: flicker 2.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes flicker {
  0%, 100% { transform: scale(1) skewX(0deg); opacity: 0.95; }
  25% { transform: scale(1.08, 1.14) skewX(3deg); opacity: 1; }
  55% { transform: scale(0.94, 0.9) skewX(-3deg); opacity: 0.85; }
  80% { transform: scale(1.04, 1.06) skewX(2deg); opacity: 1; }
}

.hero-kicker {
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.247em;
  font-size: 0.76rem; margin-bottom: 26px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.hero-kicker::before, .hero-kicker::after {
  content: ""; flex: 0 1 140px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.hero-kicker::after { background: linear-gradient(90deg, var(--gold-soft), transparent); }

.brand-lockup {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 30px); margin-bottom: 18px;
}
.knight {
  width: clamp(64px, 9vw, 96px); height: auto; flex: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
  animation: idle 3.2s ease-in-out infinite;
}
@keyframes idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.brand-text { text-align: left; }
.brand-text h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02; letter-spacing: 0.5px;
  background: linear-gradient(100deg, var(--gold-bright), var(--gold) 55%, #b8842f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.brand-sub {
  margin-top: 4px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 5px; font-size: clamp(0.7rem, 1.6vw, 0.9rem);
}

.hero-tagline {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: #dfe4f0; max-width: 760px; margin: 0 auto 16px; line-height: 1.5;
}
.hero-intro {
  color: var(--muted); max-width: 680px; margin: 0 auto 30px; font-size: 1.02rem;
}

/* CTA buttons */
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.btn {
  display: inline-block; padding: 12px 26px; text-decoration: none;
  font-weight: 700; font-size: 0.94rem; letter-spacing: 0.4px;
  border-radius: var(--radius-xs); border: 1px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
  /* pixel-style corner notches */
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #1c1608;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(236, 207, 146, 0.28); }
.btn-secondary {
  background: var(--ice-faint); color: var(--ice);
  border-color: var(--ice-soft);
}
.btn-secondary:hover {
  transform: translateY(-2px); background: rgba(125, 220, 255, 0.16);
  border-color: var(--ice); box-shadow: 0 10px 26px rgba(125, 220, 255, 0.16);
}
.btn-ghost { color: var(--muted); border-color: var(--line); background: rgba(16, 19, 31, 0.6); }
.btn-ghost:hover { color: var(--text); border-color: var(--ice-soft); transform: translateY(-2px); }

/* ---- text action: a codex link with a pixel chevron (no default underline) ---- */
.text-link {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ice); text-decoration: none; font-weight: 700;
  font-size: 0.92rem; letter-spacing: 0.3px; padding: 4px 2px;
  border-bottom: 2px solid transparent; line-height: 1.3;
  transition: color 0.2s, border-color 0.2s;
}
.tl-chev {
  width: 7px; height: 7px; flex: none; display: inline-block;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.22s ease;
}
.text-link:hover { color: var(--ice-bright); border-bottom-color: var(--ice-soft); }
.text-link:hover .tl-chev { transform: rotate(45deg) translate(2px, -2px); }
.text-link:focus-visible { outline: 3px solid var(--ice-bright); outline-offset: 3px; border-radius: var(--radius-xs); }
/* accent variant follows the section theme */
.text-link.tl-accent { color: var(--accent); }
.text-link.tl-accent:hover { border-bottom-color: var(--accent-soft); }

/* quest map: dashed route to the first issue */
/* Phase 4: pure token alias, exact same value (900px = --w-narrow). */
.quest-map { max-width: var(--w-narrow); margin: 0 auto; }
.quest-map svg { width: 100%; height: auto; display: block; }
.qm-path { stroke: var(--gold-soft); stroke-width: 2; animation: pathmarch 3.5s linear infinite; }
@keyframes pathmarch { to { stroke-dashoffset: -48; } }
.qm-node { fill: #8fa4cf; }
.qm-marker rect { fill: var(--gold); }
.qm-marker { animation: pulse 2.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.qm-t { fill: var(--muted-2); font-size: 12px; letter-spacing: 1px; font-family: var(--mono); }
.qm-t-end { fill: var(--gold); }

/* ============ SECTION SCAFFOLD ============ */
/* Phase 4: standard content width + chapter/block rhythm tokens (§7.1/§7.2).
   Was max-width:1220px, padding:76px 24px 44px — a small, deliberate
   narrowing (1220->1160) and rhythm increase (76->96 top, 44->40 bottom),
   consumed site-wide since every top-level section (homepage, hub, static
   pages, study chapters) shares this one rule. The <=900px override just
   below is UNCHANGED (56/18/34 matches no token value, so substituting one
   would alter tested mobile/tablet geometry — left as literal by design). */
.section {
  max-width: var(--w-content); margin: 0 auto;
  padding: var(--rhythm-chapter) var(--space-5) var(--rhythm-block);
}

/* chapter mark: sigil + line + label */
.chapter-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
/* Phase 8.4B — ROUTE NODE (replaces the boxed-Roman-numeral .cm-num on every
   study chapter; .emblem-based homepage chapter-marks never used .cm-num and
   are unaffected). A 1px crosshair registration mark — drawn from the Atlas's
   own .atlas-fix gutter crosshair, §13 — plus the chapter number in mono. No
   box, no radius, no fill, no glow: D-037's "no container" answer. Apparatus
   sections (Archives/Method/Use & attribution) carry an empty .cm-num, so the
   crosshair still marks them but no number renders (§3 — unnumbered tail). */
.cm-num {
  position: relative; flex: none; width: auto; height: auto;
  display: inline-flex; align-items: center;
  padding-left: 22px; min-height: 14px;
  font-family: var(--mono); font-weight: 400; font-size: 0.82rem;
  letter-spacing: 0.03em; color: var(--text);
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.cm-num::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 11px;
  transform: translateY(-50%); pointer-events: none; opacity: 0.9;
  background:
    linear-gradient(var(--steel-dim), var(--steel-dim)) center / 100% 1px no-repeat,
    linear-gradient(var(--steel-dim), var(--steel-dim)) center / 1px 100% no-repeat;
}
.cm-line {
  flex: 0 1 120px; height: 1px;
  background: linear-gradient(90deg, var(--steel-dim), transparent);
}
.cm-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.208em;
  color: var(--steel);
}

/* small inline crosshair reused by the front-page handoff link and the
   full-study codex door — same registration mark at a smaller size. */
.rn-cross {
  position: relative; display: inline-block; flex: none; width: 9px; height: 9px;
}
.rn-cross::before, .rn-cross::after { content: ""; position: absolute; background: var(--steel-dim); }
.rn-cross::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.rn-cross::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }

/* ---- section emblems: a coherent pixel-RPG family, one per chapter ---- */
.emblem {
  position: relative; flex: none; width: 46px; height: 46px;
  display: grid; place-items: center; color: var(--accent);
  border: 1px solid var(--accent-soft); border-radius: 10px;
  background: linear-gradient(155deg, var(--accent-faint), transparent 72%);
  box-shadow: 0 0 20px var(--accent-faint);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.emblem::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid var(--accent-soft); border-radius: var(--radius-xs);
  transform: rotate(45deg); opacity: 0.32; pointer-events: none;
}
.emblem svg { width: 26px; height: 26px; display: block; position: relative; z-index: 1;
  overflow: visible; }
.emblem:hover { transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 0 26px var(--accent-soft); }

/* animated inner parts (share fill-box origin so scale/rotate stay centered) */
.emblem [class] { transform-box: fill-box; transform-origin: center; }
.em-compass .needle { transform-origin: 12px 12px; animation: emSway 6s ease-in-out infinite; }
@keyframes emSway { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
.em-lens .glint { animation: emGlint 3.6s ease-in-out infinite; }
@keyframes emGlint { 0%, 72%, 100% { opacity: 0; } 82% { opacity: 1; } }
.em-chest .lock { animation: emPulse 2.8s ease-in-out infinite; }
@keyframes emPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.em-beacon .flame { transform-origin: 12px 13px; animation: emFlame 1.9s ease-in-out infinite; }
@keyframes emFlame {
  0%, 100% { transform: scale(1) skewX(0); opacity: 0.9; }
  35% { transform: scale(1.12, 1.18) skewX(4deg); opacity: 1; }
  70% { transform: scale(0.92, 0.94) skewX(-3deg); opacity: 0.82; }
}
.em-crest .spark { animation: emPulse 2.4s ease-in-out infinite; }
.emblem:hover .needle,
.emblem:hover .flame { animation-duration: 1s; }

/* Phase 4: chapter headline measure, --w-narrow (900px, was 980px) — a
   "headline / thesis" role per §7.1. */
.section h2 {
  font-family: var(--serif); font-size: clamp(1.6rem, 3.2vw, 2.45rem);
  line-height: 1.18; letter-spacing: 0.2px; margin-bottom: 14px; max-width: var(--w-narrow);
}
/* Phase 4: lead paragraphs are §7.1's --w-prose role (720px, was 880px);
   margin-bottom moves to --rhythm-block (40px, was 34px) as genuine
   block-to-block rhythm. */
.section-lead { color: var(--muted); max-width: var(--w-prose); margin-bottom: var(--rhythm-block); font-size: 1.05rem; }

/* bold one-line takeaway — a thesis statement, §7.1's --w-narrow role
   (900px, was 880px — near-identical geometry); margin-bottom to
   --rhythm-block (40px, was 34px). */
.finding-oneliner {
  max-width: var(--w-narrow); margin-bottom: var(--rhythm-block); padding: 14px 20px;
  font-family: var(--serif); font-size: 1.16rem; line-height: 1.55; color: #dfe4f0;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-faint), transparent 75%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* "what we can't claim" strip — explanatory/caveat prose, §7.1's --w-prose
   role (720px, was 980px); bottom margin to --rhythm-block (was 26px) since
   several findings share one .section and this is the between-finding gap. */
.caveat-strip {
  margin: 8px 0 var(--rhythm-block); padding: 12px 18px; max-width: var(--w-prose);
  color: #b9c2d6; font-size: 0.9rem;
  /* Phase 6 (Step 9): already the correct INSET weight — the dashed edge is
     precisely the "annotation, not a card" signal, so it is kept verbatim and
     only re-pointed onto the inset radius token (identical computed value). */
  border: var(--hair) dashed rgba(154, 166, 192, 0.35); border-radius: var(--radius-inset);
  background: rgba(154, 166, 192, 0.04);
}
.caveat-strip b { color: #d5dbe8; }

/* ============ STUDY COVER (Issue 01) — Phase 8.4B OPENING FIELD ============
   The card hero (.study-frame: 22px rounded surface, gold corner ticks, gold
   radial wash, gradient-clipped title) is retired outright — not replaced by
   another card. The opening is an open field: publication line, masthead,
   deck, scale register and honest-limit line, each a bare block with hairline
   rules, no enclosing container at any level (D-037's "no container" case). */
.study-cover { padding-top: 90px; }

.pub-line {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--steel-dim); margin-bottom: 26px;
}
.pub-line::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

.study-title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.05rem) !important;
  line-height: 1.04; letter-spacing: -0.012em; max-width: 19ch;
  margin-bottom: 22px; color: var(--text); text-shadow: none;
}
/* Phase 4: study-page-only intro paragraph (not the protected homepage
   hero) — narrative prose, §7.1's --w-prose role (720px, was 820px).
   Phase 8.4B: --body replaces --muted (§12 — reading copy, not a caption). */
.hero-sub {
  max-width: var(--w-prose); color: var(--body); font-size: 1.06rem;
  line-height: 1.66; margin-bottom: 28px;
}
.hero-sub strong { color: var(--text); font-weight: 700; }

/* the scale register — one measured line between two hairlines, replacing
   the seven-tile #hero-stats grid. Static markup: 202,000/3,111/etc. are
   fixed canonical corpus facts (CLAUDE.md), never re-derived by script. */
.scale-register {
  display: flex; flex-wrap: wrap; margin: 0 0 28px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0; font-family: var(--mono);
}
.scale-register span {
  padding: 4px 18px 4px 0; margin-right: 18px;
  border-right: 1px solid var(--line-soft);
  font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-2); white-space: nowrap;
}
.scale-register span:last-child { border-right: 0; margin-right: 0; }
.scale-register b {
  color: var(--text); font-weight: 700; letter-spacing: 0; font-size: 0.95rem;
  margin-right: 6px;
}

/* honest-limit line: the existing .safety-note annotation now holds its
   "Limits ▸" disclosure as a native <details>/<summary> — the always-visible
   honest-warning sentence lives in the summary (never hidden by either
   state), the sample-fairness sentence is the collapsible remainder (§17). */
.limit-disclosure summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  justify-content: space-between; gap: 16px;
  /* overrides the generic archive-drawer "details summary" rule (gold
     --accent, font-weight 600) — this summary is body copy, not a drawer
     label; only .limit-trigger below stays a distinct (ice) affordance. */
  color: inherit; font-weight: 400; font-size: inherit;
}
.limit-disclosure summary::before { color: var(--steel-dim); }
.limit-disclosure summary:hover { color: inherit; }
.limit-disclosure summary::-webkit-details-marker { display: none; }
.limit-disclosure .limit-trigger {
  flex: none; color: var(--ice); font-weight: 700; font-size: 0.86rem;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.limit-disclosure .limit-trigger .tl-chev { width: 6px; height: 6px; }
.limit-disclosure[open] .limit-trigger .tl-chev { transform: rotate(45deg) translate(1px, -1px); }
.limit-disclosure p { margin: 10px 0 0; }

/* ============ METRIC FAMILY (Phase 5) ============
   One evidence-value grammar shared by every true research-metric tile or
   ledger row: study hero (.stat), community-voice numbers (.bigstat/.bs-v),
   the homepage latest-issue panel (.lt-metrics) and the codex ledger
   (.co-ledger) — §7.6/Step 3: value = serif/bold/tabular-nums, label = plain
   sans, never uppercase or tracked (that role belongs to kicker/metadata
   text elsewhere, e.g. .ic-cat/.cm-label). Gold is the default value colour
   (D-011); a themed chapter may substitute its local --accent (D-029) — see
   .bs-v below. Box geometry (padding/border/shadow) is deliberately left
   per-component; consolidating those shapes is Phase 6's job, not this
   phase's (§7.4). Chart/table/heatmap/explorer values, chapter numerals,
   and single-line publication metadata (.ds-metric, .ic-metric) are not
   part of this family and were left untouched. */
.bs-v,
.latest .lt-metrics .v,
.co-lg dt {
  font-family: var(--serif); font-weight: 700;
  color: var(--gold-bright); font-variant-numeric: tabular-nums;
}
.bs-l,
.latest .lt-metrics .l,
.co-lg dd {
  font-family: var(--sans); font-weight: 400;
  text-transform: none; letter-spacing: normal; color: var(--muted-2);
}
/* Phase 8.4B: .hero-stats/.stat (the seven-tile hero grid, JS-rendered into
   #hero-stats) is retired — the opening field's .scale-register replaces it
   with a static measured line (§10). Removed here rather than left to fight
   the new system (CLAUDE.md §7); .stat never appeared outside the hero, so
   nothing else consumed this rule. */

/* ---- "player's route" panel with the glowing arc ---- */
/* Phase 6: an OBJECT (a discrete evidence figure) sitting inside the quiet
   study-frame SURFACE. Edge/radius/depth come from the recipe; only the
   cyan floor-glow wash over the shared object fill stays as identity. */
.journey-panel {
  background:
    radial-gradient(600px 200px at 50% 110%, rgba(92, 200, 255, 0.06), transparent 70%),
    var(--surface-panel);
  padding: 22px 22px 14px; margin-bottom: 28px;
}
.journey-title {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.137em;
  color: var(--muted); margin-bottom: 6px; text-align: center;
}
/* the trust route: five waypoints on a dashed road, each with a pixel
   trust gauge whose height is proportional to the real value (0–40% scale) */
.trust-route {
  --tr-gauge-h: 132px;
  list-style: none; margin: 6px 0 4px; padding: 34px 6px 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 10px;
  position: relative;
}
.trust-route::before { /* the road */
  content: ""; position: absolute; left: 2.5%; right: 2.5%;
  top: calc(34px + var(--tr-gauge-h) + 21px); height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--gold-soft) 0 7px, transparent 7px 14px);
}
.tr-stop {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: var(--tr-gauge-h) 34px auto auto;
  justify-items: center; row-gap: 4px;
}
.mood-neg { --mood: var(--crimson); --mood-soft: var(--crimson-soft); }
.mood-pos { --mood: var(--emerald); --mood-soft: var(--emerald-soft); }
.mood-mid { --mood: var(--gold); --mood-soft: var(--gold-soft); }
.mood-vet { --mood: var(--violet); --mood-soft: var(--violet-soft); }
.tr-gauge { position: relative; display: block; width: 100%; }
.tr-gauge i {
  position: absolute; bottom: 0; left: 50%; width: 22px; height: var(--gauge);
  transform: translateX(-50%); transform-origin: bottom;
  background: var(--mood); border-radius: 2px;
  box-shadow: 0 0 16px var(--mood-soft);
}
.tr-gauge i::after { /* segmented pixel blocks */
  content: ""; position: absolute; inset: 0; border-radius: 2px;
  background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(8, 9, 15, 0.85) 8px 11px);
}
.tr-val {
  position: absolute; left: 50%; bottom: calc(var(--gauge) + 8px);
  transform: translateX(-50%);
  font-family: var(--serif); font-weight: 700; font-size: 1.18rem;
  color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px var(--mood-soft);
}
.tr-icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--mood-soft); border-radius: 8px;
  color: var(--mood);
  box-shadow: 0 0 12px var(--mood-soft), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.tr-icon svg { width: 22px; height: 22px; display: block; }
.tr-name { font-size: 0.86rem; color: #c3cde2; text-align: center; line-height: 1.25; margin-top: 2px; }
.tr-hours { font-size: 0.74rem; color: var(--muted-2); text-align: center; }
/* one-time grow-in when the chapter first scrolls into view */
.reveal .tr-gauge i { transition: transform 0.8s cubic-bezier(0.25, 1, 0.4, 1); }
.reveal .tr-val { transition: opacity 0.5s ease 0.45s; }
.reveal:not(.visible) .tr-gauge i { transform: translateX(-50%) scaleY(0); }
.reveal:not(.visible) .tr-val { opacity: 0; }
.tr-stop:nth-child(2) .tr-gauge i { transition-delay: 0.12s; }
.tr-stop:nth-child(3) .tr-gauge i { transition-delay: 0.24s; }
.tr-stop:nth-child(4) .tr-gauge i { transition-delay: 0.36s; }
.tr-stop:nth-child(5) .tr-gauge i { transition-delay: 0.48s; }
.journey-note { color: var(--muted); font-size: 0.86rem; text-align: center; margin-top: 10px; }
.journey-note a { color: var(--blue); text-decoration: none; }
.journey-note a:hover { text-decoration: underline; }

/* ---- honest-limit field note ---- */
/* Phase 4: explanatory caution copy, §7.1's --w-prose role (720px, was 940px). */
/* Phase 8.4B acceptance correction: the Phase 6 filled-panel/amber-wash
   treatment still read as a card inside the new open-field hero (dark fill,
   heavy gold rail, the whole paragraph in warm colour, excess mobile height).
   Retired in favour of a FIELD NOTE — a thin registration rail, no fill, no
   radius, cool readable body text, "Limits ▸" the only ice/cyan element. Load
   -bearing meaning is unchanged (CLAUDE.md §9); only the surface changed. */
.safety-note {
  max-width: var(--w-prose);
  background: none;
  border: 0; border-left: 2px solid var(--steel-dim);
  border-radius: 0; padding: 2px 0 2px 18px;
  color: var(--body); font-size: 0.92rem; line-height: 1.55;
}
.safety-note strong { color: var(--text); }
.limit-kicker {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--steel-dim); margin: 0 0 6px;
}

/* ============ RESEARCH ISSUE CARDS (quest board) ============ */
/* count-aware grid: app.js sets data-count; 3 cards per row by default,
   with balancing rules so the last row never strands a lone card */
.issue-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
}
.issue-card { grid-column: span 2; }
.issue-grid[data-count="1"] .issue-card { grid-column: 1 / -1; }
.issue-grid[data-count="2"] .issue-card,
.issue-grid[data-count="4"] .issue-card { grid-column: span 3; }
/* counts of 3n+2: widen the last two cards into a balanced final row */
.issue-grid[data-count="5"] .issue-card:nth-last-child(-n+2),
.issue-grid[data-count="8"] .issue-card:nth-last-child(-n+2),
.issue-grid[data-count="11"] .issue-card:nth-last-child(-n+2) { grid-column: span 3; }
/* counts of 3n+1: the first (published) card becomes a full-width featured quest */
.issue-grid[data-count="7"] .issue-card:first-child,
.issue-grid[data-count="10"] .issue-card:first-child,
.issue-grid[data-count="13"] .issue-card:first-child { grid-column: 1 / -1; min-height: 0; }
.issue-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 24px 24px 20px; min-height: 190px;
  /* Phase 6: keeps its gold gradient border — published research is charted
     evidence, and gold is that role (D-011). Only radius and depth join the
     shared OBJECT scale. */
  background:
    linear-gradient(var(--panel-2), var(--panel)) padding-box,
    linear-gradient(160deg, var(--gold-soft), var(--line) 45%, var(--gold-faint)) border-box;
  border: var(--hair) solid transparent;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.issue-card:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), 0 0 26px var(--gold-faint); }
.issue-card.is-planned {
  background:
    linear-gradient(var(--panel-2), var(--panel)) padding-box,
    linear-gradient(160deg, rgba(154, 166, 192, 0.25), var(--line) 45%, rgba(154, 166, 192, 0.08)) border-box;
}
.issue-card.is-planned:hover { box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4); }
.ic-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ic-status {
  display: inline-block; padding: 3px 11px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.165em; border-radius: var(--radius-pill);
}
.ic-status.published { color: #1c1608; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.ic-status.planned { color: var(--muted); border: 1px solid rgba(154, 166, 192, 0.4); background: rgba(154, 166, 192, 0.07); }
.ic-status.draft { color: var(--blue); border: 1px solid var(--blue-soft); background: rgba(92, 200, 255, 0.07); }
.ic-cat { color: var(--muted-2); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 1.6px; }
.ic-title { font-family: var(--serif); font-size: 1.16rem; line-height: 1.32; color: var(--text); }
.is-planned .ic-title { color: #c8d0e2; }
.ic-summary { color: var(--muted); font-size: 0.9rem; flex: 1; }
.ic-metric {
  color: var(--gold-bright); font-family: var(--serif); font-weight: 700;
  font-size: 0.95rem; font-variant-numeric: tabular-nums;
}
.is-planned .ic-metric { color: var(--muted-2); }
/* the card action uses the same codex link as the rest of the site:
   no browser underline, a pixel chevron, and a visible focus state */
.ic-link {
  align-self: flex-start; margin-top: 4px; color: var(--ice);
  text-decoration: none; font-weight: 700; font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ic-link:hover { color: var(--ice-bright); border-bottom-color: var(--ice-soft); }
.ic-link:hover .tl-chev { transform: rotate(45deg) translate(2px, -2px); }
/* planned cards get a quiet status line, not a dead-looking metric */
.ic-soon {
  align-self: flex-start; margin-top: 4px; font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--muted-2); border-top: 1px dashed var(--line); padding-top: 9px; width: 100%;
}
.ic-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ic-tag {
  font-size: 0.7rem; color: var(--muted-2); padding: 2px 9px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
}

/* ============ KEY FINDINGS: EDITORIAL CARD SET ============ */
/* 4 findings: one lead card (left, full height) + three supporting cards
   stacked on the right. A deliberate composition — no orphan row at any width. */
.mini-cards {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: stretch;
}
/* Phase 6: OBJECT recipe supplies fill/edge/radius/depth. The ice hairline,
   the hover lift and the lead card's gold wash stay as identity. */
.mini-card {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  padding: 20px 22px; text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  overflow: hidden;
}
.mini-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ice), transparent);
  opacity: 0.55;
}
.mini-card:hover {
  transform: translateY(-3px);
  border-color: var(--ice-soft);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 24px var(--ice-faint);
}
.mc-badge {
  align-self: flex-start;
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.159em;
  text-transform: uppercase; color: var(--ice);
  border: 1px solid var(--ice-soft); border-radius: var(--radius-pill);
  padding: 3px 11px; background: var(--ice-faint);
}
.mc-num {
  font-family: var(--serif); font-size: 1.95rem; font-weight: 700;
  color: var(--gold-bright); font-variant-numeric: tabular-nums; line-height: 1.05;
}
.mc-head { color: var(--text); font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.mc-why { color: var(--muted); font-size: 0.87rem; }
.mc-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px;
  color: var(--ice); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.3px;
  transition: color 0.2s ease;
}
.mini-card:hover .mc-cta { color: var(--ice-bright); }
.mini-card .tl-chev { color: currentColor; }
.mini-card:hover .tl-chev { transform: rotate(45deg) translate(2px, -2px); }

/* lead finding: taller, spans the three stacked supporting cards */
.mc-lead {
  grid-column: 1; grid-row: 1 / span 3;
  gap: 14px; padding: 30px 30px 26px;
  border-color: var(--gold-soft);
  background:
    radial-gradient(460px 220px at 12% 0%, var(--gold-faint), transparent 68%),
    var(--surface-panel);
}
.mc-lead .mc-num { font-size: 3.4rem; }
.mc-lead .mc-head { font-size: 1.5rem; font-family: var(--serif); line-height: 1.2; }
.mc-lead .mc-why { font-size: 0.98rem; max-width: 46ch; }
.mc-lead .mc-cta { font-size: 0.92rem; }

/* ---- lead-card evidence plot ----
   The lead card used to end in a large dead area. It now carries the finding's
   own two numbers as a small comparison plot: negativity either side of the
   two-hour refund line. Data, not decoration — the values match the copy. */
/* Phase 6: this plot lives INSIDE the lead finding card, so it takes the INSET
   recipe — recessed into the card rather than a second card stacked on it.
   (Before Phase 6 it carried the full --line object border at radius 12, which
   read as card-within-card.) */
.mc-viz {
  display: block; margin-top: 4px; padding: 16px 18px 13px;
  position: relative; overflow: hidden;
}
/* the refund threshold, marked once across the plot */
.mcv-axis {
  display: flex; align-items: center; gap: 8px; margin-bottom: 11px;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted-2);
}
.mcv-axis::after {
  content: ""; flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px);
}
.mcv-row {
  display: grid; grid-template-columns: 8.2em 1fr 3.4em;
  align-items: center; gap: 11px; margin-bottom: 8px;
}
.mcv-row:last-of-type { margin-bottom: 0; }
.mcv-label { font-size: 0.76rem; color: var(--muted); line-height: 1.25; }
.mcv-track {
  height: 9px; border-radius: var(--radius-pill); position: relative; overflow: hidden;
  background: rgba(125, 220, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(125, 220, 255, 0.08);
}
.mcv-bar {
  position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill);
  /* 45% is the plot ceiling, so the leading bar reads near-full but not clipped */
  width: calc(var(--pct) * 100% / 45);
  background: linear-gradient(90deg, rgba(125, 220, 255, 0.45), var(--ice));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.28, 1);
}
/* the harsher side of the line reads warm, matching the "charted/alert" logic */
.mcv-bar-hot {
  background: linear-gradient(90deg, rgba(255, 138, 120, 0.5), #ff9f7a);
  box-shadow: 0 0 14px rgba(255, 140, 110, 0.3);
}
.section.visible .mcv-bar { transform: scaleX(1); }
.section.visible .mcv-row:nth-of-type(2) .mcv-bar { transition-delay: 0.14s; }
.mcv-val {
  font-family: var(--serif); font-weight: 700; font-size: 1.02rem;
  color: var(--gold-bright); text-align: right; font-variant-numeric: tabular-nums;
}
.mcv-row-cool .mcv-val { color: var(--muted); }
.mcv-cap {
  display: block; margin-top: 11px; padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.72rem; color: var(--muted-2); line-height: 1.4;
}

/* ============ CHAPTER QUEST BLOCKS (what / where / why / to do) ============ */
/* always 4 blocks → a deliberate 2×2; auto-fit used to strand block 4 alone */
.qgrid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-bottom: 30px;
}
/* Phase 6: interpretation blocks are INSET — supporting reading recessed into
   the chapter, not four more floating cards (they were --radius 16px "cards"
   before). The chapter-accent rail and the glass blur stay. */
.qblock {
  position: relative; padding: 20px 22px 18px 24px;
  backdrop-filter: blur(4px);
}
.qblock::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 3px; background: var(--accent); opacity: 0.75;
}
.qblock h3 {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 2.2px;
  color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 700;
}
.qblock h3::before { font-size: 0.85rem; }
.qb-what h3::before { content: "✦"; }
.qb-where h3::before { content: "◈"; }
.qb-why h3::before { content: "!"; font-family: var(--serif); font-weight: 700; }
.qb-todo h3::before { content: "▸"; }
.qblock p { color: #c4cbdd; font-size: 0.94rem; }
.qblock p b { color: var(--text); }
.qb-todo { border-color: rgba(79, 217, 154, 0.25); }
.qb-todo::before { background: var(--emerald); }
.qb-todo h3 { color: var(--emerald); }

/* ============ STAT STRIP (community voice) ============ */
/* 4 big numbers → 4 / 2×2 / 1 column; auto-fit used to leave a 3+1 row on tablets */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin: 6px 0 26px;
}
/* Phase 6: same OBJECT shape as every other metric tile (§7.4 Step 7) —
   only the padding and centring are local. Phase-5 typography untouched. */
.bigstat {
  padding: 18px 20px; text-align: center;
}
.bs-v {
  /* community-voice chapter tint (D-029): --accent resolves to violet only
     under [data-theme="violet"] (§voice), so this is the documented local-
     accent mechanism, not a hardcoded one-off colour. */
  display: block; font-size: 2.1rem; line-height: 1.15;
  color: var(--accent); text-shadow: 0 0 24px var(--accent-soft);
}
.bs-l { display: block; font-size: 0.82rem; margin-top: 6px; }

/* ============ GENRE CHIPS ============ */
.genre-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.gchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; font-size: 0.8rem; color: #c8d0e2;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.gchip::before { font-size: 0.85rem; line-height: 1; }
.g-mmo::before { content: "◉"; color: var(--violet); }
.g-rpg::before { content: "❖"; color: var(--gold); }
.g-shooter::before { content: "◢"; color: var(--crimson); }
.g-strategy::before { content: "⬡"; color: var(--blue); }
.g-sim::before { content: "▦"; color: var(--emerald); }
.g-vr::before { content: "◎"; color: var(--blue); }
.g-speed::before { content: "≫"; color: var(--gold-bright); }
.g-horror::before { content: "▲"; color: var(--crimson); }

/* ============ CODEX CARDS ============ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
/* Phase 6: the codex card keeps its chapter-accent gradient border and corner
   ticks — that is the RPG identity §7.4 explicitly protects. Only radius and
   depth join the shared OBJECT scale. */
.card {
  position: relative; padding: 26px 24px 22px;
  background:
    linear-gradient(var(--panel-2), var(--panel)) padding-box,
    linear-gradient(160deg, var(--accent-soft), var(--line) 40%, var(--line) 60%, var(--accent-faint)) border-box;
  border: var(--hair) solid transparent;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), 0 0 26px var(--accent-faint); }
.card::before, .card::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0.85;
}
.card::before { top: 7px; left: 7px; border-top: 1.5px solid var(--accent-soft); border-left: 1.5px solid var(--accent-soft); }
.card::after { bottom: 7px; right: 7px; border-bottom: 1.5px solid var(--accent-soft); border-right: 1.5px solid var(--accent-soft); }
.card h3 { font-family: var(--serif); font-size: 1.18rem; margin-bottom: 10px; line-height: 1.35; }
.card-proof { color: var(--muted); font-size: 0.95rem; }
.card-proof b { color: var(--text); font-variant-numeric: tabular-nums; }

/* playbook direction tags */
.playbook .card h3 { color: var(--gold-bright); font-size: 1.08rem; }
.pb-tag {
  display: inline-block; margin-bottom: 10px; padding: 3px 12px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--emerald); border: 1px solid var(--emerald-soft); border-radius: 6px;
  background: rgba(79, 217, 154, 0.06);
}

/* ============ ARCHIVE DRAWERS (details) ============ */
details { margin-top: 14px; }
details summary {
  cursor: pointer; color: var(--accent); font-size: 0.9rem; font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: 9px;
  transition: color 0.2s;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: "▸"; font-size: 0.85rem;
  transition: transform 0.25s ease;
}
details[open] summary::before { transform: rotate(90deg); }
details[open] summary { margin-bottom: 12px; }
details summary:hover { color: var(--gold-bright); }
details ul { padding-left: 20px; color: var(--muted); font-size: 0.9rem; display: grid; gap: 8px; }

/* Phase 6: archive drawers are INSET — a recessed secondary shelf, keeping the
   chapter-accent left rail and wash as identity. */
.deep {
  position: relative; margin-top: 26px; padding: 18px 22px;
  background:
    linear-gradient(90deg, var(--accent-faint), transparent 30%),
    var(--surface-inset);
  border-left: 3px solid var(--accent-soft);
}
.deep summary::after {
  content: "archive"; margin-left: 10px; padding: 2px 9px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.deep > ul, .deep > .grid2 { animation: drawer 0.3s ease; }
@keyframes drawer {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ CHARTS ============ */
/* Phase 6: a figure is a SURFACE — the quiet environment a chart lives in, not
   an object competing with the bars inside it. The study page carries ten of
   these; at full object strength they read as ten stacked cards down the page.
   Fill/edge/radius/depth come from the SURFACE recipe. */
.chart-block {
  padding: 24px; margin-bottom: 22px;
}
.chart-block h3, .chart-block h4 {
  font-size: 1.02rem; margin-bottom: 18px; color: #dde3f0; letter-spacing: 0.2px;
}
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.chart-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.chart-toggle button {
  background: var(--panel); color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 5px 15px; cursor: pointer; font-size: 0.8rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.chart-toggle button:hover { border-color: var(--accent-soft); color: var(--text); }
.chart-toggle button.active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #1c1608; border-color: var(--gold); font-weight: 700;
}
.chart-note { color: var(--muted); font-size: 0.86rem; margin-top: 14px; }
.chart-note a { color: var(--blue); text-decoration: none; }
.chart-note a:hover { text-decoration: underline; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }

.barchart { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 235px 1fr 122px; gap: 12px; align-items: center; }
.bar-row .bl {
  font-size: 0.84rem; color: var(--muted); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-track {
  background: rgba(6, 7, 12, 0.65); border: 1px solid rgba(35, 42, 64, 0.6);
  border-radius: 7px; height: 22px; position: relative; overflow: hidden;
}
.bar-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #2477c9, var(--blue));
  box-shadow: 0 0 12px rgba(92, 200, 255, 0.25);
  transition: width 0.6s cubic-bezier(0.25, 1, 0.4, 1);
}
.bar-fill.neg { background: linear-gradient(90deg, #a53344, var(--crimson)); box-shadow: 0 0 12px rgba(255, 92, 110, 0.22); }
.bar-fill.pos { background: linear-gradient(90deg, #1d7f4c, var(--emerald)); box-shadow: 0 0 12px rgba(79, 217, 154, 0.22); }
.bar-val { font-size: 0.88rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-val .n { color: var(--muted-2); font-weight: 400; font-size: 0.73rem; }

/* ---- negativity map ----
   table-layout: fixed + an explicit colgroup replaces the browser's own
   auto-sizing, which had been giving the row-name column a much larger share
   of the width than its content needs, at the direct expense of the four
   evidence columns (Phase 2, owner visual review). */
.heatmap-wrap { overflow-x: auto; border-radius: var(--radius-inset); }
.heatmap { border-collapse: collapse; width: 100%; min-width: 660px; table-layout: fixed; }
.heatmap col.hm-col-name { width: 24%; }
.heatmap th, .heatmap td { padding: 8px 10px; font-size: 0.82rem; text-align: center; border: 1px solid #171d30; }
.heatmap th { color: var(--muted); font-weight: 600; letter-spacing: 0.3px; }
.heatmap th:first-child { text-align: left; }
.heatmap .rowname {
  text-align: left; color: var(--muted); font-weight: 400;
  white-space: normal; line-height: 1.3;
}
.heatmap td.cell { font-weight: 700; color: #0b1520; font-variant-numeric: tabular-nums; }
.heatmap td.empty {
  background: repeating-linear-gradient(45deg, #10141f, #10141f 6px, #161b2a 6px, #161b2a 12px);
  color: var(--muted-2); font-weight: 400; font-size: 0.72rem;
}
.lown { opacity: 0.75; font-weight: 400; }

/* ============ CHECK IT YOURSELF ============ */
/* Phase 6: the filter row is a tool region belonging to the table below it, so
   it takes the INSET recipe. It used to carry the full object treatment, which
   made one instrument read as two stacked cards. */
.explorer-controls {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 18px;
  padding: 16px 18px;
}
.explorer-controls label { color: var(--muted); font-size: 0.88rem; display: flex; gap: 8px; align-items: center; }
.explorer-controls select {
  background: var(--obsidian-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-size: 0.88rem; max-width: 260px;
  min-height: 44px;
}
.explorer-controls select:focus { outline: none; border-color: var(--blue-soft); }
.ex-hint { color: var(--muted-2); font-size: 0.8rem; }
/* Phase 6: the table is the SURFACE the explorer's evidence sits on. */
#explorer-table { padding: 6px 14px 14px; overflow-x: auto; }
#explorer-table table { border-collapse: collapse; width: 100%; table-layout: fixed; }
/* deliberate column model: three description columns get only the width
   their actual content needs, so the three numeric columns -- the reason
   the table exists -- get more of the remaining space (Phase 2). */
#explorer-table col.ex-col-age { width: 10%; }
#explorer-table col.ex-col-type { width: 24%; }
#explorer-table col.ex-col-hours { width: 25%; }
#explorer-table col.ex-col-reviews { width: 12%; }
#explorer-table col.ex-col-neg { width: 12%; }
#explorer-table col.ex-col-share { width: 17%; }
#explorer-table th, #explorer-table td {
  padding: 9px 12px; font-size: 0.86rem; border-bottom: 1px solid var(--line-soft);
  text-align: right; font-variant-numeric: tabular-nums;
}
#explorer-table th:first-child, #explorer-table td:first-child,
#explorer-table th:nth-child(2), #explorer-table td:nth-child(2),
#explorer-table th:nth-child(3), #explorer-table td:nth-child(3) { text-align: left; }
#explorer-table th {
  color: var(--gold); position: sticky; top: 52px; background: #0c0e17;
  font-weight: 600; letter-spacing: 0.3px; z-index: 2;
}
#explorer-table tbody tr:nth-child(even) td { background: rgba(21, 25, 40, 0.35); }
#explorer-table tr.low td { color: #6d7a94; font-style: italic; }
#explorer-table tr:hover td { background: rgba(236, 207, 146, 0.06); }
.negcell { color: var(--crimson); font-weight: 700; }
.pctcell { white-space: nowrap; }
.mini {
  display: inline-block; width: 52px; height: 7px; background: rgba(6, 7, 12, 0.7);
  border-radius: var(--radius-xs); margin-right: 8px; vertical-align: middle; overflow: hidden;
}
.mini i { display: block; height: 100%; background: linear-gradient(90deg, #a53344, var(--crimson)); border-radius: var(--radius-xs); }

/* ============ MOBILE DATA VIEWERS (Phase 2) ============
   The heatmap and the explorer are the two heaviest, most multidimensional
   surfaces in the study. At >=768px both remain directly embedded, unchanged
   in character. Below that, each is replaced in the normal reading flow by
   a launch panel; opening it shows a full-screen <dialog> that re-presents
   the SAME canonical data (D.wave_x_cluster / D.explorer, via app.js's
   matrixTableHTML() / explorerTableHTML() / filterExplorerRows()) reorganised
   for vertical phone reading. Desktop never sees the launch panel or the
   dialog chrome; mobile never has to drag a wide table sideways to read it.
   767/768 is intentionally outside the canonical scale (Phase 7). */

.data-launch { display: none; }

@media (max-width: 767px) {
  /* the heavy inline surfaces are not the mobile reading path */
  #heatmap, #heatmap + .chart-note, .explorer-controls, #explorer-table { display: none; }

  /* Phase 6 (Step 8): the launch panel is the PRIMARY mobile Object for this
     evidence, so it takes the object radius and depth. Its ice edge is kept at
     full strength — it is a real control, and ice is the interaction role
     (D-011). Button semantics, icon, kicker, title, description, CTA, aria
     wiring and the 88px target are untouched. */
  .data-launch {
    display: flex; align-items: center; gap: 16px; width: 100%;
    min-height: 88px; padding: 16px 18px; margin: 6px 0 4px;
    background: linear-gradient(155deg, var(--ice-faint), var(--panel) 70%);
    border: var(--hair) solid var(--ice-soft); border-radius: var(--radius-object);
    box-shadow: var(--shadow-object);
    color: var(--text); text-align: left; cursor: pointer; font-family: inherit;
    transition: border-color 0.2s, transform 0.2s;
  }

  /* ...and the figure hosting it stops competing. At this width the heatmap and
     its caveat are hidden, so this .chart-block is only a heading wrapped round
     a launch panel — a frame around a frame. Dissolving it to plain structure
     keeps the heading in the reading flow and leaves one object in view, with no
     markup change. Unsupported :has() simply yields today's rendering. */
  .chart-block:has(> .data-launch) {
    background: none; border: 0; box-shadow: none; border-radius: 0;
    padding: 0; margin-bottom: 18px;
  }
  .data-launch:hover { border-color: var(--ice); }
  .data-launch:active { transform: translateY(1px); }
  .dl-icon { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
  .dl-icon span {
    display: inline-block; width: 6px; height: 6px; background: var(--ice-bright);
    box-shadow:
      9px 0 var(--gold-bright), 18px 0 var(--ice),
      0 9px var(--gold), 9px 9px var(--ice-bright), 18px 9px var(--gold-bright),
      0 18px var(--ice), 9px 18px var(--gold), 18px 18px var(--ice-bright);
  }
  .dl-body { flex: 1 1 auto; min-width: 0; }
  .dl-kicker {
    display: block; font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); margin-bottom: 3px;
  }
  .dl-title { display: block; font-weight: 700; color: var(--ice-bright); font-size: 1rem; margin-bottom: 4px; }
  .dl-desc { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.42; }
  .dl-cta {
    display: flex; align-items: center; gap: 6px; margin-top: 9px;
    font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--gold-bright); font-weight: 700;
  }
  .dl-arrow { display: inline-block; transition: transform 0.2s; }
  .data-launch:hover .dl-arrow, .data-launch:focus-visible .dl-arrow { transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) {
    .data-launch, .dl-arrow { transition: none; }
    .data-launch:hover .dl-arrow, .data-launch:focus-visible .dl-arrow { transform: none; }
  }

  /* ---- the full-screen viewer itself ---- */
  .data-viewer { padding: 0; margin: 0; border: none; max-width: none; max-height: none; background: var(--obsidian); color: var(--text); }
  .data-viewer::backdrop { background: rgba(4, 5, 9, 0.86); }
  .data-viewer[open] {
    position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .dv-head {
    flex: none; position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; padding: 14px 16px;
    background: var(--obsidian); border-bottom: 1px solid var(--line);
  }
  .dv-head-text { min-width: 0; }
  .dv-eyebrow { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); }
  .dv-title { font-family: var(--serif); font-size: 1.04rem; color: var(--gold-bright); margin: 2px 0 0; }
  .dv-close {
    flex: none; display: flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px;
    padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--text); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em;
    text-transform: uppercase; cursor: pointer;
  }
  .dv-close:hover { border-color: var(--ice-soft); color: var(--ice-bright); }
  .dv-close svg { width: 14px; height: 14px; flex: none; }
  .dv-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }

  .dv-modeswitch { display: flex; gap: 6px; margin-bottom: 16px; }
  .dv-mode {
    flex: 1 1 0; min-height: 44px; padding: 8px 10px; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted);
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer;
  }
  .dv-mode[aria-pressed="true"] {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #1c1608;
    border-color: var(--gold); font-weight: 700;
  }

  .dv-stages { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .dv-stage {
    flex: 1 1 calc(50% - 4px); min-height: 44px; padding: 8px 12px; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted);
    font-size: 0.84rem; cursor: pointer;
  }
  .dv-stage[aria-pressed="true"] {
    background: var(--gold-faint); border-color: var(--gold-soft); color: var(--gold-bright);
    font-weight: 700; box-shadow: inset 3px 0 0 var(--gold);
  }
  .dv-count { font-family: var(--mono); font-size: 0.76rem; color: var(--muted-2); margin: 0 0 10px; letter-spacing: 0.02em; }

  .ranked-list { display: flex; flex-direction: column; }
  .ranked-row { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .ranked-row:first-child { border-top: 1px solid var(--line-soft); }
  .rr-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
  .rr-rank { font-family: var(--mono); color: var(--muted-2); font-size: 0.82rem; flex: none; width: 22px; }
  .rr-label { flex: 1 1 auto; font-weight: 600; color: var(--text); }
  .rr-value { font-family: var(--mono); font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .rr-track {
    background: rgba(6, 7, 12, 0.65); border: 1px solid rgba(35, 42, 64, 0.6);
    border-radius: 7px; height: 16px; overflow: hidden; margin-bottom: 6px;
  }
  .rr-fill { height: 100%; border-radius: 6px; }
  .rr-meta { font-family: var(--mono); font-size: 0.74rem; color: var(--muted-2); margin: 0; }
  .ranked-row.no-data .rr-meta { font-style: italic; }

  .dv-scrollcue { font-family: var(--mono); font-size: 0.7rem; color: var(--muted-2); letter-spacing: 0.05em; margin: 0 0 8px; }
  .dv-scrollfade { position: relative; }
  .dv-scrollfade::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 26px;
    background: linear-gradient(90deg, transparent, var(--obsidian)); pointer-events: none;
  }

  /* ---- explorer viewer specifics ---- */
  .exv-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .exv-filters label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 0.82rem; }
  .exv-filters select {
    min-height: 44px; background: var(--obsidian-2); color: var(--text); border: 1px solid var(--line);
    border-radius: 8px; padding: 8px 10px; font-size: 0.9rem;
  }
  .exv-summary { font-family: var(--mono); font-size: 0.78rem; color: var(--muted-2); margin: 0 0 14px; }
  .exv-cards { display: flex; flex-direction: column; }
  .exv-card { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .exv-card:first-child { border-top: 1px solid var(--line-soft); }
  .exv-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
  .exv-age { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--steel); }
  .exv-pct { font-family: var(--mono); font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
  .exv-pct.negcell { color: var(--crimson); }
  .exv-cluster { font-weight: 600; margin: 0 0 2px; }
  .exv-pt { color: var(--muted); font-size: 0.86rem; margin: 0 0 8px; }
  .exv-track {
    background: rgba(6, 7, 12, 0.65); border: 1px solid rgba(35, 42, 64, 0.6);
    border-radius: 7px; height: 14px; overflow: hidden; margin-bottom: 6px;
  }
  .exv-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #a53344, var(--crimson)); }
  .exv-n { font-family: var(--mono); font-size: 0.74rem; color: var(--muted-2); margin: 0; }
  .exv-card.low .exv-cluster, .exv-card.low .exv-pt { color: #6d7a94; font-style: italic; }
  .dv-showmore {
    display: block; width: 100%; min-height: 44px; margin-top: 12px; padding: 10px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--ice); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; cursor: pointer;
  }
  .dv-showmore:hover { border-color: var(--ice-soft); }
  .dv-showmore[hidden] { display: none; }

  /* the full matrix / full table secondary modes reuse .heatmap-wrap /
     #explorer-table's own styling verbatim -- no separate ruleset needed */
  #hmv-matrix-mode #hmv-matrix, #exv-table-mode #exv-full-table { overflow-x: auto; }
  #hmv-matrix-mode[hidden], #hmv-stage-mode[hidden],
  #exv-table-mode[hidden], #exv-cards-mode[hidden] { display: none; }
}

/* ============ METHODOLOGY ============ */
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 32px; }
.method-grid h3 {
  margin: 22px 0 10px; font-size: 1.06rem; color: var(--gold-bright);
  font-family: var(--serif); letter-spacing: 0.3px;
}
.method-grid h3:first-child { margin-top: 0; }
.method-grid ul { padding-left: 20px; color: var(--muted); font-size: 0.93rem; display: grid; gap: 9px; }
.method-grid b { color: var(--text); }

/* ============ FOOTER ============ */
.footer {
  border-top: 1px solid var(--line-soft); margin-top: 56px; padding: 36px 24px 60px;
  color: var(--muted); font-size: 0.86rem; text-align: center;
  background: linear-gradient(180deg, transparent, rgba(8, 9, 15, 0.8));
}
.footer-sigil { margin-bottom: 14px; }
.footer p { max-width: 840px; margin: 0 auto; }
.footer b { color: var(--gold-bright); font-family: var(--serif); }
.footer a { color: var(--blue); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ============ ADMIN (content manager) ============ */
.admin-wrap { max-width: 1220px; margin: 0 auto; padding: 40px 24px 80px; }
.admin-wrap h1 { font-family: var(--serif); font-size: 1.9rem; margin-bottom: 8px; }
.admin-note {
  margin: 14px 0 26px; padding: 12px 18px; max-width: 900px;
  color: #e6dbb8; font-size: 0.9rem;
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.07), rgba(255, 209, 102, 0.02));
  border: 1px solid rgba(255, 209, 102, 0.24); border-left: 3px solid #ffd166;
  border-radius: var(--radius-sm);
}
.admin-grid { display: grid; grid-template-columns: minmax(320px, 1.15fr) minmax(300px, 1fr); gap: 26px; align-items: start; }
.admin-panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.admin-panel h2 { font-family: var(--serif); font-size: 1.15rem; margin-bottom: 14px; color: var(--gold-bright); }
.admin-form { display: grid; gap: 12px; }
.af-row { display: grid; gap: 5px; }
.af-row label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.4px; }
.af-row input, .af-row select, .af-row textarea {
  background: var(--obsidian-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 11px; font-size: 0.92rem; font-family: var(--sans); width: 100%;
}
.af-row textarea { min-height: 74px; resize: vertical; }
.af-row input:focus, .af-row select:focus, .af-row textarea:focus { outline: none; border-color: var(--gold-soft); }
.af-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.abtn {
  cursor: pointer; padding: 9px 18px; font-size: 0.86rem; font-weight: 700;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.abtn:hover { border-color: var(--gold-soft); transform: translateY(-1px); }
.abtn-primary { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #1c1608; border-color: var(--gold); }
.abtn-danger { color: var(--crimson); border-color: var(--crimson-soft); background: rgba(255, 92, 110, 0.06); }
.abtn-quiet { color: var(--muted); }
.admin-list { display: grid; gap: 8px; margin-bottom: 14px; }
.admin-list-item {
  display: flex; gap: 10px; align-items: center; padding: 9px 12px;
  background: rgba(13, 15, 25, 0.55); border: 1px solid var(--line-soft); border-radius: 8px;
  font-size: 0.88rem;
}
.admin-list-item.active { border-color: var(--gold-soft); background: var(--gold-faint); }
.ali-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ali-status { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted-2); }
.ali-btn {
  cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 6px; padding: 2px 8px; font-size: 0.8rem;
}
.ali-btn:hover { color: var(--text); border-color: var(--gold-soft); }
#admin-json {
  width: 100%; min-height: 200px; font-family: var(--mono); font-size: 0.78rem;
  background: var(--obsidian-2); color: #c8d0e2; border: 1px solid var(--line);
  border-radius: 8px; padding: 12px; margin-top: 10px;
}
.admin-msg { color: var(--emerald); font-size: 0.84rem; min-height: 1.2em; margin-top: 8px; }
.admin-preview-hint { color: var(--muted-2); font-size: 0.8rem; margin-bottom: 12px; }
.admin-steps { color: var(--muted); font-size: 0.88rem; padding-left: 20px; display: grid; gap: 6px; }

/* ============ SCROLL REVEAL ============ */
/* The hidden state is scoped to .js (set by site.js/app.js on <html>). Without
   scripting nothing is hidden, so a script failure can never blank the page. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js .reveal.visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  /* must out-specify ".js .reveal" (0,2,0) above, or the scroll-reveal fade keeps
     playing for readers who asked for no motion */
  .js .reveal, .reveal { opacity: 1; transform: none; transition: none; }
  .mini-card, .card, .issue-card, .bar-fill, .btn, .abtn { transition: none; }
  .stars-a, .stars-b, .cloud-1, .cloud-2, .castle .win,
  .torch .flame, .knight, .qm-path, .qm-marker,
  /* codex + emblems: hold the final rendered state, no motion */
  .co-seal,
  .em-compass .needle, .em-lens .glint, .em-chest .lock,
  .em-beacon .flame, .em-crest .spark { animation: none; }
  .forge-link::before { animation: none; }
  /* the codex must arrive fully unfolded rather than animating into place */
  .js .codex .co-verso, .js .codex .co-recto, .js .codex .cx-item {
    opacity: 1; transform: none; transition: none;
  }
  .js .codex .co-rule { transform: scaleX(1); transition: none; }
  .codex-open { transition: none; }
  .codex-open:hover { transform: none; }
  /* the evidence plot renders at full value instead of growing */
  .mcv-bar { transform: scaleX(1); transition: none; }
  .em-lens .glint { opacity: 0.9; }
  html { scroll-behavior: auto; }
}

/* ============ COUNT-AWARE GRID BREAKPOINTS ============ */
/* key findings: lead + stack narrows its ratio on mid widths, then stacks.
   Was 1040, now laptop (1024) — 1040 >= 1024 so this only trims a dead zone. */
@media (max-width: 1024px) {
  .mini-cards { grid-template-columns: 1.35fr 1fr; }
  .mc-lead .mc-num { font-size: 3rem; }
  .mc-lead .mc-head { font-size: 1.32rem; }
}
/* study-cover badges: 7 → 3+3+1-wide below 1020px.
   1020px retained: rounding up to 1024 would fire this rule exactly at the
   protected 1024 stable width. */
@media (max-width: 1020px) {
  .hero-stats { grid-template-columns: repeat(6, 1fr); }
  .hero-stats .stat:nth-child(n) { grid-column: span 2; }
  .hero-stats .stat:nth-child(7) { grid-column: span 6; }
}
/* community-voice big numbers 2×2; quest board two per row.
   980px retained for the same reason as 1020px above. */
@media (max-width: 980px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .issue-grid .issue-card:nth-child(n) { grid-column: span 3; }
  .issue-grid[data-count="3"] .issue-card:first-child,
  .issue-grid[data-count="5"] .issue-card:first-child,
  .issue-grid[data-count="7"] .issue-card:first-child,
  .issue-grid[data-count="9"] .issue-card:first-child,
  .issue-grid[data-count="11"] .issue-card:first-child,
  .issue-grid[data-count="13"] .issue-card:first-child { grid-column: 1 / -1; }
}

/* ============ MOBILE LAYOUT ============
   Was 900, now tablet (820). */
@media (max-width: 820px) {
  .rpg-hero { padding: 56px 14px 0; }
  .rpg-frame { padding: 30px 12px calc(var(--skyline-h) + 16px); }
  .study-frame { padding: 32px 20px 28px; }
  .section { padding: 56px 18px 34px; }
  .qgrid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .torch { display: none; }
}

/* .grid2 retains 900px because moving it to 820 clips #quality-chart /
   #refund-share-chart bar content (measured overflow up to 45px). */
@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
}

/* key findings: single column stack, lead card leads */
@media (max-width: 820px) {
  .mini-cards { grid-template-columns: 1fr; }
  .mc-lead { grid-column: 1; grid-row: auto; }
  .mc-lead .mc-num { font-size: 2.8rem; }
  .mc-lead .mc-head { font-size: 1.28rem; }
}

/* 700px retained for Phase-1b bar-row hardening — do not move. */
@media (max-width: 700px) {
  .nav-links { gap: 3px 10px; }
  .nav-links a { font-size: 0.78rem; }
  .brand-lockup { flex-direction: column; gap: 12px; }
  .brand-text { text-align: center; }
  .hero-tagline { font-size: 1.08rem; }
  .hero-intro { font-size: 0.95rem; }
  .btn { padding: 11px 20px; font-size: 0.88rem; }
  .study-title { font-size: clamp(1.7rem, 8vw, 2.3rem) !important; }
  .hero-sub { font-size: 1rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-stats .stat:nth-child(n) { grid-column: auto; }
  .hero-stats .stat:nth-child(7) { grid-column: span 2; }
  .stat { padding: 10px 14px 9px; }
  .stat .v { font-size: 1.25rem; }
  .journey-panel { padding: 14px 12px 10px; }
  /* mobile bar-row: label+value share row 1, the evidence bar gets its own
     full-width row 2. A fixed 92px value column could not hold content like
     "18.2% 50,500 reviews" (measured 116px) at any mobile width, and widening
     it would have starved the bar itself -- the bar IS the evidence (D-014).
     See MOBILE_P0_BASELINE.md S1.2/S12. */
  .bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label value" "bar bar";
    column-gap: 10px; row-gap: 6px;
  }
  .bar-row .bl {
    grid-area: label; min-width: 0; text-align: left;
    white-space: normal; font-size: 0.74rem; line-height: 1.25;
  }
  .bar-val { grid-area: value; min-width: 0; font-size: 0.8rem; }
  .bar-track { grid-area: bar; min-width: 0; }
  .mini { width: 34px; }
  .finding-oneliner { font-size: 1.05rem; padding: 12px 14px; }
  .chapter-mark { gap: 10px; }
  .cm-line { flex-basis: 40px; }
  /* letter-spacing no longer overridden here: base rule is now em-based
     (0.208em), so it scales automatically with this smaller mobile font-size
     instead of needing a second hard-coded px value. */
  .cm-label { font-size: 0.7rem; }
  .cards { grid-template-columns: 1fr; }
  .explorer-controls { gap: 10px; padding: 12px 14px; }
  .explorer-controls label { width: 100%; justify-content: space-between; }
  .explorer-controls select { max-width: 62vw; }
  #explorer-table { padding: 2px 6px 8px; }
  #explorer-table th { position: static; }
  #explorer-table th, #explorer-table td { padding: 7px 8px; font-size: 0.78rem; }
  .method-grid { grid-template-columns: 1fr; gap: 18px; }
  .af-cols { grid-template-columns: 1fr; }
}

/* quest board single column. 640px retained (orphan value). */
@media (max-width: 640px) {
  .issue-grid { grid-template-columns: 1fr; }
  .issue-grid .issue-card:nth-child(n),
  .issue-grid[data-count] .issue-card:nth-child(n) { grid-column: 1 / -1; }
}

/* trust route turns into a vertical journey.
   640px retained for trust-route/component behaviour (§7.8). */
@media (max-width: 640px) {
  .trust-route { grid-template-columns: 1fr; gap: 20px; padding: 4px 0; }
  .trust-route::before {
    left: 16px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto;
    background-image: repeating-linear-gradient(180deg, var(--gold-soft) 0 7px, transparent 7px 14px);
  }
  .tr-stop {
    grid-template-rows: none; grid-template-columns: 34px 1fr;
    grid-template-areas: "icon name" "icon hours" "icon gauge";
    column-gap: 14px; row-gap: 2px; justify-items: start; align-items: start;
  }
  .tr-icon { grid-area: icon; }
  .tr-name { grid-area: name; text-align: left; margin-top: 0; font-size: 0.92rem; }
  .tr-hours { grid-area: hours; text-align: left; }
  .tr-gauge { grid-area: gauge; align-self: start; height: 16px; width: calc(100% - 66px); margin-top: 9px; }
  .tr-gauge i {
    left: 0; bottom: 1px; height: 14px; width: var(--gauge);
    transform: none; transform-origin: left;
  }
  .tr-gauge i::after {
    background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(8, 9, 15, 0.85) 8px 11px);
  }
  .tr-val {
    left: 100%; right: auto; bottom: auto; top: 50%; margin-left: 10px;
    transform: translateY(-50%); font-size: 1.02rem;
  }
  .reveal:not(.visible) .tr-gauge i { transform: scaleX(0); }
  .reveal:not(.visible) .tr-val { opacity: 0; }
}

/* key findings on phones: tighter lead card */
@media (max-width: 560px) {
  .mc-lead { padding: 24px 20px 22px; }
  .mc-lead .mc-num { font-size: 2.4rem; }
  .mc-lead .mc-head { font-size: 1.16rem; }
  .mc-lead .mc-why { font-size: 0.92rem; }
}

/* community-voice big numbers single column on narrow phones.
   520px retained — editorial emphasis, not a fit failure. */
@media (max-width: 520px) {
  .stat-strip { grid-template-columns: 1fr; }
}

/* trust route under reduced motion: gauges render fully, no transitions */
@media (prefers-reduced-motion: reduce) {
  .tr-gauge i, .tr-val { transition: none !important; }
  .reveal:not(.visible) .tr-gauge i { transform: translateX(-50%); }
  .reveal:not(.visible) .tr-val { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .reveal:not(.visible) .tr-gauge i { transform: none; }
}

/* ============================================================
   CRITFIELD PLATFORM (Issue 18) — multi-page components.
   Homepage studio blocks, field-map gamification, breadcrumb,
   research library, doc pages (about/press/legal/contact).
   Reuses the existing tokens, cards, and chart styles.
   ============================================================ */

/* ---- breadcrumb ---- */
.crumb {
  max-width: 1120px; margin: 0 auto; padding: 18px 24px 0;
  font-family: var(--mono); font-size: 0.78rem; color: var(--muted-2);
  letter-spacing: 0.5px;
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--gold-bright); }
.crumb span[aria-current] { color: var(--gold); }

/* ---- shared footer nav ----
   Phase 1c: real flex rows with `gap`, not inline text with literal "·"
   separators — those stranded a trailing dot on wrap (MOBILE_P0_BASELINE.md
   §1.3). Desktop keeps a CSS-drawn dot (Correction B: a static ::after, never
   a trick that tries to detect a flex-wrap point); it is removed entirely
   below 768px, where `gap` alone carries the spacing. */
.footer-nav {
  margin: 14px auto 6px; font-size: 0.85rem; color: var(--muted-2);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px;
}
.footer-nav a { color: var(--blue); }
/* one primary address, two labelled routes */
p.footer-contact {
  margin: 6px auto 10px; font-size: 0.85rem; color: var(--muted-2);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px;
}
p.footer-contact .fc-mail { font-family: var(--mono); font-size: 0.82rem; }
/* each route wraps as one unit — "Research questions" must never break in half */
p.footer-contact a { white-space: nowrap; }
/* desktop-only separator dot, generated content — not a literal text node,
   so there is nothing left over to strand when a line wraps */
.footer-nav a:not(:last-child)::after,
p.footer-contact a:not(:last-child)::after {
  content: "·"; margin-left: 8px; color: var(--muted-2);
}
.footer-fine { color: var(--muted-2); font-size: 0.78rem; margin-top: 10px; }

/* ---- footer mobile recomposition (Phase 1c) ---- */
@media (max-width: 767px) {
  .footer { text-align: left; }
  .footer-sigil { text-align: center; }
  .footer-nav, p.footer-contact {
    justify-content: flex-start;
    border-top: 1px solid var(--line-soft);
    padding-top: 14px;
  }
  /* no separator glyph on mobile at all — gap alone carries the spacing.
     Selector shape matches the base rule's specificity (0,2,2) so this
     override actually wins instead of losing to :not(:last-child). */
  .footer-nav a:not(:last-child)::after,
  p.footer-contact a:not(:last-child)::after { content: none; }
}
@media (max-width: 560px) {
  .footer { padding: 28px 18px 40px; }
  p.footer-contact { flex-direction: column; align-items: flex-start; gap: 2px; }
  p.footer-contact a { display: flex; align-items: center; min-height: 44px; width: 100%; }
}

/* ============ THE RESEARCH CODEX ============
   Replaced the node map (dots / routes / labels over a large dark field).
   Every dimension here is content-driven: the block has no fixed height, no
   min-height and no viewport units, so it cannot leave dead space behind. */

/* Phase 4: standard content width, §7.1's --w-content role (1160px, was 1140px). */
.codex { max-width: var(--w-content); margin: 34px auto 0; text-align: left; }

.codex-head { text-align: center; margin-bottom: 20px; }
.codex-cap {
  font-family: var(--sans);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--steel);
}
.codex-sub {
  color: var(--muted); font-size: 0.95rem;
  max-width: 540px; margin: 8px auto 0; line-height: 1.55;
}

.codex-body {
  display: grid;
  /* the rail gets enough width that most chapter titles hold one line — a
     narrower rail wrapped every row and made the column far taller than the
     spread beside it */
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: 20px;
  /* both columns share one height — the spread used to stop short of the rail
     and leave a block of dead space under it */
  align-items: stretch;
}

/* ---- Chapter I: the open spread ---- */
.codex-open {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  background:
    linear-gradient(180deg, rgba(24, 29, 46, 0.92), rgba(14, 17, 28, 0.94));
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* the gutter is the boundary between the leaves, so it is drawn on the leaf
   itself — a percentage-positioned overlay drifts off the seam when the
   column ratio changes */
.codex-open:hover {
  border-color: var(--ice-soft);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -26px rgba(125, 220, 255, 0.5);
}
.codex-open:focus-within {
  border-color: var(--ice);
  box-shadow: var(--focus);
}

.co-leaf { padding: 26px clamp(18px, 2.2vw, 28px); min-width: 0; }

/* verso — chapter numeral, wax seal, scope ledger */
.co-verso {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--gold-faint), transparent 68%);
  border-right: var(--hair) solid var(--line);
}
.co-num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.6vw, 3.6rem); line-height: 1;
  color: var(--gold); letter-spacing: 0.06em;
}
.co-seal { display: block; width: 58px; height: 58px; }
.co-seal svg { width: 100%; height: 100%; display: block; }
.cs-wax { fill: rgba(236, 207, 146, 0.16); stroke: var(--gold-soft); stroke-width: 1.1; }
.cs-inner { fill: none; stroke: var(--gold-soft); stroke-width: 0.9; }
.cs-mark {
  fill: none; stroke: var(--gold); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* the published chapter breathes — slow, single element, never distracting */
.co-seal { animation: sealGlow 6.5s ease-in-out infinite; }
@keyframes sealGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(236, 207, 146, 0.22)); }
  50%      { filter: drop-shadow(0 0 10px rgba(236, 207, 146, 0.5)); }
}

.co-ledger {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px;
  width: 100%; margin-top: 2px;
  border-top: var(--hair) solid var(--line-soft); padding-top: 16px;
}
.co-lg { min-width: 0; }
.co-lg dt { font-size: 1.16rem; line-height: 1.15; }
.co-lg dd { margin-top: 3px; font-size: 0.7rem; line-height: 1.3; }

/* recto — status, title, summary, tags, call to action */
.co-recto { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.co-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-state {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
  border: var(--hair) solid var(--gold-soft);
  background: var(--gold-faint);
  border-radius: var(--radius-pill); padding: 4px 11px;
}
.co-sep { width: 16px; height: var(--hair); background: var(--line); }
.co-year {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-2);
}
.co-title { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.18; }
.co-link { color: var(--text); text-decoration: none; }
/* the whole spread is the target; the heading link stays the single a11y anchor */
.co-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.co-link:focus-visible { outline: none; }
.codex-open:hover .co-link { color: var(--ice-bright); }
.co-rule {
  display: block; width: 62px; height: var(--rule);
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 1px;
  transform-origin: left center;
}
.co-sum { color: var(--muted); font-size: 0.94rem; line-height: 1.62; }
.co-tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.co-tags li {
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--steel);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-pill); padding: 4px 10px;
}
/* Chapter contents — deep links into the study's own sections. This is what
   fills the lower half of the leaf: real navigation, not ornament. The links
   sit above the card-wide stretched link so they remain individually clickable. */
.co-toc {
  margin-top: auto; padding-top: 14px;
  border-top: var(--hair) solid var(--line-soft);
}
.co-toc-cap {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--steel-dim); margin-bottom: 9px;
}
.co-toc ul {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px;
}
.co-toc a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: baseline; gap: 7px;
  color: var(--muted); font-size: 0.82rem; line-height: 1.35;
  text-decoration: none;
  border-bottom: var(--hair) solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.co-toc a::before {
  content: ""; flex: none;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--steel-dim);
  transform: translateY(-2px);
  transition: background var(--dur-fast) var(--ease);
}
.co-toc a:hover { color: var(--ice-bright); border-bottom-color: var(--ice-soft); }
.co-toc a:hover::before { background: var(--ice); }

.co-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 4px;
  color: var(--ice); font-weight: 700; font-size: 0.92rem;
}
.codex-open:hover .co-cta { color: var(--ice-bright); }
.codex-open:hover .co-cta .tl-chev { transform: translateX(3px); }

/* ---- sealed chapters ---- */
.codex-sealed {
  border: var(--hair) solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: rgba(11, 13, 22, 0.6);
  padding: 20px clamp(16px, 1.8vw, 20px);
  display: flex; flex-direction: column;
}
.cx-cap {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--steel-dim);
  padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: var(--hair) solid var(--line-soft);
}
.cx-list { list-style: none; }
.cx-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px;
  padding: 9px 0;
  border-bottom: var(--hair) solid var(--line-soft);
}
.cx-list .cx-item:last-child { border-bottom: 0; }
.cx-num {
  font-family: var(--serif); font-size: 0.9rem;
  color: var(--steel-dim); text-align: right; font-variant-numeric: tabular-nums;
}
.cx-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-name { color: #c3cde0; font-size: 0.88rem; line-height: 1.4; }
.cx-cat {
  font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted-2);
}
/* sealed items are not links and must not look like one */
.cx-state {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--steel-dim);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-pill); padding: 3px 9px; white-space: nowrap;
}
.cx-note {
  margin-top: auto; padding-top: 13px;
  border-top: var(--hair) solid var(--line-soft);
  color: var(--muted-2); font-size: 0.78rem; line-height: 1.5;
}
.cx-more { margin-top: 12px; }

/* ---- reveal choreography: the spread unfolds, the spines settle in ---- */
.js .codex .co-recto,
.js .codex .co-verso {
  opacity: 0; transform: perspective(900px) rotateY(-10deg);
  transform-origin: left center;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.js .codex.visible .co-verso { opacity: 1; transform: none; transition-delay: 0.05s; }
.js .codex.visible .co-recto { opacity: 1; transform: none; transition-delay: 0.16s; }
.js .codex .co-rule { transform: scaleX(0); transition: transform 0.6s var(--ease-out) 0.4s; }
.js .codex.visible .co-rule { transform: scaleX(1); }
.js .codex .cx-item {
  opacity: 0; transform: translateX(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js .codex.visible .cx-item { opacity: 1; transform: none; }
.js .codex.visible .cx-item:nth-child(1) { transition-delay: 0.22s; }
.js .codex.visible .cx-item:nth-child(2) { transition-delay: 0.28s; }
.js .codex.visible .cx-item:nth-child(3) { transition-delay: 0.34s; }
.js .codex.visible .cx-item:nth-child(4) { transition-delay: 0.40s; }
.js .codex.visible .cx-item:nth-child(5) { transition-delay: 0.46s; }
.js .codex.visible .cx-item:nth-child(6) { transition-delay: 0.52s; }

/* ---- responsive ----
   Was 1100, now desktop (1200). */
@media (max-width: 1200px) {
  .codex-body { grid-template-columns: 1fr; gap: 16px; }
  .codex-open { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .cx-list { columns: 2; column-gap: 22px; }
  .cx-item { break-inside: avoid; }
}
/* Was 760, now tablet (820). */
@media (max-width: 820px) {
  .codex { margin-top: 26px; }
  .codex-open { grid-template-columns: 1fr; }
  .co-verso {
    flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
    align-items: center; text-align: left; gap: 12px;
    border-right: 0;
    border-bottom: var(--hair) solid var(--line-soft);
  }
  .co-num { font-size: 2.1rem; }
  .co-seal { width: 34px; height: 34px; }
  .co-ledger { grid-template-columns: 1fr 1fr; border-top: 0; padding-top: 0; }
  .co-toc ul { grid-template-columns: 1fr; }
  .cx-list { columns: 1; }
}
/* 430px retained — a genuine third codex responsive tier, not a
   near-duplicate of 560. */
@media (max-width: 430px) {
  .co-leaf { padding: 20px 16px; }
  .co-ledger { gap: 10px 8px; }
  .co-lg dt { font-size: 1.02rem; }
  .cx-item { grid-template-columns: 22px minmax(0, 1fr); row-gap: 6px; }
  .cx-state { grid-column: 2; justify-self: start; }
}

/* The global reduced-motion block is declared earlier in this file, so it loses
   to these rules on source order at equal specificity. The codex states it
   again here, where it wins. */
@media (prefers-reduced-motion: reduce) {
  .co-seal { animation: none; filter: drop-shadow(0 0 5px rgba(236, 207, 146, 0.3)); }
  .js .codex .co-verso, .js .codex .co-recto, .js .codex .cx-item {
    opacity: 1; transform: none; transition: none;
  }
  .js .codex .co-rule { transform: scaleX(1); transition: none; }
  .codex-open, .dossier { transition: none; }
  .codex-open:hover, .dossier:hover { transform: none; }
}
/* ============ HOME: three perspectives ============ */
.persp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
/* Phase 6: OBJECT + its own accent top rule (a semantic chapter marker). */
.persp {
  border-top: var(--rule) solid var(--accent);
  padding: 22px 20px;
}
.persp h3 { font-family: var(--serif); font-size: 1.12rem; color: var(--text); margin-bottom: 8px; }
.persp .persp-role { color: var(--accent); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 2px; margin-bottom: 10px; font-family: var(--mono); }
.persp p { color: var(--muted); font-size: 0.94rem; }
.persp-note { color: var(--muted-2); font-size: 0.9rem; margin-top: 16px; font-style: italic; }

/* ============ HOME: THE STUDIO (positioning) ============ */
/* Phase 4: positioning prose, §7.1's --w-prose role (720px, was 820px). */
.studio-lead { max-width: var(--w-prose); }

/* internal subheads with a trailing rule */
.studio-subhead {
  font-family: var(--serif); font-size: 1.32rem; color: var(--gold-bright);
  margin: 40px 0 16px; display: flex; align-items: center; gap: 14px;
}
.studio-subhead::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent); }

/* --- B. mission visual: player voices → patterns → evidence → decisions --- */
.forge {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 4px; margin: 6px 0 8px; flex-wrap: nowrap;
}
.forge-step {
  flex: 1 1 0; min-width: 0; max-width: 220px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 6px 6px 0;
}
.fs-icon {
  width: 64px; height: 64px; display: grid; place-items: center;
  border: 1px solid var(--accent-soft); border-radius: 15px; color: var(--accent);
  background: linear-gradient(155deg, var(--accent-faint), transparent 74%);
  box-shadow: 0 0 22px var(--accent-faint);
}
.fs-icon svg { width: 32px; height: 32px; overflow: visible; }
.fs-name { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; color: var(--text); }
.fs-note { color: var(--muted); font-size: 0.82rem; line-height: 1.4; max-width: 22ch; }
/* stage-specific accents (voices→blue, patterns→violet, evidence→cyan, decisions→emerald) */
.fs-voices    { --accent: var(--blue);    --accent-soft: var(--blue-soft);    --accent-faint: rgba(92,200,255,0.09); }
.fs-patterns  { --accent: var(--violet);  --accent-soft: var(--violet-soft);  --accent-faint: rgba(167,139,250,0.09); }
.fs-evidence  { --accent: var(--blue);    --accent-soft: rgba(92,200,255,0.42);--accent-faint: rgba(92,200,255,0.11); }
.fs-decisions { --accent: var(--emerald); --accent-soft: var(--emerald-soft); --accent-faint: rgba(79,217,154,0.09); }
/* the connecting route between stages */
.forge-link {
  flex: 0 0 26px; align-self: flex-start; height: 64px; position: relative; margin-top: 6px;
}
.forge-link::before {
  content: ""; position: absolute; top: 32px; left: -2px; right: 6px; height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--gold-soft) 0 6px, transparent 6px 12px);
  background-size: 12px 2px; animation: forgeFlow 1.5s linear infinite;
}
.forge-link::after {
  content: ""; position: absolute; top: 32px; right: 0; margin-top: -3.5px;
  width: 7px; height: 7px; transform: rotate(45deg);
  border-right: 2px solid var(--gold); border-top: 2px solid var(--gold);
}
@keyframes forgeFlow { to { background-position-x: 12px; } }

/* --- C. capability blocks --- */
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cap {
  display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start;
  padding: 20px 22px;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
/* Phase 6 (Step 5): hover is interaction, and interaction is ice, never gold
   (D-011) — this block was the one hover state still painting itself gold. */
.cap:hover {
  border-color: var(--border-emphasis); transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4), 0 0 20px var(--ice-faint);
}
.cap-ico {
  width: 46px; height: 46px; display: grid; place-items: center; color: var(--gold);
  border: 1px solid var(--gold-soft); border-radius: 11px; background: var(--gold-faint);
}
.cap-ico svg { width: 25px; height: 25px; overflow: visible; }
.cap h4 { font-family: var(--serif); font-size: 1.1rem; color: var(--text); margin-bottom: 5px; }
.cap p { color: var(--muted); font-size: 0.9rem; }

/* --- D. audience hooks --- */
.aud-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* Phase 6: INSET + a semantic audience-coded left rail. */
.aud {
  border-left: var(--rule) solid var(--accent);
  padding: 15px 18px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.aud .aud-role {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.aud p { color: var(--muted); font-size: 0.89rem; }
.aud.a-pub   { border-left-color: var(--gold); }    .aud.a-pub .aud-role   { color: var(--gold-bright); }
.aud.a-dev   { border-left-color: var(--blue); }    .aud.a-dev .aud-role   { color: var(--blue); }
.aud.a-press { border-left-color: var(--emerald); } .aud.a-press .aud-role { color: var(--emerald); }
.aud.a-res   { border-left-color: var(--violet); }  .aud.a-res .aud-role   { color: var(--violet); }
.aud.a-pub:hover   { background: rgba(236, 207, 146, 0.06); }
.aud.a-dev:hover   { background: rgba(92, 200, 255, 0.06); }
.aud.a-press:hover { background: rgba(79, 217, 154, 0.06); }
.aud.a-res:hover   { background: rgba(167, 139, 250, 0.06); }

/* --- E. three lenses converging on one result --- */
/* Phase 4: intro lead, §7.1's --w-prose role (720px, was 780px). */
.lens-intro { color: var(--muted); font-size: 0.98rem; max-width: var(--w-prose); margin-bottom: 18px; }
.lens-set { position: relative; }
.lens-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Phase 6: OBJECT + its own accent top rule. */
.lens {
  text-align: center; padding: 22px 20px 20px;
  border-top: var(--rule) solid var(--accent);
}
.lens-eye {
  width: 48px; height: 48px; margin: 0 auto 12px; display: grid; place-items: center;
  color: var(--accent); border: 1px solid var(--accent-soft); border-radius: 50%;
  background: var(--accent-faint);
}
.lens-eye svg { width: 26px; height: 26px; }
.lens-role {
  display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.lens h4 { font-family: var(--serif); font-size: 1.08rem; color: var(--text); margin-bottom: 7px; }
.lens p { color: var(--muted); font-size: 0.87rem; }
.lens.l-plays    { --accent: var(--gold);   --accent-soft: var(--gold-soft);   --accent-faint: var(--gold-faint); }
.lens.l-measures { --accent: var(--blue);   --accent-soft: var(--blue-soft);   --accent-faint: rgba(92,200,255,0.08); }
.lens.l-explains { --accent: var(--emerald);--accent-soft: var(--emerald-soft);--accent-faint: rgba(79,217,154,0.08); }
.lens-out {
  position: relative; margin: 30px auto 0; width: max-content; max-width: 100%;
  font-family: var(--serif); font-size: 1.04rem; color: var(--gold-bright); text-align: center;
  border: 1px solid var(--gold-soft); border-radius: var(--radius-pill); padding: 11px 26px;
  background: var(--gold-faint);
}
/* downward connector: three paths joining into the result pill */
.lens-out::before {
  content: ""; position: absolute; left: 50%; top: -22px; width: 2px; height: 22px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--gold-soft));
}
.lens-out::after {
  content: ""; position: absolute; left: 50%; top: -6px; width: 8px; height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: 2px solid var(--gold-soft); border-bottom: 2px solid var(--gold-soft);
}

/* --- F. positioning hook --- */
.studio-hook {
  margin: 44px auto 6px; max-width: 760px; text-align: center;
  font-family: var(--serif); font-size: clamp(1.25rem, 2.7vw, 1.68rem); line-height: 1.36;
  color: var(--text); position: relative; padding-top: 26px;
}
.studio-hook::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 64px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* --- studio responsive ---
   Was 860, now tablet (820). */
@media (max-width: 820px) {
  .forge { flex-wrap: wrap; gap: 10px 4px; }
  .forge-step { flex: 1 1 40%; max-width: none; }
  .forge-link { display: none; }
  .cap-grid { grid-template-columns: 1fr; }
  .aud-grid { grid-template-columns: 1fr; }
  .lens-row { grid-template-columns: 1fr; }
  .lens-out { margin-top: 24px; }
}
/* 480px retained — editorial emphasis, like 520px above. */
@media (max-width: 480px) {
  .forge-step { flex-basis: 100%; }
  .fs-note { max-width: 30ch; }
}

/* ============ HOME: what we study (directions) ============ */
.dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
/* Phase 6: INSET — supporting "what we study" notes, not evidence objects. */
.dir { padding: 16px 18px; }
.dir h4 { font-size: 1rem; color: var(--gold-bright); margin-bottom: 5px; font-family: var(--serif); }
.dir p { color: var(--muted); font-size: 0.88rem; }

/* ============ HOME: latest issue feature ============ */
/* Phase 6: the latest-issue panel is a SURFACE that holds four metric Objects.
   It drops to the quiet edge so the tiles inside it read as objects on a
   surface rather than four cards inside an identical fifth. The gold left rail
   stays — it marks published research (D-011), and it is the panel's identity. */
.latest {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center;
  border-left: 3px solid var(--gold);
  padding: 26px;
}
.latest .lt-kicker { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.latest h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; margin-bottom: 12px; }
.latest p { color: var(--muted); margin-bottom: 16px; }
/* the metrics used to be one short flex row, which left the right-hand column
   mostly empty. A framed 2×2 fills the panel and gives the numbers weight. */
.latest .lt-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* Phase 6 (Step 7): the same OBJECT shape and fill as every other metric tile.
   Its private gold-tinted gradient is dropped — a metric tile is one kind of
   object site-wide, not a separate card universe per page. Phase-5 metric
   typography is untouched. */
.latest .lt-metrics > div { padding: 15px 16px; }
.latest .lt-metrics .v { font-size: 1.75rem; line-height: 1.1; display: block; }
.latest .lt-metrics .l { font-size: 0.76rem; display: block; margin-top: 2px; line-height: 1.3; }

/* ============ ROUTE CARDS (media / partners / contact) ============ */
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.route {
  padding: 22px 20px;
  display: flex; flex-direction: column;
}
.route h3 { font-family: var(--serif); font-size: 1.15rem; margin-bottom: 8px; color: var(--text); }
.route p { color: var(--muted); font-size: 0.92rem; margin-bottom: 16px; flex: 1; }
.route .text-link { margin-top: auto; align-self: flex-start; }

/* a centered row that hosts a single button-style action */
.cta-row { margin-top: 22px; display: flex; }

/* ---- an e-mail address presented as an address, not as a button ----
   Shared by the homepage open-channel panel, the contact channels and the
   press room. Interactive, so it takes the ice role, never gold (D-011). */
.mail-line {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.2px;
  color: var(--ice); text-decoration: none;
  background: rgba(16, 19, 31, 0.62);
  border: var(--hair) solid var(--line); border-radius: var(--radius-pill);
  padding: 9px 16px; max-width: 100%; overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.mail-line:hover {
  color: var(--ice-bright); border-color: var(--ice-soft); background: var(--ice-faint);
}
.mail-line .tl-chev { flex: none; }
.mail-line:hover .tl-chev { transform: rotate(45deg) translate(2px, -2px); }
.mail-line:focus-visible { outline: none; box-shadow: var(--focus); }

/* ============ OPEN CHANNEL (homepage collaboration panel) ============
   Sits under the route cards. One address, stated plainly, framed by the
   section's own accent rail so it reads as part of the chapter, not as an
   inserted marketing block. */
.dispatch {
  margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 20px;
  /* Phase 6: OBJECT + the section's own accent rail (identity, see above). */
  background:
    linear-gradient(90deg, var(--accent-faint), transparent 62%),
    var(--surface-panel);
  border-left: var(--rule) solid var(--accent-soft);
  padding: 20px 22px;
}
.dispatch-sigil {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-faint);
  border: var(--hair) solid var(--accent-soft); border-radius: var(--radius-sm);
}
.dispatch-sigil svg { width: 22px; height: 22px; display: block; }
.dispatch-body { flex: 1 1 250px; min-width: 0; }
.dispatch-kicker {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.dispatch-body h3 {
  font-family: var(--serif); font-size: 1.16rem; color: var(--text); margin-bottom: 6px;
}
.dispatch-body p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.dispatch-action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ============ DOC PAGES (about/press/legal/contact) ============ */
/* Phase 4: About/Press/Legal/Contact page composition, §7.1's --w-content
   role (1160px, was 1120px); the lead is already --w-prose's exact value
   (720px, pure alias); body prose narrows from 760px to --w-prose (720px). */
.doc-hero { max-width: var(--w-content); margin: 0 auto; padding: 30px 24px 8px; text-align: left; }
.doc-hero .doc-kicker { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.doc-hero h1 { font-family: var(--serif); font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.12; margin-bottom: 14px; color: var(--text); }
.doc-hero .doc-lead { color: var(--muted); font-size: 1.08rem; max-width: var(--w-prose); }
.doc-body { max-width: var(--w-content); margin: 0 auto; padding: 10px 24px 40px; }
.doc-body h2 { font-family: var(--serif); font-size: 1.5rem; margin: 30px 0 12px; color: var(--gold-bright); }
.doc-body h3 { font-family: var(--serif); font-size: 1.14rem; margin: 20px 0 8px; color: var(--text); }
.doc-body p { color: var(--muted); margin-bottom: 12px; max-width: var(--w-prose); }
.doc-body ul { color: var(--muted); margin: 0 0 14px 20px; display: grid; gap: 7px; max-width: var(--w-prose); }
.doc-body a { color: var(--blue); }
.doc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.doc-card { padding: 22px; }
.doc-card h3 { margin-top: 0; }

/* ---- contact channels: three doors, each with an address on it ---- */
.channels {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px;
}
/* Phase 6: OBJECT — each channel is a discrete door with an address on it. */
.channel {
  padding: 22px 20px; display: flex; flex-direction: column; min-width: 0;
}
.ch-sigil {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  margin-bottom: 12px; color: var(--gold); background: var(--gold-faint);
  border: var(--hair) solid var(--gold-soft); border-radius: var(--radius-sm);
}
.ch-sigil svg { width: 20px; height: 20px; display: block; }
.channel h3 { font-family: var(--serif); font-size: 1.12rem; color: var(--text); margin: 0 0 8px; }
.channel p { color: var(--muted); font-size: 0.92rem; margin: 0 0 16px; max-width: none; flex: 1; }
.channel .mail-line { align-self: flex-start; margin-top: auto; font-size: 0.86rem; }

/* ---- press contact: the address carries the emphasis, the routing note does not ---- */
/* Phase 6: OBJECT + a gold left rail — this is the press room's published-
   contact object, and the rail is the only gold edge it needs. */
.press-contact {
  background:
    linear-gradient(90deg, var(--gold-faint), transparent 60%),
    var(--surface-panel);
  border-left: var(--rule) solid var(--gold-soft);
  padding: 20px 22px; max-width: 760px;
}
.press-contact p { margin-bottom: 0; }
.press-contact .pc-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
}
.press-contact .pc-second { color: var(--muted-2); font-size: 0.88rem; margin-top: 14px; }

/* fact sheet + angles + citation + assets (press) */
.fact-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 0 0 8px !important; }
/* Phase 6: INSET — fact-sheet rows are reference material, not evidence cards. */
.fact-list li { padding: 14px 16px; }
.fact-list .fv { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-bright); display: block; }
.fact-list .fl { color: var(--muted-2); font-size: 0.82rem; }
.angle { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin-bottom: 16px; }
.angle .a-num { font-family: var(--serif); font-size: 1.25rem; color: var(--gold-bright); }
.angle p { margin: 4px 0 0; }
.angle .a-caveat { color: var(--muted-2); font-size: 0.84rem; margin-top: 4px; }

/* Phase 6: INSET — a quotable citation recessed into the page, not a card. */
.citation-box {
  padding: 14px 16px; font-family: var(--mono); font-size: 0.86rem; color: #c8d0e2;
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
}
.citation-box .cit-text { flex: 1; }
.copy-btn {
  cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 8px; padding: 6px 14px; font-size: 0.8rem; font-weight: 700; white-space: nowrap;
  font-family: var(--sans); transition: border-color 0.2s, transform 0.15s;
}
.copy-btn:hover { border-color: var(--gold-soft); transform: translateY(-1px); }
.copy-btn.copied { color: var(--emerald); border-color: var(--emerald-soft); }

.asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.asset { padding: 14px; }
/* Phase 6: the preview is INSET into its asset Object (it already read that
   way; this only puts it on the shared inset scale). */
.asset .asset-preview {
  width: 100%; height: auto; aspect-ratio: 1200/630;
  /* an image preview keeps an opaque backdrop so transparent PNGs read
     consistently — the one inset that overrides the shared translucent fill */
  background: var(--obsidian);
  margin-bottom: 12px; display: block;
  object-fit: contain;
}
.asset h3 { font-size: 1rem; margin-bottom: 4px; font-family: var(--serif); color: var(--text); }
.asset p { color: var(--muted-2); font-size: 0.82rem; margin-bottom: 10px; }
.asset .dl-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* download chips are interactive, so they take the ice role, not gold (D-011) */
.asset .dl-row a {
  font-size: 0.78rem; font-weight: 700; text-decoration: none; color: var(--ice);
  border: var(--hair) solid var(--line); border-radius: var(--radius-xs);
  padding: 4px 10px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.asset .dl-row a:hover {
  color: var(--ice-bright); border-color: var(--ice-soft); background: var(--ice-faint);
}

/* placeholder / pending contact note */
.pending-note {
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.07), rgba(255, 209, 102, 0.02));
  border: 1px solid rgba(255, 209, 102, 0.24); border-left: 3px solid #ffd166;
  border-radius: var(--radius-sm); padding: 12px 16px; color: #e6dbb8; font-size: 0.9rem;
  max-width: 760px;
}

/* library groups */
.lib-group { margin-top: 8px; }
.lib-group > h2 {
  font-family: var(--serif); font-size: 1.35rem; color: var(--gold-bright);
  margin: 26px 0 14px; display: flex; align-items: center; gap: 12px;
}
.lib-group > h2::after { content: ""; flex: 1; height: var(--hair); background: var(--line); }

/* ---- published issues: a dossier, not another tile in a grid ---- */
.lib-dossiers { display: grid; gap: 18px; margin-top: 18px; }
.dossier {
  position: relative;
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(24, 29, 46, 0.92), rgba(14, 17, 28, 0.94));
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.dossier:hover {
  border-color: var(--ice-soft);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -26px rgba(125, 220, 255, 0.5);
}
.dossier:focus-within { border-color: var(--ice); box-shadow: var(--focus); }

.ds-cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 28px 18px;
  border-right: var(--hair) solid var(--line);
  background: radial-gradient(130% 90% at 50% 0%, var(--gold-faint), transparent 70%);
}
.ds-num {
  font-family: var(--serif); font-size: 3rem; line-height: 1;
  color: var(--gold); letter-spacing: 0.06em;
}
/* wax seal, drawn in CSS so the renderer stays free of inline SVG */
.ds-seal {
  width: 34px; height: 34px; border-radius: 50%;
  border: var(--rule) solid var(--gold-soft);
  background:
    radial-gradient(circle at 50% 42%, var(--gold-faint), transparent 70%);
  position: relative;
}
.ds-seal::after {
  content: ""; position: absolute; inset: 6px;
  border-radius: 50%; border: var(--hair) solid var(--gold-soft);
}
.ds-issue {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted-2);
}

.ds-body { padding: 24px clamp(18px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.ds-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ds-state {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
  border: var(--hair) solid var(--gold-soft); background: var(--gold-faint);
  border-radius: var(--radius-pill); padding: 4px 11px;
}
.ds-cat {
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted-2);
}
.ds-title { font-family: var(--serif); font-size: clamp(1.28rem, 2vw, 1.62rem); line-height: 1.22; }
.ds-title a { color: var(--text); text-decoration: none; }
.ds-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ds-title a:focus-visible { outline: none; }
.dossier:hover .ds-title a { color: var(--ice-bright); }
.ds-sub { color: var(--gold); font-size: 0.86rem; font-weight: 700; }
.ds-sum { color: var(--muted); font-size: 0.94rem; line-height: 1.62; }
.ds-metric {
  font-family: var(--mono); font-size: 0.82rem;
  color: var(--steel); letter-spacing: 0.02em;
}
.ds-tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.ds-tags li {
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--steel);
  border: var(--hair) solid var(--line); border-radius: var(--radius-pill); padding: 4px 10px;
}
.ds-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  color: var(--ice); font-weight: 700; font-size: 0.92rem;
}
.dossier:hover .ds-cta { color: var(--ice-bright); }
.dossier:hover .ds-cta .tl-chev { transform: translateX(3px); }

/* Was 720, now tablet (820). */
@media (max-width: 820px) {
  .dossier { grid-template-columns: 1fr; }
  .ds-cover {
    flex-direction: row; justify-content: flex-start; gap: 14px;
    padding: 16px 18px;
    border-right: 0; border-bottom: var(--hair) solid var(--line);
  }
  .ds-num { font-size: 2rem; }
  .ds-seal { width: 26px; height: 26px; }
}

/* responsive collapses. Was 900, now tablet (820). */
@media (max-width: 820px) {
  .persp-grid, .dir-grid, .route-grid, .fact-list, .asset-grid { grid-template-columns: 1fr; }
  .latest { grid-template-columns: 1fr; }
  .doc-cols, .channels { grid-template-columns: 1fr; }
}
/* 640px retained — orphan value, shared with issue-grid/trust-route above. */
@media (max-width: 640px) {
  .fact-list { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 8.1 — EVIDENCE COMPONENT SYSTEM
   PHASE_8_EDITORIAL_EVIDENCE_ARCHITECTURE.md §5. Append-only: nothing above
   this line is modified. Reuses Phase 3/4/5/6/7 tokens and the
   Surface/Object/Inset/no-container grammar; introduces no new colour.
   As of Phase 8.2B/8.2C, .finding-scene + the Atlas family carry Flagship
   01 (#playtime). As of Phase 8.3, .figure-frame/.fig-* carry the ordinary
   evidence figures site-wide (wave/refund-share/playtime-median/
   refund-cluster/vet/quality×2 charts); the bare .fig-eyebrow/.fig-question/
   .fig-unit/.fig-body/.fig-reading/.fig-caveat text roles (no .figure-frame
   plate) carry the two supporting figures nested inside the Chapter V
   archive drawer (tier/lang), avoiding a double-frame there. Phase 8.3B
   de-carded .figure-frame itself: it is deliberately NOT a Surface (no fill,
   no radius, no four-sided border) — top/bottom hairlines only, so ordinary
   figures read as editorial plates in the page flow rather than dashboard
   cards; .figure-frame--pair is the one approved exception (quality pair,
   one shared plate). .compare/.signal-row/.instrument/.chapter-bridge/
   .metric--display remain unused in production.
   ============================================================ */

/* ---- FINDING SCENE — a page region, not a card. No border, no shadow,
   no radius, ever. Breaks out to the viewport via the standard 100vw/-50vw
   technique so it can exceed --w-wide inside --w-content sections; body's
   existing overflow-x:hidden guards the 1px scrollbar edge case. ---- */
.finding-scene {
  position: relative; left: 50%; right: 50%;
  width: 100vw; margin-left: -50vw; margin-right: -50vw;
  margin-top: calc(var(--rhythm-chapter) * 1.5);
  margin-bottom: calc(var(--rhythm-chapter) * 1.5);
  background: radial-gradient(1100px 420px at 18% 0%, var(--accent-faint), transparent 65%);
}
.scene-inner { max-width: var(--w-wide); margin: 0 auto; padding: var(--rhythm-block) var(--space-5); }
.scene-eyebrow {
  display: block; margin-bottom: var(--space-3);
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: var(--tracking-meta); color: var(--accent);
}
.scene-headline {
  font-family: var(--serif); font-weight: 700; color: var(--text);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.12;
  max-width: 22ch; text-wrap: balance; margin-bottom: var(--space-4);
}
.scene-deck {
  max-width: var(--w-prose); font-family: var(--sans);
  font-size: 1.05rem; line-height: 1.6; color: var(--muted);
  margin-bottom: var(--space-6);
}
/* asymmetric by default: text ~40%, evidence ~60%. --chart-led collapses
   to one column so a full-width figure can lead instead. */
.scene-body {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-7) var(--space-8); align-items: start;
}
.finding-scene--chart-led .scene-body { grid-template-columns: 1fr; gap: var(--space-6); }
.scene-text, .scene-evidence { min-width: 0; }
@media (max-width: 1024px) {
  .scene-body { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 560px) {
  .finding-scene { background: none; }
  .scene-headline { font-size: clamp(1.5rem, 6.5vw, 2rem); max-width: none; }
}

/* ---- FIGURE FRAME — an editorial evidence plate, not a dashboard card.
   Fixed part order: eyebrow, question, unit, controls, body, reading,
   caveat, foot. Phase 8.3B de-carding (§5 refinement): no fill, no
   four-sided border, no radius — a plate is bounded only by top/bottom
   hairlines, the same rule weight as .fig-foot's internal divider, so nested
   figures never read as a second frame. Horizontal padding is 0: the plate's
   text sits flush with .qblock/.caveat-strip above and below it, so the
   chapter reads as one continuous page, not text-then-card-then-text.
   .chart-block (heatmap only, Phase 8.5) stays untouched. ---- */
.figure-frame {
  border-top: var(--hair) solid var(--border-quiet);
  border-bottom: var(--hair) solid var(--border-quiet);
  padding: var(--space-6) 0 var(--space-5);
  margin-bottom: var(--space-7);
}
.fig-eyebrow {
  display: block; margin-bottom: var(--space-2);
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: var(--tracking-meta); color: var(--muted-2);
}
.fig-question {
  font-family: var(--sans); font-weight: 700; font-size: 1.05rem;
  line-height: 1.35; color: var(--text); margin-bottom: 2px;
}
.fig-unit {
  font-family: var(--sans); font-style: italic; font-size: 0.86rem;
  color: var(--muted); margin-bottom: var(--space-4);
}
.fig-controls { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.fig-body { margin-bottom: var(--space-2); }
.fig-reading {
  font-family: var(--sans); font-size: 0.94rem; line-height: 1.55;
  color: var(--text); max-width: var(--w-prose); margin-top: var(--space-4);
}
.fig-caveat {
  margin-top: var(--space-3); padding-left: var(--space-3);
  border-left: var(--hair) dashed rgba(154, 166, 192, 0.35);
  color: var(--muted); font-size: 0.86rem; line-height: 1.5; max-width: var(--w-prose);
}
.fig-foot {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: var(--hair) solid var(--line-soft);
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.4px;
  color: var(--muted-2);
}
@media (max-width: 560px) {
  .figure-frame { padding: var(--space-5) 0 var(--space-4); }
  .fig-controls { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
}

/* ---- FIGURE FRAME, PAIR MODIFIER — the one reusable exception to "no new
   component": #quality-chart/#quality-neg-chart are an approved deliberate
   small multiple (§ Phase 8.3 brief), so they share ONE plate (one pair of
   hairlines, one .fig-foot) instead of two, with a hairline column divider
   between them rather than a second frame. Desktop: side by side. Mobile:
   stacks, divider rotates to a horizontal rule — still one visual family,
   never two boxes. ---- */
.figure-frame--pair {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--space-6); row-gap: var(--space-5);
}
.figure-frame--pair .fig-col { min-width: 0; }
.figure-frame--pair .fig-col + .fig-col {
  border-left: var(--hair) solid var(--border-quiet); padding-left: var(--space-6);
}
.figure-frame--pair .fig-foot { grid-column: 1 / -1; }
/* 900px, not 560/767: matches .grid2's own protected collapse point (Phase 7
   measured that a #quality-chart-class .bar-row column narrower than ~380px
   clips real content — moving this to a smaller breakpoint reproduces that
   exact regression). */
@media (max-width: 900px) {
  .figure-frame--pair { grid-template-columns: 1fr; }
  .figure-frame--pair .fig-col + .fig-col {
    border-left: none; padding-left: 0;
    border-top: var(--hair) solid var(--border-quiet); padding-top: var(--space-5);
  }
}

/* ---- COMPARE — two/three values, equal weight, no colour semantics.
   No container: a hairline divider is the only separator. ---- */
.compare { margin: var(--space-5) 0; }
.cmp-label {
  display: block; margin-bottom: var(--space-3);
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: var(--tracking-meta); color: var(--muted-2);
}
.cmp-values { display: flex; align-items: flex-end; gap: var(--space-5); }
.cmp-value { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-num {
  font-family: var(--serif); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--gold-bright); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1;
}
.cmp-vl { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); }
.cmp-vl2 { font-family: var(--sans); font-size: 0.76rem; font-style: italic; color: var(--muted-2); }
.cmp-gap {
  align-self: center; padding-bottom: 8px;
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: var(--tracking-meta); color: var(--muted-2);
}
.cmp-divider { align-self: stretch; width: var(--hair); background: var(--line-soft); }
.cmp-foot { margin-top: var(--space-3); font-family: var(--mono); font-size: 0.72rem; color: var(--muted-2); }
@media (max-width: 430px) {
  .cmp-values { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .cmp-divider { display: none; }
}

/* ---- SIGNAL ROW — supporting facts, quieter than a flagship metric.
   INSET tiles (§7.4), a fresh rule so the shared INSET selector stays
   untouched; deliberately smaller than the Phase-5 .stat/.bigstat tier. ---- */
.signal-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4); margin: var(--space-6) 0;
}
.sr-item {
  background: var(--surface-inset);
  border: var(--hair) solid var(--border-quiet);
  border-radius: var(--radius-inset);
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.sr-v {
  display: block; font-family: var(--serif); font-weight: 700;
  color: var(--gold-bright); font-variant-numeric: tabular-nums;
  font-size: 1.5rem; line-height: 1.15;
}
.sr-l { display: block; margin-top: 4px; font-family: var(--sans); font-size: 0.8rem; color: var(--muted-2); }
.sr-n { display: block; margin-top: 4px; font-family: var(--mono); font-size: 0.68rem; color: var(--muted-2); }
@media (max-width: 560px) {
  .signal-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---- INSTRUMENT — shell for the heatmap/explorer, later. --w-wide via the
   same breakout as .finding-scene. Ice eyebrow: instruments are interaction
   (D-011), not charted evidence. Current heatmap/explorer markup untouched. ---- */
.instrument {
  position: relative; left: 50%; right: 50%;
  width: 100vw; margin-left: -50vw; margin-right: -50vw;
  margin-top: var(--rhythm-block); margin-bottom: var(--rhythm-block);
}
.instr-inner { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--space-5); }
.instr-frame {
  background: var(--surface-quiet);
  border: var(--hair) solid var(--border-quiet);
  border-radius: var(--radius-surface);
  padding: var(--space-6);
}
.instr-eyebrow {
  display: block; margin-bottom: var(--space-2);
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: var(--tracking-meta); color: var(--ice);
}
.instr-title { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--text); margin-bottom: 6px; }
.instr-hint { font-family: var(--sans); font-size: 0.88rem; color: var(--muted); margin-bottom: var(--space-4); }
.instr-controls { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.instr-body { margin-bottom: var(--space-4); }
.instr-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  padding-top: var(--space-3); border-top: var(--hair) solid var(--line-soft);
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted-2);
}
.instr-caveat {
  margin-top: var(--space-3); padding-left: var(--space-3);
  border-left: var(--hair) dashed rgba(154, 166, 192, 0.35);
  color: var(--muted); font-size: 0.86rem; max-width: var(--w-prose);
}
.instr-foot {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: var(--hair) solid var(--line-soft);
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted-2);
}
@media (max-width: 560px) {
  .instr-frame { padding: var(--space-4); }
  .instr-controls { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
}

/* ---- CHAPTER BRIDGE — one connective sentence, no ornament. ---- */
.chapter-bridge {
  max-width: var(--w-prose); margin: var(--rhythm-block) auto; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  line-height: 1.5; color: var(--muted);
}

/* ---- METRIC DISPLAY — tier-1 end of the Phase-5 metric family (§7.6):
   same value/label language (serif/700/gold-bright/tabular-nums value,
   plain sans muted label), one size class larger than .stat/.bigstat. ---- */
.metric--display { display: block; }
.metric--display .mdv {
  display: block; font-family: var(--serif); font-weight: 700; line-height: 1.03;
  color: var(--gold-bright); font-variant-numeric: tabular-nums;
  font-size: clamp(3.2rem, 7vw, 5.2rem);
}
.metric--display .mdl {
  display: block; margin-top: var(--space-2); max-width: 32ch;
  font-family: var(--sans); font-weight: 400; color: var(--muted);
  font-size: 0.98rem; line-height: 1.4;
}
.metric--display .mdn {
  display: block; margin-top: var(--space-1);
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted-2);
}
@media (max-width: 560px) {
  .metric--display .mdv { font-size: 3rem; }
}

/* ============================================================
   PHASE 8.2B — TRUST ATLAS PLATE (Concept 2B, Flagship 01 only)
   Extends the Phase 8.1 system above. Reuses .finding-scene/
   .scene-inner as the outer wrapper and .fig-eyebrow/.fig-question/
   .fig-unit for the plate's figure-identity text.
   ============================================================ */

.finding-scene--atlas {
  padding: clamp(36px, 5vw, 88px) clamp(20px, 4vw, 40px) clamp(32px, 4.5vw, 72px);
  background:
    radial-gradient(1100px 480px at 12% -8%, var(--gold-faint), transparent 60%),
    radial-gradient(900px 460px at 92% 12%, var(--ice-faint), transparent 58%);
  border-top: var(--hair) solid var(--line);
  border-bottom: var(--hair) solid var(--line);
}
.finding-scene--atlas .scene-inner { padding: 0; }

/* side gutters — reserved motion ports, static until the motion pass */
.atlas-gutter { position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; opacity: 0.5; }
.atlas-gutter-l { left: 0; }
.atlas-gutter-r { right: 0; }
.atlas-gutter svg { width: 100%; height: 100%; }
@media (max-width: 1200px) { .atlas-gutter { display: none; } }

.atlas-slug {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: var(--rule) solid var(--gold);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted-2);
}
.atlas-slug b { color: var(--gold); font-weight: 400; }
.atlas-slug .ice { color: var(--ice); }

.atlas-editorial {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px); align-items: end;
  margin: clamp(30px, 4.5vw, 64px) 0 clamp(30px, 4vw, 56px);
}
.atlas-h {
  margin: 0; font-family: var(--serif); font-weight: 700; color: var(--text);
  font-size: clamp(2.5rem, 5.2vw, 4.4rem); line-height: 1.02;
  letter-spacing: -0.018em; text-wrap: balance;
}
.atlas-deck {
  margin: 0 0 6px; font-family: var(--sans); color: var(--muted);
  font-size: clamp(0.95rem, 1.05vw, 1.02rem); line-height: 1.62; max-width: 40ch;
}

/* the plate — the evidence object itself. never a rounded card. */
.atlas-plate {
  position: relative; margin-top: clamp(28px, 4vw, 54px);
  padding: clamp(26px, 3vw, 40px) clamp(16px, 2.2vw, 30px) var(--space-4);
  background: linear-gradient(180deg, rgba(11, 13, 22, 0.6), rgba(8, 9, 15, 0.15));
  border: var(--hair) solid var(--line-soft);
}
.atlas-reg { position: absolute; width: 26px; height: 26px; pointer-events: none; }
.atlas-reg-tl { top: -1px; left: -1px; border-top: var(--rule) solid var(--gold); border-left: var(--rule) solid var(--gold); }
.atlas-reg-tr { top: -1px; right: -1px; border-top: var(--rule) solid var(--gold); border-right: var(--rule) solid var(--gold); }
.atlas-reg-bl { bottom: -1px; left: -1px; border-bottom: var(--rule) solid var(--gold); border-left: var(--rule) solid var(--gold); }
.atlas-reg-br { bottom: -1px; right: -1px; border-bottom: var(--rule) solid var(--gold); border-right: var(--rule) solid var(--gold); }

.atlas-plate-top {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: clamp(20px, 3vw, 56px); align-items: start; margin-bottom: var(--space-3);
}
.atlas-callout { margin-top: calc(-1 * clamp(46px, 5.4vw, 76px)); }
.atlas-callout-v {
  display: block; font-family: var(--serif); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--gold-bright);
  font-size: clamp(3.4rem, 7.8vw, 6.6rem); line-height: 0.9; letter-spacing: -0.03em;
}
.atlas-callout-l {
  display: block; margin-top: var(--space-3); max-width: 24ch;
  font-family: var(--sans); font-size: 0.92rem; line-height: 1.45; color: var(--text);
}
.atlas-callout-n {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted-2);
}

.atlas-plot { position: relative; }
.atlas-svg { display: block; width: 100%; height: auto; }

.atlas-boundary { stroke: var(--crimson); stroke-width: 1.6; stroke-dasharray: 7 5; }
.atlas-zone { fill: rgba(255, 92, 110, 0.075); }
.atlas-reference { stroke: var(--ice); stroke-width: 1.6; stroke-dasharray: 8 6; }
.atlas-ref-ghost { stroke: var(--ice); stroke-width: 1.2; stroke-dasharray: 3 7; opacity: 0.45; }
.atlas-measure { stroke: var(--gold); stroke-width: 1.8; }
.atlas-measure-lab { font-family: var(--serif); font-size: 42px; font-weight: 700; fill: var(--gold); }
.atlas-leader { stroke: var(--gold); stroke-width: 1.2; opacity: 0.55; stroke-dasharray: 4 4; }
.atlas-lab-hot { font-family: var(--mono); font-size: 14px; letter-spacing: 1.8px; fill: var(--crimson); }
.atlas-lab-ice { font-family: var(--mono); font-size: 14px; letter-spacing: 1.8px; fill: var(--ice); }

.atlas-curve { fill: none; stroke: var(--crimson); stroke-width: 2.4; stroke-linejoin: round; }
.atlas-area { fill: url(#atlasGrad); }
.atlas-pt { fill: var(--obsidian); stroke: var(--crimson); stroke-width: 2; }
.atlas-pt-peak { fill: var(--gold-bright); stroke: var(--gold); stroke-width: 2; }
.atlas-pt-ring { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0.45; }
.atlas-val { font-family: var(--serif); font-size: 19px; font-weight: 700; fill: var(--muted); }

.atlas-grid { stroke: var(--line-soft); stroke-width: 1; }
.atlas-sep { stroke: var(--line-soft); stroke-width: 1; opacity: 0.55; }
.atlas-axis { stroke: var(--steel-dim); stroke-width: 1; }
.atlas-tick { font-family: var(--mono); font-size: 13px; fill: var(--steel-dim); letter-spacing: 1px; }
.atlas-band { font-family: var(--mono); font-size: 14px; fill: var(--muted-2); letter-spacing: 1px; }
.atlas-axis-note { font-family: var(--mono); font-size: 12.5px; fill: var(--steel-dim); letter-spacing: 1.6px; }

.atlas-readout {
  display: flex; flex-wrap: wrap; gap: var(--space-3) clamp(16px, 2.4vw, 38px);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: var(--hair) solid var(--line-soft);
  font-family: var(--mono); font-size: 0.73rem; letter-spacing: 0.05em; color: var(--muted-2);
}
.atlas-readout .k { color: var(--steel-dim); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.65rem; }
.atlas-readout .v { color: var(--text); }
.atlas-readout .v-gold { color: var(--gold-bright); }
.atlas-readout .v-ice { color: var(--ice); }

.atlas-plate-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--hair) solid var(--line-soft);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--muted-2);
}
.atlas-stamp { display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }

.atlas-close {
  margin-top: clamp(26px, 3.6vw, 52px);
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px); align-items: start;
}
.atlas-reading { margin: 0; font-family: var(--serif); font-size: clamp(1.1rem, 1.55vw, 1.35rem); line-height: 1.5; color: var(--text); max-width: 46ch; }
.atlas-limit {
  margin: 0; padding-left: var(--space-3);
  border-left: var(--hair) dashed rgba(154, 166, 192, 0.35);
  font-family: var(--sans); font-size: 0.87rem; line-height: 1.55; color: var(--muted); max-width: 46ch;
}
.atlas-limit b { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-dim); font-weight: 400; }

/* ---- mobile: the plate becomes a depth profile. Boundary becomes a
   horizontal rule; reference becomes a vertical rule after it; the ×
   measure sits on the peak row. Left/right offsets that depend on the
   reference value are set inline by renderAtlas() in app.js. ---- */
.atlas-profile { display: none; }
.atlas-relation { display: none; }

.atlas-prof-scale {
  display: flex; justify-content: space-between; padding-left: 74px; margin-bottom: 34px;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--steel-dim);
}
.atlas-prow { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; padding: 5px 0; }
.atlas-prow-l { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); text-align: right; }
.atlas-prow-bar { position: relative; height: 20px; background: rgba(6, 7, 12, 0.5); }
.atlas-prow-fill { display: block; height: 100%; background: var(--steel-dim); }
.atlas-prow-v {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-weight: 700; font-size: 0.88rem; color: var(--text);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 6px var(--obsidian);
}
.atlas-prow.is-peak { background: rgba(255, 92, 110, 0.075); margin: 0 -6px; padding: 6px 6px; }
.atlas-prow.is-peak .atlas-prow-bar { height: 34px; }
.atlas-prow.is-peak .atlas-prow-fill { background: linear-gradient(90deg, #a53344, var(--crimson)); }
.atlas-prow.is-peak .atlas-prow-v { font-size: 1.4rem; color: var(--gold-bright); }
.atlas-measure-m {
  position: absolute; top: -13px; height: 11px;
  border: var(--rule) solid var(--gold); border-bottom: 0;
}
.atlas-measure-m span {
  position: absolute; left: 50%; top: -19px; transform: translateX(-50%);
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--gold); line-height: 1;
}
.atlas-prof-boundary {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 8px;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--crimson);
}
.atlas-prof-boundary::before, .atlas-prof-boundary::after { content: ""; height: var(--hair); background: var(--crimson-soft); }
.atlas-prof-boundary::before { width: 22px; }
.atlas-prof-boundary::after { flex: 1; }
.atlas-prof-after { position: relative; padding-top: 18px; }
.atlas-prof-ref {
  position: absolute; top: 16px; bottom: 4px;
  width: var(--hair); background: var(--ice); opacity: 0.85;
}
.atlas-prof-ref span {
  position: absolute; top: -17px; left: -1px; white-space: nowrap;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ice);
}
.atlas-prof-note {
  margin: 10px 0 0; font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-dim); line-height: 1.6;
}

@media (max-width: 1024px) {
  .atlas-editorial, .atlas-close { grid-template-columns: 1fr; align-items: start; }
  .atlas-plate-top { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--space-5); }
}
@media (max-width: 820px) {
  .atlas-plate-top { grid-template-columns: 1fr; gap: var(--space-4); }
  .atlas-callout { margin-top: calc(-1 * clamp(30px, 6vw, 48px)); }
}
@media (max-width: 700px) {
  .atlas-svg { display: none; }
  .atlas-profile { display: block; }
  .atlas-relation { display: block; }
  .atlas-plate { padding: var(--space-5) var(--space-4) var(--space-3); }
  .atlas-plate-top { display: none; }
  .atlas-readout { gap: var(--space-2) var(--space-4); font-size: 0.67rem; }
  .atlas-plate-foot { font-size: 0.62rem; }

  .atlas-relation { margin: clamp(22px, 6vw, 34px) 0 0; padding-left: var(--space-5); position: relative; }
  .atlas-relation::before {
    content: ""; position: absolute; left: 3px; top: 10px; bottom: 30px;
    width: var(--rule); background: linear-gradient(180deg, var(--crimson), var(--ice));
  }
  .atlas-rel-v { display: block; font-family: var(--serif); font-weight: 700; font-size: 3.4rem; line-height: 0.92; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
  .atlas-rel-l { display: block; margin-top: var(--space-3); font-family: var(--sans); font-size: 0.92rem; line-height: 1.45; color: var(--text); }
  .atlas-rel-n { display: block; margin-top: 5px; font-family: var(--mono); font-size: 0.66rem; color: var(--muted-2); }
  .atlas-rel-mid { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); }
  .atlas-rel-x { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; color: var(--gold); line-height: 1; }
  .atlas-rel-x-l { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
  .atlas-rel-v2 { display: block; font-family: var(--serif); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--steel); font-variant-numeric: tabular-nums; }
  .atlas-rel-l2 { display: block; margin-top: 6px; font-family: var(--sans); font-size: 0.85rem; line-height: 1.4; color: var(--muted); }

  .atlas-h { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .atlas-slug { flex-direction: column; gap: 3px; font-size: 0.63rem; }
  .atlas-editorial { margin: var(--space-5) 0 var(--space-4); }
}

/* ============================================================
   PHASE 8.2C — CRITFIELD MOTION FIELD (D-038), Flagship 01
   "The Trust Atlas is being surveyed while you read."
   Tier 1 .is-ambient — gutter survey field, >=1201px, paused off-screen.
   Tier 2 .is-armed -> .is-surveying — one entry beat, once per load.
   Tier 3 hero — architecture only, see D-038; nothing deployed here.
   The settled scene carries NO state class, so no rule below can match
   a re-rendered element: motion state and data state stay independent.
   ============================================================ */

@keyframes atlas-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes atlas-focus { from { opacity: 0; filter: blur(5px) } to { opacity: 1; filter: blur(0) } }
@keyframes atlas-draw-y { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes atlas-draw-x { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes atlas-trace { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes atlas-lock { from { opacity: 0; transform: scale(2.1) } to { opacity: 1; transform: scale(1) } }
@keyframes atlas-set { from { opacity: 0; transform: scale(0.7) } to { opacity: 1; transform: scale(1) } }

/* transform boxes/origins are declared unconditionally — inert while settled */
.finding-scene--atlas [data-motion="boundary"],
.finding-scene--atlas [data-motion="leader"],
.finding-scene--atlas [data-motion="reference"],
.finding-scene--atlas [data-motion="measure"] { transform-box: view-box; }
.finding-scene--atlas [data-motion="boundary"] { transform-origin: 316.7px 52px; }
.finding-scene--atlas [data-motion="leader"] { transform-origin: 233.3px 4px; }
.finding-scene--atlas [data-motion="reference"] { transform-origin: 316.7px 0; }
.finding-scene--atlas [data-motion="points"],
.finding-scene--atlas [data-motion="peak"],
.finding-scene--atlas [data-motion="peak-ring"] { transform-box: fill-box; transform-origin: center; }

/* ---- armed: the from-state, set only while the scene is off-screen ---- */
.finding-scene--atlas.is-armed [data-motion="grid"],
.finding-scene--atlas.is-armed [data-motion="zone"],
.finding-scene--atlas.is-armed [data-motion="boundary-label"],
.finding-scene--atlas.is-armed [data-motion="callout"],
.finding-scene--atlas.is-armed [data-motion="peak"],
.finding-scene--atlas.is-armed [data-motion="peak-ring"],
.finding-scene--atlas.is-armed [data-motion="reference-ghost"],
.finding-scene--atlas.is-armed [data-motion="reference-label"],
.finding-scene--atlas.is-armed [data-motion="reference-value"],
.finding-scene--atlas.is-armed [data-motion="measure-tick"],
.finding-scene--atlas.is-armed [data-motion="measure-label"],
.finding-scene--atlas.is-armed [data-motion="area"],
.finding-scene--atlas.is-armed [data-motion="points"],
.finding-scene--atlas.is-armed [data-motion="values"],
.finding-scene--atlas.is-armed [data-motion="readout"],
.finding-scene--atlas.is-armed .atlas-reg { opacity: 0; }
.finding-scene--atlas.is-armed [data-motion="boundary"],
.finding-scene--atlas.is-armed [data-motion="leader"],
.finding-scene--atlas.is-armed [data-motion="measure"] { transform: scaleY(0); }
.finding-scene--atlas.is-armed [data-motion="reference"] { transform: scaleX(0); }
.finding-scene--atlas.is-armed [data-motion="curve"] { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---- surveying: the beat. Desktop timeline, ~1.66s end to end. ---- */
.finding-scene--atlas.is-surveying [data-motion="grid"] { animation: atlas-fade 260ms var(--ease) both; }
.finding-scene--atlas.is-surveying .atlas-reg { animation: atlas-lock 260ms var(--ease-out) 60ms both; }
.finding-scene--atlas.is-surveying [data-motion="zone"] { animation: atlas-fade 260ms var(--ease) 200ms both; }
.finding-scene--atlas.is-surveying [data-motion="boundary"] { animation: atlas-draw-y 300ms var(--ease-out) 200ms both; }
.finding-scene--atlas.is-surveying [data-motion="boundary-label"] { animation: atlas-fade 220ms var(--ease) 380ms both; }
.finding-scene--atlas.is-surveying [data-motion="peak-ring"] { animation: atlas-lock 260ms var(--ease-out) 460ms both; }
.finding-scene--atlas.is-surveying [data-motion="peak"] { animation: atlas-fade 200ms var(--ease) 520ms both; }
.finding-scene--atlas.is-surveying [data-motion="callout"] { animation: atlas-focus 320ms var(--ease-out) 560ms both; }
.finding-scene--atlas.is-surveying [data-motion="leader"] { animation: atlas-draw-y 220ms var(--ease-out) 600ms both; }
.finding-scene--atlas.is-surveying [data-motion="reference"] { animation: atlas-draw-x 320ms var(--ease-out) 760ms both; }
.finding-scene--atlas.is-surveying [data-motion="reference-ghost"] { animation: atlas-fade 240ms var(--ease) 800ms both; }
.finding-scene--atlas.is-surveying [data-motion="reference-label"] { animation: atlas-fade 220ms var(--ease) 940ms both; }
.finding-scene--atlas.is-surveying [data-motion="measure"] { animation: atlas-draw-y 260ms var(--ease-out) 1000ms both; }
.finding-scene--atlas.is-surveying [data-motion="measure-tick"] { animation: atlas-fade 180ms var(--ease) 1080ms both; }
.finding-scene--atlas.is-surveying [data-motion="measure-label"] { animation: atlas-focus 220ms var(--ease-out) 1160ms both; }
.finding-scene--atlas.is-surveying [data-motion="curve"] { animation: atlas-trace 420ms var(--ease) 1060ms both; }
.finding-scene--atlas.is-surveying [data-motion="area"] { animation: atlas-fade 300ms var(--ease) 1160ms both; }
.finding-scene--atlas.is-surveying [data-motion="points"] { animation: atlas-set 240ms var(--ease-out) calc(1180ms + var(--i, 0) * 40ms) both; }
.finding-scene--atlas.is-surveying [data-motion="values"] { animation: atlas-fade 220ms var(--ease) calc(1240ms + var(--i, 0) * 40ms) both; }
.finding-scene--atlas.is-surveying [data-motion="readout"] { animation: atlas-fade 240ms var(--ease) 1380ms both; }

/* ---- mobile beat (<=700px): same hooks, its own choreography, ~1.4s.
   The plate-top and the SVG are display:none here, the relation block and
   the depth profile are not — so only the delays and a few verbs change. ---- */
@media (max-width: 700px) {
  .finding-scene--atlas [data-motion="peak-bar"],
  .finding-scene--atlas [data-motion="points"] { transform-origin: left center; }
  .finding-scene--atlas [data-motion="boundary"] { transform-origin: left center; }
  .finding-scene--atlas [data-motion="reference"],
  .finding-scene--atlas .atlas-relation::before { transform-origin: top center; }

  .finding-scene--atlas.is-armed .atlas-relation::before,
  .finding-scene--atlas.is-armed [data-motion="reference"] { transform: scaleY(0); }
  /* scaleX(0) already hides these; adding opacity:0 here would outlive the
     transform-only animation and hold them invisible until settle */
  .finding-scene--atlas.is-armed [data-motion="peak-bar"],
  .finding-scene--atlas.is-armed [data-motion="points"] { transform: scaleX(0); opacity: 1; }
  .finding-scene--atlas.is-armed [data-motion="boundary"],
  .finding-scene--atlas.is-armed [data-motion="measure"] { transform: none; opacity: 0; }

  .finding-scene--atlas.is-surveying [data-motion="callout"] { animation: atlas-focus 280ms var(--ease-out) both; }
  .finding-scene--atlas.is-surveying .atlas-relation::before { animation: atlas-draw-y 320ms var(--ease-out) 120ms both; }
  .finding-scene--atlas.is-surveying [data-motion="measure-label"] { animation: atlas-set 220ms var(--ease-out) 400ms both; }
  .finding-scene--atlas.is-surveying [data-motion="reference-value"] { animation: atlas-focus 240ms var(--ease-out) 540ms both; }
  .finding-scene--atlas.is-surveying [data-motion="peak-bar"] { animation: atlas-draw-x 300ms var(--ease-out) 640ms both; }
  .finding-scene--atlas.is-surveying [data-motion="measure"] { animation: atlas-fade 240ms var(--ease) 780ms both; }
  /* the boundary is a worded rule here, not a line — it resolves, it does
     not stretch horizontally the way the desktop boundary draws */
  .finding-scene--atlas.is-surveying [data-motion="boundary"] { animation: atlas-fade 260ms var(--ease) 760ms both; }
  .finding-scene--atlas.is-surveying [data-motion="reference"] { animation: atlas-draw-y 240ms var(--ease-out) 880ms both; }
  /* the label is a child of the rule being scaled — hold it until the rule
     is at full height, so its type is never rendered distorted */
  .finding-scene--atlas.is-armed .atlas-prof-ref span { opacity: 0; }
  .finding-scene--atlas.is-surveying .atlas-prof-ref span { animation: atlas-fade 200ms var(--ease) 1120ms both; }
  .finding-scene--atlas.is-surveying [data-motion="points"] { animation: atlas-draw-x 260ms var(--ease-out) calc(920ms + var(--i, 0) * 38ms) both; }
  .finding-scene--atlas.is-surveying [data-motion="values"] { animation: atlas-fade 200ms var(--ease) calc(980ms + var(--i, 0) * 38ms) both; }
  .finding-scene--atlas.is-surveying [data-motion="readout"] { animation: atlas-fade 240ms var(--ease) 1180ms both; }
}

/* ---- tier 1: the ambient survey field. Desktop only — the gutters are
   already display:none below 1201px. Long, slow cycles that read as an
   instrument left running, never as particles or a HUD. ---- */
@keyframes atlas-ambient-rail { from { transform: translateY(0) } to { transform: translateY(-16px) } }
@keyframes atlas-ambient-route { from { stroke-dashoffset: 0 } to { stroke-dashoffset: -448 } }
@keyframes atlas-ambient-fix {
  0%, 76% { opacity: 0.45 }
  84% { opacity: 0.95 }
  92%, 100% { opacity: 0.45 }
}
@media (min-width: 1201px) {
  .finding-scene--atlas.is-ambient [data-motion="ambient"] .atlas-rail {
    animation: atlas-ambient-rail 52s ease-in-out infinite alternate;
  }
  .finding-scene--atlas.is-ambient [data-motion="ambient"] .atlas-route {
    stroke-dasharray: 200 24;
    animation: atlas-ambient-route 30s linear infinite;
  }
  .finding-scene--atlas.is-ambient [data-motion="ambient"] .atlas-fix {
    animation: atlas-ambient-fix 11s ease-in-out infinite;
  }
}

/* ---- reduced motion: the settled scene, immediately. JS also never arms
   the beat or the ambient field; these rules cover a mid-visit switch. ---- */
@media (prefers-reduced-motion: reduce) {
  .finding-scene--atlas [data-motion="ambient"] .atlas-rail,
  .finding-scene--atlas [data-motion="ambient"] .atlas-route,
  .finding-scene--atlas [data-motion="ambient"] .atlas-fix {
    animation: none !important; stroke-dasharray: none !important; transform: none !important;
  }
  .finding-scene--atlas.is-armed [data-motion]:not([data-motion="ambient"]),
  .finding-scene--atlas.is-surveying [data-motion]:not([data-motion="ambient"]),
  .finding-scene--atlas.is-armed .atlas-reg,
  .finding-scene--atlas.is-surveying .atlas-reg,
  .finding-scene--atlas.is-armed .atlas-relation::before,
  .finding-scene--atlas.is-surveying .atlas-relation::before,
  .finding-scene--atlas.is-armed .atlas-prof-ref span,
  .finding-scene--atlas.is-surveying .atlas-prof-ref span {
    animation: none !important; opacity: 1 !important;
    transform: none !important; filter: none !important;
  }
  .finding-scene--atlas.is-armed [data-motion="curve"],
  .finding-scene--atlas.is-surveying [data-motion="curve"] {
    stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
  }
}

/* ==================================================================
   PHASE 8.4B — RESEARCH FRONT PAGE RESET
   Findings register, Trust Atlas front-page handoff, and the full-study
   codex door. The hero/scale-register/limit-disclosure/route-node rules
   above are also part of this phase (edited in place, not appended, since
   they replace .study-frame/.cm-num directly). No motion added (§18) — the
   reveal observer's existing fade is the only transition on this surface.
   ================================================================== */

/* ---- findings register: an editorial index, not cards ---- */
.register-eyebrow {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--steel-dim);
  border-bottom: 1px solid var(--line); padding-bottom: 12px; margin: 0 0 4px;
}
.findings-register { list-style: none; margin: 0; padding: 0; }
.findings-register li { border-bottom: 1px solid var(--line-soft); }
.findings-register li:first-child { border-top: 1px solid var(--line-soft); }
.findings-register a {
  display: grid; grid-template-columns: 32px auto 1fr 20px; align-items: center;
  gap: 22px; padding: 18px 4px; text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease);
}
.findings-register a:hover, .findings-register a:focus-visible { background: rgba(125, 220, 255, 0.05); }
.fr-num { font-family: var(--mono); font-size: 0.78rem; color: var(--steel-dim); }
.fr-signal {
  font-family: var(--serif); font-weight: 700; font-size: 1.32rem;
  color: var(--text); white-space: nowrap;
}
.fr-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fr-claim { color: var(--text); font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.fr-evidence { color: var(--muted); font-size: 0.87rem; }
.fr-chev { color: var(--ice); font-family: var(--mono); transition: transform 0.2s ease; }
.findings-register a:hover .fr-chev, .findings-register a:focus-visible .fr-chev { transform: translateX(3px); }
@media (max-width: 560px) {
  .findings-register a { grid-template-columns: 24px auto 1fr 16px; gap: 12px; padding: 14px 2px; }
  .fr-signal { font-size: 1.12rem; }
  .fr-evidence { font-size: 0.8rem; }
}

/* ---- study cross-reference: a related chapter in the full study, NOT a
   description of the next visible section. The caption carries that
   distinction; "continues" is reserved for what actually comes next. ---- */
.study-xref {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0 0;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.xr-cap { color: var(--muted-2); }
.xr-cap::after { content: " \2192"; color: var(--steel-dim); }
.study-xref a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ice); text-decoration: none;
}
.study-xref a:hover, .study-xref a:focus-visible { color: var(--ice-bright); }

/* ---- chapter back-reference: where a moved scene's chapter now points up ---- */
.chapter-backref {
  font-family: var(--mono); font-size: 0.82rem; color: var(--muted-2);
  border-left: 2px solid var(--steel-dim); padding: 2px 0 2px 14px; margin: 0 0 28px;
}
.chapter-backref a { color: var(--ice); text-decoration: none; }
.chapter-backref a:hover, .chapter-backref a:focus-visible { color: var(--ice-bright); }

/* ---- full study door: publication index, not a card grid ---- */
.codex-line {
  list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px;
}
.codex-line li { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.codex-line a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.cx-num { font-family: var(--mono); font-size: 0.74rem; color: var(--steel-dim); }
.cx-label { font-family: var(--serif); font-size: 0.98rem; line-height: 1.3; color: var(--text); }
.codex-line a:hover .cx-label, .codex-line a:focus-visible .cx-label { color: var(--ice-bright); }
.codex-line li.cx-reserved { opacity: 0.55; }
.codex-line li.cx-reserved .cx-label { color: var(--muted); }
.cx-soon {
  display: block; font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted-2); margin-top: 2px;
}
@media (max-width: 1024px) { .codex-line { grid-template-columns: repeat(4, 1fr); row-gap: 22px; } }
@media (max-width: 560px) { .codex-line { grid-template-columns: repeat(2, 1fr); } }

/* ==================================================================
   PHASE 8.4C — CRITFIELD RESEARCH CODEX
   Two depths: a visible reading path (thesis → primary evidence → what it
   means → action → limit) and an evidence vault behind progressive
   disclosure, plus the desktop Route rail and the mobile Contents sheet.
   No new card system (D-037): every surface here is a hairline, a rail,
   or bare prose. The retired four-qblock grid rhythm is what these
   replace — .qgrid/.qblock themselves stay for the apparatus sections.
   ================================================================== */

/* ---- visible interpretation: prose, not a box ----
   The read block and the action rail are one argument, so they sit at
   --space-5 from each other and only the pair carries --rhythm-block below. */
.chapter-read { max-width: var(--w-prose); margin: 0 0 var(--space-5); }
.chapter-read p { color: var(--body); font-size: 1rem; line-height: 1.62; margin: 0 0 14px; }
.chapter-read p:last-child { margin-bottom: 0; }
.read-kicker, .act-kicker {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--steel-dim); margin: 0 0 10px;
}

/* ---- action / implication: the field-note rail, never a green card ---- */
.chapter-action {
  max-width: var(--w-prose); margin: 0 0 var(--rhythm-block);
  border-left: 2px solid var(--steel-dim); padding: 2px 0 2px 18px;
}
.chapter-action p { color: var(--body); font-size: 0.96rem; line-height: 1.6; margin: 0; }
.chapter-action .act-kicker { margin-bottom: 8px; }

/* ---- disclosure rail: the evidence vault door ---- */
.rail { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line-soft); background: none; }
.rail:last-of-type { border-bottom: 1px solid var(--line-soft); }
.rail > summary {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: 11px 0; margin: 0;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 400; color: var(--steel);
  transition: color var(--dur-fast) var(--ease);
}
.rail > summary::-webkit-details-marker { display: none; }
.rail > summary::before { content: none; }
.rail > summary:hover, .rail > summary:focus-visible { color: var(--ice-bright); }
.rail[open] > summary { color: var(--text); margin: 0; }
/* the registration mark IS the open/closed state — no chevron, no pill */
.rail-node { position: relative; flex: none; width: 9px; height: 9px; top: 1px; transition: transform var(--dur-fast) var(--ease); }
.rail-node::before, .rail-node::after { content: ""; position: absolute; background: var(--steel-dim); }
.rail-node::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.rail-node::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.rail[open] > summary .rail-node { transform: rotate(45deg); }
.rail[open] > summary .rail-node::before,
.rail[open] > summary .rail-node::after { background: var(--ice); }
.rail-note {
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: normal;
  text-transform: none; color: var(--muted-2); flex: 1 1 auto; min-width: 0;
}
.rail > :not(summary) { max-width: var(--w-prose); }
.rail > h3 { font-family: var(--sans); font-size: 0.9rem; font-weight: 700; color: var(--text); margin: 4px 0 8px; }
.rail > p { color: var(--body); font-size: 0.94rem; line-height: 1.6; margin: 0 0 14px; }
.rail > ul { padding-left: 20px; color: var(--muted); font-size: 0.9rem; display: grid; gap: 8px; margin: 0 0 16px; }
.rail > .figure-frame { max-width: none; margin-bottom: 18px; }
.rail[open] > :not(summary) { animation: drawer 0.3s ease; }
@media (prefers-reduced-motion: reduce) {
  .rail[open] > :not(summary) { animation: none; }
  .rail-node { transition: none; }
}

/* ---- desktop route rail: a survey rail in the margin, never a sidebar ----
   THRESHOLDS ARE MEASURED, NOT ASSUMED. The reading column is
   var(--w-content) 1160px + 24px padding, so the text edge sits at
   (100vw − 1160) / 2 + 24px. A rail needs 16px page margin + its own width +
   a gap before that edge:
     · compact rail (42px) needs ~66px  → fits from --w-wide (1320px)
     · full rail   (132px) needs ~164px → fits from 1440px
   Below 1320 the rail would sit on top of the reading column (measured: 13px
   overlap at 1201, 44px at 1320 for the full rail), so it is hidden there and
   the mobile Contents sheet takes over. Both values are existing canonical
   widths — 1320 is --w-wide, 1440 is a protected stable width. */
.route-rail { display: none; }
@media (min-width: 1320px) {
  .route-rail {
    display: block; position: fixed; z-index: 30;
    left: max(16px, calc((100vw - var(--w-content)) / 2 - 150px));
    top: 50%; transform: translateY(-50%); width: 132px;
    transition: opacity 0.45s var(--ease);
  }
  .route-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .rr-label {
    font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--steel-dim); margin: 0 0 14px; opacity: 0.75;
  }
  .route-rail li { position: relative; }
  .route-rail a {
    display: grid; grid-template-columns: 9px 20px 1fr; align-items: baseline; gap: 8px;
    text-decoration: none; color: var(--steel-dim);
    font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.03em; line-height: 1.35;
    transition: color var(--dur-fast) var(--ease);
  }
  .route-rail .rr-node { top: 1px; }
  .route-rail .rr-node { position: relative; width: 9px; height: 9px; }
  .route-rail .rr-node::before, .route-rail .rr-node::after { content: ""; position: absolute; background: currentColor; opacity: 0.7; }
  .route-rail .rr-node::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
  .route-rail .rr-node::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
  /* names wrap rather than clip — the gutter is narrow and a truncated route
     label reads as a broken menu, not a survey rail */
  .route-rail .rr-name { text-transform: uppercase; overflow-wrap: anywhere; }
  .route-rail li { position: relative; }
  .route-rail ol { gap: 11px; }
  .route-rail a:hover, .route-rail a:focus-visible { color: var(--steel); }
  /* active chapter: brighter node + a short signal line. No box, no fill. */
  .route-rail a[aria-current="true"] { color: var(--text); }
  .route-rail a[aria-current="true"] .rr-node::before,
  .route-rail a[aria-current="true"] .rr-node::after { background: var(--gold); opacity: 1; }
  .route-rail a[aria-current="true"] .rr-num { color: var(--gold); }
  .route-rail a[aria-current="true"]::before {
    content: ""; position: absolute; left: -14px; top: 7px; width: 8px; height: 1px;
    background: var(--gold);
  }
  /* quiets while a flagship Atlas scene owns the viewport (D-038) */
  .route-rail.is-quiet { opacity: 0.28; }
}
/* Compact rail — node + number, name on hover/focus. 1320 (--w-wide) is the
   narrowest width where even the 42px rail clears the reading column; the
   full 132px rail needs 1440. See the measurement note above. */
@media (min-width: 1320px) and (max-width: 1439px) {
  .route-rail { width: 42px; }
  .route-rail a { grid-template-columns: 9px 20px; }
  .route-rail .rr-name {
    position: absolute; left: 46px; top: 50%; transform: translateY(-50%);
    opacity: 0; pointer-events: none; white-space: nowrap;
    background: var(--obsidian-2); padding: 3px 8px; border: 1px solid var(--line);
  }
  .route-rail a:hover .rr-name, .route-rail a:focus-visible .rr-name { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .route-rail { transition: none; } }

/* ---- mobile contents: trigger + chapter-map sheet ---- */
.contents-trigger {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 9, 15, 0.94); border: 0; border-top: 1px solid var(--line);
  color: var(--steel); font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-align: left; cursor: pointer;
}
.contents-trigger .ct-node { position: relative; flex: none; width: 9px; height: 9px; }
.contents-trigger .ct-node::before, .contents-trigger .ct-node::after { content: ""; position: absolute; background: var(--steel-dim); }
.contents-trigger .ct-node::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.contents-trigger .ct-node::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.ct-label { flex: 0 0 auto; }
.ct-current { flex: 1 1 auto; text-align: right; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Contents takes over wherever the route rail is absent — the two are never
   on screen together, and never both absent. */
@media (min-width: 1320px) { .contents-trigger { display: none !important; } }

.contents-sheet .cs-loc {
  display: flex; flex-direction: column; gap: 4px; margin: 0 0 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.cs-loc-k { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-dim); }
.cs-loc-v { font-family: var(--serif); font-size: 1.05rem; color: var(--text); }
.cs-list { list-style: none; margin: 0; padding: 0; }
.cs-list li { border-bottom: 1px solid var(--line-soft); }
.cs-list a, .cs-top {
  display: grid; grid-template-columns: 9px 24px 1fr; align-items: center; gap: 12px;
  padding: 14px 2px; text-decoration: none; color: var(--text);
}
.cs-list .rr-node, .cs-top .rr-node { position: relative; width: 9px; height: 9px; }
.cs-list .rr-node::before, .cs-list .rr-node::after,
.cs-top .rr-node::before, .cs-top .rr-node::after { content: ""; position: absolute; background: var(--steel-dim); }
.cs-list .rr-node::before, .cs-top .rr-node::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.cs-list .rr-node::after, .cs-top .rr-node::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.cs-list .rr-num { font-family: var(--mono); font-size: 0.76rem; color: var(--steel-dim); }
.cs-list .rr-name { font-family: var(--serif); font-size: 1rem; }
.cs-list a[aria-current="true"] .rr-name { color: var(--gold-bright); }
.cs-list a[aria-current="true"] .rr-node::before,
.cs-list a[aria-current="true"] .rr-node::after { background: var(--gold); }
.cs-top {
  grid-template-columns: 9px 1fr; margin-top: 18px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ice);
}

/* ---- apparatus terms (use & attribution): the last four-box block on the
   page, re-set as hairline-separated terms. Every word stays visible — this
   copy is legally load-bearing and is never collapsed. ---- */
.terms-list {
  max-width: var(--w-narrow); margin: 0 0 var(--rhythm-block);
  border-top: 1px solid var(--line-soft);
}
.terms-list .term { border-bottom: 1px solid var(--line-soft); padding: 14px 0; }
.terms-list h3 {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 400; color: var(--steel-dim); margin: 0 0 6px;
}
.terms-list p { color: var(--body); font-size: 0.93rem; line-height: 1.58; margin: 0; }
.terms-list a { color: var(--ice); }
@media (min-width: 821px) {
  .terms-list .term { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: baseline; }
  .terms-list h3 { margin: 0; }
}

/* ==================================================================
   PHASE 8.4D - CRITFIELD LANGUAGE ATLAS (Flagship 02)
   The second Atlas object. It shares the family DNA with Flagship 01 -
   .finding-scene / .scene-inner / .atlas-slug / .atlas-editorial /
   .atlas-plate / .atlas-reg / .atlas-plate-foot / .atlas-close are reused
   unchanged - and deliberately does NOT share its geometry.

     Refund Atlas  : a curve crossing a mapped boundary, measured against a
                     horizontal reference. Length and shape carry meaning.
     Language Atlas: a RANKED SIGNAL FIELD. Fourteen registration marks whose
                     vertical POSITION on one shared scale is the entire
                     measure, read against one reference rule, with the
                     observed span bracketed between the two extremes.
                     Nothing has a length proportional to its value.

   Every rule below is scoped to .finding-scene--lang or a lang- prefix, and
   every motion hook is data-lm, so no selector here can reach Flagship 01
   and none of its can reach this one. Introduces no new colour token.
   ================================================================== */

.finding-scene--lang {
  padding: clamp(36px, 5vw, 88px) clamp(20px, 4vw, 40px) clamp(32px, 4.5vw, 72px);
  background:
    radial-gradient(1000px 460px at 88% -6%, var(--ice-faint), transparent 60%),
    radial-gradient(900px 440px at 8% 16%, var(--gold-faint), transparent 58%);
  border-top: var(--hair) solid var(--line);
  border-bottom: var(--hair) solid var(--line);
}
.finding-scene--lang .scene-inner { padding: 0; }

/* ---- the bridge between two flagships is an editorial breath, not a chapter
   opening. Left alone, the transition pays the full chapter rhythm three times
   in a row — section padding, bridge margin, scene margin — on top of the
   scene's own 72px of top padding: measured 443px of near-empty page between
   the Refund handoff and the Language slug at 1440. The scene keeps its own
   padding; only the stacked chapter rhythm is spent once. ---- */
.section--scene-lead { padding-top: var(--space-6); }
.section--scene-lead .chapter-bridge,
.section--scene-lead .field-bridge { margin: 0 auto var(--space-5); }
.section--scene-lead .finding-scene { margin-top: var(--space-7); }
.finding-scene--lang .atlas-editorial { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.finding-scene--lang .atlas-deck em { font-style: italic; color: var(--text); }

/* ---- the phone relationship readout: HIGH / REFERENCE / LOW / SPAN as ONE
   measured object, not four cards. It is the desktop field's extreme +
   reference + bracket relationship compressed onto a single ruler, so the whole
   finding lands before the fourteen-row register rather than after it. Same
   primitive throughout: position on one shared 14–34% scale, one ice reference
   rule, one gold bracket between the two extremes. ---- */
.lang-relation { display: block; margin: clamp(24px, 5vw, 34px) 0 0; }
.lang-rel-svg { display: block; width: 100%; height: auto; }

.lang-rel-ruler { stroke: var(--steel-dim); stroke-width: 1; }
.lang-rel-note { font-family: var(--mono); font-size: 7.5px; fill: var(--steel-dim); letter-spacing: 1px; }
.lang-rel-role { font-family: var(--mono); font-size: 8.5px; fill: var(--steel-dim); letter-spacing: 1.3px; }
.lang-rel-role.is-ref { fill: var(--ice); }
.lang-rel-seg { font-family: var(--mono); font-size: 7.5px; fill: var(--muted-2); letter-spacing: 0.6px; }

.lang-rel-v {
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  fill: var(--gold-bright); font-variant-numeric: tabular-nums;
}
.lang-rel-v.is-lo { font-size: 19px; }
.lang-rel-v.is-ref { font-size: 17px; fill: var(--ice); }

.lang-rel-ref { stroke: var(--ice); stroke-width: 1.4; stroke-dasharray: 5 4; }
.lang-rel-mark { fill: var(--obsidian); stroke: var(--crimson); stroke-width: 1.8; }
.lang-rel-mark.is-lo { stroke: var(--steel); }
.lang-rel-lock { fill: none; stroke: var(--gold); stroke-width: 1.2; opacity: 0.8; }

.lang-rel-span, .lang-rel-spant { stroke: var(--gold); stroke-width: 1.6; }
.lang-rel-spanv { font-family: var(--serif); font-weight: 700; font-size: 21px; fill: var(--gold); }
.lang-rel-spanl { font-family: var(--mono); font-size: 7.5px; fill: var(--muted-2); letter-spacing: 1px; }
/* the relation stack and the plate are alternatives, never both: it takes over
   exactly where the plate SVG stops rendering */
@media (min-width: 821px) { .lang-relation { display: none; } }

/* ---- the plate ---- */
.lang-plate { margin-top: clamp(28px, 4vw, 54px); }
.lang-plate-top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px); align-items: start; margin-bottom: var(--space-4);
}
.lang-callout { display: block; text-align: right; }
.lang-callout-v {
  display: block; font-family: var(--serif); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--gold-bright);
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 0.92; letter-spacing: -0.02em;
}
.lang-callout-l {
  display: block; margin-top: var(--space-2); margin-left: auto; max-width: 26ch;
  font-family: var(--sans); font-size: 0.9rem; line-height: 1.45; color: var(--text);
}
.lang-callout-n {
  display: block; margin-top: 7px; white-space: pre-wrap;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--muted-2);
}

.lang-plot { position: relative; }
.lang-svg { display: block; width: 100%; height: auto; }

/* scale + field furniture */
.lang-grid { stroke: var(--line-soft); stroke-width: 1; }
.lang-lane { stroke: var(--line-soft); stroke-width: 1; opacity: 0.45; }
.lang-axis { stroke: var(--steel-dim); stroke-width: 1; }
.lang-tick { font-family: var(--mono); font-size: 13px; fill: var(--steel-dim); letter-spacing: 1px; }
.lang-tick.is-ref { fill: var(--ice); }
.lang-note { font-family: var(--mono); font-size: 12.5px; fill: var(--steel-dim); letter-spacing: 1.6px; }

/* the one reference every signal is read against */
.lang-ref { stroke: var(--ice); stroke-width: 1.6; stroke-dasharray: 8 6; }
.lang-lab-ice { font-family: var(--mono); font-size: 14px; letter-spacing: 1.8px; fill: var(--ice); }

/* deflection = distance from the reference. It starts at the rule, never at zero. */
.lang-defl { stroke: var(--steel-dim); stroke-width: 1.6; opacity: 0.5; }
.lang-defl.is-over { stroke: var(--crimson); opacity: 0.55; }

/* the ranked profile is stepped, not drawn - the order is a stair, not a trend */
.lang-step { fill: none; stroke: var(--steel-dim); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.5; }

/* the registration marks themselves */
.lang-mark { fill: var(--obsidian); stroke: var(--steel); stroke-width: 2; }
.lang-mark.is-over { stroke: var(--crimson); }
.lang-lock { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: 0.75; }
.lang-extreme { font-family: var(--serif); font-size: 24px; font-weight: 700; fill: var(--gold-bright); }

/* the measured span: one gold bracket, both ends locked to an extreme */
.lang-span { stroke: var(--gold); stroke-width: 1.8; }
.lang-span-t { stroke: var(--gold); stroke-width: 1.8; }
.lang-span-lead { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.45; }
.lang-span-v { font-family: var(--serif); font-size: 34px; font-weight: 700; fill: var(--gold); }
.lang-span-l { font-family: var(--mono); font-size: 11px; letter-spacing: 1.8px; fill: var(--muted-2); }

/* the ranked register - all fourteen labels, horizontal type, no rotation */
.lang-lad-head { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.8px; fill: var(--steel-dim); }
.lang-lad-rule { stroke: var(--line); stroke-width: 1; }
.lang-lad-ref { stroke: var(--ice); stroke-width: 1; opacity: 0.5; }
.lang-lad-refl { font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; fill: var(--ice); opacity: 0.85; }
.lang-lead { stroke: var(--steel-dim); stroke-width: 1; opacity: 0.3; }
.lang-lead.is-end { stroke: var(--gold); opacity: 0.6; }
.lang-rank { font-family: var(--mono); font-size: 12px; fill: var(--steel-dim); letter-spacing: 1px; }
.lang-name { font-family: var(--mono); font-size: 13px; fill: var(--muted); letter-spacing: 1.2px; }
.lang-val { font-family: var(--serif); font-size: 19px; font-weight: 700; fill: var(--text); }
.lang-rank.is-end { fill: var(--gold); }
.lang-name.is-end { fill: var(--text); }
.lang-val.is-end { fill: var(--gold-bright); }

.lang-readout {
  display: flex; flex-wrap: wrap; gap: var(--space-3) clamp(16px, 2.2vw, 34px);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: var(--hair) solid var(--line-soft);
  font-family: var(--mono); font-size: 0.73rem; letter-spacing: 0.05em; color: var(--muted-2);
}
.lang-readout .k { color: var(--steel-dim); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.65rem; }
.lang-readout .v { color: var(--text); }
.lang-readout .v-gold { color: var(--gold-bright); }
.lang-readout .v-ice { color: var(--ice); }

/* ---- authored small-screen composition (also the no-JS one): a ranked
   register. Same primitive as the plate - one shared scale, one reference
   rule, position is the measure - re-set so all fourteen names stay at a
   readable size and nothing scrolls sideways. It is not the desktop field
   made small: the field becomes per-row tracks and the reference rule
   becomes one continuous vertical hairline running through every track. ---- */
.lang-register { display: none; position: relative; }
.lang-reg-scale {
  display: flex; justify-content: space-between; margin: 0 0 12px;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--steel-dim);
}
.lang-reg-scale span:nth-child(2) { color: var(--ice); }
.lang-reg-ref {
  position: absolute; top: 22px; bottom: 2px; width: var(--hair);
  background: var(--ice); opacity: 0.7; transform: translateX(-0.5px);
}
.lang-lrow { padding: 7px 0; border-bottom: var(--hair) solid var(--line-soft); }
.lang-lrow:last-child { border-bottom: 0; }
.lang-lr-head { display: flex; align-items: baseline; gap: 9px; }
.lang-lr-rank { font-family: var(--mono); font-size: 0.64rem; color: var(--steel-dim); flex: none; }
.lang-lr-name {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); flex: 1 1 auto; min-width: 0;
}
.lang-lr-v {
  flex: none; font-family: var(--serif); font-weight: 700; font-size: 0.98rem;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.lang-lr-track { display: block; position: relative; height: 9px; margin-top: 5px; }
.lang-lr-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px;
  height: var(--hair); background: var(--line);
}
.lang-lr-tick {
  position: absolute; top: 0; width: var(--rule); height: 9px;
  margin-left: -1px; background: var(--steel);
}
.lang-lrow.is-over .lang-lr-tick { background: var(--crimson); }
.lang-lrow.is-over .lang-lr-name { color: var(--body); }
.lang-lrow.is-end .lang-lr-name { color: var(--text); }
.lang-lrow.is-end .lang-lr-v { color: var(--gold-bright); }
.lang-lrow.is-end .lang-lr-tick { width: 3px; height: 13px; top: -2px; background: var(--gold-bright); box-shadow: 0 0 0 3px rgba(236, 207, 146, 0.16); }

@media (max-width: 1024px) {
  .finding-scene--lang .atlas-editorial,
  .finding-scene--lang .atlas-close { grid-template-columns: 1fr; align-items: start; }
  .lang-plate-top { grid-template-columns: 1fr; gap: var(--space-4); }
  .lang-callout { text-align: left; }
  .lang-callout-l { margin-left: 0; }
}
@media (max-width: 820px) {
  .lang-svg { display: none; }
  .lang-register { display: block; }
  .lang-plate-top .lang-callout { display: none; }
  .lang-plate { padding: var(--space-5) var(--space-4) var(--space-3); }
  .lang-readout { gap: var(--space-2) var(--space-4); font-size: 0.67rem; }
  .finding-scene--lang .atlas-plate-foot { font-size: 0.62rem; }
}
@media (max-width: 560px) {
  .finding-scene--lang .atlas-h { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .finding-scene--lang .atlas-slug { flex-direction: column; gap: 3px; font-size: 0.63rem; }
  .finding-scene--lang .atlas-editorial { margin: var(--space-5) 0 var(--space-4); }
  .lang-lr-name { font-size: 0.66rem; letter-spacing: 0.04em; }
}

/* ==================================================================
   PHASE 8.4D - CRITFIELD MOTION FIELD (D-041), Flagship 02
   "The Language Atlas is being calibrated while you read."
   Flagship 01 surveys: it draws a boundary, traces a curve, measures a peak.
   Flagship 02 CALIBRATES: the reference resolves first, the field is scaled,
   fourteen signals REGISTER against it, the two extremes LOCK, and only then
   does the span between them resolve. Same contract as D-038 - one beat per
   page load, ambient only on wide desktop, settled state carries no class -
   and a completely separate set of hooks (data-lm, .is-calibrating), so the
   two flagships can never drive each other.
   Desktop ~1.60s end to end. Phone ~1.24s.
   ================================================================== */

@keyframes lang-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes lang-focus { from { opacity: 0; filter: blur(5px) } to { opacity: 1; filter: blur(0) } }
@keyframes lang-draw-x { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes lang-draw-y { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes lang-trace { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
/* a signal registering is a snap onto its position, not a fade-in */
@keyframes lang-register { from { opacity: 0; transform: scale(2.6) } to { opacity: 1; transform: scale(1) } }
@keyframes lang-lock { from { opacity: 0; transform: scale(3.2) } to { opacity: 1; transform: scale(1) } }
@keyframes lang-slide-in { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: none } }

.finding-scene--lang [data-lm="reference"],
.finding-scene--lang [data-lm="span"] { transform-box: view-box; }
.finding-scene--lang [data-lm="reference"] { transform-origin: 245px 0; }
.finding-scene--lang [data-lm="deflect"] line { transform-box: view-box; transform-origin: 0 357px; }
.finding-scene--lang [data-lm="signals"],
.finding-scene--lang [data-lm="extreme-hi"],
.finding-scene--lang [data-lm="extreme-lo"] { transform-box: fill-box; transform-origin: center; }

/* ---- armed: the from-state, only ever set while the scene is off-screen ---- */
.finding-scene--lang.is-armed [data-lm="scale"],
.finding-scene--lang.is-armed [data-lm="reference-label"],
.finding-scene--lang.is-armed [data-lm="signals"] rect,
.finding-scene--lang.is-armed [data-lm="extreme-hi"],
.finding-scene--lang.is-armed [data-lm="extreme-lo"],
.finding-scene--lang.is-armed [data-lm="span-tick"],
.finding-scene--lang.is-armed [data-lm="span-label"],
.finding-scene--lang.is-armed [data-lm="ladder"],
.finding-scene--lang.is-armed [data-lm="values"],
.finding-scene--lang.is-armed [data-lm="readout"],
.finding-scene--lang.is-armed .atlas-reg { opacity: 0; }
.finding-scene--lang.is-armed [data-lm="reference"] { transform: scaleX(0); }
.finding-scene--lang.is-armed [data-lm="span"] { transform: scaleY(0); }
.finding-scene--lang.is-armed [data-lm="deflect"] line { transform: scaleY(0); }
.finding-scene--lang.is-armed [data-lm="step"] { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---- calibrating: the beat. 1 reference, 2 field, 3 signals register,
   4 + 5 extremes lock, 6 span resolves, 7 readout settles. ---- */
.finding-scene--lang.is-calibrating [data-lm="reference"] { animation: lang-draw-x 340ms var(--ease-out) both; }
.finding-scene--lang.is-calibrating [data-lm="reference-label"] { animation: lang-fade 240ms var(--ease) 260ms both; }
.finding-scene--lang.is-calibrating [data-lm="scale"] { animation: lang-fade 300ms var(--ease) 300ms both; }
.finding-scene--lang.is-calibrating .atlas-reg { animation: lang-lock 260ms var(--ease-out) 340ms both; }
.finding-scene--lang.is-calibrating [data-lm="ladder"] { animation: lang-slide-in 320ms var(--ease-out) 460ms both; }
.finding-scene--lang.is-calibrating [data-lm="deflect"] line { animation: lang-draw-y 220ms var(--ease-out) calc(600ms + var(--i, 0) * 26ms) both; }
.finding-scene--lang.is-calibrating [data-lm="signals"] rect { animation: lang-register 240ms var(--ease-out) calc(620ms + var(--i, 0) * 26ms) both; }
.finding-scene--lang.is-calibrating [data-lm="step"] { animation: lang-trace 520ms var(--ease) 680ms both; }
.finding-scene--lang.is-calibrating [data-lm="extreme-hi"] { animation: lang-lock 300ms var(--ease-out) 1020ms both; }
.finding-scene--lang.is-calibrating [data-lm="extreme-lo"] { animation: lang-lock 300ms var(--ease-out) 1120ms both; }
.finding-scene--lang.is-calibrating [data-lm="span"] { animation: lang-draw-y 300ms var(--ease-out) 1240ms both; }
.finding-scene--lang.is-calibrating [data-lm="span-tick"] { animation: lang-fade 200ms var(--ease) 1300ms both; }
.finding-scene--lang.is-calibrating [data-lm="span-label"] { animation: lang-focus 260ms var(--ease-out) 1360ms both; }
.finding-scene--lang.is-calibrating [data-lm="readout"] { animation: lang-fade 240ms var(--ease) 1440ms both; }

/* ---- phone beat: the plate SVG is display:none below 821px; the relationship
   readout and the ranked register are not, so the same seven steps play on the
   objects that exist here. ~1.46s end to end. ---- */
@media (max-width: 820px) {
  .finding-scene--lang [data-lm="signals"] { transform-box: border-box; transform-origin: center; }
  /* the register's reference hairline draws downward through every track */
  .finding-scene--lang .lang-reg-ref { transform-origin: top center; }
  /* the readout's reference rule draws outward from the ruler it is taken on */
  .finding-scene--lang [data-lm="reference-rule"] { transform-box: view-box; transform-origin: 78px 0; }

  .finding-scene--lang.is-armed [data-lm="reference"] { transform: scaleY(0); }
  .finding-scene--lang.is-armed [data-lm="reference-rule"] { transform: scaleX(0); }
  .finding-scene--lang.is-armed [data-lm="signals"],
  .finding-scene--lang.is-armed [data-lm="values"] { opacity: 0; transform: none; }

  /* 1 the reference establishes, 2 the field calibrates, 3 the signals register,
     4 + 5 the two extremes lock, 6 the measured span resolves, 7 the readout
     settles — the desktop order, on the phone's own objects. */
  .finding-scene--lang.is-calibrating [data-lm="reference-rule"] { animation: lang-draw-x 320ms var(--ease-out) both; }
  .finding-scene--lang.is-calibrating [data-lm="reference-label"] { animation: lang-focus 260ms var(--ease-out) 220ms both; }
  .finding-scene--lang.is-calibrating [data-lm="scale"] { animation: lang-fade 260ms var(--ease) 260ms both; }
  .finding-scene--lang.is-calibrating [data-lm="reference"] { animation: lang-draw-y 340ms var(--ease-out) 340ms both; }
  .finding-scene--lang.is-calibrating [data-lm="signals"] { animation: lang-register 220ms var(--ease-out) calc(460ms + var(--i, 0) * 26ms) both; }
  .finding-scene--lang.is-calibrating [data-lm="values"] { animation: lang-fade 200ms var(--ease) calc(500ms + var(--i, 0) * 26ms) both; }
  .finding-scene--lang.is-calibrating [data-lm="extreme-hi"] { animation: lang-lock 280ms var(--ease-out) 900ms both; }
  .finding-scene--lang.is-calibrating [data-lm="extreme-lo"] { animation: lang-lock 280ms var(--ease-out) 980ms both; }
  .finding-scene--lang.is-calibrating [data-lm="span"] { animation: lang-draw-y 280ms var(--ease-out) 1060ms both; }
  .finding-scene--lang.is-calibrating [data-lm="span-tick"] { animation: lang-fade 180ms var(--ease) 1120ms both; }
  .finding-scene--lang.is-calibrating [data-lm="span-label"] { animation: lang-focus 240ms var(--ease-out) 1160ms both; }
  .finding-scene--lang.is-calibrating [data-lm="readout"] { animation: lang-fade 220ms var(--ease) 1240ms both; }
}

/* ---- tier 1 ambient: calibration ticks and a partial range arc. Desktop
   only (the gutters are already display:none below 1201px), and a different
   vocabulary from Flagship 01's travelling rail and cycling route. ---- */
@keyframes lang-ambient-cal {
  0%, 62% { opacity: 0.5 }
  72% { opacity: 0.95 }
  84%, 100% { opacity: 0.5 }
}
@keyframes lang-ambient-arc { from { stroke-dashoffset: 0 } to { stroke-dashoffset: -472 } }
@media (min-width: 1201px) {
  .finding-scene--lang.is-ambient [data-lm="ambient"] .lang-cal {
    animation: lang-ambient-cal 14s ease-in-out infinite;
  }
  .finding-scene--lang.is-ambient [data-lm="ambient"] .lang-cal line:nth-child(2n) { animation-delay: 1.6s; }
  .finding-scene--lang.is-ambient [data-lm="ambient"] .lang-cal line:nth-child(3n) { animation-delay: 3.2s; }
  .finding-scene--lang.is-ambient [data-lm="ambient"] .lang-arc {
    stroke-dasharray: 118 354;
    animation: lang-ambient-arc 44s linear infinite;
  }
}

/* ---- reduced motion: the settled scene, immediately. JS also never arms the
   beat or the ambient field; these rules cover a mid-visit switch. ---- */
@media (prefers-reduced-motion: reduce) {
  .finding-scene--lang [data-lm="ambient"] .lang-cal,
  .finding-scene--lang [data-lm="ambient"] .lang-cal line,
  .finding-scene--lang [data-lm="ambient"] .lang-arc {
    animation: none !important; stroke-dasharray: none !important; transform: none !important;
  }
  .finding-scene--lang.is-armed [data-lm]:not([data-lm="ambient"]),
  .finding-scene--lang.is-calibrating [data-lm]:not([data-lm="ambient"]),
  .finding-scene--lang.is-armed [data-lm="deflect"] line,
  .finding-scene--lang.is-calibrating [data-lm="deflect"] line,
  .finding-scene--lang.is-armed [data-lm="signals"] rect,
  .finding-scene--lang.is-calibrating [data-lm="signals"] rect,
  .finding-scene--lang.is-armed .atlas-reg,
  .finding-scene--lang.is-calibrating .atlas-reg,
  .finding-scene--lang.is-armed .lang-reg-ref,
  .finding-scene--lang.is-calibrating .lang-reg-ref {
    animation: none !important; opacity: 1 !important;
    transform: none !important; filter: none !important;
  }
  .finding-scene--lang.is-armed [data-lm="step"],
  .finding-scene--lang.is-calibrating [data-lm="step"] {
    stroke-dasharray: 5 4 !important; stroke-dashoffset: 0 !important;
  }
}


/* ==================================================================
   PHASE 8.4D.1 — FIELD ROUTE BRIDGE + SEQUENCE CUES
   Between the two flagship Atlas scenes the page used a single italic
   sentence, preceded by a cue that read "CONTINUES IN 02 · FIRST HOURS" —
   a sequential promise the page did not keep, since what follows is the
   second Atlas, not chapter 02. The transition is now an open route between
   two named fields: no card, no panel, no decorative object. Atlas grammar
   only — hairline, registration nodes, mono labels, restrained ice, one
   gold node at the crossing.
   ================================================================== */
.field-bridge {
  max-width: var(--w-wide); margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid; grid-template-columns: auto minmax(72px, 1fr) auto;
  align-items: center; column-gap: 22px; row-gap: 16px;
}
.fb-end {
  margin: 0; display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fb-to { text-align: right; }
.fb-id { color: var(--muted-2); }
.fb-name { color: var(--text); letter-spacing: 0.06em; }
.fb-from .fb-name { color: var(--muted); }

/* the route itself: one measured line with three registration nodes */
.fb-route {
  margin: 0; display: flex; align-items: center; gap: 0; min-width: 0;
}
.fb-run { flex: 1 1 auto; height: 1px; background: var(--line); min-width: 24px; }
.fb-node {
  position: relative; flex: 0 0 auto; width: 9px; height: 9px;
}
.fb-node::before, .fb-node::after { content: ""; position: absolute; background: var(--steel-dim); }
.fb-node::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.fb-node::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.fb-node--mid { width: 13px; height: 13px; }
.fb-node--mid::before, .fb-node--mid::after { background: var(--gold); }

/* one editorial line, under the route, reading with it rather than over it */
.fb-note {
  grid-column: 1 / -1; margin: 0; text-align: center;
  max-width: var(--w-prose); justify-self: center;
  font-family: var(--serif); font-style: italic; font-size: 1.02rem;
  line-height: 1.5; color: var(--muted);
}
.fb-note i { font-style: normal; color: var(--text); }

@media (max-width: 820px) {
  /* the route stands up: the same primitive, read top to bottom */
  .field-bridge {
    grid-template-columns: 1fr; justify-items: center; row-gap: 12px;
  }
  .fb-to { text-align: center; }
  .fb-end { align-items: center; }
  .fb-route { flex-direction: column; height: 74px; }
  .fb-run { width: 1px; height: auto; flex: 1 1 auto; min-width: 0; min-height: 18px; }
  .fb-note { font-size: 0.98rem; }
}

/* ---- the sequence cue at the full-study door: this one IS what comes next ---- */
.codex-next {
  display: flex; align-items: center; gap: 10px; margin: 22px 0 0;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-2);
}

/* ---- ARCHIVE: progressive presentation controls. Codex vocabulary --
   registration node, mono label, hairline. Not a pagination bar. ---- */
.ex-more {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
}
.ex-more[hidden] { display: none; }
.ex-more-btn {
  min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ice);
  display: inline-flex; align-items: center; gap: 10px;
}
.ex-more-btn::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
  opacity: 0.7;
}
.ex-more-btn:hover, .ex-more-btn:focus-visible { color: var(--ice-bright); }
.ex-more-btn:hover::before, .ex-more-btn:focus-visible::before { opacity: 1; }
.ex-more-btn--all { color: var(--muted-2); }
.ex-more-btn--all:hover, .ex-more-btn--all:focus-visible { color: var(--ice); }
.ex-more-btn--all[hidden] { display: none; }

@media (max-width: 767px) {
  /* the inline archive is not the mobile reading path (the Explorer viewer is),
     so its progressive controls go with the table it belongs to */
  .ex-more { display: none; }
}