:root {
  --ink: #1c1014;
  --night: #22101c;
  --paper: #faf1e0;
  --paper-deep: #f0e0c4;
  --crimson: #a31621; /* deep true-red for large surface fills — paper text on it: 6.95:1 */
  --crimson-bright: #d11b21; /* vivid red for text accents — paper 4.81:1, paper-deep 4.16:1 (large text), night 3.36:1 (large text) */
  --gold: #f2b134;
  --teal: #0e7c66;
  --line: rgba(28, 16, 20, 0.18);
  --max: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  line-height: 1.65;
}
body::selection { background: var(--crimson-bright); color: var(--paper); }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(20px, 4vw, 64px);
  color: var(--paper);
  border-bottom: 1px solid rgba(250, 241, 224, 0.28);
}
.wordmark {
  width: fit-content;
  display: flex;
  align-items: center;
  font-family: "Fraunces", serif;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
}
/* The BollyBiza logo file is a transparent cutout (gold + white on
   nothing), so it reads perfectly over the dark hero header and the
   dark footer as-is. On the light inner-page header (and the light
   "next night" slide, once the header flips via .header-on-light) a
   white logo mark on cream paper would nearly disappear — same
   problem the old text wordmark had there — so those two spots get a
   small dark plate behind the mark instead of recolouring the logo
   itself. */
.brand-logo { display: block; height: 40px; width: auto; }
.inner-header .brand-logo,
body.header-on-light .site-header .brand-logo {
  padding: 8px 14px;
  background: var(--ink);
  border-radius: 10px;
}
.footer-mark .brand-logo { height: clamp(46px, 7vw, 84px); }
.desktop-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); }
.desktop-nav a, .footer-links a, .page-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 2px;
  background: var(--gold);
  transition: right 180ms ease;
}
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { right: 0; }
.nav-ticket {
  justify-self: end;
  display: inline-flex;
  gap: 18px;
  align-items: center;
  padding: 10px 0 8px 18px;
  border-left: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-ticket span, .text-link span { transition: transform 180ms ease; }
.nav-ticket:hover span, .text-link:hover span { transform: translate(3px, -2px); }

.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
}
.nav-burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
  transition: background 180ms ease;
}
.nav-burger span::before, .nav-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform 180ms ease, top 180ms ease;
}
.nav-burger span::before { top: -8px; }
.nav-burger span::after { top: 8px; }
.nav-burger.is-open span { background: transparent; }
.nav-burger.is-open span::before { top: 0; transform: rotate(45deg); }
.nav-burger.is-open span::after { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid rgba(250, 241, 224, 0.2);
  max-height: calc(100svh - 72px);
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  padding: 18px 24px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(250, 241, 224, 0.14);
}

.hero {
  position: relative;
  min-height: max(780px, 100svh);
  display: flex;
  align-items: center;
  padding: 130px clamp(24px, 8vw, 140px) 80px;
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
}
/* Slow continuous zoom so the hero background reads as "moving" without
   needing actual video — the only real Club 11 video clips on hand are
   either the wrong venue or carry a permanent Instagram watermark baked
   into the footage, so a clean animated photo is the better call here. */
.hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; animation: hero-ken-burns 42s ease-in-out infinite alternate; }
@keyframes hero-ken-burns { from { transform: scale(1); } to { transform: scale(1.14); } }
.hero-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(34,16,28,.94) 0%, rgba(34,16,28,.74) 42%, rgba(34,16,28,.14) 78%),
    linear-gradient(0deg, rgba(34,16,28,.88) 0%, transparent 40%);
}
.hero-copy { position: relative; z-index: 2; width: min(800px, 76vw); }
.kicker {
  margin: 0 0 18px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--gold);
}
.hero-wash ~ .hero-copy .kicker, .hero .kicker { color: var(--gold); }
.hero h1, .section h2, .contact h2, .page-intro h1, .booking-intro h1, .gallery-cta h2 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-weight: 650;
  letter-spacing: -0.065em;
  line-height: 0.84;
}
.hero h1 { font-size: clamp(4.5rem, 11vw, 10.8rem); }
em, h3 i, h2 i { color: var(--crimson-bright); font-weight: inherit; font-style: italic; }
.hero-intro { max-width: 510px; margin: 34px 0 0; font-size: clamp(0.9rem, 1.3vw, 1.08rem); }
.hero-actions, .ticket-actions, .contact-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 38px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.button:hover, .button:focus-visible { transform: translateY(-3px); }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: var(--gold); box-shadow: 0 10px 26px rgba(242, 177, 52, .35); }
.button-dark { background: var(--crimson); color: var(--paper); }
.button-dark:hover { background: var(--gold); color: var(--ink); box-shadow: 0 10px 26px rgba(242, 177, 52, .35); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  padding: 8px 0;
  border-bottom: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dark-link { color: var(--ink); }
.hero-caption { position: absolute; z-index: 2; right: 20px; top: 45%; margin: 0; writing-mode: vertical-rl; font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* ---------------- Homepage intro slides ---------------- */
/* Hero + "next night" play as a simple two-page slideshow: the hero
   shows first, then — a few seconds in, with zero input needed — it
   swaps to the next-night flyer, then back to the hero, looping on its
   own for as long as nobody touches it (see intro-slides.js). There are
   no arrows, dots, or page marks of any kind; the only "control" is
   that clicking, tapping, or tabbing into either panel stops the loop
   for good, holding it wherever it was left. This is intentionally NOT
   driven by scroll or by the viewport size in any way — each panel just
   keeps whatever display/layout it already had (flex for .hero, grid
   for .next-night) and only the inactive one is switched off, so there
   is no height math for JS to get wrong and nothing here can react to
   the browser chrome resizing while the page scrolls. Scrolling past
   this block into the ticker/story section further down the page is
   completely normal page scroll and is untouched by any of this.
   Without JS (or before it runs), .intro-slides stays a plain block and
   both sections simply stack normally, one after the other — nothing is
   hidden or lost either way. */
.intro-slides { position: relative; }
.intro-slides.is-active .intro-slide:not(.is-current) { display: none; }
.intro-slides.is-active .intro-slide.is-current { animation: intro-fade 600ms ease both; }
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }

.ticker { overflow: hidden; background: var(--gold); border-block: 1px solid var(--ink); color: var(--ink); }
.ticker-track { display: flex; width: max-content; animation: ticker 34s linear infinite; }
.ticker span { padding: 13px 28px; border-right: 1px solid var(--ink); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
@keyframes ticker { to { transform: translateX(-50%); } }

.section { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(90px, 11vw, 170px) clamp(24px, 6vw, 92px); }
.section-number { position: absolute; top: 44px; right: 5vw; font-family: "Fraunces", serif; font-size: clamp(5rem, 11vw, 11rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(28,16,20,.15); }
.section h2 { font-size: clamp(3.7rem, 7.5vw, 7.7rem); }

.next-night {
  display: grid;
  grid-template-columns: .82fr 1.25fr .9fr;
  gap: clamp(30px, 5vw, 82px);
  align-items: center;
}
.section-heading { align-self: start; padding-top: 8vh; }
/* Event poster: shows the actual flyer/poster image supplied for the
   event (config.js upcomingEvent.posterImage), full and uncropped —
   once a designed flyer with all the details baked in is supplied,
   it drops straight in here with no extra text drawn on top. */
.event-poster {
  position: relative;
  overflow: hidden;
  background: var(--night);
  box-shadow: 22px 24px 0 var(--teal);
  transform: rotate(-1.5deg);
}
.event-poster img { display: block; width: 100%; height: auto; }
.ticket-panel { align-self: end; padding-bottom: 5vh; }
.price-list { border-top: 1px solid var(--ink); }
.price-item { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.price-item span { font-size: .72rem; font-weight: 600; text-transform: uppercase; }
.price-item strong { font-family: "Fraunces", serif; font-size: 1rem; }
.age-line { margin: 16px 0 0; font-size: .58rem; font-weight: 600; text-transform: uppercase; opacity: .62; }

.story { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(50px, 10vw, 150px); align-items: center; border-top: 1px solid var(--line); }
.story-copy { padding-left: 7vw; }
.story-copy h2 { margin-bottom: 40px; }
.story-copy > p:not(.kicker) { max-width: 620px; }
.story-copy .lead { font-family: "Fraunces", serif; font-size: clamp(1.5rem, 2.2vw, 2.15rem); line-height: 1.25; letter-spacing: -.025em; }
.story-copy .kicker { color: var(--crimson-bright); }
.story-copy .text-link { margin-top: 22px; }
.story-film { position: relative; }
.story-film video { width: 100%; aspect-ratio: .78; object-fit: cover; background: var(--night); filter: saturate(.85) contrast(1.08); }
.story-film p { position: absolute; left: -42px; bottom: 34px; margin: 0; padding: 18px 22px; background: var(--gold); color: var(--ink); font-family: "Fraunces", serif; font-size: 1.35rem; line-height: 1.05; transform: rotate(-4deg); }

.archive { max-width: none; background: var(--night); color: var(--paper); }
.archive .kicker { color: var(--gold); }
.archive-header { max-width: var(--max); margin: 0 auto 72px; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.archive-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.45fr .75fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.archive-card { position: relative; overflow: hidden; background: #3a1f30; }
.archive-card video, .archive-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.archive-card:hover video, .archive-card:hover img { transform: scale(1.035); }
.card-large { aspect-ratio: 1.32; }
.card-small { aspect-ratio: .68; margin-top: 12vw; }
/* Third archive slot for a past night with no recap video yet — a
   still flyer image instead of a looping clip. Spans the full grid
   width as its own centered row underneath the large/small pair
   above, rather than trying to force a third column into a grid that
   was designed around exactly two asymmetric cards. */
.card-recap { grid-column: 1 / -1; max-width: 340px; aspect-ratio: .68; margin: 28px auto 0; }
/* This card's source image is a fully-designed flyer with its own
   baked-in text (unlike the video-crop cards above, which are plain
   photography) — a taller, darker fade than the default .archive-card
   gradient keeps our own "Recap video coming soon" caption legible
   without it fighting the flyer's own small print underneath. */
.card-recap::after { inset: 38% 0 0; background: linear-gradient(transparent, rgba(20,10,16,.97) 65%, rgba(20,10,16,.97)); }
.archive-card::after { content: ""; position: absolute; inset: 20% 0 0; background: linear-gradient(transparent, rgba(20,10,16,.92)); }
.card-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(24px, 4vw, 52px); }
.card-copy .kicker { color: var(--gold); }
.card-copy h3 { margin: 0 0 18px; font-family: "Fraunces", serif; font-size: clamp(2.3rem, 4.2vw, 5rem); line-height: .9; letter-spacing: -.05em; }
.card-copy p:last-child { max-width: 610px; margin-bottom: 0; font-size: .72rem; }

.venue { display: grid; grid-template-columns: 1fr .65fr; gap: 50px 8vw; }
.venue-title { grid-row: span 2; }
.venue-copy { align-self: end; max-width: 460px; }
.venue-copy p { font-family: "Fraunces", serif; font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.28; }
.venue-reel { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr .8fr 1fr; gap: 16px; align-items: end; margin-top: 38px; }
.venue-reel video, .venue-reel img { width: 100%; object-fit: cover; background: var(--night); filter: saturate(.85); }
.venue-reel > *:nth-child(1) { aspect-ratio: 1.35; }
.venue-reel > *:nth-child(2) { aspect-ratio: .72; }
.venue-reel > *:nth-child(3) { aspect-ratio: 1; }

.contact, .gallery-cta {
  position: relative;
  padding: clamp(90px, 12vw, 180px) 7vw;
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
}
.contact .kicker, .gallery-cta .kicker { color: var(--gold); }
.contact em, .contact h3 i, .contact h2 i, .gallery-cta em, .gallery-cta h3 i, .gallery-cta h2 i { color: var(--gold); }
.contact > *, .gallery-cta > * { position: relative; z-index: 1; }
.contact h2, .gallery-cta h2 { font-size: clamp(4.3rem, 10vw, 10rem); }
.contact > p:not(.kicker) { max-width: 560px; margin-top: 34px; }

/* Capped to --max for the same reason as .venue-clips above — on wide
   monitors/TVs an uncapped 3-column footer spreads the wordmark, address
   and links across the full viewport with huge dead gaps between them. */
.site-footer {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  min-height: 240px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 30px;
  padding: 70px clamp(24px, 6vw, 90px) 42px;
  color: var(--paper);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--ink);
  z-index: -1;
}
.footer-mark { font-size: clamp(2.2rem, 4vw, 4.5rem); }
.footer-address { display: flex; flex-direction: column; gap: 12px; }
.site-footer p { margin: 0; font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.footer-contact a { display: block; }
.footer-contact a:hover { opacity: .7; }
.footer-links { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; row-gap: 10px; gap: 24px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Inner pages */
.inner-page { background: var(--paper); }
.inner-header { position: relative; color: var(--ink); border-color: var(--line); }
.inner-header .kicker, .page-label { color: var(--crimson-bright); }
/* Homepage header sits above whichever intro slide is active; flip it
   to the same ink styling as .inner-header whenever that slide (e.g.
   "next night") has a light background instead of the hero's dark one. */
body.header-on-light .site-header { color: var(--ink); border-color: var(--line); }
.page-label { margin: 0; }
.page-intro, .booking-intro { padding: clamp(85px, 11vw, 160px) clamp(24px, 8vw, 125px); border-bottom: 1px solid var(--line); }
.page-intro h1, .booking-intro h1 { max-width: 1100px; font-size: clamp(4.4rem, 10vw, 10rem); }
.page-intro > p:last-child, .booking-intro > p:last-child { max-width: 620px; margin: 42px 0 0 auto; }

/* Gallery + booking intros get the same dark, full-bleed treatment as
   the homepage's night sections (archive/contact) instead of sitting
   on bare cream — keeps these pages feeling like the same site. */
.gallery-page .page-intro,
.booking-page .booking-intro {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
  border-bottom: 0;
}
.gallery-page .page-intro > *,
.booking-page .booking-intro > * { position: relative; z-index: 1; }
.gallery-page .page-intro h1,
.booking-page .booking-intro h1,
.gallery-page .page-intro > p:last-child,
.booking-page .booking-intro > p:last-child { color: var(--paper); }

/* Events (upcoming + past nights) — compact horizontal tile grid,
   full-bleed dark background via the same break-out pseudo-element
   trick used elsewhere on this page. Deliberately uniform-sized tiles
   (not one big hero block) so new nights — upcoming or past — can be
   added later just by copy-pasting another .event-tile. */
.events-grid { position: relative; max-width: var(--max); margin: 0 auto; padding: 100px clamp(24px, 6vw, 90px) 60px; color: var(--paper); border-bottom: 1px solid rgba(250,241,224,.14); }
.events-grid::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--night);
  z-index: -1;
}
.events-grid-head { margin-bottom: clamp(40px, 6vw, 64px); }
.events-grid-head .kicker { color: var(--gold); }
.events-grid-head h2, .venue-clips h2 { margin: 0; font-family: "Fraunces", serif; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .92; letter-spacing: -.05em; }
.tiles-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 34px); }
.event-tile { display: flex; flex-direction: column; }
.event-tile-media { position: relative; aspect-ratio: 1.4; background: var(--night); overflow: hidden; }
.event-tile-media img, .event-tile-media video { width: 100%; height: 100%; object-fit: cover; }
.event-tile-upcoming .event-tile-media { box-shadow: 0 0 0 2px var(--gold); }
.event-tile-tag { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 6px 13px; background: var(--ink); color: var(--paper); font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; }
.event-tile-tag.tag-upcoming { background: var(--gold); color: var(--ink); }
.event-tile-copy { padding: 20px 2px 0; }
.event-tile-copy .kicker { margin: 0 0 8px; font-size: .6rem; color: var(--gold); }
.event-tile-copy h3 { margin: 0; font-family: "Fraunces", serif; font-size: 1.5rem; line-height: 1.08; letter-spacing: -.02em; }
.event-tile-copy .text-link { margin-top: 14px; border-color: rgba(250,241,224,.5); }
/* Capped to --max like every other content section (events-grid, section,
   archive-grid, etc.) so the grid — and the photos inside it — don't
   stretch edge-to-edge and get blown up/soft on very large monitors and
   TVs. Full-bleed dark background kept via the same break-out
   ::before trick used on .events-grid. */
.venue-clips { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(90px, 10vw, 150px) clamp(24px, 6vw, 90px); color: var(--paper); }
.venue-clips::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--night);
  z-index: -1;
}
.venue-clips .kicker { color: var(--gold); }
.venue-clips-head { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 70px; }
.clips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.clips-grid figure { margin: 0; }
.clips-grid video, .clips-grid img { width: 100%; aspect-ratio: .68; object-fit: cover; background: #2e1a26; }
.clips-grid figcaption { padding: 12px 0; font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(250,241,224,.25); }
.gallery-cta { text-align: left; }
.gallery-cta .button { margin-top: 38px; }

/* Booking */
.booking-main { min-height: 80vh; }
.booking-intro h1 { max-width: 1000px; }
.booking-layout { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(45px, 8vw, 120px); padding: 100px clamp(24px, 7vw, 110px) 140px; align-items: start; }
.booking-event-card { position: sticky; top: 30px; padding: 38px; background: var(--teal); color: var(--paper); box-shadow: 16px 16px 0 var(--gold); transform: rotate(-1deg); }
.booking-event-card .kicker { color: var(--gold); }
.booking-event-card h2 { margin: 0 0 55px; font-family: "Fraunces", serif; font-size: clamp(2.5rem, 4vw, 4.2rem); line-height: .9; letter-spacing: -.05em; }
.booking-event-card dl { margin: 0; }
.booking-event-card dl div { display: grid; grid-template-columns: 65px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid rgba(250,241,224,.32); }
.booking-event-card dt { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.booking-event-card dd { margin: 0; font-size: .72rem; }
.booking-note { margin: 40px 0 0; font-size: .62rem; opacity: .82; }
/* Frames the ticket list as its own designed card (offset shadow, like
   every other card on the site) instead of floating loose on bare page
   background. */
.booking-form { background: var(--paper-deep); padding: clamp(26px, 4vw, 48px); box-shadow: 14px 14px 0 var(--crimson); }
.booking-form-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.booking-form-head .kicker { margin: 0; color: var(--crimson); } /* darker than crimson-bright — needed for AA contrast on the paper-deep card */
.booking-form-head h2 { margin: 0; font-family: "Fraunces", serif; font-size: 3rem; letter-spacing: -.05em; }

/* Closing band before the footer — gives the booking page the same
   dark closing beat as the homepage (.contact) and gallery (.gallery-cta)
   instead of ending abruptly at the confirm button. */
.booking-closing {
  padding: clamp(60px, 8vw, 100px) clamp(24px, 7vw, 110px);
  background: var(--night);
  color: var(--paper);
  text-align: center;
}
.booking-closing .kicker { color: var(--gold); }
.booking-closing > p:not(.kicker) { max-width: 480px; margin: 0 auto 26px; font-size: .95rem; }
.ticket-group-heading { margin: 36px 0 4px; padding-top: 22px; border-top: 1px solid var(--ink); font-family: "Fraunces", serif; font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; }
.ticket-group-heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ticket-note { margin: 8px 0 0; max-width: 46ch; font-size: .68rem; line-height: 1.5; opacity: .78; }
.ticket-info-note { margin: 18px 0 0; padding: 16px 20px; background: var(--paper-deep); font-size: .72rem; line-height: 1.6; border-left: 3px solid var(--crimson-bright); }
.ticket-option { display: grid; grid-template-columns: 1fr auto auto; gap: 25px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); transition: background 180ms ease, padding 180ms ease; }
.ticket-option.selected { margin-inline: -18px; padding-inline: 18px; background: rgba(242,177,52,.22); }
.ticket-option.sold-out { opacity: .45; }
.ticket-option.sold-out .to-avail { color: var(--crimson); opacity: 1; }
.ticket-option.sold-out .qty-stepper { pointer-events: none; }
.ticket-option h3 { margin: 0; font-family: "Fraunces", serif; font-size: 1.45rem; }
.to-avail { font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.ticket-option > strong { min-width: 115px; font-family: "Fraunces", serif; text-align: right; }
.qty-stepper { display: grid; grid-template-columns: 36px 48px 36px; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
.qty-stepper button, .qty-stepper input { height: 38px; border: 0; background: transparent; color: var(--ink); text-align: center; }
.qty-stepper button { cursor: pointer; font-size: 1.2rem; font-weight: 700; }
.qty-stepper button:disabled { opacity: .25; cursor: not-allowed; }
.qty-stepper input { width: 48px; border-inline: 1px solid var(--ink); appearance: textfield; font-weight: 700; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.order-total { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-top: 34px; padding: 28px; background: var(--night); color: var(--paper); }
.order-total > span { font-size: .66rem; font-weight: 600; }
.order-total > div { text-align: right; }
.order-total small { display: block; font-size: .55rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.order-total strong { font-family: "Fraunces", serif; font-size: 2rem; color: var(--gold); }
.age-confirm { display: grid; grid-template-columns: 22px 1fr; gap: 15px; margin-top: 26px; cursor: pointer; }
.age-confirm input { width: 20px; height: 20px; accent-color: var(--crimson-bright); }
.age-confirm span { font-size: .63rem; }
.age-confirm b { display: block; margin-bottom: 4px; font-size: .72rem; }
.validation-msg { display: none; margin: 18px 0 0; color: var(--crimson); font-size: .65rem; font-weight: 600; }
.validation-msg.show { display: block; }
.confirm-button { width: 100%; min-height: 64px; margin-top: 28px; display: flex; justify-content: center; gap: 18px; align-items: center; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer; font-size: .73rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.confirm-button:not(:disabled):hover { background: var(--crimson); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(209, 27, 33, .35); }
.confirm-button:disabled { opacity: .32; cursor: not-allowed; }

.is-hidden { display: none !important; }

.guest-details { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.guest-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.guest-fields label { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.guest-fields input {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: .85rem;
}
.guest-fields input:focus { outline: 2px solid var(--crimson-bright); outline-offset: 2px; }
.guest-note { margin: 14px 0 0; font-size: .6rem; opacity: .62; }

/* "Coming soon" mode — shown instead of real event details whenever
   config.js's upcomingEvent.announced is false. .tba-hide/.tba-reveal
   are toggled by site.js; the actual look of each placeholder lives
   here. Keep this in sync if the announced-event markup changes.
   !important is needed because several .tba-hide targets (the poster
   img, the confirm button) already carry their own explicit "display"
   rule elsewhere in this file, which otherwise wins over the plain
   [hidden] attribute and leaves them visible/occupying space. The same
   problem hits it from the other side too: .tba-reveal marks the three
   "coming soon" cards below, which stay hidden by default in the HTML
   (revealed only by site.js when announced is false) — but
   .coming-soon-card's own "display: flex" two lines down wins over the
   plain [hidden] the same way, so once a real event is announced these
   would otherwise still show up sitting right on top of (or behind)
   the real poster/tickets. Both directions need the !important. */
.tba-hide[hidden] { display: none !important; }
.tba-reveal[hidden] { display: none !important; }

/* Ticket-pricing on/off — independent of the "coming soon" switch above.
   config.js's upcomingEvent.ticketsOpen controls this: an event can be
   fully announced (real poster, date, venue all showing) while ticket
   sales still aren't open yet, e.g. an RSVP-only night with no published
   door price. .tickets-hide/.tickets-reveal are toggled by site.js the
   same way .tba-hide/.tba-reveal are, and need the same !important for
   the same reason — several .tickets-hide targets (buttons, the booking
   page's flex/grid layout blocks) already carry their own explicit
   "display" rule elsewhere in this file, which otherwise wins over the
   plain [hidden] attribute and leaves them visible/occupying space. */
.tickets-hide[hidden] { display: none !important; }
.tickets-reveal[hidden] { display: none !important; }
.coming-soon-card { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.coming-soon-card .kicker { color: var(--gold); }
.coming-soon-card h2, .coming-soon-card h3 { margin: 0 0 14px; font-family: "Fraunces", serif; letter-spacing: -.03em; line-height: .95; }
.coming-soon-card p:not(.kicker) { margin: 0; font-size: .78rem; line-height: 1.6; opacity: .85; }
/* Homepage poster slot — same box the poster image sits in. The real
   img establishes this box's height normally (via its own aspect
   ratio); since it's hidden in this mode, give the placeholder its
   own aspect-ratio so the box doesn't collapse to zero height. */
.event-poster .coming-soon-card { aspect-ratio: .78; padding: clamp(28px, 5vw, 56px); background: var(--night); color: var(--paper); }
.event-poster .coming-soon-card h3 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.event-poster .coming-soon-card p:not(.kicker) { max-width: 34ch; margin: 14px auto 0; }
/* Gallery upcoming tile — smaller, sits inside the tile media box. */
.coming-soon-tile { position: absolute; inset: 0; padding: 20px; background: var(--night); color: var(--paper); }
.coming-soon-tile h3 { font-size: 1.8rem; }
/* Booking page — full card replacing the ticket form. */
.coming-soon-booking { padding: clamp(30px, 5vw, 54px) 0; }
.coming-soon-booking h2 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--ink); }
.coming-soon-booking p:not(.kicker) { max-width: 52ch; margin: 0 auto 30px; opacity: 1; color: var(--ink); }
.coming-soon-booking .button { margin: 0 auto; }

/* Optional "reserve your spot" online-payment block, sitting inside
   the RSVP-only booking card alongside the WhatsApp button — see
   config.js's upcomingEvent.reservation and site.js/booking.js. Hidden
   by default; only revealed when reservation.enabled + amountOMR are
   both set. No explicit "display" is set on .reservation-block itself,
   so the plain [hidden] attribute is enough to hide it — no
   !important override needed here (unlike .tba-hide/.tickets-hide
   above, which do carry their own competing "display" rules). */
.reservation-block { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); text-align: center; }
.reservation-divider { margin: 0 0 4px; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.reservation-block .guest-fields { max-width: 420px; margin: 16px auto 0; text-align: left; }
.reservation-block .guest-note { text-align: center; }
.reservation-block .validation-msg { text-align: center; }
.reservation-block .button { margin: 18px auto 0; }

/* Payment status pages (success.html / cancel.html) */
.status-main { min-height: 66vh; display: flex; align-items: center; justify-content: center; padding: 70px clamp(24px, 6vw, 90px) 110px; }
.status-card { max-width: 620px; width: 100%; padding: clamp(32px, 5vw, 56px); background: var(--paper-deep); box-shadow: 16px 16px 0 var(--gold); }
.status-card .kicker { color: var(--crimson-bright); }
.status-card h1 { margin: 14px 0 18px; font-family: "Fraunces", serif; font-size: clamp(2.3rem, 5vw, 3.6rem); letter-spacing: -.04em; line-height: .95; }
.status-card > p { font-size: .84rem; line-height: 1.7; max-width: 52ch; }
.status-order { margin-top: 26px; padding: 22px; background: var(--paper); }
.status-order dl { margin: 0; }
.status-order dl > div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .72rem; }
.status-order dl > div:last-child { border-bottom: 0; }
.status-total { display: flex; justify-content: space-between; align-items: end; margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--ink); }
.status-total small { font-size: .55rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.status-total strong { font-family: "Fraunces", serif; font-size: 1.6rem; color: var(--crimson-bright); }
.status-ref { margin: 18px 0 0; font-size: .62rem; opacity: .6; }
.status-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 30px; }

/* Policy pages (terms.html / privacy.html) */
.policy-content { max-width: 760px; margin: 0 auto; padding: 10px clamp(24px, 6vw, 90px) 130px; }
.policy-note { margin-bottom: 44px; padding: 20px 24px; background: var(--paper-deep); border-left: 3px solid var(--crimson-bright); font-size: .74rem; line-height: 1.7; }
.policy-content h2 { margin: 46px 0 14px; font-family: "Fraunces", serif; font-size: 1.7rem; letter-spacing: -.02em; }
.policy-content h2:first-of-type { margin-top: 0; }
.policy-content p { margin: 0 0 16px; font-size: .82rem; line-height: 1.75; max-width: 68ch; }
.policy-back { margin-top: 50px; }

@media (max-width: 1050px) {
  .next-night { grid-template-columns: .75fr 1.25fr; }
  .ticket-panel { grid-column: 1 / -1; display: grid; grid-template-columns: .55fr 1fr; gap: 50px; padding: 20px 0 0; }
  .ticket-panel .kicker { grid-row: span 2; }
  .ticket-actions { margin-top: 12px; }
  .archive-grid { grid-template-columns: 1.2fr .8fr; }
}

@media (max-width: 820px) {
  /* Sticky header on mobile — on a long, single-column mobile page the
     header used to scroll away with the very first screen and never
     come back, so getting to the menu or "Book tickets" meant scrolling
     all the way back to the top. Pinning it fixed keeps navigation and
     booking one tap away everywhere on the site. The homepage header
     starts transparent (matching its floating-over-the-hero look) and
     site.js adds .is-scrolled once the hero has scrolled past, swapping
     in a solid background so it stays legible over whatever content is
     underneath; inner pages (gallery/booking/policy/status) never had a
     transparent look to begin with, so they get a solid background from
     the start. Since fixed positioning takes the header out of normal
     page flow, inner pages need their content nudged down by the same
     72px the header used to occupy in-flow (the homepage never needed
     this — its header already floats over the hero without reserving
     flow space). scroll-margin-top on the in-page jump targets stops
     the fixed header from covering their top edge when a nav link
     scrolls to them. */
  .site-header {
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    height: 72px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 25;
    background: transparent;
    transition: background 220ms ease, box-shadow 220ms ease;
  }
  .site-header.is-scrolled { background: var(--night); box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
  body.header-on-light .site-header.is-scrolled { color: var(--paper); }
  .inner-header, .inner-header.is-scrolled { background: var(--paper); }
  .inner-header.is-scrolled { box-shadow: 0 6px 20px rgba(28, 16, 20, .12); }
  .inner-page main { padding-top: 72px; }
  #story, #contact, #intro-slides { scroll-margin-top: 72px; }
  .desktop-nav, .page-label { display: none; }
  .nav-burger { display: flex; align-items: center; justify-content: center; }
  .hero { min-height: 760px; padding-inline: 24px; align-items: end; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(4.2rem, 18vw, 7rem); }
  .hero-caption { display: none; }
  .hero-wash { background: linear-gradient(0deg, rgba(34,16,28,.97) 0%, rgba(34,16,28,.62) 62%, rgba(34,16,28,.3)); }
  .next-night, .story, .venue, .booking-layout { grid-template-columns: 1fr; }
  .section-heading { padding-top: 0; }
  .event-poster { min-height: 600px; margin-right: 14px; }
  .ticket-panel { display: block; grid-column: auto; }
  .story-copy { padding-left: 0; }
  .story-film { width: 86%; margin-left: auto; }
  .archive-grid { grid-template-columns: 1fr; }
  .card-large { aspect-ratio: .9; }
  .card-small { width: 78%; aspect-ratio: .68; margin: 0 0 0 auto; }
  .card-recap { width: 78%; max-width: none; margin: 20px auto 0; }
  .venue-title { grid-row: auto; }
  .venue-reel { grid-template-columns: 1fr 1fr; }
  .venue-reel > *:first-child { grid-column: 1 / -1; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-links { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; }
  .tiles-row { grid-template-columns: 1fr 1fr; }
  .clips-grid { grid-template-columns: 1fr 1fr; }
  .booking-event-card { position: relative; top: auto; max-width: 580px; }
  /* Bigger touch targets on touch-sized screens — 36-38px buttons sit
     under the ~44px minimum recommended for a comfortable tap. */
  .qty-stepper { grid-template-columns: 44px 52px 44px; }
  .qty-stepper button, .qty-stepper input { height: 44px; }
  .nav-burger { width: 44px; height: 44px; }

  /* The footer's address/social links and the header's "Book tickets"
     button were sized for a mouse pointer — a bare text line with no
     padding is a tiny, easy-to-miss target for a thumb. Padding grows
     the actual tappable area without needing to enlarge the type size;
     the row/column gaps are pulled in by roughly the same amount so the
     footer doesn't end up taking noticeably more vertical space. */
  .footer-contact a, .footer-links a { padding: 7px 0; margin: -7px 0; }
  .footer-address { gap: 2px; }
  .footer-links { row-gap: 0; }
  .nav-ticket { gap: 8px; padding: 13px 0 11px 10px; font-size: .74rem; }
  .age-line { font-size: .68rem; opacity: .75; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .hero { padding-bottom: 54px; }
  .hero-actions, .ticket-actions, .contact-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .section { padding-inline: 22px; }
  .section h2 { font-size: clamp(3.5rem, 18vw, 5.8rem); }
  .event-poster { min-height: 520px; padding: 26px; box-shadow: 12px 14px 0 var(--teal); }
  .event-poster h3 { font-size: 3.8rem; }
  .poster-seal { right: 24px; bottom: 120px; width: 74px; }
  .story-film { width: 92%; }
  .story-film p { left: -20px; }
  .archive-header { align-items: flex-start; flex-direction: column; }
  .archive-grid { gap: 28px; }
  .card-large { aspect-ratio: .7; }
  .card-small { width: 88%; }
  .card-recap { width: 88%; }
  .card-copy h3 { font-size: 2.8rem; }
  .venue-reel { gap: 8px; }
  .contact h2, .gallery-cta h2 { font-size: 4.6rem; }
  .site-footer { grid-template-columns: 1fr; align-items: start; }
  .footer-links { grid-column: auto; flex-wrap: wrap; }
  .page-intro, .booking-intro { padding-inline: 22px; }
  .page-intro h1, .booking-intro h1 { font-size: clamp(4rem, 19vw, 6rem); }
  .page-intro > p:last-child, .booking-intro > p:last-child { margin-left: 0; }
  .events-grid { padding-inline: 22px; }
  .tiles-row { grid-template-columns: 1fr; gap: 30px; }
  .events-grid-head h2, .venue-clips h2 { font-size: 3.5rem; }
  .venue-clips { padding-inline: 22px; }
  .venue-clips-head { display: block; }
  .clips-grid { gap: 10px; }
  .booking-layout { padding: 70px 22px 100px; }
  .booking-event-card { padding: 28px; box-shadow: 10px 11px 0 var(--gold); }
  .booking-form-head { align-items: flex-start; flex-direction: column; }
  .ticket-option { grid-template-columns: 1fr auto; gap: 15px; }
  .ticket-option > strong { min-width: 0; }
  .qty-stepper { grid-column: 1 / -1; width: fit-content; }
  .order-total { align-items: flex-start; flex-direction: column; }
  .order-total > div { text-align: left; }
  .guest-fields { grid-template-columns: 1fr; }
  .status-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}