/* Self-hosted variable fonts (ultraplan Phase 3, 2026-07-05). No external font
   CDN: the site must render identically offline and behind any cache. Files
   live in assets/fonts/, committed to the repo. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #030303;
  --bg-graphite: #0a0a0a;
  --bg-soft: #151515;
  --text: #fffaf0;
  --muted: rgba(255, 250, 240, 0.72);
  --faint: rgba(255, 250, 240, 0.46);
  --line: rgba(218, 179, 96, 0.24);
  --line-strong: rgba(218, 179, 96, 0.54);
  --gold: #dab360;
  --ivory: #fffaf0;
  --amber: #b98a46;
  --red: #d1664d;
  --title-font: "Playfair Display", Georgia, serif;
  --body-font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --data-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-family: var(--body-font);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fffaf0;
  --bg-graphite: #faf4e6;
  --bg-soft: #f2ecdc;
  --text: #100e08;
  --muted: rgba(16, 14, 8, 0.74);
  --faint: rgba(16, 14, 8, 0.5);
  --line: rgba(112, 78, 32, 0.26);
  --line-strong: rgba(112, 78, 32, 0.5);
  --gold: #9d722e;
  --ivory: #100e08;
  --amber: #8a5c2c;
  --red: #a74231;
}

* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px clamp(14px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand:hover { color: inherit; }
.brand-mark {
  width: 18px;
  height: 18px;
  align-self: center;
  color: var(--gold);
}
.brand-name {
  font-family: var(--title-font);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand-tag {
  font-family: var(--data-font);
  font-size: 0.68rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.masthead-asof {
  margin: 0 auto;
  font-family: var(--data-font);
  font-size: 0.72rem;
  color: var(--faint);
  letter-spacing: 0.06em;
}

.masthead-actions { display: flex; align-items: center; gap: 10px; }

.control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  font-family: var(--data-font);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--text);
  background: var(--bg-graphite);
  transition: border-color 160ms ease;
}
.control:hover { border-color: var(--line-strong); color: var(--text); }
.control-archive { border-color: var(--line-strong); color: var(--gold); }
.control-icon { padding: 7px 10px; }

/* ---------- frame and rail ---------- */

.frame {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  min-height: calc(100vh - 54px);
}

.rail {
  position: sticky;
  top: 54px;
  align-self: start;
  height: calc(100vh - 54px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 0 18px 0;
  border-right: 1px solid var(--line);
  background: var(--bg);
}

.rail a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  font-size: 0.84rem;
  color: var(--muted);
  border-left: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.rail a:hover { color: var(--text); }
.rail a.on {
  color: var(--text);
  border-left-color: var(--gold);
  background: var(--bg-graphite);
}
.rail-num {
  font-family: var(--data-font);
  font-size: 0.7rem;
  color: var(--faint);
  min-width: 1ch;
}
.rail a.on .rail-num { color: var(--gold); }

.rail-group {
  margin: 14px 0 4px;
  padding: 0 18px;
  font-family: var(--data-font);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--faint);
}

.rail-hint {
  margin-top: auto;
  padding: 18px;
  font-family: var(--data-font);
  font-size: 0.64rem;
  color: var(--faint);
}

/* ---------- stage and workspaces ---------- */

.stage { min-width: 0; }

.workspace {
  padding: clamp(18px, 3vw, 36px);
  opacity: 1;
  transition: opacity 150ms ease;
}
.workspace.leaving { opacity: 0; }
.workspace[hidden] { display: none; }

.ws-head { max-width: 860px; margin-bottom: 32px; }

.eyebrow {
  margin: 0 0 8px;
  font-family: var(--data-font);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--faint);
}

h1 {
  margin: 0 0 14px;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.16;
  letter-spacing: 0.002em;
}

h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.standing-copy {
  margin: 0;
  max-width: 64ch;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

.stamp {
  display: inline-block;
  margin: 0 6px 0 0;
  padding: 2px 8px;
  font-family: var(--data-font);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.stamp-evidence { color: var(--ivory); border: 1px solid var(--line); }
.stamp-interpretation { color: var(--gold); border: 1px solid var(--line); }
.stamp-record { color: var(--muted); border: 1px solid var(--line); }
.stamp-internal { color: var(--amber); border: 1px solid var(--amber); }

/* ---------- panels ---------- */

.panel {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--bg-graphite);
  padding: 20px;
  margin-bottom: 18px;
}

/* Engraved double rule: every panel is a plate. */
.panel::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.panel > * { position: relative; z-index: 1; }

/* Figure numbering in the engraved register. */
.stage { counter-reset: figure; }
.panel-chart .panel-head h2::before {
  counter-increment: figure;
  content: "Fig. " counter(figure, upper-roman) ".";
  margin-right: 8px;
  font-family: var(--data-font);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.panel-head .stamp { margin-bottom: 6px; }

.panel-meta {
  margin: 0;
  font-family: var(--data-font);
  font-size: 0.7rem;
  color: var(--faint);
  text-align: right;
  white-space: nowrap;
}
.panel-meta a { color: var(--gold); }

.panel-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.panel-row .panel { margin-bottom: 0; }

.module-copy {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--muted);
}

.caveat {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: var(--data-font);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--faint);
}

.big-word {
  margin: 4px 0 10px;
  font-family: var(--title-font);
  font-size: 1.7rem;
  color: var(--gold);
}

/* ---------- stat strip, pattern cards, chronicle, readings ---------- */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.stat {
  position: relative;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  background: var(--bg-graphite);
}
.stat::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.stat-value {
  display: block;
  font-family: var(--data-font);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.2;
}
.stat-label {
  display: block;
  margin-top: 2px;
  font-family: var(--data-font);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.stat-sub {
  display: block;
  margin-top: 3px;
  font-family: var(--data-font);
  font-size: 0.66rem;
  color: var(--faint);
}

.pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.pattern-card {
  position: relative;
  padding: 18px;
  border: 1px solid var(--line-strong);
  background: var(--bg-graphite);
}
.pattern-card::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.pattern-card > * { position: relative; z-index: 1; }
.pattern-eyebrow {
  margin: 0 0 6px;
  font-family: var(--data-font);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--faint);
}
.pattern-word {
  margin: 0 0 10px;
  font-family: var(--title-font);
  font-size: 1.5rem;
  color: var(--gold);
}
.pattern-copy {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
}

.chronicle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.chronicle-card {
  padding: 14px;
  border: 1px solid var(--line);
}
.chronicle-card.current { border-color: var(--line-strong); }
.chronicle-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.chronicle-head span {
  font-family: var(--data-font);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.chronicle-head strong {
  font-family: var(--data-font);
  font-size: 0.92rem;
  color: var(--gold);
}
.chronicle-card p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
}

.chart-reading {
  margin: 12px 0 0;
  max-width: 78ch;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
}

.standing-secondary { margin-top: 12px; }

/* Subtle gold signature glow on primary series. */
.chart .series-gold { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--gold) 38%, transparent)); }
.chart .marker { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 55%, transparent)); }

/* ---------- desk ---------- */

/* The desk is now a scroll descent: the arrival scene owns the first viewport,
   the evidence chapters descend below it, each act owning its own viewport. The
   workspace loses its padding so the arrival can run full-bleed to the edges. */
.workspace-desk { padding: 0; }

.arrival {
  position: relative;
  min-height: calc(100svh - 54px);
  width: 100%;
  overflow: hidden;
  display: flex;
  isolation: isolate;
}
.arrival-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
  filter: grayscale(0.35) brightness(0.62) contrast(1.05);
}
:root[data-theme="light"] .arrival-plate {
  filter: grayscale(1) brightness(1.6) contrast(0.9);
  opacity: 0.16;
}
/* Code-native liquid atmosphere. Licensed zone only, sits behind the veil,
   moves at device refresh rate, and is switched off by reduced motion. */
.arrival-liquid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
}
:root[data-theme="light"] .arrival-liquid { opacity: 0.24; mix-blend-mode: multiply; }
/* Motion backplate: the engraved field in real motion, sitting above the poster
   still and below the liquid light and the veil. It crossfades in once loaded, so
   the poster carries the first paint and the reduced-motion path never blanks. */
.arrival-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1200ms ease;
  filter: brightness(0.66) contrast(1.04);
}
.arrival-video.is-loaded { opacity: 1; }
:root[data-theme="light"] .arrival-video { filter: grayscale(1) brightness(1.55) contrast(0.9); }
:root[data-theme="light"] .arrival-video.is-loaded { opacity: 0.2; }
.arrival-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 95% 75% at 50% 44%, rgba(3, 3, 3, 0) 25%, rgba(3, 3, 3, 0.6) 100%),
    linear-gradient(to bottom, rgba(3, 3, 3, 0.6), rgba(3, 3, 3, 0.1) 32%, rgba(3, 3, 3, 0.16) 68%, rgba(3, 3, 3, 0.78));
}
:root[data-theme="light"] .arrival-veil {
  background:
    radial-gradient(ellipse 95% 75% at 50% 44%, rgba(255, 250, 240, 0) 25%, rgba(255, 250, 240, 0.6) 100%),
    linear-gradient(to bottom, rgba(255, 250, 240, 0.55), rgba(255, 250, 240, 0.08) 32%, rgba(255, 250, 240, 0.12) 68%, rgba(255, 250, 240, 0.72));
}
.arrival-centre {
  position: relative;
  z-index: 3;
  margin: auto;
  max-width: 900px;
  width: 100%;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.arrival-eyebrow {
  font-family: var(--data-font);
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  margin: 0 0 30px;
}
.arrival-sentence {
  font-family: var(--title-font);
  font-weight: 560;
  font-size: clamp(2.05rem, 4.6vw, 3.4rem);
  line-height: 1.16;
  color: var(--text);
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
  text-transform: lowercase;
}
:root:not([data-theme="light"]) .arrival-sentence { text-shadow: 0 1px 34px rgba(3, 3, 3, 0.85); }
.arrival-sentence .hold { white-space: nowrap; }
.arrival-rule { width: 120px; height: 1px; background: var(--line-strong); margin: 34px auto; }
.arrival-score-eyebrow {
  font-family: var(--data-font);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 12px;
}
.arrival-score {
  font-family: var(--data-font);
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  margin: 0;
}
[data-arrival-score] {
  font-size: 1.35rem;
  color: var(--gold);
  font-weight: 500;
  padding-left: 6px;
}
[data-arrival-score].is-offline { color: var(--amber); }
.arrival-archive {
  display: inline-block;
  margin-top: 44px;
  border: 1px solid var(--line-strong);
  padding: 15px 34px;
  font-family: var(--data-font);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease;
}
.arrival-archive:hover,
.arrival-archive:focus-visible { border-color: var(--gold); color: var(--gold); }
.arrival-cue {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  font-family: var(--data-font);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint);
}
.arrival-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 32px;
  margin: 12px auto 0;
  background: linear-gradient(to bottom, var(--line-strong), transparent);
}
@media (max-width: 560px) {
  .arrival-eyebrow .dot { display: none; }
  .arrival-eyebrow span { display: block; }
}

/* Evidence chapters below the fold. Each owns a viewport, then stands still. A
   motion instrument drifts behind as atmosphere; the head and the panels ride
   above it at z-index 1, so no number ever sits on moving light. */
.desk-act {
  position: relative;
  isolation: isolate;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 92px) clamp(18px, 3vw, 36px);
  min-height: calc(100svh - 54px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.desk-act > *:not(.act-media) { position: relative; z-index: 1; }
.act-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.act-media-poster,
.act-media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: brightness(0.42) contrast(1.05);
}
.act-media-video { opacity: 0; transition: opacity 1200ms ease; }
.act-media-video.is-loaded { opacity: 1; }
.act-media-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 96% 82% at 50% 50%, rgba(3, 3, 3, 0.34) 0%, rgba(3, 3, 3, 0.74) 100%),
    linear-gradient(to bottom, rgba(3, 3, 3, 0.82), rgba(3, 3, 3, 0.5) 38%, rgba(3, 3, 3, 0.56) 66%, rgba(3, 3, 3, 0.88));
}
:root:not([data-theme="light"]) .desk-act-head { text-shadow: 0 1px 26px rgba(3, 3, 3, 0.72); }
:root[data-theme="light"] .act-media-poster,
:root[data-theme="light"] .act-media-video { filter: grayscale(1) brightness(1.5) contrast(0.9); opacity: 0.14; }
:root[data-theme="light"] .act-media-video { opacity: 0; }
:root[data-theme="light"] .act-media-video.is-loaded { opacity: 0.16; }
:root[data-theme="light"] .act-media-veil {
  background:
    radial-gradient(ellipse 96% 82% at 50% 50%, rgba(255, 250, 240, 0.4) 0%, rgba(255, 250, 240, 0.8) 100%),
    linear-gradient(to bottom, rgba(255, 250, 240, 0.86), rgba(255, 250, 240, 0.58) 38%, rgba(255, 250, 240, 0.64) 66%, rgba(255, 250, 240, 0.92));
}
.desk-act-head { max-width: 760px; margin-bottom: clamp(13px, 2vh, 21px); }
.desk-act-title {
  font-family: var(--title-font);
  font-weight: 560;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.18;
  margin: 6px 0 0;
}
.desk-act .standing-copy { font-size: 0.92rem; max-width: 68ch; margin-top: 14px; }
.desk-act .seal { margin-top: 18px; }
.desk-act .panel { margin-bottom: 0; }
.desk-chart .chart { height: clamp(200px, 34vh, 300px); }
.desk-agreement .agreement-row { padding: 5px 0; }
.desk-close {
  margin-top: clamp(28px, 5vh, 48px);
  font-family: var(--data-font);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}
@media (max-width: 860px) {
  .desk-act { min-height: auto; padding-top: 56px; padding-bottom: 56px; }
}

.seal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-graphite);
}
.seal-stamp {
  padding: 3px 10px;
  font-family: var(--data-font);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bg);
  background: var(--gold);
  white-space: nowrap;
}
.seal-copy { font-size: 0.82rem; color: var(--muted); }

/* ---------- charts ---------- */

.chart { position: relative; width: 100%; height: 240px; }
.chart-tall { height: 320px; }
.chart-mid { height: 220px; }
.chart-ring { height: 340px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }

.chart .axis line, .chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .axis text, .chart text.tick {
  fill: var(--faint);
  font-family: var(--data-font);
  font-size: 10px;
}
.chart .zero-line, .agreement-glyph .zero-line { stroke: var(--amber); stroke-width: 1; }
.chart .series-gold { stroke: var(--gold); fill: none; stroke-width: 1.8; }
.chart .series-ivory { stroke: var(--ivory); fill: none; stroke-width: 1.4; }
.chart .series-ivory-dashed { stroke: var(--ivory); fill: none; stroke-width: 1.4; stroke-dasharray: 5 4; }
.chart .series-faint, .agreement-glyph .series-faint { stroke: var(--faint); fill: none; stroke-width: 1.1; }
.chart .band-gold { fill: var(--gold); opacity: 0.12; }
.chart .band-hatch { fill: url(#hatch); opacity: 0.55; }
.chart .band-envelope { fill: var(--ivory); opacity: 0.08; }
.chart .bar { fill: var(--ivory); }
.chart .bar-censored { fill: var(--amber); }
.chart .range-line, .agreement-glyph .range-line { stroke: var(--gold); stroke-width: 3; }
.chart .range-line-fail, .agreement-glyph .range-line-fail { stroke: var(--amber); stroke-width: 3; }
.chart .range-dot, .agreement-glyph .range-dot { fill: var(--ivory); }
.chart .marker { fill: var(--gold); }
.chart .annotation {
  fill: var(--muted);
  font-family: var(--data-font);
  font-size: 10px;
}
.chart .annotation-strong { fill: var(--gold); font-family: var(--data-font); font-size: 10px; }
.chart .hover-line { stroke: var(--line-strong); stroke-width: 1; }
.chart .hover-box { fill: var(--bg-soft); stroke: var(--line); }
.chart .hover-text { fill: var(--text); font-family: var(--data-font); font-size: 10px; }
.chart .ring-line { stroke: var(--gold); fill: none; stroke-width: 1; opacity: 0.7; }
.chart .ring-node { fill: var(--bg); stroke: var(--gold); stroke-width: 1; }
.chart .ring-label { fill: var(--muted); font-family: var(--data-font); font-size: 10px; }
.chart .ring-label-top { fill: var(--gold); }

.chart .draw-in { animation: draw 600ms ease forwards; }
@keyframes draw { from { stroke-dashoffset: var(--path-length, 1200); } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .chart .draw-in { animation: none; }
  .workspace { transition: none; }
  .philosophy-plate img { transform: none !important; }
}

/* ---------- agreement strip ---------- */

.agreement { display: flex; flex-direction: column; gap: 0; }
.agreement-row {
  display: grid;
  grid-template-columns: minmax(96px, 1.1fr) minmax(80px, 1fr) minmax(120px, 1.6fr);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.agreement-row:last-child { border-bottom: none; }
.agreement-name { font-size: 0.78rem; color: var(--muted); }
.agreement-state {
  font-family: var(--data-font);
  font-size: 0.72rem;
  color: var(--text);
}
.agreement-state.unmeasured { color: var(--amber); }
.agreement-glyph { height: 18px; }
.agreement-glyph svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- tables ---------- */

.table-shell { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.data-table th {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--data-font);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  white-space: nowrap;
}
.data-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--data-font);
  font-size: 0.78rem;
  white-space: nowrap;
}
.data-table td.dim { color: var(--faint); }
.data-table td .outlier-stamp {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.data-table-compact td, .data-table-compact th { padding: 5px 8px; }

/* ---------- metric strips, masks, gates ---------- */

.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.metric-strip > div { background: var(--bg-graphite); padding: 10px 12px; }
.metric-strip span {
  display: block;
  font-family: var(--data-font);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  margin-bottom: 4px;
}
.metric-strip strong {
  font-family: var(--data-font);
  font-size: 0.92rem;
  font-weight: 600;
}
.metric-strip em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-family: var(--data-font);
  font-size: 0.64rem;
  color: var(--faint);
}

.mask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mask-col p.mask-title {
  margin: 0 0 6px;
  font-family: var(--data-font);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.mask-col ul { list-style: none; margin: 0; padding: 0; }
.mask-col li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--data-font);
  font-size: 0.72rem;
}
.mask-col li .mask-dot { color: var(--gold); }
.mask-col li.excluded { color: var(--faint); }
.mask-col li.excluded .mask-dot { color: var(--amber); }

.gate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.gate-item { background: var(--bg-graphite); padding: 12px; }
.gate-item span {
  display: block;
  font-family: var(--data-font);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
}
.gate-item strong {
  display: block;
  margin: 4px 0;
  font-family: var(--data-font);
  font-size: 0.82rem;
}
.gate-item[data-tone="ready"] strong { color: var(--gold); }
.gate-item[data-tone="blocked"] strong { color: var(--red); }
.gate-item[data-tone="partial"] strong { color: var(--amber); }
.gate-item p { margin: 0; font-size: 0.74rem; color: var(--muted); }

.block-list { margin: 0; padding: 0 0 0 18px; color: var(--muted); font-size: 0.86rem; }
.block-list li { margin-bottom: 6px; }

/* ---------- asset picker, small multiples ---------- */

.asset-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.asset-picker button {
  padding: 4px 10px;
  border: 1px solid var(--line);
  font-family: var(--data-font);
  font-size: 0.7rem;
  color: var(--muted);
  transition: border-color 160ms ease, color 160ms ease;
}
.asset-picker button:hover { border-color: var(--line-strong); }
.asset-picker button.on { border-color: var(--gold); color: var(--gold); }

.small-multiples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.small-multiples .panel { margin-bottom: 0; }
.small-multiples .chart { height: 150px; }

/* ---------- attention channel ---------- */

.attention-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
}
.attention-label {
  font-family: var(--data-font);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.attention-status {
  font-family: var(--data-font);
  font-size: 0.72rem;
  color: var(--amber);
}

/* ---------- internal panel ---------- */

.panel-internal { border-color: var(--amber); }
.internal-panel { margin-top: 12px; border-top: 1px solid var(--amber); padding-top: 12px; }
.internal-panel .chart { height: 200px; }
.internal-item {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.4fr) minmax(0, 2fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--data-font);
  font-size: 0.74rem;
}
.internal-item span { color: var(--muted); }
.internal-item strong { color: var(--amber); font-weight: 600; }
.internal-item p { margin: 0; color: var(--faint); font-size: 0.7rem; }

/* ---------- ledger trail ---------- */

.trail { display: flex; flex-direction: column; }
.trail-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(100px, 0.8fr) minmax(0, 2fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--data-font);
  font-size: 0.74rem;
}
.trail-row:last-child { border-bottom: none; }
.trail-row span { color: var(--muted); }
.trail-row strong { font-weight: 600; }
.trail-row em { font-style: normal; color: var(--faint); }

/* ---------- philosophy ---------- */

.workspace-philosophy { padding: 0; background: #030303; color: #fffaf0; }
:root[data-theme="light"] .workspace-philosophy { background: #0a0906; }

.philosophy-boundary {
  display: flex;
  justify-content: center;
  padding: 10px;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid rgba(218, 179, 96, 0.3);
}
.philosophy-boundary span {
  font-family: var(--data-font);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(218, 179, 96, 0.85);
}

.philosophy-chapter {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 90px) clamp(18px, 4vw, 40px);
  text-align: center;
}
.philosophy-chapter .eyebrow { color: rgba(218, 179, 96, 0.7); }
.philosophy-chapter h1 {
  font-size: clamp(1.8rem, 3.4vw, 3.4rem);
  color: #fffaf0;
}
.philosophy-copy {
  max-width: 62ch;
  margin: 0 auto 26px;
  color: rgba(255, 250, 240, 0.78);
  font-size: 0.98rem;
}

.equation-block { margin: 40px auto; }
.equation {
  margin: 0 0 8px;
  font-family: var(--title-font);
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  color: #dab360;
}
.equation-stamp {
  margin: 0;
  font-family: var(--data-font);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 250, 240, 0.5);
}

.laws {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin: 56px 0;
  text-align: left;
}
.law-name {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(218, 179, 96, 0.4);
  font-family: var(--data-font);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(218, 179, 96, 0.85);
}
.law-text {
  margin: 0;
  font-family: var(--title-font);
  font-size: 1.02rem;
  line-height: 1.5;
  color: rgba(255, 250, 240, 0.88);
}

.geometry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  margin: 30px 0 10px;
}
.geometry-fig {
  margin: 0;
  padding: 22px 16px 16px;
  border: 1px solid rgba(218, 179, 96, 0.32);
  position: relative;
}
.geometry-fig::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(218, 179, 96, 0.16);
  pointer-events: none;
}
.chart-geometry { height: 280px; }
.geometry-fig figcaption {
  margin-top: 12px;
  font-family: var(--data-font);
  font-size: 0.68rem;
  line-height: 1.55;
  color: rgba(255, 250, 240, 0.5);
  text-align: left;
}

.philosophy-axiom {
  margin: 64px auto 10px;
  font-family: var(--title-font);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: #fffaf0;
}

.philosophy-plate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  margin: 40px 0;
}
.plate-figure { margin: 0; }
.plate-figure img { width: 100%; display: block; border: 1px solid rgba(218, 179, 96, 0.3); }
.plate-figure figcaption {
  margin-top: 10px;
  font-family: var(--data-font);
  font-size: 0.68rem;
  color: rgba(255, 250, 240, 0.5);
  text-align: left;
}
.philosophy-close { margin-bottom: 0; }

/* ---------- command strip and switcher (mobile) ---------- */

.commandstrip { display: none; }

.switcher[hidden] { display: none; }

.switcher {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
}
.switcher-sheet {
  width: 100%;
  max-height: 78vh;
  overflow-y: auto;
  background: var(--bg-graphite);
  border-top: 1px solid var(--line-strong);
  padding: 12px 0 24px;
}
.switcher-sheet a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 22px;
  font-size: 0.95rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.switcher-sheet a.on { color: var(--gold); }
.switcher-sheet p.rail-group { padding: 10px 22px 2px; margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .frame { grid-template-columns: 1fr; }
  .rail { display: none; }
  .masthead-asof { display: none; }
  .stage { padding-bottom: 64px; }

  .commandstrip {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    border-top: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(10px);
  }
  .commandstrip button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 20px;
    font-family: var(--data-font);
    font-size: 0.8rem;
  }
  .commandstrip .rail-num { color: var(--gold); }
  .commandstrip span:last-child { margin-left: auto; color: var(--faint); }

  .philosophy-plate { grid-template-columns: 1fr; }
  .geometry { grid-template-columns: 1fr; }
  .laws { grid-template-columns: 1fr; gap: 24px; }
  .mask-grid { grid-template-columns: 1fr; }
  .chart-tall { height: 260px; }
  .agreement-row { grid-template-columns: minmax(90px, 1fr) minmax(70px, 0.9fr) minmax(90px, 1.2fr); }
}

@media (max-width: 640px) {
  .panel-head { flex-direction: column; }
  .panel-meta { text-align: left; white-space: normal; }
}

@media (max-width: 480px) {
  .masthead { gap: 10px; }
  .brand-name { font-size: 1rem; }
  .brand-tag { display: none; }
  .control-archive { font-size: 0.66rem; padding: 6px 9px; }
  h1 { font-size: 1.35rem; }
  .workspace { padding: 14px; }
  .panel { padding: 12px; }
}

/* ---------- the volume (dissertation layer) ---------- */

.stamp-philosophy { color: var(--gold); border: 1px solid var(--line-strong); }
.stamp-gated { color: var(--amber); border: 1px solid var(--amber); }
.stamp-writetime { color: var(--faint); border: 1px dashed var(--line); }

.volume-legend {
  margin: 14px 0 0;
  max-width: 74ch;
  color: var(--faint);
  font-size: 0.82rem;
  line-height: 2;
}

.volume-disclaimer {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
  max-width: 68ch;
}

.volume-subhead {
  margin: 22px 0 10px;
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.volume-defs { margin: 0; }
.volume-defs > div {
  display: grid;
  grid-template-columns: minmax(140px, 260px) 1fr;
  gap: 4px 18px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.volume-defs > div:last-child { border-bottom: 0; }
.volume-defs dt {
  font-family: var(--data-font);
  font-size: 0.78rem;
  color: var(--ivory);
  line-height: 1.5;
}
.volume-notation dt { color: var(--gold); }
.volume-defs dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 62ch;
}

.volume-toc { list-style: none; margin: 0; padding: 0; }
.volume-toc li { border-bottom: 1px solid var(--line); }
.volume-toc li:last-child { border-bottom: 0; }
.volume-toc button {
  display: grid;
  grid-template-columns: minmax(200px, 340px) 1fr auto;
  align-items: baseline;
  gap: 4px 18px;
  width: 100%;
  padding: 10px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.15s ease;
}
.volume-toc button:hover { background: var(--bg-soft); }
.volume-toc strong { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.volume-toc em { font-style: italic; color: var(--faint); font-size: 0.85rem; }

.volume-chnum {
  display: block;
  font-family: var(--data-font);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 4px;
}
.volume-chapter .panel-head h2 { line-height: 1.25; }

.volume-purpose {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 66ch;
}

.volume-modules { list-style: none; margin: 0; padding: 0; }
.volume-modules li {
  display: grid;
  grid-template-columns: 44px minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 6px 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.volume-modules li:last-child { border-bottom: 0; }
.vm-num { font-family: var(--data-font); font-size: 0.78rem; color: var(--gold); }
.vm-title { font-size: 0.92rem; color: var(--text); line-height: 1.45; }
.vm-chips { justify-self: start; }
.vm-chips .stamp { margin: 2px 6px 2px 0; }
.vm-note {
  display: inline-block;
  font-family: var(--data-font);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.vm-state {
  justify-self: end;
  font-family: var(--data-font);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--faint);
}

@media (max-width: 760px) {
  .volume-defs > div { grid-template-columns: 1fr; }
  .volume-toc button { grid-template-columns: 1fr; gap: 2px; }
  .volume-toc .vm-state { justify-self: start; }
  .volume-modules li { grid-template-columns: 44px 1fr; }
  .volume-modules .vm-chips { grid-column: 2; }
  .volume-modules .vm-state { grid-column: 2; justify-self: start; }
}

/* Written volume modules (chapters publish one per session). */
.volume-module {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.volume-module:last-child { border-bottom: 0; padding-bottom: 4px; }
.vmw-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.vmw-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.vmw-copy {
  margin: 0;
  max-width: 70ch;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
}
.vmw-copy + .vmw-copy { margin-top: 10px; }
.volume-equation { margin: 6px 0 14px; }
.volume-equation-line { color: var(--gold); font-size: clamp(1.05rem, 2vw, 1.5rem); }
.volume-worked { margin-top: 12px; }
.vm-state-live { color: var(--gold); }

/* ---------- licensed-zone motion (ultraplan Phase 3 design pass) ----------
   Canon: avant-garde is ORDERED in philosophy, navigation/transitions,
   loading states and the desk hero. Evidence panels stay still. Everything
   below is disabled by prefers-reduced-motion and touches transform,
   opacity and font-variation-settings only. */

@media (prefers-reduced-motion: no-preference) {

  /* Navigation: gold hairline choreography and variable-weight response.
     Inter ships as a variable file, so weight is now an expressive axis. */
  .rail a {
    font-variation-settings: "wght" 400;
    transition: color 160ms ease, border-color 160ms ease, font-variation-settings 220ms ease;
  }
  .rail a:hover { font-variation-settings: "wght" 540; }
  .rail a.on { font-variation-settings: "wght" 600; }

  /* First paint: the masthead rule draws itself once. Licensed loading moment. */
  .masthead { border-bottom-color: transparent; }
  .masthead::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--line);
    transform-origin: left center;
    animation: rule-draw 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Arrival: one composed entrance, then the scene rests. The plate drifts at
     candle pace and the live score breathes. The score value is set once by JS
     and never ticks; only its opacity pulses, so no digit moves while read. */
  .arrival-centre { animation: hero-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both 150ms; }
  .arrival-plate { animation: arrival-drift 46s ease-in-out infinite alternate; }
  [data-arrival-score] { animation: arrival-breathe 5.5s ease-in-out infinite; }
  .arrival-cue { animation: arrival-breathe 4.5s ease-in-out infinite; }

  /* Descent: evidence chapters surface as the reader arrives at them. The chapter
     framing rises with the house curve; evidence panels only fade up, never
     translate, so no number moves while it is readable. */
  @supports (animation-timeline: view()) {
    .desk-act-head > * {
      animation: plate-surface linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
    .desk-act .panel,
    .desk-act .stat-strip,
    .desk-act .pattern-grid {
      animation: evidence-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }

  /* Philosophy: the licensed cinematic layer. Scroll-driven, slow, Kubrick
     title-card pacing. Plates surface as the reader arrives at them. */
  @supports (animation-timeline: view()) {
    .philosophy-boundary span {
      animation: boundary-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .philosophy-chapter h1,
    .philosophy-chapter .philosophy-copy,
    .philosophy-chapter .equation-block,
    .geometry-fig,
    .plate-figure,
    .philosophy-plate .chart-ring {
      animation: plate-surface linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    .philosophy-axiom {
      animation: plate-surface linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }

}

@keyframes rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes boundary-reveal {
  from { opacity: 0; letter-spacing: 0.4em; }
  to { opacity: 1; letter-spacing: 0.22em; }
}

@keyframes plate-surface {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes arrival-drift {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@keyframes arrival-breathe {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

/* Evidence settles in from the field on opacity alone; the digits never move. */
@keyframes evidence-settle {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- the engraved plate system ---------- */

.plate { margin: 26px 0; }
.plate-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.plate-head .stamp { margin-left: auto; }
.plate-numeral {
  font-family: var(--data-font);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}
.plate-title {
  margin: 0;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
}
.plate-caption {
  margin: 8px 0 0;
  font-family: var(--title-font);
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 78ch;
}
.plate-host { width: 100%; }
.plate-host-hero { min-height: 430px; }
.plate-svg { display: block; width: 100%; height: auto; }

/* Plates inside the philosophy workspace always render the dark register,
   because philosophy keeps its dark ground in both themes. */
.workspace-philosophy .plate,
:root[data-theme="light"] .workspace-philosophy .plate {
  --text: #fffaf0;
  --muted: rgba(255, 250, 240, 0.72);
  --faint: rgba(255, 250, 240, 0.46);
  --line: rgba(218, 179, 96, 0.24);
  --line-strong: rgba(218, 179, 96, 0.54);
  --gold: #dab360;
  --ivory: #fffaf0;
  --bg-graphite: #0a0a0a;
}

/* SVG engraving classes: every colour is a theme variable. */
.plate-caps { font-family: var(--data-font); font-size: 9.5px; letter-spacing: 0.18em; fill: var(--muted); }
.plate-caps-gold { fill: var(--gold); }
.plate-caps-faint { fill: var(--faint); }
.plate-serif, .plate-serif-small { font-family: var(--title-font); font-style: italic; fill: var(--muted); }
.plate-serif { font-size: 13px; }
.plate-serif-small { font-size: 11px; }
.plate-serif-faint { fill: var(--faint); }
.plate-rule { stroke: var(--line-strong); stroke-width: 1; }
.plate-line { stroke: var(--ivory); stroke-width: 1.1; fill: none; }
.plate-line-gold { stroke: var(--gold); }
.plate-line-faint { stroke: var(--faint); stroke-width: 0.8; }
.plate-ceiling { stroke: var(--gold); stroke-width: 2; }
.plate-floor { stroke: var(--ivory); stroke-width: 1.1; }
.plate-floor-echo { opacity: 0.4; }
.plate-price { stroke: var(--ivory); stroke-width: 0.9; opacity: 0.9; }
.plate-price-schematic { opacity: 0.42; stroke-dasharray: 1.5 2.5; }
.plate-attention { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0.7; }
.plate-gap { opacity: 0.5; }
.plate-hatch-line { stroke: var(--gold); stroke-width: 0.55; opacity: 0.5; }
.plate-tick { stroke: var(--line-strong); stroke-width: 1; }
.plate-now { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 5; }
.plate-endbox-rect { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.plate-node { fill: none; stroke: var(--ivory); stroke-width: 1.3; }
.plate-node-gold { stroke: var(--gold); }
.plate-node-major { fill: var(--bg-graphite); stroke: var(--gold); stroke-width: 1.6; }
.plate-pan { fill: none; stroke: var(--faint); stroke-width: 1; }
.plate-area { fill: none; stroke: var(--faint); stroke-width: 1; }
.plate-area-outer { stroke: var(--ivory); stroke-width: 1.3; }
.plate-ornament { fill: var(--gold); }
.plate-arrowhead { fill: var(--gold); opacity: 0.8; }
.plate-probe-line { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.9; }

/* Plate interaction chrome. */
.plate-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.plate-toggles button {
  padding: 4px 11px;
  border: 1px solid var(--line);
  font-family: var(--data-font);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  transition: border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.plate-toggles button:hover { border-color: var(--line-strong); color: var(--text); }
.plate-toggles button.off { opacity: 0.4; text-decoration: line-through; }
.plate-readout {
  min-height: 22px;
  margin: 4px 0 0;
  font-family: var(--data-font);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.plate-readout .probe-year { color: var(--gold); }
.plate-readout .probe-hint, .plate-readout .probe-gap { color: var(--faint); }

/* The compression exhibit table. */
.exhibit-moral {
  margin: 12px 0 0;
  font-family: var(--title-font);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
}

/* Ring plate upgrades: the optimal speculation zone and the quiet region. */
.ring-zone { fill: var(--gold); opacity: 0.1; stroke: var(--line); stroke-width: 0.6; }
.ring-zone-label { font-family: var(--data-font); font-size: 8.5px; letter-spacing: 0.2em; fill: var(--gold); opacity: 0.85; }
.ring-label-quiet { opacity: 0.45; }
.plate-title-centred { text-align: center; margin: 6px 0 18px; }
.vm-plate-ref {
  margin: 10px 0 0;
  font-family: var(--data-font);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Plates join the same engraved figure counter as the measured charts, so
   every workspace numbers its figures I, II, III in reading order. Exhibits
   (tables) keep their own lettered register. */
.plate-head .plate-title:not(.plate-title-exhibit)::before {
  counter-increment: figure;
  content: "Fig. " counter(figure, upper-roman) ".";
  margin-right: 10px;
  font-family: var(--data-font);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold);
}

/* ---------- cohesion: one engraved document (ultraplan plate pass) ---------- */

/* Every panel header speaks the certificate register: spaced small capitals
   under the workspace's serif headline. Function and stillness unchanged. */
.panel-head h2 {
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.6;
}
.volume-chapter .panel-head h2 { letter-spacing: 0.18em; }

/* The page edge carries a hairline, and every workspace closes with a
   double rule, the way a certificate closes a section. */
.stage { border-right: 1px solid var(--line); }
.workspace::after {
  content: "";
  display: block;
  width: 160px;
  margin: 46px auto 6px;
  border-top: 3px double var(--line-strong);
}

/* ---------- audit corrections: composition (2026-07-05, live audit) ---------- */

/* Philosophy first viewport: headline, equation and hero as one scene. */
.philosophy-chapter h1 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: 10px; }
.philosophy-chapter .equation-block { margin: 16px auto 20px; }
.plate-hero { margin-top: 6px; }
.plate-hero .plate-title { font-size: 0.95rem; letter-spacing: 0.26em; }
.plate-host-hero { min-height: 430px; }
@media (max-width: 760px) {
  .plate-host-hero { min-height: 300px; }
  .philosophy-chapter h1 { font-size: 1.35rem; }
}

/* Sub-figures support the hero; their headers speak more quietly. */
.geometry-fig .plate-title { font-size: 0.68rem; letter-spacing: 0.16em; color: var(--muted); }
.geometry-fig .plate-head { padding-bottom: 6px; }

/* The Model Lab instrument: the gate board dominates the room. */
.gate-grid-dominant { gap: 12px; }
.gate-grid-dominant .gate-item {
  padding: 16px;
  border-left: 2px solid var(--line);
}
.gate-grid-dominant .gate-item[data-tone="ready"] { border-left-color: var(--gold); }
.gate-grid-dominant .gate-item[data-tone="blocked"] { border-left-color: var(--red); }
.gate-grid-dominant .gate-item[data-tone="partial"] { border-left-color: var(--amber); }
.gate-grid-dominant .gate-item strong { font-size: 0.86rem; }

/* ---------- the philosophy act (REEL STANDARD, 2026-07-05) ---------- */
/* One dominant scene: the bound origin in fog, type set on the plate.
   This is the register boundary now; the strip it replaces is retired. */

.workspace-philosophy { padding: 0; }
.workspace-philosophy::after { display: none; }

.philosophy-act {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid rgba(218, 179, 96, 0.3);
  background: #060606;
}
.act-backplate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* The philosophy act in real motion, crossfading over the still it was grown
   from. The still stays as the poster and the reduced-motion / save-data scene. */
.act-backplate-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0;
  transition: opacity 1400ms ease;
}
.act-backplate-video.is-loaded { opacity: 1; }
.act-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 46%, rgba(3, 3, 3, 0) 30%, rgba(3, 3, 3, 0.55) 100%),
    linear-gradient(to bottom, rgba(3, 3, 3, 0.5), rgba(3, 3, 3, 0.05) 30%, rgba(3, 3, 3, 0.08) 70%, rgba(3, 3, 3, 0.6));
}
.act-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(48px, 9vh, 110px) clamp(18px, 4vw, 40px);
  max-width: 900px;
}
.act-stamp {
  margin: 0 0 26px;
  font-family: var(--data-font);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(218, 179, 96, 0.85);
}
.act-eyebrow { color: rgba(218, 179, 96, 0.7); }
.philosophy-act h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  color: #fffaf0;
  text-shadow: 0 1px 30px rgba(3, 3, 3, 0.8);
  margin-bottom: 8px;
}
.act-equation { margin: 18px auto 0; }
.act-cue {
  margin: 42px 0 0;
  font-family: var(--data-font);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--faint);
}
.act-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 34px;
  margin: 12px auto 0;
  background: linear-gradient(to bottom, rgba(218, 179, 96, 0.7), rgba(218, 179, 96, 0));
}

@media (prefers-reduced-motion: no-preference) {
  /* The scene breathes at candle pace and settles; the cue pulses slowly. */
  .act-backplate,
  .act-backplate-video { animation: act-drift 44s ease-in-out infinite alternate; }
  .act-content { animation: hero-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both 150ms; }
  .act-cue { animation: act-pulse 4.5s ease-in-out infinite; }
}
@keyframes act-drift {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}
@keyframes act-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@media (max-width: 760px) {
  .philosophy-act { min-height: 66vh; }
}