:root{
  color-scheme: light;
  --bg-page:#EEEAE0; --bg-surface:#F9F7F0; --bg-raised:#F3EEE1;
  --ink-1:#23201A; --ink-2:#5B5347; --ink-3:#8C8272;
  --line:#DAD3C2; --line-strong:#C7BEA8;
  --accent:#7A2E2E; --accent-ink:#F7F0E6; --accent-2:#2F4A3C;
  --warn:#8A5A17; --warn-bg:#F3E4C8;
  --focus:#7A2E2E;
  --f1:#2a78d6; --f2:#eb6834; --f3:#1baf7a; --f4:#eda100; --f5:#e87ba4;
  --f1-tint:#E7EEF8; --f2-tint:#FAEBE1; --f3-tint:#E4F3EC; --f4-tint:#FAEFDA; --f5-tint:#F9E9EE;
  --shadow: 0 10px 26px -12px rgba(35,32,26,0.22), 0 2px 6px -2px rgba(35,32,26,0.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg-page:#1B1712; --bg-surface:#221D17; --bg-raised:#241F19;
    --ink-1:#EDE6D8; --ink-2:#C2B8A3; --ink-3:#8C8272;
    --line:#332C22; --line-strong:#453C2F;
    --accent:#C9645A; --accent-ink:#1B1712; --accent-2:#6FA98C;
    --warn:#D9A857; --warn-bg:#332612;
    --focus:#C9645A;
    --f1:#3987e5; --f2:#d95926; --f3:#199e70; --f4:#c98500; --f5:#d55181;
    --f1-tint:#1A2430; --f2-tint:#2C1D14; --f3-tint:#12251E; --f4-tint:#2A2012; --f5-tint:#2A1A20;
    --shadow: 0 10px 26px -12px rgba(0,0,0,0.5), 0 2px 6px -2px rgba(0,0,0,0.3);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg-page:#1B1712; --bg-surface:#221D17; --bg-raised:#241F19;
  --ink-1:#EDE6D8; --ink-2:#C2B8A3; --ink-3:#8C8272;
  --line:#332C22; --line-strong:#453C2F;
  --accent:#C9645A; --accent-ink:#1B1712; --accent-2:#6FA98C;
  --warn:#D9A857; --warn-bg:#332612;
  --focus:#C9645A;
  --f1:#3987e5; --f2:#d95926; --f3:#199e70; --f4:#c98500; --f5:#d55181;
  --f1-tint:#1A2430; --f2-tint:#2C1D14; --f3-tint:#12251E; --f4-tint:#2A2012; --f5-tint:#2A1A20;
  --shadow: 0 10px 26px -12px rgba(0,0,0,0.5), 0 2px 6px -2px rgba(0,0,0,0.3);
}

/* Optional page-background tint, picked from the swatch row in the
   masthead (js/app.js). Five are light pastels, which pin the theme to
   light (data-theme="light"); the sixth ("dark") pins to dark instead —
   the swatch click handler sets both attributes together, choosing which
   based on which swatch was clicked. Same specificity as the
   data-theme="dark"/[data-theme="light"] blocks and declared after them,
   so a bg tint always wins on the rare chance both attributes are ever
   present at once. Only --bg-page/--bg-surface/--bg-raised shift for the
   dark swatch (ink/accent/f1-f5 colors still come from the
   data-theme="dark" block above); only --bg-page/--bg-raised shift for
   the light ones, leaving --bg-surface neutral so content reads as cream
   cards on a tinted page. "cream" reproduces the site's original default
   palette values exactly — it exists as its own explicit, always-visible
   swatch (rather than only being reachable by re-clicking whatever color
   is active) so the original look stays a first-class, one-click option
   going forward. */
:root[data-bg="cream"]{ --bg-page:#EEEAE0; --bg-raised:#F3EEE1; }
:root[data-bg="green"]{ --bg-page:#D9F0DE; --bg-raised:#EAF7ED; }
:root[data-bg="pink"]{ --bg-page:#FBDCE9; --bg-raised:#FDEEF3; }
:root[data-bg="blue"]{ --bg-page:#D9E9FB; --bg-raised:#EAF2FD; }
:root[data-bg="purple"]{ --bg-page:#EBE0FB; --bg-raised:#F4EEFD; }
:root[data-bg="dark"]{ --bg-page:#0D1220; --bg-surface:#141A2C; --bg-raised:#182036; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{
  background:var(--bg-page); color:var(--ink-1);
  font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
}
.mono{ font-family:"IBM Plex Mono",ui-monospace,"Consolas",monospace; }
.display{ font-family:"Fraunces", Georgia, serif; }

/* the tree app occupies one viewport-height screen (masthead + toggle bar +
   canvas); the references and warm-up sections below are reached by
   scrolling the page itself */
.viewport-shell{ height:100vh; overflow:hidden; display:flex; flex-direction:column; }
.app-shell{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; overflow:hidden; }

/* ---------- Masthead ---------- */
.masthead{
  flex:0 0 auto; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:22px 32px 14px; background:var(--bg-page); border-bottom:3px double var(--line-strong);
}
.masthead-id .eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:600; display:block; margin-bottom:4px;
}
.masthead-id h1{
  font-family:"Fraunces", Georgia, serif; font-weight:600; font-style:italic; font-size:27px; margin:0;
  color:var(--ink-1); letter-spacing:-.01em; line-height:1.05;
}
.masthead-right{ display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:20px; flex-wrap:wrap; }
.masthead-nav{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.masthead-nav a{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; padding-bottom:3px; border-bottom:1.5px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.masthead-nav a:hover, .masthead-nav a:focus-visible{ color:var(--accent); border-bottom-color:var(--accent); }

.bg-swatches{ display:flex; gap:6px; }
.bg-swatch{
  width:18px; height:18px; padding:0; border-radius:4px; border:1px solid var(--line-strong); cursor:pointer;
  transition:transform .12s ease; outline-offset:2px;
}
.bg-swatch:hover{ transform:translateY(-1px); }
.bg-swatch:focus-visible{ outline:2px solid var(--focus); }
.bg-swatch.active{ outline:2px solid var(--accent); }
.bg-swatch.sw-cream{ background:#EEEAE0; }
.bg-swatch.sw-green{ background:#D9F0DE; }
.bg-swatch.sw-pink{ background:#FBDCE9; }
.bg-swatch.sw-blue{ background:#D9E9FB; }
.bg-swatch.sw-purple{ background:#EBE0FB; }
.bg-swatch.sw-dark{ background:#141A2C; border-color:#3A4258; }

header{
  display:flex; flex-wrap:wrap; row-gap:10px; align-items:center; gap:20px; padding:11px 32px;
  background:var(--bg-surface); border-bottom:1px solid var(--line); flex:0 0 auto; z-index:20;
}
.toggle-group{ display:flex; gap:18px; }
.toggle-group button{
  border:none; background:transparent; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-weight:600;
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; padding:6px 0; cursor:pointer;
  border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.toggle-group button.active{ color:var(--accent); border-bottom-color:var(--accent); }
.toggle-group button:not(.active):hover{ color:var(--ink-1); }
.toggle-group button:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.search-wrap{ position:relative; flex:0 0 230px; }
.search-wrap input{
  width:100%; padding:7px 12px 7px 30px; border-radius:3px; border:1px solid var(--line-strong);
  background:var(--bg-page); color:var(--ink-1); font-family:"Source Serif 4",serif; font-size:13.5px;
}
.search-wrap input:focus{ outline:2px solid var(--focus); outline-offset:1px; }
.search-wrap svg{ position:absolute; left:9px; top:50%; transform:translateY(-50%); opacity:.5; }

.stat-strip{ display:flex; gap:18px; margin-left:auto; }
.stat{ text-align:right; }
.stat .n{ font-family:"Fraunces",serif; font-weight:600; font-size:17px; color:var(--ink-1); }
.stat .l{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }

.legend{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:8px 32px; background:var(--bg-raised); border-bottom:1px solid var(--line); font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-2); flex:0 0 auto; }
.legend .lg-title{ font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; font-size:10px; margin-right:2px; }
.legend .chip{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; cursor:default; }
.legend .swatch{ width:11px; height:11px; border-radius:2px; flex:0 0 auto; display:inline-block; }

main{ flex:1 1 auto; display:flex; min-height:0; }
.canvas-wrap{ flex:1 1 auto; position:relative; overflow:auto; background:var(--bg-page);
  background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size:24px 24px; }
.tree-diagram{ position:relative; margin:36px 40px; }
.tree-connectors{ position:absolute; top:0; left:0; pointer-events:none; overflow:visible; }

/* Challenges tree lives in normal page flow (not the pinned 100vh shell),
   so it gets its own bordered frame instead of relying on a viewport-height
   ancestor; .canvas-wrap/.tree-diagram/.tree-connectors/.detail-panel are
   otherwise identical to the main taxonomy's. */
.legend-panel{ border-top:1px solid var(--line); }
/* Bounded height (unlike the pinned-viewport Taxonomy tree, this section has
   no 100vh ancestor to inherit a height from) so a detail panel that grows
   past the tree's own height scrolls internally instead of stretching the
   whole shell — and pushing the page layout — taller than the tree.
   min-height:0 overrides the flex default (min-height:auto) that would
   otherwise let a tall child's content force the row past `height`. */
.challenges-shell{ display:flex; align-items:stretch; border-bottom:1px solid var(--line); height:min(760px, 75vh); }
.challenges-shell .canvas-wrap{ min-height:0; }
.challenges-shell .detail-panel{ min-height:0; }

.box{ position:absolute; border-radius:3px; border:1px solid var(--line-strong); background:var(--bg-surface);
  box-shadow:0 1px 2px rgba(35,32,26,.05); cursor:pointer; display:flex; flex-direction:column; justify-content:center;
  padding:8px 14px; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; overflow:hidden; }
.box:hover{ transform:translateY(-1px); box-shadow:var(--shadow); border-color:var(--ink-3); }
.box:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.box.selected{ outline:2px solid var(--focus); outline-offset:1px; }
.box .name{ font-family:"Fraunces",serif; font-weight:600; font-size:14px; line-height:1.26; color:var(--ink-1); }
.box .sub{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--ink-3); margin-top:2px; text-transform:uppercase; letter-spacing:.04em; }
.box .sub-question{ font-family:"Source Serif 4",serif; font-style:italic; font-size:11.5px; line-height:1.28; color:var(--ink-2); margin-top:3px; }
.box .refs{ display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.ref-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px;
  border-radius:2px; background:var(--bg-raised); border:1px solid var(--line-strong);
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600; color:var(--ink-2); }
.ref-badge.small{ min-width:22px; height:22px; font-size:10.5px; flex:0 0 auto; }
.ref-note{ font-family:"Source Serif 4",serif; font-style:italic; font-size:10.5px; color:var(--ink-3); }

.box.root{ background:var(--accent); border-color:var(--accent); }
.box.root .name{ color:var(--accent-ink); font-size:15.5px; font-style:italic; }
.box.root .sub{ color:var(--accent-ink); opacity:.85; }

.box.family{ border-width:1.5px; border-left-width:4px; }
.box.family .name{ font-size:14.5px; }

.box.leaf{ border-left-width:4px; }

path.connector{ fill:none; stroke:var(--line-strong); stroke-width:1.4px; }

.detail-panel{ flex:0 0 380px; max-width:380px; background:var(--bg-surface); border-left:1px solid var(--line); overflow-y:auto; }
.detail-panel .empty{ padding:44px 26px; color:var(--ink-3); font-size:13.5px; line-height:1.6; display:flex; flex-direction:column; gap:10px; font-style:italic; }

.dp-header{ padding:20px 22px 15px; border-bottom:1px solid var(--line); }
.dp-tag{ display:inline-flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); margin-bottom:9px; }
.dp-tag .swatch{ width:9px; height:9px; border-radius:2px; }
.dp-title{ font-family:"Fraunces",serif; font-weight:600; font-size:19px; line-height:1.28; margin:0; color:var(--ink-1); text-wrap:balance; }
.dp-body{ padding:18px 22px 30px; display:flex; flex-direction:column; gap:16px; }
.dp-illustration{ margin:2px 0 4px; padding:14px 14px 11px; background:var(--bg-raised); border:1px solid var(--line); border-radius:3px; }
.dp-illustration svg{ width:100%; height:auto; display:block; overflow:visible; }
.dp-illustration figcaption{ margin-top:9px; font-family:"Source Serif 4",serif; font-style:italic; font-size:11.5px; line-height:1.5; color:var(--ink-3); }
.dp-illustration .il-lbl{ font-family:"IBM Plex Mono",monospace; font-size:8.5px; fill:var(--ink-2); }
.dp-illustration .il-cell{ fill:var(--bg-surface); stroke:var(--line-strong); stroke-width:1.2px; }
.dp-illustration .il-node{ fill:var(--bg-surface); stroke:var(--line-strong); stroke-width:1.4px; }
.dp-illustration .il-line{ stroke:var(--ink-3); stroke-width:1.3px; fill:none; }
.dp-illustration .il-byte{ fill:var(--bg-surface); stroke:var(--line); stroke-width:0.8px; }
.dp-illustration .il-spark{ fill:none; stroke:var(--ink-3); stroke-width:1.2px; }
.dp-section .h{ font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin:0 0 6px; }
.dp-section p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-1); }
.dp-section p + p{ margin-top:10px; }
.seen-list{ display:flex; flex-direction:column; gap:5px; }
.seen-item{ background:var(--bg-raised); border:1px solid var(--line); border-radius:3px; padding:7px 10px; font-size:12.5px; color:var(--ink-2); }
.seen-item.ref-link{ display:flex; align-items:flex-start; gap:8px; cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.seen-item.ref-link:hover{ background:var(--bg-page); border-color:var(--accent); }
.ref-card-text{ line-height:1.4; font-family:"Source Serif 4",serif; }
.ref-card-text strong{ color:var(--ink-1); font-variant:small-caps; letter-spacing:.02em; }
.inline-flag{ display:inline-flex; align-items:center; gap:3px; font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; padding:1px 6px; border-radius:3px; white-space:nowrap; }
.inline-flag.star{ background:var(--bg-raised); color:var(--accent); border:1px solid var(--accent); }
.inline-flag.warn{ background:var(--warn-bg); color:var(--warn); }
.inline-flag.stub{ background:var(--bg-raised); color:var(--ink-3); border:1px solid var(--line-strong); font-style:italic; }
.muted-link{ margin:0; font-size:13px; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px; font-style:italic; }
.muted-link:hover{ opacity:.8; }
.metric-box{ background:var(--bg-raised); border:1px solid var(--line); border-radius:3px; padding:10px 12px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; line-height:1.6; color:var(--ink-1); white-space:pre-wrap; }
.member-list{ display:flex; flex-direction:column; gap:4px; }
.member-item{ font-size:13.5px; color:var(--ink-1); padding:5px 0; border-bottom:1px dashed var(--line); font-family:"Source Serif 4",serif; }
.member-item:last-child{ border-bottom:none; }

.hint{ position:sticky; bottom:14px; left:0; margin:0 0 0 40px; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3);
  background:var(--bg-surface); border:1px solid var(--line); border-radius:3px; padding:6px 10px;
  display:inline-flex; gap:8px; align-items:center; box-shadow:var(--shadow); }
kbd{ font-family:"IBM Plex Mono",monospace; background:var(--bg-raised); border:1px solid var(--line-strong); border-radius:3px; padding:1px 5px; font-size:10px; }
.hint-sep{ opacity:.5; }
.hint-link{ color:var(--accent); text-decoration:none; font-weight:600; }
.hint-link:hover{ text-decoration:underline; }

/* ---------- Section chrome shared by References + Warm-Up ---------- */
.page-section{ background:var(--bg-page); padding:48px 32px 24px; max-width:1080px; margin:0 auto; }

/* The Challenges tree wants the same full-viewport width as the pinned
   Taxonomy tree (so a wide diagram doesn't need horizontal scrolling
   inside a narrow 1080px column) — so #challenges is NOT a .page-section
   itself; only its heading and back-link are wrapped in these narrow,
   centered strips, and .legend-panel/.challenges-shell sit directly in
   the section as plain full-width block children. */
.page-section-head{ background:var(--bg-page); padding:48px 32px 20px; max-width:1080px; margin:0 auto; }
.page-section-foot{ background:var(--bg-page); padding:8px 32px 24px; max-width:1080px; margin:0 auto; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:28px; border-bottom:3px double var(--line-strong); padding-bottom:16px; }
.section-head h2{ font-family:"Fraunces",serif; font-weight:600; font-style:italic; font-size:28px; margin:0 0 8px; color:var(--ink-1); }
/* Without this, the heading+intro wrapper is an unstretched flex item that
   shrink-wraps to its own content width instead of filling the row, which
   left .section-intro looking like a narrow floating column even though it
   had room to use — the fix is the wrapper, not the paragraph itself. */
.section-head-text{ flex:1 1 auto; min-width:0; }
.section-intro{ margin:0; font-family:"Source Serif 4",serif; font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.ref-search-wrap{ flex:0 0 250px; }

/* ---------- Reference list (bibliography style) ---------- */
.ref-list{ list-style:none; margin:0; padding:0; }
.ref-entry{ border-bottom:1px solid var(--line); padding:18px 0; }
.ref-entry:first-child{ padding-top:0; }
.ref-entry-main{ display:flex; gap:16px; align-items:flex-start; cursor:pointer; }
.ref-num{ font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:700; color:var(--accent); flex:0 0 30px; padding-top:3px; }
.ref-entry-text{ flex:1 1 auto; min-width:0; }
.ref-citation{ font-family:"Source Serif 4",serif; font-size:15px; line-height:1.65; color:var(--ink-1); margin:0; }
.ref-authors-sc{ font-variant:small-caps; letter-spacing:.02em; }
.ref-title-em{ font-style:italic; }
.ref-cite-chips{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.cite-chip{ display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; padding:2px 8px; border-radius:2px;
  border:1px solid var(--line-strong); color:var(--ink-2); background:var(--bg-surface); }
.expand-btn{ border:1px solid var(--line-strong); background:var(--bg-surface); color:var(--ink-2); font-family:"IBM Plex Mono",monospace;
  font-size:10.5px; padding:5px 10px; border-radius:2px; cursor:pointer; flex:0 0 auto; }
.expand-btn:hover{ border-color:var(--accent); color:var(--accent); }
.ref-entry.flash{ animation:refFlash 1.6s ease; }
@keyframes refFlash{ 0%{ background:var(--warn-bg); } 100%{ background:transparent; } }

.ref-detail{ padding:16px 0 0 46px; }
.ref-kv{ display:grid; grid-template-columns:120px 1fr; gap:9px 16px; font-size:12.5px; max-width:74ch; }
.ref-kv dt{ color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding-top:1px; }
.ref-kv dd{ margin:0; color:var(--ink-1); line-height:1.55; font-family:"Source Serif 4",serif; }
.ref-kv dd.mono{ font-family:"IBM Plex Mono",monospace; font-size:12px; }

.back-to-top{ display:inline-block; margin:24px 0 30px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--accent); text-decoration:none; font-weight:600; letter-spacing:.03em; }
.back-to-top:hover{ text-decoration:underline; }

/* ---------- Survey Summaries section ---------- */
.survey-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:18px; }
.survey-card{
  background:var(--bg-surface); border:1px solid var(--line); border-left:3px solid var(--accent-2);
  border-radius:3px; padding:16px 18px; cursor:pointer; text-align:left; font:inherit; color:inherit;
  display:flex; flex-direction:column; gap:8px; transition:box-shadow .12s ease, transform .12s ease;
}
.survey-card:hover, .survey-card:focus-visible{ box-shadow:var(--shadow); transform:translateY(-1px); outline:none; }
.survey-card .survey-title{ font-family:"Fraunces",serif; font-weight:600; font-style:italic; font-size:15.5px; line-height:1.32; color:var(--ink-1); margin:0; }
.survey-card .survey-byline{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3); }
.survey-card .survey-note{ font-family:"Source Serif 4",serif; font-size:13px; line-height:1.5; color:var(--ink-2); margin:0; }
.survey-card .survey-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px; border-top:1px dashed var(--line); }
.survey-card .survey-ref-link{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--accent); }
.survey-card .survey-view{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; }

.provenance-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.provenance-item{ border:1px solid var(--line); border-left:3px solid var(--accent-2); border-radius:3px; padding:16px 18px; background:var(--bg-surface); }
.provenance-axis{ margin:0 0 8px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-2); }
.provenance-note{ margin:0 0 12px; font-family:"Source Serif 4",serif; font-size:14px; line-height:1.6; color:var(--ink-1); }

/* =========================================================================
   HISTORICAL TIMELINE — a vertical spine, not a horizontal axis: entries
   flow top-to-bottom in normal document flow, so a long description just
   wraps and pushes the next row down instead of ever requiring horizontal
   scroll. Reuses .legend/.chip/.swatch (tree legend) and .seen-item/
   .ref-badge/.ref-card-text (reference-card) rules from elsewhere in
   this file rather than duplicating them.
   ========================================================================= */
.page-section .legend{ border-radius:4px; border:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:20px; }
.timeline-list{ list-style:none; margin:0; padding:0; }
.timeline-item{ display:grid; grid-template-columns:60px 22px 1fr; column-gap:14px; position:relative; }
.timeline-year{ text-align:right; font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:13px; color:var(--tl-color); padding-top:16px; }
.timeline-dot{ position:relative; }
.timeline-dot::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--line); transform:translateX(-50%); }
.timeline-item:first-child .timeline-dot::before{ top:20px; }
.timeline-item:last-child .timeline-dot::before{ height:20px; bottom:auto; }
.timeline-dot::after{ content:""; position:absolute; top:14px; left:50%; width:11px; height:11px; border-radius:50%; background:var(--tl-color); border:2px solid var(--bg-page); transform:translateX(-50%); z-index:1; }
.timeline-card{ border:1px solid var(--line); border-left:3px solid var(--tl-color); border-radius:3px; background:var(--bg-surface); padding:14px 16px; margin:6px 0 16px; }
.timeline-cat{ margin:0 0 4px; font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--tl-color); }
.timeline-title{ margin:0 0 6px; font-family:"Fraunces",serif; font-weight:600; font-size:15.5px; color:var(--ink-1); }
.timeline-gap-badge{ display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:700; letter-spacing:.03em; color:var(--accent-ink); background:var(--accent); padding:2px 7px; border-radius:3px; vertical-align:middle; margin-left:6px; }
.timeline-desc p{ margin:0 0 8px; font-family:"Source Serif 4",serif; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.timeline-desc p:last-child{ margin-bottom:0; }
.timeline-refs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.timeline-refs .seen-item{ flex:0 1 auto; }
.timeline-item.timeline-gap .timeline-card{ background:var(--bg-raised); border-left-width:4px; }
@media (max-width: 640px){
  .timeline-item{ grid-template-columns:44px 18px 1fr; column-gap:8px; }
  .timeline-year{ font-size:11.5px; }
}
.survey-card:hover .survey-view{ color:var(--accent); }

/* ---------- Warm-Up Coding section ---------- */
.warmup-family{ margin-bottom:36px; }
.warmup-family-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.warmup-family-head .swatch{ width:13px; height:13px; border-radius:2px; flex:0 0 auto; }
.warmup-family-head h3{ font-family:"Fraunces",serif; font-weight:600; font-size:18px; margin:0; color:var(--ink-1); }
.warmup-family-head .count{ font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); }
.warmup-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
.code-file-card .survey-title{ font-style:normal; }

footer{
  padding:18px 20px 30px; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3);
  background:var(--bg-page); letter-spacing:.03em;
}
footer a{ color:var(--accent); text-decoration:none; }
footer a:hover{ text-decoration:underline; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:5px; }
::-webkit-scrollbar-track{ background:transparent; }

@media (max-width: 880px){
  .detail-panel{ position:fixed; inset:0; flex:none; max-width:none; z-index:50; transform:translateX(100%); transition:transform .25s ease; }
  .detail-panel.open{ transform:translateX(0); }
  .stat-strip{ display:none; }
  .masthead{ padding:18px 18px 12px; }
  header, .legend{ padding-left:18px; padding-right:18px; }
  .page-section{ padding:36px 18px 20px; }
  .page-section-head{ padding:36px 18px 16px; }
  .page-section-foot{ padding:6px 18px 20px; }
  .ref-detail{ padding-left:0; }
  .challenges-shell{ height:70vh; }
}

@media (prefers-reduced-motion: reduce){
  .box, .detail-panel{ transition:none; }
}