/* Turbo Spaghetti — all theme colors live in :root below */

:root {
  /* ═══════════════════════════════════════════════════════════════════════════
   * THEME CONFIG — edit this block to change the colour scheme.
   * Tip: keep contrast (ink on yellow, mustard on red) when swapping hues.
   * Favicon (favicon.png): keep on-brand with --ts-sauce / plate neutrals.
   * <meta name="theme-color"> in index.html: keep in sync with --ts-sky.
   * ═══════════════════════════════════════════════════════════════════════════ */

  /* —— 1. Brand accents (logo / UI highlights) —— */
  --ts-sky: #4cc7e4;
  --ts-turbo-green: #81e626;
  --ts-spaghetti-pink: #e94bb5;
  --ts-sauce: #f44414;
  --ts-disco: #bdc3c7;

  /* —— 2. Field washes (hero seam, #info background, html behind 3D) —— */
  --ts-segment-fill: #fdf544;
  --ts-noodle-yellow: var(--ts-segment-fill);

  /* —— 3. Neutrals (pages, type, borders) —— */
  --ts-bg: #ffffff;
  --ts-bg-elevated: #f0fbfd;
  --ts-text: #000000;
  --ts-text-muted: #2d2d2d;
  --ts-border: color-mix(in srgb, var(--ts-text) 10%, transparent);

  /* —— 4. #info block (mustard field + ketchup type) —— */
  --ts-info-text: #a80000;
  --ts-info-link: #8b0000;
  --ts-info-link-hover: #5c0000;
  --ts-info-shadow-soft: color-mix(in srgb, var(--ts-info-text) 12%, transparent);
  --ts-info-shadow-mid: color-mix(in srgb, var(--ts-info-text) 20%, transparent);
  --ts-info-shadow-faint: color-mix(in srgb, var(--ts-info-text) 8%, transparent);
  --ts-info-outline-soft: color-mix(in srgb, var(--ts-info-link) 55%, transparent);

  /* —— 5. SoundCloud (widget + icon links) —— */
  --ts-soundcloud: #ff5500;
  --ts-soundcloud-hover-bg: #fff4ee;

  /* —— 5b. Facebook (event CTA) —— */
  --ts-facebook: #1877f2;
  --ts-facebook-ink: #ffffff;
  --ts-facebook-border: color-mix(in srgb, var(--ts-facebook) 58%, var(--ts-text));
  --ts-facebook-shadow: color-mix(in srgb, var(--ts-facebook) 62%, var(--ts-text));

  /* —— 6. Hero toolbar (3D segment) —— */
  --ts-hero-ink: var(--ts-text);
  --ts-hero-text-shadow: color-mix(in srgb, var(--ts-bg) 35%, transparent);
  /* 🍝🔥 scroll-to-#info: outline / halo (dark orange, not black) */
  --ts-hero-scroll-emoji-stroke: color-mix(in srgb, var(--ts-sauce) 52%, #3d1500 48%);

  /* —— 7. Derived / alpha tokens —— */
  --ts-accent: var(--ts-sauce);
  --ts-accent-soft: color-mix(in srgb, var(--ts-sauce) 14%, transparent);
  --ts-accent-2: var(--ts-spaghetti-pink);
  --ts-body-radial-green: color-mix(in srgb, var(--ts-turbo-green) 12%, transparent);
  --ts-body-radial-pink: color-mix(in srgb, var(--ts-spaghetti-pink) 10%, transparent);
  --ts-body-radial-sky: color-mix(in srgb, var(--ts-sky) 14%, transparent);
  --ts-shadow-key-12: color-mix(in srgb, var(--ts-text) 12%, transparent);
  --ts-shadow-key-16: color-mix(in srgb, var(--ts-text) 16%, transparent);
  --ts-shadow-key-18: color-mix(in srgb, var(--ts-text) 18%, transparent);
  --ts-shadow-key-20: color-mix(in srgb, var(--ts-text) 20%, transparent);
  --ts-shadow-key-22: color-mix(in srgb, var(--ts-text) 22%, transparent);
  --ts-flyer-shadow-pink: color-mix(in srgb, var(--ts-spaghetti-pink) 20%, transparent);
  --ts-glass-surface: color-mix(in srgb, var(--ts-bg) 92%, transparent);
  --ts-version-muted: color-mix(in srgb, var(--ts-text) 40%, transparent);

  /* —— 8. Layout (non-colour; kept here for one config file) —— */
  --ts-font-display: "Times New Roman", Times, serif;
  --ts-font-body: "Times New Roman", Times, serif;
  --ts-radius: 12px;
  --ts-max-width: 1280px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html:has(body.body-3d) {
  background-color: var(--ts-segment-fill);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  font-family: var(--ts-font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ts-text);
  background: var(--ts-bg);
  background-image:
    radial-gradient(ellipse 100% 70% at 10% 0%, var(--ts-body-radial-green), transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 20%, var(--ts-body-radial-pink), transparent 45%),
    radial-gradient(ellipse 90% 50% at 50% 100%, var(--ts-body-radial-sky), transparent 55%);
}

/* Times New Roman Bold — solid black on white */
.ts-poster {
  font-family: var(--ts-font-body);
  font-weight: 700;
  font-size: clamp(1.45rem, 4.5vw, 2.65rem);
  line-height: 1.28;
  margin: 0 0 0.72rem;
  color: var(--ts-text);
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
}

.ts-poster-hero {
  font-size: clamp(2.85rem, 11vw, 5.75rem);
  margin-bottom: 1.35rem;
  line-height: 1.02;
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
}

.ts-poster-lead {
  font-size: clamp(1.65rem, 5.2vw, 3rem);
  margin-bottom: 1rem;
  margin-top: 0;
}

.site-info .ts-poster-lead {
  color: var(--ts-info-text);
}

/* #info section titles: red box, yellow type */
.site-info h2.ts-poster-lead {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.75rem;
  padding: 0.3em 0.58em;
  background-color: var(--ts-info-text);
  color: var(--ts-segment-fill);
  border-radius: 6px;
  line-height: 1.18;
  box-shadow: 0 2px 0 var(--ts-shadow-key-20);
}

.ts-poster-small {
  font-size: clamp(1rem, 3vw, 1.45rem);
  color: var(--ts-text);
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
}

.ts-poster a {
  color: var(--ts-sauce);
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 2px;
}

.ts-poster a:hover {
  text-decoration-thickness: 3px;
}

.ts-poster a:focus {
  outline: none;
}

.ts-poster a:focus-visible {
  outline: 3px solid var(--ts-spaghetti-pink);
  outline-offset: 4px;
  border-radius: 2px;
}

.event-panel,
.lineup-panel,
.event-notes,
.social-panel {
  margin-bottom: 2.5rem;
}

.site-info .event-hook {
  font-size: clamp(1.05rem, 2.35vw, 1.55rem);
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 0.65rem;
  color: var(--ts-info-text);
}

/* Opening blurb: larger italic stack */
.site-info .event-intro .ts-poster {
  font-style: italic;
  font-size: clamp(1.12rem, 2.35vw, 1.62rem);
  line-height: 1.45;
}

.site-info .event-intro .event-hook {
  font-style: italic;
  font-size: clamp(1.45rem, 3.5vw, 2.15rem);
  font-weight: 900;
  line-height: 1.22;
  margin-bottom: 0.85rem;
}

.site-info .event-pricing strong {
  font-weight: 800;
}

.site-info .lineup-act-title {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  font-size: clamp(1.35rem, 3.1vw, 1.95rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 1.35rem 0 0.4rem;
  padding: 0.28em 0.55em;
  background-color: var(--ts-info-text);
  color: var(--ts-segment-fill);
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--ts-shadow-key-20);
}

.site-info .lineup-act {
  background-color: var(--ts-info-text);
  color: var(--ts-segment-fill);
  border-radius: 12px;
  padding: clamp(1rem, 3vw, 1.4rem);
  margin-bottom: 1.15rem;
  box-shadow:
    0 4px 0 var(--ts-shadow-key-18),
    0 8px 24px var(--ts-info-shadow-soft);
}

.site-info .lineup-panel > .lineup-act:first-of-type {
  margin-top: 0.55rem;
}

.site-info .lineup-act:last-child {
  margin-bottom: 0;
}

.site-info .lineup-act .ts-poster {
  color: var(--ts-segment-fill);
}

.site-info .lineup-act .lineup-act-title {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 0.65rem;
  padding: 0;
  background: transparent;
  color: var(--ts-segment-fill);
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(2.15rem, 5.8vw + 0.35rem, 3.45rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.site-info .lineup-act__bio {
  font-size: clamp(0.95rem, 1.85vw, 1.32rem);
  line-height: 1.42;
  margin: 0;
  font-weight: 600;
  font-style: italic;
}

.site-info .lineup-act__socials {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.site-info .lineup-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0.45em 0.85em;
  box-sizing: border-box;
  font-family: var(--ts-font-body);
  font-weight: 800;
  font-size: clamp(0.72rem, 1.75vw, 0.88rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--ts-text);
  background: var(--ts-segment-fill);
  border: 2px solid var(--ts-text);
  border-radius: 8px;
  box-shadow: 0 3px 0 var(--ts-shadow-key-22);
  touch-action: manipulation;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}

.site-info .lineup-social-btn:hover {
  color: var(--ts-text);
  filter: brightness(1.05);
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--ts-shadow-key-22);
}

.site-info .lineup-social-btn:focus {
  outline: none;
}

.site-info .lineup-social-btn:focus-visible {
  outline: 3px solid var(--ts-segment-fill);
  outline-offset: 3px;
}

.social-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-list li {
  margin-bottom: 0.55rem;
}

.social-list li:last-child {
  margin-bottom: 0;
}

a {
  color: var(--ts-sauce);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: min(var(--ts-max-width), calc(100% - 2rem));
  width: 100%;
  margin: 0 auto;
  padding-top: 2.5rem;
  padding-bottom: 5rem;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

.site-info .wrap {
  padding-bottom: 2.5rem;
}

/* #info: red typography and links on yellow */
.site-info {
  color: var(--ts-info-text);
}

.site-info .ts-poster,
.site-info .ts-poster-hero,
.site-info .ts-poster-small {
  color: var(--ts-info-text);
}

/* Beat .site-info .ts-poster so lineup names stay mustard on red */
.site-info .ts-poster.lineup-act-title {
  color: var(--ts-segment-fill);
}

.site-info p.ts-poster.ts-poster-event-kicker {
  margin: 0.5rem 0 0.2rem;
  font-size: clamp(0.82rem, 2.2vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ts-info-text);
  opacity: 0.88;
}

.site-info .social-list {
  color: var(--ts-info-text);
}

.site-info .social-panel__head {
  margin-bottom: 0.15rem;
}

.site-info .social-panel__head .ts-poster-lead {
  margin-bottom: 0.25rem;
}

.site-info .social-panel__kicker {
  margin-top: 0;
  margin-bottom: 0;
}

.site-info .social-list--icons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.45rem, 2.2vw, 0.85rem);
  margin-top: 0.35rem;
}

.site-info .social-list--icons li {
  margin-bottom: 0;
}

.site-info .social-list--icons .hero-icon,
.site-info .social-list--icons svg.hero-icon {
  display: block;
  width: clamp(20px, 5.5vw, 40px);
  height: clamp(20px, 5.5vw, 40px);
  flex-shrink: 0;
}

.site-info .wrap .social-list--icons a.hero-icon-link:focus-visible {
  outline-color: var(--ts-info-text);
}

.site-info .wrap .ts-poster a,
.site-info .wrap .social-list:not(.social-list--icons) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  min-height: max(2.35em, 44px);
  padding: 0.45em 0.95em;
  margin: 0.2em 0.15em 0.4em 0;
  box-sizing: border-box;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--ts-info-text);
  background: var(--ts-bg);
  border: 2px solid var(--ts-info-text);
  border-radius: 8px;
  box-shadow: 0 3px 0 var(--ts-shadow-key-16);
  vertical-align: middle;
  line-height: 1.2;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}

.site-info .wrap .social-list:not(.social-list--icons) a {
  width: fit-content;
  max-width: 100%;
}

.site-info .wrap .ts-poster a:hover,
.site-info .wrap .social-list:not(.social-list--icons) a:hover {
  color: var(--ts-info-link-hover);
  filter: brightness(1.02);
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--ts-shadow-key-16);
}

.site-info .wrap .ts-poster a:focus-visible,
.site-info .wrap .social-list:not(.social-list--icons) a:focus-visible {
  outline: 3px solid var(--ts-info-text);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Full-width CTAs in copy column (Skiddle, Facebook) */
.site-info .wrap .ts-poster a.flyer-action-btn {
  width: 100%;
  max-width: 100%;
  margin: 0.15em 0 0.5rem;
  padding: 0.55rem 1rem;
  min-height: 48px;
  color: var(--ts-text);
  background: var(--ts-turbo-green);
  border: clamp(2px, 0.5vw, 3px) solid var(--ts-text);
  border-radius: clamp(6px, 1.2vw, 10px);
  box-shadow: 0 clamp(3px, 0.85vw, 5px) 0 var(--ts-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: clamp(0.88rem, 2.35vw, 1.12rem);
}

.site-info .wrap .ts-poster a.flyer-action-btn:hover {
  color: var(--ts-text);
  filter: brightness(1.04);
}

.site-info .wrap .ts-poster a.flyer-action-btn--facebook {
  background: var(--ts-facebook);
  color: var(--ts-facebook-ink);
  border-color: var(--ts-facebook-border);
  box-shadow: 0 clamp(3px, 0.85vw, 5px) 0 var(--ts-facebook-shadow);
}

.site-info .wrap .ts-poster a.flyer-action-btn--facebook:hover {
  color: var(--ts-facebook-ink);
  filter: brightness(1.06);
}

.site-info .wrap .ts-poster a.flyer-action-btn:focus-visible {
  border-radius: clamp(6px, 1.2vw, 10px);
}

.site-info .wrap .ts-poster a.flyer-action-btn--facebook:focus-visible {
  outline-color: var(--ts-facebook-ink);
}

.site-info .info-skiddle-line,
.site-info .info-facebook-line {
  display: block;
}

/* Stacked title + subline (Tickets / Skiddle, Facebook event) */
.flyer-action-btn__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  line-height: 1.12;
  text-align: center;
}

.flyer-action-btn__line {
  display: block;
}

.flyer-action-btn__sub {
  display: block;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.12;
  opacity: 0.95;
  text-transform: uppercase;
}

/* SoundCloud widget footer line (matches default embed styling) */
.site-info .site-info__soundcloud-embed-credit {
  margin: 0.35rem 0 0;
  font-size: 10px;
  line-height: 1.35;
  text-align: left;
  color: #cccccc;
  line-break: anywhere;
  word-break: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family:
    Interstate,
    "Lucida Grande",
    "Lucida Sans Unicode",
    "Lucida Sans",
    Garuda,
    Verdana,
    Tahoma,
    sans-serif;
  font-weight: 100;
}

.site-info .site-info__soundcloud-embed-credit a {
  color: #cccccc;
  text-decoration: none;
}

.site-info .site-info__soundcloud-embed-credit a:hover {
  text-decoration: underline;
}

.site-info .site-info__soundcloud-embed-credit a:focus-visible {
  outline: 2px solid var(--ts-info-text);
  outline-offset: 2px;
  border-radius: 2px;
}

.site-info header {
  border-bottom-color: var(--ts-info-text);
}

.site-info .split-main__head {
  text-align: center;
}

.site-info p.ts-poster.ts-poster-event-headline {
  font-size: clamp(1.95rem, 6.5vw, 3.65rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0.35rem 0 0;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: clamp(0.5rem, 2vw, 0.95rem) clamp(0.65rem, 2.8vw, 1.35rem);
  background: var(--ts-info-text);
  color: var(--ts-segment-fill);
  border-radius: clamp(8px, 1.5vw, 14px);
  border: clamp(2px, 0.45vw, 3px) solid color-mix(in srgb, var(--ts-text) 28%, var(--ts-info-text));
  box-shadow: 0 clamp(3px, 0.75vw, 5px) 0 color-mix(in srgb, var(--ts-text) 32%, transparent);
  text-shadow: none;
}

.site-info footer.site-footer {
  border-top-color: var(--ts-info-text);
  color: var(--ts-info-text);
}

.site-info .site-footer-credit {
  text-align: left;
  margin: 0;
  color: var(--ts-info-text);
}

.site-info .flyer-frame {
  box-shadow:
    0 10px 32px var(--ts-info-shadow-mid),
    0 0 0 3px var(--ts-info-outline-soft);
}

/* #info: type that fits the column — calmer than global poster clamps */
.site-info .ts-poster-hero {
  font-size: clamp(2rem, 5.2vw + 0.35rem, 3.65rem);
  line-height: 1.05;
  margin-bottom: 1.05rem;
}

.site-info .split-main__head .ts-poster-hero {
  margin-bottom: 0.25rem;
}

.site-info .ts-poster-lead {
  font-size: clamp(1.15rem, 2.65vw, 1.9rem);
  line-height: 1.22;
  margin-bottom: 0.6rem;
}

.site-info p.ts-poster {
  font-size: clamp(0.98rem, 1.85vw, 1.42rem);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.site-info .social-list {
  font-size: clamp(0.98rem, 1.85vw, 1.42rem);
  line-height: 1.35;
}

.site-info .social-list li {
  margin-bottom: 0.45rem;
}

.site-info .site-footer .ts-poster-small {
  font-size: clamp(0.82rem, 1.65vw, 1.05rem);
  line-height: 1.5;
  margin-bottom: 0;
}

/* #info: flyer left (wider col), copy right — source order: flyer, then main */
.site-info .page-split {
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(280px, 1.28fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.site-info .split-main {
  min-width: 0;
}

.site-info .split-flyer {
  position: sticky;
  top: max(1rem, env(safe-area-inset-top, 0px));
  justify-self: stretch;
  overflow-x: visible;
  overflow-y: visible;
}

/* Desktop 2-col: flyer fills column width (max size for aspect ratio); no frame fill or shadow */
@media (min-width: 961px) {
  .site-info .split-flyer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .site-info .flyer-frame {
    flex: 0 1 auto;
    min-height: 0;
    align-self: stretch;
    background: transparent;
    box-shadow: none;
  }

  .site-info .flyer-frame__link {
    display: block;
  }

  .site-info .flyer-frame picture {
    display: block;
    max-width: 100%;
    line-height: 0;
  }

  .site-info .flyer-frame img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .site-info .flyer-actions {
    flex: 0 0 auto;
  }
}

.flyer-frame {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 8px 28px var(--ts-flyer-shadow-pink),
    0 0 0 3px var(--ts-sky);
  background: var(--ts-bg);
}

.flyer-frame__link {
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
}

.flyer-frame__link:focus-visible {
  outline: 3px solid var(--ts-info-text);
  outline-offset: 4px;
  border-radius: 10px;
}

.flyer-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.site-info .flyer-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(0.45rem, 2vw, 0.65rem);
  margin-top: clamp(0.85rem, 2.5vw, 1.25rem);
  padding-bottom: clamp(0.75rem, 2.2vw, 1.35rem);
  width: 100%;
}

.site-info .flyer-actions--icons {
  display: grid;
  /* Explicit tracks so icon cells never collapse; wider middle column for TICKETS label */
  grid-template-columns:
    minmax(3rem, 1fr)
    minmax(6.75rem, 1.55fr)
    minmax(3rem, 1fr)
    minmax(3rem, 1fr)
    minmax(3rem, 1fr);
  gap: clamp(0.45rem, 2vw, 0.65rem);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.site-info .flyer-actions--icons::-webkit-scrollbar {
  height: 6px;
}

.site-info .flyer-actions--icons::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ts-info-text) 28%, transparent);
  border-radius: 3px;
}

.site-info .flyer-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  min-height: 48px;
  padding: 0.55rem 1rem;
  box-sizing: border-box;
  font-family: var(--ts-font-body);
  font-size: clamp(0.72rem, 1.85vw, 0.92rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--ts-text);
  background: var(--ts-turbo-green);
  border: clamp(2px, 0.5vw, 3px) solid var(--ts-text);
  border-radius: clamp(6px, 1.2vw, 10px);
  box-shadow: 0 clamp(3px, 0.85vw, 5px) 0 var(--ts-text);
  touch-action: manipulation;
}

.site-info .flyer-action-btn--icon {
  flex: unset;
  width: 100%;
  min-width: min(100%, 3rem);
  min-height: clamp(48px, 11vw, 56px);
  padding: clamp(0.38rem, 1.5vw, 0.55rem);
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;
}

/* Under-flyer bar: ticket icon + TICKETS label (sits in wider middle grid track) */
.site-info .flyer-action-btn--inline-label {
  flex-direction: row;
  gap: 0.42em;
  padding: clamp(0.38rem, 1.5vw, 0.55rem) clamp(0.42rem, 1.6vw, 0.72rem);
  font-size: clamp(0.62rem, 1.55vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.15;
  min-height: clamp(48px, 11vw, 56px);
}

.site-info .flyer-action-btn--inline-label .flyer-action-btn__icon {
  flex-shrink: 0;
}

.site-info .flyer-action-btn__inline-label {
  pointer-events: none;
}

.site-info .flyer-action-btn__icon {
  display: block;
  width: clamp(22px, 6.5vw, 30px);
  height: clamp(22px, 6.5vw, 30px);
  flex-shrink: 0;
  pointer-events: none;
}

.site-info .flyer-action-btn__icon--soundcloud {
  width: clamp(24px, 7vw, 32px);
  height: clamp(24px, 7vw, 32px);
}

.site-info .info-skiddle-line .flyer-action-btn--tickets {
  font-size: clamp(0.88rem, 2.2vw, 1.08rem);
  padding-top: 0.62rem;
  padding-bottom: 0.62rem;
}

.site-info .flyer-action-btn:hover {
  filter: brightness(1.04);
  transform: translateY(1px);
  box-shadow: 0 clamp(2px, 0.65vw, 4px) 0 var(--ts-text);
}

.site-info .flyer-action-btn:focus {
  outline: none;
}

.site-info .flyer-action-btn:focus-visible {
  outline: 3px solid var(--ts-info-text);
  outline-offset: 3px;
}

.site-info .flyer-action-btn--download {
  background: var(--ts-sky);
}

.site-info .flyer-action-btn--tickets {
  background: var(--ts-turbo-green);
}

.site-info .flyer-action-btn--soundcloud {
  background: var(--ts-soundcloud);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--ts-soundcloud) 35%, var(--ts-text));
  box-shadow: 0 clamp(3px, 0.85vw, 5px) 0 color-mix(in srgb, var(--ts-soundcloud) 50%, var(--ts-text));
}

.site-info .flyer-action-btn--soundcloud:hover {
  color: #ffffff;
  filter: brightness(1.06);
}

.site-info .flyer-action-btn--facebook {
  background: var(--ts-facebook);
  color: var(--ts-facebook-ink);
  border-color: var(--ts-facebook-border);
  box-shadow: 0 clamp(3px, 0.85vw, 5px) 0 var(--ts-facebook-shadow);
}

.site-info .flyer-action-btn--facebook:hover {
  color: var(--ts-facebook-ink);
  filter: brightness(1.06);
}

.site-info .flyer-action-btn--facebook:focus-visible {
  outline-color: var(--ts-facebook-ink);
}

.site-info .flyer-action-btn--maps {
  background: var(--ts-spaghetti-pink);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--ts-spaghetti-pink) 38%, var(--ts-text));
  box-shadow: 0 clamp(3px, 0.85vw, 5px) 0 color-mix(in srgb, var(--ts-spaghetti-pink) 52%, var(--ts-text));
}

.site-info .flyer-action-btn--maps:hover {
  color: #ffffff;
  filter: brightness(1.06);
}

/* ≤960px: single column — flyer row 1, copy row 2 (phones + portrait tablets) */
@media (max-width: 960px) {
  .site-info .page-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-info .split-flyer {
    grid-row: 1;
    position: static;
    max-width: min(560px, 100%);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
  }

  .site-info .split-main {
    grid-row: 2;
  }
}

/* Small phones: density tweaks */
@media (max-width: 700px) {
  .wrap {
    padding-top: 1.65rem;
    padding-bottom: 4rem;
  }

  .site-info .wrap {
    padding-bottom: 2rem;
  }

  .site-info .ts-poster-hero {
    font-size: clamp(1.75rem, 7vw + 0.2rem, 3.65rem);
  }

  .site-info p.ts-poster.ts-poster-event-headline {
    font-size: clamp(1.65rem, 8vw, 3.5rem);
  }

  .site-info .ts-poster-lead {
    font-size: clamp(1.05rem, 4vw, 1.9rem);
  }

  .site-info p.ts-poster,
  .site-info .social-list {
    font-size: clamp(0.94rem, 3.8vw, 1.42rem);
  }

  header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.1rem;
  }

  .event-panel,
  .social-panel {
    margin-bottom: 1.65rem;
  }

  .site-info .social-list:not(.social-list--icons) li {
    width: 100%;
  }

  .site-info .wrap .social-list:not(.social-list--icons) a {
    width: 100%;
    justify-content: center;
  }

}

/* Wide desktop: comfortable reading measure beside flyer */
@media (min-width: 1100px) {
  .site-info .page-split {
    gap: clamp(2rem, 3.2vw, 3.5rem);
    align-items: start;
  }
}

header {
  margin-bottom: 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 3px solid var(--ts-segment-fill);
}

.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ts-accent-2);
  margin-bottom: 0.75rem;
}

h1 {
  font-family: var(--ts-font-display);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}

.tagline {
  margin: 0;
  color: var(--ts-text-muted);
  font-size: 1.05rem;
}

section {
  margin-bottom: 2.75rem;
}

body.body-3d > section.hero-3d,
body.body-3d > section.site-info {
  margin-bottom: 0;
}

section h2 {
  font-family: var(--ts-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ts-text-muted);
  margin: 0 0 1rem;
}

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.event-card {
  background: var(--ts-bg-elevated);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  padding: 1rem 1.15rem;
}

.event-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.event-meta {
  font-size: 0.9rem;
  color: var(--ts-text-muted);
  margin: 0;
}

.event-card a.cta {
  display: inline-block;
  margin-top: 0.65rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.empty {
  color: var(--ts-text-muted);
  font-style: italic;
  margin: 0;
}

footer.site-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 3px solid var(--ts-spaghetti-pink);
  font-size: 0.9rem;
  color: var(--ts-text-muted);
}

.hint-3d {
  margin: 0;
  opacity: 0.95;
}

/* #info only: bottom-left, plain label (no glow / shadow) */
.site-info .version-badge {
  position: absolute;
  left: max(1rem, env(safe-area-inset-left, 0px));
  right: auto;
  top: auto;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 2;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--ts-font-body);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--ts-version-muted);
  white-space: nowrap;
  text-shadow: none;
  filter: none;
  pointer-events: none;
}