/* The Owner's Day film. Tokens map onto the live site's type and colors. */
.film{--display:'Clash Display',sans-serif;--body:'General Sans',sans-serif;--mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;--mute:#9aa59f;--film-ink:#f2f4ee;color:var(--text)}
/* Inside the film, text lines up with the 1200px page column on wide screens */
.film{--gut:max(18px,env(safe-area-inset-left,0px),calc((100vw - 1200px) / 2 + 18px));--gut-r:max(18px,env(safe-area-inset-right,0px),calc((100vw - 1200px) / 2 + 18px))}
/* Home film. The section is tall; the stage pins and the scroll position drives the playhead. */
.film{position:relative;height:var(--len,960vh);background:#05080b}
.stage{--lb:0;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#05080b;isolation:isolate}
.cam{position:absolute;inset:0;transform-origin:50% 45%;will-change:transform}
.still{position:absolute;inset:0;background:#05080b center/cover no-repeat;opacity:0;transition:opacity .6s}
.still.on{opacity:1}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.film.ready .cam video{opacity:1}
.film.ready .cam video.off{opacity:0;transition:none}
.tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,11,.55) 0%,rgba(5,8,11,0) 26%,rgba(5,8,11,.08) 50%,rgba(5,8,11,.88) 100%)}
.blackout{position:absolute;inset:0;z-index:4;background:#05080b;opacity:0;pointer-events:none}
/* Letterbox bars */
.bars::before,.bars::after{content:"";position:absolute;left:0;right:0;height:calc(var(--lb) * 8.5vh);background:#000;z-index:4;transition:height .35s cubic-bezier(.2,.7,.2,1)}
.bars::before{top:0}.bars::after{bottom:0}
@media (orientation:portrait){.bars::before,.bars::after{height:calc(var(--lb) * 5vh)}}

/* HUD */
.hud{position:absolute;z-index:6;top:calc(env(safe-area-inset-top,0px) + var(--navh,64px) + 14px);left:var(--gut);right:var(--gut-r);display:flex;justify-content:space-between;align-items:flex-start;gap:16px;pointer-events:none;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.clock{display:flex;align-items:center;gap:14px}
.clock .t{font:600 50px/1 var(--display);color:var(--lime);font-variant-numeric:tabular-nums;min-width:4.4ch}
.clock .lab{display:grid;gap:8px;font:500 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.daybar{position:relative;width:200px;height:3px;background:rgba(255,255,255,.22)}
.daybar i{position:absolute;inset:0 auto 0 0;background:var(--lime);width:0}
.daybar b{position:absolute;top:-3px;width:1px;height:9px;background:rgba(255,255,255,.55)}
.ends{display:flex;justify-content:space-between;width:200px;font:500 10px/1 var(--mono);color:var(--mute);letter-spacing:.04em}
.chap{font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(238,242,234,.8);text-align:right}
.chap b{display:block;font:600 22px/1 var(--display);color:var(--film-ink);letter-spacing:0}
@media (max-width:700px){.clock .t{font-size:36px}.daybar,.ends{width:118px}.hud{top:calc(env(safe-area-inset-top,0px) + var(--navh,64px) + 12px)}.chap{font-size:10px;max-width:34vw}.chap>span{white-space:nowrap}.chap b{font-size:16px;line-height:1.05}}

/* Beats */
.fbeat{position:absolute;z-index:5;left:var(--gut);right:var(--gut-r);bottom:calc(var(--lb) * 8.5vh + 9vh);max-width:680px;opacity:0;pointer-events:none;text-shadow:0 2px 24px rgba(0,0,0,.6);will-change:transform,opacity}
.fbeat.on{pointer-events:auto}
.fbeat .time{font:500 13px/1 var(--mono);color:var(--lime);letter-spacing:.08em;text-shadow:none}
.fbeat h1{font-size:clamp(46px,min(8vw,10vh),110px);max-width:12ch;margin-top:14px}
.fbeat h1 em,.fbeat h2 em{font-style:normal;color:var(--lime)}
.fbeat h2{font-size:clamp(34px,min(5.6vw,7.5vh),70px);margin-top:10px;max-width:14ch}
.fbeat p{margin-top:14px;font-size:19px;line-height:1.5;color:#e2e9df;max-width:46ch}
.fbeat .cite{font:500 11px/1.2 var(--mono);letter-spacing:.04em;display:inline-block;margin-top:14px;border:1px solid rgba(255,255,255,.24);padding:5px 8px;border-radius:4px;background:rgba(5,8,11,.5);text-shadow:none;color:#c4cec8}
.fbeat .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.fbeat.endb{bottom:calc(9vh + env(safe-area-inset-bottom,0px))}
.big430{position:absolute;z-index:4;right:var(--gut-r);top:18%;font:600 clamp(110px,20vw,280px)/1 var(--display);color:rgba(232,176,74,.26);font-variant-numeric:tabular-nums;pointer-events:none}
@media (orientation:portrait){.big430{top:auto;bottom:46%;right:auto;left:var(--gut)}.fbeat{bottom:calc(var(--lb) * 5vh + 7vh + 22px)}.fbeat p{font-size:17px}}

/* Chapter cards: hold on black between stops */
.chapter{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:14px;opacity:0;pointer-events:none;text-align:center;padding:0 var(--gut-r) 0 var(--gut)}
.chapter .n{font:500 12px/1 var(--mono);letter-spacing:.2em;color:var(--mute);text-transform:uppercase}
.chapter .tm{font:600 clamp(96px,18vw,220px)/.9 var(--display);color:var(--film-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;transform:scale(calc(1.06 - var(--k,0) * .06));transition:transform .2s linear}
.chapter .tm small{font-size:.28em;color:var(--lime);margin-left:.12em;letter-spacing:.04em}
.chapter .l{font:500 15px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--film-ink)}
.chapter .rule{width:min(320px,60vw);height:1px;background:linear-gradient(90deg,transparent,var(--lime),transparent)}

/* Controls */
.ctrl{position:absolute;z-index:7;bottom:calc(var(--lb) * 8.5vh + 18px);display:flex;gap:10px;align-items:center}
.ctrl.l{left:var(--gut)}.ctrl.r{right:var(--gut-r)}
@media (orientation:portrait){.ctrl{bottom:calc(var(--lb) * 5vh + 14px)}}
.pill{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--film-ink);background:rgba(5,8,11,.55);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 13px;cursor:pointer;text-decoration:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pill svg{width:15px;height:15px}
.pill[aria-pressed="true"]{border-color:var(--lime);color:var(--lime)}
.cue{position:absolute;z-index:6;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));font:500 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:grid;justify-items:center;gap:8px}
.cue::after{content:"";width:1px;height:28px;background:linear-gradient(var(--lime),transparent);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-6px);opacity:0}50%{opacity:1}100%{transform:translateY(6px);opacity:0}}
.standin{position:absolute;z-index:6;right:var(--gut-r);bottom:calc(var(--lb) * 8.5vh + 64px);font:500 10px/1.35 var(--mono);color:rgba(238,242,234,.55);max-width:220px;text-align:right}
@media (max-width:700px){.standin{display:none}.cue{display:none}}

/* The nav floats over the opening frame and scrolls away with it */
.site-nav{position:absolute;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(5,8,11,.82),rgba(5,8,11,0))}

/* Live-site type inside the film */
.fbeat h1{font-size:clamp(42px,min(6vw,8.4vh),88px);max-width:15ch;margin:14px 0 0;line-height:1.02;letter-spacing:-.04em}
.fbeat h2{line-height:1.04;letter-spacing:-.035em}
.fbeat .hero-positioning{font:600 13px/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.fbeat .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;align-items:center}
.fbeat .skip-film{color:var(--film-ink);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#ffffff66;padding:10px 4px}
.fbeat .skip-film:hover{text-decoration-color:var(--lime)}
.fbeat .secondary{color:var(--film-ink)}
@media (max-width:700px){.fbeat p{font-size:16px}.fbeat .primary{min-height:48px}}
@media (orientation:portrait) and (max-height:760px){.fbeat h1{font-size:40px}.fbeat .actions{margin-top:16px}}

/* Reduced motion or no JavaScript: the film becomes one still with the opening words */
.film.is-still{height:auto}.film.is-still .stage{position:relative;height:88svh}
.film.is-still .cam video,.film.is-still .chapter,.film.is-still .cue,.film.is-still .hud{display:none}
@media (prefers-reduced-motion:reduce){
  .film{height:auto}.stage{position:relative;height:88svh}
  .cam video{display:none}.chapter,.cue{display:none}
}
/* Opening slide: the franchise line leads, big */
.fbeat[data-at="intro"]{max-width:min(1100px,calc(100vw - var(--gut) - var(--gut-r)))}
.fbeat h1.hero-big{font-size:clamp(50px,min(9vw,12vh),136px);max-width:13ch;margin:0;line-height:.98;letter-spacing:-.045em}
.fbeat .hero-tag{margin-top:18px;font:600 clamp(22px,min(2.6vw,3.6vh),34px)/1.15 var(--display);letter-spacing:-.02em;color:var(--film-ink)}
.fbeat h2.end-big{font-size:clamp(46px,min(8vw,11vh),120px);max-width:12ch;line-height:.98}
@media (orientation:portrait){.fbeat h1.hero-big{font-size:clamp(44px,12.5vw,72px)}.fbeat .hero-tag{font-size:21px}.fbeat h2.end-big{font-size:clamp(44px,13vw,72px)}}
@media (orientation:portrait) and (max-height:760px){.fbeat h1.hero-big{font-size:42px}}
/* Phones: light WebP opening still instead of the 2.5 MB PNG (the film clips swap in media.js) */
@media (max-width:760px){.cam .still{background-image:url("media/m/hf_20261104_164528_e17d5c84-cb08-4478-a04d-489148a193eb.webp")!important;background-position:63% 50%}}
@media (pointer:coarse) and (max-height:500px){.cam .still{background-image:url("media/m/hf_20261104_164528_e17d5c84-cb08-4478-a04d-489148a193eb.webp")!important}}
/* Narrow phones: the chapter label ran off the right edge. Stack the day bar under the clock so the chapter has room. */
@media (max-width:520px){.hud{gap:12px}.clock{flex-direction:column;align-items:flex-start;gap:8px}.clock .t{min-width:0}.clock .lab{gap:7px;font-size:10px;letter-spacing:.12em}.clock .lab>span:first-child{white-space:nowrap}.daybar,.ends{width:112px}.chap{max-width:none;min-width:0;flex:1 1 auto;padding-top:2px}.chap b{font-size:15px;overflow-wrap:anywhere}}

/* Tablets: lighter still for the film poster */
@media (min-width:761px) and (pointer:coarse) and (hover:none){.cam .still{background-image:url("media/t/hf_20261104_164528_e17d5c84-cb08-4478-a04d-489148a193eb.webp")!important}}