/* Rift-Core Neon design tokens */
:root{
  --bg: #07060A;
  --cyan: #00E5C4;
  --magenta: #FF2E7A;
  --char: #2F2B36;
  --muted: #9AA3A8;
  --white: #FFFFFF;
  --max-width: 1200px;
  --header-height: 84px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --motion-play: running;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.35;
}
/* Page fade-in removed to keep hero underbar always visible */
/* Prevent accidental horizontal overflow */
html{overflow-x:hidden}
body{overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
iframe{max-width:100%}
/* Avoid long strings breaking layout */
*, *::before, *::after{word-wrap:break-word; overflow-wrap:anywhere}
/* Prevent headings/links from causing horizontal scroll on narrow screens */
h1,h2,h3,h4,h5,h6,a,button,small{word-break:normal}
/* Branded selection */
::selection{background:rgba(0,229,196,0.28); color:#fff}
::-moz-selection{background:rgba(0,229,196,0.28); color:#fff}
/* Custom dark scrollbars */
:root{scrollbar-color:rgba(154,163,168,0.6) rgba(7,6,10,0.6); scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,0.04)}
*::-webkit-scrollbar-thumb{background:rgba(154,163,168,0.6); border-radius:10px; border:2px solid rgba(7,6,10,0.9)}
*::-webkit-scrollbar-thumb:hover{background:rgba(154,163,168,0.8)}
/* Typography (global, consistent across pages) */
h1,h2,h3,h4,h5,h6{font-family:'Bebas Neue',sans-serif;letter-spacing:0.02em;line-height:1;text-transform:uppercase;color:var(--cyan);margin:0 0 10px}
h1{font-size:clamp(40px,6.5vw,64px)}
h2{font-size:clamp(24px,4.2vw,36px)}
h3{font-size:clamp(20px,3.2vw,28px)}
h4{font-size:18px}
h5{font-size:16px}
h6{font-size:14px}
p,li{font-size:16px;line-height:1.55}
small{font-size:12.5px}
/* Default link style for body text (overridden by nav, buttons, utilities) */
a{color:var(--cyan)}
a:hover{color:var(--cyan);text-shadow:0 0 8px rgba(0,229,196,0.06)}
/* Dedicated page title for inner pages */
.page-title{font-family:'Bebas Neue',sans-serif;font-size:56px;letter-spacing:0.02em;line-height:.95;color:var(--cyan);text-transform:uppercase;margin:0 0 10px}
@media (max-width:560px){ .page-title{font-size:40px} }
/* Centered page header wrapper */
.page-header{display:block;text-align:center;margin:0 auto;padding:16px 0 8px}
.page-subtitle{color:var(--muted);font-size:16px;margin:6px 0 0}
/* Utilities */
.text-center{text-align:center}

/* Section/card heading scales for better hierarchy */
.card h2{font-family:'Bebas Neue',sans-serif;letter-spacing:0.02em;text-transform:uppercase;color:var(--cyan);margin:0 0 8px;font-size:clamp(22px,3.4vw,32px)}
.card h3{font-family:'Bebas Neue',sans-serif;letter-spacing:0.02em;text-transform:uppercase;color:var(--cyan);margin:0 0 8px;font-size:clamp(18px,2.6vw,24px)}
/* Slightly increase spacing when titles are centered for balance */
.card h2.text-center,.card h3.text-center{margin-bottom:10px}
/* Offset content for fixed header */
body{padding-top:var(--header-height)}
body.no-scroll{overflow:hidden}

/* Smooth scroll for in-page anchors, with user preference respect */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* Layout container */
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 20px}
.wrap,*[class*="wrap"]{min-width:0}

/* Top nav */
header.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg, rgba(7,6,10,0.86), rgba(7,6,10,0.78));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
header.site-header.scrolled{background:linear-gradient(180deg, rgba(7,6,10,0.94), rgba(7,6,10,0.86)); border-bottom-color: rgba(255,255,255,0.08); box-shadow:0 8px 24px rgba(0,0,0,0.5)}
.site-header nav{position:relative}
.nav-links.open{display:flex !important; pointer-events:auto}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:16px}
.brand img{height:56px; width:auto; display:block; filter: drop-shadow(0 6px 18px rgba(0,229,196,0.08));}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:var(--white);text-decoration:none;font-weight:600;letter-spacing:0.02em;padding:6px 8px;border-radius:6px;transition:all .18s ease}
.nav-links a:hover{color:var(--cyan); transform:translateY(-1px); text-shadow:0 0 8px rgba(0,229,196,0.06)}
.nav-links a:not([aria-current]){position:relative}
.nav-links a:not([aria-current])::after{content:""; position:absolute; left:8px; right:8px; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--cyan),var(--magenta)); opacity:0; transform:scaleX(0.6); transform-origin:center; transition:opacity .18s ease, transform .18s ease}
.nav-links a:not([aria-current]):hover::after{opacity:1; transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--cyan); position:relative}
.nav-links a[aria-current="page"]::after{content:""; position:absolute; left:8px; right:8px; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--cyan),var(--magenta)); box-shadow:0 0 10px rgba(0,229,196,0.3)}
.cta-listen{background:linear-gradient(90deg,var(--cyan),var(--magenta)); color:var(--char); padding:8px 14px;border-radius:8px;font-weight:700;box-shadow:0 6px 24px rgba(0,229,196,0.08); background-size:200% 100%; transition:background-position .25s ease, box-shadow .25s ease, filter .25s ease, transform .18s ease}
.cta-listen:hover{filter:brightness(1.06); box-shadow:0 10px 34px rgba(0,229,196,0.12); background-position:100% 0; transform:translateY(-1px)}
.hamburger{display:none;color:var(--white);font-weight:700;border:1px solid rgba(255,255,255,0.18);padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.08);font-size:22px;line-height:1;box-shadow:0 4px 16px rgba(0,0,0,0.4);min-width:44px;min-height:44px;z-index:2000;cursor:pointer}
.hamburger:hover,.hamburger:focus{color:var(--cyan);border-color:rgba(255,255,255,0.28);outline:none}
/* Enhanced hamburger icon (3 bars with animation) */
.hamburger{position:relative;display:none;align-items:center;justify-content:center}
.hamburger .bar{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform .25s ease, opacity .2s ease, background .25s ease}
.hamburger .bar:not(:last-child){margin-bottom:5px}
nav.menu-open .hamburger .bar{background:var(--cyan)}
nav.menu-open .hamburger .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.menu-open .hamburger .bar:nth-child(2){opacity:0}
nav.menu-open .hamburger .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:560px){
  .nav-links{display:none;flex-direction:column;gap:0; position:fixed; right:12px; left:12px; top:var(--header-height); background:rgba(7,6,10,0.96); padding:12px; padding-bottom:max(12px, env(safe-area-inset-bottom)); border-radius:10px; border:1px solid rgba(255,255,255,0.12); z-index:1400; pointer-events:none; box-shadow:0 18px 60px rgba(0,0,0,0.7); max-height:calc(100dvh - var(--header-height) - 24px); overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; backdrop-filter:blur(8px)}
  .nav-links a{display:block;padding:12px 14px}
  .nav-links a + a{border-top:1px solid rgba(255,255,255,0.06)}
  .nav-links a.cta-listen{width:100%; text-align:center; margin-top:8px; border-top:0}
  /* when nav container has menu-open, force show */
  nav.menu-open .nav-links{display:flex !important; pointer-events:auto; transform:translateY(0); opacity:1}
  .nav-links{transform:translateY(-8px); opacity:0; transition:transform .2s ease, opacity .2s ease}
  /* backdrop overlay under the menu */
  nav.menu-open::after{content:""; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1350; pointer-events:none}
  /* dedicated clickable backdrop sibling */
  .nav-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1200}
  .nav-backdrop.show{display:block}

  /* subtle staggered item reveal */
  .nav-links a{opacity:0; transform:translateY(-4px); transition:opacity .22s ease, transform .22s ease}
  nav.menu-open .nav-links a{opacity:1; transform:none}
  nav.menu-open .nav-links a:nth-child(1){transition-delay:.02s}
  nav.menu-open .nav-links a:nth-child(2){transition-delay:.05s}
  nav.menu-open .nav-links a:nth-child(3){transition-delay:.08s}
  nav.menu-open .nav-links a:nth-child(4){transition-delay:.11s}
  nav.menu-open .nav-links a:nth-child(5){transition-delay:.14s}
  nav.menu-open .nav-links a:nth-child(6){transition-delay:.17s}
  nav.menu-open .nav-links a:nth-child(7){transition-delay:.20s}
  nav.menu-open .nav-links a:nth-child(8){transition-delay:.23s}
}

/* Respect reduced motion preference for menu animations */
@media (prefers-reduced-motion: reduce){
  @media (max-width:560px){
    .nav-links{transition:none}
    .nav-links a{transition:none}
  }
}

/* Expand hamburger behavior to tablets/large phones */
@media (max-width:980px){
  .hamburger{display:block}
  .nav-links{display:none; left:12px; right:12px; max-height:calc(100dvh - var(--header-height) - 24px); overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; backdrop-filter:blur(8px)}
  nav.menu-open .nav-links{display:flex !important; pointer-events:auto; transform:translateY(0); opacity:1}
  .nav-links{transform:translateY(-8px); opacity:0; transition:transform .2s ease, opacity .2s ease}
  nav.menu-open::after{content:""; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1350; pointer-events:none}
  .nav-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1200}
  .nav-backdrop.show{display:block}
  .nav-links a{opacity:0; transform:translateY(-4px); transition:opacity .22s ease, transform .22s ease}
  .nav-links a{display:block; padding:12px 14px}
  .nav-links a + a{border-top:1px solid rgba(255,255,255,0.06)}
  .nav-links a.cta-listen{width:100%; text-align:center; margin-top:8px; border-top:0}
  nav.menu-open .nav-links a{opacity:1; transform:none}
  nav.menu-open .nav-links a:nth-child(1){transition-delay:.02s}
  nav.menu-open .nav-links a:nth-child(2){transition-delay:.05s}
  nav.menu-open .nav-links a:nth-child(3){transition-delay:.08s}
  nav.menu-open .nav-links a:nth-child(4){transition-delay:.11s}
  nav.menu-open .nav-links a:nth-child(5){transition-delay:.14s}
  nav.menu-open .nav-links a:nth-child(6){transition-delay:.17s}
  nav.menu-open .nav-links a:nth-child(7){transition-delay:.20s}
  nav.menu-open .nav-links a:nth-child(8){transition-delay:.23s}
  /* Tighten grid spacing on tablet */
  .hero-inner{grid-template-columns:1fr; padding:32px 18px}
  .grid{grid-template-columns:1fr; padding:0 18px; gap:18px}
}

/* Hero */
.hero{
  min-height:78vh;
  display:flex;align-items:center;justify-content:center;
  position:relative; overflow:hidden; margin-bottom:1.25rem;
  background:
    radial-gradient(1200px 350px at 50% 20%, rgba(0,229,196,0.06), transparent 10%),
    linear-gradient(135deg, rgba(0,229,196,0.06), rgba(255,46,122,0.04) 60%),
    url('../img/bandpic.jpg') center/cover no-repeat,
    var(--bg);
}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.72) contrast(1.05) saturate(1.05)}
body.hero-video-enabled .hero-bg{display:block}
body.hero-video-enabled .hero-video{display:block}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(180deg, rgba(7,6,10,0), rgba(7,6,10,0.38) 40%, rgba(7,6,10,0.86)); pointer-events:none}
.hero-inner{display:grid;grid-template-columns: 1fr;gap:36px;align-items:center;justify-items:start;width:100%;max-width:var(--max-width);padding:56px 20px}
/* Nudge the background band photo right so text sits in left "safe area" */
.hero{background-position:center, center, 62% center, center; background-size:auto, auto, cover, auto}
.prefers-reduced-motion .hero-video{display:none !important}
.prefers-reduced-motion .hero{
  background:
    radial-gradient(1200px 350px at 50% 20%, rgba(0,229,196,0.06), transparent 10%),
    linear-gradient(135deg, rgba(0,229,196,0.06), rgba(255,46,122,0.04) 60%),
    url('../img/bandpic.jpg') center/cover no-repeat,
    var(--bg);
}
 
/* Left hero content */
.hero-left { color:var(--white); padding:20px }
.logo-hero{max-width:100%; height:auto; display:block; filter: drop-shadow(0 12px 36px rgba(0,229,196,0.08)) }
.hero-wordmark{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); max-width:min(80%,680px); height:auto; display:block; filter: drop-shadow(0 10px 28px rgba(0,229,196,0.20)); margin:0}
.hero-wordmark-mobile{display:none; max-width:86%; height:auto; margin:8px auto 0; filter: drop-shadow(0 10px 28px rgba(0,229,196,0.20))}
.hero-actions{display:none}
.hero-underbar{display:flex;flex-direction:column;align-items:center;gap:8px; margin:6px auto 20px; padding:0 16px; max-width:var(--max-width)}
.hero-underbar .tagline{color:var(--white); font-weight:700; background:rgba(7,6,10,0.76); border:1px solid rgba(255,255,255,0.08); padding:6px 12px; border-radius:999px; text-shadow:0 2px 10px rgba(0,0,0,0.6); text-align:center}
.announcement-card{
  width:100%;
  display:flex;
  align-items:center;
  gap:24px;
  padding:24px 28px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.12);
  background:radial-gradient(circle at top left, rgba(0,229,196,0.18), transparent 55%),
             radial-gradient(circle at bottom right, rgba(255,46,122,0.18), transparent 55%),
             rgba(7,6,10,0.82);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
  backdrop-filter:blur(18px);
  position:relative;
  overflow:hidden;
}
.announcement-card::before,
.announcement-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
  width:180px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  opacity:0.4;
}
.announcement-card::before{top:18px; right:30px}
.announcement-card::after{bottom:18px; left:30px}
.announcement-art{
  position:relative;
  width:220px;
  height:220px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 16px 50px rgba(0,0,0,0.6);
  flex-shrink:0;
}
.announcement-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.05);
}
.announcement-badge{
  position:absolute;
  top:12px;
  left:12px;
  padding:4px 10px;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border-radius:999px;
  background:rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.2);
}
.announcement-glow{
  position:absolute;
  inset:auto;
  bottom:-40px;
  left:-40px;
  width:160px;
  height:160px;
  background:radial-gradient(circle, rgba(0,229,196,0.35), transparent 60%);
  filter:blur(10px);
  opacity:0.8;
}
.announcement-content{
  flex:1;
  min-width:240px;
  position:relative;
  z-index:1;
}
.announcement-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(7,6,10,0.72);
  border:1px solid rgba(255,255,255,0.18);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--white);
}
.pulse-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--magenta);
  box-shadow:0 0 12px rgba(255,46,122,0.8);
  animation:pulse 1.8s ease-in-out infinite;
  animation-play-state:var(--motion-play, running);
}
.announcement-title-wrap{margin:14px 0 8px}
.announcement-title{
  margin:0;
  font-family:'Bebas Neue',sans-serif;
  letter-spacing:0.06em;
  font-size:40px;
  text-transform:uppercase;
  color:var(--white);
}
.announcement-subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-size:16px;
}
.announcement-viz{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:34px;
  margin:6px 0 16px;
  opacity:0.9;
}
.announcement-viz span{
  flex:1;
  display:block;
  background:linear-gradient(180deg, rgba(0,229,196,0.85), rgba(255,46,122,0.65));
  border-radius:4px 4px 2px 2px;
  animation:equalize 2.4s ease-in-out infinite;
  box-shadow:0 10px 24px rgba(0,229,196,0.18);
  animation-play-state:var(--motion-play, running);
}
.announcement-viz span:nth-child(2){animation-delay:.25s}
.announcement-viz span:nth-child(3){animation-delay:.5s}
.announcement-viz span:nth-child(4){animation-delay:.75s}
.announcement-highlights{
  list-style:none;
  padding:0;
  margin:14px 0 20px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.announcement-highlights li{
  min-width:150px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.02);
}
.announcement-highlights span{
  display:block;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.announcement-highlights strong{
  display:block;
  margin-top:4px;
  font-size:16px;
  color:var(--white);
}
.announcement-streams{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
}
.stream-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  border:1px solid rgba(255,255,255,0.22);
  color:var(--white);
  text-decoration:none;
  background:rgba(255,255,255,0.04);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.stream-badge:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.stream-badge--spotify{background:linear-gradient(120deg,#1DB954,#0f8a3b); border-color:rgba(29,185,84,0.6)}
.stream-badge--youtube{background:linear-gradient(120deg,#FF2E7A,#F44336); border-color:rgba(255,46,122,0.4)}
.stream-badge--distro{background:linear-gradient(120deg,#4c34ff,#7f5aff); border-color:rgba(124,90,255,0.5)}
.announcement-ctas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.announcement-ctas .btn{
  min-width:200px;
  justify-content:center;
  text-align:center;
}
.btn--lg{padding:14px 22px; font-size:15px}
@media (max-width:980px){
  .announcement-card{
    flex-wrap:wrap;
    padding:20px;
    gap:18px;
  }
  .announcement-art{width:180px; height:180px}
}
@media (max-width:720px){
  .announcement-card{
    flex-direction:column;
    text-align:center;
    align-items:center;
  }
  .announcement-content{width:100%}
  .announcement-highlights{justify-content:center}
  .announcement-ctas{width:100%; justify-content:center}
  .announcement-ctas .btn{flex:1; min-width:0}
}
@media (max-width:560px){
  .announcement-card{
    padding:18px 16px 20px;
    gap:16px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.16);
    background:
      radial-gradient(360px 220px at 50% 0%, rgba(0,229,196,0.18), transparent 65%),
      radial-gradient(260px 220px at 50% 100%, rgba(255,46,122,0.16), transparent 70%),
      rgba(7,6,10,0.9);
    box-shadow:0 24px 70px rgba(0,0,0,0.65);
  }
  .announcement-card::before,
  .announcement-card::after{
    display:block;
    width:72%;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    opacity:0.3;
  }
  .announcement-art{
    width:100%;
    max-width:320px;
    height:auto;
    aspect-ratio:1/1;
  }
  .announcement-content{
    padding-top:4px;
  }
  .announcement-pill{
    justify-content:center;
    margin-inline:auto;
  }
  .announcement-title{font-size:34px}
  .announcement-viz{
    width:100%;
    max-width:260px;
    margin:10px auto 18px;
  }
  .announcement-highlights{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(140px,1fr));
    gap:10px;
  }
  .announcement-highlights li{
    text-align:left;
    padding:12px 14px;
  }
  .announcement-ctas{
    flex-direction:column;
  }
  .announcement-ctas .btn{
    width:100%;
  }
  .announcement-streams{
    justify-content:center;
  }
  .announcement-streams .stream-badge{
    flex:1 1 140px;
  }
}
.hero-underbar .hero-ctas{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; background:rgba(7,6,10,0.72); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:8px}
.hero-underbar .social-links{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; background:rgba(7,6,10,0.72); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:8px}
.hero-underbar .hero-ctas .btn{min-width:164px; justify-content:center}
.hero-underbar .social-links .btn{min-width:128px; justify-content:center}
.hero-underbar .btn--ghost{border-color:rgba(255,255,255,0.14); background:rgba(255,255,255,0.02)}
.announcement-card + .text-muted{margin-top:0}
.text-muted + .hero-ctas{margin-top:4px}
@keyframes pulse{
  0%{transform:scale(0.9); opacity:0.8}
  50%{transform:scale(1.2); opacity:1}
  100%{transform:scale(0.9); opacity:0.8}
}
@keyframes equalize{
  0%{transform:scaleY(0.4)}
  25%{transform:scaleY(1)}
  50%{transform:scaleY(0.55)}
  75%{transform:scaleY(0.9)}
  100%{transform:scaleY(0.4)}
}
.big-title{font-family:'Bebas Neue',sans-serif;font-size:88px;letter-spacing:0.02em;margin:10px 0 6px;line-height:0.9;text-transform:uppercase;
           color:var(--cyan);
           text-shadow: 0 6px 28px rgba(0,229,196,0.08), 0 0 30px rgba(0,229,196,0.06)}
.tagline{font-size:18px;color:var(--muted);margin-bottom:20px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  border:0;padding:12px 18px;border-radius:10px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px
}
.btn{transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, color .18s ease}
.btn--cyan{background:var(--cyan);color:var(--bg);box-shadow:0 8px 30px rgba(0,229,196,0.08)}
.btn--mag{background:var(--magenta);color:var(--white);box-shadow:0 8px 30px rgba(255,46,122,0.06)}
.btn--ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.06)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(0.98)}
.btn--ghost:hover{background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.18)}

/* Focus styles for accessibility */
.btn:focus-visible, .nav-links a:focus-visible, .back-link:focus-visible, .lightbox__btn:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px; box-shadow:0 0 0 3px rgba(0,229,196,0.15)
}

/* Reveal-on-scroll */
[data-reveal]{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
[data-reveal].is-visible{opacity:1; transform:none}
[data-reveal].card{transition:opacity .5s ease, transform .5s ease, box-shadow .25s ease}
.card:hover{box-shadow:0 18px 60px rgba(0,0,0,0.5); transform:translateY(-2px)}
/* Keep hero underbar visible (no fade) */
.hero-underbar[data-reveal]{opacity:1; transform:none}

/* Utilities */
.muted-link{color:var(--muted); text-decoration:none}
.muted-link:hover{color:var(--cyan)}
.text-muted{color:var(--muted)}
.divider{border:none;height:1px;background:rgba(255,255,255,0.02);margin:18px 0}
.soft-divider{height:20px;margin:10px 0 0;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));border:0}
.brand-meta{display:flex;flex-direction:column;line-height:1}
.brand-meta small,.brand-meta a{color:var(--muted);font-size:12px}
.brand-meta a{text-decoration:none}
.brand-meta a:hover{color:var(--cyan)}

/* Spacing utilities */
.mt-6{margin-top:6px}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.py-24{padding:24px 20px}
/* simple flex utilities used in forms/asides */
.fx{display:flex}
.fx-wrap{flex-wrap:wrap}
.fx-gap-10{gap:10px}
.minw-220{min-width:220px}
.fx-align-center{align-items:center}

/* Background helpers */
#quickListen .hero-pic.bg-latest{background-image:url('../img/latest.jpg')}

/* Back link (legal pages) */
.back-link{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,0.10);color:var(--muted);background:rgba(255,255,255,0.02)}
.back-link:hover{color:var(--cyan);border-color:rgba(255,255,255,0.18)}

/* Right hero card (band photo + quick details) */
.hero-right{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.02);backdrop-filter: blur(6px)}
.hero-pic{width:100%;height:240px;background-size:cover;background-position:center;border-radius:10px; margin-bottom:14px; box-shadow: inset 0 -24px 60px rgba(0,0,0,0.6)}
.meta{display:flex;flex-direction:column;gap:10px}
.meta .release{font-weight:700;color:var(--cyan);font-family:'Bebas Neue',sans-serif}
.meta small{color:var(--muted);display:block}

/* Grid section */
.grid{display:grid;grid-template-columns: 1fr 400px; gap:36px; max-width:var(--max-width); margin:0 auto;padding:0 20px}
.grid > *{min-width:0}
/* Even spacing between stacked grid sections */
.grid + .grid{margin-top:28px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)), var(--char);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.06); box-shadow:0 6px 22px rgba(0,0,0,0.34); transition:transform .22s ease, box-shadow .22s ease; overflow:hidden}
.card > * + *{margin-top:12px}
.card p{max-width:68ch}
.grid .card, .grid aside.card{margin:0}
/* Maintain consistent vertical rhythm between stacked cards */
.card + .card{margin-top:16px}
.card h3{font-family:'Bebas Neue',sans-serif;color:var(--cyan);margin-bottom:10px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.btn--sm{padding:8px 12px; font-size:13px; border-radius:8px}
.poster-grid{display:grid;grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:14px}
.poster-grid > *{min-width:0}
.poster-grid img{width:100%;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:#000;aspect-ratio:4/5;object-fit:cover; transition:transform .25s ease, box-shadow .25s ease}
.poster-grid img:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 16px 40px rgba(0,0,0,0.5)}

/* Professional EPK refinements */
.epk .page-header{padding-bottom:0}
.epk .page-subtitle{color:var(--muted)}
.epk .grid{gap:28px}
.epk .press-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.epk .press-photos a{display:block;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);background:#000}
.epk .press-photos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .22s ease, box-shadow .22s ease}
.epk .press-photos a:hover img{transform:translateY(-2px) scale(1.02); box-shadow:0 12px 36px rgba(0,0,0,0.5)}
@media (max-width:560px){ .epk .press-photos{grid-template-columns:repeat(2,1fr)} }
/* Hide floating Listen button on EPK page to reduce distraction */
.epk .listen-fab{display:none}

/* Press quote styling */
.press-quote{margin:0;padding:12px 14px;border-left:3px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.03);border-radius:8px}
.press-quote p{margin:0 0 10px;color:#d7dadd}
.press-quote p:last-child{margin-bottom:0}
.press-quote__credit{margin-top:8px;color:#9AA3A8}
.press-quote__credit a{color:#9AA3A8;text-decoration:none}
.press-quote__credit a:hover{color:var(--cyan)}

/* Contact card subtle highlight */
.contact-card{border-color: rgba(0,229,196,0.18)}

/* Apple releases grid */
.release-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.release-tile{position:relative;display:flex;flex-direction:column;gap:8px}
.release-artwork{position:relative;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);background:#0a0a0c;display:block;box-shadow:inset 0 -30px 80px rgba(0,0,0,0.6)}
.release-artwork img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .22s ease, box-shadow .22s ease;will-change:transform}
.release-tile:hover .release-artwork img{transform:translateY(-2px) scale(1.02); box-shadow:0 16px 44px rgba(0,0,0,0.5)}
.release-badge{position:absolute;left:8px;top:8px;z-index:2;display:inline-block;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,0.16);background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);color:#fff;font-size:12px;letter-spacing:.02em}
.release-title{font-weight:800; font-size:14.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.release-meta{color:var(--muted); font-size:12.5px; display:flex; gap:8px; align-items:center}
.release-meta .dot::before{content:'\00B7'; opacity:.6; margin:0 2px}
.release-tile a{color:inherit; text-decoration:none}
.release-tile a:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:12px}

/* Ensure consistent heights to avoid layout shift */
.release-tile .title-wrap{min-height:40px}

@media (max-width:560px){
  .release-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
/* Skeletons */
.skeleton-grid{display:grid;grid-template-columns:inherit;gap:inherit;width:100%}
.skeleton-tile{width:100%;aspect-ratio:1/1;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));background-size:200% 100%;animation:skeleton 1.4s ease-in-out infinite}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Featured release card */
.featured-release{display:block; text-decoration:none; color:inherit}
.featured-art{position:relative; width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); background:#0a0a0c; box-shadow:inset 0 -30px 80px rgba(0,0,0,0.6)}
.featured-art img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .22s ease, box-shadow .22s ease}
.featured-release:hover .featured-art img{transform:translateY(-2px) scale(1.02); box-shadow:0 16px 44px rgba(0,0,0,0.5)}
.featured-body{margin-top:10px}
.featured-title{font-weight:800; font-size:16px; line-height:1.25}
.featured-meta{color:var(--muted); font-size:13px}
.featured-release:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:12px}

/* Releases */
.release-row{display:flex;gap:16px;align-items:flex-start}
.release-art{width:160px;height:160px;border-radius:8px;background:#0b0b0d url('../img/album-placeholder.png') center/cover no-repeat;border:1px solid rgba(255,255,255,0.03)}
.release-info{flex:1}
.release-info p{color:var(--muted);font-size:14px;margin-top:8px}

/* Tour list */
.tour-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.tour-list li{display:block;padding:0;border-radius:0;border:0}
.tour-list .date{color:var(--muted);min-width:150px}
.tour-list .venue{font-weight:700}

/* Rich tour cards */
.tour-card{display:grid;grid-template-columns: 110px 1fr max-content;gap:14px;align-items:center;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:12px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.tour-card:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,0.5); border-color:rgba(255,255,255,0.12)}
.tour-datebox{display:flex;align-items:center;justify-content:center;padding:10px;border-right:1px solid rgba(255,255,255,0.06)}
.date-pill{display:inline-block;padding:4px 10px;border:1px solid rgba(255,255,255,0.12);border-radius:999px;background:rgba(255,255,255,0.03);color:var(--white);font-weight:700;white-space:nowrap}
.tour-head{display:flex;flex-direction:column}
.tour-head .venue{font-weight:700;font-size:16px;line-height:1.2}
.tour-sub{color:var(--muted);font-size:14px}
.tour-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-self:center}
.tour-actions .btn{padding:8px 12px}
.badge{display:inline-block;border:1px solid rgba(255,255,255,0.12);border-radius:999px;padding:2px 8px;color:var(--muted);font-size:12px}

@media (max-width:560px){
  .tour-card{grid-template-columns:1fr;gap:10px}
  .tour-datebox{flex-direction:row;gap:8px;border-right:0;border-bottom:1px solid rgba(255,255,255,0.06)}
  .tour-actions{justify-content:flex-start}
}

/* Video embed */
.video-wrap{position:relative;padding-top:56.25%}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border-radius:8px;border:0;background:#000}
/* Hide empty iframes (no src) to avoid black boxes and collapse space */
.video-wrap iframe:not([src]){display:none}
.video-wrap:has(> iframe:not([src])){padding-top:0}
/* Hide any third-party iframe awaiting consent anywhere on the page */
iframe[data-embed-src]:not([src]){display:none}

/* Sticky mini player */
.mini-player{
  position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:1600;padding:10px 14px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter: blur(6px);border:1px solid rgba(255,255,255,0.04);display:none;gap:12px;align-items:center;box-shadow:0 12px 36px rgba(0,0,0,0.6);cursor:grab
}
.mini-player.show{display:flex}
.mini-player.dragging{cursor:grabbing}
/* Hide floating Listen button when mini‑player is visible */
.mini-player.show ~ .listen-fab{display:none}
/* Close button (mobile only) */
.mini-player__close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.08);color:#fff;cursor:pointer}
.mini-player__close:hover{background:rgba(255,255,255,0.14)}
/* Ensure embed has no baseline gap */
.mini-player iframe{display:block;border:0}
/* Drag handle */
.mini-player__drag{width:18px;height:28px;border-radius:6px;background:repeating-linear-gradient(
  to bottom,
  rgba(255,255,255,0.16),
  rgba(255,255,255,0.16) 2px,
  transparent 2px,
  transparent 4px
); border:1px solid rgba(255,255,255,0.12)}

/* Show hero-right defaults again (we moved the extra image elsewhere) */
.hero-right .hero-pic{display:block}
.hero-right .meta{display:flex}

/* Compact quickListen card to its content */
#quickListen{padding:0}
#quickListen{overflow:hidden}
#quickListen .hero-pic{width:100%;height:240px;background-size:cover;background-position:center;border-radius:12px 12px 0 0}
#quickListen .meta{padding:12px 16px;display:flex;justify-content:flex-start}

/* Desktop (≥981px): hide Quick Listen entirely; keep Shows/Past Shows right */
@media (min-width: 981px){
  #quickListen{display:none}
  .grid #tour{grid-column:2}
  .grid #pastShows{grid-column:2}
}
.mini-player audio{width:300px;outline:none;background:transparent}

/* Footer */
footer{margin-top:40px;padding:26px 20px;background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.05));color:var(--muted)}
footer .links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
footer{border-top:1px solid rgba(255,255,255,0.06)}
footer .links a{position:relative}
footer .links a:not(:last-child)::after{content:'\00B7'; /* middle dot */ opacity:0.5; margin-left:12px}
footer small{font-size:13px}
.footer-credit{margin-top:4px; font-size:12.5px}
.footer-credit a{color:#FFD700!important; text-decoration:none; font-weight:700}

/* Back to top button */
.back-to-top{position:fixed;right:22px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:1400;display:none;min-width:44px;min-height:44px;border-radius:999px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.08);color:#fff;font-weight:800;cursor:pointer;backdrop-filter:blur(6px)}
.back-to-top.show{display:inline-flex;align-items:center;justify-content:center}
.back-to-top:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,0.5); border-color:rgba(255,255,255,0.22)}

/* Footer layout */
.footer-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.row-flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Contact page */
.contact-grid{display:grid;grid-template-columns: 1fr 380px; gap:24px; max-width:var(--max-width); margin:0 auto; padding:0 20px}
.contact-form{display:block}
.contact-form label{display:block;color:var(--muted);font-size:14px;margin-top:8px}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--white);
  padding:12px 12px;
  border-radius:10px;
  margin-top:6px;
}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-aside .list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.contact-aside .list li{display:flex;gap:8px;align-items:center;color:var(--muted)}
.chip{display:inline-block;border:1px solid rgba(255,255,255,0.12);border-radius:999px;padding:4px 10px;color:var(--muted);font-size:12.5px}
@media (max-width:980px){ .contact-grid{grid-template-columns:1fr; padding:0 18px} }

/* Form error states */
.form-error{color:#ff8aa8; font-size:13px; margin-top:6px}
.contact-form [aria-invalid="true"],
.newsletter [aria-invalid="true"]{
  border-color: rgba(255,0,92,0.6)!important;
  box-shadow: 0 0 0 3px rgba(255,0,92,0.12);
}
.contact-form .btn[disabled]{opacity:0.6; cursor:not-allowed}

/* Floating Listen button (bottom-right) */
.listen-fab{
  position:fixed;
  right:22px;
  bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:1500;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 18px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:0.02em;
  box-shadow:0 12px 36px rgba(0,229,196,0.18);
  border:0;
  cursor:pointer;
  max-width:92vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:opacity .3s ease, transform .3s ease;
}
.listen-fab.is-visible{ /* default state if JS fails to run */ }
.listen-fab--cyan{background:linear-gradient(90deg,var(--cyan),#17F5D8);color:var(--bg)}
.listen-fab .icon{font-size:16px}
@media (max-width:560px){
  .listen-fab{
    padding:12px 16px;
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom))
  }
}
body.listen-fab-ready .listen-fab{
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
}
body.listen-fab-ready .listen-fab.is-visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.listen-fab--cyan{background:linear-gradient(90deg,var(--cyan),#17F5D8);color:var(--bg)}
.listen-fab .icon{font-size:16px}
@media (max-width:560px){
  .listen-fab{
    padding:12px 16px;
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom))
  }
}

/* Mobile adjustments */
@media (max-width:560px){
  .mini-player{ right:12px; bottom:calc(12px + env(safe-area-inset-bottom)) }
  .mini-player{ max-width:92vw }
  .mini-player iframe{ width:min(280px, 86vw) }
}

/* Shop product grid */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.product-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:12px;overflow:hidden;display:flex;flex-direction:column; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.product-card:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(0,0,0,0.5); border-color:rgba(255,255,255,0.12)}
.product-card__img{aspect-ratio:1/1;background:#000;object-fit:cover;width:100%}
.product-card__body{padding:12px;display:flex;flex-direction:column;gap:8px}
.product-card__title{font-weight:700}
.product-card__price{color:var(--muted)}
.product-card__actions{display:flex;gap:8px}
.product-card__actions .btn{padding:10px 12px}

/* Newsletter form */
.newsletter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.newsletter input[type="email"]{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:var(--white);padding:10px 12px;border-radius:8px;min-width:240px; transition:border-color .18s ease, box-shadow .18s ease}
.newsletter input[type="email"]:focus{outline:none; border-color:rgba(0,229,196,0.7); box-shadow:0 0 0 3px rgba(0,229,196,0.18)}
.newsletter input[type="email"]::placeholder{color:var(--muted)}
.newsletter .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Generic honeypot utility for any form */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Mini embed placeholder tweaks */
.embed-placeholder--mini{flex:1;gap:8px;padding:8px 10px}

/* Video overlay placeholder */
.video-wrap .embed-placeholder.embed-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:8px}

/* Hidden by default; toggled by JS */
#allSongsCard{display:none}

/* small */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr; padding:32px 18px}
  .grid{grid-template-columns:1fr; padding:0 18px}
  .release-art{width:120px;height:120px}
  .mini-player audio{width:220px}
}
@media (max-width:560px){
  .wrap{padding:0 12px}
  .nav-links{display:none}
  .hamburger{display:block}
  .big-title{font-size:40px}
  .mini-player audio{width:160px}
  .nav-links.open{display:flex !important; pointer-events:auto}
  .hero-wordmark{max-width:88%; bottom:14px}
  /* Place mobile wordmark below the band photo, hide overlaid one */
  .hero-wordmark{display:none}
  .hero-wordmark-mobile{display:block; margin:0 auto 0}
  /* Disable background video on small screens for performance */
  .hero-bg{display:none}
  body.hero-video-enabled .hero-bg{display:block}
  body.hero-video-enabled .hero{
    min-height:78vh;
    aspect-ratio:auto;
    margin-bottom:1.25rem;
    background-size:auto, auto, cover, auto;
  }
  body.hero-video-enabled .hero-inner{padding:56px 20px}
  body.hero-video-enabled .hero-wordmark{display:block; max-width:min(80%,680px); bottom:14px}
  body.hero-video-enabled .hero-wordmark-mobile{display:none}
  .hero-underbar{gap:8px; padding:0 12px; margin:6px auto 16px}
  .hero-underbar .hero-ctas .btn{min-width:136px; padding:12px 16px}
  .hero-underbar .social-links .btn{min-width:120px; padding:10px 14px}
  /* Show full band photo on small screens */
  .hero{
    background-position:center, center, center center, center;
    background-size:auto, auto, contain, auto;
    min-height:clamp(420px, 100vw, 680px);
    aspect-ratio:auto;
    margin-bottom:0;
  }
  .hero-inner{padding:0 12px}
  /* Tighten grid spacing on mobile and ensure separation */
  .grid{gap:16px}
  .card + .card{margin-top:12px}
  /* Also avoid cropping in quick listen card */
  #quickListen .hero-pic{background-size:contain}
  /* Poster grid: fixed columns to avoid horizontal overflow */
  .poster-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .poster-grid img{aspect-ratio:3/4}
  /* Embed placeholders: wrap actions neatly */
  .embed-placeholder{gap:10px}
  .embed-placeholder .actions{flex-wrap:wrap}
  .embed-placeholder .actions .btn{flex:1 1 auto; min-width:140px}
}

/* Respect reduced motion: hide video layer */
@media (prefers-reduced-motion: reduce){
  .hero-bg{display:none}
}

/* Tour map */
.tour-map{height:420px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,0.06)}
@media (max-width:560px){ .tour-map{height:320px} }

/* subtle glows, accent rules */
.glow-cyan{filter:drop-shadow(0 12px 34px rgba(0,229,196,0.08))}
.accent-mag{color:var(--magenta)}

/* Accessibility: skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:absolute;left:12px;top:12px;width:auto;height:auto;padding:8px 12px;background:#000;border:1px solid rgba(255,255,255,0.2);border-radius:6px;color:#fff;z-index:100}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}

/* Anchor offset for sticky header */
@supports (scroll-margin-top: 1px){
  :target{scroll-margin-top: var(--header-height)}
}
/* Ensure Singles & EPs anchor leaves a bit more space under sticky header */
/* Offset the entire Singles section so the full card is visible on anchor */
#singlesSection{scroll-margin-top: calc(var(--header-height) + 20px)}

/* Consent banner */
.consent-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:80;max-width:var(--max-width);width:100%;padding:12px 16px;background:rgba(7,6,10,0.96);border-top:1px solid rgba(255,255,255,0.06);box-shadow:0 -10px 30px rgba(0,0,0,0.4)}
.consent-banner .inner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.consent-banner p{margin:0;color:var(--muted)}
.consent-actions{display:flex;gap:10px}
.btn--outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.12)}
.btn--outline:hover{border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.04)}

/* Embed placeholders */
.embed-placeholder{position:relative;background:#0b0b0d;border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.embed-placeholder .info{color:var(--muted)}
.embed-placeholder .actions{display:flex;gap:10px}

/* Ensure fb-page has spacing when shown */
.fb-page{margin-top:8px}
/* Make FB plugin fill card width and center if narrower */
.card .fb-page{display:block; width:100%; max-width:500px; margin:0 auto}
.card .fb-page > span, /* FB injects a span wrapper */
.card .fb-page iframe{max-width:100%!important}


/* Photo gallery */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.photo-item{position:relative;overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:#000}
.photo-item button{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}
.photo-thumb{display:block;width:100%;aspect-ratio:4/3;background:#000;object-fit:cover}
.photo-item img.photo-thumb{height:auto;padding:0}
.photo-item:focus-within,.photo-item:hover{box-shadow:0 10px 32px rgba(0,229,196,0.08);transform:translateY(-1px)}

/* Blur-up transition for thumbs */
.photo-thumb{filter:blur(10px); transform:scale(1.02); transition:filter .4s ease, transform .4s ease;}
.photo-thumb.is-loaded{filter:blur(0); transform:none}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:1500;background:rgba(7,6,10,0.86);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(96vw,1400px);max-height:86vh;border-radius:12px;border:1px solid rgba(255,255,255,0.08);box-shadow:0 20px 80px rgba(0,0,0,0.6)}
.lightbox__btn{position:absolute;top:20px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:#fff;border-radius:10px;padding:10px 12px;cursor:pointer}
.lightbox__btn:hover{background:rgba(255,255,255,0.14)}
.lightbox__close{right:20px}
.lightbox__prev,.lightbox__next{top:50%;transform:translateY(-50%);font-size:32px;line-height:1;padding:10px 14px}
.lightbox__prev{left:16px}
.lightbox__next{right:16px}
.lightbox__count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:var(--muted);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);padding:4px 10px;border-radius:999px;font-size:13px}

@media (max-width:560px){
  .photo-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .lightbox__prev,.lightbox__next{top:auto;bottom:22px;transform:none}
  .lightbox__prev{left:12px}
  .lightbox__next{right:12px}
}