/* HTM site v4. One black field, a projector's light moving on it, grain from reproduction. Display: Bricolage Grotesque
   ExtraBold set tight in caps. The films' own words: Instrument Serif. Everything else: Newsreader. Black, bone, oxblood, crimson. */
@font-face{font-family:'Bricolage Grotesque';font-weight:800;src:url('../fonts/Bricolage-ExtraBold.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('../fonts/InstrumentSerif.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Newsreader';font-weight:400;src:url('../fonts/Newsreader.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Newsreader';font-weight:500;src:url('../fonts/Newsreader-Medium.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Newsreader';font-style:italic;src:url('../fonts/Newsreader-Italic.woff2') format('woff2');font-display:swap}
:root{--ink:#121010;--band:#191515;--bone:#EDE9DF;--ox:#2E0C12;--red:#C43A50;--mute:rgba(237,233,223,.56);--line:rgba(237,233,223,.16);
  --display:'Bricolage Grotesque',Impact,sans-serif;--serif:'Instrument Serif',Georgia,serif;--text:'Newsreader',Georgia,serif;
  --pad:clamp(18px,4vw,56px);--caps-size:.72rem;--track:.16em}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--bone);scroll-behavior:auto;overflow-x:clip}
body{font-family:var(--text);font-size:clamp(1rem,1.1vw,1.15rem);line-height:1.4;overflow-x:clip;min-height:100vh;font-variant-numeric:oldstyle-nums;font-feature-settings:"onum" 1,"liga" 1}
h1,h2,.say p,.close-say p,.f-close .closing{text-wrap:balance}
.syn p,.log,.fp .side p,.contact .who p,.tally p{text-wrap:pretty}
.count,.tally .n{font-variant-numeric:tabular-nums lining-nums}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.caps{font-family:var(--display);font-size:var(--caps-size);letter-spacing:var(--track);text-transform:uppercase}
.label{font-family:var(--display);font-size:var(--caps-size);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* the cue mark: the projection changeover circle, burning in for two frames */
.cue{position:fixed;z-index:80;top:calc(var(--pad) + 6px + env(safe-area-inset-top));right:var(--pad);width:12px;height:12px;border-radius:50%;border:2px solid var(--bone);opacity:0;pointer-events:none;transition:opacity .4s}
.cue.is-held{opacity:1}
.cue.is-on{animation:cue 320ms steps(2,end) 1}
@keyframes cue{0%{opacity:1}100%{opacity:0}}
.no-js .cue,.static .cue{display:none}
/* the light and the grain */
/* the projector light is off: the founder chose a clean black ground (2026-09-09). Set display:block to bring it back. */
.light{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;opacity:.28}
.films-page .light,.fp .light,.contact-page .light{display:block}
.light canvas{width:100%;height:100%;display:block}
.grain{position:fixed;inset:-12%;z-index:1;pointer-events:none;opacity:.07;background-image:url("grain.png");background-size:160px 160px;animation:grain 600ms steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-2%,5%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}}
.touch .grain{animation-duration:1.2s}
main,header,footer{position:relative;z-index:2}
/* the header: two words, the mark, two words */
.top{position:fixed;z-index:50;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(14px + env(safe-area-inset-top)) var(--pad) 14px}
.top::before{content:"";position:absolute;inset:0;bottom:-40px;z-index:-1;background:linear-gradient(to bottom,rgba(18,16,16,.92) 0%,rgba(18,16,16,.7) 55%,rgba(18,16,16,0) 100%);pointer-events:none}
.top{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.top.is-away{transform:translateY(-110%)}
.top nav{display:flex;gap:clamp(18px,3vw,44px)}
.top nav.r{justify-content:flex-end;padding-right:30px}
.top nav a,.top nav button{font-family:var(--display);font-size:.78rem;letter-spacing:var(--track);text-transform:uppercase;text-decoration:none;color:var(--bone);padding:6px 0;border-bottom:1px solid transparent;min-height:44px;display:inline-flex;align-items:center}
.top nav a[aria-current=page]{border-bottom-color:var(--bone)}
.top nav a:hover,.top nav a:focus-visible,.top nav button:hover{color:var(--red);border-bottom-color:var(--red)}
.top nav a,.top nav button{transition:color .25s,border-color .25s}
.top .brand{display:block;width:clamp(34px,3.2vw,44px);color:var(--bone);transition:color .25s}
.top .brand:hover,.top .brand:focus-visible{color:var(--red)}
.top .brand{display:grid;justify-items:center;gap:6px;width:auto}
.top .brand svg{width:clamp(34px,3.2vw,44px);height:auto;display:block}
.top .brand span{font-family:var(--display);font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}
@media (max-width:820px){.top .brand span{display:none}}
.sound{display:flex;align-items:center;gap:8px;min-width:44px;justify-content:center;margin:0 -12px;padding:6px 12px}
.sound span{display:none}
.sound i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--bone)}
.sound.is-on i{background:var(--bone)}
@media (max-width:640px){:root{--caps-size:.75rem}.top{padding:calc(8px + env(safe-area-inset-top)) 16px 8px;grid-template-columns:auto 1fr auto}.top nav{gap:16px}.top nav.l{display:none}.top nav.r{padding-right:26px}.top .brand{justify-self:start}.top .brand svg{width:30px}.sound span{display:inline;font-family:var(--display);font-size:var(--caps-size);letter-spacing:var(--track);text-transform:uppercase}}
/* the hero: the reel, the tagline bending over it */
.hero{position:relative;height:100vh;height:100svh;overflow:hidden;background:#000}
.hero .reel{position:absolute;inset:0}
.hero video,.hero .reel>img,.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero video{opacity:0;transition:opacity 1s}
.hero video.is-on{opacity:1}
.hero .arc{position:absolute;left:0;right:0;width:100%;height:auto;pointer-events:none;mix-blend-mode:difference}
.hero .arc text{font-family:var(--display);font-weight:800;fill:#fff;letter-spacing:-.02em;text-transform:uppercase}
.hero .arc.t{top:clamp(64px,9vh,120px)}
.hero .arc.b{bottom:clamp(40px,7vh,100px)}
.hero .tag{display:none;position:absolute;left:var(--pad);right:var(--pad);top:22vh;font-family:var(--display);font-size:clamp(1.6rem,7.5vw,2.6rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;mix-blend-mode:difference;color:#fff}
@media (max-width:640px){
  .is-home .hero{height:auto;min-height:100svh;display:grid;grid-template-rows:auto 1fr;align-items:start;padding:calc(64px + env(safe-area-inset-top)) 0 calc(64px + env(safe-area-inset-bottom))}
  .hero .arc{display:none}
  .is-home .hero .reel{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;align-self:start}
  .is-home .hero .tag{display:block;position:static;margin:26px var(--pad) 0;mix-blend-mode:normal;color:var(--bone);font-size:clamp(1.5rem,7.2vw,2.2rem);max-width:16ch;align-self:end}
  .hero .hint{display:none}
}
@media (orientation:landscape) and (max-height:500px){.hero .arc{display:none}.hero .tag{display:block;top:auto;bottom:18vh;font-size:1.4rem;max-width:22ch}.top .brand span{display:none}}
.hero .hint{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:12px;align-items:center;color:var(--mute)}
.hero .hint::before,.hero .hint::after{content:"";width:22px;height:1px;background:var(--mute)}
.hero .play{position:absolute;right:var(--pad);bottom:calc(14px + env(safe-area-inset-bottom));min-height:44px;padding:0 4px;display:flex;gap:10px;align-items:center;color:var(--bone)}
.hero .play i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--bone)}
.hero .play.is-on i{background:var(--red);border-color:var(--red)}
/* the statements: one sentence at a time, frames flying in */
.say{position:relative;height:280vh}
.say .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;padding:0 var(--pad)}
.say p{position:absolute;max-width:26ch;text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.1vw,3.1rem);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;opacity:0}
.say figure{position:absolute;width:clamp(150px,18vw,300px);aspect-ratio:16/9;overflow:hidden;opacity:0;pointer-events:none;will-change:transform;outline:1px solid rgba(237,233,223,.14);outline-offset:-1px}
.say figure img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.say{height:auto}.say .stage{position:relative;height:auto;display:grid;gap:34px;padding:16vh var(--pad) 12vh}.say p{position:static;opacity:1;justify-self:start;text-align:left;max-width:20ch;font-size:clamp(1.35rem,5.6vw,2rem)}.say figure{display:none}}
/* the sixteen: a curved carousel of loops */
.worlds{position:relative}
.worlds .pin{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.worlds .wash{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(64px) saturate(.8);opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.worlds .wash.is-on{opacity:.34}
.worlds .pin::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ink) 0%,rgba(18,16,16,.2) 30%,rgba(18,16,16,.2) 70%,var(--ink) 100%);pointer-events:none}
.worlds .head{position:absolute;z-index:2;top:calc(20px + 8vh);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;color:var(--mute)}
.worlds .count{font-variant-numeric:tabular-nums}
.track{position:relative;z-index:1;display:flex;gap:2px;padding:0 calc(50vw - 22vw);will-change:transform;perspective:2400px}
.tile{flex:0 0 44vw;max-width:820px;position:relative;text-decoration:none;color:inherit;transform-style:preserve-3d;will-change:transform}
.tile .frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.tile .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 32%,transparent 58%);pointer-events:none}
.tile .frame img,.tile .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .frame video{opacity:0;transition:opacity .6s}
.tile .frame video.is-on{opacity:1}
.tile .cap{position:absolute;z-index:2;left:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);bottom:clamp(14px,1.8vw,24px);display:grid;gap:5px;text-align:left}
.tile .cap .label,.tile .cap .l{opacity:var(--capo,1);transition:opacity .3s}
.tile .cap .t{font-family:var(--display);font-size:clamp(1.1rem,1.9vw,1.9rem);letter-spacing:-.015em;text-transform:uppercase;line-height:.95;transition:color .25s}
.tile .cap .l{font-family:var(--serif);font-size:clamp(1rem,1.25vw,1.25rem);color:rgba(237,233,223,.8)}
.tile:hover .cap .t,.tile:focus-visible .cap .t{color:var(--red)}
.tile .enter{position:absolute;z-index:3;top:18px;left:18px;display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(14,13,13,.72);border:1px solid var(--red);color:var(--bone)}
.tile .enter i{width:8px;height:8px;border-radius:50%;background:var(--red)}
/* 7. phones: a natural swipe strip, no pin */
@media (max-width:820px){
  .worlds .pin{height:auto;padding:8vh 0 8vh;overflow:hidden}
  .worlds .wash{inset:0}
  .worlds .head{position:static;margin:0 var(--pad) 16px}
  .worlds .head .swipe{display:inline}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding:0 var(--pad);scrollbar-width:none;perspective:none}
  .track::-webkit-scrollbar{display:none}
  .tile{flex-basis:calc(100vw - var(--pad) * 2 - 24px);max-width:none;scroll-snap-align:center;transform:none!important}
  .tile .frame::after{display:none}
  .tile .cap{position:static;padding:12px 2px 0;gap:4px}
  .tile .cap .label{display:none}
  .tile .cap .t{font-size:clamp(1.15rem,5.4vw,1.6rem)}
  .tile .cap .l{font-size:1.05rem}
  .tile .cap .label,.tile .cap .l{opacity:1!important}
  .tile .enter{top:auto;bottom:12px;left:12px;font-size:.75rem}
}
.worlds .head .swipe{display:none}
/* the films list */
.films{padding:18vh var(--pad) 12vh}
.films h1{font-family:var(--display);font-size:clamp(2.4rem,7vw,7.5rem);line-height:.86;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:10vh}
.film{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(22px,4vw,64px);padding:7vh 0;border-top:1px solid var(--line);align-items:start}
.film .art{aspect-ratio:2/3;background:#000;overflow:hidden}
.film .art img{width:100%;height:100%;object-fit:cover}
.film h2{font-family:var(--display);font-size:clamp(1.7rem,3.6vw,3.8rem);line-height:.9;letter-spacing:-.025em;text-transform:uppercase}
.film h2 a{text-decoration:none}
.film .meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 22px}
.film .log{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.2;max-width:38ch}
.film .syn{margin-top:18px;max-width:58ch;color:rgba(237,233,223,.82)}
.film .syn p+p{margin-top:.8em}
.film .close{margin-top:18px;font-family:var(--serif);font-style:italic;color:var(--mute)}
.film .door{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:12px 16px;border:1px solid var(--red);text-decoration:none}
.film .door i{width:8px;height:8px;border-radius:50%;background:var(--red)}
@media (max-width:820px){.films{padding-top:calc(10vh + 44px)}.films h1{margin-bottom:5vh}.film{grid-template-columns:96px minmax(0,1fr);gap:18px;padding:22px 0}.film .art{max-width:none}.film .meta{margin:8px 0 10px}.film .log{font-size:1.1rem}.film .syn,.film .close{display:none}.film .door{margin-top:14px;padding:10px 12px}}
/* a film page */
.fp{padding-top:0}
.fp .hero{height:78vh}
.fp .hero .arc{display:none}
.fp .body{padding:8vh var(--pad) 12vh;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:clamp(24px,5vw,90px)}
.fp h1{font-family:var(--display);font-size:clamp(2.4rem,6.4vw,7rem);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.fp h1 small{display:block;font-size:max(15px,.34em);letter-spacing:0;margin-top:12px;color:var(--mute);text-transform:none;font-family:var(--serif)}
.fp .meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 24px}
.fp .log{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.9rem);line-height:1.18;max-width:36ch}
.fp .syn{margin-top:24px;max-width:60ch;color:rgba(237,233,223,.84)}
.fp .doorway{margin-top:30px}
.fp .after{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);max-width:60ch}
.fp .after+.syn{margin-top:12px}
.fp .syn p+p{margin-top:.8em}
.fp .close{margin-top:24px;font-family:var(--serif);font-style:italic;font-size:1.15em;color:var(--mute)}
.fp .side{display:grid;gap:26px;align-content:start;padding-top:8px}
.fp .side .k{color:var(--mute);margin-bottom:8px}
.fp .side ul{list-style:none}
.fp .side li{padding:6px 0;border-top:1px solid var(--line)}
.fp .door{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border:1px solid var(--red);text-decoration:none;font-family:var(--display);font-size:var(--caps-size);letter-spacing:var(--track);text-transform:uppercase}
.fp .door i{width:8px;height:8px;border-radius:50%;background:var(--red)}
.fp .nextprev{display:flex;justify-content:space-between;gap:20px;padding:6vh var(--pad) 10vh;border-top:1px solid var(--line)}
.fp .nextprev a{text-decoration:none;font-family:var(--display);font-size:clamp(1rem,1.6vw,1.5rem);text-transform:uppercase;letter-spacing:-.01em}
@media (max-width:820px){.fp .hero{height:auto;aspect-ratio:16/9;margin-top:calc(60px + env(safe-area-inset-top))}.fp .body{grid-template-columns:1fr;padding-top:5vh}.fp .nextprev{flex-wrap:wrap}.fp .nextprev a{min-height:44px;display:inline-flex;align-items:center}}
/* the closing statement and contact */
.close-say{min-height:80vh;display:grid;place-items:center;padding:16vh var(--pad);text-align:center}
.close-say p{font-family:var(--display);font-weight:800;font-size:clamp(2rem,6vw,6.4rem);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;max-width:14ch}
.contact{padding:18vh var(--pad) 14vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,90px)}
.contact h1{font-family:var(--display);font-size:clamp(2.4rem,7vw,7.5rem);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.contact .who{margin-top:26px;display:grid;gap:8px;color:rgba(237,233,223,.84)}
.contact form{display:grid;gap:18px;align-content:start}
.contact input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:1px solid var(--bone);border-radius:0;padding:0;margin:0;flex:0 0 22px;display:grid;place-items:center}
.contact input[type=checkbox]:checked{background:var(--red);border-color:var(--red)}
.contact input[type=checkbox]:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.contact label{display:grid;gap:8px}
.contact input,.contact textarea,.contact select{font:inherit;color:var(--bone);background:transparent;border:0;border-bottom:1px solid var(--mute);padding:10px 0;border-radius:0}
.contact input:focus,.contact textarea:focus{outline:0;border-bottom-color:var(--red)}
.contact fieldset{border:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
@media (max-width:600px){.contact fieldset{grid-template-columns:1fr}}
.contact fieldset legend{margin-bottom:10px}
.contact fieldset label{display:flex;gap:12px;align-items:center;font-family:var(--text);font-size:.95em;min-height:44px}
.contact button[type=submit]{justify-self:start;padding:14px 18px;border:1px solid var(--red);font-family:var(--display);font-size:var(--caps-size);letter-spacing:var(--track);text-transform:uppercase}
.contact .note{color:var(--mute);font-size:.9em}
.contact .status{color:var(--mute);min-height:1.4em}
.contact .status:empty{display:none}
@media (max-width:820px){.contact{grid-template-columns:1fr;gap:56px;padding-top:calc(10vh + 44px)}}
.foot{padding:8vh var(--pad) 6vh;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 30px;color:var(--mute)}
.foot a{text-decoration:none}
.foot .mark{width:36px}
/* ---------- the block world (engines carried over from v3; the skin is this file's) ---------- */
.b{--stage-h:100vh}
.b .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink);isolation:isolate}
.b .stage>img,.b .stage>video,.b .stage>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b .stage>video{opacity:0;transition:opacity .6s}
.b .stage>video.is-on{opacity:1}
.b .runway{position:relative}
.b .lines{position:absolute;z-index:5;left:var(--pad);bottom:12vh;max-width:min(60ch,86vw);display:grid;gap:10px}
.b .line{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,2.3rem);line-height:1.15;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 22px rgba(0,0,0,.55)}
.b .line.is-in{opacity:1;transform:none}
.b .line .who{display:block;font-family:var(--display);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.b .line .dir{color:var(--mute);font-style:italic;font-size:.75em;margin-left:.5em}
.clock{position:fixed;z-index:65;top:clamp(56px,7vw,86px);right:var(--pad);font-family:var(--display);font-size:clamp(1rem,1.5vw,1.4rem);letter-spacing:.1em;opacity:0;transition:opacity .6s;display:flex;align-items:center;gap:10px}
.clock.is-on{opacity:1}
.clock.is-hit{color:var(--red)}
.clock i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.b-entry{position:relative;height:100vh;height:100svh;display:grid;place-items:center;background:var(--ink)}
.folder{position:relative;width:min(520px,80vw);aspect-ratio:1.35;background:#d8c39a;color:#2a2117;transform:rotate(-2.5deg);box-shadow:0 30px 60px rgba(0,0,0,.6);padding:8% 9%;font-family:var(--display)}
.folder::before{content:"";position:absolute;top:-6%;left:5%;width:34%;height:7%;background:#d8c39a;clip-path:polygon(0 100%,4% 0,96% 0,100% 100%)}
.folder .l1{font-size:clamp(1.6rem,3.6vw,3.2rem);letter-spacing:.02em;text-transform:uppercase}
.folder .l2{margin-top:8%;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#6b5a3f}
.b-entry .go{position:absolute;bottom:10vh;left:50%;transform:translateX(-50%);font-family:var(--display);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;display:grid;justify-items:center;gap:10px;color:var(--mute)}
.b-entry .go::after{content:"";width:1px;height:40px;background:var(--mute);animation:drop 1.6s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.b-moment .hot{position:absolute;z-index:6;left:var(--hx);top:var(--hy);width:64px;height:64px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--red);background:transparent;display:grid;place-items:center;opacity:0;transition:opacity .4s}
.b-moment .hot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--red)}
.b-moment .hot.is-on{opacity:1;animation:ring 1.4s ease-in-out infinite}
@keyframes ring{50%{box-shadow:0 0 0 12px rgba(196,58,80,.18)}}
.b-moment .hot span{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:10px;white-space:nowrap;font-family:var(--display);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.b-moment .choice{position:absolute;z-index:6;right:var(--pad);bottom:12vh;font-family:var(--display);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);opacity:0;transition:opacity .4s;text-align:right}
.b-moment .choice.is-on{opacity:1}
.b-moment .choice b{display:block;color:var(--bone);font-weight:800;margin-top:6px}
@media (max-width:700px){.b-moment .hot{left:50%!important;top:68%!important}.b .lines{bottom:16vh}}
.room{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--ink);touch-action:pan-y}
.room__pan{position:absolute;top:0;bottom:0;left:0;height:100%;width:auto;max-width:none;will-change:transform}
.room__pan img{height:100%;width:auto;max-width:none}
.room__hot{position:absolute;z-index:6;width:46px;height:46px;border-radius:50%;border:2px solid var(--bone);background:rgba(14,13,13,.35);transform:translate(-50%,-50%);display:grid;place-items:center;transition:transform .3s,border-color .3s}
.room__hot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--bone)}
.room__hot:hover,.room__hot:focus-visible{border-color:var(--red);transform:translate(-50%,-50%) scale(1.15);outline:0}
.room__hot.is-seen{border-color:var(--red)}
.room__head{position:absolute;z-index:7;left:var(--pad);bottom:10vh;max-width:40ch;pointer-events:none}
.room__head .label{margin-bottom:8px}
.room__head p{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.9rem);line-height:1.15;text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 22px rgba(0,0,0,.6)}
.room__hint{position:absolute;z-index:7;right:var(--pad);bottom:10vh;color:var(--mute);pointer-events:none}
.screen{position:fixed;z-index:80;inset:0;background:rgba(6,5,5,.92);display:none;place-items:center;padding:6vh var(--pad)}
.screen.is-on{display:grid}
.screen__phone{position:relative;width:min(92vw,calc(78vh*1.777));aspect-ratio:16/9;background:#000;border:1px solid rgba(237,233,223,.25)}
.screen__phone video,.screen__phone canvas{width:100%;height:100%;object-fit:cover;display:block}
.screen__cap{margin-top:14px;display:flex;justify-content:space-between;gap:20px;width:min(92vw,calc(78vh*1.777))}
.screen__cap .label{color:var(--red)}
.screen__close{position:absolute;top:18px;right:var(--pad);font-family:var(--display);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--bone);padding-bottom:3px}
.b-look .stage{background:#000}
.lid{position:fixed;z-index:75;left:0;right:0;height:50vh;background:#000;pointer-events:none;transform:scaleY(0)}
.lid.t{top:0;transform-origin:top}.lid.b{bottom:0;transform-origin:bottom}
.b.is-blinking .lid{animation:lid 1.4s cubic-bezier(.7,0,.3,1) 1}
@keyframes lid{0%{transform:scaleY(0)}42%{transform:scaleY(1)}58%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.b-close{position:relative;min-height:100vh;display:grid;place-items:center;padding:20vh var(--pad);background:#000}
.b-close .closing{font-family:var(--display);font-size:clamp(2rem,5.6vw,6rem);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;max-width:16ch;text-align:left;opacity:0;transform:translateY(20px);transition:opacity 1.2s,transform 1.2s}
.b-close .closing.is-in{opacity:1;transform:none}
.b-exit{padding:16vh var(--pad) 10vh;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,90px)}
.b-exit h1{font-family:var(--display);font-size:clamp(2.6rem,6.6vw,7.4rem);line-height:.86;letter-spacing:-.03em;text-transform:uppercase;margin-top:8px}
.b-exit .meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 26px}
.b-exit .log{font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.8rem);line-height:1.2;max-width:34ch}
.b-exit .tally{margin-top:22px;color:var(--mute)}
.b-exit .rel{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);max-width:48ch}
.b-exit .rel p{font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.25}
.locked{margin-top:30px;border:1px solid rgba(237,233,223,.3);padding:22px;max-width:48ch}
.locked button{display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;min-height:44px}
.locked button i{width:14px;height:14px;border-radius:50%;border:2px solid var(--red)}
.locked .inside{display:none;margin-top:18px;gap:12px}
.locked.is-open .inside{display:grid}
.locked.is-open button i{background:var(--red)}
.locked .line{font-family:var(--serif);font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.2}
.locked .line .who{display:block;font-family:var(--display);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.b-exit .next{margin-top:40px;display:flex;gap:26px;flex-wrap:wrap}
.b-exit .next a{text-decoration:none;font-family:var(--display);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--mute);padding-bottom:3px}
@media (max-width:820px){.b-exit{grid-template-columns:1fr}}
.unlock{position:fixed;z-index:90;inset:0;background:var(--ink);display:grid;place-items:center;text-align:center;gap:14px;padding:var(--pad)}
.unlock button{font-family:var(--display);font-size:clamp(2rem,5vw,5rem);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;border-bottom:2px solid var(--red);padding-bottom:8px}
.unlock p{color:var(--mute)}
.unlock button.label{font-family:var(--display);font-size:.72rem;letter-spacing:.18em;border:0;padding:12px;margin-top:12px;color:var(--mute);min-height:44px}
.no-js .unlock,.static .unlock{display:none}
/* static fallbacks: reduced motion or no JS. Every section renders complete. */
.no-js .hero video,.static .hero video{display:none}
.no-js .say,.static .say{height:auto}
.no-js .say .stage,.static .say .stage{position:relative;height:auto;display:grid;gap:40px;padding:14vh var(--pad)}
.no-js .say p,.static .say p{position:static;opacity:1;justify-self:center}
.no-js .say figure,.static .say figure{display:none}
.no-js .worlds .pin,.static .worlds .pin{height:auto;padding:10vh 0}
.no-js .track,.static .track{flex-wrap:wrap;justify-content:center;padding:0 var(--pad);perspective:none}
.no-js .tile,.static .tile{flex-basis:min(100%,520px)}
.no-js .tile video,.static .tile video{display:none}
.no-js .grain,.static .grain{animation:none}
.no-js .b .stage,.static .b .stage{position:relative;height:auto;min-height:60vh}
.no-js .b .stage>video,.static .b .stage>video{display:none}
.no-js .b .line,.static .b .line{opacity:1;transform:none}
.no-js .b .hot,.static .b .hot,.no-js .b-moment .choice,.static .b-moment .choice{opacity:1}
.no-js .b .runway,.static .b .runway{height:auto!important}
.no-js .clock,.static .clock{display:none}
[hidden]{display:none!important}
/* ---------- The Block Don't Blink, cut like a film ---------- */
.is-film .top{opacity:.85}
.f .scene{position:relative}
.f .scene.runway{height:calc(var(--rw,200) * 1vh * var(--rwk,1))}
.touch .f{--rwk:.7}
.f .scene .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000;isolation:isolate}
.f .scene .stage>img,.f .scene .stage>video,.f .scene .stage>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 50%}
.f .scene .stage>video{opacity:0;transition:opacity .5s}
.f .scene .stage>video.is-on{opacity:1}
.f .scene .stage>img[data-mirror]{opacity:0}
.f .lines{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sub{position:fixed;z-index:70;left:50%;bottom:calc(7svh + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(8px);width:min(62ch,88vw);text-align:center;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.sub.is-on{opacity:1;transform:translateX(-50%)}
.sub .who{display:block;font-family:var(--display);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.sub .txt{font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,2rem);line-height:1.2;text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 26px rgba(0,0,0,.7)}
.f-entry{position:relative;height:100vh;height:100svh;display:grid;place-items:center;background:#000}
.f-entry .card{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,3rem);line-height:1.1;text-align:center;max-width:22ch}
.f-entry .card small{display:none}
.f-entry .go{position:absolute;bottom:8vh;left:50%;transform:translateX(-50%);font-size:0;color:var(--mute);display:grid;justify-items:center;gap:10px}
.f-entry .go::after{content:"";width:1px;height:40px;background:var(--mute);animation:drop 1.6s ease-in-out infinite}
.scene.held .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000;touch-action:pan-y}
.scene.held .room__pan{position:absolute;top:0;bottom:0;left:0;height:100%;width:auto;max-width:none;will-change:transform}
.scene.held .room__pan img{height:100%;width:auto;max-width:none}
.room__win{position:absolute;z-index:5;width:clamp(150px,14vw,240px);aspect-ratio:16/9;transform:translate(-50%,-100%);background:#000;opacity:0;transition:opacity .5s;pointer-events:none;outline:1px solid rgba(237,233,223,.35)}
.room__win::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:26px;background:rgba(237,233,223,.5)}
.room__win.is-lit{opacity:1}
.room__win video{width:100%;height:100%;object-fit:cover;display:block}
.f .lid{position:fixed;z-index:75;left:0;right:0;height:50vh;background:#000;pointer-events:none;transform:scaleY(0)}
.no-js .f .lid,.static .f .lid{display:none}
.f .lid.t{top:0;transform-origin:top}.f .lid.b{bottom:0;transform-origin:bottom}
.f .lid{transform:scaleY(var(--narrow,0));transition:transform 1.4s cubic-bezier(.4,0,.2,1)}
.f.is-still{cursor:none}
.f.is-still a,.f.is-still button{cursor:none}
.f.is-blinking .lid{animation:lid 1.4s cubic-bezier(.7,0,.3,1) 1;transition:none}
.f-close{position:relative;min-height:100vh;display:grid;place-items:center;padding:20vh var(--pad);background:#000}
.f-close .closing{font-family:var(--display);font-size:clamp(2rem,5.6vw,6rem);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;max-width:16ch;opacity:0;transform:translateY(20px);transition:opacity 1.2s,transform 1.2s}
.f-close .closing.is-in{opacity:1;transform:none}
.f-exit{padding:16vh var(--pad) 10vh;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,90px)}
.f-exit h1{font-family:var(--display);font-size:clamp(2.6rem,6.6vw,7.4rem);line-height:.86;letter-spacing:-.03em;text-transform:uppercase;margin-top:8px}
.f-exit .meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 26px}
.f-exit .log{font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.8rem);line-height:1.2;max-width:34ch}
.f-exit .tally{margin-top:22px;display:grid;gap:12px;color:rgba(237,233,223,.82);font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.25;max-width:44ch}
.f-exit .tally .cut{color:var(--mute);font-family:var(--text);font-size:.92em}
.f-exit .tally .cut q{display:block;color:var(--bone);font-family:var(--serif);font-size:1.1em;margin-top:4px;quotes:none}
.f-exit .rel{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);max-width:48ch}
.f-exit .rel p{font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.25}
.f-exit .next{margin-top:40px;display:flex;gap:26px;flex-wrap:wrap}
.f-exit .next a{text-decoration:none;font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--mute);padding:12px 0 3px}
@media (max-width:820px){.f-exit{grid-template-columns:1fr}.f-exit>div:last-child{display:none}.f .scene .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);pointer-events:none}}
.no-js .f .scene .stage,.static .f .scene .stage{position:relative;height:auto;min-height:56vh}
.no-js .f .scene,.static .f .scene{height:auto!important}
.no-js .f .scene .stage>video,.static .f .scene .stage>video{display:none}
.no-js .f .lines,.static .f .lines{display:grid;gap:10px;padding:18px var(--pad) 30px}
.no-js .f .lines .line,.static .f .lines .line{font-family:var(--serif);font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.2}
.no-js .f .lines .who,.static .f .lines .who{display:block;font-family:var(--display);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.no-js .sub,.static .sub{display:none}
.no-js .f-close .closing,.static .f-close .closing{opacity:1;transform:none}
.no-js .scene.held,.static .scene.held{height:auto}
.no-js .scene.held .stage,.static .scene.held .stage{position:relative;height:56vh}
.no-js .room__win,.static .room__win{display:none}

@media (max-width:360px){.hero .hint{display:none}}
@media (max-width:640px){.locked .line .who,.sub .who,.f-exit .next a,.unlock button.label,.locked button,.tile .enter{font-size:.78rem}}