/* components/hero-fit.css
   The ONLY thing this file does: on screens >=900px wide, size the hero
   to exactly fill the viewport below the sticky nav bar (100svh/100vh
   minus the measured nav-bar height) — not below the logo banner above
   it, since the page scrolls past the logo banner on load (see
   components/hero-fit.js's snapToNav()), leaving just the nav bar at the
   top of the screen with the hero filling the rest.

   On screens narrower than 900px this file does nothing — hero height on
   phones is unchanged from each page's own <style> block.

   Nothing else about the hero is touched here — no font sizes, no
   margins/padding between the label/headline/paragraph/buttons/Scroll,
   no repositioning of .hero-scroll-hint. Those stay exactly as each
   page's own <style> block defines them.

   --hero-top-offset is set by components/hero-fit.js to the measured
   height of #site-header (the nav bar) only. The px fallback below only
   applies before that JS runs (or if JS is disabled) and is deliberately
   generous so nothing is ever clipped. */

@media(min-width:900px){
  .hero{
    min-height:100vh;
    min-height:100svh;
    min-height:calc(100vh - var(--hero-top-offset, 80px));
    min-height:calc(100svh - var(--hero-top-offset, 80px));
  }
}