/* ==========================================================================
   What Malaysia Banned — scrollytelling styles
   Warm paper, ink, and the INITIATE.MY brand navy (#022c5f) carrying
   accents, icons, rules, and the progress rail.
   ========================================================================== */

:root {
  --paper: #faf6f0;
  --paper-deep: #f1eae0;
  --ink: #221e1c;
  --ink-soft: #4f4843;
  --brand: #022c5f;         /* the logo navy — fixed in both themes */
  --accent: #022c5f;        /* main accent = brand navy */
  --accent-bright: #2e64ad; /* the charts' navy slot */
  --rule: #d9cfc2;
  --card: #ffffff;
  --td-rule: #f0e9df;
  --muted: #79706a;
  --blank: #b8afa4;
  --band: #f0efe9;          /* tonal section wash */
  --band-deep: #e7eaf1;     /* navy-tinted band for the cross-currents act */
  --topbar-bg: rgba(250, 246, 240, 0.92);
  --hero-scrim: rgba(250, 246, 240, 0.88);      /* wash behind the hero copy */
  --hero-scrim-edge: rgba(250, 246, 240, 0.50); /* … thinning towards the frame */
  --closing-soft: #cfc6bc;
  --closing-muted: #8d8378;
  --closing-accent: #7ea6dd; /* lifted navy for the dark closing panel */
  /* cluster keys — mirror the chart theme slots in charts.js so a cluster
     keeps its colour everywhere in the story, HTML and canvas alike */
  --cl-subversive: #2e64ad;
  --cl-obscene: #c0392b;
  --cl-general: #b3892b;
  --cl-religious: #6f5bb5;
  --cl-3r: #3d8a52;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fade: 850ms;
  --topbar: 3.4rem;
  --stage-pad: clamp(1rem, 2.4vw, 2.5rem);
  color-scheme: light;
}

/* Dark theme — selected values, not an automatic inversion. The closing scene
   stays the "inverted panel" in both modes, so its tokens swap the other way. */
:root[data-theme="dark"] {
  --paper: #171310;
  --paper-deep: #100d0b;
  --ink: #ece4da;
  --ink-soft: #c3b9ae;
  --accent: #7ea6dd;        /* lifted brand navy for dark surfaces */
  --accent-bright: #5b8ad0;
  --rule: #383028;
  --card: #221d19;
  --td-rule: #2c2621;
  --muted: #9a9088;
  --blank: #6b625a;
  --band: #1b1712;
  --band-deep: #151923;
  --topbar-bg: rgba(23, 19, 16, 0.9);
  --hero-scrim: rgba(23, 19, 16, 0.88);
  --hero-scrim-edge: rgba(23, 19, 16, 0.52);
  --closing-soft: #4a443e;
  --closing-muted: #6e675f;
  --closing-accent: #1d4f96; /* deep navy on the light closing panel */
  --cl-subversive: #5b8ad0;
  --cl-obscene: #cf5f64;
  --cl-general: #b08d24;
  --cl-religious: #8a77cb;
  --cl-3r: #4a9a63;
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* theme toggles ease rather than snap */
body,
.topbar,
.chart-card,
.callout-card,
.contact-card,
.table-wrap,
.mini-stat {
  transition: background-color 450ms ease, color 450ms ease, border-color 450ms ease;
}

img { display: block; max-width: 100%; height: auto; }
em { font-style: italic; }
[hidden] { display: none !important; }

a { color: var(--accent); }

/* faint paper grain over everything — texture, not noise */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* ---------- entrance reveals (motion.js adds .is-in) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.6, 0.25, 1),
    transform 0.75s cubic-bezier(0.22, 0.6, 0.25, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.reveal.card { transform: translateY(28px) scale(0.977); }

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- progress bar ---------- */

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 60;
}

#progress-bar {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- top bar & tabs ---------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  z-index: 50;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

/* The wordmark is white-on-transparent, so it always sits on a brand-navy chip. */
.brand-logo {
  display: flex;
  align-items: center;
  background: var(--brand);
  border-radius: 6px;
  padding: 0.32rem 0.55rem;
}

.brand-logo img {
  height: 1.05rem;
  width: auto;
  display: block;
}

.hero-logo {
  display: inline-flex;
  background: var(--brand);
  border-radius: 10px;
  padding: 0.6rem 1.05rem;
  margin-bottom: 1.7rem;
}

.hero-logo img {
  height: 1.9rem;
  width: auto;
  display: block;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.1rem);
  min-width: 0;
}

.tabs {
  display: flex;
  gap: clamp(0.4rem, 2vw, 1.4rem);
  min-width: 0;
}

.theme-toggle {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tabs a {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.45rem 0.55rem 0.35rem;
  border-bottom: 2px solid transparent;
  flex: none;
  white-space: nowrap;
}

.tabs a:hover { color: var(--accent); }

.tabs a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tabs a:focus-visible,
.tab-btn:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- the Codebook tab: one tab over three document pages ---------- */

.tab-menu { position: relative; display: flex; }

/* a button, but it has to sit in the row as though it were a tab */
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.45rem 0.55rem 0.35rem;
  cursor: pointer;
  white-space: nowrap;
}

.tab-btn:hover { color: var(--accent); }

.tab-btn[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-caret {
  font-size: 0.7em;
  line-height: 1;
  transition: transform 180ms ease;
}

.tab-btn[aria-expanded="true"] .tab-caret { transform: rotate(180deg); }

.tab-drop {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 12.5rem;
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 9px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  z-index: 60;
}

/* the menu items are links inside .tabs, so the tab typography is undone here */
.tabs .tab-drop a {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-soft);
  padding: 0.5rem 0.6rem;
  border-bottom: none;
  border-radius: 5px;
  white-space: nowrap;
}

.tabs .tab-drop a:hover,
.tabs .tab-drop a[aria-current="page"] {
  background: var(--band);
  color: var(--accent);
}

/* ---------- dot navigation + progress rail ---------- */

.dots {
  position: fixed;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  z-index: 30;
}

.rail-track {
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: calc(0.55rem - 1px);
  width: 2px;
  background: var(--rule);
  border-radius: 1px;
  overflow: hidden;
}

#rail-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  will-change: transform;
}

.dots a {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
}

/* Section titles ride each dot (from its aria-label). Hovering anywhere on
   the rail fans them all out like a mini table of contents; the hovered,
   focused, and active ones read at full strength. */
.dots a::before {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 0.55rem);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  box-shadow: 0 3px 12px rgba(34, 30, 28, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.dots:hover a::before,
.dots:focus-within a::before {
  opacity: 0.88;
  transform: translateY(-50%);
}

.dots a:hover::before,
.dots a:focus-visible::before,
.dots:hover a.is-active::before,
.dots:focus-within a.is-active::before {
  opacity: 1;
  color: var(--accent);
}

.dots a span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink-soft);
  transition: background-color 250ms ease, transform 250ms ease, border-color 250ms ease;
}

.dots a:hover span,
.dots a:focus-visible span {
  border-color: var(--accent);
  transform: scale(1.3);
}

.dots a.is-active span {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.3);
}

.dots a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* story-only chrome: the rail and the reading progress bar belong to the
   scrollytelling view, so every other tab hides them */
body:not([data-view="story"]) .dots,
body:not([data-view="story"]) .progress { display: none; }

/* ---------- shared editorial type ---------- */

.kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

.kicker i {
  margin-right: 0.5rem;
  font-size: 0.85em;
}

/* ---------- hero & closing (full-viewport scenes) ---------- */

.fullscene {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--topbar) + 2rem) clamp(2rem, 6vw, 5rem) clamp(2rem, 6vw, 5rem);
  text-align: center;
}

.hero-inner { max-width: 50rem; }

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.7rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.7rem;
}

.closing h2 {
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 1.6rem;
}

.standfirst {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 42rem;
}

/* Beat 1 only: the banned-covers collage, held back by a paper/ink scrim so the
   headline keeps its contrast, then faded into --paper at the fold. */
.hero {
  background-image:
    linear-gradient(180deg, transparent 74%, var(--paper) 100%),
    radial-gradient(80% 58% at 50% 42%, var(--hero-scrim) 0%, var(--hero-scrim) 32%, var(--hero-scrim-edge) 100%),
    url("asset/img/hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero .kicker::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--accent);
  margin: 1.2rem auto 0;
}

.scroll-cue {
  margin-top: 3.4rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cue-ring {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0.9rem auto 0;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  color: var(--accent);
  animation: nudge 2.4s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(7px); opacity: 1; }
}

.closing {
  /* ease from the paper into the inverted panel instead of a hard cut */
  background: linear-gradient(180deg, var(--paper) 0%, var(--ink) clamp(7rem, 16vh, 12rem));
  color: var(--paper);
}

.closing .standfirst { color: var(--closing-soft); }
.closing .kicker { color: var(--closing-accent); }
.closing a { color: var(--closing-accent); }

.colophon {
  margin-top: 3rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--closing-muted);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   The chapter system — each scene gets one deliberate layout
   ========================================================================== */

.chapter { position: relative; }

/* anchor/dot jumps and the auto-snap agree on where a beat starts */
.chapter.full,
.fullscene {
  scroll-margin-top: var(--topbar);
}

/* Tonal bands ease in and out of the paper instead of cutting hard. */
.tone-wash {
  background: linear-gradient(180deg,
    transparent 0%, var(--band) clamp(6rem, 14vh, 10rem),
    var(--band) calc(100% - clamp(6rem, 14vh, 10rem)), transparent 100%);
}

.tone-deep {
  background: linear-gradient(180deg,
    var(--paper) 0%, var(--band-deep) clamp(8rem, 18vh, 13rem),
    var(--band-deep) calc(100% - clamp(8rem, 18vh, 13rem)), var(--paper) 100%);
}

/* --- pinned chapters: sticky stage + scrolling flow --- */

.chapter.pinned {
  display: flex;
  align-items: flex-start;
}

.chapter.pinned .stage {
  position: sticky;
  top: var(--topbar);
  height: calc(100vh - var(--topbar));
  height: calc(100dvh - var(--topbar));
}

/* visual right, text left — no dividing rule; the composition does the separating */
.pin-right .stage { order: 2; flex: 1 1 58%; }
.pin-right .flow  { order: 1; flex: 0 0 42%; max-width: 42%; }

/* visual left, text right */
.pin-left .stage { order: 1; flex: 1 1 55%; }
.pin-left .flow  { order: 2; flex: 0 0 45%; max-width: 45%; }

.stage-inner {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.viz {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: var(--stage-pad);
  opacity: 0;
  transform: translateY(12px) scale(0.988);
  transition:
    opacity var(--fade) cubic-bezier(0.33, 0, 0.2, 1),
    transform var(--fade) cubic-bezier(0.33, 0, 0.2, 1);
  will-change: opacity;
  pointer-events: none;
}

.viz.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.viz figcaption,
.wide-fig figcaption,
.duo-row figcaption {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
  max-width: 40rem;
}

.viz figcaption i,
.wide-fig figcaption i {
  color: var(--accent);
  margin-right: 0.35rem;
  font-size: 0.9em;
}

/* a held chart is never perfectly frozen */
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.chapter.pinned .viz .chart-card {
  animation: drift 16s ease-in-out infinite;
}

.scene {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
}

.scene-text { max-width: 34rem; }

.scene h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 1.15rem;
}

.scene p:not(.kicker):not(.mini-stat) { color: var(--ink-soft); }

/* --- full-width centered chapters --- */

.chapter.full {
  padding: clamp(5rem, 12vh, 8rem) clamp(1.2rem, 4vw, 3rem);
}

.full-head,
.full-foot {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.full-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 1.15rem;
}

.full-head p:not(.kicker),
.full-foot p:not(.kicker) { color: var(--ink-soft); }

.wide-fig {
  max-width: 72rem;
  margin: 2.6rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.wide-fig .chart-card { width: 100%; }

.full-foot { margin-top: 2.6rem; }

/* --- two-up --- */

.duo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  align-items: start;
  max-width: 80rem;
  margin: 2.6rem auto 0;
}

.duo-row figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  /* let the grid track shrink below the rendered SVG's fixed width,
     so the chart re-renders at the new size instead of overflowing */
  min-width: 0;
}

.duo-row .chart-card { width: 100%; }

/* --- callout band --- */

.chapter.callout {
  padding: clamp(5rem, 12vh, 8rem) clamp(1.2rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
}

.callout-card {
  max-width: 56rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  box-shadow: 0 14px 44px rgba(34, 30, 28, 0.09);
}

.callout-card h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin-bottom: 1rem;
}

.callout-card > p:not(.kicker) {
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
}

.callout-card .chart-card {
  box-shadow: none;
  border-color: var(--td-rule);
}

/* --- pull-quotes: numbers as graphic moments --- */

.pull-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 34rem;
  margin: 3.2rem auto 0;
}

.pq-rule {
  width: 3.2rem;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-bottom: 1.1rem;
}

.pq-number {
  font-family: var(--serif);
  font-size: clamp(3.2rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: proportional-nums;
}

.pq-label {
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.pull-quote.small {
  align-items: flex-start;
  text-align: left;
  margin: 2.2rem 0 0;
}

.pull-quote.small .pq-number { font-size: clamp(2.4rem, 4.5vw, 3.4rem); }

.mini-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  background: var(--card);
}

.mini-stat i { color: var(--accent); }

.mini-stat strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- chart cards ---------- */

.chart-card {
  width: min(100%, 56rem);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.1rem 1.3rem 1rem;
  box-shadow: 0 10px 32px rgba(34, 30, 28, 0.07);
}

.chart-card h3 {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 0.7rem;
}

.chart-card.duo {
  display: flex;
  gap: 1.4rem;
}

.chart-card.duo .chart-panel { flex: 1 1 50%; min-width: 0; }

.chart {
  position: relative;
  width: 100%;
  height: min(var(--ch, 300px), var(--maxch, 9999px));
}

.ch-xs { --ch: clamp(150px, 24vh, 200px); }
.ch-sm { --ch: clamp(180px, 30vh, 260px); }
.ch-md { --ch: clamp(210px, 38vh, 340px); }
.ch-lg { --ch: clamp(230px, 48vh, 440px); }

.chart svg {
  display: block;
  max-width: 100%;
  font-family: var(--sans);
  user-select: none;
}

.chart .num { font-variant-numeric: tabular-nums; }

.chart .hit { cursor: pointer; }
.chart .hit:hover { filter: brightness(1.12); }
.chart .hit:focus-visible {
  outline: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

/* legend */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-bottom: 0.55rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  cursor: default;
}

.legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
}

/* tooltip */
.chart-tip {
  position: fixed;
  top: 0; left: 0;
  z-index: 80;
  max-width: 280px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.45;
  padding: 0.5rem 0.7rem;
  border-radius: 7px;
  border: 1px solid var(--rule);
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
  box-shadow: 0 6px 20px rgba(34, 30, 28, 0.25);
}

.chart-tip strong { font-weight: 700; font-variant-numeric: tabular-nums; }

.chart-tip .tip-key {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 0.4rem;
}

/* researcher-notes composite */
.note-flags {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  height: auto !important;
  padding: 0.4rem 0 0.2rem;
}

.stat-tile { flex: 0 0 auto; max-width: 15rem; }

.stat-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.2rem;
}

.stat-value {
  font-family: var(--sans);
  font-size: clamp(2.6rem, 4.5vw, 3.4rem);
  font-weight: 650;
  line-height: 1.05;
  color: var(--ink);
}

.stat-sub {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

.note-bars {
  flex: 1 1 auto;
  min-width: 200px;
  height: 132px;
  position: relative;
}

/* ---------- data & contact pages ---------- */

.page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--topbar) + 2.6rem) clamp(1rem, 4vw, 2.5rem) 4rem;
}

.page-inner { max-width: 76rem; margin: 0 auto; }
.page-inner.narrow { max-width: 44rem; }

.page h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}

.lede {
  color: var(--ink-soft);
  max-width: 46rem;
  margin-bottom: 1.6rem;
}

/* table controls */
.table-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  font-family: var(--sans);
}

.table-controls input[type="search"],
.table-controls select {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
}

.table-controls input[type="search"] {
  flex: 1 1 240px;
  min-width: 200px;
}

.table-controls input:focus-visible,
.table-controls select:focus-visible,
.pager button:focus-visible,
.table-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.table-count {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* export what the table is currently showing */
.table-download {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table-download i { color: var(--accent); font-size: 0.85rem; }

.table-download:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.table-download:disabled { opacity: 0.4; cursor: default; }

.table-download:disabled i { color: var(--muted); }

.table-download:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* the table */
.table-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

#data-table {
  width: 100%;
  min-width: 1160px; /* 1080 for the data columns + the pinned action column */
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.81rem;
  line-height: 1.45;
}

#data-table th {
  position: sticky;
  top: 0;
  background: var(--paper);
  border-bottom: 2px solid var(--rule);
  text-align: left;
  white-space: nowrap;
}

#data-table th button {
  font: inherit;
  font-weight: 650;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.6rem 0.75rem;
  width: 100%;
  text-align: left;
}

#data-table th button:hover { color: var(--accent); }
#data-table th button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.sort-arrow {
  font-size: 0.55rem;
  color: var(--accent);
  margin-left: 0.3rem;
  vertical-align: 1px;
}

#data-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--td-rule);
  vertical-align: top;
  color: var(--ink-soft);
}

#data-table td:first-child { color: var(--ink); font-weight: 500; }
#data-table td.num { font-variant-numeric: tabular-nums; }
#data-table td.blank { color: var(--blank); }
#data-table tbody tr:hover { background: var(--paper); }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1.1rem;
}

.pager button {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
}

.pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pager button:disabled { opacity: 0.4; cursor: default; }

.pager .table-count { margin-left: 0; }

/* contact */
.contact-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.7rem 1.8rem;
  margin: 1.8rem 0;
  box-shadow: 0 10px 32px rgba(34, 30, 28, 0.06);
}

.contact-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.contact-email {
  font-family: var(--sans);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 650;
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.contact-email:hover { text-decoration: underline; }

.contact-hint {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.8rem;
}

.contact-label i { margin-right: 0.4rem; color: var(--accent); }

.contact-heading {
  font-size: 1.15rem;
  margin: 2.6rem 0 0.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

.contact-intro {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

/* the three contribution routes, numbered */
.contribute-list {
  list-style: none;
  display: grid;
  gap: 1.4rem;
  margin: 1.2rem 0 0;
  padding: 0;
}

.contribute-list > li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0 0.9rem;
}

.contribute-num {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.4;
}

.contribute-list h4 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 650;
  margin-bottom: 0.3rem;
}

.contribute-list p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.contribute-note {
  font-family: var(--sans);
  font-size: 0.82rem !important;
  color: var(--muted) !important;
  border-left: 2px solid var(--rule);
  padding-left: 0.8rem;
  margin-top: 0.6rem;
}

/* what each control in the data table does */
.tool-list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}

.tool-list li {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.tool-list i {
  color: var(--accent);
  font-size: 0.85rem;
  padding-top: 0.28rem;
}

.tool-list strong { color: var(--ink); font-weight: 650; }

/* ---------- responsive: every variant collapses to one column ---------- */

@media (max-width: 900px) {
  .dots { display: none; }

  .brand { font-size: 0.92rem; }

  .chapter.pinned { flex-direction: column; }

  .chapter.pinned .stage {
    order: 1 !important;
    position: sticky;
    top: var(--topbar);
    width: 100%;
    max-width: 100%;
    flex: none;
    height: calc(56vh - var(--topbar));
    height: calc(56dvh - var(--topbar));
    border: none !important;
    /* soft falling shadow instead of a hard rule under the pinned stage */
    box-shadow: 0 18px 24px -18px rgba(0, 0, 0, 0.3);
    z-index: 10;
    background: var(--paper);
    --stage-pad: 0.7rem;
  }

  .tone-deep .stage, .tone-wash .stage { background: transparent; }
  .chapter.pinned.tone-deep .stage { background: var(--band-deep); }

  .viz { gap: 0.45rem; }
  .viz figcaption { font-size: 0.68rem; }

  .chart-card {
    padding: 0.7rem 0.8rem 0.6rem;
  }

  .chapter.pinned .chart-card {
    --maxch: calc(56vh - var(--topbar) - 7.5rem);
  }

  .chart-card h3 { font-size: 0.8rem; margin-bottom: 0.4rem; }

  .chart-card.duo { gap: 0.7rem; }

  .chart-legend { font-size: 0.66rem; gap: 0.2rem 0.6rem; margin-bottom: 0.35rem; }

  .note-flags { gap: 1.1rem; flex-wrap: wrap; }
  .stat-value { font-size: 1.9rem; }
  .note-bars { height: 100px; }

  .chapter.pinned .flow {
    order: 2 !important;
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .scene {
    min-height: 52vh;
    min-height: 52dvh;
    padding: 2.5rem 1.4rem;
  }

  .duo-row { grid-template-columns: 1fr; }

  .callout-card { border-left-width: 3px; }
}

/* four tabs need tighter tracking than three did, or Contact runs off the edge */
@media (max-width: 700px) {
  .tabs { gap: 0.25rem; }

  .tabs a,
  .tab-btn {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    padding: 0.45rem 0.3rem 0.35rem;
  }

  /* the menu items keep their own scale — only the tab row is tightened */
  .tabs .tab-drop a { font-size: 0.76rem; letter-spacing: 0.01em; padding: 0.5rem 0.6rem; }
}

@media (max-width: 540px) {
  .brand-name { display: none; }
}

@media (max-width: 400px) {
  .tabs a,
  .tab-btn { font-size: 0.68rem; letter-spacing: 0.02em; }

  .tabs .tab-drop a { font-size: 0.76rem; letter-spacing: 0.01em; }
}

/* ---------- reduced motion: instant reveals, plain crossfades ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .viz { transition: none; transform: none; }
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .chapter.pinned .viz .chart-card { animation: none; }
  .cue-ring { animation: none; }
  .dots a span { transition: none; }
  .dots a::before { transition: none; }
  .chart-tip { transition: none; }
}

/* ==========================================================================
   Act I–III components: law duel, lineage timeline, grounds chips, book rain,
   pictograph, origin map, podiums, revocations, reform cards
   ========================================================================== */

/* --- the law vs the constitution --- */

.law-fig { max-width: 62rem; }

.law-duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  width: 100%;
}

.law-side {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
  border-radius: 12px;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
  text-align: left;
  box-shadow: 0 10px 32px rgba(34, 30, 28, 0.07);
}

.law-side-kicker {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.law-side h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.25;
  margin-bottom: 0.55rem;
}

.law-side p:not(.law-side-kicker) {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.law-axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.law-axis-line {
  flex: 1 1 auto;
  width: 2px;
  min-height: 1.4rem;
  background: var(--rule);
  border-radius: 1px;
}

.law-axis-label {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  writing-mode: vertical-rl;
}

/* --- lineage timeline (1948 → 1958 → 1984) --- */

.lineage {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  padding: 0.4rem 0 0.6rem;
}

.lineage-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
}

.lineage-item.is-current {
  border-color: var(--accent);
  border-width: 1.5px;
  background: var(--card);
}

.lineage-year {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.lineage-name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}

.lineage-note {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--muted);
}

.lineage-arrow {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 0.95rem;
  flex: 0 0 auto;
}

/* --- the seven grounds --- */

.grounds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.4rem 0 0.5rem;
}

.ground-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
}

.ground-chip i { color: var(--accent); font-size: 0.85em; }

/* The mind map places its leaf chips in the same pixel space as the branches
   charts.js draws behind them, so every coordinate comes from JS — the only
   job here is to take the chips out of flow and anchor them on their leaf
   point rather than their top-left corner. */
.mindmap svg { position: absolute; inset: 0; }

.mindmap .ground-chip {
  position: absolute;
  white-space: nowrap;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px rgba(34, 30, 28, 0.07);
}

/* leaves on the left flank grow away from the hub */
.mindmap .ground-chip.is-left { transform: translate(-100%, -50%); }

.mindmap.is-narrow .ground-chip {
  font-size: 0.72rem;
  padding: 0.28rem 0.62rem;
}

.grounds-mini { margin-top: 1.2rem; }

.grounds-mini .ground-chip {
  font-size: 0.72rem;
  padding: 0.3rem 0.65rem;
  font-variant-numeric: tabular-nums;
}

.grounds-mini .ground-chip.is-hot {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- open-data goal list --- */

.goal-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1.4rem;
  margin-bottom: 1.6rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.goal-list li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.goal-list i { color: var(--accent); flex: none; font-size: 0.85em; }

/* --- book rain --- */

.rain-card { width: min(100%, 62rem); }

.rain-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.7rem;
}

.rain-views,
.rain-proj,
.rain-3d-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.rain-views button,
.rain-3d-bar button {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.38rem 0.8rem;
  cursor: pointer;
}

.rain-views button i,
.rain-3d-bar button i { margin-right: 0.3rem; font-size: 0.9em; }

.rain-views button:hover,
.rain-3d-bar button:hover { color: var(--accent); border-color: var(--accent); }

.rain-views button[aria-pressed="true"],
.rain-3d-bar button[aria-pressed="true"] {
  color: var(--card);
  background: var(--accent);
  border-color: var(--accent);
}

.rain-views button:focus-visible,
.rain-3d-bar button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rain-3d-bar button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.rain-3d-bar button:disabled:hover {
  color: var(--ink-soft);
  border-color: var(--rule);
}

/* 3D-only controls: projection, scale labels, reset */
.rain-3d-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.55rem;
}

.rain-3d-bar button { font-size: 0.72rem; padding: 0.32rem 0.7rem; }

.rain-readout {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Drag the bottom-right grip to resize; the scene re-fits on every change. */
.rain-box {
  position: relative;
  height: clamp(260px, 46vh, 460px);
  min-height: 180px;
  max-height: 85vh;
  resize: vertical;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
  cursor: grab;
}

.rain-box:active { cursor: grabbing; }

/* orthographic is a fixed reading view — nothing to grab */
.rain-box.is-locked,
.rain-box.is-locked:active { cursor: default; }

.rain-box:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rain-canvas { display: block; }

/* CSS2D scale labels drawn over the scene */
.rain-labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.rain-label {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.14rem 0.3rem;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.rain-label.is-total {
  color: var(--card);
  background: var(--accent);
  border-color: var(--accent);
}

/* year marks along the base read as axis ticks, not as callouts */
.rain-label.is-year {
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0.1rem 0.2rem;
  font-weight: 600;
}

/* legend: sits beside the book swatch the renderer draws in the corner */
.rain-key {
  position: absolute;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.25;
  max-width: 9rem;
  color: var(--ink-soft);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.rain-hint {
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

.rain-hint i { margin-right: 0.3rem; }

.rain-sliders {
  display: flex;
  gap: 1.2rem;
  margin-top: 0.75rem;
}

.rain-slider-label {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.rain-sliders input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.rain-sliders input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- pictograph --- */

.pict-chart { height: auto; min-height: 0; }

.pict { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.3rem 0 0.4rem; }

.pict-row { border-radius: 8px; }

.pict-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  font-family: var(--sans);
  margin-bottom: 0.3rem;
}

.pict-label { font-size: 0.82rem; font-weight: 650; color: var(--ink); }

.pict-count {
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pict-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem 0.3rem;
  font-size: 0.92rem;
  color: var(--accent-bright);
  line-height: 1;
}

.pict-part { display: inline-block; }

/* --- podium histograms --- */

.podium-chart { height: auto; min-height: 0; }

.podium { display: flex; flex-direction: column; gap: 0.42rem; padding: 0.3rem 0 0.2rem; }

.podium-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(6.5rem, 0.9fr) 1.1fr 2.4rem;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  border-radius: 6px;
}

.podium-rank {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.podium-row.is-top1 .podium-rank { color: var(--accent); font-size: 0.95rem; }
.podium-row.is-top2 .podium-rank { color: var(--accent); font-size: 0.85rem; opacity: 0.8; }
.podium-row.is-top3 .podium-rank { color: var(--accent); font-size: 0.8rem; opacity: 0.6; }

.podium-name {
  font-size: 0.78rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.podium-row.is-top1 .podium-name { font-weight: 700; }

.podium-track {
  height: 0.62rem;
  background: var(--td-rule);
  border-radius: 4px;
  overflow: hidden;
}

.podium-bar {
  display: block;
  height: 100%;
  background: var(--accent-bright);
  border-radius: 4px;
}

.podium-count {
  font-size: 0.76rem;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- trio of podium cards --- */

.trio-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
  max-width: 80rem;
  margin: 2.6rem auto 0;
}

.trio-row figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.trio-row .chart-card { width: 100%; }

.trio-row .chart-card h3 i { color: var(--accent); margin-right: 0.35rem; }

.trio-row figcaption {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
  max-width: 26rem;
}

/* --- revocation cards --- */

.revoke-list {
  max-width: 46rem;
  margin: 2.4rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.revoke-card {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  grid-template-areas: "plate title badge" "plate meta badge";
  gap: 0.15rem 1rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 8px 26px rgba(34, 30, 28, 0.06);
}

/* a thumbnail where a cover was traced, an empty plate where none was — the
   same vocabulary as the specimen cards, at list scale */
.revoke-plate {
  grid-area: plate;
  /* explicit width, so the plate never depends on the grid stretching it */
  width: 2.5rem;
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  border-radius: 2px;
  overflow: hidden;
}

.revoke-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.revoke-plate.is-blank {
  border: 1px dashed var(--rule);
  background: var(--band);
  color: var(--blank);
  font-size: 0.7rem;
}

.revoke-title { grid-area: title; font-weight: 700; font-style: italic; }

.revoke-meta {
  grid-area: meta;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.revoke-badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1.5px dashed var(--accent);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
}

/* --- six example records: the cover shelf, then the specimen drawer --- */

/* A row of the real covers, bottom-aligned like books on a shelf. Heights are
   equal and widths fall where the jackets do, so the row keeps a real
   shelf's ragged rhythm. Decorative: it clips at both edges rather than
   scrolling, so nothing is trapped out of a keyboard's reach. */
.cover-shelf {
  max-width: 62rem;
  margin: 2.4rem auto 0;
}

.cover-shelf-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.4rem, 1.2vw, 0.9rem);
  overflow: hidden;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
  /* the full run fits on a wide screen; on narrow ones it thins out at both
     ends instead of being cut off square */
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.cover-shelf-row img {
  height: clamp(4.4rem, 7vw, 6.6rem);
  width: auto;
  flex: none;
  border-radius: 2px;
  /* a hairline keeps pale jackets from dissolving into the paper */
  border: 1px solid var(--rule);
  box-shadow: 0 6px 14px rgba(34, 30, 28, 0.18);
}

:root[data-theme="dark"] .cover-shelf-row img {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.cover-shelf-note {
  max-width: 46rem;
  margin: 0.9rem auto 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

.cover-shelf-note i { color: var(--accent); margin-right: 0.35rem; }

.specimen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  max-width: 62rem;
  margin: 2.6rem auto 0;
}

/* each card carries its cluster's key colour on --cl */
.specimen {
  --cl: var(--muted);
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 0 1.05rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--cl);
  border-radius: 10px;
  padding: 1rem 1.15rem 0.95rem;
  box-shadow: 0 8px 26px rgba(34, 30, 28, 0.06);
}

.specimen-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* the cover sits in a fixed book-shaped well, so a jacket and an empty plate
   occupy exactly the same space and the six cards line up */
.specimen-plate {
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
}

.specimen-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
  border: 1px solid var(--rule);
  box-shadow: 0 4px 12px rgba(34, 30, 28, 0.22);
}

:root[data-theme="dark"] .specimen-plate img {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}

/* no cover traced: an honest empty plate, not a stand-in jacket */
.specimen-plate.is-blank {
  gap: 0.4rem;
  align-content: center;
  border: 1px dashed var(--rule);
  background: var(--band);
  color: var(--blank);
  text-align: center;
  padding: 0.4rem;
}

.specimen-plate.is-blank i { font-size: 1.1rem; }

.specimen-plate.is-blank span {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.specimen.cl-subversive { --cl: var(--cl-subversive); }
.specimen.cl-obscene    { --cl: var(--cl-obscene); }
.specimen.cl-general    { --cl: var(--cl-general); }
.specimen.cl-religious  { --cl: var(--cl-religious); }
.specimen.cl-3r         { --cl: var(--cl-3r); }

.specimen-tag {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cl);
}

.specimen-tag::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--cl);
  flex: none;
}

.specimen-title {
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 700;
  font-style: italic;
}

.specimen-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.18rem 0.8rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.specimen-fields > div { display: contents; }
.specimen-fields dt { color: var(--muted); white-space: nowrap; }
.specimen-fields dd { font-variant-numeric: tabular-nums; }

/* the note follows the fields directly — pinning it to the foot left a hole
   mid-card whenever a card's row-mate ran longer */
.specimen-note {
  padding-top: 0.55rem;
  border-top: 1px dashed var(--rule);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.specimen-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1.5px dashed var(--accent);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  margin-right: 0.45rem;
  vertical-align: 0.1em;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .specimen-grid { grid-template-columns: 1fr; }
  .specimen { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0 0.9rem; }
}

/* --- reform recommendations --- */

.reform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  max-width: 62rem;
  margin: 2.6rem auto 0;
}

.reform-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.4rem 1.5rem 1.3rem;
  box-shadow: 0 10px 32px rgba(34, 30, 28, 0.07);
  text-align: left;
}

.reform-num {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rule);
}

.reform-card h3 {
  font-size: 1.02rem;
  line-height: 1.3;
  margin-bottom: 0.55rem;
  padding-right: 2.4rem;
}

.reform-card h3 i { color: var(--accent); margin-right: 0.4rem; font-size: 0.9em; }

.reform-card p {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- data-tab additions --- */

.table-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.table-check input {
  accent-color: var(--accent);
  width: 0.95rem;
  height: 0.95rem;
}

.table-check input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.td-revoked {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1.5px dashed var(--accent);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  white-space: nowrap;
}

/* --- responsive --- */

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

  .law-axis { flex-direction: row; }

  .law-axis-label { writing-mode: horizontal-tb; }

  .law-axis-line { width: auto; min-height: 0; height: 2px; min-width: 1.4rem; flex: 1 1 auto; }

  .lineage { flex-direction: column; gap: 0.4rem; }

  .lineage-arrow { transform: rotate(90deg); padding: 0.05rem 0; }

  .goal-list { grid-template-columns: 1fr; }

  .rain-box { height: clamp(200px, 34vh, 300px); }

  .rain-3d-bar { justify-content: flex-start; }

  .rain-sliders { flex-direction: column; gap: 0.5rem; }

  .pict-icons { font-size: 0.78rem; }

  /* the podium trio becomes a horizontally scrollable rail */
  .trio-row {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.6rem;
    -webkit-overflow-scrolling: touch;
  }

  .trio-row figure {
    flex: 0 0 min(86vw, 24rem);
    scroll-snap-align: center;
  }

  .reform-grid { grid-template-columns: 1fr; }

  .revoke-card {
    grid-template-columns: 2.2rem 1fr;
    grid-template-areas: "plate title" "plate meta" "plate badge";
    justify-items: start;
    gap: 0.3rem 0.8rem;
  }

  .revoke-plate { width: 2.2rem; }
}

/* --- suggest an edit --- */

.suggest-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.7rem 1.8rem;
  margin: 2.6rem 0 0;
  box-shadow: 0 10px 32px rgba(34, 30, 28, 0.06);
  transition: background-color 450ms ease, color 450ms ease, border-color 450ms ease;
}

.suggest-title {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0.1rem 0 0.6rem;
}

.suggest-intro {
  font-family: var(--sans);
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}

.suggest-form {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.suggest-form .field { display: grid; gap: 0.3rem; }

.suggest-form label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.suggest-form .req { color: var(--accent); margin-left: 0.15rem; }

.suggest-form .opt {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-left: 0.3rem;
  text-transform: lowercase;
}

.suggest-form input[type="text"],
.suggest-form textarea {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  width: 100%;
}

.suggest-form textarea { resize: vertical; min-height: 3.2rem; }

.suggest-form input:focus-visible,
.suggest-form textarea:focus-visible,
.btn-suggest:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.suggest-form [aria-invalid="true"] { border-color: #b4442e; }

.field-hint,
.field-match,
.field-error {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.5;
  margin: 0;
}

.field-hint { color: var(--muted); max-width: 62ch; }
.field-match { color: var(--accent); font-weight: 600; }
.field-error { color: #b4442e; font-weight: 600; }
.form-error { margin-top: 0.2rem; }

.suggest-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.2rem;
  border-top: 1px solid var(--td-rule);
  padding-top: 1.2rem;
}

.btn-suggest {
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.62rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 200ms ease;
}

.btn-suggest:hover { opacity: 0.88; }

.suggest-note {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--muted);
  flex: 1 1 22rem;
  margin: 0;
}

@media (max-width: 540px) {
  .suggest-card { padding: 1.3rem 1.1rem; }
  .btn-suggest { width: 100%; }
}

/* per-row "Edit" action feeding the suggest form.
 * The table scrolls sideways (min-width 1080px in a clipped wrapper), so this
 * column is pinned to the right edge — otherwise it sits off-screen and the
 * row hover has nothing visible to reveal. */
#data-table th.th-action,
#data-table td.td-action {
  position: sticky;
  right: 0;
  text-align: right;
  white-space: nowrap;
  background: var(--card);
  box-shadow: inset 1px 0 0 var(--td-rule), -7px 0 9px -7px rgba(34, 30, 28, 0.18);
}

#data-table td.td-action { z-index: 1; }
#data-table thead th { z-index: 2; }        /* header stays above the pinned column */
#data-table th.th-action { z-index: 3; background: var(--paper); }

/* the pinned cell carries the row's own background, or rows show through it */
#data-table tbody tr:hover td.td-action { background: var(--paper); }
#data-table tbody tr.is-picked td.td-action { background: var(--band-deep); }

/* whole row selects the record */
#data-table tbody tr { cursor: pointer; }

.row-select {
  accent-color: var(--accent);
  width: 0.95rem;
  height: 0.95rem;
  cursor: pointer;
  vertical-align: middle;
}

.row-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.th-action-label {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-left: 0.4rem;
  vertical-align: middle;
}

#data-table tbody tr.is-picked { background: var(--band-deep); }
#data-table tbody tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
#data-table tbody tr.is-picked td { color: var(--ink); }

/* selected-record chips in the form */
.sg-selection {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  background: var(--paper);
  display: grid;
  gap: 0.6rem;
}

.sg-selection-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.sg-selection-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.sel-count { color: var(--accent); letter-spacing: 0.04em; }

.sg-clear {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.sg-clear:hover { color: var(--accent); }
.sg-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sg-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  max-height: 11rem;
  overflow-y: auto;
}

.sg-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.24rem 0.3rem 0.24rem 0.65rem;
  max-width: 100%;
}

.sg-chip-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22ch;
}

.sg-chip-meta {
  font-size: 0.7rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18ch;
}

.sg-chip-drop {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
}

.sg-chip-drop:hover { color: var(--accent); background: var(--band-deep); }
.sg-chip-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ==========================================================================
   Document pages — the research methods and research limitations documents,
   each rendered as a tab. Reuses .page / .page-inner / .kicker / .lede; adds
   a sticky in-page table of contents and the prose rules for the document.
   ========================================================================== */

.doc-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* sticky contents rail — desktop only */
.doc-toc {
  position: sticky;
  top: calc(var(--topbar) + 1.6rem);
  font-family: var(--sans);
  border-left: 1px solid var(--rule);
  padding-left: 1rem;
}

.doc-toc ul { list-style: none; display: grid; gap: 0.45rem; }

.doc-toc a {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
  display: block;
}

.doc-toc a:hover { color: var(--accent); }

.doc-toc a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.doc-toc-sub { padding-left: 0.85rem; }
.doc-toc-sub a { font-size: 0.78rem; color: var(--muted); }

/* The document itself. The reading measure is held by the prose rules below
   rather than on the column. */
.doc-body { min-width: 0; }

.doc-body h3,
.doc-body h4 {
  scroll-margin-top: calc(var(--topbar) + 1.2rem);
}

.doc-body h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  margin: 2.6rem 0 0.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.doc-body > h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.doc-body h4 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  margin: 2rem 0 0.7rem;
}

.doc-body p {
  color: var(--ink-soft);
  margin-bottom: 1rem;
  max-width: 46rem;
}

.doc-body strong { color: var(--ink); font-weight: 650; }

/* publication titles quoted inside the prose */
.doc-body cite { font-style: italic; }

/* lists: the metadata fields and the taxonomies carry most of the meaning */
.doc-list {
  color: var(--ink-soft);
  max-width: 46rem;
  margin: 0 0 1.2rem 1.4rem;
  padding-left: 0.3rem;
}

.doc-list li { margin-bottom: 0.4rem; }

/* the four classifier steps run longer than a plain list item */
.doc-steps li { margin-bottom: 0.85rem; }

/* model identifiers, set to break rather than push the column wide */
.doc-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--ink);
  background: var(--band);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  overflow-wrap: anywhere;
}

/* document tables — same skin as the data table, inside a scrolling .table-wrap */
.doc-table {
  width: 100%;
  min-width: 58rem;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.81rem;
  line-height: 1.45;
}

.doc-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  border-bottom: 2px solid var(--rule);
  text-align: left;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  padding: 0.6rem 0.75rem;
}

.doc-table td,
.doc-table tbody th {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--td-rule);
  vertical-align: top;
  text-align: left;
  color: var(--ink-soft);
}

/* the cluster columns are spanned down their group, so they read as one block */
.doc-table tbody th[scope="rowgroup"] {
  color: var(--ink);
  font-weight: 700;
  width: 3rem;
}

.doc-tcluster { color: var(--ink); font-weight: 650; width: 11rem; }
.doc-tsub { color: var(--ink); font-weight: 600; width: 10rem; }

/* a firmer rule where one cluster ends and the next begins */
.doc-table tbody tr.doc-tgroup > * { border-top: 1px solid var(--rule); }

/* prev / next through the codebook: Methods → Limitations → Taxonomy → Team */
.doc-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.7rem, 2vw, 1.2rem);
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

.doc-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1.05rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 200ms ease, background-color 200ms ease;
}

/* the first and last documents have only one neighbour, so both links pin their
   own column — a lone "next" still sits on the right */
.doc-pager-link.is-prev { grid-column: 1; }

.doc-pager-link.is-next {
  grid-column: 2;
  text-align: right;
  align-items: flex-end;
}

.doc-pager-link:hover { border-color: var(--accent); background: var(--band); }

.doc-pager-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.doc-pager-dir {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.doc-pager-title {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--accent);
}

@media (max-width: 640px) {
  .doc-pager { grid-template-columns: minmax(0, 1fr); }
  .doc-pager-link.is-next { grid-column: 1; }
}

/* --- research team: a masthead-style credit list --- */

.team-credits {
  margin: 2.4rem 0 0;
  border-top: 1px solid var(--rule);
}

.team-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.4rem 1.6rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}

.team-row dt {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.2rem;
}

.team-row dd { display: flex; flex-direction: column; gap: 0.25rem; }

.team-name {
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--ink);
}

.team-note {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* reviewers not yet named: obviously a held slot, never a fabricated name */
.team-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.team-slot {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--blank);
  border: 1px dashed var(--rule);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
}

.team-pending {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 0.35rem;
}

@media (max-width: 640px) {
  .team-row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}

@media (max-width: 900px) {
  /* the contents rail costs more than it gives on a phone */
  .doc-toc { display: none; }
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
}