/* =============================================================================
   WIKI — AdultCognitiveDisease.com
   -----------------------------------------------------------------------------
   This is not a separate product. It is a room in the site, and it should look
   like one.

   The three previous attempts each invented a design of their own — a magazine,
   then a software-docs theme, then a second software-docs theme with a dark mode.
   That last one was the clearest mistake: the host site has NO dark mode, so the
   wiki auto-darkened on the reader's OS preference and became the only dark thing
   in the product. There is no dark theme here now. There is no theme toggle.

   Instead the wiki adopts the site's own language, which it already had:

     THE SLATE RAIL. The app's signature is a dark slate navigation column against
     white content. A dark RAIL is the house style; a dark PAGE never was. So the
     tree is slate-900, the current page is white on slate-800 behind a red bar —
     the same treatment the app gives its own chapters — and the document you are
     reading is white paper.

     MERRIWEATHER + INTER. The site's fonts. Merriweather carries the reading and
     the titles; Inter carries the navigation, the labels and the data. No fourth
     family.

     ONE RED. #dc2626 for text, #ef4444 for the rail marker. It means "you are
     here" and nothing else. Links are ink with a hairline; a page of 600 links
     must read as text.

   The measured floors from the last pass are kept, because they were right:
   nothing in the chrome below 12px, reading type at 17px, every colour at WCAG
   AA or better, prose at ~68 characters.
   ============================================================================= */

:root {
  /* ---- the page: warm paper, warm ink (the v2 editorial palette) ----------- */
  --paper:        #fbf8f1;   /* warm off-white — a page, not a screen */
  --paper-2:      #f3ecdd;   /* warm wells / stripes / the rail */
  --paper-3:      #ece3cd;
  --ink:          #26221b;   /* warm near-black */
  --ink-2:        #3a352b;   /* warm body */
  --ink-3:        #6a6252;   /* warm muted, ~6:1 */
  --rule:         #e4dcc9;   /* warm divider */
  --rule-2:       #ddd3bd;

  /* ---- the rail: the app's own sidebar (now LIGHT + warm) ------------------ */
  --rail:         #f3ecdd;   /* warm parchment */
  --rail-2:       #faf5ea;   /* the active / hovered row */
  --rail-line:    #ddd3bd;
  --rail-ink:     #4c4638;   /* resting nav text on warm */
  --rail-ink-2:   #26221b;   /* active / heading text */
  --rail-head:    #a08b5e;   /* gold section labels */

  /* ---- one red ------------------------------------------------------------ */
  --accent:       #dc2626;   /* red-600 */
  --accent-2:     #b91c1c;   /* red-700 — hover */
  --accent-mark:  #dc2626;   /* the marker in the rail */
  --accent-wash:  #f7ede0;   /* warm red-tinted wash */

  --struct:       #0f766e;   /* teal-700 — the temporal stages, structure only */

  --g-node:    #dc2626;
  --g-stage:   #0f766e;
  --g-thesis:  #8a7f66;
  --g-concept: #cbbf9f;

  /* legacy tokens the shared markup still reaches for */
  --gold:#a08b5e; --gold-light:#b8935a; --gold-dark:#8a7f66;
  --silver:#94a3b8; --bronze:#b45309;
  --accent-light:#dc2626; --accent-hover:#b91c1c;
  --ink-light:#3a352b; --ink-muted:#6a6252;
  --paper-warm:#f3ecdd; --paper-dark:#f3ecdd; --rail-bg:#f3ecdd;
  --shadow-sm:0 1px 2px rgba(38,34,27,.05);
  --shadow-md:0 10px 30px -12px rgba(38,34,27,.22);

  /* ---- the site's fonts (Newsreader + Inter + IBM Plex Mono) --------------- */
  --sans:  'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: var(--serif);

  --measure: 42rem;      /* ~72 characters at 19px — a fuller line that fills the page. */
  --nav-w: 300px;
  --rail-w: 236px;
  --header-h: 56px;
}

/* =============================================================================
   base
   ============================================================================= */
* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 .5em; text-wrap: balance;
}
code {
  font-family: var(--mono); font-size: .85em;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 3px; padding: .08em .35em; color: var(--ink-2);
}
.muted { color: var(--ink-3); }
.hidden { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 200; background: var(--paper); color: var(--ink); padding: .6rem 1rem; border: 1px solid var(--rule-2); }
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent-mark); z-index: 90; transition: width .08s linear; }

/* =============================================================================
   header
   ============================================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: var(--header-h);
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0 1.25rem 0 0;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
/* the brand block sits over the rail */
.brand {
  display: flex; align-items: center; flex: none;
  width: var(--nav-w); height: 100%;
  padding: 0 1.6rem;
  background: var(--paper);
  border-right: 1px solid var(--rail-line);
}
.brand-text { display: flex; flex-direction: column; gap: .1rem; line-height: 1.1; }
.brand-text strong {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  color: var(--rail-ink-2); letter-spacing: -.01em;
}
.brand-text em {
  font-style: normal; font-family: var(--sans); font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rail-head);
}
.hsearch { position: relative; flex: 1; max-width: 32rem; margin-left: 1.25rem; }
.hsearch input {
  width: 100%; font-family: var(--sans); font-size: .9375rem;
  padding: .45rem .8rem; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px;
}
.hsearch input::placeholder { color: var(--ink-3); }
.hsearch input:focus { border-color: var(--accent); background: var(--paper); outline: none; }
.hsearch kbd {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: .6875rem; font-weight: 600; color: var(--ink-3);
  border: 1px solid var(--rule-2); border-radius: 4px; padding: 0 .35rem;
  pointer-events: none;
}
.hsearch input:focus + kbd { display: none; }
.nav-toggle {
  display: none; flex: none; margin-left: auto;
  background: none; border: 1px solid var(--rule); color: var(--ink);
  border-radius: 6px; width: 34px; height: 30px; cursor: pointer;
}

/* =============================================================================
   layout — a fixed sidebar, and content that flows to its right
   -----------------------------------------------------------------------------
   The header and the sidebar are FIXED to the viewport. They do not move when the
   window resizes — the navigation is anchored, the way a wiki's navigation must
   be. Everything else is the content column, offset by the sidebar's width.
   ============================================================================= */
.main { margin-left: var(--nav-w); }
/* the content column is capped and CENTRED in the space beside the fixed sidebar,
   so on a wide screen the margins are balanced instead of a huge empty right. The
   sidebar itself is pinned — it never moves; only the content centres. */
.main-inner {
  max-width: 70rem;
  margin: 0 auto;
  padding: calc(var(--header-h) + 1.6rem) 3rem 3rem;
}
/* article + rail. the article fills, its prose capped to the reading measure, so
   the rail sits a comfortable gutter from the text — no void. no rail → the
   article takes the whole width for its grids. */
.doc-body {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) var(--rail-w);
  gap: 3.5rem; align-items: start;
}
.doc-body.no-rail { grid-template-columns: minmax(0, 1fr); }

/* ---- the fixed navigation sidebar ---------------------------------------- */
.sidebar {
  position: fixed; left: 0; top: var(--header-h); bottom: 0; z-index: 60;
  width: var(--nav-w);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--rail);
  scrollbar-width: thin; scrollbar-color: #cbbf9f transparent;
}
/* dims the page behind the mobile drawer */
.scrim {
  display: none; position: fixed; inset: var(--header-h) 0 0 0; z-index: 55;
  background: rgba(15,23,42,.4);
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #cbbf9f; border-radius: 4px; }
.sidebar-in { padding: 1.3rem 0 4rem; }

.t-group { padding: .25rem 0; }
.t-group + .t-group { border-top: 1px solid var(--rail-line); margin-top: .6rem; }
.t-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem .55rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--rail-head);
}
.t-head a { color: var(--rail-head); }
.t-head a:hover { color: var(--accent); }

.t-item {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem 1.4rem;
  color: var(--rail-ink); font-size: .9rem; line-height: 1.45;
  border-left: 3px solid transparent; cursor: pointer;
  transition: background .12s, color .12s;
}
.t-item:hover { background: var(--rail-2); color: var(--rail-ink-2); }
.t-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-count {
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  color: var(--rail-head); font-variant-numeric: tabular-nums; flex: none;
}

/* you are here — the app's own active treatment */
.t-item.current {
  background: var(--rail-2); color: var(--rail-ink-2); font-weight: 600;
  border-left-color: var(--accent-mark);
}
.t-item.current .t-count { color: var(--rail-head); }

.t-children { display: flex; flex-direction: column; }
.t-branch > summary { list-style: none; }
.t-branch > summary::-webkit-details-marker { display: none; }
.t-branch-head { font-size: .875rem; font-weight: 600; color: var(--rail-ink-2); }
.t-branch-head::before {
  content: "›"; flex: none; margin-right: .6rem; color: var(--rail-head);
  font-size: 1rem; line-height: 1; transition: transform .15s; display: inline-block;
}
.t-branch[open] > .t-branch-head::before { transform: rotate(90deg); }
.t-branch[open] > .t-branch-head { color: var(--rail-ink-2); }
.t-leaves { display: flex; flex-direction: column; padding-bottom: .35rem; }
.t-leaf { font-size: .85rem; color: var(--ink-3); font-family: var(--serif); padding: .42rem 1.4rem .42rem 2.5rem; align-items: flex-start; }
.t-leaf .t-label { white-space: normal; overflow: visible; line-height: 1.5; }
.t-leaf:hover { color: var(--accent); }
.t-leaf.current { padding-left: 2.5rem; }
.t-tools .t-item { font-size: .875rem; }

/* the orientation pin — an obvious first way in, above the library */
.t-start .t-label { color: var(--rail-ink-2); font-weight: 600; }
.t-start:hover .t-label { color: var(--accent); }
.t-start-mark {
  flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--sans);
  font-size: .72rem; font-weight: 700; color: #fff; background: var(--accent);
  font-variant-numeric: tabular-nums;
}
.t-start.current .t-start-mark { background: var(--accent-mark); }

/* a demoted, still-reachable link (the deprecated temporal stages) */
.t-historical .t-label { color: var(--rail-ink); }
.t-hist { font-family: var(--sans); font-size: .6rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--rail-head); border: 1px solid var(--rail-line); border-radius: 4px; padding: .04rem .32rem; flex: none; }

/* ---- the document -------------------------------------------------------- */
.content { min-width: 0; }
.content > .prose, .content > .page-head { max-width: var(--measure); }

.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  font-size: .8125rem; color: var(--ink-3); margin-bottom: 1.8rem;
}
.crumbs a:hover { color: var(--accent); }
.crumb-sep { color: var(--rule-2); }
.crumb-here { color: var(--ink-2); font-weight: 500; }

.page-head { margin-bottom: 2.4rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--ink); }
.kicker {
  font-family: var(--sans); font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3);
  display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem;
}
.kicker a:hover { color: var(--accent); }
.page-head h1 {
  font-family: var(--serif); font-size: 2.1rem; font-weight: 700;
  line-height: 1.25; letter-spacing: -.02em; color: var(--ink); margin: 0;
  text-transform: none;
}
.page-head h1.caps { font-size: 1.75rem; letter-spacing: .005em; }
.page-head .subtitle {
  font-family: var(--sans); font-size: 1.1rem; line-height: 1.6;
  color: var(--ink-2); margin: .9rem 0 0; max-width: var(--measure); font-style: normal;
}
.page-head .lede {
  font-size: .9375rem; color: var(--ink-2); margin: 1rem 0 0;
  padding-left: 1rem; border-left: 3px solid var(--accent-mark); max-width: var(--measure);
}
.frontmatter { margin: 1.2rem 0 0; display: flex; flex-direction: column; gap: .4rem; }
.fm-sections { font-size: .8125rem; color: var(--ink-3); }
.fm-sections span::after { content: " · "; color: var(--rule-2); }
.fm-sections span:last-child::after { content: ""; }
.colophon {
  font-size: .8125rem; color: var(--ink-3); line-height: 1.6;
  display: flex; flex-wrap: wrap; gap: .1rem .8rem;
}
.colophon br { display: none; }

/* ---- prose: Merriweather, and the only place that gets air ---------------- */
.prose { font-family: var(--serif); font-size: 1.24rem; line-height: 1.8; color: var(--ink); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.4rem; }
.prose h1 { font-size: 1.65rem; margin: 3rem 0 1rem; }
.prose h2 {
  font-size: 1.5rem; margin: 3.6rem 0 1.1rem;
  padding-bottom: .55rem; border-bottom: 2px solid var(--ink);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.prose h2::before {
  content: ""; display: block; width: 2.2rem; height: 3px;
  background: var(--accent); border-radius: 2px; margin-bottom: .9rem;
}
.prose h2:first-child::before { margin-top: 0; }
.prose h3 { font-size: 1.22rem; font-weight: 700; color: var(--ink); margin: 2.4rem 0 .7rem; padding-left: .9rem; border-left: 3px solid var(--accent-mark); scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose h4 {
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
  margin: 1.8rem 0 .6rem;
}
.prose ul, .prose ol { margin: 1.4rem 0; padding-left: 1.4rem; }
.prose li { margin: .45rem 0; }
.prose li::marker { color: var(--ink-3); }
.prose blockquote {
  margin: 2rem 0; padding: .3rem 0 .3rem 1.4rem;
  border-left: 3px solid var(--accent-mark);
  color: var(--ink-2); font-style: italic;
}
.prose hr { border: none; border-top: 1px solid var(--rule); margin: 2.6rem 0; }
.prose img { max-width: 100%; height: auto; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose table {
  font-family: var(--sans); border-collapse: collapse; width: 100%;
  margin: 1.8rem 0; font-size: .875rem; line-height: 1.5;
  display: block; overflow-x: auto; font-variant-numeric: tabular-nums;
}
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .6rem .9rem .6rem 0; text-align: left; vertical-align: top; }
.prose thead th {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-3); border-bottom: 2px solid var(--rule-2);
}
.prose pre { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; padding: 1rem; overflow-x: auto; font-size: .85rem; }
.prose pre code { background: none; border: none; padding: 0; }

.prose a, .wikilink {
  color: var(--ink); border-bottom: 1px solid var(--rule-2);
  background: none !important; transition: color .12s, border-color .12s;
}
.prose a:hover, .wikilink:hover { color: var(--accent); border-bottom-color: var(--accent); }
.wikilink.broken { color: var(--ink-3); border-bottom: 1px dotted var(--ink-3); cursor: help; }
.wikilink.withheld { color: var(--ink-2); border-bottom: 1px dotted var(--rule-2); cursor: default; }
/* inline auto-links (#4): concepts read as normal links; genes get a dashed underline */
.prose a.gene-auto { border-bottom-style: dashed; }

.src-note { margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: .75rem; color: var(--ink-3); }
.doc-foot { margin-top: 3.5rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.doc-foot p { margin: 0 0 .4rem; font-size: .8125rem; color: var(--ink-3); max-width: var(--measure); }
.doc-foot a { border-bottom: 1px solid var(--rule-2); }
.doc-foot a:hover { color: var(--accent); }

/* ---- the right rail: page tools ------------------------------------------ */
.rail {
  position: sticky; top: calc(var(--header-h) + 1.6rem);
  max-height: calc(100vh - var(--header-h) - 3rem);
  overflow-y: auto; overscroll-behavior: contain;
  font-size: .8125rem; scrollbar-width: thin;
}
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 3px; }

.rail-box { padding: 0 0 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
.rail-box:last-child { border-bottom: none; }
.rail-box h3 {
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
  margin: 0 0 .8rem; display: flex; justify-content: space-between; align-items: center;
}
.rail-box .count { font-family: var(--sans); font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.rail-links a { display: block; padding: .3rem 0; color: var(--ink-2); line-height: 1.45; font-size: .8125rem; }
.rail-links a:hover { color: var(--accent); }
.rail-sub { color: var(--ink-3); font-size: .75rem; }
.kv { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem 0; font-size: .8125rem; color: var(--ink-3); }
.kv strong, .kv b { font-weight: 600; color: var(--ink-2); }

.pdf-btn {
  display: block; text-align: center; font-family: var(--sans);
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  padding: .65rem .8rem; border-radius: 6px;
  background: var(--accent); color: #fff !important;
  transition: background .12s;
}
.pdf-btn:hover { background: var(--accent-2); }
.pdf-note { font-size: .8125rem; color: var(--ink-3); margin: .55rem 0 0; line-height: 1.5; }

/* the landing page for a PDF-only paper (published in the Library, no rendered prose) */
.pdf-landing {
  max-width: var(--measure); margin-top: 2rem; padding: 1.6rem 1.8rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 10px;
}
.pdf-landing-note { font-family: var(--serif); font-size: 1.02rem; color: var(--ink-2); margin: 0 0 1.1rem; }
.pdf-landing-btns { display: flex; gap: .7rem; flex-wrap: wrap; }
.pdf-landing-btns .pdf-btn { display: inline-block; padding: .7rem 1.3rem; font-size: .9rem; }
.pdf-btn.ghost { background: transparent; color: var(--accent) !important; border: 1px solid var(--rule-2); }
.pdf-btn.ghost:hover { background: var(--paper); border-color: var(--accent); }

/* supersession banner — the framework outgrew the earliest papers (from the audit) */
.supersede-banner { display: flex; gap: .9rem; align-items: flex-start; max-width: var(--measure); margin: 1.5rem 0 0; padding: 1rem 1.2rem; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--rule-2); border-left: 3px solid var(--gold); }
.sb-superseded { border-left-color: var(--accent); }
.sb-tag { flex: none; font-family: var(--sans); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); border: 1px solid var(--rule-2); border-radius: 4px; padding: .16rem .5rem; margin-top: .1rem; }
.sb-superseded .sb-tag { color: var(--accent); border-color: var(--accent); }
.sb-note { margin: 0; font-family: var(--serif); font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.sb-see { margin: .55rem 0 0; font-family: var(--sans); font-size: .82rem; color: var(--ink-3); }
.sb-see a { color: var(--accent); border-bottom: 1px solid var(--rule-2); }
.sb-see a:hover { border-bottom-color: var(--accent); }

.toc nav { display: flex; flex-direction: column; }
.toc a {
  padding: .32rem 0 .32rem .8rem; color: var(--ink-3);
  border-left: 2px solid var(--rule); line-height: 1.45; font-size: .8125rem;
  transition: color .12s, border-color .12s;
}
.toc a:hover { color: var(--ink); border-left-color: var(--rule-2); }
.toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }
.toc .toc-l3 { padding-left: 1.6rem; font-size: .78rem; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  font-family: var(--sans); font-size: .8125rem;
  background: var(--paper-2); border: 1px solid var(--rule);
  color: var(--ink-2); padding: .22rem .55rem; border-radius: 4px;
}
.chip-link:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.badge { display: inline-block; font-family: var(--sans); font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .1rem .45rem; border-radius: 4px; border: 1px solid var(--rule-2); color: var(--ink-3); }
.badge-gold { color: var(--gold); border-color: var(--gold); }
.badge-silver { color: var(--silver); border-color: var(--silver); }
.badge-bronze { color: var(--bronze); border-color: var(--bronze); }
.type-tag { font-family: var(--sans); font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 4px; padding: .08rem .4rem; }
.bar { display: block; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); }
.metric { margin-bottom: .6rem; }
.metric-label, .metric-val { font-family: var(--sans); font-size: .75rem; color: var(--ink-3); }

/* =============================================================================
   home
   ============================================================================= */
.hero { display: none; }

.home-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  margin: 0 0 2.5rem;
}
.stat { padding: 1.1rem 1.2rem; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: none; }
.stat-n { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-l { font-family: var(--sans); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-top: .35rem; }

.home-block { margin-bottom: 3.4rem; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ink); }
.block-head h2 { font-size: 1.3rem; margin: 0; position: relative; padding-top: .9rem; }
.block-head h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2.2rem; height: 3px; background: var(--accent); border-radius: 2px; }
.more { font-family: var(--sans); font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.more:hover { color: var(--accent); }
.block-lede { color: var(--ink-2); max-width: var(--measure); margin: 0 0 1.2rem; font-size: .9375rem; }

.entry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04); }
@media (max-width: 640px) { .entry-grid { grid-template-columns: 1fr; } }
.entry { background: var(--paper); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; transition: background .12s; }
.entry:hover { background: var(--paper-2); }
.entry-k { font-family: var(--sans); font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.entry-t { font-family: var(--serif); font-weight: 700; font-size: .95rem; color: var(--ink); }
.entry-d { font-size: .8125rem; color: var(--ink-3); line-height: 1.55; }
.entry-d kbd { font-size: .82em; }

/* the home page leads with the thesis, so its header carries no dividing rule */
.home-head { border-bottom: none; padding-bottom: 0; margin-bottom: 2.2rem; }
.home-head .kicker { color: var(--accent); }
.home-head h1 { font-size: 2.6rem; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; max-width: 22ch; }
.home-head .subtitle { font-size: 1.15rem; max-width: 42rem; }
@media (max-width: 640px) { .home-head h1 { font-size: 1.95rem; } }

/* "read this first" — the single clearest next step on the page */
.first-read {
  display: grid; gap: .5rem; margin: 0 0 3.4rem;
  padding: 1.5rem 1.7rem 1.4rem;
  border: 1px solid var(--rule-2); border-left: 4px solid var(--accent);
  border-radius: 10px; background: linear-gradient(180deg, var(--paper-2), var(--paper));
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  transition: box-shadow .14s ease, transform .14s ease;
}
.first-read:hover { box-shadow: 0 14px 30px -16px rgba(15,23,42,.34); transform: translateY(-1px); }
.fr-k { font-family: var(--sans); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.fr-t { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.fr-d { font-size: .95rem; line-height: 1.62; color: var(--ink-2); max-width: 44rem; }
.fr-go { font-family: var(--sans); font-size: .875rem; font-weight: 600; color: var(--accent); margin-top: .35rem; }
.first-read:hover .fr-go { color: var(--accent-2); }

/* the fifty-year front: the three clinical phases on their age axis (#7) */
.fifty { margin: .2rem 0 0; }
.fifty-band { display: flex; gap: 3px; align-items: stretch; }
.fifty-seg { position: relative; display: flex; flex-direction: column; gap: .25rem; min-width: 0;
  padding: 1rem 1.05rem 1.15rem; background: var(--paper-2); border-radius: 7px 7px 0 0;
  border-top: 3px solid var(--seg); transition: background .14s, transform .14s; }
.fifty-seg:hover { background: var(--paper); transform: translateY(-2px); }
.fs-age { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--seg); }
.fs-name { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--ink); line-height: 1.1; }
.fs-locus { font-size: .82rem; color: var(--ink-3); line-height: 1.32; }
.fs-n { font-family: var(--sans); font-size: .72rem; font-weight: 600; color: var(--ink-3); margin-top: auto; padding-top: .5rem; }
.phase-i { --seg: #0f766e; } .phase-ii { --seg: #b45309; } .phase-iii { --seg: #b91c1c; }
.fifty-ground { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 3px; padding: .7rem 1.05rem; background: var(--paper-2);
  border: 1px dashed var(--rule-2); border-radius: 0 0 7px 7px; transition: background .14s; }
.fifty-ground:hover { background: var(--paper); }
.fg-l { font-size: .84rem; color: var(--ink-2); font-weight: 500; }
.fg-n { font-family: var(--sans); font-size: .72rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 640px) {
  .fifty-band { flex-direction: column; gap: 2px; }
  .fifty-seg { border-top-width: 0; border-left: 3px solid var(--seg); border-radius: 0; }
  .fs-n { margin-top: .3rem; }
}

/* the phase walk: the corpus as a path, one stop per stage of the disease */
.phase-walk { display: flex; flex-direction: column; }
.pw-step {
  position: relative; display: grid; grid-template-columns: 1.85rem 1fr auto;
  align-items: center; gap: 1rem; padding: .95rem .3rem;
  border-bottom: 1px solid var(--rule); transition: background .14s;
}
.pw-step:first-child { border-top: 1px solid var(--rule); }
.pw-step:hover { background: var(--paper-2); }
/* the spine linking one marker's centre to the next (rows are equal height) */
.pw-step:not(:last-child)::before {
  content: ""; position: absolute; left: .925rem; top: 50%; bottom: -50%;
  width: 1.5px; transform: translateX(-50%); background: var(--rule-2); z-index: 0;
}
.pw-marker {
  position: relative; z-index: 1; width: 1.85rem; height: 1.85rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--sans); font-size: .85rem; font-weight: 700;
  color: var(--ink-3); background: var(--paper); border: 1.5px solid var(--rule-2);
  font-variant-numeric: tabular-nums; transition: color .14s, background .14s, border-color .14s;
}
.pw-step:hover .pw-marker { color: #fff; background: var(--accent); border-color: var(--accent); }
.pw-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.pw-name { font-family: var(--serif); font-weight: 700; font-size: 1.06rem; color: var(--ink); display: flex; align-items: baseline; gap: .55rem; }
.pw-count {
  font-family: var(--sans); font-size: .7rem; font-weight: 700; color: var(--ink-3);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 20px;
  padding: .05rem .5rem; font-variant-numeric: tabular-nums; flex: none;
}
.pw-note { font-size: .9rem; color: var(--ink-3); line-height: 1.4; }
.pw-go { font-family: var(--serif); font-size: 1.15rem; color: var(--rule-2); flex: none; transition: color .14s, transform .14s; }
.pw-step:hover .pw-go { color: var(--accent); transform: translateX(3px); }

kbd {
  font-family: var(--mono); font-size: .82em; padding: .05em .4em; margin: 0 .05em;
  border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 4px;
  background: var(--paper-2); color: var(--ink-2); white-space: nowrap;
}

.mini-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); border-top: 1px solid var(--rule); }
.mini-node { display: flex; align-items: center; gap: .8rem; padding: .7rem .5rem; border-bottom: 1px solid var(--rule); font-size: .9375rem; transition: background .12s, padding-left .12s; }
.mini-node:hover { background: var(--paper-2); padding-left: .9rem; color: var(--accent); }
.node-num { font-family: var(--sans); font-size: .75rem; font-weight: 700; color: var(--accent); flex: none; width: 1rem; }
.note-block p { font-size: .9375rem; color: var(--ink-2); max-width: var(--measure); }
.note { font-size: .875rem; color: var(--ink-3); margin-bottom: 1.2rem; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.6rem; }
.guide h3 { font-size: 1rem; margin: 0 0 .35rem; }
.guide p { margin: 0; font-size: .875rem; color: var(--ink-3); line-height: 1.55; }
.btn { font-family: var(--sans); font-size: .8125rem; font-weight: 600; padding: .55rem 1rem; border: 1px solid var(--rule-2); border-radius: 6px; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero-cta { display: flex; gap: .6rem; flex-wrap: wrap; }

/* =============================================================================
   indexes
   ============================================================================= */
.filterbar { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.8rem; }
.filter-input { flex: 1; max-width: 24rem; font-family: var(--sans); font-size: .875rem; padding: .5rem .8rem; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; }
.filter-input:focus { border-color: var(--accent); background: var(--paper); outline: none; }
.filter-count { font-size: .8125rem; color: var(--ink-3); }

.az { display: flex; flex-wrap: wrap; gap: .15rem; margin: 0 0 1.8rem; }
.az a { font-family: var(--sans); font-size: .8125rem; font-weight: 600; min-width: 1.7rem; text-align: center; padding: .25rem 0; color: var(--ink-3); border-radius: 4px; }
.az a:hover { color: #fff; background: var(--accent); }

.idx-section { margin-bottom: 2.4rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.idx-h { font-size: 1.3rem; display: flex; align-items: baseline; gap: .7rem; margin: 2.4rem 0 .8rem; padding: .9rem 0 .55rem; border-bottom: 2px solid var(--ink); position: relative; }
.idx-h::before { content: ""; position: absolute; top: 0; left: 0; width: 2.2rem; height: 3px; background: var(--accent); border-radius: 2px; }
.idx-h .count { font-family: var(--sans); font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.idx-note { font-size: .9375rem; color: var(--ink-3); margin: 0 0 1.1rem; max-width: var(--measure); }

.concept-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0 2.5rem; }
.concept-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .5rem .35rem; border-bottom: 1px solid var(--rule);
  font-size: .9375rem; line-height: 1.45; color: var(--ink-2); text-transform: none;
  transition: background .12s, color .12s;
}
.concept-item:hover { background: var(--paper-2); color: var(--accent); }
.concept-item .count { font-family: var(--sans); font-size: .75rem; color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }
.concept-item:hover .count { color: var(--accent); }

/* the orphan-concept drawer at the foot of the index */
.loose-threads { margin-top: 2.8rem; border-top: 1px solid var(--rule-2); }
.loose-threads > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .8rem; padding: 1.3rem 0 .3rem; }
.loose-threads > summary::-webkit-details-marker { display: none; }
.loose-threads > summary::before { content: "›"; color: var(--ink-3); font-size: 1.15rem; line-height: 1; transition: transform .15s; }
.loose-threads[open] > summary::before { transform: rotate(90deg); }
.lt-h { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.loose-threads > summary .count { font-family: var(--sans); font-size: .78rem; font-weight: 500; color: var(--ink-3); }
.loose-threads .concept-item { color: var(--ink-3); }

.big-cards, .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04); margin-bottom: 2.2rem; }
.card, .node-card { background: var(--paper); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; transition: background .12s; }
.card:hover, .node-card:hover { background: var(--paper-2); }
.card:hover h3, .node-card:hover h3 { color: var(--accent); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card h3, .node-card h3 { font-size: .95rem; margin: 0; line-height: 1.35; }
.card-sub { font-family: var(--sans); font-size: .75rem; color: var(--ink-3); margin: 0; }
.card-hyp, .node-card .note { font-family: var(--sans); font-size: .8125rem; color: var(--ink-3); line-height: 1.55; margin: 0; }
.score { font-family: var(--sans); font-size: .75rem; color: var(--ink-3); }

.thesis-list { display: flex; flex-direction: column; }
.thesis-item {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .15rem 1rem;
  padding: .8rem .4rem; border-bottom: 1px solid var(--rule);
  transition: background .12s;
}
.thesis-item:hover { background: var(--paper-2); }
.thesis-item:hover .ti-title { color: var(--accent); }
.ti-title { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.ti-sub { grid-column: 1; font-size: .875rem; color: var(--ink-3); line-height: 1.5; }
.ti-words { grid-row: 1; grid-column: 2; font-family: var(--sans); font-size: .75rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.timeline { border-left: 2px solid var(--rule); padding-left: 1.4rem; }
.tl-item { position: relative; padding-bottom: 1.6rem; display: block; }
.tl-item::before { content: ""; position: absolute; left: -1.75rem; top: .5rem; width: 10px; height: 10px; border-radius: 50%; background: var(--struct); border: 2px solid var(--paper); }
.tl-num { font-family: var(--sans); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--struct); }
.tl-body h3 { margin: .15rem 0 .25rem; font-size: 1rem; }
.tl-body p { margin: 0; color: var(--ink-3); font-size: .875rem; }

/* =============================================================================
   search
   ============================================================================= */
.search-wrap { max-width: var(--measure); }
.search-input { width: 100%; font-family: var(--sans); font-size: 1rem; padding: .75rem 1rem; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; }
.search-input:focus { border-color: var(--accent); background: var(--paper); outline: none; }
.results { margin-top: 1.4rem; display: flex; flex-direction: column; }
.result { padding: .9rem .4rem; border-bottom: 1px solid var(--rule); transition: background .12s; }
.result:hover { background: var(--paper-2); }
.result:hover h3 { color: var(--accent); }
.r-top { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.r-type { font-family: var(--sans); font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.r-top h3 { font-size: 1rem; margin: 0; }
.r-snip { font-family: var(--sans); margin: .3rem 0 0; color: var(--ink-3); font-size: .875rem; line-height: 1.55; }
mark { background: #fef08a; color: var(--ink); padding: 0 .1em; border-radius: 2px; }

/* =============================================================================
   graph
   ============================================================================= */
.graph-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0 0 1rem; }
.lg { font-family: var(--sans); font-size: .75rem; font-weight: 500; color: var(--ink-3); display: flex; align-items: center; gap: .45rem; }
.lg::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.lg-node::before { background: var(--g-node); }
.lg-stage::before { background: var(--g-stage); }
.lg-thesis::before { background: var(--g-thesis); }
.lg-concept::before { background: var(--g-concept); }
.lg-gold::before { background: var(--gold); }
.lg-silver::before { background: var(--silver); }
.lg-bronze::before { background: var(--bronze); }
.lg-entrant::before { background: var(--g-concept); }
#graph-host { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2); overflow: hidden; position: relative; }
#graph { display: block; cursor: grab; }
#graph:active { cursor: grabbing; }
.graph-tip { position: absolute; pointer-events: none; opacity: 0; background: var(--ink); color: #fff; font-family: var(--sans); font-size: .75rem; padding: .35rem .6rem; border-radius: 4px; transition: opacity .1s; z-index: 5; }

.site-footer, .fwrap { display: none; }

/* =============================================================================
   gene index
   ============================================================================= */
.gene-stats { margin-bottom: 1.6rem; }

.gene-controls { position: sticky; top: var(--header-h); z-index: 6; background: var(--paper);
  padding: .9rem 0 .8rem; margin-bottom: .3rem; border-bottom: 1px solid var(--rule); }
.gene-row1 { display: flex; gap: .6rem; flex-wrap: wrap; }
#gq { flex: 1; min-width: 240px; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; padding: .6rem .9rem; }
#gq:focus { outline: none; border-color: var(--accent); background: var(--paper); }
#gsort { font-family: var(--sans); font-size: .9rem; color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 8px; padding: .6rem .8rem; cursor: pointer; }
#gsort:focus { outline: none; border-color: var(--accent); }

.gene-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.gchip { font-family: var(--sans); font-size: .78rem; padding: .28rem .7rem; border-radius: 999px;
  cursor: pointer; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-3);
  white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.gchip[data-c=""] { color: var(--ink-3); }
.gchip:not([data-c=""]) { color: color-mix(in srgb, var(--c) 74%, var(--ink)); border-color: color-mix(in srgb, var(--c) 30%, var(--rule-2)); }
.gchip:hover { border-color: color-mix(in srgb, var(--c, var(--ink-3)) 55%, var(--rule-2)); }
.gchip.on { background: color-mix(in srgb, var(--c, var(--ink)) 12%, transparent);
  border-color: color-mix(in srgb, var(--c, var(--ink)) 46%, transparent); font-weight: 600; }
.gchip-n { font-variant-numeric: tabular-nums; opacity: .65; }

.gene-count { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); margin: .5rem 0 .2rem; }

.gene-list { display: flex; flex-direction: column; }
.gene { border-bottom: 1px solid var(--rule); scroll-margin-top: 12.5rem; }
.gene[hidden] { display: none; }
.gene:target > .gene-sum { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.gene-sum { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: 8.5rem 1fr 12rem 4.5rem; gap: 1rem; align-items: center; padding: .72rem .3rem; }
.gene-sum::-webkit-details-marker { display: none; }
.gene-sum:hover { background: var(--paper-2); }
.gene-sym { font-family: var(--mono); font-size: .95rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.gene-badge { justify-self: start; font-family: var(--sans); font-size: .68rem; font-weight: 600;
  padding: .13rem .5rem; border-radius: 5px; white-space: nowrap;
  color: color-mix(in srgb, var(--c) 76%, var(--ink));
  background: color-mix(in srgb, var(--c) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); }
.gene-bar { display: flex; align-items: center; gap: .6rem; }
.gene-bar i { display: block; height: 5px; border-radius: 3px; background: var(--c, var(--ink-3)); opacity: .5; min-width: 2px; }
.gene-bar b { font-family: var(--mono); font-size: .78rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gene-dn { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); text-align: right; white-space: nowrap; }

.gene-panel { padding: .2rem .3rem 1.1rem; }
.gene-alias { font-size: .8rem; color: var(--ink-3); margin-bottom: .7rem; }
.gene-cooc { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .85rem; }
.gene-cooc-l { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-right: .3rem; }
.gene-alias code { font-family: var(--mono); font-size: .72rem; background: var(--paper-2); border: 1px solid var(--rule); padding: .05rem .35rem; border-radius: 4px; margin-right: .25rem; }
.gene-doclist { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto;
  border: 1px solid var(--rule); border-radius: 8px; }
.gd { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: baseline;
  padding: .45rem .8rem; border-bottom: 1px solid var(--rule); }
.gd:last-child { border-bottom: none; }
.gd a { color: var(--ink); font-size: .9rem; line-height: 1.4; }
.gd a:hover { color: var(--accent); }
.gd-type { font-family: var(--sans); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.gt-thesis { color: var(--accent); }
.gd-n { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.gene-empty { padding: 2.5rem 0; text-align: center; color: var(--ink-3); }

.gene-method { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.gene-method h2 { font-size: 1rem; margin: 0 0 .5rem; }
.gene-method p { font-size: .85rem; color: var(--ink-3); line-height: 1.6; max-width: var(--measure); margin: 0; }
.gene-method code { font-family: var(--mono); font-size: .76rem; background: var(--paper-2); border: 1px solid var(--rule); padding: .05rem .35rem; border-radius: 4px; }

@media (max-width: 680px) {
  .gene-sum { grid-template-columns: 1fr auto; grid-template-areas: "sym dn" "badge badge" "bar bar"; row-gap: .4rem; }
  .gene-sym { grid-area: sym; } .gene-dn { grid-area: dn; } .gene-badge { grid-area: badge; } .gene-bar { grid-area: bar; }
}

/* the reverse strip: gene chips in a page's right rail, tinted by cluster */
.gene-chip { font-family: var(--mono); font-size: .72rem; font-weight: 600;
  color: color-mix(in srgb, var(--c, var(--ink-2)) 72%, var(--ink));
  border-color: color-mix(in srgb, var(--c, var(--rule-2)) 34%, var(--rule-2)); }
.gene-chip:hover { color: color-mix(in srgb, var(--c, var(--accent)) 88%, var(--ink));
  border-color: color-mix(in srgb, var(--c, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--c, var(--ink)) 9%, transparent); }
.gene-chip-more { font-family: var(--sans); font-size: .72rem; color: var(--ink-3); }
.gene-chip-more:hover { color: var(--accent); border-color: var(--accent); }

/* related-papers rail */
.rel-list { display: flex; flex-direction: column; }
.rel-item { display: block; padding: .55rem .1rem; border-bottom: 1px solid var(--rule); }
.rel-item:last-child { border-bottom: none; }
.rel-t { display: block; font-family: var(--serif); font-weight: 600; font-size: .9rem; color: var(--ink); line-height: 1.35; }
.rel-item:hover .rel-t { color: var(--accent); }
.rel-why { display: block; font-family: var(--sans); font-size: .68rem; color: var(--ink-3); margin-top: .12rem; }

/* convergence-node hub (#8): the papers and concepts that land on the axis */
.node-hub { margin-top: 2.8rem; }
.hub-head { display: flex; align-items: baseline; gap: .7rem; margin: 2.2rem 0 1.1rem; padding: .9rem 0 .55rem; border-bottom: 2px solid var(--ink); position: relative; }
.hub-head::before { content: ""; position: absolute; top: 0; left: 0; width: 2.2rem; height: 3px; background: var(--accent); border-radius: 2px; }
.hub-head h2 { font-size: 1.25rem; margin: 0; }
.hub-head .count { font-family: var(--sans); font-size: .78rem; font-weight: 600; color: var(--ink-3); }
.hub-papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; }
.hub-paper { background: var(--paper); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .22rem; transition: background .12s; }
.hub-paper:hover { background: var(--paper-2); }
.hub-paper-t { font-family: var(--serif); font-weight: 700; font-size: .92rem; color: var(--ink); line-height: 1.32; }
.hub-paper:hover .hub-paper-t { color: var(--accent); }
.hub-paper-why { font-family: var(--sans); font-size: .68rem; color: var(--ink-3); }

/* companion video in the rail — a click-to-open YouTube thumbnail (no heavy embed) */
.video-cards { display: flex; flex-direction: column; gap: .6rem; }
.video-card { position: relative; display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); background: #0b0b0b; aspect-ratio: 16 / 9; }
.video-thumb { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease, opacity .2s ease; }
.video-card:hover .video-thumb { transform: scale(1.03); opacity: .92; }
.video-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(220, 38, 38, .94); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.video-card:hover .video-play { transform: scale(1.08); }
.video-play::before { content: ""; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #fff; }
.video-note { font-size: .72rem; margin: .5rem 0 0; }

/* cluster hues — semantic categories, kept distinct from the site's single red accent */
[data-c="amyloid-tau"]{--c:#b45309;} [data-c="gwas"]{--c:#7c3aed;} [data-c="microglia"]{--c:#dc2626;}
[data-c="mito"]{--c:#ea580c;} [data-c="oxidative"]{--c:#a16207;} [data-c="reelin-ecm"]{--c:#0d9488;}
[data-c="autophagy"]{--c:#2563eb;} [data-c="vascular"]{--c:#db2777;} [data-c="neuromod"]{--c:#4f46e5;}
[data-c="neurodegen"]{--c:#4d7c0f;} [data-c="downsyndrome"]{--c:#0891b2;} [data-c="epigenetic"]{--c:#9333ea;}
[data-c="trophic"]{--c:#16a34a;}

/* =============================================================================
   responsive
   ============================================================================= */
/* below the reading+rail width, the rail drops under the article */
@media (max-width: 1180px) {
  .doc-body { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: static; max-height: none; margin-top: 2.5rem;
    padding-top: 1.5rem; border-top: 1px solid var(--rule);
  }
  .toc { display: none; }
  .main-inner { max-width: 52rem; }
}
/* tablet / phone: the sidebar becomes a drawer, the content takes the full width */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .brand { width: auto; min-width: 0; padding-right: .5rem; }
  .main { margin-left: 0; }
  .main-inner { padding: calc(var(--header-h) + 1.2rem) 1.25rem 3rem; }
  .sidebar {
    width: 84vw; max-width: var(--nav-w); z-index: 62;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--shadow-md);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; }
  .concept-list { grid-template-columns: 1fr; }
  .hsearch { max-width: none; margin-left: .5rem; }
}

/* =============================================================================
   New landing pages (Visualizations, Videos, About) + the validity-ledger chip.
   ========================================================================== */

/* ---- validity-ledger chip (facts rail) + inline mention on the About page -- */
.kv-ledger {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .55rem;
  font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  color: var(--accent); text-decoration: none;
  border: 1px solid var(--rule-2); border-radius: 999px; padding: .28rem .62rem;
  transition: background .15s ease, border-color .15s ease;
}
.kv-ledger:hover { background: var(--accent-wash); border-color: var(--accent); }
.about-chip { cursor: default; }

/* ---- visualizations hub ---------------------------------------------------- */
.viz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 1rem; margin: 1.6rem 0; }
.viz-card {
  display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem 1.25rem;
  border: 1px solid var(--rule); background: var(--paper); text-decoration: none;
  border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.viz-card:hover { border-color: var(--rule-2); box-shadow: 0 6px 22px rgba(38, 34, 27, .08); transform: translateY(-2px); }
.viz-kicker { font-family: var(--mono); font-size: .68rem; letter-spacing: .03em; color: var(--accent); }
.viz-title { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.viz-desc { font-size: .855rem; line-height: 1.5; color: var(--ink-3); }
.viz-go { margin-top: .25rem; font-family: var(--sans); font-size: .75rem; font-weight: 600; color: var(--accent); }

/* ---- videos index (companion films, grouped by shelf) ---------------------- */
.vid-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .4rem; }
.vid-row { display: flex; align-items: center; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.vid-thumbs { display: flex; gap: .5rem; flex: none; }
.vid-thumb { position: relative; display: block; width: 132px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); background: #0b0b0b; }
.vid-thumb:hover .video-thumb { transform: scale(1.04); opacity: .92; }
.vid-thumb:hover .video-play { transform: scale(1.08); }
.vid-paper { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); text-decoration: none; line-height: 1.3; }
.vid-paper:hover { color: var(--accent); }
@media (max-width: 640px) {
  .vid-row { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .vid-thumb { width: 116px; }
}

/* ---- about page prose ------------------------------------------------------ */
.about-prose h2 { font-family: var(--serif); font-size: 1.34rem; font-weight: 600; color: var(--ink); margin: 1.9rem 0 .5rem; letter-spacing: -.01em; }
.about-prose p { line-height: 1.72; color: var(--ink-2); margin: .55rem 0; max-width: 42rem; }
.about-prose a { color: var(--accent); }
.about-prose strong { color: var(--ink); font-weight: 600; }

/* ---- visualizations hub: second group (interactive dashboards) ------------- */
.viz-h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); margin: 2.4rem 0 .3rem; letter-spacing: -.01em; }
.viz-sub { font-size: .9rem; line-height: 1.55; color: var(--ink-3); margin: 0 0 1.2rem; max-width: 42rem; }