/* VideoReel (scroll-scrubbed film). Only needed on pages that render <VideoReel>; link it after styles.css. */
.hero{position:relative;height:650vh;background:var(--ink)}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media img{transition:opacity .6s ease}
.hero-media.has-video img{opacity:0}
.shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgb(var(--ink-rgb) / .55) 0%,rgb(var(--ink-rgb) / .12) 28%,rgb(var(--ink-rgb) / .18) 60%,rgb(var(--ink-rgb) / .72) 100%),rgb(var(--ink-rgb) / var(--dim,.22))}
.letterbox{position:absolute;left:0;right:0;height:var(--lb,0px);background:var(--ink);z-index:2;pointer-events:none}
.letterbox.top{top:0}
.letterbox.bot{bottom:0}
.statements{position:absolute;inset:0;z-index:3;pointer-events:none}
.statement{position:absolute;margin:0;font-size:clamp(3.1rem,11.2vw,12.5rem);color:var(--paper)}
.statement .line{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.statement .line>span{display:block;transform:translateY(110%);will-change:transform}
.s1{left:max(var(--gutter),env(safe-area-inset-left,0px));bottom:clamp(96px,16vh,170px)}
.s2{right:max(var(--gutter),env(safe-area-inset-right,0px));top:50%;translate:0 -50%;text-align:right}
.s3{left:max(var(--gutter),env(safe-area-inset-left,0px));right:max(var(--gutter),env(safe-area-inset-right,0px));top:50%;translate:0 -50%}
.s3 .line:nth-child(2){padding-left:12vw}
.hud{position:absolute;z-index:4;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px);color:rgb(var(--paper-rgb) / .78)}
.hud .r{justify-self:end;text-align:right}
.hud .tc{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hud .tc b{font-weight:500;color:var(--paper)}
.scroll-ind{display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-ind .track{width:1px;height:56px;background:rgb(var(--paper-rgb) / .22);position:relative;overflow:hidden}
.scroll-ind .fill{position:absolute;inset:0;background:var(--paper);transform-origin:top;transform:scaleY(var(--hp,0))}
.scroll-ind .eyebrow{font-size:10px}
.media-note{position:absolute;z-index:5;top:calc(env(safe-area-inset-top,0px) + 74px);left:max(var(--gutter),env(safe-area-inset-left,0px));
  max-width:min(440px,calc(100% - 32px));font-family:var(--f-mono);font-size:11px;line-height:1.6;letter-spacing:.04em;
  padding:10px 12px;border:1px solid var(--hair-dark);background:rgb(var(--ink-rgb) / .7);color:var(--paper)}
@media (max-width:600px){
  .hud{grid-template-columns:1fr auto}
  .hud .scroll-ind{display:none}
  .hud .l .eyebrow{font-size:10px}
  .s3 .line:nth-child(2){padding-left:0}
}
/* bare mode (overlays={false}): pure film, edge to edge, no tint */
.hero.is-bare .hero-pin{background:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .hero{height:auto!important}      /* overrides the inline height from the length prop: one still screen */
  .hero-pin{position:relative}
  .statement .line>span{transform:none!important}
  .statements{display:flex;flex-direction:column;justify-content:center;gap:4vh;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px))}
  .statement{position:static;translate:none;font-size:clamp(2.2rem,6.4vw,6rem);text-align:left}
  .s3 .line:nth-child(2){padding-left:0}
  .scroll-ind{display:none}
}