/* ==========================================================================
   FRANK MARINO — THE QUEEN OF LAS VEGAS
   Design system. Black velvet, hot pink, marquee gold — the original site's
   palette, rebuilt with modern type, light, and motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand constants — never change between themes */
  --pink:        #ff2e9f;
  --pink-lit:    #ff7acb;
  --pink-mist:   #ffc2e8;
  --purple:      #7c46bd;
  --purple-deep: #2c1147;
  --velvet:      #4a0f3c;
  --gold:        #f0c25b;
  --gold-hi:     #fff2c9;
  --gold-deep:   #a9761f;

  --grad-gold: linear-gradient(176deg, #fff7dd 0%, #f7d074 30%, #d9a33c 52%, #f4cd72 70%, #fff3cd 100%);
  /* Gold used as TEXT needs its own value — the bright gold that reads on black
     drops to ~1.6:1 on a light ground. Foil gets a darker ramp for the same reason. */
  --gold-text: var(--gold);
  --grad-gold-foil: var(--grad-gold);
  --bulb-a: var(--gold-hi);
  --bulb-a-mid: rgba(240, 194, 91, 0.55);
  --bulb-b: var(--pink-mist);
  --bulb-b-mid: rgba(255, 46, 159, 0.5);
  --script-accent: var(--pink-lit);
  --focus: var(--gold);
  /* The button gradient must hold white at AA across its whole sweep, so it runs
     between two deep pinks rather than up through --pink-lit (2.36:1). */
  --grad-pink: linear-gradient(120deg, #c4156f 0%, #d61a84 50%, #c4156f 100%);
  --grad-velvet: linear-gradient(96deg, #2a0722 0%, var(--velvet) 22%, #6d1a56 50%, var(--velvet) 78%, #2a0722 100%);

  /* Semantic — swapped by [data-theme] */
  --bg:        #0a060f;
  --bg-deep:   #05030a;
  --bg-elev:   #150c1f;
  --bg-elev-2: #1f1330;
  --fg:        #fff4fa;
  --fg-muted:  rgba(255, 244, 250, 0.64);
  --fg-faint:  rgba(255, 244, 250, 0.52);  /* 5.4:1 — AA for the small notes/captions that use it */
  --line:      rgba(255, 194, 232, 0.16);
  --line-firm: rgba(255, 194, 232, 0.3);
  --line-ui:   rgba(255, 214, 240, 0.46);   /* 3:1 boundary for real controls */
  --sheen:     rgba(255, 255, 255, 0.06);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  --shadow-md: 0 18px 44px -20px rgba(0, 0, 0, 0.8);
  --glow-pink: 0 0 34px -6px rgba(255, 46, 159, 0.6);

  /* Type */
  --font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --font-script: "Yellowtail", "Snell Roundhand", cursive;
  --font-ui: "Poppins", "Century Gothic", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.62rem + 1.6vw, 3rem);
  --step-4:  clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
  --step-5:  clamp(3.2rem, 2rem + 6vw, 8rem);

  /* Space + layout */
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3.5rem);
  --wide: 1440px;
  --measure: 68ch;
  --radius: 6px;
  --radius-lg: 14px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* House lights up — the light theme. Same show, different lighting cue. */
[data-theme="light"] {
  --bg:        #fff5fa;
  --bg-deep:   #ffeaf5;
  --bg-elev:   #ffffff;
  --bg-elev-2: #fff0f8;
  --fg:        #24081c;
  --fg-muted:  rgba(36, 8, 28, 0.68);
  --fg-faint:  rgba(36, 8, 28, 0.64);   /* 5.5:1 */
  --line:      rgba(76, 16, 60, 0.16);
  --line-firm: rgba(76, 16, 60, 0.3);
  --line-ui:   rgba(76, 16, 60, 0.52);
  --sheen:     rgba(76, 16, 60, 0.04);
  --gold-deep: #8a5c12;
  --shadow-lg: 0 40px 80px -34px rgba(76, 16, 60, 0.35);
  --shadow-md: 0 16px 40px -22px rgba(76, 16, 60, 0.32);
  --glow-pink: 0 0 30px -8px rgba(255, 46, 159, 0.4);

  --gold-text: #7d520d;
  --grad-gold-foil: linear-gradient(178deg, #a8761c 0%, #7d520d 42%, #5c3a05 68%, #96681a 100%);
  --bulb-a: #c08c22;
  --bulb-a-mid: rgba(160, 112, 26, 0.5);
  --bulb-b: var(--pink);
  --bulb-b-mid: rgba(214, 26, 132, 0.55);
  --script-accent: #d61a84;
  --focus: #b3126b;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* height:auto is load-bearing, not cosmetic: every image carries intrinsic
   width/height attributes (for CLS and lazy-loading), and without this the
   browser pins that pixel height while CSS stretches the width — squashing the
   photo. Components that genuinely want a fixed box override with height:100%
   plus object-fit, and win on specificity. */
img, video { max-width: 100%; height: auto; display: block; }

/* `hidden` must win over the block rules above and over any layout display. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* Bodoni Moda's `opsz` axis auto-tracks font-size, and at display sizes it
     thins the hairlines to near-invisible. Pin it to the text cut so the thin
     strokes stay readable however large the heading gets. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 11;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }

::selection { background: var(--pink); color: #fff; }

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

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 500;
  background: var(--gold);
  color: #1b1005;
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

.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;
}

.shell {
  width: min(100% - (var(--gutter) * 2), var(--wide));
  margin-inline: auto;
}
.shell--narrow { width: min(100% - (var(--gutter) * 2), 980px); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIC FLOURISHES
   -------------------------------------------------------------------------- */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
}

/* ---- THE DISPLAY FACE: never let it render light -------------------------
   Bodoni is a Didone: its hairlines are the thinnest part of the design, and
   two things make them disappear.
   1. `opsz` auto-tracks font-size, so the bigger the text the thinner the
      hairline. Pinned to the text cut.
   2. body sets font-weight 300, and ANY display element that forgets to set a
      weight silently inherits it — at 48px a 300-weight hairline is sub-pixel.
   Every element using --font-display must therefore appear in this list. There
   is no CSS selector for "uses this font", so the list is the contract: if you
   add a new display element, add it here too. */
.wordmark .n2,
.hero__title .big,
.stat__num,
.tl-item__year,
.curtain__mark .name,
.ticker span,
.pullquote,
.quote blockquote,
.hex__plays,
.lightbox__cap strong,
.display-line,
.book-panel h3,
.quote::before {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 11;
}

/* The weight floor. 600 is the lightest Bodoni that holds its hairlines at
   display sizes on a dark ground. */
.pullquote,
.quote blockquote,
.display-line {
  font-family: var(--font-display);
  font-weight: 600;
}
.display-line { line-height: 1.15; }

.gold-foil {
  background: var(--grad-gold-foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for engines that drop background-clip on text */
  -webkit-text-fill-color: transparent;
}

.pink-neon {
  color: var(--pink-lit);
  text-shadow:
    0 0 6px rgba(255, 46, 159, 0.9),
    0 0 22px rgba(255, 46, 159, 0.55),
    0 0 48px rgba(255, 46, 159, 0.3);
}
[data-theme="light"] .pink-neon {
  color: var(--pink);
  text-shadow: 0 0 18px rgba(255, 46, 159, 0.28);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--line-firm), transparent);
  max-width: 90px;
}
.eyebrow--flush::before { display: none; }

.lede {
  font-size: var(--step-1);
  font-weight: 300;
  color: var(--fg-muted);
  max-width: var(--measure);
  line-height: 1.55;
}

.section-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { font-size: var(--step-4); }
.section-head .script { font-size: var(--step-2); color: var(--script-accent); display: block; }
.section-head .lede { margin-inline: auto; text-align: center; margin-top: 1.2rem; }

section { padding-block: clamp(4rem, 9vw, 8.5rem); position: relative; }

/* --------------------------------------------------------------------------
   4. MARQUEE BULBS — the signature motif, lifted from the original logo
   -------------------------------------------------------------------------- */
.bulbs {
  position: relative;
  --bulb: 9px;
  --bulb-gap: 26px;
  --bulb-inset: 11px;
}
.bulbs::before,
.bulbs::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size:
    var(--bulb-gap) var(--bulb), var(--bulb-gap) var(--bulb),
    var(--bulb) var(--bulb-gap), var(--bulb) var(--bulb-gap);
  transition: opacity 0.45s steps(1);
}
.bulbs::before {
  background-image:
    radial-gradient(circle at 50% 50%, var(--bulb-a) 0 26%, var(--bulb-a-mid) 34%, transparent 62%),
    radial-gradient(circle at 50% 50%, var(--bulb-a) 0 26%, var(--bulb-a-mid) 34%, transparent 62%),
    radial-gradient(circle at 50% 50%, var(--bulb-a) 0 26%, var(--bulb-a-mid) 34%, transparent 62%),
    radial-gradient(circle at 50% 50%, var(--bulb-a) 0 26%, var(--bulb-a-mid) 34%, transparent 62%);
  background-position:
    var(--bulb-inset) var(--bulb-inset),
    var(--bulb-inset) calc(100% - var(--bulb-inset)),
    var(--bulb-inset) var(--bulb-inset),
    calc(100% - var(--bulb-inset)) var(--bulb-inset);
  animation: bulb-chase 1.4s steps(1) infinite;
}
.bulbs::after {
  background-image:
    radial-gradient(circle at 50% 50%, var(--bulb-b) 0 26%, var(--bulb-b-mid) 34%, transparent 62%),
    radial-gradient(circle at 50% 50%, var(--bulb-b) 0 26%, var(--bulb-b-mid) 34%, transparent 62%),
    radial-gradient(circle at 50% 50%, var(--bulb-b) 0 26%, var(--bulb-b-mid) 34%, transparent 62%),
    radial-gradient(circle at 50% 50%, var(--bulb-b) 0 26%, var(--bulb-b-mid) 34%, transparent 62%);
  background-position:
    calc(var(--bulb-inset) + (var(--bulb-gap) / 2)) var(--bulb-inset),
    calc(var(--bulb-inset) + (var(--bulb-gap) / 2)) calc(100% - var(--bulb-inset)),
    var(--bulb-inset) calc(var(--bulb-inset) + (var(--bulb-gap) / 2)),
    calc(100% - var(--bulb-inset)) calc(var(--bulb-inset) + (var(--bulb-gap) / 2));
  animation: bulb-chase 1.4s steps(1) infinite reverse;
}
@keyframes bulb-chase {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.16; }
}

/* A single horizontal run of bulbs, for dividers */
.bulb-rule {
  height: 12px;
  background-image: radial-gradient(circle at 50% 50%, var(--bulb-a) 0 24%, var(--bulb-a-mid) 32%, transparent 60%);
  background-size: 26px 12px;
  background-repeat: repeat-x;
  animation: bulb-blink 2.6s ease-in-out infinite;
  opacity: 0.9;
}
@keyframes bulb-blink { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.42; } }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-fg: #1b0d05;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.05rem 2.1rem;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: var(--btn-fg);
  background: var(--grad-gold);
  box-shadow: 0 10px 30px -12px rgba(240, 194, 91, 0.75);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease-out);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -14px rgba(240, 194, 91, 0.9); }
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(-1px); }

.btn--pink { background: var(--grad-pink); color: #fff; box-shadow: var(--glow-pink); }
.btn--pink:hover { box-shadow: 0 18px 42px -12px rgba(255, 46, 159, 0.85); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-firm);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--gold-text); color: var(--gold-text); box-shadow: none; }

.btn--sm { padding: 0.75rem 1.4rem; font-size: 0.72rem; }

/* Text link with a marquee underline */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  padding-bottom: 0.35rem;
  background-image: linear-gradient(var(--pink), var(--pink));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s var(--ease-out), color 0.3s;
}
.tlink:hover { background-size: 100% 1px; color: var(--script-accent); }
.tlink .arrow { transition: transform 0.4s var(--ease-out); }
.tlink:hover .arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s, transform 0.45s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-head.is-stuck {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
}
.site-head.is-hidden { transform: translateY(-102%); }

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(0.8rem, 1.6vw, 1.3rem);
}

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
  flex-shrink: 0;
}
.wordmark .n1 {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--pink-lit);
  margin-bottom: -0.15em;
  text-shadow: 0 0 16px rgba(255, 46, 159, 0.55);
}
.wordmark .n2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.42rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wordmark .n3 {
  font-family: var(--font-ui);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: 0.35rem;
}

.nav-main { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.nav-main a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.28s;
}
.nav-main a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background-image: radial-gradient(circle at 50% 50%, var(--gold) 0 32%, transparent 40%);
  background-size: 8px 3px;
  background-repeat: repeat-x;
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.nav-main a:hover, .nav-main a[aria-current="page"] { color: var(--fg); }
.nav-main a:hover::after, .nav-main a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }

.head-tools { display: flex; align-items: center; gap: 0.7rem; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-ui);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, transform 0.25s;
}
.icon-btn:hover { color: var(--gold-text); border-color: var(--gold-text); transform: rotate(-8deg); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .sun { display: block; }
[data-theme="light"] .theme-toggle .moon { display: none; }

.burger { display: none; }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg-deep);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  /* Never TRANSITION visibility: while it interpolates it computes as `hidden`,
     and a hidden element cannot take focus. Delay it on close, flip it at once
     on open, so the fade still plays and the first link is focusable instantly. */
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease-out), visibility 0s;
}
.nav-drawer ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.nav-drawer li { overflow: hidden; }
.nav-drawer a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 700;
  padding: 0.22em 0;
  transform: translateY(110%);
  transition: transform 0.6s var(--ease-out), color 0.3s;
}
.nav-drawer.is-open a { transform: translateY(0); }
.nav-drawer a:hover { color: var(--script-accent); }
.nav-drawer .drawer-close { position: absolute; top: 1.6rem; right: var(--gutter); }
.nav-drawer .drawer-foot {
  position: absolute;
  bottom: 2.2rem;
  left: 0; right: 0;
  text-align: center;
  font-size: var(--step--1);
  color: var(--fg-faint);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Measured wrap threshold is ~1130px, not 940 — switch to the drawer before the
   seven primary links break onto a second ragged line. */
@media (max-width: 1180px) {
  .nav-main { display: none; }
  .burger { display: grid; }
}
/* At phone width the header CTA wraps onto two lines — the drawer carries Contact anyway. */
@media (max-width: 520px) {
  .head-tools > .btn { display: none; }
  .wordmark .n2 { font-size: 1.2rem; }
  .wordmark .n3 { letter-spacing: 0.3em; }
}

/* --------------------------------------------------------------------------
   7. CURTAIN — the house opening
   -------------------------------------------------------------------------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.curtain__panel {
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.55) 0 2px,
      rgba(255, 255, 255, 0.06) 12px,
      rgba(0, 0, 0, 0.5) 34px,
      rgba(0, 0, 0, 0.62) 46px),
    var(--grad-velvet);
  box-shadow: inset -40px 0 80px -30px rgba(0, 0, 0, 0.9);
  transform: translateX(0);
  transition: transform 1.5s cubic-bezier(0.7, 0, 0.2, 1);
}
/* Target the panels by name, not by position: .curtain__mark is the real last
   child, so :last-child matched nothing and the right panel never animated. */
.curtain__panel--right { box-shadow: inset 40px 0 80px -30px rgba(0, 0, 0, 0.9); }
.curtain.is-open .curtain__panel--left { transform: translateX(-101%); }
.curtain.is-open .curtain__panel--right { transform: translateX(101%); }
.curtain__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.4rem;
  transition: opacity 0.6s;
}
.curtain.is-open .curtain__mark { opacity: 0; }
.curtain__mark .script { font-size: clamp(2.4rem, 8vw, 5rem); color: var(--pink-mist); }
.curtain__mark .name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 7vw, 4.4rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.curtain__mark .sub {
  font-size: 0.66rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.curtain.is-done { display: none; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: grid;
  align-items: center;
  padding-top: clamp(7rem, 14vh, 11rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  background:
    radial-gradient(ellipse 55% 60% at 50% 10%, rgba(255, 46, 159, 0.32), transparent 70%),
    radial-gradient(ellipse 45% 55% at 78% 55%, rgba(124, 70, 189, 0.34), transparent 72%),
    radial-gradient(ellipse 40% 40% at 18% 62%, rgba(240, 194, 91, 0.16), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
[data-theme="light"] .hero__glow { opacity: 0.5; }

/* Two theatrical spotlight beams sweeping the stage */
.hero__beams { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__beams span {
  position: absolute;
  top: -30%;
  width: 42vmax;
  height: 150%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 62%);
  filter: blur(28px);
  transform-origin: 50% 0;
  mix-blend-mode: screen;
}
.hero__beams span:nth-child(1) { left: -8%; animation: sweep-a 13s ease-in-out infinite alternate; }
.hero__beams span:nth-child(2) { right: -8%; animation: sweep-b 17s ease-in-out infinite alternate; }
@keyframes sweep-a { from { transform: rotate(-16deg); } to { transform: rotate(12deg); } }
@keyframes sweep-b { from { transform: rotate(15deg); } to { transform: rotate(-11deg); } }
[data-theme="light"] .hero__beams { opacity: 0.35; }

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.hero__title { margin-bottom: 1.6rem; }
.hero__title .kicker {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 4.4vw, 3.2rem);
  color: var(--pink-lit);
  text-shadow: 0 0 24px rgba(255, 46, 159, 0.5);
  margin-bottom: -0.15em;
  margin-left: 0.1em;
}
.hero__title .big {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-5);
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero__title .big em {
  font-style: normal;
  display: block;
}

.hero__rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.6rem 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.hero__rule::after {
  content: "";
  flex: 1;
  height: 3px;
  background-image: radial-gradient(circle at 50% 50%, var(--gold) 0 30%, transparent 38%);
  background-size: 9px 3px;
  background-repeat: repeat-x;
  opacity: 0.7;
}

.hero__blurb { max-width: 44ch; color: var(--fg-muted); font-size: var(--step-1); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; align-items: center; }

.hero__portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elev);
  box-shadow: var(--shadow-lg);
  --bulb-inset: 13px;
}
.hero__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out);
}
.hero__portrait:hover img { transform: scale(1.09); }
.hero__portrait figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3.5rem 1.6rem 1.5rem;
  background: linear-gradient(transparent, rgba(5, 3, 10, 0.92));
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 244, 250, 0.8);
}

.hero__scroll {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--fg-faint);
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 46px;
  background: linear-gradient(var(--gold), transparent);
  animation: drop 2.4s var(--ease-in-out) infinite;
}
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__portrait { max-width: 380px; margin-inline: auto; order: -1; }
  .hero__scroll { display: none; }
}

/* --------------------------------------------------------------------------
   9. TICKER
   -------------------------------------------------------------------------- */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, var(--sheen), transparent);
  padding-block: 0.9rem;
  display: flex;
  user-select: none;
}
.ticker__run {
  display: flex;
  gap: 2.4rem;
  padding-right: 2.4rem;
  flex-shrink: 0;
  min-width: 100%;
  animation: ticker 46s linear infinite;
}
.ticker:hover .ticker__run { animation-play-state: paused; }
.ticker span {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.ticker span::after { content: "✦"; color: var(--pink); font-size: 0.7em; }
@keyframes ticker { to { transform: translateX(-100%); } }

/* --------------------------------------------------------------------------
   10. STAT BAND
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  background: var(--bg);
  padding: clamp(1.6rem, 3vw, 2.6rem) 1.4rem;
  text-align: center;
  position: relative;
  transition: background 0.4s;
}
.stat:hover { background: var(--bg-elev); }
.stat__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1;
  display: block;
  letter-spacing: -0.02em;
}
.stat__label {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.stats--rooms { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .stats--rooms { grid-template-columns: repeat(4, 1fr); } }
.stats--rooms .stat__num {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0;
}
.stat__note { display: block; margin-top: 0.35rem; font-size: 0.68rem; color: var(--fg-faint); font-style: italic; }

/* --------------------------------------------------------------------------
   11. PANELS + CARDS
   -------------------------------------------------------------------------- */
.panel {
  background:
    linear-gradient(160deg, var(--sheen), transparent 40%),
    var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.8rem);
}

.book-panel {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (max-width: 560px) { .book-panel { grid-template-columns: 1fr; } }
.book-panel img { border-radius: 4px; box-shadow: var(--shadow-md); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-elev);
}
.frame img { width: 100%; }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease-out), border-color 0.4s, box-shadow 0.45s var(--ease-out);
}
.card:hover { transform: translateY(-6px); border-color: var(--line-firm); box-shadow: var(--shadow-md); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-elev-2); position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 1.5rem 1.5rem 1.7rem; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.card__body p { color: var(--fg-muted); font-size: var(--step--1); margin-bottom: 1.1rem; }
.card__body .tlink { margin-top: auto; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.1rem, 2.2vw, 1.8rem); }

/* --------------------------------------------------------------------------
   12. TIMELINE — "The Marquee Years"
   -------------------------------------------------------------------------- */
.timeline { position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background-image: radial-gradient(circle at 50% 50%, var(--gold) 0 28%, transparent 36%);
  background-size: 3px 12px;
  opacity: 0.35;
}
.tl-item {
  position: relative;
  width: calc(50% - 3.2rem);
  padding: 0 0 clamp(2.4rem, 5vw, 4rem);
}
.tl-item:nth-child(odd) { margin-left: auto; text-align: left; }
.tl-item:nth-child(even) { text-align: right; }
.tl-item__dot {
  position: absolute;
  top: 0.55rem;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--bg), 0 0 22px 3px rgba(240, 194, 91, 0.75);
}
/* the rail is at the item edge + 3.2rem; centre a 15px dot on it exactly */
.tl-item:nth-child(odd) .tl-item__dot { left: calc(-3.2rem - 7.5px); }
.tl-item:nth-child(even) .tl-item__dot { right: calc(-3.2rem - 7.5px); }
.tl-item__year {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}
.tl-item h3 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.tl-item p { color: var(--fg-muted); font-size: var(--step-0); line-height: 1.6; max-width: 48ch; }
.tl-item:nth-child(odd) p { margin-right: auto; }
.tl-item:nth-child(even) p { margin-left: auto; }
.tl-item__tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.24rem 0.75rem;
  margin-top: 0.9rem;
}
.tl-item__img {
  margin-top: 1.2rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  max-width: 320px;
}
.tl-item:nth-child(even) .tl-item__img { margin-left: auto; }

@media (max-width: 820px) {
  .timeline::before { left: 9px; }
  .tl-item, .tl-item:nth-child(odd), .tl-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    text-align: left;
    padding-left: 3rem;
  }
  .tl-item:nth-child(odd) .tl-item__dot,
  .tl-item:nth-child(even) .tl-item__dot { left: 2px; right: auto; }
  .tl-item:nth-child(even) p, .tl-item:nth-child(even) .tl-item__img { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   13. HONEYCOMB CAST
   -------------------------------------------------------------------------- */
/* Pointy-top hexagons tile in offset ROWS: each row overlaps the one above by a
   quarter of a hex height, and alternate rows shift sideways by half a hex.
   The column count is fixed per breakpoint so the row parity can be addressed
   with :nth-child() ranges. */
.hive {
  --cols: 4;
  --avail: min(calc(100vw - var(--gutter) * 2), var(--wide));
  --hex-w: min(220px, calc(var(--avail) / 4.5));
  --hex-h: calc(var(--hex-w) * 1.1547);
  --shift: calc(var(--hex-w) * -0.25);
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--hex-w));
  justify-content: center;
  gap: 0;
  /* room for the ±quarter-hex row shift, so neither edge column is clipped,
     plus headroom for the 7% hover growth on the flush top row */
  padding-inline: calc(var(--hex-w) * 0.25);
  padding-top: calc(var(--hex-h) * 0.05);
  padding-bottom: calc(var(--hex-h) * 0.5);
  overflow: hidden;
}
/* The clip lives on an inner element, NOT the button: clip-path would clip the
   button's own focus ring away, and there is no way to draw one back inside a
   hexagon cleanly. With the clip one level down, ::before can render a true
   hexagonal gold halo just outside the tile. */
.hex {
  width: var(--hex-w);
  aspect-ratio: 1 / 1.1547;
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  margin-bottom: calc(var(--hex-h) * -0.25);
  transform: translateX(var(--shift));
  transition: transform 0.5s var(--ease-out), filter 0.5s;
}
.hex__inner {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
  background: var(--purple-deep);
}
.hex::before {
  content: "";
  position: absolute;
  inset: -5px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--gold-hi);
  opacity: 0;
  transition: opacity 0.2s;
}
.hex:focus, .hex:focus-visible { outline: none; }
.hex:focus::before, .hex:focus-visible::before { opacity: 1; }
/* 4 columns → shift rows 2, 4, 6 … (items 5–8, 13–16, …) */
.hive .hex:nth-child(8n+5),
.hive .hex:nth-child(8n+6),
.hive .hex:nth-child(8n+7),
.hive .hex:nth-child(8n) { --shift: calc(var(--hex-w) * 0.25); }
.hex img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out), filter 0.5s;
  filter: saturate(0.92);
}
.hex__scrim {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  justify-items: center;
  /* keep labels clear of the hexagon's narrowing point */
  padding: 0 15% 20%;
  text-align: center;
  background: linear-gradient(transparent 34%, rgba(20, 4, 16, 0.9) 78%);
  transition: background 0.45s;
}
.hex__plays {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.5vw, 1.15rem);
  line-height: 1.05;
  color: var(--gold-hi);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.hex__who {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.3rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}
.hex:hover, .hex:focus-visible { transform: translateX(var(--shift)) scale(1.07); z-index: 3; }
/* clip-path clips the outline too, so the focus ring has to be drawn INSIDE the
   hexagon — on the scrim, which is a real child filling the clipped box.
   Styled on :focus as well as :focus-visible: the lightbox returns focus here
   programmatically on close, and that must still be visible. */

.hex:hover img, .hex:focus-visible img { transform: scale(1.09); filter: saturate(1.15); }
.hex:hover .hex__who, .hex:focus-visible .hex__who { opacity: 1; transform: translateY(0); }
.hex:hover .hex__scrim, .hex:focus-visible .hex__scrim { background: linear-gradient(transparent 18%, rgba(74, 15, 60, 0.94) 74%); }

/* 3 columns → shift rows 2, 4 … (items 4–6, 10–12, …) */
@media (max-width: 900px) {
  .hive { --cols: 3; --hex-w: min(200px, calc(var(--avail) / 3.5)); }
  .hive .hex:nth-child(8n+5),
  .hive .hex:nth-child(8n+6),
  .hive .hex:nth-child(8n+7),
  .hive .hex:nth-child(8n) { --shift: calc(var(--hex-w) * -0.25); }
  .hive .hex:nth-child(6n+4),
  .hive .hex:nth-child(6n+5),
  .hive .hex:nth-child(6n) { --shift: calc(var(--hex-w) * 0.25); }
}

/* 2 columns → shift rows 2, 4 … (items 3–4, 7–8, …) */
@media (max-width: 560px) {
  .hive { --cols: 2; --hex-w: min(190px, calc(var(--avail) / 2.5)); }
  .hive .hex:nth-child(6n+4),
  .hive .hex:nth-child(6n+5),
  .hive .hex:nth-child(6n) { --shift: calc(var(--hex-w) * -0.25); }
  .hive .hex:nth-child(4n+3),
  .hive .hex:nth-child(4n) { --shift: calc(var(--hex-w) * 0.25); }
}

/* --------------------------------------------------------------------------
   14. GALLERY WALL + LIGHTBOX
   -------------------------------------------------------------------------- */
.wall {
  columns: 4 240px;
  column-gap: 12px;
}
.wall__item {
  break-inside: avoid;
  margin-bottom: 12px;
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: var(--bg-elev-2);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  color: inherit;
}
.wall__item img {
  width: 100%;
  height: auto;   /* the intrinsic height attribute is for aspect ratio only */
  transition: transform 0.7s var(--ease-out), filter 0.5s;
}
.wall__item figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.4rem 0.9rem 0.8rem;
  background: linear-gradient(transparent, rgba(5, 3, 10, 0.9));
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}
.wall__item:hover img, .wall__item:focus-visible img { transform: scale(1.05); }
.wall__item:hover figcaption, .wall__item:focus-visible figcaption { opacity: 1; transform: translateY(0); }

.wall--covers { columns: 5 170px; }

@media (max-width: 700px) { .wall { columns: 2 140px; } .wall--covers { columns: 3 110px; } }

.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.2rem;
}
.chip {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 0.3s;
}
.chip:hover { color: var(--fg); border-color: var(--line-firm); }
.chip[aria-pressed="true"] { background: var(--grad-pink); border-color: transparent; color: #fff; }

.search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--line-ui);
  border-radius: 100px;
  padding: 0.5rem 1.1rem;
  min-width: 250px;
  background: var(--bg-elev);
}
.search input {
  border: 0; background: transparent; color: var(--fg);
  font-family: var(--font-ui); font-size: var(--step--1);
  width: 100%; outline: none;
}
.search input::placeholder { color: var(--fg-faint); }
.search svg { width: 15px; height: 15px; stroke: var(--fg-faint); fill: none; stroke-width: 2; flex-shrink: 0; }

.wall__empty { text-align: center; color: var(--fg-muted); padding: 3rem 0; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(4, 2, 8, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  visibility: hidden;
  /* See .nav-drawer — visibility is stepped, never interpolated, so the close
     button is focusable on the frame the dialog opens. */
  transition: opacity 0.35s, visibility 0s linear 0.35s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s, visibility 0s;
}
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem var(--gutter); color: #fff; }
.lightbox__count { font-size: var(--step--1); letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.55); }
.lightbox__stage { display: grid; place-items: center; padding: 0 clamp(0.5rem, 5vw, 5rem); min-height: 0; }
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 40px 100px -30px #000;
}
.lightbox__cap { text-align: center; padding: 1.2rem var(--gutter) 2rem; color: #fff; }
.lightbox__cap strong { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; display: block; }
.lightbox__cap span { font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.lightbox__nav:hover { background: var(--pink); transform: translateY(-50%) scale(1.08); }
.lightbox__nav.prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav.next { right: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.lightbox .icon-btn { color: #fff; border-color: rgba(255, 255, 255, 0.25); }

/* --------------------------------------------------------------------------
   15. PRESS / QUOTES
   -------------------------------------------------------------------------- */
.quote-deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem; }
.quote {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  position: relative;
}
.quote::before {
  content: "“";
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 0.7;
  color: var(--pink);
  opacity: 0.35;
  position: absolute;
  top: 1rem; left: 1.2rem;
}
.quote blockquote {
  margin: 1.6rem 0 1.2rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.35;
  font-style: italic;
}
.pullquote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.35;
  margin: 0 auto 1rem;
  max-width: 52ch;
}
.pullquote--lead { font-size: var(--step-2); max-width: 28ch; }
.attribution {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.quote cite {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* --------------------------------------------------------------------------
   16. MERCH
   -------------------------------------------------------------------------- */
.merch-card .card__media { aspect-ratio: 1; display: grid; place-items: center; padding: 1.4rem; background: radial-gradient(circle at 50% 40%, var(--bg-elev-2), var(--bg-elev)); }
.merch-card .card__media img { width: auto; height: 100%; object-fit: contain; }
/* Price + CTA sit on a common baseline no matter how long the blurb runs. */
.merch-card .card__body p { margin-bottom: 1.4rem; }
.merch-card .price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-2);
  color: var(--gold-text);
  display: block;
  margin-top: auto;
  margin-bottom: 0.7rem;
}
.merch-card .btn { align-self: flex-start; }
.merch-card .flag {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  z-index: 2;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--grad-pink);
  color: #fff;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
}
.merch-card select {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  background: var(--bg-elev-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.5rem 0.9rem;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   17. FORMS
   -------------------------------------------------------------------------- */
.field { margin-bottom: 1.3rem; }
.field label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.55rem;
}
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 300;
  color: var(--fg);
  background: var(--bg-elev);
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 46, 159, 0.18);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.form-note { font-size: var(--step--1); color: var(--fg-faint); }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  margin-bottom: 3rem;
}
.foot-grid h2 {
  font-family: var(--font-ui);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 1.1rem;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.foot-grid a { color: var(--fg-muted); font-size: var(--step--1); transition: color 0.25s; }
.foot-grid a:hover { color: var(--script-accent); }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--fg-faint);
}
.socials { display: flex; gap: 0.6rem; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   19. PAGE HEADERS (interior)
   -------------------------------------------------------------------------- */
.page-head {
  padding-top: clamp(8rem, 16vh, 12rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-head::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 100%;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 46, 159, 0.22), transparent 68%);
  pointer-events: none;
}
.page-head > * { position: relative; z-index: 1; }
.page-head h1 { font-size: var(--step-4); }
.page-head .script { font-size: var(--step-2); color: var(--script-accent); display: block; margin-bottom: -0.2em; }
.page-head .lede { margin-inline: auto; text-align: center; margin-top: 1.4rem; }

.crumbs {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 1.4rem;
}
.crumbs a:hover { color: var(--gold-text); }

/* --------------------------------------------------------------------------
   20. REVEAL ANIMATIONS + SPARKLE
   -------------------------------------------------------------------------- */
/* Only hide reveal targets once we know scripting is live AND has not failed —
   see the head bootstrap in every page, which sets .js and then .reveal-safe. */
.js:not(.reveal-safe) [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
[data-reveal] { transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); transition-delay: var(--delay, 0ms); }
[data-reveal].is-in, .reveal-safe [data-reveal] { opacity: 1; transform: none; }

.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 700;
  width: 12px; height: 12px;
  background: radial-gradient(circle, var(--gold-hi) 0 18%, transparent 60%);
  animation: sparkle-out 900ms var(--ease-out) forwards;
}
.sparkle::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--gold-hi), var(--gold-hi)) center / 1.2px 100% no-repeat,
    linear-gradient(90deg, var(--gold-hi), var(--gold-hi)) center / 100% 1.2px no-repeat;
  opacity: 0.9;
}
@keyframes sparkle-out {
  0% { opacity: 0.95; transform: scale(0.3) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.15) rotate(75deg) translateY(16px); }
}

/* --------------------------------------------------------------------------
   21. MOTION + PRINT SAFETY
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .curtain { display: none; }
  .hero__beams, .sparkle { display: none; }
  .bulbs::before, .bulbs::after { opacity: 1; }
  .bulbs::after { opacity: 0.5; }
}

@media print {
  .site-head, .curtain, .hero__beams, .lightbox, .nav-drawer, .ticker { display: none !important; }
  body { background: #fff; color: #000; }
}