/* Hosts as newspaper clippings left and right of the smoking mummy (hero-mascot). Each clipping links to the host's Instagram.
   They sit behind the mummy + smoke (stage z-index 1); the stage is click-through so the clippings stay clickable. */
.hero-mascot__stage { pointer-events: none; }          /* face-follow listens on window, the smoke on the section */

.hero-host { --hh: min(62svh, 40vw); position: absolute; z-index: 1; top: calc((100% - var(--mascot-extra)) / 2 - var(--hh) * 0.46);
  display: block; height: var(--hh); text-decoration: none; color: inherit; transform: rotate(var(--tilt, 0deg));
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), filter .3s; outline: none; }
.hero-host__img { display: block; height: 100%; width: auto; pointer-events: none; user-select: none; }
.hero-host--left  { --tilt: -4deg; left: max(1.5vw, calc(50% - min(90svh, 110vw) * 0.445 - var(--hh) * 0.38)); }
.hero-host--right { --tilt: 3deg; right: max(1.5vw, calc(50% - min(90svh, 110vw) * 0.42 - var(--hh) * 0.36)); }
.hero-host:hover, .hero-host:focus-visible { transform: rotate(0deg) translateY(-10px) scale(1.04); filter: drop-shadow(0 18px 22px rgba(43, 38, 35, .35)); }
.hero-host:focus-visible .hero-host__img { outline: 4px solid var(--bk-brown-800); outline-offset: 6px; border-radius: 8px; }

/* Label: little brown sticker on the clipping, handle underneath */
.hero-host__tag { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%) rotate(calc(var(--tilt) * -1.4)); display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 8px 16px; border-radius: 14px; background: var(--bk-brown-800); color: var(--bk-cream-100); font-family: var(--bk-font-body);
  font-size: clamp(11px, 1.1vw, 15px); font-weight: 700; line-height: 1.15; white-space: nowrap; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); transition: background-color .25s; }
.hero-host__tag strong { font-weight: 800; color: var(--bk-orange-200); letter-spacing: .02em; }
.hero-host:hover .hero-host__tag, .hero-host:focus-visible .hero-host__tag { background: var(--bk-green); }
.hero-host:hover .hero-host__tag strong, .hero-host:focus-visible .hero-host__tag strong { color: var(--bk-black, #111); }

/* Phones: the two hosts as big clippings side by side, the mummy in front, between them, waving the mic from one face
   to the other (assets/js/mascot-arm.js). Labels sit in the outer corners so the mummy never covers them. */
@media (max-width: 700px) {
  .hero-mascot { --mascot-extra: 6svh; }
  .hero-host { --hh: min(56svh, 116vw); z-index: 1; top: calc(var(--nav-h, 118px) + 1svh); bottom: auto; }
  .hero-host--left  { --tilt: -4deg; left: 2vw; }
  .hero-host--right { --tilt: 4deg; right: 2vw; top: calc(var(--nav-h, 118px) + 3svh); }
  .hero-host__tag { bottom: 4%; max-width: 70%; padding: 5px 9px; border-radius: 10px; font-size: 10px; white-space: normal; text-align: center; }
  .hero-host--left .hero-host__tag  { left: 7%; right: auto; transform: rotate(4deg); }
  .hero-host--right .hero-host__tag { left: auto; right: 7%; transform: rotate(-4deg); }
  .hero-host__tag strong { white-space: nowrap; }
  /* mummy in front, centred between the two clippings */
  .hero-mascot__stage { --h: min(48svh, 92vw); z-index: 2; top: calc(var(--nav-h, 118px) + 9svh); bottom: auto; left: calc(50% - var(--h) * 0.47); }
}
@media (prefers-reduced-motion: reduce) { .hero-host { transition: none; } }