/* A six-second physical light passage, within the ordinary document flow. */
.counter-hero{height:min(790px,calc(100svh - 116px));min-height:640px}
.counter-hero .hero-art img,.counter-hero .hero-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.counter-hero .hero-art video[hidden]{display:none}
.counter-hero .hero-copy{max-width:660px;transform:translateY(-64%)}
.counter-hero .hero-copy h1{font-size:clamp(68px,6.3vw,96px)}
.counter-hero .hero-art:after{background:linear-gradient(90deg,#100a0950,transparent 57%)}
.hero-film-controls{display:flex;align-items:center;gap:15px}
.film-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:10px;letter-spacing:.03em;white-space:nowrap}
.film-toggle:before{content:'▶';font-size:9px;width:10px;text-align:center}
[data-film-state='playing'] .film-toggle:before,[data-film-state='loading'] .film-toggle:before{content:'Ⅱ';font-size:13px}
[data-film-state='ended'] .film-toggle:before{content:'↻';font-size:15px}
.film-toggle[hidden],.film-retry[hidden],.film-position[hidden]{display:none}
.film-position{width:75px;height:44px;accent-color:#f6f3eb;cursor:pointer;appearance:none;background:transparent}
.film-position::-webkit-slider-runnable-track{height:1px;background:#f6f3eb85}
.film-position::-webkit-slider-thumb{appearance:none;width:7px;height:7px;border-radius:50%;margin-top:-3px;background:#f6f3eb}
.film-position::-moz-range-track{height:1px;background:#f6f3eb85}
.film-position::-moz-range-thumb{width:7px;height:7px;border:0;border-radius:50%;background:#f6f3eb}
.film-status{position:absolute;bottom:78px;right:var(--gutter);font-size:11px;max-width:260px;text-align:right;color:var(--paper)}
.film-status:empty{display:none}
.film-retry{font-size:10px;min-height:44px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){
 .counter-hero{height:760px;min-height:0;background:#120d09}
 .counter-hero .hero-art{top:225px;bottom:0}
 .counter-hero .hero-art img,.counter-hero .hero-art video{object-position:50% 50%}
 .counter-hero .hero-art:after{background:linear-gradient(180deg,#120d09,transparent 20%,transparent 87%,#120d0970)}
 .counter-hero .hero-copy{max-width:none;padding:32px 23px 0;transform:none;top:0}
 .counter-hero .hero-copy h1{font-size:59px}
 .counter-hero .hero-copy .eyebrow{margin-bottom:18px}
 .counter-hero .hero-copy>p:not(.eyebrow){font-size:12px;margin-top:18px}
 .counter-hero .hero-copy .button{margin-top:18px}
 .counter-hero .hero-bottom{bottom:12px;gap:10px}
 .hero-film-controls{gap:9px}.film-position{width:50px}.film-toggle{font-size:9px;gap:6px}
 .film-status{bottom:64px;right:23px;font-size:10px}
}
@media(min-width:521px) and (max-width:760px){
 .counter-hero .hero-art img,.counter-hero .hero-art video{object-position:70% 100%}
}
@media(max-width:520px) and (max-height:740px){
 .counter-hero{height:600px}
 .counter-hero .hero-art{top:170px}
 .counter-hero .hero-copy{padding-top:25px}
 .counter-hero .hero-copy h1{font-size:52px}
 .counter-hero .hero-copy .eyebrow{margin-bottom:14px}
 .counter-hero .hero-copy>p:not(.eyebrow){margin-top:14px}
 .counter-hero .hero-copy .button{margin-top:14px;min-height:47px;padding:14px 23px}
}