/* Black Mamba Entertainment — home page stylesheet (from the handoff site, unchanged) */

/* ============================================================
   BLACK MAMBA — tokens
   ============================================================ */
:root{
  --ink:        #050506;
  --ink-2:      #0a0a0d;
  --ink-3:      #101014;
  --paper:      #f7f5f0;
  --mute:       rgba(247,245,240,.58);
  --faint:      rgba(247,245,240,.34);
  --gold:       #d8b96a;
  --gold-lite:  #f3e3b0;
  --gold-deep:  #8a6b25;
  --line:       rgba(216,185,106,.22);
  --glass:      rgba(255,255,255,.055);
  --glass-edge: rgba(255,255,255,.16);

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(20px, 5vw, 72px);
  --max: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{
  outline:1px solid var(--gold);
  outline-offset:4px;
  border-radius:2px;
}

::selection{ background:rgba(216,185,106,.28); color:#fff; }

/* ---------- atmosphere layers ---------- */
/* ============================================================
   HERO VIDEO
   ============================================================
   z-index -1: above the page background, below #field. That order is the
   whole point — the gold dust and the stars keep moving over the footage
   rather than behind it, and .page (z-index 3) keeps the hero text above
   both, untouched. */
.hero-bg{
  position:absolute; top:0; left:0; right:0;
  height:100svh; z-index:-1;
  overflow:hidden; pointer-events:none;
  background:var(--ink);
}
.hero-bg video{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02);
}
/* enough veil to read white type over a busy montage, landing on the page's
   own black at the bottom so the seam never shows */
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(5,5,6,.80) 0%,
      rgba(5,5,6,.58) 34%,
      rgba(5,5,6,.72) 72%,
      rgba(5,5,6,.96) 92%,
      var(--ink) 100%),
    radial-gradient(74% 58% at 50% 42%, rgba(5,5,6,.14), rgba(5,5,6,.66));
}
@media (max-width:760px){ .hero-bg{ height:92svh; } }

#field{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(216,185,106,.10), transparent 55%),
    radial-gradient(100% 70% at 50% 110%, rgba(216,185,106,.05), transparent 60%),
    radial-gradient(140% 100% at 50% 50%, transparent 45%, rgba(0,0,0,.72) 100%);
}
.cursor-glow{
  position:fixed; top:0; left:0; z-index:2; pointer-events:none;
  width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(216,185,106,.11), rgba(216,185,106,.045) 34%, transparent 66%);
  opacity:0; transition:opacity .6s var(--ease-soft);
  will-change:transform;
}
body.pointer-fine .cursor-glow{ opacity:1; }

.page{ position:relative; z-index:3; }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:38px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.h-sec{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem, 5.2vw, 3.9rem);
  line-height:1.06;
  letter-spacing:-.015em;
  margin:.5em 0 0;
}
.h-sec em{ font-style:italic; color:var(--gold-lite); }
.lede{
  max-width:46ch;
  color:var(--mute);
  font-size:clamp(.95rem,1.6vw,1.06rem);
  margin:18px 0 0;
}
.rule{ height:1px; background:linear-gradient(90deg, var(--line), transparent); border:0; margin:0; }

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

.section{ position:relative; padding-block:clamp(88px,12vw,150px); }
.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; }

/* ============================================================
   Liquid-glass primitives
   ============================================================ */
.glass{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.02) 42%, rgba(255,255,255,.05));
  border:1px solid var(--glass-edge);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 0 22px rgba(255,255,255,.045),
    0 14px 34px rgba(0,0,0,.55);
  overflow:hidden;
}
.glass::after{ /* specular sweep */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.20) 48%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .85s var(--ease);
  pointer-events:none;
}
.glass:hover::after{ transform:translateX(120%); }

.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 26px;
  border-radius:999px;
  font-size:12.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper);
  transform:translateZ(0);
  transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease), color .38s var(--ease);
  will-change:transform;
}
.pill:hover{
  transform:translateY(-2px) scale(1.022);
  border-color:rgba(216,185,106,.55);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 0 26px rgba(216,185,106,.16),
    0 10px 28px rgba(0,0,0,.55),
    0 0 30px rgba(216,185,106,.24);
}
.pill:active{ transform:translateY(0) scale(.982); transition-duration:.12s; }

.pill-gold{
  background:linear-gradient(180deg, rgba(216,185,106,.94), rgba(160,124,44,.9));
  border:1px solid rgba(243,227,176,.6);
  color:#14100a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 10px 30px rgba(138,107,37,.35);
}
.pill-gold:hover{ color:#0d0a05; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 12px 34px rgba(216,185,106,.4); }

/* ============================================================
   Navigation
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:18px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .5s var(--ease), background .5s var(--ease);
}
.nav.is-stuck{ padding-block:11px; background:linear-gradient(180deg, rgba(5,5,6,.72), transparent); }

.brand{ display:flex; align-items:center; gap:12px; letter-spacing:.42em; }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-name{
  font-family:var(--display);
  font-size:15px; font-weight:500;
  letter-spacing:.44em; text-transform:uppercase;
  padding-left:2px;
}
.brand-sub{
  display:block;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.3em;
  color:var(--faint); text-transform:uppercase; margin-top:3px; padding-left:3px;
}

.nav-links{
  display:flex; align-items:center; gap:8px; padding:5px; border-radius:999px;
  perspective:700px;
  /* clear frosted capsule — heavy blur, minimal fill */
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014) 55%, rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 10px 26px rgba(0,0,0,.34);
  overflow:visible;              /* let item lift, tilt and gold glow escape the capsule */
}
.nav-links::after{ display:none; } /* no capsule-wide white sweep — the gold sheen belongs to each item */
.nav-link{
  position:relative;
  isolation:isolate;
  padding:10px 20px;
  border-radius:999px;
  font-size:11.5px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute);
  border:1px solid transparent;
  transform-style:preserve-3d;
  transition:
    color .42s var(--ease),
    transform .48s var(--ease),
    border-color .42s var(--ease),
    box-shadow .42s var(--ease),
    text-shadow .42s var(--ease);
  will-change:transform;
}
/* metallic-gold glass pane + specular sheen, revealed on hover */
.nav-link::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background-image:
    linear-gradient(105deg, transparent 34%, rgba(255,248,222,.40) 47%, transparent 61%),
    linear-gradient(168deg,
      rgba(246,231,183,.34) 0%,
      rgba(216,185,106,.19) 34%,
      rgba(138,107,37,.13) 62%,
      rgba(246,231,183,.28) 100%);
  background-size:230% 100%, 100% 100%;
  background-position:150% 0, 0 0;
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  opacity:0;
  transition:opacity .42s var(--ease), background-position .95s var(--ease);
  pointer-events:none;
}
.nav-link:hover,
.nav-link:focus-visible{
  color:var(--gold-lite);
  text-shadow:0 0 16px rgba(216,185,106,.55);
  border-color:rgba(216,185,106,.52);
  transform:translateY(-2px) rotateX(8deg) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,248,222,.55),
    inset 0 0 0 1px rgba(216,185,106,.16),
    inset 0 -4px 10px rgba(216,185,106,.18),
    0 8px 20px rgba(0,0,0,.55),
    0 0 30px rgba(216,185,106,.32);
}
.nav-link:hover::before,
.nav-link:focus-visible::before{ opacity:1; background-position:-50% 0, 0 0; }
.nav-link:active{
  transform:translateY(0) rotateX(0deg) scale(.972);
  transition-duration:.12s;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.45),
    0 0 18px rgba(216,185,106,.22);
}
/* current section stays gold */
.nav-link.is-active{
  color:var(--gold);
  text-shadow:0 0 14px rgba(216,185,106,.42);
  border-color:rgba(216,185,106,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 0 20px rgba(216,185,106,.14);
}
.nav-link.is-active::before{ opacity:.55; }
.nav-link.is-active:hover{ color:var(--gold-lite); }
.nav-link.is-active::after{
  content:"";
  position:absolute; left:20px; right:20px; bottom:6px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow:0 0 8px rgba(216,185,106,.6);
}
.nav-cta{ display:none; }

.burger{
  display:none;
  width:46px; height:46px; border-radius:999px;
  align-items:center; justify-content:center;
}
.burger span{
  display:block; width:17px; height:1px; background:var(--paper);
  position:relative; transition:transform .4s var(--ease), background .3s;
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:17px; height:1px; background:var(--paper);
  transition:transform .4s var(--ease), opacity .25s;
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span::after{ transform:translateY(-6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:55;
  padding:110px var(--gut) 40px;
  background:rgba(5,5,6,.86);
  backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  display:flex; flex-direction:column; gap:6px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
body.menu-open .drawer{ opacity:1; visibility:visible; transform:none; }
.drawer a{
  font-family:var(--display);
  font-size:clamp(2rem,9vw,2.9rem);
  line-height:1.5;
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:6px 2px;
  transition:color .3s, padding-left .4s var(--ease);
}
.drawer a:hover,.drawer a:focus-visible{
  color:var(--gold-lite);
  padding-left:14px;
  text-shadow:0 0 26px rgba(216,185,106,.42);
  border-bottom-color:rgba(216,185,106,.4);
}
.drawer a.is-active{ color:var(--gold); border-bottom-color:rgba(216,185,106,.34); }
.drawer a.is-active::before{
  content:""; display:inline-block;
  width:16px; height:1px; margin-right:12px; vertical-align:middle;
  background:var(--gold); box-shadow:0 0 8px rgba(216,185,106,.7);
}
.drawer .drawer-foot{
  margin-top:auto; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; color:var(--faint); text-transform:uppercase;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:140px 96px;
  overflow:hidden;
}
.beam{
  position:absolute; top:-30vh; left:50%; z-index:-1;
  width:78vw; height:120vh; margin-left:-39vw;
  background:conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(216,185,106,.085) 12deg, transparent 26deg, transparent 334deg, rgba(216,185,106,.06) 350deg, transparent 360deg);
  filter:blur(22px);
  opacity:.9;
  animation:sway 22s var(--ease-soft) infinite alternate;
}
@keyframes sway{ from{ transform:rotate(-4deg) scaleY(1);} to{ transform:rotate(4deg) scaleY(1.06);} }

.hero-inner{ width:100%; }
.hero-head{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3rem, 11.2vw, 9.2rem);
  line-height:.92;
  letter-spacing:-.03em;
  margin:26px 0 0;
}
.hero-head .line{ display:block; overflow:hidden; }
.hero-head .line > span{ display:block; transform:translateY(105%); }
.hero-head em{
  font-style:italic;
  background:linear-gradient(92deg, var(--gold-lite), var(--gold) 45%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:12px 34px;
  margin-top:34px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint);
}
.hero-meta span{ display:flex; align-items:center; gap:10px; }
.hero-meta span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.75; }
.hero-copy{ max-width:40ch; color:var(--mute); margin:26px 0 0; font-size:clamp(1rem,1.7vw,1.12rem); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }

.scroll-cue{
  position:absolute; left:var(--gut); bottom:34px;
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--faint);
}
.scroll-cue i{
  display:block; width:1px; height:44px;
  background:linear-gradient(180deg, var(--gold), transparent);
  animation:drop 2.6s var(--ease-soft) infinite;
  transform-origin:top;
}
@keyframes drop{ 0%{transform:scaleY(.2); opacity:0} 40%{opacity:1} 100%{transform:scaleY(1); opacity:0} }

/* ---------- ticker strip ---------- */
.strip{
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding-block:16px;
  overflow:hidden;
  background:rgba(255,255,255,.012);
}
.strip-track{
  display:flex; gap:56px; width:max-content;
  animation:slide 46s linear infinite;
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); white-space:nowrap;
}
.strip:hover .strip-track{ animation-play-state:paused; }
.strip-track b{ color:var(--gold); font-weight:400; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   Upcoming events — ticket stubs
   ============================================================ */
.events{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.014) 30%, transparent); }
.event-list{ margin-top:clamp(44px,6vw,68px); display:grid; gap:20px; }

.event{
  position:relative;
  display:grid;
  grid-template-columns:132px 1.05fr 1.4fr auto;
  align-items:center;
  gap:clamp(20px,3vw,44px);
  padding:22px clamp(22px,3vw,34px) 22px 22px;
  border-radius:20px;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.event::before{ /* stub perforation */
  content:"";
  position:absolute; left:172px; top:18px; bottom:18px; width:1px;
  background:repeating-linear-gradient(180deg, rgba(216,185,106,.5) 0 3px, transparent 3px 9px);
  opacity:.5;
}
.event:hover{ border-color:rgba(216,185,106,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 22px 50px rgba(0,0,0,.6), 0 0 42px rgba(216,185,106,.12); }

.event-date{
  position:relative; z-index:2;
  text-align:center;
  padding:14px 8px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(216,185,106,.13), rgba(216,185,106,.03));
  border:1px solid rgba(216,185,106,.24);
}
.event-date .d{ font-family:var(--display); font-size:2.5rem; line-height:1; display:block; }
.event-date .m{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); display:block; margin-top:6px; }
.event-date .y{ font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; color:var(--faint); display:block; margin-top:2px; }

.event-media{
  position:relative; z-index:2;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
}
.ph{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(216,185,106,.24), transparent 58%),
    linear-gradient(140deg, #16151a, #08080a 55%, #121016);
  transition:transform 1.1s var(--ease), filter .8s var(--ease);
}
.ph::after{
  content:attr(data-ph);
  position:absolute; left:12px; bottom:10px;
  font-family:var(--mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(247,245,240,.4);
}
.ph.v2{ background:radial-gradient(120% 100% at 80% 10%, rgba(216,185,106,.2), transparent 55%), linear-gradient(200deg, #191419, #07070a 60%, #14120c); }
.ph.v3{ background:radial-gradient(100% 100% at 50% 100%, rgba(216,185,106,.22), transparent 60%), linear-gradient(20deg, #0d0d12, #131017 70%); }
.ph.v4{ background:radial-gradient(90% 90% at 10% 90%, rgba(216,185,106,.18), transparent 60%), linear-gradient(160deg, #121218, #0a090c 65%, #17130d); }
.event:hover .ph{ transform:scale(1.05); }

.event-body{ position:relative; z-index:2; }
.event-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold);
}
.event-name{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.14;
  margin:10px 0 0; letter-spacing:-.01em;
}
.event-facts{
  display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute);
}
.event-facts b{ color:var(--gold-lite); font-weight:400; }
.event-actions{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.seats{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }

.events-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px; margin-top:34px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}

/* ============================================================
   About band
   ============================================================ */
.about{ border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:center; }
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.stat{ border-left:1px solid var(--line); padding-left:16px; }
.stat b{ display:block; font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:400; color:var(--gold-lite); line-height:1; }
.stat span{ display:block; margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.about-frame{ position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.09); }
.about-frame .ph{ background:radial-gradient(110% 90% at 70% 15%, rgba(216,185,106,.26), transparent 58%), linear-gradient(200deg,#1a1620,#08080b 60%,#15120b); }

/* ============================================================
   Gallery — contact sheet
   ============================================================ */
.gallery-grid{
  margin-top:clamp(44px,6vw,68px);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}
.shot{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  cursor:zoom-in;
  --rx:0deg; --ry:0deg; --px:0; --py:0; --mx:50%; --my:50%;
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition:border-color .6s var(--ease), box-shadow .6s var(--ease), transform .75s var(--ease);
}
/* while the cursor is inside, the tilt tracks it almost instantly */
.shot.tilt{ transition:border-color .6s var(--ease), box-shadow .6s var(--ease), transform .12s linear; }
.shot:hover, .shot:focus-visible{
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-7px) scale(1.014);
  border-color:rgba(232,182,47,.62);
  box-shadow:
    inset 0 0 0 1px rgba(232,182,47,.2),
    0 32px 74px rgba(0,0,0,.68),
    0 0 18px rgba(232,182,47,.26),
    0 0 68px rgba(216,185,106,.3);
}
.shot:hover .ph{ transform:scale(1.06); filter:saturate(1.1); }

/* the gold light sweep — one refined pass, then a long pause */
.shot::before{
  content:"";
  position:absolute; top:-60%; bottom:-60%; left:0; width:34%;
  z-index:3; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,251,236,0) 0%,
    rgba(255,246,214,.14) 34%,
    rgba(240,206,110,.44) 50%,
    rgba(255,246,214,.14) 66%,
    rgba(255,251,236,0) 100%);
  filter:blur(7px);
  transform:translate3d(-160%,0,0) rotate(14deg);
  opacity:0;
}
.shot:hover::before, .shot:focus-visible::before{ animation:shotSweep 3.6s var(--ease) .1s infinite; }
@keyframes shotSweep{
  0%   { transform:translate3d(-160%,0,0) rotate(14deg); opacity:0; }
  7%   { opacity:.95; }
  34%  { transform:translate3d(360%,0,0) rotate(14deg); opacity:0; }
  100% { transform:translate3d(360%,0,0) rotate(14deg); opacity:0; }
}

/* cinematic wash: a light bloom under the cursor, vignette, gold floor */
.shot::after{
  content:"";
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(260px 260px at var(--mx) var(--my), rgba(240,206,110,.2), transparent 68%),
    radial-gradient(125% 92% at 50% 44%, transparent 38%, rgba(3,3,5,.58) 100%),
    linear-gradient(180deg, rgba(4,4,6,0) 46%, rgba(6,5,4,.46) 80%, rgba(122,92,28,.4) 100%);
  opacity:0;
  transition:opacity .65s var(--ease);
}
.shot:hover::after, .shot:focus-visible::after{ opacity:1; }

.shot .cap, .shot .no{ z-index:4; }

@media (prefers-reduced-motion: reduce){
  .shot:hover::before, .shot:focus-visible::before{ animation:none; }
  .shot:hover, .shot:focus-visible{ transform:translateY(-3px); }
}
.shot-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 1.7s var(--ease), filter 1s var(--ease);
}
.shot:hover .shot-img, .shot:focus-visible .shot-img{
  transform:scale(1.085) translate3d(calc(var(--px) * -14px), calc(var(--py) * -14px), 0);
  filter:saturate(1.1) contrast(1.04);
}
.shot .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 18px 16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  background:linear-gradient(180deg, transparent, rgba(4,4,6,.9));
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.shot:hover .cap, .shot:focus-visible .cap{ opacity:1; transform:none; }
.shot .cap b{ color:var(--gold); font-weight:400; }
.shot .no{
  position:absolute; top:14px; left:16px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:rgba(247,245,240,.5);
}
.s-a{ grid-column:span 7; aspect-ratio:16/10; }
.s-b{ grid-column:span 5; aspect-ratio:4/5; }
.s-c{ grid-column:span 4; aspect-ratio:1/1; }
.s-d{ grid-column:span 4; aspect-ratio:1/1; }
.s-e{ grid-column:span 4; aspect-ratio:1/1; }
.s-f{ grid-column:span 12; aspect-ratio:21/8; }

.lightbox{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,5vw,70px);
  /* the site's own night, rather than a flat sheet of black */
  background:var(--ink);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox figure{ margin:0; width:min(1000px,100%); }
.lightbox .frame{ position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; border:1px solid rgba(216,185,106,.3); }
.lightbox .frame.is-img{ aspect-ratio:auto; display:flex; background:#08080a; }
#lbImg{ display:none; margin:auto; max-width:100%; max-height:74vh; width:auto; height:auto; }
.frame.is-img #lbImg{ display:block; }
.frame.is-img #lbPh{ display:none; }
.lightbox figcaption{
  margin-top:16px; display:flex; justify-content:space-between; gap:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
}
.lightbox .close{
  position:absolute; top:24px; right:24px;
  width:46px; height:46px; border-radius:999px; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

/* ============================================================
   Contact
   ============================================================ */
.contact-card{
  border-radius:26px;
  padding:clamp(34px,5.4vw,66px);
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,5vw,64px); align-items:center;
}
.contact-lines{ display:grid; gap:16px; margin-top:26px; }
.contact-lines a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.09);
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); transition:color .35s, border-color .35s, padding-left .4s var(--ease);
}
.contact-lines a:hover{ color:var(--gold-lite); border-color:rgba(216,185,106,.42); padding-left:8px; }
.contact-lines span{ color:var(--faint); }

/* ============================================================
   Footer
   ============================================================ */
.footer{ padding-block:clamp(64px,8vw,96px) 34px; border-top:1px solid rgba(255,255,255,.07); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,5vw,64px); }
.foot-brand .brand-name{ font-size:19px; }
.foot-note{ color:var(--faint); max-width:34ch; margin-top:18px; font-size:14px; }
.foot-col h4{
  font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin:0 0 18px;
}
.foot-col a{ display:block; color:var(--mute); font-size:14px; padding:5px 0; transition:color .3s, padding-left .35s var(--ease); }
.foot-col a:hover{ color:var(--paper); padding-left:6px; }

.socials{ display:flex; gap:10px; margin-top:26px; perspective:600px; }
.social{
  position:relative;
  isolation:isolate;
  overflow:visible;              /* let the lift and gold glow escape the circle */
  width:46px; height:46px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d;
  transition:transform .42s var(--ease), box-shadow .42s var(--ease), border-color .42s var(--ease);
}
.social::after{ display:none; }  /* no white sweep — the gold sheen belongs to the icon */
/* metallic-gold glass pane, revealed on hover */
.social::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background-image:
    linear-gradient(105deg, transparent 34%, rgba(255,248,222,.40) 47%, transparent 61%),
    linear-gradient(168deg,
      rgba(246,231,183,.34) 0%,
      rgba(216,185,106,.19) 34%,
      rgba(138,107,37,.13) 62%,
      rgba(246,231,183,.28) 100%);
  background-size:230% 100%, 100% 100%;
  background-position:150% 0, 0 0;
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  opacity:0;
  transition:opacity .42s var(--ease), background-position .95s var(--ease);
  pointer-events:none;
}
.social svg{ width:21px; height:21px; fill:var(--paper); opacity:.8; transition:fill .35s, opacity .35s, filter .42s var(--ease); }
.social:hover,
.social:focus-visible{
  transform:translateY(-3px) rotateX(8deg) scale(1.03);
  border-color:rgba(216,185,106,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,248,222,.55),
    inset 0 0 0 1px rgba(216,185,106,.16),
    inset 0 -4px 10px rgba(216,185,106,.18),
    0 8px 20px rgba(0,0,0,.55),
    0 0 30px rgba(216,185,106,.32);
}
.social:hover::before,
.social:focus-visible::before{ opacity:1; background-position:-50% 0, 0 0; }
.social:active{ transform:translateY(0) rotateX(0deg) scale(.972); transition-duration:.12s; }
.social:hover svg,
.social:focus-visible svg{ fill:var(--gold-lite); opacity:1; filter:drop-shadow(0 0 8px rgba(216,185,106,.45)); }

.foot-base{
  margin-top:clamp(48px,7vw,80px); padding-top:22px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.foot-base nav{ display:flex; flex-wrap:wrap; gap:22px; }
.foot-base a{ transition:color .3s; }
.foot-base a:hover{ color:var(--gold-lite); }

/* ============================================================
   Metallic-gold interaction — nav items, event actions, socials
   (richer pass; overrides the earlier per-element rules)
   ============================================================ */
.event-actions, .events-foot{ perspective:600px; }

.nav-link,
.event-actions .pill,
.events-foot .pill,
.social{
  position:relative;
  isolation:isolate;
  overflow:visible;
  transform-style:preserve-3d;
}
/* the capsule-wide white sweep would wash over the gold */
.event-actions .pill::after,
.events-foot .pill::after,
.social::after{ display:none; }

/* brushed-gold glass pane: bright crown, bronze belly, lit base edge */
.nav-link::before,
.event-actions .pill::before,
.events-foot .pill::before,
.social::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background-image:
    linear-gradient(102deg, transparent 30%, rgba(255,251,236,.52) 45%, rgba(255,246,214,.20) 53%, transparent 66%),
    linear-gradient(166deg,
      rgba(255,246,214,.46) 0%,
      rgba(232,182,47,.30) 30%,
      rgba(150,113,34,.17) 58%,
      rgba(216,185,106,.25) 78%,
      rgba(255,246,214,.42) 100%);
  background-size:240% 100%, 100% 100%;
  background-position:150% 0, 0 0;
  backdrop-filter:blur(12px) saturate(165%);
  -webkit-backdrop-filter:blur(12px) saturate(165%);
  opacity:0;
  transition:opacity .45s var(--ease), background-position 1s var(--ease);
  pointer-events:none;
}

.nav-link:hover, .nav-link:focus-visible,
.event-actions .pill:hover, .event-actions .pill:focus-visible,
.events-foot .pill:hover, .events-foot .pill:focus-visible,
.social:hover, .social:focus-visible{
  color:var(--gold-lite);
  text-shadow:0 0 18px rgba(232,182,47,.5);
  border-color:rgba(232,182,47,.58);
  transform:translateY(-2.5px) rotateX(8deg) scale(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.68),
    inset 0 0 0 1px rgba(232,182,47,.22),
    inset 0 -5px 12px rgba(232,182,47,.22),
    0 10px 24px rgba(0,0,0,.55),
    0 0 12px rgba(232,182,47,.26),
    0 0 38px rgba(216,185,106,.28);
}
.nav-link:hover::before, .nav-link:focus-visible::before,
.event-actions .pill:hover::before, .event-actions .pill:focus-visible::before,
.events-foot .pill:hover::before, .events-foot .pill:focus-visible::before,
.social:hover::before, .social:focus-visible::before{
  opacity:1; background-position:-55% 0, 0 0;
}
.nav-link:active,
.event-actions .pill:active,
.events-foot .pill:active,
.social:active{
  transform:translateY(0) rotateX(0deg) scale(.972);
  transition-duration:.12s;
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(232,182,47,.22),
    0 0 22px rgba(232,182,47,.24);
}

/* current section: gold at rest, brighter on hover */
.nav-link.is-active{
  color:var(--gold);
  text-shadow:0 0 16px rgba(232,182,47,.45);
  border-color:rgba(232,182,47,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.34),
    inset 0 0 0 1px rgba(232,182,47,.14),
    0 0 24px rgba(216,185,106,.18);
}
.nav-link.is-active::before{ opacity:.7; }
.nav-link.is-active::after{
  background:linear-gradient(90deg, transparent, rgba(255,246,214,.95), transparent);
  box-shadow:0 0 10px rgba(232,182,47,.75);
}

/* event date stubs — same metal, same lift */
.event-date{
  isolation:isolate;
  overflow:visible;
  transition:
    transform .45s var(--ease),
    border-color .45s var(--ease),
    box-shadow .45s var(--ease),
    background .45s var(--ease);
}
.event-date::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background-image:
    linear-gradient(102deg, transparent 30%, rgba(255,251,236,.52) 45%, rgba(255,246,214,.20) 53%, transparent 66%),
    linear-gradient(166deg,
      rgba(255,246,214,.46) 0%,
      rgba(232,182,47,.30) 30%,
      rgba(150,113,34,.17) 58%,
      rgba(216,185,106,.25) 78%,
      rgba(255,246,214,.42) 100%);
  background-size:240% 100%, 100% 100%;
  background-position:150% 0, 0 0;
  backdrop-filter:blur(12px) saturate(165%);
  -webkit-backdrop-filter:blur(12px) saturate(165%);
  opacity:0;
  transition:opacity .45s var(--ease), background-position 1s var(--ease);
  pointer-events:none;
}
.event-date:hover{
  transform:perspective(700px) translateY(-2.5px) rotateX(8deg) scale(1.035);
  border-color:rgba(232,182,47,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.68),
    inset 0 0 0 1px rgba(232,182,47,.22),
    inset 0 -5px 12px rgba(232,182,47,.22),
    0 10px 24px rgba(0,0,0,.55),
    0 0 12px rgba(232,182,47,.26),
    0 0 38px rgba(216,185,106,.28);
}
.event-date:hover::before{ opacity:1; background-position:-55% 0, 0 0; }
/* keep the date legible on top of the lit metal */
.event-date .d,
.event-date .m,
.event-date .y{ transition:color .45s var(--ease), text-shadow .45s var(--ease); }
.event-date:hover .d{ color:#fff9e8; text-shadow:0 1px 10px rgba(60,40,4,.7); }
.event-date:hover .m{ color:#fff3cf; text-shadow:0 1px 8px rgba(60,40,4,.65); }
.event-date:hover .y{ color:rgba(255,246,214,.82); text-shadow:0 1px 8px rgba(60,40,4,.6); }

/* ============================================================
   Upcoming event band + featured nights (homepage)
   ============================================================ */
.upcoming-card{
  display:grid; grid-template-columns:.4fr 1fr;
  gap:clamp(26px,4vw,58px);
  align-items:center;
  padding:clamp(18px,2vw,26px);
  border-radius:28px;
  border-color:rgba(232,182,47,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.42),
    inset 0 0 0 1px rgba(232,182,47,.12),
    0 26px 60px rgba(0,0,0,.6),
    0 0 54px rgba(216,185,106,.16);
}
/* the text sits a little further from the flyer, so the artist name has room */
.up-body{ padding-left:clamp(4px,1.6vw,30px); }

.up-flyer{
  display:block; width:100%;
  aspect-ratio:9 / 16;
  border-radius:20px; overflow:hidden;
  background:#08080a;
  border:1px solid rgba(255,255,255,.09);
}
.up-flyer img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
  font-size:0; color:transparent;
  transition:transform 1.5s var(--ease);
}
.upcoming-card:hover .up-flyer img{ transform:scale(1.05); }

.up-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 18px; border-radius:999px;
  border:1px solid rgba(232,182,47,.45);
  background:linear-gradient(180deg, rgba(232,182,47,.16), rgba(232,182,47,.04));
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold-lite);
}
.up-badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 10px var(--gold);
}
.up-artist{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.04;
  letter-spacing:.01em; text-transform:uppercase;
  margin:20px 0 0;
}
.up-title{
  margin:12px 0 0;
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.1rem,1.9vw,1.5rem);
  color:var(--gold-lite);
}
.up-facts{
  list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px;
}
.up-facts li{
  display:flex; gap:12px; align-items:flex-start;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute); line-height:1.55;
}
.up-facts li::before{
  content:""; flex:none; width:5px; height:5px; margin-top:6px;
  border-radius:50%; background:var(--gold); opacity:.85;
}
.up-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; perspective:600px; }

/* ---------- featured nights ---------- */
.featured-grid{
  margin-top:clamp(44px,6vw,68px);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,24px);
}
.feat-card{
  border-radius:22px; padding:10px;
  display:flex; flex-direction:column;
  transform-style:preserve-3d;
  transition:transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.feat-card:hover,
.feat-card:focus-within{
  transform:perspective(1100px) translateY(-8px) rotateX(5deg) scale(1.022);
  border-color:rgba(232,182,47,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.6),
    inset 0 0 0 1px rgba(232,182,47,.2),
    0 30px 64px rgba(0,0,0,.66),
    0 0 16px rgba(232,182,47,.26),
    0 0 60px rgba(216,185,106,.3);
}
.feat-flyer{
  display:block; width:100%;
  aspect-ratio:9 / 16;
  border-radius:16px; overflow:hidden;
  background:#08080a;
  position:relative;
}
.feat-flyer img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
  font-size:0; color:transparent;
  transition:transform 1.5s var(--ease), filter .8s var(--ease);
}
.feat-card:hover .feat-flyer img,
.feat-card:focus-within .feat-flyer img{
  transform:scale(1.07); filter:saturate(1.08) contrast(1.03);
}
.feat-flyer::before{
  content:"";
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,
    rgba(4,4,6,0) 0%,
    rgba(6,5,4,.34) 42%,
    rgba(122,92,28,.42) 76%,
    rgba(232,182,47,.5) 100%);
  opacity:0; transition:opacity .6s var(--ease);
  pointer-events:none;
}
.feat-card:hover .feat-flyer::before,
.feat-card:focus-within .feat-flyer::before{ opacity:1; }

.feat-body{ padding:20px 12px 10px; }
.feat-artist{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.42rem); line-height:1.15;
  letter-spacing:.06em; text-transform:uppercase;
  margin:0;
}
.feat-title{
  margin:9px 0 0;
  font-family:var(--display); font-style:italic; font-size:1.02rem;
  color:var(--gold-lite);
}
.feat-date{
  margin:14px 0 0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
}
.feat-detail{
  margin:10px 0 0; color:var(--mute);
  font-size:13px; line-height:1.6;
}

@media (max-width:1080px){
  .upcoming-card{ grid-template-columns:1fr; }
  .up-flyer{ max-width:340px; margin-inline:auto; }
  .up-body{ padding-left:0; }
  .featured-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .featured-grid{ grid-template-columns:1fr; }
  .up-actions .pill{ width:100%; }
}

/* ============================================================
   Reveals
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s);
}
.hero.is-ready .hero-head .line > span{
  transform:none;
  transition:transform 1.25s var(--ease) var(--d,0s);
}
.hero .fade{ opacity:0; transform:translateY(16px); }
.hero.is-ready .fade{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .event{ grid-template-columns:110px 1fr; grid-template-areas:"date body" "media media" "act act"; }
  .event::before{ display:none; }
  .event-date{ grid-area:date; }
  .event-body{ grid-area:body; }
  .event-media{ grid-area:media; aspect-ratio:16/9; margin-top:6px; }
  .event-actions{ grid-area:act; flex-direction:row; align-items:center; justify-content:space-between; width:100%; }
  .about-grid{ grid-template-columns:1fr; }
  .about-frame{ aspect-ratio:16/10; order:-1; }
  .contact-card{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:720px){
  .brand-sub{ display:none; }
  .hero{ min-height:92svh; }
  .hero-actions .pill{ width:100%; }
  .event{ grid-template-columns:1fr; grid-template-areas:"media" "date" "body" "act"; padding:16px; gap:16px; }
  .event-date{ display:flex; align-items:baseline; gap:12px; justify-content:flex-start; padding:10px 16px; }
  .event-date .d{ font-size:1.9rem; } .event-date .m,.event-date .y{ margin-top:0; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .s-a,.s-f{ grid-column:span 2; aspect-ratio:16/10; }
  .s-b,.s-c,.s-d,.s-e{ grid-column:span 1; aspect-ratio:1/1; }
  .shot .cap{ opacity:1; transform:none; font-size:9px; padding:26px 12px 12px; }
  .foot-top{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:1fr; gap:14px; }
  .scroll-cue{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-head .line > span{ transform:none; }
  .hero .fade{ opacity:1; transform:none; }
  .cursor-glow{ display:none; }
}

/* the full lockup, in place of the diamond and the typeset name */
.brand-lockup{ display:block; height:54px; width:auto; }
.foot-lockup{ display:block; height:78px; width:auto; margin-bottom:20px; }
@media (max-width:720px){ .brand-lockup{ height:42px; } .foot-lockup{ height:60px; } }

.drawer-lockup{ height:66px; width:auto; display:block; margin:0 auto 30px; }

/* ============================================================
   CART & MY TICKETS
   ============================================================
   A prototype only: the count and the purchased tickets live in this
   browser, under bm-cart-v1 and bm-tickets-v1. No money, no server. */
.hdr-tools{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  position:relative; display:grid; place-items:center;
  width:44px; height:44px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--paper); text-decoration:none;
  transition:border-color .4s var(--ease), background .4s var(--ease),
             color .4s var(--ease), transform .4s var(--ease);
}
.icon-btn svg{ width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* the hover: a lift, a warm gold light, and the basket rocking once as though
   it had been nudged — enough to notice, not enough to be busy */
.icon-btn:hover, .icon-btn:focus-visible{
  color:#0a0a0d;
  border-color:rgba(232,182,47,.9);
  background:linear-gradient(150deg,#f6e2a8 0%,#e8b62f 46%,#c1932c 100%);
  transform:translateY(-2px) scale(1.09);
  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    0 0 26px rgba(216,185,106,.55),
    0 0 60px rgba(216,185,106,.28);
}
.icon-btn svg{ transition:transform .5s cubic-bezier(.34,1.4,.5,1); }
#cartBtn:hover svg{ animation:cartNudge .62s cubic-bezier(.34,1.3,.5,1); }
@keyframes cartNudge{
  0%   { transform:rotate(0deg) translateY(0); }
  35%  { transform:rotate(-7deg) translateY(-1.5px); }
  65%  { transform:rotate(4deg)  translateY(0); }
  100% { transform:rotate(0deg)  translateY(0); }
}
#ticketsBtn:hover svg{ transform:rotate(-6deg) scale(1.06); }

/* the badge lifts clear of the gold rather than disappearing into it */
.icon-btn:hover .count{
  background:#0a0a0d; color:var(--gold-lite);
  box-shadow:0 0 0 1px rgba(232,182,47,.6), 0 0 16px rgba(216,185,106,.5);
}

/* a slow gold sheen that crosses the button once on hover */
.icon-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size:260% 100%; background-position:130% 0;
  opacity:0; pointer-events:none;
}
.icon-btn:hover::after{ opacity:1; transition:none; animation:iconSheen .85s ease-out; }
@keyframes iconSheen{
  from{ background-position:130% 0; opacity:.9; }
  to  { background-position:-40% 0; opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .icon-btn{ transition:background .3s, color .3s, border-color .3s; }
  .icon-btn:hover{ transform:none; }
  #cartBtn:hover svg, #ticketsBtn:hover svg{ animation:none; transform:none; }
  .icon-btn:hover::after{ animation:none; opacity:0; }
}
.icon-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.icon-btn .count{
  position:absolute; top:-4px; right:-4px; min-width:19px; height:19px;
  padding:0 5px; border-radius:999px;
  display:none; place-items:center;
  background:linear-gradient(150deg,#f6e2a8 0%,#e8b62f 46%,#c1932c 100%);
  color:#0a0a0d; font-family:var(--mono); font-size:10px; font-weight:600;
  line-height:1; box-shadow:0 0 14px rgba(216,185,106,.5);
}
.icon-btn .count.on{ display:grid; }
@media (max-width:720px){ .icon-btn{ width:40px; height:40px; } }

/* ============================================================
   THE VIEWER'S SKY
   ============================================================
   The page already runs one gold field, on #field. The viewer copies that
   canvas frame by frame rather than starting a second one that would drift
   out of step — the same dust, the same sparkles, above the backdrop that
   hides the page. The lightbox itself is unchanged otherwise. */
.lb-field{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none; opacity:.85;
}
.lb-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(216,185,106,.16), transparent 55%),
    radial-gradient(95% 70% at 88% 100%, rgba(216,185,106,.11), transparent 60%),
    radial-gradient(80% 60% at 50% 45%, transparent 30%, rgba(3,3,5,.72) 100%);
}
.lightbox figure{ position:relative; z-index:2; }
.lightbox .close{ z-index:3; }

/* ============================================================
   EVENT DETAILS
   ============================================================
   A Signature Night opens here rather than sending anyone off the page. The
   backdrop is the site's own field, copied while the panel is open. */
.feat-flyer{ border:0; padding:0; background:none; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.feat-open{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:14px 16px; pointer-events:none;
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.feat-open span{
  font-family:var(--mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:#0a0a0d;
}
.feat-card:hover .feat-open,
.feat-card:focus-within .feat-open{ opacity:1; transform:none; }
.feat-flyer:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.ed{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vw,44px);
  background:var(--ink);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.ed.is-open{ opacity:1; visibility:visible; }
.ed[hidden]{ display:none !important; }
.ed-field{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.85; }
.ed-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(216,185,106,.16), transparent 55%),
    radial-gradient(95% 70% at 88% 100%, rgba(216,185,106,.11), transparent 60%),
    radial-gradient(80% 60% at 50% 45%, transparent 30%, rgba(3,3,5,.7) 100%);
}
.ed-panel{
  position:relative; z-index:2;
  width:min(1100px, 100%); max-height:92vh; overflow:auto;
  border-radius:26px; padding:clamp(18px,2.2vw,30px);
  border-color:rgba(232,182,47,.3);
  box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 60px rgba(216,185,106,.14);
}
.ed-close{
  position:absolute; top:18px; right:18px; z-index:4;
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:11px 18px; border-radius:999px;
  border:1px solid rgba(232,182,47,.5); background:rgba(10,10,13,.72);
  color:var(--gold-lite);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.ed-close svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.ed-close:hover{ background:var(--gold-hot); border-color:var(--gold-hot); color:#0a0a0d; }
.ed-close:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.ed-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(20px,3vw,42px); align-items:center; }
.ed-art{ border-radius:18px; overflow:hidden; background:#08080a; border:1px solid var(--line); }
.ed-art img{ width:100%; height:auto; display:block; }
.ed-artist{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.9rem,4vw,3rem); line-height:1.04; margin:14px 0 0;
}
.ed-title{ margin:10px 0 0; font-family:var(--display); font-style:italic;
  font-size:clamp(1rem,1.7vw,1.35rem); color:var(--gold-lite); }
.ed-facts{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.ed-facts li{
  display:flex; gap:12px; align-items:flex-start;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute);
}
.ed-facts li::before{
  content:""; flex:none; width:5px; height:5px; margin-top:6px;
  border-radius:50%; background:var(--gold); opacity:.85;
}
.ed-blurb{ margin-top:20px; color:var(--paper); opacity:.86; font-size:15px; line-height:1.75; }
.ed-shots{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.ed-shots img{
  width:112px; height:112px; object-fit:cover; display:block;
  border-radius:12px; border:1px solid var(--line);
}
@media (max-width:860px){
  .ed-grid{ grid-template-columns:1fr; }
  .ed-art{ max-width:420px; margin-inline:auto; }
  .ed-close{ top:12px; right:12px; }
}

/* ============================================================
   CLICKABLE
   ============================================================
   Anything that goes somewhere should look as though it does: the cursor
   changes, and it answers to the keyboard as well as the mouse. */
.up-flyer, .feat-flyer, .feat-card, .shot, .pill, .nav-link, .icon-btn{ cursor:pointer; }
.up-flyer, .feat-flyer, .shot{ -webkit-tap-highlight-color:rgba(232,182,47,.2); }

/* a gold ring on keyboard focus, so tabbing through is followable */
.up-flyer:focus-visible, .pill:focus-visible, .shot:focus-visible,
.nav-link:focus-visible, .social:focus-visible{
  outline:2px solid var(--gold); outline-offset:4px; border-radius:12px;
}

/* the upcoming flyer says where it goes, as the night cards do */
.up-flyer{ position:relative; display:block; }
.up-flyer::after{
  content:"Choose your seats";
  position:absolute; left:14px; bottom:14px; z-index:3;
  padding:9px 15px; border-radius:999px;
  background:rgba(10,10,13,.78); border:1px solid rgba(232,182,47,.5);
  color:var(--gold-lite);
  font-family:var(--mono); font-size:8.5px; letter-spacing:.22em; text-transform:uppercase;
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.up-flyer:hover::after, .up-flyer:focus-visible::after{ opacity:1; transform:none; }

/* ============================================================
   MY TICKETS
   ============================================================
   The purchased tickets, read from this browser. It opens here rather than
   sending anyone to another page, so it works wherever the header does. */
.tkv{
  position:fixed; inset:0; z-index:95;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vw,44px);
  background:var(--ink);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.tkv.is-open{ opacity:1; visibility:visible; }
.tkv[hidden]{ display:none !important; }
.tkv-field{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.85; }
.tkv-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(216,185,106,.16), transparent 55%),
    radial-gradient(95% 70% at 88% 100%, rgba(216,185,106,.11), transparent 60%),
    radial-gradient(80% 60% at 50% 45%, transparent 30%, rgba(3,3,5,.7) 100%);
}
.tkv-panel{
  position:relative; z-index:2;
  width:min(820px, 100%); max-height:90vh; overflow:auto;
  border-radius:26px; padding:clamp(20px,2.4vw,34px);
  border-color:rgba(232,182,47,.3);
  box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 60px rgba(216,185,106,.14);
}
.tkv-close{
  position:absolute; top:18px; right:18px; z-index:4;
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:11px 18px; border-radius:999px;
  border:1px solid rgba(232,182,47,.5); background:rgba(10,10,13,.72);
  color:var(--gold-lite);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.tkv-close svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.tkv-close:hover{ background:var(--gold-hot); border-color:var(--gold-hot); color:#0a0a0d; }
.tkv-close:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.tkv-head{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.05; margin:10px 0 22px;
}
.tkv-head em{ font-style:italic; text-transform:none; color:var(--gold-lite); }

.tkt{
  border:1px solid var(--line); border-radius:16px;
  padding:20px 22px; margin-bottom:14px;
  background:rgba(255,255,255,.03);
}
.tkt h3{ font-family:var(--display); font-weight:400; font-size:20px; margin:0; }
.tkt .when{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin:6px 0 14px;
}
.tkt-line{
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-top:1px solid rgba(255,255,255,.07);
  font-size:14px;
}
.tkt-line b{ font-weight:500; }
.tkt-line small{ display:block; color:var(--mute); font-size:11.5px; }
.tkt-foot{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(232,182,47,.28);
}
.tkt-ref{ font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute); }
.tkt-total{ font-family:var(--display); font-size:20px; color:var(--gold-lite); }
.tkt-print{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  margin-top:14px; padding:11px 20px; border-radius:999px;
  border:1px solid rgba(232,182,47,.5); background:rgba(232,182,47,.1);
  color:var(--gold-lite);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.tkt-print:hover{ background:var(--gold-hot); color:#0a0a0d; }
.tkv-empty{ text-align:center; padding:36px 20px; }
.tkv-empty p{ color:var(--mute); margin:0 0 22px; }


/* ---------------------------------------------------------- */

body{font:14px/1.6 system-ui,sans-serif;color:#111;margin:14mm}' +
      'section{page-break-inside:avoid;border:1px solid #ccc;border-radius:8px;padding:16px;margin-bottom:14px}' +
      'h2{margin:0 0 4px;font-size:19px}table{width:100%;border-collapse:collapse;margin-top:10px}' +
      'td{padding:6px 0;border-top:1px solid #eee}.ref{margin:12px 0 0;font-size:12px;color:#555}' +
      '