.subsite-media { background: var(--bg); }
.subsite-panorama { margin: 0; background: #000; overflow: hidden; }
.subsite-panorama { display: grid; place-items: center; min-height: 320px; height: min(72vh, 760px); }
.subsite-panorama img { display: block; width: 100%; height: 100%; object-fit: contain; }
.portal-hero .hero-bg {
  inset: 0;
  background-color: #000;
  background-size: cover, contain;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.subsite-media .chapter-divider { position: relative; z-index: 2; }
.hero-mid,
.hero-front { position: absolute; inset: -4%; pointer-events: none; }
.hero-mid {
  z-index: -2;
  background: radial-gradient(circle at 72% 34%, rgba(37,242,197,.18), transparent 25%), radial-gradient(circle at 22% 78%, rgba(250,45,168,.13), transparent 28%);
  transform: translate3d(var(--mx,0), var(--my,0), 0) scale(1.025);
}
.hero-front {
  z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255,191,54,.08) 48%, transparent 62%), radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.42) 100%);
  mix-blend-mode: screen;
  transform: translate3d(var(--fx,0), var(--fy,0), 0) scale(1.04);
}
.hero-copy { position: relative; z-index: 5; }
.hero-grid { transform: translate3d(var(--mx,0), var(--my,0), 0); }
@media (prefers-reduced-motion: reduce) {
  .hero-mid, .hero-front, .hero-grid { transform: none !important; }
}
@media (max-width: 640px) {
  .subsite-panorama { min-height: 220px; height: min(58vh, 520px); }
}