/* The approved portrait, with a crown and transform-only pointer depth. */
.hero {
  --lion-size: min(1030px, 85vw);
  --lion-left: 74%;
  --lion-top: -8px;
  --lion-opacity: .32;
  background: #070909;
}
.hero-art {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 1;
  mix-blend-mode: screen;
  mask-image: linear-gradient(#000 0%, #000 58%, #0009 80%, transparent 100%);
}
.hero-art::before {
  inset: 0;
  background: radial-gradient(ellipse at 75% 32%, #ffc30108, transparent 58%);
}
.hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 37% 39% at 46% 70%, #070909f2, #070909b3 62%, transparent);
}
.lion-portrait {
  position: absolute;
  top: var(--lion-top);
  left: var(--lion-left);
  width: var(--lion-size);
  aspect-ratio: 1;
  transform: translateX(-50%);
  perspective: 1400px;
}
.lion-still {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  opacity: var(--lion-opacity);
  transform-origin: 50% 42%;
  backface-visibility: hidden;
  pointer-events: none;
}
.lion-still.is-moving { will-change: transform; }
.hero-copy { text-shadow: 0 1px 12px #070909, 0 0 30px #070909; }
.hero-eyebrow, .title-major, .title-ending { text-shadow: 0 2px 16px #070909; }
.main-wordmark { filter: drop-shadow(0 10px 12px #000b) drop-shadow(0 0 24px #ffc3010c); }
.hero-floor { opacity: .38; }
.footer.page-width {
  width: 100%;
  padding-inline: max(52px, calc((100% - 1160px) / 2));
  background: var(--yellow);
  border-top: 1px solid #17170024;
}
.footer img { filter: none; opacity: 1; }
.footer p, .footer-mark { color: #3f370b; }
.footer-mark > span { color: #131500; }
@media (min-width: 1600px) {
  .hero { --lion-size: 1180px; --lion-left: 73%; --lion-top: -8px; }
}
@media (max-width: 1100px) {
  .footer.page-width { padding-inline: 36px; }
}
@media (max-width: 800px) {
  .hero { --lion-size: 720px; --lion-left: 64%; --lion-top: 2px; --lion-opacity: .29; }
  .hero-art { inset: 0; width: 100%; height: 100%; }
  .footer.page-width { padding-inline: 24px; }
}
@media (max-width: 500px) {
  .hero { --lion-size: 570px; --lion-left: 55%; --lion-top: 2px; --lion-opacity: .27; }
  .hero-art { inset: 0; width: 100%; height: 100%; }
  .hero-art::after { background: linear-gradient(transparent 12%, #07090944 35%, #070909e8 72%, #070909); }
  .footer.page-width { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lion-still { transform: none !important; will-change: auto !important; }
}