/* Only the inner screen clips. The long outer section must not trap sticky. */
.scroll-story{position:relative;overflow:visible;--story-progress:0;--intro-opacity:1}
.hero-stage{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;height:100vh;height:100dvh;min-height:0;overflow:hidden;background:var(--coal)}
.scroll-story.is-scrubbing{height:660vh;height:660svh}
.is-scrubbing .hero-stage{position:sticky;top:0}
.hero-stage .hero-content{position:relative;padding-top:calc(var(--header-height) + 28px);padding-bottom:130px;opacity:var(--intro-opacity);transform:translateY(calc((1 - var(--intro-opacity)) * -16px));will-change:opacity}
.hero-stage .hero-image{z-index:-3}
.hero-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;z-index:-2;opacity:0;pointer-events:none}
.is-video-ready .hero-video{opacity:1}
.hero-stage .hero-shade{opacity:calc(.25 + var(--intro-opacity) * .75);pointer-events:none}
.story-bottom{position:absolute;inset:auto 0 32px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;z-index:2}
.story-guide{max-width:65%;text-shadow:0 1px 12px rgb(0 0 0 / 65%)}
.story-scene{font-family:var(--display);font-size:25px;line-height:1.2;letter-spacing:-.02em;margin-bottom:7px}
.story-cue,.story-status{font-size:11px;line-height:1.6}
.story-status{color:var(--muted)}
.story-skip{display:flex;align-items:center;gap:16px;min-height:48px;font-size:11px;text-shadow:0 1px 12px rgb(0 0 0 / 65%)}
.story-skip svg{width:18px;height:18px}
.story-progress{display:none;position:absolute;inset:auto 0 0;height:2px;background:rgb(242 232 218 / 16%);z-index:2;pointer-events:none}
.is-scrubbing .story-progress{display:block}
.story-progress span{display:block;width:100%;height:100%;background:var(--copper);transform-origin:left;transform:scaleX(var(--story-progress))}
.hero-stage .hero-content:focus-within{opacity:1;transform:none}

@media(max-width:760px){
  .scroll-story.is-scrubbing{height:600vh;height:600svh}
  .hero-stage .hero-content{padding-top:calc(var(--header-height) + 28px);padding-bottom:150px}
  .hero-stage h1{font-size:clamp(48px,10.7vw,76px)}
  .story-bottom{bottom:24px;gap:16px}
  .story-guide{max-width:58%}
  .story-scene{font-size:23px}
  .story-cue,.story-status,.story-skip{font-size:10px}
  .story-skip{gap:10px;max-width:140px}
}
@media(max-height:600px){
  .hero-stage .hero-content{padding-top:115px;padding-bottom:90px}
  .hero-stage h1{font-size:clamp(38px,8vh,66px)}
  .hero-stage .hero-content .section-caption,.hero-stage .hero-description{display:none}
  .hero-stage .hero-content .button{margin-top:18px;min-height:44px;padding-block:10px}
  .story-bottom{bottom:18px}
  .story-scene{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .scroll-story.is-scrubbing{height:auto}
  .is-scrubbing .hero-stage{position:relative}
  .hero-video,.story-progress{display:none}
  .hero-stage .hero-content{opacity:1;transform:none}
  .hero-stage .hero-shade{opacity:1}
}
@media print{
  .scroll-story.is-scrubbing{height:auto}
  .is-scrubbing .hero-stage{position:relative;height:650px}
  .hero-video,.story-bottom,.story-progress{display:none}
  .hero-stage .hero-content{opacity:1;transform:none}
}