/* The recovered reference supplies this study's authorized Georgia/Helvetica exception. */
:root{--paper:#e8dfcc;--ink:#292920;--cream:#eee3ca;--night:#090d0c;--wine:#664f43;--gutter:clamp(24px,5.5vw,108px);--serif:Georgia,'Times New Roman',serif;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif;color-scheme:dark}
/* The root's own dark: what a bounce or a pull-to-refresh reveals past the page's edge is never white (pitch.dog, 29 September). */
*{box-sizing:border-box}html{scroll-behavior:auto;background:var(--night)}body{margin:0;background:var(--paper);color:var(--cream);font-family:var(--serif);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{cursor:default}h1,h2,h3,p,figure,dl,dd{margin:0}button,a{touch-action:manipulation}:focus-visible{outline:2px solid currentColor;outline-offset:6px}[hidden]{display:none!important}img{display:block}::selection{background:#664f43;color:#eee3ca}
.skip{position:fixed;z-index:200;top:8px;left:12px;padding:14px 20px;background:var(--paper);color:var(--ink);transform:translateY(-150%);font:14px var(--sans)}.skip:focus{transform:none}
header{position:fixed;z-index:30;top:0;left:0;width:100%;padding:22px var(--gutter);display:flex;justify-content:space-between;align-items:center;background:transparent;color:var(--cream)}header.paper-header{background:var(--paper);color:var(--ink);border-bottom:1px solid #29292022}header.dark-header{background:#101511;border-bottom:1px solid #eee3ca22}.home{width:25px;height:33px}.home svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.15}nav{display:flex;gap:clamp(25px,3.5vw,62px)}nav a{font:11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.19em;min-height:44px;display:flex;align-items:center;gap:12px}@media(hover:hover){nav a:hover{text-decoration:underline;text-underline-offset:6px}}
.runway{position:relative;height:100svh;background:var(--paper)}.sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}#aperture{position:absolute;inset:0;overflow:hidden;background:var(--night);clip-path:inset(var(--inset-top,0px) var(--inset-x,0px) var(--inset-bottom,0px) round var(--radius,0px))}#world{position:absolute;inset:0;transform:translateY(var(--inner-y,0px)) scale(var(--inner-scale,1));transform-origin:50% 50%}#room{display:block;position:absolute;inset:0}#room img{position:absolute;max-width:none;width:100%;height:100%;object-fit:cover;transform:translate(var(--room-x,0px),var(--room-y,0px)) scale(var(--room-scale,1));transform-origin:50% 50%;will-change:transform}#near{position:absolute;inset:0;pointer-events:none;transform-origin:62% 64%;transform:scale(var(--near-scale,1));will-change:transform}#wood{position:absolute;max-width:none}#pane{position:absolute;pointer-events:none;/* Glass layers share the sash geometry. */}
.hero-type{position:absolute;left:7.5%;bottom:13.5%;opacity:var(--title-opacity,1);transform:translateY(var(--title-y,0px));pointer-events:none}h1{font:400 clamp(84px,12vw,220px)/.9 var(--serif);letter-spacing:-.072em;text-shadow:0 2px 16px #090d0c40}.look{position:absolute;left:8%;bottom:5%;padding:12px 0;display:flex;align-items:center;gap:23px;font:10px var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:var(--title-opacity,1)}.look span{width:48px;height:1px;background:currentColor;position:relative}.look span:after{content:'';position:absolute;right:0;top:-3px;width:6px;height:6px;border-right:1px solid;border-bottom:1px solid;transform:rotate(-45deg)}.arrival{position:absolute;bottom:6.5%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:20px}#enter{font:400 clamp(26px,3vw,42px)/1 var(--serif);padding:14px 29px;border:1px solid #eee3ca70;background:#090d0cbb;min-width:160px}#enter:hover{background:#090d0ce8}#enter:disabled{opacity:.4}.arrival a,.continue{font:10px var(--sans);text-transform:uppercase;letter-spacing:.16em;padding:12px;background:#090d0c80}.continue{position:absolute;bottom:5%;left:50%;transform:translateX(-50%)}#asset-error{position:absolute;inset:45% 10% auto;text-align:center;font:20px var(--serif)}
.paper{background:var(--paper);color:var(--ink);color-scheme:light}.film-section{padding:85px var(--gutter) 118px;scroll-margin-top:90px}.kicker{display:flex;align-items:center;gap:40px;margin-bottom:76px;font:11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.23em}.kicker h2{font:inherit}.kicker i{height:1px;flex:1;background:currentColor;opacity:.27}.headlines{max-width:1400px;margin:auto}.headlines h2,.second-hook{font-weight:400;font-size:clamp(48px,6.15vw,112px);line-height:1.06;letter-spacing:-.065em;text-wrap:balance}.headlines h2{max-width:16.5ch}.second-hook{color:var(--wine);max-width:18ch;margin:32px 0 0 auto}.film-lower{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(52px,10vw,186px);align-items:center;max-width:1110px;margin:90px auto 0}.detail{max-width:370px;aspect-ratio:1.16;position:relative;overflow:hidden;clip-path:polygon(0 4%,98% 0,100% 95%,2% 100%);background:var(--night)}.detail img{width:100%;height:100%;object-fit:cover;transform:scale(2.4);transform-origin:45% 61%}.story>p{font-size:clamp(20px,1.8vw,29px);line-height:1.46;letter-spacing:-.025em}.story>p+p{margin-top:24px}.production{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #29292048;padding-top:20px;margin-top:38px;font:10px/1.6 var(--sans);text-transform:uppercase;letter-spacing:.12em}
.people{padding:88px var(--gutter) 110px;background:#101511;color:var(--cream);scroll-margin-top:90px}.cast-names{max-width:1250px;padding:0;margin:92px auto 43px;list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:14px 45px;font-size:clamp(53px,6.4vw,114px);line-height:1.07;letter-spacing:-.062em}.cast-names li{white-space:nowrap}.also{font-size:20px;line-height:1.55;max-width:750px;margin:auto;text-align:center;color:#c4bcaa}.credits-layout{display:grid;grid-template-columns:.74fr 1.26fr;gap:90px;max-width:1140px;margin:115px auto 0}.credits-art{margin-top:28px;overflow:hidden;height:340px;clip-path:polygon(3% 0,100% 4%,97% 100%,0 94%)}.credits-art img{width:100%;height:100%;object-fit:cover;object-position:22% center;transform:scale(1.65);transform-origin:15% 40%}.credits-layout h3{font:11px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.19em;padding-bottom:18px}dl>div{display:grid;grid-template-columns:142px 1fr;gap:25px;border-top:1px solid #eee3ca30;padding:18px 0}dt{font:10px/1.8 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#b9b09d;padding-top:4px}dd{font:21px/1.27 var(--serif);letter-spacing:-.02em}
.updates{text-align:center;padding:88px var(--gutter) 105px;scroll-margin-top:90px}.vertical-rule{display:block;height:48px;width:1px;background:#29292048;margin:0 auto 60px}.updates h2{font-size:clamp(62px,8.5vw,148px);font-weight:400;line-height:1;letter-spacing:-.07em}.updates>p{font-size:20px;line-height:1.5;margin-top:27px}form{max-width:500px;margin:45px auto 0;text-align:left}form label{font:11px var(--sans);text-transform:uppercase;letter-spacing:.12em}form input{display:block;width:100%;margin-top:12px;padding:10px 0;border:0;border-bottom:1px solid #827c6b;background:transparent;color:var(--ink);font:22px var(--serif);border-radius:0}form button{display:flex;width:100%;justify-content:space-between;padding:19px 22px;margin-top:22px;background:var(--night);color:var(--paper);font:12px var(--sans);text-transform:uppercase;letter-spacing:.1em;opacity:.55}form p{text-align:center;font:12px/1.5 var(--sans);margin-top:16px;color:#676355}form .study-notice{margin-top:24px}footer{padding:25px var(--gutter);display:flex;align-items:center;justify-content:space-between;border-top:1px solid #29292033}footer>span{font-size:32px;letter-spacing:-.07em}footer>a{font:10px var(--sans);text-transform:uppercase;letter-spacing:.1em}
#research{position:fixed;z-index:100;bottom:10px;right:12px;font:11px/1.5 var(--sans);color:#eee3ca;max-width:calc(100vw - 24px)}#research summary{cursor:pointer;padding:8px 10px;background:#090d0ccf;font-size:10px;letter-spacing:.05em;width:max-content;margin-left:auto}#research[open]{width:340px;background:#111711f5;border:1px solid #eee3ca45}#research[open] summary{background:transparent}.research-panel{padding:10px 18px 18px}.research-panel h2{font:18px var(--serif);margin-bottom:12px}.research-panel p{margin-bottom:12px;color:#c4bcaa}.research-panel label{display:flex;align-items:center;gap:10px;margin:10px 0}.research-panel select{font:11px var(--sans);background:#202920;color:#eee3ca;padding:5px}.research-actions{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0}.research-actions button{font:11px var(--sans);border:1px solid #eee3ca55;padding:8px}#status{display:block;white-space:pre-line;font:10px/1.6 ui-monospace,monospace;color:#bbbca8}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){:root{--gutter:25px}header{padding:14px 22px;justify-content:center}.home{display:none}nav{width:100%;justify-content:space-between;gap:10px}nav a{font-size:9px;letter-spacing:.09em;gap:5px}.hero-type{left:6%;bottom:18%}h1{font-size:25vw}.look{left:7%;bottom:10%;font-size:9px}.arrival{bottom:10%;width:100%}.continue{bottom:7%}.film-section{padding:57px var(--gutter) 70px;scroll-margin-top:72px}.kicker{font-size:10px;gap:23px;margin-bottom:48px;letter-spacing:.16em}.headlines h2,.second-hook{font-size:clamp(41px,10.8vw,73px);line-height:1.08;letter-spacing:-.057em}.headlines h2{max-width:15ch}.second-hook{max-width:15ch;margin-top:31px}.film-lower{display:flex;flex-direction:column;gap:36px;margin-top:48px;align-items:stretch}.detail{width:65%;max-width:330px;aspect-ratio:1.3;margin-left:5px}.story>p{font-size:21px;line-height:1.47;letter-spacing:-.02em}.story>p+p{margin-top:20px}.production{font-size:9px;gap:12px;margin-top:28px;letter-spacing:.06em}.people{padding:61px var(--gutter) 71px;scroll-margin-top:72px}.cast-names{flex-direction:column;align-items:center;margin:58px auto 34px;gap:14px;font-size:clamp(37px,10.1vw,72px);letter-spacing:-.058em}.also{font-size:18px;line-height:1.5;max-width:32ch}.credits-layout{display:flex;flex-direction:column;gap:41px;margin-top:59px}.credits-art{margin:0 auto;max-width:260px;width:100%;height:145px}.credits-layout>div{width:100%}dl>div{grid-template-columns:108px 1fr;gap:18px;padding:16px 0}dt{font-size:9px;letter-spacing:.065em;line-height:1.65}dd{font-size:19px;line-height:1.33}.updates{padding:60px var(--gutter) 71px;scroll-margin-top:72px}.vertical-rule{height:34px;margin-bottom:45px}.updates h2{font-size:clamp(55px,14.2vw,88px);line-height:.99;max-width:8ch;margin:auto}.updates>p{font-size:18px;margin:25px auto 0;max-width:26ch}footer{padding:23px var(--gutter)}footer>span{font-size:29px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}body.static #room img,body.static #world{transform:none!important}body.static #near{display:none}body.static .hero-type{opacity:1;transform:none}
/* Keep the camera's viewport width stable during the short Enter scroll lock. */
html{scrollbar-gutter:stable}
.person-link{color:inherit;font:inherit;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.12em}@media(hover:hover){.person-link:hover{text-decoration-line:underline}}.person-link:focus-visible{outline:1px solid currentColor;outline-offset:5px}

#ceiling-repair{position:absolute;pointer-events:none}
/* A local plate preserves navigation contrast when pale cloth passes underneath. */
header nav{padding:0 14px;background:#090d0cb3}
header.paper-header nav,header.dark-header nav{background:transparent}
/* Integrated internal preview. Motion is intentionally on for this review. */
#aperture:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#090d0c35,transparent 24%,transparent 64%,#090d0c88),radial-gradient(ellipse at 50% 45%,transparent 35%,#070a0760);z-index:2}
#world{will-change:transform}#near{z-index:3;transform:translate(var(--lean-x,0px),var(--lean-y,0px)) scale(var(--near-scale,1))}#pane{overflow:hidden}#reflection{position:absolute;inset:0;width:100%;height:100%;opacity:.38;mix-blend-mode:screen}.pane-sheen{position:absolute;inset:0;background:linear-gradient(117deg,transparent 32%,#bbd0ce12 44%,transparent 55%);opacity:.7}#rain{position:absolute;inset:0}.rain-drop{position:absolute;width:1px;background:linear-gradient(transparent,#becbc955,transparent);animation:pane-rain var(--drop-time,14s) linear infinite;opacity:.25}@keyframes pane-rain{from{transform:translateY(-50px)}to{transform:translateY(140px)}}.hero-away .rain-drop,.page-hidden .rain-drop{animation-play-state:paused}
#wine-patches{position:absolute;inset:0;pointer-events:none}.wine-patch{position:absolute;max-width:none;opacity:0}.practical-light{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#060503d9 0%,#0605038c 13%,#06050338 33%,transparent 70%);opacity:0;mix-blend-mode:multiply}.hero-type,.look,.arrival,.held-actions,.sound,.narrative,.reveal{z-index:4}.hero-type{left:7%;bottom:15%}h1{font-size:clamp(98px,12.6vw,228px);line-height:.79;letter-spacing:-.073em}h1 span{display:block;font-size:.36em;line-height:1.08;letter-spacing:-.042em;margin:0 0 .13em .025em}h1 em{display:block;font-weight:400;font-style:normal}.look{left:7.25%;bottom:6.5%;opacity:var(--title-opacity,1)}
.narrative{position:absolute;left:var(--gutter);top:26%;max-width:19ch;font:400 clamp(32px,4.7vw,80px)/1.04 var(--serif);letter-spacing:-.055em;text-wrap:balance;pointer-events:none;text-shadow:0 3px 30px #000c;opacity:0;transform:translateY(12px)}.reveal{position:absolute;inset:22% 0 auto;text-align:center;pointer-events:none;opacity:0;transform:translateY(18px);text-shadow:0 3px 28px #0009}.reveal span{display:block;font-size:clamp(30px,4vw,67px);letter-spacing:-.045em}.reveal em{display:block;font-style:normal;font-size:clamp(98px,14vw,240px);letter-spacing:-.075em;line-height:.84}
.sound{position:absolute;right:var(--gutter);bottom:6.5%;display:flex;align-items:center;gap:11px;font:10px var(--sans);letter-spacing:.14em;text-transform:uppercase;min-height:44px;padding:10px;text-shadow:0 1px 10px #000}.sound-bars{display:flex;gap:3px;align-items:center;height:15px}.sound-bars i{width:1px;height:5px;background:currentColor}.sound-bars i:nth-child(2){height:13px}.sound-bars i:nth-child(3){height:9px}.sound[aria-pressed=false]{opacity:.65}.sound[aria-pressed=false] .sound-bars i{height:3px}.arrival{bottom:9%;gap:14px}.arrival a{background:transparent;text-shadow:0 1px 12px #000}#enter{padding:17px 34px;background:#0b100ccc;border-color:#eee3ca99;box-shadow:0 10px 55px #0004}#enter span{font-family:var(--sans);font-size:.6em;margin-left:30px}.held-actions{position:absolute;left:50%;bottom:6.5%;transform:translateX(-50%);display:flex;align-items:center;gap:28px;font:11px var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}.held-actions a,.held-actions button{padding:14px 4px;text-shadow:0 1px 18px #000}.held-actions button{opacity:.76}.held-actions a:hover,.held-actions button:hover{text-decoration:underline;text-underline-offset:6px}
.people{background:#101511}.people .kicker{margin-bottom:90px}.cast-names{display:grid;grid-template-columns:auto auto;justify-content:center;gap:24px 48px;max-width:1380px;margin:0 auto 60px;font-size:clamp(58px,6.65vw,124px);line-height:1.06;letter-spacing:-.064em}.cast-names li:last-child{grid-column:1/-1;text-align:center}.also{max-width:1000px;font-size:clamp(17px,1.6vw,26px);color:#ddd3ba}.credits-layout{display:block;max-width:1010px;margin:104px auto 0}.credits-layout h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}dl>div{grid-template-columns:210px 1fr;gap:32px;padding:25px 0}dt{font:13px/1.6 var(--sans);text-transform:none;letter-spacing:0;color:#d4ccb8}dd{font:clamp(21px,2vw,30px)/1.32 var(--serif);letter-spacing:-.035em}
.recognition,.producer{padding:90px var(--gutter) 110px;scroll-margin-top:90px}.recognition{border-bottom:1px solid #29292028}.recognition .kicker,.producer .kicker{margin-bottom:50px}.recognition p{max-width:800px;font:clamp(23px,2.6vw,40px)/1.3 var(--serif);letter-spacing:-.04em}.producer{background:#49372e;color:#e8dfcc}.producer h2{font-size:clamp(55px,8vw,132px);font-weight:400;letter-spacing:-.07em;line-height:1}.producer p{max-width:780px;font-size:clamp(21px,2vw,30px);line-height:1.42;margin-top:28px}.producer .kicker h2{font:inherit;letter-spacing:inherit}.pending-copy{opacity:.58}.updates{background:#eee6d5}footer{gap:25px}footer>div{display:flex;gap:30px;font:10px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.1em}header{transition:background-color 180ms ease,color 180ms ease}header nav{background:#090d0c66;backdrop-filter:blur(5px)}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){.hero-type{left:7%;bottom:20%}h1{font-size:34vw}h1 span{font-size:.34em}.look{left:7%;bottom:10%}.sound{right:18px;bottom:9.5%;font-size:9px;letter-spacing:.07em}.narrative{top:24%;max-width:16ch;font-size:clamp(34px,9.5vw,51px)}.reveal{top:29%}.reveal em{font-size:34vw}.reveal span{font-size:10vw}.arrival{bottom:17%}.held-actions{bottom:17%;gap:28px}.cast-names{display:flex;gap:14px;font-size:clamp(41px,10.7vw,72px);margin-bottom:35px}.people .kicker{margin-bottom:60px}.also{font-size:18px}.credits-layout{margin-top:65px}dl>div{grid-template-columns:100px 1fr;gap:19px;padding:20px 0}dt{font-size:11px;line-height:1.45}dd{font-size:21px}.recognition,.producer{padding:64px var(--gutter) 78px;scroll-margin-top:72px}.producer p{font-size:21px}footer{align-items:flex-start;flex-direction:column;gap:24px}footer>div{width:100%;flex-wrap:wrap;gap:18px 25px}header nav{padding:0 8px}}
.hero-credit{font:11px/1.5 var(--sans);letter-spacing:.07em;margin:26px 0 0 5px}.hero-credit a{pointer-events:auto;text-decoration:underline;text-decoration-color:#eee3ca55;text-underline-offset:4px}.hero-status{font:10px/1.5 var(--sans);letter-spacing:.19em;text-transform:uppercase;margin:11px 0 0 5px}.arrival-title{left:7%;bottom:29%;transform:none}.arrival-title h1{font-size:clamp(75px,9vw,145px)}.final-credit{font:12px/1.5 var(--sans);letter-spacing:.07em;margin-top:28px}.final-status{font:10px/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;margin-top:12px}.rain-drop{width:1.2px;opacity:.48;background:linear-gradient(transparent,#c9d7d9a8,transparent)}.sound{position:fixed;z-index:45;right:20px;bottom:max(18px,env(safe-area-inset-bottom));color:var(--cream);background:#090d0cba;border:1px solid #eee3ca24;backdrop-filter:blur(5px)}.section-headline{font:400 clamp(40px,5vw,78px)/1.1 var(--serif);letter-spacing:-.055em;max-width:17ch;margin-bottom:30px}.recognition p{font-size:clamp(20px,2vw,29px);max-width:34ch;line-height:1.45}.editorial-link{display:inline-flex;align-items:center;gap:12px;margin-top:34px;padding:10px 0;border-bottom:1px solid currentColor;font:11px var(--sans);letter-spacing:.1em;text-transform:uppercase}.editorial-link:after{content:'↗'}form button{opacity:1}#signup input[aria-invalid=true]{border-color:#6E1423}#signup-feedback{color:#663f31}.study-notice{opacity:.8}
@media(max-width:760px){.hero-credit{font-size:9px;max-width:28ch;margin-top:18px}.hero-status{font-size:9px}.arrival-title{bottom:30%}.arrival-title h1{font-size:26vw}.sound{font-size:9px;right:14px;bottom:max(14px,env(safe-area-inset-bottom))}.final-credit{font-size:10px;margin-top:20px}.final-status{font-size:9px}.section-headline{font-size:43px}.held-actions{bottom:16%}}
.cast-names li{position:relative}.cast-divider{display:none;position:absolute;right:-29px;top:50%;transform:translateY(-50%);font:12px var(--serif);opacity:.65;letter-spacing:0}.cast-names li:nth-child(odd):not(:last-child) .cast-divider{display:block}.motion-control{position:fixed;z-index:45;right:20px;bottom:76px;padding:10px 13px;border:1px solid #eee3ca33;background:#090d0cd9;color:var(--cream);font:10px var(--sans);letter-spacing:.08em}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){.cast-names{gap:26px}.cast-names .cast-divider{display:block;top:auto;right:50%;bottom:-18px;transform:translateX(50%);font-size:9px}.motion-control{right:14px;bottom:66px}}
.press-section{padding:45px var(--gutter) 65px;scroll-margin-top:90px}.press-section .kicker{margin-bottom:26px}.press-section>p{max-width:38ch;font:clamp(20px,2vw,29px)/1.4 var(--serif);letter-spacing:-.03em;color:var(--wine)}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){.reveal{top:18%}.reveal em{font-size:32vw}.reveal span{font-size:9vw}}
/* Readiness veil belongs to the scene only; navigation and editorial remain available. */
.scene-loader{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#101510;color:#e9dfc9;opacity:1;transition:opacity 220ms ease-out;pointer-events:auto}.scene-loader.leaving{opacity:0;pointer-events:none}.loader-mark{width:38px;height:54px;margin-bottom:26px;opacity:.58}.loader-mark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.85}.loader-title{font:400 clamp(30px,3.6vw,54px)/1.1 var(--serif);letter-spacing:-.055em}.loader-status{font:11px/1.6 var(--sans);letter-spacing:.025em;max-width:30ch;text-align:center;min-height:18px;margin:22px 24px 0;color:#c7bea9}.loader-bypass{position:relative;font:10px/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;gap:20px;padding:12px 0;margin-top:18px;border-bottom:1px solid #e9dfc933}.loader-bypass::before{content:"";position:absolute;inset:0 -6px}.loader-test{font:10px/1.4 var(--sans);color:#c2b6a0;margin-top:22px}.loader-fallback{background:#101510;backdrop-filter:blur(1px)}.loader-fallback .loader-mark{opacity:.3}.loader-fallback .loader-status{color:#e9dfc9}#scene-loader~#world{visibility:visible}
/* The whole synopsis belongs to the approach; the film billing belongs to its ending. */
.home{width:auto;height:auto;font:400 24px/1.1 var(--serif);letter-spacing:-.05em;white-space:nowrap}.loader-rule{width:58px;height:1px;background:#e9dfc960;margin-bottom:30px}.narrative{max-width:26ch;right:var(--gutter);font-size:clamp(39px,4.15vw,72px);line-height:1.12;letter-spacing:-.045em;top:24%}.final-credit a{pointer-events:auto;text-decoration:underline;text-decoration-color:#eee3ca66;text-underline-offset:4px}.loader-fallback .loader-rule{opacity:.35}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){header{align-items:flex-start;flex-direction:column;gap:7px}.home{display:inline-flex;font-size:22px;line-height:1.05}header nav{margin-left:-8px;width:calc(100% + 16px)}.narrative{max-width:25ch;font-size:clamp(28px,8vw,34px);line-height:1.18;letter-spacing:-.035em;top:25%;left:var(--gutter);right:var(--gutter)}.hero-type{bottom:22%}.arrival-title{bottom:30%}}
#night-view{position:absolute;inset:0;z-index:5;background:#020704;pointer-events:none;opacity:0}.scene-loader{background:#101510}.loader-rule{margin:0 0 4px}.loader-fallback{background:#101510}header nav{margin-left:auto}.cast-divider{font-size:28px;line-height:1;opacity:.48;right:-35px}.reveal{top:16%}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){header nav{margin-left:-8px}.cast-names{gap:36px}.cast-names .cast-divider{font-size:18px;line-height:1;bottom:-27px}.reveal{top:17%}}

/* Quiet, deliberate separators; no glyph baselines or drifting dots. */
.cast-divider{font-size:0!important;width:1px;height:.28em;min-height:23px;background:currentColor;right:-25px;opacity:.35}
body.editorial-view .sound{top:22px;bottom:auto;background:transparent;border-color:transparent;backdrop-filter:none;text-shadow:none;color:inherit}
body.editorial-view header nav{margin-right:135px}
body:has(header.paper-header) .sound{color:var(--ink)}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){.cast-names .cast-divider{width:21px;height:1px;min-height:1px;bottom:-19px;right:50%;opacity:.3}body.editorial-view .sound{top:4px}body.editorial-view header nav{margin-right:0}body.editorial-view header{min-height:88px}}

body:has(.loader-fallback:not([hidden])) #asset-error{display:none}

/* Closing billing remains readable at the same distance as navigation. */
.final-credit{font-size:15px;line-height:1.5}.final-status{font-size:12px;letter-spacing:.16em}
.recognition{padding-top:62px;padding-bottom:62px}.recognition .kicker{margin-bottom:28px}.recognition .section-headline{font-size:clamp(34px,3.5vw,54px);margin-bottom:20px}.recognition p{font-size:clamp(19px,1.6vw,25px)}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){nav a{font-size:11px;letter-spacing:.05em}.final-credit{font-size:12px}.final-status{font-size:11px}.recognition{padding-top:48px;padding-bottom:48px}}

/* Each pair centers independently; the separator participates in its row. */
.cast-names{display:flex;flex-direction:column;align-items:center;gap:28px;font-size:clamp(52px,6.4vw,114px)}
.cast-names .cast-row{display:flex;align-items:center;justify-content:center;gap:clamp(26px,3vw,52px);position:static;width:auto;grid-column:auto}
.cast-rule{display:block;flex:0 0 clamp(24px,2.5vw,42px);height:1px;background:currentColor;opacity:.4}
.reveal em{font-size:clamp(120px,17vw,280px)}
.final-credit{font-size:20px;line-height:1.5;letter-spacing:.035em}
.final-status{font-size:14px;letter-spacing:.16em}
.held-actions{gap:18px;font-size:14px;letter-spacing:.085em}
.held-actions a,.held-actions button{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:48px;padding:14px 22px;border:1px solid #eee3ca66;background:#090d0c55;opacity:1}
.held-actions a:hover,.held-actions button:hover{background:#eee3ca18;text-decoration:none;border-color:#eee3cabb}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){
 .cast-names{gap:32px;font-size:clamp(41px,10.7vw,72px)}
 .cast-names .cast-row{flex-direction:column;gap:19px}
 .cast-rule{flex:0 0 1px;width:25px;height:1px}
 .reveal em{font-size:40vw}
 .final-credit{font-size:15px;letter-spacing:.02em}
 .final-status{font-size:12px}
 .held-actions{gap:12px;font-size:13px;letter-spacing:.05em}
 .held-actions a,.held-actions button{gap:9px;min-height:46px;padding:13px 16px}
}

/* No blur filter (pitch.dog, September 30): a filtered piece placed on every frame was redrawn off screen each time, the
   likeliest source of the pink line an iPhone showed while scrolling. The wider shadow gives the same soft edge. */
.lamp-emitter{position:absolute;pointer-events:none;background:#25211a;box-shadow:0 0 9px 5px #25211a;border-radius:18%;mix-blend-mode:multiply;opacity:0;z-index:1}

#dramatic-black{position:absolute;inset:0;z-index:7;background:#000;opacity:0;pointer-events:none}.narrative{white-space:pre-line}.narrative.paired-beat{max-width:29ch}

/* The invitation occupies the narrative position, before the first story beat. */
.look{left:var(--gutter);top:24%;bottom:auto;display:block;text-align:left;padding:0;letter-spacing:normal;text-transform:none;max-width:calc(100% - 2 * var(--gutter));text-shadow:0 3px 28px #000b}
.look span{width:auto;height:auto;background:none;position:static}.look span:after{display:none}
.look .invitation{display:block;font:400 clamp(42px,4.15vw,72px)/1.12 var(--serif);letter-spacing:-.045em}
.look .scroll-invite{display:flex;align-items:center;gap:20px;font:11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-top:22px}
.scroll-invite i{font:normal 21px/1 var(--sans)}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){.look{top:25%}.look .invitation{font-size:clamp(35px,9.3vw,48px);max-width:14ch}.look .scroll-invite{font-size:11px;letter-spacing:.07em;margin-top:17px}}

/* Dynamic viewport fills expanded browser chrome; JS keeps story distance stable. */
#story-shade{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(90deg,#050805b8 0%,#05080570 38%,transparent 79%)}
.narrative{color:#fff2d9;text-shadow:0 2px 5px #0008,0 7px 30px #0008}
.story-line{display:block;will-change:opacity,transform}
.story-line+.story-line{margin-top:.26em}
.story-line em{font-style:italic;color:#f0c9a5;letter-spacing:-.035em}
.look .invitation{font-size:clamp(47px,4.6vw,80px);color:#fff2d9}
.final-status,.final-credit{will-change:opacity,transform}
.editorial-reveal{opacity:0;transform:translateY(22px);filter:blur(2px);transition:none}
.editorial-reveal.revealed,.editorial-reveal:focus-within{opacity:1;transform:none;filter:none}
.k180-logo{display:block;width:clamp(150px,18vw,245px);aspect-ratio:400/93;margin:0 0 44px}
.k180-logo span{display:block;width:100%;height:100%;background:var(--cream);mask:url('assets/k180-logo.svg') center/contain no-repeat;-webkit-mask:url('assets/k180-logo.svg') center/contain no-repeat}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){
 #story-shade{background:linear-gradient(180deg,#03060325 0%,#0306038c 19%,#03060375 44%,transparent 78%)}
 .look .invitation{font-size:clamp(40px,10.4vw,55px);max-width:13ch;line-height:1.08}
 .narrative{font-size:clamp(29px,8.2vw,36px);line-height:1.19;top:24%}
 .k180-logo{width:165px;margin-bottom:33px}
 .motion-control{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 53px)}
}
@media(prefers-reduced-motion:reduce){.editorial-reveal{opacity:1;transform:none;filter:none;transition:none}}

/* Small playback control; native sensor prompts are never imitated by site chrome. */
.sound{min-height:38px;padding:8px 10px;border:0;background:#090d0c66;border-radius:2px;letter-spacing:.08em;font-size:9px;gap:8px}
.motion-control{display:none!important}

.scene-loader{transition:opacity 450ms ease-out}
/* Editorial navigation stays opaque across section boundaries. */
body.editorial-view header{background:#101511}
body.editorial-view header.paper-header{background:var(--paper)}
body.editorial-view header:not(.paper-header):not(.dark-header){background:#49372e}
.scene-loader{background:#101510}
.loader-status{font:400 clamp(21px,2vw,28px)/1.3 var(--serif);letter-spacing:-.025em;color:var(--cream);margin-top:22px}
.scene-loader:not(.loader-fallback) .loader-bypass{visibility:hidden}
.loader-fallback .loader-bypass{visibility:visible}
/* "Skip to the film" (scene.js): quietly there once the scene has taken 1.5 s to load. */
.scene-loader.loader-slow .loader-bypass{visibility:visible;animation:pop-fade 600ms ease}

/* The browser bar reveals more of one stable photograph; it does not resize its layers. */
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){
 #world{bottom:auto;height:100vh;height:100lvh}
 .look,.narrative{top:calc(var(--ui-height,100svh) * .24);transition:top 240ms cubic-bezier(.2,.65,.3,1)}
 .reveal{top:calc(var(--ui-height,100svh) * .17);transition:top 240ms cubic-bezier(.2,.65,.3,1)}
}

#scene{touch-action:pan-y pinch-zoom}

/* Keep the loading frame quiet; navigation arrives after the opaque dissolve. */
#header{transition:opacity 450ms ease,background-color 350ms ease,color 350ms ease}
body.scene-loading #header,body.scene-loading #sound{opacity:0;visibility:hidden;pointer-events:none}
.loader-dots{display:inline-flex;width:.85em;text-align:left}
.loader-dots span{animation:table-dots 1.5s ease-in-out infinite;opacity:.22}
.loader-dots span:nth-child(2){animation-delay:.18s}
.loader-dots span:nth-child(3){animation-delay:.36s}
@keyframes table-dots{0%,65%,100%{opacity:.22}30%{opacity:1}}
@media(prefers-reduced-motion:reduce){.loader-dots span{animation:none;opacity:1}}

.producer-links{display:flex;align-items:center;flex-wrap:wrap;column-gap:32px;row-gap:8px}

/* Doom Scroll: the first view is outside a complete sash, then through its glass. */
/* The dark outside the window is four panels placed around the frame (scene.js measure), not a 150vmax shadow: a shadow
   that size made the glass's layer about seven screens wide whenever it had to be a layer (pitch.dog, September 30). */
#window-recess{position:absolute;box-shadow:0 8px 30px 8px #000b;pointer-events:none}
.recess-panel{position:absolute;background:#10120f;pointer-events:none}
#pane{background:#b1c5b808}
/* Seen through the glass the room is soft: a pre-blurred copy over the sharp room (scene.js), not a live blur. */
/* Seen through the glass the room is soft: a pre-blurred copy over the sharp room (scene.js), not a live blur. */
.room-soft{position:absolute;inset:0;max-width:none;width:100%;height:100%;object-fit:cover;transform:translate(var(--room-x,0px),var(--room-y,0px)) scale(var(--room-scale,1));transform-origin:50% 50%;pointer-events:none}
body.static .room-soft{display:none}
/* GPU budget (September 30, Kay's Mac: 8 GB, a 2000 px window at 2×, whole rectangles never drawn). The scene is one
   picture, the sticky frame's own layer: nothing inside it asks for a layer of its own. will-change on the room, the
   glass and the world, and the rain's moving transform, each made a layer, and every layer low in the stack forced the
   ones above it into layers too: 66 of them, about twenty the size of the screen. */
#room img,#near,#world,#reveal>span,#reveal>em,#reveal .final-status,#reveal .final-credit,.story-line{will-change:auto}
@keyframes pane-rain{from{margin-top:-50px}to{margin-top:140px}}
/* The grain (cinematic-finish.js) is the one moving layer left in the scene; on top of the frame's other contents it
   forces nothing above it into layers of their own (under the vignette and the lines it did: two more screens' worth). */
#aperture .cinematic-grain{z-index:10}
#reflection{opacity:.58;filter:saturate(.48)}
.pane-frost{position:absolute;inset:0;background:linear-gradient(90deg,#c7d4c54f,transparent 12%,transparent 84%,#c1d1c14a),linear-gradient(180deg,#c1cfc14a,transparent 19%,transparent 79%,#bbcabc3b);box-shadow:inset 0 0 42px 15px #cfdbd01a;pointer-events:none}
.pane-sheen{background:linear-gradient(117deg,transparent 14%,#becfcd14 25%,transparent 40%,transparent 59%,#d1d8c411 74%,transparent 84%);opacity:1}
#glass-wear{position:absolute;inset:0;width:100%;height:100%;opacity:.8;pointer-events:none}
#room-dim{position:absolute;inset:0;z-index:2;pointer-events:none;background:#020604;opacity:0}
#candles{position:absolute;inset:0;z-index:2;pointer-events:none}
.candle-flame{position:absolute;display:block;transform:translate(-50%,-100%);background:radial-gradient(ellipse at 50% 72%,#fffbe7 0%,#ffe9b8 28%,#eea254 66%,transparent 78%);border-radius:60% 40% 50% 50%;box-shadow:0 0 6px 2px #fbc27e6b,0 0 19px 7px #ef9f4e1c;transform-origin:50% 100%;rotate:var(--flame-lean,0deg);scale:1 var(--flame-height,1);filter:blur(.2px)}
.reveal>span{font-size:clamp(64px,9.8vw,158px);line-height:.92;letter-spacing:-.055em;margin-bottom:.025em}
.reveal>em{font-size:clamp(112px,16.2vw,258px);line-height:.86;letter-spacing:-.07em}
.reveal .final-credit{margin-top:30px}
.narrative{max-width:28ch;font-size:clamp(36px,3.7vw,64px);line-height:1.14}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){
 .reveal>span{font-size:21vw;line-height:1}
 .reveal>em{font-size:32vw;line-height:.88}
 .reveal .final-credit{margin-top:26px}
 .narrative{font-size:clamp(29px,8.2vw,36px);line-height:1.19;max-width:25ch}

}
/* A tablet held upright (the phone pass, September 30): the title in proportion with its credit line, as on a laptop. */
@media(min-width:700px) and (max-width:1000px) and (orientation:portrait){
 .reveal>span{font-size:15vw}
 .reveal>em{font-size:23vw}
}

.producer .section-headline{text-wrap:balance}

/* Name and email share a clear, quiet form rhythm. */
.signup-field+.signup-field{margin-top:28px}
.producer #producer-copy>p{max-width:38ch}
@media(min-width:1001px){
 #producer-copy{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(50px,8vw,140px)}
 #producer-copy>.section-headline{grid-column:1;grid-row:1 / span 4;max-width:13ch;font-size:clamp(44px,4.5vw,72px)}
 .producer #producer-copy>p{grid-column:2;max-width:none;margin:0 0 28px;font-size:clamp(21px,1.65vw,27px)}
 #producer-copy>.producer-links{grid-column:2}
}

/* Footer small print (K180, 28 September): K180's Instagram and press contact, and the copyright, set like the privacy line. */
footer .footer-note{flex-basis:100%;margin:0;font:11px/1.6 var(--lab-ui,var(--sans,'Helvetica Neue',Helvetica,Arial,sans-serif));letter-spacing:.02em;text-transform:none;color:color-mix(in srgb,currentColor 74%,transparent)}
footer .footer-note a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color 300ms ease}
footer .footer-note a:focus-visible{text-decoration-color:currentColor}@media(hover:hover){footer .footer-note a:hover{text-decoration-color:currentColor}}
footer .footer-note a:focus-visible{outline:1px solid currentColor;outline-offset:4px}
footer .footer-sep{margin:0 .75em}
/* While presenting (?present) the Options control sits in the bottom corner, so the page ends a little later. */
body:has(.lab-present) footer::after{content:'';flex:none;width:100%;height:44px}

/* ---------- Final visual audit (pitch.dog, 29 September) ---------- */
/* Landscape phones: the page keeps clear of the notch and the rounded corners. */
:root{--gutter:max(clamp(24px,5.5vw,108px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
.sound{right:max(20px,env(safe-area-inset-right,0px))}
/* Grain sits over everything after the opening, the header included, so the header band is never the one smooth strip. */
body>.lab-grain{z-index:31}
/* Frank Ruhl Libre has no italic, so the browser slanted the roman for titles in running text (The Floaters, Saba …).
   Every italic takes Fraunces Italic, as the brand book sets it (route C only). */
html[data-type="c"] em{font-family:var(--lab-display,Georgia,serif)}
html[data-type="c"] .lab-present .lp-now{font-family:var(--lab-display,Georgia,serif)}
/* The header's phone rule nav{width:100%} also caught the Options control (a nav too): its empty box ran across the bottom
   of the screen, above the sound control, and took its taps. */
nav.lab-present{width:auto}
/* Headings never leave one word alone on a line; paragraphs avoid a lonely last word. */
h1,h2,h3{text-wrap:balance}
p,dd,blockquote{text-wrap:pretty}
/* A name never breaks across two lines: first and last name stay together. */
.person-link{white-space:nowrap}
/* Tap targets reach 44px without moving anything: an invisible layer widens the hit area, while the layout and the
   focus ring keep the link's own size. */
:is(header nav a,.home,.editorial-link,footer>div a,.footer-home,footer .footer-note a){position:relative}
:is(.sound,header nav a,.home,.editorial-link,footer>div a,.footer-home,footer .footer-note a)::before{content:'';position:absolute}
:is(footer>div a,footer .footer-note a)::before{inset:-14px 0}
:is(.sound,.editorial-link)::before{inset:-4px 0}
header nav a::before{inset:0 -5px}
:is(.home,.footer-home)::before{inset:-10px 0}
/* Once the header has its own ground (paper, dark or Walnut) the navigation needs no plate; over Walnut it showed as a dark box. */
body.editorial-view header nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Inputs show focus the way every look does: the underline darkens. No box around a single rule. */
#signup input:focus{outline:none}#signup input:focus:not([aria-invalid=true]){border-bottom-color:currentColor}
/* On the paper the button's own light text color made its focus ring vanish against the page; the ring is ink there. */
html:is([data-dir="simple"],[data-dir="live"]) #signup button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
/* The page's two ends: a bounce or a pull shows the opening's dark above the page and the footer's color below it.
   A look sets --end-bottom and runs this on the root with a scroll timeline; without scroll timelines the root keeps its dark. */
@keyframes page-ends{0%,50%{background-color:var(--end-top,var(--night))}50.01%,100%{background-color:var(--end-bottom,var(--night))}}
/* Footer links answer the pointer the way the header's do, in the looks that gave them no hover of their own. */
@media(hover:hover){html:not([data-dir="scope-order"]):not([data-dir="order-dark"]):not([data-dir="bare"]) footer>div a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}}
/* Touch screens have no pointer to rest: a tapped menu link kept its hover underline after the tap. */
@media(hover:none){nav a:hover{text-decoration:none}}
/* The sound control lines up with the navigation in the header. */
body.editorial-view .sound{top:25px}
/* Phones: the header aligns with the page's gutter, and its two rows sit close and even. */
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){
 :root{--gutter:max(25px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
 header{padding-left:var(--gutter);padding-right:var(--gutter)}
 body.editorial-view header{min-height:0;gap:0;padding-top:14px;padding-bottom:0}
 body.editorial-view .sound{top:6px}
 /* Cast pairs stack on a phone: the two names of a pair sit closer than one pair sits to the next (it was the other way round). */
 .cast-names .cast-row{gap:12px}
 /* The last line of the footer stays above the iPhone's home indicator. */
 footer{padding-bottom:max(23px,calc(env(safe-area-inset-bottom,0px) + 16px))}
}
@media(max-width:760px){.sound{right:max(14px,env(safe-area-inset-right,0px))}}
/* Tablets in portrait: one tidy row, as on the desktop, not four links spread across the full width. */
@media(min-width:761px) and (max-width:1000px) and (orientation:portrait){
 header,body.editorial-view header{flex-direction:row;align-items:center;justify-content:space-between;gap:0;min-height:0;padding:18px var(--gutter)}
 .home{font-size:24px;line-height:1.1}
 header nav,body.editorial-view header nav{width:auto;margin-left:auto;justify-content:flex-end;gap:24px;padding:0 14px}
 /* Room for the sound control's longest label ("Tap for sound"). */
 body.editorial-view header nav{margin-right:136px}
 nav a{letter-spacing:.14em}
 body.editorial-view .sound{top:21px}
}
/* Simple (and the live look): the frame closes onto paper. As soon as it starts to close, the header takes the paper state
   it ends in, and the sound control steps out until it returns in the header, so neither sits in a gray box on the linen.
   scene.js writes the frame's inset on #aperture, and --inset-x stays 0px until the frame moves. */
html:is([data-dir="simple"],[data-dir="live"]) body:not(.editorial-view):has(#aperture[style]:not([style*="--inset-x: 0px"])) #header{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 #29292022}
html:is([data-dir="simple"],[data-dir="live"]) body:not(.editorial-view):has(#aperture[style]:not([style*="--inset-x: 0px"])) #header nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html:is([data-dir="simple"],[data-dir="live"],[data-dir="b"]) body:not(.editorial-view):has(#aperture[style]:not([style*="--inset-x: 0px"])) .sound{opacity:0;visibility:hidden;transition:opacity 200ms ease,visibility 0s linear 200ms}

/* The sign-up form's honeypot: invisible to people and screen readers, filled in only by bots. */
.signup-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Sound is off unless ?sound=1: no sound button. */
.sound[hidden]{display:none!important}

/* Switching looks (?present, the lab bar) and the footer's sound link load the page again; the old page
   crossfades into the new one instead of flashing, so a new look reads as a change of style in place. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}


/* The veil (scene.js): a cut through black when a menu link jumps across the scene. Out of the page's drawing when clear. */
#rewind{position:absolute;inset:0;z-index:9;background:#090d0c;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 480ms cubic-bezier(.22,.61,.36,1),visibility 0s linear 480ms}
#rewind.is-down{opacity:1;visibility:visible;transition:opacity 60ms linear,visibility 0s}

/* ---------- After the call with Lily and Shai (September 29, 2026) ---------- */
/* The title lockup: "Directed by Natalie Bailey" and "Coming soon", larger and bolder, so every visitor sees them. */
.reveal .final-credit{font-size:clamp(22px,1.75vw,30px);font-weight:500;letter-spacing:.01em;line-height:1.35}
.reveal .final-status{font-size:clamp(14px,1.05vw,17px);font-weight:600;letter-spacing:calc(.2em + var(--track,0) * 1em)}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){.reveal .final-credit{font-size:20px}.reveal .final-status{font-size:13px}}
/* The cast is an ensemble: fifteen names, one size, one treatment, in the billing order, in every look. No tier
   of large names and small ones. The names sit in even rows (five across, three on a tablet, two on a phone), so a
   wrap can't make a top line of three or leave one name stranded mid-list. They read left to right, row by row. */
html[data-dir] #cast .cast-names.ensemble{display:grid;grid-template-columns:repeat(5,auto);justify-content:center;justify-items:center;align-items:baseline;gap:.16em .95em;max-width:none;margin-left:auto;margin-right:auto;padding:0;list-style:none;font-size:clamp(24px,2.65vw,50px);line-height:1.2;text-align:center}
html[data-dir] #cast .cast-names.ensemble li{display:block;position:static;white-space:nowrap;margin:0;padding:0;width:auto;grid-column:auto}
html[data-dir] #cast .cast-names.ensemble .person-link{white-space:nowrap}
@media(max-width:1000px){html[data-dir] #cast .cast-names.ensemble{grid-template-columns:repeat(3,auto);font-size:clamp(20px,calc((100vw - 64px)/20.5),36px);gap:.2em .8em}}
@media(max-width:520px){html[data-dir] #cast .cast-names.ensemble{grid-template-columns:repeat(2,auto);font-size:clamp(18px,calc((100vw - 48px)/13.4),30px);gap:.24em .8em}
  html[data-dir] #cast .cast-names.ensemble li:last-child{grid-column:1/-1}}
/* The film: the short synopsis between the room and the cast (text only, as K180 asked). */
#film .synopsis-text{max-width:31ch;margin:0 auto;font-family:var(--lab-display,var(--serif));font-weight:400;font-size:clamp(27px,2.5vw,42px);line-height:1.32;letter-spacing:-.018em;text-align:center;text-wrap:pretty}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){#film .synopsis-text{font-size:clamp(23px,6.2vw,30px);line-height:1.36}}
/* ---------- The hero's controls (scene.js "The stops") ----------
   The lamp plate (Kay, September 29: "extremely beautiful, on brand, subtle, clean"): a dark plate with a linen hairline
   that warms like a lamp under the hand. One button that says where it goes next, 58 px tall for every visitor, older
   ones first (no up arrow: scrolling up is the way back). On in the hero, gone below it. No backdrop blur: a solid plate over the moving
   scene costs nothing to draw. */
.beat-ui{position:fixed;inset:0;z-index:44;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 420ms cubic-bezier(.22,.61,.36,1),visibility 0s linear 420ms}
.beat-ui.is-on{opacity:1;visibility:visible;transition:opacity 900ms cubic-bezier(.16,1,.3,1) 150ms,visibility 0s}
.beat-ui button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.beat-bar{position:absolute;left:50%;bottom:max(34px,calc(env(safe-area-inset-bottom) + 20px));transform:translateX(-50%);display:flex;align-items:center;pointer-events:auto}
.beat-next{all:unset;box-sizing:border-box;cursor:pointer;background:#090d0cdb;border:1px solid #e8e0cc4d;color:#e8e0cc;box-shadow:0 12px 34px #00000080;transition:border-color 600ms ease,color 600ms ease,box-shadow 600ms ease,opacity 300ms ease,transform 160ms cubic-bezier(.2,.8,.2,1)}
.beat-next{display:inline-flex;align-items:center;justify-content:center;gap:14px;height:58px;padding:0 26px 0 30px;border-radius:999px;font:500 13px/1 var(--lab-ui,var(--sans));letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}
.beat-next svg{width:10px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.beat-next:focus-visible{border-color:#b98a52b3;color:#fff6e6;box-shadow:inset 0 0 18px #b98a5224,0 0 26px #b98a5233,0 12px 34px #00000080}@media(hover:hover){/* The lamp comes on: under the pointer and with the keyboard. */
.beat-next:hover{border-color:#b98a52b3;color:#fff6e6;box-shadow:inset 0 0 18px #b98a5224,0 0 26px #b98a5233,0 12px 34px #00000080}}
.beat-next:focus-visible{outline:1.5px solid #b98a52;outline-offset:5px}
.beat-next:active{transform:translateY(1px)}
/* The label is the instruction (Kay, September 29: one piece of text per place). The old line under "Come a little
   closer." stays hidden; the button says it. The arrow's line drips like rain on the glass, slowly, only while the
   controls are on screen and the button can be pressed. */
html.beats #look .scroll-invite{display:none}
.beat-next .beat-drip{stroke-dasharray:14;stroke-dashoffset:0;animation:beat-drip 2.4s ease-in-out infinite;animation-play-state:paused}
.beat-ui.is-on .beat-next .beat-drip{animation-play-state:running}
.page-hidden .beat-next .beat-drip{animation-play-state:paused!important}
@keyframes beat-drip{0%{stroke-dashoffset:9;opacity:.35}55%{stroke-dashoffset:0;opacity:1}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.35}}
@media(max-width:360px){.beat-next{font-size:12px;letter-spacing:.12em;padding:0 20px 0 24px;gap:12px}}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){
 .beat-bar{bottom:max(26px,calc(env(safe-area-inset-bottom) + 16px))}
 html.beats .sound{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 150px)}
}
/* A phone on its side (short and wide): the lockup is sized by the screen's height, so "Directed by Natalie Bailey" and
   "Coming soon." clear the button, and the button moves to the corner. */
@media(orientation:landscape) and (max-height:500px){
 /* Below the menu bar that arrives with the closed gate (about 90 px on a phone on its side; the phone pass, September 30). */
 .reveal{top:max(calc(var(--ui-height,100svh) * .19),100px)}
 .reveal>span{font-size:12vh;line-height:.95}
 .reveal>em{font-size:22vh;line-height:.86}
 .reveal .final-credit{margin-top:3vh;font-size:15px}
 .reveal .final-status{font-size:11px}
 .beat-bar{left:auto;right:max(20px,env(safe-area-inset-right));transform:none;bottom:max(16px,env(safe-area-inset-bottom))}
}
/* GPU budget (pitch.dog, September 29): over the moving hero the interface is a solid translucent plate, not a backdrop
   blur, which the graphics card had to redo on every frame of the scene. The menu over the film keeps its own look. */
body:not(.editorial-view) header nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;text-shadow:0 1px 14px #000000c0}
/* Instead of a plate behind the menu, the top of the frame falls into shadow, like a vignette. */
html[data-dir] body:not(.editorial-view) #header{background:linear-gradient(180deg,#090d0cb8 0%,#090d0c66 58%,#090d0c00 100%)}
.sound{-webkit-backdrop-filter:none;backdrop-filter:none;background:#090d0cdb;border:1px solid #e8e0cc4d;box-shadow:0 12px 34px #00000080}
.loader-fallback{-webkit-backdrop-filter:none;backdrop-filter:none}
/* Without the sound control (off by default) the menu needs no room kept for it at the right. */
html.no-sound body.editorial-view header nav{margin-right:0}
/* The page's sign-up fields: a visible ring for the keyboard, in the button's ocher. */
#signup input:focus-visible{outline:1.5px solid #b98a52;outline-offset:4px}
/* A bigger, clearer menu for every visitor. */
nav a{font-size:13px}
@media(max-width:760px),(max-width:1000px) and (orientation:portrait){nav a{font-size:12px}}
#film .synopsis-text em{font-style:italic}
/* Before the lamp-lit reveal (lab-synopsis.js) the words wait unseen; without script they are simply there. The heading
   arrives by the handover from the opening's button (September 30), so it never waits with them. */
html.syn-waiting #film .syn-word{opacity:0}
#film .syn-word{display:inline-block}
/* ---------- The sign-up popup (lab-signup-pop.js) ----------
   An Ikat Night card on a softly dimmed page; a sheet from the bottom on phones. Large targets, one clear way out. */
html.pop-open{overflow:hidden}
.signup-pop{box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:44px 40px 30px;border:1px solid #e8e0cc26;border-radius:6px;background:#0f1716;color:#e8e0cc;box-shadow:0 30px 90px -30px #000;text-align:center;font:400 17px/1.5 var(--lab-text,var(--serif))}
.signup-pop[open]{animation:pop-in 620ms cubic-bezier(.16,1,.3,1)}
.signup-pop::backdrop{background:#050807b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:pop-fade 500ms ease}
@keyframes pop-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes pop-fade{from{opacity:0}to{opacity:1}}
.signup-pop .pop-x{all:unset;box-sizing:border-box;position:absolute;top:10px;right:10px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;cursor:pointer;color:#e8e0cc;opacity:.8;transition:opacity 200ms,background-color 200ms}
@media(hover:hover){.signup-pop .pop-x:hover{opacity:1;background:#e8e0cc14}}
.signup-pop .pop-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.signup-pop .pop-kicker{margin:0 0 14px;font:500 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#b3ab97}
.signup-pop h2{margin:0;font:400 clamp(38px,6vw,52px)/1.02 var(--lab-display,var(--serif));letter-spacing:-.035em}
.signup-pop .pop-lede{margin:14px auto 26px;max-width:28ch;color:#b3ab97}
.signup-pop .pop-form{display:grid;gap:14px;text-align:left}
.signup-pop .pop-field{display:grid;gap:6px}
.signup-pop label{font:500 13px/1.3 var(--sans);letter-spacing:.04em;text-transform:none;color:#b3ab97}
.signup-pop input{box-sizing:border-box;width:100%;min-height:52px;padding:0 14px;border:1px solid #e8e0cc40;border-radius:4px;background:#090d0c;color:#e8e0cc;font:400 18px/1.2 var(--sans)}
.signup-pop input:focus{outline:2px solid #e8e0cc;outline-offset:1px;border-color:transparent}
.signup-pop input[aria-invalid=true]{border-color:#c76b6e}
.signup-pop .pop-submit{all:unset;box-sizing:border-box;cursor:pointer;min-height:58px;margin-top:6px;border-radius:999px;background:#e8e0cc;color:#0f1716;font:600 18px/1 var(--sans);text-align:center;transition:background-color 200ms,transform 160ms}
@media(hover:hover){.signup-pop .pop-submit:hover{background:#fff3da}}.signup-pop .pop-submit:active{transform:scale(.98)}
.signup-pop .pop-submit:disabled{opacity:.6;cursor:progress}
.signup-pop .pop-submit:focus-visible,.signup-pop .pop-no:focus-visible,.signup-pop .pop-x:focus-visible{outline:2px solid #e8e0cc;outline-offset:3px}
.signup-pop .pop-feedback{margin:2px 0 0;font:500 15px/1.4 var(--sans);color:#e8c9a8}
/* Always in the page so screen readers hear each message; it takes no room while empty. */
.signup-pop .pop-feedback:empty{margin:0}
.signup-pop .pop-small{margin:14px 0 0;font:400 13px/1.4 var(--sans);color:#8c8575}
.signup-pop .pop-no{all:unset;box-sizing:border-box;cursor:pointer;display:inline-block;min-height:44px;margin-top:10px;padding:0 16px;font:500 15px/44px var(--sans);color:#b3ab97;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b3ab9766}
@media(hover:hover){.signup-pop .pop-no:hover{color:#e8e0cc}}
.signup-pop .signup-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){
 .signup-pop{width:100vw;max-width:100vw;margin:auto 0 0;padding:40px 22px max(22px,env(safe-area-inset-bottom));border-radius:14px 14px 0 0;border-bottom:0}
 .signup-pop[open]{animation:pop-up 560ms cubic-bezier(.16,1,.3,1)}
 @keyframes pop-up{from{transform:translateY(100%)}to{transform:none}}
}
/* The film section: room to breathe before the cast. */
#film{padding-bottom:clamp(64px,11vh,130px)}
/* The smallest phones (320–360 px): the four menu links on one line each. */
@media(max-width:360px){nav a{font-size:11px;letter-spacing:.02em;white-space:nowrap}header nav{gap:6px}}
/* Short screens (a small phone, a phone on its side): the card tightens so everything, "No thanks" too, fits on screen. */
@media(max-height:640px){
 .signup-pop{padding:26px 22px 14px}
 .signup-pop h2{font-size:clamp(28px,5vh,38px)}
 .signup-pop .pop-kicker{margin-bottom:8px}
 .signup-pop .pop-lede{margin:8px auto 14px;font-size:15px}
 .signup-pop .pop-form{gap:8px}
 .signup-pop input{min-height:44px}
 .signup-pop .pop-submit{min-height:48px;margin-top:2px}
 .signup-pop .pop-small{margin-top:8px}
 .signup-pop .pop-no{margin-top:2px}
}
@media(orientation:landscape) and (max-height:500px){
 .signup-pop{width:min(620px,calc(100vw - 32px));margin:auto;border-radius:6px;border-bottom:1px solid #e8e0cc26}
 .signup-pop .pop-form{grid-template-columns:1fr 1fr}
 .signup-pop .pop-submit,.signup-pop .pop-feedback{grid-column:1/-1}
 .signup-pop{padding:18px 22px 10px}
 .signup-pop .pop-kicker{display:none}
 .signup-pop .pop-lede{margin:4px auto 10px;max-width:none}
 .signup-pop .pop-small,.signup-pop .pop-no{display:inline-block;vertical-align:middle;margin:6px 8px 0}
}

/* ---------- The opening (Kay and the K180 family, September 30, 2026; scene.js "The opening") ---------- */
/* One screen tall, for good: the opening is a stage, and the page below starts right after it. The small viewport
   (toolbars showing) is the height a phone shows at the top of the page, so nothing resizes when they slide away. */
#scene.runway,#scene .sticky{height:100vh;height:100svh}
/* The camera: one element carries the room and everything drawn on it, and while it moves it is a layer the graphics card
   moves as one picture: the push and the reveal's slow push redraw nothing (in a real window at 2000 px on this Mac,
   redrawing the scene on every frame held the push to about 36 frames a second). Its pieces are placed once for the screen (layoutRoom), uncropped,
   at the cover scale. The glass above it is bounded now (.recess-panel), so the layer it forces costs one screen, not seven. */
#camera{position:absolute;inset:0;transform-origin:50% 50%}
/* The hand's parallax rides on plain frames around the camera and the glass (scene.js #rig, #near-rig), so the camera and
   the glass can be handed to the graphics card for a whole move. The glass keeps its place in the scene's stacking. */
#rig,#near-rig{position:absolute;inset:0;pointer-events:none}
#near-rig{z-index:3}
/* Layers only while something moves (scene.js: #world.moving during a move, the reveal and a rewind): the camera, and the
   soft room crossfading on the way in. At rest the scene is one picture again, as the graphics budget of September 30 asks. */
#world.moving #camera{will-change:transform}
#world.moving #camera .room-soft{will-change:opacity}
/* The glass as it passes the camera: a layer the graphics card scales, never redrawn at each new size (that redraw held
   the push to about 36 frames a second in a real window at 2000 px); passing the lens, it may soften. */
#world.moving #near{will-change:transform,opacity}
#camera #room img,#camera .room-soft{inset:auto;width:auto;height:auto;max-width:none;object-fit:fill;transform:none}
/* The room's dimmer moves with the camera (the candles glow above it), so it reaches well past the frame's edges. */
#camera>#room-dim{inset:-40%}
/* The room's lines, in one place: "Come closer." at the window (it fades as the camera moves), "A little closer…" once
   the camera has stopped in the room. */
.look{display:grid;opacity:1}
.look .invitation{grid-area:1/1;opacity:var(--title-opacity,1)}
.look .invitation-in{opacity:var(--line-in,0);text-shadow:0 3px 28px #000b,0 1px 3px #0009}
/* The handover (Kay, September 30): at the closed gate the button's words are the film section's heading, waiting.
   Scrolling on, the plate and the arrow melt away and the words stay put in the heading's own type; when the heading
   comes up under them it carries them on, and its two rules draw out. */
.beat-next-label{transition:font-size 320ms cubic-bezier(.22,.61,.36,1),letter-spacing 320ms cubic-bezier(.22,.61,.36,1),color 320ms ease}
.beat-next svg{transition:width 320ms cubic-bezier(.22,.61,.36,1),opacity 200ms ease}
.beat-next{transition:border-color 600ms ease,color 600ms ease,box-shadow 600ms ease,background-color 320ms ease,padding 320ms cubic-bezier(.22,.61,.36,1),gap 320ms cubic-bezier(.22,.61,.36,1),opacity 300ms ease,transform 160ms cubic-bezier(.2,.8,.2,1)}
.beat-ui.is-bare .beat-next{background:transparent;border-color:transparent;box-shadow:none;gap:0;padding:0}
.beat-ui.is-bare .beat-next svg{width:0;opacity:0}
.beat-ui.is-bare .beat-next-label{font-family:var(--k-font);font-size:var(--k-size);font-weight:var(--k-weight);letter-spacing:var(--k-track);line-height:var(--k-line);color:var(--k-color)}
.beat-ui.is-met{opacity:0!important;visibility:hidden!important;transition:none!important}
#film .kicker::before,#film .kicker i{transition:transform 560ms cubic-bezier(.16,1,.3,1)}
#film.kicker-waiting .kicker h2{opacity:0}
#film.kicker-waiting .kicker::before,#film.kicker-waiting .kicker i{transform:scaleX(0)}