/* ============================================================
   SWITCH2SMILE — design tokens
   ============================================================ */
:root{
  --bg:        #0a0a0f;
  --bg-elev:   #131319;
  --bg-elev-2: #1b1b24;
  --line:      rgba(244,242,247,0.09);
  --line-2:    rgba(244,242,247,0.16);
  --text:      #f4f2f7;
  --text-muted:#9a97a8;
  --magenta:   #66ddfb;
  --magenta-dim: #1f7d99;
  --cyan:      #00e0ff;
  --cyan-dim:  #0090a3;
  --max: 1180px;
  --radius: 3px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --ticker-h: 40px;
  --nav-h: 64px;
  --nav-gap: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* the off-canvas mobile menu (.nav-links) sits just off-screen via
     transform:translateX(100%) rather than being removed from layout,
     and on iPhone/iPad-width screens that made the whole page swipe-
     scrollable sideways to reveal it early. This clips that phantom
     scroll area site-wide without affecting any real content, which
     never needs to scroll horizontally. */
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  letter-spacing:.01em;
  line-height:.92;
  margin:0;
}
p{ margin:0; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
}

/* focus states — visible, accessible */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   NAV
   ============================================================ */

/* ============================================================
   NAV — floating glass pill
   ============================================================ */
.nav{
  position:sticky; top:var(--nav-gap); z-index:80;
  /* matches .wrap's own max-width + 28px side padding exactly, so the
     logo/menu inside line up with the page content below the header
     instead of the pill being narrower and inset further from the edge */
  width:calc(100% - 56px);
  max-width:var(--max);
  margin:var(--nav-gap) auto 0;
  border-radius:999px;
  background:rgba(12,12,18,.55);
  border:1px solid rgba(244,242,247,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px -10px rgba(0,0,0,.5);
  /* the glass blur used to sit directly on .nav via backdrop-filter, but
     that property makes its element a "containing block" for any
     position:fixed descendant — which broke the mobile .nav-links menu
     below (its fixed top/left/right/bottom ended up measured against
     this small pill instead of the viewport, squishing/overlapping it
     with the ticker and hero). Moving the blur to a ::before behind the
     pill keeps the same glass look without .nav-links being a
     descendant of anything that creates a containing block. */
}
.nav::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  z-index:-1;
  pointer-events:none;
}
body.has-ticker .nav{ top:calc(var(--ticker-h) + var(--nav-gap)); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{ background:rgba(10,10,15,.96); }
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h);
  line-height:1;
  padding:0 32px;
  overflow:hidden;
}
.nav-logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:26px;
  letter-spacing:.02em;
  line-height:1;
  display:inline-flex;
  align-items:center;
}
.nav-logo span{ color:var(--magenta); }
.nav-links{
  display:flex; align-items:center; gap:34px; flex-wrap:nowrap;
  list-style:none; margin:0; padding:0;
  height:100%;
}
.nav-links li{ display:flex; align-items:center; height:100%; }
.nav-links a{
  font-size:14px;
  line-height:1;
  color:var(--text-muted);
  transition:color .2s var(--ease);
  position:relative;
  display:inline-flex;
  align-items:center;
  padding-bottom:3px;
}
.nav-links a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--magenta); transition:width .25s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after{ width:100%; }

/* ---- small lock badge next to members-only nav items (Music,
   Gallery, Academy) — visible whether or not the visitor is a member,
   so it's clear up front that clicking asks for Membership ---- */
.nav-lock{
  display:inline-flex; flex:none; align-items:center; justify-content:center;
  width:13px; height:13px; margin-left:6px;
  color:var(--cyan); opacity:.8;
}
.nav-lock svg{ width:100%; height:100%; }
/* only one of the two icons shows at a time — these two rules must stay
   MORE specific than any single-class rule (e.g. ".nav-lock svg"), or a
   generic "display:block" for both icons will win by specificity and
   show both stacked side by side regardless of source order */
.nav-lock .nav-lock-icon-locked{ display:block; }
.nav-lock .nav-lock-icon-unlocked{ display:none; }
/* once Vault confirms membership, applyMemberState() (js/main.js) adds
   .is-unlocked here — swaps the closed padlock for an open one instead
   of just hiding it, so it reads as "you already have this" ---- */
.nav-lock.is-unlocked{ opacity:1; }
.nav-lock.is-unlocked .nav-lock-icon-locked{ display:none; }
.nav-lock.is-unlocked .nav-lock-icon-unlocked{ display:block; }
.nav-links a:hover, .nav-links a.active{ color:var(--text); }

/* ---- Login / account link — a single control: "Login" while signed
   out (opens the popup), swaps to an exit-arrow "Logout" once signed in
   (click signs out directly) — see js/main.js updateNavAccountLink() ---- */
.nav-account{ gap:6px; }
.nav-account svg{ flex:none; }
.nav-account.is-signed-in{ color:var(--cyan); }
.nav-cta{
  background:var(--magenta);
  color:#0a0a0f !important;
  padding:10px 20px;
  font-weight:600;
  font-size:14px;
  border-radius:999px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
/* .nav-links a sets padding-bottom:3px (space for its hover underline)
   with higher specificity than the rule above, so it was winning and
   pushing the "JOIN US!" label off-center toward the bottom of the
   pill. This rule matches that specificity to put it back to 10px so
   the label sits dead-center, top and bottom. */
.nav-links a.nav-cta{ padding-bottom:10px; }
.nav-cta:hover{ background:var(--cyan); transform:translateY(-1px); }

.nav-toggle{
  display:none;
  background:none; border:0; color:var(--text);
  width:34px; height:24px; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; left:0; width:100%; height:2px; background:currentColor;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle span{ top:11px; }
.nav-toggle span::before{ top:-8px; }
.nav-toggle span::after{ top:8px; }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span::after{ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:1100px){
  .nav-toggle{ display:block; }
  /* a compact floating card that drops down just under the nav pill —
     same width/inset as the pill itself, rounded corners, sized to its
     own content (not a harsh edge-to-edge full-screen panel) — with a
     soft fade + scale-in instead of a hard slide */
  .nav-links{
    position:fixed;
    top:calc(var(--nav-gap) + var(--nav-h) + 10px);
    left:28px; right:28px;
    max-width:var(--max);
    margin:0 auto;
    height:auto; /* overrides the desktop .nav-links{height:100%} rule,
      which otherwise stretched this card to fill the whole viewport */
    max-height:calc(100vh - var(--nav-gap) - var(--nav-h) - 24px);
    overflow-y:auto;
    flex-direction:column; align-items:stretch;
    gap:0; padding:8px 22px;
    background:rgba(12,12,18,.92);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid rgba(244,242,247,.12);
    border-radius:24px;
    box-shadow:0 24px 60px -16px rgba(0,0,0,.65);
    transform:translateY(-10px) scale(.97);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .25s var(--ease), opacity .2s var(--ease), visibility 0s linear .25s;
  }
  body.has-ticker .nav-links{ top:calc(var(--ticker-h) + var(--nav-gap) + var(--nav-h) + 10px); }
  .nav-links.open{
    transform:translateY(0) scale(1);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:transform .25s var(--ease), opacity .2s var(--ease);
  }
  /* height:auto overrides the desktop .nav-links li{height:100%} rule —
     in this column layout that 100% was stretching each link to an
     equal fraction of the whole card's height instead of hugging its
     own text, which is what made the list look artificially spaced out */
  .nav-links li{ width:100%; height:auto; border-bottom:1px solid var(--line); }
  .nav-links li:last-child{ border-bottom:0; }
  .nav-links a{ display:block; padding:16px 2px; font-size:17px; }
  /* .nav-links a{font-size:17px; padding:16px 2px} above is more
     specific than the base .nav-cta rule, so without this override the
     "JOIN US!" pill inherited that large link font-size/padding instead
     of its own compact button sizing — this restores it */
  .nav-links a.nav-cta{ font-size:14px; padding:10px 20px; margin:14px 0 8px; display:inline-block; }
}

/* ============================================================
   TICKER (scrolling marquee — three announcements on a loop)
   ============================================================ */
.ticker{
  position:sticky; top:0; z-index:60;
  height:var(--ticker-h);
  display:flex; align-items:center;
  background:rgba(12,12,18,.55);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid rgba(244,242,247,.08);
  overflow:hidden;
  white-space:nowrap;
}
.ticker-track{
  display:inline-flex; align-items:center; height:100%;
  animation:ticker-scroll 34s linear infinite;
}
.ticker-item{
  display:inline-flex; align-items:center; gap:10px;
  height:100%;
  font-family:'Bebas Neue',sans-serif;
  font-size:13.5px;
  letter-spacing:.03em;
  color:var(--text);
  padding:0 26px;
  white-space:nowrap;
}
.ticker-item i{
  display:inline-block; width:5px; height:5px; flex:none;
  background:var(--magenta); border-radius:50%;
}
a.ticker-item{ cursor:pointer; transition:color .15s var(--ease); }
a.ticker-item:hover{ color:var(--cyan); }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-33.3333%); }
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{ animation:none; }
  .ticker{ overflow-x:auto; }
}

/* ---- "Trusted by" logo marquee (home, above the bio section) — a
   continuous, one-directional drift right-to-left, same idea as the
   ticker banner above but much slower. Each brand's own logo image
   (media/trusted-logos/) has been reduced to a flat silhouette in one
   uniform muted color, all exported at the same height, so the strip
   reads as one consistent trust bar instead of a wall of mismatched
   brand colors. The list is duplicated once in the HTML so the CSS
   animation loops seamlessly (translateX(0) → translateX(-50%) always
   lands on the same frame), pure CSS, no JS needed. No border under
   this section — it sits right above the bio copy with nothing
   dividing them. A soft mask fades both edges so logos don't pop
   in/out abruptly at the sides of the page. The logo art itself is a
   muted grey/lavender silhouette on a transparent background — rather
   than give the strip its own light panel, each logo is recolored to
   solid white with a CSS filter so it reads clearly on the site's dark
   body background, same as the rest of the page. Each logo is also
   given a fixed uniform box (not just a fixed height), because a few
   source marks are single-line wordmarks on a very wide canvas
   (Defected, Solana, Pioneer DJ) while others are compact/two-line
   lockups (Bentley, BMW) — matching height alone let the wide ones
   dominate the row; a shared width×height box keeps every mark the
   same visual weight regardless of its native aspect ratio. */
.trusted-section{ padding:40px 0; }
@media (max-width:640px){
  /* This section is short (just a label + one row of logos), so its own
     40px bottom padding stacked on top of the next section's normal 88px
     top padding left a huge, disproportionate empty gap before "From
     club floors to Web3 stages." on narrow screens. */
  .trusted-section{ padding:28px 0 0; }
}
.trusted-label{
  text-align:center; font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:28px;
}
.trusted-slider{
  overflow:hidden; white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.trusted-track{
  display:inline-flex; align-items:center; gap:48px;
  animation:trusted-scroll 110s linear infinite;
}
.trusted-slider:hover .trusted-track{ animation-play-state:paused; }
.trusted-logo{
  display:inline-block;
  height:26px; width:64px; object-fit:contain; flex:none;
  opacity:.92; filter:brightness(0) invert(1);
}
@keyframes trusted-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .trusted-track{ animation:none; }
  .trusted-slider{ overflow-x:auto; }
}
@media (max-width:640px){
  .trusted-track{ gap:32px; }
  .trusted-logo{ height:20px; width:50px; }
}

/* ============================================================
   HERO / equalizer visual
   ============================================================ */
.hero{
  position:relative;
  padding:96px 0 84px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 380px at 82% 18%, rgba(102,221,251,.20), transparent 60%),
    radial-gradient(520px 420px at 8% 90%, rgba(0,224,255,.14), transparent 60%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero-kicker{
  font-size:14px; color:var(--cyan); margin-bottom:18px;
  font-weight:600;
}
.kicker-brand{
  font-family:'Bebas Neue',sans-serif;
  font-size:26px; letter-spacing:.02em; color:var(--text);
  vertical-align:middle;
}
.kicker-brand-accent{ color:var(--magenta); }
.hero h1{
  font-size:clamp(58px, 11vw, 132px);
  color:var(--text);
}
.hero h1 .accent{ color:var(--magenta); }
.hero-sub{
  max-width:520px; margin-top:22px;
  color:var(--text-muted); font-size:18px;
}
.hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }

.eq{
  display:flex; align-items:flex-end; gap:5px;
  height:64px; margin-top:52px;
}
.eq i{
  display:block; width:5px; border-radius:2px;
  background:linear-gradient(180deg, var(--cyan), var(--magenta));
  animation:eqbar 1.4s ease-in-out infinite;
}
.eq i:nth-child(1){ height:30%; animation-delay:-1.1s; }
.eq i:nth-child(2){ height:70%; animation-delay:-.4s; }
.eq i:nth-child(3){ height:45%; animation-delay:-.9s; }
.eq i:nth-child(4){ height:90%; animation-delay:-.2s; }
.eq i:nth-child(5){ height:55%; animation-delay:-1.3s; }
.eq i:nth-child(6){ height:75%; animation-delay:-.6s; }
.eq i:nth-child(7){ height:35%; animation-delay:-.1s; }
.eq i:nth-child(8){ height:65%; animation-delay:-.8s; }
.eq i:nth-child(9){ height:25%; animation-delay:-1.0s; }
.eq i:nth-child(10){ height:50%; animation-delay:-.3s; }
@keyframes eqbar{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce){ .eq i{ animation:none; height:50% !important; } }

/* ---- hero background video ---- */
.hero{ padding:0; border-bottom:1px solid var(--line); }
body.has-ticker .hero{
  margin-top:calc(-1 * (var(--ticker-h) + var(--nav-gap) + var(--nav-h)));
}
.hero-video{ position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; overflow:hidden; }
.hero-video video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 78%;
  opacity:.7;
}
.hero-video::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,15,.2) 0%, rgba(10,10,15,.3) 45%, rgba(10,10,15,.6) 78%, rgba(10,10,15,.88) 100%);
}
.hero-video .hero-glow{ z-index:1; }
.hero-video .wrap{ position:relative; z-index:2; padding:140px 28px 90px; width:100%; }
@media (max-width:640px){ .hero-video .wrap{ padding:150px 22px 70px; } .hero-video{ min-height:100vh; min-height:100dvh; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px;
  font-size:15px; font-weight:600;
  border-radius:999px;
  border:1px solid var(--line-2);
  transition:all .2s var(--ease);
}
.btn-primary{
  background:var(--magenta); border-color:var(--magenta); color:#0a0a0f;
}
.btn-primary:hover{ background:var(--cyan); border-color:var(--cyan); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text); }
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ============================================================
   SECTIONS
   ============================================================ */
section{ padding:88px 0; }
.section-tight{ padding:64px 0; }
.section-line{ border-top:1px solid var(--line); }

/* ---- bio section (home) — text runs full-height on the left, the
   photo marquee fills the right column top-to-bottom, stretched by
   .split's align-items:stretch to match the text column's own height
   exactly (see the vertical poster-slider rules further down). ---- */
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(36px,5vw,54px); }
.section-head p{ color:var(--text-muted); margin-top:14px; font-size:17px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; perspective:1200px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; perspective:1200px; }
@media (max-width:860px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

/* Quick "buy now" CTA shown right under the founding-member bar —
   mobile only, so mobile visitors can check out without scrolling
   past the plan/gallery section to reach the main CTA lower down. */
.mobile-quick-join{ display:none; }
@media (max-width:860px){
  .mobile-quick-join{ display:block; padding:18px 0 4px; }
}

.card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover{ border-color:var(--line-2); transform:translateY(-2px); }

/* ---- contact/booking info cards — icon + label + clickable value ---- */
.contact-card{ display:flex; align-items:flex-start; gap:14px; }
.contact-card-icon{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:rgba(0,224,255,.1); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; color:var(--cyan);
}
.contact-card-icon svg{ width:18px; height:18px; }
.contact-card a.contact-card-value{ display:inline-flex; align-items:center; gap:6px; }
.contact-card a.contact-card-value:hover{ color:var(--text); }
.contact-card a.contact-card-value svg{ width:14px; height:14px; opacity:.6; }

/* ---- bio / about split ---- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
}
@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:40px; } }
.split h2{ font-size:clamp(32px,4.5vw,46px); margin-bottom:22px; }
.split .body-copy p + p{ margin-top:16px; }
.body-copy p{ color:var(--text-muted); font-size:17px; }
.stat-row{ display:flex; gap:44px; margin-top:36px; }
.stat b{ font-family:'Bebas Neue',sans-serif; font-size:40px; color:var(--cyan); display:block; }
.stat span{ font-size:13px; color:var(--text-muted); }

/* ---- portrait card next to the bio text ----
   (not sticky — a sticky box here would visually float over the
   "Get the press kit" button right below it while scrolling) */
.split-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:transparent;
}
.split-media video, .split-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
.split-media video{
  /* the source video is rendered on a solid black backdrop — "screen"
     blend mode makes pure black act like transparency, so it melts into
     the page's own near-black background instead of looking like a
     separate video box dropped on top of it */
  mix-blend-mode:screen;
}
@media (max-width:860px){ .split-media{ position:static; margin-bottom:8px; } }

/* ---- press-kit CTA — sits right under the photo, no separate section ---- */
.press-cta-inline{ margin-top:18px; text-align:center; }

/* ---- embeds grid ---- */
.embed-frame{
  aspect-ratio:16/9; width:100%; border:0; border-radius:var(--radius);
  background:var(--bg-elev-2);
  transition:transform .35s var(--ease);
}
.media-card{ transition:transform .3s var(--ease); }
.media-card:hover .embed-frame{ transform:scale(1.015); }
.media-card h3{ font-family:'Inter',sans-serif; font-weight:600; font-size:16px; margin-top:14px; transition:color .2s var(--ease); }
.media-card:hover h3{ color:var(--magenta); }
.media-card span{ color:var(--text-muted); font-size:13px; }

/* ---- vault / pricing ---- */
.vault-hero{
  background:
    radial-gradient(700px 420px at 85% -10%, rgba(0,224,255,.16), transparent 60%),
    radial-gradient(500px 360px at -5% 100%, rgba(102,221,251,.18), transparent 60%),
    var(--bg-elev);
  border:1px solid var(--line);
  border-radius:6px;
  padding:64px;
}
@media (max-width:640px){ .vault-hero{ padding:36px 24px; } }
.price-tag{ display:flex; align-items:baseline; gap:8px; margin:26px 0 30px; }
.price-tag b{ font-family:'Bebas Neue',sans-serif; font-size:76px; color:var(--text); }
.price-tag span{ color:var(--text-muted); font-size:16px; }

.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.check-list li{ display:flex; gap:12px; color:var(--text); font-size:15.5px; }
.check-list li::before{
  content:''; flex:none; width:18px; height:18px; margin-top:2px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--cyan), var(--magenta));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
}

.locked{
  position:relative;
  border:1px dashed var(--line-2);
  border-radius:var(--radius);
  padding:22px;
  overflow:hidden;
}
.locked::after{
  content:'LOCKED';
  position:absolute; top:12px; right:12px;
  font-family:'Bebas Neue',sans-serif; font-size:12px; letter-spacing:.08em;
  color:var(--text-muted); border:1px solid var(--line-2); border-radius:3px;
  padding:3px 8px;
}
.unlocked-badge{
  display:inline-block; font-size:12px; font-weight:600; color:var(--bg);
  background:var(--cyan); padding:4px 10px; border-radius:3px; margin-bottom:10px;
}

/* ---- vault player ---- */
.vault-player{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:6px;
  overflow:hidden;
}
.vp-media{ position:relative; aspect-ratio:16/9; background:#000; }
.vp-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.vp-lock-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; padding:24px;
  background:linear-gradient(180deg, rgba(10,10,15,.35), rgba(10,10,15,.88));
}
.vp-lock-overlay[hidden]{ display:none; }
.vp-lock-badge{
  font-family:'Bebas Neue',sans-serif; font-size:14px; letter-spacing:.06em;
  color:var(--magenta); border:1px solid var(--magenta); border-radius:20px;
  padding:6px 16px;
}
.vp-lock-overlay p{ color:var(--text); font-size:15px; max-width:340px; }
.vp-controls{
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.vp-play{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--magenta); color:#0a0a0f; border:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.vp-progress{
  flex:1; height:4px; background:var(--line-2); border-radius:2px; cursor:pointer; position:relative;
}
.vp-progress-fill{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:var(--magenta); border-radius:2px;
}
.vp-time{ flex:none; font-size:12.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.vp-playlist{ list-style:none; margin:0; padding:0; }
.vp-track{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .2s var(--ease);
}
.vp-track:last-child{ border-bottom:0; }
.vp-track:hover{ background:var(--bg-elev-2); }
.vp-track.active .vp-track-title{ color:var(--magenta); }
.vp-track-title{ font-size:14.5px; font-weight:500; }
.vp-track-status{ font-size:12.5px; color:var(--text-muted); flex:none; }
.vp-track-status.is-playing{ color:var(--magenta); }

/* ---- music filter tabs ---- */
.filter-tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:8px 0 32px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.filter-tab{
  background:var(--bg-elev); border:1px solid var(--line-2); border-radius:24px;
  padding:10px 18px; font-size:13.5px; color:var(--text-muted);
  transition:all .2s var(--ease); display:inline-flex; align-items:center; gap:8px;
}
.filter-tab:hover{ border-color:var(--magenta); color:var(--text); transform:translateY(-1px); }
.filter-tab.active{
  background:var(--magenta); border-color:var(--magenta); color:#0a0a0f; font-weight:600;
  box-shadow:0 6px 16px -6px rgba(102,221,251,.55);
}
.filter-count{
  font-size:11px; background:rgba(244,242,247,.12); border-radius:10px; padding:1px 7px;
}
.filter-tab.active .filter-count{ background:rgba(10,10,15,.2); }
[data-category]{
  transition:opacity .3s var(--ease);
}
[data-category].filter-hidden{ display:none; }

/* ---- vault gallery teaser (scattered track cards) ---- */
.vault-gallery{
  position:relative;
  height:480px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:
    radial-gradient(600px 360px at 20% 15%, rgba(102,221,251,.14), transparent 60%),
    radial-gradient(560px 380px at 85% 85%, rgba(102,221,251,.10), transparent 60%),
    var(--bg-elev);
  margin:44px 0;
  perspective:1400px;
  cursor:none;
}
.vg-word{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(64px,10vw,128px);
  letter-spacing:.02em;
  color:var(--text);
  opacity:.08;
  pointer-events:none;
  white-space:nowrap;
  transition:transform .25s var(--ease);
  will-change:transform;
}
.vg-lockbar{
  position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(10,10,15,.6); backdrop-filter:blur(10px);
  border:1px solid var(--line-2); border-radius:20px;
  padding:8px 16px; font-size:12.5px; color:var(--text-muted);
  pointer-events:none;
}
.vg-card{
  position:absolute; z-index:2;
  width:158px;
  border-radius:6px; overflow:hidden;
  background:var(--bg-elev-2);
  border:1px solid var(--line-2);
  box-shadow:0 20px 34px -12px rgba(0,0,0,.65);
  transition:box-shadow .3s var(--ease);
  will-change:transform;
  cursor:none;
}
.vg-card:hover{ z-index:6; box-shadow:0 26px 48px -10px rgba(0,0,0,.8), 0 0 0 1px var(--cyan); }
.vg-thumb{
  aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--bg-elev-2), rgba(102,221,251,.16));
  color:var(--magenta);
  font-size:22px;
}
.vg-label{
  background:var(--magenta); color:#0a0a0f;
  font-size:10.5px; font-weight:700;
  padding:6px 9px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vg-cards{ position:absolute; inset:0; z-index:2; }
.vg-cards .vg-card:nth-child(1){ top:8%;  left:6%; }
.vg-cards .vg-card:nth-child(2){ top:5%;  left:38%; width:140px; }
.vg-cards .vg-card:nth-child(3){ top:10%; right:6%; }
.vg-cards .vg-card:nth-child(4){ top:40%; left:3%;  width:140px; }
.vg-cards .vg-card:nth-child(5){ top:38%; right:4%; }
.vg-cards .vg-card:nth-child(6){ bottom:8%; left:10%; }
.vg-cards .vg-card:nth-child(7){ bottom:6%; left:40%; width:150px; }
.vg-cards .vg-card:nth-child(8){ bottom:10%; right:8%; }

.btn-gradient{
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  color:#0a0a0f; border:0; font-size:16px; padding:19px 30px; font-weight:700;
}
.btn-gradient:hover{ filter:brightness(1.1); transform:translateY(-1px); }

@media (max-width:760px){
  .vault-gallery{ height:auto; padding:70px 16px 26px; cursor:auto; }
  .vg-word{ font-size:52px; opacity:.06; }
  .vg-card{
    position:static !important; transform:none !important; width:calc(50% - 6px) !important;
    display:inline-block; margin:3px; cursor:pointer;
  }
  .vault-gallery .vg-cards{ display:flex; flex-wrap:wrap; gap:0; position:relative; z-index:2; margin-top:20px; }
}

/* ---- custom "headphones" cursor — Music page only, and only once
   signed in (see js/main.js). body.vg-cursor-active is what actually
   hides the system pointer, scoped to just that page/state instead of
   sitewide; .active fades the badge in once the mouse actually moves,
   and .on-card grows it slightly over rows/links for a bit of
   affordance. ---- */
.vg-cursor{
  position:fixed; top:0; left:0; z-index:9998;
  width:58px; height:58px; border-radius:50%;
  background:rgba(102,221,251,.16);
  border:1px solid var(--cyan);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.vg-cursor.active{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.vg-cursor.on-card{ transform:translate(-50%,-50%) scale(1.15); background:rgba(102,221,251,.28); }
@media (hover:none), (max-width:760px){
  .vg-cursor{ display:none; }
}

/* the cursor above stands in for the system pointer while it's on, so
   everything on the page needs to give up its own cursor:pointer/text/
   etc too — but only on the Music page, only once js/main.js has added
   this class (signed-in member, non-touch desktop) */
@media (hover:hover) and (pointer:fine){
  body.vg-cursor-active, body.vg-cursor-active *{ cursor:none !important; }
}

/* ---- checkout gate (modal) ---- */
.checkout-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(6,6,9,.75);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease);
}
.checkout-overlay.open{ opacity:1; pointer-events:auto; }
.checkout-modal{
  width:100%; max-width:440px;
  background:var(--bg-elev);
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:32px;
  position:relative;
  transform:translateY(16px) scale(.98);
  transition:transform .3s var(--ease);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7);
}
.checkout-overlay.open .checkout-modal{ transform:translateY(0) scale(1); }
.checkout-close{
  position:absolute; top:18px; right:18px;
  width:32px; height:32px; border-radius:50%;
  background:var(--bg-elev-2); border:1px solid var(--line-2); color:var(--text-muted);
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.checkout-close:hover{ color:var(--text); border-color:var(--cyan); }
.checkout-modal h3{
  font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:.01em; margin-bottom:4px;
}
.checkout-modal .checkout-sub{ color:var(--text-muted); font-size:13.5px; margin-bottom:24px; }

.checkout-summary{
  background:var(--bg-elev-2); border:1px solid var(--line); border-radius:8px;
  padding:16px 18px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:space-between;
}
.checkout-summary .cs-plan{ font-size:14px; color:var(--text-muted); }
.checkout-summary .cs-price{ font-family:'Bebas Neue',sans-serif; font-size:24px; color:var(--text); }

.checkout-methods{ display:flex; gap:10px; margin-bottom:22px; }
.checkout-methods button{
  flex:1; background:var(--bg-elev-2); border:1px solid var(--line-2); border-radius:8px;
  padding:13px 10px; font-size:13.5px; color:var(--text-muted); display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all .2s var(--ease);
}
.checkout-methods button.active{ border-color:var(--cyan); color:var(--text); background:rgba(0,224,255,.07); }

.checkout-modal .field{ margin-bottom:6px; }
.checkout-modal .field label{ margin-bottom:6px; }
.checkout-hint{ font-size:12px; color:var(--text-muted); margin:8px 0 20px; line-height:1.5; }

.checkout-trust{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--text-muted);
}
.checkout-trust span{ display:flex; align-items:center; gap:5px; }
.checkout-trust .lock-icon{ font-size:12px; }

/* ---- tour / events list ---- */
.tour-banner{
  position:relative; overflow:hidden;
  min-height:56vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border-bottom:1px solid var(--line);
}
.tour-banner-poster{
  background:
    radial-gradient(700px 480px at 20% 15%, rgba(102,221,251,.20), transparent 60%),
    radial-gradient(600px 500px at 85% 85%, rgba(0,224,255,.14), transparent 60%),
    repeating-linear-gradient(115deg, rgba(244,242,247,.025) 0px, rgba(244,242,247,.025) 1px, transparent 1px, transparent 34px),
    var(--bg-elev);
}
.tour-banner::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,15,.15), rgba(10,10,15,.75));
}
.tour-banner-content{ position:relative; z-index:2; padding:40px 28px; }
.tour-banner-content p{ color:var(--cyan); font-size:14px; font-weight:600; margin-bottom:14px; letter-spacing:.04em; }
.tour-banner-content h2{
  font-size:clamp(28px,5.2vw,64px);
  white-space:nowrap;
}
@media (max-width:640px){ .tour-banner-content h2{ white-space:normal; font-size:clamp(26px,8vw,40px); } }

.event-row{
  display:grid; grid-template-columns:140px 1fr auto; align-items:center; gap:24px;
  padding:24px 0; border-bottom:1px solid var(--line);
  transition:padding-left .2s var(--ease);
}
.event-row:hover{ padding-left:8px; }
.event-row:last-child{ border-bottom:0; }
.event-date{ font-family:'Bebas Neue',sans-serif; color:var(--cyan); line-height:1.05; }
.event-date .ev-day{ font-size:30px; display:block; }
.event-date .ev-month{ font-size:13px; letter-spacing:.06em; color:var(--text-muted); }
.event-info h3{ font-family:'Inter',sans-serif; font-weight:600; font-size:17px; margin-bottom:4px; }
.event-info span{ color:var(--text-muted); font-size:14px; }
.event-row .btn{ padding:11px 22px; font-size:13.5px; white-space:nowrap; }
.event-row.is-past{ opacity:.5; }
.event-row.is-past .event-date{ color:var(--text-muted); }
@media (max-width:640px){
  .event-row{ grid-template-columns:70px 1fr; row-gap:12px; }
  .event-row .btn{ grid-column:1 / -1; width:100%; text-align:center; }
}

/* ---- single event detail page ---- */
.event-hero{
  position:relative; overflow:hidden;
  min-height:58vh;
  display:flex; align-items:flex-end;
  background:
    radial-gradient(760px 520px at 15% 10%, rgba(102,221,251,.20), transparent 60%),
    radial-gradient(620px 520px at 90% 90%, rgba(0,224,255,.16), transparent 60%),
    repeating-linear-gradient(115deg, rgba(244,242,247,.025) 0px, rgba(244,242,247,.025) 1px, transparent 1px, transparent 34px),
    var(--bg-elev);
}
/* a taller box gives the cover-cropped flyer room to show its full
   framing (face + logo); content sits flush to the bottom via
   flex-end. The transition into the next section is handled the
   same way as everywhere else on the site — a plain .section-line
   (see below "About this show") — not a border baked onto the hero. */
.event-hero.has-photo{ background-size:cover; background-position:center 38%; }
.event-hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  /* darkens the flyer photo everywhere (not just the bottom fade) so the
     tag/title/facts stay readable over a bright or busy poster — a flat
     dark layer plus the same top-to-bottom fade as before */
  background:
    linear-gradient(180deg, rgba(10,10,15,.4) 0%, rgba(10,10,15,.62) 45%, rgba(10,10,15,.94) 100%),
    rgba(10,10,15,.25);
}
/* mobile heroes are relatively taller and the flyer's busiest part (face,
   logos, print) sits right behind the text, so darken it further there */
@media (max-width:640px){
  .event-hero::before{
    background:
      linear-gradient(180deg, rgba(10,10,15,.55) 0%, rgba(10,10,15,.72) 45%, rgba(10,10,15,.96) 100%),
      rgba(10,10,15,.35);
  }
}
.event-hero .wrap{ position:relative; z-index:2; padding:120px 28px 64px; }
.event-tag{
  display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:var(--cyan); border:1px solid rgba(102,221,251,.4); border-radius:20px;
  padding:5px 14px; margin-bottom:16px;
}
.event-venue-link{ display:block; color:var(--text-muted); font-size:14.5px; margin-bottom:10px; }
.event-venue-link:hover{ color:var(--cyan); }
.event-hero h1{ font-size:clamp(36px,6.5vw,72px); max-width:800px; }
.event-facts{
  display:flex; flex-wrap:wrap; gap:28px; margin-top:26px;
}
.event-fact{ display:flex; flex-direction:column; gap:3px; }
.event-fact span{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.event-fact strong{ font-size:15.5px; font-weight:600; color:var(--text); }
.event-hero .btn{ margin-top:30px; }

.event-info-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 40px;
  padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.event-info-grid div{ display:flex; justify-content:space-between; padding:8px 0; font-size:14.5px; }
.event-info-grid span:first-child{ color:var(--text-muted); }
.event-info-grid span:last-child{ font-weight:600; text-align:right; }
@media (max-width:640px){ .event-info-grid{ grid-template-columns:1fr; } }

/* ---- 3D venues globe ---- */
.globe-layout{
  display:grid; grid-template-columns:440px 1fr; gap:28px; align-items:start;
}
@media (max-width:900px){ .globe-layout{ grid-template-columns:1fr; } }

.globe-canvas-wrap{
  position:relative; width:100%; max-width:440px; aspect-ratio:1/1;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:
    radial-gradient(700px 700px at 50% 40%, rgba(102,221,251,.10), transparent 65%),
    var(--bg-elev);
  cursor:grab;
}
.globe-canvas-wrap:active{ cursor:grabbing; }
.globe-canvas-wrap canvas{ display:block; width:100%; height:100%; }
.globe-hint{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-size:11.5px; color:var(--text-muted); pointer-events:none;
  background:rgba(10,10,15,.5); padding:4px 12px; border-radius:20px;
  backdrop-filter:blur(4px);
}
.globe-tooltip{
  position:absolute; z-index:5; left:50%; top:14px; transform:translateX(-50%);
  background:rgba(10,10,15,.92); border:1px solid var(--line-2);
  border-radius:6px; padding:8px 14px;
  font-size:13px; color:var(--text); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease);
}
.globe-tooltip.show{ opacity:1; pointer-events:auto; }
.globe-tooltip strong{ color:var(--cyan); }
.globe-tooltip a{ margin-left:8px; }

.globe-venue-list{
  list-style:none; margin:0; padding:0;
  max-height:440px; overflow-y:auto;
  border:1px solid var(--line); border-radius:12px;
}
.globe-venue-list li{
  padding:13px 16px; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .15s var(--ease);
  display:flex; align-items:center; gap:10px;
}
.globe-venue-list li:last-child{ border-bottom:0; }
.globe-venue-list li:hover{ background:rgba(244,242,247,.04); }
.globe-venue-list li.active{ background:rgba(102,221,251,.09); }
.globe-venue-list li::before{
  content:''; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 6px var(--cyan);
}
.globe-venue-list li.active::before{ background:var(--magenta); box-shadow:0 0 8px var(--magenta); }
.globe-venue-list .gv-main{ display:flex; flex-direction:column; gap:2px; }
.globe-venue-list .gv-venue{ font-weight:600; font-size:14.5px; }
.globe-venue-list .gv-type{ font-size:11.5px; color:var(--text-muted); }
.globe-venue-list .gv-loc{ font-size:12.5px; color:var(--text-muted); margin-left:auto; text-align:right; }
.globe-venue-list .gv-link{
  display:inline-block; margin-left:6px; color:var(--cyan);
  font-weight:700; opacity:.75;
}
/* wraps the whole row's content when it leads somewhere (our own past
   event page, or a venue's website) — before this, only the tiny ↗
   glyph itself was a link and the rest of the row did nothing when
   clicked beyond spinning the globe, which read as "nothing opens" */
.globe-venue-list .gv-row-link{
  display:flex; align-items:center; gap:10px; flex:1; min-width:0;
  color:inherit; text-decoration:none;
}
.globe-venue-list li:hover .gv-link{ opacity:1; }
.globe-venue-list li:hover .gv-venue{ color:var(--cyan); }

/* ---- members-only gate (music catalogue, etc.) ---- */
.gallery-locked-tile .iframe-embed{ display:none; }
.gallery-locked-tile-inner{
  aspect-ratio:16/9; border-radius:6px;
  background:var(--bg-elev-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font-size:22px;
}
.gallery-locked-tile-inner span{ font-size:12px; font-weight:600; color:var(--text-muted); }

.catalog-locked{
  text-align:center; max-width:440px; margin:0 auto;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:12px;
  padding:44px 32px;
}
.catalog-locked-icon{ font-size:26px; opacity:.6; margin-bottom:14px; }
.catalog-locked h3{ font-size:19px; margin-bottom:10px; }
.catalog-locked p{ color:var(--text-muted); font-size:14.5px; margin-bottom:22px; }
.catalog-unlocked{ display:none; }
.catalog-gate.is-member .catalog-locked{ display:none; }
.catalog-gate.is-member .catalog-unlocked{ display:block; }

/* ---- academy: e-book banner ---- */
.ebook-banner{
  display:grid; grid-template-columns:200px 1fr; gap:36px; align-items:center;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:12px;
  padding:32px;
}
@media (max-width:700px){ .ebook-banner{ grid-template-columns:1fr; text-align:center; } }
.ebook-cover{
  width:100%; aspect-ratio:3/4; border-radius:6px;
  background:
    radial-gradient(180px 140px at 30% 15%, rgba(102,221,251,.30), transparent 60%),
    linear-gradient(160deg, var(--bg-elev-2), #0a0a0f);
  border:1px solid var(--line-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:18px;
}
.ebook-cover span{ font-family:'Bebas Neue',sans-serif; font-size:11px; letter-spacing:.1em; color:var(--cyan); margin-bottom:10px; }
.ebook-cover h3{ font-family:'Bebas Neue',sans-serif; font-size:22px; line-height:1.05; }
.ebook-banner .btn{ margin-top:18px; }
.ebook-note{ font-size:12.5px; color:var(--text-muted); margin-top:12px; }

/* ---- academy: video lessons ---- */
.lesson-card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.lesson-card .embed-frame{ aspect-ratio:16/9; }
.lesson-card-body{ padding:16px 18px; }
.lesson-num{ font-family:'Bebas Neue',sans-serif; color:var(--cyan); font-size:12px; letter-spacing:.05em; }
.lesson-card h3{ font-size:16px; margin-top:4px; }
.lesson-card p{ font-size:13.5px; color:var(--text-muted); margin-top:4px; }

/* ---- academy: blog ---- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:860px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:8px; padding:24px; display:flex; flex-direction:column; height:100%; }
.blog-card .blog-tag{
  align-self:flex-start; font-size:11px; font-weight:600; letter-spacing:.04em;
  color:var(--cyan); border:1px solid rgba(102,221,251,.35); border-radius:20px; padding:3px 10px; margin-bottom:14px;
}
.blog-card h3{ font-size:18px; margin-bottom:8px; }
.blog-card p{ font-size:14px; color:var(--text-muted); line-height:1.6; flex:1; }
.blog-card .blog-date{ font-size:12px; color:var(--text-muted); opacity:.7; margin-top:16px; }

/* ---- google-style reviews ---- */
.reviews-head{
  max-width:none; /* .section-head's 640px cap would squeeze this row
    once the badge sits at the far end of it */
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
/* a small square rating card anchored to the far end of the heading
   row (its original spot) — refined with a soft gradient, a touch more
   shadow/depth and a subtle hover-lift so it reads as a polished badge
   rather than a plain bordered box */
.google-badge{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:clamp(52px,5vw,64px); height:clamp(52px,5vw,64px); flex:none;
  background:linear-gradient(160deg, var(--bg-elev-2), var(--bg-elev));
  border:1px solid var(--line-2); border-radius:14px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.google-badge:hover{ transform:translateY(-2px); border-color:var(--line); }
.google-badge svg{ width:18px; height:18px; }
.google-badge-stars{ color:#fbbc05; font-size:9px; letter-spacing:.5px; }
.google-badge strong{ color:var(--text); font-family:'Inter',sans-serif; font-size:14px; font-weight:700; }

/* ---- reviews — a horizontal, arrow-scrolled strip instead of a fixed
   3-up grid, so it already works once real Google reviews start
   pushing the count past 3 (no layout change needed later) ---- */
/* the slider has dedicated left/right gutters (padding) sized exactly
   to the arrow buttons, so the arrows sit in their own space beside
   the scrollable viewport instead of floating on top of it — the
   viewport's box never extends under them, so they can't cover a
   card's edge no matter how far the strip is scrolled */
.reviews-slider{ position:relative; margin-top:32px; padding:0 50px; }
.reviews-viewport{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.reviews-viewport::-webkit-scrollbar{ display:none; }
.reviews-grid{
  display:flex; gap:16px; width:max-content; margin:0 auto;
}
.review-card{
  width:236px; flex:none; scroll-snap-align:start;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:8px; padding:14px;
}
@media (max-width:640px){ .review-card{ width:58vw; } }
.reviews-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:38px; height:38px; border-radius:50%; flex:none;
  background:rgba(12,12,18,.85);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid var(--line-2); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.6);
  transition:border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.reviews-arrow:hover{ border-color:var(--cyan); color:var(--cyan); }
.reviews-arrow:disabled{ opacity:.3; pointer-events:none; }
.reviews-prev{ left:0; }
.reviews-next{ right:0; }
@media (max-width:640px){
  .reviews-slider{ padding:0 40px; }
  .reviews-arrow{ width:32px; height:32px; font-size:16px; }
}
.review-top{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.review-avatar{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:linear-gradient(135deg, var(--cyan), var(--magenta));
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:12px; color:#0a0a0f;
}
.review-name{ font-weight:600; font-size:12px; }
.review-stars{ color:#fbbc05; font-size:10px; letter-spacing:1px; margin-top:1px; }
.review-card p{ color:var(--text-muted); font-size:11.5px; line-height:1.5; }
.review-date{ display:block; font-size:9.5px; color:var(--text-muted); opacity:.7; margin-top:9px; }

/* ---- admin dashboard ---- */
.admin-login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.admin-login-card{
  width:100%; max-width:380px; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:12px; padding:36px;
}
.admin-login-card h1{ font-size:26px; margin-bottom:6px; }
.admin-login-card p{ color:var(--text-muted); font-size:14px; margin-bottom:26px; }
.admin-login-card .field{ margin-bottom:16px; }
.admin-error{ color:#ff6b8a; font-size:13.5px; margin-top:14px; display:none; }
.admin-error.show{ display:block; }

.admin-shell{ display:none; }
.admin-shell.show{ display:block; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px; border-bottom:1px solid var(--line);
}
.admin-topbar h1{ font-size:20px; }
.admin-layout{ display:flex; align-items:flex-start; }
.admin-body{ flex:1 1 auto; min-width:0; padding:32px 28px; max-width:1200px; margin:0 auto; }

.admin-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:40px; }
@media (max-width:900px){ .admin-stats{ grid-template-columns:repeat(2,1fr); } }
.admin-stat-card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:10px; padding:20px; }
.admin-stat-card b{ display:block; font-family:'Bebas Neue',sans-serif; font-size:30px; color:var(--cyan); }
.admin-stat-card span{ font-size:12.5px; color:var(--text-muted); }

.admin-section-title{ font-family:'Bebas Neue',sans-serif; font-size:20px; margin:36px 0 16px; }
.admin-table{ width:100%; border-collapse:collapse; background:var(--bg-elev); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.admin-table th, .admin-table td{ text-align:left; padding:12px 16px; font-size:13.5px; border-bottom:1px solid var(--line); }
.admin-table th{ color:var(--text-muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; }
.admin-table tr:last-child td{ border-bottom:0; }
.admin-badge{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; }
.admin-badge.active{ background:rgba(102,221,251,.15); color:var(--cyan); }
.admin-badge.canceled{ background:rgba(255,107,138,.15); color:#ff6b8a; }
.admin-badge.past_due{ background:rgba(255,193,7,.15); color:#ffc107; }
.admin-table button{ font-size:12px; color:var(--text-muted); text-decoration:underline; }
.admin-table button:hover{ color:var(--cyan); }

.admin-promo-form{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0 16px; align-items:end; background:var(--bg-elev); border:1px solid var(--line); border-radius:10px; padding:20px 20px 4px; margin-bottom:16px; }
.admin-promo-form .field{ margin-bottom:16px; }
.admin-promo-form button{ grid-column:1 / -1; justify-self:start; margin-bottom:16px; }
.admin-promo-form .admin-error{ grid-column:1 / -1; }
@media (max-width: 720px){ .admin-promo-form{ grid-template-columns:1fr; } }
.admin-empty{ padding:24px; text-align:center; color:var(--text-muted); font-size:14px; }

/* ---- admin dashboard: left sidebar menu (Membership / Events / Music /
   Gallery / Academy) — swaps which panel is visible, nothing reloads ---- */
.admin-menu{
  display:flex; flex-direction:column; gap:3px;
  width:220px; flex:0 0 220px; box-sizing:border-box;
  padding:20px 12px; align-self:stretch;
  background:var(--bg-elev); border-right:1px solid var(--line);
  position:sticky; top:0; min-height:calc(100vh - 73px);
}
.admin-menu button{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; font-size:13.5px; font-weight:600; color:var(--text-muted);
  border-radius:8px; border-left:3px solid transparent;
  transition:background .15s ease, color .15s ease;
}
.admin-menu button svg{ width:18px; height:18px; flex:0 0 18px; opacity:.85; }
.admin-menu button:hover{ background:var(--bg-elev-2); color:var(--text); }
.admin-menu button.active{ background:var(--bg-elev-2); color:var(--cyan); border-left-color:var(--cyan); }
.admin-menu button.active svg{ opacity:1; }
@media (max-width:860px){
  .admin-layout{ flex-direction:column; }
  .admin-menu{
    flex-direction:row; width:100%; flex:none; overflow-x:auto;
    border-right:0; border-bottom:1px solid var(--line); position:static; min-height:0;
  }
  .admin-menu button{ flex:0 0 auto; white-space:nowrap; border-left:0; border-bottom:3px solid transparent; border-radius:6px 6px 0 0; }
  .admin-menu button.active{ border-left-color:transparent; border-bottom-color:var(--cyan); }
}
.admin-panel{ display:none; }
.admin-panel.active{ display:block; }
.admin-thumb{ width:56px; height:56px; object-fit:cover; border-radius:6px; background:var(--bg-elev-2); }
.admin-upload-status{ font-size:12.5px; color:var(--text-muted); margin-top:6px; }
.admin-upload-status.ok{ color:var(--cyan); }
.admin-upload-status.err{ color:#ff6b8a; }

/* ---- site-wide mini player (now lives inline in the nav bar, next to
   the menu/hamburger button — just a play/pause button + a tiny equalizer,
   no title text or "join" tease, so it stays tidy on mobile too) ---- */
.nav-player{
  flex:none;
  display:flex; align-items:center; gap:8px;
  margin-left:8px;
  opacity:0; transform:scale(.9);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.nav-player.show{ opacity:1; transform:scale(1); }
.nav-player-toggle{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--cyan); color:#0a0a0f;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s var(--ease);
}
.nav-player-toggle:hover{ transform:scale(1.08); }
.nav-player-toggle svg{ margin-left:1px; }
.nav-player-bars{
  display:flex; align-items:center; gap:2px; height:14px; flex:none;
}
.nav-player-bars i{
  display:block; width:2.5px; height:40%; border-radius:2px; background:var(--cyan);
  animation:mp-bar 1s ease-in-out infinite; animation-play-state:paused;
}
.nav-player.is-playing .nav-player-bars i{ animation-play-state:running; }
.nav-player-bars i:nth-child(1){ animation-delay:-.9s; }
.nav-player-bars i:nth-child(2){ animation-delay:-.5s; }
.nav-player-bars i:nth-child(3){ animation-delay:-.7s; }
.nav-player-bars i:nth-child(4){ animation-delay:-.2s; }
@keyframes mp-bar{ 0%,100%{ height:25%; } 50%{ height:100%; } }
@media (max-width:520px){
  .nav-player{ margin-left:4px; gap:6px; }
  .nav-player-toggle{ width:26px; height:26px; }
}

/* ---- newsletter popup ---- */
.newsletter-overlay{
  position:fixed; inset:0; z-index:9500;
  background:rgba(6,6,9,.7);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.newsletter-overlay.open{ opacity:1; pointer-events:auto; }
.newsletter-modal{
  width:100%; max-width:420px;
  background:var(--bg-elev);
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:0;
  position:relative;
  overflow:hidden;
  transform:translateY(16px) scale(.97);
  transition:transform .35s var(--ease);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.75);
}
.newsletter-overlay.open .newsletter-modal{ transform:translateY(0) scale(1); }
.newsletter-banner{
  height:110px;
  background:
    radial-gradient(240px 140px at 20% 0%, rgba(102,221,251,.28), transparent 65%),
    radial-gradient(220px 160px at 90% 100%, rgba(0,224,255,.18), transparent 60%),
    var(--bg-elev-2);
  display:flex; align-items:flex-end; padding:0 26px 14px;
  border-bottom:1px solid var(--line);
}
.newsletter-banner span{
  font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:.02em; color:var(--text);
}
.newsletter-body{ padding:26px; }
.newsletter-body p{ color:var(--text-muted); font-size:14px; margin-bottom:20px; }
.newsletter-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background:rgba(10,10,15,.5); backdrop-filter:blur(4px);
  border:1px solid rgba(244,242,247,.2); color:var(--text);
  font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.newsletter-close:hover{ border-color:var(--cyan); }
.newsletter-form{ display:flex; flex-direction:column; gap:10px; }
.newsletter-form input{
  background:var(--bg-elev-2); border:1px solid var(--line-2); border-radius:999px;
  padding:13px 20px; color:var(--text); font-size:15px; font-family:inherit;
}
.newsletter-fine{ font-size:11.5px; color:var(--text-muted); margin-top:14px; text-align:center; }
.newsletter-fine a{ color:var(--cyan); text-decoration:underline; }

/* ---- login modal (nav "Login" link) — same overlay/card pattern as
   the newsletter popup above ---- */
.login-overlay{
  position:fixed; inset:0; z-index:9600;
  background:rgba(6,6,9,.7);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.login-overlay.open{ opacity:1; pointer-events:auto; }
.login-modal{
  width:100%; max-width:380px;
  background:var(--bg-elev);
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:30px 26px 26px;
  position:relative;
  transform:translateY(16px) scale(.97);
  transition:transform .35s var(--ease);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.75);
}
.login-overlay.open .login-modal{ transform:translateY(0) scale(1); }
.login-modal h3{ font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:.02em; margin-bottom:6px; }
.login-modal p{ color:var(--text-muted); font-size:13.5px; margin-bottom:18px; }
.login-modal form{ display:flex; flex-direction:column; gap:10px; }
.login-modal input{
  background:var(--bg-elev-2); border:1px solid var(--line-2); border-radius:999px;
  padding:13px 20px; color:var(--text); font-size:15px; font-family:inherit;
}
.login-modal .login-error{ color:#ff6b8a; font-size:13px; min-height:1em; }
.login-modal button[type="submit"]{ margin-top:4px; }
.login-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background:rgba(10,10,15,.5); backdrop-filter:blur(4px);
  border:1px solid rgba(244,242,247,.2); color:var(--text);
  font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.login-close:hover{ border-color:var(--cyan); }

/* ---- shop "coming soon" overlay — covers the whole Shop page on open
   (nothing underneath is removed, it's just previewed once this is
   dismissed) while real products/pricing/stock aren't loaded yet. Same
   overlay pattern as the newsletter/login popups above, just bigger. ---- */
.coming-soon-overlay{
  position:fixed; inset:0; z-index:9200;
  background:rgba(6,6,9,.82);
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
.coming-soon-overlay.open{ opacity:1; pointer-events:auto; }
.coming-soon-modal{
  width:100%; max-width:560px;
  background:var(--bg-elev);
  border:1px solid var(--line-2);
  border-radius:20px;
  padding:0;
  position:relative;
  overflow:hidden;
  text-align:center;
  transform:translateY(20px) scale(.96);
  transition:transform .4s var(--ease);
  box-shadow:0 60px 120px -24px rgba(0,0,0,.8);
}
.coming-soon-overlay.open .coming-soon-modal{ transform:translateY(0) scale(1); }
.coming-soon-banner{
  height:120px;
  background:
    radial-gradient(280px 160px at 15% 0%, rgba(102,221,251,.32), transparent 65%),
    radial-gradient(260px 200px at 90% 100%, rgba(0,224,255,.22), transparent 60%),
    var(--bg-elev-2);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.coming-soon-icon{
  width:56px; height:56px; border-radius:50%;
  background:rgba(102,221,251,.14); border:1px solid var(--cyan);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.coming-soon-body{ padding:34px 34px 30px; }
.coming-soon-body h2{ font-size:clamp(30px,4vw,42px); margin-bottom:12px; }
.coming-soon-body p{ color:var(--text-muted); font-size:15px; line-height:1.65; max-width:440px; margin:0 auto 26px; }
.coming-soon-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.coming-soon-close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(10,10,15,.5); backdrop-filter:blur(4px);
  border:1px solid rgba(244,242,247,.25); color:var(--text);
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.coming-soon-close:hover{ border-color:var(--cyan); }
@media (max-width:480px){
  .coming-soon-actions{ flex-direction:column; }
  .coming-soon-actions .btn{ width:100%; }
}

/* ---- plan / payment method selector ---- */
.plan-tabs{ display:flex; gap:10px; margin:26px 0 22px; flex-wrap:wrap; }
.plan-tab{
  flex:1 1 0; min-width:120px;
  background:var(--bg-elev-2); border:1px solid var(--line-2); border-radius:6px;
  padding:16px 14px; text-align:left; color:var(--text);
  transition:border-color .2s var(--ease), background .2s var(--ease);
  position:relative;
}
.plan-tab:hover{ border-color:var(--magenta); }
.plan-tab.active{ border-color:var(--magenta); background:rgba(102,221,251,.08); }
.plan-tab .pt-label{ display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:6px; }
.plan-tab .pt-price-was{
  display:block; font-size:14px; color:var(--text-muted);
  text-decoration:line-through; text-decoration-color:rgba(255,107,107,.7);
  margin-bottom:1px;
}
.plan-tab .pt-price{ display:block; font-family:'Bebas Neue',sans-serif; font-size:28px; line-height:1; }
.plan-tab .pt-period{ display:block; font-size:12px; color:var(--text-muted); margin-top:4px; }
.plan-tab .pt-seats{
  display:block; font-size:11px; font-weight:600; color:var(--cyan);
  margin-top:8px; letter-spacing:.02em;
}
.plan-tab .pt-badge{
  position:absolute; top:-9px; right:10px;
  background:var(--magenta); color:#0a0a0f; font-size:10.5px; font-weight:700;
  padding:3px 8px; border-radius:10px; letter-spacing:.02em;
}

.pay-method-tabs{ display:flex; gap:8px; margin-bottom:20px; }
.pay-tab{
  flex:1; background:transparent; border:1px solid var(--line-2); border-radius:6px;
  padding:11px 10px; font-size:13.5px; color:var(--text-muted);
  transition:all .2s var(--ease);
}
.pay-tab.active{ border-color:var(--cyan); color:var(--text); background:rgba(0,224,255,.07); }
.crypto-note{
  font-size:12.5px; color:var(--text-muted); margin-top:12px; line-height:1.5;
}
.crypto-coins{ display:flex; gap:8px; margin-top:10px; }
.crypto-coins span{
  font-size:11.5px; border:1px solid var(--line-2); border-radius:4px; padding:3px 8px; color:var(--text-muted);
}

/* ---- founding member counter ---- */
.founding-banner{
  background:rgba(102,221,251,.07);
  border-bottom:1px solid rgba(102,221,251,.25);
  padding:16px 0;
}
.founding-banner .fc-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:14px; color:var(--text); margin-bottom:10px; flex-wrap:wrap;
}
.founding-banner .fc-top strong{ color:var(--cyan); }
.founding-banner .fc-count{
  font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:.03em;
  color:var(--cyan); flex:none;
}
.founding-banner .fc-bar{ height:6px; border-radius:3px; background:var(--text); overflow:hidden; }
.founding-banner .fc-bar-fill{
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  transition:width .4s var(--ease);
}
.founding-banner.sold-out .fc-top strong{ color:var(--text-muted); }
@media (max-width:640px){ .founding-banner .fc-top{ font-size:13px; } }
@media (max-width:480px){
  .plan-tab{ min-width:100px; padding:13px 10px; }
  .plan-tab .pt-price{ font-size:22px; }
  .pay-tab{ font-size:12.5px; padding:10px 6px; }
}

/* ---- the physical-looking "access card" visual — a little membership
   card mockup (chip, masked digits, brand), reused wherever we want to
   show "this is what being a member looks like" at a glance: the
   homepage teaser and the signed-in "Your membership" panel below. ---- */
.access-card{
  position:relative;
  aspect-ratio:1.6/1;
  border-radius:18px;
  padding:22px 26px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:
    linear-gradient(135deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(155deg, #1b1b24 0%, #15151d 42%, #1f1626 68%, #1b1b24 100%);
  border:1px solid rgba(244,242,247,.14);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  color:var(--text);
}
/* chrome/metallic light sweep, echoing the switch2smile logo-animation's
   brushed-chrome reveal — a soft band of light drifting across the card */
.access-card::after{
  content:'';
  position:absolute; inset:-20%;
  background:linear-gradient(115deg,
    transparent 22%,
    rgba(255,255,255,.03) 30%,
    rgba(255,255,255,.20) 38%,
    rgba(102,221,251,.22) 45%,
    rgba(255,255,255,.30) 50%,
    rgba(255,61,129,.18) 56%,
    rgba(255,255,255,.03) 64%,
    transparent 72%
  );
  background-size:220% 220%;
  background-position:0% 0%;
  animation:access-card-sheen 7s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
@keyframes access-card-sheen{
  0%{ background-position:15% 0%; }
  50%{ background-position:85% 100%; }
  100%{ background-position:15% 0%; }
}
.access-card-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  position:relative; z-index:1;
}
.access-card-brand{
  font-family:'Bebas Neue',sans-serif; font-size:19px; letter-spacing:.03em;
}
.access-card-brand span{ color:var(--magenta); }
.access-card-chip{
  flex:none; width:40px; height:32px; border-radius:6px;
  background:
    url('../media/logo-watermark.png') center/68% no-repeat,
    linear-gradient(135deg, rgba(102,221,251,.16), rgba(255,61,129,.14));
  border:1px solid rgba(244,242,247,.14);
}
.access-card-number{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  position:relative; z-index:1;
  font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:.1em;
  color:rgba(244,242,247,.55);
}
.access-card-bottom{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  position:relative; z-index:1;
}
.access-card-holder{
  font-size:10.5px; letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.access-card-plan{
  flex:none;
  font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:.03em; color:var(--cyan);
  text-transform:uppercase;
}
@media (max-width:480px){
  .access-card{ padding:18px 20px; border-radius:14px; }
  .access-card-brand{ font-size:16px; }
  .access-card-chip{ width:32px; height:25px; }
  .access-card-number{ gap:11px; font-size:15px; }
  .access-card-plan{ font-size:14px; }
  .access-card::before{ width:68%; }
}

/* ---- homepage membership snapshot card (the small card inside the
   "One pass..." teaser section, to the right of the pitch copy) ---- */
.vault-hero-split{
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
}
@media (max-width:860px){ .vault-hero-split{ grid-template-columns:1fr; } }
.membership-teaser-card{
  background:var(--bg-elev-2);
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:22px;
  position:relative;
  overflow:hidden;
}
.membership-teaser-card::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(220px 160px at 100% 0%, rgba(102,221,251,.14), transparent 70%);
  pointer-events:none;
}
.membership-teaser-card > *{ position:relative; }
.membership-teaser-card .access-card{ margin-bottom:22px; }
.mtc-price{ display:flex; align-items:baseline; gap:10px; margin:6px 0 4px; }
.mtc-price-was{
  font-size:19px; color:var(--text-muted);
  text-decoration:line-through; text-decoration-color:rgba(255,107,107,.7);
}
.mtc-price b{ font-family:'Bebas Neue',sans-serif; font-size:52px; line-height:1; color:var(--text); }
.mtc-price span{ font-size:14px; color:var(--text-muted); }
.mtc-spots{ font-size:13px; color:var(--cyan); margin-bottom:22px; }
.membership-teaser-card .check-list{ gap:11px; margin-bottom:26px; }
.membership-teaser-card .check-list li{ font-size:14px; }

/* ---- "Your membership" account card (membership.html, signed-in
   visitors) — replaces the plain centered text block ---- */
.member-card{
  background:var(--bg-elev-2);
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:32px;
  text-align:left;
}
.member-card-top{ margin-bottom:26px; max-width:360px; }
.member-card-actions{
  display:flex; gap:10px; flex-wrap:wrap;
}
.member-card-note{
  font-size:12.5px; color:var(--text-muted); margin:16px 0 0; line-height:1.5;
}
.member-card-signout{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:center;
}
@media (max-width:480px){
  .member-card{ padding:24px 20px; }
  .member-card-actions{ flex-direction:column; }
  .member-card-actions .btn{ width:100%; }
}

/* ---- catalogue accordion (category groups under the gallery) ---- */
.cat-accordion{
  border:1px solid var(--line); border-radius:8px;
  background:var(--bg-elev);
  margin-bottom:14px;
  overflow:hidden;
}
.cat-accordion summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px;
  font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:.01em;
  color:var(--text);
}
.cat-accordion summary::-webkit-details-marker{ display:none; }
.cat-accordion summary .cat-count{
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--text-muted);
  background:rgba(244,242,247,.08); border-radius:12px; padding:3px 10px; margin-right:auto; margin-left:14px;
}
.cat-accordion summary::after{
  content:'+'; font-family:'Bebas Neue',sans-serif; font-size:26px; color:var(--magenta); flex:none;
  transition:transform .25s var(--ease);
}
.cat-accordion[open] summary::after{ transform:rotate(45deg); }
.cat-accordion[open] summary{ border-bottom:1px solid var(--line); }
.cat-accordion-body{ padding:8px 26px 20px; }
.cat-accordion .track-row:first-child{ border-top:0; }
@media (max-width:640px){
  .cat-accordion summary{ padding:18px 20px; font-size:18px; }
  .cat-accordion-body{ padding:4px 20px 16px; }
}

/* ---- faq ---- */
.faq-item{ border-bottom:1px solid var(--line); padding:22px 0; }
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  font-size:17px; font-weight:600;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-family:'Bebas Neue',sans-serif; font-size:24px; color:var(--magenta);
  transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ color:var(--text-muted); margin-top:14px; font-size:15.5px; max-width:640px; }

/* ---- forms ---- */
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13px; color:var(--text-muted); margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%; background:var(--bg-elev); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:13px 14px; color:var(--text); font-size:15px;
  font-family:inherit;
}
.field textarea{ resize:vertical; min-height:100px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--cyan); }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a97a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:38px;
}

/* ---- booking form — field rows (from/to pairs, location, etc) ---- */
.field-row{ display:grid; gap:12px; }
.field-row.two-col{ grid-template-columns:1fr 1fr; }
.field-row.title-name{ grid-template-columns:100px 1fr; }
@media (max-width:520px){
  .field-row.two-col, .field-row.title-name{ grid-template-columns:1fr; }
}

/* icon-prefixed inputs (date/time from-to) */
.icon-input{ position:relative; }
.icon-input svg{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--text-muted); pointer-events:none;
}
.icon-input input{ padding-left:38px !important; color-scheme:dark; }

/* phone number: country-code button joined to the number input */
.phone-group{ display:flex; gap:0; }
.phone-group .country-select-btn{ border-top-right-radius:0; border-bottom-right-radius:0; border-right:0; flex:none; }
.phone-group input{ border-top-left-radius:0; border-bottom-left-radius:0; }

/* budget: number input joined to the currency select */
.budget-group{ display:flex; gap:0; }
.budget-group input{ border-top-right-radius:0; border-bottom-right-radius:0; border-right:0; }
.budget-group select{ width:auto; flex:none; min-width:96px; border-top-left-radius:0; border-bottom-left-radius:0; }

/* country-select button (phone code / location country) + its searchable dropdown */
.country-select-btn{
  display:flex; align-items:center; gap:8px; width:100%;
  background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:13px 14px; color:var(--text); font-size:15px; font-family:inherit; white-space:nowrap;
  transition:border-color .2s var(--ease);
}
.country-select-btn:hover, .country-select-wrap.is-open .country-select-btn{ border-color:var(--cyan); }
.country-select-btn .cs-caret{ margin-left:auto; font-size:11px; color:var(--text-muted); }
.country-select-btn .cs-label{ overflow:hidden; text-overflow:ellipsis; }
.country-select-wrap{ position:relative; isolation:isolate; z-index:1; }
.country-select-wrap.is-open{ z-index:40; }
.country-dropdown-panel{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:999;
  background:var(--bg-elev); border:1px solid var(--line-2); border-radius:10px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.6);
  padding:10px; min-width:260px;
}
.country-search{
  width:100%; background:var(--bg-elev-2); border:1px solid var(--line-2); border-radius:8px;
  padding:9px 12px; color:var(--text); font-size:14px; font-family:inherit; margin-bottom:8px;
}
.country-search:focus{ outline:none; border-color:var(--cyan); }
.country-list{ max-height:220px; overflow-y:auto; }
.country-option{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 8px; border-radius:6px; font-size:14px; color:var(--text); font-family:inherit;
  background:transparent; border:none; cursor:pointer;
}
.country-option:hover{ background:var(--bg-elev-2); }
.country-option .co-dial{ margin-left:auto; color:var(--text-muted); font-size:13px; }

/* event-type chips */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.et-chip{
  padding:10px 16px; border-radius:999px; border:1px solid var(--line-2);
  background:transparent; color:var(--text); font-size:13.5px; font-weight:600; font-family:inherit;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.et-chip:hover{ border-color:var(--cyan); color:var(--cyan); }
.et-chip.is-selected{ background:var(--cyan); border-color:var(--cyan); color:#0a0a0f; }

/* ---- footer ---- */
footer{ border-top:1px solid var(--line); padding:52px 0 36px; }
.footer-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:40px 32px;
  align-items:start;
}
.footer-logo{ font-family:'Bebas Neue',sans-serif; font-size:24px; }
.footer-logo span{ color:var(--magenta); }
/* same "kicker" label used on every hero/section on the site — small cyan
   caps with a short dash — so the footer reads as part of the same design
   system instead of a generic bottom-of-page block */
.footer-col-title{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--cyan); margin:0 0 14px;
}
.footer-col-title::before{ content:''; width:16px; height:1px; background:var(--magenta); flex:none; }
/* :not(.footer-brand) too — otherwise this rule's higher specificity
   (.footer-col + :not() + "a") beats .social-row a below and silently
   wins on color/display/padding, which is why the social icons kept
   coming out plain white/off-center no matter what .social-row a said */
.footer-col:not(.footer-join):not(.footer-brand) a{
  display:block; font-size:14.5px; color:var(--text); text-decoration:none;
  padding:5px 0; transition:color .2s;
}
.footer-col:not(.footer-join):not(.footer-brand) a:hover{ color:var(--cyan); }
/* the membership CTA gets the same elevated-card treatment (bg-elev panel,
   1px line, matching radius) used for every other card on the site, so it
   reads as a designed panel rather than a button floating in empty space */
.footer-join{
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:8px;
  padding:22px;
}
.footer-join-text{
  font-size:13.5px; color:var(--text-muted); margin:0 0 16px; max-width:220px;
}
@media (max-width:860px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-join{ grid-column:1 / -1; margin-top:8px; }
}
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; gap:30px; }
}
/* icon-only round buttons — labels stay only for screen readers (aria-label
   on the link), so 5 icons always sit in one tidy row instead of wrapping
   awkwardly once the footer column got narrower */
.social-row{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.social-row a{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-2); color:var(--magenta);
  transition:color .2s, border-color .2s, background .2s;
}
.social-row a svg{ display:block; flex:none; margin:auto; }
.social-row a span{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.social-row a:hover{ color:var(--cyan); border-color:var(--cyan); background:rgba(102,221,251,.08); }
.footer-bottom{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:13px; color:var(--text-muted);
}

/* ---- toast ---- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%,140%);
  background:var(--bg-elev-2); border:1px solid var(--line-2);
  padding:14px 22px; border-radius:var(--radius); font-size:14px;
  transition:transform .3s var(--ease); z-index:100;
}
.toast.show{ transform:translate(-50%,0); }

/* ---- track / gig lists ---- */
.track-row{ padding:22px 0; border-bottom:1px solid var(--line); transition:padding-left .25s var(--ease); }
.track-row:last-child{ border-bottom:0; }
.track-row:hover{ padding-left:8px; }
.track-row h3{ font-family:'Inter',sans-serif; font-weight:600; font-size:16.5px; margin-bottom:6px; transition:color .2s var(--ease); }
.latest-release-badge{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#0a0a0f; background:var(--cyan);
  border-radius:20px; padding:2px 10px; margin-left:10px; vertical-align:middle;
}
.track-row:hover h3{ color:var(--magenta); }
.track-row p{ color:var(--text-muted); font-size:14.5px; max-width:640px; }
.track-grid-2{ display:grid; grid-template-columns:1fr 1fr; column-gap:56px; }
@media (max-width:760px){ .track-grid-2{ grid-template-columns:1fr; } }

/* ---- iTunes-style song table + player bar (music page) ---- */
.itunes-player{
  display:flex; align-items:center; gap:22px;
  background:var(--bg-elev); border:1px solid var(--line-2); border-radius:8px;
  padding:14px 22px; margin-bottom:24px;
  position:sticky;
  top:calc(var(--ticker-h) + var(--nav-gap) + var(--nav-h) + var(--nav-gap));
  z-index:6;
}
.itunes-player-transport{ flex:none; display:flex; align-items:center; gap:8px; }
.itunes-player-toggle{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--magenta); color:#0a0a0f; border:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s var(--ease);
}
.itunes-player-toggle:hover{ background:var(--cyan); }
.itunes-player-toggle svg{ display:block; }
.itunes-player-skip{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:transparent; border:1px solid var(--line-2); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .2s var(--ease); padding:0;
}
.itunes-player-skip:hover{ border-color:var(--magenta); color:var(--magenta); }
.itunes-player-skip svg{ display:block; }
.itunes-player-volume{ flex:none; display:flex; align-items:center; gap:8px; }
.itunes-player-mute{
  flex:none; width:26px; height:26px; border-radius:50%; padding:0;
  background:transparent; border:0; color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:color .2s var(--ease);
}
.itunes-player-mute:hover{ color:var(--cyan); }
.itunes-player-mute svg{ display:block; }
/* ---- small custom slider (scrub + volume) — a thin 4px bar with a
   tiny 10px thumb, the compact look the player always had. It's a plain
   div (not a native <input type="range">), driven by pointer events in
   the inline script — native range styling kept rendering huge/chunky
   on some mobile browsers no matter how it was reset, so this sidesteps
   that entirely and the visuals are 100% ours. Vertical padding makes
   the actual hit/drag target comfortably tall for touch without the
   visible bar itself looking bulky. */
.s2s-slider{
  position:relative; box-sizing:content-box;
  height:4px; padding:9px 0; cursor:pointer; touch-action:none;
}
.s2s-slider::before{
  /* the visible thin track line, drawn separately from the padded
     hit-box above so the box itself can stay invisible */
  content:''; position:absolute; left:0; right:0; top:9px;
  height:4px; border-radius:2px; background:var(--line-2);
}
.s2s-slider-fill{
  position:absolute; left:0; top:9px; height:4px; width:0%;
  background:var(--magenta); border-radius:2px; pointer-events:none;
}
.s2s-slider-thumb{
  position:absolute; top:11px; left:0%; width:10px; height:10px;
  border-radius:50%; background:var(--magenta); pointer-events:none;
  transform:translate(-50%,-50%); transition:background .15s var(--ease);
}
.s2s-slider:hover .s2s-slider-thumb{ background:var(--cyan); }
.s2s-slider:hover .s2s-slider-fill{ background:var(--cyan); }
.s2s-slider-vol{ width:64px; flex:none; }
.s2s-slider-scrub{ width:100%; }
.itunes-player-progress{ flex:1; min-width:120px; }
.itunes-player-times{
  display:flex; justify-content:space-between; margin-top:7px;
  font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums;
}
.itunes-player-nowplaying{ flex:none; text-align:right; max-width:220px; min-width:0; }
.itunes-player-label{
  display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:3px;
}
.itunes-player-title{
  display:block; font-size:14px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:640px){
  /* Stack into two rows on narrow screens — transport + volume on top,
     the scrub bar + elapsed/duration time on their own full-width row
     underneath. Cramming all three into one row left almost no space
     for the progress bar/time, which made them unreadable. */
  .itunes-player{
    flex-wrap:wrap; gap:10px 14px; padding:12px 16px;
    top:calc(var(--ticker-h) + var(--nav-h) + var(--nav-gap));
  }
  .itunes-player-nowplaying{ display:none; }
  .s2s-slider-vol{ width:44px; }
  .itunes-player-progress{ order:3; flex:1 1 100%; min-width:0; }
}

.song-table{
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:var(--bg-elev); margin-bottom:14px;
}
.song-table.is-empty-filter{ display:none; }
.song-table-head, .song-row{
  display:grid;
  grid-template-columns:40px 1fr 64px 64px 90px 150px;
  align-items:center; gap:14px;
  padding-left:20px; padding-right:20px;
}
.song-table-head{
  padding-top:14px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-family:'Bebas Neue',sans-serif; letter-spacing:.04em; font-size:13px;
  color:var(--text-muted);
}
.song-table-head span:first-child{ visibility:hidden; }
.song-row{
  padding-top:13px; padding-bottom:13px;
  border-bottom:1px solid var(--line);
  transition:background .2s var(--ease);
  cursor:pointer;
}
.song-row:last-child{ border-bottom:0; }
.song-row:hover{ background:var(--bg-elev-2); }
.song-row.is-playing{ background:rgba(102,221,251,.06); }
.song-row.is-playing .song-row-title{ color:var(--magenta); }
.song-row-play{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:transparent; border:1px solid var(--line-2); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .2s var(--ease); padding:0;
}
.song-row-play svg{ margin-left:1px; }
.song-row-play:hover, .song-row.is-playing .song-row-play{ border-color:var(--magenta); color:var(--magenta); }
.song-row-title{
  font-size:14.5px; font-weight:500; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .2s var(--ease);
}
.song-row-meta-mobile{ display:none; font-size:12px; color:var(--text-muted); margin-top:2px; }
.song-row-bpm, .song-row-time{
  font-size:13px; color:var(--text-muted); font-variant-numeric:tabular-nums;
}
.song-row-type{
  font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--cyan);
}
.song-row-version{
  font-size:13px; color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.latest-release-badge{ vertical-align:middle; }
@media (max-width:760px){
  .song-table-head, .song-row{ grid-template-columns:34px 1fr 60px; }
  .song-table-head span:nth-child(3), .song-table-head span:nth-child(5), .song-table-head span:nth-child(6){ display:none; }
  .song-row-bpm, .song-row-type, .song-row-version{ display:none; }
  .song-row-title{ white-space:normal; }
  .song-row-meta-mobile{ display:block; }
}

.albums-section{ margin-top:32px; }
.albums-section.filter-hidden{ display:none; }

/* ---- scroll reveal ---- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }

.tag-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.tag{
  border:1px solid var(--line-2); border-radius:20px; padding:7px 16px;
  font-size:13px; color:var(--text-muted);
}

.venue-list{ columns:2; column-gap:40px; color:var(--text-muted); font-size:14.5px; line-height:2; }
@media (max-width:640px){ .venue-list{ columns:1; } }

.platform-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }
.platform-row .btn{ padding:12px 22px; font-size:14px; display:inline-flex; align-items:center; gap:9px; }
.platform-row .btn svg{ flex:none; }

.platform-row-icons{ gap:12px; }
.platform-icon-btn{
  width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-elev); border:1px solid var(--line-2);
  color:var(--text); transition:all .2s var(--ease);
}
.platform-icon-btn:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
.platform-icon-btn-sm{ width:34px; height:34px; }

.photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.photo-grid img{
  width:100%; height:100%; aspect-ratio:3/3.6; object-fit:cover; border-radius:10px;
  border:1px solid var(--line);
  transition:transform .4s var(--ease), filter .4s var(--ease), border-color .2s var(--ease);
  cursor:pointer;
}
.photo-grid img:hover{ border-color:var(--cyan); }
.photo-grid img:hover{ transform:scale(1.035); filter:brightness(1.08); }
@media (max-width:760px){ .photo-grid{ grid-template-columns:repeat(2,1fr); } }

.iframe-embed{ width:100%; border:0; border-radius:var(--radius); background:var(--bg-elev-2); }

/* ---- page hero (non-home) ---- */
.page-hero{
  position:relative; overflow:hidden;
  margin-top:calc(-1 * (var(--nav-gap) + var(--nav-h)));
  padding:calc(88px + var(--nav-gap) + var(--nav-h)) 0 60px;
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(560px 320px at 88% 0%, rgba(102,221,251,.16), transparent 62%),
    radial-gradient(420px 300px at 4% 100%, rgba(0,224,255,.10), transparent 60%);
}
.page-hero::after{ display:none; }
.page-hero-3d{
  position:absolute; right:-2%; top:50%; z-index:0; pointer-events:none;
  width:440px; height:440px; transform:translateY(-50%);
  opacity:.9;
}
@media (max-width:860px){ .page-hero-3d{ width:280px; height:280px; right:-8%; opacity:.6; } }
@media (max-width:640px){ .page-hero-3d{ display:none; } }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero .hero-kicker{
  display:inline-flex; align-items:center; gap:12px;
  margin-bottom:16px;
  animation:fadeUp .7s var(--ease) both;
}
.page-hero .hero-kicker::before{ content:''; width:26px; height:1px; background:var(--magenta); flex:none; }
.page-hero h1{
  font-size:clamp(46px,7vw,84px);
  background:linear-gradient(135deg, var(--text) 45%, var(--text-muted));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:fadeUp .7s var(--ease) .08s both;
}
.page-hero p{
  color:var(--text-muted); max-width:560px; margin-top:18px; font-size:17px;
  animation:fadeUp .7s var(--ease) .16s both;
}
.page-hero .platform-row{ animation:fadeUp .7s var(--ease) .24s both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:640px){ .page-hero::after{ display:none; } }

/* ============================================================
   HOMEPAGE — gallery teaser row (before Public sets)
   ============================================================ */
.gallery-teaser{ text-align:center; }
.gts-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.gts-tile{
  position:relative;
  display:block;
  aspect-ratio:3/3.6;
  border-radius:10px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--line);
  isolation:isolate;
}
.gts-tile::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  opacity:0;
  transition:opacity .3s var(--ease);
  z-index:1;
  pointer-events:none;
}
.gts-tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(.88) saturate(1.05);
  transform:scale(1.02);
  transition:transform .5s var(--ease), filter .3s var(--ease);
}
.gts-tile:hover{ border-color:var(--cyan); }
.gts-tile:hover::after{ opacity:1; }
.gts-tile:hover img{ transform:scale(1.08); filter:brightness(1) saturate(1.1); }
.gts-caption{ color:var(--text-muted); font-size:15px; margin:22px auto 0; max-width:520px; }
.gts-actions{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:26px; flex-wrap:wrap;
}
.btn-press span{ opacity:.85; margin-left:2px; }
@media (max-width:860px){
  .gts-row{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .gts-row{ grid-template-columns:1fr 1fr; gap:10px; }
  .gts-tile{ aspect-ratio:1/1.05; }
}

/* ============================================================
   EVENTS — flyers strip (small thumbnails, full width) and every
   other photo slider using this same markup (home gallery teaser,
   talent-show gallery). Continuous, slow, one-directional auto-scroll
   — like the ticker banner at the top of the page — instead of a
   paged snap-scroller. js/main.js ("photo/flyer sliders") duplicates
   the slide set once and drifts it with a CSS animation so the loop
   is seamless and never jumps back to the start.
   ============================================================ */
.poster-slider{ position:relative; }
.poster-viewport{ overflow:hidden; }
.poster-track{
  display:flex;
  gap:14px;
  width:max-content;
  padding-bottom:4px;
}
.poster-track.is-marquee{
  animation:poster-marquee var(--poster-duration, 42s) linear infinite;
}
.poster-track.is-marquee.is-paused{ animation-play-state:paused; }
@keyframes poster-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.poster-slide{
  flex:none;
  width:var(--slide-w, 220px);
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#000;
  aspect-ratio:3/3.6;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.poster-slide:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.poster-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.poster-slide-link{ display:block; width:100%; height:100%; cursor:pointer; }
@media (prefers-reduced-motion:reduce){
  .poster-track.is-marquee{ animation:none; }
  .poster-viewport{ overflow-x:auto; }
}

/* ---- vertical variant (home bio section) — photos stacked top to
   bottom, scrolling upward on a loop, instead of sideways. .split's
   align-items:stretch makes .poster-slider-vert match the text
   column's own height with no extra sizing needed here; the mobile
   breakpoint (.split goes to a single stacked column) gets a fixed
   height of its own since there's no text-column height to match
   anymore there. ---- */
.poster-slider-vert{ overflow:hidden; border-radius:10px; }
.poster-slider-vert .poster-viewport{ height:100%; }
.poster-slider-vert .poster-track{
  flex-direction:column;
  width:100%;
  padding-bottom:0;
}
.poster-slider-vert .poster-track.is-marquee{
  animation-name:poster-marquee-vert;
}
@keyframes poster-marquee-vert{
  from{ transform:translateY(0); }
  to{ transform:translateY(-50%); }
}
.poster-slider-vert .poster-slide{
  width:100%;
  height:var(--slide-h, 0px);
  aspect-ratio:auto;
}
@media (max-width:860px){
  .poster-slider-vert{ height:440px; }
}

/* ============================================================
   LIGHTBOX — full-size photo viewer with prev/next, used by any
   .poster-track or .photo-grid image (injected by js/main.js)
   ============================================================ */
.lightbox-overlay{
  position:fixed; inset:0; z-index:10001;
  background:rgba(6,6,10,.94); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease);
  padding:60px;
}
.lightbox-overlay.open{ opacity:1; pointer-events:auto; }
.lightbox-img{
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-close, .lightbox-arrow{
  position:fixed; display:flex; align-items:center; justify-content:center;
  background:rgba(12,12,18,.85); backdrop-filter:blur(10px);
  border:1px solid var(--line-2); color:var(--text);
  cursor:pointer; transition:all .2s var(--ease);
}
.lightbox-close{
  top:24px; right:24px; width:44px; height:44px; border-radius:50%; font-size:18px;
}
.lightbox-arrow{
  top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; font-size:26px; line-height:1;
}
.lightbox-prev{ left:24px; }
.lightbox-next{ right:24px; }
.lightbox-close:hover, .lightbox-arrow:hover{ border-color:var(--cyan); color:var(--cyan); }
@media (max-width:640px){
  .lightbox-overlay{ padding:20px; }
  .lightbox-arrow{ width:42px; height:42px; font-size:22px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
  .lightbox-close{ top:14px; right:14px; }
}

/* ---- shop (merch / fragrance / stickers / 3D character) — laid out
   like a real store front (Tiësto's store.tiesto.com is the reference):
   one horizontally-scrolled collection row per product category
   (dragged/swiped, no arrows — keeps the row head to just the title).
   Cards carry a working "Add to cart" button wired to the cart drawer
   (see CART below); price stays "Price TBA" until
   real products and pricing exist. ---- */
.shop-section{ padding-top:64px; }

/* ---- filter / sort toolbar — "Filter: Availability" and "Sort by:"
   dropdowns plus a live product count, same idea as store.tiesto.com's
   listing toolbar. Filtering/sorting act within each collection row
   (a whole row hides itself if none of its cards match the filter);
   there's no real inventory or pricing yet so "Sort by" only offers
   options that don't need it (alphabetical, in-stock-first). ---- */
.shop-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:16px; margin-bottom:44px; padding-bottom:24px; border-bottom:1px solid var(--line);
}
.shop-toolbar-right{ display:flex; align-items:center; gap:16px; }
.shop-toolbar-label{ font-size:14px; color:var(--text-muted); margin-right:8px; }
.shop-toolbar-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg-elev); border:1px solid var(--line-2); border-radius:8px;
  padding:9px 14px; font-size:14px; color:var(--text); font-family:inherit;
  transition:border-color .2s var(--ease);
}
.shop-toolbar-btn:hover, .shop-dropdown.is-open .shop-toolbar-btn{ border-color:var(--cyan); }
.shop-caret{ font-size:12px; color:var(--text-muted); }
.shop-dropdown{ position:relative; display:inline-flex; align-items:center; }
.shop-dropdown-panel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:20;
  min-width:260px;
  background:var(--bg-elev); border:1px solid var(--line-2); border-radius:10px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.6);
  padding:16px;
}
.shop-sort-panel{ padding:8px; min-width:220px; }
.shop-toolbar-right .shop-dropdown-panel{ left:auto; right:0; }
.shop-dropdown-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--text-muted);
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
.shop-dropdown-reset{ color:var(--cyan); text-decoration:underline; font-size:13px; }
.shop-dropdown-reset:hover{ color:var(--text); }
.shop-dropdown-option{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; padding:8px 2px; cursor:pointer;
}
.shop-dropdown-option input{ width:16px; height:16px; accent-color:var(--cyan); }
.shop-sort-option{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border-radius:6px; font-size:14px; color:var(--text-muted);
  font-family:inherit; background:transparent; border:none; cursor:pointer;
}
.shop-sort-option:hover{ background:var(--bg-elev-2); color:var(--text); }
.shop-sort-option.is-active{ color:var(--text); font-weight:600; }
.shop-sort-check{ width:14px; flex:none; color:var(--cyan); }
.shop-total-count{ font-size:14px; color:var(--text-muted); white-space:nowrap; }
@media (max-width:640px){
  .shop-toolbar{ flex-direction:column; align-items:flex-start; }
  .shop-toolbar-right{ width:100%; justify-content:space-between; }
}

.shop-row + .shop-row{ margin-top:56px; }
.shop-row-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:20px;
}
.shop-row-head h2{ font-size:clamp(22px,3vw,28px); }

.shop-viewport{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.shop-viewport::-webkit-scrollbar{ display:none; }
.shop-track{ display:flex; gap:18px; width:max-content; padding-bottom:2px; }
.shop-card{
  width:230px; flex:none; scroll-snap-align:start;
}
.shop-card-media{
  position:relative;
  aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  background:var(--bg-elev); border:1px solid var(--line);
  margin-bottom:14px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.shop-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-card:hover .shop-card-media{ border-color:var(--cyan); transform:translateY(-2px); }
.shop-card[data-stock="out"] .shop-card-media img{ opacity:.45; }
.shop-card[data-stock="out"] .shop-card-media::after{
  content:'Out of stock';
  position:absolute; top:10px; left:10px;
  background:rgba(12,12,18,.85); backdrop-filter:blur(6px);
  border:1px solid var(--line-2); border-radius:20px;
  padding:4px 11px; font-size:11px; font-weight:600;
  letter-spacing:.02em; color:var(--text-muted);
}
.shop-card.is-filtered-out{ display:none; }
.shop-row.is-filtered-out{ display:none; }
.shop-card h3{ font-size:15px; font-weight:600; margin-bottom:4px; }
.shop-card-price{ font-size:13.5px; color:var(--text-muted); }
.shop-card-add{
  display:block; width:100%; margin-top:12px;
  padding:9px 0; border-radius:999px; border:1px solid var(--line-2);
  background:transparent; color:var(--text); font-size:12.5px; font-weight:600;
  letter-spacing:.01em; text-align:center;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.shop-card-add:hover{ border-color:var(--cyan); color:var(--cyan); }
.shop-card-add:disabled{ opacity:.4; pointer-events:none; }
.shop-card-add.is-added{ background:var(--cyan); border-color:var(--cyan); color:#0a0a0f; }
@media (max-width:640px){
  .shop-card{ width:44vw; }
}

/* ---- product detail page — size selector ---- */
.pd-size-btn{
  min-width:44px; height:44px; padding:0 14px;
  border-radius:8px; border:1px solid var(--line-2);
  background:transparent; color:var(--text); font-size:13.5px; font-weight:600;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease), opacity .2s var(--ease);
}
.pd-size-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.pd-size-btn.is-selected{ background:var(--cyan); border-color:var(--cyan); color:#0a0a0f; }
.pd-size-btn:disabled{ opacity:.35; pointer-events:none; text-decoration:line-through; }

/* ---- product detail page — color selector ---- */
.pd-color-btn{
  width:34px; height:34px; border-radius:50%; padding:0;
  border:2px solid var(--line-2); background:var(--swatch, var(--bg-elev-2));
  position:relative; flex:none;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.pd-color-btn:hover{ transform:translateY(-2px); }
.pd-color-btn.is-selected{ border-color:var(--cyan); }
.pd-color-btn.is-selected::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--cyan);
}
.pd-color-btn[data-swatch="white"], .pd-color-btn[data-swatch="cream"]{ border-color:var(--line-2); }

/* ============================================================
   CART — lives only on the shop page (the button sits in the
   toolbar next to "Sort by", not in the site-wide nav — the cart is
   an eshop feature, not a global one). The drawer itself is built
   once by js/cart.js and appended to <body>; state is kept in
   localStorage so quantities survive a page refresh while shopping.
   ============================================================ */
.nav-cart-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; flex:none;
  background:var(--bg-elev); border:1px solid var(--line-2); color:var(--text);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.nav-cart-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.nav-cart-count{
  position:absolute; top:-3px; right:-3px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--cyan); color:#0a0a0f;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
}

.cart-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(6,6,10,.6);
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease);
}
.cart-overlay.is-open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:301;
  width:400px; max-width:90vw;
  background:var(--bg-elev); border-left:1px solid var(--line-2);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s var(--ease);
}
.cart-overlay.is-open .cart-drawer{ transform:translateX(0); }
.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--line); flex:none;
}
.cart-drawer-head h3{ font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:.02em; }
.cart-drawer-close{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:18px; line-height:1;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.cart-drawer-close:hover{ color:var(--text); background:var(--bg-elev-2); }
.cart-items{ flex:1; overflow-y:auto; padding:4px 24px; }
.cart-empty{ text-align:center; color:var(--text-muted); font-size:14.5px; padding:70px 20px; }
.cart-item{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.cart-item-media{
  width:72px; height:72px; border-radius:8px; overflow:hidden; flex:none;
  background:var(--bg-elev-2);
}
.cart-item-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h4{
  font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px;
  margin-bottom:3px; line-height:1.3;
}
.cart-item-price{ font-size:12.5px; color:var(--text-muted); }
.cart-item-qty{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.cart-qty-btn{
  width:24px; height:24px; border-radius:50%; flex:none;
  border:1px solid var(--line-2); background:transparent; color:var(--text);
  display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1;
}
.cart-qty-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.cart-item-qty span{ font-size:13.5px; min-width:14px; text-align:center; }
.cart-item-remove{
  margin-left:auto; font-size:12px; color:var(--text-muted); text-decoration:underline;
}
.cart-item-remove:hover{ color:var(--text); }
.cart-drawer-foot{ flex:none; padding:18px 24px 24px; border-top:1px solid var(--line); }
.cart-drawer-note{ font-size:12px; color:var(--text-muted); text-align:center; margin-bottom:14px; line-height:1.5; }
@media (max-width:480px){
  .cart-drawer{ width:100%; max-width:100vw; }
}

/* ---- footer CTA panel — payment methods + waitlist, grouped into one
   clearly-bordered card well below the product rows (generous margin
   above) so this reads as its own block instead of running straight
   on from the last collection row. ---- */
.shop-footer-cta{
  margin-top:80px;
  padding:48px 40px;
  border:1px solid var(--line-2); border-radius:16px;
  background:var(--bg-elev);
  text-align:center;
}
.shop-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:18px;
}
.shop-payments-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.shop-payment-badge{
  border:1px solid var(--line-2); border-radius:999px; padding:9px 18px;
  font-size:13.5px; color:var(--text); background:var(--bg-elev-2);
}

.shop-waitlist{
  margin-top:40px; padding-top:36px; border-top:1px solid var(--line);
  max-width:460px; margin-left:auto; margin-right:auto;
}
.shop-waitlist h3{ font-size:20px; margin-bottom:8px; }
.shop-waitlist p{ color:var(--text-muted); font-size:14.5px; margin-bottom:22px; }
.shop-waitlist-form{ display:flex; gap:10px; }
.shop-waitlist-form input{
  flex:1; min-width:0;
  background:var(--bg-elev-2); border:1px solid var(--line-2); border-radius:999px;
  padding:13px 20px; color:var(--text); font-size:15px; font-family:inherit;
}
.shop-waitlist-form input:focus{ outline:none; border-color:var(--cyan); }
.shop-waitlist-form .btn{ flex:none; padding:13px 24px; }
.shop-waitlist-fine{ font-size:12px; color:var(--text-muted); margin-top:16px; margin-bottom:0; }
.shop-waitlist-fine a{ color:var(--cyan); }
.shop-waitlist-fine a:hover{ text-decoration:underline; }
@media (max-width:640px){
  .shop-footer-cta{ padding:36px 22px; }
}
@media (max-width:520px){
  .shop-waitlist-form{ flex-direction:column; }
}