/* Hallmark · user-directed hero: the tea scene fills the first screen, without a frame. */
:root{--hero-shade:#102319ef;--hero-shade-soft:#10231999}
.hero.cinema-hero{display:flex;align-items:center;position:relative;isolation:isolate;overflow:clip;min-height:calc(100svh - 124px);padding:64px var(--gutter);gap:0;background:var(--surface)}
.hero.cinema-hero .cinema-background{position:absolute;inset:0;z-index:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;border-radius:0;overflow:clip;align-self:auto}
.hero.cinema-hero .cinema-background video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero.cinema-hero .cinema-background:after{content:'';display:block;position:absolute;inset:0;background:linear-gradient(90deg,var(--surface) 0%,var(--hero-shade) 28%,var(--hero-shade-soft) 46%,var(--transparent) 78%),linear-gradient(0deg,var(--surface) 0%,var(--transparent) 20%);pointer-events:none}
.hero.cinema-hero .hero-copy{display:block;position:relative;z-index:2;max-width:680px;padding:0}
.hero.cinema-hero .hero-copy h1{font-size:clamp(56px,6.2vw,96px);line-height:1.02;max-width:12ch}
.hero.cinema-hero .hero-copy .intro{font-size:21px;margin:32px 0;max-width:30ch}
.hero.cinema-hero .hero-copy>.primary{position:relative}
.hero.cinema-hero .hero-secondary{display:flex;margin-top:20px}
.hero.cinema-hero .cinema-scroll{display:none}
@media(max-width:900px){.hero.cinema-hero{min-height:660px;padding-block:48px}.hero.cinema-hero .hero-copy h1{font-size:64px}.hero.cinema-hero .hero-copy{max-width:60%}}
@media(max-width:600px){
 .hero.cinema-hero{display:flex;min-height:650px;padding:48px 20px;align-items:center}
 .hero.cinema-hero .hero-copy{display:block;max-width:100%;width:100%}
 .hero.cinema-hero .hero-copy h1{font-size:clamp(43px,10.8vw,64px);max-width:10ch;line-height:1.05}
 .hero.cinema-hero .hero-copy .intro{font-size:17px;max-width:25ch;margin:24px 0}
 .hero.cinema-hero .hero-secondary{margin-top:20px;font-size:15px}
 .hero.cinema-hero .cinema-background video{object-position:78% center}
 .hero.cinema-hero .cinema-background:after{background:linear-gradient(90deg,var(--hero-shade) 0%,var(--hero-shade-soft) 48%,var(--transparent) 100%),linear-gradient(0deg,var(--surface) 0%,var(--transparent) 32%)}
}