/* ───────────── design tokens ───────────── */
:root {
  --bone: #f3e7c9;
  --bone-dim: #d8caa7;
  --cream: #f5ebd3;
  --purple-deep: #0e0820;
  --purple-night: #1a0f33;
  --purple-mid: #3b2e63;
  --purple-shadow: #5a4790;
  --ghoul: #9cd6a8;
  --ghoul-dark: #4f8a64;
  --moss: #2a4f3a;
  --blood: #b8453e;
  --eye-glow: #c44a8d;
  --grain-opacity: 0.08;
}

/* ───────────── reset ───────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  background: var(--purple-deep);
  color: var(--bone);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ───────────── atmosphere: grain + radial glow ───────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  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='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.91  0 0 0 0 0.82  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(91, 71, 144, 0.35), transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 90%, rgba(76, 138, 100, 0.18), transparent 70%),
    radial-gradient(ellipse 70% 50% at 85% 80%, rgba(196, 74, 141, 0.12), transparent 70%);
}

main, header, footer, section { position: relative; z-index: 2; }

/* ───────────── typography ───────────── */
.display { font-family: 'Eater', 'Creepster', cursive; font-weight: 400; letter-spacing: 0.02em; line-height: 0.95; }
.mono    { font-family: 'Special Elite', 'Courier New', monospace; letter-spacing: 0.04em; }
.bebas   { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.12em; }

/* drippy text shadow that mimics the logo */
.drip-shadow {
  color: var(--cream);
  text-shadow:
    4px 4px 0 var(--purple-shadow),
    5px 5px 0 var(--purple-mid),
    6px 6px 0 var(--purple-mid),
    7px 7px 0 var(--purple-mid),
    8px 8px 0 var(--purple-deep);
}

/* ───────────── nav ───────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, rgba(14, 8, 32, 0.85), rgba(14, 8, 32, 0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s;
}
.nav-brand img {
  /* The wordmark file is near-square (stacked badge over title), so it
     needs more vertical room than a horizontal lockup would to stay legible. */
  height: 56px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
.nav-brand:hover { transform: rotate(-2deg) scale(1.04); }
@media (max-width: 700px) {
  .nav-brand img { height: 48px; }
}
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-links a {
  font-family: 'Special Elite', monospace;
  color: var(--bone-dim);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.2s;
  position: relative;
}
.nav-links a:hover { color: var(--ghoul); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  width: 0; height: 1px;
  background: var(--ghoul);
  transition: width 0.3s, left 0.3s;
}
.nav-links a:hover::after { width: 100%; left: 0; }
/* Invisible hit-area extender so the 13px nav links still meet the 44px
   touch-target guideline without disturbing the animated underline below. */
.nav-links a::before {
  content: '';
  position: absolute;
  inset: -14px -6px;
}
.nav-ig {
  border: 1px solid var(--purple-shadow);
  padding: 8px 16px;
  border-radius: 2px;
  background: rgba(91, 71, 144, 0.15);
}
.nav-ig:hover {
  background: var(--purple-shadow);
  border-color: var(--ghoul);
}
@media (max-width: 700px) {
  .nav { padding: 14px 18px; }
  .nav-links { gap: 14px; }
  .nav-links .hide-mobile { display: none; }
}

/* ───────────── HERO (Full Moon Rising) ─────────────
   Single intentional composition:
     LEFT  → text column (headline does the work)
     RIGHT → moon-as-halo behind the logo, ONE merged moment.
   No scattered decorations. */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 110px 6vw 100px;
  display: flex;
  align-items: center;
  justify-content: center;          /* center the inner composition */
  background:
    radial-gradient(ellipse 55% 50% at 72% 42%, rgba(255, 233, 168, 0.14), transparent 65%),
    radial-gradient(ellipse 70% 25% at 50% 100%, rgba(76, 138, 100, 0.18), transparent 70%);
}

/* Photographic backdrop: real pop-up bar shot, heavily tinted toward the
   site's deep-purple palette so foreground type, illustrations, and the
   moon halo still read as the primary focus. Sits below .hero-inner (z:3)
   but above the section's base gradients. */
.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* purple wash — lighter so photo details (string lights, crowd, neon) read through */
    linear-gradient(180deg,
      rgba(14, 8, 32, 0.45) 0%,
      rgba(26, 15, 51, 0.40) 50%,
      rgba(14, 8, 32, 0.65) 100%),
    /* the photo itself */
    image-set(
      url('assets/hero-backdrop.webp') type('image/webp'),
      url('assets/hero-backdrop.jpg')  type('image/jpeg'));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  /* mild desaturation only — let the warm reds/oranges show */
  filter: saturate(0.9) contrast(1.02) brightness(0.95);
}

/* The composition lives inside a max-width container — pulls text + stage
   close together so they live in the same composition instead of being
   pinned to opposite edges of the viewport on wide screens. */
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1280px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: fade-up 1.2s 0.2s both ease-out;
}
.hero-title {
  display: flex;
  flex-direction: column;
  font-family: 'Eater', cursive;
  font-size: clamp(58px, 8.5vw, 124px);
  line-height: 0.86;
  letter-spacing: -0.015em;
  color: var(--cream);
  text-shadow:
    5px 5px 0 var(--purple-shadow),
    7px 7px 0 var(--purple-mid),
    9px 9px 0 var(--purple-deep);
  margin: 0 0 24px;
}
.hero-title .line {
  display: block;
  align-self: flex-start;
}
.hero-title .line-inner {
  display: inline-block;
  will-change: transform, opacity;
}
.hero-title .accent { color: var(--ghoul); }
.hero-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--bone-dim);
  max-width: 480px;
  margin: 0 0 22px;
  line-height: 1.45;
}
.hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin: 0 0 28px;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--cream);
  text-transform: uppercase;
}
.hero-meta-dot { color: var(--ghoul); }

.hero-address {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  margin: 0 0 22px;
  text-decoration: none;
  color: var(--bone);
  border-bottom: 1px dashed var(--purple-shadow);
  transition: border-color 0.2s, color 0.2s;
}
.hero-address:hover {
  border-bottom-color: var(--ghoul);
  color: var(--cream);
}
.hero-address-label {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ghoul);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-address-line {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--bone);
  letter-spacing: 0.01em;
}
.hero-address-arrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  color: var(--ghoul);
  transition: transform 0.2s;
}
.hero-address:hover .hero-address-arrow { transform: translate(2px, -2px); }

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 24px 48px;
  background: var(--blood);
  color: var(--cream);
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.28em;
  border: 2px solid var(--cream);
  box-shadow: 10px 10px 0 var(--purple-mid);
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s, color 0.25s;
  text-transform: uppercase;
  position: relative;
}
.hero-cta:hover {
  transform: translate(-4px, -4px);
  box-shadow: 14px 14px 0 var(--purple-mid);
  background: var(--cream);
  color: var(--blood);
}
.hero-cta::after { content: '→'; transition: transform 0.2s; font-size: 24px; }
.hero-cta:hover::after { transform: translateX(6px); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Stage: moon halo + moon SVG + logo, layered as one composition ── */
.hero-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1 / 1;
  justify-self: end;
  margin-right: clamp(-40px, -1vw, 0px);
}
/* Soft moonlight backwash — atmospheric halo behind the composition */
.hero-stage-halo {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 233, 168, 0.22) 0%,
    rgba(196, 74, 141, 0.12) 35%,
    transparent 65%);
  filter: blur(24px);
  animation: hero-stage-pulse 7.4s ease-in-out infinite;
  z-index: 1;
}
@keyframes hero-stage-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.6; }
  50%      { transform: scale(1.06); opacity: 0.9; }
}
/* The moon SVG — sized as a backdrop element behind the logo, not as
   a competing focal point. Smaller + softer glow so the logo reads
   as the hero composition's centerpiece. */
.hero-stage-moon {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 44%;
  height: auto;
  transform: translateX(-50%);
  z-index: 2;
  filter:
    drop-shadow(0 0 18px rgba(255, 233, 168, 0.45))
    drop-shadow(0 0 50px rgba(255, 233, 168, 0.22));
  animation: hero-stage-moon-glow 7s ease-in-out infinite;
}
@keyframes hero-stage-moon-glow {
  0%, 100% { filter:
    drop-shadow(0 0 12px rgba(255, 233, 168, 0.35))
    drop-shadow(0 0 40px rgba(255, 233, 168, 0.18)); }
  50%      { filter:
    drop-shadow(0 0 22px rgba(255, 233, 168, 0.55))
    drop-shadow(0 0 64px rgba(255, 233, 168, 0.32)); }
}
/* Logo composition — the actual focal point. Centered + slightly
   larger so the cocktail/skeleton hand are clearly the lead element. */
.hero-stage-logo {
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translateX(-50%);
  z-index: 3;
  filter: drop-shadow(0 30px 42px rgba(0, 0, 0, 0.7));
  animation: hero-stage-logo-sway 6s ease-in-out infinite;
  transform-origin: 50% 96%;
}
@keyframes hero-stage-logo-sway {
  /* Parallax (--px, --py) composes inside the keyframe so cursor tilt
     doesn't get clobbered while the sway is running. */
  0%, 100% { transform: translateX(-50%) translate3d(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -5px), 0) rotate(-1.2deg); }
  50%      { transform: translateX(-50%) translate3d(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -5px), 0) rotate( 1.2deg); }
}

/* ─────────────────────────────────────────────────────────────────────
   HERO CUSTOM CURSOR — a flickering candle replaces the system cursor
   while hovering the hero composition. Only enabled on fine pointers
   (matchMedia in motion.js). The element is position:fixed + translated
   via JS per mousemove for sub-frame smoothness. Reduced motion hides it.
   ────────────────────────────────────────────────────────────────────── */
.hero-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 64px;
  margin-left: -20px; /* center the SVG horizontally on the actual cursor */
  margin-top: -56px;  /* anchor at the candle holder, not the flame */
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 0.22s ease;
  filter: drop-shadow(0 0 12px rgba(255, 180, 80, 0.55));
  will-change: transform;
}
.hero-cursor svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-cursor.is-active { opacity: 1; }
/* Scale up slightly when hovering interactive elements — visual hover cue */
.hero-cursor.is-hot { transform-origin: center bottom; }
.hero-cursor.is-hot .hero-cursor-flame {
  filter: drop-shadow(0 0 6px rgba(255, 180, 80, 0.8));
}

/* The flame itself flickers on a short irregular loop */
.hero-cursor-flame {
  transform-origin: 50% 100%;
  animation: hero-cursor-flicker 0.6s ease-in-out infinite alternate;
}
.hero-cursor-halo {
  transform-origin: 50% 50%;
  animation: hero-cursor-halo-pulse 1.4s ease-in-out infinite;
}
@keyframes hero-cursor-flicker {
  0%   { transform: scale(0.94, 0.96) translateX(-0.4px); opacity: 0.92; }
  35%  { transform: scale(1.05, 1.02) translateX(0.6px);  opacity: 1;    }
  70%  { transform: scale(0.97, 1.04) translateX(-0.3px); opacity: 0.88; }
  100% { transform: scale(1.02, 0.98) translateX(0.4px);  opacity: 0.95; }
}
@keyframes hero-cursor-halo-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1;   }
}

/* Hide the native cursor on hero while ours is active. Class added by JS
   so users on touch / reduced-motion never lose their system cursor. */
.hero.cursor-hidden,
.hero.cursor-hidden * { cursor: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hero-cursor { display: none !important; }
}

/* Bat crosses the moon once on hero arrival, then continues off-screen
   and stays gone — a single theatrical beat, not a loop. */
.hero-stage-bat {
  position: absolute;
  /* Anchor near the moon's vertical center, off to the right edge */
  top: 18%;
  left: 110%;
  width: 38px;
  height: auto;
  z-index: 4;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.55));
  /* delay so the bat enters after the hero title has read */
  animation: hero-bat-cross 4.8s 1.6s ease-in-out 1 forwards;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
@keyframes hero-bat-cross {
  /* Enter from right, arc across in front of the moon, exit left */
  0%   { left: 105%; top: 28%; transform: scale(0.85) rotate(-6deg);  opacity: 0; }
  10%  { opacity: 0.92; }
  30%  { left: 70%;  top: 16%; transform: scale(1.05) rotate(4deg); }
  55%  { left: 38%;  top: 22%; transform: scale(0.95) rotate(-6deg); }
  78%  { left: 10%;  top: 14%; transform: scale(1.08) rotate(6deg); opacity: 0.92; }
  100% { left: -8%;  top: 18%; transform: scale(0.7) rotate(-4deg);  opacity: 0; }
}

/* Cursor-parallax tilt — motion.js writes --px / --py (range -1..1) onto
   .hero-stage as the cursor moves; these vars feed gentle translate+tilt
   on the moon and logo. Halo stays still so the backwash doesn't slosh. */
.hero-stage {
  --px: 0;
  --py: 0;
}
.hero-stage-moon {
  transform:
    translateX(-50%)
    translate3d(calc(var(--px) * 10px), calc(var(--py) * 8px), 0);
}
/* (Logo transform is owned by the .hero-stage-logo-sway keyframe, which
   composes the --px / --py parallax internally. No base override needed.) */

@media (prefers-reduced-motion: reduce) {
  .hero-stage-halo,
  .hero-stage-moon,
  .hero-stage-logo,
  .hero-stage-bat { animation: none !important; }
  .hero-stage-bat { display: none; }
  /* Drop the parallax composition so the sway keyframe owns the transform alone */
  .hero-stage-moon { transform: translateX(-50%); }
  .hero-stage-logo { transform: translateX(-50%); }
}



/* Scroll-down indicator anchored at the bottom of the hero */
.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--bone-dim);
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  transition: color 0.25s, opacity 0.25s;
  opacity: 0.85;
  animation: hero-scroll-rise 1.4s 1.6s both ease-out;
}
.hero-scroll:hover { color: var(--ghoul); opacity: 1; }
.hero-scroll-arrow {
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--ghoul);
  border-bottom: 2px solid var(--ghoul);
  transform: rotate(45deg);
  animation: hero-scroll-bounce 2s ease-in-out infinite;
}
@keyframes hero-scroll-bounce {
  0%, 100% { transform: rotate(45deg) translate(-3px, -3px); opacity: 0.7; }
  50%      { transform: rotate(45deg) translate(3px, 3px);   opacity: 1;   }
}
@keyframes hero-scroll-rise {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 0.85; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-arrow { animation: none; }
}

@media (max-width: 900px) {
  /* Stack stage above text on mobile. */
  .hero { padding: 100px 6vw 140px; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-stage {
    order: -1;
    width: min(84vw, 420px);
    max-width: none;
    margin: 0 auto;
    justify-self: center;
  }
  .hero-text { align-items: flex-start; }
  .hero-title { font-size: clamp(56px, 14vw, 96px); margin-bottom: 24px; }
  .hero-tagline { font-size: 18px; margin-bottom: 24px; }
  .hero-cta { padding: 18px 32px; font-size: 18px; box-shadow: 6px 6px 0 var(--purple-mid); }
  .hero-scroll { display: none; }
}

/* ───────────── fog layer ───────────── */
.fog {
  position: absolute;
  bottom: -50px;
  left: 0; right: 0;
  height: 180px;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}
.fog-layer {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 100%;
  /* Tinted toward the deep purple palette so the fog reads as atmosphere
     against the photographic backdrop instead of a flat white haze. */
  background:
    radial-gradient(ellipse at 30% 80%, rgba(91, 71, 144, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(59, 46, 99, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(14, 8, 32, 0.55) 0%, transparent 65%);
  animation: fog-drift 25s linear infinite;
}
.fog-layer:nth-child(2) { animation-duration: 40s; animation-direction: reverse; opacity: 0.5; }
@keyframes fog-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ───────────── marquee strip ───────────── */
.marquee {
  position: relative;
  z-index: 4;
  overflow: hidden;
  padding: 22px 0;
  background:
    /* Subtle vertical fade-in/out so the strip's top + bottom edges
       dissolve into the page bg rather than ending on hard 1px borders. */
    linear-gradient(to bottom,
      var(--purple-deep) 0%,
      var(--purple-night) 30%,
      var(--purple-night) 70%,
      var(--purple-deep) 100%),
    linear-gradient(to right, var(--purple-night) 0%, var(--purple-deep) 50%, var(--purple-night) 100%);
  background-blend-mode: multiply;
  box-shadow: 0 0 40px rgba(91, 71, 144, 0.2) inset;
}
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(to right, var(--purple-night), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--purple-night), transparent); }
.marquee-track {
  display: inline-flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  color: var(--cream);
  padding-right: 60px;
}
.marquee-item .m-display {
  font-family: 'Eater', cursive;
  font-size: clamp(28px, 4.5vw, 52px);
  letter-spacing: 0.04em;
  color: var(--cream);
}
.marquee-item .m-mono {
  font-family: 'Special Elite', monospace;
  font-size: clamp(13px, 1.2vw, 17px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.marquee-item .m-stamp {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ghoul);
}
.marquee-item .m-sep { color: var(--purple-shadow); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ───────────── section base ───────────── */
section.standard {
  padding: 120px 8vw;
  position: relative;
}
.section-header {
  text-align: center;
  margin-bottom: 80px;
}
.section-eyebrow {
  font-family: 'Special Elite', monospace;
  color: var(--ghoul);
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-title {
  font-family: 'Eater', cursive;
  font-size: clamp(40px, 6vw, 80px);
  color: var(--cream);
  line-height: 1;
  text-shadow:
    4px 4px 0 var(--purple-shadow),
    6px 6px 0 var(--purple-mid),
    8px 8px 0 var(--purple-deep);
}
.section-sub {
  margin-top: 24px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--bone-dim);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* drippy divider svg */
.drip-divider {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0 auto;
}

/* Screen-reader only — keep heading structure without visible text */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Crew tagline — replaces the previous eyebrow + title + sub stack now
   that the marquee owns the title. */
.crew-section-header {
  margin-bottom: 56px;
}
.crew-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px);
  color: var(--bone-dim);
  max-width: 540px;
  line-height: 1.5;
  margin: 0 auto;
  text-align: center;
}

/* ── Crew marquee header — vintage cinema sign sits above the cast row ── */
.crew-marquee {
  position: relative;
  max-width: 720px;
  width: min(720px, 92%);
  margin: 0 auto 28px;
  /* warm bulb glow + drop-shadow; the glow pulses on a slow cycle so
     the bulbs feel alive without being distracting */
  filter:
    drop-shadow(0 0 18px rgba(255, 200, 100, 0.35))
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
  animation: crew-marquee-glow 4.2s ease-in-out infinite;
}
.crew-marquee img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes crew-marquee-glow {
  0%, 100% { filter:
    drop-shadow(0 0 16px rgba(255, 200, 100, 0.32))
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5)); }
  50%      { filter:
    drop-shadow(0 0 24px rgba(255, 200, 100, 0.55))
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5)); }
}
.crew-marquee-text {
  position: absolute;
  /* sit inside the wine-red center panel of the SVG. The SVG viewBox
     is 1344×768; the panel occupies roughly 12%–88% x, 27%–73% y. */
  left: 12%;
  right: 12%;
  top: 27%;
  bottom: 27%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  text-align: center;
}
.crew-marquee-top {
  font-family: 'Special Elite', monospace;
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 200, 120, 0.85);
}
.crew-marquee-mid {
  font-family: 'Eater', cursive;
  font-size: clamp(20px, 3.2vw, 38px);
  letter-spacing: 0.01em;
  color: #f6e1b3;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.6),
    0 0 18px rgba(255, 200, 100, 0.55);
  line-height: 1;
}
.crew-marquee-bot {
  font-family: 'Special Elite', monospace;
  font-size: clamp(8px, 0.85vw, 10px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 200, 120, 0.7);
  margin-top: 2px;
}
@media (max-width: 700px) {
  .crew-marquee { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .crew-marquee { animation: none; }
}

/* ───────────── MEET THE CREW ───────────── */
.crew {
  position: relative;
  overflow: hidden;
  /* Tight top after the marquee so the cast row crashes onto the page;
     bottom stays generous to breathe into the about section. */
  padding: 80px 8vw 100px;
  background:
    /* upper edge dripping curtain hint */
    linear-gradient(180deg, rgba(184, 69, 62, 0.10) 0%, transparent 80px),
    /* warm bottom footlights wash */
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(196, 119, 74, 0.18), transparent 70%),
    /* deeper stage center */
    radial-gradient(ellipse 70% 50% at 50% 60%, rgba(91, 71, 144, 0.35), transparent 70%),
    var(--purple-deep);
}
.crew::before {
  /* Drippy curtain row across the very top of the section */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  background:
    radial-gradient(circle 10px at 5%  100%, var(--blood) 49%, transparent 50%),
    radial-gradient(circle 14px at 12% 100%, var(--blood) 49%, transparent 50%),
    radial-gradient(circle 9px  at 20% 100%, var(--blood) 49%, transparent 50%),
    radial-gradient(circle 16px at 28% 100%, var(--blood) 49%, transparent 50%),
    radial-gradient(circle 11px at 36% 100%, var(--blood) 49%, transparent 50%),
    radial-gradient(circle 13px at 44% 100%, var(--blood) 49%, transparent 50%),
    radial-gradient(circle 9px  at 52% 100%, var(--blood) 49%, transparent 50%),
    radial-gradient(circle 15px at 60% 100%, var(--blood) 49%, transparent 50%),
    radial-gradient(circle 12px at 68% 100%, var(--blood) 49%, transparent 50%),
    radial-gradient(circle 10px at 76% 100%, var(--blood) 49%, transparent 50%),
    radial-gradient(circle 14px at 84% 100%, var(--blood) 49%, transparent 50%),
    radial-gradient(circle 9px  at 92% 100%, var(--blood) 49%, transparent 50%),
    linear-gradient(180deg, var(--blood) 0%, var(--blood) 60%, transparent 100%);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
  opacity: 0.85;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

.crew-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  justify-items: center;
  gap: 0;                       /* figures overlap via negative margins below */
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 6vw 60px;
  min-height: 520px;
  /* cursor-driven spotlight position is written to these vars by JS */
  --sx: 50%;
  --sy: 50%;
}

/* Spotlight that follows cursor inside the stage */
.crew-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle 320px at var(--sx) var(--sy),
              rgba(243, 231, 201, 0.18) 0%,
              rgba(243, 231, 201, 0.08) 18%,
              transparent 45%);
  mix-blend-mode: screen;
  transition: opacity 0.4s;
  opacity: 0;
}
.crew-stage:hover .crew-spotlight { opacity: 1; }

/* Floor fog wash across the bottom of the stage */
.crew-fog {
  position: absolute;
  left: -5%; right: -5%;
  bottom: -10px;
  height: 110px;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 40% 100% at 20% 80%, rgba(243, 231, 201, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 100% at 50% 90%, rgba(156, 214, 168, 0.16), transparent 70%),
    radial-gradient(ellipse 45% 100% at 80% 80%, rgba(196, 74, 141, 0.14), transparent 70%);
  filter: blur(8px);
  animation: crew-fog-drift 18s ease-in-out infinite alternate;
}
@keyframes crew-fog-drift {
  from { transform: translateX(-30px); }
  to   { transform: translateX(30px); }
}

.crew-figure {
  position: relative;
  z-index: 3;
  margin: 0;
  text-align: center;
  cursor: default;
  /* characters tilt back into "pose" — center is upright, edges fan out */
  --tilt: 0deg;
  --lift: 0px;
}
/* Layered overlap + size variation creates the cast-poster composition */
.crew-figure--xs { width: 180px; z-index: 2; --tilt:  3deg;  --lift: 36px; }
.crew-figure--sm { width: 230px; z-index: 3; --tilt: -2deg;  --lift: 18px; }
.crew-figure--lg { width: 300px; z-index: 5; --tilt:  0deg;  --lift:  0px; }
/* Spotlight the vampire at center; flank pairs tilt inward.
   DOM order is: ghost(1) mummy(2) vampire(3) witch(4) monster(5). */
.crew-figure:nth-child(1) .crew-art { transform-origin: 100% 92%; }  /* ghost — anchor toward neighbour */
.crew-figure:nth-child(5) .crew-art { transform-origin: 0% 92%; }    /* monster */
.crew-figure:nth-child(2) { margin-right: -3vw; }   /* mummy leans toward vampire */
.crew-figure:nth-child(4) { margin-left:  -3vw; }   /* witch leans toward vampire */
.crew-figure:nth-child(1) { margin-right: -1vw; }
.crew-figure:nth-child(5) { margin-left:  -1vw; }

.crew-art {
  position: relative;
  transform: rotate(var(--tilt)) translateY(var(--lift));
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), filter 0.4s;
  will-change: transform;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.55));
}
.crew-art img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  animation: crew-idle 6s ease-in-out infinite;
  transform-origin: 50% 92%;
}
/* Stagger idle motion per character — different ease/duration so the line never beats in unison */
.crew-figure[data-character="vampire"]      .crew-art img { animation-duration: 6.4s; animation-delay: -0.6s; }
.crew-figure[data-character="witch"]        .crew-art img { animation-duration: 7.2s; animation-delay: -1.8s; }
.crew-figure[data-character="ghost"]        .crew-art img { animation: crew-float 5.6s ease-in-out infinite; animation-delay: -2.4s; }
.crew-figure[data-character="mummy"]        .crew-art img { animation-duration: 5.8s; animation-delay: -1.0s; }
.crew-figure[data-character="frankenstein"] .crew-art img { animation-duration: 6.8s; animation-delay: -3.2s; }

@keyframes crew-idle {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.1deg); }
}
@keyframes crew-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.crew-figure:hover { z-index: 10; }
.crew-figure:hover .crew-art {
  transform: rotate(0deg) translateY(calc(var(--lift) - 18px)) scale(1.05);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 30px rgba(156, 214, 168, 0.32));
}

/* Vintage poster credit card — always visible, expands on hover */
.crew-card {
  position: relative;
  z-index: 6;
  margin-top: 14px;
  padding: 10px 14px 12px;
  background: rgba(14, 8, 32, 0.65);
  border: 1px solid var(--purple-shadow);
  box-shadow: 4px 4px 0 var(--purple-mid);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
  transform: rotate(calc(var(--tilt) * -0.4));
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s, background 0.3s;
}
.crew-figure:hover .crew-card {
  border-color: var(--ghoul);
  background: rgba(14, 8, 32, 0.85);
  transform: rotate(0deg);
}
.crew-card-role {
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.crew-card-name {
  font-family: 'Eater', cursive;
  font-size: 18px;
  line-height: 1.1;
  color: var(--cream);
  text-shadow: 2px 2px 0 var(--purple-mid);
  margin: 4px 0 6px;
}
.crew-card-line {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--bone-dim);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s;
}
.crew-figure:hover .crew-card-line {
  max-height: 60px;
  opacity: 1;
}

/* Swipe affordance — only visible on the mobile horizontal-scroll layout,
   since on desktop all five figures are on stage at once. */
.crew-swipe {
  display: none;
  position: relative;
  z-index: 1;
  margin-top: -32px;
  text-align: center;
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ghoul);
  opacity: 0.75;
  animation: crew-swipe-pulse 2.4s ease-in-out infinite;
}
@keyframes crew-swipe-pulse {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50%      { transform: translateX(6px); opacity: 0.9; }
}
@media (max-width: 800px) {
  .crew-swipe { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .crew-swipe { animation: none; }
}

.crew-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--purple-shadow);
}

/* Tablet → simplify to flex row with smaller sizes */
@media (max-width: 1100px) {
  .crew-stage {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 460px;
  }
  .crew-figure--xs { width: 150px; --lift: 28px; }
  .crew-figure--sm { width: 190px; --lift: 14px; }
  .crew-figure--lg { width: 240px; }
}

/* Mobile → horizontal scroll-snap strip so each face stays readable */
@media (max-width: 800px) {
  .crew-stage {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 30px 12vw 80px;
    gap: 18px;
    min-height: 0;
  }
  .crew-stage::-webkit-scrollbar { display: none; }
  .crew-fog { display: none; }
  .crew-figure { flex: 0 0 70%; max-width: 280px; scroll-snap-align: center; }
  .crew-figure,
  .crew-figure--xs,
  .crew-figure--sm,
  .crew-figure--lg { width: 100%; --tilt: 0deg; --lift: 0px; margin: 0; z-index: auto; }
  .crew-figure:hover .crew-art { transform: none; }
  /* Reveal flavor copy by default since there's no hover affordance */
  .crew-card-line { max-height: 60px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .crew-art img,
  .crew-fog { animation: none !important; }
}

/* ───────────── ABOUT ───────────── */
.about {
  /* Most generous breathing room on the page — this is the "what this is"
     beat and benefits from quiet around it. */
  padding: 160px 8vw 180px;
  /* Soft horizontal vignette layered over the page background.
     Avoids the previous semi-opaque overlay that created a darker step
     at the seam with the menu section below. */
  background:
    radial-gradient(ellipse 75% 55% at 50% 45%, rgba(91, 71, 144, 0.18), transparent 75%),
    var(--purple-deep);
}
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1300px;
  margin: 0 auto;
}
.about-title {
  font-family: 'Eater', cursive;
  font-size: clamp(56px, 8vw, 120px);
  color: var(--cream);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0 0 32px;
  text-shadow:
    5px 5px 0 var(--purple-shadow),
    7px 7px 0 var(--purple-mid),
    9px 9px 0 var(--purple-deep);
}
.about-lede {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 1.8vw, 26px);
  font-style: italic;
  color: var(--cream);
  margin: 0 0 24px;
  line-height: 1.45;
}
.about-body p {
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--bone-dim);
  margin: 0 0 20px;
  line-height: 1.7;
}
.about-aside {
  position: relative;
  padding: 44px 36px 36px;
  background: rgba(91, 71, 144, 0.15);
  border: 1px solid var(--purple-mid);
  box-shadow: 14px 14px 0 var(--purple-mid);
  margin-top: 28px;
}
.about-aside::before {
  content: '"';
  position: absolute;
  top: -32px; left: 22px;
  font-family: 'Eater', cursive;
  font-size: 140px;
  color: var(--ghoul);
  line-height: 1;
}
.about-aside blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(19px, 1.5vw, 23px);
  color: var(--cream);
  line-height: 1.5;
  margin: 18px 0 0;
}
.about-aside cite {
  display: block;
  margin-top: 20px;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ghoul);
  font-style: normal;
  text-transform: uppercase;
}
.aside-crow {
  position: absolute;
  top: -62px;
  right: -18px;
  width: 124px;
  height: auto;
  z-index: 3;
  opacity: 0.95;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.6));
  transform: rotate(-7deg);
  transform-origin: 70% 100%;
  animation: aside-crow-bob 6s ease-in-out infinite;
}
@keyframes aside-crow-bob {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-4px); }
}

/* ── Stat banner — massive statement numbers ── */
.about-stats {
  margin: 100px auto 0;
  padding-top: 64px;
  /* soft fade instead of a hard dashed line */
  border-top: none;
  background-image: linear-gradient(to right, transparent, var(--purple-shadow) 30%, var(--purple-shadow) 70%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
  max-width: 1300px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.about-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-number {
  font-family: 'Eater', cursive;
  font-size: clamp(88px, 14vw, 200px);
  line-height: 0.9;
  color: var(--ghoul);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-label {
  font-family: 'Special Elite', monospace;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 0.2em;
  color: var(--bone);
  text-transform: uppercase;
  margin-top: 24px;
}
.stat-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--purple-shadow);
}
.stat-divider span {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--purple-shadow), transparent);
}
.stat-symbol {
  font-family: 'Eater', cursive;
  font-size: 32px;
  color: var(--ghoul);
  background: none !important;
  width: auto;
  height: auto;
  text-shadow: 0 0 18px rgba(156, 214, 168, 0.5);
  animation: stat-symbol-pulse 4s ease-in-out infinite;
}
@keyframes stat-symbol-pulse {
  /* gentle breath only — no rotation (was reading as a fidget spinner) */
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1;    }
}

@media (max-width: 900px) {
  /* Mobile padding rhythm — same intentions as desktop, compressed.
     Crew tight, about generous, menu dense, visions chapter, location heroic. */
  .crew { padding: 60px 6vw 72px; }
  .about { padding: 110px 6vw 120px; }
  .menu { padding: 70px 6vw 80px; }
  .visions { padding: 90px 6vw 100px; }
  .about-grid { grid-template-columns: 1fr; gap: 56px; }
  .about-aside { margin-top: 0; }
  .aside-crow { width: 92px; top: -44px; right: -8px; }
  .about-stats { margin-top: 72px; padding-top: 48px; grid-template-columns: 1fr; gap: 56px; }
  .stat-divider { flex-direction: row; gap: 12px; }
  .stat-divider span { width: 60px; height: 1px; background: linear-gradient(to right, transparent, var(--purple-shadow), transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .aside-crow, .stat-symbol { animation: none; }
}
/* ───────────── MENU / DRINKS ───────────── */
.menu {
  /* Solid page-bg base. The character of this section comes from the
     photographic .menu-backdrop image (with its own internal gradient
     overlay) rather than a banded gradient on the section itself,
     which read as a visible seam. */
  background: var(--purple-deep);
  /* Denser than its neighbours — the hexed-menu parchment reads better
     when the section feels compressed around the teaser card. */
  padding: 100px 8vw 110px;
  overflow: hidden;
}
.menu .section-header { position: relative; z-index: 2; }

/* Photographic backdrop for the menu section — same recipe as .hero-backdrop,
   tuned a hair darker so the ticket-stub teaser card pops cleanly. */
.menu-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg,
      rgba(14, 8, 32, 0.62) 0%,
      rgba(26, 15, 51, 0.55) 45%,
      rgba(14, 8, 32, 0.92) 88%,
      var(--purple-deep) 100%),
    image-set(
      url('assets/menu-backdrop.webp') type('image/webp'),
      url('assets/menu-backdrop.jpg')  type('image/jpeg'));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  filter: saturate(0.9) contrast(1.02) brightness(0.92);
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px 28px;
  max-width: 1280px;
  margin: 0 auto;
  perspective: 1200px;
}
.drink-card {
  position: relative;
  background: linear-gradient(180deg, rgba(245, 235, 211, 0.04), rgba(91, 71, 144, 0.08));
  border: 1px solid var(--purple-mid);
  padding: 36px 28px 32px;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.4s,
              border-color 0.3s,
              background 0.4s;
  cursor: default;
  overflow: hidden;
  /* Asymmetric "pinned menu card" rest pose */
  --r: -2deg;
  --y: 0px;
  transform: rotate(var(--r)) translateY(var(--y));
}
/* Vary rotation/offset per position so the grid reads as "pinned" not robotic */
.drink-card:nth-child(6n+1) { --r: -2deg; --y: 0px; }
.drink-card:nth-child(6n+2) { --r:  1.2deg; --y: 22px; }
.drink-card:nth-child(6n+3) { --r: -1deg; --y: 6px; }
.drink-card:nth-child(6n+4) { --r:  2deg; --y: 18px; }
.drink-card:nth-child(6n+5) { --r: -1.5deg; --y: 2px; }
.drink-card:nth-child(6n)   { --r:  1deg; --y: 26px; }
/* Calm down rotations on small screens so cards don't overlap */
@media (max-width: 700px) {
  .drink-card,
  .drink-card:nth-child(6n+1),
  .drink-card:nth-child(6n+2),
  .drink-card:nth-child(6n+3),
  .drink-card:nth-child(6n+4),
  .drink-card:nth-child(6n+5),
  .drink-card:nth-child(6n)   { --r: 0deg; --y: 0px; }
}
.drink-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ghoul) 30%, var(--eye-glow) 50%, var(--ghoul) 70%, transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.drink-card:hover {
  /* Straighten + lift on hover — "card picked up off the board" */
  transform: rotate(0deg) translateY(-14px) scale(1.025);
  border-color: var(--ghoul);
  box-shadow:
    0 28px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--ghoul) inset,
    0 0 30px rgba(156, 214, 168, 0.15);
  background: linear-gradient(180deg, rgba(245, 235, 211, 0.06), rgba(91, 71, 144, 0.15));
  z-index: 5;
}
.drink-card:hover::before { opacity: 1; }
.drink-card:hover .drink-ingredients {
  color: var(--cream);
  border-top-color: var(--ghoul);
}
.drink-ingredients {
  transition: color 0.3s, border-top-color 0.3s;
}

.drink-number {
  font-family: 'Eater', cursive;
  font-size: 14px;
  color: var(--purple-shadow);
  margin-bottom: 12px;
  letter-spacing: 0.2em;
}
.drink-name {
  font-family: 'Eater', cursive;
  font-size: 30px;
  color: var(--cream);
  margin-bottom: 16px;
  line-height: 1;
}
.drink-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--bone-dim);
  line-height: 1.55;
  margin-bottom: 24px;
  min-height: 80px;
}
.drink-ingredients {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  color: var(--ghoul);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-top: 18px;
  border-top: 1px dashed var(--purple-shadow);
  line-height: 1.8;
}
.drink-price {
  position: absolute;
  top: 28px; right: 28px;
  font-family: 'Eater', cursive;
  font-size: 26px;
  color: var(--ghoul);
  text-shadow: 2px 2px 0 var(--purple-deep);
}

.menu-footer {
  text-align: center;
  margin-top: 64px;
  font-family: 'Special Elite', monospace;
  color: var(--bone-dim);
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.menu-footer span { color: var(--ghoul); }


/* ─────────────────────────────────────────────────────────────────────
   THE HEXED MENU
   A parchment page from the coven's cellar — thirteen drinks listed,
   each name painted over with a thick black ink "hex bar." Periodically
   a single bar peels back to expose one name with a wisp of red smoke,
   then re-seals. Pure CSS rectangles + typography, no SVG illustration.
   ────────────────────────────────────────────────────────────────────── */
.menu .hex-stage { position: relative; z-index: 2; }

.hex-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
}
.hex-eyebrow {
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ghoul);
  margin: 0 0 32px;
}

/* ── The parchment page ── */
.hex-page {
  position: relative;
  width: min(640px, 100%);
  padding: 56px clamp(28px, 5vw, 64px) 48px;
  background:
    radial-gradient(ellipse 90% 110% at 50% 35%,
      #f6ecd1 0%, #ead8aa 70%, #c8b08a 100%);
  color: #2a1450;
  border: 1px solid rgba(91, 71, 144, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(91, 71, 144, 0.15),
    inset 0 0 60px rgba(91, 71, 144, 0.18),
    0 32px 60px -16px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(91, 71, 144, 0.25);
  transform: rotate(-1deg);
  overflow: hidden;
}
/* Pinhole tear marks at the top corners — sells the "torn from a real book" */
.hex-page::before,
.hex-page::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at center, rgba(91, 71, 144, 0.55) 0%, transparent 70%);
  border-radius: 50%;
}
.hex-page::before { top: 18px; left: 18px; }
.hex-page::after  { top: 18px; right: 18px; }

/* ── Header ── */
.hex-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 36px;
}
.hex-header-rule {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: #5a4790;
  letter-spacing: 0.4em;
}
.hex-title {
  font-family: 'Eater', cursive;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1;
  color: #2a1450;
  letter-spacing: 0.02em;
  margin: 4px 0 6px;
}
.hex-header-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: #5a4790;
  letter-spacing: 0.05em;
}

/* ── List ── */
.hex-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hex-line {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 18px;
}
.hex-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 19px);
  color: #5a4790;
  letter-spacing: 0.06em;
  text-align: right;
  padding-right: 8px;
  border-right: 1px solid rgba(91, 71, 144, 0.35);
}
.hex-redact {
  position: relative;
  display: block;
  height: 30px;
  overflow: visible;
}

/* ── The hex-ink bar (the redaction) ──
   Stretches across the redact slot. Irregular bottom edge via clip-path
   so it reads as hand-painted ink, not a digital rectangle. Stays
   permanently sealed — the menu isn't finalized. */
.hex-ink {
  position: absolute;
  left: -6px;
  right: -10px;
  top: -4px;
  bottom: -8px;
  background: linear-gradient(180deg, #14081f 0%, #0e0820 100%);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  clip-path: polygon(
    0% 0%,  100% 0%,  100% 78%,
    96% 92%, 92% 78%, 86% 96%, 80% 80%,
    72% 100%, 66% 82%, 58% 96%, 52% 80%,
    44% 100%, 38% 82%, 30% 96%, 22% 80%,
    14% 96%, 8% 82%, 0% 92%
  );
  overflow: hidden;
}
/* slight per-line rotation so the bars don't look identical */
.hex-line:nth-child(3n+1) .hex-ink { transform: rotate(-0.4deg); }
.hex-line:nth-child(3n+2) .hex-ink { transform: rotate( 0.5deg) translateX(-1px); }
.hex-line:nth-child(3n)   .hex-ink { transform: rotate(-0.25deg) translateX(2px); }

/* ── "Stirring" state — the hex is alive ──
   Triggered periodically by JS on one line at a time. A faint red glow
   pulses across the bar (sheen swept by ::before) AND a wisp of red
   smoke leaks from beneath (::after on .hex-redact). Sells "the seal
   is straining" without ever exposing a name. */
.hex-ink::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(180, 69, 62, 0.55) 50%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.hex-line.is-stirring .hex-ink::before {
  animation: hex-sheen 1.6s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes hex-sheen {
  0%   { left: -40%; opacity: 0; }
  25%  { opacity: 0.9; }
  100% { left: 110%; opacity: 0; }
}

/* Red smoke wisp escaping from under the bar */
.hex-line.is-stirring .hex-redact::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 70%;
  height: 30px;
  background: radial-gradient(ellipse 100% 80% at 50% 100%,
    rgba(180, 69, 62, 0.65) 0%,
    rgba(196, 74, 141, 0.30) 40%,
    transparent 75%);
  transform: translateX(-50%);
  filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  animation: hex-smoke 1.8s ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes hex-smoke {
  0%   { opacity: 0;    transform: translate(-50%, 0)    scale(0.5); }
  20%  { opacity: 0.85; transform: translate(-50%, -10px) scale(0.85); }
  100% { opacity: 0;    transform: translate(-50%, -60px) scale(1.6); }
}

/* Very subtle ambient breath on the bar itself when stirring —
   like the ink is briefly straining against the seal */
.hex-line.is-stirring .hex-ink {
  animation: hex-strain 1.6s ease-in-out;
}
@keyframes hex-strain {
  0%, 100% { filter: brightness(1); }
  35%      { filter: brightness(1.18) drop-shadow(0 0 6px rgba(180, 69, 62, 0.5)); }
  70%      { filter: brightness(1.05); }
}

/* ── Diagonal wax stamp, top-right corner — fully inside the page so it
   doesn't clip against overflow: hidden ── */
.hex-stamp {
  position: absolute;
  top: 28px;
  right: 18px;
  width: 144px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(180, 69, 62, 0.85);
  font-family: 'Special Elite', monospace;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(14deg);
  border: 2px solid rgba(180, 69, 62, 0.7);
  border-radius: 3px;
  box-shadow: inset 0 0 8px rgba(180, 69, 62, 0.15);
  clip-path: polygon(
    2% 0%, 98% 1%, 100% 30%, 99% 70%, 100% 100%,
    50% 99%, 2% 100%, 1% 50%, 0% 8%
  );
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(180, 69, 62, 0.08), transparent 70%);
}
.hex-stamp-line {
  display: block;
  letter-spacing: 0.2em;
  font-size: 10px;
  line-height: 1.1;
}
.hex-stamp-line--mid {
  font-family: 'Eater', cursive;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: none;
  color: rgba(180, 69, 62, 0.95);
  margin: 2px 0;
  line-height: 1;
}
.hex-stamp-line--bot {
  font-size: 8px;
  letter-spacing: 0.3em;
  opacity: 0.7;
}

/* ── Footer ── */
.hex-footer {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #5a4790;
}
.hex-footer-rule {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #8a7ab0;
  font-size: 16px;
  letter-spacing: 0.4em;
}

/* ── Copy + CTA below the parchment ── */
.hex-copy {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--bone-dim);
  line-height: 1.55;
  max-width: 520px;
  margin: 44px auto 28px;
  text-align: center;
}
.hex-cta {
  display: inline-block;
  padding: 18px 36px;
  border: 1px solid var(--ghoul);
  background: rgba(156, 214, 168, 0.06);
  color: var(--ghoul);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 0.28em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.hex-cta:hover {
  background: var(--ghoul);
  color: var(--purple-deep);
  box-shadow: 0 12px 28px rgba(156, 214, 168, 0.25);
  transform: translateY(-2px);
}

/* Reduced motion: JS skips the stirring cycle entirely; freeze any
   in-flight animations. The static parchment + bars + stamp still land. */
@media (prefers-reduced-motion: reduce) {
  .hex-ink, .hex-ink::before { animation: none !important; }
  .hex-line.is-stirring .hex-redact::after { display: none; }
}

@media (max-width: 600px) {
  .hex-page { padding: 44px 22px 36px; transform: rotate(-0.5deg); }
  .hex-line { grid-template-columns: 40px 1fr; gap: 12px; }
  .hex-num { font-size: 14px; padding-right: 6px; }
  .hex-redact { height: 26px; }
  .hex-name { font-size: 16px; }
  .hex-meta { font-size: 10px; letter-spacing: 0.14em; }
  .hex-stamp { width: 116px; top: 16px; right: 12px; padding: 8px 4px; }
  .hex-stamp-line { font-size: 8px; }
  .hex-stamp-line--mid { font-size: 13px; }
  .hex-stamp-line--bot { font-size: 6px; }
}


/* ───────────── VISIONS FROM THE CRYPT ───────────── */
.visions {
  /* Chapter break between the dense menu and the heroic location. */
  padding: 130px 8vw 140px;
  /* Subtle radial wash on top of the page background — keeps the seam to
     menu/location clean while still giving the section its own focus. */
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(91, 71, 144, 0.22), transparent 75%),
    var(--purple-deep);
}

/* Flush-left split header — intentionally breaks the centered eyebrow/title/sub
   rhythm used elsewhere so Visions reads as its own chapter card. */
.visions-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto 72px;
  padding-bottom: 28px;
  border-bottom: 1px dashed var(--purple-mid);
}
.visions-title {
  font-family: 'Eater', cursive;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  color: var(--cream);
  margin: 0 0 18px;
  text-shadow:
    4px 4px 0 var(--purple-shadow),
    6px 6px 0 var(--purple-mid),
    8px 8px 0 var(--purple-deep);
}
.visions-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px);
  color: var(--bone-dim);
  max-width: 540px;
  line-height: 1.5;
  margin: 0;
}
.visions-reel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 4px;
  font-family: 'Special Elite', monospace;
  text-transform: uppercase;
  white-space: nowrap;
}
.visions-reel-label {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--ghoul);
}
.visions-reel-count {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 3.6vw, 48px);
  letter-spacing: 0.18em;
  color: var(--cream);
  line-height: 1;
}
.visions-reel-note {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--bone-dim);
}
@media (max-width: 700px) {
  .visions-header {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 48px;
  }
  .visions-reel {
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
  }
}

.visions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto;
}
.vision-card {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--purple-mid);
  background: var(--purple-night);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.vision-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--ghoul);
  box-shadow: 0 22px 50px rgba(0,0,0,0.6), 0 0 0 1px var(--ghoul) inset;
}
.vision-card.is-active {
  border-color: var(--ghoul);
}
.vision-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vision-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 18px 18px;
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--bone);
  text-transform: uppercase;
  background: linear-gradient(to top, rgba(14, 8, 32, 0.92) 30%, transparent);
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 900px) {
  .visions-grid { grid-template-columns: 1fr; max-width: 360px; gap: 24px; }
}

/* ───────────── LOCATION ───────────── */
.location {
  position: relative;
  min-height: 760px;
  /* Heroic finish before the RSVP climax — generous bottom in particular. */
  padding: 160px 8vw 200px;
  overflow: hidden;
  /* No hard borders — let the gradient backgrounds flow into neighbours.
     Top + bottom of the linear gradient match the page background
     (--purple-deep) so the seam disappears. */
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,   rgba(255, 233, 168, 0.12), transparent 70%),
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(76, 138, 100, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 60%,  rgba(91, 71, 144, 0.30), transparent 70%),
    linear-gradient(180deg,
      var(--purple-deep) 0%,
      #14082b 18%,
      var(--purple-deep) 82%,
      var(--purple-deep) 100%);
  display: flex;
  align-items: center;
}
/* Soft fade overlays at the top + bottom edges blend the section into the
   pages above/below — purple-deep → transparent over ~120px on each side. */
.location::before,
.location::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 5;
}
.location::before {
  top: 0;
  height: 80px;
  background: linear-gradient(to bottom, var(--purple-deep) 0%, transparent 100%);
}
.location::after {
  bottom: 0;
  height: 140px;
  background: linear-gradient(to top, var(--purple-deep) 0%, transparent 100%);
}

/* Full-bleed parallax scene sits behind the info card */
.location-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.location-scene .scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Info card overlays the scene as a frosted vintage notice */
.location-info {
  position: relative;
  z-index: 10;
  max-width: 540px;
  width: 100%;
  padding: 56px 48px 52px;
  background: rgba(14, 8, 32, 0.72);
  border: 1px solid var(--purple-mid);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(91, 71, 144, 0.5) inset;
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}
.location-info::before,
.location-info::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to right, transparent, var(--purple-shadow), transparent);
}
.location-info::before { top: 22px; }
.location-info::after  { bottom: 22px; }
.location-info h2 {
  font-family: 'Eater', cursive;
  font-size: clamp(40px, 5vw, 72px);
  color: var(--cream);
  line-height: 1;
  margin-bottom: 12px;
  text-shadow: 4px 4px 0 var(--purple-shadow), 6px 6px 0 var(--purple-mid);
}
.location-info .sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--bone-dim);
  margin-bottom: 48px;
}
.detail-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px dashed var(--purple-shadow);
  align-items: baseline;
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--ghoul);
  text-transform: uppercase;
}
.detail-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--cream);
  line-height: 1.4;
}
.detail-value .small {
  display: block;
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  color: var(--bone-dim);
  margin-top: 4px;
  letter-spacing: 0.1em;
}
.detail-value strong {
  font-weight: 600;
  color: var(--ghoul);
  font-style: italic;
}

/* ── Featured address row ── */
.detail-row--featured {
  position: relative;
  padding: 28px 24px;
  margin: 8px -24px;
  background: linear-gradient(135deg, rgba(156, 214, 168, 0.06), rgba(91, 71, 144, 0.05));
  border: 1px solid var(--purple-mid);
  border-left: 3px solid var(--ghoul);
  border-radius: 0;
}
.detail-row--featured + .detail-row { padding-top: 24px; }
.detail-address {
  font-family: 'Eater', 'Cormorant Garamond', serif;
  font-style: normal !important;
  font-size: 26px;
  line-height: 1.15;
  color: var(--cream) !important;
  letter-spacing: 0.01em;
  display: inline-block;
  margin-bottom: 6px;
}
.detail-map-link {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 2px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--ghoul);
  text-decoration: underline;
  text-decoration-color: var(--ghoul);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.detail-map-link:hover { color: var(--cream); text-decoration-color: var(--cream); }

/* ── Parallax scene ── */
.scene { position: relative; width: 100%; height: 100%; }
.scene-layer {
  position: absolute;
  pointer-events: none;
  display: block;
  width: auto;
  height: auto;
  will-change: transform;
}
.scene-layer--moon {
  top: 8%;
  right: 12%;
  width: 240px;
  max-width: 22vw;
  z-index: 1;
  /* Big halo backlight via a stacked drop-shadow */
  filter:
    drop-shadow(0 0 18px rgba(255, 233, 168, 0.65))
    drop-shadow(0 0 60px rgba(255, 233, 168, 0.35));
  animation: scene-moon-glow 7s ease-in-out infinite;
}
@keyframes scene-moon-glow {
  0%, 100% { filter:
    drop-shadow(0 0 14px rgba(255, 233, 168, 0.45))
    drop-shadow(0 0 48px rgba(255, 233, 168, 0.25)); }
  50%      { filter:
    drop-shadow(0 0 22px rgba(255, 233, 168, 0.7))
    drop-shadow(0 0 80px rgba(255, 233, 168, 0.45)); }
}
.scene-layer--tree {
  bottom: 8%;
  right: 4%;
  width: 360px;
  max-width: 30vw;
  z-index: 2;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.6));
  transform-origin: 50% 100%;
}
.scene-layer--tombstones {
  /* SVG is viewBox-cropped to content (no top whitespace). The tallest
     tombstone's tip touches the very top of the image, so the upward
     glow can't live on this element — it would get clipped by the
     element's mask region. The glow is painted by .scene-tombstone-glow
     in the layer above instead. */
  bottom: 0;
  left: 0;
  width: 110%;
  margin-left: -5%;
  z-index: 4;
  filter:
    brightness(1.25)
    contrast(1.05)
    /* Symmetric halo (no upward y-offset) so the blur radius isn't
       sliced off by the element's mask region at the tallest tombstone
       tip. Soft enough that the gentle clip on the top edge fades into
       the page bg invisibly. */
    drop-shadow(0 0 10px rgba(156, 214, 168, 0.5))
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6));
  /* Soft-mask the bottom edge so the cream grass-blade detail dissolves
     into the section background instead of cutting on a hard line. */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 72%, rgba(0,0,0,0.5) 90%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    #000 0%, #000 72%, rgba(0,0,0,0.5) 90%, transparent 100%);
}

/* Soft green halo painted ABOVE the tombstone silhouettes — sits in its
   own layer so it isn't clipped by the tombstone mask. The taller centre
   ellipse covers the tallest tombstone's tip. */
.scene-tombstone-glow {
  /* Supplemental ambient halo behind the tombstone silhouettes — gives
     the area above the tallest stone a soft green wash. Lives in its
     own layer so its bloom isn't constrained by the tombstone mask. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 28% 70% at 50% 100%, rgba(156, 214, 168, 0.32), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(156, 214, 168, 0.14), transparent 75%);
  filter: blur(2px);
}

/* Drifting fog band hugging the ground */
.scene-fog {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 0;
  height: 220px;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(ellipse 30% 100% at 15% 70%, rgba(243, 231, 201, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 100% at 50% 80%, rgba(156, 214, 168, 0.18), transparent 70%),
    radial-gradient(ellipse 35% 100% at 85% 70%, rgba(196, 74, 141, 0.14), transparent 70%);
  filter: blur(10px);
  animation: scene-fog-drift 22s ease-in-out infinite alternate;
}
@keyframes scene-fog-drift {
  from { transform: translateX(-40px); }
  to   { transform: translateX(40px); }
}

/* Bats overlay along the upper section */
.scene-bat {
  position: absolute;
  pointer-events: none;
  width: 60px;
  height: auto;
  opacity: 0.9;
  z-index: 3;
  animation: bat-fly 14s linear infinite;
  filter: drop-shadow(0 0 8px rgba(14, 8, 32, 0.6));
}
.scene-bat--a { top: 12%; width: 70px; animation-delay: 0s; }
.scene-bat--b { top: 24%; width: 50px; animation-delay: -4.6s; }
.scene-bat--c { top: 36%; width: 60px; animation-delay: -9.2s; }
@keyframes bat-fly {
  0%   { left: -120px; transform: translateY(0) scale(1); }
  25%  { transform: translateY(-50px) scale(0.95); }
  50%  { transform: translateY(-10px) scale(1.05); }
  75%  { transform: translateY(-40px) scale(0.92); }
  100% { left: 110%;   transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .location {
    /* Heroic finish, mobile-scaled. */
    padding: 120px 6vw 140px;
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .location-info { padding: 44px 28px 40px; backdrop-filter: blur(8px); }
  .scene-layer--moon { width: 140px; right: 6%; top: 10%; }
  .scene-layer--tree { width: 240px; right: 0; bottom: 12%; }
  .scene-layer--tombstones { width: 130%; margin-left: -15%; bottom: -3%; }
  .scene-bat { width: 36px; }
  .scene-bat--a { width: 42px; }
  .scene-bat--c { width: 36px; }
  .detail-row { grid-template-columns: 1fr; gap: 6px; }
  .detail-row--featured { margin: 8px 0; padding: 24px 20px; }
  .detail-address { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-layer--moon,
  .scene-fog,
  .scene-bat { animation: none !important; }
}

/* ───────────── RSVP ───────────── */
.rsvp {
  padding: 140px 8vw 200px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Two-pose skeleton hand reaching from below. The reaching pose is the
   resting state; on .is-summoned the grasping fist takes over and the
   open hand fades out — the spirits caught the offering. */
.rsvp-hand {
  position: absolute;
  bottom: -60px;
  left: 50%;
  width: clamp(220px, 26vw, 360px);
  height: auto;
  z-index: -1;
  pointer-events: none;
  filter:
    drop-shadow(0 0 30px rgba(156, 214, 168, 0.35))
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6));
  transform: translateX(-50%) translateY(0);
  will-change: transform, opacity;
  transition: opacity 0.55s ease-out;
}
.rsvp-hand--reaching { opacity: 0.55; }
.rsvp-hand--grasping { opacity: 0; }
/* On summon: reaching hand fades, grasping fist appears with a slight
   pulse glow + small lift so it reads as "caught it!" */
.rsvp.is-summoned .rsvp-hand--reaching { opacity: 0; }
.rsvp.is-summoned .rsvp-hand--grasping {
  opacity: 0.72;
  filter:
    drop-shadow(0 0 36px rgba(180, 69, 62, 0.55))
    drop-shadow(0 0 60px rgba(156, 214, 168, 0.35))
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6));
  animation: rsvp-grasp-pulse 1.6s cubic-bezier(.3, 1.3, .5, 1) 0.2s 1;
}
@keyframes rsvp-grasp-pulse {
  0%   { transform: translateX(-50%) translateY(40px) scale(0.95); }
  60%  { transform: translateX(-50%) translateY(-8px) scale(1.04); }
  100% { transform: translateX(-50%) translateY(0)    scale(1);    }
}

/* Summoned success message — hidden until .is-summoned. Slides in from
   below with a soft glow, replacing the form in the user's attention. */
.rsvp-summoned {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s cubic-bezier(.3, 1, .4, 1) 0.5s;
  pointer-events: none;
}
.rsvp.is-summoned .rsvp-summoned {
  opacity: 1;
  transform: translateY(0);
}
.rsvp-summoned-line {
  font-family: 'Eater', cursive;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--ghoul);
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow:
    2px 2px 0 var(--purple-shadow),
    0 0 24px rgba(156, 214, 168, 0.5);
}
.rsvp-summoned-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 18px);
  color: var(--bone-dim);
  margin: 0;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .rsvp.is-summoned .rsvp-hand--grasping { animation: none; }
  .rsvp-summoned { transition: opacity 0.2s ease; }
}
.rsvp h2 {
  font-family: 'Eater', cursive;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
  color: var(--cream);
  margin-bottom: 28px;
  text-shadow:
    5px 5px 0 var(--purple-shadow),
    7px 7px 0 var(--purple-mid),
    9px 9px 0 var(--purple-deep);
}
.rsvp .lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--bone-dim);
  max-width: 580px;
  margin: 0 auto 48px;
  line-height: 1.5;
}
.rsvp-form {
  display: flex;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto 40px;
  flex-wrap: wrap;
  justify-content: center;
}
.rsvp-form input {
  flex: 1 1 280px;
  padding: 18px 22px;
  background: rgba(245, 235, 211, 0.05);
  border: 2px solid var(--purple-mid);
  color: var(--cream);
  font-family: 'Special Elite', monospace;
  font-size: 16px;
  letter-spacing: 0.05em;
  outline: none;
  transition: all 0.2s;
}
.rsvp-form input::placeholder { color: var(--purple-shadow); }
.rsvp-form input:focus {
  border-color: var(--ghoul);
  background: rgba(156, 214, 168, 0.08);
}
.rsvp-form button {
  padding: 18px 32px;
  background: var(--blood);
  color: var(--cream);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  border: 2px solid var(--cream);
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}
.rsvp-form button:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--blood);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(180, 69, 62, 0.3);
}
.rsvp-disclaimer {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--purple-shadow);
  text-transform: uppercase;
}

.rsvp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 960px;
  margin: 80px auto 0;
  text-align: left;
}
/* Ticket-stub style: notched left edge with a dashed "perforation"
   running down the side and a tilted "ADMIT ONE" feel. */
.rsvp-card {
  position: relative;
  padding: 32px 24px 28px 36px;
  background:
    radial-gradient(circle 12px at 0% 0%,    var(--purple-deep) 11px, transparent 12px),
    radial-gradient(circle 12px at 0% 100%, var(--purple-deep) 11px, transparent 12px),
    linear-gradient(180deg, rgba(91, 71, 144, 0.18), rgba(91, 71, 144, 0.06));
  background-repeat: no-repeat;
  border: 1px solid var(--purple-mid);
  border-radius: 0;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.3s;
}
.rsvp-card::before {
  /* dashed perforation line — like a ticket stub tear */
  content: '';
  position: absolute;
  left: 14px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background-image: linear-gradient(to bottom, var(--ghoul) 50%, transparent 50%);
  background-size: 1px 8px;
  background-repeat: repeat-y;
  opacity: 0.55;
}
.rsvp-card:hover {
  transform: translateY(-4px);
  border-color: var(--ghoul);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.rsvp-card .num {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--ghoul);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.rsvp-card .num .num-tag {
  color: var(--purple-shadow);
  font-size: 10px;
  margin-left: 2px;
}
.rsvp-card h4 {
  font-family: 'Eater', cursive;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--cream);
  margin-bottom: 14px;
  text-shadow: 2px 2px 0 var(--purple-mid);
}
.rsvp-card p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--bone-dim);
  line-height: 1.5;
}
@media (max-width: 700px) {
  .rsvp-cards { grid-template-columns: 1fr; gap: 20px; }
}

/* ───────────── FOOTER ───────────── */
footer {
  position: relative;
  padding: 100px 8vw 40px;
  background: linear-gradient(to bottom, transparent, var(--purple-deep) 30%);
}
/* Soft dashed delimiter inset from the edges, instead of a hard 2px line
   spanning the full viewport width — feels intentional rather than abrupt. */
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    var(--purple-shadow) 20%,
    var(--purple-shadow) 80%,
    transparent);
  opacity: 0.55;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer-brand img {
  width: 160px;
  height: auto;
  margin-bottom: 20px;
  opacity: 0.92;
}
.footer-brand p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--bone-dim);
  font-size: 17px;
  max-width: 340px;
  line-height: 1.5;
}
.footer-col h5 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.25em;
  font-size: 13px;
  color: var(--ghoul);
  margin-bottom: 20px;
  text-transform: uppercase;
}
.footer-col a, .footer-col p {
  display: block;
  font-family: 'Special Elite', monospace;
  font-size: 14px;
  color: var(--bone-dim);
  text-decoration: none;
  padding: 8px 0;
  margin-bottom: 2px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--cream); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px dashed var(--purple-shadow);
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  color: var(--purple-shadow);
  letter-spacing: 0.1em;
}
.footer-bottom p { color: var(--purple-shadow); }
.footer-skull {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
  color: var(--ghoul);
  opacity: 0.7;
}

@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ───────────── floating decorative ───────────── */
.floater {
  position: absolute;
  pointer-events: none;
  opacity: 0.4;
  z-index: 1;
}
.floater.spider {
  top: 80px; right: 10%;
  font-size: 28px;
  animation: drop 5s ease-in-out infinite;
}
@keyframes drop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(40px); }
}

/* ───────────── selection ───────────── */
::selection { background: var(--ghoul); color: var(--purple-deep); }