/* ============================================================
   Memory Analyst — thesis page
   Editorial long-form treatment. Modern blue/white palette,
   matched to the rest of the site (no warm tones).
   Self-hosted type: Space Grotesk (display) + Inter (body/UI)
   + JetBrains Mono (code). Variable weights, woff2.
   ============================================================ */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/spacegrotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/spacegrotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/jetbrainsmono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/jetbrainsmono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  /* Cool palette, aligned to the main site */
  --bg:        #f4f6f8;   /* cool paper field */
  --paper:     #ffffff;   /* reading surface */
  --paper-2:   #ffffff;
  --ink:       #18202e;   /* near-black headings */
  --text:      #202631;   /* body */
  --muted:     #5f6977;   /* secondary */
  --faint:     #646d7a;   /* darkened to clear WCAG AA (4.5:1) on white and on --soft */
  --line:      #dce2ea;   /* hairlines */
  --line-2:    #c9d2de;
  --soft:      #eef2f7;

  --blue:      #2f5fd7;
  --blue-deep: #1f3f9e;
  --blue-soft: #9db8ec;
  --blue-tint: #eaf0fd;
  --green:     #0b7a5a;
  --red:       #b43b2f;
  --amber:     #a66718;
  --purple:    #6f3fc8;
  --accent:    #2f5fd7;   /* single accent — replaces the old warm one */

  --ink-panel:  #131b2c;  /* cool navy for dark sections */
  --ink-panel-2:#1a2438;

  --shadow-sm: 0 1px 2px rgba(24, 38, 74, .07);
  --shadow:    0 6px 24px -12px rgba(24, 38, 74, .22), 0 1px 2px rgba(24,38,74,.05);
  --shadow-lg: 0 30px 70px -34px rgba(24, 38, 74, .40);

  --sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif:   "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* body is sans now */
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 42rem;
  --wide: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(47,95,215,.08), transparent 60%),
    radial-gradient(820px 460px at -6% 2%, rgba(47,95,215,.05), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.58;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; }

::selection { background: rgba(47,95,215,.18); }

/* ---------- Reading progress ---------- */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--blue), #6f9bf2);
  z-index: 80; transition: width .12s ease-out;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav {
  max-width: var(--wide); margin: 0 auto;
  padding: 12px 24px; display: flex; align-items: center; gap: 18px;
}
.site-brand {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none; font-size: 15px;
  display: inline-flex; align-items: center; gap: 9px;
}
.site-brand .mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: conic-gradient(from 210deg, var(--blue), var(--purple), #4f8cf0, var(--blue));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45);
}
.site-brand .site-tag {
  font-size: 10px; font-weight: 800; color: #fff; background: var(--blue);
  padding: 2px 6px; border-radius: 999px; letter-spacing: .04em;
}
.site-links { margin-left: auto; display: flex; gap: 4px; font-family: var(--sans); flex-wrap: wrap; }
.site-links a {
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 650;
  padding: 7px 11px; border-radius: 8px;
}
.site-links a:hover, .site-links a.active { background: var(--soft); color: var(--ink); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--sans); font-weight: 800; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
  margin: 0 0 14px;
}
.eyebrow.blue { color: var(--blue); }

/* ---------- Hero ---------- */
.hero { padding: 46px 0 30px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(330px,.85fr);
  gap: 48px; align-items: end;
}
.hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 5.8vw, 70px); line-height: 1.0;
  letter-spacing: -.03em; color: var(--ink); margin: 0;
}
.hero h1 em { font-style: normal; color: var(--blue); font-weight: 600; }
.hero .dek {
  font-family: var(--serif); font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.5; color: var(--muted); margin: 22px 0 0; max-width: 38ch;
}
.hero .dek b { color: var(--text); font-weight: 600; }
.hero-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  font-family: var(--sans); font-weight: 650; font-size: 14px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 11px; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.primary { background: var(--blue); color: #fff; border-color: var(--blue-deep); }
.btn.primary:hover { background: var(--blue-deep); }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Hero range band — the centrepiece reframe */
.range-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: 22px 22px 24px; box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.range-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--green), #c9b25e, var(--red));
}
.range-card .rc-label {
  font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 4px;
}
.range-card .rc-title { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--ink); }
.range-band { margin: 20px 0 6px; }
.band-track {
  position: relative; height: 16px; border-radius: 999px;
  background: linear-gradient(90deg, #d4ece1 0%, #e6eef6 46%, #e9eef6 56%, #f1dad5 100%);
  border: 1px solid var(--line);
}
.band-zone {
  position: absolute; top: -5px; bottom: -5px; border-radius: 999px;
  background: rgba(24,32,46,.05); border: 1px dashed var(--line-2);
}
.band-marker {
  position: absolute; top: 50%; width: 2px; height: 30px;
  translate: -1px -50%; background: var(--ink);
}
.band-marker::after {
  content: attr(data-label); position: absolute; left: 50%; translate: -50% 0; top: -26px;
  white-space: nowrap; font-family: var(--sans); font-size: 10.5px; font-weight: 800;
  color: var(--ink); background: var(--paper); padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--line);
}
.band-marker.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); top: 50%; }
.band-marker.dot.center { background: var(--blue); box-shadow: 0 0 0 4px rgba(47,95,215,.18); }
.band-ends {
  display: flex; justify-content: space-between; margin-top: 16px;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
}
.band-ends .lo { color: var(--green); }
.band-ends .hi { color: var(--red); }
.rc-readout {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
.rc-readout div span {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 700;
  color: var(--faint); text-transform: uppercase; letter-spacing: .06em;
}
.rc-readout div strong {
  font-family: var(--display); font-weight: 560; font-size: 25px; color: var(--ink);
  letter-spacing: -.01em;
}
.rc-readout div em { display: block; margin-top: 1px; font-style: normal; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.rc-unit {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 11.5px; color: var(--faint); line-height: 1.5;
}
.rc-unit b { color: var(--muted); font-weight: 700; }
.rc-foot {
  margin-top: 12px; font-family: var(--sans); font-size: 11.5px; color: var(--muted);
  line-height: 1.5;
}

/* Hero line chart — demand vs supply, the curves separating */
.rc-chart { margin: 18px 0 2px; }
.rc-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.rc-grid line { stroke: var(--line); stroke-width: 1; }
.rc-ytick { font-family: var(--sans); font-size: 11px; fill: var(--faint); text-anchor: end; }
.rc-yunit { font-family: var(--sans); font-size: 9.5px; fill: var(--faint); text-anchor: end; letter-spacing: .04em; }
.rc-xtick text { font-family: var(--sans); font-size: 11px; fill: var(--faint); text-anchor: middle; }
.rc-gap { fill: rgba(199,63,63,.10); stroke: none; }
.rc-demand {
  fill: none; stroke: var(--red); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 470; stroke-dashoffset: 470; animation: rc-draw 1.5s ease forwards .15s;
}
.rc-supply {
  fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 415; stroke-dashoffset: 415; animation: rc-draw 1.5s ease forwards .15s;
}
.rc-dot.dem { fill: var(--red); }
.rc-dot.sup { fill: var(--blue); }
.rc-end { font-family: var(--sans); font-weight: 800; font-size: 12.5px; }
.rc-end.dem { fill: var(--red); }
.rc-end.sup { fill: var(--blue); }
.rc-endv { font-family: var(--sans); font-weight: 600; font-size: 11.5px; fill: var(--muted); }
.rc-bracket { stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 2 3; }
.rc-gaplabel { font-family: var(--display); font-weight: 600; font-size: 16px; fill: var(--ink); }
.rc-gapsub { font-family: var(--sans); font-size: 10px; fill: var(--faint); }
.rc-readout.tri { grid-template-columns: repeat(3, 1fr); }
.rc-readout.tri div strong { font-size: 22px; }
@keyframes rc-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rc-demand, .rc-supply { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Thin meta strip ---------- */
.meta-strip {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 38px; padding: 14px 0;
  display: flex; gap: 26px; flex-wrap: wrap; align-items: center;
  font-family: var(--sans); font-size: 12.5px; color: var(--muted);
}
.meta-strip b { color: var(--ink); font-weight: 700; }
.meta-strip .sep { width: 1px; height: 16px; background: var(--line-2); }

/* ---------- Article shell ---------- */
.shell {
  display: grid; grid-template-columns: minmax(0,42rem) 248px;
  gap: 56px; padding: 56px 24px 40px; align-items: start;
  justify-content: space-between; /* article hugs the left (aligned with hero), rail hugs the right edge (aligned with header/footer) */
}
.article { max-width: 42rem; } /* matches --measure so body text and block components share one column width */
.article > p, .article > h2, .article > h3, .article > .lead, .article > ul, .article > blockquote {
  max-width: var(--measure);
}

/* Reading rail */
.rail { position: sticky; top: 86px; font-family: var(--sans); }
.rail h4 {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 12px;
}
.rail ol { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rail li { margin: 0; }
.rail a {
  display: block; padding: 5px 0 5px 22px; position: relative;
  font-size: 12.5px; color: var(--muted); text-decoration: none; line-height: 1.4;
  border-left: 2px solid var(--line); transition: color .15s, border-color .15s;
}
.rail a::before {
  counter-increment: r; content: counter(r, decimal-leading-zero);
  position: absolute; left: 0; top: 5px; transform: translateX(-100%); padding-right: 8px;
  font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .15s;
}
.rail a:hover { color: var(--ink); border-color: var(--blue); }
.rail a.active { color: var(--ink); border-color: var(--blue); font-weight: 650; }
.rail a.active::before { opacity: 1; }
.rail .rail-cta {
  margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--blue-tint); box-shadow: var(--shadow-sm);
}
.rail .rail-cta p { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.rail .rail-cta strong { color: var(--ink); }

/* ---------- Typography in article ---------- */
.article h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.022em;
  font-size: clamp(26px, 3.5vw, 37px); line-height: 1.1; color: var(--ink);
  margin: 8px 0 22px; scroll-margin-top: 90px;
}
.article .h2-kicker {
  font-family: var(--sans); font-weight: 800; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue); display: flex; align-items: center; gap: 10px;
  margin: 58px 0 0; scroll-margin-top: 90px;
}
.article > .h2-kicker:first-child { margin-top: 6px; }
.article .h2-kicker::before {
  content: ""; width: 26px; height: 2px; background: var(--blue); display: inline-block;
}
.article h3 {
  font-family: var(--sans); font-weight: 750; font-size: 18px; color: var(--ink);
  margin: 36px 0 8px; letter-spacing: -.01em;
}
.article p { margin: 0 0 20px; }
/* Block components: their top margin ADDS to the preceding paragraph's margin
   (no collapse) while their bottom margin collapses with the following text.
   Asymmetric margins (small top, large bottom) render an even ~32px both sides.
   (.formula and blockquote.pull collapse symmetrically already, so are excluded.) */
.article > .shift, .article > .buckets, .article > .witness, .article > .deadheat,
.article > .dial, .article > .ladder, .article > .tornado, .article > .gates,
.article > .fork, .article > .scorecard, .article > .stat-cluster, .article > .panel,
.article > .history {
  margin-top: 14px; margin-bottom: 42px;
}
.article .lead {
  font-family: var(--serif); font-size: clamp(20px, 2.4vw, 24px); line-height: 1.5;
  color: var(--text); margin: 0 0 26px;
}
.article .lead.dropcap::first-letter {
  font-family: var(--display); font-weight: 600; float: left; font-size: 4.4em;
  line-height: .76; padding: 6px 12px 0 0; color: var(--blue);
}
.article a.ln {
  color: var(--blue-deep); text-decoration: none;
  background-image: linear-gradient(var(--blue), var(--blue));
  background-size: 100% 1px; background-position: 0 1.18em; background-repeat: no-repeat;
  transition: background-size .2s;
}
.article a.ln:hover { background-size: 100% 2px; }
.article strong { font-weight: 640; color: var(--ink); }
.article em.term { font-style: normal; background: linear-gradient(transparent 62%, rgba(47,95,215,.16) 0); padding: 0 1px; }

.article ul { margin: 0 0 22px; padding-left: 0; list-style: none; }
.article ul li {
  position: relative; padding-left: 26px; margin: 0 0 11px;
}
.article ul li::before {
  content: ""; position: absolute; left: 4px; top: .72em; width: 7px; height: 7px;
  border-radius: 2px; background: var(--blue); transform: rotate(45deg);
}

/* Numbered list (e.g. the memory cycle) */
.article > ol {
  max-width: var(--measure); margin: 0 0 22px; padding-left: 0;
  list-style: none; counter-reset: cyc;
}
.article > ol li { position: relative; padding-left: 38px; margin: 0 0 12px; line-height: 1.55; }
.article > ol li::before {
  counter-increment: cyc; content: counter(cyc);
  position: absolute; left: 0; top: 0; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 12px; color: #fff;
  background: var(--blue); border-radius: 50%;
}

blockquote.pull {
  margin: 36px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--blue);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 3vw, 29px); line-height: 1.2; color: var(--ink); letter-spacing: -.022em;
}

.note {
  font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--muted);
  border-left: 2px solid var(--line-2); padding: 2px 0 2px 16px; margin: 24px 0;
}
.note b { color: var(--ink); }

/* Figure caption */
figure { margin: 30px 0; }
figcaption {
  font-family: var(--sans); font-size: 12px; color: var(--faint); margin-top: 12px;
  line-height: 1.5;
}
figcaption b { color: var(--muted); font-weight: 700; }

/* ---------- Stat cluster ---------- */
.stat-cluster {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; margin: 30px 0; max-width: var(--measure);
}
.stat-cluster div { background: var(--paper); padding: 18px 18px 16px; }
.stat-cluster span {
  font-family: var(--sans); font-size: 11px; font-weight: 750; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.stat-cluster strong {
  display: block; font-family: var(--display); font-weight: 560; font-size: 30px;
  color: var(--ink); margin: 6px 0 2px; letter-spacing: -.015em;
}
.stat-cluster em { font-style: normal; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }

/* ---------- Generic panel ---------- */
.panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px; margin: 30px 0; box-shadow: var(--shadow); position: relative;
}
.panel .p-eyebrow {
  font-family: var(--sans); font-weight: 800; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 8px;
}
.panel h3 { margin-top: 0; }
.panel p { font-size: 16px; line-height: 1.6; }

/* ---------- Track record (historical context) ---------- */
.history {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); overflow: hidden;
}
.hist-row {
  display: grid; grid-template-columns: minmax(116px,1fr) minmax(0,1.9fr) 94px;
  gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line);
}
.hist-row:first-child { border-top: 0; }
.hist-key { font-family: var(--sans); font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.25; }
.hist-key small { display: block; font-weight: 500; color: var(--faint); font-size: 11px; margin-top: 2px; }
.hist-seq { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.hpt {
  display: inline-flex; flex-direction: column; line-height: 1.04;
  font-family: var(--display); font-weight: 560; font-size: 16px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hpt i { font-style: normal; font-family: var(--sans); font-size: 9.5px; font-weight: 700; color: var(--faint); letter-spacing: .02em; margin-top: 2px; }
.hpt.now { color: var(--blue); }
.hsep { color: var(--line-2); font-size: 14px; align-self: center; }
.hist-x { text-align: right; font-family: var(--display); font-weight: 560; font-size: 17px; color: var(--ink); }
.hist-x small { display: block; font-family: var(--sans); font-weight: 600; font-size: 10px; color: var(--faint); }
.hist-note {
  padding: 11px 20px 13px; border-top: 1px solid var(--line); background: var(--soft);
  font-family: var(--sans); font-size: 11px; line-height: 1.5; color: var(--faint);
}
.hist-note a { color: var(--blue-deep); }
@media (max-width: 620px) {
  .hist-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .hist-key { grid-column: 1 / -1; }
  .hist-x { font-size: 15px; }
}

/* ---------- Reframe / shift cards ---------- */
.shift {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 30px 0;
}
/* three-engine layout: the lone third card spans the full width */
.shift article:nth-child(3):last-child { grid-column: 1 / -1; }
.shift article {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-sm);
}
.shift article .from { font-family: var(--sans); font-size: 12px; color: var(--faint); font-weight: 700; }
.shift article .to {
  font-family: var(--display); font-weight: 560; font-size: 21px; color: var(--ink);
  margin: 4px 0 8px; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 8px;
}
.shift article .to .ar { color: var(--blue); font-family: var(--sans); font-size: 15px; }
.shift article p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* ---------- Formula ---------- */
.formula {
  font-family: var(--mono); font-size: 14.5px; line-height: 1.6;
  background: var(--ink-panel); color: #e8edf6; border-radius: 14px; padding: 20px 22px;
  margin: 30px 0; overflow-x: auto; box-shadow: var(--shadow);
}
.formula .c { color: #8fb6ff; }
.formula .o { color: #b9c4ff; }
.formula .k { color: #8fe0bd; }
.formula .muted { color: #79859f; }
.formula b { color: #fff; font-weight: 700; }

/* ---------- Bucket bars ---------- */
.buckets { margin: 30px 0; max-width: var(--measure); }
.bucket-row {
  display: grid; grid-template-columns: 52px 1fr 78px; align-items: center; gap: 14px;
  margin: 0 0 12px;
}
.bucket-row > span { font-family: var(--sans); font-size: 12px; font-weight: 750; color: var(--muted); }
.bucket-track {
  height: 26px; border-radius: 8px; background: var(--soft); overflow: hidden;
  display: flex; border: 1px solid var(--line);
}
.bucket-track i { height: 100%; display: block; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.bucket-track i.weight  { background: var(--blue-soft); }
.bucket-track i.kv      { background: linear-gradient(180deg, #2f5fd7, #2654bd); }
.bucket-track i.scratch { background: #cdd6e3; }
.bucket-row > strong {
  font-family: var(--display); font-weight: 560; font-size: 17px; color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums;
}
.bucket-legend {
  display: flex; gap: 18px; font-family: var(--sans); font-size: 11.5px; font-weight: 650;
  color: var(--muted); margin-top: 4px;
}
.bucket-legend span { display: inline-flex; align-items: center; gap: 7px; }
.bucket-legend i { width: 11px; height: 11px; border-radius: 3px; }
.bucket-legend i.weight { background: var(--blue-soft); }
.bucket-legend i.kv { background: var(--blue); }
.bucket-legend i.scratch { background: #cdd6e3; }

/* ---------- Two witnesses ---------- */
.witness {
  margin: 30px 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px; box-shadow: var(--shadow);
}
.witness-grid {
  display: grid; grid-template-columns: 1fr 64px 1fr; gap: 16px; align-items: stretch;
}
.witness-col { display: flex; flex-direction: column; }
.witness-col .wc-tag {
  font-family: var(--sans); font-weight: 800; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 8px;
}
.witness-col.down .wc-tag { color: var(--blue); }
.witness-col.up .wc-tag { color: var(--purple); }
.witness-col h4 { font-family: var(--sans); font-weight: 750; font-size: 16px; margin: 0 0 12px; color: var(--ink); }
.witness-step {
  font-family: var(--sans); font-size: 12.5px; color: var(--muted); padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--paper-2);
  line-height: 1.4;
}
.witness-step b { color: var(--ink); font-variant-numeric: tabular-nums; }
.witness-mid {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.witness-mid .conv {
  writing-mode: vertical-rl; font-family: var(--sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.witness-mid .knot {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: #fff; font-family: var(--sans); font-weight: 800; font-size: 11px;
  box-shadow: 0 0 0 6px rgba(47,95,215,.10);
}
.witness-out {
  margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-2);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.witness-out strong { font-family: var(--display); font-weight: 560; font-size: 22px; color: var(--ink); }
.witness-out span { font-family: var(--sans); font-size: 13px; color: var(--muted); }

/* ---------- Dead heat readout ---------- */
.deadheat {
  margin: 30px 0; border-radius: 20px; padding: 30px;
  background: linear-gradient(150deg, #ffffff, #edf2fb);
  border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
.deadheat .dh-top {
  display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; margin-bottom: 22px;
}
.dh-num { font-family: var(--display); font-weight: 560; font-size: clamp(40px,7vw,64px); line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.dh-num small { font-size: .42em; color: var(--muted); font-weight: 500; }
.dh-vs { font-family: var(--sans); font-weight: 800; font-size: 13px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; }
.dh-bars { display: grid; gap: 12px; }
.dh-bar { display: grid; grid-template-columns: 92px 1fr 66px; align-items: center; gap: 14px; }
.dh-bar span { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--muted); }
.dh-bar .t { height: 22px; border-radius: 7px; background: var(--soft); border: 1px solid var(--line); overflow: hidden; }
.dh-bar .t i { display: block; height: 100%; }
.dh-bar.dem .t i { background: linear-gradient(90deg, #d06a5e, var(--red)); }
.dh-bar.sup .t i { background: linear-gradient(90deg, #2f5fd7, #1f3f9e); }
.dh-bar strong { font-family: var(--display); font-weight: 560; font-size: 17px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Interactive dial ---------- */
.dial {
  margin: 30px 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-2);
}
.dial-head { background: var(--ink-panel); color: #fff; padding: 22px 26px; }
.dial-head .dh-eye { font-family: var(--sans); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8fb0f0; }
.dial-head h3 { font-family: var(--display); font-weight: 560; color: #fff; font-size: 24px; margin: 6px 0 4px; letter-spacing: -.01em; }
.dial-head p { font-family: var(--sans); font-size: 13px; color: #aab6cf; margin: 0; line-height: 1.5; }
.dial-body { background: var(--paper); padding: 26px; }
.dial-controls { display: grid; gap: 22px; margin-bottom: 24px; }
.dctl label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px;
}
.dctl label .val { font-family: var(--mono); font-size: 14px; color: var(--blue); font-weight: 600; }
.dctl input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-soft), var(--blue)); outline: none;
}
.dctl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper-2); border: 2px solid var(--blue); cursor: grab; box-shadow: var(--shadow);
}
.dctl input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2);
  border: 2px solid var(--blue); cursor: grab; box-shadow: var(--shadow);
}
/* visible keyboard focus on the dial sliders (WCAG 2.4.7) */
.dctl input[type=range]:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 4px; }
.dctl input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(47,95,215,.30); }
.dctl input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(47,95,215,.30); }
.dctl .ticks { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 10.5px; color: var(--faint); margin-top: 6px; }
.dial-readout {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 16px;
}
.dial-readout div { background: var(--paper); padding: 16px; text-align: center; }
.dial-readout span { font-family: var(--sans); font-size: 11px; font-weight: 750; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.dial-readout strong { display: block; font-family: var(--display); font-weight: 560; font-size: 30px; margin-top: 4px; font-variant-numeric: tabular-nums; transition: color .2s; color: var(--ink); }
.dial-verdict-track { height: 30px; border-radius: 999px; position: relative; background: linear-gradient(90deg, #d4ece1, #e7edf7 50%, #f1dad5); border: 1px solid var(--line); }
.dial-verdict-track .mid { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; background: var(--ink); opacity: .35; }
.dial-needle { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; translate: -50% -50%; background: var(--ink); border: 3px solid var(--paper); box-shadow: var(--shadow); transition: left .25s cubic-bezier(.2,.7,.2,1), background .2s; }
.dial-verdict-track .vt-tick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--line-2); }
.dial-verdict-track .vt-tick b { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-family: var(--sans); font-weight: 700; font-size: 9px; color: var(--faint); white-space: nowrap; }
.dial .dial-verdict-label { text-align: center; font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 30px; }
.dial-verdict-label b { color: var(--ink); }
.dial-foot { font-family: var(--sans); font-size: 11.5px; color: var(--muted); margin-top: 16px; line-height: 1.5; }
.dial-foot a { color: var(--blue-deep); }

.is-surplus { color: var(--green) !important; }
.is-tight   { color: var(--amber) !important; }
.is-deficit { color: var(--red) !important; }
.bg-surplus { background: var(--green) !important; }
.bg-tight   { background: var(--amber) !important; }
.bg-deficit { background: var(--red) !important; }

/* ---------- Scenario ladder ---------- */
.ladder { margin: 30px 0; display: grid; gap: 10px; }
.rung {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(120px,1.4fr) 96px; gap: 16px;
  align-items: center; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit; transition: transform .14s, box-shadow .14s, border-color .14s;
}
.rung:hover { transform: translateX(3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.rung .r-name { font-family: var(--sans); font-weight: 750; font-size: 14.5px; color: var(--ink); }
.rung .r-name small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 2px; }
.rung .r-track { height: 12px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); overflow: hidden; }
.rung .r-track i { display: block; height: 100%; }
.rung .r-val { font-family: var(--display); font-weight: 560; font-size: 19px; text-align: right; font-variant-numeric: tabular-nums; }
.rung.surplus .r-track i { background: var(--green); } .rung.surplus .r-val { color: var(--green); }
.rung.center  .r-track i { background: var(--blue); } .rung.center .r-val { color: var(--blue); }
.rung.center { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow-sm); }
.rung.tight   .r-track i { background: var(--amber); } .rung.tight .r-val { color: var(--amber); }
.rung.deficit .r-track i { background: var(--red); } .rung.deficit .r-val { color: var(--red); }

/* ---------- Tornado ---------- */
.tornado { margin: 30px 0; display: grid; gap: 12px; max-width: var(--measure); }
.tor-row { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: center; }
.tor-label { font-family: var(--sans); font-size: 12.5px; }
.tor-label strong { display: block; color: var(--ink); font-weight: 700; }
.tor-label span { color: var(--faint); font-size: 11px; }
.tor-track { position: relative; height: 20px; background: var(--soft); border-radius: 6px; border: 1px solid var(--line); }
.tor-track i { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(47,95,215,.35), var(--blue)); border-radius: 6px; }
.tor-track b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.tor-caption { font-family: var(--sans); font-size: 11px; color: var(--faint); margin: 12px 0 0; }
.tor-caption b { color: var(--muted); font-weight: 700; }

/* ---------- Supply gates ---------- */
.gates { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 30px 0; }
.gate { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-sm); }
.gate b { font-family: var(--display); font-weight: 600; font-size: 26px; color: var(--blue); display: block; }
.gate strong { font-family: var(--sans); font-weight: 750; font-size: 14px; color: var(--ink); display: block; margin: 6px 0 6px; }
.gate p { margin: 0; font-family: var(--sans); font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ---------- Cycle fork ---------- */
.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 30px 0; }
.fork article { border-radius: 18px; padding: 24px; box-shadow: var(--shadow); }
.fork .tight { background: var(--blue-tint); border: 1px solid #cfdcfa; }
.fork .broken { background: var(--ink-panel); color: #e8edf6; border: 1px solid var(--ink-panel); }
.fork .f-tag { font-family: var(--sans); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.fork .tight .f-tag { color: var(--blue); }
.fork .broken .f-tag { color: #8fb0f0; }
.fork h3 { margin: 8px 0 10px; }
.fork .tight h3 { color: var(--ink); }
.fork .broken h3 { color: #fff; }
.fork p { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; margin: 0 0 12px; }
.fork .tight p { color: var(--muted); }
.fork .broken p { color: #aab6cf; }
.fork .verdict { font-family: var(--sans); font-size: 12px; font-weight: 700; padding-top: 12px; border-top: 1px solid; }
.fork .tight .verdict { color: var(--ink); border-color: #cfdcfa; }
.fork .broken .verdict { color: #fff; border-color: rgba(255,255,255,.15); }

/* ---------- Monitor scorecard ---------- */
.scorecard { margin: 30px 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.sc-row { display: grid; grid-template-columns: 150px 1fr 120px; gap: 16px; align-items: center; padding: 16px 18px; background: var(--paper); border-top: 1px solid var(--line); }
.sc-row:first-child { border-top: none; background: var(--soft); }
.sc-row .sc-signal { font-family: var(--sans); font-weight: 750; font-size: 13.5px; color: var(--ink); }
.sc-row .sc-signal small { display: block; font-weight: 500; color: var(--faint); font-size: 11px; margin-top: 2px; }
.sc-row .sc-read { font-family: var(--sans); font-size: 13px; color: var(--muted); line-height: 1.45; }
.sc-row .sc-read b { color: var(--ink); }
.sc-head { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pill { font-family: var(--sans); font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 999px; text-align: center; white-space: nowrap; }
.pill.bull { background: rgba(11,122,90,.13); color: var(--green); }
.pill.bear { background: rgba(180,59,47,.12); color: var(--red); }
.pill.watch { background: rgba(47,95,215,.12); color: var(--blue); }

/* ---------- Sources ---------- */
.sources { margin: 24px 0; max-width: var(--measure); }
.sources li { font-family: var(--sans); font-size: 14px; line-height: 1.55; }
.sources li::before { background: var(--line-2); }
.src-tag { font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; margin-right: 7px; }
.src-tag.primary { background: rgba(11,122,90,.13); color: var(--green); }
.src-tag.reported { background: rgba(47,95,215,.12); color: var(--blue); }
.src-tag.modeled { background: rgba(111,63,200,.12); color: var(--purple); }

/* ---------- Closing CTA ---------- */
.closing {
  margin: 60px 0 10px; border-radius: 22px; padding: 44px; text-align: center;
  background: var(--ink-panel); color: #fff; box-shadow: var(--shadow-lg);
  background-image: radial-gradient(700px 300px at 50% -30%, rgba(47,95,215,.40), transparent 60%);
}
.closing h2 { font-family: var(--display); font-weight: 560; color: #fff; font-size: clamp(26px,4vw,38px); margin: 0 auto 14px; max-width: 20ch; letter-spacing: -.01em; }
.closing p { font-family: var(--sans); color: #aab6cf; max-width: 52ch; margin: 0 auto 24px; font-size: 15px; line-height: 1.6; }
.closing .btn { background: #fff; color: var(--ink); border-color: #fff; }
.closing .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }

/* ---------- Disclaimer / footer ---------- */
.disclaimer { margin: 48px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); }
.disclaimer h2 { font-family: var(--sans); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
.disclaimer p { font-family: var(--sans); font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: var(--measure); margin: 0 0 12px; }

.site-footer {
  margin-top: 50px; background: var(--ink-panel); color: #9aa6bf;
}
.site-footer .wrap { padding: 30px 24px; display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.site-footer .ft-brand { font-family: var(--sans); font-weight: 800; color: #fff; font-size: 14px; }
.site-footer p { font-family: var(--sans); font-size: 12px; margin: 6px 0 0; max-width: 60ch; line-height: 1.5; }
.site-footer a { color: #c4cfe2; }

/* ---------- Reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .bucket-track i, .dial-needle { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .shell { grid-template-columns: 1fr; gap: 0; }
  .rail { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}
@media (max-width: 720px) {
  body { font-size: 18px; }
  .wrap { padding: 0 18px; }
  .hero { padding: 30px 0 18px; }
  .stat-cluster { grid-template-columns: 1fr; }
  .shift, .fork, .gates { grid-template-columns: 1fr; }
  .gates { grid-template-columns: 1fr 1fr; }
  .witness-grid { grid-template-columns: 1fr; }
  .witness-mid { flex-direction: row; padding: 6px 0; }
  .witness-mid .conv { writing-mode: horizontal-tb; }
  .dial-readout { grid-template-columns: 1fr; }
  .sc-row { grid-template-columns: 1fr; gap: 8px; }
  .sc-row .pill { justify-self: start; }
  .rung { grid-template-columns: 1fr 70px; }
  .rung .r-track { display: none; }
  .tor-row { grid-template-columns: 130px 1fr; }
  .meta-strip .sep { display: none; }
}
@media (max-width: 540px) {
  /* opaque, single-row header so brand + links don't wrap into a tall bar */
  .site-header { background: #fff; }
  .site-nav { padding: 10px 16px; gap: 10px; flex-wrap: nowrap; }
  .site-brand { white-space: nowrap; font-size: 14px; }
  .site-links { gap: 2px; flex-wrap: nowrap; }
  .site-links a { padding: 6px 8px; font-size: 12.5px; }
  /* hero stat strip: align baselines, keep three across cleanly */
  .rc-readout.tri { gap: 10px 8px; }
  .rc-readout.tri div span { min-height: 2.6em; }
  .rc-readout.tri div strong { font-size: 19px; }
}