/* =========================================================
   TAKE ME BACK BINGO · Mixtape Liner Notes
   Design System: Tokens · 1.25 Type Scale · 8px Grid
   ========================================================= */

:root {
  /* ---- Color tokens (semantic, all derived from logo) ---- */
  --bg:               #141111;
  --bg-elev:          #1B1717;
  --surface-light:    #F2EADB;   /* warm cream, like aged paper */
  --surface-card:     #EFE5D2;
  --ink:              #181212;
  --ink-soft:         rgba(24,18,18,.66);
  --ink-faint:        rgba(24,18,18,.42);

  --primary:          #7B2D8E;
  --primary-700:      #5E2270;
  --primary-100:      #EFE0F4;

  --accent:           #C9962B;   /* logo gold */
  --accent-600:       #A87B1E;

  --tape-yellow:      #EFC53A;   /* moving tape */
  --tape-yellow-hot:  #FFD84D;
  --tape-yellow-warm: #BC8A1E;

  --text:             #F2EADB;
  --text-muted:       #A89C8A;
  --rule:             rgba(242,234,219,.14);
  --rule-strong:      rgba(242,234,219,.32);

  /* ---- Type scale 1.25 ---- */
  --fs-11: .6875rem;
  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-38: 2.375rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-76: 4.75rem;
  --fs-display: clamp(4rem, 11vw, 8.5rem);
  --fs-script:  clamp(2.25rem, 5.2vw, 4.5rem);

  /* ---- Spacing 8px grid ---- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px;  --s-7: 64px; --s-8: 96px; --s-9: 128px;

  /* ---- Radii ---- */
  --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px;

  /* ---- Motion tokens ---- */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 720ms;

  /* ---- Fonts ---- */
  --font-display: 'Bungee', system-ui, sans-serif;
  --font-script:  'Permanent Marker', cursive;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-body:    'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Anchor targets clear the ~72px sticky nav */
:target,
section[id],
footer[id] { scroll-margin-top: 88px; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* =========================================================
   BACKGROUND TEXTURE — paper grain + halftone, very subtle
   ========================================================= */
.hero__grain {
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .96  0 0 0 0 .92  0 0 0 0 .82  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .07;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* =========================================================
   COMPONENT · Button
   ========================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-14);
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn--lg { padding: 18px 30px; font-size: var(--fs-14); letter-spacing: .14em; }

.btn--primary {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.10) 100%),
    linear-gradient(180deg, #F2C947 0%, #D8A52E 55%, #B6831C 100%);
  border-color: rgba(24,18,18,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(168,123,30,.55),
    0 1px 0 rgba(255,255,255,.35),
    0 8px 18px -8px rgba(168,123,30,.55),
    0 14px 28px -14px rgba(24,18,18,.45);
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.btn--primary > * { position: relative; z-index: 2; }
.btn--primary:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.08) 100%),
    linear-gradient(180deg, #FFD84D 0%, #E2B131 55%, #BC8A1E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(168,123,30,.6),
    0 2px 0 rgba(255,255,255,.4),
    0 14px 24px -10px rgba(168,123,30,.6),
    0 22px 40px -18px rgba(24,18,18,.5);
}
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(168,123,30,.7),
    0 4px 10px -6px rgba(168,123,30,.5);
}
.btn--primary:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(168,123,30,.55),
    0 0 0 3px rgba(24,18,18,.85),
    0 0 0 5px var(--tape-yellow-hot);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}

/* =========================================================
   COMPONENT · Typography helpers
   ========================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-4);
}
.eyebrow--dark { color: var(--primary); }
.eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-38), 5.4vw, var(--fs-60));
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0 0 var(--s-5);
  max-width: 22ch;
}
.h2 em {
  font-family: var(--font-script);
  font-style: normal;
  color: var(--primary);
  display: inline-block;
  transform: rotate(-2deg);
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--s-6);
  min-height: 72px;
  background: rgba(20,17,17,.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule);
  overflow: visible;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
}
.nav__logo-img {
  height: 110px;
  width: auto;
  display: block;
  /* Reduced negative top margin — was -28px which pulled the logo too
     high above the nav baseline. -10px keeps a slight overhang without
     making the logo float well above the nav. */
  margin: -10px 0 -4px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__logo:hover .nav__logo-img {
  transform: rotate(-3deg) scale(1.04);
}
@media (max-width: 768px) {
  .nav { min-height: 60px; padding: 4px var(--s-4); }
  .nav__logo-img { height: 88px; margin: -8px 0 -4px; }
}

.nav__links {
  display: flex;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.nav__links a {
  position: relative;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
  padding: 4px 0;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 25%; right: 25%; bottom: -3px;
  height: 1px;
  background: var(--accent);
  opacity: .75;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { font-family: var(--font-mono); letter-spacing: .14em; }

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav { padding: var(--s-3) var(--s-4); }
  .nav__logo-img { height: 72px; margin: -6px 0 -4px; }
}

/* =========================================================
   HERO · J-Card layout
   ========================================================= */
.hero {
  position: relative;
  padding: var(--s-7) var(--s-6) var(--s-6);
  background:
    radial-gradient(1200px 700px at 90% 0%, rgba(123,45,142,.18), transparent 60%),
    radial-gradient(900px 600px at -10% 100%, rgba(201,150,43,.12), transparent 55%),
    var(--bg);
  overflow: hidden;
  isolation: isolate;
}

/* Hero media · slim placeholder strip, auto-expands when real media exists */
.hero-media {
  position: relative;
  max-width: 1280px;
  margin: 0 auto var(--s-6);
  height: 88px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 16px 36px -22px rgba(0,0,0,.55);
  z-index: 2;
  transition: height var(--dur-base) var(--ease-out), aspect-ratio var(--dur-base) var(--ease-out);
}
/* The moment real media is added, restore the full hero frame */
.hero-media:has(img),
.hero-media:has(video),
.hero-media:has(iframe) {
  height: auto;
  aspect-ratio: 16 / 7;
  border-radius: 20px;
  margin-bottom: var(--s-7);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.6);
}
.hero-media img:not(.hero-reel__logo),
.hero-media video,
.hero-media iframe {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.hero-media__placeholder {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.025) 0 2px,
      transparent 2px 14px),
    radial-gradient(ellipse at 50% 50%, rgba(123,45,142,.22), transparent 60%),
    linear-gradient(180deg, var(--bg-elev), var(--bg));
}
.hero-media__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--accent);
}
.hero-media__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .hero-media { aspect-ratio: 16 / 9; }
}

/* === Hero sizzle reel — cinematic frame on top of .hero-media === */
.hero-media--reel {
  background: #000;
}
/* Foreground video · contained (no crop), so the full dance frame is visible
   in crystal-clear quality. Sits over the blurred backdrop clone. */
.hero-reel {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: saturate(1.05) contrast(1.03);
  z-index: 1;
}
/* Backdrop · same video, blown up + blurred to fill the letterbox bars
   with a tasteful color extension instead of dead black. */
.hero-reel__bg {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.15);
  filter: blur(28px) saturate(1.25) brightness(.55);
  z-index: 0;
  pointer-events: none;
}
/* Soft inner vignette so the video sinks into the J-card frame
   and the chrome reads cleanly over the brightest moments. */
.hero-reel__vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%, transparent 70%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: multiply;
}
.hero-reel__chrome {
  position: absolute;
  top: clamp(14px, 2.2vw, 22px);
  left: clamp(14px, 2.2vw, 22px);
  right: clamp(14px, 2.2vw, 22px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  pointer-events: none;
  z-index: 2;
}
.hero-reel__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .5em .8em;
  background: rgba(10,8,8,.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
}
.hero-reel__rec {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255,59,48,.6);
  animation: hero-reel-rec 1.6s ease-out infinite;
}
@keyframes hero-reel-rec {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,48,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
.hero-reel__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  padding: .5em .8em;
  background: rgba(10,8,8,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
}
.hero-reel__logo {
  position: absolute;
  bottom: clamp(2px, 0.4vw, 6px);
  right: clamp(8px, 1.2vw, 14px);
  top: auto;
  left: auto;
  height: clamp(52px, 6.4vw, 84px);
  width: auto;
  max-width: 260px;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.75));
  z-index: 4;
  opacity: .82;
}
.hero-reel__sound {
  position: absolute;
  bottom: clamp(14px, 2.2vw, 22px);
  left: clamp(14px, 2.2vw, 22px);
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10,8,8,.6);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  z-index: 3;
}
.hero-reel__sound:hover { transform: scale(1.06); background: rgba(10,8,8,.78); border-color: var(--accent); color: var(--accent); }
.hero-reel__sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-reel__sound .hero-reel__sound-on { display: none; }
.hero-reel__sound[aria-pressed="true"] .hero-reel__sound-on { display: block; color: var(--accent); }
.hero-reel__sound[aria-pressed="true"] .hero-reel__sound-off { display: none; }
@media (max-width: 540px) {
  .hero-reel__meta { display: none; }
}

/* spec line — top, like a tape label edge */
.spec-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 1280px;
  margin: 0 auto var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 2;
}
.spec-line__rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.spec-line__item { white-space: nowrap; }

/* grid */
.hero__grid {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-8);
  align-items: start;
  z-index: 2;
}
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* ======== LEFT · the J-card itself ======== */
.jcard__title {
  margin: 0 0 var(--s-5);
  line-height: .9;
}
/* "TAKE ME BACK" — purple fill with gold stroke + soft drop shadow for definition */
.jcard__title-script {
  display: block;
  font-family: var(--font-script);
  font-size: var(--fs-script);
  color: var(--primary);
  -webkit-text-stroke: 3px var(--accent);
  paint-order: stroke fill;
  transform: rotate(-2.5deg);
  margin-bottom: var(--s-3);
  margin-left: 6px;
  letter-spacing: .02em;
  text-transform: uppercase;
  filter:
    drop-shadow(2px 2px 0 rgba(0,0,0,.45))
    drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.jcard__title-block {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  letter-spacing: -.025em;
  color: var(--text);
  -webkit-text-stroke: 2px var(--accent);
  paint-order: stroke fill;
  /* Solid 3D extrude - dense 1px steps so the purple side reads as one clean
     block (the old 5px/10px pair left gaps that looked stepped on curves),
     front half lighter, back half darker, plus a soft cast shadow for depth. */
  text-shadow:
    1px 1px 0 var(--primary),
    2px 2px 0 var(--primary),
    3px 3px 0 var(--primary),
    4px 4px 0 var(--primary),
    5px 5px 0 var(--primary),
    6px 6px 0 var(--primary-700),
    7px 7px 0 var(--primary-700),
    8px 8px 0 var(--primary-700),
    9px 9px 0 var(--primary-700),
    10px 10px 0 var(--primary-700),
    11px 15px 16px rgba(0,0,0,.38);
  line-height: .85;
  text-transform: uppercase;
}
.jcard__title-block em {
  font-style: normal;
  color: var(--text);
}
/* 'Nights' cursive flourish - vintage club / Studio 54 sign vibe.
   Allura is an elegant calligraphic Google Font rendered in brand
   gold with a soft drop-shadow so it reads as illuminated signage
   rather than competing with the block BINGO above. */
.jcard__title-cursive {
  display: block;
  font-family: 'Allura', 'Great Vibes', 'Brush Script MT', cursive;
  font-size: calc(var(--fs-display) * 0.85);
  color: var(--accent);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.01em;
  line-height: .9;
  margin-top: -.08em;
  text-shadow:
    2px 4px 8px rgba(0,0,0,.45),
    0 0 24px rgba(201,150,43,.25);
  text-transform: none;
}

.jcard__lede {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-20);
  color: var(--text-muted);
  max-width: 48ch;
  margin: 0 0 var(--s-6);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ======== Premium Bingo Card · flippable to gallery preview ======== */
.bingocard {
  margin: 0 0 var(--s-6);
  max-width: 580px;
  perspective: 1200px;
}
.bingocard__flipper {
  position: relative;
  display: block;
  width: 100%;
  /* match the paper aspect (square card + header + foot) */
  aspect-ratio: 1 / 1.25;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(.77, 0, .175, 1);
  text-align: left;
  font: inherit;
  color: inherit;
}
.bingocard__flipper:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
  border-radius: 10px;
}
.bingocard[data-flipped="true"] .bingocard__flipper {
  transform: rotateY(180deg);
}
.bingocard__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* iOS Safari intermittently ignores backface-visibility on 3D flips, which
     lets the bingo grid bleed through the photo. Belt-and-suspenders: hard-hide
     the inactive face with opacity, swapped instantly at the flip midpoint
     (~half of the 500ms rotate, when the card is edge-on) so neither face ever
     shows through the other. */
  transition: opacity 0s linear 250ms;
}
.bingocard:not([data-flipped="true"]) .bingocard__face--back { opacity: 0; }
.bingocard[data-flipped="true"] .bingocard__face--front { opacity: 0; }
/* Reduced motion: no spin - turn instantly and cross-fade the faces. */
@media (prefers-reduced-motion: reduce) {
  .bingocard__flipper { transition: none; }
  .bingocard__face { transition: opacity 220ms ease; }
}
.bingocard__face--front { display: flex; }
.bingocard__face--front .bingocard__paper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
}
.bingocard__face--front .bingocard__grid {
  flex: 1;
  min-height: 0;
  grid-auto-rows: 1fr;
}
.bingocard__face--front .sq {
  aspect-ratio: auto;
  min-height: 0;
}
.bingocard__face--back {
  transform: rotateY(180deg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(24,18,18,.06),
    0 2px 4px rgba(0,0,0,.08),
    0 12px 24px -8px rgba(0,0,0,.35),
    0 32px 64px -24px rgba(0,0,0,.55);
}

/* "Click to flip" affordance - sits in the flow, centered, just above the
   HIP-HOP footer. Always visible (mobile has no hover), brightens slightly on
   hover/focus of the card. */
.bingocard__hint {
  align-self: center;
  margin: 2px auto 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  background: var(--ink);
  color: var(--surface-light);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: .88;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: 4;
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
}
.bingocard__flipper:hover .bingocard__hint,
.bingocard__flipper:focus-visible .bingocard__hint {
  opacity: 1;
}

/* back face · photo with bottom overlay + CTA */
.bingocard__photo {
  position: absolute;
  inset: 0;
  margin: 0;
}
.bingocard__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bingocard__back-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(20,17,17,.55) 35%,
    rgba(20,17,17,.92) 100%);
  color: var(--text);
}
.bingocard__back-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-2);
}
.bingocard__back-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-24), 2.6vw, var(--fs-30));
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 var(--s-2);
  color: var(--text);
}
.bingocard__back-copy {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
  max-width: 36ch;
}
.bingocard__back-cta-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
/* the ghost button on the back is a real <button>; reset default look */
.bingocard__back-cta-row [data-flip-back] {
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  font-size: var(--fs-14);
}
.bingocard__paper {
  position: relative;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, #FBF5E6 0%, #F2EADB 50%, #E8DCC2 100%);
  color: var(--ink);
  border-radius: 8px;
  padding: 28px 26px 22px;
  box-shadow:
    0 0 0 1px rgba(24,18,18,.06),
    0 2px 4px rgba(0,0,0,.08),
    0 12px 24px -8px rgba(0,0,0,.35),
    0 32px 64px -24px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.85);
  transform: none;
  overflow: hidden;
}
/* fine paper grain */
.bingocard__paper::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 .15  0 0 0 0 .1  0 0 0 0 .05  0 0 0 .4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .14;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* deckled vignette around edges */
.bingocard__paper::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 60%, rgba(120,90,40,.18) 100%);
  pointer-events: none;
}

/* premium BINGO header — embossed feel */
.bingocard__head {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-2);
  margin-bottom: 14px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-30), 3.4vw, 44px);
  letter-spacing: .04em;
  line-height: 1;
  padding-bottom: 14px;
  border-bottom: 2.5px solid var(--ink);
  z-index: 1;
}
.bingocard__head span {
  color: var(--primary);
  text-shadow:
    1px 1px 0 rgba(255,255,255,.6),
    2px 2px 0 var(--accent),
    3px 3px 0 rgba(0,0,0,.12);
}

.bingocard__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  z-index: 1;
}
.sq {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 6px 5px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.35) 100%);
  border: 1.5px solid rgba(24,18,18,.22);
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: clamp(10px, 1.05vw, 13px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -.01em;
  hyphens: auto;
  overflow-wrap: anywhere;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 0 rgba(0,0,0,.04);
}
.sq--free {
  background:
    linear-gradient(180deg, var(--primary) 0%, var(--primary-700) 100%);
  color: var(--surface-light);
  font-family: var(--font-display);
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: .06em;
  border-color: var(--primary-700);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 4px rgba(0,0,0,.25),
    0 2px 4px rgba(0,0,0,.2);
}

/* daubed square - gold ink stamp. Sized by WIDTH with aspect-ratio:1 and
   centered, so it's a perfect circle of identical size in every cell
   regardless of the cell's exact proportions. */
.sq.is-daubed::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 38% 36%,
      rgba(255,216,77,.95) 0%,
      rgba(239,197,58,.92) 35%,
      rgba(201,150,43,.85) 60%,
      rgba(168,123,30,.55) 82%,
      rgba(168,123,30,0) 100%);
  border-radius: 50%;
  filter: blur(.4px);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
  box-shadow: inset 0 -3px 8px rgba(120,80,20,.45);
}
.sq.is-daubed::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%,
      rgba(255,255,255,.65) 0%,
      rgba(255,255,255,.22) 35%,
      transparent 60%);
  pointer-events: none;
  z-index: 1;
}
/* Text on top of the gold ball - cleaner ink treatment */
.sq.is-daubed > * {
  position: relative;
  z-index: 2;
  text-shadow:
    0 1px 0 rgba(255,255,255,.5),
    0 -1px 1px rgba(120,80,20,.2);
}

.bingocard__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  z-index: 1;
}
.bingocard__foot > span:not(.bingocard__foot-sep) {
  padding: 4px 10px;
  background: rgba(24,18,18,.06);
  border: 1px solid rgba(24,18,18,.14);
  border-radius: 999px;
  white-space: nowrap;
}
.bingocard__foot-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(24,18,18,.3);
  color: transparent;          /* hide the literal "·" character */
  font-size: 0;
  line-height: 0;
}

.jcard__cta-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: nowrap;
  align-items: center;
}
/* Keep button labels on a single line so squeezed CTAs don't wrap into
   two-line text inside the pill. */
.jcard__cta-row .btn { white-space: nowrap; }
/* Wrap onto two rows only on narrow viewports. */
@media (max-width: 560px) {
  .jcard__cta-row { flex-wrap: wrap; }
}

/* ======== RIGHT · tape stage ======== */
.tape-stage {
  position: relative;
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: var(--s-5);
  justify-items: center;
  align-content: stretch;
  perspective: 1200px;
}
.tape-stage__shadow {
  position: absolute;
  bottom: 6%;
  left: 12%; right: 12%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter: blur(6px);
  z-index: 0;
}

/* ===== Cassette body · premium realistic ===== */
.cassette {
  position: relative;
  width: min(460px, 92%);
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  /* layered plastic — top-light + body color + mold seam at the bottom */
  background:
    /* top sheen highlight */
    linear-gradient(180deg,
      rgba(255,255,255,.32) 0%,
      rgba(255,255,255,.06) 6%,
      transparent 14%),
    /* bottom edge darkening */
    linear-gradient(180deg,
      transparent 70%,
      rgba(0,0,0,.35) 100%),
    /* body color with subtle gradient */
    radial-gradient(ellipse 100% 80% at 50% 30%,
      #8E36A4 0%,
      var(--primary) 35%,
      var(--primary-700) 80%,
      #4A1B5A 100%);
  border: 1px solid #2A0E36;
  box-shadow:
    /* injected highlight along top edge */
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 2px 0 rgba(255,255,255,.18),
    /* deep inner ring (the cassette has a recessed inner well) */
    inset 0 0 0 7px var(--primary-700),
    inset 0 0 0 8px rgba(0,0,0,.4),
    /* bottom inner shadow */
    inset 0 -3px 6px rgba(0,0,0,.4),
    /* contact shadow */
    0 2px 4px rgba(0,0,0,.4),
    0 14px 28px -8px rgba(0,0,0,.5),
    0 40px 70px -20px rgba(0,0,0,.6);
  transition: transform var(--dur-slow) var(--ease-out);
  z-index: 1;
  overflow: visible;
}

/* fine plastic micro-texture (matte sheen) */
.cassette::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='1'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .3 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .08;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 4;
}

/* Thin gold pinstripe across the cassette body — a fine 2px accent
   line rather than a fat ridge. Hairline shadow above + highlight
   below give it just enough dimensionality. */
.cassette::before {
  content: '';
  position: absolute;
  top: 56%; left: -7px; right: -7px;
  height: 2px;
  background: linear-gradient(180deg,
    var(--tape-yellow-hot) 0%,
    var(--accent) 60%,
    var(--accent-600) 100%);
  box-shadow:
    0 -1px 0 rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.12),
    0 1px 2px rgba(0,0,0,.3);
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}

/* J-card label · real printed cardstock with depth */
.cassette__label {
  position: absolute;
  top: 10%; left: 6.5%; right: 6.5%; height: 40%;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%,
      #FBF5E6 0%,
      var(--surface-light) 55%,
      #E8DCC2 100%);
  border-radius: 3px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow:
    /* paper sits ON the cassette body, so it casts a shadow */
    0 1px 0 rgba(255,255,255,.6),
    0 2px 4px rgba(0,0,0,.35),
    0 4px 8px rgba(0,0,0,.2),
    /* paper edge */
    inset 0 0 0 1px rgba(0,0,0,.1),
    /* subtle paper vignette */
    inset 0 0 30px rgba(120,90,40,.12);
  color: var(--ink);
  z-index: 2;
  overflow: hidden;
}
/* paper grain on the label */
.cassette__label::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 .12  0 0 0 0 .08  0 0 0 0 .04  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .15;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cassette__label-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.cassette__brand {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-20), 2.6vw, var(--fs-30));
  color: var(--primary);
  letter-spacing: .04em;
  line-height: 1;
}
.cassette__vol {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--accent-600);
}
.cassette__label-mid {
  font-family: var(--font-script);
  font-size: var(--fs-18);
  color: var(--ink);
  transform: rotate(-1.5deg);
  line-height: 1.1;
}
.cassette__label-bot {
  display: flex;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .2em;
  color: var(--ink-soft);
  font-weight: 600;
}
.cassette__nr { color: var(--ink-faint); }

/* ===== Reels + yellow tape window ===== */
.cassette__reels {
  position: absolute;
  bottom: 10%; left: 7%; right: 7%; height: 36%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
/* ===== Reel container · the wound tape itself lives in the inline <svg>
   child (.cassette__reel-tape). This element just provides the circular
   well, the recessed shadow, the border, and the spin animation.
================================================================== */
.cassette__reel {
  position: relative;
  width: 22%; aspect-ratio: 1;
  border-radius: 50%;
  /* Shell color shows through the SVG's hub-hole mask */
  background: var(--bg);
  border: 3px solid var(--text);
  /* Outer shadow ring fakes a recessed well in the shell so the reel
     sits IN the cassette, not ON it. */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 3px 6px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35),
    0 0 6px 2px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.4);
}
/* Inline SVG fills the reel — renders the actual photo-real wound tape
   via feTurbulence + feDisplacementMap (see index.html). */
.cassette__reel-tape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ===== Hub gear · the cog visible in the center hole =====
   The only visibly-spinning part of a real cassette reel. Six teeth
   around a warm plastic hub with off-axis lighting so the hub looks
   like a molded piece, not a flat disc. Sits inside the parent's hub
   cutout and rotates with it. */
.cassette__reel::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 30%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    /* Six tooth grooves — softer alpha so they read as molded recesses
       rather than punched holes */
    conic-gradient(from 30deg,
      rgba(0,0,0,.72) 0deg 5deg,
      transparent 5deg 55deg,
      rgba(0,0,0,.72) 55deg 65deg,
      transparent 65deg 115deg,
      rgba(0,0,0,.72) 115deg 125deg,
      transparent 125deg 175deg,
      rgba(0,0,0,.72) 175deg 185deg,
      transparent 185deg 235deg,
      rgba(0,0,0,.72) 235deg 245deg,
      transparent 245deg 295deg,
      rgba(0,0,0,.72) 295deg 305deg,
      transparent 305deg 355deg,
      rgba(0,0,0,.72) 355deg 360deg),
    /* Plastic hub body — off-axis light center for sculpted feel */
    radial-gradient(circle at 38% 32%,
      #4a3a32 0%,
      #2e201a 50%,
      #18100a 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -1px 1px rgba(0,0,0,.55),
    0 0 0 .5px rgba(0,0,0,.4);
  pointer-events: none;
  z-index: 1;
}
/* top-light highlight on the reel disc (sits above the spinning element) */
.cassette__reel::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(ellipse 70% 35% at 50% 15%,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.06) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 2;
}
.cassette__reel--spin { animation: spin 5.5s linear infinite; }
.cassette__reel--slow { animation-duration: 7.5s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cassette__reel--spin { animation: none; }
}

/* ===== Window · recessed real-glass with glowing tape ===== */
.cassette__window {
  position: relative;
  flex: 1;
  height: 60%;
  margin: 0 var(--s-3);
  background:
    linear-gradient(180deg, #050303 0%, #0F0A0A 50%, #050303 100%);
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.9);
  overflow: hidden;
  box-shadow:
    /* recessed shadow (window is inset into the plastic) */
    inset 0 2px 4px rgba(0,0,0,.85),
    inset 0 -1px 0 rgba(255,255,255,.1),
    /* glass highlight */
    0 0 0 1px rgba(255,255,255,.06);
}
/* glass reflection */
.cassette__window::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.03) 60%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}
/* ===== Tape film across the window =====
   Thin matte-black magnetic tape, matching the reference photo:
   a near-black strip with one barely-there lighter top edge where
   light catches the upper film edge. That's it. */
.cassette__window::after {
  content: '';
  position: absolute;
  left: 6%; right: 6%; top: 50%;
  height: 3px;
  background:
    linear-gradient(180deg,
      rgba(120,80,55,.6) 0,
      rgba(120,80,55,.6) 1px,
      #060302 1px,
      #060302 100%);
  transform: translateY(-50%);
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.6);
  z-index: 1;
}

/* screw heads · realistic phillips-head metal */
.cassette__screw {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background:
    /* 1px dark center pit — gives the Phillips cross a real driver
       indent rather than a painted-on look */
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.95) 0 1px, transparent 1.6px),
    /* phillips cross indent shadow */
    linear-gradient(45deg, transparent 44%, rgba(0,0,0,.55) 47%, rgba(0,0,0,.55) 53%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(0,0,0,.55) 47%, rgba(0,0,0,.55) 53%, transparent 56%),
    /* metal body with highlight */
    radial-gradient(circle at 32% 28%,
      #FAFAFA 0%,
      #C8C8C8 20%,
      #7A7A7A 55%,
      #3A3A3A 90%,
      #1A1A1A 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.6),
    inset 0 -1px 1px rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.6),
    /* recessed well around the screw */
    0 0 0 2px rgba(0,0,0,.35);
  z-index: 3;
}
.cassette__screw--tl { top: 9px;    left: 9px; }
.cassette__screw--tr { top: 9px;    right: 9px; }
.cassette__screw--bl { bottom: 9px; left: 9px; }
.cassette__screw--br { bottom: 9px; right: 9px; }

/* ===== Editorial bio · NYT-style prose under the cassette ===== */
.tape-bio {
  width: min(460px, 92%);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: var(--s-5) 0 0;
  color: var(--text);
  z-index: 2;
}
.tape-bio::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--accent);
  margin-bottom: var(--s-4);
}
.tape-bio__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}
.tape-bio__title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(var(--fs-20), 1.9vw, var(--fs-30));
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--text);
  margin: 0 0 var(--s-4);
  max-width: 28ch;
  text-wrap: pretty;
}
.tape-bio__dek {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-18);
  line-height: 1.62;
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
  max-width: 42ch;
  text-wrap: pretty;
  hyphens: auto;
}
.tape-bio__dek--lead { font-size: 1.18rem; color: var(--text); }
.tape-bio__quote {
  position: relative;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(var(--fs-18), 1.6vw, var(--fs-24));
  line-height: 1.32;
  color: var(--text);
  margin: var(--s-5) 0;
  padding: 0 0 0 var(--s-4);
  border-left: 2px solid var(--accent);
  max-width: 36ch;
  text-wrap: pretty;
}
.tape-bio__quote-mark {
  position: absolute;
  top: -6px; left: 6px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: normal;
  font-size: 2.4em;
  color: var(--accent);
  line-height: 1;
  pointer-events: none;
}
.tape-bio__dek::after {
  content: '';
  display: block;
  clear: both;
}
.tape-bio__dropcap {
  float: left;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  font-size: 3.6em;
  line-height: .82;
  color: var(--accent);
  padding: .04em 10px 0 0;
  margin-top: .02em;
}
.tape-bio__byline {
  margin: auto 0 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: var(--s-4);
}
.tape-bio__byline-sep {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ===== Floating chips · solid cream pills ===== */
.chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 14px 10px 10px;
  background: var(--surface-light);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 -2px 0 rgba(0,0,0,.08);
  color: var(--ink);
  z-index: 3;
  white-space: nowrap;
}
.chip__label {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--surface-light);
  font-family: var(--font-display);
  font-size: var(--fs-11);
  letter-spacing: .02em;
}
.chip__song {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: -.005em;
}
.chip--1 { top: 2%;   left: -4%;   animation: float 7s ease-in-out infinite; }
.chip--2 { top: 14%;  right: -2%;  animation: float 9s ease-in-out infinite reverse; }
.chip--3 { top: 30%;  left: -6%;   animation: float 8s ease-in-out infinite; }
.chip--4 { top: 42%;  right: -4%;  animation: float 10s ease-in-out infinite reverse; }
.chip--4 .chip__label,
.chip--2 .chip__label { background: var(--accent); color: var(--ink); }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}

@media (max-width: 1024px) {
  .tape-stage { max-width: 560px; margin: 0 auto; }
  .tape-bio { width: min(460px, 92%); }
}

/* =========================================================
   META STRIP — J-card spine
   ========================================================= */
.meta-strip {
  max-width: 1280px;
  margin: var(--s-8) auto 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-strong);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
@media (max-width: 720px) {
  .meta-strip { grid-template-columns: repeat(2, 1fr); }
}
.meta-strip li { display: flex; flex-direction: column; gap: 6px; }
.meta-strip strong {
  font-family: var(--font-display);
  font-size: var(--fs-38);
  color: var(--accent);
  letter-spacing: -.02em;
  line-height: 1;
}
.meta-strip span {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* =========================================================
   MARQUEE · tape-edge style
   ========================================================= */
.marquee {
  position: relative;
  padding: var(--s-4) 0;
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.10) 100%),
    linear-gradient(180deg, #F2C947 0%, #D8A52E 55%, #B6831C 100%);
  border-top: 1px solid rgba(24,18,18,.55);
  border-bottom: 1px solid rgba(24,18,18,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(168,123,30,.45),
    0 8px 18px -10px rgba(168,123,30,.55),
    0 14px 28px -18px rgba(24,18,18,.45);
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
}
/* fine grain overlay */
.marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
/* slow continuous sheen sweep */
.marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: marquee-sheen 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes marquee-sheen {
  0%, 15%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
.marquee__track {
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--s-5);
  white-space: nowrap;
  animation: marquee 42s linear infinite;
  width: max-content;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  letter-spacing: .04em;
}
.marquee__sep {
  color: rgba(24,18,18,.6);
  font-family: var(--font-mono);
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .marquee::before { animation: none; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================
   EVENTS PAGE · upcoming + past lineups built from flyer art
   ========================================================= */
.events-page {
  position: relative;
  padding: calc(var(--s-9) + var(--s-4)) var(--s-6) var(--s-8);
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(123,45,142,.16), transparent 60%),
    radial-gradient(700px 500px at 0% 80%, rgba(201,150,43,.08), transparent 55%),
    var(--bg);
  min-height: calc(100dvh - 80px);
}
.events-page__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.events-page__head {
  max-width: 760px;
  margin: 0 0 var(--s-8);
}
.events-page__h1 { margin-bottom: var(--s-3); }
.events-page__sub {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-20);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}

.events-section { margin: 0 0 var(--s-9); }
.events-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: var(--s-6);
}
.events-section__h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-24), 2.8vw, var(--fs-38));
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0;
}
.events-section__count {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.events-list { display: flex; flex-direction: column; gap: var(--s-7); }
.events-list--past { gap: var(--s-6); }

.event-card {
  display: grid;
  grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 820px) {
  .event-card { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  /* let the CTA row wrap so 3 buttons (Buy + ghost + Share) can't
     force the card wider than the viewport on narrow phones */
  .event-card__cta-row { flex-wrap: wrap; }
  .event-card__cta-row .btn { flex: 1 1 auto; }
}
/* Narrow phones: stack the CTA buttons full-width. The buttons carry
   white-space:nowrap, so when they're forced to shrink in a row the label
   spills outside the button - stacking gives each its own full-width row
   and the text never breaks out of the card. */
@media (max-width: 560px) {
  .event-card__cta-row { flex-direction: column; align-items: stretch; }
  .event-card__cta-row .btn,
  .event-card__cta-row .share,
  .event-card__cta-row .share > .btn { width: 100%; flex: 1 1 auto; }
  /* bring the Share text label back now that it has its own full-width row
     (higher specificity so it beats the ≤520px icon-only rule below) */
  .event-card__cta-row .share [data-share-trigger] .share-label { display: inline; }
}

.event-card__flyer {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 48px -20px rgba(0,0,0,.65);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.event-card__flyer img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1200ms var(--ease-out);
}
/* date block · used when no flyer art exists yet */
.event-card__date-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%);
  color: var(--text);
}
/* MOBILE ONLY: unify every flyer holder to the same dimensions so past
   flyer JPGs (varying native aspect) and upcoming date-blocks render
   identically. Desktop is untouched and keeps its original behavior. */
@media (max-width: 820px) {
  .event-card__flyer {
    aspect-ratio: 4 / 5;
    width: 100%;
  }
  .event-card__flyer img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .event-card__date-block {
    position: absolute;
    inset: 0;
    aspect-ratio: unset;
  }
}
.event-card__date-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.event-card__date-block--accent::before {
  background: linear-gradient(90deg, var(--accent), var(--tape-yellow-hot));
}
.event-card__date-month {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
}
.event-card__date-block--accent .event-card__date-month {
  color: var(--primary);
}
.event-card__date-day {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-76), 11vw, 8rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--text);
}
a.event-card__flyer:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 32px 56px -20px rgba(0,0,0,.7);
}
a.event-card__flyer:hover img { transform: scale(1.03); }
.event-card__flyer--past img { filter: saturate(.85) brightness(.92); }

.event-card__badge {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.event-card__badge--sold {
  background: var(--ink);
  color: var(--surface-light);
  border: 1px solid var(--rule-strong);
}

.event-card__body { padding-top: var(--s-2); }
.event-card__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-2);
}
.event-card__title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-30), 3.4vw, var(--fs-48));
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 var(--s-4);
}

.event-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
  margin: 0 0 var(--s-5);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.event-card__meta > div { display: flex; flex-direction: column; gap: 2px; }
.event-card__meta dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.event-card__meta dd {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-18);
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.event-card__copy {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-18);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 var(--s-5);
  max-width: 56ch;
  text-wrap: pretty;
}
.event-card__copy em {
  font-style: italic;
  color: var(--text);
}

.event-card__cta-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.event-card__cta-row .btn {
  white-space: nowrap;
}
/* Primary ticket button fills available space; ghost & share stay compact */
.event-card__cta-row .btn--primary {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  justify-content: center;
}
/* Ghost CTAs (Reserve, Group, Sponsor) share remaining space equally */
.event-card__cta-row .btn--ghost:not([data-share-trigger]) {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  justify-content: center;
}
/* Share wrapper - icon-only label on small screens */
.event-card__cta-row .share {
  flex: 0 0 auto;
}
@media (max-width: 520px) {
  /* On very small screens, hide the Share text label - keep only the icon */
  .event-card__cta-row [data-share-trigger] .share-label { display: none; }
}
.event-card__note {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
  max-width: 58ch;
}
.event-card__note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.event-card__note a:hover { color: var(--text); }

/* CTA strip at the bottom */
.events-cta {
  margin-top: var(--s-8);
  padding: var(--s-6);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%),
    var(--bg-elev);
  border: 1px solid var(--rule-strong);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-6);
  align-items: center;
}
.events-cta .eyebrow { color: var(--accent); margin-bottom: var(--s-3); }
.events-cta__title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-24), 2.6vw, var(--fs-38));
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 var(--s-3);
  line-height: 1.05;
}
.events-cta__copy {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 56ch;
}
.events-cta__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
@media (max-width: 820px) {
  .events-cta { grid-template-columns: 1fr; padding: var(--s-5); }
  .events-cta__buttons { flex-direction: row; flex-wrap: wrap; }
}

/* =========================================================
   GALLERY · asymmetric photo grid
   ========================================================= */
.gallery {
  position: relative;
  padding: var(--s-9) var(--s-6) var(--s-8);
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(123,45,142,.12), transparent 60%),
    var(--bg);
}
.gallery--page {
  padding-top: calc(var(--s-9) + var(--s-4));
}
.gallery__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.gallery__head {
  max-width: 720px;
  margin: 0 0 var(--s-7);
}
.gallery__h2 { margin-bottom: var(--s-3); }
.gallery__sub {
  font-size: var(--fs-18);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 12px;
}
.gallery__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 12px 24px -14px rgba(0,0,0,.5);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1200ms var(--ease-out);
}
.gallery__item:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 22px 40px -16px rgba(0,0,0,.6);
}
.gallery__item:hover img { transform: scale(1.06); }

/* asymmetric feature tiles */
.gallery__item--lg   { grid-column: span 2; grid-row: span 2; }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }

@media (max-width: 1024px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 720px) {
  .gallery { padding: var(--s-8) var(--s-4); }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 8px; }
  .gallery__item--lg { grid-column: span 2; grid-row: span 2; }
  .gallery__item--tall { grid-row: span 1; }
  .gallery__item--wide { grid-column: span 2; }
}

/* =========================================================
   WINNERS SPOTLIGHT - magazine spread, yellow Bingo stamp
   ========================================================= */
.winners { margin: 0 0 var(--s-6); }
.winners__head { max-width: 720px; margin: 0 0 var(--s-6); }
.winners__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  background: var(--tape-yellow);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: var(--s-3);
  box-shadow: 0 8px 22px -10px rgba(255, 216, 77, .55);
}
.winners__h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.02;
  margin: 0 0 var(--s-3);
  color: var(--text);
}
.winners__sub {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-18);
  color: var(--text-muted);
  margin: 0;
}
.winners__spread {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}
.winners__feature { aspect-ratio: 4 / 5; }
.winners__stack .winners__tile { aspect-ratio: 1 / 1; }
.winners__feature,
.winners__tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 22px 50px -22px rgba(0,0,0,.75);
  isolation: isolate;
}
.winners__feature img,
.winners__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1400ms var(--ease-out);
  -webkit-user-drag: none;
}
.winners__feature:hover img,
.winners__tile:hover img { transform: scale(1.04); }
.winners__feature::after,
.winners__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.winners__stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}
/* Hand-stamped Bingo mark on each winner shot */
.winners__stamp {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  background: var(--tape-yellow);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.6);
}
.winners__stamp-num {
  font-size: 11px;
  font-weight: 700;
  opacity: .75;
}
.winners__stamp-label {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .04em;
}
@media (max-width: 1024px) {
  .winners__spread { grid-template-columns: 1fr; min-height: 0; }
  .winners__feature { aspect-ratio: 3 / 2; }
  .winners__feature img { object-position: top; }
  .winners__stack { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
  .winners__stack .winners__tile { aspect-ratio: 1 / 1; }
}
@media (max-width: 600px) {
  .winners__feature { aspect-ratio: 4 / 3; }
  .winners__stack { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .winners__stamp-label { font-size: 14px; }
}

/* =========================================================
   REEL - horizontal scroll-snap slider of past-night photos
   ========================================================= */
.reel { position: relative; }
.reel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin: 0 0 var(--s-5);
  flex-wrap: wrap;
}
.reel__h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.05;
  margin: var(--s-2) 0 0;
  color: var(--text);
}
.reel__controls { display: flex; gap: 10px; }
.reel__btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;
}
.reel__btn:hover {
  color: var(--ink);
  background: var(--tape-yellow);
  border-color: var(--tape-yellow);
}
.reel__btn:active { transform: translateY(1px); }
.reel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 32%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding: 4px 4px 18px;
  margin: 0 -4px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.reel__track::-webkit-scrollbar { height: 8px; }
.reel__track::-webkit-scrollbar-track { background: rgba(242,234,219,.08); border-radius: 999px; }
.reel__track::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.reel__slide {
  position: relative;
  margin: 0;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 5;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 18px 36px -18px rgba(0,0,0,.65);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.reel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1400ms var(--ease-out);
  -webkit-user-drag: none;
}
.reel__slide:hover { transform: translateY(-3px); }
.reel__slide:hover img { transform: scale(1.05); }

/* Slides with a watermark / branded logo at the bottom of the source photo.
   Zoom + anchor-to-top pushes the bottom strip out of view, hiding the mark
   while keeping the subjects framed. */
.reel__slide--crop-bottom img {
  object-position: center top;
  transform: scale(1.14);
  transform-origin: center top;
}
.reel__slide--crop-bottom:hover img {
  transform: scale(1.2);
  transform-origin: center top;
}
@media (max-width: 1024px) {
  .reel__track { grid-auto-columns: 48%; }
}
@media (max-width: 640px) {
  /* Phones get the same horizontal swipe slider as desktop. Cards are sized
     so the next photo peeks in at the edge, which signals the row scrolls
     (avoids the old "looks like one static photo" problem) - swipe or tap the
     arrows to move through the set. */
  .reel__track {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 72%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 16px;
    margin: 0 -4px;
    -webkit-overflow-scrolling: touch;
  }
  .reel__slide { scroll-snap-align: start; }
}

/* =========================================================
   ANTI-THEFT - cosmetic friction against casual image lifting
   (not a real security control - devtools always wins)
   ========================================================= */
img, video {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
video::-internal-media-controls-download-button { display: none; }
video::-webkit-media-controls-enclosure { overflow: hidden; }
video::-webkit-media-controls-panel { width: calc(100% + 30px); }

/* =========================================================
   HOW IT PLAYS · light surface section
   ========================================================= */
.how {
  background: var(--surface-light);
  color: var(--ink);
  padding: var(--s-9) var(--s-6);
  position: relative;
}
.how__inner { max-width: 1180px; margin: 0 auto; }
.how__head { max-width: 760px; margin: 0 0 var(--s-7); }
.how__intro {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-20);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: var(--s-4) 0 0;
  max-width: 60ch;
  text-wrap: pretty;
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
}
.how__step {
  position: relative;
  padding: var(--s-5) 0 var(--s-3);
  border-top: 2px solid var(--ink);
}
.how__step::before {
  content: '';
  position: absolute;
  left: 0; top: -2px;
  width: 48px; height: 2px;
  background: var(--primary);
}
.how__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--primary);
  margin-bottom: var(--s-3);
}
.how__title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  letter-spacing: -.01em;
  margin: 0 0 var(--s-2);
  line-height: 1.1;
}
.how__copy {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-16);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.62;
  max-width: 36ch;
  text-wrap: pretty;
}

/* Detail row below the four steps */
.how__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(24,18,18,.18);
}
.how__detail-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 var(--s-2);
}
.how__detail-text {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 900px) {
  .how__details { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}
@media (max-width: 520px) {
  .how__details { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .how__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .how__steps { grid-template-columns: 1fr; }
}

/* =========================================================
   FAQ · liner-notes accordion · dark surface
   ========================================================= */
.faq {
  background: var(--bg);
  color: var(--text);
  padding: var(--s-9) var(--s-6);
  position: relative;
  border-top: 1px solid var(--rule);
}
.faq__inner { max-width: 1100px; margin: 0 auto; }
.faq__head { max-width: 760px; margin: 0 0 var(--s-7); }
.faq__intro {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-20);
  line-height: 1.6;
  color: var(--text-muted);
  margin: var(--s-4) 0 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.faq__intro a {
  color: var(--tape-yellow);
  border-bottom: 1px solid rgba(239,197,58,.4);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.faq__intro a:hover { color: var(--tape-yellow-hot); border-bottom-color: var(--tape-yellow-hot); }

.faq__list {
  margin-top: var(--s-6);
  border-top: 1px solid var(--rule-strong);
}
.faq__item { border-bottom: 1px solid var(--rule); }

.faq__item details { position: relative; }
.faq__item summary {
  display: grid;
  grid-template-columns: 1fr 32px;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: padding var(--dur-base) var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible {
  outline: 2px solid var(--tape-yellow);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

h3.faq__q,
.faq__q {
  margin: 0;
  font-weight: 400;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-18), 2.2vw, var(--fs-24));
  letter-spacing: -.005em;
  line-height: 1.2;
  color: var(--text);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__item summary:hover .faq__q { color: var(--tape-yellow-hot); }

.faq__icon {
  position: relative;
  width: 22px;
  height: 22px;
  justify-self: end;
  display: inline-block;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.faq__icon::before { width: 18px; height: 2px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 2px; height: 18px; transform: translate(-50%, -50%); }
.faq__item summary:hover .faq__icon::before,
.faq__item summary:hover .faq__icon::after { background: var(--tape-yellow-hot); }
.faq__item details[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__item details[open] .faq__icon::before { background: var(--tape-yellow); }

.faq__a {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: var(--s-4);
  padding: 0 0 var(--s-6) 0;
}
.faq__a > p {
  grid-column: 1 / 2;
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-18);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}
.faq__a a {
  color: var(--tape-yellow);
  border-bottom: 1px solid rgba(239,197,58,.4);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.faq__a a:hover { color: var(--tape-yellow-hot); border-bottom-color: var(--tape-yellow-hot); }

/* Smooth open animation (progressive, falls back to instant if unsupported) */
.faq__item details[open] summary { padding-bottom: var(--s-3); }
@supports (interpolate-size: allow-keywords) {
  .faq__item details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
    interpolate-size: allow-keywords;
  }
  .faq__item details[open]::details-content { block-size: auto; }
}

@media (max-width: 640px) {
  .faq { padding: var(--s-8) var(--s-4); }
  .faq__item summary { grid-template-columns: 1fr 28px; gap: var(--s-3); padding: var(--s-4) 0; }
  .faq__a { grid-template-columns: 1fr 28px; gap: var(--s-3); padding-bottom: var(--s-5); }
}

/* =========================================================
   INQUIRY MODAL · opens from footer email links
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5) var(--s-4);
}
.modal[hidden] { display: none; }
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8,6,6,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100vh - 64px);
  overflow: auto;
  background:
    radial-gradient(900px 400px at 100% 0%, rgba(123,45,142,.22), transparent 70%),
    var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--rule-strong);
  border-radius: 18px;
  padding: var(--s-6);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 30px 60px -20px rgba(0,0,0,.65);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition:
    opacity 220ms var(--ease-out),
    transform 280ms var(--ease-out);
}
.modal.is-open .modal__scrim { opacity: 1; }
.modal.is-open .modal__panel { opacity: 1; transform: none; }

.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.modal__close:hover {
  color: var(--text);
  border-color: var(--accent);
  transform: rotate(90deg);
}

.modal__head { margin-bottom: var(--s-5); padding-right: var(--s-6); }
.modal__title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-24), 3vw, var(--fs-38));
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: var(--s-3) 0 var(--s-3);
}
.modal__sub {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-18);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 50ch;
}

.modal__form { display: flex; flex-direction: column; gap: var(--s-4); }
.modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 540px) {
  .modal__row { grid-template-columns: 1fr; }
  .modal__panel { padding: var(--s-5); }
}
.modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Let the grid column shrink below the widest <option>'s intrinsic width */
  min-width: 0;
}
.modal__label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal__optional {
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--text-muted);
  text-transform: none;
}
.modal__field input,
.modal__field select,
.modal__field textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  outline: 0;
  /* Constrain controls to their column - selects otherwise widen to fit
     their longest <option> and break out of the modal. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.modal__field select { appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23C9962B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  /* Replaces the browser's default blue focus highlight on the open
     dropdown with the brand purple. Honored by Chrome/Firefox on most
     platforms; on Windows it may still defer to OS native styling. */
  accent-color: var(--primary);
}
/* Recolor the highlighted/selected option from default blue to brand purple */
.modal__field select option {
  background: var(--bg-elev);
  color: var(--text);
}
.modal__field select option:checked,
.modal__field select option:hover,
.modal__field select option:focus {
  background: var(--primary) linear-gradient(0deg, var(--primary), var(--primary));
  color: #fff;
}
.modal__field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.modal__field input::placeholder,
.modal__field textarea::placeholder { color: rgba(168,156,138,.7); }
.modal__field input:focus,
.modal__field select:focus,
.modal__field textarea:focus {
  border-color: var(--accent);
  background: var(--bg-elev);
}

.modal__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.modal__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.modal__hint a { color: var(--accent); }
.modal__hint a:hover { color: var(--text); }

.modal__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .04em;
  color: var(--text-muted);
  min-height: 1.2em;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.modal__status.is-shown { opacity: 1; }
.modal__status.is-error { color: #FF8A6E; }

/* Footer newsletter status - visually hidden, kept in the DOM so the
   aria-live="polite" announcement still reaches screen readers when the
   subscribe call completes. Sighted users see the .toast instead. */
.footer__newsletter-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Toast - floats in from below, auto-dismisses after a few seconds.
   Used by the newsletter handler so the success/error message doesn't
   need to share vertical space with anything in the footer column. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(16px);
  z-index: 1000;
  max-width: min(90vw, 420px);
  padding: 14px 22px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .06em;
  text-align: center;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.toast.is-shown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast--error {
  border-color: #FF8A6E;
  color: #FFD3C7;
}

/* =========================================================
   FOOTER · hero band + columns + bottom bar
   ========================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.footer {
  position: relative;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(123,45,142,.22), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(201,150,43,.12), transparent 55%),
    var(--bg);
  color: var(--text);
  padding: var(--s-9) var(--s-6) var(--s-5);
  overflow: hidden;
  isolation: isolate;
}
/* purple-to-gold gradient rule across the very top of the footer */
.footer__bleed {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  z-index: 1;
}
.footer__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

/* === Big lockup === */
.footer__lockup {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-7);
  align-items: center;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule);
}
.footer__logo {
  width: 300px;
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.5));
}
.footer__tagline {
  margin: 0 0 var(--s-3);
  line-height: 1;
}
.footer__tagline-script {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(var(--fs-30), 3.6vw, var(--fs-48));
  color: var(--accent);
  transform: rotate(-2deg);
  margin-bottom: var(--s-2);
}
.footer__tagline-block {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-24), 2.8vw, var(--fs-38));
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.05;
}
.footer__sub {
  max-width: 56ch;
  margin: 0 0 var(--s-5);
  font-size: var(--fs-18);
  color: var(--text-muted);
  line-height: 1.6;
}
.footer__cta-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .footer__lockup { grid-template-columns: 1fr; gap: var(--s-5); text-align: left; }
  .footer__logo { width: 220px; }
}

/* === Columns === */
.footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: var(--s-7);
  padding: var(--s-7) 0;
}
.footer__h {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-4);
}
.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.footer__list a {
  font-size: var(--fs-16);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__list a:hover { color: var(--text); }

.footer__newsletter-copy {
  font-size: var(--fs-14);
  color: var(--text-muted);
  margin: 0 0 var(--s-3);
  max-width: 32ch;
  line-height: 1.55;
}
.footer__newsletter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-elev);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 18px;
  max-width: 360px;
  transition: border-color var(--dur-fast) var(--ease-out);
  margin-bottom: var(--s-4);
}
.footer__newsletter:focus-within { border-color: var(--accent); }
.footer__newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-14);
  padding: 8px 0;
}
.footer__newsletter input::placeholder { color: var(--text-muted); }
.footer__newsletter button {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.footer__newsletter button:hover {
  background: var(--tape-yellow-hot);
  transform: translateX(2px);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.footer__contact-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: .01em;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__contact-line svg { color: var(--accent); flex-shrink: 0; }
.footer__contact-line:hover { color: var(--accent); }

.footer__social {
  display: flex;
  gap: var(--s-3);
}
.footer__social a {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  color: var(--text-muted);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.footer__social a:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

@media (max-width: 880px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .footer__cols > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__cols { grid-template-columns: 1fr; }
}

/* === Bottom bar === */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
  padding-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.footer__bottom-row > * { margin: 0; }
.footer__legal {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
}
.footer__legal a {
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__legal a:hover { color: var(--text); }
.footer__dot { color: var(--rule-strong); }
.footer__copy { margin: 0; }
.footer__credit {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: .7;
  margin: 0;
}
.footer__credit a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-strong);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__credit a:hover { color: var(--tape-yellow); border-bottom-color: var(--tape-yellow); }

/* =========================================================
   REVEAL — IntersectionObserver-driven
   In the Next.js port these map to Framer Motion variants.
   ========================================================= */
/* Gated behind html.js so content stays visible if JS fails to load.
   The inline script at the bottom of index.html flips html.no-js → html.js. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
.js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }
  .cassette__tape-stream, .cassette__reel--spin .cassette__reel-spokes,
  .marquee__track { animation: none !important; }
}

/* =========================================================
   MOBILE POLISH (2026-05-26) - scoped, additive
   Padding, font bumps, hero title clamp, hamburger dropdown
   ========================================================= */

/* Hamburger toggle button - same gold pill treatment as .btn--primary
   so it visually matches Buy Tickets. Stays fixed (no lift on tap). */
.nav__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: 8px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.10) 100%),
    linear-gradient(180deg, #F2C947 0%, #D8A52E 55%, #B6831C 100%);
  border: 1px solid rgba(24,18,18,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(168,123,30,.55),
    0 1px 0 rgba(255,255,255,.35),
    0 8px 18px -8px rgba(168,123,30,.55),
    0 14px 28px -14px rgba(24,18,18,.45);
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
/* fine grain overlay so it matches the .btn--primary texture */
.nav__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.nav__toggle > * { position: relative; z-index: 2; }
.nav__toggle:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.08) 100%),
    linear-gradient(180deg, #FFD84D 0%, #E2B131 55%, #BC8A1E 100%);
}
.nav__toggle:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(168,123,30,.55),
    0 0 0 3px rgba(24,18,18,.85),
    0 0 0 5px var(--tape-yellow-hot);
}
/* three bars · dark ink for contrast on the gold */
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 20px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

/* FIXED CHROME · Buy Tickets + hamburger never move on hover/tap/focus.
   Force-override .btn--primary's translateY(-2px) lift so the nav chrome
   feels rooted instead of springy. Also kills the sheen-sweep pseudo on
   Buy Tickets which telegraphs movement even when the button stays put. */
.nav__cta,
.nav__cta:hover,
.nav__cta:active,
.nav__cta:focus,
.nav__cta:focus-visible,
.nav__toggle,
.nav__toggle:hover,
.nav__toggle:active,
.nav__toggle:focus,
.nav__toggle:focus-visible {
  transform: none !important;
}
.nav__cta::before { display: none !important; }
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after  { top:  6px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav__toggle { display: inline-flex; }

  /* Hide the standalone "Buy Tickets" CTA next to the hamburger on mobile;
     the Events link inside the dropdown covers ticketing. Keeps the nav
     to logo + single hamburger so it reads clean on phones. */
  .nav__cta { display: none; }

  /* Dropdown panel - replaces hidden state when toggled open */
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--s-3) var(--s-4) var(--s-4);
    background: rgba(20,17,17,.96);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 36px -18px rgba(0,0,0,.65);
    font-size: var(--fs-14);
    letter-spacing: .14em;
  }
  .nav[data-nav-open="true"] .nav__links { display: flex; }
  .nav__links a {
    padding: 14px 4px;
    color: var(--text);
    border-bottom: 1px solid var(--rule);
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a::after { display: none; }
}

/* Reduce horizontal padding on the worst offenders at small widths */
@media (max-width: 540px) {
  .hero        { padding-left: var(--s-3); padding-right: var(--s-3); }
  .events-page { padding-left: var(--s-3); padding-right: var(--s-3); }
  .how         { padding-left: var(--s-4); padding-right: var(--s-4); }
  .footer      { padding-left: var(--s-4); padding-right: var(--s-4); }
}

/* Shrink the hero display title floor so its 10px text-shadow doesn't push past the right edge */
@media (max-width: 480px) {
  :root { --fs-display: clamp(2.75rem, 11vw, 8.5rem); }
}

/* Bump tiny font sizes for readability */
@media (max-width: 540px) {
  .bingocard__foot { font-size: var(--fs-12); }
  .bingocard__face--front .sq { font-size: clamp(12px, 2.6vw, 13px); }
}

/* =========================================================
   SHARE - per-event share button + dropdown popover
   ========================================================= */
.share { position: relative; display: inline-flex; }
.share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 20px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rule-strong);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-14);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.share__btn:hover,
.share__btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.share__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.share__btn svg { display: block; }

.share-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 22px 44px -18px rgba(0,0,0,.7);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.share[data-open="true"] .share-pop {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.share-pop__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.share-pop__item:hover,
.share-pop__item:focus-visible {
  background: rgba(201,150,43,.12);
  color: var(--accent);
  outline: none;
}
.share-pop__item svg { flex-shrink: 0; color: var(--accent); }
.share-pop__item.is-copied { color: var(--tape-yellow-hot); }
.share-pop__item.is-copied svg { color: var(--tape-yellow-hot); }

@media (max-width: 540px) {
  .share-pop { min-width: min(260px, calc(100vw - 32px)); }
}

/* ====== Meta-strip · scroll-in reveal (Recognize-style) ======
   Hooks into the existing data-reveal / data-reveal-stagger system.
   The IO sets --i per child (0, 1, 2, 3); we use it as a delay multiplier
   so the cards cascade in one after another. */
html.js ul.meta-strip[data-reveal] > li {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  transition:
    opacity .5s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .06s),
    transform .5s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .06s);
  will-change: opacity, transform;
}
html.js ul.meta-strip[data-reveal].is-in > li {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js ul.meta-strip[data-reveal] > li {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* =========================================================
   MOBILE RESPONSIVE OVERHAUL (2026-05-28)
   Systematic fix for all mobile layout breakages.
   All rules are additive / override only what's broken.
   ========================================================= */

/* ── 1. GLOBAL: prevent any element from blowing past viewport ── */
.hero, .how, .faq, .footer, .gallery, .events-page, .marquee {
  overflow-x: hidden;
}

/* ── 2. HERO: reduce massive vertical padding on mobile ── */
@media (max-width: 768px) {
  .hero {
    padding-top: var(--s-5);
    padding-bottom: var(--s-5);
  }
}
@media (max-width: 540px) {
  .hero {
    padding: var(--s-4) var(--s-3);
  }
}

/* ── 3. HERO MEDIA: sensible aspect ratio on portrait phones ── */
@media (max-width: 540px) {
  .hero-media {
    border-radius: 10px;
    margin-bottom: var(--s-4);
  }
  .hero-media:has(video) {
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    margin-bottom: var(--s-5);
  }
}

/* ── 4. SPEC-LINE: hide overflow items on tiny screens ── */
@media (max-width: 600px) {
  .spec-line {
    gap: var(--s-2);
    margin-bottom: var(--s-5);
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .spec-line__item:nth-child(n+4) { display: none; }
  .spec-line__rule:last-child { display: none; }
}

/* ── 5. HERO GRID: better single-column on tablet/mobile ── */
@media (max-width: 1024px) {
  .hero__grid {
    gap: var(--s-5);
  }
}

/* ── 6. TITLE: tame the giant text-shadow on small phones ── */
@media (max-width: 480px) {
  .jcard__title-block {
    /* Solid 3D extrude, scaled down for the smaller mobile headline. */
    text-shadow:
      1px 1px 0 var(--primary),
      2px 2px 0 var(--primary),
      3px 3px 0 var(--primary),
      4px 4px 0 var(--primary-700),
      5px 5px 0 var(--primary-700),
      6px 6px 0 var(--primary-700),
      7px 9px 10px rgba(0,0,0,.34);
    -webkit-text-stroke: 1.5px var(--accent);
    /* Mobile-only: BINGO and the cursive Nights flow inline on the
       same line so the lockup reads as a single brand mark with the
       smaller modifier sitting to the right of the dominant block. */
    display: inline-block;
    vertical-align: baseline;
  }
  .jcard__title-cursive {
    /* Mobile-only: Nights sits to the right of BINGO on the same line
       instead of stacking below. Baseline aligned with BINGO; small
       left gap so the two words don't touch. */
    display: inline-block;
    vertical-align: baseline;
    margin-top: 0;
    margin-left: .12em;
    font-size: calc(var(--fs-display) * 0.85);
    text-shadow:
      1px 2px 5px rgba(0,0,0,.4),
      0 0 16px rgba(201,150,43,.2);
  }
  .jcard__title-script {
    -webkit-text-stroke: 2px var(--accent);
  }
}

/* ── 7. LEDE: let it breathe at full width on mobile ── */
@media (max-width: 768px) {
  .jcard__lede {
    max-width: 100%;
    font-size: var(--fs-18);
  }
}

/* ── 8. BINGO CARD: full width, sane head font, bigger sq text ── */
@media (max-width: 768px) {
  .bingocard {
    max-width: 100%;
    perspective: 1000px;
  }
  .bingocard__head {
    font-size: clamp(20px, 7vw, 32px);
    gap: var(--s-1);
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .bingocard__grid { gap: 5px; }
  .bingocard__face--front .sq {
    font-size: clamp(9px, 2.8vw, 13px);
    padding: 4px 3px;
  }
  .sq--free { font-size: clamp(10px, 3vw, 14px); }

  /* Flip controls shrink on phones: the "Click to flip" hint and the back
     "Flip back" button were sized for desktop and read as oversized on a
     full-width mobile card. */
  .bingocard__hint {
    bottom: 10px;
    right: 10px;
    padding: 4px 7px 4px 6px;
    gap: 4px;
    font-size: 8px;
    letter-spacing: .1em;
  }
  .bingocard__hint svg { width: 11px; height: 11px; }
  .bingocard__back-overlay { padding: var(--s-5) var(--s-4) var(--s-4); }
  .bingocard__back-cta-row .btn--lg { padding: 11px 20px; }
  .bingocard__back-cta-row [data-flip-back] { font-size: var(--fs-12); }
}
@media (max-width: 480px) {
  .bingocard__face--front .sq {
    font-size: clamp(8px, 2.5vw, 12px);
    padding: 3px 2px;
  }
  .bingocard__head {
    font-size: clamp(18px, 6.5vw, 28px);
  }
  .bingocard__grid { gap: 4px; }
}

/* ── 9. CTA ROW: stack buttons on very small phones ── */
@media (max-width: 400px) {
  .jcard__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .jcard__cta-row .btn {
    text-align: center;
    justify-content: center;
  }
}

/* ── 10. TAPE-STAGE / BIO: full-width on mobile, less top gap ── */
@media (max-width: 1024px) {
  .tape-stage {
    width: 100%;
    max-width: 100%;
  }
  .tape-bio {
    width: 100%;
    max-width: 100%;
    padding-top: var(--s-4);
  }
}
@media (max-width: 768px) {
  .tape-bio__title {
    font-size: clamp(var(--fs-18), 4vw, var(--fs-24));
  }
  .tape-bio__dek {
    font-size: var(--fs-16);
    max-width: 100%;
  }
  .tape-bio__quote {
    font-size: var(--fs-18);
    max-width: 100%;
  }
}

/* ── 11. META STRIP: reduce enormous top margin on mobile ── */
@media (max-width: 768px) {
  .meta-strip {
    margin-top: var(--s-5);
  }
}
@media (max-width: 540px) {
  .meta-strip {
    margin-top: var(--s-4);
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
    padding-top: var(--s-4);
  }
  .meta-strip strong { font-size: var(--fs-30); }
}

/* ── 12. HOW SECTION: reduce padding and tighten layout ── */
@media (max-width: 768px) {
  .how {
    padding: var(--s-7) var(--s-4);
  }
  .how__head { margin-bottom: var(--s-5); }
  .how__intro { font-size: var(--fs-18); max-width: 100%; }
  .how__steps { margin-top: var(--s-5); }
  .how__details { margin-top: var(--s-5); padding-top: var(--s-4); }
}
@media (max-width: 520px) {
  .how { padding: var(--s-6) var(--s-3); }
  .how__title { font-size: var(--fs-20); }
  .how__copy { font-size: var(--fs-16); }
  .how__step { padding: var(--s-4) 0 var(--s-2); }
}

/* ── 13. FAQ: tighten on mobile ── */
@media (max-width: 768px) {
  .faq { padding: var(--s-7) var(--s-4); }
  .faq__head { margin-bottom: var(--s-5); }
  .faq__intro { font-size: var(--fs-18); max-width: 100%; }
}

/* ── 14. FOOTER: logo, lockup, columns, newsletter form ── */
@media (max-width: 768px) {
  .footer {
    padding: var(--s-7) var(--s-4) var(--s-5);
  }
  .footer__lockup {
    gap: var(--s-4);
  }
  .footer__logo { width: 180px; }
  .footer__tagline-script {
    font-size: clamp(var(--fs-24), 6vw, var(--fs-38));
  }
  .footer__tagline-block {
    font-size: clamp(var(--fs-18), 4.5vw, var(--fs-30));
  }
  .footer__sub {
    font-size: var(--fs-16);
    max-width: 100%;
  }
}
@media (max-width: 520px) {
  .footer { padding: var(--s-6) var(--s-3) var(--s-4); }
  .footer__lockup {
    padding-bottom: var(--s-5);
    grid-template-columns: 1fr;
  }
  .footer__cols { padding: var(--s-5) 0; }
  .footer__newsletter { max-width: 100%; }
}

/* ── 15. EVENTS PAGE: better mobile padding ── */
@media (max-width: 768px) {
  .events-page {
    padding: calc(var(--s-7) + var(--s-3)) var(--s-4) var(--s-7);
  }
  .events-page__head { margin-bottom: var(--s-6); }
  .events-page__sub { font-size: var(--fs-18); max-width: 100%; }
}
@media (max-width: 540px) {
  .events-page { padding: calc(var(--s-7)) var(--s-3) var(--s-6); }
  .events-section { margin-bottom: var(--s-7); }
  .event-card__title {
    font-size: clamp(var(--fs-24), 6.5vw, var(--fs-38));
  }
  .event-card__meta dd { font-size: var(--fs-16); }
  .event-card__copy { font-size: var(--fs-16); max-width: 100%; }
}

/* ── 16. EVENTS CTA STRIP: collapse properly on mobile ── */
@media (max-width: 540px) {
  .events-cta { padding: var(--s-4); }
  .events-cta__title { font-size: var(--fs-24); }
  .events-cta__copy { font-size: var(--fs-16); }
}

/* ── 17. GALLERY PAGE: better mobile layout ── */
@media (max-width: 540px) {
  .gallery { padding: var(--s-6) var(--s-3); }
  .gallery--page { padding-top: calc(var(--s-7) + var(--s-2)); }
  .gallery__head { margin-bottom: var(--s-5); }
  .gallery__sub { font-size: var(--fs-16); }
}

/* ── 18. H2 headings: prevent overflow on very narrow screens ── */
@media (max-width: 480px) {
  .h2 {
    font-size: clamp(var(--fs-30), 8.5vw, var(--fs-48));
    max-width: 100%;
  }
}

/* ── 19. MODAL: full-screen on tiny phones ── */
@media (max-width: 400px) {
  .modal { padding: var(--s-3) var(--s-2); }
  .modal__panel { padding: var(--s-4); border-radius: 14px; }
  .modal__title { font-size: var(--fs-24); }
}

/* ── 20. REEL SECTION: ensure proper scroll on mobile ── */
@media (max-width: 768px) {
  .reel__head { margin-bottom: var(--s-4); }
  .reel__h2 { font-size: clamp(20px, 5vw, 30px); }
}

/* ── 21. WINNERS SECTION: spacing ── */
@media (max-width: 768px) {
  .winners__head { margin-bottom: var(--s-4); }
  .winners__h2 { font-size: clamp(22px, 6vw, 36px); }
}

/* ── 22. NAV: reduce the Buy Tickets font size on very small ── */
@media (max-width: 380px) {
  .nav__cta {
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: .10em;
  }
  .nav { padding: 4px var(--s-3); min-height: 56px; }
  .nav__logo-img { height: 64px; margin: -4px 0 -2px; }
}

/* ── 23. HERO MEDIA REEL: hide chrome text overflow on tiny ── */
@media (max-width: 400px) {
  .hero-reel__chrome { gap: var(--s-2); }
  .hero-reel__tag {
    font-size: 9px;
    padding: .4em .6em;
    letter-spacing: .18em;
  }
  .hero-reel__logo {
    height: clamp(36px, 9vw, 52px);
  }
  .hero-reel__sound {
    width: 34px; height: 34px;
    bottom: 10px; left: 10px;
  }
}

/* ── 24. TEXT-WRAP everywhere ── */
@media (max-width: 768px) {
  .jcard__lede,
  .tape-bio__dek,
  .tape-bio__title,
  .how__copy,
  .how__intro,
  .faq__a > p,
  .event-card__copy,
  .events-page__sub,
  .footer__sub {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ── 25. INTERACTION POLISH (design-eng pass) ──
   Tactile press feedback + no sticky hover on touch. */
.btn:active { transform: scale(0.97); }
@media (hover: none) {
  /* On touch, :hover fires on tap and sticks - kill the hover lift so buttons
     settle cleanly after a tap (press feedback comes from :active above). */
  .btn--primary:hover,
  .btn--ghost:hover { transform: none; }
}

/* =========================================================
   26. BETWEEN THE ROUNDS · the challenges (dark surface)
   ========================================================= */
.challenges {
  background: var(--bg);
  color: var(--text);
  padding: var(--s-9) var(--s-6);
  position: relative;
  border-top: 1px solid var(--rule);
}
.challenges__inner { max-width: 1180px; margin: 0 auto; }
.challenges__head { max-width: 760px; margin: 0 0 var(--s-7); }
.challenges__intro {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-20);
  line-height: 1.6;
  color: var(--text-muted);
  margin: var(--s-4) 0 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.challenges__grid {
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.challenges__card {
  position: relative;
  padding: var(--s-6) var(--s-5);
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.challenges__card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.challenges__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}
.challenges__title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  letter-spacing: -.01em;
  margin: 0 0 var(--s-3);
  line-height: 1.1;
  color: var(--text);
}
.challenges__copy {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-16);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .challenges__grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* =========================================================
   27. BOOK YOUR PARTY · private events CTA (light surface)
   ========================================================= */
.booking {
  background: var(--surface-light);
  color: var(--ink);
  padding: var(--s-9) var(--s-6);
  position: relative;
}
.booking__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
.booking__copy { max-width: 60ch; }
.booking__lede {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-20);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: var(--s-4) 0 0;
  text-wrap: pretty;
}
.booking__urgency {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: 1.15;
  color: var(--primary);
  margin: var(--s-5) 0 var(--s-3);
  letter-spacing: -.01em;
}
.booking__fine {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin: 0 0 var(--s-5);
  line-height: 1.55;
  max-width: 52ch;
}
.booking__cta {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.booking__phone {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.booking__phone:hover { color: var(--primary); }
.booking__list {
  background: rgba(24,18,18,.04);
  border: 1px solid rgba(24,18,18,.10);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  padding: var(--s-6);
}
.booking__list-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 var(--s-3);
}
.booking__list-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.booking__list-items li {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-16);
  color: var(--ink-soft);
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}
.booking__list-items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .65em;
  width: 8px;
  height: 2px;
  background: var(--accent);
}
@media (max-width: 820px) {
  .booking__inner { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* Anchor target for the "Get Notified" CTAs (dates-pending mode). The id
   sits on the form itself but we want the heading + descriptive copy
   visible above it when the user lands, so add a scroll headroom. */
#newsletter { scroll-margin-top: 120px; }

/* =========================================================
   28. ABOUT · brand origin (light surface)
   ========================================================= */
.about {
  background: var(--surface-light);
  color: var(--ink);
  padding: var(--s-9) var(--s-6);
  position: relative;
}
.about__inner { max-width: 1180px; margin: 0 auto; }
.about__copy { max-width: 64ch; }
.about__lede {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-20);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: var(--s-4) 0 var(--s-4);
  text-wrap: pretty;
}
.about__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
  line-height: 1.5;
  max-width: 52ch;
}

/* =========================================================
   29. TAG US · gallery UGC ask (light surface)
   ========================================================= */
.taggram {
  background: var(--surface-light);
  color: var(--ink);
  padding: var(--s-9) var(--s-6);
  border-top: 1px solid rgba(24,18,18,.10);
}
.taggram__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.taggram__h2 { margin: var(--s-3) 0 var(--s-4); }
.taggram__copy {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-20);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 auto var(--s-6);
  max-width: 56ch;
  text-wrap: pretty;
}
.taggram__copy a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.taggram__copy a:hover { color: var(--primary-700); }
.taggram__handles {
  display: inline-flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  justify-content: center;
}
.taggram__handle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid rgba(24,18,18,.18);
  border-radius: 999px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.taggram__handle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* =========================================================
   29. YOU COULD BE NEXT · gallery closer (dark surface)
   ========================================================= */
.next-up {
  background: var(--bg);
  color: var(--text);
  padding: var(--s-8) var(--s-6);
  border-top: 1px solid var(--rule);
}
.next-up__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.next-up__h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.01em;
  line-height: 1.05;
  margin: 0 0 var(--s-3);
  color: var(--text);
}
.next-up__copy {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-20);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 auto var(--s-6);
  max-width: 52ch;
  text-wrap: pretty;
}
.next-up__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  justify-content: center;
}

/* =========================================================
   30. SEE IT IN ACTION  ·  gameplay demo (dark surface)
   Fully scoped class names (.demo-reel*) — no collision risk
   with any existing rule. The video's native black backdrop
   blends away via mix-blend-mode:lighten on this dark section.
   ========================================================= */
.demo-reel {
  background: var(--bg);
  color: var(--text);
  padding: var(--s-9) var(--s-6);
  border-top: 1px solid var(--rule);
}
.demo-reel__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.demo-reel__head { max-width: 720px; margin: 0 auto var(--s-7); }
.demo-reel__sub {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-20);
  line-height: 1.55;
  color: var(--text-muted);
  margin: var(--s-4) auto 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.demo-reel__stage {
  position: relative;
  margin: 0 auto;
  /* New recording is portrait (454x670). Narrower container + taller
     aspect ratio so the video fills the frame without crop or stretch. */
  max-width: 380px;
  aspect-ratio: 454 / 670;
  background: var(--bg);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 64px -20px rgba(0,0,0,.7);
}
.demo-reel__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Drops the video's native black backdrop into the dark page
     surface. Cream card paper, gold daubers, and the purple FREE
     square stay vivid; the empty black around them disappears. */
  mix-blend-mode: lighten;
}
.demo-reel__cta {
  display: inline-flex;
  margin-top: var(--s-7);
}
@media (max-width: 640px) {
  .demo-reel__stage { max-width: 100%; }
}

/* =========================================================
   31. PLAY · 'What is music bingo?' SEO content
   Scoped class names (.play-about*) - no collision risk.
   Sits below the game on /play. Dark surface, restrained type
   so it reads as supporting copy, not a competing CTA.
   ========================================================= */
.play-about {
  background: var(--bg);
  color: var(--text);
  padding: var(--s-8) var(--s-6) var(--s-9);
  border-top: 1px solid var(--rule);
}
.play-about__inner {
  max-width: 760px;
  margin: 0 auto;
}
.play-about__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0 0 var(--s-5);
  color: var(--text);
}
.play-about p {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-18);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}
.play-about p:last-child { margin-bottom: 0; }
.play-about a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.play-about a:hover { color: var(--text); }

/* =========================================================
   32. SONGS · /songs tracklist page (dark surface)
   Long-tail SEO landing for music bingo song-list queries.
   Mixtape/J-card aesthetic: numbered tracks, mono kicker,
   serif title + sans artist on each row.
   ========================================================= */
.songs-page {
  background: var(--bg);
  color: var(--text);
  padding: clamp(80px, 12vw, 140px) var(--s-6) var(--s-9);
}
.songs-page__inner {
  max-width: 880px;
  margin: 0 auto;
}
.songs-page__head { margin-bottom: var(--s-9); }
.songs-page__h1 {
  margin: var(--s-3) 0 var(--s-5);
}
.songs-page__sub {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-20);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
  max-width: 60ch;
  text-wrap: pretty;
}
.songs-page__sub a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.songs-page__sub a:hover { color: var(--text); }

.songs-era {
  margin: 0 0 var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.songs-era__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -.01em;
  line-height: 1;
  margin: var(--s-3) 0 var(--s-5);
  color: var(--text);
}

.songs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: song;
}
.songs-list li {
  counter-increment: song;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid rgba(242,234,219,.08);
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-18);
}
.songs-list li::before {
  content: counter(song, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .18em;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 2.5em;
  font-feature-settings: 'tnum';
}
.songs-list__title {
  font-weight: 600;
  color: var(--text);
}
.songs-list__artist {
  color: var(--text-muted);
  font-style: italic;
}

.songs-cta {
  margin-top: var(--s-9);
  padding: var(--s-7) var(--s-6);
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-align: center;
}
.songs-cta__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: -.01em;
  line-height: 1.05;
  margin: 0 0 var(--s-3);
  color: var(--text);
}
.songs-cta__copy {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 auto var(--s-5);
  max-width: 50ch;
  text-wrap: pretty;
}
.songs-cta__row {
  display: inline-flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 640px) {
  .songs-list li {
    flex-wrap: wrap;
    gap: 4px var(--s-3);
  }
}

/* =========================================================
   33. ANSWERS · GEO citation blocks (dark surface)
   AI Overview / ChatGPT / Perplexity extraction targets.
   Each .answer-block is engineered for 134-167 word citation.
   ========================================================= */
.answers {
  background: var(--bg);
  color: var(--text);
  padding: var(--s-9) var(--s-6);
  border-top: 1px solid var(--rule);
}
.answers__inner {
  max-width: 880px;
  margin: 0 auto;
}
.answers__head {
  max-width: 720px;
  margin: 0 0 var(--s-8);
}
.answers__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--s-4) 0 0;
}
.answer-block {
  margin: 0 0 var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.answer-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.answer-block__h {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  color: var(--text);
}
.answer-block p,
.answer-block li {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-18);
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
.answer-block p { margin: 0; }
.answer-block a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.answer-block__steps {
  margin: 0;
  padding-left: 1.5em;
}
.answer-block__steps li {
  margin-bottom: var(--s-3);
}
.answer-block__steps li strong {
  color: var(--text);
  font-weight: 600;
}

/* Comparison table inside an answer block */
.answer-block__compare {
  overflow-x: auto;
  margin-top: var(--s-2);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--fs-16);
  text-align: left;
}
.compare-table th,
.compare-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--text-muted);
}
.compare-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  border-bottom: 1px solid var(--rule-strong);
}
.compare-table tbody th {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
  width: 25%;
}
.compare-table tbody td:nth-child(2) {
  color: var(--text);
}

/* Stats list - "By the numbers" answer block */
.stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.stats-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-4) 0;
  border-top: 2px solid var(--accent);
}
.stats-list__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--accent);
}
.stats-list__lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}
@media (max-width: 640px) {
  .stats-list { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .compare-table { font-size: var(--fs-14); }
  .compare-table th, .compare-table td { padding: var(--s-2) var(--s-3); }
}