:root{
  --void-solid:#070504;
  --ember:#c1290a;
  --ardour:#ff7c05;
  --ash:#f2ece3;
  --grey:#2a2320;
  --grey-line: rgba(242,236,227,0.14);
  --haven: #6ee7d8;
}
html.scroll-locked, html.scroll-locked body{
  overflow:hidden;
  height:100%;
  position:fixed; /* overflow:hidden alone is known to not fully block
                      touch-scroll/rubber-banding on iOS Safari; fixed does */
  width:100%;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--void-solid);
  color:var(--ash);
  font-family:'Space Grotesk', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* the fire-character photo as the persistent background for the whole About
   page. Implemented as its own fixed, viewport-sized layer (not a plain CSS
   background on body) — background-attachment:fixed on a very tall page
   scales `cover` against the full document height instead of the viewport,
   which badly distorts/mispositions it, especially on mobile. This sidesteps
   that entirely. */
.about-bg-fixed{
  position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(7,5,4,0.2) 0%, rgba(7,5,4,0.45) 30%, rgba(7,5,4,0.85) 60%, rgba(7,5,4,0.97) 100%),
    url('ardour-cover.jpg') 78% 72%/cover no-repeat;
  background-color:#070504;
}
::selection{ background:var(--ardour); color:#0a0604; }
a{color:inherit;text-decoration:none;}
img{max-width:100%; display:block;}

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--ardour);
  opacity:0.9;
}
h1,h2,h3{
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  line-height:1;
}

.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:0.035;
  mix-blend-mode: overlay;
}

/* ============ NAV ============ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:18px clamp(20px,5vw,56px);
  background:linear-gradient(to bottom, rgba(7,5,4,0.92), rgba(7,5,4,0.55) 70%, rgba(7,5,4,0));
  backdrop-filter: blur(6px);
  opacity:1;
  transform:translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
/* Pages with a hero video start with the nav fully hidden; JS reveals it
   once the video reaches the loop point (see script.js) */
nav.pre-reveal{
  opacity:0;
  transform:translateY(-100%);
  pointer-events:none;
}
nav.pre-reveal.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
body.has-hero{ padding-top:0; }
.nav-left{ justify-self:start; display:flex; align-items:center; }
.nav-logo-center{ justify-self:center; height:22px; }
.nav-logo-center img{ height:100%; display:block; }
.nav-right{ justify-self:end; }
nav a.nav-link{
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase;
  color: rgba(242,236,227,0.75);
  white-space:nowrap;
}
nav a.nav-link:hover{ color:var(--ardour); }
.btn-ticket{
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase;
  padding:11px 18px;
  border:1px solid var(--ardour);
  color:var(--ardour);
  white-space:nowrap;
  transition: background 0.2s, color 0.2s;
  display:inline-block;
}
.btn-ticket:hover{ background:var(--ardour); color:#0a0604; }

/* Hamburger (mobile only — replaces the text nav-link) */
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:30px; height:30px;
  background:none; border:none; cursor:pointer;
  padding:0;
}
.nav-burger span{
  display:block; width:22px; height:2px;
  background:var(--ash);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:640px){
  .nav-left .nav-link{ display:none; }
  .nav-left .nav-burger{ display:flex; }
}

/* Mobile drawer */
.nav-drawer{
  position:fixed; inset:0; z-index:59;
  background:rgba(4,3,2,0.98);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity 0.35s ease;
}
.nav-drawer.open{ opacity:1; pointer-events:auto; }
.nav-drawer-inner{ display:flex; flex-direction:column; gap:28px; text-align:center; }
.nav-drawer-inner a{
  font-family:'Rajdhani', sans-serif;
  font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:clamp(28px,8vw,40px);
  color:var(--ash);
}
.nav-drawer-inner a:hover{ color:var(--ardour); }
.nav-drawer-close{
  position:absolute; top:22px; right:clamp(20px,5vw,56px);
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.2em;
  color:var(--ash); background:none; border:1px solid var(--grey-line);
  padding:9px 16px; cursor:pointer; text-transform:uppercase;
}
.nav-drawer-close:hover{ border-color:var(--ardour); color:var(--ardour); }

section{ position:relative; padding:clamp(70px,12vw,140px) clamp(20px,6vw,80px); }

.btn-primary{
  font-family:'Space Mono', monospace;
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  padding:16px 34px;
  background:var(--ardour); color:#0a0604;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display:inline-block;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,124,5,0.25); }
.btn-secondary{
  font-family:'Space Mono', monospace;
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  padding:16px 34px;
  border:1px solid var(--grey-line); color:var(--ash);
  transition: border-color 0.2s ease, color 0.2s ease;
  display:inline-block;
}
.btn-secondary:hover{ border-color:var(--ardour); color:var(--ardour); }

/* ============ HOME LOGO BAR ============ */
.home-logo-bar{
  position:fixed; top:0; left:0; right:0; z-index:56;
  display:flex; align-items:center; justify-content:center;
  padding:16px clamp(20px,5vw,56px);
  background:linear-gradient(to bottom, rgba(7,5,4,0.92), rgba(7,5,4,0));
  opacity:0; transform:translateY(-100%);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events:none;
}
.home-logo-bar.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.home-logo-bar img{ height:20px; display:block; }
.hero{
  height:100vh;
  height:100svh; /* the real visible viewport — accounts for iOS toolbars,
                    call banners, Dynamic Island states, etc. that 100vh
                    ignores, which was the actual cause of the video peeking
                    out beneath the cover image on some phones */
  height:100dvh;
  position:relative;
  background-color:#070504;
  overflow:hidden;
  cursor:pointer;
}
.hero.revealed{ cursor:default; }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(7,5,4,0.15) 0%, rgba(7,5,4,0.1) 45%, rgba(7,5,4,0.85) 100%);
}
.hero-content{
  position:absolute; left:50%; bottom:clamp(48px,9vh,96px);
  transform:translateX(-50%);
  z-index:2; width:100%;
  text-align:center;
  padding:0 20px;
}

/* Enter prompt — visible only during the intro, gives people an obvious
   thing to click that also unlocks audio (browsers block sound until a
   real click/tap happens; without this it's not obvious there's music) */
/* ============ COVER SCREEN — the fire-character still image shown before
   the video starts. "Enter Our Safe Haven" both dismisses it and is the
   click that unlocks audio (browsers require a real gesture for that). ==== */
.cover-screen{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:38vh;
  overflow:hidden;
  transition: opacity 0.8s ease, transform 0.9s ease;
}
.cover-screen.hidden{
  opacity:0;
  transform:scale(1.06);
  pointer-events:none;
}
.cover-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 80%;
}
.cover-screen::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,5,4,0.25) 0%, rgba(7,5,4,0.15) 45%, rgba(7,5,4,0.8) 100%);
}

.enter-prompt{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:14px;
  padding:16px 30px;
  background:rgba(7,5,4,0.5);
  backdrop-filter:blur(6px);
  border:2px solid var(--ardour);
  color:var(--ash);
  font-family:'Space Mono', monospace;
  font-size:clamp(13px, 2.4vw, 15px); letter-spacing:0.28em; text-transform:uppercase;
  cursor:pointer;
  transition: transform 0.2s ease;
  animation: enterBlink 1.8s steps(1,end) infinite;
}
.enter-prompt:hover{ transform:scale(1.04); }
.enter-prompt-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--ardour);
  box-shadow:0 0 10px 3px rgba(255,124,5,0.8);
  animation: dotEmber 1.8s steps(1,end) infinite;
}
/* cycles the box between orange / black / white so it visibly reads as
   "tap me" rather than just sitting there */
@keyframes enterBlink{
  0%,  32%{ border-color:var(--ardour); box-shadow:0 0 22px 2px rgba(255,124,5,0.25); }
  33%, 65%{ border-color:#0a0604; box-shadow:none; }
  66%, 100%{ border-color:var(--ash); box-shadow:0 0 16px 1px rgba(242,236,227,0.2); }
}
@keyframes dotEmber{
  0%,  32%{ background:var(--ardour); box-shadow:0 0 10px 3px rgba(255,124,5,0.8); }
  33%, 65%{ background:#0a0604; box-shadow:none; }
  66%, 100%{ background:var(--ash); box-shadow:0 0 8px 2px rgba(242,236,227,0.6); }
}
@keyframes dotEmber{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.6; transform:scale(0.85); }
}

/* Skip button — visible only while the intro video is actively playing */
.skip-prompt{
  position:absolute; left:50%; bottom:clamp(28px,6vh,56px);
  transform:translate(-50%, 40px);
  z-index:4;
  background:none; border:none; padding:6px;
  color:rgba(242,236,227,0.75);
  font-family:'Space Mono', monospace;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.45s cubic-bezier(.2,.8,.2,1), transform 0.45s cubic-bezier(.2,.8,.2,1), color 0.2s ease;
}
.skip-prompt.show{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.skip-prompt:hover{ color:var(--ardour); }

.hero-content > *{
  opacity:0; transform:translateY(14px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.hero.revealed .hero-content > *{ opacity:1; transform:translateY(0); }
.hero.revealed .hero-content > *:nth-child(1){ transition-delay:0s; }
.hero.revealed .hero-content > *:nth-child(2){ transition-delay:0.35s; }
.hero.revealed .hero-content > *:nth-child(3){ transition-delay:0.6s; }

.hero h1{
  font-size:clamp(34px, 6vw, 68px);
  color:var(--ash);
  letter-spacing:0.01em;
}
.hero h1 span{ color:var(--ardour); }

.hero-subtitle{
  margin-top:14px;
  font-family:'Rajdhani', sans-serif;
  font-weight:600; text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:clamp(13px, 2vw, 18px);
  color:rgba(242,236,227,0.68);
}

.scroll-cue{
  position:fixed; left:50%; z-index:3;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 24px);
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center; gap:10px;
  white-space:nowrap;
  font-family:'Space Mono', monospace; font-size:clamp(9px, 2.6vw, 11px);
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(242,236,227,0.75);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  opacity:0;
  pointer-events:none;
  transition: opacity 0.6s ease;
}
.hero.revealed .scroll-cue{ opacity:1; pointer-events:auto; transition-delay:0.7s; }
.scroll-cue.faded{ opacity:0 !important; pointer-events:none; }
.scroll-cue:hover{ color:var(--ardour); }
.scroll-cue .arrow{ animation: bob 1.6s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* ============ TOP BACK BAR (About page — back arrow + centered logo) ============ */
.page-top{
  position:fixed; top:0; left:0; right:0; z-index:56;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:18px clamp(20px,5vw,56px);
  background:linear-gradient(to bottom, rgba(7,5,4,0.92), rgba(7,5,4,0));
}
.page-top .back-link{
  justify-self:start;
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color: rgba(242,236,227,0.8);
  display:inline-flex; align-items:center; gap:8px;
}
.page-top .back-link:hover{ color:var(--ardour); }
.page-top .top-logo{ justify-self:center; height:20px; }
.page-top .top-logo img{ height:100%; display:block; }

/* ============ FLOATING TICKET PROMPT — full-width bottom bar, slides up while reading ============ */
.ticket-prompt{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:#0a0705;
  border-top:1px solid var(--grey-line);
  transform:translateY(140%);
  transition: transform 0.4s ease;
}
.ticket-prompt.show{ transform:translateY(0); }
.ticket-prompt-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:16px clamp(20px,5vw,56px);
}
.tp-text{
  font-family:'Space Mono', monospace;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(242,236,227,0.75);
}
.tp-actions{ display:flex; align-items:center; gap:18px; }
.tp-btn{
  font-family:'Space Mono', monospace;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  padding:11px 20px;
  background:var(--ardour); color:#0a0604;
  display:inline-block;
  white-space:nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tp-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(255,124,5,0.25); }
.tp-close{
  background:none; border:none; cursor:pointer; padding:4px;
  color:rgba(242,236,227,0.5); font-size:16px; line-height:1;
}
.tp-close:hover{ color:var(--ardour); }

/* ============ ABOUT PROMPT (homepage's only link to the About page) ============ */
.about-prompt{
  text-align:center;
  border-bottom:1px solid var(--grey-line);
  background:
    linear-gradient(180deg, rgba(7,5,4,0.75) 0%, rgba(7,5,4,0.9) 60%, rgba(7,5,4,0.98) 100%),
    url('nebula-bg.jpg') center 30%/cover no-repeat;
}
.about-prompt .eyebrow{ display:block; margin-bottom:18px; }
.about-prompt h2{ font-size:clamp(32px,5vw,56px); }
.about-prompt p{
  margin:20px auto 0;
  max-width:460px;
  font-size:clamp(15px,1.6vw,17px);
  color:rgba(242,236,227,0.7);
  line-height:1.6;
}
.about-prompt .btn-secondary{ margin-top:32px; }

/* ============ HAVEN / closing statement ============ */
.haven{
  background:
    linear-gradient(180deg, rgba(9,12,20,0.55) 0%, rgba(9,12,20,0.88) 60%, #070504 100%),
    url('nebula-bg.jpg') center/cover no-repeat, #0b0d14;
  text-align:left;
}
.haven-inner{ max-width:760px; }
.haven .eyebrow{ color:var(--haven); }
.haven p{
  font-size:clamp(20px,2.6vw,32px);
  line-height:1.45;
  color:rgba(242,236,227,0.88);
  font-family:'Space Grotesk', sans-serif;
  font-weight:500;
}
.haven p.strong{
  margin-top:20px;
  color:var(--ardour);
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(22px,3vw,36px);
}

/* ============ PAGE HEADER (about/tickets) ============ */
.page-header{
  padding-top:clamp(96px,14vw,150px);
  padding-bottom:60px;
}
/* the fire-character image sitting as a plain, static background — no zoom,
   no scale, no transition, just the image with a gradient so the heading
   stays readable and it settles cleanly into the page's black below it */
/* the About page's hero copy sits directly over the fixed page background
   (set on body.about-page below) — just needs room to breathe, no
   background of its own anymore */
.about-hero-bg{
  padding-bottom:64px;
}
.page-header h1{
  font-size:clamp(40px,7vw,90px);
  margin-top:16px;
}
.page-header p{
  margin-top:20px;
  max-width:600px;
  font-size:clamp(15px,1.6vw,18px);
  color:rgba(242,236,227,0.72);
  line-height:1.65;
}
.page-header .dot-sep{ color:var(--ardour); margin:0 6px; }
.page-header-centered{ text-align:center; }
.page-header-centered p{ margin-left:auto; margin-right:auto; }

/* the combined "September 4th · Get In." heading — stays on one line,
   with the date picked out in the brand orange */
.page-header h1.ticket-heading{
  font-size:clamp(26px, 5.4vw, 90px);
  white-space:nowrap;
}
.ticket-heading .tk-date{ color:var(--ardour); }
@media (max-width:480px){
  .page-header h1.ticket-heading{ font-size:clamp(20px, 6.2vw, 40px); }
}

/* ============ DEFINITION ============ */
.define{
  border-top:1px solid var(--grey-line);
  border-bottom:1px solid var(--grey-line);
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap:48px;
}
.define .eyebrow{ margin-bottom:18px; }
.define h2{ font-size:clamp(32px,4vw,52px); }
.define .term{
  font-family:'Space Mono', monospace;
  color:rgba(242,236,227,0.55);
  font-size:14px;
  margin-top:10px;
}
.define .term b{ color:var(--ash); font-weight:700; }
.define-body p{
  font-size:clamp(16px,1.8vw,20px);
  line-height:1.75;
  color:rgba(242,236,227,0.82);
  max-width:640px;
}
.define-body p + p{ margin-top:18px; }
.define-body .haven-line{
  margin-top:28px;
  color:var(--ardour);
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  font-size:clamp(18px,2vw,24px);
}
@media (max-width:820px){ .define{ grid-template-columns:1fr; } }

/* ============ EDITIONS ============ */
.editions-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:56px; }
.editions-head h2{ font-size:clamp(32px,4vw,52px); }
.ed-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--grey-line); border:1px solid var(--grey-line); }
.ed-card{
  background:#0a0705;
  padding:36px 28px;
  min-height:320px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  border:none;
  text-align:left;
  color:inherit;
  font-family:inherit;
}
.ed-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 0%, rgba(255,124,5,0.10), transparent 60%);
  opacity:0; transition:opacity 0.35s ease;
}
.ed-card:hover::before{ opacity:1; }
.ed-num{ font-family:'Space Mono', monospace; font-size:13px; color:var(--ardour); letter-spacing:0.2em; }
.ed-card h3{ font-size:clamp(26px,3vw,34px); margin-top:20px; color:var(--ash); }
.ed-card-actions{ position:relative; z-index:2; display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px; }
.ed-card-actions .ed-status{ margin-top:0; }
.ed-video-link{
  position:relative; z-index:2;
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:rgba(242,236,227,0.6);
}
.ed-video-link:hover{ color:var(--ardour); }
.ed-card p{ margin-top:14px; font-size:14px; line-height:1.6; color:rgba(242,236,227,0.6); max-width:420px; }
.ed-status{
  margin-top:24px; align-self:flex-start;
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.18em;
  padding:7px 14px; border:1px solid var(--grey-line); color:rgba(242,236,227,0.55);
  text-transform:uppercase;
}
.ed-card.disabled{ cursor:default; opacity:0.6; }
.ed-card.disabled:hover::before{ opacity:0; }
@media (max-width:820px){ .ed-grid{ grid-template-columns:1fr; } }

/* ============ LIGHTBOX SLIDESHOW ============ */
.lightbox{
  position:fixed; inset:0; z-index:80;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,124,5,0.10), transparent 55%),
    rgba(4,3,2,0.97);
  display:flex;
  align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.lightbox.open{
  opacity:1; visibility:visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}
.lightbox-frame{
  position:relative;
  max-width:min(90vw, 520px);
  width:100%;
  transform:scale(0.88);
  opacity:0;
  transition: transform 0.55s cubic-bezier(.16,.9,.25,1), opacity 0.5s ease;
}
.lightbox.open .lightbox-frame{
  transform:scale(1);
  opacity:1;
  transition-delay: 0.08s;
}
.lightbox-frame img{
  width:100%;
  max-height:80vh;
  object-fit:contain;
  border:1px solid var(--grey-line);
  background:#000;
}
.lightbox-close{
  position:absolute; top:-52px; right:0;
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.2em;
  color:var(--ash); background:none; border:1px solid var(--grey-line);
  padding:9px 16px; cursor:pointer; text-transform:uppercase;
}
.lightbox-close:hover{ border-color:var(--ardour); color:var(--ardour); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  border:1px solid var(--grey-line);
  background:rgba(7,5,4,0.6);
  color:var(--ash);
  font-family:'Space Mono', monospace; font-size:16px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ border-color:var(--ardour); color:var(--ardour); }
.lightbox-prev{ left:-56px; }
.lightbox-next{ right:-56px; }
@media (max-width:700px){
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}
.lightbox-count{
  position:absolute; bottom:-64px; left:50%; transform:translateX(-50%);
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.18em;
  color:rgba(242,236,227,0.5);
}
.lightbox-dots{
  position:absolute; bottom:-38px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  max-width:80vw;
}
.lightbox-dots .dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(242,236,227,0.3);
  border:none; padding:0; cursor:pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-dots .dot.active{
  background:var(--ardour);
  transform:scale(1.3);
}
.lightbox-flash{
  position:fixed; inset:0; z-index:81;
  background:#000;
  opacity:0; pointer-events:none;
}
.lightbox-flash.active{
  animation: portalFlash 0.5s ease forwards;
}
@keyframes portalFlash{
  0%{ opacity:0; }
  35%{ opacity:1; }
  100%{ opacity:0; }
}
.lightbox-dots .dot:hover{ background:rgba(255,124,5,0.7); }

/* ============ TICKETS PAGE ============ */
.ticket-tiers{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1px; background:var(--grey-line); border:1px solid var(--grey-line); }
.ticket-tiers-tight{ margin-top:44px; text-align:left; }
.tier-card{
  background:#0a0705; padding:32px 26px;
  display:flex; flex-direction:column; gap:14px;
  align-items:flex-start; text-align:left;
  width:100%;
  border:none; font-family:inherit; color:inherit;
  cursor:pointer;
  transition: background 0.2s ease;
}
button.tier-card:hover{ background:#120c08; }
.tier-card .tier-name{ font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:22px; }
.tier-card .tier-price{ font-family:'Space Mono', monospace; color:var(--ardour); font-size:20px; }
.tier-card .tier-desc{ font-size:13px; color:rgba(242,236,227,0.6); line-height:1.6; }
.tier-card.sold-out{ opacity:0.55; cursor:default; }
.tier-card.sold-out .tier-price{ color:rgba(242,236,227,0.4); text-decoration:line-through; }
.tier-cta{
  margin-top:4px;
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ardour);
}
.tier-badge{
  align-self:flex-start;
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  padding:6px 12px;
  border:1px solid rgba(242,236,227,0.3);
  color:rgba(242,236,227,0.6);
}
.tier-loading{
  grid-column:1/-1;
  padding:48px 26px;
  text-align:center;
  font-family:'Space Mono', monospace;
  font-size:13px;
  color:rgba(242,236,227,0.5);
  background:#0a0705;
}
@media (max-width:820px){ .ticket-tiers{ grid-template-columns:1fr; } }

.notice-box{
  margin-top:48px;
  border:1px solid var(--grey-line);
  padding:24px 28px;
  font-size:14px;
  color:rgba(242,236,227,0.65);
  line-height:1.6;
}
.notice-box b{ color:var(--ardour); }

.page-header p.ticket-fallback{
  margin-top:18px;
  text-align:center;
  font-family:'Space Mono', monospace;
  font-size:clamp(10px, 2.9vw, 12px);
  color:rgba(242,236,227,0.5);
  white-space:nowrap;
}
.ticket-fallback a{ color:var(--ardour); }
.ticket-fallback a:hover{ text-decoration:underline; }
@media (max-width:360px){
  .page-header p.ticket-fallback{ font-size:9px; }
}

/* ============ TICKET CHECKOUT MODAL ============ */
.ticket-modal{
  position:fixed; inset:0; z-index:95;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.ticket-modal.open{
  opacity:1; visibility:visible;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}
.ticket-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(4,3,2,0.9);
  backdrop-filter:blur(4px);
}
.ticket-modal-box{
  position:relative;
  width:100%; max-width:520px;
  max-height:92vh;
  background:var(--void-solid);
  border:1px solid var(--grey-line);
  display:flex; flex-direction:column;
  transform:scale(0.96); transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.ticket-modal.open .ticket-modal-box{ transform:scale(1); }
.ticket-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--grey-line);
}
.ticket-modal-title{
  font-family:'Rajdhani', sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; font-size:18px; color:var(--ash);
}
.ticket-modal-close{
  background:none; border:none; color:rgba(242,236,227,0.6);
  font-size:16px; cursor:pointer; padding:4px 8px;
}
.ticket-modal-close:hover{ color:var(--ardour); }
.ticket-modal-body{
  flex:1; min-height:0;
  overflow:auto;
  padding:24px 22px 28px;
}

.ticket-buy-form{ display:flex; flex-direction:column; gap:14px; }
.ticket-buy-summary{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; margin-bottom:4px;
  border-bottom:1px solid var(--grey-line);
}
.ticket-buy-name{ font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:18px; color:var(--ash); }
.ticket-buy-price{ font-family:'Space Mono', monospace; color:var(--ardour); font-size:16px; }
.ticket-buy-row{ display:flex; gap:10px; }
.ticket-buy-form input{
  width:100%;
  padding:13px 14px;
  background:#0a0705;
  border:1px solid var(--grey-line);
  color:var(--ash);
  font-family:'Space Grotesk', sans-serif;
  font-size:14px;
}
.ticket-buy-form input::placeholder{ color:rgba(242,236,227,0.4); }
.ticket-buy-form input:focus{ outline:none; border-color:var(--ardour); }
.ticket-buy-qty{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 2px;
}
.ticket-buy-qty-label{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(242,236,227,0.6);
}
.qty-stepper{ display:flex; align-items:center; gap:16px; }
.qty-btn{
  width:32px; height:32px;
  background:#0a0705; border:1px solid var(--grey-line); color:var(--ash);
  font-size:16px; cursor:pointer; line-height:1;
}
.qty-btn:hover{ border-color:var(--ardour); color:var(--ardour); }
.qty-value{ font-family:'Space Mono', monospace; font-size:16px; min-width:16px; text-align:center; }
.ticket-buy-submit{
  margin-top:6px;
  padding:14px 20px;
  background:var(--ardour); color:#0a0604; border:none;
  font-family:'Space Mono', monospace; font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  cursor:pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.ticket-buy-submit:hover{ transform:translateY(-1px); }
.ticket-buy-submit:disabled{ opacity:0.6; cursor:default; transform:none; }
.ticket-buy-msg{
  min-height:16px;
  font-family:'Space Mono', monospace; font-size:11px;
  color:rgba(242,236,227,0.55);
}
.ticket-buy-msg.is-error{ color:#ff6b5e; }

.ticket-farewell{
  position:relative;
  padding:64px 32px;
  text-align:center;
  overflow:hidden;
}
.ticket-farewell-glow{
  position:absolute; left:50%; top:50%;
  width:280px; height:280px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,124,5,0.25), transparent 70%);
  pointer-events:none;
}
.ticket-farewell h3{
  position:relative;
  font-family:'Rajdhani', sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(24px,4vw,32px); color:var(--ardour);
  margin-bottom:16px;
}
.ticket-farewell p{
  position:relative;
  font-size:14px; line-height:1.7; color:rgba(242,236,227,0.7);
  max-width:360px; margin:0 auto;
}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--grey-line);
  padding:clamp(60px,10vw,100px) clamp(20px,6vw,80px) 96px;
}
.foot-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-bottom:56px; border-bottom:1px solid var(--grey-line); margin-bottom:36px;
}
.foot-cta h2{ font-size:clamp(30px,5vw,64px); max-width:640px; }
.foot-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.foot-bottom-center{
  display:flex; flex-direction:column; align-items:center; gap:36px;
  text-align:center;
}
.foot-signup-group{
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.foot-wordmark{
  font-family:'Rajdhani', sans-serif;
  font-weight:700; text-transform:uppercase;
  letter-spacing:0.03em;
  font-size:clamp(16px,2vw,20px);
  color:var(--ash);
}
.foot-community{
  font-family:'Space Mono', monospace;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ardour);
}
.foot-community:hover{ text-decoration:underline; }

.foot-signup{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:100%; max-width:480px;
}
.foot-signup-label{
  font-family:'Rajdhani', sans-serif;
  font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:clamp(15px,1.8vw,18px);
  color:var(--ash);
}
.foot-signup-row{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center; width:100%;
}
.foot-signup-row input{
  flex:1 1 160px;
  min-width:0;
  padding:12px 14px;
  background:#0a0705;
  border:1px solid var(--grey-line);
  color:var(--ash);
  font-family:'Space Mono', monospace;
  font-size:12px;
}
.foot-signup-row input::placeholder{ color:rgba(242,236,227,0.4); }
.foot-signup-row input:focus{ outline:none; border-color:var(--ardour); }
.foot-signup-row button{
  padding:12px 22px;
  background:var(--ardour); color:#0a0604;
  border:none;
  font-family:'Space Mono', monospace;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  cursor:pointer;
  transition: transform 0.15s ease;
  white-space:nowrap;
}
.foot-signup-row button:hover{ transform:translateY(-1px); }
.foot-signup-msg{
  min-height:16px;
  font-family:'Space Mono', monospace; font-size:11px;
  color:rgba(242,236,227,0.55);
}

.foot-logo{ height:20px; }
.foot-logo img{ height:100%; display:block; }
.foot-links{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.foot-links a{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(242,236,227,0.55);
}
.foot-links a:hover{ color:var(--ardour); }
.foot-meta{
  margin-top:28px;
  font-family:'Space Mono', monospace; font-size:11px;
  color:rgba(242,236,227,0.3);
  letter-spacing:0.1em;
}

[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-reveal].in{ opacity:1; transform:translateY(0); }