:root {
  /* Market Data Insider palette (dark terminal) */
  --paper:   #0D1117;  /* Deep Terminal Slate: page background */
  --surface: #161B22;  /* raised panels, tiles, charts */
  --ink:     #E6EDF3;  /* primary text */
  --muted:   #8B949E;  /* secondary text, averages */
  --rule:    #30363D;  /* borders, gridlines, five-year range band */
  --primary: #1F72E5;  /* Institutional Blue: navigation, active states, prior-year series */
  --river:   #1F72E5;  /* alias of --primary used by charts and the river strip */
  --link:    #4C8FEA;  /* Institutional Blue lightened for readable link text (5.8:1) */
  --grain:   #FFD266;  /* Soft Gold / Wheat: headline figures, current-year series */
  --up:      #00C853;  /* Neon Emerald: value increased */
  --down:    #FF3B30;  /* Crimson Flash: value decreased */
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--sans); font-variant-numeric: tabular-nums; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--grain); outline-offset: 2px; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

header.site { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.brand { font: 700 1.25rem/1 var(--cond); letter-spacing: .01em; color: var(--ink); text-decoration: none; }
.stamp { color: var(--muted); font-size: .9375rem; }

.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; padding: 3rem 0 3.5rem; align-items: start; }
.hero h1 { font: 600 clamp(2rem, 4.2vw, 3.25rem)/1.08 var(--cond); margin: 0 0 1.25rem; max-width: 18ch; }
.hero h1 .fig { font-weight: 700; color: var(--grain); white-space: nowrap; }
.hero p { max-width: 38rem; margin: 0 0 1rem; color: var(--muted); }
.hero p strong { color: var(--ink); font-weight: 600; }

/* River strip map: the page's one bold element */
.strip { position: relative; margin: 0; padding: 0; list-style: none; }
.strip::before { content: ""; position: absolute; left: .6875rem; top: .75rem; bottom: .75rem; width: 6px; border-radius: 3px; background: var(--river); opacity: .85; }
.strip .reach { position: relative; padding: .875rem 0 .25rem 2.5rem; color: var(--muted); font-size: .875rem; }
.strip .stop { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: .25rem 1.25rem; padding: .5rem 0 .5rem 2.5rem; border-bottom: 1px solid var(--rule); }
.strip .stop::before { content: ""; position: absolute; left: .3125rem; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--paper); border: 3px solid var(--river); }
.strip .stop.lead::before { background: var(--grain); border-color: var(--grain); }
.stop .name { font-weight: 500; }
.stop .name small { display: block; color: var(--muted); font-size: .8125rem; font-weight: 400; }
.stop .usd { font: 600 1.75rem/1 var(--cond); text-align: right; }
.stop .chg { font: 500 1rem/1 var(--cond); min-width: 5.5rem; text-align: right; }
.stop.closed .usd, .stop.closed .chg { color: var(--muted); font-size: 1rem; font-weight: 500; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); }

section.panel { padding: 2.75rem 0; border-top: 1px solid var(--rule); }
.panel-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.panel h2 { font: 600 1.875rem/1.1 var(--cond); margin: 0 0 .375rem; }
.panel .lede { margin: 0; color: var(--muted); max-width: 40rem; }
.panel .lede strong { color: var(--ink); font-weight: 600; }
.chart-box { position: relative; height: 22rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 1rem; }
select { font: 500 1rem var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: .5rem 2rem .5rem .75rem; }
label.pick { display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; color: var(--muted); }

.method { color: var(--muted); font-size: .9375rem; }
.method > * { max-width: 46rem; }
.method h2 { color: var(--ink); }
footer { padding: 2rem 0 3rem; color: var(--muted); font-size: .875rem; border-top: 1px solid var(--rule); }

.notice { padding: 1rem 1.25rem; border: 1px solid var(--down); border-radius: 4px; color: var(--ink); margin: 2rem 0; }
[hidden] { display: none !important; }

@media (max-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 2rem; }
  .chart-box { height: 18rem; padding: .75rem .5rem; }
  .strip .stop { gap: .25rem .75rem; }
  .stop .usd { font-size: 1.5rem; }
  .stop .chg { min-width: 3.75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .strip .stop { animation: settle .5s ease-out both; animation-delay: calc(var(--i) * 60ms); }
  @keyframes settle { from { opacity: 0; transform: translateY(-4px); } }
}

/* Site navigation */
.site nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site nav a { color: var(--muted); text-decoration: none; font-weight: 500; padding: .125rem 0; border-bottom: 2px solid transparent; }
.site nav a:hover { color: var(--ink); }
.site nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); }
.site .stamp { width: 100%; }
@media (min-width: 52rem) { .site .stamp { width: auto; } }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.tile { background: var(--surface); padding: 1rem 1.125rem; }
.tile .label { color: var(--muted); font-size: .875rem; }
.tile .value { font: 600 2rem/1.1 var(--cond); margin: .25rem 0; }
.tile .value small { font: 500 .5em var(--cond); margin-left: .2em; color: var(--muted); }
.tile .sub { font-size: .875rem; color: var(--muted); }
.tile .sub.up { color: var(--up); } .tile .sub.down { color: var(--down); }
@media (max-width: 40rem) { .tile { padding: .875rem; } .tile .value { font-size: 1.625rem; } }

/* Hub */
.intro { padding: 3rem 0 2rem; }
.intro h1 { font: 600 clamp(2.25rem, 5vw, 3.75rem)/1.05 var(--cond); margin: 0 0 1rem; max-width: 16ch; }
.intro p { color: var(--muted); max-width: 40rem; margin: 0; }
.markets { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; padding: 1rem 0 3.5rem; }
.market { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--primary); border-radius: 4px; padding: 1.5rem; transition: border-color .15s; }
.market:hover { border-color: var(--grain); }
.market h2 { font: 600 1.625rem/1.1 var(--cond); margin: 0 0 .25rem; }
.market .what { color: var(--muted); font-size: .9375rem; margin: 0 0 1.25rem; }
.market .big { font: 700 2.75rem/1 var(--cond); color: var(--grain); }
.market .ctx { margin: .5rem 0 0; font-size: .9375rem; }
.market .go { display: inline-block; margin-top: 1.25rem; color: var(--link); font-weight: 600; }
.chart-box.short { height: 18rem; }
.disclaimer { margin-top: .5rem; }

/* Notes */
.page-title { font: 600 clamp(2rem, 4.5vw, 3rem)/1.05 var(--cond); margin: 2.5rem 0 .5rem; }
.page-lede { color: var(--muted); margin: 0 0 2rem; }
.note-list { list-style: none; margin: 0 0 3rem; padding: 0; border-top: 1px solid var(--rule); }
.note-list li { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.note-list a { font: 600 1.625rem/1.15 var(--cond); color: var(--ink); text-decoration: none; }
.note-list a:hover { color: var(--link); }
.note-meta { color: var(--muted); font-size: .875rem; margin: 0 0 .375rem; }
.note-summary { margin: .375rem 0 0; color: var(--muted); max-width: 44rem; }
.empty { color: var(--muted); }
.note { max-width: 42rem; padding: 2.5rem 0 3rem; }
.note h1 { font: 600 clamp(2rem, 4.5vw, 3rem)/1.08 var(--cond); margin: 0 0 1.5rem; }
.prose { font-size: 1.125rem; line-height: 1.65; }
.prose h2 { font: 600 1.5rem/1.2 var(--cond); margin: 2rem 0 .5rem; }
.prose h3 { font: 600 1.25rem/1.2 var(--cond); margin: 1.5rem 0 .5rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1rem; }
.prose table { border-collapse: collapse; margin: 0 0 1rem; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .375rem .75rem .375rem 0; text-align: left; }
.prose blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--grain); color: var(--muted); }
.prose img { max-width: 100%; }
.back { margin-top: 2.5rem; }

/* Home: latest note */
.latest { border-top: 1px solid var(--rule); padding: 2.25rem 0 3rem; }
.latest h2 { font: 600 1.25rem/1.2 var(--cond); color: var(--muted); margin: 0 0 .75rem; }
.latest a.title { font: 600 1.875rem/1.1 var(--cond); color: var(--ink); text-decoration: none; }
.latest a.title:hover { color: var(--link); }
.latest .note-summary { font-size: 1.0625rem; }
.latest .more { display: inline-block; margin-top: .75rem; font-weight: 600; }