/* The opening film and the interactive cellar are deliberately separate scenes. */
.film-hero{position:relative;isolation:isolate;min-height:0;height:100svh;height:100dvh;overflow:hidden;background:#100f0c;color:var(--cream)}
.film-background{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:center;background:url('assets/kozlovic-hero-poster.jpg') center/cover no-repeat}
.film-hero:before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(8,14,9,.64),rgba(8,14,9,.27) 48%,rgba(8,14,9,.08)),linear-gradient(180deg,rgba(7,10,6,.42),transparent 30%,transparent 65%,rgba(7,10,6,.65))}
.film-hero .film-nav{padding:27px 5%;min-height:100px;border-bottom:0;background:none}
.film-hero .brand{font-size:32px}
.film-hero .navright{font-size:11px;gap:32px}
.film-copy{position:absolute;top:50%;left:8%;transform:translateY(-40%);width:min(760px,78%)}
.film-copy .eyebrow{font-size:11px;letter-spacing:.24em;margin:0 0 26px;color:#eee1c7}
.film-copy h1{font:400 clamp(58px,6.2vw,112px)/1.04 'Cormorant Garamond',serif;letter-spacing:-.035em;margin:0;text-wrap:balance}
.film-copy h1 em{font-weight:400;color:#e1cba6}
.film-intro{margin:28px 0 34px;font-size:14px;line-height:1.7;letter-spacing:.025em;color:#eee9de}
.film-cta{display:inline-flex;gap:45px;align-items:center;text-decoration:none;padding:15px 0;border-bottom:1px solid #e1cba6aa;font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.film-cta span{font-size:22px;transition:transform .25s}.film-cta:hover span{transform:translate(3px,3px)}
.film-bottom{position:absolute;bottom:32px;left:5%;right:5%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#eee9de}
.film-scroll{display:flex;align-items:center;gap:20px;text-decoration:none;padding:12px 0}
.film-scroll span{font-size:20px}
.film-toggle{justify-self:end;display:inline-flex;align-items:center;gap:12px;color:inherit;background:transparent;border:0;padding:8px 0;font-size:9px;text-transform:uppercase;letter-spacing:.12em;min-height:44px}
.film-toggle-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid #eee9de70;border-radius:50%;font-size:12px;letter-spacing:0}
.film-toggle:hover .film-toggle-icon{background:#fff2}
#collection{scroll-margin-top:0}
@media(min-width:1800px){.film-copy{left:10%}.film-copy h1{font-size:112px}}
@media(max-width:900px){.film-hero{min-height:0}.film-hero .navright{gap:20px;font-size:10px}.film-copy{left:7%;width:86%}.film-copy h1{font-size:clamp(56px,7.9vw,76px)}.film-caption{display:none}.film-bottom{grid-template-columns:1fr auto}.film-scroll{justify-self:start}}
@media(max-width:700px){.film-hero{min-height:0;height:100svh;height:100dvh}.film-hero .film-nav{padding:22px 6%;min-height:86px;gap:16px}.film-hero .brand{font-size:26px}.film-hero .navright{display:flex;gap:18px}.film-hero .navright a{display:none}.film-hero .navright a[href="#collection"]{display:block;font-size:10px}.film-copy{left:7%;width:86%;top:48%;transform:translateY(-35%)}.film-copy .eyebrow{font-size:9px;letter-spacing:.18em;margin-bottom:23px}.film-copy h1{font-size:clamp(46px,10.6vw,70px);line-height:1.08}.film-intro{font-size:12px;max-width:240px;margin:24px 0}.film-cta{font-size:10px;gap:32px}.film-bottom{left:7%;right:7%;bottom:24px;gap:14px;font-size:8px}.film-toggle-label{display:none}.film-scroll{gap:13px}.film-hero:before{background:linear-gradient(90deg,#080e0999,#080e0933),linear-gradient(180deg,#070a0666,transparent 25%,transparent 60%,#070a06aa)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film-cta span{transition:none}}

/* One viewport, one immersive scene at every breakpoint. */
.film-copy{width:min(760px,64%)}
.film-copy h1{font-size:clamp(48px,min(5.5vw,10vh),100px)}
.film-hero .film-nav{min-height:0;padding-top:clamp(16px,3vh,27px);padding-bottom:clamp(16px,3vh,27px)}
.film-bottom{bottom:max(18px,env(safe-area-inset-bottom));}
@media(max-width:900px){
 .film-background{object-position:center;background-position:center}
 .film-copy{left:7%;width:86%;top:auto;bottom:clamp(96px,13dvh,140px);transform:none}
 .film-copy h1{font-size:clamp(38px,min(7.7vw,8dvh),64px)}
 .film-copy .eyebrow{margin-bottom:18px;font-size:9px}
 .film-intro{margin:18px 0 16px;font-size:12px}
 .film-cta{font-size:10px;padding:12px 0;min-height:44px}
 .film-hero:before{background:linear-gradient(180deg,#07090566,transparent 24%,#07090522 42%,#070905c4 84%,#070905dd)}
 .film-hero .navright{display:flex}
 .film-hero .navright a{display:none}
 .film-hero .navright a[href="#collection"]{display:block;font-size:10px;padding:12px 0}
}
@media(max-width:500px){
 .film-copy h1{font-size:clamp(34px,10.2vw,48px)}
 .film-copy{bottom:100px}
 .film-intro{display:none}
 .film-cta{margin-top:16px}
 .film-copy .eyebrow{font-size:8px;letter-spacing:.13em}
}
@media(max-height:600px){
 .film-hero .film-nav{padding-top:12px;padding-bottom:12px}
 .film-hero .brand{font-size:24px}
 .film-copy{top:50%;bottom:auto;transform:translateY(-35%)}
 .film-copy h1{font-size:clamp(30px,7dvh,48px)}
 .film-copy .eyebrow{margin-bottom:10px;font-size:8px}
 .film-intro{display:none}
 .film-cta{margin-top:12px;padding:8px 0;font-size:9px}
 .film-bottom{bottom:10px}
}

/* Native widescreen and portrait footage fills the viewport directly. */
.film-background{object-fit:cover;object-position:center;background:none}
.film-copy{left:6%;width:49%}
.film-copy h1{font-size:clamp(40px,min(4.8vw,9vh),90px)}
@media(max-aspect-ratio:1/1){
 .film-background{object-position:center}
 .film-copy{left:7%;width:86%;top:auto;bottom:clamp(92px,12dvh,140px);transform:none}
 .film-copy h1{font-size:clamp(34px,min(8vw,6dvh),62px)}
 .film-copy .eyebrow{font-size:8px;margin-bottom:14px}
 .film-intro{display:none}
 .film-cta{margin-top:14px;padding:10px 0;font-size:9px}
 .film-hero:before{background:linear-gradient(180deg,#07090566,transparent 20%,transparent 55%,#070905b3 83%,#070905d9)}
}

/* Keep the central bottle unobstructed; the collection link remains available. */
.film-copy{width:40%}
.film-copy{transition:opacity .45s ease}
@media(max-aspect-ratio:1/1){
 .film-copy{width:86%}
 .film-hero.product-scene .film-copy:not(:focus-within){opacity:0;pointer-events:none}
 .film-hero.product-scene:before{background:linear-gradient(180deg,#07090555,transparent 20%,transparent 85%,#07090588)}
}
@media(prefers-reduced-motion:reduce){.film-copy{transition:none}}

/* Tablet composition: generous touch spacing, full-height film, no phone crop. */
@media (min-width:600px) and (max-width:1400px) and (min-aspect-ratio:2/3) and (max-aspect-ratio:3/2){
 .film-hero .film-nav{padding:24px 5%;align-items:center}
 .film-hero .brand{font-size:30px;line-height:1.2}
 .film-hero .navright{display:flex;gap:24px;font-size:11px}
 .film-hero .navright a{display:flex;align-items:center;min-height:44px}
 .film-hero .navright a[href="#collection"]{font-size:11px}
 .film-bottom{left:5%;right:5%;bottom:max(20px,env(safe-area-inset-bottom));grid-template-columns:1fr auto;font-size:10px}
 .film-caption{display:none}
 .film-scroll{justify-self:start;min-height:44px}
 .film-toggle{font-size:10px;min-width:44px}
 .film-toggle-label{display:inline}
 .film-copy{left:6%;width:82%;top:auto;bottom:13dvh;transform:none}
 .film-copy h1{font-size:clamp(44px,5.6vw,64px);line-height:1.08}
 .film-copy .eyebrow{font-size:10px;margin-bottom:20px}
 .film-intro{display:none}
 .film-cta{font-size:11px;margin-top:22px;min-height:44px}
 .film-hero.product-scene .film-copy:not(:focus-within){opacity:0;pointer-events:none}
}
@media (min-width:600px) and (max-aspect-ratio:1/1){
 .film-hero .navright a[href="#story"]{display:none}
}