:root {
    --bg: #f4f1ea;
    --panel: #fffdf8;
    --ink: #23201b;
    --muted: #7a7264;
    --line: #e4ddcf;
    --accent: #2f6b4f;
    --accent-soft: #e7f0ea;
    --danger: #b3261e;
    --danger-soft: #fbeae8;
    --danger-line: #f0cfca;
    --insight: #8a6410;
    --insight-soft: #f6edd6;
    --insight-line: #e7d3a3;
    --future: #5b47c9;
    --future-soft: #edeafb;
    --future-line: #d3ccf3;
    --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    color: var(--ink); background: var(--bg); display: flex; height: 100vh; overflow: hidden;
  }

  /* Sidebar */
  aside { width: 340px; flex: 0 0 340px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
  .brand { padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
  .brand-row { display: flex; align-items: center; gap: 11px; }
  .brand .logo { width: 32px; height: 32px; flex: 0 0 32px; display: block; border-radius: 9px; box-shadow: 0 1px 3px rgba(47,107,79,.28); }
  .brand h1 { margin: 0; font-size: 20px; letter-spacing: .3px; }
  .brand p { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); font-family: system-ui, sans-serif; }
  .search { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .search input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: system-ui, sans-serif; background: #fff; color: var(--ink); }
  .search input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

  .tree { overflow-y: auto; flex: 1; padding: 6px 0; }
  .trow { display: flex; align-items: center; gap: 5px; padding: 7px 14px 7px 0; cursor: pointer; border-left: 3px solid transparent; }
  .trow:hover { background: var(--accent-soft); }
  .trow.active { background: var(--accent-soft); border-left-color: var(--accent); }
  .trow.danger:hover { background: var(--danger-soft); }
  .trow.danger.active { background: var(--danger-soft); border-left-color: var(--danger); }
  .tw-chev { width: 16px; flex: 0 0 16px; text-align: center; color: var(--muted); font-size: 9px; transition: transform .12s; user-select: none; }
  .tw-chev:hover { color: var(--ink); }
  .tw-chev.open { transform: rotate(90deg); }
  .tw-chev.leaf { visibility: hidden; }
  .tw-rank { font-size: 11px; color: var(--muted); width: 22px; flex: 0 0 22px; font-family: system-ui, sans-serif; }
  .tw-group { display: flex; align-items: baseline; gap: 8px; padding: 15px 14px 5px 8px;
    font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 3px; }
  .tw-group:first-child { padding-top: 4px; }
  .tw-gcount { margin-left: auto; font-weight: 500; letter-spacing: 0; opacity: .8;
    font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }
  .tw-label { flex: 1; font-size: 14px; line-height: 1.3; }
  .trow.company .tw-label { font-size: 15px; }
  .trow.aspect .tw-label { color: #45413a; }
  .trow.danger .tw-label { color: var(--danger); }
  .trow.insight .tw-label { color: var(--insight); }
  .trow.insight:hover { background: var(--insight-soft); }
  .trow.insight.active { background: var(--insight-soft); border-left-color: var(--insight); }
  .trow.future .tw-label { color: var(--future); }
  .trow.future:hover { background: var(--future-soft); }
  .trow.future.active { background: var(--future-soft); border-left-color: var(--future); }
  .trow.chartrow { text-decoration: none; }
  .trow.chartrow .tw-label { color: var(--accent); }
  .trow.chartrow:hover { background: var(--accent-soft); }
  .trow.active .tw-label { font-weight: 600; }
  .tw-cap { font-size: 10.5px; color: var(--muted); font-family: ui-monospace, monospace;
            font-variant-numeric: tabular-nums; margin-left: 6px; flex: 0 0 auto; text-align: right; }
  .trow.company .tw-label { min-width: 0; overflow-wrap: anywhere; }
  .tw-note { font-family: system-ui, sans-serif; font-size: 11.5px; color: var(--muted); font-style: italic; padding: 4px 0; }

  /* Main */
  main { flex: 1; overflow-y: auto; padding: 40px 56px 80px; }
  .wrap { max-width: 760px; margin: 0 auto; }
  .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 70vh; text-align: center; color: var(--muted); }
  .empty p { font-family: system-ui, sans-serif; max-width: 400px; }
  .empty-link { font-family: system-ui, sans-serif; color: var(--accent); text-decoration: none; cursor: pointer; font-size: 13.5px; }
  .empty-link:hover { text-decoration: underline; }

  .crumbs { font-family: system-ui, sans-serif; font-size: 13px; margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .crumbs a { color: var(--accent); cursor: pointer; text-decoration: none; }
  .crumbs a.danger { color: var(--danger); }
  .crumbs a.insight { color: var(--insight); }
  .crumbs a.future { color: var(--future); }
  .crumbs a:hover { text-decoration: underline; }
  .crumbs .sep { color: var(--muted); }
  .crumbs .here { color: var(--muted); }
  .crumbs .here.danger { color: var(--danger); }
  .crumbs .here.insight { color: var(--insight); }
  .crumbs .here.future { color: var(--future); }

  h2.title { font-size: 30px; margin: 0 0 4px; line-height: 1.2; }
  .subtitle { font-family: system-ui, sans-serif; font-size: 13px; color: var(--muted); margin-bottom: 24px; }
  .chart-link { display: inline-flex; align-items: center; gap: 7px; font-family: system-ui, sans-serif; font-size: 12.5px; text-decoration: none; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; margin: -8px 0 24px; }
  .chart-link:hover { text-decoration: underline; }
  .chart-frame { width: 100%; border: 0; display: block; min-height: 520px; background: transparent; }
  /* Sticky jump-to-chart bar rendered by the app (the iframe itself doesn't scroll).
     Outer element is sticky ONLY (no overflow — iOS Safari breaks sticky on a scroll
     container); the inner .cnb-scroll is the horizontal swipe area on mobile. */
  .chart-nav-bar { position: sticky; top: 0; z-index: 20; padding: 9px 0 10px; margin-bottom: 4px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .chart-nav-bar:empty { display: none; }
  .cnb-scroll { display: flex; flex-wrap: wrap; gap: 6px 8px; font-family: system-ui, sans-serif; font-size: 12.5px; }
  /* In charts view, drop the panel's top padding so the sticky bar pins flush to the
     very top (no strip of chart peeking above it); restore breathing room on the content. */
  main.charts-mode { padding-top: 0; }
  main.charts-mode #content { padding-top: 16px; }
  .chart-nav-bar a { color: var(--accent); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; background: var(--panel); white-space: nowrap; cursor: pointer; }
  .chart-nav-bar a:hover { border-color: var(--accent); }
  .page-insight .chart-link { color: var(--insight); background: var(--insight-soft); border-color: var(--insight-line); }
  ul.sources { font-family: system-ui, sans-serif; font-size: 13px; margin: 0; padding-left: 20px; }
  ul.sources li { margin: 7px 0; line-height: 1.45; }
  ul.sources a { color: var(--accent); text-decoration: none; }
  ul.sources a:hover { text-decoration: underline; }
  .page-danger ul.sources a { color: var(--danger); }
  .page-insight ul.sources a { color: var(--insight); }
  .page-future ul.sources a { color: var(--future); }
  .gen-date { font-family: system-ui, sans-serif; font-size: 12px; color: var(--muted); margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
  .trajectory { border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 10px; padding: 13px 16px 14px; margin: 20px 0 6px; background: var(--panel); }
  .trajectory .traj-head { display: flex; align-items: center; gap: 9px; font-family: system-ui, sans-serif; margin-bottom: 7px; }
  .trajectory .traj-icon { font-size: 21px; line-height: 1; font-weight: 700; }
  .trajectory .traj-label { font-size: 13.5px; font-weight: 700; letter-spacing: .2px; }
  .trajectory p { margin: 0; font-size: 14.5px; line-height: 1.6; }
  .traj-widening { border-left-color: var(--accent); }
  .traj-widening .traj-icon, .traj-widening .traj-label { color: var(--accent); }
  .traj-narrowing { border-left-color: var(--danger); }
  .traj-narrowing .traj-icon, .traj-narrowing .traj-label { color: var(--danger); }
  .traj-stable { border-left-color: var(--insight); }
  .traj-stable .traj-icon, .traj-stable .traj-label { color: var(--insight); }
  /* Moat-verifying metric callout */
  .verify { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 13px 16px 14px; margin: 16px 0 6px; background: var(--panel); }
  .verify .v-head { display: flex; align-items: center; gap: 8px; font-family: system-ui, sans-serif; margin-bottom: 8px; }
  .verify .v-icon { font-size: 15px; line-height: 1; }
  .verify .v-label { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
  .verify .v-metric { font-family: system-ui, sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .verify .v-value { font-family: system-ui, sans-serif; font-size: 21px; font-weight: 800; color: var(--accent); margin: 1px 0 8px; line-height: 1.15; }
  .verify p { margin: 0; font-size: 14px; line-height: 1.55; }
  .verify .v-source { display: inline-block; margin-top: 10px; font-family: system-ui, sans-serif; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
  /* Threat-verifying metric — the red-accented mirror, on top-level threat pages */
  .verify.threat { border-left-color: var(--danger); }
  .verify.threat .v-value { color: var(--danger); }

  /* Company moat scorecard (root pages) — the rating broken into six dimensions */
  .scorecard { border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px 16px; margin: 20px 0 6px; background: var(--panel); box-shadow: var(--shadow); font-family: system-ui, sans-serif; }
  .scorecard .sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .scorecard .sc-title { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
  .scorecard .sc-help { font-size: 12px; color: var(--accent); text-decoration: none; cursor: pointer; white-space: nowrap; }
  .scorecard .sc-help:hover { text-decoration: underline; }
  .sc-rows { display: flex; flex-direction: column; gap: 9px; }
  .sc-row { display: grid; grid-template-columns: 148px 1fr 40px; align-items: center; gap: 12px; }
  .sc-dim { font-size: 13.5px; color: var(--ink); }
  .sc-bar { height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
  .sc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
  .sc-num { font-size: 13px; font-weight: 700; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
  .sc-num span { font-weight: 400; color: var(--muted); font-size: 11px; }
  .sc-row.sc-overall { margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--line); }
  .sc-row.sc-overall .sc-dim { font-weight: 700; }
  .sc-row.sc-overall .sc-bar { height: 10px; }
  .sc-row.sc-overall .sc-num { font-size: 15px; }
  .sc-note { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
  @media (max-width: 560px) { .sc-row { grid-template-columns: 116px 1fr 38px; gap: 9px; } .sc-dim { font-size: 12.5px; } }

  /* Investment card — the compact at-a-glance summary above the essay (root pages) */
  .icard { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); padding: 15px 18px 16px; margin: 14px 0 22px; font-family: system-ui, sans-serif; }
  .ic-title { font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; }
  .ic-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .ic-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
  .ic-chip .ic-chip-k { font-weight: 400; color: var(--muted); }
  .ic-chip.moat-wide, .ic-chip.dir-widening, .ic-chip.val-cheap { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
  .ic-chip.moat-narrow, .ic-chip.dir-stable, .ic-chip.val-fair { background: var(--insight-soft); color: var(--insight); border-color: transparent; }
  .ic-chip.moat-thin, .ic-chip.dir-narrowing, .ic-chip.val-expensive { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
  .ic-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 18px; margin-bottom: 4px; }
  .ic-item { border-left: 3px solid var(--line); padding-left: 11px; }
  .ic-item.strong { border-left-color: var(--accent); }
  .ic-item.threat { border-left-color: var(--danger); }
  .ic-k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .ic-v { display: block; font-size: 14px; line-height: 1.35; color: var(--ink); }
  .ic-verdict { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink); }
  .ic-verdict .ic-vlabel { font-weight: 700; color: var(--accent); }
  @media (max-width: 640px) { .ic-grid { grid-template-columns: 1fr; gap: 9px; } }

  /* Inline citation markers + numbered References with provenance badges */
  sup.cref { line-height: 0; font-size: 68%; }
  sup.cref a { color: var(--accent); text-decoration: none; cursor: pointer; font-family: system-ui, sans-serif; font-weight: 700; padding: 0 1px; }
  sup.cref a:hover { text-decoration: underline; }
  .page-danger sup.cref a { color: var(--danger); }
  .page-insight sup.cref a { color: var(--insight); }
  .page-future sup.cref a { color: var(--future); }
  ol.citations { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: cite; font-family: system-ui, sans-serif; }
  ol.citations li { counter-increment: cite; position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
  ol.citations li:last-child { border-bottom: none; }
  ol.citations li::before { content: counter(cite); position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .cbadge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-right: 7px; vertical-align: middle; white-space: nowrap; }
  .cat-reported { background: var(--accent-soft); color: var(--accent); }
  .cat-estimate { background: var(--insight-soft); color: var(--insight); }
  .cat-calc { background: #e4edf7; color: #2b5f97; }
  .cat-inference { background: #ece8e1; color: var(--muted); }
  .cclaim { color: var(--ink); }
  .csrc { color: var(--muted); margin-top: 3px; }
  .csrc a { color: var(--accent); text-decoration: none; }
  .csrc a:hover { text-decoration: underline; }
  .cmethod { margin-top: 4px; color: var(--muted); background: var(--bg); border-radius: 7px; padding: 6px 9px; font-size: 12px; }
  .cite-flash { animation: citeflash 1.4s ease; }
  @keyframes citeflash { 0%,20% { background: var(--insight-soft); } 100% { background: transparent; } }
  /* Provenance extras on the verify callout */
  .verify .v-cat { margin-bottom: 8px; }
  .verify .v-method { margin-top: 9px; font-family: system-ui, sans-serif; font-size: 12px; line-height: 1.5; color: var(--muted); background: var(--bg); border-radius: 8px; padding: 8px 11px; }
  .verify .v-method b, .verify .v-note b { color: var(--ink); }
  .verify .v-note { margin-top: 8px; font-family: system-ui, sans-serif; font-size: 12px; line-height: 1.5; color: var(--muted); }
  .verify a.v-srclink { color: var(--accent); text-decoration: none; }
  .verify.threat a.v-srclink { color: var(--danger); }
  .verify a.v-srclink:hover { text-decoration: underline; }

  /* Clickable rating pill -> "How ratings work" */
  .rpill.link { cursor: pointer; }
  .rpill.link:hover { text-decoration: underline; }

  /* "How ratings work" methodology page */
  .methodology { max-width: 760px; }
  .methodology h2.title { margin-bottom: 6px; }
  .methodology .m-intro { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 4px 0 8px; }
  .methodology h3 { font-family: system-ui, sans-serif; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin: 30px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .methodology p { font-size: 15.5px; line-height: 1.62; margin: 0 0 13px; }
  .m-tiers { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 6px; }
  .m-tier { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 12px 15px; background: var(--panel); }
  .m-tier .m-tier-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
  .m-tier .m-tier-name { font-family: system-ui, sans-serif; font-weight: 700; font-size: 14.5px; }
  .m-tier .m-tier-dur { font-family: system-ui, sans-serif; font-size: 11.5px; color: var(--muted); margin-left: auto; }
  .m-tier p { font-size: 14.5px; margin: 0; line-height: 1.55; }
  .m-tier.wide { border-left-color: var(--accent); }
  .m-tier.narrow { border-left-color: var(--insight); }
  .m-tier.thin { border-left-color: var(--danger); }
  .m-tier.wide .m-tier-name { color: var(--accent); }
  .m-tier.narrow .m-tier-name { color: var(--insight); }
  .m-tier.thin .m-tier-name { color: var(--danger); }
  .m-crit { list-style: none; padding: 0; margin: 4px 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  .m-crit li { font-size: 14.5px; line-height: 1.5; padding-left: 16px; position: relative; }
  .m-crit li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); }
  .m-crit b { font-weight: 700; }
  .m-dims { list-style: none; padding: 0; margin: 4px 0 6px; }
  .m-dims li { font-size: 14.5px; line-height: 1.5; margin: 0 0 9px; padding-left: 16px; position: relative; }
  .m-dims li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); }
  .m-note { font-family: system-ui, sans-serif; font-size: 12.5px; line-height: 1.55; color: var(--muted); background: var(--accent-soft); border-radius: 10px; padding: 12px 15px; margin: 8px 0 0; }
  .m-back { display: inline-flex; align-items: center; gap: 6px; font-family: system-ui, sans-serif; font-size: 13px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; text-decoration: none; margin-bottom: 18px; }
  .m-back:hover { text-decoration: underline; }
  @media (max-width: 560px) { .m-crit { grid-template-columns: 1fr; } }
  .badge { display: inline-block; font-family: system-ui, sans-serif; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); margin-left: 8px; vertical-align: middle; }
  .badge.danger { background: var(--danger-soft); color: var(--danger); }
  .badge.insight { background: var(--insight-soft); color: var(--insight); }
  /* "read" markers: a ✓ on tree rows already read, and a header badge */
  .badge.read { background: var(--accent-soft); color: var(--accent); }
  .tw-read { flex: 0 0 auto; color: var(--accent); font-weight: 700; font-size: 12px; line-height: 1; }
  .trow.read .tw-label { color: var(--muted); }
  .trow.read.active .tw-label, .trow.read:hover .tw-label { color: var(--ink); }

  /* Rating: a 3-bar strength/severity meter + a worded pill. */
  .rbars { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; line-height: 0; }
  .rbars i { width: 3px; background: currentColor; opacity: .26; border-radius: 1px; }
  .rbars i:nth-child(1) { height: 4px; }
  .rbars i:nth-child(2) { height: 7px; }
  .rbars i:nth-child(3) { height: 10px; }
  .rbars i.on { opacity: 1; }
  .rbars.moat { color: var(--accent); }
  .rbars.threat { color: var(--danger); }
  .rpill { display: inline-flex; align-items: center; gap: 6px; font-family: system-ui, sans-serif; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
  .rpill.moat { background: var(--accent-soft); color: var(--accent); }
  .rpill.threat { background: var(--danger-soft); color: var(--danger); }
  .tw-rbars { margin-left: 6px; flex: 0 0 auto; }
  .num .rbars { margin-left: 8px; vertical-align: middle; }

  .summary { font-size: 18px; line-height: 1.65; }
  .summary p { margin: 0 0 16px; }
  .summary b { font-weight: 700; color: var(--ink); }

  /* One-line company thesis (root pages) — a stance-taking pull-quote */
  .thesis { font-size: 20.5px; line-height: 1.42; font-style: italic; color: var(--accent); border-left: 3px solid var(--accent); padding: 3px 0 3px 18px; margin: 16px 0 6px; }
  .thesis b { font-weight: 700; font-style: normal; }
  .page-danger .thesis { color: var(--danger); border-left-color: var(--danger); }
  .page-insight .thesis { color: var(--insight); border-left-color: var(--insight); }
  .page-future .thesis { color: var(--future); border-left-color: var(--future); }

  /* Inline article figure (per-node SVG graphic + caption) */
  .article-figure { margin: 20px 0 24px; padding: 14px 16px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
  .article-figure svg { display: block; width: 100%; height: auto; }
  .article-figure figcaption { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-family: system-ui, sans-serif; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
  .page-danger .article-figure { border-color: var(--danger-line); }
  .page-danger .article-figure figcaption { border-top-color: var(--danger-line); }
  .page-insight .article-figure { border-color: var(--insight-line); }
  .page-insight .article-figure figcaption { border-top-color: var(--insight-line); }
  .page-future .article-figure { border-color: var(--future-line); background: var(--future-soft); }
  .page-future .article-figure figcaption { border-top-color: var(--future-line); }
  .page-danger h2.title { color: var(--danger); }
  .page-danger .summary { border-left: 3px solid var(--danger-line); padding-left: 22px; }
  .page-insight h2.title { color: var(--insight); }
  .page-insight .summary { border-left: 3px solid var(--insight-line); padding-left: 22px; }
  .page-future h2.title { color: var(--future); }
  .page-future .summary { border-left: 3px dashed var(--future-line); padding-left: 22px; }

  .dig-head { font-family: system-ui, sans-serif; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin: 34px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .dig-head.danger { color: var(--danger); border-bottom-color: var(--danger-line); }
  .dig-head.insight { color: var(--insight); border-bottom-color: var(--insight-line); }
  .dig-head.future { color: var(--future); border-bottom-color: var(--future-line); }
  .aspects { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  /* Mobile menu toggle + backdrop — hidden on desktop, shown in the media query. */
  .menu-btn { display: none; }
  .backdrop { display: none; }
  @media (max-width: 720px) {
    .aspects { grid-template-columns: 1fr; }
    /* The sidebar becomes a slide-in drawer so the article gets the full width. */
    aside {
      position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
      width: min(86vw, 340px); z-index: 40;
      transform: translateX(-100%); transition: transform .22s ease;
      box-shadow: 0 0 40px rgba(0,0,0,.22);
    }
    body.nav-open aside { transform: translateX(0); }
    .backdrop {
      display: block; position: fixed; inset: 0; z-index: 30;
      background: rgba(0,0,0,.36); opacity: 0; pointer-events: none;
      transition: opacity .22s ease;
    }
    body.nav-open .backdrop { opacity: 1; pointer-events: auto; }
    .menu-btn {
      display: flex; align-items: center; justify-content: center;
      position: fixed; top: 10px; left: 12px; z-index: 50;
      width: 42px; height: 42px; border-radius: 10px; padding: 0;
      background: var(--panel); border: 1px solid var(--line); color: var(--ink);
      box-shadow: 0 2px 8px rgba(0,0,0,.14); cursor: pointer; font-size: 18px; line-height: 1;
    }
    main { padding: 60px 20px 60px; }
    /* Charts view on mobile: a single swipeable row of links (not a tall wrap),
       indented so it clears the fixed hamburger button top-left. The swipe/overflow
       lives on the inner .cnb-scroll so the outer bar can stay position:sticky. */
    main.charts-mode .chart-nav-bar { padding-left: 44px; }
    main.charts-mode .cnb-scroll { flex-wrap: nowrap; overflow-x: auto;
      scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    main.charts-mode .cnb-scroll::-webkit-scrollbar { display: none; }
    main.charts-mode .cnb-scroll a { flex: 0 0 auto; }
    main.charts-mode .crumbs { padding-left: 44px; }
  }
  a.aspect { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; cursor: pointer; font-family: inherit; color: var(--ink); box-shadow: var(--shadow); transition: transform .06s, border-color .1s; }
  a.aspect:hover { border-color: var(--accent); transform: translateY(-1px); }
  a.aspect .num { font-family: system-ui, sans-serif; font-size: 11px; color: var(--accent); font-weight: 700; }
  a.aspect .t { font-size: 17px; margin: 6px 0 6px; font-weight: 600; }
  a.aspect .d { font-family: system-ui, sans-serif; font-size: 13px; color: var(--muted); line-height: 1.5; }
  a.aspect.danger { background: var(--danger-soft); border-color: var(--danger-line); }
  a.aspect.danger:hover { border-color: var(--danger); }
  a.aspect.danger .num, a.aspect.danger .t { color: var(--danger); }
  a.aspect.danger .d { color: #8a4a44; }
  a.aspect.insight { background: var(--insight-soft); border-color: var(--insight-line); }
  a.aspect.insight:hover { border-color: var(--insight); }
  a.aspect.insight .num, a.aspect.insight .t { color: var(--insight); }
  a.aspect.insight .d { color: #7a5c22; }
  a.aspect.future { background: var(--future-soft); border-color: var(--future-line); border-style: dashed; }
  a.aspect.future:hover { border-color: var(--future); }
  a.aspect.future .num, a.aspect.future .t { color: var(--future); }
  a.aspect.future .d { color: #4a3d8f; }

  .loading, .error { font-family: system-ui, sans-serif; color: var(--muted); padding: 20px 0; }
  .error { color: #a23; }
  .spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; margin-right: 8px; }
  @keyframes spin { to { transform: rotate(360deg); } }

/* ---- static-site additions (real links where the SPA used buttons) ---- */
/* The app was a fixed shell whose <main> scrolled internally. A content site should
   scroll the document itself: it is what in-page anchors, the browser's find-on-page
   and mobile browsers all expect. The sidebar becomes sticky instead. */
html, body { height: auto !important; overflow: visible !important; }
body { display: block !important; }
main { overflow: visible !important; }
@media (min-width: 721px) {
  aside { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; }
  main { margin-left: 340px; }
}
@media (max-width: 720px) { main { padding: 26px 18px 64px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.citations li, h1, h2, .dig-head { scroll-margin-top: 18px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--panel); padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 8px; }
/* Everything else about these cards comes from the app's own rules above, re-pointed
   from button.aspect to a.aspect; an anchor just needs these two. */
a.aspect { display: block; text-decoration: none; }
.trow a.tw-label { color: inherit; text-decoration: none; display: block; }
.tree .trow { padding-right: 14px; }
/* Branches are nested, so collapsing one hides its whole subtree. Everything stays in
   the HTML for crawlers; only the path to the current page starts expanded. */
.tw-kids { display: none; }
.tw-node.open > .tw-kids { display: block; }
button.tw-chev { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; line-height: 1; -webkit-appearance: none; appearance: none;
  width: 16px; flex: 0 0 16px; }
button.tw-chev:hover { color: var(--ink); }
.tw-node.open > .trow > button.tw-chev { transform: rotate(90deg); }
button.tw-chev:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.brand-link { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.brand-link span { font-family: Georgia, 'Times New Roman', serif; font-size: 19px; font-weight: 600; }
.tagline { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* overflow-anchor:none — when the webfont swaps, rows above the fold grow and the
   browser's scroll anchoring bumps scrollTop to keep visible content still, which
   pushes the centred active row back off the top. */
.tree { overflow-y: auto; flex: 1; padding-bottom: 24px; overflow-anchor: none; }
h1.title { font-size: 30px; }
.home-h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 32px; line-height: 1.2;
  margin: 6px 0 14px; }
.home-lede { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0 0 12px; }
.home-sub { font-size: 14.5px; color: var(--muted); margin: 0 0 26px; }
.home-sub a, .home-lede a, .chart-note a { color: var(--accent); }
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .co-grid { grid-template-columns: 1fr; } }
.co-card { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
  box-shadow: var(--shadow); transition: transform .06s, border-color .1s; }
.co-card:hover { transform: translateY(-1px); border-color: var(--accent); }
.co-rank { font-size: 12px; color: var(--muted); width: 20px; flex: 0 0 20px; }
.co-main { flex: 1; min-width: 0; }
.co-name { display: block; font-size: 16px; font-weight: 600; }
.co-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.co-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.co-cap { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: var(--muted); }
.siblings { margin-top: 26px; }
.siblings ul { margin: 0; padding-left: 18px; }
.siblings li { margin: 5px 0; font-size: 14.5px; }
.siblings a { color: var(--accent); text-decoration: none; }
.siblings a:hover { text-decoration: underline; }
.sec-cap { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--muted); }
.sec-note { font-size: 14.5px; color: var(--muted); margin: 4px 0 0; }
.site-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); }
.site-foot a { color: var(--accent); text-decoration: none; }
.site-foot .disclaimer { margin-top: 8px; line-height: 1.55; }
.site-foot .copyright { margin-top: 10px; }
.chart-note { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 4px 0 18px; }
/* The embed posts its real height after load. Without overflow-anchor:none the
   browser treats that growth as a scroll anchor and lands the reader ~200px down,
   past the page's own h1 and breadcrumbs. */
.chart-frame { width: 100%; border: 0; min-height: 1400px; overflow-anchor: none; }
.cref a { cursor: pointer; }

/* ---- search ---- */
/* A dead control without JS, so hide it then. The 'js' class is set by an inline
   script in <head>, before first paint: revealing the box from the deferred
   search.js instead made it appear after the tree had rendered, pushing the tree
   down on every page load. */
html:not(.js) .search { display: none; }
.search input[type="search"] { -webkit-appearance: none; appearance: none; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.results { flex: 1; overflow-y: auto; padding: 6px 0 24px; }
.results[hidden] { display: none; }
.result { display: block; padding: 9px 16px; text-decoration: none; color: var(--ink);
  border-left: 3px solid transparent; }
.result:hover, .result.on { background: var(--accent-soft); border-left-color: var(--accent); }
.result .r-t { display: block; font-size: 14px; line-height: 1.35; }
.result .r-c { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px;
  font-family: system-ui, sans-serif; }
.result mark { background: #f6e6a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.results-none { padding: 16px; font-size: 13.5px; color: var(--muted);
  font-family: system-ui, sans-serif; }
.rpill.link { text-decoration: none; }