.work-film{max-width:960px;margin:auto}
.work-film-stage{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:transparent;border:1px solid transparent;isolation:isolate;touch-action:pan-y;--film-progress:0%}
.work-film-poster,.work-film-frames,.work-film-frames canvas{position:absolute;inset:0;width:100%;height:100%}
.work-film-poster{object-fit:contain}
.work-film-frames{opacity:0;transition:opacity .3s}
.work-film.is-ready .work-film-frames{opacity:1}
.work-film-badge{position:absolute;top:18px;left:18px;font:10px var(--mono);letter-spacing:.18em;padding:8px 11px;background:rgba(3,4,5,.8);color:#f4efe4;border:1px solid #5c5343;border-radius:30px;pointer-events:none}
.work-film-controls{padding:23px 0 0}
.work-film-caption{display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.work-film-caption b{font:500 clamp(20px,2.2vw,28px) var(--serif);color:#f4efe4}
.work-film-caption span,.work-film-status{font:13px/1.6 var(--sans);color:#b4b0a7}
.work-film-controls input{display:block;width:100%;height:44px;margin:6px 0;accent-color:#c9a257;cursor:ew-resize}
.work-film-controls input:focus-visible{outline:2px solid #e8c57e;outline-offset:3px;border-radius:6px}
.work-film-status{margin:0;min-height:21px}
.work-film-links{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
@media(max-width:600px){.work-film-caption{display:block}.work-film-caption span{display:block;margin-top:8px}.work-film-stage{border-radius:10px}.work-film-badge{font-size:8px;top:9px;left:9px}.work-film-links a{width:100%}}
@media(prefers-reduced-motion:reduce){.work-film-frames{transition:none}}

/* An optical workbench suspended in the same night as the rest of the site. */
#work{overflow:clip}
#work .sec-head{max-width:1040px;margin:0 auto 42px;display:grid;grid-template-columns:1.3fr 1fr;column-gap:60px;align-items:end}
#work .sec-head .lbl{grid-column:1/-1;margin-bottom:20px}
#work .sec-head h2{max-width:none;font-size:clamp(42px,5.4vw,76px);line-height:1.02;letter-spacing:-.035em;margin:0}
#work .sec-head h2 em{color:#d5b775;font-weight:400}
#work .sec-head p{font-size:clamp(16px,1.6vw,20px);max-width:360px;line-height:1.6;padding-bottom:6px}
.work-film{position:relative;max-width:1040px}
.work-film-stage{border-radius:4px;box-shadow:none;cursor:auto}
.work-film-frames{filter:none;transition:opacity .5s}

.work-film-invite{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;color:#f4efe4;z-index:4;transition:opacity .5s,transform .7s}
.work-film-invite span{font:10px var(--mono);letter-spacing:.22em;color:#e8cc91;margin-bottom:20px}
.work-film-invite b{font:400 clamp(27px,4.5vw,58px) var(--serif);letter-spacing:-.025em;text-shadow:0 2px 28px #0009}
.work-film-invite i{font:13px var(--sans);font-style:normal;color:#d0cabc;margin-top:18px}
.has-explored .work-film-invite{opacity:0;transform:translateY(-10px)}
.work-film:not(.is-ready) .work-film-invite{display:none}
.work-film-badge{border:0;background:#03040599;border-radius:3px;top:20px;left:20px;padding:9px 12px}
.work-film-count{position:absolute;right:24px;top:27px;font:11px var(--mono);color:#f4efe4;letter-spacing:.14em;text-shadow:0 1px 6px #000}
.work-film-chapters{display:none;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #c9a25733}
.is-ready .work-film-chapters{display:grid}
.work-film-chapters button{font:13px var(--sans);color:#aaa69e;text-align:left;padding:20px 12px;background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;min-height:58px}
.work-film-chapters button span{color:#b4965d;font:10px var(--mono);margin-right:12px}
.work-film-chapters button[aria-current="step"]{color:#f4efe4;border-bottom-color:#c9a257;background:linear-gradient(0deg,#c9a2570d,transparent)}
.work-film-chapters button:hover{color:#e8cc91}
.work-film-chapters button:focus-visible{outline:2px solid #e8c57e;outline-offset:-4px}
.work-film-controls input{appearance:none;-webkit-appearance:none;background:transparent}
.work-film-controls input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,#d5b775 var(--seek,0%),#45433d var(--seek,0%))}
.work-film-controls input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;border:3px solid #d5b775;border-radius:50%;background:#0a0c0d;box-shadow:0 0 14px #c9a25744}
.work-film-controls input::-moz-range-track{height:2px;background:#45433d}
.work-film-controls input::-moz-range-progress{height:2px;background:#d5b775}
.work-film-controls input::-moz-range-thumb{width:9px;height:9px;border:3px solid #d5b775;border-radius:50%;background:#0a0c0d}
@media(max-width:600px){
 #work .sec-head{display:block;margin-bottom:26px}#work .sec-head .lbl{display:block}#work .sec-head p{margin-top:22px}
 .work-film-invite i{font-size:0}.work-film-invite i::after{content:"Drag the slider. Discover the story.";font-size:12px}
 .work-film-invite span{font-size:8px;margin-bottom:12px}.work-film-invite b{font-size:28px}
 .work-film-chapters button{font-size:10px;padding:13px 4px;text-align:center}.work-film-chapters button span{display:block;margin:0 0 6px}
 .work-film-badge{font-size:7px;left:9px;top:9px;padding:6px}.work-film-count{right:12px;top:14px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){.work-film-frames{filter:none;transition:none}.work-film-invite,.work-film-optics{display:none}}

/* Native vertical travel: the frame stays readable while the document scrolls. */
.work-film-travel.is-pinned{height:calc(var(--film-height) + clamp(1600px,260svh,3000px))}
.work-film-travel,.work-film-travel .work-film{background:transparent}
.work-film-stage{--film-progress:inherit}
.work-film-stage::after{content:"";position:absolute;top:0;bottom:0;left:var(--film-progress);width:1px;background:linear-gradient(transparent,#e8cc9166,transparent);pointer-events:none;opacity:0}
@media(prefers-reduced-motion:reduce){.work-film-stage::after{display:none}}
.work-film-travel.is-pinned .work-film-stage{box-shadow:none}
.work-film-travel.is-pinned .work-film{position:sticky;top:76px;width:min(100%,calc((100svh - 370px)*4/3));max-width:1040px}
.is-pinned .work-film-caption{display:block}
.is-pinned .work-film-caption span{display:block;margin-top:5px}
.is-pinned .work-film-controls{padding-top:14px}
.is-pinned .work-film-links{margin-top:12px}
.is-pinned .work-film-chapters button{padding-block:13px;min-height:48px}
.is-pinned .work-film-invite i::after{content:none}
@media(max-width:600px){
 .work-film-travel.is-pinned{height:calc(var(--film-height) + clamp(1200px,180svh,1800px))}
 .work-film-travel.is-pinned .work-film{width:100%;top:70px}
 .is-pinned .work-film-invite i{font-size:12px}
 .is-pinned .work-film-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .is-pinned .work-film-links a{font-size:10px;padding:10px 7px;min-height:44px}
 .is-pinned .work-film-caption b{font-size:21px}
 .is-pinned .work-film-chapters button{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.work-film-travel.is-pinned{height:auto}.work-film-travel.is-pinned .work-film{position:relative;top:auto;width:100%}}

/* A short opening reveal only. Main footage is fully visible; the surrounding
   stage remains transparent so the shared galaxy still frames the film. */
.work-film.is-ready .work-film-poster{visibility:hidden}
.work-film.is-ready .work-film-frames{
 mask-image:linear-gradient(90deg,#000 calc(var(--film-progress) - 22%),rgba(0,0,0,.95) calc(var(--film-progress) - 12%),rgba(0,0,0,.5) var(--film-progress),rgba(0,0,0,.05) calc(var(--film-progress) + 12%),transparent calc(var(--film-progress) + 22%));
 -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--film-progress) - 22%),rgba(0,0,0,.95) calc(var(--film-progress) - 12%),rgba(0,0,0,.5) var(--film-progress),rgba(0,0,0,.05) calc(var(--film-progress) + 12%),transparent calc(var(--film-progress) + 22%));
}
.work-film.is-ready.is-revealed .work-film-frames{mask-image:none;-webkit-mask-image:none}
@media(prefers-reduced-motion:reduce){
 .work-film.is-ready .work-film-frames{mask-image:none;-webkit-mask-image:none}
}

/* The original film is an open scroll chapter again, followed by the newer study. */
#workFilmTravel + .lens-journey{margin-top:clamp(64px,10vh,120px)}
#work{scroll-margin-top:calc(var(--nav-h) + 20px)}
html[data-theme=light] #workFilm .work-film-caption b,
html[data-theme=light] #workFilm .work-film-chapters button[aria-current=step]{color:#302b22}
html[data-theme=light] #workFilm .work-film-caption span,
html[data-theme=light] #workFilm .work-film-chapters button,
html[data-theme=light] #workFilm .work-film-status{color:#605747}
html[data-theme=light] #workFilm .work-film-chapters button span{color:#81652d}
html[data-theme=light] #workFilm .work-film-links .btn{color:#302b22;border-color:#8d79564d}