/* Persona hero media. Owner: GT-Phi. Usage: docs/design-system.md, section "Persona hero".
   The box fills its positioned hero; the page keeps its own navy overlay over the left side for the text.
   Scene images place the person in the right third, so the crop anchors to the right. */
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0C1844}
.hero-media picture{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero-media picture.is-active{opacity:1}
.hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:78% 30%}
/* Without JS only the first picture exists, and it is shown. */
html:not(.js) .hero-media picture:first-child{opacity:1}
@media (prefers-reduced-motion: reduce){
  .hero-media picture{transition:none}
}
/* Narrow screens: the image sits above the text as its own block (the page sets the hero to block layout). */
@media (max-width:760px){
  .hero-media{position:relative;inset:auto;z-index:0;aspect-ratio:4/3}
  .hero-media img{object-position:82% 30%}
}
/* 29A-26 (rule X45): on a phone every persona is a head-and-shoulders crop with the head at least 90 px tall at 390 px wide.
   Each picture is scaled by --z (its width is --z times the box), placed so the face centre (--fx, share of the picture width)
   sits near the middle without leaving the picture's edge (the clamp), and moved so the crown (--c, share of the picture height)
   sits 8 percent below the top of the box. Measured per persona from the 1200 px files; the head is crown to chin. */
@media (max-width:760px){
  .hero-media img{position:absolute;max-width:none;height:auto;width:calc(var(--z,1) * 100%);top:8%;translate:0 calc(var(--c,.08) * -100%);left:clamp(calc(100% - var(--z,1) * 100%),calc(50% - var(--fx,.75) * var(--z,1) * 100%),0%)}
  .hero-media img[src*="persona-1-"]{--z:1.8;--fx:.754;--c:.072}
  .hero-media img[src*="persona-2-"]{--z:2;--fx:.771;--c:.219}
  .hero-media img[src*="persona-3-"]{--z:1.5;--fx:.7;--c:.09}
  .hero-media img[src*="persona-4-"]{--z:1.9;--fx:.742;--c:.099}
  .hero-media img[src*="persona-5-"]{--z:1.45;--fx:.723;--c:.072}
  .hero-media img[src*="persona-6-"]{--z:1.65;--fx:.779;--c:.094}
  .hero-media img[src*="persona-7-"]{--z:1.9;--fx:.731;--c:.067}
  .hero-media img[src*="persona-8-"]{--z:1.5;--fx:.727;--c:.057}
}