@font-face{font-family:Geist;src:url('/cinematic/fonts/Geist-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
body{background:#f5f2ea;color:#12201d;font-family:Geist,Arial,sans-serif;font-weight:500}
header{border-top:0}header a{color:#0d4b43;font-weight:500}.edition{color:#61706c;letter-spacing:2px}
.vignette{background:linear-gradient(90deg,#f5f2ea 0%,#f5f2eae0 25%,#f5f2ea00 52%)}
.eyebrow{color:#0d4b43;letter-spacing:2px}.eyebrow:before{background:#0d4b43}
h1{letter-spacing:-.055em;line-height:1.12}#copy{color:#61706c;max-width:360px}
footer{background:linear-gradient(transparent,#f5f2eaf5 30%)}
#chapters button{color:#61706c;border-color:#d8dcd5}#chapters button[aria-current=true]{color:#0d4b43;border-color:#0d4b43}
button{color:#0d4b43;background:#fbfaf766;border-color:#d8dcd5}button:hover{color:#092f2b;border-color:#0d4b43;background:#dcebe3}
button:focus-visible,input:focus-visible,a:focus-visible{outline-color:#0d4b43}input[type=range]{accent-color:#0d4b43}output{color:#61706c}
#loading{color:#0d4b43;background:#f5f2ea}#loading span{background:#0d4b43}
@media(max-width:700px){.vignette{background:linear-gradient(#f5f2ea 0%,#f5f2ea 37%,#f5f2ea00 47%,#f5f2ea00 80%,#f5f2ea 95%)}.edition{font-size:7px;letter-spacing:1px}}

/* No animated overlay: preserve the surface colour throughout the camera move. */
.vignette{display:none}

.reveal-word{display:inline-block;will-change:opacity,transform,filter}

.embedded header,.embedded #chapters,.embedded #restart,.embedded #sound,.embedded .timeline,.embedded #time,.embedded #fullscreen{display:none}
.embedded footer{background:none;padding:20px 24px;pointer-events:none}
.embedded .transport{justify-content:flex-end}
.embedded #play{pointer-events:auto;background:#fbfaf7e6;min-width:100px}
.embedded .story{left:5%;top:31%;width:40%}
@media(max-width:700px){.embedded .story{top:5%;left:7%;width:86%}.embedded h1{font-size:32px}.embedded #copy{font-size:14px;max-width:310px}.embedded footer{padding:16px}}

/* Expanded scene: explanatory typography lives in screen space, never on a mesh. */
.stage-explanation{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;color:#17201d}
.stage-explanation h2{position:absolute;top:13%;left:8%;right:8%;text-align:center;font-size:clamp(24px,2.9vw,44px);font-weight:500;letter-spacing:-.055em;margin:0;line-height:1.12}
.stage-explanation article{position:absolute;width:20vw;max-width:280px;transform:translateX(-50%);text-align:left}
.stage-number{display:block;font-size:11px;letter-spacing:.15em;margin-bottom:11px;opacity:.55}
.stage-explanation h3{font-size:clamp(19px,1.7vw,27px);font-weight:500;letter-spacing:-.035em;margin:0 0 10px;line-height:1.15}
.stage-explanation p{font-size:clamp(13px,1vw,16px);line-height:1.6;opacity:.68;margin:0;max-width:29ch}
@media(max-width:700px){.stage-explanation h2{top:14%;left:7%;right:7%;font-size:27px;text-align:left}.stage-explanation article{width:41vw;max-width:none;transform:none}.stage-number{font-size:9px;margin-bottom:5px}.stage-explanation h3{font-size:17px;margin-bottom:6px}.stage-explanation p{font-size:12px;line-height:1.45}}