/* ============================================================
   BUILDING INSTRUCTIONS — The Order Clock case study
   Concept: LEGO instruction-booklet editorial. Paper, ink navy,
   brick red / yellow accents. No build step, no external requests.
   ============================================================ */

@font-face { font-family:'Space Grotesk'; src:url('../assets/fonts/space-grotesk-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('../assets/fonts/space-grotesk-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/inter-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/inter-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../assets/fonts/plex-mono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../assets/fonts/plex-mono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  --paper:      #FAF7F0;   /* warm paper */
  --paper-rgb:  250, 247, 240;   /* --paper as channels, for derived alphas */
  --paper-2:    #F2EDE2;   /* recessed panel */
  --card:       #FFFFFF;   /* raised panel  */
  --ink:        #1B2A4A;   /* manual navy   */
  --ink-dim:    rgba(27,42,74,.66);
  --ink-faint:  rgba(27,42,74,.42);
  --line:       rgba(27,42,74,.16);
  --line-strong:#1B2A4A;
  --red:        #C91A09;   /* brick red     */
  --yellow:     #FFD500;   /* brick yellow — accent shapes only, never data */
  --blue:       #0055BF;   /* brick blue    */
  --green:      #237841;
  --grid:       #E4DECF;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
  --gutter: clamp(20px, 5vw, 100px);
  --measure: 36em;
  --radius: 14px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(15px,1.05vw,17px)/1.68 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--yellow); color: var(--ink); }

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
canvas { display:block; }

/* stud texture backdrop for the whole page */
body::before {
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image: radial-gradient(circle at 5px 5px, rgba(27,42,74,.05) 2.4px, transparent 2.6px);
  background-size: 34px 34px;
}

/* ---------- reveal ---------- */
.rv { opacity:0; transform:translateY(26px); }
.no-js .rv, .reduced .rv { opacity:1; transform:none; }

/* ---------- progress ---------- */
#progress { position:fixed; top:0; left:0; right:0; height:5px; z-index:60; background:transparent; }
#progress span { display:block; height:100%; width:100%; background:var(--red); transform:scaleX(0); transform-origin:0 50%; }

/* ---------- header: scrim at rest → glass bar once scrolled ---------- */
header.site {
  position:fixed; top:5px; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px var(--gutter);
  background: rgba(var(--paper-rgb), 0);
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease, padding .35s ease;
}
/* top state: gradient scrim so content sliding under fades out instead of colliding */
header.site::before {
  content:''; position:absolute; inset:-5px 0 auto 0; height: calc(100% + 56px);
  background: linear-gradient(to bottom,
    rgba(var(--paper-rgb), .9) 0%, rgba(var(--paper-rgb), .5) 55%, transparent 100%);
  pointer-events:none; z-index:-1;
  transition: opacity .35s ease;
}
/* scrolled state: translucent glass bar (bg carries legibility where blur is unsupported) */
header.site.scrolled {
  background: rgba(var(--paper-rgb), .8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-top: 9px; padding-bottom: 9px;
}
header.site.scrolled::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  header.site, header.site::before { transition: none; }
}
.wordmark { font:700 15px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; display:flex; align-items:center; gap:9px; }
.brick-dot { width:14px; height:14px; border-radius:4px; background:var(--red); display:inline-block; box-shadow: 0 -3px 0 -1px #A31507 inset; }
header.site nav { display:flex; gap: clamp(12px,2vw,26px); }
header.site nav a { font:500 11px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; text-decoration:none; color:var(--ink-dim); }
header.site nav a:hover { color:var(--red); }

/* ---------- hero stage (fixed canvas) ---------- */
#hero-stage { position:fixed; inset:0; z-index:0; }
#hero-canvas { width:100%; height:100%; }

main { position:relative; z-index:1; }
.above-stage { position:relative; background:transparent; }

/* ---------- type ---------- */
.display-xl { font:700 clamp(3rem,9.5vw,7.6rem)/0.95 var(--display); letter-spacing:-.02em; text-transform:uppercase; }
.display-lg { font:700 clamp(1.9rem,4.2vw,3.6rem)/1.04 var(--display); letter-spacing:-.015em; }
.display-md { font:700 clamp(1.4rem,2.6vw,2.1rem)/1.15 var(--display); }
.eyebrow { font:500 11px/1.4 var(--mono); letter-spacing:.26em; text-transform:uppercase; color:var(--red); }
.lede { font-size:clamp(1.05rem,1.5vw,1.32rem); line-height:1.55; color:var(--ink-dim); max-width:var(--measure); }
.num, .unit, output { font-family:var(--mono); }
.prose { max-width: var(--measure); }
.prose.wide { max-width: 46em; }
.prose p + p { margin-top: 1em; }
.prose strong, .prose b { color:var(--ink); }
.fig-note { margin-top:clamp(18px,3vh,30px); font:400 12px/1.6 var(--mono); color:var(--ink-faint); max-width:52em; }

/* ---------- cover ---------- */
#cover { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding: 120px var(--gutter) 80px; }
.cover-inner { max-width: 1200px; }
.box-badges { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(20px,3.5vh,40px); }
.badge {
  font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  border:1.5px solid var(--ink); border-radius:999px; padding:8px 14px; background:var(--paper);
}
.badge-yellow { background:var(--yellow); border-color:var(--ink); }
#cover h1 { position:relative; }
.title-stud { position:absolute; width:.55em; height:.55em; border-radius:.14em; background:var(--yellow); border:3px solid var(--ink); margin-left:.12em; bottom:.08em; display:inline-block; }
#cover .lede { margin-top:clamp(18px,3vh,34px); }
.cover-note { margin-top:clamp(16px,2.5vh,26px); font:400 12px/1.5 var(--mono); color:var(--ink-faint); }
/* keep cover copy legible over the scattered 3D bricks: full-ink text on a soft paper scrim */
#cover .lede, #cover .cover-note {
  text-shadow: 0 0 6px var(--paper), 0 0 14px var(--paper), 0 0 24px var(--paper);
  background: rgba(250,247,240,.82);
  box-shadow: 0 0 18px 16px rgba(250,247,240,.82);
  border-radius: 4px;
}
#cover .lede { color: var(--ink); }
#cover .lede b { color: var(--red); }
#cover .cover-note { color: var(--ink-dim); }
.scroll-cue { position:absolute; left:var(--gutter); bottom:26px; width:30px; height:48px; border:2px solid var(--ink); border-radius:16px; }
.scroll-cue span { position:absolute; left:50%; top:8px; width:5px; height:9px; margin-left:-2.5px; border-radius:3px; background:var(--red); animation: cue 1.7s ease-in-out infinite; }
@keyframes cue { 0%,100%{ transform:translateY(0); opacity:1 } 55%{ transform:translateY(17px); opacity:.25 } }
.reduced .scroll-cue span { animation:none; }

/* ---------- steps ---------- */
.step { padding: clamp(90px,14vh,170px) var(--gutter); max-width:1440px; margin:0 auto; }
.step-head { display:flex; align-items:flex-start; gap:clamp(16px,2.4vw,30px); margin-bottom:clamp(28px,5vh,56px); }
.step-no {
  flex:0 0 auto; width:clamp(52px,5.6vw,76px); height:clamp(52px,5.6vw,76px);
  border-radius:50%; background:var(--red); color:#fff;
  display:grid; place-items:center;
  font:700 clamp(24px,2.6vw,36px)/1 var(--display);
  box-shadow: 0 4px 0 rgba(27,42,74,.25);
}
.step-no.epi { background:var(--green); }
.step-head .eyebrow { margin-bottom:8px; }

.split { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,72px); align-items:start; }

/* ---------- stat strip ---------- */
.stat-strip { display:grid; gap:0; border:2px solid var(--ink); border-radius:var(--radius); overflow:hidden; background:var(--card); }
.stat-strip > div { padding:clamp(18px,2.4vw,28px); display:flex; flex-direction:column; gap:6px; }
.stat-strip > div + div { border-top:2px solid var(--ink); }
.stat-strip b { font:500 clamp(2rem,3.4vw,3rem)/1 var(--mono); }
.stat-strip b i { font-style:normal; font-size:.5em; color:var(--ink-dim); }
.stat-strip span { color:var(--ink-dim); font-size:.92em; max-width:26em; }

/* ---------- panels ---------- */
.panel {
  background:var(--card); border:2px solid var(--ink); border-radius:var(--radius);
  padding:clamp(18px,2.6vw,30px);
  box-shadow: 6px 6px 0 rgba(27,42,74,.12);
}
.panel-head { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.panel-head output { font:500 clamp(1.1rem,1.6vw,1.4rem)/1 var(--mono); }

/* ---------- pull quote ---------- */
.pull {
  font:500 clamp(1.4rem,3vw,2.5rem)/1.3 var(--display);
  max-width:24em; margin:0 0 clamp(28px,5vh,52px);
  padding-left:clamp(16px,2vw,28px); border-left:6px solid var(--yellow);
}

/* ---------- reframe widget ---------- */
#reframe-widget input[type=range] { width:100%; margin:14px 0 20px; }
#reframe-rows { display:flex; flex-direction:column; gap:9px; }
.rf-row { display:grid; grid-template-columns: 108px 1fr 74px; gap:10px; align-items:center; font:400 12px/1.3 var(--mono); }
.rf-row .rf-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-dim); }
.rf-track { position:relative; height:14px; background:var(--paper-2); border-radius:7px; overflow:hidden; }
.rf-fill { position:absolute; top:0; bottom:0; border-radius:7px; background:var(--rf,#0055BF); transition: left .45s cubic-bezier(.6,.1,.2,1), width .45s cubic-bezier(.6,.1,.2,1); }
.reduced .rf-fill { transition:none; }
.rf-when { text-align:right; font-weight:500; }

/* ---------- range inputs ---------- */
input[type=range] { appearance:none; -webkit-appearance:none; height:6px; border-radius:3px; background:var(--paper-2); outline-offset:4px; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:24px; height:24px; border-radius:8px;
  background:var(--yellow); border:3px solid var(--ink); cursor:grab;
  box-shadow:0 2px 0 rgba(27,42,74,.3);
}
input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:7px; background:var(--yellow); border:3px solid var(--ink); cursor:grab; }

/* ---------- cascade ---------- */
.cascade-year { display:flex; align-items:center; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.cascade-year input { flex:1 1 200px; max-width:380px; }
.cascade-year output { font:500 1.5rem/1 var(--mono); }
.seg-mini { margin-left:auto; }
#margin-chart { width:100%; }
#margin-legend span { cursor:pointer; }
.seg.seg-mini legend {
  position:absolute; width:1px; height:1px; margin:0; padding:0;
  overflow:hidden; clip-path:inset(50%); float:none;
}
.seg-mini button { padding:8px 12px; font-size:11px; }
.cascade-stages { list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; counter-reset:stage; }
.cascade-stage {
  position:relative; border:2px solid var(--line); border-radius:10px; padding:14px 12px 12px;
  text-align:left; width:100%; transition: border-color .2s, background .2s;
}
.cascade-stage:hover { border-color:var(--ink); }
.cascade-stage.on { border-color:var(--ink); background:var(--paper); box-shadow:4px 4px 0 rgba(27,42,74,.12); }
.cascade-stage .cs-label { font:500 10px/1.3 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); display:block; }
.cascade-stage .cs-value { font:500 clamp(1.05rem,1.7vw,1.5rem)/1.1 var(--mono); display:block; margin-top:6px; }
.cascade-stage .cs-sub { font-size:11px; color:var(--ink-dim); display:block; margin-top:3px; }
.cascade-stage:not(:last-child)::after {
  content:'→'; position:absolute; right:-13px; top:50%; transform:translateY(-50%);
  font:700 14px/1 var(--mono); color:var(--red); z-index:2;
}
.cascade-detail { margin-top:18px; border-top:2px dashed var(--line); padding-top:16px; min-height:74px; font-size:.95em; color:var(--ink-dim); }
.cascade-detail code { font:500 12px/1.7 var(--mono); color:var(--ink); background:var(--paper-2); border-radius:6px; padding:2px 7px; display:inline-block; margin-top:6px; }

/* ---------- signals controls ---------- */
.controls { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-end; margin-bottom:20px; }
.controls label { max-width:100%; min-width:0; }
.seg { border:0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.seg legend { margin-bottom:8px; float:left; width:100%; }
.seg button {
  font:500 12px/1 var(--mono); letter-spacing:.04em; padding:10px 15px;
  border:2px solid var(--line); border-radius:999px; background:var(--card);
  transition: all .18s;
}
.seg button:hover { border-color:var(--ink); }
.seg button.on { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chips button.on { background:var(--red); border-color:var(--red); }

.chart-block { margin-top:8px; }
.chart-block + .chart-block { margin-top:30px; }
.chart-title { font:500 14px/1.4 var(--body); margin-bottom:12px; }
.chart-title .unit { font:400 11px/1 var(--mono); color:var(--ink-faint); letter-spacing:.04em; }
.chart-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.chart-scroll > canvas, .chart-scroll > div { min-width:640px; }
#stacked-chart { width:100%; }

/* chart + heatmap share one wrapper so their columns stay aligned (min = 150px gutter + 18×30px cells + gaps) */
.chart-align { min-width:744px; }
@media (max-width:760px) {
  /* slimmer gutter (104px) + 26px cells; keep every piece of the column system in sync */
  .chart-align, #signals-table { min-width:630px; }
  .hm-cell { height:26px; border-radius:5px; }
  #heatmap, .hm-rowlab { font-size:9.5px; }
  #signals-table { font-size:10px; }
}
.chart-align > * { width:100%; }
.chart-align canvas { display:block; }
.chart-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px 28px; flex-wrap:wrap; margin-bottom:14px; }
.chart-head .chart-title { margin-bottom:0; }
.chart-head .legend { margin-top:0; margin-left:auto; justify-content:flex-end; }
.chart-foot { margin-top:14px; margin-bottom:0; }

.legend { display:flex; flex-wrap:wrap; gap:7px 16px; margin-top:12px; }
.legend span { display:inline-flex; align-items:center; gap:7px; font:400 11.5px/1.2 var(--mono); color:var(--ink-dim); }
.legend i { width:13px; height:13px; border-radius:4px; display:inline-block; background:var(--c); }

/* ---------- heatmap ---------- */
#heatmap { display:grid; gap:3px; font:400 10.5px/1 var(--mono); }
.hm-rowlab { display:flex; align-items:center; justify-content:flex-end; padding-right:9px; color:var(--ink-dim); white-space:nowrap; }
.hm-cell {
  position:relative; height:34px; border-radius:6px; background:var(--hc,#eee);
  display:grid; place-items:center; color:rgba(255,255,255,.92); font-weight:500;
  cursor:default;
}
.hm-cell.dim { color:var(--ink-faint); }
.hm-cell:hover { outline:2px solid var(--ink); outline-offset:1px; z-index:2; }

/* ---------- tooltip ---------- */
#tip {
  position:fixed; z-index:80; pointer-events:none; opacity:0;
  background:var(--ink); color:var(--paper); border-radius:8px;
  padding:9px 12px; font:400 12px/1.5 var(--mono); max-width:260px;
  transform:translate(-50%,calc(-100% - 12px));
  transition:opacity .12s;
}
#tip b { color:var(--yellow); }

/* ---------- table view ---------- */
.table-view { margin-top:22px; }
.table-view summary { font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); cursor:pointer; padding:8px 0; }
.table-scroll { overflow-x:auto; margin-top:10px; }
table { border-collapse:collapse; font:400 12px/1.5 var(--mono); min-width:640px; width:100%; }
th, td { text-align:right; padding:7px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
th:first-child, td:first-child { text-align:left; }
thead th { font-weight:500; color:var(--ink-dim); border-bottom:2px solid var(--ink); }
td b { color:var(--red); }

/* signals table mirrors the heatmap column grid: label gutter + 18 equal month columns
   (--hm-label is set by signals.js so chart, heatmap, and table always agree) */
#signals-table { table-layout:fixed; min-width:744px; }
#signals-table th, #signals-table td { text-align:center; padding:7px 2px; }
#signals-table th:first-child, #signals-table td:first-child {
  width:var(--hm-label,150px); text-align:right; padding-right:9px; color:var(--ink-dim);
}

/* ---------- risk cards ---------- */
.risk-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:28px; }
.risk-card { border:2px solid var(--line); border-left:8px solid var(--rc); border-radius:10px; padding:16px; background:var(--paper); }
.risk-card b { font:500 2rem/1 var(--mono); color:var(--rc); }
.risk-card h4 { font:700 .95rem/1.3 var(--display); margin:8px 0 6px; }
.risk-card p { font-size:.85em; color:var(--ink-dim); }

/* ---------- surge ---------- */
.surge-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(16px,2.4vw,28px); margin-bottom:clamp(16px,2.4vw,28px); }
.surge-3d-panel { padding:0; overflow:hidden; position:relative; min-height:380px; display:flex; }
#surge-canvas { width:100%; height:100%; min-height:380px; flex:1; }
.surge-3d-caption {
  position:absolute; left:14px; bottom:12px; font:400 11.5px/1.4 var(--mono);
  color:var(--ink-dim); background:rgba(250,247,240,.85); border-radius:8px; padding:6px 10px;
}
.toggle {
  display:inline-flex; align-items:center; gap:10px;
  font:500 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  border:2px solid var(--ink); border-radius:999px; padding:9px 16px 9px 9px; background:var(--card);
  transition: background .2s;
}
.toggle .knob { width:22px; height:22px; border-radius:50%; background:var(--paper-2); border:2px solid var(--ink); transition: background .2s; }
.toggle[aria-pressed="true"] { background:var(--yellow); }
.toggle[aria-pressed="true"] .knob { background:var(--red); }
#surge-theme, .bom-controls select, .bom-controls input {
  font:500 13px/1.2 var(--mono); padding:9px 12px; border:2px solid var(--ink);
  border-radius:9px; background:var(--card); color:var(--ink); max-width:100%;
}
#surge-chart { width:100%; }

/* ---------- bom ---------- */
.bom-controls { align-items:center; }
.bom-controls label { display:flex; flex-direction:column; gap:6px; font:500 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
#bom-units { width:120px; }
.bom-ok { color:var(--green); font-weight:500; }
.bom-late { color:var(--red); font-weight:500; }

/* ---------- invest ---------- */
.invest-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.invest-card {
  text-align:left; background:var(--card); border:2px solid var(--ink); border-radius:var(--radius);
  padding:clamp(18px,2.2vw,26px); position:relative;
  box-shadow:6px 6px 0 rgba(27,42,74,.12);
  transition: transform .2s, box-shadow .2s;
  display:flex; flex-direction:column; gap:10px;
}
.invest-card:hover { transform:translate(-2px,-2px); box-shadow:9px 9px 0 rgba(27,42,74,.16); }
.invest-card.on { background:var(--yellow); }
.invest-card b { font:500 clamp(2rem,3.2vw,2.9rem)/1 var(--mono); }
.invest-card h3 { font:700 1.05rem/1.25 var(--display); }
.invest-card p { font-size:.88em; color:var(--ink-dim); }
.invest-card.on p { color:var(--ink); }
.invest-when { font:500 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:auto; }
.impact-bar { margin-top:26px; }
.impact-track { height:18px; border:2px solid var(--ink); border-radius:10px; background:var(--card); overflow:hidden; }
.impact-track span { display:block; height:100%; width:0; background:repeating-linear-gradient(-45deg,var(--red) 0 12px,#A31507 12px 24px); transition:width .6s cubic-bezier(.6,.1,.2,1); }
.reduced .impact-track span { transition:none; }
#impact-note { margin-top:10px; font:400 13px/1.5 var(--mono); color:var(--ink-dim); }
#impact-note b { color:var(--ink); }

/* ---------- timeline ---------- */
.timeline { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:26px; }
.timeline li { border-top:6px solid var(--yellow); background:var(--card); border:2px solid var(--ink); border-top-width:8px; border-top-color:var(--yellow); border-radius:var(--radius); padding:clamp(16px,2vw,24px); }
.timeline b { font:500 11px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--red); }
.timeline h3 { font:700 1.1rem/1.25 var(--display); margin:10px 0 8px; }
.timeline p { font-size:.9em; color:var(--ink-dim); }
.stack-line { display:flex; flex-wrap:wrap; gap:8px; }
.stack-line span { font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; border:1.5px solid var(--line); border-radius:999px; padding:7px 12px; color:var(--ink-dim); }

/* ---------- credits ---------- */
#credits { background:var(--ink); color:var(--paper); padding:clamp(80px,12vh,140px) var(--gutter); }
.credits-inner { max-width:52em; }
#credits h2 { margin-bottom:18px; }
#credits p { margin-bottom:14px; max-width:46em; }
#credits .fine { font:400 12px/1.7 var(--mono); color:rgba(250,247,240,.55); }
#credits a { color:var(--yellow); }

/* ---------- responsive ---------- */
@media (max-width:1080px) {
  .cascade-stages { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cascade-stage:not(:last-child)::after { display:none; }
  .surge-grid { grid-template-columns:1fr; }
  .risk-cards, .invest-grid, .timeline { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .split { grid-template-columns:1fr; }
  .cascade-stages { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .risk-cards, .invest-grid, .timeline { grid-template-columns:1fr; }
  header.site nav { display:none; }
  .step-head { gap:14px; }
  .rf-row { grid-template-columns:86px 1fr 62px; }
  .scroll-cue { display:none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .invest-card, .seg button, .rf-fill, .impact-track span, .toggle, .toggle .knob { transition:none !important; }
}