/* Normal document scrolling: the illustration never pins or captures the wheel. */
.hero-cover.banyan-hero { display: block; min-height: 0; overflow: visible; }
.banyan-hero.is-animated { height: auto; }
.banyan-stage {
  position: relative;
  height: max(600px, calc(100svh - 100px));
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  background: #efab64;
}
.is-animated .banyan-stage { position: relative; }
.banyan-hero::after { display: none; }
.banyan-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(17 34 37 / 65%), transparent 48%);
}
.banyan-stage .hero-cover-image, .banyan-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  object-fit: cover; object-position: 42% 50%; animation: none; transform: none;
}
.banyan-canvas { opacity: 0; pointer-events: none; }
.is-animated .banyan-canvas { opacity: 1; }
.banyan-hero .hero-cover-content { padding: 3rem 0 2rem; }
.banyan-hero .hero-cover-content .container { gap: 1rem; }
.banyan-hero .display-xl { font-size: clamp(2.6rem, 5.2vw, 5rem); line-height: 1.02; }
.banyan-hero .deck { max-width: 39rem; font-size: clamp(1rem, 1.5vw, 1.25rem); }
.banyan-hero .hero-when { margin-top: 0; }
.banyan-hero .hero-cover-actions { gap: .5rem; }
.banyan-hero .hero-cover-actions .btn { padding: .6rem 1rem; }
@media (max-width: 640px) {
  .banyan-stage { height: max(680px, calc(100svh - 110px)); }
  .banyan-stage .hero-cover-image { object-position: 26% 50%; }
  .banyan-hero.is-animated { height: auto; }
  .banyan-hero .hero-cover-content { padding-bottom: 2rem; }
  .banyan-hero .hero-cover-actions { max-width: 25rem; }
  .banyan-hero .hero-cover-actions .btn { font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .banyan-hero.is-animated { height: auto; }
  .is-animated .banyan-stage { position: relative; }
  .is-animated .banyan-canvas { opacity: 0; }
}

/* Local event teaser. The artwork and event title are the entire first screen. */
.page-event { background: #164840; }
.page-event .banyan-stage { height: max(620px, 100svh); }
.page-event .hero-cover-content { padding: 3rem 0 4rem; }
.page-event .hero-cover-content .container { gap: 1.4rem; }
.page-event .event-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 8vw, 8rem);
  line-height: .91;
  letter-spacing: -.055em;
  font-weight: 600;
  color: #fff7df;
  text-shadow: 0 2px 24px rgb(16 40 34 / 18%);
}
.page-event .event-intro {
  max-width: 36rem; margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6; color: #fff7df;
}
.event-note {
  min-height: 55svh;
  display: flex; align-items: center;
  padding: 5rem 0;
  color: #fff7df;
}
.event-note .container { width: 100%; }
.event-note h2 {
  max-width: 40rem; margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.15;
}
.event-note p { max-width: 36rem; margin: 0; color: #e0e5cf; }
@media (max-width: 640px) {
  .page-event .banyan-stage { height: max(700px, 100svh); }
  .page-event .hero-cover-content { padding-bottom: 3rem; }
  .event-desktop-break { display: none; }
}