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

:root {
  --black: #000000;
  --s900: #0A0A0A; --s800: #111111; --s700: #161616; --s600: #222222;
  --s500: #2E2E2E; --s400: #3A3A3A; --s350: #555555; --s300: #7A7A7A;
  --s250: #9A9A9E; --s200: #BABAC4; --s150: #D8D8DC;
  --bone: #F5F5F3; --white: #FFFFFF;
  --yellow: #FEE300; --ella: #73FBEC; --dizzy: #FC38A1;
  --oscar-d: #42136F; --oscar: #691DB1;
  --jack: #577357; --spotlight: #2E7874;

  /* Venue accent colours */
  --accent-jack:  #577357;
  --accent-piano: #B6986C;
  --accent-alfies: #BA4857;

  --serif:   'Prata', Georgia, serif;
  --display: 'Inter', -apple-system, sans-serif;
  --gothic:  'Special Gothic Expanded One', 'Inter', sans-serif;
  --sans:    'Rethink Sans', -apple-system, sans-serif;

  --ease:     cubic-bezier(0.42, 0, 0.22, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.36, 1);
  --dur:      300ms;

  --wide-w:    1080px;
  --read-w:    680px;
  --callout-w: 760px;
  --shell-w:   1280px;
  --nav-h:     52px;

  --rad-sm: 2px; --rad: 6px; --rad-lg: 12px; --rad-pill: 999px;
}

html { scroll-behavior: smooth; }

/* Section fade-in disabled to was hiding content on mobile when IO didn't fire reliably.
   Per-image fade-on-load is kept, that's the visible motion. */
.fade-in-section { opacity: 1; transform: none; transition: none; }
.art-media-cell { opacity: 1; transform: none; }
.art-media-cell img { opacity: 0; transition: opacity 500ms var(--ease-out); }
.art-media-cell img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .art-media-cell img { opacity: 1; transition: none; }
}
body {
  background: var(--black); color: var(--bone);
  font-family: var(--sans); font-size: 15px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--yellow); color: var(--black); }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ============ GLOBAL NAV ============ */
.gnav {
  position: relative; z-index: 100;
  height: var(--nav-h);
  background: rgba(0,0,0,0.88);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gnav-inner {
  max-width: var(--shell-w);
  margin: 0 auto; padding: 0 40px;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.gnav-brand {
  font-family: var(--display); font-weight: 800;
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--white); text-transform: uppercase; text-decoration: none;
}
.gnav-links { display: flex; gap: 28px; }
.gnav-links a[href="/membership"],
.gnav-links a[href="/discovery"] { display: none; }
.gnav-links a {
  font-family: var(--display); font-weight: 600;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--s250); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.gnav-links a:hover, .gnav-links a[aria-current] { color: var(--white); }
.gnav-actions { display: flex; align-items: center; gap: 10px; }
.gnav-login {
  font-family: var(--display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--black); background: var(--white); text-decoration: none;
  border-radius: var(--rad-pill);
  padding: 7px 18px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
  cursor: pointer;
}
.gnav-login:hover { background: var(--bone); transform: translateY(-1px); }
.gnav-cta {
  font-family: var(--display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--rad-pill);
  padding: 7px 18px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gnav-cta:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }

/* ============ NEW SOHO.LIVE NAV (replaces .gnav on updated pages) ============ */
.nav {
  position: sticky; top: 0; left: 0; right: 0; z-index: 300;
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: rgba(0,0,0,0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-brand { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--white); }
.nav-centre { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); background: none; border: none; cursor: pointer; text-decoration: none; padding: 0;
  transition: color 240ms; display: flex; align-items: center; gap: 5px;
}
.nav-link:hover { color: var(--white); }
.nav-link.nav-login-link { color: rgba(255,255,255,0.65); }
.nav-link.nav-login-link:hover { color: var(--white); }
.nav-link.nav-login-link.logged-in { color: var(--white); font-weight: 800; }
.nav-chevron { font-size: 8px; opacity: 0.5; transition: transform 200ms; }
.nav-link[data-open] .nav-chevron { transform: rotate(180deg); opacity: 0.8; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-cta-pill {
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13); border-radius: var(--rad-pill);
  padding: 8px 20px; cursor: pointer; text-decoration: none;
  transition: background 240ms, border-color 240ms, color 240ms;
}
.nav-cta-pill:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: var(--white); }
.nav-hamburger { display: none; background: none; border: none; color: var(--white); cursor: pointer; padding: 4px; }
@media (max-width: 820px) { .nav { padding: 0 20px; } .nav-centre { display: none; } .nav-hamburger { display: flex; } }
@media (max-width: 480px) { .nav-cta-pill { display: none; } }

/* NAV OVERLAY */
.nav-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 280ms ease;
}
.nav-overlay.open { opacity: 1; pointer-events: all; }
.nav-overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 56px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.nav-overlay-brand { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
.nav-overlay-close { background: none; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: color 150ms, border-color 150ms; }
.nav-overlay-close:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }
.nav-overlay-body { flex: 1; display: flex; align-items: center; padding: 40px 40px 60px; overflow-y: auto; }
.nav-menu { display: none; width: 100%; max-width: 860px; }
.nav-menu.active { display: flex; flex-direction: column; }
.nav-menu-item {
  display: flex; align-items: baseline; gap: 28px; padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06); text-decoration: none; color: var(--white);
  transform: translateY(18px); opacity: 0;
  transition: transform 400ms cubic-bezier(0.16,1,0.3,1), opacity 400ms ease, color 200ms;
}
.nav-overlay.open .nav-menu.active .nav-menu-item { transform: translateY(0); opacity: 1; }
.nav-overlay.open .nav-menu.active .nav-menu-item:nth-child(1) { transition-delay: 0.05s; }
.nav-overlay.open .nav-menu.active .nav-menu-item:nth-child(2) { transition-delay: 0.12s; }
.nav-overlay.open .nav-menu.active .nav-menu-item:nth-child(3) { transition-delay: 0.19s; }
.nav-overlay.open .nav-menu.active .nav-menu-item:nth-child(4) { transition-delay: 0.26s; }
.nav-menu-item:hover .nav-menu-title { color: var(--ella); }
.nav-menu-num { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--s400); min-width: 28px; flex-shrink: 0; }
.nav-menu-text { display: flex; flex-direction: column; gap: 6px; }
.nav-menu-title { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4.5vw, 60px); letter-spacing: -0.025em; line-height: 1; color: var(--white); transition: color 200ms; }
.nav-menu-sub { font-family: var(--sans); font-size: 14px; color: var(--s300); }
.nav-menu-footer { padding: 24px 0 0; transform: translateY(12px); opacity: 0; transition: transform 400ms 0.3s cubic-bezier(0.16,1,0.3,1), opacity 400ms 0.3s ease; }
.nav-overlay.open .nav-menu.active .nav-menu-footer { transform: translateY(0); opacity: 1; }
.nav-menu-footer a { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s350); text-decoration: none; transition: color 200ms; }
.nav-menu-footer a:hover { color: var(--white); }

/* MOBILE NAV */
.nav-mobile-menu { display: none; flex-direction: column; padding: 8px 0; }
.nav-mobile-link { font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--white); text-decoration: none; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,0.06); transition: color 200ms; }
.nav-mobile-link:hover { color: var(--ella); }
.nav-mobile-section { font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--s400); margin: 24px 0 8px; }
.nav-mobile-sub { font-size: 13px; color: var(--s200); padding: 12px 0 12px 2px; border-bottom: 1px solid rgba(255,255,255,0.05); font-family: var(--display); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none; display: block; transition: color 200ms; }
.nav-mobile-sub:hover { color: var(--white); }
@media (min-width: 821px) { .nav-mobile-menu { display: none !important; } }
.nav-overlay-footer { display: none; flex-direction: column; gap: 16px; padding: 24px 40px 48px; border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.nav-overlay-footer.visible { display: flex; }
.nav-join-pill { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 32px; border-radius: var(--rad-pill); background: linear-gradient(120deg, var(--ella) 0%, var(--dizzy) 100%); color: var(--black); text-decoration: none; display: inline-block; transition: opacity 200ms, transform 150ms; }
.nav-join-pill:hover { opacity: 0.9; transform: translateY(-1px); }
.nav-members-login-link { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--s300); text-decoration: none; transition: color 200ms; }
.nav-members-login-link:hover { color: var(--white); }
@media (min-width: 821px) { .nav-overlay-footer { display: none !important; } }

/* SIMPLE SITE FOOTER (replaces .footer on updated pages) */
.site-footer { background: var(--black); border-top: 1px solid rgba(255,255,255,0.06); padding: 40px 0; margin-top: 80px; }
.site-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.site-footer-brand { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 5px; color: var(--white); }
.site-footer-copy  { font-family: var(--sans); font-size: 11px; color: var(--s400); }
.site-footer-links { display: flex; align-items: center; gap: 24px; }
.site-footer-links a { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s400); transition: color 240ms; text-decoration: none; }
.site-footer-links a:hover { color: var(--white); }
@media (max-width: 768px) { .site-footer-inner { flex-direction: column; align-items: flex-start; padding: 0 20px; } }

/* ============ VENUE WRAPPER to animated radial gradient bg ============ */
.venue-wrap { position: relative; background: var(--black); overflow: hidden; }

/* Animated glow layer to matches brand page .page-bg-inner pattern */
/* George: venue-glow animation removed to static is enough */
.venue-glow { display: none; }

/* Jack Solomons to green / teal on black */
.venue-jack .venue-glow {
  background:
    radial-gradient(circle at 28% 35%, rgba(87,115,87,0.42), transparent 52%),
    radial-gradient(circle at 72% 55%, rgba(46,120,116,0.26), transparent 52%),
    radial-gradient(circle at 50% 90%, rgba(87,115,87,0.10), transparent 45%),
    var(--black);
}
/* Piano Bar to amber / gold on black */
.venue-piano .venue-glow {
  background:
    radial-gradient(circle at 28% 35%, rgba(182,152,108,0.38), transparent 52%),
    radial-gradient(circle at 72% 55%, rgba(160,123,24,0.22), transparent 52%),
    radial-gradient(circle at 50% 90%, rgba(182,152,108,0.08), transparent 45%),
    var(--black);
}
/* Alfie's to red / oscar on black */
.venue-alfies .venue-glow {
  background:
    radial-gradient(circle at 28% 35%, rgba(186,72,87,0.38), transparent 52%),
    radial-gradient(circle at 72% 55%, rgba(105,29,177,0.26), transparent 52%),
    radial-gradient(circle at 50% 90%, rgba(186,72,87,0.10), transparent 45%),
    var(--black);
}

/* Bottom fade */
.venue-fade {
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, var(--black) 100%);
  position: relative; z-index: 1;
}

/* ============ HERO SECTION ============ */
.hero-section {
  position: relative; z-index: 1;
  padding: 36px 40px 0;
}

/* ============ HERO CARD to tight card proportions ============ */
.art-hero {
  position: relative; z-index: 1;
  max-width: var(--wide-w);
  margin: 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--rad-lg);
  overflow: hidden;
  background-color: var(--s800);
  background-size: cover;
  background-position: center;
}
/* Left-side gradient to protects text, lets photo breathe on right */
.art-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.80) 0%,
    rgba(0,0,0,0.55) 40%,
    rgba(0,0,0,0.12) 68%,
    transparent 100%
  );
}

/* Hero photo to full bleed, parallax via JS */
.art-hero-photo {
  position: absolute;
  left: 0; top: -10%;
  width: 100%; height: 120%;
  object-fit: cover;
  object-position: var(--focal, center top);
  display: block;
  z-index: 1;
}
.art-hero-photo[src=""] { display: none; }

/* Overlay parallax wrapper to JS moves this at a different rate to the photo */
.art-hero-overlay-wrap {
  position: absolute;
  inset: 0; z-index: 2;
  pointer-events: none;
}

/* Bokeh overlay to screen blend, slow scale-breathe animation */
.art-hero-overlay {
  position: absolute;
  top: -12%; left: -6%;
  width: 112%; height: 124%;
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.4s ease;
  animation: overlayScale 20s ease-in-out infinite alternate;
}
.art-hero-overlay.has-img { opacity: 0.35; }

/* Slow zoom to overlay expands gently, creates depth against the parallaxing photo */
@keyframes overlayScale {
  0%   { transform: scale(1);    }
  100% { transform: scale(1.08); }
}

/* Grain dot pattern removed per George to fallback image overlay does the texture */

/* Hero inner to fills the card */
.art-hero-inner {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 28px 36px 32px;
}

/* Top row: Book Now button floated right */
.art-hero-top {
  display: flex;
  justify-content: flex-end;
}

/* Ghost outline Book Now button to venue-coloured */
.btn-booknow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  font-family: var(--display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--rad-pill);
  border: 1.5px solid;
  /* Solid-feeling dark glass so the pill reads as dark grey across any hero photo (mobile included) */
  background: rgba(15, 15, 15, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Venue-specific ghost button colors */
.venue-jack  .btn-booknow { border-color: var(--accent-jack);  color: var(--white); }
.venue-jack  .btn-booknow:hover:not([disabled]) { background: var(--accent-jack); color: var(--white); }
.venue-piano .btn-booknow { border-color: var(--accent-piano); color: var(--white); }
.venue-piano .btn-booknow:hover:not([disabled]) { background: var(--accent-piano); color: var(--white); }
.venue-alfies .btn-booknow { border-color: var(--accent-alfies); color: var(--white); }
.venue-alfies .btn-booknow:hover:not([disabled]) { background: var(--accent-alfies); color: var(--white); }

/* Coming Soon state */
.btn-booknow--soon {
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.32) !important;
  cursor: default; pointer-events: none;
}

/* Private Event state. Venue-accented, locked, no public ticketing. */
.btn-booknow--private {
  background: rgba(15,15,15,0.72) !important;
  cursor: default; pointer-events: none;
  letter-spacing: 0.18em;
}
.btn-booknow--private:hover { background: rgba(15,15,15,0.72) !important; transform: none !important; }
.show-card-book.btn-booknow--private,
.btn-shelf-book.btn-booknow--private {
  background: rgba(15,15,15,0.72) !important;
  color: var(--white) !important;
}

/* CTA shelf VIP enquiry chip. Used in place of the membership pill on private nights. */
.cta-shelf-link--vip { background: rgba(254,227,0,0.06); border-color: rgba(254,227,0,0.28); color: var(--yellow); }
.cta-shelf-link--vip::before { background: var(--yellow); }
.cta-shelf-link--vip:hover { background: rgba(254,227,0,0.14); border-color: rgba(254,227,0,0.48); color: var(--white); }

/* === Explorer Stage frame: backdrop section that holds the Explorer
   Edition callout + show-card on PRS01-001. Curtain image as backdrop,
   Piano Bar gold accent on the callout border. === */
.explorer-stage {
  position: relative;
  isolation: isolate;
  padding: 80px 0 0;
}
.explorer-stage-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('/.netlify/images?url=/assets/images/discovery/explorer-curtain.webp&w=1800&fm=webp&q=80');
  background-size: cover;
  /* Position so the martini-through-curtain focal point sits in the
     upper-left third of the section, where it lands behind the callout. */
  background-position: 25% 35%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  animation: explorerStageFadeIn 1600ms ease-out forwards;
}
@keyframes explorerStageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .explorer-stage-bg { animation: none; opacity: 1; }
}
.explorer-stage-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.45) 100%);
}
.explorer-stage-inner {
  position: relative; z-index: 1;
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 0 40px;
  display: flex; flex-direction: column;
}
.explorer-callout {
  max-width: 720px;
  margin: 0 auto 80px;
  border: 1px solid rgba(182,152,108,0.55);
  border-radius: var(--rad);
  /* Lighter glass so the curtain reads through cleanly */
  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 32px 36px;
  color: var(--bone);
}
.explorer-callout h3 {
  font-family: var(--display); font-weight: 900;
  font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-piano);
  margin: 0 0 16px;
}
.explorer-callout p {
  font-family: var(--sans);
  font-size: 15px; line-height: 1.65;
  color: var(--s150); margin-bottom: 12px;
}
.explorer-callout p:last-child { margin-bottom: 0; }
.explorer-stage .venue-summary {
  padding: 0 40px 80px;
  background: transparent;
}
/* Glass show-card inside the Explorer Stage so the curtain reads through. */
.explorer-stage .venue-summary-inner.show-card {
  background: rgba(23, 22, 22, 0.65) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(182,152,108,0.18);
}
@media (max-width: 760px) {
  .explorer-stage { padding: 56px 0 0; }
  .explorer-callout { margin: 0 auto 56px; padding: 24px 22px; }
  .explorer-stage-inner { padding: 0 20px; }
  .explorer-stage .venue-summary { padding: 0 20px 56px; }
}

/* === Discovery Stage frame: backdrop section that holds the series pill
   and the show-card on JSC01 shows. The masonry stays in the article
   above and floats independently of the backdrop. === */
.discovery-stage {
  position: relative;
  isolation: isolate;
  padding: 80px 0 0;
}
.discovery-stage-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('/.netlify/images?url=/assets/images/discovery/back.webp&w=2400&fm=webp&q=82');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.discovery-stage-bg::after {
  /* radial vignette so the centre (where the pill sits) reads cleanly */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 28%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,0.88) 100%);
}
.discovery-stage-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
}
/* Pill sits centred in the upper portion of the backdrop, with breathing
   room above and below before the show-card slides in. */
.discovery-stage .art-series-pill-wrap {
  margin: 0 auto 96px;
}
/* Venue-summary loses its own outer black plate inside the stage so the
   atmospheric image shows around the show-card. The card itself keeps
   its dark green wash. */
.discovery-stage .venue-summary {
  padding: 0 40px 80px;
  background: transparent;
}
@media (max-width: 760px) {
  .discovery-stage { padding: 56px 0 0; }
  .discovery-stage .art-series-pill-wrap { margin: 0 auto 56px; padding: 0 20px; }
  .discovery-stage .venue-summary { padding: 0 20px 56px; }
}

/* === Series pill: brand-gradient pill that lives under the masonry gallery
   on series-eligible shows (e.g. Discovery Series). Same glow/animation pattern
   as the Members Tickets pill but with per-series colour tokens. === */
.art-series-pill-wrap {
  max-width: var(--wide-w);
  margin: 56px auto 24px;
  padding: 0 40px;
  display: flex;
  justify-content: center;
}
.btn-series-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 800;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--rad-pill);
  padding: 12px 26px;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)) padding-box,
    linear-gradient(120deg, #F07252, #B33347 55%, #F07252) border-box;
  transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease);
}
.btn-series-pill--discovery {
  animation: seriesPillGlowDiscovery 3.2s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(240,114,82,0.20), 0 0 36px rgba(179,51,71,0.14);
}
.btn-series-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.15) saturate(1.15);
  animation-play-state: paused;
}
@keyframes seriesPillGlowDiscovery {
  0%, 100% { box-shadow: 0 0 14px rgba(240,114,82,0.18), 0 0 28px rgba(179,51,71,0.12); }
  50%      { box-shadow: 0 0 34px rgba(240,114,82,0.55), 0 0 64px rgba(179,51,71,0.40); }
}
@media (prefers-reduced-motion: reduce) { .btn-series-pill { animation: none !important; } }
@media (max-width: 600px) {
  .art-series-pill-wrap { padding: 0 20px; }
  .btn-series-pill { width: 100%; justify-content: center; padding: 14px 22px; }
}

/* Bottom content stack */
.art-hero-bottom {
  display: flex; flex-direction: column; gap: 0;
}

/* Date to short allcaps stamp: THU 23 APR */
.art-hero-date {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(12px, 1.3vw, 14px);
  color: rgba(255,255,255,0.60);
  margin-bottom: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Title to Inter 900, massive, slight authority lift */
.art-hero-title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(48px, 8vw, 100px); line-height: 0.88;
  letter-spacing: -0.035em; color: var(--white);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Show Type + Venue to stacked lines, maximum weight */
.art-hero-sub {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--sans);
  font-size: clamp(13px, 1.4vw, 15px); font-weight: 900;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
}
.art-hero-sub-sep { display: none; }

/* Booking meta to horizontal row, label above value (hard-aligned columns) */
.art-hero-meta {
  display: flex; flex-direction: row;
  gap: 28px; align-items: flex-start;
  margin-bottom: 20px;
}
.art-hero-meta-item {
  display: flex; flex-direction: column; gap: 2px;
}
.art-hero-meta-lbl {
  font-family: var(--sans); font-weight: 700;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  display: block;
}
.art-hero-meta-val {
  font-family: var(--sans); font-weight: 800;
  font-size: 15px; color: var(--white);
  text-transform: uppercase; letter-spacing: 0.02em;
  display: block;
}

/* Part of Soho Live to bottom right of card */
.art-hero-discovery {
  position: absolute; bottom: 32px; right: 36px;
  font-family: var(--sans); font-weight: 600;
  font-size: 14px; color: rgba(255,255,255,0.55);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255,255,255,0.2);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
  white-space: nowrap;
}
.art-hero-discovery:hover { color: var(--white); text-decoration-color: rgba(255,255,255,0.6); }

/* Members Tickets pill to drawn out, brand gradient border, gentle pulse to call attention */
.art-hero-members {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 800;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--rad-pill);
  padding: 11px 24px;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)) padding-box,
    linear-gradient(120deg, var(--ella), var(--oscar) 45%, var(--dizzy)) border-box;
  align-self: flex-start;
  animation: membersGlow 3s ease-in-out infinite;
  transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease);
}
.art-hero-members:hover {
  transform: translateY(-1px);
  filter: brightness(1.15) saturate(1.15);
  animation-play-state: paused;
}
@keyframes membersGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(252, 56, 161, 0); }
  50%      { box-shadow: 0 0 22px rgba(115, 251, 236, 0.28), 0 0 40px rgba(105, 29, 177, 0.18); }
}
@media (prefers-reduced-motion: reduce) { .art-hero-members { animation: none; } }
.art-hero-members--hidden { display: none; }

/* ============ CTA SHELF ============ */
.cta-shelf {
  position: relative; z-index: 1;
  padding: 28px 40px 0;
}
.cta-shelf-inner {
  max-width: var(--wide-w);
  margin: 0 auto;
  display: flex; align-items: center;
  gap: 32px; flex-wrap: wrap;
}

/* Primary book button in shelf to dark grey pill matching cta-shelf-link hover state */
.btn-shelf-book {
  display: inline-flex; align-items: center;
  padding: 13px 30px;
  font-family: var(--display); font-weight: 800;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.30);
  border-radius: var(--rad-pill);
  text-decoration: none; flex-shrink: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.btn-shelf-book:hover { background: rgba(255,255,255,0.18); transform: scale(1.02); }
/* Venue-tinted hover so the primary CTA picks up the variant accent on hover */
.venue-jack   .btn-shelf-book:hover { background: var(--accent-jack);   border-color: var(--accent-jack); }
.venue-piano  .btn-shelf-book:hover { background: var(--accent-piano);  border-color: var(--accent-piano); }
.venue-alfies .btn-shelf-book:hover { background: var(--accent-alfies); border-color: var(--accent-alfies); }
.btn-shelf-book.btn-booknow--soon {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.28) !important;
  cursor: default; pointer-events: none; transform: none;
}

/* Secondary links in shelf to chip-style with subtle border + hover lift */
.cta-shelf-links {
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.cta-shelf-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700;
  font-size: 11px; color: var(--s200);
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--rad-pill);
  padding: 9px 16px; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.cta-shelf-link:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
  color: var(--white);
  transform: translateY(-1px);
}
.cta-shelf-link::before {
  content: ''; display: inline-block;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-jack);
  flex-shrink: 0;
}
.venue-piano  .cta-shelf-link::before { background: var(--accent-piano); }
.venue-alfies .cta-shelf-link::before { background: var(--accent-alfies); }
/* Membership chip uses the brand gradient dot */
.cta-shelf-link--members::before {
  width: 6px; height: 6px;
  background: linear-gradient(120deg, var(--ella), var(--oscar) 45%, var(--dizzy));
}
.cta-shelf-link--share { display: none; } /* George: removed share */

/* ============ ARTICLE BODY ============ */
.article { padding: 44px 40px 24px; position: relative; z-index: 1; }
.article-inner { max-width: var(--wide-w); margin: 0 auto; }
.art-read { max-width: var(--read-w); margin: 0 auto; }

/* Body paragraph to Rethink Sans */
.art-p {
  font-family: var(--sans);
  font-size: 19px; line-height: 1.68;
  color: var(--s150); margin-bottom: 28px;
}
.art-p:last-of-type { margin-bottom: 0; }
.art-p strong { color: var(--white); font-weight: 600; }

/* Pull quote to Prata italic, venue-accented left rule */
.art-pullquote {
  max-width: var(--callout-w);
  margin: 64px auto;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--accent-jack);
}
.venue-piano  .art-pullquote { border-left-color: var(--accent-piano); }
.venue-alfies .art-pullquote { border-left-color: var(--accent-alfies); }
.art-pullquote p {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.3; color: var(--white);
}
.art-pullquote-attr {
  font-family: var(--gothic); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--s350); margin-top: 12px;
}

/* Artist paragraph */
.art-artist-p {
  font-family: var(--sans);
  font-size: 17px; line-height: 1.65; color: var(--s250);
}

/* Ghost outline button in body copy */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px;
  font-family: var(--display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--s150); text-decoration: none;
  border: 1px solid var(--s400); border-radius: var(--rad-pill);
  background: transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-ghost:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,0.05); }

/* ============ MEDIA GRID ============ */
.art-media {
  max-width: var(--wide-w);
  margin: 56px auto 0;
  display: grid;
  gap: 6px;
}

/* Default 4-cell ("anchor"): show2 + yt on top, show1 spans the wide bottom,
   artist tall on the right. Reads as masonry through varied spans. */
.art-media--4 {
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-rows: 200px 260px;
  grid-template-areas:
    "show2 yt    artist"
    "show1 show1 artist";
}

/* Default 3-cell (no YT): three equal-width photos in a single row. */
.art-media--3 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 280px;
  grid-template-areas: "show1 show2 artist";
}

/* === Per-variant masonry themes via data-layout. Each variant in
   /data/variants.json carries a media_layout token; show.js mirrors it
   here so the gallery feels different per night without changing markup.
   Themes apply at desktop only; mobile keeps the existing single-flow layouts. === */
@media (min-width: 961px) {
  /* All themed layouts read as masonry: unbalanced, varied spans and
     row heights so each variant feels distinct without slipping into a
     uniform grid. */

  /* anchor: default layout (defined above). show1 wide bottom, artist tall right. */

  /* mosaic: show1 tall left feature, yt wide top, show2 + artist along the bottom. */
  .art-media[data-layout="mosaic"].art-media--4 {
    grid-template-columns: 1fr 1.2fr 1fr;
    grid-template-rows: 200px 240px;
    grid-template-areas:
      "show1 yt    yt"
      "show1 show2 artist";
  }
  .art-media[data-layout="mosaic"].art-media--3 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    grid-template-areas:
      "show1 show2 show2"
      "show1 artist artist";
  }

  /* strip: show1 takes a 2x2 feature, yt + show2 stack top right, artist
     wide along the bottom. Asymmetric, never a clean grid. */
  .art-media[data-layout="strip"].art-media--4 {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    grid-template-areas:
      "show1 show2 yt"
      "show1 artist artist";
  }
  .art-media[data-layout="strip"].art-media--3 {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    grid-template-areas:
      "show1 show2 show2"
      "show1 artist artist";
  }

  /* focus: dominant feature tile (show1) anchors the top-left, supporting
     cells stack to the right and bottom. */
  .art-media[data-layout="focus"].art-media--4 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px 220px;
    grid-template-areas:
      "show1 show1 yt"
      "show2 artist artist";
  }
  .art-media[data-layout="focus"].art-media--3 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    grid-template-areas:
      "show1 show1 artist"
      "show2 show2 artist";
  }

  /* duo: pared-back layouts for variants where the gallery is intentionally minimal. */
  .art-media[data-layout="duo"].art-media--4 {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 220px 200px;
    grid-template-areas:
      "show1 artist"
      "show1 show2";
  }
  .art-media[data-layout="duo"].art-media--3 {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 220px 200px;
    grid-template-areas:
      "show1 artist"
      "show2 artist";
  }
}

/* 2 cells: side by side. Override cell-level named grid-area assignments. */
.art-media--2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 280px;
}
.art-media--2 .art-media-cell { grid-area: auto !important; }

/* 1 cell: full width, shorter. */
.art-media--1 {
  grid-template-columns: 1fr;
  grid-template-rows: 240px;
}
.art-media--1 .art-media-cell { grid-area: auto !important; }
.art-media-cell {
  border-radius: var(--rad);
  overflow: hidden;
  position: relative;
  background: var(--s700);
}
.art-media-cell img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* George: removed VENUE/ARTIST hover labels to they cluttered the gallery. */

.art-media-cell.show1  { grid-area: show1; }
.art-media-cell.show2  { grid-area: show2; }
.art-media-cell.artist { grid-area: artist; }
.art-media-cell.yt     { grid-area: yt; background: var(--black); }

.art-media-cell.yt iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: none;
}
.art-media-cell.yt .yt-thumb {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.art-media-cell.yt .yt-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.art-media-cell.yt .yt-play {
  position: absolute;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0,0,0,0.72);
  border: 2px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.art-media-cell.yt:hover .yt-play {
  background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5);
  transform: scale(1.1);
}
.yt-play svg { margin-left: 4px; }

/* ============ PLAN YOUR VISIT ============ */
.plan-visit {
  background: var(--black);
  padding: 40px 40px 80px;
}
.plan-visit-inner {
  max-width: var(--wide-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
}

/* Tall portrait looping video to 9:16 */
.plan-visit-video {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--rad-lg);
  overflow: hidden;
  background: var(--s800);
  flex-shrink: 0;
}
.plan-visit-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Placeholder state when no video yet to hidden, video covers it */
.plan-visit-video-placeholder {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  font-family: var(--gothic); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--s400);
}

.plan-visit-content {}
.plan-visit-eyebrow {
  font-family: var(--gothic);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s350); margin-bottom: 14px;
}
.plan-visit-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(36px, 4.5vw, 64px); line-height: 0.92;
  letter-spacing: -0.04em; color: var(--white);
  text-transform: uppercase; margin-bottom: 44px;
}
.plan-visit-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 56px;
}
.plan-block-label {
  font-family: var(--gothic);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--s350); margin-bottom: 7px;
}
.plan-block-text {
  font-family: var(--sans);
  font-size: 15px; line-height: 1.6; color: var(--s200);
}
.plan-block-text a { color: var(--s150); text-decoration: underline; text-underline-offset: 3px; }
.plan-block-text a:hover { color: var(--white); }

/* Small print below info blocks */
.plan-visit-smallprint {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--s700);
}
.plan-visit-smallprint p {
  font-family: var(--sans);
  font-size: 12px; line-height: 1.7;
  color: var(--s350);
  margin-bottom: 10px;
}
.plan-visit-smallprint p:last-child { margin-bottom: 0; }
.plan-visit-smallprint a { color: var(--s300); text-decoration: underline; text-underline-offset: 2px; }
.plan-visit-smallprint a:hover { color: var(--s150); }

.plan-visit-social {
  display: flex; gap: 14px; align-items: center;
  margin-top: 18px; padding-left: 2px;
}
.plan-visit-social a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.plan-visit-social a:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}
.plan-visit-social svg { display: block; }

.plan-visit-video-btns {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 14px;
}
.btn-ghost--sm {
  padding: 10px 22px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  justify-content: center; text-align: center;
}
/* Membership: brand gradient border per Brand Guidelines (Feature Panel border) */
.btn-ghost--oscar {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(120deg, var(--ella), var(--oscar) 45%, var(--dizzy)) border-box;
  color: var(--white);
  font-weight: 800;
  position: relative;
  transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease);
}
.btn-ghost--oscar:hover {
  transform: translateY(-1px);
  filter: brightness(1.1) saturate(1.1);
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(120deg, var(--ella), var(--oscar) 45%, var(--dizzy)) border-box;
  color: var(--white);
}

/* ============ VENUE SUMMARY STRIP to back in venue colour, card-width ============ */
.venue-summary {
  padding: 40px 40px;
  background: var(--black);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.venue-summary-inner {
  max-width: var(--wide-w); margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px;
  padding: 32px 48px;
  border-radius: var(--rad-lg);
}
.venue-summary.venue-jack   .venue-summary-inner { background: #0A1A0A; }
.venue-summary.venue-piano  .venue-summary-inner { background: #171616; }
.venue-summary.venue-alfies .venue-summary-inner { background: #0E0308; }
.venue-summary-cta { display: block; }
.venue-summary-details {
  display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.venue-summary-item {}
.venue-summary-lbl {
  font-family: var(--gothic);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--s400); margin-bottom: 5px;
}
.venue-summary-val {
  font-family: var(--sans); font-weight: 700;
  font-size: 14px; color: var(--s150);
  text-transform: uppercase; letter-spacing: 0.02em;
}
/* Prominent white Book Tickets button in summary strip */
.btn-book-tickets {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 36px;
  font-family: var(--display); font-weight: 800;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--black); background: var(--white);
  border: none; border-radius: var(--rad-pill);
  text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-out);
  white-space: nowrap;
}
.btn-book-tickets:hover { background: var(--bone); transform: scale(1.03); }
.btn-book-tickets.btn-booknow--soon {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.35) !important;
  cursor: default; pointer-events: none; transform: none;
}

/* ========== GUESTLIST CARD (free Saturday Selectors / JSC02 / JSC03 formats) ========== */
.guestlist-card { padding: 32px 40px 16px; position: relative; z-index: 1; scroll-margin-top: 24px; }
.guestlist-card-inner {
  max-width: var(--callout-w);
  margin: 0 auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--rad-lg);
  padding: 36px 36px;
}
.guestlist-eyebrow {
  font-family: var(--gothic);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-jack); margin: 0 0 14px;
}
.guestlist-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 0.96; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--white);
  margin: 0 0 14px;
}
.guestlist-lead {
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  color: var(--s200); margin: 0 0 24px;
}
.guestlist-form { display: grid; gap: 16px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.form-grid-2 > div, .form-grid-3 > div { display: flex; flex-direction: column; gap: 6px; }
.form-lbl {
  font-family: var(--display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--s200);
}
.form-input, .form-select, .form-textarea {
  background: var(--s900); color: var(--white);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--rad);
  padding: 12px 14px;
  font-family: var(--sans); font-size: 15px;
  width: 100%;
}
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: 2px solid var(--accent-jack); outline-offset: 1px;
}
.form-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
  color: var(--s200); cursor: pointer; margin: 4px 0;
}
.form-check input[type="checkbox"] {
  margin-top: 3px; width: 16px; height: 16px;
  accent-color: var(--accent-jack);
  flex-shrink: 0;
}
.form-check-text { user-select: none; }
.policy-block {
  margin-top: 4px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--rad);
}
.policy-title {
  font-family: var(--display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white); margin: 0 0 8px;
}
.policy-text {
  font-family: var(--sans); font-size: 13px; line-height: 1.55;
  color: var(--s250); margin: 0 0 12px;
}
.guestlist-error { color: #ff6c8d; font-size: 13px; font-family: var(--sans); margin: 4px 0 0; }
.gl-confirm-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(46,107,87,0.18);
  border: 2px solid var(--accent-jack);
  color: var(--accent-jack);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
  margin: 8px 0 18px;
}
.guestlist-submit {
  margin-top: 6px;
  padding: 14px 28px;
  font-family: var(--display); font-weight: 800;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--black); background: var(--white);
  border: 0; border-radius: var(--rad-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.guestlist-submit:hover:not(:disabled) { background: var(--bone); transform: scale(1.01); }
.guestlist-submit:disabled { opacity: 0.55; cursor: progress; }
.guestlist-success { text-align: center; }
.guestlist-success .guestlist-eyebrow { color: var(--accent-jack); }
.guestlist-success .gl-confirm-icon { margin: 4px auto 18px; }
@media (max-width: 600px) {
  .guestlist-card { padding: 24px 16px 12px; }
  .guestlist-card-inner { padding: 24px 22px; }
  .guestlist-submit { width: 100%; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
}

/* ========== SHOW CARD (bottom venue-summary, Louise Messenger style) ========== */
.show-card {
  --card-accent: var(--accent-jack);
  position: relative;
  display: flex; flex-direction: column;
  gap: 0;
  padding: 56px 56px 0;
  border-radius: var(--rad-lg);
  background: var(--black);
}
.venue-summary.venue-jack   .show-card { --card-accent: var(--accent-jack); background: rgba(46, 107, 87, 0.16); }
.venue-summary.venue-piano  .show-card { --card-accent: var(--accent-piano); background: #171616; }
.venue-summary.venue-alfies .show-card { --card-accent: var(--accent-alfies); background: rgba(186, 72, 87, 0.18); }
.show-card-eyebrow {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--s300);
  margin: 0 0 18px;
}
.show-card-title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.92; letter-spacing: -0.025em;
  color: var(--white);
  text-transform: uppercase;
  margin: 0 0 22px;
}
.show-card-sub {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(12px, 1.3vw, 14px);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white);
  margin: 0 0 32px;
}
.show-card-sub span { color: var(--white); }
.show-card-sub-sep { color: rgba(255,255,255,0.45); }
.show-card-sub-sep { margin: 0 8px; color: var(--s400); }
/* Piano Bar variants: stack the show-card sub line so the venue title
   sits clean and left-aligned, no leading bullet. */
.venue-summary.venue-piano .show-card-sub { display: flex; flex-direction: column; gap: 4px; }
.venue-summary.venue-piano .show-card-sub-sep { display: none; }
.show-card-body { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0 0 32px; flex-wrap: wrap; }
.show-card-meta { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 240px; }
.show-card-meta-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.show-card-meta-lbl {
  font-family: var(--display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--white);
  min-width: 100px;
}
.show-card-meta-val { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--white); }
/* Removed mid-card divider + price block per George */
.show-card-book {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  font-family: var(--display); font-weight: 800;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  border: 1.5px solid var(--card-accent);
  border-radius: var(--rad-pill); background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.show-card-book:hover { background: var(--card-accent); color: var(--white); transform: translateY(-1px); }
.show-card-book.btn-booknow--soon {
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.32) !important;
  cursor: default; pointer-events: none; background: transparent !important; transform: none !important;
}
.show-card { padding-bottom: 32px; }
.show-card-accent-line { display: none; }
/* Hide the old venue-summary-cta/details when show-card is used */
.show-card ~ .venue-summary-cta, .show-card ~ .venue-summary-details { display: none; }

@media (max-width: 960px) {
  .plan-visit-inner { grid-template-columns: 1fr; gap: 48px; justify-items: center; }
  .plan-visit-inner > div:first-child { width: 100%; max-width: 280px; display: flex; flex-direction: column; align-items: stretch; }
  .plan-visit-video { max-width: 280px; margin: 0 auto; }
  .plan-visit-video-btns { align-items: stretch; }
  .plan-visit-social { justify-content: center; padding-left: 0; }
  .plan-visit { padding: 64px 24px 56px; }
  .venue-summary { padding: 40px 24px; }
  .venue-summary-inner { gap: 24px; }
}
@media (max-width: 600px) {
  .plan-visit-blocks { grid-template-columns: 1fr; gap: 28px; }
  /* Show card (bottom) to tighten + full-width book button */
  .show-card { padding: 32px 22px 0; }
  .show-card-title { font-size: clamp(36px, 10vw, 56px); margin-bottom: 16px; }
  .show-card-sub { margin-bottom: 22px; font-size: 11px; }
  .show-card-meta { gap: 8px; margin-bottom: 26px; }
  .show-card-meta-lbl { font-size: 11px; min-width: 84px; }
  .show-card-meta-val { font-size: 14px; }
  .show-card-body { gap: 18px; margin-bottom: 22px; }
  .show-card-book { width: 100%; justify-content: center; padding: 14px 24px; }
  .show-card-accent-line { left: 22px; right: 22px; }
  /* Tighten venue summary wrapper on mobile */
  .venue-summary { padding: 18px 16px; }
  .venue-summary-inner { padding: 22px 22px; gap: 18px; align-items: stretch; }
  .venue-summary-cta { width: 100%; display: flex; justify-content: center; }
  .btn-book-tickets {
    width: 100%; justify-content: center;
    padding: 15px 24px;
    font-size: 13px; letter-spacing: 0.14em;
  }
  .venue-summary-details { gap: 18px 24px; }
  .plan-visit { padding: 32px 16px 56px; }
  /* Remove the giant gap between hero card / cta-shelf / article and venue summary */
  .article { padding: 24px 20px 24px; }
  .cta-shelf { padding: 16px 20px 0; }
}

/* ============ FOOTER ============ */
.footer {
  margin-top: 120px;
  border-top: 1px solid var(--s700);
  padding: 64px 40px 40px;
}
.footer-inner {
  max-width: var(--shell-w); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  gap: 48px;
}
.footer-brand-mark {
  font-family: var(--display); font-weight: 800;
  font-size: 14px; letter-spacing: 0.08em;
  color: var(--white); text-transform: uppercase; margin-bottom: 14px;
}
.footer-brand-blurb {
  font-family: var(--serif); font-size: 14px;
  line-height: 1.55; color: var(--s250);
  max-width: 280px; margin-bottom: 22px;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--s500); border-radius: 50%;
  color: var(--s200); font-size: 11px; text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--white); color: var(--black); }
.footer-col-label {
  font-family: var(--gothic); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--s350); margin-bottom: 14px;
}
.footer-col a {
  display: block; padding: 5px 0;
  font-family: var(--sans); font-size: 13px;
  color: var(--s200); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  max-width: var(--shell-w); margin: 48px auto 0;
  padding-top: 24px; border-top: 1px solid var(--s700);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--gothic); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--s400);
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { color: var(--s400); text-decoration: none; transition: color var(--dur) var(--ease); }
.footer-legal a:hover { color: var(--white); }

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  .hero-section { padding: 24px 24px 0; }
  .art-hero { max-width: 100%; aspect-ratio: 4 / 3; }
  .art-hero-inner { padding: 22px 24px 26px; }
  .art-hero-title { font-size: clamp(32px, 7vw, 56px); }
  .cta-shelf { padding: 22px 24px 0; }
  .article { padding: 40px 24px 64px; }
  /* Gallery picks up the same horizontal rhythm as the hero card and
     gets a little more breathing room from the article body. */
  .art-media { margin-top: 56px; padding: 0; }
  .art-media--4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 150px 180px;
    grid-template-areas:
      "show1 show1"
      "yt    show2"
      "artist artist";
  }
  .art-media--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px;
    grid-template-areas:
      "show1 show2"
      "artist artist";
  }
  .art-media--2 { grid-template-rows: 200px; }
  .art-media--1 { grid-template-rows: 200px; }
  .footer { padding: 48px 24px 32px; margin-top: 80px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; order: 10; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .gnav-inner { padding: 0 24px; }
}
@media (max-width: 600px) {
  .gnav-links { display: none; }
  .art-hero { aspect-ratio: 4 / 5; }
  .art-hero-inner { padding: 20px 22px 24px; }
  .art-hero-title { font-size: clamp(36px, 9vw, 56px); margin-bottom: 10px; }
  .art-hero-sub { margin-bottom: 18px; font-size: 12px; }
  /* Meta stacks vertically on mobile */
  .art-hero-meta { flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .art-hero-meta-item { flex-direction: row; align-items: baseline; gap: 8px; }
  .art-hero-meta-lbl { font-size: 10px; white-space: nowrap; }
  .art-hero-meta-val { font-size: 14px; }
  .cta-shelf { padding: 20px 20px 0; }
  .cta-shelf-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-shelf-book { width: 100%; justify-content: center; padding: 15px 24px; font-size: 13px; }
  /* All three shelf actions stretch to full width on mobile per George */
  .cta-shelf-links { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .cta-shelf-link { font-size: 13px; width: 100%; justify-content: center; padding: 14px 22px; }
  .article { padding: 36px 20px 48px; }
  .art-p { font-size: 17px; line-height: 1.65; }
  .art-p { font-size: 17px; }
  /* Phone: keep the gallery aligned with the hero card edges and give
     it enough vertical air from the article body. */
  .art-media { margin-top: 48px; padding: 0; }
  .art-media--4 {
    grid-template-columns: 1fr;
    grid-template-rows: 200px 180px 180px 180px;
    grid-template-areas: "show1" "artist" "show2" "yt";
  }
  .art-media--3 {
    grid-template-columns: 1fr;
    grid-template-rows: 200px 180px 180px;
    grid-template-areas: "show1" "show2" "artist";
  }
  .art-media--2 { grid-template-columns: 1fr; grid-template-rows: 200px 180px; }
  .art-media--1 { grid-template-rows: 220px; }
}