*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #fcfcfa; }

.hero {
  --portrait-height: 90%;           /* keep in sync with CONFIG.portrait.heightOfHero */
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: #fcfcfa;              /* plain studio near-white */
}

/* Static portrait. Bottom-anchored, horizontally centred, never cropped or rescaled
   by anything other than the hero height. The WebGL portrait draws on top of
   exactly this box. */
.hero__portrait {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: var(--portrait-height);
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
}

/* A replaced element does not stretch to inset:0 on its own; size it explicitly.
   The drawing buffer is sized in JS (devicePixelRatio aware). */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}

.hero.is-live .hero__canvas { opacity: 1; }
.hero.is-live .hero__portrait { visibility: hidden; }
.hero.is-static .hero__canvas { display: none; }

.hero__credit {
  position: absolute;
  right: 16px;
  bottom: 12px;
  margin: 0;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(252, 252, 250, 0.86);
  max-width: calc(100% - 32px);
  font: 400 11px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #6f6f68;
  text-align: right;
  z-index: 2;
}
.hero__credit a { color: inherit; }