/* Hero: contained WebGL + bottom toolbar. Details live in #info below. */

/* Hero 🍝🔥 scroll-to-#info: nudge downward only (no upward motion) */
@keyframes hero-toolbar-pasta-bob-hover {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(14px);
  }
  70% {
    transform: translateY(7px);
  }
}

@keyframes hero-toolbar-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

body.body-3d {
  background: var(--ts-segment-fill);
  margin: 0;
}

.hero-3d {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100dvh;
  min-height: 420px;
  max-height: 100dvh;
  /* Let scroll CTA extend over #info; clip X only so WebGL can’t widen the page */
  overflow-x: clip;
  overflow-y: visible;
  background: var(--ts-sky);
  z-index: 2;
  /* Clicks pass through non-interactive hero chrome; canvas + toolbar links keep pointer-events: auto */
  pointer-events: none;
}

/* (removed) top-right joystick UI */

#canvas-root.canvas-root.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;
  /* Page scroll over the hero; JS adds .hero-canvas--manipulate for orbit mode */
  touch-action: pan-y;
}

#canvas-root.canvas-root.hero-canvas.hero-canvas--manipulate {
  touch-action: none;
}

#canvas-root.hero-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
}

#canvas-root.hero-canvas.hero-canvas--manipulate canvas {
  cursor: grab;
}

#canvas-root.hero-canvas.hero-canvas--manipulate canvas:active {
  cursor: grabbing;
}

.hero-toolbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  width: 100%;
  padding-top: clamp(0.65rem, 2.8vw, 1.7rem);
  /* Extra space: shadows + 🍝🔥 bob (up to ~14px down) + scroll chip overlap into #info */
  padding-bottom: calc(
    max(
      clamp(0.65rem, 2.8vw, 1.7rem),
      env(safe-area-inset-bottom, 0px)
    ) + clamp(6px, 1.2vw, 12px) + clamp(16px, 3vw, 22px)
  );
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px), 1rem);
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px), 1rem);
  /* Make the entire toolbar area a safe scroll zone (no canvas interactions). */
  pointer-events: auto;
  touch-action: pan-y;
  /* Toolbar fill + upward fade: top edge is fully transparent (0% opacity) for the 3D canvas */
  background: linear-gradient(
    to top,
    var(--ts-segment-fill) 0%,
    var(--ts-segment-fill) min(45%, 9.5rem),
    color-mix(in srgb, var(--ts-segment-fill) 58%, transparent) 68%,
    color-mix(in srgb, var(--ts-segment-fill) 18%, transparent) 86%,
    color-mix(in srgb, var(--ts-segment-fill) 0%, transparent) 100%
  );
  transform: translateZ(0);
}

/* Mobile kicker + tickets-above-nav: hidden on desktop */
.hero-toolbar__mobile-kicker {
  display: none;
}

.hero-toolbar__mobile-tickets-slot {
  display: none;
}

/* Narrow viewports: real flex layout (no display:contents — fixes iOS/Safari losing the menubar) */
@media (max-width: 42rem) {
  .hero-toolbar__mobile-kicker {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.35rem, 2vw, 0.75rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    pointer-events: auto;
  }

  .hero-toolbar__mobile-kicker .hero-toolbar-eyebrow {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Full-width tickets directly above icon row / scroll chip */
  .hero-toolbar__mobile-tickets-slot {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    pointer-events: auto;
    margin-top: clamp(0.2rem, 0.9vw, 0.45rem);
    padding-top: clamp(0.08rem, 0.45vw, 0.22rem);
  }

  .hero-toolbar__mobile-tickets-slot .hero-toolbar__tickets-mobile {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    font-size: clamp(0.7rem, 2.15vw + 0.1rem, 1.38rem);
    padding-inline: clamp(0.42rem, 1.9vw, 0.85rem);
    line-height: 1.1;
    min-height: clamp(44px, 11vw, 52px);
  }

  /* Must beat later `.hero-btn { display: inline-flex }` / paragraph defaults */
  .hero-toolbar-copy .hero-toolbar-eyebrow.hero-toolbar-eyebrow--desktop {
    display: none;
  }

  .hero-toolbar-nav .hero-btn.hero-toolbar__tickets-desktop {
    display: none;
  }

  .hero-toolbar-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    margin-top: clamp(0.28rem, 1vw, 0.5rem);
    /* overflow-x:auto makes overflow-y compute to auto — clips the 🍝🔥 chip (stroke/shadow) */
    overflow: visible;
  }

  .hero-toolbar-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    align-content: flex-start;
    gap: clamp(0.35rem, 2vw, 0.7rem) clamp(0.45rem, 2.5vw, 1rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: clamp(0.08rem, 0.45vw, 0.22rem);
    padding-top: clamp(0.12rem, 0.65vw, 0.3rem);
    /* Room below full-width scroll chip for box-shadow + emoji stroke */
    padding-bottom: clamp(10px, 2.5vw, 16px);
    overflow: visible;
    pointer-events: auto;
  }

  .hero-toolbar-icons > .hero-icon-link {
    flex: 0 0 auto;
  }

  .hero-toolbar-icons > .hero-btn--info.hero-btn--icon-only {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    justify-content: center;
  }

  /* overflow-x:clip on .hero-3d pairs with y→clip in browsers; frees the chip + overlap into #info */
  .hero-3d {
    overflow: visible;
  }
}

.hero-toolbar-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 0.4rem;
  pointer-events: auto;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  text-align: left;
}

.hero-toolbar-eyebrow {
  margin: 0;
  font-family: var(--ts-font-body);
  font-size: clamp(0.82rem, 2.95vw + 0.28rem, 1.85rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-hero-ink);
  opacity: 0.85;
  line-height: 1.2;
  text-shadow: 0 2px 0 var(--ts-hero-text-shadow);
}

.hero-toolbar-title {
  margin: 0;
  font-family: var(--ts-font-body);
  font-weight: 700;
  font-size: clamp(1.35rem, 6.4vw + 0.25rem, 3.35rem);
  letter-spacing: 0.03em;
  color: var(--ts-hero-ink);
  text-shadow: 0 2px 0 var(--ts-hero-text-shadow);
  text-align: left;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-toolbar-meta {
  margin: 0;
  font-family: var(--ts-font-body);
  font-weight: 700;
  font-size: clamp(1.02rem, 4.1vw + 0.38rem, 2.55rem);
  letter-spacing: 0.04em;
  color: var(--ts-hero-ink);
  text-shadow: 0 2px 0 var(--ts-hero-text-shadow);
  text-align: left;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.hero-toolbar-marquee {
  display: block;
  overflow: hidden;
  width: 100%;
  /* Room for large 🍝 spacers without vertical clip */
  padding-block: clamp(0.2em, 1.2vw, 0.45em);
  box-sizing: content-box;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  touch-action: pan-y;
  cursor: grab;
  will-change: transform;
}

.hero-toolbar-marquee.hero-toolbar-marquee--dragging {
  cursor: grabbing;
}

.hero-toolbar-marquee__track {
  display: flex;
  width: max-content;
  animation: hero-toolbar-marquee 24s linear infinite;
}

.hero-toolbar-marquee__chunk {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  column-gap: clamp(0.4rem, 1.65vw, 0.95rem);
  padding-inline-end: clamp(3rem, 14vw, 7.5rem);
}

.hero-toolbar-marquee__chunk .hero-toolbar-sep {
  margin: 0;
}

.hero-toolbar-marquee__chunk .hero-toolbar-sep--marquee {
  display: inline-block;
  opacity: 1;
  margin: 0;
  user-select: none;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
  /* ~1.88× line (20% under 2.35em) — calmer than 3em */
  font-size: 1.88em;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-toolbar-marquee__track {
    animation: none;
  }

  .hero-toolbar-marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

.hero-toolbar-sep {
  margin: 0 0.7em;
  opacity: 0.5;
  font-style: normal;
}

.hero-toolbar-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.35rem, 2vw, 0.7rem) clamp(0.45rem, 2.5vw, 1rem);
  pointer-events: auto;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  margin-top: clamp(0.35rem, 1.3vw, 0.65rem);
  padding-top: clamp(0.2rem, 0.9vw, 0.45rem);
  padding-bottom: clamp(4px, 1vw, 8px);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  container-type: inline-size;
  container-name: hero-toolbar-nav;
}

/* Wrapper: on wide screens flatten into .hero-toolbar-nav flex; on narrow see @media (max-width: 42rem) */
@media (min-width: 42.0625rem) {
  .hero-toolbar-icons {
    display: contents;
  }
}

.hero-toolbar-nav .hero-btn,
.hero-toolbar-nav .hero-icon-link {
  position: relative;
  z-index: 10;
}

/* Menubar: icons / CTAs slightly muted; pasta scroll stays full strength */
.hero-toolbar-nav .hero-icon-link,
.hero-toolbar-nav .hero-btn:not(.hero-btn--info) {
  opacity: 0.8;
  transition:
    opacity 0.25s ease,
    filter 0.2s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.hero-toolbar-nav .hero-icon-link:hover,
.hero-toolbar-nav .hero-btn:not(.hero-btn--info):hover,
.hero-toolbar-nav .hero-icon-link:focus-visible,
.hero-toolbar-nav .hero-btn:not(.hero-btn--info):focus-visible {
  opacity: 1;
}

.hero-toolbar-nav .hero-btn--info.hero-btn--icon-only {
  opacity: 1;
  /* Over marquee line + above sibling controls while bobbing */
  z-index: 50;
  margin-top: clamp(-2.85rem, -7.5vw, -1.35rem);
}

.hero-toolbar-nav::-webkit-scrollbar {
  display: none;
}

.hero-toolbar svg {
  display: block;
  width: clamp(20px, 5.5vw, 40px);
  height: clamp(20px, 5.5vw, 40px);
  flex-shrink: 0;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 2vw, 0.8rem);
  padding: clamp(0.45rem, 2.2vw, 1rem) clamp(0.55rem, 3.2vw, 1.5rem);
  font-family: var(--ts-font-body);
  font-size: clamp(0.78rem, 2.5vw + 0.2rem, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ts-hero-ink);
  background: var(--ts-turbo-green);
  border: clamp(2px, 0.55vw, 4px) solid var(--ts-hero-ink);
  border-radius: clamp(6px, 1.2vw, 12px);
  min-height: clamp(48px, 11vw, 88px);
  box-sizing: border-box;
  box-shadow: 0 clamp(3px, 0.85vw, 6px) 0 var(--ts-hero-ink);
  touch-action: manipulation;
}

.hero-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 clamp(2px, 0.55vw, 4px) 0 var(--ts-hero-ink);
}

/* Global a:hover underlines beat .hero-btn; keep toolbar CTAs clean */
a.hero-btn:hover,
a.hero-btn:focus-visible {
  text-decoration: none;
}

/* Hover lift — skip hero pasta scroll (whole button uses bob animation) */
.hero-toolbar-nav .hero-btn:not(.hero-btn--info):hover,
.site-info .back-to-top.hero-btn:hover {
  transform: translateY(clamp(1px, 0.35vw, 2px));
}

.hero-btn:focus {
  outline: none;
}

.hero-btn:focus-visible {
  outline: clamp(3px, 0.85vw, 6px) solid var(--ts-spaghetti-pink);
  outline-offset: clamp(2px, 0.55vw, 4px);
}

.hero-btn--info {
  background: var(--ts-sauce);
  color: var(--ts-bg);
}

.hero-btn--info:hover {
  filter: brightness(1.08);
}

.hero-btn--icon-only {
  gap: 0;
  padding: 0;
  justify-content: center;
  width: clamp(48px, 11vw, 88px);
  min-width: clamp(48px, 11vw, 88px);
  height: clamp(48px, 11vw, 88px);
  min-height: clamp(48px, 11vw, 88px);
  border-radius: 50%;
}

/* Hero “scroll to #info”: rectangular like tickets, 🍝🔥 — grows to fill remaining menubar width */
.hero-toolbar-nav .hero-btn--info.hero-btn--icon-only {
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: clamp(48px, 11vw, 88px);
  padding: clamp(0.45rem, 2.2vw, 1rem) clamp(0.55rem, 3.2vw, 1.35rem);
  border-radius: clamp(6px, 1.2vw, 12px);
  flex: 1 1 auto;
  white-space: nowrap;
  /* Let the button decide when the label fits */
  container-type: inline-size;
  container-name: hero-scroll-cta;
  /* Overlap #info (margin only — bob animation owns transform) */
  position: relative;
  z-index: 3;
  margin-bottom: clamp(-2.35rem, -6vw, -1rem);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ts-bg) 35%, transparent);
}

.hero-toolbar-nav > .hero-btn--tickets,
.hero-toolbar-nav .hero-icon-link {
  flex: 0 0 auto;
}

/* Scroll-to-#info: 🍝🔥 only (chevron SVGs kept in DOM for easy restore) */
.hero-toolbar-nav .hero-btn--info.hero-btn--icon-only .hero-btn__info-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.hero-toolbar-nav .hero-btn--info.hero-btn--icon-only .hero-btn__info-cue {
  display: none;
}

.hero-toolbar-nav .hero-btn--info.hero-btn--icon-only .hero-btn__info-emoji {
  font-size: clamp(1.65rem, 5.6vw, 2.85rem);
  line-height: 1;
  display: block;
  white-space: nowrap;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  /* Outline so 🍝🔥 read clearly on the sauce button (emoji + text-shadow fallback) */
  -webkit-text-stroke: clamp(2.5px, 0.28em, 7px) var(--ts-hero-scroll-emoji-stroke);
  paint-order: stroke fill;
  text-shadow:
    2px 0 0 var(--ts-hero-scroll-emoji-stroke),
    -2px 0 0 var(--ts-hero-scroll-emoji-stroke),
    0 2px 0 var(--ts-hero-scroll-emoji-stroke),
    0 -2px 0 var(--ts-hero-scroll-emoji-stroke),
    2px 2px 0 var(--ts-hero-scroll-emoji-stroke),
    -2px -2px 0 var(--ts-hero-scroll-emoji-stroke),
    2px -2px 0 var(--ts-hero-scroll-emoji-stroke),
    -2px 2px 0 var(--ts-hero-scroll-emoji-stroke),
    3px 0 0 var(--ts-hero-scroll-emoji-stroke),
    -3px 0 0 var(--ts-hero-scroll-emoji-stroke),
    0 3px 0 var(--ts-hero-scroll-emoji-stroke),
    0 -3px 0 var(--ts-hero-scroll-emoji-stroke),
    1px 0 0 var(--ts-hero-scroll-emoji-stroke),
    -1px 0 0 var(--ts-hero-scroll-emoji-stroke),
    0 1px 0 var(--ts-hero-scroll-emoji-stroke),
    0 -1px 0 var(--ts-hero-scroll-emoji-stroke),
    0 0 2px var(--ts-bg),
    0 0 3px var(--ts-bg);
}

/* Hidden when menubar is tight; .hero-btn uppercase → MORE INFO… */
.hero-toolbar-nav .hero-btn--info.hero-btn--icon-only .hero-btn__info-label {
  display: none;
  flex-shrink: 0;
  /* Similar scale to CTA text (tickets) while still fitting beside 🍝🔥 */
  font-size: clamp(0.78rem, 2.5vw + 0.2rem, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  margin-inline-start: clamp(0.28rem, 1vw, 0.5rem);
  padding-inline-end: 0.06em;
  max-width: 9.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
}

/* Show label only if the button itself is wide enough */
@container hero-scroll-cta (min-width: 12.5rem) {
  .hero-toolbar-nav .hero-btn--info.hero-btn--icon-only .hero-btn__info-label {
    display: inline;
  }
}

/* Viewport fallback when container queries aren’t available */
@supports not (container-type: inline-size) {
  @media (min-width: 28rem) {
    .hero-toolbar-nav .hero-btn--info.hero-btn--icon-only .hero-btn__info-label {
      display: inline;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-toolbar-nav .hero-btn--info.hero-btn--icon-only {
    animation: hero-toolbar-pasta-bob-hover 2.3s ease-in-out infinite;
  }
}

/* Small view: no bob animation + tighter padding so the CTA always fits cleanly */
@media (max-width: 42rem) {
  .hero-toolbar-nav .hero-btn--info.hero-btn--icon-only {
    animation: none;
    margin-top: 0;
    /* Negative margin pulls the chip under .hero-3d; mobile overflow clips it */
    margin-bottom: 0;
    padding: clamp(0.4rem, 2vw, 0.85rem) clamp(0.5rem, 2.8vw, 1.1rem);
    box-sizing: border-box;
    overflow: visible;
  }

  .hero-toolbar-nav .hero-btn--info.hero-btn--icon-only .hero-btn__info-emoji {
    font-size: clamp(1.45rem, 6vw, 2.3rem);
  }
}

.hero-btn--tickets {
  max-width: min(calc(100vw - 2.5rem), 19rem);
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
  line-height: 1.12;
  text-align: center;
  hyphens: manual;
  font-size: clamp(0.92rem, 2.85vw + 0.25rem, 1.85rem);
  padding-top: clamp(0.5rem, 2.4vw, 1.05rem);
  padding-bottom: clamp(0.5rem, 2.4vw, 1.05rem);
}

.hero-btn__tickets-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.06em;
  line-height: 1.12;
  text-align: center;
}

.hero-btn__tickets-line {
  display: block;
}

.hero-btn__tickets-sub {
  display: block;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
  opacity: 0.95;
}

.hero-icon--arrow-down {
  flex-shrink: 0;
  opacity: 0.95;
}

.hero-icon--arrow-up {
  transform: rotate(180deg);
}

.hero-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 11vw, 88px);
  height: clamp(48px, 11vw, 88px);
  color: var(--ts-bg);
  background: var(--ts-spaghetti-pink);
  border: clamp(2px, 0.55vw, 4px) solid var(--ts-hero-ink);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 clamp(3px, 0.85vw, 6px) 0 var(--ts-hero-ink);
  touch-action: manipulation;
}

.hero-icon-link:hover {
  filter: brightness(1.06);
  transform: translateY(clamp(1px, 0.35vw, 2px));
  box-shadow: 0 clamp(2px, 0.55vw, 4px) 0 var(--ts-hero-ink);
}

.hero-icon-link--fb {
  background: var(--ts-sky);
  color: var(--ts-hero-ink);
}

.hero-icon-link--soundcloud {
  background: var(--ts-bg);
  color: var(--ts-soundcloud);
}

.hero-icon-link--soundcloud:hover {
  filter: none;
  background: var(--ts-soundcloud-hover-bg);
}

.hero-icon-link--soundcloud .hero-icon--soundcloud-mark {
  width: clamp(22px, 6vw, 40px);
  height: clamp(22px, 6vw, 40px);
}

.hero-icon-link--maps {
  background: var(--ts-turbo-green);
  color: var(--ts-hero-ink);
}

.hero-icon-link--maps .hero-icon--maps-pin {
  width: clamp(22px, 6vw, 40px);
  height: clamp(22px, 6vw, 40px);
}

.hero-icon-link:focus-visible {
  outline: clamp(3px, 0.85vw, 6px) solid var(--ts-turbo-green);
  outline-offset: clamp(2px, 0.55vw, 4px);
}

.hero-icon {
  display: block;
  flex-shrink: 0;
}

/* Second section: flyer + copy — yellow field like hero toolbar */
.site-info {
  position: relative;
  z-index: 1;
  background: linear-gradient(
    180deg,
    var(--ts-segment-fill) 0%,
    color-mix(in srgb, var(--ts-segment-fill) 88%, white) 40%,
    var(--ts-segment-fill) 100%
  );
  min-height: 40vh;
  padding-bottom: 3.25rem;
}

/* Room for hero scroll chip overlapping this section (see .hero-toolbar-nav .hero-btn--info) */
body.body-3d .site-info .wrap {
  padding-top: calc(2.5rem + clamp(1rem, 3.5vw, 1.85rem));
}

.site-info .wrap {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.site-info .wrap .content-stack {
  pointer-events: auto;
}

.site-info .wrap a,
.site-info .wrap .event-card,
.site-info .wrap .site-footer {
  pointer-events: auto;
}

/* Back-to-top: icon only, bottom-right of #info */
.site-info__top-action {
  position: absolute;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 3;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  pointer-events: none;
}

.site-info .back-to-top.hero-btn {
  position: relative;
  z-index: 3;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  pointer-events: auto;
}

.site-info .back-to-top.hero-btn .hero-icon {
  width: clamp(22px, 6vw, 44px);
  height: clamp(22px, 6vw, 44px);
}

/* SoundCloud embed above event title (inside .split-main) */
.site-info__soundcloud {
  width: 100%;
  max-width: 100%;
  margin: clamp(0.75rem, 2.2vw, 1.35rem) 0 clamp(1rem, 2.8vw, 1.75rem);
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
}

.site-info__soundcloud-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 300px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 2px 10px var(--ts-info-shadow-faint);
}

/* Legacy */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

body.body-3d .event-card {
  background: var(--ts-glass-surface);
  backdrop-filter: blur(8px);
  border-color: var(--ts-border);
}

body.body-3d .site-footer .flat-toggle {
  margin-top: 0.75rem;
}

body.body-3d .site-footer .flat-toggle a {
  color: var(--ts-text-muted);
  font-size: 0.85rem;
}

/* Large desktop: cap toolbar growth on ultra-wide screens */
@media (min-width: 1600px) {
  .hero-toolbar {
    padding-left: max(2rem, calc((100% - 1280px) / 2 + 1rem));
    padding-right: max(2rem, calc((100% - 1280px) / 2 + 1rem));
  }
}