/* Narrative pages share the landing tokens. No global reader overrides. */
.story-reader {padding-bottom:48px}
.story-reader .story-top {border:0; padding:23px 0 19px; min-height:64px}
.story-top .quiet-link,.story-bottom .quiet-link {min-height:44px; font-size:12px}
.story-top .quiet-link:hover,.story-bottom .quiet-link:hover {color:var(--accent)}
.story-article {max-width:var(--copy-width,780px); margin:0}
.story-header {border-top:3px solid var(--accent); padding:29px 0 25px}
.story-kicker {font:10px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0 0 17px}
.story-title {font-size:clamp(30px,3.5vw,44px); line-height:1.21; max-width:23ch; text-wrap:balance; letter-spacing:-1.4px}
.story-body {max-width:650px; font:400 16px/1.85 var(--sans); color:var(--muted)}
.story-section p {margin:0 0 19px}
.story-section:first-child > p:first-of-type {color:var(--text)}
.story-section + .story-section {margin-top:58px}
.story-section {scroll-margin-top:138px}
.story-section-head {position:relative; margin:0 0 25px; padding-top:17px}
.story-section-head::before {content:""; position:absolute; top:0; left:0; width:34px; height:1px; background:var(--accent)}
.story-section-kicker {display:block; margin:0 0 7px; color:var(--accent); font:10px/1.6 var(--mono); letter-spacing:.09em; text-transform:uppercase}
.story-section h2 {font:400 25px/1.36 var(--mono); margin:0; color:var(--text); letter-spacing:-.65px; text-wrap:balance}
.story-section:last-child > p:last-child {margin-bottom:0}
.story-bottom {display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--line); padding:15px 0 0; margin-top:31px; max-width:650px}
.story-loading {color:var(--muted)}
.story-error {padding:21px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.story-error p {margin:0 0 16px}
@media(max-width:780px) {
  .story-title {font-size:36px}
  .story-header {padding:25px 0 24px}
  .story-body {font-size:15px}
}
@media(max-width:500px) {
  .story-reader {padding-bottom:32px}
  .story-reader .story-top {padding:9px 0 11px}
  .story-header {padding:24px 0 23px}
  .story-title {font-size:31px; line-height:1.26; letter-spacing:-1.1px; text-wrap:initial}
  .story-kicker {font-size:9px; margin-bottom:14px}
  .story-body {font-size:15px; line-height:1.82}
  .story-section p {margin-bottom:18px}
  .story-section + .story-section {margin-top:46px}
  .story-section-head {margin-bottom:21px; padding-top:15px}
  .story-section-kicker {font-size:9px; margin-bottom:5px}
  .story-section h2 {font-size:22px; line-height:1.4}
  .story-bottom {gap:12px; flex-wrap:wrap; margin-top:27px}
  .story-bottom .quiet-link {font-size:11px}
}
@media(max-width:360px) {.story-title {font-size:28px}.story-body {font-size:14px}}
/* Text-first article details, formulas and documentary callouts. */
.story-section .story-highlight,.story-section strong {color:var(--text)}
.story-section .story-highlight {font:400 26px/1.4 var(--mono); color:var(--accent)}
.story-section strong {font-weight:600}
.story-code {max-width:100%; margin:24px 0; padding:18px 20px; border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:4px; background:var(--surface); color:var(--text); font:13px/1.85 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto}
.story-code code {font:inherit}

.story-fraction {display:grid; grid-template-columns:minmax(0,1.35fr) minmax(190px,.65fr); gap:30px; align-items:end; margin:30px 0 34px; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.story-fraction figcaption,.story-concepts-label {margin:0 0 14px; color:var(--faint); font:10px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.story-fraction-formula {display:flex; align-items:center; gap:13px; color:var(--text); font:400 28px/1 var(--mono); white-space:nowrap}
.story-fraction-name {color:var(--muted)}
.story-fraction-equals {color:var(--faint)}
.story-fraction-stack {display:inline-grid; grid-template-rows:1fr 1fr; min-width:38px; text-align:center; line-height:1.05; color:var(--accent)}
.story-fraction-stack span:first-child {padding:0 8px 5px; border-bottom:1.5px solid currentColor}
.story-fraction-stack span:last-child {padding:5px 8px 0}
.story-fraction-formula strong {font-size:31px; font-weight:500; color:var(--accent)}
.story-fraction-note {margin:0!important; padding-left:18px; border-left:1px solid var(--line); color:var(--muted); font:13px/1.65 var(--sans)}

.story-concepts {margin:28px 0 32px; padding:22px 0 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.story-concepts-label {margin-bottom:17px}
.story-concepts-list {display:grid; gap:0}
.story-concept {display:grid; grid-template-columns:minmax(110px,.36fr) minmax(0,.64fr); gap:22px; padding:13px 0; border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent)}
.story-concept:first-child {border-top:0; padding-top:0}
.story-concept:last-child {padding-bottom:0}
.story-concept strong {font:500 17px/1.45 var(--mono); color:var(--accent)}
.story-concept span {color:var(--muted); align-self:center}
.story-concepts-conclusion {margin:21px 0 0!important; padding-top:18px; border-top:1px solid var(--line); color:var(--text)!important; font:400 18px/1.55 var(--sans)}


.story-closing {max-width:620px; margin:54px 0 10px; padding-top:28px; border-top:1px solid var(--line)}
.story-closing p {margin:0 0 17px!important; color:var(--text); font:400 18px/1.72 var(--sans)}
.story-closing p:first-child {max-width:46ch; margin-bottom:26px!important; color:var(--muted)}
.story-closing p:nth-last-child(2) {margin-top:34px!important; margin-bottom:7px!important; color:var(--text); font:400 21px/1.5 var(--mono)}
.story-closing p:last-child {max-width:30ch; margin-bottom:0!important; color:var(--accent); font:400 27px/1.42 var(--mono); letter-spacing:-.45px}

.story-table {max-width:100%; margin:24px 0; overflow-x:auto; border:1px solid var(--line); border-radius:4px; background:var(--surface)}
.story-table table {width:100%; border-collapse:collapse; text-align:left; font:14px/1.8 var(--sans)}
.story-table th {padding:13px 18px; color:var(--accent); background:var(--surface-2); font:10px/1.6 var(--mono); letter-spacing:.07em}
.story-table td {padding:13px 18px; border-top:1px solid var(--line); vertical-align:top}
.story-table td:first-child {color:var(--text); font-family:var(--mono); width:70px}
.story-table td:last-child {overflow-wrap:anywhere}
.story-code:focus-visible,.story-table:focus-visible {outline:2px solid var(--accent); outline-offset:4px}
@media(max-width:500px) {
  .story-code {font-size:12px; padding:16px; margin:21px 0}
  .story-fraction {grid-template-columns:1fr; gap:18px; margin:25px 0 29px; padding:20px 0}
  .story-fraction-formula {font-size:24px; gap:10px}
  .story-fraction-formula strong {font-size:27px}
  .story-fraction-note {padding-left:14px}
  .story-concepts {margin:25px 0 29px; padding:19px 0}
  .story-concept {grid-template-columns:1fr; gap:2px; padding:12px 0}
  .story-concept strong {font-size:16px}
  .story-concepts-conclusion {font-size:17px}
  .story-closing {margin-top:42px; padding-top:23px}
  .story-closing p {font-size:16px; line-height:1.75}
  .story-closing p:first-child {margin-bottom:23px!important}
  .story-closing p:nth-last-child(2) {margin-top:29px!important; font-size:18px}
  .story-closing p:last-child {font-size:23px; line-height:1.45}
  .story-table table {font-size:13px}
  .story-table th,.story-table td {padding:12px 14px}
  .story-table td:first-child {width:52px}
}