/* ==========================================================================
   STEM to Skyline to City Hall — deck styles
   Visual language follows portfolio.jameshward3.com:
   ivory / ink / gold, Space Grotesk display, Fraunces italic accent,
   Inter text, tracked uppercase eyebrows with a gold rule.
   Units: in deck mode 1rem = stage width / 120 (16px on a 1920 canvas).
   ========================================================================== */

:root {
  --ivory: #f4f1ea;
  --paper: #ebe6db;
  --paper-2: #e2dccf;
  --ink: #14161c;
  --ink-2: #1c1f26;
  --ink-3: #2a2e37;
  --muted: #5e5a51;
  --stone: #8c877c;
  --gold: #a9884e;
  --gold-deep: #8a6e3c;
  --gold-soft: #cdb27c;
  --steel: #7d8fa0;
  --steel-deep: #4b5c6b;
  --rust: #a4533a;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 1.375rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
sup { font-size: .55em; line-height: 0; font-family: var(--f-mono); color: var(--accent, var(--gold-deep)); margin-left: .1em; }
.mono { font-family: var(--f-mono); font-weight: 400; letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--ivory); color: var(--ink); padding: .6rem 1rem; border-radius: 999px; font-size: 14px; }
.skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Stage / viewport ---------- */
#viewport { position: fixed; inset: 0; display: grid; place-items: center; background: var(--ink); }
#stage {
  position: relative;
  width: 120rem; height: 67.5rem;
  overflow: hidden;
  background: var(--ivory);
  isolation: isolate;
}

/* ---------- Theme tokens per slide ---------- */
.slide, [data-theme="light"] {
  --bg: var(--ivory); --fg: var(--ink); --fg-2: var(--muted);
  --line: rgba(20, 22, 28, .14); --accent: var(--gold-deep); --rule: var(--gold);
  --card: var(--paper);
}
[data-theme="dark"] {
  --bg: var(--ink); --fg: var(--ivory); --fg-2: rgba(244, 241, 234, .72);
  --line: rgba(244, 241, 234, .18); --accent: var(--gold-soft); --rule: var(--gold);
  --card: var(--ink-2);
}

/* ---------- Chrome ---------- */
.chrome { position: absolute; left: 0; right: 0; z-index: 30; color: var(--chrome-fg, var(--ink)); transition: color .6s var(--ease), opacity .5s var(--ease); }
#stage[data-chrome="dark"] .chrome-top, #stage[data-chrome-b="dark"] .chrome-bottom { --chrome-fg: var(--ivory); --chrome-line: rgba(244, 241, 234, .22); --chrome-pill: var(--ivory); --chrome-pill-fg: var(--ink); --chrome-glass: rgba(20,22,28,.35); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
#stage[data-chrome="light"] .chrome-top, #stage[data-chrome-b="light"] .chrome-bottom { --chrome-fg: var(--ink); --chrome-line: rgba(20, 22, 28, .16); --chrome-pill: var(--ink); --chrome-pill-fg: var(--ivory); --chrome-glass: rgba(244,241,234,.55); text-shadow: none; }
.chrome-top { top: 0; height: 6.5rem; padding: 0 4rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; pointer-events: none; }
.chrome-top > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; justify-self: start; }
.brand-mark { width: 2.6rem; height: 2.6rem; transition: transform .5s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-6deg); }
.brand-name { font-family: var(--f-sans); font-weight: 500; font-size: 1.15rem; line-height: 1.15; letter-spacing: -.01em; }
.deck-title { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.deck-title em { font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.2em; color: var(--chrome-accent, var(--gold)); font-weight: 400; }
.tools { justify-self: end; display: flex; align-items: center; gap: .55rem; }
.counter { font-family: var(--f-mono); font-size: 1rem; margin-right: .9rem; opacity: .85; }
.counter b { font-weight: 500; }
.counter span { opacity: .55; }
.tool {
  width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--chrome-line, rgba(20, 22, 28, .16));
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.tool svg { width: 1.25rem; height: 1.25rem; }
.tool:hover, .tool[aria-pressed="true"] { background: var(--chrome-pill, var(--ink)); color: var(--chrome-pill-fg, var(--ivory)); border-color: transparent; }

.chrome-bottom { bottom: 0; height: 5rem; padding: 0 4rem; display: flex; align-items: center; gap: 1.2rem; }
.nav-btn { width: 2.5rem; height: 2.5rem; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--chrome-line, rgba(20,22,28,.16)); transition: background .3s, color .3s; flex: none; }
.nav-btn svg { width: 1.2rem; height: 1.2rem; }
.nav-btn:hover { background: var(--chrome-pill, var(--ink)); color: var(--chrome-pill-fg, var(--ivory)); }
.nav-btn:disabled { opacity: .3; pointer-events: none; }
.progress { display: flex; gap: .3rem; flex: 0 0 34rem; height: 1.6rem; align-items: center; }
.progress li { flex: 1; height: 100%; }
.progress button { width: 100%; height: 100%; position: relative; }
.progress button::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--chrome-fg, var(--ink)); opacity: .2; transition: opacity .3s, height .3s, margin .3s; }
.progress button.done::before { opacity: .55; }
.progress button.current::before { background: var(--gold); opacity: 1; height: 4px; margin-top: -2px; }
.progress button:hover::before { opacity: .8; height: 4px; margin-top: -2px; }
.chapter-label { margin-left: auto; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; opacity: .7; max-width: 50rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

html.is-fullscreen #stage.idle .chrome { opacity: 0; }
html.is-fullscreen #stage.idle { cursor: none; }

/* ---------- Slides & transitions ---------- */
#slides { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0;
  background: var(--bg); color: var(--fg);
  visibility: hidden; opacity: 0; z-index: 1;
  overflow: hidden;
}
.slide.is-active { visibility: visible; opacity: 1; z-index: 3; animation: curtain-next 1.15s var(--ease) both; }
#stage[data-dir="prev"] .slide.is-active { animation-name: curtain-prev; }
.slide.is-leaving { visibility: visible; opacity: 1; z-index: 2; animation: recede 1.15s var(--ease) both; }
#stage.no-anim .slide.is-active { animation: none; }
@keyframes curtain-next { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes curtain-prev { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes recede { from { transform: none; filter: none; } to { transform: scale(.94) translateX(-3%); filter: brightness(.55) blur(2px); } }
#stage[data-dir="prev"] .slide.is-leaving { animation-name: recede-prev; }
@keyframes recede-prev { to { transform: scale(.94) translateX(3%); filter: brightness(.55) blur(2px); } }

/* entrance primitives */
.a { opacity: 0; }
.slide.is-active .a { animation: rise 1.05s var(--ease) both; animation-delay: calc(var(--d, 0) * 110ms + 380ms); }
@keyframes rise { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln > span { display: inline-block; transform: translateY(108%); }
.slide.is-active .ln > span { animation: line-up 1.1s var(--ease) both; }
.slide.is-active .ln:nth-child(1) > span { animation-delay: .45s; }
.slide.is-active .ln:nth-child(2) > span { animation-delay: .56s; }
.slide.is-active .ln:nth-child(3) > span { animation-delay: .67s; }
.slide.is-active .ln:nth-child(4) > span { animation-delay: .78s; }
@keyframes line-up { to { transform: none; } }

.photo { position: relative; overflow: hidden; background: var(--ink-3); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo img[data-src] { opacity: 0; }
.photo img { transition: opacity .8s var(--ease); }
.photo.is-missing::after {
  content: attr(data-missing); position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem;
  text-align: center; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone);
  background: repeating-linear-gradient(45deg, var(--ink-2) 0 10px, var(--ink-3) 10px 20px);
}
.kb img { transform: scale(1.1); }
.slide.is-active .kb img { animation: kenburns 9s var(--ease) both; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.pan img { object-position: 0% 50%; }
.slide.is-active .pan img { animation: pan 16s var(--ease-io) both; }
@keyframes pan { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }
.slide.is-active .reveal-down { animation: rv-down 1.3s var(--ease) .15s both; }
.slide.is-active .reveal-right { animation: rv-right 1.3s var(--ease) .15s both; }
@keyframes rv-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes rv-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* ---------- Typography ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 1.1rem;
  font-family: var(--f-sans); font-weight: 500; font-size: 1rem; line-height: 1.3;
  letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2);
  margin-bottom: 1.8rem;
}
.eyebrow::before { content: ''; width: 3.2rem; height: 1px; background: var(--rule); flex: none; }
.display {
  font-family: var(--f-display); font-weight: 500;
  font-size: 7rem; line-height: .97; letter-spacing: -.035em;
  color: var(--fg);
}
.display.md { font-size: 5.4rem; line-height: 1; letter-spacing: -.03em; }
.display em, .lede em, .prompt em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  color: var(--accent); letter-spacing: -.01em;
  font-variation-settings: 'opsz' 144;
}
.lede { font-size: 1.6rem; line-height: 1.45; color: var(--fg-2); max-width: 44rem; margin-top: 2rem; }
.lede em { font-size: 1.08em; }
.hint { margin-top: 1rem; font-size: 1.05rem; color: var(--fg-2); }
.credit { font-size: 1rem; letter-spacing: .02em; color: var(--fg-2); margin-top: .7rem; }
.credit.on-photo {
  position: absolute; left: 1.4rem; bottom: 1.2rem; right: 1.4rem; margin: 0;
  color: rgba(244, 241, 234, .92); text-shadow: 0 1px 8px rgba(0,0,0,.6); font-size: .95rem;
}
.source-note { font-size: .95rem; line-height: 1.45; color: var(--fg-2); }
.source-note.static { margin-top: 1.6rem; padding-top: .9rem; border-top: 1px solid var(--line); max-width: 46rem; }
.diagram-note { font-family: var(--f-mono); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); margin-top: .6rem; }
.aside { margin-top: 1.8rem; padding: 1.1rem 1.4rem; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--card) 80%, transparent); font-size: 1.15rem; color: var(--fg-2); max-width: 46rem; }
.aside b { color: var(--fg); font-weight: 600; }

/* ---------- Buttons ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .6rem; height: 3.2rem; padding: 0 1.5rem;
  border-radius: 999px; font-size: 1.05rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s, transform .3s var(--ease);
}
.pill svg { width: 1.1rem; height: 1.1rem; }
.pill.sm { height: 2.5rem; padding: 0 1.1rem; font-size: .95rem; }
.pill.solid { background: var(--fg); color: var(--bg); }
.pill.solid:hover { transform: translateY(-2px); }
.pill.ghost { border: 1px solid var(--line); color: var(--fg); }
.pill.ghost:hover, .pill[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: transparent; }
.replay { margin-top: 1.6rem; }
.s06-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
button.video-link { text-align: left; }
.play-dot { width: 4rem; height: 4rem; border-radius: 999px; background: var(--ivory); color: var(--ink); display: grid; place-items: center; flex: none; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.25); transition: transform .4s var(--ease); }
.play-dot svg { width: 1.5rem; height: 1.5rem; margin-left: .2rem; }
.play-dot.sm { width: 3rem; height: 3rem; }
.play-dot.sm svg { width: 1.1rem; height: 1.1rem; }

/* Generic content frame: slides leave room for chrome */
.slide { --pad-x: 6rem; --pad-top: 8.5rem; --pad-bot: 7rem; }

/* ==========================================================================
   01 — Hero
   ========================================================================== */
.s01-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 55%; }
.s01-text { position: absolute; left: 5rem; top: 0; bottom: 0; width: 48rem; display: flex; flex-direction: column; justify-content: center; padding-top: 3rem; }
.s01 .display { font-size: 6rem; }
.s01 .lede { font-size: 1.45rem; margin-top: 1.6rem; }
.s01 .source-note { margin-top: 1.2rem; font-size: .9rem; max-width: 42rem; }
.s01-photo .credit.on-photo, .s02-photo .credit.on-photo, .s07-photo .credit.on-photo, .s10-photo .credit.on-photo, .s12-seq .credit.on-photo { bottom: 6rem; }
.s01 .display em { display: inline-block; }
.byline { display: flex; align-items: center; gap: 1rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.byline-mark { width: 3rem; height: 3rem; color: var(--ink); }
.byline p { display: flex; flex-direction: column; font-size: 1.1rem; line-height: 1.3; }
.byline b { font-weight: 600; font-family: var(--f-display); font-size: 1.3rem; }
.byline span { color: var(--fg-2); }
.gauge { position: absolute; right: 3rem; top: 9rem; bottom: 9rem; width: 13rem; display: flex; flex-direction: column; align-items: flex-end; color: var(--ivory); text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.gauge-track { position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: rgba(244,241,234,.35); }
.gauge-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--gold-soft); }
.slide.is-active .gauge-fill { animation: fill-up 2.6s var(--ease) .6s both; }
@keyframes fill-up { from { height: 0; } to { height: 100%; } }
.gauge-read { margin-right: 1.4rem; font-family: var(--f-display); font-size: 4.6rem; line-height: 1; letter-spacing: -.03em; font-weight: 500; display: flex; align-items: baseline; gap: .3rem; }
.gauge-read .mono { font-family: var(--f-display); }
.gauge-read small { font-size: 1.4rem; letter-spacing: 0; }
.gauge-label { margin: .7rem 1.4rem 0 0; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; text-align: right; line-height: 1.4; }

/* ==========================================================================
   02 — Roles
   ========================================================================== */
.s02-photo { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; }
.s02-text { position: absolute; left: calc(38% + 5rem); right: var(--pad-x); top: var(--pad-top); bottom: var(--pad-bot); display: flex; flex-direction: column; }
.s02 .lede { margin-top: 1.4rem; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.4rem; flex: 1; align-content: start; }
.role-card {
  text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-content: start;
  padding: 1.5rem 1.6rem; min-height: 11.5rem; border-radius: 4px;
  background: var(--paper); color: var(--ink); border: 1px solid transparent;
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.role-card:hover { transform: translateY(-4px); }
.role-card[aria-expanded="true"] { background: var(--ink); color: var(--ivory); }
.role-num { grid-row: span 2; font-size: .95rem; opacity: .6; padding-top: .3rem; }
.role-tag { font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; }
.role-card[aria-expanded="true"] .role-tag { color: var(--gold-soft); }
.role-title { grid-column: 2; font-family: var(--f-display); font-weight: 500; font-size: 1.85rem; line-height: 1.1; letter-spacing: -.02em; margin-top: .3rem; }
.role-org { grid-column: 2; font-size: 1.05rem; opacity: .75; margin-top: .4rem; }
.role-more { grid-column: 2; font-size: 1.1rem; line-height: 1.45; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .5s var(--ease), margin .5s var(--ease); }
.role-card[aria-expanded="true"] .role-more { max-height: 8rem; opacity: .9; margin-top: .8rem; }

/* ==========================================================================
   03 — Path
   ========================================================================== */
.s03-ghost { position: absolute; left: 0; right: 0; bottom: 6.5rem; display: flex; gap: 4rem; white-space: nowrap; font-family: var(--f-display); font-weight: 500; font-size: 12rem; letter-spacing: -.05em; line-height: 1; color: var(--ink); opacity: .045; }
.slide.is-active .s03-ghost { animation: drift 22s linear both; }
@keyframes drift { from { transform: translateX(4%); } to { transform: translateX(-38%); } }
.s03-head { position: absolute; left: var(--pad-x); top: var(--pad-top); }
.s03-portrait { position: absolute; right: var(--pad-x); top: var(--pad-top); width: 17rem; height: 21rem; border-radius: 3px; }
.s03-portrait img { transition: opacity .8s; }
.s03-portrait .credit.on-photo { font-size: .85rem; left: 1rem; bottom: .8rem; }
.s03-route { position: absolute; left: var(--pad-x); right: var(--pad-x); top: 33rem; height: 26rem; }
.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-shadow { fill: none; stroke: var(--ink); stroke-opacity: .1; stroke-width: 2; stroke-dasharray: 4 8; vector-effect: non-scaling-stroke; }
.route-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.slide.is-active .route-line { animation: draw 3.6s var(--ease-io) .7s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.route-stops li { position: absolute; width: 15rem; transform: translate(-50%, 0); opacity: 0; display: flex; flex-direction: column; gap: .2rem; font-size: 1.05rem; color: var(--fg-2); }
.route-stops li::before { content: ''; position: absolute; left: 50%; width: 1.2rem; height: 1.2rem; margin-left: -.6rem; border-radius: 50%; background: var(--ivory); border: 3px solid var(--gold); }
.route-stops li[data-side="above"] { transform: translate(-50%, calc(-100% - 2rem)); }
.route-stops li[data-side="above"]::before { bottom: -2.6rem; }
.route-stops li[data-side="below"] { transform: translate(-50%, 2rem); }
.route-stops li[data-side="below"]::before { top: -2.6rem; }
.route-stops li b { font-family: var(--f-display); font-weight: 500; font-size: 1.7rem; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
.route-stops .stop-year { font-size: .9rem; color: var(--gold-deep); letter-spacing: .06em; text-transform: uppercase; }
.slide.is-active .route-stops li { animation: pop .8s var(--ease) both; animation-delay: var(--t, 1s); }
@keyframes pop { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
.route-stops li:first-child { align-items: flex-start; text-align: left; transform: translate(-1rem, 2rem); }
.route-stops li:first-child::before { left: 1rem; }
.route-stops li:last-child { align-items: flex-end; text-align: right; transform: translate(calc(-100% + 1rem), calc(-100% - 2rem)); }
.route-stops li:last-child::before { left: auto; right: .4rem; }

/* ==========================================================================
   04 — Architect
   ========================================================================== */
.s04-model { position: absolute; left: 0; top: 0; bottom: 0; width: 56%; display: flex; flex-direction: column; padding: 7.5rem 0 6rem var(--pad-x); }
.model-frame { flex: 1; border-radius: 3px; }
.model-frame img { transform: scale(1.22); transform-origin: 52% 52%; }
.model-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,28,0) 60%, rgba(20,22,28,.25)); pointer-events: none; }
.model-tags li {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  padding: .45rem .9rem; border-radius: 999px; background: var(--ink); color: var(--ivory);
  font-size: .95rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap; opacity: 0;
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.25);
}
.model-tags li::before { content: ''; position: absolute; left: -1.4rem; top: 50%; width: .7rem; height: .7rem; margin-top: -.35rem; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 0 .35rem rgba(205,178,124,.35); }
.slide.is-active .model-tags li { animation: tag-in .9s var(--ease) both; animation-delay: calc(var(--d) * 110ms + 600ms); }
@keyframes tag-in { from { opacity: 0; transform: translateX(-1rem); } to { opacity: 1; transform: none; } }
.s04-text { position: absolute; left: calc(56% + 5rem); right: var(--pad-x); top: var(--pad-top); bottom: var(--pad-bot); display: flex; flex-direction: column; }
.s04 .lede { font-size: 1.4rem; margin-top: 1.4rem; }
.skill-stack { margin-top: 2rem; border-top: 1px solid var(--line); }
.skill-stack li { display: grid; grid-template-columns: 3rem 15rem 1fr; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; color: var(--fg-2); }
.skill-stack .mono { color: var(--gold-deep); font-size: .9rem; }
.skill-stack b { font-family: var(--f-display); font-weight: 500; font-size: 1.45rem; color: var(--fg); letter-spacing: -.01em; }

/* ==========================================================================
   05 — Hudson Yards map
   ========================================================================== */
.s05-pano { position: absolute; left: 0; right: 0; top: 0; height: 24rem; }
.s05-pano::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,28,.45), rgba(20,22,28,0) 40%); z-index: 1; pointer-events: none; }
.s05-text { position: absolute; left: var(--pad-x); top: 28rem; width: 40rem; }
.s05 .lede { font-size: 1.45rem; margin-top: 1.4rem; }
.s05-map { position: absolute; right: var(--pad-x); top: 27rem; width: 64rem; bottom: 5.6rem; display: flex; flex-direction: column; }
.compare { position: relative; flex: 1; background: var(--paper); border-radius: 3px; overflow: hidden; --pos: 50%; }
.compare .map { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare .map-after { clip-path: inset(0 0 0 var(--pos)); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 3; pointer-events: none; }
.compare-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--ink); }
.compare-handle span { position: absolute; top: 50%; left: 0; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 .4rem rgba(244,241,234,.8); }
.compare-handle span::before, .compare-handle span::after { content: ''; position: absolute; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-top: 2px solid var(--ivory); border-left: 2px solid var(--ivory); }
.compare-handle span::before { left: .7rem; transform: rotate(-45deg); }
.compare-handle span::after { right: .7rem; transform: rotate(135deg); }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; margin: 0; }
.compare-range:focus-visible + .compare-tag, .compare:focus-within .compare-handle span { box-shadow: 0 0 0 .4rem var(--gold-soft); }
.compare-tag { position: absolute; top: 1rem; z-index: 2; padding: .35rem .8rem; border-radius: 999px; font-size: .9rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; background: rgba(244,241,234,.92); }
.compare-tag.left { left: 1rem; }
.compare-tag.right { right: 1rem; background: var(--ink); color: var(--ivory); }
.map text { font-family: var(--f-sans); }

/* ==========================================================================
   06 — Rail yard diagram
   ========================================================================== */
.s06-bg { position: absolute; inset: 0; background: var(--ink); }
.s06-bg img { opacity: .16; filter: grayscale(1) contrast(1.1); object-position: 50% 70%; }
.s06-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 30%, rgba(20,22,28,.55)); }
.s06-text { position: absolute; left: var(--pad-x); top: var(--pad-top); width: 38rem; bottom: var(--pad-bot); display: flex; flex-direction: column; }
.s06 .lede { font-size: 1.4rem; margin-top: 1.4rem; }
.step-list { margin-top: 2rem; }
.step-list li { display: flex; align-items: center; gap: 1rem; padding: .55rem 0; font-size: 1.2rem; color: var(--fg-2); opacity: .35; transition: opacity .4s; }
.step-list .mono { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: .85rem; flex: none; }
.slide.is-active .step-list li { animation: step-on .6s var(--ease) both; animation-delay: var(--t); }
@keyframes step-on { from { opacity: .35; } to { opacity: 1; color: var(--fg); } }
.slide.is-active .step-list li .mono { animation: step-dot .6s var(--ease) both; animation-delay: var(--t); }
@keyframes step-dot { to { background: var(--gold); border-color: var(--gold); color: var(--ink); } }
.s06-diagram { position: absolute; left: 46rem; right: 3rem; top: 7rem; bottom: 5.5rem; display: flex; flex-direction: column; }
.yard-svg { flex: 1; width: 100%; overflow: visible; }
.s06-diagram .diagram-note { text-align: right; padding-right: 3rem; }
.s06-credit { position: absolute; right: var(--pad-x); top: 6rem; font-size: .85rem; opacity: .7; display: none; }

/* SVG diagram shared vocabulary (dark) */
.yard-svg .bed { fill: rgba(244,241,234,.04); stroke: rgba(244,241,234,.18); stroke-width: 1; }
.yard-svg .rail { fill: none; stroke: var(--steel); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.slide.is-active .yard-svg .rail { animation: draw 1.4s var(--ease-io) both; animation-delay: calc(var(--i) * 50ms + .3s); }
.yard-svg .train { fill: var(--ivory); opacity: 0; }
.yard-svg .train-top { fill: #cfc9bc; }
.slide.is-active .yard-svg .train-g { animation: train-x var(--dur, 7s) linear infinite; animation-delay: var(--delay, 1.2s); }
@keyframes train-x { 0% { transform: translateX(-380px); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(1250px); opacity: 0; } }
.slide.is-active .yard-svg .train-g .train { opacity: 1; }
.yard-svg .marker { fill: none; stroke: var(--gold-soft); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.slide.is-active .yard-svg .marker { animation: marker-in .7s var(--ease) both; animation-delay: calc(var(--i) * 40ms + 2.0s); }
@keyframes marker-in { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: none; } }
.yard-svg .col { fill: var(--gold-soft); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.slide.is-active .yard-svg .col { animation: grow-y 1s var(--ease) both; animation-delay: calc(var(--i) * 30ms + 3.4s); }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.yard-svg .platform { opacity: 0; }
.yard-svg .platform .top { fill: rgba(244,241,234,.92); }
.yard-svg .platform .edge { fill: #bdb6a6; }
.yard-svg .platform .edge2 { fill: #a49d8e; }
.yard-svg .platform .street { stroke: rgba(20,22,28,.18); stroke-width: 1; fill: none; }
.slide.is-active .yard-svg .platform { animation: settle 1.2s var(--ease) 4.6s both; }
@keyframes settle { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: none; } }
.yard-svg .tower { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.yard-svg .tower .f-top { fill: #e8e3d8; }
.yard-svg .tower .f-front { fill: #2f3440; }
.yard-svg .tower .f-side { fill: #232731; }
.yard-svg .tower .floors { stroke: rgba(244,241,234,.12); stroke-width: 1; }
.slide.is-active .yard-svg .tower { animation: grow-y 1.4s var(--ease) both; animation-delay: calc(var(--i) * 160ms + 5.8s); }
.yard-svg .lbl { font-family: var(--f-mono); font-size: 15px; letter-spacing: .08em; fill: var(--ivory); opacity: 0; text-transform: uppercase; }
.yard-svg .lbl-line { stroke: rgba(244,241,234,.5); stroke-width: 1; opacity: 0; }
.slide.is-active .yard-svg .lbl, .slide.is-active .yard-svg .lbl-line { animation: fade-in .8s var(--ease) both; animation-delay: var(--t); }
@keyframes fade-in { to { opacity: 1; } }
.yard-svg .lbl.gold { fill: var(--gold-soft); }

/* ==========================================================================
   07 — Penn Station
   ========================================================================== */
.s07-photo { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; background: #0e0f12; }
.s07-photo img { object-fit: cover; object-position: 50% 45%; filter: grayscale(1) contrast(1.05); transition: opacity 1.4s var(--ease), filter 1.4s var(--ease), transform 1.4s var(--ease); }
.s07-photo[data-state="now"] img { opacity: .13 !important; filter: grayscale(1) blur(3px); transform: scale(1.04); }
.s07-now { position: absolute; left: 4rem; right: 4rem; top: 50%; transform: translateY(-40%); color: var(--ivory); opacity: 0; transition: opacity 1.2s var(--ease) .2s, transform 1.2s var(--ease) .2s; }
.s07-photo[data-state="now"] .s07-now { opacity: 1; transform: translateY(-50%); }
.s07-now .mono { font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.s07-now-big { font-family: var(--f-serif); font-style: italic; font-size: 11rem; line-height: 1; letter-spacing: -.03em; margin: .4rem 0 1.2rem; }
.s07-now p:last-child { font-size: 1.7rem; max-width: 36rem; line-height: 1.35; }
.then-now { position: absolute; right: 1.4rem; top: 7rem; display: flex; gap: .5rem; z-index: 3; }
.then-now .pill { background: rgba(20,22,28,.6); color: var(--ivory); border: 1px solid rgba(244,241,234,.3); backdrop-filter: blur(6px); }
.then-now .pill[aria-pressed="true"] { background: var(--ivory); color: var(--ink); }
.s07-photo .credit.on-photo { font-size: .9rem; right: 30%; }
.s07-text { position: absolute; left: calc(60% + 4.5rem); right: var(--pad-x); top: var(--pad-top); bottom: var(--pad-bot); display: flex; flex-direction: column; }
.s07 .display.md { font-size: 5rem; }
.mini-timeline { margin-top: 2.2rem; border-left: 1px solid var(--line); }
.mini-timeline li { position: relative; padding: 0 0 1.4rem 1.8rem; }
.mini-timeline li::before { content: ''; position: absolute; left: -.4rem; top: .6rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--gold); }
.mini-timeline .mono { font-family: var(--f-display); font-weight: 500; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--accent); }
.mini-timeline p { font-size: 1.25rem; color: var(--fg-2); margin-top: .4rem; }
.s07 .aside { margin-top: auto; font-size: 1.1rem; }

/* ==========================================================================
   08 — Generations
   ========================================================================== */
.s08-pano { position: absolute; left: 0; right: 0; top: 0; height: 30rem; }
.s08-pano img { object-position: 50% 60%; }
.s08-pano::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,28,.4), rgba(20,22,28,0) 35%); z-index: 1; pointer-events: none; }
.s08-head { position: absolute; left: var(--pad-x); right: var(--pad-x); top: 33rem; display: flex; justify-content: space-between; align-items: flex-end; }
.s08-head .eyebrow { margin-bottom: 1.2rem; }
.s08-count { display: flex; align-items: center; gap: 1.2rem; }
.s08-count .mono { font-family: var(--f-display); font-weight: 500; font-size: 7rem; line-height: .85; letter-spacing: -.04em; color: var(--accent); }
.s08-count small { font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); line-height: 1.35; }
.gen-line { position: absolute; left: var(--pad-x); right: var(--pad-x); top: 45rem; }
.gen-track { height: 2px; background: var(--line); position: relative; }
.gen-fill { position: absolute; left: 0; top: -1px; height: 4px; width: 0; background: var(--gold); }
.slide.is-active .gen-fill { animation: fill-x 3.2s var(--ease-io) .5s both; }
@keyframes fill-x { to { width: 100%; } }
.gen-line ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; margin-top: -0.55rem; }
.gen-line li { position: relative; padding-top: 2rem; opacity: 0; }
.gen-line li::before { content: ''; position: absolute; left: 0; top: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ivory); border: 3px solid var(--gold); }
.gen-line li:last-child::before { background: var(--gold); }
.slide.is-active .gen-line li { animation: rise .9s var(--ease) both; animation-delay: var(--t); }
.gen-line .mono { font-size: .95rem; color: var(--gold-deep); letter-spacing: .08em; text-transform: uppercase; }
.gen-line b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 2rem; letter-spacing: -.02em; margin: .3rem 0 .4rem; }
.gen-line p { font-size: 1.15rem; color: var(--fg-2); line-height: 1.4; }
.s08-src { position: absolute; left: var(--pad-x); bottom: 5.4rem; border: 0 !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }

/* ==========================================================================
   09 — Platform section
   ========================================================================== */
.s09-main { position: absolute; left: var(--pad-x); top: var(--pad-top); bottom: 5.4rem; width: 74rem; display: flex; flex-direction: column; }
.s09-diagram { position: relative; flex: 1; margin-top: 1.6rem; display: flex; flex-direction: column; }
.section-svg { width: 100%; flex: 1; min-height: 0; }
.s09-diagram .diagram-note { margin-top: .3rem; }
.hotspots { position: absolute; inset: 0 0 1.6rem 0; pointer-events: none; }
.hotspot { position: absolute; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; pointer-events: auto; display: grid; place-items: center; background: var(--ink); color: var(--ivory); font-family: var(--f-mono); font-size: 1.05rem; box-shadow: 0 0 0 .35rem rgba(169,136,78,.35); transition: transform .3s var(--ease), background .3s; }
.hotspot::after { content: ''; position: absolute; inset: -.35rem; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; }
.slide.is-active .hotspot::after { animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
.hotspot:hover, .hotspot[aria-pressed="true"] { background: var(--gold); color: var(--ink); transform: scale(1.12); }
.s09-side { position: absolute; right: var(--pad-x); top: var(--pad-top); bottom: 5.4rem; width: 30rem; display: flex; flex-direction: column; gap: 1.4rem; }
.callout { background: var(--ink); color: var(--ivory); padding: 1.8rem 2rem; border-radius: 3px; min-height: 14.5rem; }
.callout-num { font-size: .9rem; color: var(--gold-soft); letter-spacing: .1em; }
.callout h3 { font-family: var(--f-display); font-weight: 500; font-size: 2.2rem; letter-spacing: -.02em; margin: .4rem 0 .6rem; }
.callout p:last-child { font-size: 1.15rem; line-height: 1.45; color: rgba(244,241,234,.8); }
.s09-photo { height: 13rem; flex: none; border-radius: 3px; }
.s09-photo .credit { position: absolute; left: 1rem; bottom: .8rem; margin: 0; color: var(--ivory); text-shadow: 0 1px 6px rgba(0,0,0,.7); font-size: .9rem; }
.video-card { display: flex; align-items: center; gap: 1.2rem; text-align: left; padding: 1rem 1.2rem; border-radius: 999px; border: 1px solid var(--line); transition: background .3s var(--ease), color .3s; }
.video-card .play-dot { width: 3.4rem; height: 3.4rem; background: var(--ink); color: var(--ivory); box-shadow: none; }
.video-card b { display: block; font-weight: 600; font-size: 1.15rem; }
.video-card small { font-size: .95rem; color: var(--fg-2); }
.video-card:hover { background: var(--ink); color: var(--ivory); }
.video-card:hover small { color: rgba(244,241,234,.75); }
.video-card:hover .play-dot { background: var(--gold-soft); color: var(--ink); transform: scale(1.06); }
.s09-side .source-note.static { margin-top: auto; }

/* section diagram */
.section-svg .sky { fill: transparent; }
.section-svg .bedrock { fill: #d9d2c3; }
.section-svg .bedrock-hatch { fill: url(#hatch); color: var(--muted); }
.section-svg .soil { fill: #e7e1d4; }
.section-svg .ground { stroke: var(--ink); stroke-width: 2; }
.section-svg .rail { stroke: var(--steel-deep); stroke-width: 3; }
.section-svg .sleeper { stroke: var(--steel-deep); stroke-width: 2; opacity: .5; }
.section-svg .train rect { fill: var(--steel-deep); }
.section-svg .train .win { fill: rgba(244,241,234,.7); }
.section-svg .train.back rect { fill: #9aa7b3; }
.section-svg .train.back .win { fill: rgba(244,241,234,.5); }
.slide.is-active .section-svg .train.front { animation: run-r 8s linear infinite .8s; }
.slide.is-active .section-svg .train.back { animation: run-l 11s linear infinite 2.2s; }
.section-svg .train { transform: translateX(-1800px); }
@keyframes run-r { from { transform: translateX(-1100px); } to { transform: translateX(1700px); } }
@keyframes run-l { from { transform: translateX(1700px); } to { transform: translateX(-1100px); } }
.section-svg .caisson { fill: rgba(20,22,28,.08); stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 5; }
.section-svg .column { fill: var(--ink); }
.section-svg .truss { stroke: var(--gold-deep); stroke-width: 4; fill: none; stroke-linejoin: round; }
.section-svg .truss-chord { stroke: var(--gold-deep); stroke-width: 9; }
.section-svg .deck { fill: var(--ink); }
.section-svg .plaza { fill: #9aa47f; opacity: .55; }
.section-svg .tower { fill: #2b2f38; }
.section-svg .tower-floor { stroke: rgba(244,241,234,.14); stroke-width: 1.5; }
.section-svg .tower-glass { fill: rgba(125,143,160,.35); }
.section-svg .tag { font-family: var(--f-mono); font-size: 18px; letter-spacing: .08em; fill: var(--muted); text-transform: uppercase; }
.section-svg .part { transition: opacity .5s var(--ease), filter .5s; }
.section-svg.focus .part { opacity: .28; }
.section-svg.focus .part.on { opacity: 1; }
.section-svg .grp-anim { opacity: 0; }
.slide.is-active .section-svg .grp-anim { animation: rise-svg 1s var(--ease) both; animation-delay: var(--t); }
@keyframes rise-svg { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   10 — Versus
   ========================================================================== */
.s10-photo { position: absolute; left: 0; top: 0; bottom: 0; width: 27rem; }
.s10-main { position: absolute; left: 33rem; right: var(--pad-x); top: var(--pad-top); bottom: 5.4rem; display: flex; flex-direction: column; }
.s10 .display.md { font-size: 4.9rem; }
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.2rem; }
.vs-card { background: var(--paper); border-radius: 3px; padding: 1.6rem 1.8rem 1.4rem; display: flex; flex-direction: column; }
.vs-card header .mono { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.vs-card h3 { font-family: var(--f-display); font-weight: 500; font-size: 2.3rem; letter-spacing: -.02em; line-height: 1.05; margin-top: .3rem; }
.vs-dev { font-size: 1.05rem; color: var(--fg-2); margin-top: .2rem; }
.vs-svg { width: 100%; height: 13rem; margin: 1rem 0 .8rem; }
.vs-card dl > div { display: grid; grid-template-columns: 5rem 1fr; padding: .5rem 0; border-top: 1px solid var(--line); font-size: 1.1rem; }
.vs-card dt { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); padding-top: .2rem; }
.vs-card dd { color: var(--fg); }
.s10 .aside { margin-top: 1.4rem; max-width: none; }
.s10 .source-note.static { margin-top: auto; max-width: none; }

.vs-svg .bedrock { fill: #d9d2c3; }
.vs-svg .ground { stroke: var(--ink); stroke-width: 2; }
.vs-svg .train { fill: var(--steel-deep); }
.slide.is-active .vs-svg .train { animation: run-small 6s linear infinite 1.2s; }
.vs-svg .train { transform: translateX(-700px); }
@keyframes run-small { from { transform: translateX(-260px); } to { transform: translateX(700px); } }
.vs-svg .caisson { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0; }
.vs-svg .column { fill: var(--ink); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.vs-svg .truss { stroke: var(--gold-deep); stroke-width: 3; fill: none; opacity: 0; }
.vs-svg .deck { fill: var(--ink); opacity: 0; }
.vs-svg .pier { fill: #6b6a64; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.vs-svg .seg { fill: var(--gold-deep); stroke: var(--paper); stroke-width: 1.5; opacity: 0; }
.slide.is-active .vs-svg .caisson { animation: fade-in .6s both .9s; }
.slide.is-active .vs-svg .column { animation: grow-y .9s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 1.2s); }
.slide.is-active .vs-svg .truss { animation: drop .9s var(--ease) both; animation-delay: calc(var(--i) * 140ms + 2.1s); }
.slide.is-active .vs-svg .deck { animation: drop .9s var(--ease) both 3s; }
.slide.is-active .vs-svg .pier { animation: grow-y .8s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 1.2s); }
.slide.is-active .vs-svg .seg { animation: slide-seg .7s var(--ease) both; animation-delay: calc(var(--i) * 110ms + 1.9s); }
@keyframes drop { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes slide-seg { from { opacity: 0; transform: translate(-30px, -18px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   11 — Launching
   ========================================================================== */
.s11-diagram { position: absolute; left: 3rem; right: 3rem; top: 7rem; height: 33rem; display: flex; flex-direction: column; }
.launch-svg { width: 100%; flex: 1; overflow: hidden; }
.s11-diagram { overflow: hidden; }
.s11-diagram .diagram-note { padding-left: 3rem; }
.s11-text { position: absolute; left: var(--pad-x); right: var(--pad-x); top: 41.5rem; bottom: 5.4rem; display: grid; grid-template-columns: 40rem 1fr 30rem; gap: 3.5rem; align-items: start; }
.s11 .display.md { font-size: 4.4rem; }
.s11 .lede { margin-top: 0; font-size: 1.35rem; }
.s11 .lede em { color: var(--gold-soft); }
.s11-steps { display: flex; gap: 1.6rem; margin-top: 1.4rem; font-size: 1.05rem; color: var(--fg-2); }
.s11-steps li { display: flex; gap: .5rem; align-items: baseline; }
.s11-steps .mono { color: var(--gold-soft); font-size: .85rem; }
.s11 .replay { margin-top: 1.2rem; height: 2.6rem; font-size: .95rem; }
.yt { display: flex; flex-direction: column; gap: .8rem; }
.yt-load { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 3px; overflow: hidden; background: var(--ink-3); display: grid; place-items: center; }
.yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .4s, transform .8s var(--ease); }
.yt-load:hover .yt-thumb { opacity: .9; transform: scale(1.03); }
.yt-load .play-dot { position: relative; }
.yt-fallback { position: absolute; left: 1rem; top: 1rem; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,241,234,.8); }
.yt iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 3px; }
.yt-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.05rem; }
.yt-meta a { display: inline-flex; gap: .4rem; align-items: center; color: var(--gold-soft); text-decoration: none; font-size: .95rem; white-space: nowrap; }
.yt-meta a svg { width: 1rem; height: 1rem; }
.s11-src { position: absolute; left: 0; bottom: 0; border: 0 !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }

.launch-svg .bedrock { fill: #24272f; }
.launch-svg .ground { stroke: rgba(244,241,234,.5); stroke-width: 2; }
.launch-svg .rail { stroke: var(--steel); stroke-width: 2; }
.launch-svg .train rect { fill: var(--steel); }
.launch-svg .train .win { fill: rgba(20,22,28,.5); }
.slide.is-active .launch-svg .train { animation: run-r 9s linear infinite .5s; }
.launch-svg .train { transform: translateX(-1800px); }
.launch-svg .train.t2 { animation-delay: 5s !important; }
.launch-svg .pier { fill: #6f6c63; }
.launch-svg .seg { fill: #cfc8b8; stroke: var(--ink); stroke-width: 1.5; }
.launch-svg .seg.new { fill: var(--gold-soft); opacity: 0; }
.slide.is-active .launch-svg .seg.new { animation: lower 1s var(--ease) both; animation-delay: calc(var(--i) * 420ms + 2.2s); }
@keyframes lower { 0% { opacity: 0; transform: translateY(-120px); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.launch-svg .gantry { transform: translateX(-380px); }
.slide.is-active .launch-svg .gantry { animation: gantry 2s var(--ease-io) both .6s; }
@keyframes gantry { from { transform: translateX(-380px); } to { transform: translateX(0); } }
.launch-svg .gantry path, .launch-svg .gantry line { stroke: var(--ivory); stroke-width: 3; fill: none; }
.launch-svg .gantry .leg { stroke-width: 5; }
.launch-svg .hoist { stroke: var(--gold-soft); stroke-width: 2; stroke-dasharray: 4 4; }
.launch-svg .lbl { font-family: var(--f-mono); font-size: 17px; letter-spacing: .08em; fill: rgba(244,241,234,.8); text-transform: uppercase; }
.launch-svg .lbl.gold { fill: var(--gold-soft); }
.launch-svg .dim { stroke: rgba(244,241,234,.45); stroke-width: 1; }

/* ==========================================================================
   12 — Tower A
   ========================================================================== */
.s12-seq { position: absolute; left: 0; top: 0; bottom: 0; width: 54%; background: var(--ink); }
.seq-item { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.seq-item img { transform: scale(1.08); transition: transform 7s linear, opacity .8s; }
.seq-item.is-on { opacity: 1; }
.slide.is-active .seq-item.is-on img { transform: scale(1); }
.s12-text { position: absolute; left: calc(54% + 4.5rem); right: var(--pad-x); top: var(--pad-top); bottom: 5.4rem; display: flex; flex-direction: column; }
.s12 .lede { font-size: 1.4rem; margin-top: 1.4rem; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.facts dt { font-family: var(--f-display); font-weight: 500; font-size: 4.2rem; line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.facts dt small { font-size: 1.4rem; margin-left: .2rem; }
.facts dd { font-size: 1.1rem; color: var(--fg-2); margin-top: .5rem; }
.filmstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 2rem; }
.filmstrip button { aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; position: relative; opacity: .5; transition: opacity .3s; }
.filmstrip button img { width: 100%; height: 100%; object-fit: cover; }
.filmstrip button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold-soft); transform: scaleX(0); transform-origin: left; }
.filmstrip button[aria-pressed="true"] { opacity: 1; }
.filmstrip button[aria-pressed="true"]::after { animation: tick 4.5s linear both; }
@keyframes tick { to { transform: scaleX(1); } }
.filmstrip button:hover { opacity: .9; }
.video-link { display: flex; align-items: center; gap: 1rem; margin-top: 1.8rem; text-decoration: none; padding: .8rem 1.2rem .8rem .8rem; border: 1px solid var(--line); border-radius: 999px; align-self: flex-start; transition: background .3s, color .3s; }
.video-link b { display: block; font-size: 1.1rem; font-weight: 600; }
.video-link small { font-size: .95rem; color: var(--fg-2); }
.video-link:hover { background: var(--ivory); color: var(--ink); }
.video-link:hover small { color: var(--muted); }
.s12 .source-note.static { margin-top: auto; }

/* ==========================================================================
   13 — Built twice
   ========================================================================== */
.s13-head { position: absolute; left: var(--pad-x); right: var(--pad-x); top: var(--pad-top); display: grid; grid-template-columns: 1fr 34rem; align-items: end; column-gap: 4rem; }
.s13-head .eyebrow { grid-column: 1 / -1; }
.s13 .lede { margin: 0; font-size: 1.35rem; }
.twin { position: absolute; left: var(--pad-x); right: var(--pad-x); top: 23.5rem; height: 25rem; display: grid; grid-template-columns: 1fr 5rem 1fr; }
.twin figure { border-radius: 3px; }
.slide.is-active .twin-a { animation: rv-right 1.3s var(--ease) .5s both; }
.slide.is-active .twin-b { animation: rv-left 1.3s var(--ease) .8s both; }
@keyframes rv-left { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.twin-b img { object-position: 50% 50%; transform-origin: 50% 55%; }
.slide.is-active .twin-b.kb img { animation-name: kenburns-model; }
@keyframes kenburns-model { from { transform: scale(1.38); } to { transform: scale(1.22); } }
.twin figcaption { position: absolute; left: 1.2rem; bottom: 1.1rem; background: var(--ivory); color: var(--ink); padding: .5rem 1rem; border-radius: 999px; font-size: 1rem; font-weight: 500; display: flex; gap: .7rem; align-items: center; }
.twin figcaption .mono { color: var(--gold-deep); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.twin-divider { display: grid; place-items: center; position: relative; }
.twin-divider::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line); }
.twin-divider span { position: relative; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.8rem; }
.bim-cards { position: absolute; left: var(--pad-x); right: var(--pad-x); top: 50.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.bim-cards li { display: grid; grid-template-columns: 7rem 1fr; column-gap: 1.2rem; align-items: start; }
.bim-cards .mini { grid-row: span 2; width: 7rem; height: auto; background: var(--paper); border-radius: 3px; }
.bim-cards b { font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.1; }
.bim-cards span { font-size: 1.02rem; color: var(--fg-2); line-height: 1.35; margin-top: .25rem; }
.mini-layers path { fill: rgba(169,136,78,.18); stroke: var(--gold-deep); stroke-width: 1.5; }
.slide.is-active .mini-layers path { animation: layer-drop 2.6s var(--ease) infinite; }
.mini-layers path:nth-child(2) { animation-delay: .25s !important; }
.mini-layers path:nth-child(3) { animation-delay: .5s !important; }
@keyframes layer-drop { 0%, 15% { transform: translateY(-8px); opacity: .2; } 45%, 100% { transform: none; opacity: 1; } }
.mini-clash .beam { fill: var(--ink); }
.mini-clash .duct { stroke: var(--steel-deep); stroke-width: 5; fill: none; }
.mini-clash .hit { fill: none; stroke: var(--rust); stroke-width: 2.5; opacity: 0; }
.slide.is-active .mini-clash .duct { animation: reroute 3.2s var(--ease-io) infinite 1s; }
.slide.is-active .mini-clash .hit { animation: hit 3.2s var(--ease-io) infinite 1s; }
@keyframes reroute { 0%, 40% { d: path('M10 46 H150'); } 70%, 100% { d: path('M10 46 H52 V24 H108 V46 H150'); } }
@keyframes hit { 0% { opacity: 0; } 15%, 40% { opacity: 1; } 55%, 100% { opacity: 0; } }
.mini-crane .bldg { fill: var(--ink); }
.mini-crane .reach { fill: rgba(169,136,78,.12); stroke: var(--gold-deep); stroke-dasharray: 3 3; }
.mini-crane .jib { stroke: var(--gold-deep); stroke-width: 2.5; transform-origin: 80px 50px; }
.mini-crane .truck { fill: var(--steel-deep); }
.slide.is-active .mini-crane .jib { animation: spin 6s linear infinite; }
.slide.is-active .mini-crane .truck { animation: truck 6s var(--ease-io) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes truck { 0% { transform: translateX(-40px); } 40%, 70% { transform: translateX(20px); } 100% { transform: translateX(150px); } }
.mini-4d .bars rect { fill: var(--gold-deep); opacity: .25; }
.mini-4d .now { stroke: var(--ink); stroke-width: 2; }
.slide.is-active .mini-4d .now { animation: scrub 4s linear infinite; }
@keyframes scrub { from { transform: translateX(0); } to { transform: translateX(136px); } }
.slide.is-active .mini-4d .bars rect { animation: bar-on 4s linear infinite; }
.mini-4d .bars rect:nth-child(2) { animation-delay: .9s !important; }
.mini-4d .bars rect:nth-child(3) { animation-delay: 1.8s !important; }
.mini-4d .bars rect:nth-child(4) { animation-delay: 2.6s !important; }
@keyframes bar-on { 0%, 10% { opacity: .25; } 25%, 90% { opacity: 1; } 100% { opacity: .25; } }

/* ==========================================================================
   14 — Edge
   ========================================================================== */
.s14-pano { position: absolute; left: 0; right: 0; top: 0; height: 21rem; }
.s14-pano::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,28,.5), rgba(20,22,28,0) 40%, rgba(20,22,28,.6)); z-index: 1; pointer-events: none; }
.s14-text { position: absolute; left: var(--pad-x); top: 24.5rem; width: 54rem; bottom: 5.4rem; display: flex; flex-direction: column; }
.s14 .display.md { font-size: 4.6rem; }
.s14 .lede { margin-top: 1.2rem; font-size: 1.35rem; }
.stat-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.8rem; }
.stat { text-align: left; padding: 1.1rem 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 3px; display: flex; flex-direction: column; gap: .5rem; transition: background .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease); }
.stat b { font-family: var(--f-display); font-weight: 500; font-size: 2.6rem; line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.stat b small { font-size: 1rem; margin-left: .2rem; letter-spacing: 0; }
.stat span { font-size: 1rem; color: var(--fg-2); line-height: 1.35; }
.stat:hover { transform: translateY(-3px); border-color: var(--gold); }
.stat[aria-pressed="true"] { background: var(--ivory); border-color: var(--ivory); }
.stat[aria-pressed="true"] b { color: var(--gold-deep); }
.stat[aria-pressed="true"] span { color: var(--muted); }
.s14 .source-note.static { margin-top: auto; max-width: none; }
.s14-diagram { position: absolute; right: 3rem; top: 22rem; width: 56rem; bottom: 5.4rem; display: flex; flex-direction: column; }
.edge-svg { flex: 1; width: 100%; min-height: 0; overflow: visible; }
.edge-readout { font-size: 1.15rem; color: var(--fg); padding-left: 2rem; min-height: 1.6em; }
.s14-diagram .diagram-note { padding-left: 2rem; }
.edge-svg .tower-face { fill: #2b2f38; }
.edge-svg .tower-side { fill: #20232b; }
.edge-svg .tower-top { fill: #3a3f4a; }
.edge-svg .tower-line { stroke: rgba(244,241,234,.1); stroke-width: 1; }
.edge-svg .piece { transition: transform 1s var(--ease), opacity .5s; }
.edge-svg .piece .top { fill: #d7d0c0; stroke: var(--ink); stroke-width: 1.2; }
.edge-svg .piece .side { fill: #8f897b; stroke: var(--ink); stroke-width: 1; }
.edge-svg .piece.glass .top { fill: #a9bccb; }
.edge-svg.show-glass .piece.glass .top { fill: #c7e1f2; filter: drop-shadow(0 0 10px rgba(199,225,242,.8)); }
.edge-svg .piece { opacity: 0; }
.slide.is-active .edge-svg .piece { animation: piece-in .8s var(--ease) both; animation-delay: calc(var(--i) * 90ms + .9s); }
@keyframes piece-in { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: none; } }
.edge-svg .lift { transition: transform 1s var(--ease); }
.edge-svg.exploded .lift { transform: translateY(calc(var(--lift) * -1px)); }
.edge-svg .bolt { fill: var(--gold-soft); opacity: 0; transition: opacity .4s; }
.edge-svg.show-bolts .bolt { opacity: 1; }
.edge-svg .dim-line { stroke: var(--gold-soft); stroke-width: 2; opacity: .35; transition: opacity .4s; }
.edge-svg .dim-txt { font-family: var(--f-display); font-size: 30px; font-weight: 500; fill: var(--gold-soft); opacity: .35; transition: opacity .4s; }
.edge-svg.show-cant .dim-line, .edge-svg.show-cant .dim-txt { opacity: 1; }
.edge-svg .num { font-family: var(--f-mono); font-size: 13px; fill: var(--ink); opacity: 0; transition: opacity .4s; text-anchor: middle; }
.edge-svg.exploded .num { opacity: 1; }
.edge-svg .lbl { font-family: var(--f-mono); font-size: 15px; letter-spacing: .08em; fill: rgba(244,241,234,.7); text-transform: uppercase; }

/* ==========================================================================
   15 — The view
   ========================================================================== */
.s15-stage { position: absolute; inset: 0; background: #000; }
.s15-photo { position: absolute; inset: 0; transition: opacity 1.1s var(--ease), transform 1.4s var(--ease); }
.s15-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s var(--ease); background: #000; }
.s15-stage[data-state="video"] .s15-photo { opacity: 0; transform: scale(1.08); }
.s15-stage[data-state="video"] .s15-video { opacity: 1; object-fit: contain; }
.s15-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20,22,28,.88) 0%, rgba(20,22,28,.55) 38%, rgba(20,22,28,0) 62%); transition: opacity .8s; }
.s15-stage[data-state="video"]::after { opacity: 0; }
.s15-text { position: absolute; left: var(--pad-x); bottom: 7rem; width: 54rem; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.s15 .display { font-size: 8rem; }
.s15 .lede { font-size: 1.5rem; color: rgba(244,241,234,.85); }
.s15-actions { display: flex; gap: .8rem; margin-top: 2rem; }
.s15 .credit { margin-top: 1rem; font-size: .9rem; }
.s15-strip { position: absolute; right: var(--pad-x); top: 8rem; bottom: 7rem; width: 15rem; display: grid; grid-template-rows: repeat(4, 1fr); gap: 1rem; transition: opacity .6s var(--ease); }
.s15-strip li { position: relative; border-radius: 3px; overflow: hidden; }
.s15-strip figure { position: absolute; inset: 0; }
.s15-strip span { position: absolute; left: .9rem; bottom: .7rem; font-size: .85rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.s15.playing .s15-text { opacity: 0; transform: translateY(1rem); pointer-events: none; }
.s15.playing .s15-strip { opacity: 0; pointer-events: none; }
.s15-back { position: absolute; left: var(--pad-x); bottom: 7rem; z-index: 5; opacity: 0; pointer-events: none; transition: opacity .5s; background: var(--ivory); color: var(--ink); }
.s15.playing .s15-back { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   16 — Skyline to City Hall
   ========================================================================== */
.s16-text { position: absolute; left: var(--pad-x); top: var(--pad-top); width: 64rem; }
.s16 .lede { font-size: 1.5rem; }
.s16-photo { position: absolute; right: var(--pad-x); top: var(--pad-top); width: 34rem; height: 21rem; border-radius: 3px; overflow: visible; background: none; }
.s16-photo img { border-radius: 3px; }
.s16-photo .credit { position: absolute; top: 100%; }
.s16-morph { position: absolute; left: 0; right: 0; bottom: 4.5rem; height: 30rem; }
.morph-svg { position: absolute; inset: 0 0 3rem 0; width: 100%; height: calc(100% - 3rem); }
.morph-svg .sil { fill: var(--ink); }
.morph-svg .sil-ghost { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 3 6; opacity: .6; }
.morph-svg .ground { stroke: var(--gold); stroke-width: 3; }
.morph-svg .win { fill: var(--ivory); opacity: .0; }
.morph-labels { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 0; height: 3rem; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; color: var(--fg-2); }
.morph-labels .mono { color: var(--gold-deep); letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; margin-right: .6rem; }
.morph-labels p { transition: opacity .6s, color .6s; }
.s16-morph[data-state="nyc"] .m-to, .s16-morph[data-state="orange"] .m-from { opacity: .35; }
.s16-morph[data-state="orange"] .m-to { color: var(--fg); }
.morph-toggle { position: absolute; left: 50%; bottom: .2rem; transform: translateX(-50%); }

/* ==========================================================================
   17 — Civic map
   ========================================================================== */
.s17 { --bg: var(--paper); }
.s17-head { position: absolute; left: var(--pad-x); top: var(--pad-top); width: 60rem; }
.s17-map { position: absolute; left: var(--pad-x); top: 23.5rem; width: 57rem; display: flex; flex-direction: column; }
.s17-map .dia-box { border-radius: 3px; overflow: hidden; }
.s09-diagram .dia-box { flex: none; }
.city-svg { flex: 1; width: 100%; min-height: 0; }
.pins { position: absolute; inset: 0 0 1.6rem 0; pointer-events: none; }
.pin { position: absolute; width: 3.6rem; height: 3.6rem; margin: -3.6rem 0 0 -1.8rem; pointer-events: auto; display: grid; place-items: center; }
.pin span { width: 3rem; height: 3rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ink); color: var(--ivory); display: grid; place-items: center; font-family: var(--f-mono); font-size: 1.05rem; line-height: 1; transition: background .3s, transform .3s var(--ease); box-shadow: 0 .4rem 1rem rgba(20,22,28,.25); }
.pin span i { font-style: normal; transform: rotate(45deg); }
.pin:hover span, .pin[aria-pressed="true"] span { background: var(--gold); color: var(--ink); transform: rotate(-45deg) scale(1.12); }
.dia-box { position: relative; width: 100%; }
.dia-box > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dia-box .hotspots, .dia-box .pins { inset: 0; }
.slide.is-active .pin { animation: pin-drop .8s var(--ease) both; }
.slide.is-active .pin:nth-child(1) { animation-delay: 1s; }
.slide.is-active .pin:nth-child(2) { animation-delay: 1.15s; }
.slide.is-active .pin:nth-child(3) { animation-delay: 1.3s; }
.slide.is-active .pin:nth-child(4) { animation-delay: 1.45s; }
@keyframes pin-drop { from { opacity: 0; transform: translateY(-2rem); } to { opacity: 1; transform: none; } }
.s17-side { position: absolute; right: var(--pad-x); top: 12rem; width: 38rem; bottom: 5.4rem; display: flex; flex-direction: column; gap: 1.4rem; }
.translate-card { background: var(--ink); color: var(--ivory); border-radius: 3px; padding: 1.8rem 2rem; min-height: 19rem; }
.translate-card > .mono { color: var(--gold-soft); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; }
.tc-row { margin-top: 1rem; }
.tc-row span { display: block; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,241,234,.6); }
.tc-row b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.7rem; letter-spacing: -.01em; line-height: 1.2; margin-top: .3rem; }
.tc-row:last-child b { font-family: var(--f-sans); font-weight: 400; font-size: 1.3rem; line-height: 1.4; color: rgba(244,241,234,.9); }
.tc-arrow { color: var(--gold-soft); font-size: 1.6rem; margin: .4rem 0 -.4rem; }
.s17-thumb { height: 10rem; border-radius: 3px; }
.s17-thumb .credit { position: absolute; left: 1rem; bottom: .7rem; margin: 0; color: var(--ivory); text-shadow: 0 1px 6px rgba(0,0,0,.7); font-size: .9rem; }
.prompt { border-top: 3px solid var(--gold); padding-top: 1.1rem; margin-top: auto; }
.prompt .mono { font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.prompt p:last-child { font-family: var(--f-display); font-weight: 500; font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; margin-top: .4rem; }
.city-svg .block { fill: #ded7c8; }
.city-svg .street { stroke: var(--ivory); stroke-width: 9; fill: none; stroke-linecap: round; }
.city-svg .main-st { stroke: var(--gold); stroke-width: 12; fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.slide.is-active .city-svg .main-st { animation: draw 2s var(--ease-io) .6s both; }
.city-svg .rail-line { stroke: var(--ink); stroke-width: 3; fill: none; }
.city-svg .rail-ties { stroke: var(--ink); stroke-width: 9; stroke-dasharray: 1.5 9; fill: none; }
.city-svg .station { fill: var(--ivory); stroke: var(--ink); stroke-width: 3; }
.city-svg .park { fill: #b8bf9c; }
.city-svg .ward { fill: url(#hatch); color: var(--gold-deep); }
.city-svg .ward-edge { fill: none; stroke: var(--gold-deep); stroke-width: 1.5; stroke-dasharray: 6 5; }
.city-svg .lbl { font-family: var(--f-mono); font-size: 14px; letter-spacing: .1em; fill: var(--muted); text-transform: uppercase; }
.city-svg .lbl.dark { fill: var(--ink); }
.city-svg .hall { fill: var(--ink); }
.city-svg .focus-ring { fill: none; stroke: var(--gold); stroke-width: 3; opacity: 0; transition: opacity .4s, r .6s var(--ease); }
.city-svg .focus-ring.on { opacity: .9; }

/* ==========================================================================
   18 — Close
   ========================================================================== */
.s18-photo { position: absolute; inset: 0; }
.s18-photo img { filter: saturate(.85); }
.s18-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,22,28,.05) 0%, rgba(20,22,28,.55) 40%, rgba(20,22,28,.94) 62%); }
.s18-text { position: absolute; left: 62rem; right: var(--pad-x); top: var(--pad-top); bottom: 5.6rem; display: flex; flex-direction: column; }
.s18 .display { font-size: 8.4rem; }
.s18 .lede { margin-top: 1.6rem; font-size: 1.45rem; color: rgba(244,241,234,.85); }
.observe { margin-top: 1rem; }
.observe li { padding: 1rem 0; border-top: 1px solid var(--line); }
.observe .mono { font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
.observe p { font-family: var(--f-display); font-weight: 500; font-size: 1.6rem; line-height: 1.2; letter-spacing: -.01em; margin-top: .3rem; }
.closing { margin-top: 1.4rem; font-size: 1.3rem; color: rgba(244,241,234,.85); }
.closing b { color: var(--gold-soft); font-weight: 500; }
.s18-end { display: flex; gap: .8rem; margin-top: auto; }
.s18-end .pill.solid { background: var(--ivory); color: var(--ink); }
.s18-credit { position: absolute; left: var(--pad-x); bottom: 5.6rem; color: rgba(244,241,234,.75); }
.slide.is-active.s18 .s18-photo img { animation: return-zoom 2.4s var(--ease) both; }
@keyframes return-zoom { from { transform: scale(1.35); filter: saturate(.85) blur(6px); } to { transform: scale(1.02); filter: saturate(.85); } }

/* ==========================================================================
   Overlays
   ========================================================================== */
.overlay { position: absolute; inset: 0; z-index: 50; background: rgba(20,22,28,.96); color: var(--ivory); padding: 6rem 6rem 4rem; overflow: auto; --line: rgba(244,241,234,.18); --fg-2: rgba(244,241,234,.7); --rule: var(--gold); }
.overlay[hidden] { display: none; }
.overlay:not([hidden]) { animation: ov-in .5s var(--ease) both; }
@keyframes ov-in { from { opacity: 0; } to { opacity: 1; } }
.ov-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.ov-head .eyebrow { margin: 0; color: rgba(244,241,234,.7); }
.ov-head .tool { border-color: rgba(244,241,234,.25); color: var(--ivory); }
.ov-head .tool:hover { background: var(--ivory); color: var(--ink); }
.grid-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4rem; }
.grid-list button { display: flex; flex-direction: column; gap: .6rem; text-align: left; width: 100%; }
.grid-list .thumb { aspect-ratio: 16 / 9; width: 100%; border-radius: 2px; overflow: hidden; background: var(--ink-3); position: relative; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .3s; }
.grid-list .thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .3s, transform .6s var(--ease); }
.grid-list .thumb .mono { position: absolute; left: .7rem; top: .6rem; font-size: .9rem; color: var(--ivory); text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.grid-list button:hover .thumb img { opacity: 1; transform: scale(1.04); }
.grid-list button[aria-current="true"] .thumb { outline-color: var(--gold); }
.grid-list .t { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; line-height: 1.2; letter-spacing: -.01em; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 4rem; max-width: 80rem; }
.keys > div { display: flex; justify-content: space-between; gap: 2rem; padding: 1rem 0; border-bottom: 1px solid rgba(244,241,234,.14); font-size: 1.3rem; }
.keys dd { color: rgba(244,241,234,.75); }
kbd { font-family: var(--f-mono); font-size: .95rem; padding: .2rem .55rem; border: 1px solid rgba(244,241,234,.35); border-radius: 4px; }
.ov-foot { margin-top: 2.4rem; font-size: 1.1rem; color: rgba(244,241,234,.7); max-width: 80rem; }
.ov-foot code { font-family: var(--f-mono); color: var(--gold-soft); }

.notes-drawer { position: absolute; left: 4rem; right: 4rem; bottom: 5.4rem; z-index: 40; max-height: 26rem; display: flex; flex-direction: column; background: rgba(20,22,28,.95); color: var(--ivory); border-radius: 6px; box-shadow: 0 1rem 3rem rgba(0,0,0,.35); backdrop-filter: blur(10px); }
.notes-drawer[hidden] { display: none; }
.notes-drawer:not([hidden]) { animation: rise .5s var(--ease) both; }
.nd-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.4rem .4rem 2rem; }
.nd-head .mono { font-size: .95rem; color: var(--gold-soft); letter-spacing: .08em; }
.nd-head .tool { border-color: rgba(244,241,234,.25); width: 2.4rem; height: 2.4rem; }
.nd-body { padding: .4rem 2rem 1.6rem; overflow: auto; font-size: 1.45rem; line-height: 1.5; }
.nd-body p + p { margin-top: .8rem; }
.nd-body .cue { color: var(--gold-soft); font-family: var(--f-mono); font-size: .95rem; letter-spacing: .06em; }

.blackout { position: absolute; inset: 0; background: #000; z-index: 60; }
.blackout[hidden] { display: none; }

.video-modal { width: min(92vw, 1500px); max-width: none; padding: 0; border: 0; background: transparent; color: var(--ivory); }
.video-modal::backdrop { background: rgba(10,11,14,.92); }
.vm-inner { display: flex; flex-direction: column; gap: 12px; }
.vm-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-display); font-size: 20px; }
.vm-head .tool { width: 44px; height: 44px; border: 1px solid rgba(244,241,234,.3); color: var(--ivory); }
.vm-head .tool svg { width: 20px; height: 20px; }
.video-modal video { width: 100%; max-height: 78vh; background: #000; border-radius: 4px; }
.vm-foot { font-size: 14px; opacity: .7; }

/* ---------- Embed (presenter preview) ---------- */
html.embed .chrome, html.embed .notes-drawer { display: none !important; }

/* ==========================================================================
   Read mode — phones in portrait / ?mode=read
   Slides stack into a scrolling story; layouts collapse to one column.
   ========================================================================== */
html.read-mode body { overflow: auto; background: var(--ivory); }
html.read-mode #viewport { position: static; display: block; }
html.read-mode #stage { width: auto; height: auto; overflow: visible; }
html.read-mode .chrome-top { position: fixed; height: 56px; padding: 0 16px; background: rgba(244,241,234,.92); backdrop-filter: blur(10px); color: var(--ink); grid-template-columns: auto 1fr; border-bottom: 1px solid rgba(20,22,28,.08); }
html.read-mode .deck-title { display: none; }
html.read-mode #stage .chrome-top { --chrome-fg: var(--ink); --chrome-line: rgba(20,22,28,.16); --chrome-pill: var(--ink); --chrome-pill-fg: var(--ivory); --chrome-glass: transparent; color: var(--ink); text-shadow: none; }
html.read-mode #stage .brand { color: var(--ink); text-shadow: none; }
html.read-mode .brand-mark { width: 30px; height: 30px; }
html.read-mode .brand-name { font-size: 14px; }
html.read-mode .tools .tool:not(#btnGrid) { display: none; }
html.read-mode .tool { width: 38px; height: 38px; }
html.read-mode .tool svg { width: 18px; height: 18px; }
html.read-mode .counter { font-size: 13px; margin-right: 8px; }
html.read-mode .chrome-bottom { display: none; }
html.read-mode #slides { position: static; padding-top: 56px; }
html.read-mode .slide {
  position: relative; inset: auto; visibility: visible; opacity: 1; animation: none !important;
  --pad-x: 20px; padding: 56px 20px 64px; display: flex; flex-direction: column; gap: 22px; overflow: hidden;
  border-bottom: 1px solid rgba(20,22,28,.08);
}
html.read-mode .slide > *,
html.read-mode .slide [class*="-text"], html.read-mode .slide [class*="-head"], html.read-mode .slide [class*="-side"],
html.read-mode .slide [class*="-main"], html.read-mode .slide [class*="-map"], html.read-mode .slide [class*="-diagram"],
html.read-mode .slide [class*="-photo"], html.read-mode .slide [class*="-pano"], html.read-mode .slide [class*="-model"],
html.read-mode .s03-route, html.read-mode .twin, html.read-mode .bim-cards, html.read-mode .gen-line, html.read-mode .s12-seq, html.read-mode .s15-stage, html.read-mode .s15-strip {
  position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  width: auto !important; height: auto; transform: none;
}
html.read-mode .a, html.read-mode .ln > span, html.read-mode .route-stops li, html.read-mode .gen-line li, html.read-mode .model-tags li { opacity: 1; transform: none; }
html.read-mode .slide .photo img[data-src] { opacity: 0; }
html.read-mode .eyebrow { font-size: 11px; margin-bottom: 14px; gap: 10px; }
html.read-mode .eyebrow::before { width: 28px; }
html.read-mode .display, html.read-mode .display.md, html.read-mode .s01 .display, html.read-mode .s15 .display, html.read-mode .s18 .display,
html.read-mode .s07 .display.md, html.read-mode .s10 .display.md, html.read-mode .s11 .display.md, html.read-mode .s14 .display.md { font-size: clamp(38px, 11vw, 52px); line-height: 1.02; }
html.read-mode .lede, html.read-mode .s04 .lede, html.read-mode .s05 .lede, html.read-mode .s06 .lede, html.read-mode .s11 .lede, html.read-mode .s12 .lede,
html.read-mode .s13 .lede, html.read-mode .s14 .lede, html.read-mode .s15 .lede, html.read-mode .s16 .lede, html.read-mode .s18 .lede { font-size: 17px; margin-top: 14px; }
html.read-mode body, html.read-mode .slide { font-size: 16px; }
html.read-mode .credit, html.read-mode .source-note, html.read-mode .diagram-note { font-size: 12px; }
html.read-mode .credit.on-photo { font-size: 11px; left: 10px; right: 10px; bottom: 8px; }
html.read-mode .source-note.static { margin-top: 14px; }
html.read-mode .aside { font-size: 14px; padding: 12px 14px; margin-top: 16px; }
html.read-mode .pill { height: 42px; font-size: 14px; padding: 0 16px; }
html.read-mode .pill svg { width: 14px; height: 14px; }
html.read-mode [class*="-photo"].photo, html.read-mode [class*="-pano"].photo, html.read-mode .model-frame, html.read-mode .s12-seq, html.read-mode .s15-stage { min-height: 0; aspect-ratio: 4 / 3; border-radius: 3px; height: auto !important; }
html.read-mode [class*="-pano"].photo { aspect-ratio: 16 / 7; margin: -56px -20px 0; border-radius: 0; }
html.read-mode .s01 { padding-top: 0; }
html.read-mode .s01-photo { order: -1; margin: 0 -20px; aspect-ratio: 4 / 5 !important; border-radius: 0 !important; }
html.read-mode .s18-photo { aspect-ratio: 4 / 3; border-radius: 3px; }
html.read-mode .s18-photo::after { background: none; }
html.read-mode .s18-credit, html.read-mode .s06-credit { position: static !important; }
html.read-mode .gauge { top: auto; bottom: 48px; right: 14px; height: 40%; width: auto; }
html.read-mode .gauge-read { font-size: 34px; }
html.read-mode .gauge-read small { font-size: 14px; }
html.read-mode .gauge-label { font-size: 10px; }
html.read-mode .gauge-fill { height: 100%; }
html.read-mode .byline { margin-top: 18px; }
html.read-mode .byline p, html.read-mode .byline b { font-size: 14px; }
html.read-mode .byline-mark { width: 32px; height: 32px; }
html.read-mode .role-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
html.read-mode .role-card { min-height: 0; padding: 14px 16px; }
html.read-mode .role-title { font-size: 20px; }
html.read-mode .role-org, html.read-mode .role-more, html.read-mode .role-tag, html.read-mode .role-num { font-size: 13px; }
html.read-mode .s03-ghost { display: none; }
html.read-mode .s03-portrait { width: 140px !important; height: 170px; }
html.read-mode .s03-portrait .credit { position: static; }
html.read-mode .route-svg { display: none; }
html.read-mode .route-stops { border-left: 2px solid var(--gold); margin-left: 6px; }
html.read-mode .route-stops li { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: auto; padding: 0 0 18px 20px; align-items: flex-start !important; text-align: left !important; font-size: 14px; }
html.read-mode .route-stops li::before { left: -9px !important; right: auto !important; top: 4px !important; bottom: auto !important; width: 16px; height: 16px; margin: 0; }
html.read-mode .route-stops li b { font-size: 20px; }
html.read-mode .route-stops .stop-year { font-size: 11px; }
html.read-mode .s04-model { padding: 0 !important; }
html.read-mode .model-tags li { font-size: 11px; padding: 4px 8px; }
html.read-mode .model-tags li::before { display: none; }
html.read-mode .skill-stack li { grid-template-columns: 28px 1fr; font-size: 14px; }
html.read-mode .skill-stack li span:last-child { grid-column: 2; }
html.read-mode .skill-stack b { font-size: 18px; }
html.read-mode .s05-map .compare { aspect-ratio: 1000 / 560; flex: none; }
html.read-mode .compare-tag { font-size: 10px; top: 8px; }
html.read-mode .compare-handle span { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
html.read-mode .s06-bg { position: absolute !important; inset: 0 !important; }
html.read-mode .step-list li { font-size: 15px; opacity: 1; }
html.read-mode .step-list .mono { width: 24px; height: 24px; font-size: 11px; }
html.read-mode .s07-photo { aspect-ratio: 4 / 3 !important; }
html.read-mode .then-now { top: 10px; right: 10px; }
html.read-mode .s07-now-big { font-size: 64px; }
html.read-mode .s07-now p:last-child { font-size: 16px; }
html.read-mode .s07-now { left: 20px; right: 20px; }
html.read-mode .mini-timeline .mono { font-size: 28px; }
html.read-mode .mini-timeline p { font-size: 15px; }
html.read-mode .s08-head { flex-direction: column; align-items: flex-start; gap: 18px; }
html.read-mode .s08-count .mono { font-size: 64px; }
html.read-mode .s08-count small { font-size: 11px; }
html.read-mode .gen-track { display: none; }
html.read-mode .gen-line ol { grid-template-columns: 1fr; gap: 0; margin: 0; border-left: 2px solid var(--gold); margin-left: 6px; }
html.read-mode .gen-line li { padding: 0 0 18px 20px; }
html.read-mode .gen-line li::before { left: -9px; top: 3px; width: 16px; height: 16px; }
html.read-mode .gen-line b { font-size: 20px; }
html.read-mode .gen-line p { font-size: 14px; }
html.read-mode .gen-line .mono { font-size: 11px; }
html.read-mode .s08-src, html.read-mode .s11-src { position: static !important; }
html.read-mode .section-svg, html.read-mode .yard-svg, html.read-mode .launch-svg, html.read-mode .edge-svg, html.read-mode .city-svg { flex: none; height: auto; }
html.read-mode .hotspot { width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 12px; }
html.read-mode .callout { min-height: 0; padding: 18px; }
html.read-mode .callout h3 { font-size: 22px; }
html.read-mode .callout p:last-child, html.read-mode .video-card b { font-size: 15px; }
html.read-mode .video-card small, html.read-mode .callout-num { font-size: 12px; }
html.read-mode .video-card .play-dot { width: 44px; height: 44px; }
html.read-mode .play-dot svg { width: 16px; height: 16px; }
html.read-mode .s09-photo { aspect-ratio: 16 / 9 !important; }
html.read-mode .s09-diagram, html.read-mode .s17-map, html.read-mode .s14-diagram, html.read-mode .s06-diagram, html.read-mode .s11-diagram { display: block; }
html.read-mode .versus { grid-template-columns: 1fr; gap: 14px; }
html.read-mode .vs-card { padding: 16px; }
html.read-mode .vs-card h3 { font-size: 24px; }
html.read-mode .vs-svg { height: auto; aspect-ratio: 640 / 300; }
html.read-mode .vs-card dl > div { font-size: 14px; grid-template-columns: 60px 1fr; }
html.read-mode .vs-card dt, html.read-mode .vs-dev, html.read-mode .vs-card header .mono { font-size: 11px; }
html.read-mode .s10-photo { aspect-ratio: 3 / 4 !important; max-height: 70vh; }
html.read-mode .s11-text { display: flex; flex-direction: column; gap: 18px; }
html.read-mode .s11-steps { flex-direction: column; gap: 6px; font-size: 14px; }
html.read-mode .yt-meta { font-size: 14px; flex-direction: column; }
html.read-mode .yt-meta a { font-size: 13px; }
html.read-mode .facts dt { font-size: 40px; }
html.read-mode .facts dd { font-size: 13px; }
html.read-mode .filmstrip { gap: 6px; }
html.read-mode .video-link b { font-size: 14px; }
html.read-mode .video-link small { font-size: 12px; }
html.read-mode .s12-seq { aspect-ratio: 3 / 4 !important; max-height: 75vh; }
html.read-mode .s13-head { display: block; }
html.read-mode .twin { grid-template-columns: 1fr; gap: 10px; }
html.read-mode .twin figure { aspect-ratio: 4 / 3; }
html.read-mode .twin-divider { display: none; }
html.read-mode .twin figcaption { font-size: 12px; }
html.read-mode .bim-cards { grid-template-columns: 1fr; gap: 16px; }
html.read-mode .bim-cards li { grid-template-columns: 90px 1fr; }
html.read-mode .bim-cards .mini { width: 90px; }
html.read-mode .bim-cards b { font-size: 18px; }
html.read-mode .bim-cards span { font-size: 14px; }
html.read-mode .stat-buttons { grid-template-columns: 1fr 1fr; gap: 8px; }
html.read-mode .stat b { font-size: 28px; }
html.read-mode .stat b small { font-size: 12px; }
html.read-mode .stat span { font-size: 12px; }
html.read-mode .edge-readout { font-size: 14px; padding: 0; }
html.read-mode .s15 { background: var(--ink); }
html.read-mode .s15-stage::after { display: none; }
html.read-mode .s15-text { order: 2; }
html.read-mode .s15 .lede { color: rgba(244,241,234,.85); }
html.read-mode .s15-strip { grid-template-columns: 1fr 1fr; grid-template-rows: none; order: 3; }
html.read-mode .s15-strip li { aspect-ratio: 4 / 3; }
html.read-mode .s15-strip span { font-size: 11px; }
html.read-mode .s15-actions { flex-wrap: wrap; }
html.read-mode .s16-photo { aspect-ratio: 16 / 10 !important; }
html.read-mode .s16-photo .credit { position: static; }
html.read-mode .s16-morph { height: auto !important; }
html.read-mode .morph-svg { position: relative; inset: auto; height: auto; aspect-ratio: 1600 / 420; }
html.read-mode .morph-labels { position: relative; left: 0; right: 0; flex-direction: column; align-items: flex-start; height: auto; gap: 6px; font-size: 13px; margin-top: 10px; }
html.read-mode .morph-toggle { position: relative; left: auto; bottom: auto; transform: none; margin-top: 10px; }
html.read-mode .pin { width: 34px; height: 34px; margin: -34px 0 0 -17px; }
html.read-mode .pin span { width: 26px; height: 26px; font-size: 11px; }
html.read-mode .translate-card { min-height: 0; padding: 18px; }
html.read-mode .tc-row b { font-size: 20px; }
html.read-mode .tc-row:last-child b { font-size: 15px; }
html.read-mode .s17-thumb { aspect-ratio: 16 / 7 !important; }
html.read-mode .prompt p:last-child { font-size: 22px; }
html.read-mode .s18-text { color: var(--ivory); }
html.read-mode .observe p { font-size: 18px; }
html.read-mode .closing { font-size: 15px; }
html.read-mode .s18-end { flex-wrap: wrap; margin-top: 18px; }
html.read-mode .overlay { position: fixed; padding: 72px 16px 24px; }
html.read-mode .grid-list { grid-template-columns: 1fr 1fr; gap: 12px; }
html.read-mode .grid-list .t { font-size: 13px; }
html.read-mode .grid-list .thumb .mono { font-size: 11px; }
html.read-mode .ov-head .tool { position: fixed; top: 64px; right: 16px; }
html.read-mode .s02-photo, html.read-mode .s04-model .model-frame { aspect-ratio: 4 / 3; }

/* ---------- Still previews (presenter "next slide") ---------- */
html.still *, html.still *::before, html.still *::after {
  animation-duration: .001ms !important; animation-delay: 0s !important;
  animation-iteration-count: 1 !important; transition-duration: .001ms !important;
}
html.still .yard-svg .train-g, html.still .section-svg .train, html.still .vs-svg .train, html.still .launch-svg .train { animation: none !important; transform: translateX(300px) !important; }

/* ---------- Chrome legibility over photography ---------- */
.tool, .nav-btn { background: var(--chrome-glass, rgba(244,241,234,.55)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#stage[data-brand="dark"] .brand { color: var(--ivory); text-shadow: 0 1px 8px rgba(0,0,0,.45); }
#stage[data-brand="light"] .brand { color: var(--ink); text-shadow: none; }
.s07-photo::before, .s10-photo::before, .s15-stage::before, .s18-photo::before, .s12-seq::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9rem; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,22,28,.55), rgba(20,22,28,0));
}
html.read-mode .s07-photo::before, html.read-mode .s10-photo::before, html.read-mode .s15-stage::before, html.read-mode .s18-photo::before, html.read-mode .s12-seq::before { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important;
  }
  .slide.is-active { animation: none !important; }
  .s03-ghost { display: none; }
  .yard-svg .train-g, .section-svg .train, .vs-svg .train, .launch-svg .train { animation: none !important; transform: translateX(300px) !important; }
}