:root {
  --ink: #111318;
  --ink-2: #191d23;
  --ink-3: #242a31;
  --paper: #f1eee5;
  --paper-2: #e7e2d7;
  --muted: #9299a4;
  --line-dark: rgba(241, 238, 229, 0.18);
  --line-light: rgba(17, 19, 24, 0.2);
  --coral: #ff735c;
  --cyan: #70d7e7;
  --acid: #d8ff42;
  --violet: #bda2ff;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Manrope", Arial, Helvetica, sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --bar: 62px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.skip-link { background: var(--acid); color: var(--ink); left: 1rem; padding: .7rem 1rem; position: fixed; top: -5rem; z-index: 200; }
.skip-link:focus { top: 1rem; }

.topbar {
  align-items: center;
  background: rgba(17, 19, 24, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  height: var(--bar);
  left: 0;
  padding: 0 1.5rem;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}
.brand {
  align-items: center;
  background: var(--paper);
  border-radius: 50%;
  color: var(--ink);
  display: flex;
  font: italic 1rem var(--serif);
  height: 32px;
  justify-content: center;
  text-decoration: none;
  width: 32px;
}
.all-guides { font: .63rem var(--mono); letter-spacing: .09em; margin-left: 1.5rem; text-decoration: none; text-transform: uppercase; }
.topbar nav { display: flex; gap: 1.5rem; justify-content: center; }
.topbar nav a, .chapter-id { color: var(--muted); font: .58rem var(--mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.topbar nav a:hover, .topbar nav a:focus-visible { color: var(--paper); }

.hero {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 76% 32%, rgba(255,115,92,.18), transparent 29%),
    var(--ink);
  background-size: 68px 68px, 68px 68px, auto, auto;
  display: grid;
  gap: 4rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(8rem, 14vw, 12rem) clamp(1.2rem, 4vw, 4rem) 5rem;
  position: relative;
}
.hero::after {
  border: 1px solid rgba(255,115,92,.5);
  border-radius: 50%;
  content: "";
  height: min(46vw, 650px);
  position: absolute;
  right: -19vw;
  top: 8vw;
  width: min(46vw, 650px);
}
.hero-copy, .hero-instrument, .scroll-cue { position: relative; z-index: 2; }
.eyebrow { color: var(--muted); font: .62rem var(--mono); letter-spacing: .18em; margin: 0; text-transform: uppercase; }
.hero h1 {
  font: 300 clamp(4.4rem, 10.4vw, 10.4rem)/.78 var(--serif);
  letter-spacing: -.065em;
  margin: 2.2rem 0 0;
  max-width: 9ch;
}
.hero h1 em { color: var(--coral); font-weight: 300; }
.hero-lede { font: 300 clamp(1.25rem, 2.1vw, 2rem)/1.22 var(--serif); margin: 3rem 0 0 28%; max-width: 25ch; }
.hero-instrument {
  align-self: end;
  border: 1px solid var(--line-dark);
  margin-bottom: 5rem;
  padding: 1.2rem;
}
.instrument-label { display: flex; justify-content: space-between; }
.instrument-label span, .return-line b, .zero-line span { color: var(--muted); font: .54rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.return-pair { margin: 2rem 0; }
.return-line { align-items: center; display: grid; gap: 1rem; grid-template-columns: 3.3rem 1fr 7.5rem; min-height: 56px; }
.return-line > span { font: 1.2rem var(--serif); }
.return-line i { display: block; height: 13px; }
.return-line.positive i { background: var(--cyan); }
.return-line.negative i { background: var(--coral); }
.zero-line { border-top: 1px dashed var(--line-dark); position: relative; }
.zero-line span { background: var(--ink); left: 0; padding-right: .4rem; position: absolute; top: -.45rem; }
.hero-instrument > p { color: #b8bec6; font-size: .75rem; line-height: 1.5; margin: 0; }
.scroll-cue { align-items: center; align-self: end; bottom: 2rem; display: flex; font: .56rem var(--mono); gap: 1rem; grid-column: 1 / -1; letter-spacing: .12em; position: absolute; right: 4rem; text-decoration: none; text-transform: uppercase; }
.scroll-cue i { align-items: center; border: 1px solid var(--line-dark); border-radius: 50%; display: flex; font-style: normal; height: 38px; justify-content: center; width: 38px; }

.section { padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 4vw, 4rem); }
.section-heading { display: grid; grid-template-columns: 4rem minmax(9rem, 1fr) 3fr; margin-bottom: clamp(4rem, 8vw, 7rem); }
.section-heading > span, .section-heading > p { color: var(--muted); font: .58rem var(--mono); letter-spacing: .12em; margin: .7rem 0 0; text-transform: uppercase; }
.section-heading h2 { font: 300 clamp(3rem, 6.5vw, 6.8rem)/.88 var(--serif); letter-spacing: -.055em; margin: 0; }
.light-heading > span, .light-heading > p { color: rgba(17,19,24,.58); }
.section-intro { font: 300 clamp(1.35rem, 2.3vw, 2.1rem)/1.25 var(--serif); margin: -2rem 0 5rem 33.333%; max-width: 33ch; }

.crash-lab { background: var(--ink-2); }
.lab-shell { border: 1px solid var(--line-dark); }
.path-controls { border-bottom: 1px solid var(--line-dark); display: grid; grid-template-columns: repeat(5, 1fr); }
.path-controls button, .forecast-controls button, .segmented button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line-dark);
  cursor: pointer;
  font: .62rem var(--mono);
  letter-spacing: .08em;
  min-height: 52px;
  padding: .9rem;
  text-transform: uppercase;
}
.path-controls button:last-child, .forecast-controls button:last-child, .segmented button:last-child { border-right: 0; }
.path-controls button[aria-pressed="true"] { background: var(--coral); color: var(--ink); }
.path-controls button:focus-visible, .forecast-controls button:focus-visible, .segmented button:focus-visible, .method-row:focus-visible, .outlier-toggle:focus-visible { outline: 2px solid var(--acid); outline-offset: -3px; }
.path-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, .7fr); min-height: 470px; }
.canvas-frame { border-right: 1px solid var(--line-dark); min-height: 470px; padding: 1.5rem; position: relative; }
.canvas-frame canvas, .forecast-viz canvas, .distribution-frame canvas { display: block; height: 100%; width: 100%; }
.live-panel { display: grid; grid-template-columns: 1fr 1fr; }
.live-panel > div { border-bottom: 1px solid var(--line-dark); display: flex; flex-direction: column; padding: 1.2rem; }
.live-panel > div:nth-child(odd) { border-right: 1px solid var(--line-dark); }
.live-panel > div:nth-child(3) { grid-column: 1 / -1; }
.live-panel span, .forecast-readout span, .forecast-readout small, .solver-details span, .method-title span, .annualization-note span { color: var(--muted); font: .53rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.live-panel strong { font: 300 clamp(2.2rem, 4vw, 4.3rem) var(--serif); margin-top: .7rem; }
.live-panel p { align-self: end; color: #c2c7ce; font: 300 1.25rem/1.35 var(--serif); grid-column: 1 / -1; margin: 0; padding: 1.4rem; }
.explanation-strip { border: 1px solid var(--line-dark); border-top: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.explanation-strip article { border-right: 1px solid var(--line-dark); min-height: 300px; padding: 1.5rem; }
.explanation-strip article:last-child { border-right: 0; }
.explanation-strip span, .lens-meta span, .lens-meta b, .metric-note b, .pattern-grid > article > span, .source-grid span, .next-guide span { color: var(--coral); font: .54rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.explanation-strip h3 { font: 300 2rem/1.05 var(--serif); margin: 5rem 0 1rem; }
.explanation-strip p { color: #b3bac4; font-size: .82rem; line-height: 1.55; }

.math-section, .lenses, .metric-section, .methods, .synthesis { background: var(--paper); color: var(--ink); }
.equation-steps { display: grid; grid-template-columns: repeat(5, minmax(155px, 1fr) auto) minmax(155px, 1fr); min-width: 1260px; }
.equation-steps-wrap { overflow-x: auto; padding-bottom: .5rem; }
.equation-steps article { border: 1px solid var(--ink); min-height: 250px; padding: 1.2rem; }
.equation-steps > i { align-self: center; font: 300 1.5rem var(--serif); padding: .7rem; }
.equation-steps article span, .behavior-grid article > span, .shock-results span, .contraction-tabs button, .frequency-row > span, .frequency-verdict span, .frequency-method, .contraction-answer > b { font: .52rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.equation-steps article span { color: #be3c2a; }
.equation-steps article b { display: block; font: 300 1.35rem var(--serif); margin: 4.5rem 0 .8rem; }
.equation-steps article p { font-size: .68rem; line-height: 1.5; margin: 0; }
.behavior-grid { border: 1px solid var(--ink); display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 4rem; }
.behavior-grid article { border-right: 1px solid var(--ink); min-height: 300px; padding: 1.3rem; }
.behavior-grid article:last-child { border-right: 0; }
.behavior-grid article > span { color: #be3c2a; }
.behavior-grid h3 { font: 300 1.8rem/1.05 var(--serif); margin: 5rem 0 1rem; }
.behavior-grid p { font-size: .72rem; line-height: 1.55; }
.shock-lab { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr); margin-top: 5rem; }
.shock-controls { border-right: 1px solid var(--line-dark); padding: 1.5rem; }
.shock-controls h3 { font: 300 clamp(2.2rem, 3.7vw, 4rem)/.92 var(--serif); letter-spacing: -.04em; margin: 1.5rem 0 1rem; }
.shock-controls > p:not(.eyebrow) { color: var(--muted); font-size: .72rem; line-height: 1.55; }
.shock-controls label { display: flex; justify-content: space-between; margin-top: 4rem; }
.shock-controls label span { color: var(--muted); font: .52rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.shock-controls output { color: var(--acid); font: 1.2rem var(--serif); }
.shock-controls input { margin-top: 1rem; }
.shock-controls button { background: transparent; border: 1px solid var(--line-dark); cursor: pointer; font: .56rem var(--mono); letter-spacing: .09em; margin-top: 1.5rem; min-height: 42px; padding: .7rem 1rem; text-transform: uppercase; width: 100%; }
.shock-controls button:hover, .shock-controls button:focus-visible { background: var(--acid); color: var(--ink); outline: 0; }
.shock-canvas { height: 360px; padding: 1.2rem; }
.shock-canvas canvas { display: block; height: 100%; width: 100%; }
.shock-results { border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: repeat(4, 1fr); }
.shock-results article { border-right: 1px solid var(--line-dark); min-height: 160px; padding: 1rem; }
.shock-results article:last-child { border-right: 0; }
.shock-results span { color: var(--muted); }
.shock-results strong { display: block; font: 300 clamp(2rem, 3vw, 3.2rem) var(--serif); margin-top: .55rem; }
.shock-results article:nth-child(4) strong { color: var(--coral); }
.shock-results p { color: var(--muted); font-size: .62rem; line-height: 1.45; }
.contraction-question { background: var(--ink-2); color: var(--paper); display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); margin-top: 5rem; }
.contraction-copy { border-right: 1px solid var(--line-dark); padding: clamp(1.5rem, 3vw, 3rem); }
.contraction-copy h3 { font: 300 clamp(2.6rem, 4.8vw, 5rem)/.9 var(--serif); letter-spacing: -.045em; margin: 2rem 0; }
.contraction-copy > p:not(.eyebrow) { color: #bcc2ca; font-size: .76rem; line-height: 1.6; }
.ewma-equation { background: var(--acid); color: var(--ink); font: 300 clamp(1.5rem, 3vw, 3rem) var(--serif); margin: 1.5rem 0; padding: 1.2rem; }
.contraction-interactive { min-width: 0; }
.contraction-tabs { border-bottom: 1px solid var(--line-dark); display: grid; grid-template-columns: repeat(3, 1fr); }
.contraction-tabs button { background: transparent; border: 0; border-right: 1px solid var(--line-dark); color: var(--paper); cursor: pointer; min-height: 58px; padding: .7rem; }
.contraction-tabs button:last-child { border-right: 0; }
.contraction-tabs button[aria-pressed="true"] { background: var(--cyan); color: var(--ink); }
.contraction-tabs button:focus-visible { outline: 2px solid var(--acid); outline-offset: -3px; }
.frequency-bars { padding: clamp(1.5rem, 3vw, 3rem); }
.frequency-row { align-items: center; display: grid; gap: 1rem; grid-template-columns: 5.5rem 1fr 4.5rem; margin-bottom: 1.5rem; }
.frequency-row > span { color: var(--muted); }
.frequency-row > i { background: var(--ink-3); display: block; height: 28px; overflow: hidden; }
.frequency-row > i > b { display: block; height: 100%; transition: width .28s ease; }
.frequency-row.contract > i > b { background: var(--cyan); width: 68.3%; }
.frequency-row.expand > i > b { background: var(--coral); width: 31.7%; }
.frequency-row > strong { font: 300 1.6rem var(--serif); text-align: right; }
.frequency-verdict { align-items: center; border-top: 1px solid var(--line-dark); display: grid; gap: 1.5rem; grid-template-columns: auto 1fr; padding: 1.5rem; }
.frequency-verdict > strong { color: var(--acid); font: 300 clamp(4rem, 8vw, 8rem)/.8 var(--serif); letter-spacing: -.06em; }
.frequency-verdict span { color: var(--muted); }
.frequency-verdict p { color: #bcc2ca; font: 300 1rem/1.4 var(--serif); margin: .7rem 0 0; }
.frequency-method { border-top: 1px solid var(--line-dark); color: var(--muted); line-height: 1.5; margin: 0; padding: 1rem 1.5rem; }
.contraction-answer { align-items: start; background: var(--acid); border: 1px solid var(--ink); color: var(--ink); display: grid; gap: 2rem; grid-template-columns: 1fr 3fr; padding: 1.5rem; }
.contraction-answer p { font: 300 1.2rem/1.4 var(--serif); margin: 0; }
.clock-line { align-items: center; display: grid; grid-template-columns: auto 1fr auto 1fr auto; margin-bottom: 1rem; }
.clock-line i { border-top: 1px solid var(--line-light); }
.clock-line span, .clock-line b { font: .56rem var(--mono); letter-spacing: .12em; padding: 0 .8rem; text-transform: uppercase; }
.clock-line b { color: #be3c2a; }
.lens-grid { border: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); }
.lens-card { border-right: 1px solid var(--ink); min-height: 560px; padding: 1.6rem; position: relative; }
.lens-card:last-child { border-right: 0; }
.lens-card::before { background: var(--coral); content: ""; height: 7px; left: 0; position: absolute; right: 0; top: 0; }
.lens-card.historical::before { background: var(--cyan); }
.lens-card.realized::before { background: var(--violet); }
.lens-meta { display: flex; justify-content: space-between; }
.lens-card.historical .lens-meta span, .lens-card.historical .lens-meta b { color: #277887; }
.lens-card.realized .lens-meta span, .lens-card.realized .lens-meta b { color: #6c52b0; }
.lens-card h3 { font: 300 clamp(2.6rem, 4.2vw, 4.8rem)/.88 var(--serif); letter-spacing: -.04em; margin: 7rem 0 1.5rem; }
.lens-card > p { font-size: .9rem; line-height: 1.6; max-width: 40ch; }
.lens-card dl { border-top: 1px solid var(--line-light); margin: 3rem 0 0; }
.lens-card dl div { border-bottom: 1px solid var(--line-light); display: grid; gap: 1rem; grid-template-columns: 6rem 1fr; padding: .85rem 0; }
.lens-card dt { font: .53rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lens-card dd { font-size: .74rem; line-height: 1.45; margin: 0; }
.overlap-note { align-items: start; background: var(--acid); border: 1px solid var(--ink); border-top: 0; display: grid; gap: 2rem; grid-template-columns: 1fr 3fr; padding: 1.6rem; }
.overlap-note b { font: .61rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.overlap-note p { font: 300 1.25rem/1.35 var(--serif); margin: 0; max-width: 55ch; }

.forecast-lab { background: var(--ink); }
.forecast-shell { border: 1px solid var(--line-dark); }
.forecast-controls { border-bottom: 1px solid var(--line-dark); display: grid; grid-template-columns: repeat(3, 1fr); }
.forecast-controls button { display: flex; justify-content: space-between; text-align: left; }
.forecast-controls button b { color: var(--muted); font-weight: 400; }
.forecast-controls button[aria-pressed="true"] { background: var(--cyan); color: var(--ink); }
.forecast-controls button[aria-pressed="true"] b { color: var(--ink); }
.forecast-viz { height: 440px; padding: 1.5rem; position: relative; }
.today-marker { border-left: 1px dashed rgba(241,238,229,.42); bottom: 2.2rem; left: 50%; pointer-events: none; position: absolute; top: 2.2rem; }
.today-marker span { background: var(--ink); color: var(--muted); font: .49rem var(--mono); left: -3.8rem; letter-spacing: .08em; padding: .35rem; position: absolute; text-transform: uppercase; top: -.7rem; width: 7.6rem; }
.forecast-readout { border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: repeat(3, 1fr); }
.forecast-readout > div { border-right: 1px solid var(--line-dark); display: flex; flex-direction: column; min-height: 150px; padding: 1.2rem; }
.forecast-readout > div:nth-child(3) { border-right: 0; }
.forecast-readout b { font: 300 3.4rem var(--serif); margin: .5rem 0 .3rem; }
.forecast-readout > div:nth-child(2) b { color: var(--coral); }
.forecast-readout > p { border-top: 1px solid var(--line-dark); color: #c1c6cd; font: 300 1.15rem/1.4 var(--serif); grid-column: 1 / -1; margin: 0; padding: 1.3rem; }
.interaction-map { align-items: center; display: grid; gap: 1rem; grid-template-columns: 1fr auto 1fr auto 1fr auto; margin-top: 4rem; }
.interaction-map div { border-top: 2px solid var(--coral); min-height: 160px; padding: 1.2rem; }
.interaction-map div:first-child { border-color: var(--cyan); }
.interaction-map div:nth-child(5) { border-color: var(--violet); }
.interaction-map div span { color: var(--muted); font: .53rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.interaction-map div b { display: block; font: 300 2rem var(--serif); margin: 2.8rem 0 .4rem; }
.interaction-map div small { color: var(--muted); font-size: .7rem; }
.interaction-map > i { color: var(--muted); font: 300 2rem var(--serif); }
.map-note { color: #b9bec7; font-size: .76rem; line-height: 1.6; margin: 2rem 0 0 50%; max-width: 48rem; }
.map-note strong { color: var(--paper); }

.metric-table-wrap { overflow-x: auto; }
.metric-table-wrap table { border-collapse: collapse; min-width: 980px; width: 100%; }
.metric-table-wrap th, .metric-table-wrap td { border: 1px solid var(--ink); padding: 1.2rem; text-align: left; vertical-align: top; }
.metric-table-wrap thead th { background: var(--ink); color: var(--paper); font: .56rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.metric-table-wrap tbody th { min-width: 165px; width: 15%; }
.metric-table-wrap tbody th b { display: block; font: 300 1.7rem var(--serif); }
.metric-table-wrap tbody th span { font: .5rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.metric-table-wrap td { width: 28%; }
.metric-table-wrap td strong { font: 500 .67rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.metric-table-wrap td p { font-size: .74rem; line-height: 1.5; margin: 2.4rem 0 0; }
.metric-note { background: var(--paper-2); border: 1px solid var(--ink); border-top: 0; display: grid; gap: 3rem; grid-template-columns: 1fr 1fr; padding: 1.5rem; }
.metric-note p { font: 300 1.1rem/1.4 var(--serif); margin: 0; }
.metric-note b { color: #be3c2a; display: block; margin-bottom: .6rem; }
.metric-lab { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.6fr); margin-top: 5rem; }
.metric-controls { border-right: 1px solid var(--line-dark); padding: 1.5rem; }
.control-head h3 { font: 300 clamp(2rem, 3.4vw, 3.5rem)/.95 var(--serif); letter-spacing: -.035em; margin: 1.5rem 0 1rem; }
.control-head > p:last-child { color: var(--muted); font-size: .74rem; line-height: 1.5; }
fieldset { border: 0; margin: 3rem 0 2rem; padding: 0; }
legend, .range-label span { color: var(--muted); font: .53rem var(--mono); letter-spacing: .1em; margin-bottom: .7rem; text-transform: uppercase; }
.segmented { border: 1px solid var(--line-dark); display: grid; grid-template-columns: repeat(3, 1fr); }
.segmented button { min-height: 44px; padding: .6rem; }
.segmented button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.range-label { display: flex; justify-content: space-between; }
.range-label output { color: var(--acid); font: 1.2rem var(--serif); }
input[type="range"] { accent-color: var(--acid); width: 100%; }
.outlier-toggle { align-items: center; background: transparent; border: 0; cursor: pointer; display: flex; font: .6rem var(--mono); gap: .8rem; letter-spacing: .06em; margin-top: 2.2rem; padding: 0; text-align: left; text-transform: uppercase; }
.outlier-toggle i { border: 1px solid var(--muted); display: block; height: 20px; position: relative; width: 38px; }
.outlier-toggle i::after { background: var(--muted); content: ""; height: 14px; left: 2px; position: absolute; top: 2px; transition: transform .18s ease; width: 14px; }
.outlier-toggle[aria-pressed="true"] i { border-color: var(--coral); }
.outlier-toggle[aria-pressed="true"] i::after { background: var(--coral); transform: translateX(18px); }
.metric-visual { min-width: 0; }
.distribution-frame { height: 340px; padding: 1.5rem; }
.metric-results { border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: repeat(3, 1fr); }
.metric-results article { border-right: 1px solid var(--line-dark); min-height: 180px; padding: 1.2rem; }
.metric-results article:last-child { border-right: 0; }
.metric-results span { color: var(--muted); font: .53rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.metric-results strong { display: block; font: 300 3.4rem var(--serif); margin-top: .4rem; }
.metric-results article:nth-child(2) strong { color: var(--cyan); }
.metric-results article:nth-child(3) strong { color: var(--coral); }
.metric-results p { color: var(--muted); font-size: .68rem; line-height: 1.45; }
.formula-pair { border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: 1fr 1fr; }
.formula-pair p { display: flex; flex-direction: column; margin: 0; padding: 1rem 1.2rem; }
.formula-pair p:first-child { border-right: 1px solid var(--line-dark); }
.formula-pair span { color: var(--muted); font: .5rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.formula-pair b { font: 300 1rem var(--serif); margin-top: .45rem; }

.black-scholes { background: var(--ink-2); }
.bs-primer { display: grid; gap: 2rem; grid-template-columns: 1.2fr .8fr; }
.formula-card { background: var(--acid); color: var(--ink); min-height: 280px; padding: 1.6rem; }
.formula-card > span { font: .55rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.formula-card p { font: 300 clamp(1.8rem, 3.4vw, 3.6rem)/1.15 var(--serif); margin: 4.6rem 0 1.5rem; }
.formula-card small { font: .64rem/1.6 var(--mono); }
.reverse-explainer { border-top: 1px solid var(--line-dark); padding-top: 1rem; }
.reverse-explainer p, .reverse-explainer li { color: #bcc2ca; font-size: .8rem; line-height: 1.55; }
.reverse-explainer ol { padding-left: 1.4rem; }
.option-lab { border: 1px solid var(--line-dark); display: grid; grid-template-columns: .78fr 1.22fr; margin-top: 4rem; }
.option-controls { border-right: 1px solid var(--line-dark); padding: 1.5rem; }
.option-controls > label { display: flex; justify-content: space-between; margin-top: 2.4rem; }
.option-controls label span { color: var(--muted); font: .52rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.option-controls label output { font: 1.1rem var(--serif); }
.option-controls input { margin-top: .7rem; }
.fixed-inputs { border-top: 1px solid var(--line-dark); color: var(--muted); font-size: .64rem; line-height: 1.5; margin: 2.4rem 0 0; padding-top: 1rem; }
.solver-panel { display: flex; flex-direction: column; padding: clamp(1.5rem, 4vw, 4rem); }
.solver-panel > strong { color: var(--coral); font: 300 clamp(6rem, 12vw, 12rem)/.78 var(--serif); letter-spacing: -.07em; margin-top: 3rem; }
.solver-panel > span { color: var(--muted); font: .57rem var(--mono); letter-spacing: .13em; margin-top: 1rem; text-transform: uppercase; }
.solver-track { background: linear-gradient(90deg, var(--cyan), var(--acid), var(--coral), var(--violet)); height: 6px; margin: 4rem 0 2rem; position: relative; }
.solver-track i { background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; height: 24px; position: absolute; top: -9px; transform: translateX(-50%); width: 24px; }
.solver-details { border: 1px solid var(--line-dark); display: grid; grid-template-columns: 1fr 1fr; }
.solver-details p { display: flex; flex-direction: column; margin: 0; padding: 1rem; }
.solver-details p:nth-child(odd) { border-right: 1px solid var(--line-dark); }
.solver-details p:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
.solver-details b { font: 300 1.4rem var(--serif); margin-top: .4rem; }
#solverMessage { color: var(--muted); font-size: .72rem; line-height: 1.5; margin: 1.5rem 0 0; }
.model-warning { border-left: 5px solid var(--coral); display: grid; gap: 2rem; grid-template-columns: 1fr 3fr; margin-top: 3rem; padding: .5rem 0 .5rem 1.5rem; }
.model-warning b { font: .58rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.model-warning p { color: #bcc2ca; font: 300 1.1rem/1.45 var(--serif); margin: 0; max-width: 55rem; }

.method-lanes { border: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); }
.method-lanes > article { border-right: 1px solid var(--ink); }
.method-lanes > article:last-child { border-right: 0; }
.method-title { min-height: 210px; padding: 1.3rem; }
.method-title span { color: #be3c2a; }
.method-title h3 { font: 300 2.4rem/1 var(--serif); margin: 5rem 0 0; }
.method-row { align-items: center; background: transparent; border: 0; border-top: 1px solid var(--ink); cursor: pointer; display: grid; gap: .8rem; grid-template-columns: 1fr 1.6fr auto; min-height: 78px; padding: 1rem 1.2rem; text-align: left; width: 100%; }
.method-row span { font: 500 .58rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.method-row b { font-size: .7rem; font-weight: 400; line-height: 1.4; }
.method-row i { font: 300 1.2rem var(--serif); }
.method-detail { background: var(--paper-2); display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.method-detail p { font: 300 1rem/1.4 var(--serif); margin: 0; overflow: hidden; padding: 0 1.2rem; }
.method-detail.open { grid-template-rows: 1fr; }
.method-detail.open p { padding-bottom: 1.2rem; }
.annualization-note { background: var(--cyan); border: 1px solid var(--ink); border-top: 0; color: var(--ink); display: grid; gap: 2rem; grid-template-columns: 1fr 3fr; padding: 1.5rem; }
.annualization-note span { color: var(--ink); }
.annualization-note p { font: 300 1.2rem/1.35 var(--serif); margin: 0; }

.history { background: var(--ink); }
.timeline { border-top: 1px solid var(--line-dark); margin-left: 16.666%; }
.timeline article { border-bottom: 1px solid var(--line-dark); display: grid; gap: 2rem; grid-template-columns: 1fr 3fr; min-height: 250px; padding: 2rem 0; }
.timeline time { color: var(--coral); font: 300 clamp(3rem, 5vw, 5.5rem) var(--serif); letter-spacing: -.04em; }
.timeline article span { color: var(--muted); font: .53rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.timeline h3 { font: 300 2rem var(--serif); margin: 2.8rem 0 .7rem; }
.timeline p { color: #b6bcc5; font-size: .78rem; line-height: 1.6; margin: 0; max-width: 48rem; }

.pattern-grid { border: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; }
.pattern-grid article { border-bottom: 1px solid var(--ink); min-height: 360px; padding: 1.5rem; }
.pattern-grid article:nth-child(odd) { border-right: 1px solid var(--ink); }
.pattern-grid article:nth-child(n+3) { border-bottom: 0; }
.pattern-grid > article > span { color: #be3c2a; }
.pattern-grid h3 { font: 300 clamp(2rem, 3.4vw, 3.6rem)/.98 var(--serif); letter-spacing: -.035em; margin: 5rem 0 1.2rem; max-width: 16ch; }
.pattern-grid p { font-size: .78rem; line-height: 1.6; max-width: 52ch; }
.reading-checklist { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: .8fr 1.2fr; margin-top: 5rem; }
.reading-checklist > div { padding: 2rem; }
.reading-checklist h3 { font: 300 clamp(3rem, 5vw, 5.4rem)/.88 var(--serif); letter-spacing: -.045em; margin: 4rem 0 0; }
.reading-checklist ol { border-left: 1px solid var(--line-dark); list-style: none; margin: 0; padding: 0; }
.reading-checklist li { border-bottom: 1px solid var(--line-dark); display: grid; gap: 1rem; grid-template-columns: 3rem 1fr; padding: 1.3rem; }
.reading-checklist li:last-child { border-bottom: 0; }
.reading-checklist li > span { color: var(--coral); font: .58rem var(--mono); }
.reading-checklist li p { color: #b8bec6; font-size: .74rem; line-height: 1.5; margin: 0; }
.reading-checklist li b { color: var(--paper); }

.sources { background: var(--ink-2); }
.source-grid { border: 1px solid var(--line-dark); display: grid; grid-template-columns: 1fr 1fr; }
.source-grid a { display: grid; gap: .8rem; grid-template-columns: 1fr auto; min-height: 130px; padding: 1.2rem; text-decoration: none; }
.source-grid a:nth-child(odd) { border-right: 1px solid var(--line-dark); }
.source-grid a:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--line-dark); }
.source-grid a:last-child:nth-child(odd) { border-right: 0; grid-column: 1 / -1; }
.source-grid span { grid-column: 1 / -1; }
.source-grid b { font: 300 1.2rem/1.2 var(--serif); }
.source-grid i { color: var(--muted); font-style: normal; }
.source-grid a:hover, .source-grid a:focus-visible { background: var(--paper); color: var(--ink); outline: 0; }
.disclaimer { color: var(--muted); font-size: .66rem; line-height: 1.6; margin: 2rem 0 0 auto; max-width: 48rem; }
.next-guide { border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; margin-top: 7rem; padding-top: 2rem; text-decoration: none; }
.next-guide b { font: 300 clamp(2.5rem, 5vw, 5rem) var(--serif); margin-top: 1rem; }

@media (max-width: 980px) {
  .topbar nav { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .hero { gap: 2rem; grid-template-columns: 1fr; }
  .hero h1 { max-width: 8ch; }
  .hero-lede { margin-left: 34%; }
  .hero-instrument { margin: 0 0 5rem 34%; }
  .section-heading { grid-template-columns: 3rem 1fr; }
  .section-heading h2 { grid-column: 1 / -1; margin-top: 2rem; }
  .section-intro { margin-left: 0; }
  .path-layout, .metric-lab, .option-lab, .reading-checklist, .shock-lab, .contraction-question { grid-template-columns: 1fr; }
  .canvas-frame, .metric-controls, .option-controls, .shock-controls, .contraction-copy { border-bottom: 1px solid var(--line-dark); border-right: 0; }
  .behavior-grid { grid-template-columns: 1fr 1fr; }
  .behavior-grid article { border-bottom: 1px solid var(--ink); }
  .behavior-grid article:nth-child(2) { border-right: 0; }
  .behavior-grid article:nth-child(n+3) { border-bottom: 0; }
  .lens-grid, .method-lanes { grid-template-columns: 1fr; }
  .lens-card, .method-lanes > article { border-bottom: 1px solid var(--ink); border-right: 0; }
  .lens-card:last-child, .method-lanes > article:last-child { border-bottom: 0; }
  .bs-primer { grid-template-columns: 1fr; }
  .map-note { margin-left: 25%; }
  .reading-checklist ol { border-left: 0; border-top: 1px solid var(--line-dark); }
}

@media (max-width: 700px) {
  :root { --bar: 56px; }
  .topbar { padding: 0 1rem; }
  .all-guides { justify-self: end; }
  .chapter-id { display: none; }
  .hero { padding-left: 1rem; padding-right: 1rem; }
  .hero h1 { font-size: clamp(4rem, 19vw, 6.5rem); }
  .hero-lede, .hero-instrument { margin-left: 0; }
  .hero-instrument { margin-right: 0; }
  .scroll-cue { display: none; }
  .section { padding-left: 1rem; padding-right: 1rem; }
  .section-heading { margin-bottom: 4rem; }
  .path-controls, .forecast-controls { grid-template-columns: 1fr; }
  .path-controls button, .forecast-controls button { border-bottom: 1px solid var(--line-dark); border-right: 0; }
  .path-controls button:last-child, .forecast-controls button:last-child { border-bottom: 0; }
  .canvas-frame { min-height: 340px; }
  .explanation-strip, .forecast-readout, .metric-results, .formula-pair, .metric-note, .overlap-note, .annualization-note, .source-grid { grid-template-columns: 1fr; }
  .explanation-strip article, .forecast-readout > div, .metric-results article { border-bottom: 1px solid var(--line-dark); border-right: 0; min-height: 220px; }
  .explanation-strip article:last-child, .metric-results article:last-child { border-bottom: 0; }
  .explanation-strip h3 { margin-top: 3rem; }
  .overlap-note, .annualization-note { gap: 1rem; }
  .forecast-viz { height: 330px; padding: .7rem; }
  .interaction-map { align-items: stretch; grid-template-columns: 1fr; }
  .interaction-map > i { transform: rotate(90deg); width: 2rem; }
  .map-note { margin-left: 0; }
  .metric-note { gap: 1.5rem; }
  .distribution-frame { height: 270px; padding: .8rem; }
  .formula-pair p:first-child { border-bottom: 1px solid var(--line-dark); border-right: 0; }
  .formula-card p { margin-top: 3rem; }
  .solver-panel { padding: 1.5rem; }
  .solver-panel > strong { font-size: clamp(5rem, 25vw, 8rem); }
  .solver-details { grid-template-columns: 1fr; }
  .solver-details p, .solver-details p:nth-child(odd), .solver-details p:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); border-right: 0; }
  .solver-details p:last-child { border-bottom: 0; }
  .model-warning { grid-template-columns: 1fr; }
  .timeline { margin-left: 0; }
  .timeline article { grid-template-columns: 1fr; }
  .timeline h3 { margin-top: 1.5rem; }
  .pattern-grid { grid-template-columns: 1fr; }
  .pattern-grid article, .pattern-grid article:nth-child(odd), .pattern-grid article:nth-child(n+3) { border-bottom: 1px solid var(--ink); border-right: 0; }
  .pattern-grid article:last-child { border-bottom: 0; }
  .source-grid a:nth-child(odd) { border-right: 0; }
  .source-grid a:not(:last-child) { border-bottom: 1px solid var(--line-dark); }
  .return-line { grid-template-columns: 2.8rem 1fr; }
  .return-line b { display: none; }
  .behavior-grid { grid-template-columns: 1fr; }
  .behavior-grid article, .behavior-grid article:nth-child(2), .behavior-grid article:nth-child(n+3) { border-bottom: 1px solid var(--ink); border-right: 0; min-height: 250px; }
  .behavior-grid article:last-child { border-bottom: 0; }
  .behavior-grid h3 { margin-top: 3rem; }
  .shock-results { grid-template-columns: 1fr 1fr; }
  .shock-results article { border-bottom: 1px solid var(--line-dark); }
  .shock-results article:nth-child(2) { border-right: 0; }
  .shock-results article:nth-child(n+3) { border-bottom: 0; }
  .contraction-tabs { grid-template-columns: 1fr; }
  .contraction-tabs button { border-bottom: 1px solid var(--line-dark); border-right: 0; }
  .contraction-tabs button:last-child { border-bottom: 0; }
  .frequency-row { grid-template-columns: 4.5rem 1fr 3.7rem; }
  .frequency-verdict { grid-template-columns: 1fr; }
  .contraction-answer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
}