/* Home page (WEB-YENI-A): the static hero, the same layout as styles.css ".hero.is-static", for two cases where React
   has not (yet) chosen it:
   - prefers-reduced-motion: linked with media="(prefers-reduced-motion: reduce)" (index.html), so the hero is static from
     the first paint (no scroll-driven fade, no jump when React switches the class to is-static after hydration);
   - no JavaScript: linked inside <noscript> (index.html), so the heading "Say you're here." is visible (the scroll
     version starts with it faded out until a script moves --p).
   Same-origin file, no inline style, nothing else. */
html .hero.is-scroll,
html .hero.is-static { --p: 1; --q: 0; height: auto; }
html .hero .hero-stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
html .hero .hero-copy { flex: 1 0 auto; height: auto; padding-top: calc(var(--a-head-h) + 72px + min(22.5vw, 330px)); }
html .hero .hero-fallback { width: min(34vw, 500px); top: calc(var(--a-head-h) + 48px); right: 9%; transition: none; }
html .hero .hero-a,
html .hero .hero-b { grid-area: auto; opacity: 1; transform: none; }
html .hero .hero-a { font-size: clamp(22px, 2.6vw, 36px); margin-bottom: 28px; }
html .hero .hero-lede,
html .hero .hud-track,
html .hero .scroll-cue { display: none; }
@media (max-width: 720px) {
  html .hero.is-scroll { height: auto; }
  html .hero .hero-fallback { width: 60vw; right: 20vw; top: calc(var(--a-head-h) + 56px); }
  html .hero .hero-copy { padding-top: calc(var(--a-head-h) + 56px + 40vw + 32px); }
}