/* TTS v2 — layout modules share one archival surface. */
:root{--bg:#17191d;--surface:#17191d;--surface-high:#202329;--text:#eeefeb;--muted:#afb3bc;--dim:#9298a3;--border:#ffffff18;--accent:#438fff;--radius:0px;--space:24px}
body{background:var(--bg)}
.site-shell{padding:0 clamp(20px,3vw,56px)}
.masthead{border-bottom:1px solid var(--border);height:88px}
.brand{font-size:21px}.archive-badge{border:0;background:none;padding:0;border-radius:0}
.workspace{gap:32px;padding-top:24px;height:calc(100svh - 140px);grid-template-columns:minmax(0,1fr) clamp(300px,25vw,390px)}
.stage,.tile,:is([data-screen="about"],[data-screen="traces"]) .traces-overlay{background:var(--bg);border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage:before,.stage:after,.stage-rule,.cassette-base{display:none}
.stage-head{left:0;right:0;top:0}.stage-bottom{left:0;right:0;bottom:16px;border-top:1px solid var(--border);padding-top:16px}
.inspector{gap:20px;border-left:1px solid var(--border);padding-left:28px}
.info-tile{padding:0!important}.info-tile .record-title{font-size:44px}.category{color:var(--muted);font-size:10px}
.record-brief{border-top:0}.description{line-height:1.6!important}.source-line{color:var(--dim)}
.photo-trigger{border-radius:3px;min-height:140px}.photo-frame{filter:saturate(.8) brightness(.9)}
.facts{gap:24px;border-bottom:1px solid var(--border);padding-bottom:16px}.facts>.tile{padding:0;min-height:64px}.facts dd{font-size:14px}.levels-tile dd{font-size:27px!important}.level-symbol{display:none}
.layers-tile{padding:0}.mode-tabs{background:none;padding:0;gap:16px;border-radius:0;border-bottom:1px solid var(--border)}
.mode-tabs button{border:0;border-bottom:1px solid transparent;border-radius:0;padding:10px 0;background:none!important;box-shadow:none!important;color:var(--muted)}
.mode-tabs button[aria-pressed="true"]{border-bottom-color:var(--text);color:var(--text)}
.primary-button,.secondary-button{border-radius:3px;min-height:48px;box-shadow:none}
.primary-button{background:#dedfd9;color:#17191d}.primary-button:hover{background:#f7f7f0}
.secondary-button{background:transparent;border-color:var(--border)}.secondary-button:hover{background:#ffffff09}
.nav-arrow,.intro-slide-arrows button{background:none;border:0;border-radius:0;color:var(--text);width:44px;height:44px}
.index-nav button{border-radius:0;color:var(--dim);height:36px}.index-nav button[aria-current="true"]{background:none;border-bottom:1px solid var(--text)}
.track-card-inner{border-radius:2px;background:#1c1f24;border:1px solid #ffffff0c;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.track-card[aria-current="true"] .track-card-inner{border-color:transparent;background:var(--bg);box-shadow:none}
.track-card{width:min(96cqw,calc((100cqh - 215px)*1.62))}.card-topline{left:12px;right:12px;color:var(--dim)}
.card-map{left:0;width:100%}.map-grid{opacity:.35}.card-topline .card-mode-label{color:var(--muted)}
.stage-overlay{background:var(--bg);backdrop-filter:none;border-radius:0}.overlay-top{padding:0 0 20px}.run-bottom{padding:16px 0}.run-canvas{margin:0}.train-sound-controls{border:0;border-top:1px solid var(--border);border-radius:0;background:none;padding:12px 0}
.count-badge{border:0;padding:0;color:var(--dim)}
#projectIntro{place-items:center start;padding:56px 0 72px}
#projectIntro .intro-single{width:min(600px,48%);padding:0!important;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;justify-self:start}
.intro-single #projectTitle,.intro-slide-title{font-size:clamp(40px,4.2vw,66px);line-height:1.08;letter-spacing:-.035em}
.intro-single .intro-eyebrow{margin-bottom:40px}.intro-single .intro-lead{font-size:21px}.intro-single .intro-description{font-size:15px}
.intro-story-nav{max-width:440px;border-top:0;padding-top:8px}.intro-tabs{gap:20px}.intro-tabs button{border:0;border-radius:0;color:var(--dim);height:40px}.intro-tabs button[aria-selected="true"]{background:none;border-bottom:1px solid var(--text)}
.intro-slide-arrows,.intro-sequence{display:none!important}
.intro-cta-row{justify-content:flex-start;gap:30px}.intro-single .intro-next{padding:0;background:none;color:var(--text);border-bottom:1px solid var(--text);border-radius:0;min-height:48px;gap:22px}
[data-screen="about"] .traces-canvas{inset:0 0 0 43%;margin:0;opacity:.85;mask-image:linear-gradient(to right,transparent,#000 20%)}
[data-screen="about"] .traces-svg{transform:scale(1.1);opacity:.85}
[data-screen="about"] .trace-line{stroke-width:3;opacity:calc(var(--trace-opacity)*.8)}.intro-route{stroke-width:3}
.traces-canvas{inset:65px 20px 90px}.traces-svg .trace-line{stroke-width:3}.trace-highlight path{stroke-width:3}
.has-active-trace .trace-line{opacity:calc(var(--trace-opacity)*.23)}.has-active-trace .trace-item.is-highlighted .trace-line{stroke-width:4;opacity:1}
.traces-caption{color:var(--muted);font-size:12px;line-height:1.6;border-top:1px solid var(--border);padding:18px 0;min-height:64px}
.text-dialog,.photo-dialog{border:1px solid #ffffff24;border-radius:4px;background:var(--bg);box-shadow:0 24px 100px #0008}
.text-dialog{width:min(760px,94vw)}.text-dialog::backdrop,.photo-dialog::backdrop{background:#090a0ddd;backdrop-filter:none}
.text-dialog-content{padding:36px 44px}.story-grid{display:block}.story-panel{padding:24px 0;border-top:1px solid var(--border);background:none}.story-panel h3{margin-bottom:12px;color:var(--muted)}.story-panel p{line-height:1.75;font-size:17px;max-width:62ch}
.photo-dialog[open]{display:flex;flex-direction:column;overflow:hidden;height:min(92svh,1000px);max-height:92svh}
.photo-dialog>img,.photo-dialog.has-multiple-photos>img,.photo-dialog:not(.has-multiple-photos)>img{flex:1;min-height:0;height:0;max-height:none;object-fit:contain;background:transparent}
.photo-dialog-head,.photo-dialog>p,.photo-thumbs{flex:none}.photo-thumbs:empty{display:none}.photo-thumbs button{border-radius:0}.photo-thumbs button[aria-current="true"]{border-color:var(--text)}
.text-button,.story-link{color:var(--muted)}.story-link:hover,.text-button:hover{color:var(--text)}
:focus-visible{outline:2px solid #afcfff!important;outline-offset:4px!important}
.site-footer{border-top:1px solid var(--border);margin-top:16px;color:var(--dim)}
.preview-link{font:11px 'Geist Mono',monospace;color:var(--muted);text-decoration:none;white-space:nowrap}.preview-link:hover{color:var(--text)}
@media(max-width:1100px) and (min-width:851px){.workspace{gap:20px;grid-template-columns:minmax(0,1fr) 300px}.inspector{padding-left:20px}.scroll-cue{display:none}.intro-single #projectTitle,.intro-slide-title{font-size:44px}}
@media(max-width:850px){.site-shell{padding:0 24px}.workspace{display:flex;height:auto;padding-top:24px}.inspector{border:0;padding:0;gap:24px}.mobile-record-header{padding:0}.stage-head{top:0}.stage{border-radius:0}.track-card{width:min(94cqw,calc((100cqh - 190px)*1.6))}.photo-trigger{max-height:320px}.intro-single #projectTitle,.intro-slide-title{font-size:clamp(34px,6vw,52px)}#projectIntro{padding:36px 0 280px}#projectIntro .intro-single{width:min(600px,100%)}[data-screen="about"] .traces-canvas{inset:55% -10% -15% 10%;mask-image:linear-gradient(to bottom,transparent,#000 35%)}[data-screen="about"] .traces-svg{transform:scale(1)}:is([data-screen="about"],[data-screen="traces"]) .stage{height:max(780px,calc(100svh - 140px));min-height:780px}.intro-single .intro-lead{font-size:20px}.intro-single .intro-eyebrow{margin-bottom:28px}.intro-story-nav{margin-top:18px}.intro-cta-row{margin-top:18px}}
@media(max-width:520px){.site-shell{padding:0 20px}.masthead{height:88px;gap:16px}.brand{font-size:17px}.preview-link{font-size:10px}.archive-badge{display:none}.workspace{gap:20px}.stage-bottom{bottom:10px}.stage-head{left:0;right:0}.track-card{width:min(96cqw,calc((100cqh - 180px)*1.4))}.index-nav button{min-height:36px}.intro-single .intro-next{width:auto;font-size:13px;min-height:44px}.intro-single .story-link{margin:0}.intro-cta-row{gap:18px}.intro-single .intro-description{font-size:14px}.intro-single .intro-lead{font-size:19px}.intro-single #projectTitle,.intro-slide-title{font-size:36px}.text-dialog-content{padding:24px}.story-panel p{font-size:16px}.overlay-top{gap:10px}.traces-overlay>.overlay-top{grid-template-columns:1fr auto}.traces-overlay #closeTraces{grid-column:2}.traces-canvas{inset:85px 0 120px}.traces-caption{font-size:11px;text-align:left}.train-sound-controls{padding:12px 0}.stage-overlay .overlay-top{padding-top:8px}.run-actions button{min-height:44px}.photo-dialog-head{padding:16px}.photo-dialog>p{padding:0 16px}.stage{min-height:460px}}
/* The masthead returns home; scene headers need only their forward action. */
.scene-about{display:none}.stage-head{grid-template-columns:1fr auto}.traces-overlay>.overlay-top{grid-template-columns:1fr auto}
.workspace:has(#runOverlay:not([hidden])) #testRunButton{visibility:hidden}
@media(prefers-reduced-motion:reduce){.intro-route{animation:none!important}.intro-route:first-child{opacity:.7}.track-card{transition:none}}

/* One preloaded field: only its camera transform changes between scenes. */
#tracesCanvas{inset:65px 20px 90px;margin:0;opacity:1;mask-image:none;
  transform:translate(0,0) scale(1);transform-origin:50% 50%;
  transition:transform 1200ms cubic-bezier(.22,1,.36,1);will-change:transform}
[data-screen="about"] #tracesCanvas{inset:65px 20px 90px;margin:0;opacity:1;mask-image:none;
  transform:translate(24%,0) scale(.57)}
#tracesCanvas .traces-svg,[data-screen="about"] #tracesCanvas .traces-svg{
  transform:none;transform-origin:50% 50%;opacity:1;transition:none}
[data-screen="about"] #tracesCanvas .trace-line{opacity:var(--trace-opacity);stroke-width:3}
#projectIntro{transition:opacity 300ms ease,visibility 0s}
[data-screen="traces"] #projectIntro{transition:opacity 300ms ease,visibility 0s 300ms}
.traces-overlay>.overlay-top,.traces-overlay>.traces-caption{transition:opacity 350ms ease 650ms}
[data-screen="about"] .traces-overlay>.overlay-top,[data-screen="about"] .traces-overlay>.traces-caption{transition-delay:0s}
@media(max-width:850px){
  #tracesCanvas,[data-screen="about"] #tracesCanvas{inset:85px 0 120px}
  [data-screen="about"] #tracesCanvas{transform:translate(0,42%) scale(.8)}
}
@media(prefers-reduced-motion:reduce){#tracesCanvas{transition:none;will-change:auto}}

/* Photographs open directly on the dimmed page, without a window surface. */
#photoDialog[open]{width:100vw;height:100svh;max-width:100vw;max-height:100svh;margin:0;
  padding:clamp(16px,3vw,44px);border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
#photoDialog .photo-dialog-head,#photoDialog #photoCaption,#photoDialog .photo-thumbs{display:none}
#photoDialog>img{width:100%;height:100%;max-height:none;min-height:0;flex:1;object-fit:contain;background:none;cursor:zoom-out;border:0;outline:none!important}
#photoDialog::backdrop{background:#08090dec;backdrop-filter:none}
.photo-step{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:56px;
  border:0;background:#11131880;color:#eeefeb;font-size:24px;border-radius:2px;opacity:.7}
.photo-step:hover,.photo-step:focus-visible{opacity:1}.photo-step-prev{left:16px}.photo-step-next{right:16px}
@media(max-width:520px){#photoDialog[open]{padding:12px}.photo-step{top:auto;bottom:16px;transform:none}}

/* The opening route bundle acts as a single quiet entry to the atlas. */
#introPathsButton{position:absolute;inset:18% 0 15% 48%;z-index:2;border:0;padding:0;
  background:transparent;pointer-events:auto;cursor:pointer;border-radius:3px}
@media(hover:hover) and (pointer:fine){
  [data-screen="about"]:has(#introPathsButton:hover) #tracesCanvas{transform:translate(24%,0) scale(.60)}
}
[data-screen="about"]:has(#introPathsButton:focus-visible) #tracesCanvas{transform:translate(24%,0) scale(.60)}
@media(max-width:850px){
  #introPathsButton{inset:62% 0 0}
  [data-screen="about"]:has(#introPathsButton:is(:hover,:focus-visible)) #tracesCanvas{transform:translate(0,42%) scale(.84)}
}
@media(prefers-reduced-motion:reduce){
  [data-screen="about"]:has(#introPathsButton:is(:hover,:focus-visible)) #tracesCanvas{transform:translate(24%,0) scale(.57)}
}
@media(prefers-reduced-motion:reduce) and (max-width:850px){
  [data-screen="about"]:has(#introPathsButton:is(:hover,:focus-visible)) #tracesCanvas{transform:translate(0,42%) scale(.8)}
}