/* Portrait-led opening and continuous, scroll-responsive project films. */
:root{--header-height:76px}
html{scroll-padding-top:80px}
.cinematic-home{background:#08090b}
.cinematic-home .site-header{position:fixed;height:var(--header-height);min-height:0;inset:0 0 auto;padding-block:14px;background:linear-gradient(#08090bdb,#08090b2b);border-bottom-color:#ffffff0e;backdrop-filter:blur(10px);transition:background .3s,transform .3s}
.cinematic-home.is-scrolled .site-header{background:#0a0b0deb}
.intro-stage{height:125svh;position:relative}
body.cinematic-home #home.hero{position:sticky;top:0;height:100svh;min-height:0;max-height:none;padding:0;border:0;isolation:isolate}
.hero-scene{position:absolute;inset:0;padding:calc(var(--header-height) + 28px) 4.5vw 28px;transform:translate3d(0,var(--intro-pan,0px),0) scale(var(--intro-scale,1));transform-origin:50% 60%;opacity:var(--intro-opacity,1);will-change:transform}
#home .hero-word{font-size:clamp(100px,16.2vw,268px);margin:3.5svh 0 0;line-height:1.04;letter-spacing:-.075em}
body.cinematic-home #home .portrait-wrap{top:25svh;width:min(39vw,540px);height:min(31.3vw,433px);bottom:auto;mask-image:linear-gradient(#000 80%,transparent);z-index:2}
#home .hero-copy{top:55%;left:5%;max-width:26%}
#home .hero-copy h2{font-size:clamp(30px,3vw,46px)}
#home .hero-action{top:58%;right:5%;width:215px}
#home .hero-action>.button{font-size:10px;padding:14px 17px;gap:26px}
#home .hero-bottom{bottom:30px}
#home .hero-orbit{top:25svh;opacity:.45;transform:translateX(-50%) rotate(var(--orbit-angle,0deg));border-style:dashed}
#home .scroll-cue i{display:inline-block;animation:scrollArrow 1.8s ease-in-out infinite}
@keyframes scrollArrow{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.cinema-sequence{position:relative;z-index:2;margin:0;padding:0;background:#08090b}
.film-chapter{margin:0;padding:0;scroll-margin-top:-80px}
.film-stage{height:140svh;position:relative;margin:0}
.film-cover,.film-chapter:first-of-type .film-cover{position:sticky;top:0;height:100svh;min-height:0;max-height:none;background:#0a0a0c;isolation:isolate}
.film-backdrop{position:absolute;inset:-25px;z-index:-4;background:var(--film-poster) center/cover;filter:blur(24px) brightness(.4);transform:translate3d(0,var(--film-pan,0px),0) scale(1.08);pointer-events:none}
.ambient-film{z-index:-3;object-fit:contain;object-position:50% 50%;filter:saturate(.95);transform:scale(var(--film-scale,1));transform-origin:center;will-change:transform}
.wide-frame .ambient-film{object-fit:contain;transform:none;filter:none;will-change:auto}
.film-shade{background:linear-gradient(180deg,#04040650,transparent 24%,transparent 50%,#0404063d 66%,#040406dc 100%);pointer-events:none}
.film-topline{top:calc(var(--header-height) + 22px);left:4.4vw;right:5.7vw;font-size:8px;letter-spacing:.14em}
.film-title{left:4.4vw;right:8vw;bottom:91px;transform:translate3d(0,var(--title-pan,0px),0);transition:opacity .3s}
.film-eyebrow{font-size:8px;letter-spacing:.18em;margin-bottom:14px}
.film-title h2{font-size:clamp(30px,3.5vw,57px);line-height:1.04;letter-spacing:-.045em;max-width:760px;text-shadow:0 2px 22px #0006}
.film-title em{letter-spacing:-.045em}
.film-actions{margin-top:19px;gap:24px;align-items:center}
.film-play{padding:10px 14px;min-height:40px;font-size:10px;gap:10px;background:#e2e5eded;border:0;border-radius:2px}
.film-time{font-size:9px;margin-left:12px}
.film-details{font-size:10px;gap:16px;padding:10px 0}
.film-bottom{left:4.4vw;right:4.4vw;bottom:26px;font-size:7px;letter-spacing:.1em}
.film-utility{display:flex;align-items:center;gap:8px}
.clean-view-toggle,.ambient-toggle{padding:10px 13px;min-height:36px;font:9px/1.2 Arial,sans-serif;border:1px solid #ffffff38;color:#e8eaef;background:#0003;border-radius:30px;letter-spacing:.02em}
.clean-view-toggle:hover{background:#fff2}
.film-cover.clean-view .film-title,.film-cover.clean-view .film-topline,.film-cover.clean-view .film-credit,.film-cover.clean-view .film-scroll{opacity:0;visibility:hidden;pointer-events:none}
.film-cover.clean-view .film-shade{opacity:.25}
.film-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff12;z-index:5}
.film-progress i{display:block;width:100%;height:100%;background:#c6cddd;transform-origin:left;transform:scaleX(var(--chapter-progress,0))}
.film-story{position:relative;z-index:3;margin:0;padding:42px 4.4vw 48px;background:#0a0b0d;border-top:1px solid #ffffff10}
.story-intro{gap:6vw;grid-template-columns:1fr 1fr}
.story-intro .eyebrow{font-size:8px;margin-bottom:15px}
.story-intro h3{font-size:clamp(25px,2.6vw,39px);max-width:560px;line-height:1.12}
.story-intro p{font-size:13px;line-height:1.8;margin-bottom:12px;max-width:610px}
.story-intro .text-link{font-size:11px}
.project-facts{margin:26px 0 24px;padding:17px 0}
.project-facts dt{font-size:8px;margin-bottom:6px}.project-facts dd{font-size:12px}
.story-gallery{gap:14px}
.cinema-still img{height:240px}
.cinema-still span{font-size:9px;margin-top:9px}
.festival-programme{margin-top:38px;padding-top:32px;gap:6vw}
.programme-heading h3,.atlas-heading h3{font-size:clamp(29px,3vw,46px)}
.programme-heading .eyebrow,.atlas-heading .eyebrow{font-size:8px;margin-bottom:15px}
.programme-items h4{font-size:23px}.programme-items article{padding-bottom:18px;margin-bottom:18px}
.design-atlas{margin-top:44px;padding-top:34px}
.atlas-heading{margin-bottom:24px}.atlas-heading>p{font-size:12px}
.atlas-enlarge img{height:min(62svh,600px)}
.film-index{position:fixed;top:50%;right:16px;left:auto;transform:translateY(-50%);z-index:45;padding:7px;border:1px solid #ffffff20;border-radius:30px;background:#0a0c0fdd;backdrop-filter:blur(12px);overflow:visible;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s}
.in-film-sequence .film-index{opacity:1;visibility:visible;pointer-events:auto}
.film-index>div{flex-direction:column;gap:3px;overflow:visible}
.film-index a{position:relative;display:flex;align-items:center;justify-content:center;width:29px;height:29px;padding:0;color:#9aa1b1;border-radius:50%;text-decoration:none}
.film-index a b{font:9px/1 Arial,sans-serif;font-variant-numeric:tabular-nums}
.film-index a[aria-current=true]{background:#d2d7e3;color:#12151d}
.film-index a span{position:absolute;right:43px;background:#101318f5;padding:10px 13px;border:1px solid #ffffff25;border-radius:2px;color:#eee;opacity:0;pointer-events:none;transform:translateX(6px);transition:.2s;font-size:10px;letter-spacing:.02em}
.film-index a:hover span,.film-index a:focus-visible span{opacity:1;transform:none}
.scroll-enhanced .scroll-reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.scroll-enhanced .scroll-reveal.is-visible{opacity:1;transform:none}
.story-gallery .scroll-reveal:nth-child(2){transition-delay:70ms}.story-gallery .scroll-reveal:nth-child(3){transition-delay:140ms}
.motion-paused .scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}
.motion-paused .hero-scene,.motion-paused .ambient-film,.motion-paused .film-title{transform:none!important;opacity:1!important}
@media(min-width:1700px){body.cinematic-home #home .portrait-wrap{top:27svh;width:590px;height:474px}.cinema-still img{height:290px}}
@media(max-width:1000px){#home .hero-copy{max-width:25%}#home .hero-copy h2{font-size:32px}#home .hero-action{width:185px}body.cinematic-home #home .portrait-wrap{width:43vw;height:34.5vw;top:29svh}.film-index{right:10px}.film-title h2{font-size:42px}.cinema-still:first-child img{height:320px}.cinema-still img{height:230px}}
@media(max-width:760px){
 :root{--header-height:70px}
 .cinematic-home .site-header{padding:12px 5vw}.cinematic-home .site-header nav{top:70px}
 .intro-stage{height:112svh}
 .hero-scene{padding:calc(var(--header-height) + 28px) 5vw 22px}
 #home .hero-overline{font-size:6px;letter-spacing:.08em}
 #home .hero-word{font-size:16.7vw;margin-top:6svh;letter-spacing:-.065em}
 body.cinematic-home #home .portrait-wrap{top:27svh;width:min(86vw,420px);height:min(69vw,337px)}
 #home .hero-copy{top:auto;bottom:128px;left:5%;max-width:46%}
 #home .hero-copy h2{font-size:clamp(23px,6.5vw,34px);margin:10px 0}
 #home .hero-copy .eyebrow{font-size:6px;letter-spacing:.07em}
 #home .hero-action{top:auto;right:5%;bottom:138px;width:41%}
 #home .hero-action>.button{font-size:9px;padding:12px 10px;gap:10px;min-height:42px}
 #home .hero-action .quiet-link{font-size:8px;line-height:1.6}
 #home .hero-bottom{bottom:31px;font-size:6px}
 #home .hero-orbit{top:25svh;width:110vw}
 .film-stage{height:126svh}
 .film-cover,.film-chapter:first-of-type .film-cover{height:100svh;min-height:0;max-height:none}
 .ambient-film{object-fit:contain;transform:none;filter:none;will-change:auto}
 .film-backdrop{filter:blur(22px) brightness(.4)}
 .film-shade{background:linear-gradient(#04040660,transparent 22%,transparent 58%,#04040680 75%,#040406c9)}
 .film-topline{top:calc(var(--header-height) + 20px);left:5vw;right:5vw;font-size:7px;letter-spacing:.08em}
 .film-title{left:5vw;right:5vw;bottom:116px}
 .film-eyebrow{font-size:7px;letter-spacing:.13em;margin-bottom:12px}
 .film-title h2{font-size:clamp(26px,7vw,38px);line-height:1.07;max-width:90%}
 .film-actions{margin-top:15px;gap:22px;flex-wrap:nowrap;align-items:center}
 .film-play{font-size:9px;min-height:40px;padding:11px 12px;gap:8px}
 .film-time{font-size:8px;margin-left:5px}
 .film-details{font-size:9px;gap:8px;padding:10px 0}
 .film-bottom{left:5vw;right:5vw;bottom:60px;justify-content:flex-end}
 .film-credit,.film-scroll{display:none}
 .clean-view-toggle,.ambient-toggle{font-size:8px;min-height:34px;padding:9px 12px}
 .film-index{top:auto;bottom:12px;right:50%;transform:translateX(50%);padding:4px 6px;border-radius:30px}
 .film-index>div{flex-direction:row;gap:4px}
 .film-index a{width:28px;height:28px}.film-index a b{font-size:8px}
 .film-index a span{display:none}
 .film-story{padding:32px 5vw 36px}
 .story-intro{grid-template-columns:1fr;gap:18px}.story-intro h3{font-size:29px}
 .story-intro p{font-size:12px;line-height:1.8}.story-intro .text-link{font-size:10px}
 .project-facts{gap:15px;margin-top:22px;padding:16px 0}.project-facts dd{font-size:11px}
 .cinema-still:first-child img{height:230px}.cinema-still img{height:140px}
 .cinema-still span{font-size:8px}.story-gallery{gap:12px}
 .festival-programme{margin-top:30px;padding-top:26px;gap:25px}
 .programme-heading h3,.atlas-heading h3{font-size:32px}.programme-items p{font-size:12px}
 .design-atlas{margin-top:32px;padding-top:28px}.atlas-heading>p{margin-top:16px}
 .atlas-enlarge img{height:310px}.atlas-toolbar{font-size:10px}
}
@media(max-width:760px) and (max-height:720px){
 body.cinematic-home #home .portrait-wrap{top:27svh;width:76vw;height:61vw;max-height:31svh}
 #home .hero-word{margin-top:4svh}#home .hero-copy{bottom:92px}#home .hero-action{bottom:100px}
 #home .hero-copy h2{font-size:24px}.film-title{bottom:115px}.film-title h2{font-size:26px}
 .film-eyebrow{margin-bottom:7px}.film-actions{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
 .intro-stage,.film-stage{height:100svh}.hero-scene,.ambient-film,.film-title{transform:none!important;opacity:1!important}
 .scroll-enhanced .scroll-reveal{opacity:1;transform:none}.hero-scene{will-change:auto}
}
/* Comfortable phone controls and breathing room around the device's safe areas. */
@media(max-width:760px){
 .cinematic-home .site-header{height:calc(var(--header-height) + env(safe-area-inset-top));padding-top:calc(12px + env(safe-area-inset-top))}
 .cinematic-home .site-header nav{top:calc(70px + env(safe-area-inset-top))}
 .menu-toggle,.header-controls>button{min-height:44px;min-width:44px}
 .menu-toggle{white-space:nowrap;font-size:10px;letter-spacing:.06em}
 #home .hero-word{font-size:15.7vw}
 .film-play,.film-details,.clean-view-toggle,.ambient-toggle{min-height:44px}
 .film-details{display:inline-flex;align-items:center}
 .film-index{bottom:calc(12px + env(safe-area-inset-bottom))}
 .film-index a{width:36px;height:36px}
 .film-bottom{bottom:calc(70px + env(safe-area-inset-bottom))}
 .film-title{bottom:calc(133px + env(safe-area-inset-bottom))}
 .story-intro p{font-size:14px;line-height:1.8}.project-facts dd{font-size:13px}
 .hero-scene{padding-top:calc(var(--header-height) + 28px + env(safe-area-inset-top))}
 #home .hero-bottom{bottom:calc(28px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
 .header-controls{gap:8px}.site-header .wordmark{font-size:16px}
}
@media(max-width:760px) and (max-height:720px){
 body.cinematic-home #home .portrait-wrap{top:29svh;max-height:29svh}
 .ambient-film{object-position:50% 36%}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 :root{--header-height:56px}
 .cinematic-home .site-header{height:56px;min-height:56px;padding:8px max(4.5vw,env(safe-area-inset-right)) 8px max(4.5vw,env(safe-area-inset-left))}
 .site-header .wordmark{font-size:17px}.site-header .wordmark small{font-size:6px}
 .menu-toggle{display:block!important;white-space:nowrap;min-height:44px;font-size:10px}
 .cinematic-home .site-header nav{display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;align-items:stretch;background:#101216;padding:16px 5vw;max-height:calc(100dvh - 56px);overflow:auto}
 .cinematic-home .site-header nav.is-open{display:flex!important}.site-header nav a{font-size:13px;min-height:44px;display:flex;align-items:center}
 .hero-scene{padding:68px 4.5vw 16px}
 #home .hero-overline{font-size:7px}
 #home .hero-word{font-size:10vw;margin-top:2svh}
 body.cinematic-home #home .portrait-wrap{top:44svh;width:32vw;height:44svh;max-height:44svh}
 #home .hero-copy{top:auto;bottom:45px;max-width:27%}
 #home .hero-copy h2{font-size:clamp(21px,3vw,26px);margin:8px 0}
 #home .hero-copy .eyebrow{font-size:6px}
 #home .hero-copy p,#home .hero-action>p{display:none}
 #home .hero-action{top:auto;bottom:40px;width:24%;max-width:185px}
 #home .hero-action>.button{font-size:9px;min-height:44px;padding:11px 12px;gap:12px}
 #home .hero-action .quiet-link{font-size:8px;line-height:1.5}
 #home .hero-bottom{bottom:15px;font-size:6px}
 #home .fc-replay{margin-top:9px;font-size:8px}
}
