/* Work: the projection room */
body.scenepage{overflow-x:hidden}
.proj-wrap{position:relative;height:1000vh}
.proj{position:sticky;top:0;height:100vh;overflow:hidden;background:#000}
/* The room is pushed in so the film reads as the subject rather than set dressing.
   --z is the only number to touch. The scene is anchored on the SCREEN's centre
   (49.97% across, 43.15% down in the artwork), not the middle of the room image,
   so zooming keeps the film centred instead of drifting toward the ceiling.
   top:45% then lifts it clear of the caption underneath. */
.scenebox{position:absolute;left:50%;top:45%;--z:1.35;
  width:calc(max(100vw,calc(100vh * 1.7768)) * var(--z));aspect-ratio:1672/941;
  transform:translate(-49.97%,-43.15%)}
/* short laptops have no room for the full push in: the screen would land on the caption */
@media (max-height:850px){.scenebox{--z:1.18}}
.scenebox .room{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Scoped to .scenebox on purpose: css/pages.css has an unrelated carousel that also
   uses .screen, and it was leaking transform:scale(.86), opacity:.55 and a transition
   onto the cinema screen, which pushed the film off centre and dimmed it. */
.scenebox .screen{position:absolute;left:30.38%;top:27.81%;width:39.17%;height:30.68%;background:#000;overflow:hidden;box-shadow:0 0 60px rgba(255,255,255,.06);transform:none;transform-style:flat;transition:none;opacity:1;flex:none;margin:0}
.scenebox .screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .7s ease}
.scenebox .screen video.on{opacity:1}
/* scanline overlays off: the most generated-looking texture there is on dark UI */
.scenebox .screen .flicker{display:none;position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.7}
.scenebox .screen .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;mix-blend-mode:screen}
.scenebox .room{transition:filter .12s}
.hud{position:absolute;z-index:5}
.hud.top{left:var(--gut);top:calc(var(--navh) + 2vh);display:flex;align-items:baseline;gap:22px}
.hud.top h1{font-size:clamp(28px,3.2vw,50px);margin:0}
.hud.top .sub{font-family:var(--mono);font-size:12.5px;color:#8a8a8a}
.caption{position:absolute;z-index:5;left:var(--gut);bottom:5.5vh;width:min(34vw,460px)}
/* The seat backs carry bright rim light and a fine dotted weave that cuts straight
   through 13.5px mono, so the copy was hard to read even though the average contrast
   measured fine. A soft pool of shadow, fading out on every side, sits the text on a
   quiet ground without turning it into a card. It fades to nothing well before the
   film above it, so the screen is not dulled. */
.caption::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  /* the top inset is deliberately tight: the gradient only paints inside this box, so
     a taller one reaches the film's bottom corner on a 1366x768 laptop and dulls it */
  inset:-12px -80px -40px -52px;
  background:radial-gradient(112% 132% at 10% 68%,
    rgba(8,8,9,.95) 0%, rgba(8,8,9,.9) 34%, rgba(8,8,9,.62) 58%,
    rgba(8,8,9,.24) 76%, rgba(8,8,9,0) 90%)}
.caption .type{display:block;font-family:var(--label);font-variation-settings:'wdth' 150;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#FF6F52;margin-bottom:10px}
.caption h2{font-size:clamp(26px,2.8vw,44px);margin:0 0 10px}
.caption p{font-size:13.5px;line-height:1.9;margin:0 0 16px;color:#d2d2cf;max-width:40ch}
.strip{position:absolute;z-index:5;right:var(--gut);bottom:6vh;width:min(38vw,560px)}
.strip .film{width:100%;height:auto;display:block;opacity:.9}
.strip .frames{position:absolute;left:3.4%;right:3.4%;top:22%;bottom:22%;display:grid;grid-template-columns:repeat(9,1fr);gap:.6%}
.strip .fr{position:relative;background:#000;border:0;padding:0;cursor:pointer;overflow:hidden;outline:1px solid transparent;outline-offset:-1px;transition:outline-color .3s}
.strip .fr img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);opacity:.55;transition:opacity .3s,filter .3s}
.strip .fr.on{outline-color:#FF6F52}.strip .fr.on img{filter:none;opacity:1}
.strip .fr:hover img{opacity:.9}
.counter{position:absolute;z-index:5;right:var(--gut);top:calc(var(--navh) + 2vh);font-family:var(--disp);font-size:clamp(22px,2.4vw,36px);text-transform:uppercase}
.counter span{font-family:var(--label);font-variation-settings:'wdth' 150;font-size:10px;letter-spacing:.2em;color:#6a6a6a;margin-left:8px}
/* phones: a plain stack */
.reel-m{display:none;padding:calc(var(--navh) + 6vh) var(--gut) 8vh}
.reel-m .mi{display:block;color:inherit;margin-bottom:34px}
.reel-m .frame{position:relative;aspect-ratio:16/9;border:1px solid #4a4a4a;background:#050505;padding:5px}
.reel-m .glass{position:absolute;inset:5px;overflow:hidden;background:#000}
.reel-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-m .scan{display:none;position:absolute;inset:5px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.7}
.reel-m .cap{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--label);font-variation-settings:'wdth' 150;font-size:10px;letter-spacing:.14em;text-transform:uppercase}.reel-m .cap b{color:#fff}.reel-m .cap span{color:#FF6F52}
@media (max-width:900px){.proj-wrap{display:none}.reel-m{display:block}}