/* Expired shows: remove jump/hover, pointer, and dim */
.show-card.expired-show,
.show-card.expired-show.no-jump {
  pointer-events: none;
  opacity: 0.52;
  filter: grayscale(0.4) brightness(0.88);
  box-shadow: none;
  transition: none;
}
.show-card.expired-show.no-jump:hover {
  transform: none;
  box-shadow: none;
}
.show-card.expired-show .btn-tickets,
.show-card.expired-show .btn-map,
.show-card.expired-show .btn-details {
  pointer-events: none;
  background: #232332;
  color: #888;
  border-color: #232332;
  cursor: default;
  opacity: 0.7;
}
.show-card.expired-show .btn-tickets.expired {
  background: #232332;
  color: #888;
  border-color: #232332;
  cursor: default;
  opacity: 0.7;
}
/* Grey out expired shows — legacy class kept for compatibility */
.show-card.show-expired {
  opacity: 0.5;
  filter: grayscale(0.7);
  pointer-events: none;
}
.show-card.show-expired .show-actions {
  display: none;
}
.socials-separator {
  margin: 40px 0 18px 0;
  border: none;
  border-top: 1px solid var(--border);
  width: 100%;
}
/* =========================
   THEME / TOKENS
   ========================= */
:root{
  --bg:#0b0b0d;--fg:#f5f5f7;--muted:#a1a1aa;
  --accent:#ff2b6a;--accent-2:#6ae3ff;
  --card:#131318;--border:#1f1f23;
  
  /* === Background texture controls ===
     CHANGE THIS to adjust texture strength:
     --bgTextureOpacity: 0.06 → smaller = lighter, larger = stronger */
  --bgTextureTile: 320px;
  --bgTextureOpacity: 0.0012; /* more subtle: lower opacity further */
  --bgTextureBlend: soft-light; /* soft-light reduces white intensity vs screen */
  --bgTextureOverlay: 0.12; /* slightly lighter glaze so a bit more white shows */
}
.socials{
  display:grid;
  grid-template-columns: repeat(3, auto);
  justify-content:center;
  align-items:center;
  gap:14px;
}
.socials svg,.socials img{width:40px;height:40px}
.socials a{position:relative}
@media (max-width:520px){
  .socials{
    grid-template-columns: repeat(3, minmax(0,1fr));
    justify-items:center;
    gap:8px;
  }
  .socials svg,
  .socials img{width:18px;height:18px}
}

/* =========================
   BASE / RESET
   ========================= */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:none}
a:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* =========================
   LAYOUT
   ========================= */
.container{width:min(1100px,92%);margin:0 auto}
.section{padding:72px 0;border-top:1px solid var(--border)}
h2{font-size:clamp(28px,4vw,42px);margin:0 0 24px}

/* Top bar with socials + nav */
.site-top{
  position:fixed;top:12px;left:12px;right:12px;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.top-socials{
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
}
.top-socials a{
  display:flex;align-items:center;justify-content:center;
  padding:8px 10px;
  background:rgba(0,0,0,.28);
  border:1px solid #22222a;
  border-radius:10px;
  position:relative;
  -webkit-tap-highlight-color: transparent;
  transition:background .2s ease,transform .15s ease,color .2s ease;
}
.top-socials a:hover{background:#1e1e2a;transform:translateY(-1px)}
.top-socials svg,.top-socials img{width:30px;height:30px}

/* Quick nav inside top bar */
.site-nav{position:static}
.site-nav-links{
  display:flex;gap:10px;align-items:center;
  padding:0;border-radius:999px;
  background:none;border:none;box-shadow:none;backdrop-filter:none;
}
.site-nav a{
  color:var(--fg);font-weight:700;font-size:15px;letter-spacing:.2px;
  padding:6px 10px;border-radius:10px;display:block;
  background:rgba(0,0,0,.28);
  border:1px solid #22222a;
  transition:background .2s ease,color .2s ease,transform .15s ease;
}
.site-nav a:hover{background:#1e1e2a;color:var(--accent-2);transform:translateY(-1px)}
.site-nav a:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
@media (max-width:640px){
  body{padding-top  :56px}
  .site-top{top:8px;left:8px;right:8px;gap:8px}
  .top-socials{gap:6px}
  .top-socials a{padding:6px 8px;border-radius:10px}
  .top-socials svg,.top-socials img{width:24px;height:24px}
  .site-nav{position:static;padding:0;background:none}
  .site-nav-links{
    justify-content:flex-end;
    flex-wrap:nowrap;
    gap:6px;
    width:auto;
    padding:0;
  }
  .site-nav a{padding:6px 10px;font-size:14px}

  /* Anchor offset on mobile so titles clear the sticky nav */
  #music, #press, #shows, #videos, #contact{scroll-margin-top:6px}
}

/* Give every top-level section vertical rhythm */
main>section{padding:32px 0 0 0;border-top:0}
#music, #press, #shows, #videos, #contact{scroll-margin-top:4px}
/* Hero → Music gets a little more breathing room */
#music{padding-top:56px}

/* =========================
   HERO
   ========================= */
.hero{
  position:relative;
  /* keep hero content closer to the top while remaining responsive */
  padding: clamp(28px, 8vh, 96px) 0 48px;
  background:
    radial-gradient(1200px 600px at 70% -20%,rgba(106,227,255,.08),transparent 60%),
    radial-gradient(1400px 700px at -10% 0%,rgba(255,43,106,.10),transparent 60%);
}
.hero .container{
  display:flex;
  flex-direction:column;
  align-items:center; /* center horizontally */
  justify-content:flex-start;
  text-align:center; /* center text inside */
  gap:12px;
}

.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;margin:0 0 12px;color:var(--fg);text-shadow:0 2px 14px rgba(0,0,0,.55)}
.hero p{margin:0 0 6px;color:var(--muted);font-size:clamp(16px,2.3vw,20px)}
/* Improve hero text readability over textured backgrounds */
.hero h1,
.hero p,
main h2{ text-shadow: 0 2px 14px rgba(0,0,0,.45); }

/* Glitchy header effect (respect reduced motion) */
.glitch-title{
  position:relative;
  display:inline-block;
  font-family:'Saira',Inter,system-ui,sans-serif;
  font-weight:800;
  color:rgba(185,172,200,0.62);
  text-shadow:0 0 9px rgba(255,43,106,.12),0 0 14px rgba(106,227,255,.10);
  letter-spacing:0.04em;
  will-change:transform;
  animation:
    glitch-base 11.4s infinite ease-in-out,
    hero-title-breathe 14s ease-in-out infinite;
}
.glitch-title::before,
.glitch-title::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;
  mix-blend-mode:screen;pointer-events:none;
  opacity:.65;
  text-shadow:0 0 6px currentColor;
}
.glitch-title::before{
  color:var(--accent);
  clip-path:polygon(0 0,100% 0,100% 42%,0 56%);
  animation:glitch-shift 7.8s infinite steps(1,end);
}
.glitch-title::after{
  color:var(--accent-2);
  clip-path:polygon(0 44%,100% 38%,100% 100%,0 100%);
  animation:glitch-shift 5.6s infinite steps(1,end) reverse;
}
.glitch-title.is-click-flicker{
  animation:
    glitch-base 11.4s infinite ease-in-out,
    hero-title-breathe 14s ease-in-out infinite,
    click-flicker .42s steps(2,end) 1;
}
@keyframes glitch-base{
  0%,7%,12%,18%,27%,43%,46%,61%,67%,75%,86%,89%,100%{transform:translate3d(0,0,0)}
  8%{transform:translate3d(0,2.6px,0)}
  9%{transform:translate3d(0,-2px,0)}
  10%{transform:translate3d(0,1.2px,0)}
  19%{transform:translate3d(0,-1.8px,0)}
  44%{transform:translate3d(0,3.8px,0)}
  45%{transform:translate3d(0,-3.2px,0)}
  62%{transform:translate3d(0,1.4px,0)}
  68%{transform:translate3d(0,-2.4px,0)}
  87%{transform:translate3d(0,2.8px,0)}
  88%{transform:translate3d(0,-1.6px,0)}
}
@keyframes hero-title-breathe{
  0%{transform:scale(1) translate3d(0,0,0);letter-spacing:0.04em}
  50%{transform:scale(1.012) translate3d(0,0,0);letter-spacing:0.05em}
  100%{transform:scale(1) translate3d(0,0,0);letter-spacing:0.04em}
}
@keyframes glitch-shift{
  0%,5%,9%,16%,21%,37%,40%,55%,60%,72%,77%,90%,100%{transform:translate3d(0,0,0)}
  6%{transform:translate3d(3.8px,-2.4px,0)}
  7%{transform:translate3d(-2.6px,1.4px,0)}
  17%{transform:translate3d(-4px,2.8px,0)}
  18%{transform:translate3d(2.2px,-1.6px,0)}
  38%{transform:translate3d(3.2px,-3.4px,0)}
  39%{transform:translate3d(-1.8px,2px,0)}
  56%{transform:translate3d(-3.6px,1.8px,0)}
  57%{transform:translate3d(2.8px,-2.2px,0)}
  58%{transform:translate3d(-1.2px,3px,0)}
  73%{transform:translate3d(4.4px,-1.6px,0)}
  91%{transform:translate3d(-2.4px,2.6px,0)}
  92%{transform:translate3d(1.6px,-1.4px,0)}
}
@keyframes click-flicker{
  0%{opacity:1;filter:brightness(1)}
  18%{opacity:.78;filter:brightness(.86)}
  36%{opacity:1;filter:brightness(1.08)}
  52%{opacity:.68;filter:brightness(.8)}
  72%{opacity:1;filter:brightness(1.02)}
  100%{opacity:1;filter:brightness(1)}
}
@media(prefers-reduced-motion:reduce){
  .glitch-title,
  .glitch-title::before,
  .glitch-title::after{animation:none}
}

/* Softer glitch for section titles */
.glitch-soft{
  position:relative;
  display:inline-block;
  font-family:'Saira',Inter,system-ui,sans-serif;
  font-weight:700;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-image:
    linear-gradient(120deg, rgba(255,96,176,1), rgba(205,80,255,1), rgba(255,220,255,0.55), rgba(170,80,245,1), rgba(255,96,176,1)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n2)' opacity='0.9'/%3E%3C/svg%3E");

  background-size:300% 300%, 120px 120px, 110px 110px;
  background-blend-mode:screen, soft-light, color-dodge;
  background-clip:text;
  -webkit-background-clip:text;
  text-shadow:
    0 0 10px rgba(0,0,0,.58),
    0 0 26px rgba(0,0,0,.42);
  filter:
    saturate(1.18)
    drop-shadow(0 0 8px rgba(255,43,106,.5))
    drop-shadow(0 0 14px rgba(106,227,255,.45));
  animation:
    seethe-text 7.5s ease-in-out infinite,
    gradient-pan 6s linear infinite;
}
@keyframes seethe-text{
  0%,100%{filter:saturate(1.18) brightness(.94);transform:scale(1)}
  50%{filter:saturate(1.36) brightness(1.06);transform:scale(1.018)}
}
@keyframes gradient-pan{
  0%{background-position:300% 50%, 0 0, 0 0}
  100%{background-position:0% 50%, 0 0, 0 0}
}
@media(prefers-reduced-motion:reduce){
  .glitch-soft,
  .glitch-soft::before,
  .glitch-soft::after{animation:none}
}

/* Stronger readability: subtle backdrop behind section titles only */
main h2{
  display:inline-block;
  background: rgba(0,0,0,.75);
  border-radius:10px;
  padding:4px 10px;
}

/* =========================
   BUTTONS / CTA
   ========================= */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border:none;border-radius:10px;
  background:rgba(0,0,0,.28);
  border:1px solid #22222a;
  color:var(--fg);font-weight:800;cursor:pointer;
  transition:background .2s ease,transform .15s ease;
}
.cta:hover{ background:#1e1e2a; transform:translateY(-2px); }

.cta.cta-muted{
  background:#1a1a22;
  color:var(--fg);
  box-shadow:none;
  border:1px solid #24242c;
  font-weight:700;
}
.cta.cta-muted:hover{
  background:#232332;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}

/* Tone down the inline “Join the mailing list” CTA in socials so it blends in */
#joinList.cta{
  background:rgba(0,0,0,.28);
  border:1px solid #22222a;
  color:var(--fg);
  box-shadow:none;
  font-weight:700;
  border-radius:10px;
}
#joinList.cta:hover{
  background:#1e1e2a;
  transform:translateY(-1px);
  box-shadow:none;
}
#joinList.cta:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.btn{
  display:inline-block;padding:8px 12px;border:1px solid #22222a;border-radius:10px;
  background:rgba(0,0,0,.28);color:var(--fg);font-weight:700;cursor:pointer;
  transition:background .2s ease,transform .15s ease,opacity .15s ease;
  will-change: transform;
}
.btn:hover{background:#1e1e2a;transform:translateY(-1px)}
.btn:focus{outline:none;box-shadow:0 0 0 2px var(--accent-2)}

/* =========================
  GRID / CARD
  ========================= */
.card{background:transparent;border:0;box-shadow:none;padding:0}

/* =========================
   SHOWS (poster grid)
   ========================= */
#shows .card{background:transparent;border:0;padding:0;display:flex;align-items:center;gap:4px}
.shows-grid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
}
.shows-grid::-webkit-scrollbar {
  display: none;
}
.show-card {
  /* Exactly 4 cards visible: (100% - gap*3) / 4 = 25% - 15px with gap=20px */
  flex: 0 0 calc(25% - 15px);
  min-width: 200px;
  scroll-snap-align: start;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
@media (max-width: 900px) {
  .show-card {
    flex: 0 0 calc(50% - 10px);
  }
  .shows-arrow { height: 40px; width: 28px; font-size: 1.3rem; }
}
@media (max-width: 640px) {
  .shows-grid {
    gap: 12px;
    padding-bottom: 8px;
  }
  /* Card: container(92vw) minus arrows+gaps(80px) minus 28px peek = grid - 28px */
  .show-card {
    flex: 0 0 calc(92vw - 108px);
    min-width: 0;
  }
  /* On mobile use cover so non-poster images don't distort */
  .show-media img,
  .show-media > img {
    object-fit: cover;
    object-position: top center;
  }
}
.show-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 14px 36px rgba(0,0,0,.48),0 0 0 1px rgba(106,227,255,.13)}
.show-media{position:relative;margin:0;aspect-ratio:2/3;background:#0f0f14;overflow:hidden}
.show-media picture{display:block;width:100%;height:100%}
.show-media img{width:100%;height:100%;object-fit:fill;display:block}
.show-media>img{width:100%;height:100%;object-fit:fill}
.show-poster-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: #131318;
  border: 2px dashed #2a2a34;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a2a34;
  font-size: 2.5rem;
  letter-spacing: 2px;
}
.show-card-placeholder .btn-tickets {
  background: rgba(0,0,0,.28);
  border: 1px solid #22222a;
  color: var(--muted);
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: default;
}
.show-meta{padding:8px 10px 0;display:grid;gap:4px}
.show-meta time{font-weight:700;letter-spacing:.2px}
.show-meta span{color:var(--muted);font-size:.9rem}
.show-actions{padding:8px 10px 10px;display:flex;gap:8px;flex-wrap:wrap}
.btn-tickets{
  background:rgba(0,0,0,.28);
  border:1px solid #22222a;
  color:var(--fg);
  font-weight:700;
  border-radius:10px;
  padding:8px 12px;
}
.btn-map,.btn-details{
  background:rgba(0,0,0,.28);
  border:1px solid #22222a;
  border-radius:10px;
}

/* =========================
   CONTACT
   ========================= */
#contact{padding:32px 0 60px;border-top:0;position:relative;overflow:visible;margin-top:0}/* inherits 32px top from main>section default */
#contact > .container{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
#contact h2{margin-bottom:6px}
#music h2{margin-bottom:8px}
.contact-card{
  width:100%;max-width:560px;
  display:flex;flex-direction:column;gap:14px;
  align-items:flex-start;
}
.contact-blurb{margin:0;color:var(--muted);font-size:clamp(15px,2.2vw,17px);line-height:1.6}
.contact-email{
  display:inline-block;
  padding-left:12.5px;
  font-size:clamp(16px,2.6vw,20px);
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
  letter-spacing:.3px;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.contact-email:hover{color:var(--fg);border-bottom-color:var(--accent)}

/* =========================
   PRESS
   ========================= */
#press{padding:32px 0 0;border-top:0;position:relative;overflow:visible;margin-top:0}
#press > .container{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.press-card{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:960px;
  background:rgba(0,0,0,.28);
  border:1px solid #22222a;
  border-radius:12px;
  padding:16px;
}
.press-card::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,13,.42),rgba(11,11,13,.62)),
    url('https://res.cloudinary.com/dgxgi8bga/image/upload/f_auto,q_auto,w_1920/DSCF5952-Enhanced-NR_gqq4av');
  background-size:cover;
  background-position:center;
  filter:saturate(1.12) brightness(.9);
  animation:press-breathe 10s ease-in-out infinite;
  z-index:0;
  pointer-events:none;
}
.press-card > *{position:relative;z-index:1}
.press-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}
.press-item{
  background:rgba(0,0,0,.28);
  border:1px solid #22222a;
  border-radius:10px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  height:100%;
}
.press-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:.95rem;
  letter-spacing:.2px;
}
.press-outlet{color:var(--fg);font-weight:700}
.press-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid #22222a;
  border-radius:999px;
  font-size:.8rem;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--muted);
}
.press-item h3{margin:0;font-size:clamp(16px,2.6vw,20px);letter-spacing:.3px}
.press-item p{margin:0;color:var(--muted)}
.press-actions{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.press-item .btn{padding:8px 12px}
@media(max-width:520px){
  .press-card{padding:12px}
}

@keyframes press-breathe{
  0%,100%{filter:saturate(0.88) brightness(.6)}
  50%{filter:saturate(1.52) brightness(1.72)}
}
@media(prefers-reduced-motion:reduce){
  .press-card::before{animation:none}
}

.singles-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;
  justify-items:center;margin-top:12px;
}
.single-card{
  width:100%;max-width:460px;
  background:rgba(0,0,0,.28);
  border:1px solid #22222a;
  border-radius:12px;
  padding:14px 14px 16px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;
}
.single-card h3{margin:0;font-size:clamp(18px,3vw,22px);letter-spacing:.3px}
.single-card .bandcamp-embed{width:100%}
.single-card .bandcamp-embed iframe{width:100%;max-width:350px;margin:0 auto;display:block}
.bandcamp-placeholder{
  background:#0f0f14;
  border:1px dashed #2a2a34;
  border-radius:12px;
  padding:28px 20px;
  min-height:220px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
}
.platform-icons-disabled{
  border:1px dashed #22222a;
  border-radius:10px;
  padding:10px;
}
.platform-icons-disabled .platform-text{color:var(--muted)}
@media(max-width:520px){
  /* === Smile-Thru section: constrain to screen width === */
  .singles-grid{grid-template-columns:1fr}
  .single-card{max-width:100%;overflow:hidden}
  /* Force Bandcamp iframe to fit card — overrides inline width:350px */
  .single-card .bandcamp-embed iframe{width:100% !important}
}

/* Make Bandcamp card blend with page background */
.bandcamp-embed{background:transparent;border:0;padding:0}

/* Gallery section */
#gallery{padding:32px 0 0 0}
.gallery-card{
  background:rgba(0,0,0,.28);
  border:1px solid #22222a;
  border-radius:12px;
  padding:14px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  width:100%;
  max-width:1100px;
  margin:0 auto;
}
.gallery-meta{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.gallery-row-wrap{display:flex;align-items:center;gap:4px;width:100%}
.gallery-row-wrap .gallery-grid{flex:1 1 auto;min-width:0}
.gallery-grid{position:relative}
.gallery-page{
  display:none;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:8px;
}
.gallery-page.is-active{display:grid;opacity:0}
.gallery-page.is-active.is-visible{
  opacity:1;
  transition:opacity 0.42s ease;
}
.gallery-item{
  margin:0;
  border-radius:10px;
  overflow:hidden;
  background:#0f0f14;
  border:1px solid #22222a;
  width:100%;
  aspect-ratio:3 / 2;
  cursor:pointer;
}
.gallery-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform 0.32s ease;
}
.gallery-item:hover img{transform:scale(1.07)}
@media(max-width:520px){
  .gallery-card{padding:12px}
  .gallery-page{grid-template-columns:repeat(2,1fr)}
}

/* Platform icon row below Bandcamp embed */
.platform-icons{
  display:flex;gap:10px;align-items:center;justify-content:center;margin-top:2px;
}
.platform-icons a{
  position:relative;
  color:var(--fg);
  background:rgba(0,0,0,.28);
  border:1px solid #22222a;
  border-radius:10px;
  padding:6px 8px;
  transition:color .2s ease,transform .15s ease;
}
.platform-icons a:hover{color:var(--accent);transform:translateY(-1px)}
.platform-icons svg,.platform-icons img{width:32px;height:32px;display:block}
.platform-icons a:hover img{transform:translateY(-1px)}
.platform-text{display:inline-block;font-size:14px;font-weight:600;letter-spacing:.5px;color:#2BB7EA;}

/* Make hero platform icons larger */
.hero .platform-icons{gap:18px;margin-top:0}
.hero .platform-icons svg,
.hero .platform-icons img{width:36px;height:36px}
@media(max-width:520px){
  .hero .platform-icons svg,
  .hero .platform-icons img{width:34px;height:34px}
}

@media(max-width:540px){
  .platform-icons{gap:6px;justify-content:center;flex-wrap:wrap}
  .platform-icons a{padding:4px 6px}
  .platform-icons svg,
  .platform-icons img{width:24px;height:24px}
  .platform-icons .platform-text{font-size:12px !important;letter-spacing:.2px !important}
}

/* Simple CSS tooltip for platform icons */
.platform-icons a[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;left:50%;bottom:100%;
  transform: translate(-50%, -6px);
  background: var(--card);
  color: var(--fg);
  border:1px solid #22222a;
  border-radius:8px;
  padding:4px 8px;
  font-size:12px;line-height:1;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;z-index:10;
  transition: opacity .12s ease, transform .12s ease;
}
.platform-icons a[data-tooltip]::before{
  content:"";position:absolute;left:50%;bottom:100%;
  transform: translate(-50%, 2px) rotate(45deg);
  width:8px;height:8px;
  background: var(--card);
  border-left:1px solid #22222a;border-top:1px solid #22222a;
  opacity:0;pointer-events:none;z-index:9;
  transition: opacity .12s ease, transform .12s ease;
}
.platform-icons a:hover[data-tooltip]::after,
.platform-icons a:focus-visible[data-tooltip]::after,
.platform-icons a:hover[data-tooltip]::before,
.platform-icons a:focus-visible[data-tooltip]::before{
  opacity:1;
  transform: translate(-50%, -10px);
}

/* Tooltips for top-bar socials */
.top-socials a[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;left:50%;top:100%;
  transform: translate(-50%, 14px);
  background: var(--card);
  color: var(--fg);
  border:1px solid #22222a;
  border-radius:8px;
  padding:4px 8px;
  font-size:12px;line-height:1;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;z-index:20;
  transition: opacity .12s ease, transform .12s ease;
}
.top-socials a[data-tooltip]::before{
  content:"";position:absolute;left:50%;top:100%;
  transform: translate(-50%, 4px) rotate(45deg);
  width:8px;height:8px;
  background: var(--card);
  border-left:1px solid #22222a;border-top:1px solid #22222a;
  opacity:0;pointer-events:none;z-index:19;
  transition: opacity .12s ease, transform .12s ease;
}
.top-socials a:hover[data-tooltip]::after,
.top-socials a:hover[data-tooltip]::before{
  opacity:1;
  transform: translate(-50%, 18px);
}

@media (hover: none){
  .top-socials a,
  .top-socials a:hover,
  .top-socials a:active,
  .top-socials a:focus,
  .top-socials a:focus-visible{
    background:rgba(0,0,0,.28) !important;
    color:var(--fg) !important;
    border-color:#22222a !important;
    box-shadow:none !important;
    transform:none !important;
    outline:none !important;
    transition:none !important;
  }
  .top-socials a[data-tooltip]::after,
  .top-socials a[data-tooltip]::before{
    display:none!important;
  }
}

/* Video section embed */
.video-embed{background:transparent;border:0;padding:0;display:flex;flex-direction:column;align-items:center}
.video-facade{
  max-width:820px;
  width:100%;
  cursor:pointer;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  display:block;
  aspect-ratio:16/9;
  transition:box-shadow 0.25s ease, transform 0.2s ease;
}
.video-facade:hover{
  box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(106,227,255,.1);
  transform:translateY(-2px);
}
.video-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-facade-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.video-embed iframe{width:100%;max-width:820px;aspect-ratio:16/9;height:auto;border:0;border-radius:12px;margin:0 auto;display:block}

/* Shows / Gallery arrow nav buttons */
.shows-arrow {
  flex: 0 0 auto;
  position: static;
  transform: none;
  background: rgba(20, 20, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #666;
  font-size: 1.5rem;
  padding: 0;
  border-radius: 6px;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.15s ease;
  user-select: none;
  height: 50px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shows-arrow:disabled {
  opacity: 0.2;
  pointer-events: none;
}
.shows-arrow:hover,
.shows-arrow:focus-visible {
  opacity: 1;
  color: var(--accent-2);
  transform: scale(1.08);
}
/* =========================
   FORMS
   ========================= */
input,textarea{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid #2a2a34;background:#0f0f14;color:var(--fg);
}
textarea{min-height:120px;resize:vertical}
.mc-form{margin:0 auto;max-width:640px}
.mc-row{
  display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap
}
.mc-form input[type="email"]{
  flex:1 1 280px;min-width:240px;padding:12px 14px;border-radius:10px;
  border:1px solid #2a2a34;background:#0f0f14;color:var(--fg);
}
.mc-form .cta{white-space:nowrap}
.mc-responses .response{color:var(--muted);font-size:.95rem;margin-top:8px}
.mc-hp{position:absolute;left:-5000px}
@media(max-width:520px){
  .mc-row{flex-direction:column;align-items:stretch}
  .mc-form .cta{width:100%}
}

/* Modal / Mailchimp: better mobile sizing */
@media (max-width:640px) {
  .modal-panel {
    /* Make sure the panel never overflows the viewport and counts padding */
    width: min(92vw, 520px);
    max-width: 92vw;
    box-sizing: border-box;
    margin: 6vh auto;
    padding: 12px;
    border-radius: 12px;
    gap: 12px;
  }

  /* Allow the form to fill the available space rather than forcing a large min-width */
  .mc-form { max-width: 100%; width: 100%; }
  .mc-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .mc-form input[type="email"]{ flex: 1 1 auto; min-width: 0; padding:10px 12px; }
  .mc-form .cta{ width:100%; padding:12px 14px; }

  /* Slightly smaller close button so it doesn't look huge on tiny screens */
  .modal-close{ font-size:24px; top:8px; right:10px }
}


/* =========================
   MODAL (Mailchimp)
   ========================= */
.modal[hidden]{display:none!important}
.modal{position:fixed;inset:0;z-index:1000;overscroll-behavior:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.modal-panel{
  position:relative;max-width:680px;margin:8vh auto;background:var(--card);
  border:1px solid #22222a;border-radius:16px;padding:18px;display:grid;
  grid-template-columns:1fr;gap:18px;
}
.modal-panel-gallery{
  max-width:min(96vw,1100px);
  margin:clamp(12px,6vh,48px) auto;
  padding:12px;
  display:block;
  position:relative;
}
.modal-panel-gallery img{
  width:auto;
  height:auto;
  max-width:min(96vw,1100px);
  max-height:calc(100vh - 140px);
  display:block;
  border-radius:12px;
  object-fit:contain;
  margin:0 auto;
}
.modal-panel-gallery .modal-close{top:4px;right:6px}
@media(max-width:720px){
  .modal-panel-gallery{margin:16px auto}
  .modal-panel-gallery img{max-height:calc(100vh - 170px)}
}
/* Gallery lightbox: fullscreen + centered on mobile */
@media (max-width: 640px) {
  .modal-panel-gallery {
    position: absolute;
    inset: 0;
    margin: 0;
    max-width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    /* let taps on empty areas pass through to the backdrop (closes modal) */
    pointer-events: none;
  }
  .modal-panel-gallery img {
    max-width: 94vw;
    max-height: 90vh;   /* fallback */
    max-height: 90svh;  /* excludes browser chrome on mobile */
    border-radius: 6px;
    pointer-events: auto;
    margin: 0;
  }
  /* Arrows: fixed to viewport edges so pointer-events:none on the panel doesn't block them */
  .gallery-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    z-index: 1002;
  }
  .gallery-nav-prev { left: 8px; }
  .gallery-nav-next { right: 8px; }
  .modal-panel-gallery .modal-close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 12px));
    right: 12px;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    z-index: 1001;
  }
}
.gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.6);
  border:1px solid #22222a;
  color:var(--fg);
  border-radius:50%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  font-size:24px;
  cursor:pointer;
  z-index:2;
  transition:background .2s ease,transform .15s ease;
}
.gallery-nav:hover{background:rgba(0,0,0,.75);transform:translateY(-50%) scale(1.02)}
.gallery-nav:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.gallery-nav-prev{left:10px}
.gallery-nav-next{right:10px}
.modal-close{
  position:absolute;top:6px;right:8px;border:none;background:transparent;
  color:var(--fg);font-size:28px;line-height:1;cursor:pointer;
  min-width:44px;min-height:44px;display:grid;place-items:center;
}

/* =========================
   FOOTER
   ========================= */
footer,.site-footer{
  padding:40px 0;color:var(--muted);border-top:1px solid var(--border)
}
.footer-wrap{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.footer-stack hr{width:100%;margin:0;opacity:.25}
.footer-cta{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.footer-copy{width:100%;text-align:left}
@media(max-width:640px){
  .footer-wrap{align-items:center;text-align:center}
  .footer-copy{text-align:left}
}
/* Simple tooltip for socials icons */
.socials a[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;left:50%;bottom:calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--card);
  color: var(--fg);
  border:1px solid #22222a;
  border-radius:8px;
  padding:4px 8px;
  font-size:12px;line-height:1;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;z-index:10;
  transition: opacity .12s ease, transform .12s ease;
}
.socials a[data-tooltip]::before{
  content:"";position:absolute;left:50%;bottom:100%;
  transform: translate(-50%, 4px) rotate(45deg);
  width:8px;height:8px;
  background: var(--card);
  border-left:1px solid #22222a;border-top:1px solid #22222a;
  opacity:0;pointer-events:none;z-index:9;
  transition: opacity .12s ease, transform .12s ease;
}
.socials a:hover[data-tooltip]::after,
.socials a:focus-visible[data-tooltip]::after,
.socials a:hover[data-tooltip]::before,
.socials a:focus-visible[data-tooltip]::before{
  opacity:1;
  transform: translate(-50%, -2px);
}

/* =========================
   UTILITIES / HERO IMG
   ========================= */
.text-center{text-align:center}
.no-mt{margin-top:0}
.col-span-all{grid-column:1 / -1}
.hero.has-image{overflow:hidden}
.hero.has-image::before{
  content:"";position:absolute;inset:0;
  background-image:url('https://res.cloudinary.com/dgxgi8bga/image/upload/f_auto,q_auto,w_1920/hero_tot2cm');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.78;z-index:0;transform:scale(1.02);pointer-events:none;
  mix-blend-mode:normal;
  filter:saturate(1.05) contrast(1.04) brightness(1.0);
  -webkit-mask-image:linear-gradient(to bottom, black 75%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 75%, transparent 100%);
  animation:
    hero-drift 10s ease-in-out infinite,
    hero-hue 10s ease-in-out infinite;
}
.hero.has-image::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 52% 100% at 50% 50%, transparent 32%, var(--bg) 88%),
    linear-gradient(135deg,rgba(11,11,13,.42),rgba(11,11,13,.1)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size:auto,auto,140px 140px;
  background-position:0 0,0 0,0 0;
  background-blend-mode:normal,normal,screen;
  z-index:0;pointer-events:none;
}
.hero.has-image>.container{position:relative;z-index:1}
@keyframes hero-drift{
  0%{transform:scale(1.01) translate3d(0,0,0)}
  50%{transform:scale(1.07) translate3d(0,0,0)}
  100%{transform:scale(1.01) translate3d(0,0,0)}
}
@keyframes hero-hue{
  0%,100%{filter:hue-rotate(0deg) saturate(1.22) brightness(1.35)}
  50%{filter:hue-rotate(8deg) saturate(0.95) brightness(0.78)}
}
@media(prefers-reduced-motion:reduce){
  .hero.has-image::before{animation:none;transform:scale(1.05);filter:none}
  .hero.has-image::after{animation:none}
}
@media(max-width:520px){
  /* bring things slightly higher on small screens */
  .hero{ padding-top:22px; padding-bottom:36px }
  .hero h1{ font-size: clamp(28px,7vw,44px) }
}
@media(prefers-reduced-motion:reduce){
  .show-card,.btn{transition:none}
  .show-card:hover{transform:none}
}

/* Subtle sitewide background overlay (toggle via body class) */
/* Sitewide tiled background, rendered behind all content */
body.bg-overlay-sticker{
  background-image:
    linear-gradient(rgba(11,11,13,var(--bgTextureOverlay)), rgba(11,11,13,var(--bgTextureOverlay))),
    url('https://res.cloudinary.com/dgxgi8bga/image/upload/f_auto,q_auto/logo_1_u37yvy');
  background-repeat: repeat;
  background-size: auto, var(--bgTextureTile) var(--bgTextureTile);
  background-position: 0 0;
  background-attachment: fixed; /* keep tiles steady while scrolling */
  /* First layer darkens/softens edges; second layer is the texture */
  background-blend-mode: multiply, var(--bgTextureBlend);
  background-color: var(--bg);
}

/* Mobile adjustments: soften and shrink tiles for smaller screens */
@media (max-width: 600px) {
  :root {
    --bgTextureTile: 160px;
    --bgTextureOpacity: 0.001;
    --bgTextureOverlay: 0.12;
  }

  body.bg-overlay-sticker{
    background-image: none;
    background-color: var(--bg);
    background-attachment: scroll;
  }
}

/* Streaming icons: wrap on medium-small screens (≤540px handled separately above) */
@media (min-width:541px) and (max-width:600px) {
  .platform-icons{flex-wrap:wrap;gap:10px}
  .platform-icons svg,.platform-icons img{width:26px;height:26px}
}

/* === Social icons: keep icons white, only tint on hover === */
.socials a{color:var(--fg)}
.socials a:hover{color:var(--accent)}

/* (Removed .single styles — section no longer used) */

/* =========================
   MOBILE OPTIMISATION
   ========================= */

/* --- Touch-device feedback (replaces :hover which sticks on tap) --- */
@media (hover: none) {
  /* Disable card lift on tap — avoid the "stuck hover" effect on iOS/Android */
  .show-card:hover {
    transform: none;
    box-shadow: none;
  }
  /* Tactile press feedback for arrows */
  .shows-arrow:active {
    opacity: 1;
    color: var(--accent-2);
    background: rgba(30, 30, 46, 0.9);
  }
  /* Button press feedback */
  .btn-tickets:active,
  .btn-map:active,
  .btn-details:active {
    opacity: 0.72;
  }
  /* Platform icon press */
  .platform-icons a:active {
    color: var(--accent);
    transform: none;
  }
}

/* --- Phones ≤ 640px --- */
@media (max-width: 640px) {
  /* Shows arrows: wider touch target (was 28px from 900px rule) */
  .shows-arrow {
    width: 36px;
    min-width: 36px;
    height: 48px;
    min-height: 44px;
  }

  /* Show meta: tighten text + prevent overflow on narrow single-card view */
  .show-meta {
    padding: 6px 8px 0;
    gap: 3px;
  }
  .show-meta time {
    font-size: .85rem;
  }
  .show-meta span {
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .show-actions {
    padding: 6px 8px 8px;
    gap: 6px;
  }
  .btn-tickets,
  .btn-map,
  .btn-details {
    font-size: .82rem;
    padding: 7px 10px;
  }

  /* Video: slightly softer corners on small screens */
  .video-facade,
  .video-embed iframe {
    border-radius: 8px;
  }

  /* Video: full-bleed within container, no excess side gaps */
  #videos .video-embed {
    width: 100%;
  }
}

/* --- Small phones ≤ 520px --- */
@media (max-width: 520px) {
  /* Gallery: switch to 2-col × 4-row so all 8 images are visible */
  .gallery-page {
    grid-template-rows: repeat(4, 1fr);
    gap: 6px;
  }
  /* Gallery arrows: narrower so grid gets maximum width */
  .gallery-row-wrap .shows-arrow {
    width: 26px;
    min-width: 26px;
    height: 40px;
    min-height: 40px;
    font-size: .95rem;
  }
  /* Gallery card: reduce padding so more image area shown */
  .gallery-card {
    padding: 8px;
  }
}

/* --- Very small phones ≤ 400px --- */
@media (max-width: 400px) {
  /* Shows arrows: slightly smaller to reclaim grid width */
  .shows-arrow {
    width: 30px;
    min-width: 30px;
  }
  /* Card: container(92vw) minus narrower arrows+gaps(68px) minus 30px peek */
  .show-card {
    flex: 0 0 calc(92vw - 98px);
  }
  /* Tighter meta text */
  .show-meta span {
    font-size: .75rem;
  }
}

/* =========================
   SCROLL REVEAL
   ========================= */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}