/* Selectively graded films share the same timing and full-subject composition. */
:root{--film-rgb:23,7,5}
:root[data-theme=emerald]{--film-rgb:5,12,10}
:root[data-theme=amethyst]{--film-rgb:24,6,37}
.hero:before,.hero:after{display:none}
.hero{--on-dark:#f4eee4;--hero-muted:#d8cfc4;background:rgb(var(--film-rgb));color:#f4eee4;isolation:isolate;min-height:790px;height:max(790px,calc(100svh - var(--palette-height,0px)));max-height:1100px}
.hero-cinema{position:absolute;inset:auto 0 0;width:100%;height:min(56.25vw,calc(100% - 120px));aspect-ratio:16/9;z-index:-1;pointer-events:none;overflow:hidden}
.hero-cinema img,.hero-cinema video{position:absolute;bottom:0;left:auto;right:0;width:auto;height:100%;aspect-ratio:16/9;object-fit:contain;object-position:right bottom;mask-image:linear-gradient(90deg,transparent,#000 16%)}
.hero-cinema video{opacity:0;transition:opacity .3s ease-out}
.hero-cinema.has-film video{opacity:1}
.hero-cinema:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--film-rgb),.82),rgba(var(--film-rgb),.62) 36%,transparent 64%),linear-gradient(180deg,rgb(var(--film-rgb)),transparent 20%,transparent 78%,rgba(var(--film-rgb),.85));pointer-events:none}
.hero-copy{position:relative;z-index:2;width:55%;margin-top:clamp(55px,10vh,125px)}
.hero-copy h1{font-size:clamp(80px,8.2vw,144px);letter-spacing:-.04em}
.hero-copy h1 em{letter-spacing:-.04em;color:#e7d59f}
.hero-intro{color:#e1d7cd;max-width:370px}
.hero .pill.light{background:#f4eee4;color:#32131e}
.hero-bottom{z-index:3;color:#f4eee4}
.hero-topline{color:#f4eee4}
body[data-page=home] .header{color:#f4eee4}
@media(max-width:900px){
 .hero{height:auto;max-height:none;min-height:0;padding-bottom:120px}
 .hero-copy{width:100%;margin-top:45px}
 .hero-copy h1{font-size:clamp(72px,10vw,100px)}
 .hero-cinema{position:relative;inset:auto;width:auto;margin:5px calc(-1 * var(--gutter)) 0;height:auto;aspect-ratio:16/9;z-index:0}
 .hero-cinema img,.hero-cinema video{left:0;right:auto;width:100%;object-fit:contain;object-position:center;mask-image:none}
 .hero-cinema:after{background:linear-gradient(180deg,rgb(var(--film-rgb)),transparent 18%,transparent 88%,rgb(var(--film-rgb)))}
}
@media(max-width:700px){
 .hero{padding-top:113px;padding-bottom:112px}
 .hero-copy{margin-top:32px}
 .hero-copy h1{font-size:clamp(56px,15.5vw,90px)}
 .hero-intro{max-width:31ch}
 .hero-cinema{margin-top:25px}
}
@media(prefers-reduced-motion:reduce){.hero-cinema video{transition:none}}