/* The established brand asset, with its transparent square padding cropped in CSS. */
.brand { display: block; width: 76px; flex: 0 0 76px; }
.brand img {
  display: block; width: 76px; height: 46px; object-fit: cover;
  object-position: center; filter: none;
}
.footer-grid > div:first-child img {
  width: 90px; height: 54px; object-fit: cover; filter: none;
}
.line-icon {
  display: inline-block; width: 1em; height: 1em;
  vertical-align: -.15em; flex-shrink: 0;
}
.draw-arrow .line-icon, .audience-arrow .line-icon { display: block; }
.organizer-star .line-icon { display: block; }
.play-video .line-icon { width: 16px; height: 16px; vertical-align: middle; }
.marquee .line-icon { width: .8em; height: .8em; vertical-align: -.05em; }
.rail-controls button { display: grid; place-items: center; }
.rail-controls .line-icon { width: 20px; height: 20px; }

/* Independent mobile scroll scene; the natural page and swipe rail stay intact. */
.mobile-motion .hero-name {
  transform: translate3d(calc(var(--mobile-hero, 0) * -12px), calc(var(--mobile-hero, 0) * -22px), 0);
}
.mobile-motion .hero-portrait {
  transform: translate3d(0, calc(var(--mobile-hero, 0) * 24px), 0)
    scale(calc(1 + var(--mobile-hero, 0) * .045));
}
.mobile-motion .hero-backdrop { opacity: calc(.17 + var(--mobile-hero, 0) * .13); }
.mobile-motion .hero-line {
  transform: rotate(calc(-16deg + var(--mobile-hero, 0) * 12deg));
  opacity: calc(.35 + var(--mobile-hero, 0) * .45);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .mobile-motion .wolf-signature strong {
    background-image: linear-gradient(90deg, var(--red) calc(var(--mobile-wolf, 1) * 100%), #ed4a3740 0);
    background-clip: text; -webkit-background-clip: text;
    color: transparent; -webkit-text-stroke: 1px var(--red);
  }
}
.mobile-motion .stage-photo {
  clip-path: inset(var(--mobile-stage-inset, 0%) var(--mobile-stage-inset, 0%) 0);
}
.mobile-motion .stage-photo > img { transform: scale(var(--mobile-stage-scale, 1)); }
.mobile-motion .stage-word { transform: translateX(var(--mobile-stage-x, 0px)); }
.mobile-motion .venue-media img { transform: translate3d(0, var(--mobile-venue-y, -5%), 0); }
.mobile-motion .offer-art > img {
  transform: translateY(var(--mobile-offer-y, 0px)) rotate(var(--mobile-offer-r, -6deg));
}
@media (max-width:640px) {
  .site-header { gap: 16px; }
  .header-cta { gap: 14px; white-space: nowrap; }
  .menu-toggle { flex: 0 0 25px; }
  .footer-grid > div:first-child img { width: 76px; height: 46px; }
}