:root {
  color-scheme:dark; --bg:#101c2b; --panel:#121d2a; --light:#30445f;
  --fg:#f1eee7; --muted:#aab4bf; --accent:#e8bc78;
  --sans:'Avenir Next',Avenir,'Segoe UI',sans-serif; --serif:Georgia,'Times New Roman',serif;
}
* { box-sizing:border-box }
html,body { margin:0; height:100%; overflow:hidden }
body { font:15px/1.5 var(--sans); background:var(--bg); color:var(--fg) }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:0 }
button:disabled { opacity:.25; cursor:default }
a { color:inherit; text-underline-offset:4px }
button:focus-visible,a:focus-visible,.site:focus-visible { outline:2px solid var(--accent); outline-offset:4px }
[hidden] { display:none!important }
.app { position:relative; height:100vh; height:100dvh; display:grid; grid-template-rows:64px minmax(0,1fr) 112px; isolation:isolate; background:var(--bg); transition:background 2.5s }
.atmosphere { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none }
.atmosphere>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 2.8s ease }
.atmosphere>img.active { opacity:.8 }
.atmosphere-shade { position:absolute; inset:0; background:linear-gradient(180deg,#02050a30,transparent 25%,#02050a25 75%,#02050a9c),radial-gradient(ellipse at center,transparent 25%,#02060b69); }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:0 3.5vw; gap:20px }
.brand { font-size:17px; line-height:1.2; white-space:nowrap; text-decoration:none; color:#e2e5e9; padding:9px 13px; border:1px solid #bfc8d16b; border-radius:5px; background:#19232dc9 }
.brand strong { color:var(--fg); font-weight:600 }
.series { font-size:10px; letter-spacing:1.7px; color:#d5d0c6; display:flex; align-items:center; gap:16px }
.series i { height:1px; width:22px; background:#aa916b }
.topbar button { font-size:11px; color:#c3cad3 }
/* Geography and story are independent grid cells. Neither may draw into the other. */
.stage { width:min(1560px,93%); margin:0 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(370px,500px); gap:clamp(30px,4vw,70px); align-items:center; padding:20px 0 28px }
.geography { align-self:stretch; min-width:0; min-height:0; display:grid; grid-template-rows:36px minmax(0,1fr) 46px; overflow:hidden }
.geography-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 12px; color:#e0dfdc; font-size:13px }
.map-options { display:flex; gap:4px; flex-shrink:0 }
.map-options button { font-size:10px; color:#bbc5cf; border:1px solid #8292a14a; border-radius:20px; padding:4px 10px }
.map-options button[aria-pressed=true] { color:#f4e8d4; border-color:#ad9d82 }
.map-scene { position:relative; min-height:0; overflow:hidden }
.map-view { width:100%; height:100%; display:block }
.state { fill:#283d5070; stroke:#8194a8; stroke-width:.7; vector-effect:non-scaling-stroke; transition:fill 1.3s,stroke 1.3s,opacity 1.3s }
.state.dimmed { opacity:.33 }
.state.selected { fill:var(--accent); fill-opacity:.6; stroke:var(--accent); stroke-width:2 }
.state.overview-ny { fill:#36789d; stroke:#6acfff }
.state.overview-pa { fill:#8f713b; stroke:#f0bd67 }
.state.overview-va { fill:#8c506c; stroke:#ef98ac }
.site { cursor:pointer; outline:none }
.site .halo { fill:#122332; stroke:currentColor; stroke-width:1.5 }
.site .core { fill:currentColor }
.site .ring { fill:none; stroke:currentColor; opacity:.5; stroke-width:1 }
.site .hit { fill:transparent }
.site text { font:600 10px var(--sans); fill:#f8f4ed; paint-order:stroke; stroke:#101c28; stroke-width:3.5px; stroke-linejoin:round }
.site[data-key=ny] { color:#6acfff }
.site[data-key=pa] { color:#f0bd67 }
.site[data-key=va] { color:#ef98ac }
.site.inactive { opacity:.45 }
.site.active .ring { stroke-width:1.5; opacity:1 }
.site:focus-visible .halo { stroke:#fff; stroke-width:3 }
.ocean { fill:#8395a7; font:italic 12px var(--serif) }
.national .site text { font-size:24px }
.national .ocean { display:none }
.chapter-note { font:italic 17px/1.5 var(--serif); color:#c7cbd1; text-align:center; margin:12px 6px 0; align-self:start }
.story-card { width:100%; min-width:0; height:min(570px,100%); max-height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:20px 24px 16px; background:color-mix(in srgb,var(--panel) 94%,transparent); border:1px solid #c6c1b52b; border-radius:8px; box-shadow:0 14px 50px #0003; transition:background 2.5s,opacity .65s; overflow:hidden }
.story-heading { padding:0 0 14px; text-align:center }
.scene-meta { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px }
.clock { font:500 15px/1.3 var(--sans); color:var(--accent); white-space:nowrap; flex-shrink:0 }
.eyebrow { font-size:10px; line-height:1.4; color:#b7bfca }
.story-heading h1 { font:500 clamp(23px,2vw,29px)/1.2 var(--serif); letter-spacing:-.45px; margin:0; text-wrap:balance }
.time-meta { color:#a5b0be; font-size:10px; margin-top:7px }
.image-frame { position:relative; min-height:0; max-height:220px; height:100%; align-self:center; overflow:hidden; background:#121b27; border-radius:2px; isolation:isolate }
.shot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; will-change:transform; transform-origin:center; z-index:0 }
.shot.active { opacity:1; z-index:1 }
.image-shade { position:absolute; inset:72% 0 0; background:linear-gradient(transparent,#000b); pointer-events:none; z-index:2 }
.image-caption { position:absolute; bottom:8px; left:10px; right:10px; z-index:3; color:#e6e6e0; text-shadow:0 1px 5px #000; font-size:8px; line-height:1.4 }
.image-caption #image-kind { display:block; font-size:7px; letter-spacing:.5px; margin-bottom:2px; color:#efcf9e }
.story-copy { padding-top:14px; min-height:0 }
.story-copy p { font-size:16px; line-height:1.65; color:#e1e2e4; margin:0; text-wrap:pretty }
.story-heading,.story-copy p { opacity:0; transition:opacity .8s }
.story-heading.visible,.story-copy p.visible { opacity:1 }
.beat-row { display:flex; align-items:center; gap:10px; margin-top:10px; min-height:24px }
.beat-row nav { display:flex; gap:6px }
.beat-dot { width:18px; height:24px; padding:0; position:relative }
.beat-dot:after { content:''; position:absolute; left:0; right:0; top:10px; height:3px; background:#65707b; border-radius:5px }
.beat-dot.active:after { background:var(--accent) }
#beat-caption { font-size:9px; color:#a3afbd }
#scene-source { font-size:9px; color:#dcc7a2; margin-left:auto; padding:0 }
#ending-links { display:flex; justify-content:space-between; align-items:center; font-size:11px; margin-top:6px; color:#e8bc78 }
#load-notice { position:absolute; inset:0; display:grid; place-items:center; background:#111d2ddd; color:#c8d3df; z-index:4; font-size:12px }
.transport { padding:6px 3.5vw 10px; min-width:0 }
.rail-meta { display:flex; justify-content:space-between; gap:15px; align-items:center; font-size:10px; color:#bec5cf; margin-bottom:10px }
#chapter-title { color:#eee2cc }
.rail { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px }
.stop { height:25px; position:relative; text-align:left; padding:0 }
.stop:before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#77818b66 }
.stop .fill { position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left }
.stop.done .fill { transform:scaleX(1) }
.stop-label { font-size:9px; color:#aab6c5; white-space:nowrap }
.stop.current .stop-label { color:#f4d49c }
.controls { display:flex; justify-content:space-between; align-items:center; height:40px; gap:16px }
.playback { display:flex; align-items:center; gap:14px }
.playback #play { border:1px solid #b29f80; border-radius:50%; width:34px; height:34px; font-size:13px; background:#d7b47814 }
.playback #previous,.playback #next { font-size:25px; padding:0 5px; color:#c7d0dc }
.playback #speed { font-size:11px; min-width:30px; color:#e4d2b5 }
.hint,.duration { font-size:10px; color:#a7b1bf }
.hint { margin-left:auto }
dialog { width:min(720px,calc(100vw - 32px)); max-height:85dvh; border:1px solid #435062; background:#121c29; color:#e2e4e8; padding:28px; border-radius:8px; font-size:14px; line-height:1.65 }
dialog::backdrop { background:#02070dc9; backdrop-filter:blur(7px) }
.dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px }
.dialog-head h2 { font:28px/1.2 var(--serif); margin:0 }
.dialog-head button { font-size:28px; line-height:1 }
dialog h3 { color:#e2c496; font-size:15px; margin-top:28px }
dialog li { margin:13px 0 }
dialog li p { margin:3px 0; font-size:12px; color:#a3b0c1 }
#source-current { border-block:1px solid #394555; padding:16px 0; margin-top:20px }
#source-current strong { display:block; margin-bottom:8px }
#source-current a { display:block; color:#d1ba91; font-size:13px }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
@media(min-width:1700px) { .stage { grid-template-columns:minmax(0,1fr) 520px; gap:70px } .image-frame { max-height:240px } .story-copy p { font-size:17px } }
@media(max-width:960px) {
  .app { grid-template-rows:48px minmax(0,1fr) 100px }
  .topbar { padding:0 20px; gap:10px }
  .series { font-size:8px; letter-spacing:.5px }
  .series i { display:none }
  .brand { font-size:14px; padding:8px 10px }
  .topbar button { font-size:9px }
  .stage { width:calc(100% - 32px); grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(145px,.65fr) minmax(0,1.35fr); gap:12px; padding:2px 0 12px; align-items:stretch }
  .geography { grid-template-rows:27px minmax(0,1fr); }
  .geography-header { padding:0 8px; font-size:11px }
  .map-options button { font-size:8px; padding:3px 9px }
  .chapter-note { display:none }
  .story-card { width:min(600px,100%); justify-self:center; height:100%; padding:12px 16px 8px; grid-template-rows:auto minmax(0,1fr) auto; }
  .story-heading { padding-bottom:9px }
  .scene-meta { margin-bottom:4px; gap:9px }
  .clock { font-size:12px }
  .eyebrow { font-size:9px }
  .story-heading h1 { font-size:24px }
  .time-meta { font-size:9px; margin-top:4px }
  .story-copy { padding-top:10px }
  .story-copy p { font-size:14.5px; line-height:1.5 }
  .beat-row { margin-top:6px; gap:8px }
  .image-caption { font-size:7px; bottom:5px }
  .image-caption #image-kind { display:inline; font-size:7px; margin-right:5px }
  .transport { padding:5px 16px 6px }
  .rail { gap:5px }
  .stop-label { font-size:0 }
  .stop-label:before { content:attr(data-number); font-size:9px }
  .stop { height:21px }
  .rail-meta { font-size:9px; margin-bottom:9px }
  .controls { height:36px }
  .hint { display:none }
  .duration { font-size:9px }
}
@media(max-height:700px) and (min-width:961px) {
  .app { grid-template-rows:42px minmax(0,1fr) 92px }
  .stage { padding:6px 0 12px; grid-template-columns:minmax(0,1fr) 420px }
  .story-card { padding:12px 18px 8px; grid-template-rows:auto minmax(0,1fr) auto }
  .story-heading { padding-bottom:9px }
  .story-heading h1 { font-size:23px }
  .story-copy { padding-top:10px }
  .story-copy p { font-size:14px; line-height:1.5 }
  .beat-row { margin-top:6px }
  .geography { grid-template-rows:32px minmax(0,1fr) 28px }
  .chapter-note { font-size:14px; margin-top:4px }
}
@media(max-width:420px) {
  .series { display:none }
  .story-card { padding-inline:12px }
  .story-heading h1 { font-size:22px }
  .story-copy p { font-size:14px }
  .eyebrow { font-size:8px }
}
@media(max-height:700px) and (max-width:960px) {
  .app { grid-template-rows:38px minmax(0,1fr) 86px }
  .stage { grid-template-rows:minmax(110px,.6fr) minmax(0,1.4fr); gap:7px; padding-bottom:7px }
  .story-card { padding:8px 12px 5px; grid-template-rows:auto minmax(0,1fr) auto }
  .story-heading h1 { font-size:20px }
  .story-copy p { font-size:13px; line-height:1.4 }
  .story-copy { padding-top:7px }
  .time-meta { font-size:8px }
  .scene-meta { margin-bottom:2px }
  .rail-meta { margin-bottom:5px }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important } .shot { will-change:auto } }

/* Geographic storytelling shares the playback clock with the photographs. */
.map-mode { font:10px var(--sans); color:#adb9c6; text-align:right; max-width:45% }
#flight-layer { pointer-events:none; transition:opacity 1.5s }
.flight-line { stroke:currentColor; stroke-width:2; vector-effect:non-scaling-stroke; opacity:.95 }
.flight-light { fill:#fff4db; stroke:currentColor; stroke-width:2; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 4px currentColor) }
.intended .flight-line { stroke-width:1.2; opacity:.65 }
.destination circle { fill:#d8c5a2 }
.destination text { fill:#e5ded1; font:22px var(--sans); paint-order:stroke; stroke:#101c28; stroke-width:5px }
.national .site { visibility:hidden }
.flight-mode .ocean { display:none }
@media(prefers-reduced-motion:reduce){#flight-layer{transition:none}}