/* Site header shared by the homepage and the companion pages (docs/specs/site-visual-system.md section 3).
   One source: the build prepends this file to the served home.css and learn/explain.css. Token values are injected on the body. */
.home-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; min-height: 72px; padding: 12px 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.home-header-flow { position: relative; }
.home-header .brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 600; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.home-nav { display: flex; gap: 28px; align-items: center; }
.home-header nav a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; color: var(--text); font-size: 16px; }
.home-header nav a:hover { text-decoration: underline; }
.home-explore { display: none; }
@media (max-width: 900px) {
  .home-header { padding: 8px 24px; }
  .home-nav { gap: 18px; }
}
@media (max-width: 600px) {
  .home-header { padding: 8px 20px; min-height: 60px; }
  .home-nav { display: none; }
  .home-explore { display: block; position: relative; }
  .home-explore summary { min-height: 44px; padding: 10px 4px; cursor: pointer; color: var(--text); list-style-position: inside; }
  .home-explore[open] summary { color: var(--physics); }
  .home-explore nav { position: absolute; right: 0; top: 100%; width: 200px; padding: 12px 20px; background: var(--panel); border: 1px solid var(--edge); z-index: 10; }
  .home-explore nav a { display: flex; }
}

/* Explainer pages (docs/specs/site-explainers.md), styled to match the homepage (docs/specs/site-visual-system.md). Dark only. */
/* Vendored fonts (assets/fonts/README.md): Latin subset, SIL OFL 1.1 */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.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: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-500-normal.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: "IBM Plex Sans"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.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: "IBM Plex Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.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: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-latin-400-normal.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: "Newsreader"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fonts/newsreader-latin-500-normal.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: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-latin-400-italic.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; }
/* Token values come from assets/data/design-tokens.json, injected on the body by shell(); the old names below are aliases
   so diagrams (site/diagrams, diagram-gen.mjs), toys (site/toys) and widget scripts keep working. Dark only, as on home. */
:root { color-scheme: dark; }
body.explain {
  --bg: var(--space); --ink: var(--text); --mute: var(--text-dim); --line: var(--rule); --panel-2: var(--panel); --info: var(--physics);
  --heat: var(--ember-key); --bit: var(--ember-key); --frontier: var(--basis-frontier); --void: #000; --void-ink: var(--text);
  --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark; margin: 0; background: var(--space); color: var(--text); font: 400 19px/1.65 var(--serif); overflow-x: clip;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
a { color: var(--physics); text-underline-offset: .2em; }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--edge); outline-offset: 4px; border-radius: 0; }
.skip-link { position: absolute; z-index: 30; left: 20px; top: 8px; transform: translateY(-200%); padding: 12px 20px; background: var(--panel); font: 500 16px var(--sans); }
.skip-link:focus { transform: none; }

/* hero: full-bleed still, copy at the bottom on a scrim, aligned to the reading column */
.hero { position: relative; isolation: isolate; min-height: max(440px, min(72svh, 720px)); display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 0 40px; overflow: hidden; background-color: var(--space); background-size: cover; background-position: center; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 12, .72) 0, rgba(5, 7, 12, 0) 150px), linear-gradient(180deg, rgba(5, 7, 12, 0) 40%, var(--space) 100%); }
.hero-in { position: relative; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px; color: var(--text); }
.hero-in::before { content: ""; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: -96px; bottom: -40px; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 12, 0) 0, rgba(5, 7, 12, .78) 96px, rgba(5, 7, 12, .88) 100%); }
.hero-label { position: absolute; right: 48px; bottom: 20px; margin: 0; font: 400 13px/1.4 var(--mono); color: var(--text-dim); letter-spacing: .01em; }
.strand { font: 400 15px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ember-key); margin: 0 0 20px; }
.titlebar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin: 0 0 24px; }
.explain h1 { font: 500 clamp(40px, 5.2vw, 72px)/1.02 var(--sans); letter-spacing: -.04em; text-wrap: balance; margin: 0; }
.lead, .lead-plain { font: 400 21px/1.5 var(--sans); max-width: 34em; margin: 0; }
.lead { color: var(--text); }
.lead-plain { color: var(--text-dim); }

/* the column */
.prose { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.hero + .prose { padding-top: 40px; }
.intro { padding: 56px 0 40px; }
.prose > p, .prose li { max-width: 68ch; }
.prose h2 { font: 500 clamp(26px, 3vw, 36px)/1.15 var(--sans); letter-spacing: -.025em; margin: 72px 0 16px; text-wrap: balance; }
.prose h3 { font: 500 21px/1.3 var(--sans); margin: 36px 0 8px; }
.leans { font: 400 15px/1.5 var(--sans); color: var(--text-dim); margin: 0 0 28px; }
.soon { color: var(--text-faint); text-decoration: underline dotted var(--text-faint); text-underline-offset: .2em; cursor: help; }
.num sup, .rung-exp sup, .zr-exp sup, .zr-note sup, .zb-exp sup { font-size: .6em; line-height: 0; vertical-align: .7em; margin-left: .04em; }
.num { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; color: inherit; white-space: nowrap; }
.eq { font: 400 17px/1.5 var(--mono); text-align: center; background: var(--panel); padding: 16px 20px; margin: 24px 0; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.katex { font-size: 1.05em; }
table { border-collapse: collapse; width: 100%; font: 400 15px/1.45 var(--sans); margin: 20px 0; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--text-dim); font-weight: 500; }
td .num { font-size: .95em; }

/* the guide's voice */
.guide { margin: 8px 0 32px; padding: 4px 0 4px 20px; border-left: 1px solid var(--edge); font-style: italic; font-size: 21px; line-height: 1.55; }
.guide .who { display: block; font: 400 13px var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.guide p { margin: 0; }

/* figures */
.fig { margin: 32px 0; }
.fig img { width: 100%; height: auto; display: block; }
.fig figcaption { font: 400 15px/1.5 var(--sans); color: var(--text-dim); margin-top: 10px; max-width: 68ch; }
.diagram svg { width: 100%; height: auto; display: block; background: var(--panel); padding: 8px; }
/* Two-series diagrams draw `--bit` against `--heat`; inside a figure they need a second colour, so `--bit` is lavender there. */
.diagram { --bit: var(--basis-fiction); }

/* guess first */
details.guess { background: var(--panel); padding: 0 20px; margin: 28px 0; }
details.guess summary { cursor: pointer; padding: 16px 0; min-height: 44px; font: 500 18px/1.45 var(--sans); list-style: none; }
details.guess summary::-webkit-details-marker { display: none; }
details.guess .lbl { display: block; font: 400 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
details.guess summary::after { content: "Show the answer"; display: block; font: 400 15px var(--sans); color: var(--physics); margin-top: 8px; }
details.guess[open] summary::after { content: none; }
details.guess > p { margin: 0 0 18px; }

/* the folds: an invitation to read on */
.prose > .openall-line { display: flex; justify-content: flex-end; margin: 48px 0 0; font: 400 15px var(--sans); max-width: none; }
.openall { display: inline-flex; align-items: center; min-height: 44px; }
details.fold { margin: 48px 0 0; border-top: 1px solid var(--rule); }
.openall-line + details.fold { margin-top: 4px; }
details.fold + details.fold { margin-top: 0; }
details.fold > summary { cursor: pointer; list-style: none; padding: 24px 48px 24px 0; position: relative; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; position: absolute; right: 8px; top: 33px; width: 11px; height: 11px; border-right: 1.5px solid var(--edge); border-bottom: 1.5px solid var(--edge); transform: rotate(45deg); transition: transform .2s; }
details.fold[open] > summary::after { transform: rotate(225deg); top: 39px; }
details.fold .q { display: block; font: 500 24px/1.3 var(--sans); letter-spacing: -.01em; color: var(--text); }
details.fold .m { display: block; font: 400 15px var(--sans); color: var(--text-dim); margin-top: 6px; }
details.fold > summary:hover .q { color: var(--physics); }
.fold-body { padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.fold-body > h3:first-child { margin-top: 6px; }

/* basis chips: square outline in the basis colour */
.basis { font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); border: 1px solid currentColor; padding: 1px 6px; vertical-align: 2px; white-space: nowrap; }
.basis-physics { color: var(--basis-physics); } .basis-design { color: var(--basis-design); } .basis-challenge { color: var(--basis-challenge); }
.basis-fiction { color: var(--basis-fiction); } .basis-law { color: var(--basis-law); } .basis-illustrative { color: var(--basis-illustrative); }
.basis-styled { color: var(--basis-styled); } .basis-frontier { color: var(--basis-frontier); } .basis-simulation { color: var(--basis-simulation); }

/* reading list */
ol.reading { padding-left: 22px; font: 400 15px/1.5 var(--sans); }
ol.reading li { margin: 0 0 14px; }
ol.reading a { color: var(--text); text-decoration-color: var(--rule); }
ol.reading a:hover { color: var(--physics); text-decoration-color: currentColor; }
ol.reading .note { display: block; color: var(--text-dim); }

/* /updates/: the changelog generated from git log (scripts/site/updates.mjs) */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 0 24px; margin: 8px 0 24px; }
.fact { border-top: 1px solid var(--rule); padding: 12px 0; }
.fact__value { display: block; font: 400 22px var(--mono); font-variant-numeric: tabular-nums; color: var(--ember-key); }
.fact__label { display: block; font: 400 14px/1.4 var(--sans); color: var(--text-dim); margin-top: 4px; }
.updates-page .muted { font: 400 15px/1.5 var(--sans); color: var(--text-dim); max-width: none; }
.updates-page h2 { font: 500 20px/1.3 var(--sans); letter-spacing: -.01em; margin: 40px 0 8px; }
ul.updates { list-style: none; padding: 0; margin: 0; }
ul.updates li { max-width: none; padding: 10px 0; border-top: 1px solid var(--rule); font: 400 16px/1.5 var(--sans); }
.pill--model { display: inline-block; font: 500 12px/1.2 var(--mono); color: var(--physics); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 9px; white-space: nowrap; vertical-align: 1px; }
.count { font: 400 13px var(--mono); color: var(--text-dim); }

/* the toy */
.toy { background: var(--panel); padding: 24px; margin: 32px 0; font-family: var(--sans); }
.toy-title { font: 500 20px var(--sans); margin: 0; }
.toy-sub { color: var(--text-dim); font-size: 15px; margin: 4px 0 16px; }
.toy button { font: 500 15px var(--sans); color: var(--text); background: transparent; border: 1px solid var(--edge); padding: 10px 16px; min-height: 44px; cursor: pointer; }
.toy input[type="range"] { accent-color: var(--physics); }
.places { display: flex; flex-wrap: wrap; gap: 8px; }
.places button { font: 500 15px var(--sans); color: var(--text); background: transparent; border: 1px solid var(--edge); padding: 10px 16px; min-height: 44px; cursor: pointer; }
.places button:hover { border-color: var(--text); }
.places button[aria-pressed="true"] { border-color: var(--text); color: var(--physics); }
.slide { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 14px; color: var(--text-dim); }
.slide .track { flex: 1; display: block; }
.slide input { width: 100%; height: 44px; margin: 0; accent-color: var(--physics); }
.ruler { position: relative; display: block; height: 8px; margin: 2px 8px 0; }
.ruler i { position: absolute; top: 0; width: 1px; height: 8px; background: var(--edge); }
.temp { font: 400 22px var(--mono); margin: 12px 0 10px; color: var(--ember-key); }
.out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 0 24px; margin: 0; }
.out div { border-top: 1px solid var(--rule); padding: 12px 0; }
.out dt { font-size: 14px; color: var(--text-dim); }
.out dd { margin: 4px 0 0; font: 400 20px var(--mono); font-variant-numeric: tabular-nums; color: var(--ember-key); }
.toy .note { font-size: 15px; line-height: 1.5; margin: 12px 0 0; min-height: 1.5em; }
.toy .formula { font-size: 13px; color: var(--text-dim); margin: 10px 0 0; }

/* keep going and the other link lists: the homepage directory style */
.keepgoing { margin-top: 72px; }
.keepgoing h2 { margin: 0 0 24px; }
.keepgoing ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 32px; }
.keepgoing li { max-width: none; border-top: 1px solid var(--rule); padding: 16px 0 28px; font: 500 21px/1.3 var(--sans); letter-spacing: -.01em; }
.keepgoing li a { display: block; color: var(--text); text-decoration: none; }
.keepgoing li a:hover { color: var(--physics); }
.keepgoing .soon { color: var(--text-faint); text-decoration: none; cursor: default; }
.keepgoing .soon::after { content: "Not written yet"; display: block; font: 400 13px var(--mono); margin-top: 6px; }
.explore .ex-note { display: block; font: 400 15px/1.5 var(--sans); letter-spacing: 0; color: var(--text-dim); margin-top: 6px; }
.explore li a { position: relative; padding-right: 32px; }
.explore li a::after { content: "\2192"; position: absolute; right: 0; top: 0; }
.keepgoing .zr-note { display: block; font: 400 13px var(--mono); letter-spacing: 0; color: var(--ember-key); margin-top: 6px; }

/* footer: the homepage footer inside the column */
.foot { margin-top: 96px; padding: 28px 0 40px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font: 400 15px/1.5 var(--sans); color: var(--text-dim); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot code { font-size: 13px; }
.foot .series { flex: 1 0 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 24px; margin: 8px 0 0; }
.foot .series a { display: block; min-height: 0; border-top: 1px solid var(--rule); padding: 14px 0 6px; text-decoration: none; color: var(--text); font-weight: 500; }
.foot .series a:hover, .foot .series a[aria-current] { color: var(--physics); }
.foot .series small { display: block; font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.foot .series span { display: block; font-weight: 400; font-size: 14px; color: var(--text-dim); }

/* glossary: terms marked in running text, and the /glossary/ page */
a.term { color: inherit; text-decoration: underline dotted var(--text-dim); text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: help; }
a.term:hover, a.term:focus-visible { color: var(--physics); text-decoration-color: var(--physics); }
.gloss-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 28px; font: 400 15px var(--mono); }
.gloss-jump a, .gloss-jump .off { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--rule); text-decoration: none; }
.gloss-jump a:hover { border-color: var(--text); }
.gloss-jump .off { color: var(--text-faint); opacity: .4; }
.gloss h2.gloss-letter { font: 400 20px var(--mono); margin: 48px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--rule); color: var(--text-dim); scroll-margin-top: 24px; }
.gloss h3 { margin: 24px 0 4px; scroll-margin-top: 24px; }
.gloss h3 + p { margin-top: 0; }
.gloss h3:target { color: var(--physics); }

/* the /learn/ map: the six strand colours carry meaning */
.mapfig { margin: 24px 0; width: min(1140px, calc(100vw - 40px)); position: relative; left: 50%; transform: translateX(-50%); }
.mapscroll { overflow-x: auto; background: var(--panel); padding: 8px; }
.map { display: block; max-width: none; margin: 0 auto; font: 500 13px var(--sans); }
.map .edge { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.map .node { fill: var(--space); stroke-width: 2; }
.map text { fill: var(--text); pointer-events: none; }
.map a:hover .node { fill: var(--rule); }
.map .unbuilt { stroke-dasharray: 4 3; opacity: .7; }
.mapfig figcaption { font: 400 15px/1.5 var(--sans); color: var(--text-dim); margin-top: 10px; }
.s-energy { stroke: #f0a64a; } .s-heat { stroke: #ef6f5e; } .s-limits { stroke: #3fbfb6; }
.s-black-holes { stroke: #9a6ff0; } .s-voyage { stroke: #5f97f0; } .s-ideas { stroke: #7fbf4a; }
.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 14px var(--sans); color: var(--text-dim); }
.legend i { display: inline-block; width: 14px; height: 10px; border: 2px solid; margin-right: 6px; vertical-align: -1px; }
.legend i.s-energy { border-color: #f0a64a; } .legend i.s-heat { border-color: #ef6f5e; } .legend i.s-limits { border-color: #3fbfb6; }
.legend i.s-black-holes { border-color: #9a6ff0; } .legend i.s-voyage { border-color: #5f97f0; } .legend i.s-ideas { border-color: #7fbf4a; }
.legend i.unbuilt { border-color: var(--text-dim); border-style: dashed; }
.maplist { font: 400 16px/1.5 var(--sans); padding-left: 20px; }
.maplist .after { color: var(--text-dim); font-size: 14px; }

/* the voice-over teaser ({% teaser %}), same as the dev dashboard's */
.teaser { margin: 0 0 1.6rem; }
.teaser .stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.teaser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.teaser img.on { opacity: 1; animation: teaser-drift 14s ease-out both; }
@keyframes teaser-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .teaser img.on { animation: none; } .teaser img { transition: none; } }
.teaser .sub { font-family: var(--sans); position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(86%, 900px); margin: 0; text-align: center;
  font-size: clamp(14px, 2.1vw, 24px); line-height: 1.35; color: #fff; text-shadow: 0 1px 3px #000, 0 0 12px #000; }
.teaser .tplay { position: absolute; right: 12px; top: 12px; min-height: 44px; font: 500 14px var(--sans); color: var(--text); background: rgba(5, 7, 12, .72); border: 1px solid var(--edge); padding: 8px 16px; cursor: pointer; }
.teaser.blocked .tplay { right: 50%; top: 50%; transform: translate(50%, -50%); font-size: 18px; padding: 12px 24px; }
.teaser .tnote { margin: .5rem 0 0; font-size: .85rem; color: var(--text-dim); }

/* narrated story player beside the title (X3.4) */
.narrate { display: inline-flex; align-items: center; gap: 12px; font: 400 15px var(--sans); color: var(--text); }
.narrate[hidden] { display: none; }
.narrate-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; border: 1px solid var(--edge); background: transparent; color: var(--text); padding: 0; }
.narrate-btn:hover { border-color: var(--text); }
.narrate-btn .ic-pause, .narrate.is-playing .narrate-btn .ic-play { display: none; }
.narrate.is-playing .narrate-btn .ic-pause { display: block; }
.narrate-label { color: var(--text-dim); }
.narrate-time { font: 400 13px var(--mono); font-variant-numeric: tabular-nums; color: var(--text-dim); }

/* the scale ladder, /zoom/ (X4.2): a rail beside the column on wide screens, a bar pinned to the top on narrow ones */
.rung { margin: 72px 0 0; scroll-margin-top: 68px; }
.rung-head { margin-bottom: 16px; }
.rung-pow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 6px; font: 400 15px var(--sans); color: var(--text-dim); }
.rung-exp { font: 400 clamp(28px, 5vw, 40px)/1 var(--mono); color: var(--ember-key); letter-spacing: -.03em; white-space: nowrap; }
.rung h2 { margin: 0 0 8px; }
.rung-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0 0; font: 400 14px var(--sans); color: var(--text-dim); }
.rung .barrow { border: 1px solid var(--rule); padding: 1px 8px; }
.rung .fig { margin: 20px 0; }
.rung > p { max-width: 68ch; }
.rung-ledger { font: 400 15px/1.5 var(--sans); color: var(--text-dim); background: var(--panel); padding: 14px 18px; margin: 20px 0 8px; }
.rung-ledger .lbl { display: block; font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.rung-sim { font: 500 16px var(--sans); margin: 12px 0 0; }
.rung-sim a { display: inline-flex; align-items: center; min-height: 44px; }
.rung-sim a::after { content: "\00a0\2192"; }
.rung-end { border-top: 1px dashed var(--rule); padding-top: 16px; }
.zrail { font: 400 15px var(--sans); margin: 8px 0 0; }
.zrail details { background: var(--panel); padding: 0 16px; }
.zrail summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 500; }
.zrail ol { list-style: none; margin: 0 0 12px; padding: 0; border-left: 1px solid var(--rule); }
.zrail a { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 0 10px; margin-left: -1px; color: var(--text-dim); text-decoration: none; border-left: 1px solid transparent; }
.zrail a:hover { color: var(--text); }
.zrail a[aria-current] { color: var(--text); border-left-color: var(--text); }
.zr-exp { font: 400 13px var(--mono); min-width: 4.4em; color: var(--ember-key); }
.toy[data-widget="zoom-rail"] { display: none; }
.toy[data-widget="zoom-rail"].ready { display: block; position: sticky; top: 0; z-index: 4; margin: 0 -20px; padding: 0; background: var(--space); border-bottom: 1px solid var(--rule); }
.zb-in { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; padding: 4px 20px; }
.zb-now { flex: 1; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 12px; align-items: baseline; font: 400 15px var(--sans); }
.zb-exp { font: 400 16px var(--mono); color: var(--ember-key); white-space: nowrap; }
.zb-name { font-weight: 500; }
.zb-n { margin-left: auto; font: 400 13px var(--mono); color: var(--text-dim); }
.zb-in button { min-width: 44px; min-height: 44px; border: 1px solid var(--edge); background: transparent; color: var(--text); font: 500 18px var(--sans); cursor: pointer; }
.zb-in button:hover:not(:disabled) { border-color: var(--text); }
.zb-in button:disabled { opacity: .35; cursor: default; }
@media (min-width: 1180px) {
  .rung { scroll-margin-top: 24px; }
  .zrail { position: fixed; top: 96px; left: max(10px, calc(50vw - 600px)); width: 210px; max-height: calc(100vh - 112px); overflow-y: auto; margin: 0; }
  .zrail summary { display: none; }
  .zrail details { background: none; padding: 0; }
  .zrail a { font-size: 14px; padding: 0 8px; }
  .toy[data-widget="zoom-rail"].ready { display: none; }
}

/* the chronicle /record/ and its chapter pages (card X4.3, spec section 6.3) */
.chron { margin: 40px 0 0; }
.prose .chron h3 { font: 500 24px/1.25 var(--sans); letter-spacing: -.015em; margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; scroll-margin-top: 24px; }
.chron-span { font: 400 15px var(--mono); letter-spacing: 0; color: var(--ember-key); }
.chron-sub { font: 400 15px/1.5 var(--sans); color: var(--text-dim); margin: 0 0 16px; max-width: 68ch; }
.chron-projection, .chron-deep-time { border-left: 1px dashed var(--rule); padding-left: 16px; }
.chron-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.ev { display: grid; grid-template-columns: 6.2em 1fr; gap: 0 14px; padding: 12px 0 12px 16px; position: relative; max-width: none; }
.ev::before { content: ""; position: absolute; left: -5px; top: 24px; width: 9px; height: 0; border-top: 1px solid var(--edge); }
.chron-projection .ev::before, .chron-deep-time .ev::before { border-top-style: dashed; }
.ev-year { font: 400 15px var(--mono); color: var(--ember-key); padding-top: 2px; }
.ev-what { margin: 0 0 4px; font-size: 18px; line-height: 1.5; }
.ev-meta { margin: 0; font: 400 14px/1.6 var(--sans); color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.ev-q { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.chcards { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 40px 24px; }
.chcards li { max-width: none; }
.chcards a, .chcards .soon { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--text); }
.chcards .soon { color: var(--text-faint); cursor: default; }
.chcards img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--panel); margin-bottom: 14px; filter: brightness(.96); transition: filter .2s; }
.chcards a:hover img { filter: brightness(1.1); }
.chcards .ch-n { font: 400 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ember-key); margin-bottom: 6px; }
.chcards .ch-t { font: 500 21px/1.25 var(--sans); letter-spacing: -.01em; }
.chcards a:hover .ch-t { color: var(--physics); }
.chcards .ch-time { font: 400 13px/1.5 var(--mono); color: var(--text-dim); margin-top: 6px; }
.chcards .ch-card { font: 400 15px/1.5 var(--sans); color: var(--text-dim); margin-top: 8px; }
.chmeta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 28px; font: 400 15px var(--sans); color: var(--text-dim); max-width: none; }
.chmeta span:first-child { font: 400 15px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ember-key); }
.goto { margin-top: 72px; }
.goto h2 { margin-top: 0; }
.playline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font: 400 15px/1.5 var(--sans); color: var(--text-dim); max-width: none; }
.playbtn { display: inline-flex; align-items: center; min-height: 52px; background: var(--work); color: var(--space); border: 1px solid var(--work); font: 500 17px var(--sans); padding: 12px 26px; text-decoration: none; }
.playbtn:hover { background: var(--text); border-color: var(--text); }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 72px; border-top: 1px solid var(--rule); }
.pn { display: block; padding: 20px 0 8px; min-height: 44px; text-decoration: none; color: var(--text); }
.pn-next { text-align: right; grid-column: 2; }
.pn-prev { grid-column: 1; }
.pn-d { display: block; font: 400 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.pn-t { display: block; font: 500 21px/1.3 var(--sans); letter-spacing: -.01em; }
.pn:hover .pn-t { color: var(--physics); }

@media (max-width: 1100px) {
  .hero-label { position: relative; right: auto; bottom: auto; width: 100%; max-width: 760px; margin: 16px auto 0; padding: 0 20px; }
}
@media (max-width: 600px) {
  body.explain { font-size: 18px; }
  .hero { min-height: min(125vw, 520px); padding: 60vw 0 32px; }
  .hero-in::before { top: -56px; background: linear-gradient(180deg, rgba(5, 7, 12, 0) 0, rgba(5, 7, 12, .78) 56px, rgba(5, 7, 12, .88) 100%); }
  .strand { font-size: 13px; margin-bottom: 14px; }
  .titlebar { margin-bottom: 18px; }
  .lead, .lead-plain { font-size: 19px; }
  .intro { padding: 40px 0 32px; }
  .prose h2 { margin-top: 48px; }
  .guide { font-size: 19px; }
  details.fold .q { font-size: 21px; }
  .slide > span:first-child { display: none; }
  .keepgoing, .goto, .prevnext { margin-top: 56px; }
  .foot { margin-top: 72px; }
  .teaser .stage { overflow: visible; margin-bottom: 4.2em; }
  .teaser .sub { top: 100%; bottom: auto; width: 100%; padding-top: .5em; font-size: 15px; color: var(--text); text-shadow: none; }
}
@media (max-width: 480px) {
  .narrate-label { display: none; }
  .ev { grid-template-columns: 1fr; } .ev-year { margin-bottom: 2px; }
  .prevnext { grid-template-columns: 1fr; } .pn-next, .pn-prev { grid-column: auto; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { details.fold > summary::after { transition: none; } }