/* Homepage — the rotating hero. Load site.css first.

   Sizing: every photograph is scaled to the same AREA, not fitted to a common
   box, so each carries equal visual weight. height = sqrt(1.333 / ratio) of
   the tallest frame. Three shapes in the current set:

       4:3    100%       3:2    94.28%       16:9   86.60%

   That holds on desktop. Below 1131px the page switches to equal width —
   see the note at the foot of this file.

   Height: the shell is 560px of fixed chrome (header 316 + footer 148 + main
   padding 96, all measured, plus 2px for subpixel rounding). The hero takes
   what is left, floored at 460px so
   it never becomes a thumbnail and capped at 720px so it never dominates.
   Below roughly 1020px of viewport height the page scrolls a little. That is
   the correct trade — the airy header is the brand, a 340px hero is not.   */

:root{
  --hero-min:460px;
  --hero-max:720px;
  --hero-chrome:562px;
  --hero-fade:1400ms;
}
.home{--foot-gap:0}

.hero{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding-block:var(--s-5)}
.hero-stage{position:relative;width:100%;display:flex;align-items:center;justify-content:center;
            height:clamp(var(--hero-min),calc(100vh - var(--hero-chrome)),var(--hero-max))}
.hero-stage img{position:absolute;display:block;width:auto;max-width:100%;object-fit:contain;
                opacity:0;pointer-events:none;user-select:none;
                transition:opacity var(--hero-fade) var(--ease)}
.hero-stage img[data-current]{opacity:1}

/* Equal-area heights, as a fraction of the stage. Width follows from ratio.
   width:auto above is load-bearing: the build emits width/height attributes on
   every <img> (so nothing reflows) and the width attribute is a presentational
   hint that would otherwise win — measured 2026-09-01, every frame came out
   1600px wide. Below 1131px the narrow-screen rule sets width:100% instead. */
.hero-stage img[data-aspect="4:3"] {height:100%;    aspect-ratio:4/3}
.hero-stage img[data-aspect="3:2"] {height:94.28%;  aspect-ratio:3/2}
.hero-stage img[data-aspect="16:9"]{height:86.60%;  aspect-ratio:16/9}

@media (prefers-reduced-motion:reduce){
  .hero-stage img{transition:none}
}
/* Narrow screens: equal WIDTH, not equal area ---------------------------------
   Equal area needs horizontal room to trade against height. Below about
   1130px there isn't any: holding a 16:9 and a 4:3 to the same area would
   make both small. Every photograph goes full width instead and the height
   varies, which is the right phone treatment regardless. The stage is held
   at 4:3 — the tallest shape in the set — so nothing reflows on a swap.   */
@media (max-width:1131px){
  .hero{padding-block:var(--s-4)}
  .hero-stage{height:auto;aspect-ratio:4/3;max-height:none}
  .hero-stage img{width:100%;height:auto;max-height:none;
                  top:50%;transform:translateY(-50%)}
  .hero-stage img[data-aspect="4:3"],
  .hero-stage img[data-aspect="3:2"],
  .hero-stage img[data-aspect="16:9"]{height:auto}
}