/* RoG-AH public-facing site (PREVIEW). Self-contained styling for the pages
   under site/public/: the outreach story page and the scrubbed corpus
   explorer. Reuses the shared letterpress tokens + shell, but deliberately
   does NOT depend on nav.js or any atlas CSS/JS — the public surface must
   stay decoupled from the internal working tools. No new colours: everything
   derives from tokens.css. */

@import url("../../shared/css/shell.css");

/* Question colours — public-page scope only (the internal atlas keeps its
   own topic tokens). The hues follow the physics of each question:
   Forcing = warm orange (it IS heat); Sensitivity = cool slate blue (the
   measured temperature response); Feedback = moss green (the loop that
   regulates — or fails to). */
:root {
  --q-forcing:          oklch(0.58 0.14 50);
  --q-forcing-tint:     oklch(0.95 0.03 50);
  --q-sensitivity:      oklch(0.50 0.10 245);
  --q-sensitivity-tint: oklch(0.95 0.02 245);
  --q-feedback:         oklch(0.48 0.12 145);
  --q-feedback-tint:    oklch(0.95 0.03 145);
}

/* ---- static public header (no nav.js) --------------------------------- */
.pub-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.pub-nav .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.pub-nav .wordmark em { color: var(--oxblood); font-style: normal; }
.pub-nav .links { margin-left: auto; display: flex; gap: var(--sp-4); }
.pub-nav .links a {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  text-decoration: none;
}
.pub-nav .links a:hover,
.pub-nav .links a.is-here { color: var(--oxblood); }

/* ---- narrative column (story-page language) --------------------------- */
.story {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-8);
  color: var(--ink);
}
.story p {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}
.story em { font-style: italic; }
.story strong { font-weight: 600; }

.sec-kicker,
.story-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: var(--sp-3);
}

.story-hero {
  padding: var(--sp-8) 0 var(--sp-7);
  border-bottom: 1px solid var(--rule);
}
.story-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--sp-5);
}
.story-lede {
  font-size: 1.1875rem !important;
  line-height: 1.65 !important;
  color: var(--ink-muted) !important;
}

.story-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.story-hero-stats .stat {
  flex: 1 1 140px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.story-hero-stats .num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--oxblood);
  line-height: 1.1;
}
.story-hero-stats .lbl {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  margin-top: var(--sp-2);
  line-height: 1.3;
}

.story-section {
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--rule-subtle);
  scroll-margin-top: 96px;
}
.story-section h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--sp-5);
}
.story-section h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin: var(--sp-6) 0 var(--sp-3);
}
.story-section.alt { position: relative; }
.story-section.alt::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--paper-sink);
  z-index: -1;
}

/* pull-quote for the Howard hook */
.pullquote {
  border-left: 3px solid var(--oxblood);
  margin: var(--sp-6) 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
}
.pullquote p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.1875rem !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  margin: 0 0 var(--sp-2) !important;
}
.pullquote cite {
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* ---- lens triptych ----------------------------------------------------- */
.lens-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
.lens-item {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  background: var(--surface);
  border-top: 3px solid var(--rule);
}
.lens-item.t-i   { border-top-color: var(--q-forcing); }
.lens-item.t-ii  { border-top-color: var(--q-sensitivity); }
.lens-item.t-iii { border-top-color: var(--q-feedback); }
.lens-item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--oxblood);
  margin: 0 0 var(--sp-2);
}
.lens-item.t-i h3   { color: var(--q-forcing); }
.lens-item.t-ii h3  { color: var(--q-sensitivity); }
.lens-item.t-iii h3 { color: var(--q-feedback); }

/* question-coloured section kickers tie prose to the triptych */
#forcing .sec-kicker     { color: var(--q-forcing); }
#sensitivity .sec-kicker { color: var(--q-sensitivity); }
#feedback .sec-kicker    { color: var(--q-feedback); }
.lens-item .lens-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--sp-2);
  line-height: 1.2;
}
.lens-item p { font-size: var(--fs-small) !important; line-height: 1.5 !important; color: var(--ink-muted) !important; margin: 0 !important; }

/* ---- figures ----------------------------------------------------------- */
.fig {
  margin: var(--sp-6) 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--sp-4);
}
.fig img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.fig figcaption {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-top: var(--sp-3);
}

/* ---- explainer film ------------------------------------------------------ */
.film-fig video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--paper); }

/* ---- feedback loop (inline SVG) ---------------------------------------- */
.loop-fig { text-align: center; }
.loop-fig svg { max-width: 520px; width: 100%; height: auto; }
.loop-fig .loop-node {
  fill: var(--surface);
  stroke: var(--rule);
  stroke-width: 1.25;
}
.loop-fig .loop-node.hot { stroke: var(--oxblood); }
.loop-fig .loop-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  fill: var(--ink);
}
.loop-fig .loop-sub {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--ink-muted);
}
.loop-fig .loop-arrow { stroke: var(--oxblood); stroke-width: 1.75; fill: none; }
.loop-fig .loop-arrowhead { fill: var(--oxblood); }
.loop-fig .loop-arrow.damp { stroke: var(--moss); }
.loop-fig .loop-arrowhead.damp { fill: var(--moss); }
.loop-fig .loop-sign {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  fill: var(--oxblood);
}
.loop-fig .loop-sign.damp { fill: var(--moss); }

/* ---- combined feedback figure: schematic (a) linked to estimates (b) ---- */
.feedback-fig .fb-panels { display: flex; flex-direction: column; gap: var(--sp-4); }
.feedback-fig .fb-panel { position: relative; }
.feedback-fig .fb-estimates {
  border-top: 1px solid var(--rule-subtle);
  padding-top: var(--sp-4);
}
.feedback-fig .fb-plabel {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-2);
}
.feedback-fig .fb-plabel b { color: var(--oxblood); font-weight: 600; }
.feedback-fig .fb-schematic svg { max-width: 560px; width: 100%; height: auto; display: block; margin: 0 auto; }
.feedback-fig .fb-hint {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-small) !important;
  color: var(--ink-faint) !important;
  margin: var(--sp-2) 0 0 !important;
}
.feedback-fig .fb-hint b { color: var(--oxblood); }
.feedback-fig .loop-arrow.neutral { stroke: var(--ink-faint); }
.feedback-fig .loop-arrowhead.neutral { fill: var(--ink-faint); }

/* hoverable feedback zones in the schematic */
.feedback-fig .fb-zone { cursor: pointer; }
.feedback-fig .fb-zone .fb-hit { fill: transparent; }
.feedback-fig .fb-zone .fb-hit:focus { outline: none; }
.feedback-fig .fb-zone:focus-visible .fb-hit { fill: color-mix(in oklab, var(--oxblood) 6%, transparent); }
.feedback-fig .fb-zone,
.feedback-fig .chart .c-fb-mark { transition: opacity 0.15s var(--ease); }

/* the non-active zone fades while one is hovered */
.feedback-fig[data-fb-hover="source"] .fb-zone[data-fb-zone="restoring"],
.feedback-fig[data-fb-hover="restoring"] .fb-zone[data-fb-zone="source"] { opacity: 0.25; }

/* Every estimate is one lane-aware group containing its dot, IQR whisker,
   callout, annotation, and transparent tooltip target. Hide non-matching
   groups completely and disable their hit areas; the opacity transition still
   supplies the fade. Selected groups retain each child's season encoding. */
.feedback-fig[data-fb-hover] .chart .c-fb-mark {
  opacity: 0;
  pointer-events: none;
}
.feedback-fig[data-fb-hover="source"] .chart .c-fb-mark.lane-source,
.feedback-fig[data-fb-hover="restoring"] .chart .c-fb-mark.lane-baseline,
.feedback-fig[data-fb-hover="restoring"] .chart .c-fb-mark.lane-restoring {
  opacity: 1;
  pointer-events: auto;
}
.feedback-fig[data-fb-hover="source"] .chart circle.c-pt.lane-source,
.feedback-fig[data-fb-hover="restoring"] .chart circle.c-pt.lane-baseline,
.feedback-fig[data-fb-hover="restoring"] .chart circle.c-pt.lane-restoring { r: 10; }

/* ---- evidence pipeline: input → method → output -------------------------
   Not a funnel: 3,035 candidates and 576 in the corpus are the two bookend
   numbers (input and output); the method — machine screen + 262 hand-checked
   + audit — sits between them. Deliberately avoids a narrowing/funnel shape,
   because 262 is a branch (borderline cases), not a subset the whole corpus
   passes through. */
.pipeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
.pipe-end {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.pipe-end.pipe-out { border-color: var(--q-forcing); background: var(--q-forcing-tint); }
.pipe-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
}
.pipe-out .pipe-num { color: var(--q-forcing); }
.pipe-cap {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
}
.pipe-flow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  position: relative;
}
/* a connecting track behind the method, with arrowheads into each end card */
.pipe-flow::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-4));
  right: calc(-1 * var(--sp-4));
  top: 50%;
  height: 2px;
  background: var(--rule);
  z-index: -1;
}
.pipe-verb {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.4;
}
.pipe-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.pipe-notes li {
  position: relative;
  padding-left: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
  background: color-mix(in oklab, var(--paper) 70%, transparent);
}
.pipe-notes li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.pipe-notes strong { color: var(--oxblood); font-weight: 600; }

@media (max-width: 720px) {
  .pipeline { grid-template-columns: 1fr; gap: var(--sp-3); }
  .pipe-flow::before {
    left: 50%; right: auto; top: calc(-1 * var(--sp-3)); bottom: calc(-1 * var(--sp-3));
    width: 2px; height: auto;
  }
  .pipe-num { font-size: 2rem; }
}

/* ---- explore / outbound cards ------------------------------------------ */
.explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-5);
}
.explore-grid.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ecard {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.ecard:hover { border-color: var(--oxblood); transform: translateY(-2px); }
.ecard h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--oxblood);
  margin: 0 0 var(--sp-2);
}
.ecard p { font-size: var(--fs-small) !important; line-height: 1.5 !important; color: var(--ink-muted) !important; margin: 0 !important; }
.ecard.static { cursor: default; }
.ecard.static:hover { border-color: var(--rule); transform: none; }
.ecard .doi { font-family: var(--font-mono); font-size: 0.9em; color: var(--ink); white-space: nowrap; }

/* "The paper" — not-yet-live notice */
.soon-note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small) !important;
  color: var(--ink-muted) !important;
  margin: 0 0 var(--sp-5) !important;
}
.soon-badge {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--oxblood);
  background: var(--oxblood-tint);
  border: 1px solid color-mix(in oklab, var(--oxblood) 30%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
}

/* footer build-provenance stamp (appended by the inline script) */
.shell-foot .build-stamp code { font-family: var(--font-mono); }
.shell-foot .build-stamp a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- team grid ----------------------------------------------------------- */
/* author cards — name, ORCID iD and affiliation, so they tile two-up in paper
   order (reading order left-to-right), with the lead alone on the first row.
   Each name carries an ORCID iD link out to that author's profile. */
.authors {
  list-style: none;
  margin: var(--sp-6) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
/* the lead keeps the first row to itself, but stays the size of one column
   card — it spans the row only so nothing sits beside it */
.author.lead {
  grid-column: 1 / -1;
  max-width: calc((100% - var(--sp-3)) / 2);
}
.author {
  /* the lead's eyebrow makes its row taller, so centre each card's contents
     rather than letting a one-line name hang at the top of a stretched cell */
  display: flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.author:hover {
  border-color: var(--ink-faint);
  box-shadow: 0 6px 20px -12px rgb(60 30 20 / 0.35);
  transform: translateY(-1px);
}
.au-body { min-width: 0; }
.au-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 3px;
}
/* uniform name size for every author, lead included */
.au-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.25;
}
.orcid {
  display: inline-flex;
  line-height: 0;
}
.orcid-icon {
  width: 15px;
  height: 15px;
  opacity: 0.85;
  transition: opacity 0.12s var(--ease), transform 0.12s var(--ease);
}
.orcid:hover .orcid-icon { opacity: 1; transform: scale(1.12); }
.au-aff {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-faint);
  line-height: 1.4;
  margin-top: 2px;
}

/* the lead author is marked only by the "Lead & corresponding author"
   eyebrow — no tinted card */

@media (max-width: 560px) {
  /* one column, so the lead is already alone on its row at full card width */
  .authors { grid-template-columns: minmax(0, 1fr); }
  .author.lead { max-width: none; }
}
@media (max-width: 480px) {
  .author { padding: var(--sp-4); }
}

/* ---- unified atlas frame (globe + city, one instrument) ------------------ */
/* .atlas provides the single frame, so strip the default .fig chrome. */
.atlas-fig { border: 0; background: none; padding: 0; }
.atlas {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.atlas-head {
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--rule-subtle);
}
.atlas-head h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--sp-1);
}
.atlas-head p {
  font-family: var(--font-body);
  font-size: var(--fs-small) !important;
  color: var(--ink-muted) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ---- world overview (web-native value canvas) ---------------------------- */
.worldmap {
  position: relative;
  line-height: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-subtle);
}
.wm-canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
}
.worldmap > noscript img { display: block; width: 100%; height: auto; }
.wm-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* only the markers themselves are clickable */
}
/* The marker is a zero-size anchor at the city's exact lon/lat; the dot is
   centred on it and the label is offset to one side, so a long label never
   pushes the dot off the city. */
.wm-marker {
  position: absolute;
  width: 0;
  height: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}
.wm-hit {
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.wm-dot {
  position: absolute;
  left: 0; top: 0;
  width: 11px; height: 11px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--q-forcing);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--q-forcing), 0 1px 3px rgb(0 0 0 / 0.35);
  transition: transform 0.12s var(--ease), background 0.12s var(--ease);
}
.wm-marker:hover .wm-dot { transform: translate(-50%, -50%) scale(1.35); }
.wm-marker.on .wm-dot {
  background: var(--oxblood);
  transform: translate(-50%, -50%) scale(1.4);
  box-shadow: 0 0 0 1px var(--oxblood), 0 0 0 5px var(--oxblood-tint);
}
.wm-lab {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in oklab, var(--paper) 80%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0.92;
  transition: opacity 0.12s var(--ease), color 0.12s var(--ease);
}
.wm-lab.wm-right { left: 10px; }
.wm-lab.wm-left { right: 10px; }
.wm-marker:hover .wm-lab,
.wm-marker.on .wm-lab { opacity: 1; color: var(--oxblood-dim); }
.wm-readout {
  position: absolute;
  z-index: 5;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.35;
  padding: 5px 9px;
  border-radius: var(--radius);
  pointer-events: none;
  white-space: nowrap;
}
.wm-readout .cm-coord { display: block; font-size: 10.5px; opacity: 0.7; margin-top: 2px; }
.wm-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  border-radius: var(--radius);
  padding: 6px 8px 4px;
  pointer-events: none;
}
@media (max-width: 560px) {
  .wm-lab { display: none; }   /* dots only on small screens */
}

/* ---- interactive city panel (inside the atlas frame) --------------------- */
.atlas-detail { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.citymap { }

/* selected-city header: name on the left, epoch segmented control on the right */
.cm-detail-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.cm-title { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.cm-city-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.cm-city-country {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-faint);
}

/* epoch as a joined segmented control (not loose pills) */
.cm-epoch {
  margin-left: auto;
  display: inline-flex;
  flex: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-sink);
  padding: 2px;
}
.cm-ep {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 4px 13px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.12s var(--ease), background 0.12s var(--ease);
}
.cm-ep:hover { color: var(--q-forcing); }
.cm-ep.on {
  background: var(--q-forcing);
  color: var(--paper);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}

.cm-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-sink);
  aspect-ratio: 1 / 1;   /* replaced per city by citymap.js (cos lat) */
  max-height: 520px;
  margin: 0 auto;
  width: min(100%, 520px);
}
.cm-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  transform-origin: center center;
  cursor: crosshair;
  touch-action: none;
}
.cm-canvas.grabbing { cursor: grabbing; }

.cm-readout {
  position: absolute;
  z-index: 5;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--radius);
  pointer-events: none;
  white-space: nowrap;
}
.cm-readout .cm-coord {
  display: block;
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

.cm-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  border-radius: var(--radius);
  padding: 6px 8px 4px;
  pointer-events: none;
}
.cm-swatch { width: 132px; height: 8px; border-radius: 2px; }
.cm-ticks {
  display: flex;
  justify-content: space-between;
  width: 132px;
  font-family: var(--font-display);
  font-size: 9.5px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.cm-unit {
  font-family: var(--font-display);
  font-size: 9.5px;
  color: var(--ink-faint);
  margin-top: 1px;
}

.cm-reset {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 5;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  color: var(--ink-muted);
  cursor: pointer;
}
.cm-reset:hover { border-color: var(--q-forcing); color: var(--q-forcing); }

.cm-time {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.cm-slider { flex: 1 1 auto; accent-color: var(--q-forcing); cursor: pointer; }
.cm-frame {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  min-width: 44%;
  text-align: right;
}
.cm-frame strong { color: var(--ink); font-weight: 600; }
.cm-frame .cm-sub {
  display: block;
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  margin-top: 2px;
}

.cm-cycle { margin-top: var(--sp-2); }
.cm-cycle svg { display: block; width: 100%; height: auto; }
.cm-cycle .cm-bar { fill: var(--q-forcing); opacity: 0.45; cursor: pointer; }
.cm-cycle .cm-bar:hover { opacity: 0.75; }
.cm-cycle .cm-bar.on { opacity: 1; }
.cm-cycle .cm-ghost { fill: var(--ink-faint); opacity: 0.18; }
.cm-cycle .cm-mlab {
  font-family: var(--font-display);
  font-size: 11px;
  fill: var(--ink-faint);
  text-anchor: middle;
}
.cm-cycle .cm-clab,
.cm-diurnal .cm-clab { font-family: var(--font-display); font-size: 11px; fill: var(--ink-muted); }

/* diurnal strip — same furniture as the seasonal one above it, but lines
   rather than bars, and it reuses .cm-clab / .cm-mlab for its labels. The
   non-selected months stay drawn so the seasonal swing in peak hour is
   visible at a glance instead of only while scrubbing. */
.cm-diurnal { margin-top: var(--sp-3); }
.cm-diurnal svg { display: block; width: 100%; height: auto; }
.cm-diurnal .cm-dline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.cm-diurnal .cm-dline.ctx { stroke: var(--q-forcing); stroke-width: 1; opacity: 0.2; }
.cm-diurnal .cm-dline.ghost {
  stroke: var(--ink-faint); stroke-width: 1.4; opacity: 0.5; stroke-dasharray: 4 4;
}
.cm-diurnal .cm-dline.on { stroke: var(--oxblood); stroke-width: 2.4; }
.cm-diurnal .cm-daxis { stroke: var(--rule); stroke-width: 1; }
.cm-diurnal .cm-dpk { fill: var(--oxblood); }
.cm-diurnal .cm-dpklab {
  font-family: var(--font-display); font-size: 11px; fill: var(--ink);
  stroke: var(--paper); stroke-width: 3; paint-order: stroke fill;
}
/* .cm-clab is shared with the cycle strip above (see that rule). .cm-mlab is
   NOT: the cycle's month labels are always centred, whereas these hour labels
   set text-anchor per tick so 00 and 24 sit inside the axis. */
.cm-diurnal .cm-mlab { font-family: var(--font-display); font-size: 11px; fill: var(--ink-faint); }

.cm-hook {
  font-family: var(--font-body);
  font-size: var(--fs-small) !important;
  color: var(--ink-muted) !important;
  margin: var(--sp-3) 0 0 !important;
  line-height: 1.5 !important;
}

@media (max-width: 560px) {
  .cm-frame { min-width: 0; }
  .cm-epoch { margin-left: 0; }
}

/* ---- interactive charts -------------------------------------------------- */
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }
.chart text {
  font-family: var(--font-display);
  fill: var(--ink-muted);
}
.chart .c-band { fill: var(--paper-sink); }
.chart .c-grid { stroke: var(--rule); stroke-width: 1; }
.chart .c-grid.lane { stroke: var(--rule-subtle); }
.chart .c-dash { stroke: var(--ink-faint); stroke-width: 1.4; stroke-dasharray: 7 6; }
/* observational benchmark reference line (Kikegawa et al. 2014, 0.01 K per
   W m-2) — solid and in oxblood so it reads as an external anchor, distinct
   from the dashed grey study median it sits alongside. Matches the red
   reference line (#cc3311) in Dan's forest plot. */
.chart .c-bench { stroke: var(--oxblood); stroke-width: 1.2; }
.chart .c-tick { font-size: 15px; }
.chart .c-axis { font-size: 16px; fill: var(--ink-muted); }
.chart .c-note { font-size: 15.5px; fill: var(--ink-muted); font-weight: 500;
  stroke: var(--paper); stroke-width: 3.5; paint-order: stroke fill; }
.chart .c-head { font-size: 16px; fill: var(--ink); font-weight: 600; }
.chart .c-sub  { font-size: 13px; fill: var(--ink-faint); font-style: italic; }
.chart .c-var-run { font-style: italic; }
.chart .c-sub-run { font-size: 0.72em; font-style: normal; }
.chart .c-note-val { font-weight: 600; fill: var(--ink); }

/* feedback ledger: log-magnitude scatter — season legend */
.chart .c-leg-summer { fill: var(--ink-muted); }
.chart .c-leg-winter { fill: var(--paper); stroke: var(--ink-muted); stroke-width: 2; }
.chart .c-leg-lbl { font-size: 16px; fill: var(--ink-muted); font-weight: 500; }

/* leaders joining a median label back to its line when the collision pass
   had to move it; they follow their label's visibility exactly */
.chart .c-lead { fill: none; stroke-width: 1; opacity: 0.45;
  stroke: var(--ink-faint); transition: opacity 0.15s var(--ease); }
.chart .c-lead.k-f { stroke: var(--q-sensitivity); opacity: 0; }
.chart .c-lead.k-e { stroke: var(--q-forcing); opacity: 0; }
.chart[data-sens-hl="forcing"]   .c-lead.k-f,
.chart[data-sens-hl="effective"] .c-lead.k-e { opacity: 0.7; }

/* sensitivity chart: the two definitions ARE the legend and the control.
   Hover or focus previews, click pins; a tap on a touch screen fires both and
   therefore pins. Every study stays drawn — the other kind only dims. */
.sens-defs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px;
}
@media (max-width: 720px) { .sens-defs { grid-template-columns: 1fr; } }
.sens-def {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
  padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--rule); background: var(--paper);
  transition: opacity 0.18s var(--ease), border-color 0.18s var(--ease),
              background 0.18s var(--ease);
}
.sens-def:hover, .sens-def:focus-visible { border-color: var(--ink-faint); outline: none; }
.sens-def .sens-term {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.sens-def .sens-label { display: inline; }
.sens-def .sens-label var { font-family: var(--font-body); font-style: italic; }
.sens-def .sens-label sub { font-size: 0.72em; }
.sens-def .sens-swatch {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
}
.sens-def.k-f .sens-swatch { background: var(--q-sensitivity); }
.sens-def.k-e .sens-swatch { background: var(--q-forcing); }
.sens-def .sens-note { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.sens-def .sens-note em { font-style: italic; color: var(--ink); }
.chart[data-sens-hl="forcing"]   .sens-def.k-e,
.chart[data-sens-hl="effective"] .sens-def.k-f { opacity: 0.45; }
.chart[data-sens-hl="forcing"]   .sens-def.k-f { border-color: var(--q-sensitivity); }
.chart[data-sens-hl="effective"] .sens-def.k-e { border-color: var(--q-forcing); }

.sens-explain {
  margin: 12px 2px 0; font-size: 14.5px; line-height: 1.55;
  color: var(--ink-muted); max-width: 74ch;
}
.sens-explain strong { color: var(--ink); font-weight: 600; }
.sens-explain .sens-hint { color: var(--ink-faint); }

/* the dim itself. Opacity goes on `.c-pt`, never on the `g.c-in` wrapper —
   that carries the entrance transition-delay (up to 800 ms) and would make the
   hover feel broken. Bars dim harder than dots: they are 3.5px strokes and
   would otherwise still dominate. */
.chart .c-pt, .chart .c-callout, .chart .c-callout-txt,
.chart .c-kmed, .chart .c-kmed-txt { transition: opacity 0.15s var(--ease); }
.chart[data-sens-hl] .c-pt { opacity: 0.25; }
.chart[data-sens-hl] line.c-pt.bar { opacity: 0.15; }
.chart[data-sens-hl] .c-callout, .chart[data-sens-hl] .c-callout-txt { opacity: 0.3; }
.chart[data-sens-hl="forcing"]   .c-pt.k-f,
.chart[data-sens-hl="effective"] .c-pt.k-e { opacity: 1; }
.chart[data-sens-hl="forcing"]   line.c-pt.k-f.bar,
.chart[data-sens-hl="effective"] line.c-pt.k-e.bar { opacity: 0.85; }
.chart[data-sens-hl="forcing"]   .c-callout.k-f,
.chart[data-sens-hl="forcing"]   .c-callout-txt.k-f,
.chart[data-sens-hl="effective"] .c-callout.k-e,
.chart[data-sens-hl="effective"] .c-callout-txt.k-e { opacity: 1; }

/* per-kind medians: always drawn, faint, gaining weight with their kind */
.chart .c-kmed { stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.32; fill: none; }
.chart .c-kmed.k-f { stroke: var(--q-sensitivity); }
.chart .c-kmed.k-e { stroke: var(--q-forcing); }
.chart .c-kmed-txt { font-size: 13px; font-weight: 600; opacity: 0;
  stroke: var(--paper); stroke-width: 3.5; paint-order: stroke fill; }
.chart .c-kmed-txt.k-f { fill: var(--q-sensitivity); }
.chart .c-kmed-txt.k-e { fill: var(--q-forcing); }
.chart[data-sens-hl="forcing"]   .c-kmed.k-f,
.chart[data-sens-hl="effective"] .c-kmed.k-e { opacity: 1; }
.chart[data-sens-hl="forcing"]   .c-kmed-txt.k-f,
.chart[data-sens-hl="effective"] .c-kmed-txt.k-e { opacity: 1; }
.chart[data-sens-hl="forcing"]   .c-kmed.k-e,
.chart[data-sens-hl="effective"] .c-kmed.k-f { opacity: 0.12; }

.chart .c-lane { font-size: 16.5px; fill: var(--ink); font-weight: 600; }
.chart .c-lane.sub { font-size: 14px; fill: var(--ink-muted); font-weight: 400; }

.chart .c-pt { fill: var(--q-sensitivity); stroke: var(--paper); stroke-width: 2; }
.chart line.c-pt.bar { stroke: var(--q-sensitivity); stroke-width: 3.5; fill: none; stroke-linecap: round; opacity: 0.85; }
.chart .c-pt.eff { fill: var(--q-forcing); }
.chart line.c-pt.eff.bar { stroke: var(--q-forcing); }
.chart .c-pt.bench { fill: var(--oxblood); }
.chart line.c-pt.bench.bar { stroke: var(--oxblood); }
.chart .c-pt.lane-baseline.summer { fill: var(--moss); }
.chart .c-pt.lane-restoring.summer { fill: var(--slate); }
.chart .c-pt.lane-source.summer { fill: var(--oxblood); }
.chart .c-pt.lane-baseline.winter { fill: var(--paper); stroke: var(--moss); }
.chart .c-pt.lane-restoring.winter { fill: var(--paper); stroke: var(--slate); }
.chart .c-pt.lane-source.winter { fill: var(--paper); stroke: var(--oxblood); }
.chart line.c-pt.bar.lane-baseline { stroke: var(--moss); }
.chart line.c-pt.bar.lane-restoring { stroke: var(--slate); }
.chart line.c-pt.bar.lane-source { stroke: var(--oxblood); }
.chart line.c-pt.bar.winter { opacity: 0.55; }
.chart .c-fb-baseline-band-label {
  fill: var(--ink-faint);
  font-size: 13px;
  font-weight: 600;
}
.chart .c-hit { stroke: transparent; stroke-width: 18; cursor: pointer; }

/* ---- 150-year timeline --------------------------------------------------- */
.chart .tl-axis { stroke: var(--rule); stroke-width: 1; }
.chart .tl-tick { stroke: var(--rule); stroke-width: 1; }
.chart .tl-break { stroke: var(--ink-faint); stroke-width: 1.5; }
.chart .tl-tickl { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-faint); }
.chart .tl-note { font-family: var(--font-body); font-size: 12px; fill: var(--ink-faint); }
.chart .tl-bar { fill: var(--slate); fill-opacity: 0.6; }
/* decades: same bar width/style, only a warmer fill sets them apart */
.chart .tl-bar.tl-decade { fill: oklch(0.64 0.07 55); fill-opacity: 0.75; }
.chart .tl-axis-dec { stroke: oklch(0.64 0.07 55); stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart .tl-declbl { font-family: var(--font-mono); font-size: 11px; fill: oklch(0.52 0.08 55); }
.chart .tl-conn { stroke: var(--oxblood); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
.chart .tl-dot { fill: var(--oxblood); stroke: var(--paper); stroke-width: 2; cursor: pointer; transition: r 0.12s var(--ease); }
.chart .tl-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; fill: var(--ink); cursor: pointer; }
.chart .tl-high:hover .tl-dot { r: 8; }
.chart .tl-high:hover .tl-conn { opacity: 0.9; }
.chart .tl-high:hover .tl-label { fill: var(--oxblood); }
.chart-tip .tip-sub { display: block; margin-top: 2px; font-style: italic; opacity: 0.8; }
.chart .c-callout { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; }
.chart .c-callout-txt { font-size: 14.5px; fill: var(--oxblood-dim); font-weight: 600; }
/* the benchmark-line callout: haloed text + a leader tinted to match its line */
.chart .c-callout-txt.bench { stroke: var(--paper); stroke-width: 3.5; paint-order: stroke fill; }
.chart .c-callout.bench { stroke: var(--oxblood); opacity: 0.45; }

.chart .chart-dot { cursor: pointer; transition: r 0.12s var(--ease); }
.chart circle.chart-dot:hover { r: 10; }

.chart .c-in { opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.chart .c-in.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .chart .c-in { transition: none; opacity: 1; transform: none; }
}

.chart-fallback {
  font-family: var(--font-body);
  font-size: var(--fs-small) !important;
  color: var(--ink-muted) !important;
}

.chart-tip {
  position: fixed;
  z-index: 90;
  max-width: 320px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: var(--radius);
  pointer-events: none;
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.25);
}
.chart-tip em { font-style: italic; color: var(--paper); opacity: 0.85; }
.chart-tip .tip-cta { display: block; margin-top: 3px; font-size: 12px; opacity: 0.7; }
.chart-tip .tip-dim { opacity: 0.72; font-size: 12.5px; }

/* provisional flag on figures whose numbers are still under review */
.flag-provisional {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--conf-medium-ink, #7a5a12);
  background: var(--conf-medium-tint, #f6ecd9);
  border: 1px solid var(--conf-medium, #c9992e);
  border-radius: 999px;
  padding: 2px 10px;
  margin-right: 8px;
  vertical-align: 1px;
}

/* zoom affordance + lightbox */
.fig > img.zoomable { cursor: zoom-in; }
.fig .fig-zoom-hint {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  margin-top: var(--sp-2);
  text-align: right;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lb-stage {
  width: 94vw;
  height: 88vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  transition: transform 0.06s linear;
  user-select: none;
  cursor: grab;
}
.lb-stage img:active { cursor: grabbing; }
.lb-close {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 34px;
  line-height: 1;
  color: var(--paper);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.8;
}
.lb-close:hover { opacity: 1; }
.lb-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  color: var(--paper);
  opacity: 0.65;
}

/* ---- scrollspy rail ------------------------------------------------------ */
.story-rail {
  position: fixed;
  left: var(--sp-5);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  z-index: 40;
}
.story-rail a { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink-faint); }
.story-rail .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule); border: 1px solid var(--ink-faint);
  flex: none;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}
.story-rail .lbl {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  white-space: nowrap;
}
.story-rail a:hover .lbl { opacity: 1; transform: none; }
.story-rail a:hover .dot { background: var(--ink-faint); }
.story-rail a.is-active .dot { background: var(--oxblood); border-color: var(--oxblood); transform: scale(1.25); }
.story-rail a.is-active .lbl { opacity: 1; transform: none; color: var(--oxblood); }

/* ---- reveal-on-scroll ---------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ======================================================================== */
/* Corpus explorer (corpus.html)                                            */
/* ======================================================================== */
.explorer {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
}
.explorer-head h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
}
.explorer-head p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 760px;
  margin: 0 0 var(--sp-5);
}

/* Two deliberate rows: the search spans the full text measure, and the two
   facet groups share the row beneath it. The column gap is wider than the
   gap between chips inside a group (--sp-2), so Question and Era read as two
   groups rather than one run of eight chips. */
.explorer-controls {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--sp-3);
  column-gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-4);
  position: sticky;
  top: 52px;
  z-index: 30;
}
.explorer-controls input[type="search"] {
  flex: 1 1 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
}
.explorer-controls input[type="search"]:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-color: var(--slate);
}

.filter-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filter-group .fg-label {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-right: 2px;
}
.fchip {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.12s var(--ease), background 0.12s var(--ease);
}
.fchip:hover { border-color: var(--ink-faint); }
.fchip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fchip.on.t-i   { background: var(--q-forcing);     border-color: var(--q-forcing); }
.fchip.on.t-ii  { background: var(--q-sensitivity); border-color: var(--q-sensitivity); }
.fchip.on.t-iii { background: var(--q-feedback);    border-color: var(--q-feedback); }

/* ---- question chip + its evidence requirement --------------------------- */
/* Two segments reading as one control: the question, and the strength of
   evidence required for it. Joined rather than spaced, so the pair is
   obviously one thing and not a fourth and fifth question. */
.fchip-pair { display: inline-flex; align-items: stretch; }
.fchip-pair .fchip:first-child:has(+ .fc-lvl:not([hidden])) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* A display value on the element itself beats the UA's [hidden] rule, so the
   segment has to be hidden explicitly or it leaves an empty stub. */
.fc-lvl[hidden] { display: none; }
.fc-lvl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--ink-muted);
}
.fc-lvl .fc-lvl-t { font-size: var(--fs-micro); }
.fc-lvl:hover { color: var(--ink); }

/* ---- year facet (era chips) -------------------------------------------- */
/* The count on each chip is the histogram: five figures that say the field is
   young without spending a chart on it. Tabular figures hold the width, and
   weight rather than a fainter ink sets the count back from its label, since
   --ink-faint at this size fails contrast. On an active chip both spans
   inherit the paper ink from .fchip.on. */
.fchip .fcount {
  margin-left: var(--sp-1);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
/* Same focus treatment as the search box. The transparent outline keeps a
   paintable ring under forced-colors, where box-shadow is dropped. */
.fchip:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--slate);
  box-shadow: var(--focus);
}

.explorer-count {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  margin: 0;
  /* Pushed to the end of the facet row: the filters are the cause, the count
     is the effect, and it reads last. Falls onto its own line when the row
     runs out of width. */
  margin-left: auto;
  white-space: nowrap;
}
.explorer-count strong { color: var(--oxblood); font-weight: 600; }

/* paper list */
.paper-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.paper-item {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.paper-row {
  display: grid;
  /* The year column was 3.5ch while every year is four digits, so the year
     overran its track and collided with the title. max-content sizes it to
     the widest year, and tabular figures keep that width identical on every
     row, so the titles still align. */
  grid-template-columns: max-content 1fr auto;
  column-gap: var(--sp-5);
  row-gap: var(--sp-2);
  align-items: baseline;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
}
.paper-row:hover .ptitle { color: var(--oxblood); }
.paper-row .pyear {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.paper-row .pmain { min-width: 0; }
.paper-row .ptitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: 1.35;
  display: block;
}
.paper-row .pmeta {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  display: block;
  margin-top: 2px;
}
.paper-row .pchips { display: flex; gap: 5px; align-items: center; flex: none; }

.tchip {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.tchip.t-i   { background: var(--q-forcing-tint);     color: var(--q-forcing);     border-color: var(--q-forcing); }
.tchip.t-ii  { background: var(--q-sensitivity-tint); color: var(--q-sensitivity); border-color: var(--q-sensitivity); }
.tchip.t-iii { background: var(--q-feedback-tint);    color: var(--q-feedback);    border-color: var(--q-feedback); }
.tchip.t-mix { background: var(--topic-mix-tint); color: var(--topic-mix); border-color: var(--topic-mix); }

/* Evidence dots: HUE says which question, FORM says what the extraction
   found. The two were previously separate colour systems sitting next to
   the topic badge in the same visual language — a reader reads them as
   restating each other, but they disagree on well over a third of rows
   (the badge is the adjudicated topic; the dots are what full-text
   extraction actually yielded). Sharing the badge's hues makes the dots a
   per-question readout of that badge, so a paper badged Sensitivity whose
   S dot is empty reads as a fact rather than a contradiction.
   Encoding status as form, not colour, also stops the marks depending on
   hue discrimination: the old moss/amber pair was confusable, and the
   "not addressed" dot at --rule was near-invisible against the card. */
.evdot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  background: transparent;
  border: 1.5px solid var(--c, var(--ink-faint));
}
.evdot.q-i   { --c: var(--q-forcing); }
.evdot.q-ii  { --c: var(--q-sensitivity); }
.evdot.q-iii { --c: var(--q-feedback); }
/* solid = found, ring = partial, hairline empty ring = not addressed */
.evdot.found   { background: var(--c, var(--ink-faint)); }
.evdot.partial { background: transparent; border-width: 3px; }
/* --ink-faint, not --rule: the old "not addressed" dot used --rule at 88%
   lightness and was all but invisible, so "no evidence" and "no dot" read
   the same. */
.evdot.absent  { border-width: 1px; border-color: var(--ink-faint); }

/* Key to the dots, carried in the sticky pane. Sits on its own line under
   the facet row; the flex-basis of 100% is what puts it there. */
/* A legend, not a row of controls. It sat at chip size in the chips' own
   grammar and read as another filter group; it is now smaller, labelled
   "Key" like the facet labels, and explicitly not clickable. */
.evkey {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;   /* single-line it overflowed the pane below ~430px */
  align-items: center;
  gap: 5px;
  row-gap: var(--sp-2);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  line-height: 1;
  cursor: default;
}
.evkey .evdot { margin-left: 2px; width: 7px; height: 7px; }
.evkey-t { margin-left: var(--sp-2); }
.evkey-sep {
  width: 1px;
  height: 12px;
  background: var(--rule);
  margin: 0 var(--sp-3);
}

/* ---- how-to-use panel --------------------------------------------------- */
/* The opener sits at the end of the key line, which has width to spare; the
   facet row above it does not. Visible text rather than a "?" icon alone —
   it names itself, and teaches the shortcut where the reader finds it. */
.help-open {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
}
.help-open:hover { color: var(--oxblood); text-decoration-color: currentColor; }
.help-open:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus);
  border-radius: var(--radius);
}
kbd {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.9em;
  line-height: 1;
  padding: 2px 5px;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink-muted);
}

#help {
  max-width: 60ch;
  max-height: 80vh;
  overflow: auto;
  padding: var(--sp-6);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
#help::backdrop { background: color-mix(in oklab, var(--ink) 40%, transparent); }
#help h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
}
#help h3 {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: var(--sp-5) 0 var(--sp-3);
}
#help p {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
}
/* Sample chips are inert illustrations, not controls. */
#help .fchip { cursor: default; vertical-align: baseline; }
#help .evdot { vertical-align: baseline; }
.help-dismiss { float: right; margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0 0; }
.help-dismiss button {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-faint);
  padding: var(--sp-1) var(--sp-2);
}
.help-dismiss button:hover { color: var(--oxblood); }
/* ---- field explanations -------------------------------------------------- */
/* A quiet marker beside a field label, not a decoration: it only earns its
   place when the reader wonders what a term means. */
.xinfo {
  margin-left: 5px;
  width: 13px;
  height: 13px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: none;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 9px;
  font-style: italic;
  line-height: 1;
  cursor: help;
  vertical-align: 1px;
}
.xinfo:hover { color: var(--oxblood); border-color: var(--oxblood); }
.xinfo:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus);
}
#fieldinfo {
  max-width: 46ch;
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
#fieldinfo::backdrop { background: color-mix(in oklab, var(--ink) 30%, transparent); }
#fieldinfo .fi-term {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 var(--sp-3);
}
#fieldinfo .fi-def {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.6;
  margin: 0;
  color: var(--ink);
}

/* Composed structured values: one readable line, not a card of field labels. */
.xparam .xq {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.xparam .xctx { color: var(--ink-muted); }
.xparam .xctx::before { content: "· "; }
.xparam .xcalc {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}

.help-keys {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  color: var(--ink-muted) !important;
  font-size: var(--fs-micro) !important;
}

/* expanded detail */
.paper-detail {
  border-top: 1px solid var(--rule-subtle);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.paper-detail .dmeta {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  margin: 0 0 var(--sp-3);
}
.paper-detail .dmeta a { color: var(--oxblood); }
/* .dabstract removed with the abstracts themselves — publisher copyright, and
   this host is public. See PUBLIC_DETAIL_FIELDS in scripts/build_atlas_data.py. */
.block-grid { display: flex; flex-direction: column; gap: var(--sp-3); }
.xblock {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  padding: var(--sp-4);
}
.xblock.absent { opacity: 0.65; }
.xblock-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.xblock-head .xname {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink);
}
.xstatus {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
}
.xstatus.found   { background: var(--conf-high-tint);   color: var(--conf-high-ink);   border-color: var(--conf-high); }
.xstatus.partial { background: var(--conf-medium-tint); color: var(--conf-medium-ink); border-color: var(--conf-medium); }
.xfields { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--sp-4); }
.xfields dt {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  padding-top: 2px;
}
.xfields dd {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}
.xfields dd ul { margin: 0; padding-left: 1.1em; }
.xfields dd li { margin-bottom: 2px; }
.xparam {
  border-left: 2px solid var(--rule);
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-2);
}

/* --- typed values as a table ------------------------------------------------
   The evidence is rectangular, so it is set as a table: a reader can run an eye
   down the number column, and every cell is a field a query could reach. The
   quantity is named once in the caption rather than repeated on each row, and
   `form` gets its own spelled-out column instead of an unexplained delta. */
.xscroll { overflow-x: auto; }

.xvals {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-small);
}
.vh {  /* visually hidden, still read aloud */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.xvals thead th {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-align: left;
  padding: 0 var(--sp-3) 4px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
/* A unit is case-sensitive physics: uppercasing "W m^-2" gives "W M^-2", and
   capital M is mega. The header's unit is exempt from the caption styling. */
.xvals thead th .u-head {
  text-transform: none;
  letter-spacing: 0;
}
/* One info button per column: a header word like "Kind" is short enough to be
   read two ways, and the explanation belongs where the reader meets it. Sized
   below the header text so it reads as an affordance rather than as content. */
.xvals thead th .xcolinfo {
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 8px;
  font-style: italic;
  line-height: 1;
  width: 12px;
  height: 12px;
  padding: 0;
  vertical-align: 1px;
  text-transform: none;
  letter-spacing: 0;
}
.xvals thead th .xcolinfo:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
}
.xvals tbody th,
.xvals td {
  padding: 5px var(--sp-3) 5px 0;
  border-bottom: 1px solid var(--rule-subtle);
  vertical-align: baseline;
  text-align: left;
  font-weight: 400;
}
.xvals tbody tr:last-child th,
.xvals tbody tr:last-child td { border-bottom: 0; }
.xvals tbody tr:hover { background: var(--paper-sink); }

.xvals .xwhat {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}
.xvals .xcase,
.xvals .xq-sub {
  display: block;
  font-size: var(--fs-micro);
  color: var(--ink-faint);
}
.xvals .xkind { color: var(--ink-muted); white-space: nowrap; }
/* Says "our record has no class for this", which an em dash could not. Set
   lighter than a real label so it does not read as the paper's own words. */
/* An intentionally empty cell. Dimmed so it reads as "nothing here" rather than
   as content, and one glyph rather than a phrase so it does not repeat words down
   a column — the header's info button carries the explanation. */
.xvals .xnone { color: var(--ink-faint); opacity: 0.6; }
.xvals .xunattributed {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  color: var(--ink-faint);
}
.xvals .xbasis { white-space: nowrap; }
.xvals .xflag {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0 6px;
  margin-left: 5px;
  color: var(--ink-muted);
}

/* The numeral carries the ink; the unit steps back but stays legible. */
.xvals .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}
.xvals .num .u { font-weight: 400; color: var(--ink-muted); }
.xvals thead th.num { text-align: right; }

.xvals .xwhere,
.xvals .xwhen { color: var(--ink-muted); }
.xvals .xsrc { text-align: right; width: 1.6em; }
.xvals .xpara {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 1em;
  padding: 0 2px;
}
.xvals .xpara:hover { color: var(--ink); }

/* Nothing the extraction recorded is invisible: prose lines with no typed twin
   stay reachable here rather than being dropped. */
.xresidual { margin-top: var(--sp-2); }
.xresidual summary {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  cursor: pointer;
}
.xresidual ul {
  margin: var(--sp-2) 0 0;
  padding-left: 1.1em;
  font-size: var(--fs-small);
  color: var(--ink);
}

/* The extraction, kept but marked: real numbers, not the review's answer. Set
   inside a rule so the boundary is visible even once opened. */
.xfields dt.xquiet { color: var(--ink-faint); }
.xresidual.xworking > summary { color: var(--ink-muted); }
.xresidual.xworking[open] {
  border-left: 2px solid var(--rule);
  padding-left: var(--sp-3);
  margin-top: var(--sp-2);
}
.xworking-note {
  margin: var(--sp-2) 0;
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  max-width: 46em;
}
.xworking-part + .xworking-part { margin-top: var(--sp-3); }

/* Where a block has no reviewed layer, the typed table is its evidence and stands
   open — so the caveat has to be read, not clicked. */
.xworking-note.xworking-lead {
  margin: 0 0 var(--sp-2);
  color: var(--ink-muted);
}
.xworking-note.xworking-lead strong { color: var(--ink); }

/* The answer to the question the block is named for, stated before any table —
   because on most Sensitivity papers the answer is that there isn't one. */
.xverdict {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  max-width: 46em;
}
.xfields.xrestated { margin: var(--sp-2) 0 0; }

/* Phone: rows restack as stanzas. The role attributes in the markup keep the
   table semantics that changing `display` would otherwise strip. */
@media (max-width: 640px) {
  .xvals thead { display: none; }
  .xvals, .xvals tbody { display: block; }
  .xvals tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    grid-template-areas:
      "what  value src"
      "kind  when  when"
      "where where where";
    column-gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--rule-subtle);
  }
  .xvals tbody th, .xvals td { border: 0; padding: 0; }
  .xvals tbody th.xwhat { grid-area: what; }
  .xvals td.xkind  { grid-area: kind;  font-size: var(--fs-micro); }
  .xvals td.num    { grid-area: value; }
  .xvals td.xsrc   { grid-area: src; }
  .xvals td.xwhere { grid-area: where; font-size: var(--fs-micro); }
  .xvals td.xwhen  { grid-area: when;  font-size: var(--fs-micro);
                     text-align: right; }
}

.explorer-empty {
  font-family: var(--font-body);
  color: var(--ink-muted);
  text-align: center;
  padding: var(--sp-7) 0;
}
.explorer-note {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  margin-top: var(--sp-5);
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1180px) { .story-rail .lbl { display: none; } }
@media (max-width: 900px) {
  .story-rail { display: none; }
  .explore-grid, .lens-grid { grid-template-columns: 1fr; }
  .paper-row { grid-template-columns: 1fr; gap: 4px; }
  .paper-row .pchips { justify-content: flex-start; }
  .xfields { grid-template-columns: 1fr; gap: 2px; }
  .xfields dd { margin-bottom: var(--sp-2); }
}
@media (max-width: 560px) {
  .pub-nav { flex-wrap: wrap; row-gap: var(--sp-2); }
  .pub-nav .links {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    gap: var(--sp-2);
  }
  .fstep { grid-template-columns: 1fr; grid-template-areas: "name" "note" "count"; }
  .fcount { font-size: 1.25rem; }
  .story-hero-stats .stat { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .ecard, .story-rail .dot, .story-rail .lbl { transition: none; }
}