/* Contradiction Atlas — global design system, Rosé Pine palette */

/*
  Theme model
  -----------
  Raw swatches live in --rp-*. Semantic atlas tokens (--atlas-ground, --route,
  --schism …) are mapped from them once per theme, so components never touch a
  swatch directly. Light = Rosé Pine Dawn, dark = Rosé Pine (main).

  Text-role variants (--schism-ink, --descent-ink, --influence-ink) exist because
  Dawn's love/gold/foam accents pass 3:1 for lines and fills but not 4.5:1 for
  small text; the inks are the same hue pulled toward --rp-text until they clear
  AA. In the dark theme every accent already clears AA, so ink == swatch.

  Order of precedence: [data-theme] attribute (user choice, set by js/theme.js
  before first paint) > prefers-color-scheme > Dawn default.
*/

:root {
  color-scheme: light;

  /* Rosé Pine Dawn */
  --rp-base: #faf4ed;
  --rp-surface: #fffaf3;
  --rp-overlay: #f2e9e1;
  --rp-muted: #9893a5;
  --rp-subtle: #797593;
  --rp-text: #575279;
  --rp-love: #b4637a;
  --rp-gold: #ea9d34;
  --rp-rose: #d7827e;
  --rp-pine: #286983;
  --rp-foam: #56949f;
  --rp-iris: #907aa9;
  --rp-highlight-low: #f4ede8;
  --rp-highlight-med: #dfdad9;
  --rp-highlight-high: #cecacd;

  /* Semantic atlas tokens */
  --atlas-ground: var(--rp-base);
  --atlas-sheet: var(--rp-surface);
  --panel-2: var(--rp-overlay);
  --carbon: var(--rp-text);
  /* Dawn's subtle (#797593) is 4.2:1 on the sheet; pulled toward text to clear AA */
  --carbon-soft: color-mix(in srgb, var(--rp-subtle) 75%, var(--rp-text));
  --hairline: var(--rp-highlight-med);
  --schism: var(--rp-love);
  --schism-ink: color-mix(in srgb, var(--rp-love) 65%, var(--rp-text));
  --descent: var(--rp-gold);
  --descent-ink: color-mix(in srgb, var(--rp-gold) 35%, var(--rp-text));
  --influence: var(--rp-foam);
  --influence-ink: var(--rp-pine);
  --route: var(--rp-pine);
  --route-soft: color-mix(in srgb, var(--rp-pine) 40%, transparent);
  --focus: var(--rp-iris);
  --on-accent: var(--rp-surface);
  --selection: var(--rp-highlight-med);
  --portrait-well: var(--rp-highlight-high);
  --shadow-ink: 87, 82, 121;
  --sheet-rgb: 255, 250, 243;

  --font-display: "Anybody", "Arial Narrow", sans-serif;
  --font-body: "Commissioner", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, monospace;
  --header-height: 4.25rem;

  /* Theme change: one shared duration so every surface crossfades in step. */
  --theme-duration: 520ms;
  --theme-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Compatibility aliases for unchanged inline styles and companion CSS. */
  --void: var(--atlas-ground);
  --void-2: var(--atlas-sheet);
  --panel: var(--atlas-sheet);
  --signal: var(--schism);
  --signal-dim: var(--schism);
  --banner: var(--route);
  --gold: var(--descent);
  --gold-dim: var(--descent);
  --paper: var(--carbon);
  --paper-dim: var(--carbon-soft);
  --cold: var(--influence);
  --grid-line: var(--hairline);
}

/* Rosé Pine (main) — the dark theme. Two selectors carry the same block:
   the media query covers "follow the system" and the attribute covers an
   explicit choice, which must also win over a light system preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --rp-base: #191724;
    --rp-surface: #1f1d2e;
    --rp-overlay: #26233a;
    --rp-muted: #6e6a86;
    --rp-subtle: #908caa;
    --rp-text: #e0def4;
    --rp-love: #eb6f92;
    --rp-gold: #f6c177;
    --rp-rose: #ebbcba;
    --rp-pine: #31748f;
    --rp-foam: #9ccfd8;
    --rp-iris: #c4a7e7;
    --rp-highlight-low: #21202e;
    --rp-highlight-med: #403d52;
    --rp-highlight-high: #524f67;
    --carbon-soft: var(--rp-subtle);
    --schism-ink: var(--rp-love);
    --descent-ink: var(--rp-gold);
    --influence: var(--rp-pine);
    --influence-ink: var(--rp-foam);
    --route: var(--rp-foam);
    --route-soft: color-mix(in srgb, var(--rp-foam) 40%, transparent);
    --on-accent: var(--rp-base);
    --portrait-well: var(--rp-overlay);
    --shadow-ink: 0, 0, 0;
    --sheet-rgb: 31, 29, 46;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --rp-base: #191724;
  --rp-surface: #1f1d2e;
  --rp-overlay: #26233a;
  --rp-muted: #6e6a86;
  --rp-subtle: #908caa;
  --rp-text: #e0def4;
  --rp-love: #eb6f92;
  --rp-gold: #f6c177;
  --rp-rose: #ebbcba;
  --rp-pine: #31748f;
  --rp-foam: #9ccfd8;
  --rp-iris: #c4a7e7;
  --rp-highlight-low: #21202e;
  --rp-highlight-med: #403d52;
  --rp-highlight-high: #524f67;
  --carbon-soft: var(--rp-subtle);
  --schism-ink: var(--rp-love);
  --descent-ink: var(--rp-gold);
  --influence: var(--rp-pine);
  --influence-ink: var(--rp-foam);
  --route: var(--rp-foam);
  --route-soft: color-mix(in srgb, var(--rp-foam) 40%, transparent);
  --on-accent: var(--rp-base);
  --portrait-well: var(--rp-overlay);
  --shadow-ink: 0, 0, 0;
  --sheet-rgb: 31, 29, 46;
}

/*
  Theme change animation
  ----------------------
  Two layers, both driven from js/theme.js:
  1. `.theme-transition` on <html> for ~one --theme-duration lets every colour
     property crossfade in step (fallback for browsers without View Transitions).
  2. Where document.startViewTransition exists, theme.js snapshots the page and
     wipes the new theme in as a circle growing from the toggle button; the
     default crossfade is disabled here so only that clip animation plays.
  The global reduced-motion block at the end of this file zeroes durations, so
  users who opt out get an instant swap.
*/
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color var(--theme-duration) var(--theme-ease),
    border-color var(--theme-duration) var(--theme-ease),
    color var(--theme-duration) var(--theme-ease),
    fill var(--theme-duration) var(--theme-ease),
    stroke var(--theme-duration) var(--theme-ease),
    box-shadow var(--theme-duration) var(--theme-ease),
    outline-color var(--theme-duration) var(--theme-ease) !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
}

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

html {
  scroll-behavior: smooth;
}

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(1rem);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 480ms ease, transform 560ms cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--reveal-index, 0) * 45ms);
}

/* Motion layer — everything below is decorative and collapses under
   prefers-reduced-motion at the bottom of this sheet. */

/* Page heads: rows rise in sequence once on load (see motion.js armHead). */
.head-armed .eyebrow,
.head-armed .file-no,
.head-armed h1,
.head-armed .tagline,
.head-armed .subtitle,
.head-armed .hero-meta,
.head-armed .stamp-row,
.head-armed .hero-route-panel {
  animation: head-rise 640ms cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(90ms + var(--head-index, 0) * 110ms);
}

@keyframes head-rise {
  from { opacity: 0; transform: translateY(0.9rem); }
  to   { opacity: 1; transform: none; }
}

/* The schism tab on every page head slides in from the right after the rows. */
.hero::after,
.dossier-head::after {
  transform: scaleX(0);
  transform-origin: right;
  animation: tab-in 700ms cubic-bezier(.2,.7,.2,1) 640ms forwards;
}

@keyframes tab-in {
  to { transform: scaleX(1); }
}

/* Stamps pop in after the head settles. */
.head-armed .stamp {
  animation: stamp-pop 420ms cubic-bezier(.2,.9,.3,1.3) both;
  animation-delay: calc(560ms + var(--stamp-index, 0) * 90ms);
}

.stamp:nth-child(1) { --stamp-index: 0; }
.stamp:nth-child(2) { --stamp-index: 1; }
.stamp:nth-child(3) { --stamp-index: 2; }
.stamp:nth-child(4) { --stamp-index: 3; }

@keyframes stamp-pop {
  from { opacity: 0; transform: scale(0.86) rotate(-1.5deg); }
  to   { opacity: 1; transform: none; }
}

/* Section rules draw from the number outward when the heading reveals. */
.motion-ready .sec::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1) 180ms;
}

.motion-ready .sec.is-visible::after {
  transform: scaleX(1);
}

/* Pull quotes: the descent bar grows down the left edge. */
.motion-ready .pull {
  border-left-color: transparent;
  background-image: linear-gradient(var(--descent), var(--descent));
  background-repeat: no-repeat;
  background-position: -5px 0;
  background-size: 5px 0%;
  transition: background-size 620ms cubic-bezier(.2,.7,.2,1) 200ms;
}

.motion-ready .pull.is-visible {
  background-size: 5px 100%;
}

/* Timeline entries: the year underline draws, the node lands. */
.motion-ready .timeline > li::before {
  transform: scale(0);
  transition: transform 360ms cubic-bezier(.2,.9,.3,1.3) 120ms;
}

.motion-ready .timeline > li.is-visible::before {
  transform: none;
}

/* Epoch headings: the rule slides in under the word. */
.motion-ready .epoch {
  border-bottom-color: transparent;
  background-image: linear-gradient(var(--descent), var(--descent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 640ms cubic-bezier(.2,.7,.2,1) 160ms;
}

.motion-ready .epoch.is-visible {
  background-size: 100% 1px;
}

/* Conflict cards: the VS mark spins into place. */
.motion-ready .conflict .vs {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
  transition: opacity 320ms ease 260ms, transform 480ms cubic-bezier(.2,.9,.3,1.3) 260ms;
}

.motion-ready .conflict.is-visible .vs {
  opacity: 1;
  transform: none;
}

/* Plates and clips: hover lifts the frame and warms the caption bar. */
.plate,
.clip {
  overflow: hidden;
  transition: border-color 220ms ease, transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease;
}

.plate img,
.clip video {
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 400ms ease;
}

.plate figcaption,
.clip figcaption {
  transition: color 220ms ease, box-shadow 220ms ease;
}

@media (hover: hover) {
  .plate:hover,
  .clip:hover {
    border-color: var(--descent);
    box-shadow: 0 0.9rem 1.8rem rgba(var(--shadow-ink), 0.16);
    transform: translateY(-0.2rem);
  }

  .plate:hover img {
    transform: scale(1.025);
  }

  .plate:hover figcaption {
    color: var(--carbon);
    box-shadow: inset 8px 0 var(--descent);
  }

  .clip:hover figcaption {
    color: var(--carbon);
    box-shadow: inset 8px 0 var(--influence);
  }
}

/* Doctrine cards, figures, schism entries: a hairline of colour on hover. */
.doctrine article,
.figures figure,
.schism-list > * {
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

@media (hover: hover) {
  .doctrine article:hover {
    border-color: var(--influence);
    border-top-color: var(--descent);
    transform: translateY(-0.15rem);
  }

  .figures figure:hover {
    transform: translateY(-0.15rem);
  }

  .schism-list > li:hover {
    border-left-width: 8px;
    box-shadow: 0 0.6rem 1.4rem rgba(var(--shadow-ink), 0.1);
  }
}

/* Buttons and stamps: gentle lift. */
.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

.stamp {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.stamp:hover {
  transform: translateY(-1px) rotate(-0.6deg);
  box-shadow: 0 0.35rem 0.8rem rgba(var(--shadow-ink), 0.12);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--atlas-ground);
  color: var(--carbon);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection);
  color: var(--carbon);
}

img,
video,
svg {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--route);
  text-decoration-color: var(--route-soft);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--schism-ink);
  text-decoration-color: currentColor;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--carbon);
  font-family: var(--font-display);
  font-stretch: condensed;
  font-weight: 750;
  line-height: 1.06;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.45rem, 7vw, 5.8rem);
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(1.55rem, 3.5vw, 2.6rem);
  letter-spacing: -0.025em;
}

h3 {
  font-size: 1.15rem;
}

.glitch {
  position: relative;
  color: var(--carbon);
  font-family: var(--font-display);
  font-stretch: condensed;
  font-weight: 780;
  text-transform: uppercase;
}

.eyebrow,
.file-no,
.fc-no,
.q-depth {
  color: var(--influence-ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.55;
  text-transform: uppercase;
}

/* Shared chrome */
.nav {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 2px solid var(--route);
  background: rgba(var(--sheet-rgb), 0.96);
  box-shadow: 0 0.25rem 1rem rgba(var(--shadow-ink), 0.06);
  color: var(--carbon);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.045em;
}

.nav-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--carbon);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nav-brand:hover {
  color: var(--route);
}

.nav-brand .star,
.footer .star {
  color: var(--schism-ink);
}

.nav-seal {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.5rem;
}

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--carbon);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: var(--schism);
  color: var(--schism-ink);
  transform: translateY(-0.125rem);
}

/* Theme toggle: sun ↔ moon drawn from one SVG. The core circle grows and a
   masking circle slides in from the corner to carve the crescent; the rays
   fold away. Every part is a CSS transition on SVG geometry, so the swap
   inherits --theme-duration and the reduced-motion override for free. */
.theme-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--carbon);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--descent);
  color: var(--descent-ink);
  transform: translateY(-0.125rem);
}

.theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  overflow: visible;
}

.theme-icon-core {
  fill: currentColor;
  r: 5px;
  transition: r var(--theme-duration) var(--theme-ease);
}

.theme-icon-mask {
  cx: 26px;
  cy: -2px;
  transition: cx var(--theme-duration) var(--theme-ease), cy var(--theme-duration) var(--theme-ease);
}

.theme-icon-rays {
  stroke: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--theme-duration) var(--theme-ease), transform var(--theme-duration) var(--theme-ease);
}

:root[data-theme="dark"] .theme-icon-core {
  r: 9px;
}

:root[data-theme="dark"] .theme-icon-mask {
  cx: 17px;
  cy: 6px;
}

:root[data-theme="dark"] .theme-icon-rays {
  opacity: 0;
  transform: rotate(60deg) scale(0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-core {
    r: 9px;
  }

  :root:not([data-theme="light"]) .theme-icon-mask {
    cx: 17px;
    cy: 6px;
  }

  :root:not([data-theme="light"]) .theme-icon-rays {
    opacity: 0;
    transform: rotate(60deg) scale(0.4);
  }
}

.theme-toggle-label {
  min-width: 3.2em;
  text-align: left;
}

.nav-panel,
.nav-primary {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem 0.8rem;
}

.nav-primary a,
.nav-annexes summary,
.nav-annexes-links a {
  border-bottom: 2px solid transparent;
  color: var(--carbon-soft);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-primary a:hover,
.nav-primary a[aria-current="page"],
.nav-annexes-links a:hover,
.nav-annexes-links a[aria-current="page"] {
  border-bottom-color: var(--schism);
  color: var(--carbon);
}

.nav-annexes {
  position: relative;
  flex: none;
}

.nav-annexes summary {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  list-style: none;
}

.nav-annexes summary::-webkit-details-marker {
  display: none;
}

.nav-annexes[open] summary {
  color: var(--carbon);
}

.nav-annexes[open] summary span {
  transform: rotate(45deg);
}

.nav-annexes-links {
  position: absolute;
  z-index: 2;
  top: calc(100% + 0.7rem);
  right: 0;
  display: grid;
  min-width: 12rem;
  padding: 0.55rem;
  border: 1px solid var(--hairline);
  background: var(--atlas-sheet);
  box-shadow: 0 0.7rem 1.4rem rgba(var(--shadow-ink), 0.14);
}

.nav-annexes-links a {
  display: block;
  padding: 0.45rem 0.55rem;
}

.nav-annexes-links a:hover,
.nav-annexes-links a[aria-current="page"] {
  background: var(--atlas-ground);
}

/* Nav: the underline slides in from the left instead of blinking on. */
.nav-primary a,
.nav-annexes summary {
  position: relative;
  border-bottom-color: transparent;
}

.nav-primary a::after,
.nav-annexes summary::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 2px;
  background: var(--schism);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}

.nav-primary a:hover,
.nav-primary a[aria-current="page"],
.nav-annexes summary:hover,
.nav-annexes[open] summary {
  border-bottom-color: transparent;
}

.nav-primary a:hover::after,
.nav-primary a[aria-current="page"]::after,
.nav-annexes:hover summary::after,
.nav-annexes[open] summary::after {
  transform: scaleX(1);
}

.shell {
  width: min(100%, 76rem);
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) 5rem;
}

#tree,
#files {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* Page foundations */
.hero,
.dossier-head {
  position: relative;
  padding: clamp(3.25rem, 8vw, 7rem) 0 clamp(2.4rem, 5vw, 4.25rem);
  border-bottom: 2px solid var(--route);
}

.hero::after,
.dossier-head::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  width: min(25%, 10rem);
  height: 5px;
  background: var(--schism);
  content: "";
}

.hero h1,
.dossier-head h1 {
  margin: 0.55rem 0 1.25rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(27rem, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.hero-route-panel {
  display: grid;
  gap: 0.8rem;
}

.route-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.route-key span {
  display: inline-flex;
  align-items: center;
}

.route-key i {
  width: 1.65rem;
  margin-right: 0.4rem;
  border-top: 2px solid var(--descent);
}

.route-key .route-influence i {
  border-top-color: var(--influence);
  border-top-style: dashed;
}

.route-key .route-schism i {
  border-top-color: var(--schism);
  border-top-style: dashed;
}

.hero .tagline,
.dossier-head .subtitle {
  max-width: 68ch;
  color: var(--carbon-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

.hero .tagline b {
  color: var(--carbon);
  font-weight: 650;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  margin-top: 2rem;
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-meta b {
  color: var(--route);
  font-weight: 700;
}

.sec {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: clamp(3.25rem, 8vw, 6rem) 0 1.5rem;
  color: var(--carbon);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 720;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.sec .n {
  flex: none;
  color: var(--schism-ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.sec::after {
  flex: 1;
  height: 1px;
  background: var(--route);
  content: "";
}

.stamp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

.stamp {
  padding: 0.32rem 0.62rem;
  border: 1px solid var(--schism);
  color: var(--schism-ink);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stamp.gold {
  border-color: var(--descent);
  color: var(--descent-ink);
}

.btn {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.15rem;
  border: 1px solid var(--route);
  background: var(--route);
  color: var(--on-accent);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--schism);
  background: var(--schism);
  color: var(--on-accent);
  transform: translateY(-0.125rem);
}

.btn.ghost {
  background: transparent;
  color: var(--route);
}

.btn.ghost:hover,
.btn.ghost:focus-visible {
  border-color: var(--schism);
  background: var(--atlas-sheet);
  color: var(--schism-ink);
}

/* Lineage tree */
.tree-wrap {
  position: relative;
  margin-top: 1.75rem;
  overflow-x: auto;
  border: 1px solid var(--route);
  background: var(--atlas-sheet);
  box-shadow: 0 0.7rem 1.8rem rgba(var(--shadow-ink), 0.06);
}

.tree-pan-hint {
  display: none;
}

.tree-wrap svg {
  display: block;
  width: 100%;
  min-width: 61.25rem;
  height: auto;
}

.tree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--route);
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

.tree-legend i {
  display: inline-block;
  width: 1.75rem;
  margin-right: 0.45rem;
  border-top: 2px solid var(--descent);
  vertical-align: middle;
}

.tree-legend .l-influence i {
  border-top-color: var(--influence);
  border-top-style: dashed;
}

.tree-legend .l-schism i {
  border-top-color: var(--schism);
  border-top-style: dashed;
}

.t-edge {
  fill: none;
  opacity: 0.68;
  stroke-width: 1.6;
  transition: opacity 160ms ease, stroke-width 160ms ease;
}

.t-edge.descent {
  stroke: var(--descent);
}

.t-edge.influence {
  opacity: 0.55;
  stroke: var(--influence);
  stroke-dasharray: 5 5;
}

.t-edge.schism {
  stroke: var(--schism);
  stroke-dasharray: 2 3;
}

.t-edge.lit {
  opacity: 1;
  stroke-width: 2.8;
}

.t-edge.dim {
  opacity: 0.1;
}

.t-node {
  cursor: pointer;
  transition: opacity 160ms ease;
}

.t-era {
  fill: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
}

.t-hit {
  fill: transparent;
}

.t-node .t-junction {
  fill: var(--atlas-sheet);
  stroke: var(--route);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 160ms ease, stroke 160ms ease, stroke-width 160ms ease, transform 160ms ease;
}

.t-node text {
  fill: var(--carbon);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.t-node .t-year {
  fill: var(--carbon-soft);
  font-size: 10px;
  font-weight: 400;
}

.t-node:hover .t-junction,
.t-node.lit .t-junction {
  fill: var(--schism);
  stroke: var(--schism);
  transform: scale(1.16);
}

.t-node:focus-visible {
  outline: none;
}

.t-node:focus-visible .t-junction {
  fill: var(--atlas-sheet);
  stroke: var(--route);
  stroke-width: 5;
  transform: scale(1.16);
}

.t-node:hover text,
.t-node.lit text {
  fill: var(--route);
}

.t-node.dim {
  opacity: 0.22;
}

/* File cards */
.file-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

.file-era {
  min-width: 0;
}

.file-era h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
  color: var(--route);
  font-size: 1.2rem;
  text-transform: uppercase;
}

.file-era h3 span {
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.file-era-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px;
  border: 1px solid var(--route);
  background: var(--route);
}

.file-card {
  position: relative;
  display: block;
  min-width: 0;
  padding: 1.2rem 1.25rem 1.4rem;
  background: var(--atlas-sheet);
  color: var(--carbon);
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.file-card:hover,
.file-card:focus-visible {
  background: var(--panel-2);
  color: var(--carbon);
  transform: translateY(-0.2rem);
}

.file-card::after {
  position: absolute;
  right: 1rem;
  bottom: 0;
  left: 1rem;
  height: 3px;
  background: var(--schism);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.file-card:hover::after,
.file-card:focus-visible::after {
  transform: scaleX(1);
}

.fc-no {
  display: block;
}

.fc-name {
  display: block;
  margin: 0.42rem 0 0.38rem;
  color: var(--carbon);
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-stretch: condensed;
  font-weight: 730;
  line-height: 1.15;
  text-transform: uppercase;
}

.file-card:hover .fc-name {
  color: var(--schism-ink);
}

.fc-desc {
  display: block;
  color: var(--carbon-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Dossiers and reading surfaces */
.dossier p,
.dossier li,
.dossier .pull,
.schism-list li {
  max-width: 68ch;
}

.dossier p {
  margin-bottom: 1.1rem;
}

.dossier p b,
.dossier li b {
  color: var(--carbon);
  font-weight: 700;
}

.dossier p i {
  color: var(--influence-ink);
}

body.has-lineage .shell {
  display: grid;
  grid-template-columns: minmax(15rem, 0.34fr) minmax(0, 1fr);
  grid-template-areas: "head head" "lineage dossier";
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

body.has-lineage .dossier-head {
  grid-area: head;
}

body.has-lineage .lineage {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
  grid-area: lineage;
  grid-template-columns: 1fr;
  align-self: start;
}

body.has-lineage .dossier {
  grid-area: dossier;
  min-width: 0;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 2px solid var(--route);
}

.lineage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid var(--route);
  background: var(--route);
  font-size: 0.84rem;
}

.lineage > div {
  padding: 1rem 1.1rem;
  background: var(--atlas-sheet);
}

.lineage h3 {
  margin-bottom: 0.55rem;
  color: var(--influence-ink);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lineage.schism h3 {
  color: var(--schism-ink);
}

.lineage ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lineage li {
  margin: 0.3rem 0;
}

.lineage li::before {
  color: var(--route);
  content: "→ ";
}

.lineage li span {
  color: var(--carbon-soft);
}

.doctrine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.doctrine article {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--route);
  border-top: 4px solid var(--descent);
  background: var(--atlas-sheet);
}

.doctrine h3 {
  margin-bottom: 0.5rem;
  color: var(--carbon);
  font-family: var(--font-display);
  font-size: 1.13rem;
  font-weight: 720;
}

.doctrine p {
  max-width: none;
  margin: 0;
  color: var(--carbon-soft);
  font-size: 0.94rem;
}

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.portrait {
  position: relative;
  margin: 0;
}

.portrait .ph {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--route);
  background: var(--portrait-well);
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait .fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem;
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-align: center;
}

.portrait .fallback .star-glyph {
  color: var(--schism-ink);
  font-size: 2.5rem;
}

.portrait figcaption {
  margin-top: 0.55rem;
  color: var(--carbon);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
}

.portrait figcaption span {
  display: block;
  color: var(--carbon-soft);
  font-weight: 400;
}

.mini-timeline,
.timeline {
  position: relative;
  margin: 1.4rem 0;
  padding-left: 2rem;
  list-style: none;
}

.mini-timeline::before,
.timeline::before {
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0.44rem;
  width: 2px;
  background: var(--route);
  content: "";
}

.timeline::before {
  width: 3px;
  background: var(--descent);
}

.mini-timeline li,
.timeline li {
  position: relative;
  max-width: 68ch;
  margin: 1.15rem 0;
}

.mini-timeline li::before,
.timeline li::before {
  position: absolute;
  top: 0.4rem;
  left: -1.94rem;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--atlas-ground);
  border-radius: 50%;
  background: var(--schism);
  box-shadow: 0 0 0 1px var(--route);
  content: "";
}

.timeline li::before {
  border-color: var(--atlas-ground);
  background: var(--descent);
  box-shadow: 0 0 0 1px var(--descent);
}

.mini-timeline .yr,
.timeline .yr {
  color: var(--schism-ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.timeline .yr {
  color: var(--carbon);
  text-decoration: underline;
  text-decoration-color: var(--descent);
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.2em;
}

.epoch {
  margin: 3.5rem 0 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--route);
  color: var(--route);
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

body:has(.timeline) .epoch {
  border-bottom-color: var(--descent);
  color: var(--carbon);
}

.timeline .tl-title {
  margin: 0.15rem 0;
  color: var(--carbon);
  font-weight: 700;
}

.timeline p {
  margin: 0;
  color: var(--carbon-soft);
}

.timeline .tl-tag {
  margin-left: 0.5rem;
  color: var(--influence-ink);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.schism-list {
  margin: 1.15rem 0;
  padding: 0;
  list-style: none;
}

.schism-list li {
  margin-bottom: 0.75rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--route);
  border-left: 5px solid var(--schism);
  background: var(--atlas-sheet);
  color: var(--carbon-soft);
}

.schism-list b {
  color: var(--carbon);
}

.pull {
  margin: 1.8rem 0;
  padding: 1.1rem 1.25rem;
  border-left: 5px solid var(--descent);
  background: var(--atlas-sheet);
  color: var(--carbon);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  font-style: italic;
}

.pull cite {
  display: block;
  margin-top: 0.65rem;
  color: var(--influence-ink);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.file-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--route);
  font-family: var(--font-mono);
  font-size: 0.73rem;
}

/* Schism ledger */
.conflict {
  position: relative;
  margin: 1.6rem 0;
  overflow: hidden;
  border: 1px solid var(--route);
  background: var(--atlas-sheet);
}

.conflict::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: repeating-linear-gradient(
    to bottom,
    var(--schism) 0 1.35rem,
    transparent 1.35rem 1.9rem
  );
  content: "";
}

.shell > .conflict {
  overflow: visible;
  border-width: 1px 0;
  border-top-color: var(--route);
  border-bottom-color: var(--hairline);
  background: transparent;
}

.shell > .conflict::before {
  width: 6px;
}

.conflict-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 1.2rem 1.35rem 0.5rem 1.55rem;
}

.conflict-head .vs-side {
  color: var(--carbon);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 740;
  text-transform: uppercase;
}

.conflict-head .vs-side a {
  color: inherit;
  text-decoration-color: var(--schism);
}

.conflict-head .vs {
  color: var(--schism-ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.conflict-head .cf-year {
  margin-left: auto;
  color: var(--influence-ink);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.08em;
}

.conflict-body {
  padding: 0.5rem 1.35rem 1.3rem 1.55rem;
}

.conflict-body p {
  max-width: 76ch;
  color: var(--carbon-soft);
  font-size: 0.96rem;
}

.conflict-body .stakes {
  margin: 0.85rem 0 0;
  color: var(--schism-ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dossier > .conflict {
  border-color: var(--route);
}

.dossier > .conflict::before {
  background: linear-gradient(
    to bottom,
    var(--influence) 0 72%,
    var(--route) 72% 100%
  );
}

.dossier > .conflict .vs {
  color: var(--route);
}

.dossier > .conflict .cf-year {
  padding: 0.42rem 0.6rem 0.55rem;
  background: var(--influence);
  box-shadow: inset 0 -3px var(--route);
  color: var(--on-accent);
  font-weight: 700;
}

/* Quiz */
.quiz-shell {
  max-width: 54rem;
}

.terminal {
  margin-top: 2.5rem;
  border: 1px solid var(--route);
  scroll-margin-top: calc(var(--header-height) + 0.75rem);
  background: var(--atlas-sheet);
  box-shadow: 0 1rem 2.5rem rgba(var(--shadow-ink), 0.08);
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--route);
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.term-bar .dot {
  width: 0.58rem;
  height: 0.58rem;
  border: 1px solid var(--carbon-soft);
  border-radius: 50%;
  background: var(--atlas-ground);
}

.term-bar .dot.r {
  border-color: var(--schism);
  background: var(--schism);
}

.term-bar .dot.g {
  border-color: var(--influence);
  background: var(--influence);
}

.term-body {
  min-height: 23.75rem;
  padding: clamp(1.2rem, 4vw, 2rem);
}

.term-body.is-entering {
  animation: branch-draw 360ms cubic-bezier(.2,.7,.2,1) both;
}

@keyframes branch-draw {
  0% {
    opacity: 0;
    transform: translateX(-0.55rem);
  }

  72% {
    opacity: 1;
    transform: translateX(0.12rem);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.q-text {
  margin: 0.75rem 0 0.55rem;
  color: var(--carbon);
  font-family: var(--font-body);
  font-size: clamp(1.18rem, 2.2vw, 1.45rem);
  font-stretch: normal;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  text-wrap: pretty;
}

.q-text:focus-visible,
.q-verdict:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 6px;
}

.q-sub {
  margin-bottom: 0.9rem;
  color: var(--carbon-soft);
  font-size: 0.94rem;
}

/* Plain-terms gloss: what the jargon in the question means. */
.q-gloss {
  margin: 0 0 1.4rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--influence);
  background: var(--panel-2);
  color: var(--carbon);
  font-size: 0.9rem;
  line-height: 1.55;
}

.q-gloss b {
  color: var(--influence-ink);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.q-opts {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--descent);
}

.q-opt {
  position: relative;
  min-height: 2.75rem;
  margin: 0 0 0.8rem;
  padding: 0.85rem 1rem 0.85rem 2.7rem;
  border: 1px solid var(--route);
  background: var(--atlas-sheet);
  color: var(--carbon);
  cursor: pointer;
  font-size: 0.98rem;
  text-align: left;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.q-opt::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: -1.45rem;
  width: 0.78rem;
  height: 0.78rem;
  border: 2px solid var(--route);
  border-radius: 50%;
  background: var(--atlas-sheet);
  content: "";
  transform: translateY(-50%);
}

.q-opt::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -1rem;
  width: 2.35rem;
  border-top: 2px solid var(--descent);
  content: "";
  transform: translateY(-50%);
}

.q-opt:hover {
  border-color: var(--schism);
  background: var(--panel-2);
  transform: translateX(0.25rem);
}

.q-opt:focus-visible {
  border-color: var(--schism);
  background: var(--panel-2);
  transform: translateX(0.25rem);
}

.q-opt:hover::before,
.q-opt:focus-visible::before {
  border-color: var(--schism);
  background: var(--schism);
}

.q-opt:hover::after,
.q-opt:focus-visible::after {
  border-top-color: var(--schism);
}

.q-opt .k {
  margin-right: 0.55rem;
  color: var(--schism-ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.q-path {
  margin-top: 1.6rem;
  padding: 1rem 0 0;
  border-top: 1px dashed var(--route);
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  line-height: 1.6;
}

.q-path summary {
  color: var(--influence-ink);
  cursor: pointer;
  list-style: none;
}

.q-path summary::-webkit-details-marker {
  display: none;
}

.q-path summary::before {
  display: inline-block;
  width: 1rem;
  content: "▸";
  transition: transform 160ms ease;
}

.q-path[open] summary::before {
  transform: rotate(90deg);
}

.q-path ol {
  margin: 0.55rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--influence);
  list-style: none;
}

.q-path li {
  position: relative;
  margin: 0.35rem 0;
  padding-left: 1.15rem;
}

.q-path li::before {
  position: absolute;
  z-index: 0;
  top: 0.55rem;
  left: -1rem;
  width: 1.35rem;
  border-top: 2px solid var(--descent);
  content: "";
}

.q-path li::after {
  position: absolute;
  z-index: 1;
  top: 0.32rem;
  left: -1.15rem;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--schism);
  border-radius: 50%;
  background: var(--atlas-sheet);
  content: "";
}

.q-path .branch {
  color: var(--schism-ink);
}

.q-result .verdict {
  margin: 0.75rem 0 1rem;
  color: var(--schism-ink);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 3rem);
  font-stretch: condensed;
  font-weight: 760;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}

.q-result .r-desc {
  margin-bottom: 1.25rem;
  color: var(--carbon);
}

.q-result .r-claim {
  padding-left: 0.9rem;
  border-left: 3px solid var(--descent);
  color: var(--carbon-soft);
}

.q-result .r-meta {
  margin: 0.9rem 0;
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.73rem;
}

.q-result .r-meta b {
  color: var(--route);
}

.q-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

/* The verdict stamp above the result name: pass, adjacent, or fail. */
.q-verdict {
  display: inline-block;
  margin: 0.4rem 0 0.2rem;
  padding: 0.34rem 0.65rem;
  border: 1px solid currentColor;
  color: var(--route);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.q-verdict.v-pass {
  color: var(--influence-ink);
}

.q-verdict.v-adj {
  color: var(--descent-ink);
}

.q-verdict.v-fail {
  color: var(--schism-ink);
  box-shadow: inset 0 0 0 1px currentColor;
}

/* The four-test scoreboard, shown between phases and on the result. */
.q-tests {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.55rem;
  margin: 1.1rem 0 1.3rem;
  padding: 0;
  list-style: none;
}

.q-tests li {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--route);
  border-left-width: 4px;
  background: var(--atlas-sheet);
  color: var(--carbon);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.q-tests li.pass {
  border-left-color: var(--influence);
}

.q-tests li.fail {
  border-left-color: var(--schism);
  color: var(--schism-ink);
}

.q-tests li.open {
  border-left-color: var(--descent);
  color: var(--descent-ink);
}

.q-tests li.unevidenced {
  border-left-color: var(--hairline);
  color: var(--carbon-soft);
}

.q-result .q-tests {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.q-tests li .line {
  color: var(--carbon);
}

.q-tests li span {
  display: block;
  margin-top: 0.3rem;
  color: var(--carbon-soft);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Calls to action and media */
.annex-grid,
.home-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 4rem;
}

.annex-grid .cta-band,
.home-actions .cta-band {
  height: 100%;
  margin-top: 0;
}

.annex-grid .cta-band:last-child {
  grid-column: 1 / -1;
}

.home-actions {
  margin-top: 1rem;
}

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-top: 4rem;
  padding: clamp(1.35rem, 4vw, 2.25rem);
  border: 1px solid var(--route);
  border-left: 6px solid var(--schism);
  background: var(--atlas-sheet);
}

.cta-band > div {
  flex: 1 1 28rem;
}

.cta-band h2 {
  margin: 0.25rem 0 0.6rem;
}

.cta-band p {
  max-width: 68ch;
  margin-bottom: 0;
  color: var(--carbon-soft);
}

.cta-band .btn {
  margin-left: auto;
}

.clip,
.plate {
  position: relative;
  max-width: 68ch;
  margin: 1.6rem 0;
  border: 1px solid var(--route);
  background: var(--atlas-sheet);
}

.clip video,
.plate img {
  display: block;
  width: 100%;
  height: auto;
}

.clip figcaption,
.plate figcaption {
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--route);
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  line-height: 1.55;
  text-transform: uppercase;
}

.plate figcaption {
  border-top-color: var(--descent);
  box-shadow: inset 4px 0 var(--descent);
}

.clip figcaption {
  border-top-color: var(--route);
  box-shadow: inset 4px 0 var(--influence);
}

.portrait figcaption {
  margin-top: 0;
  padding: 0.65rem 0.75rem;
  border-top: 3px solid var(--influence);
  background: var(--atlas-sheet);
  box-shadow: inset 4px 0 var(--route);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.2rem;
  margin: 1.6rem 0;
}

.gallery-grid .plate,
.gallery-grid .clip {
  max-width: none;
  margin: 0;
}

body:has(h1[data-text="THE PLATE ROOM"]) .gallery-grid:first-of-type {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

body:has(h1[data-text="THE PLATE ROOM"]) .gallery-grid:first-of-type .plate {
  grid-column: span 4;
}

body:has(h1[data-text="THE PLATE ROOM"]) .gallery-grid:first-of-type .plate:first-child {
  grid-column: span 8;
}

body.page-reference .dossier > .sec .n {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--route);
  border-radius: 50%;
  background: var(--atlas-sheet);
  color: var(--route);
}

.logo-fx {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.logo-fx img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer {
  margin-top: 4rem;
  padding: 2.25rem clamp(1rem, 4vw, 3rem) 3.5rem;
  border-top: 2px solid var(--route);
  background: var(--atlas-sheet);
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  line-height: 1.9;
}

.footer-grid {
  display: grid;
  width: min(100%, 76rem);
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(9rem, 1fr));
  gap: 2rem clamp(1.5rem, 5vw, 4.5rem);
  margin-inline: auto;
  text-align: left;
}

.footer h2 {
  margin-bottom: 0.75rem;
  color: var(--carbon);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer p {
  margin-bottom: 0.85rem;
}

.footer ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer a {
  color: var(--route);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  body.has-lineage .shell {
    display: block;
  }

  body.has-lineage .dossier {
    padding-left: 0;
    border-left: 0;
  }

  body.has-lineage .lineage {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    font-size: 1rem;
  }

  .shell {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .nav {
    min-height: 3.5rem;
    padding: 0.55rem 1rem;
  }

  .nav-brand {
    min-width: 0;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .theme-toggle {
    margin-left: auto;
    padding: 0.35rem;
  }

  .theme-toggle-label {
    display: none;
  }

  #nav-panel.nav-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    max-height: 0;
    padding: 0 1rem;
    overflow: hidden;
    border-bottom: 2px solid var(--route);
    background: var(--atlas-sheet);
    box-shadow: 0 0.8rem 1.4rem rgba(var(--shadow-ink), 0.14);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: max-height 220ms ease, padding 220ms ease, opacity 160ms ease,
      visibility 0s linear 220ms;
  }

  #nav-panel.nav-panel.is-open {
    display: grid;
    max-height: calc(100svh - 3.5rem);
    padding: 1rem;
    overflow-y: auto;
    gap: 0.9rem;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  .nav-primary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .nav-primary a,
  .nav-annexes summary,
  .nav-annexes-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45rem 0.55rem;
  }

  .nav-annexes {
    border-top: 1px solid var(--hairline);
  }

  .nav-annexes summary {
    justify-content: space-between;
  }

  .nav-annexes-links {
    position: static;
    display: grid;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .file-grid,
  .file-era-cards,
  .lineage,
  .doctrine,
  .figures,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  body:has(h1[data-text="THE PLATE ROOM"]) .gallery-grid:first-of-type {
    grid-template-columns: 1fr;
  }

  body:has(h1[data-text="THE PLATE ROOM"]) .gallery-grid:first-of-type .plate,
  body:has(h1[data-text="THE PLATE ROOM"]) .gallery-grid:first-of-type .plate:first-child {
    grid-column: auto;
  }

  .conflict-head .cf-year {
    width: 100%;
    margin-left: 0;
  }

  .file-nav {
    flex-direction: column;
  }

  .cta-band {
    align-items: flex-start;
  }

  .cta-band .btn {
    margin-left: 0;
  }

  .hero-grid,
  .annex-grid,
  .home-actions {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 2.5rem;
  }

  .tree-pan-hint {
    display: block;
    margin: 1rem 0 -0.75rem;
    color: var(--route);
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .tree-wrap {
    overscroll-behavior-inline: contain;
    scroll-padding-inline-start: 0;
    scroll-snap-type: x proximity;
    box-shadow: inset -1.5rem 0 1.6rem -1.45rem rgba(var(--shadow-ink), 0.42),
      0 0.7rem 1.8rem rgba(var(--shadow-ink), 0.06);
  }

  #tree-canvas {
    width: max-content;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .tree-wrap svg {
    width: 87.5rem;
    max-width: none;
  }

  .tree-legend {
    position: sticky;
    z-index: 2;
    left: 0;
    width: 100%;
    background: var(--atlas-sheet);
  }

  .annex-grid .cta-band:last-child {
    grid-column: auto;
  }

  .fc-desc,
  .doctrine p,
  .conflict-body p,
  .q-sub,
  .q-opt,
  .q-result .r-desc {
    font-size: 1rem;
  }

  .q-gloss {
    font-size: 1rem;
  }

  /* the mono metadata drops under 11px on phones otherwise */
  .q-verdict {
    font-size: 0.78rem;
  }

  .q-tests li,
  .q-path,
  .q-result .r-meta {
    font-size: 0.74rem;
  }

  button,
  input,
  select,
  textarea,
  .btn,
  .q-opt,
  .file-card,
  .file-nav a,
  .nav-brand {
    min-height: 44px;
  }

  .file-nav a,
  .nav-brand > span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }

  .motion-ready [data-reveal],
  .motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
    animation: none;
  }

  .head-armed .eyebrow,
  .head-armed .file-no,
  .head-armed h1,
  .head-armed .tagline,
  .head-armed .subtitle,
  .head-armed .hero-meta,
  .head-armed .stamp-row,
  .head-armed .hero-route-panel,
  .head-armed .stamp,
  .hero::after,
  .dossier-head::after {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .motion-ready .sec::after,
  .motion-ready .timeline > li::before,
  .motion-ready .conflict .vs {
    opacity: 1;
    transform: none;
  }

  .motion-ready .pull {
    background-size: 5px 100%;
  }

  .motion-ready .epoch {
    background-size: 100% 1px;
  }

  /* an opacity-only cue so the swapped question is still noticeable */
  .term-body.is-entering {
    animation: term-fade 180ms linear both !important;
    animation-duration: 180ms !important;
  }
}

@keyframes term-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Org emblems ─────────────────────────────────────────────────────────────
   Party and union marks filed beside their register entries. Logos arrive as a
   mix of transparent SVG and flat PNG, some drawn for light grounds and some for
   dark, so every mark sits on its own fixed pale chip rather than on the page
   surface. The chip does not follow the theme: it is the archival mount, and it
   keeps a dark-inked mark legible in Night without inverting anyone's colours. */
.emblem-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.6rem 0;
  padding: 0;
  list-style: none;
}

.emblem {
  display: flex;
  flex-direction: column;
  width: 11.5rem;
  margin: 0;
  border: 1px solid var(--route);
  background: var(--atlas-sheet);
  transition: border-color 220ms ease, transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease;
}

.emblem-mount {
  /* Flex, not grid: a percentage max-height on a grid item resolves against the
     auto-sized row track rather than this box's fixed height, so tall portrait
     marks (DSA, IWW) escape the mount. As a flex item the cap resolves here. */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 7.5rem;
  padding: 0.9rem;
  /* Fixed mount, deliberately not themed — see note above. */
  background: #f4ede8;
  border-bottom: 1px solid var(--route);
}

.emblem-mount img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.emblem figcaption {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.6rem 0.7rem;
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
  box-shadow: inset 4px 0 var(--descent);
}

.emblem .em-name {
  color: var(--carbon);
  font-weight: 700;
}

.emblem .em-verdict {
  margin-top: auto;
  color: var(--schism-ink);
}

.emblem .em-verdict.pass {
  color: var(--influence-ink);
}

@media (hover: hover) {
  .emblem:hover {
    border-color: var(--descent);
    box-shadow: 0 0.9rem 1.8rem rgba(var(--shadow-ink), 0.16);
    transform: translateY(-0.2rem);
  }
}

/* Small mark set into an entry header, beside the party name. */
.emblem-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.1rem;
  height: 2.1rem;
  margin-right: 0.55rem;
  padding: 0.22rem;
  border: 1px solid var(--route);
  background: #f4ede8;
  vertical-align: middle;
}

.emblem-inline img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 34rem) {
  .emblem { width: calc(50% - 0.5rem); }
  .emblem-mount { height: 6rem; }
}

/* Attribution list for vendored CC-licensed plates. Licence terms require the
   credit to travel with the file, so it is page furniture, not a footnote. */
.credit-list {
  margin: 0.4rem 0 1.2rem;
  padding-left: 1.1rem;
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  line-height: 1.9;
}

.credit-list .lic {
  color: var(--descent-ink);
  text-transform: uppercase;
}

/* Provenance line under a dossier's plate grid. */
.plate-note {
  margin-top: 0.9rem;
  color: var(--carbon-soft);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}