/* ==========================================================================
   AGNEE 2026 · FESTIVAL DESIGN SYSTEM & COMPONENT STYLES
   Dark Halloween · Skeuomorphic Materials · Mobile-First Responsive Grid
   ========================================================================== */

:root {
  /* Surfaces: night -> oak */
  --bg-dark: #07050a;
  --bg-surface: #110c12;
  --bg-card: #1b1310;
  --bg-glass: rgba(255, 180, 90, 0.04);
  --bg-glass-hover: rgba(255, 140, 40, 0.09);

  /* Accents (legacy names kept: gold -> pumpkin, magenta -> blood) */
  --gold-primary: #ff7a1a;
  --gold-hover: #ffa23d;
  --gold-glow: rgba(255, 122, 26, 0.5);
  --magenta-primary: #b3141f;
  --magenta-glow: rgba(179, 20, 31, 0.5);
  --cyan-accent: #7dffb0;
  --orange-accent: #ffb347;

  /* Materials */
  --oak-1: #2a1c14;
  --oak-2: #1b110c;
  --oak-3: #0f0906;
  --iron-1: #3a3a40;
  --iron-2: #1d1d22;
  --iron-3: #0c0c0f;
  --brass-1: #c9a05a;
  --brass-2: #8a6a32;
  --brass-3: #4a3818;
  --parchment-1: #e8d5a8;
  --parchment-2: #cdb27c;
  --parchment-ink: #2b1a0c;
  --wax-red: #8e0f1c;
  --wax-red-hi: #c22a38;
  --ghost: #7dffb0;
  --ghost-glow: rgba(125, 255, 176, 0.35);
  --purple-night: #2a1240;

  /* Typography Colors */
  --text-main: #f3e6d0;
  --text-secondary: #cdb9a0;
  --text-muted: #8f7e6c;
  --text-on-gold: #1a0c02;

  /* Borders & Shadows (key light: top-left) */
  --border-glass: rgba(255, 190, 120, 0.14);
  --border-glass-gold: rgba(255, 122, 26, 0.45);
  --hi: inset 1px 1px 0 rgba(255, 220, 170, 0.18);
  --lo: inset -1px -1px 0 rgba(0, 0, 0, 0.6);
  --bevel: var(--hi), var(--lo);
  --recess: inset 0 3px 8px rgba(0, 0, 0, 0.75), inset 0 -1px 0 rgba(255, 200, 140, 0.06);
  --shadow-sm: 0 3px 6px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(0, 0, 0, 0.8);
  --shadow-md: 0 10px 22px rgba(0, 0, 0, 0.65), 0 3px 6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.8), 0 8px 16px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 22px rgba(255, 122, 26, 0.45), 0 0 4px rgba(255, 160, 60, 0.8);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Layout & Spacing */
  --container-max: 1240px;
  --header-height: 72px;
  --dock-height: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Font Stacks */
  --font-display: 'Creepster', 'Pirata One', Georgia, serif;
  --font-heading: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-body: 'Spectral', Georgia, serif;
  --font-sans:
    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ==========================================================================
   Base & Reset Overrides
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

[hidden] {
  display: none !important;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  background: var(--gold-primary);
  color: var(--bg-dark);
  padding: 10px 18px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  z-index: 10000;
  transition: top 0.2s ease;
  text-decoration: none;
}
.skip-link:focus {
  top: 16px;
}

/* Focus Visible */
*:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 3px;
}

/* Containers */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}

/* Sections rhythm */
.section {
  padding-top: clamp(60px, 9vw, 100px);
  padding-bottom: clamp(60px, 9vw, 100px);
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(32px, 5vw, 56px);
}

.section-title {
  font-size: clamp(26px, 4.5vw, 48px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 16px;
}

.section-subtitle {
  font-size: clamp(14px, 2vw, 17px);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Glass Panels */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.glass-panel:not(.team-card):not(.sponsor-card):hover {
  border-color: var(--border-glass-gold);
}

/* Common Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold-primary), #f5d17e);
  color: var(--text-on-gold);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: 0;
  cursor: var(--cur-hover);
  text-decoration: none;
  box-shadow: 0 4px 18px var(--gold-glow);
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s ease,
    filter 0.2s ease;
  white-space: nowrap;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px var(--gold-glow);
  filter: brightness(1.05);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-glass);
  cursor: var(--cur-hover);
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
  white-space: nowrap;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--border-glass-gold);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 12px;
}

.btn-xs {
  padding: 6px 12px;
  font-size: 11px;
}

.btn-lg {
  padding: 15px 32px;
  font-size: 16px;
}

.btn-block {
  width: 100%;
}

.btn-text-link {
  background: transparent;
  border: 0;
  color: var(--gold-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: var(--cur-hover);
  padding: 4px 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.btn-text-link:hover {
  color: var(--gold-hover);
}

/* Badges */
.badge-state {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.state-open {
  background: rgba(78, 201, 176, 0.2);
  color: #55efc4;
  border: 1px solid rgba(85, 239, 196, 0.4);
}
.state-soon {
  background: rgba(224, 184, 96, 0.2);
  color: var(--gold-primary);
  border: 1px solid rgba(224, 184, 96, 0.4);
}
.state-closed {
  background: rgba(255, 82, 82, 0.2);
  color: #ff7675;
  border: 1px solid rgba(255, 118, 117, 0.4);
}
.state-soldout {
  background: rgba(140, 140, 140, 0.2);
  color: #dfe6e9;
  border: 1px solid rgba(223, 230, 233, 0.3);
}

/* ==========================================================================
   Header & Sticky Glass Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 100;
  background: rgba(10, 5, 20, 0.82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  transition: background 0.3s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-wordmark {
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
}

.brand-sub {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--gold-primary);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 8px;
  display: none;
}
@media (min-width: 900px) {
  .brand-sub {
    display: block;
  }
}

/* Desktop Nav Links */
.desktop-nav {
  display: none;
}
@media (min-width: 1040px) {
  .desktop-nav {
    display: block;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 4px;
  transition: color 0.2s ease;
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: #fff;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-primary);
  border-radius: 99px;
  box-shadow: 0 0 8px var(--gold-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(224, 184, 96, 0.14);
  color: var(--gold-primary);
  border: 1px solid var(--border-glass-gold);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.btn-plan-badge:hover {
  background: rgba(224, 184, 96, 0.24);
  transform: translateY(-1px);
}
.btn-plan-badge .plan-count {
  background: var(--gold-primary);
  color: var(--bg-dark);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

/* Hamburger toggle */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  cursor: var(--cur-hover);
  box-sizing: border-box;
}
@media (min-width: 1040px) {
  .menu-toggle {
    display: none;
  }
}

.hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
}

/* ==========================================================================
   Mobile Slide-Out Drawer
   ========================================================================== */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-drawer-backdrop.on {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(85vw, 360px);
  background: #0f071e;
  border-left: 1px solid var(--border-glass);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.7);
}
.mobile-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-glass);
}

.drawer-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  padding: 8px;
  cursor: var(--cur-hover);
}

.drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}

.drawer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.drawer-link:hover,
.drawer-link.active {
  background: rgba(224, 184, 96, 0.1);
  color: #fff;
  border-left-color: var(--gold-primary);
}
.drawer-link .link-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.drawer-footer {
  padding: 20px;
  border-top: 1px solid var(--border-glass);
}

/* ==========================================================================
   Mobile Bottom Quick-Action Dock (360-768px screens)
   ========================================================================== */
.mobile-bottom-dock {
  display: none;
}
@media (max-width: 768px) {
  .mobile-bottom-dock {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--dock-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(12, 6, 24, 0.94);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid var(--border-glass);
    z-index: 95;
    justify-content: space-around;
    align-items: center;
  }
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 700;
  position: relative;
  min-width: 56px;
}
.dock-item:hover,
.dock-item.active {
  color: #fff;
}
.dock-item.active .dock-icon {
  color: var(--gold-primary);
  transform: translateY(-2px);
}
.dock-icon {
  font-size: 18px;
  transition: transform 0.2s ease;
}
.dock-badge {
  position: absolute;
  top: 4px;
  right: 12px;
  background: var(--gold-primary);
  color: var(--bg-dark);
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: var(--radius-full);
}
.dock-item-highlight {
  color: var(--gold-primary);
}

/* ==========================================================================
   Cinematic Hero Section
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--header-height) + 20px);
  padding-bottom: calc(var(--dock-height) + 40px);
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
}

.hero-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.38;
}
.glow-gold {
  width: clamp(280px, 45vw, 600px);
  height: clamp(280px, 45vw, 600px);
  background: radial-gradient(circle, var(--gold-primary), transparent 70%);
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
}
.glow-magenta {
  width: clamp(240px, 35vw, 450px);
  height: clamp(240px, 35vw, 450px);
  background: radial-gradient(circle, var(--magenta-primary), transparent 70%);
  bottom: 20%;
  left: 10%;
}
.glow-cyan {
  width: clamp(200px, 30vw, 400px);
  height: clamp(200px, 30vw, 400px);
  background: radial-gradient(circle, var(--cyan-accent), transparent 70%);
  top: 30%;
  right: 10%;
}
.hero-noise {
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.015) 0,
    transparent 2px
  );
  opacity: 0.6;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(22, 11, 42, 0.7);
  border: 1px solid var(--border-glass-gold);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  font-size: clamp(10px, 1.3vw, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-primary);
  margin-bottom: clamp(16px, 3vh, 28px);
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-primary);
  box-shadow: 0 0 10px var(--gold-primary);
  animation: pulseGold 2s infinite;
}
@keyframes pulseGold {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

/* Wordmark Wrapper */
.hero-wordmark-wrapper {
  margin-bottom: clamp(16px, 3vh, 28px);
}
.hero-wordmark-img {
  width: min(86vw, 560px);
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 35px rgba(224, 184, 96, 0.45));
}
.hero-subtitle {
  font-size: clamp(14px, 2.2vw, 20px);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  margin: 14px 0 0;
  max-width: 680px;
}

/* Meta Bar */
.hero-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px clamp(12px, 2.5vw, 28px);
  background: rgba(18, 9, 36, 0.72);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 12px 24px;
  margin-bottom: clamp(20px, 3vh, 32px);
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.meta-icon {
  font-size: 16px;
}
.meta-text {
  display: flex;
  flex-direction: column;
}
.meta-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.meta-value {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.meta-divider {
  width: 1px;
  height: 28px;
  background: var(--border-glass);
  display: none;
}
@media (min-width: 680px) {
  .meta-divider {
    display: block;
  }
}

/* Countdown */
.hero-countdown-container {
  margin-bottom: clamp(20px, 3vh, 36px);
}
.countdown-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(224, 184, 96, 0.12);
  border: 1px solid rgba(224, 184, 96, 0.28);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-primary);
}
.countdown-grid {
  display: flex;
  align-items: center;
  gap: 8px;
}
.time-card {
  background: rgba(25, 12, 50, 0.75);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  min-width: 58px;
  text-align: center;
}
.time-card b {
  font-size: clamp(20px, 3.5vw, 30px);
  color: #fff;
  font-family: var(--font-mono);
  display: block;
}
.time-card small {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.time-sep {
  font-size: 22px;
  color: var(--gold-primary);
  font-weight: 700;
}

/* CTA Buttons */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.hero-cta-btn {
  min-width: 180px;
}

/* Ticker */
.hero-ticker-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  width: 100%;
  background: rgba(18, 9, 36, 0.75);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-full);
  padding: 6px 14px 6px 8px;
  margin-bottom: 24px;
}
.ticker-badge {
  background: var(--magenta-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}
.ticker-track {
  flex: 1;
  position: relative;
  height: 22px;
  overflow: hidden;
  text-align: left;
}
.ticker-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  pointer-events: none;
}
.ticker-item.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.item-tag {
  color: var(--gold-primary);
  font-weight: 700;
}
.item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scroll Cue */
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.scroll-cue-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cue-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--text-muted);
}
.cue-indicator {
  width: 2px;
  height: 24px;
  background: linear-gradient(180deg, var(--gold-primary), transparent);
  animation: cueBounce 1.8s infinite ease-in-out;
}
@keyframes cueBounce {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}

/* ==========================================================================
   Events Discovery & Cards
   ========================================================================== */
.events-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.search-box input {
  width: 100%;
  padding: 10px 36px 10px 36px;
  background: rgba(10, 5, 20, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-full);
  color: #fff;
  font-size: 13px;
  box-sizing: border-box;
}
.search-box input:focus {
  border-color: var(--gold-primary);
  outline: none;
}
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
}
.clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: var(--cur-hover);
  padding: 4px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-group-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.filter-pill-row {
  display: flex;
  gap: 6px;
}
.filter-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  cursor: var(--cur-hover);
  transition: all 0.2s ease;
}
.filter-pill:hover,
.filter-pill.active {
  background: var(--gold-primary);
  color: var(--bg-dark);
  border-color: var(--gold-primary);
}

.toggle-control {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: var(--cur-hover);
  user-select: none;
}
.toggle-control input {
  display: none;
}
.toggle-switch {
  width: 34px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  position: relative;
  transition: background 0.2s ease;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.toggle-control input:checked + .toggle-switch {
  background: var(--gold-primary);
}
.toggle-control input:checked + .toggle-switch::after {
  transform: translateX(16px);
  background: var(--bg-dark);
}
.toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Category Chips Horizontal Scroll */
.category-chips-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 24px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.category-chips-scroll::-webkit-scrollbar {
  display: none;
}
.category-chip {
  flex: 0 0 auto;
  background: rgba(20, 10, 40, 0.65);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: var(--cur-hover);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.category-chip:hover,
.category-chip.active {
  background: rgba(224, 184, 96, 0.16);
  border-color: var(--gold-primary);
  color: #fff;
}

.events-results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Events Grid */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(374px, 100%), 374px));
  justify-content: center;
  gap: 26px;
}

/* Event card: 374px wide, poster on top at 374 x 210, details underneath */
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  max-width: 374px;
  border-radius: 16px;
  background: #0e0a12;
  border: 1px solid #3a2a14;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.1),
    0 14px 30px rgba(0, 0, 0, 0.5);
}
.event-card::before,
.event-card::after {
  /* animated rangoli corners, drawn over the poster */
  --s: 90px;
  content: '';
  position: absolute;
  z-index: 2;
  width: calc(var(--s) * 2);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.35;
  background: url('assets/elements/rangoli-full.svg') center / contain no-repeat;
}
.event-card::before {
  top: calc(var(--s) * -1);
  left: calc(var(--s) * -1);
  animation: rangoli-cw 90s linear infinite;
}
.event-card::after {
  bottom: calc(var(--s) * -1);
  right: calc(var(--s) * -1);
  animation: rangoli-ccw 90s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .event-card::before,
  .event-card::after {
    animation: none;
  }
}
.ev-poster {
  display: block;
  flex: none;
  width: 100%;
  height: 210px;
  object-fit: cover;
  object-position: top center;
}
.ev-poster--empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 122, 26, 0.22), transparent 70%), #130d17;
}
.ev-poster--empty img {
  position: static;
  width: 34%;
  height: auto;
  opacity: 0.55;
  filter: drop-shadow(0 0 18px rgba(255, 122, 26, 0.5));
}
.ev-day {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  font: 800 10px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a0c02;
  background: linear-gradient(135deg, #ffd27a, #ff9a3d);
}
.ev-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.ev-tags li {
  padding: 3px 10px;
  border-radius: 999px;
  font: 700 11px var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border: 1px solid rgba(255, 190, 120, 0.25);
}
.ev-body {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 18px 22px 20px;
  border-top: 1px solid rgba(255, 190, 120, 0.2);
  background: linear-gradient(160deg, #1d1522, #0e0a12 75%);
}
.ev-club {
  display: block;
  font: 800 11px/1.3 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.event-card-title {
  margin: 6px 0 4px;
  font: 700 26px/1.1 var(--font-heading);
  background: linear-gradient(180deg, #fff1d2, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.event-card-tagline {
  margin: 0 0 12px;
  font: italic 15px/1.4 var(--font-body);
  color: var(--text-secondary);
}
.ev-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.ev-stats div {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 179, 71, 0.08);
  border: 1px solid rgba(255, 179, 71, 0.35);
}
.ev-stats dt {
  font: 800 9px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ev-stats dd {
  margin: 0;
  font: 700 12px/1.25 var(--font-sans);
  color: #ffd27a;
}

.btn-plan-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  cursor: var(--cur-hover);
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: all 0.2s ease;
}
.btn-plan-toggle:hover {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
}
.btn-plan-toggle.in-plan {
  background: var(--gold-primary);
  color: var(--bg-dark);
  border-color: var(--gold-primary);
}

.events-empty-state {
  text-align: center;
  padding: 60px 24px;
}
.empty-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 14px;
}

.btn-in-plan {
  background: var(--gold-primary) !important;
  color: var(--bg-dark) !important;
  font-weight: 700;
}

/* ==========================================================================
   Personal Itinerary ("My Plan") Section
   ========================================================================== */
.plan-controls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  margin-bottom: 24px;
}
.plan-badge {
  background: var(--gold-primary);
  color: var(--bg-dark);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}
.plan-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 8px;
}
.plan-actions {
  display: flex;
  gap: 10px;
}

.plan-conflict-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 154, 46, 0.15);
  border: 1px solid rgba(255, 154, 46, 0.45);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 24px;
  color: #ffbe76;
}
.plan-conflict-banner .alert-icon {
  font-size: 20px;
}
.plan-conflict-banner p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #ffeaa7;
}

.plan-timeline-grid {
  display: grid;
  gap: 14px;
}
.plan-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
}
.plan-card-left {
  display: flex;
  flex-direction: column;
  min-width: 90px;
}
.plan-day-tag {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-primary);
}
.plan-time-tag {
  font-size: 11px;
  color: var(--text-muted);
}
.plan-card-info {
  flex: 1;
  min-width: 200px;
}
.plan-cat-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.plan-event-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 2px 0 4px;
}
.plan-venue-row {
  font-size: 12px;
  color: var(--text-secondary);
}
.plan-card-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-remove-plan {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: var(--text-muted);
  cursor: var(--cur-hover);
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}
.btn-remove-plan:hover {
  background: rgba(255, 82, 82, 0.25);
  color: #ff7675;
}

.plan-empty-card {
  padding: 60px 24px;
}
.empty-plan-icon {
  font-size: 44px;
  color: var(--gold-primary);
  margin-bottom: 12px;
}
.empty-title {
  font-size: 22px;
  color: #fff;
  margin: 0 0 10px;
}
.empty-desc {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto 24px;
}

/* ==========================================================================
   Schedule & Stage Tracks Section
   ========================================================================== */
.schedule-live-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  margin-bottom: 24px;
}
.pulse-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b4e;
  box-shadow: 0 0 10px #ff3b4e;
  animation: pulseGold 1.4s infinite;
}
.status-headline {
  font-size: 13px;
  color: #fff;
}
.status-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
  display: none;
}
@media (min-width: 768px) {
  .status-sub {
    display: block;
  }
}

.schedule-day-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.day-tab-btn {
  background: rgba(20, 10, 40, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  text-align: left;
  cursor: var(--cur-hover);
  transition: all 0.2s ease;
}
.day-tab-btn:hover,
.day-tab-btn.active {
  background: rgba(224, 184, 96, 0.15);
  border-color: var(--gold-primary);
}
.tab-day-num {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.day-tab-btn.active .tab-day-num {
  color: var(--gold-primary);
}
.tab-day-theme {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Desktop Multi-Track Grid */
.desktop-stage-grid {
  display: none;
}
@media (min-width: 860px) {
  .desktop-stage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
}

.stage-track-column {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.stage-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-glass);
  margin-bottom: 16px;
}
.stage-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 6px 0 8px;
}
.btn-jump-map {
  padding: 0;
  font-size: 11px;
}

.stage-slots-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stage-slot-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: border-color 0.2s ease;
}
.stage-slot-card:hover {
  border-color: var(--border-glass-gold);
}
.slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.slot-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-primary);
}
.slot-cat {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.slot-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.slot-summary {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 10px;
}

/* Mobile Vertical Timeline */
.mobile-vertical-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 28px;
}
@media (min-width: 860px) {
  .mobile-vertical-timeline {
    display: none;
  }
}

.timeline-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-primary), var(--magenta-primary), transparent);
}
.timeline-slot-item {
  position: relative;
  margin-bottom: 20px;
}
.timeline-node {
  position: absolute;
  top: 18px;
  left: -24px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-primary);
  box-shadow: 0 0 8px var(--gold-primary);
}
.timeline-slot-card {
  padding: 16px;
}
.slot-time-pill {
  display: inline-block;
  background: rgba(224, 184, 96, 0.15);
  color: var(--gold-primary);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
}
.slot-category-tag {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-left: 8px;
}
.slot-title {
  font-size: 16px;
  color: #fff;
  margin: 0 0 6px;
}
.slot-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.slot-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ==========================================================================
   3D Map Section & Controls
   ========================================================================== */
.map-viewport-wrapper {
  position: relative;
  width: 100%;
  height: clamp(540px, 75vh, 800px);
  border-radius: 24px;
  border: 1px solid rgba(224, 184, 96, 0.28);
  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.65),
    0 0 35px rgba(138, 43, 226, 0.15);
  overflow: hidden;
  margin-bottom: 20px;
}

.map-poster-placeholder {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #201040, #0a0514);
  display: grid;
  place-items: center;
  z-index: 5;
}
.poster-overlay {
  text-align: center;
  padding: 32px 24px;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.poster-badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #ff7a1a;
  text-transform: uppercase;
  padding: 6px 14px;
  background: rgba(255, 122, 26, 0.1);
  border: 1px solid rgba(255, 122, 26, 0.3);
  border-radius: 20px;
  display: inline-block;
}
.poster-title {
  font-size: clamp(26px, 5vw, 40px);
  color: #fff;
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  background: linear-gradient(135deg, #fff, #f6dfae);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.poster-desc {
  display: none;
}
.poster-hint {
  display: none;
}

.canvas-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.canvas-container .view,
#view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

/* Directions Drawer */
.map-directions-drawer {
  position: absolute;
  top: 16px;
  left: 352px;
  width: min(90vw, 380px);
  max-height: calc(100% - 84px);
  overflow-y: auto;
  z-index: 38;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(224, 184, 96, 0.35);
  background: rgba(12, 6, 26, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75);
}
.drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.drawer-top h4 {
  margin: 0;
  font-size: 15px;
  color: #fff;
}
.drawer-close-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 16px;
  cursor: var(--cur-hover);
}
.directions-selector {
  margin-bottom: 14px;
}
.directions-selector label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.form-select {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 13px;
}
.dir-summary {
  font-size: 12px;
  color: var(--gold-primary);
  font-weight: 700;
  margin-bottom: 8px;
}
.dir-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

/* Pins quick selector */

/* Accessible Landmarks details */

/* ==========================================================================
   Lineup & Judges Section
   ========================================================================== */

/* ==========================================================================
   Sponsors Section
   ========================================================================== */
.sponsors-tiered-wall {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-bottom: 48px;
}
.sponsor-tier-block {
  text-align: center;
}
.tier-header {
  margin-bottom: 18px;
}
.tier-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold-primary);
  text-transform: uppercase;
}
.tier-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
}
.sponsor-cards-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.sponsor-card {
  padding: 20px 24px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sponsor-placeholder-logo {
  font-size: 30px;
  margin-bottom: 8px;
}
.sponsor-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.sponsor-tag {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

.sponsor-cta-banner {
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.banner-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--gold-primary);
}
.banner-title {
  font-size: clamp(22px, 3.5vw, 32px);
  color: #fff;
  margin: 8px 0 14px;
}
.banner-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto 24px;
}
.banner-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ==========================================================================
   Gallery Section
   ========================================================================== */
.aftermovie-container {
  margin-bottom: 36px;
  overflow: hidden;
}
.video-placeholder {
  min-height: 380px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, #200f38, #0a0514);
  text-align: center;
  padding: 32px;
}
.video-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--magenta-primary);
  letter-spacing: 0.2em;
}
.video-title {
  font-size: clamp(22px, 3.5vw, 32px);
  color: #fff;
  margin: 8px 0 12px;
}
.video-desc {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 24px;
}
.btn-play-video {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--magenta-primary), #ff3fa4);
  color: #fff;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  border: 0;
  cursor: var(--cur-hover);
  box-shadow: 0 4px 20px var(--magenta-glow);
  transition: transform 0.2s ease;
}
.btn-play-video:hover {
  transform: scale(1.04);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.gallery-item {
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gallery-thumb-slot {
  aspect-ratio: 8 / 7; /* image grows into the old caption space */
  position: relative;
  display: grid;
  place-items: center;
}
.thumb-ambient-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ambient-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--gold-primary);
}
.ambient-num {
  font-size: 28px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.2);
  font-family: var(--font-mono);
}

/* ==========================================================================
   Team Section
   ========================================================================== */
.team-subgroup {
  margin-bottom: 40px;
}
.subgroup-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold-primary);
  text-transform: uppercase;
  margin: 0 0 20px;
  text-align: center;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.team-card {
  position: relative;
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team-avatar-slot {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-glass-gold);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.avatar-initials {
  font-size: 22px;
  font-weight: 800;
  color: var(--gold-primary);
}
.member-team-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.member-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px;
}
.member-role {
  font-size: 12px;
  color: var(--gold-primary);
  margin-bottom: 4px;
}
.member-dept {
  font-size: 11px;
  color: var(--text-muted);
}
.member-email {
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: none;
  margin-top: 8px;
}

/* ==========================================================================
   Registration & Passes Section
   ========================================================================== */
.adapter-control-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  margin-bottom: 28px;
}
.adapter-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #fff;
}
.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #55efc4;
  box-shadow: 0 0 8px #55efc4;
}

.pass-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}
.pass-tier-card {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.pass-featured {
  border-color: var(--gold-primary);
  background: rgba(28, 14, 52, 0.85);
  box-shadow: 0 10px 40px rgba(224, 184, 96, 0.2);
}
.featured-ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--gold-primary);
  color: var(--bg-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}
.pass-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--gold-primary);
}
.pass-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 6px 0 14px;
}
.pass-price-row {
  margin-bottom: 16px;
}
.price-val {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
}
.price-period {
  font-size: 12px;
  color: var(--text-muted);
}
.pass-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
}
.pass-perks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
}
.pass-action-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* On-site Multi-step Form */
.onsite-form-container {
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: 48px;
}
.form-header {
  text-align: center;
  margin-bottom: 28px;
}
.form-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--gold-primary);
}
.form-title {
  font-size: 24px;
  color: #fff;
  margin: 6px 0 8px;
}
.form-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.form-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 520px;
  margin: 0 auto 36px;
}
.step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.step-node span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.step-node.active span {
  background: var(--gold-primary);
  color: var(--bg-dark);
  border-color: var(--gold-primary);
}
.step-node.completed span {
  background: #55efc4;
  color: var(--bg-dark);
  border-color: #55efc4;
}
.step-node small {
  font-size: 11px;
  color: var(--text-muted);
}
.step-node.active small {
  color: #fff;
  font-weight: 700;
}
.step-line {
  flex: 1;
  height: 2px;
  background: var(--border-glass);
  margin: 0 10px 18px;
}

.form-step-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
}
.step-heading {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
}
.step-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: -10px 0 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 600px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.form-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
.form-field .req {
  color: #ff7675;
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 10px 14px;
  background: rgba(10, 5, 20, 0.65);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--gold-primary);
  outline: none;
}
.field-error {
  font-size: 11px;
  color: #ff7675;
}

.form-events-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.event-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  cursor: var(--cur-hover);
}
.event-checkbox-label:hover {
  border-color: var(--border-glass-gold);
}
.event-check-text strong {
  display: block;
  font-size: 13px;
  color: #fff;
}
.event-check-text small {
  font-size: 11px;
  color: var(--text-muted);
}

.review-summary-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 20px;
}
.review-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}
.review-row strong {
  color: var(--text-muted);
}
.review-row span {
  color: #fff;
  text-align: right;
}

.consent-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  cursor: var(--cur-hover);
  margin-bottom: 16px;
}

.form-nav-controls {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border-glass);
}

.ambassador-banner {
  padding: clamp(28px, 4vw, 40px);
}
.ambassador-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold-primary);
}
.ambassador-title {
  font-size: clamp(22px, 3vw, 28px);
  color: #fff;
  margin: 6px 0 12px;
}
.ambassador-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.ambassador-perks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.perk-tag {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.ambassador-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.ambassador-note {
  font-size: 12px;
  color: var(--text-muted);
}

/* ==========================================================================
   Travel & Transit Section
   ========================================================================== */
.travel-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-bottom: 32px;
}
.travel-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.transit-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gold-primary);
  margin-bottom: 10px;
}
.transit-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}
.transit-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 18px;
  flex: 1;
}
.transit-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-glass);
  padding-top: 12px;
}
.transit-meta strong {
  color: #fff;
}

.travel-guidelines-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 28px;
}
@media (min-width: 768px) {
  .travel-guidelines-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.guideline-card {
  padding: 24px;
}
.guideline-card .card-icon {
  font-size: 24px;
}
.card-headline {
  font-size: 17px;
  color: #fff;
  margin: 8px 0 10px;
}
.guideline-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.card-note {
  font-size: 11px;
  color: var(--gold-primary);
  font-weight: 600;
}
.rules-bullet-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.travel-map-cta {
  padding: 24px;
}
.travel-map-cta h4 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #fff;
}
.travel-map-cta p {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq-category-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.faq-cat-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  cursor: var(--cur-hover);
  transition: all 0.2s ease;
}
.faq-cat-btn:hover,
.faq-cat-btn.active {
  background: var(--gold-primary);
  color: var(--bg-dark);
  border-color: var(--gold-primary);
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  overflow: hidden;
}
.faq-question-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  color: #fff;
  text-align: left;
  cursor: var(--cur-hover);
  font-family: inherit;
}
.faq-cat-badge {
  font-size: 10px;
  font-weight: 800;
  color: var(--gold-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.faq-question-text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}
.faq-chevron {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.25s ease;
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  color: var(--gold-primary);
}
.faq-answer-panel {
  padding: 0 22px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.faq-answer-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 14px 0 0;
}

/* ==========================================================================
   Contact Section
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr 1.3fr;
  }
}

.contact-info-card,
.contact-form-card {
  padding: clamp(24px, 4vw, 36px);
}
.info-card-title,
.form-card-title {
  font-size: 20px;
  color: #fff;
  margin: 0 0 12px;
}
.info-card-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 24px;
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}
.channel-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.channel-icon {
  font-size: 18px;
}
.channel-details {
  display: flex;
  flex-direction: column;
}
.channel-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
}
.channel-value {
  font-size: 13px;
  color: #fff;
  text-decoration: none;
}
.channel-value:hover {
  color: var(--gold-primary);
}

.socials-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.socials-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.social-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.social-btn:hover {
  background: rgba(224, 184, 96, 0.15);
  border-color: var(--gold-primary);
  color: #fff;
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */
.toast-notification {
  position: fixed;
  bottom: calc(var(--dock-height) + 20px);
  right: 20px;
  z-index: 9999;
  background: rgba(18, 9, 36, 0.95);
  border: 1px solid var(--border-glass-gold);
  border-radius: var(--radius-full);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.toast-notification.on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.toast-success {
  border-color: #55efc4;
}

/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes revealTitle {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease forwards;
}
.animate-fade-in-delay {
  animation: fadeIn 0.8s ease 0.2s forwards;
}
.animate-fade-in-delay-2 {
  animation: fadeIn 0.8s ease 0.4s forwards;
}
.animate-reveal-title {
  animation: revealTitle 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ==========================================================================
   Reduced Motion & Print Overrides
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media print {
  .site-header,
  .mobile-bottom-dock,
  .map-viewport-wrapper,
  .hero-mesh,
  .btn-primary,
  .btn-secondary {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ==========================================================================
   HALLOWEEN THEME LAYER · Step 1: materials, atmosphere, primitives
   (docs/HALLOWEEN_UI.md §2–§6). Later steps append below.
   ========================================================================== */

/* --- Materials -------------------------------------------------------- */
.mat-oak,
.glass-panel {
  background: linear-gradient(160deg, var(--oak-1), var(--oak-2) 55%, var(--oak-3));
  box-shadow: var(--bevel), var(--shadow-md);
  border: 1px solid #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.glass-panel:not(.team-card):not(.sponsor-card):hover {
  border-color: var(--brass-3);
  box-shadow:
    var(--bevel),
    var(--shadow-md),
    0 0 18px rgba(255, 122, 26, 0.18);
}
.mat-iron {
  background: radial-gradient(circle at 20% 15%, var(--iron-1), var(--iron-2) 60%, var(--iron-3));
  box-shadow: var(--bevel), var(--shadow-sm);
  border: 1px solid #000;
}
.mat-brass {
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  color: #1a0c02;
  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.45);
  box-shadow: var(--bevel), var(--shadow-sm);
}
.mat-parchment {
  background: radial-gradient(ellipse at 30% 20%, var(--parchment-1), var(--parchment-2));
  color: var(--parchment-ink);
  box-shadow:
    inset 0 0 40px rgba(90, 50, 10, 0.45),
    var(--shadow-md);
}
.mat-recess {
  background: #090605;
  box-shadow: var(--recess);
  border: 1px solid #000;
  border-bottom-color: rgba(255, 190, 120, 0.12);
}
.mat-wax {
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  box-shadow:
    inset -2px -3px 5px rgba(0, 0, 0, 0.55),
    inset 2px 2px 3px rgba(255, 150, 150, 0.35),
    0 3px 6px rgba(0, 0, 0, 0.6);
}
.glow-flicker {
  animation: flicker 3.2s infinite steps(1);
}

/* --- Global atmosphere ------------------------------------------------ */
html {
  background:
    radial-gradient(ellipse at 50% 0%, var(--purple-night), transparent 55%),
    radial-gradient(ellipse at 50% 100%, #1a0a04, transparent 50%), var(--bg-dark);
  font-family: var(--font-body);
}
body {
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
body::before {
  background:
    radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(0, 0, 0, 0.75)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}
body::after {
  inset: -10% -20%;
  background:
    radial-gradient(ellipse 40% 12% at 30% 80%, rgba(200, 190, 220, 0.07), transparent),
    radial-gradient(ellipse 50% 10% at 70% 60%, rgba(200, 190, 220, 0.05), transparent);
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea,
label {
  font-family: var(--font-sans);
}

/* Section rhythm: alternating tone + glowing divider */
main > div:nth-of-type(even) > .section {
  background: var(--bg-surface);
}
.section::before {
  /* glowing divider, same as the footer's top edge */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #ff7a1a 30%,
    #ffd27a 50%,
    #ff7a1a 70%,
    transparent
  );
  box-shadow: 0 0 18px rgba(255, 122, 26, 0.7);
}

/* --- Type ------------------------------------------------------------- */
.section-title {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffd9a0, var(--brass-1) 45%, var(--brass-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brass-1);
}
.section-subtitle {
  font-family: var(--font-body);
  font-size: clamp(15px, 2vw, 18px);
}

/* --- Buttons ---------------------------------------------------------- */
.btn-primary,
.btn-secondary {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-radius: var(--radius-md);
  min-height: 44px;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}
.btn-primary {
  background: linear-gradient(180deg, #ffa23d, #ff7a1a 45%, #c9500a);
  color: var(--text-on-gold);
  text-shadow: 0 1px 0 rgba(255, 220, 160, 0.5);
  border: 1px solid #5a2203;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.7),
    inset 0 -3px 0 rgba(90, 25, 0, 0.55),
    0 4px 0 #6b2a05,
    0 8px 18px rgba(0, 0, 0, 0.6),
    var(--shadow-gold);
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.7),
    inset 0 -3px 0 rgba(90, 25, 0, 0.55),
    0 5px 0 #6b2a05,
    0 10px 22px rgba(0, 0, 0, 0.6),
    var(--shadow-gold);
}
.btn-primary:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.5),
    inset 0 -1px 0 rgba(90, 25, 0, 0.55),
    0 0 0 #6b2a05,
    0 2px 6px rgba(0, 0, 0, 0.6);
}
.btn-secondary {
  background: radial-gradient(circle at 20% 15%, var(--iron-1), var(--iron-2) 60%, var(--iron-3));
  color: var(--text-main);
  border: 1px solid #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    var(--bevel),
    0 4px 0 #000,
    0 8px 16px rgba(0, 0, 0, 0.55);
}
.btn-secondary:hover {
  background: radial-gradient(circle at 20% 15%, #4a4a52, var(--iron-2) 60%, var(--iron-3));
  color: var(--gold-hover);
  border-color: #000;
  transform: translateY(-1px);
}
.btn-secondary:active {
  transform: translateY(4px);
  box-shadow:
    var(--bevel),
    0 0 0 #000,
    0 2px 6px rgba(0, 0, 0, 0.6);
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-primary[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: saturate(0.4);
  box-shadow: none;
}
.btn-text-link {
  color: var(--text-main);
  text-decoration-color: var(--gold-primary);
}
.btn-text-link:hover {
  color: var(--gold-hover);
}

/* --- Badges & state chips -------------------------------------------- */
.state-open {
  background: rgba(125, 255, 176, 0.12);
  color: var(--ghost);
  border: 1px solid rgba(125, 255, 176, 0.45);
  box-shadow: 0 0 10px var(--ghost-glow);
}
.state-soon {
  background: rgba(255, 179, 71, 0.14);
  color: var(--orange-accent);
  border: 1px solid rgba(255, 179, 71, 0.45);
}
.state-closed {
  background: rgba(60, 60, 66, 0.5);
  color: #b9b4ae;
  border: 1px solid #000;
}
.state-soldout {
  background: rgba(179, 20, 31, 0.3);
  color: #ff9aa2;
  border: 1px solid rgba(194, 42, 56, 0.6);
}

/* --- Inputs ----------------------------------------------------------- */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
select,
textarea,
.search-box,
.form-select {
  background: #090605;
  color: var(--text-main);
  border: 1px solid #000;
  border-bottom-color: rgba(255, 190, 120, 0.14);
  box-shadow: var(--recess);
  font-family: var(--font-sans);
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--brass-2);
  box-shadow:
    var(--recess),
    0 0 0 2px rgba(255, 122, 26, 0.35);
  outline: none;
}

/* --- Focus, selection, scrollbars, skip link -------------------------- */
*:focus-visible {
  outline: 2px solid var(--ghost);
  outline-offset: 3px;
}
::selection {
  background: #ff7a1a;
  color: #1a0c02;
}
/* Scrollbars: the page scrollbar is replaced by the custom rail (src/ui/scrollbar.js);
   inner scrollers keep a slim brass bar. (scrollbar-color only for Firefox: Chromium would ignore ::-webkit-scrollbar.) */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #8a6a32 transparent;
  }
  html {
    scrollbar-width: none;
  }
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #8a6a32;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff7a1a;
}

/* Scroll rail */
.scroll-rail {
  position: fixed;
  z-index: 90;
  top: 96px;
  bottom: 28px;
  right: 10px;
  width: 12px;
  border-radius: 8px;
  cursor: var(--cur-hover);
  touch-action: none;
  background: linear-gradient(90deg, #07050a, #1a1220);
  border: 1px solid #3a2a14;
  box-shadow:
    inset 0 0 6px #000,
    0 0 10px rgba(0, 0, 0, 0.6);
}
.scroll-rail-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffb347, #ff7a1a 60%, #8e0f1c);
  box-shadow: 0 0 10px rgba(255, 122, 26, 0.8);
}
.scroll-rail-knob {
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #ffe0a8, #ff7a1a 60%, #8a3205);
  border: 2px solid #1a0c02;
  box-shadow: 0 0 10px rgba(255, 122, 26, 0.9);
}
.scroll-rail:hover .scroll-rail-knob,
.scroll-rail.dragging .scroll-rail-knob {
  width: 24px;
  height: 24px;
}
body.on-hero .scroll-rail {
  opacity: 0.55;
}
@media (max-width: 768px) {
  .scroll-rail {
    right: 4px;
    width: 8px;
    bottom: calc(var(--dock-height) + 16px);
  }
  .scroll-rail-knob {
    width: 14px;
    height: 14px;
  }
}
@media print {
  .scroll-rail {
    display: none;
  }
}
.skip-link {
  background: var(--gold-primary);
  color: var(--text-on-gold);
}

/* --- Keyframes -------------------------------------------------------- */
@keyframes flicker {
  0%,
  100% {
    filter: brightness(1);
  }
  8% {
    filter: brightness(0.85);
  }
  14% {
    filter: brightness(1.05);
  }
  31% {
    filter: brightness(0.9);
  }
  47% {
    filter: brightness(1.03);
  }
  63% {
    filter: brightness(0.88);
  }
  80% {
    filter: brightness(1.04);
  }
}
@keyframes fog-drift {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(10%);
  }
}
@keyframes sign-sway {
  0%,
  100% {
    transform: rotate(-1.2deg);
  }
  50% {
    transform: rotate(1.2deg);
  }
}
@keyframes lantern-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes bulb-pulse {
  0%,
  100% {
    box-shadow: 0 0 2px #ff3b4e;
  }
  50% {
    box-shadow: 0 0 12px #ff3b4e;
  }
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .glow-flicker {
    animation: none !important;
  }
}

/* ==========================================================================
   HALLOWEEN THEME LAYER · Step 2: header, drawer, dock (§7)
   ========================================================================== */

/* Header: iron plate with a brass rail */
.site-header {
  background: linear-gradient(180deg, rgba(40, 40, 46, 0.96), rgba(14, 14, 18, 0.96));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--brass-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.14),
    inset 0 -1px 0 rgba(255, 220, 170, 0.35),
    0 8px 22px rgba(0, 0, 0, 0.7);
}
.brand-wordmark {
  filter: drop-shadow(0 0 8px rgba(255, 122, 26, 0.45));
}
.brand-sub {
  font-family: var(--font-sans);
  color: var(--ghost);
  border-left-color: var(--brass-2);
}

.nav-link {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.nav-link:hover {
  color: var(--gold-hover);
}
.nav-link.active {
  color: var(--gold-hover);
  background: #090605;
  box-shadow: var(--recess);
  border-radius: var(--radius-sm);
  padding-left: 10px;
  padding-right: 10px;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -3px;
  height: 3px;
  background: var(--gold-primary);
  border-radius: 99px;
  box-shadow: 0 0 10px var(--gold-primary);
  transition:
    left 0.2s ease,
    right 0.2s ease;
}
.nav-link:hover::after {
  left: 8px;
  right: 8px;
}
.nav-link.active::after {
  display: none;
}

.btn-plan-badge {
  font-family: var(--font-sans);
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  color: #1a0c02;
  border: 1px solid #000;
  border-radius: var(--radius-md);
  box-shadow: var(--bevel), var(--shadow-sm);
  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.45);
}
.btn-plan-badge:hover {
  background: linear-gradient(145deg, #dcb36b, var(--brass-2) 55%, var(--brass-3));
}
.btn-plan-badge .plan-count {
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  color: var(--text-main);
  box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.5);
}

/* Hamburger: iron square with brass rods */
.menu-toggle {
  background: radial-gradient(circle at 20% 15%, var(--iron-1), var(--iron-2) 60%, var(--iron-3));
  border: 1px solid #000;
  box-shadow:
    var(--bevel),
    0 3px 0 #000;
}
.menu-toggle:active {
  transform: translateY(3px);
  box-shadow: var(--bevel);
}
.hamburger-bar {
  height: 3px;
  background: linear-gradient(180deg, var(--brass-1), var(--brass-3));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

/* Drawer: dark oak door with iron straps */
.mobile-drawer-backdrop {
  background: rgba(3, 1, 6, 0.8);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mobile-drawer {
  background:
    linear-gradient(
      90deg,
      transparent 0 18%,
      var(--iron-3) 18% 19%,
      var(--iron-2) 19% 23%,
      var(--iron-3) 23% 24%,
      transparent 24% 76%,
      var(--iron-3) 76% 77%,
      var(--iron-2) 77% 81%,
      var(--iron-3) 81% 82%,
      transparent 82%
    ),
    linear-gradient(160deg, var(--oak-1), var(--oak-2) 55%, var(--oak-3));
  border-left: 3px solid var(--brass-2);
  box-shadow:
    inset 2px 0 0 rgba(255, 220, 170, 0.15),
    -14px 0 40px rgba(0, 0, 0, 0.85);
}
.drawer-header {
  border-bottom: 2px solid #000;
  box-shadow: 0 1px 0 rgba(255, 220, 170, 0.1);
}
.drawer-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  color: #1a0c02;
  box-shadow:
    var(--bevel),
    0 3px 0 #000;
  font-weight: 800;
}
.drawer-link {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  color: var(--text-main);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 0 rgba(255, 220, 170, 0.05);
}
.drawer-link:hover,
.drawer-link.active {
  background: #090605;
  box-shadow: var(--recess);
  color: var(--gold-hover);
  border-left-color: var(--gold-primary);
}
.drawer-footer {
  border-top: 2px solid #000;
  box-shadow: 0 -1px 0 rgba(255, 220, 170, 0.1);
}

/* Dock: wooden shelf with a brass rail */
@media (max-width: 768px) {
  .mobile-bottom-dock {
    background: linear-gradient(180deg, var(--oak-1), var(--oak-3));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 3px solid var(--brass-2);
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 170, 0.3),
      0 -8px 20px rgba(0, 0, 0, 0.7);
  }
}
.dock-item {
  font-family: var(--font-sans);
  color: var(--text-secondary);
  min-height: 44px;
}
.dock-item:hover,
.dock-item.active {
  color: var(--gold-hover);
}
.dock-item.active .dock-icon {
  filter: drop-shadow(0 0 8px var(--gold-primary));
}
.dock-item-highlight {
  color: var(--text-on-gold);
  background: linear-gradient(180deg, #ffa23d, #ff7a1a 45%, #c9500a);
  border: 1px solid #5a2203;
  border-radius: var(--radius-md);
  margin-top: -12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.7),
    0 3px 0 #6b2a05,
    0 6px 14px rgba(0, 0, 0, 0.6),
    var(--shadow-gold);
}
.dock-item-highlight:hover,
.dock-item-highlight.active {
  color: var(--text-on-gold);
}
.dock-badge {
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  color: var(--text-main);
  box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .dock-item.active .dock-icon {
    animation: none !important;
  }
}

/* ==========================================================================
   HALLOWEEN THEME LAYER · Step 3: hero (§5)
   Decor is CSS-only (pseudo-elements + data-URI SVG): no markup/JS changes.
   ========================================================================== */

.hero-section {
  background: linear-gradient(180deg, #07050a 0%, #140a1e 55%, #2a0f08 100%);
}

.glow-orb {
  opacity: 0.3;
  filter: blur(70px);
}
.hero-noise {
  opacity: 0.8;
}

/* Badge: wax seal */
.hero-badge {
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  border: 1px solid #000;
  color: #ffe9cf;
  font-family: var(--font-sans);
  box-shadow:
    inset -2px -3px 5px rgba(0, 0, 0, 0.55),
    inset 2px 2px 3px rgba(255, 150, 150, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.6);
}
.badge-dot {
  background: var(--ghost);
  box-shadow: 0 0 10px var(--ghost);
}

/* Wordmark: hanging oak sign on two chains */
.hero-wordmark-wrapper {
  position: relative;
  margin-top: 48px;
  padding: 22px clamp(18px, 4vw, 40px) 18px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--oak-1), var(--oak-2) 55%, var(--oak-3));
  border: 3px solid var(--brass-3);
  box-shadow:
    var(--bevel),
    inset 0 0 0 1px #000,
    var(--shadow-lg);
  transform-origin: top center;
  animation:
    revealTitle 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
    sign-sway 6s ease-in-out 1s infinite;
}
.hero-wordmark-wrapper::before,
.hero-wordmark-wrapper::after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 6px;
  height: 48px;
  background: repeating-linear-gradient(180deg, var(--iron-1) 0 8px, var(--iron-3) 8px 10px);
  border-radius: 3px;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.8);
}
.hero-wordmark-wrapper::before {
  left: 14%;
}
.hero-wordmark-wrapper::after {
  right: 14%;
}
.hero-wordmark-img {
  filter: drop-shadow(0 0 18px rgba(255, 122, 26, 0.55));
}
.hero-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-main);
  margin-left: auto;
  margin-right: auto;
}

/* Meta bar: riveted iron strip */
.hero-meta-bar {
  background: radial-gradient(circle at 20% 15%, var(--iron-1), var(--iron-2) 60%, var(--iron-3));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #000;
  border-radius: var(--radius-md);
  box-shadow:
    var(--bevel),
    var(--shadow-md),
    inset 6px 0 0 -2px var(--brass-2),
    inset -6px 0 0 -2px var(--brass-2);
}
.meta-icon {
  filter: sepia(1) saturate(4) hue-rotate(345deg);
}
.meta-label {
  font-family: var(--font-sans);
  color: var(--text-muted);
}
.meta-value {
  font-family: var(--font-sans);
  color: var(--text-main);
}
.meta-divider {
  width: 2px;
  background: var(--oak-3);
  box-shadow: 1px 0 0 rgba(255, 220, 170, 0.14);
}

/* Countdown: carved tablets with a brass split line */
.countdown-placeholder {
  font-family: var(--font-sans);
  background: radial-gradient(ellipse at 30% 20%, var(--parchment-1), var(--parchment-2));
  color: var(--parchment-ink);
  border: 1px solid #000;
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 0 24px rgba(90, 50, 10, 0.45),
    var(--shadow-md);
}
.time-card {
  position: relative;
  background: #090605;
  border: 1px solid #000;
  border-radius: var(--radius-sm);
  box-shadow:
    var(--recess),
    0 0 0 3px var(--brass-3),
    0 0 0 4px #000,
    var(--shadow-md);
}
.time-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  height: 2px;
  background: linear-gradient(90deg, var(--brass-3), var(--brass-1), var(--brass-3));
  opacity: 0.6;
  pointer-events: none;
}
.time-card b {
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--gold-primary);
  text-shadow: 0 0 12px var(--gold-glow);
}
.time-card small {
  color: var(--text-secondary);
  font-family: var(--font-sans);
}
.time-sep {
  color: var(--ghost);
  text-shadow: 0 0 8px var(--ghost-glow);
}

/* Ticker: iron fence bar with skull separators */
.hero-ticker-wrapper {
  background: radial-gradient(circle at 20% 15%, var(--iron-1), var(--iron-2) 60%, var(--iron-3));
  border: 1px solid #000;
  border-radius: var(--radius-md);
  box-shadow: var(--bevel), var(--shadow-sm);
}
.ticker-badge {
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  color: #ffe9cf;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.5);
}
.ticker-item {
  color: var(--text-main);
  font-family: var(--font-sans);
}

/* Scroll cue: bobbing lantern */
.cue-label {
  font-family: var(--font-sans);
  color: var(--text-secondary);
}
.cue-indicator {
  width: 14px;
  height: 20px;
  border-radius: 4px 4px 7px 7px;
  background: radial-gradient(circle at 50% 60%, #ffd9a0, var(--gold-primary) 60%, #7a2f05);
  border: 2px solid var(--iron-2);
  box-shadow: 0 0 14px var(--gold-glow);
  animation: lantern-bob 2.4s ease-in-out infinite;
}

@media (max-width: 480px) {
  .hero-mesh::after {
    display: none;
  }
  .hero-wordmark-wrapper {
    margin-top: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mesh::before,
  .hero-mesh::after,
  .hero-section::before,
  .hero-wordmark-wrapper,
  .cue-indicator {
    animation: none !important;
  }
  .hero-mesh::before {
    left: 12%;
  }
  .hero-mesh::after {
    left: 70%;
  }
}

/* Step 3 fixes: keep nav/plan labels on one line */
.nav-link,
.btn-plan-badge {
  white-space: nowrap;
}
.nav-links {
  gap: 12px;
}
.nav-link {
  letter-spacing: 0.05em;
  font-size: 12px;
}
@media (max-width: 480px) {
  .hero-badge {
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 6px 12px;
  }
}
@media (max-width: 1359px) {
  .brand-sub {
    display: none;
  }
  .nav-links {
    gap: 8px;
  }
  .header-actions {
    gap: 8px;
  }
}
@media (min-width: 1040px) and (max-width: 1199px) {
  .desktop-nav {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
}

/* ==========================================================================
   HALLOWEEN THEME LAYER · Step 4: About, Events, Event modal (§8–§10)
   ========================================================================== */

/* --- Events: toolbar, chips, cards ------------------------------------ */
.events-filter-bar {
  border: 1px solid #000;
  border-bottom: 3px solid var(--brass-3);
}
.search-box {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.search-box input {
  background: #090605;
  border: 1px solid #000;
  border-bottom-color: rgba(255, 190, 120, 0.14);
  border-radius: var(--radius-sm);
  box-shadow: var(--recess);
  color: var(--text-main);
  font-family: var(--font-sans);
}
.search-box input:focus {
  border-color: var(--brass-2);
  box-shadow:
    var(--recess),
    0 0 0 2px rgba(255, 122, 26, 0.35);
}
.search-icon {
  filter: sepia(1) saturate(3) hue-rotate(345deg);
}
.clear-btn {
  color: var(--brass-1);
  font-weight: 800;
}

/* chips/pills: recessed slot (inactive) -> raised lit token (active) */
.filter-pill,
.category-chip,
.faq-cat-btn {
  font-family: var(--font-sans);
  background: #090605;
  border: 1px solid #000;
  border-bottom-color: rgba(255, 190, 120, 0.12);
  box-shadow: var(--recess);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.filter-pill:hover,
.category-chip:hover {
  color: var(--gold-hover);
  background: #090605;
  border-color: #000;
}
.filter-pill.active,
.category-chip.active {
  background: linear-gradient(180deg, #ffa23d, #ff7a1a 45%, #c9500a);
  color: var(--text-on-gold);
  border: 1px solid #5a2203;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.7),
    0 3px 0 #6b2a05,
    0 6px 12px rgba(0, 0, 0, 0.55),
    var(--shadow-gold);
  text-shadow: 0 1px 0 rgba(255, 220, 160, 0.5);
  transform: translateY(-1px);
}
.filter-group-label,
.events-results-meta,
.toggle-label {
  font-family: var(--font-sans);
}
.events-results-meta {
  color: var(--text-secondary);
}

/* toggle: brass lever with ghost lamp */
.toggle-switch {
  background: #090605;
  box-shadow: var(--recess);
  border: 1px solid #000;
}
.toggle-switch::after {
  background: linear-gradient(145deg, var(--brass-1), var(--brass-3));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 230, 170, 0.5);
}
.toggle-control input:checked + .toggle-switch {
  background: #06140c;
  box-shadow:
    var(--recess),
    0 0 8px var(--ghost-glow);
}
.toggle-control input:checked + .toggle-switch::after {
  background: linear-gradient(145deg, var(--ghost), #2a9a5c);
}

.btn-plan-toggle {
  background: radial-gradient(circle at 20% 15%, var(--iron-1), var(--iron-2) 60%, var(--iron-3));
  border: 1px solid #000;
  box-shadow:
    var(--bevel),
    0 3px 0 #000;
  color: var(--text-secondary);
}
.btn-plan-toggle:hover {
  color: var(--gold-hover);
  border-color: #000;
}
.btn-plan-toggle.in-plan,
.btn-in-plan {
  background: radial-gradient(circle at 35% 30%, #b5ffd2, var(--ghost) 55%, #1f8a4f) !important;
  color: #062014 !important;
  border-color: #000;
  box-shadow:
    inset -1px -2px 3px rgba(0, 0, 0, 0.35),
    0 0 12px var(--ghost-glow);
}
.events-empty-state {
  border: 1px dashed var(--brass-3);
}
.empty-icon {
  filter: grayscale(0.4);
}

/* Mobile header: Register lives in the bottom dock, keep the menu toggle on screen */
@media (max-width: 600px) {
  .header-actions .btn-primary {
    display: none;
  }
}
@media (max-width: 480px) {
  .btn-primary,
  .btn-secondary {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
}

/* Removed per request: events toolbar + category chips, schedule status bar + day tabs, sponsor CTA banner */
.events-filter-bar,
.category-chips-scroll,
.events-results-meta,
.schedule-live-status,
.schedule-day-tabs,
.sponsor-cta-banner {
  display: none !important;
}

/* ==========================================================================
   HALLOWEEN THEME LAYER · Step 5: My Plan + Schedule (§11–§12)
   (day tabs / live-status bar are hidden by the removal rule above)
   ========================================================================== */

/* --- My Plan ----------------------------------------------------------- */
.plan-controls-bar {
  border: 1px solid #000;
  border-bottom: 3px solid var(--brass-3);
}
.plan-badge {
  font-family: var(--font-sans);
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  color: #ffe9cf;
  border-radius: var(--radius-full);
  box-shadow:
    inset -2px -2px 4px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.6);
}
.plan-note {
  font-family: var(--font-body);
  color: var(--text-secondary);
}

/* conflict: blood-red warning tape */
.plan-conflict-banner {
  background: repeating-linear-gradient(45deg, #8e0f1c 0 14px, #2a0308 14px 28px);
  border: 2px solid #000;
  border-radius: var(--radius-sm);
  color: #fff0e0;
  box-shadow: var(--shadow-md);
}
.plan-conflict-banner > * {
  text-shadow:
    0 1px 2px #000,
    0 0 6px #000;
}
.plan-conflict-banner p {
  color: #fff0e0;
  font-weight: 600;
}

/* ticket stub: parchment, perforated left edge, notches */
.plan-card {
  position: relative;
  background:
    radial-gradient(circle at 0 50%, var(--bg-dark) 0 9px, transparent 10px),
    radial-gradient(circle at 100% 50%, var(--bg-dark) 0 9px, transparent 10px),
    radial-gradient(ellipse at 30% 20%, var(--parchment-1), var(--parchment-2));
  color: var(--parchment-ink);
  border: 1px solid #000;
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 0 30px rgba(90, 50, 10, 0.4),
    var(--shadow-md);
  padding-left: 34px;
}
.plan-card::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 18px;
  border-left: 2px dotted rgba(43, 26, 12, 0.45);
}
.plan-card-left {
  transform: rotate(-1.5deg);
}
.plan-day-tag {
  font-family: var(--font-sans);
  color: var(--wax-red);
}
.plan-time-tag {
  font-family: var(--font-mono);
  color: var(--wax-red);
  font-weight: 700;
  font-size: 12px;
}
.plan-cat-tag {
  font-family: var(--font-sans);
  color: #6a5238;
}
.plan-event-name {
  font-family: var(--font-heading);
  color: var(--parchment-ink);
}
.plan-venue-row {
  font-family: var(--font-body);
  color: #4a361f;
  font-size: 13px;
}
.plan-card .btn-secondary {
  min-height: 36px;
}
.btn-remove-plan {
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  color: #ffe9cf;
  border: 1px solid #000;
  box-shadow:
    inset -1px -2px 3px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.btn-remove-plan:hover {
  background: radial-gradient(circle at 35% 30%, #e0485a, var(--wax-red-hi) 60%, #6a0a16);
  color: #fff;
}

.plan-empty-card {
  border: 1px dashed var(--brass-3);
}
.empty-plan-icon {
  filter: grayscale(0.3) drop-shadow(0 0 10px var(--gold-glow));
}
.empty-title {
  font-family: var(--font-heading);
  color: var(--text-main);
}
.empty-desc {
  font-family: var(--font-body);
  font-size: 16px;
}

/* --- Schedule ---------------------------------------------------------- */
.pulse-live-dot {
  animation: bulb-pulse 1.4s infinite;
}
.stage-track-column {
  background: #0d0907;
  box-shadow:
    var(--recess),
    0 0 0 1px #000;
}
.stage-header {
  border-bottom: 2px solid #000;
  box-shadow: 0 1px 0 rgba(255, 190, 120, 0.08);
}
.stage-title {
  display: inline-block;
  font-family: var(--font-heading);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  color: #1a0c02;
  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.45);
  box-shadow: var(--bevel), var(--shadow-sm);
}
.btn-jump-map {
  color: var(--ghost);
}

/* slot cards: index cards with a brass left edge */
.stage-slot-card,
.timeline-slot-card {
  background: linear-gradient(160deg, #2a1d14, #1c130d);
  border: 1px solid #000;
  border-left: 4px solid var(--brass-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--bevel), var(--shadow-sm);
}
.stage-slot-card:hover {
  border-color: #000;
  border-left-color: var(--gold-primary);
  box-shadow:
    var(--bevel),
    var(--shadow-md),
    0 0 14px rgba(255, 122, 26, 0.2);
}
.slot-time,
.slot-time-pill {
  font-family: var(--font-sans);
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  color: #1a0c02;
  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.45);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  box-shadow: var(--bevel);
}
.slot-cat,
.slot-category-tag {
  font-family: var(--font-sans);
  color: var(--text-secondary);
}
.slot-name,
.slot-title {
  font-family: var(--font-heading);
  color: var(--text-main);
}
.slot-summary,
.slot-desc {
  font-family: var(--font-body);
  font-size: 14px;
}
.slot-meta-row {
  font-family: var(--font-sans);
  color: var(--text-secondary);
}

/* mobile timeline: rope spine + candle-flame nodes */
.timeline-spine {
  width: 4px;
  left: 8px;
  background: repeating-linear-gradient(180deg, var(--brass-2) 0 6px, var(--brass-3) 6px 9px);
  box-shadow: 1px 0 0 #000;
  border-radius: 2px;
}
.timeline-node {
  width: 12px;
  height: 16px;
  left: -26px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff3c4, var(--gold-primary) 60%, #c9500a);
  box-shadow:
    0 0 10px var(--gold-primary),
    0 0 2px #fff3c4;
}
.stage-title {
  display: block;
  width: fit-content;
  max-width: 100%;
}

/* ==========================================================================
   HALLOWEEN THEME LAYER · Step 6: 3D map chrome + HUD (§13)
   Chrome only: canvas, scene, camera and pins logic are untouched.
   ========================================================================== */

/* --- Frame: iron + oak tower window ----------------------------------- */
.map-viewport-wrapper {
  border-radius: var(--radius-lg);
  border: 10px solid var(--oak-1);
  outline: 2px solid var(--brass-3);
  outline-offset: -4px;
  box-shadow:
    var(--bevel),
    0 0 0 1px #000,
    var(--shadow-lg),
    inset 0 0 40px rgba(0, 0, 0, 0.8);
}
.map-viewport-wrapper::before,
.map-viewport-wrapper::after {
  content: '';
  position: absolute;
  z-index: 40;
  pointer-events: none;
  width: 26px;
  height: 26px;
  border: 3px solid var(--brass-2);
}
.map-viewport-wrapper::before {
  top: 6px;
  left: 6px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 6px;
}
.map-viewport-wrapper::after {
  bottom: 6px;
  right: 6px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 6px;
}

/* --- Poster: haunted-campus blueprint --------------------------------- */
.map-poster-placeholder {
  background: radial-gradient(circle at 50% 45%, #2a1240, #0a0612 70%);
  overflow: hidden;
}
.map-poster-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, transparent 48%, rgba(140, 90, 30, 0.12) 50%, transparent 52%);
  pointer-events: none;
}
.poster-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffe9cf;
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  box-shadow:
    inset -2px -2px 4px rgba(0, 0, 0, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.6);
}
.poster-title {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gold-primary);
  font-size: clamp(26px, 5vw, 40px);
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  text-shadow:
    0 2px 0 #000,
    0 0 18px var(--gold-glow);
}
.poster-desc {
  display: none;
}
.poster-hint {
  display: none;
}
#btnActivate3D {
  background: linear-gradient(180deg, var(--brass-1), var(--brass-2));
  color: #1a0c02;
  border: 1px solid var(--brass-3);
  box-shadow:
    inset 1px 1px 0 rgba(255, 220, 170, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.6);
}
#btnActivate3D:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 1px 1px 0 rgba(255, 220, 170, 0.3),
    0 6px 18px rgba(0, 0, 0, 0.7);
}

/* --- Directions drawer: parchment map --------------------------------- */
.map-directions-drawer {
  background: radial-gradient(ellipse at 30% 20%, var(--parchment-1), var(--parchment-2));
  color: var(--parchment-ink);
  border: 3px solid var(--oak-2);
  border-radius: var(--radius-md);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 0 40px rgba(90, 50, 10, 0.45),
    var(--shadow-lg);
}
.drawer-top h4 {
  font-family: var(--font-heading);
  color: var(--parchment-ink);
}
.map-directions-drawer .drawer-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  color: #1a0c02;
  font-weight: 800;
  box-shadow:
    var(--bevel),
    0 2px 0 #000;
}
.directions-selector label {
  font-family: var(--font-sans);
  color: #5a4228;
  font-weight: 700;
}
.map-directions-drawer .form-select {
  background: rgba(43, 26, 12, 0.12);
  color: var(--parchment-ink);
  border: 1px solid rgba(43, 26, 12, 0.5);
  box-shadow: inset 0 2px 4px rgba(43, 26, 12, 0.25);
}
.dir-summary {
  font-family: var(--font-sans);
  color: var(--wax-red);
}
.dir-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: #3d2a16;
  border-left: 2px dashed var(--wax-red);
  padding-left: 10px;
}

/* --- Pins bar: brass pins on an oak strip ----------------------------- */

/* --- Accessible landmarks -------------------------------------------- */

/* --- 3D HUD (styles.css classes), restyled as oak/brass --------------- */
.bar {
  background: linear-gradient(160deg, var(--oak-1), var(--oak-3));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 2px solid var(--brass-3);
  box-shadow:
    var(--bevel),
    0 10px 24px rgba(0, 0, 0, 0.7);
}
.bar button {
  font-family: var(--font-sans);
  color: var(--text-main);
}
.bar button.on {
  background: linear-gradient(180deg, #ffa23d, #ff7a1a 45%, #c9500a);
  color: var(--text-on-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.6),
    0 0 12px var(--gold-glow);
}
.tag {
  background: linear-gradient(160deg, #2a1d14, #1c130d);
  color: var(--text-main);
  border: 1px solid var(--brass-3);
  font-family: var(--font-sans);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tag::after {
  background: linear-gradient(var(--brass-2), transparent);
}
.info {
  background: linear-gradient(160deg, var(--oak-1), var(--oak-3));
  color: var(--text-main);
  border: 2px solid var(--brass-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--bevel), var(--shadow-md);
}
.info h4 {
  font-family: var(--font-heading);
  color: var(--gold-primary);
}
.info .chip,
.info button {
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  color: #1a0c02;
}
.tbtn {
  background: radial-gradient(circle at 20% 15%, var(--iron-1), var(--iron-2) 60%, var(--iron-3));
  color: var(--text-main);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    var(--bevel),
    0 3px 0 #000;
}
@media (max-width: 768px) {
  .map-viewport-wrapper::before,
  .map-viewport-wrapper::after {
    display: none;
  }
}

/* ==========================================================================
   HALLOWEEN THEME LAYER · Step 7: Line-up, Sponsors, Gallery, Team (§14–§18)
   (sponsor CTA banner is hidden by the removal rule)
   ========================================================================== */

/* --- Line-up: circus bills pinned to the wall ------------------------- */

/* --- Sponsors: trophy-wall plaques ------------------------------------ */
.tier-badge {
  font-family: var(--font-sans);
  padding: 6px 22px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  color: #1a0c02;
  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.45);
  box-shadow: var(--bevel), var(--shadow-sm);
}
.sponsor-tier-block .tier-badge {
  background: linear-gradient(145deg, #ffd9a0, var(--gold-primary) 55%, #8a3a06);
  box-shadow: var(--bevel), var(--shadow-sm), var(--shadow-gold);
}
.tier-desc {
  font-family: var(--font-body);
  color: var(--text-secondary);
  font-size: 14px;
}
.sponsor-card {
  border: 2px solid var(--brass-3);
  border-radius: var(--radius-sm);
}
.sponsor-placeholder-logo {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: #090605;
  box-shadow: var(--recess);
  border: 1px dashed var(--brass-3);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.sponsor-name {
  font-family: var(--font-heading);
  color: var(--text-main);
}
.sponsor-tag {
  font-family: var(--font-sans);
  color: var(--text-secondary);
}

/* --- Gallery: pinned polaroids + CRT aftermovie ----------------------- */
.video-placeholder {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, #1a1024, #07050a 80%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.9);
}
.aftermovie-container {
  border: 14px solid var(--iron-2);
  border-radius: 28px;
  box-shadow:
    var(--bevel),
    0 0 0 2px #000,
    var(--shadow-lg);
}
.video-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  color: #ffe9cf;
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
}
.video-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gold-primary);
  text-shadow:
    0 2px 0 #000,
    0 0 16px var(--gold-glow);
}
.video-desc {
  font-family: var(--font-body);
  font-size: 16px;
}
.btn-play-video {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ffa23d, #ff7a1a 45%, #c9500a);
  color: var(--text-on-gold);
  border: 1px solid #5a2203;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.7),
    inset 0 -3px 0 rgba(90, 25, 0, 0.55),
    0 4px 0 #6b2a05,
    0 8px 18px rgba(0, 0, 0, 0.6),
    var(--shadow-gold);
}
.btn-play-video:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.5),
    0 0 0 #6b2a05;
}

.gallery-item {
  position: relative;
  background: #e9ddc4;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 10px;
  box-shadow: var(--shadow-md);
}
.gallery-item:nth-child(3n + 1) {
  transform: rotate(-1.6deg);
}
.gallery-item:nth-child(3n + 2) {
  transform: rotate(1.2deg);
}
.gallery-item:nth-child(3n) {
  transform: rotate(-0.6deg);
}
.gallery-item::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  z-index: 2;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brass-1), var(--brass-3));
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
}
.gallery-thumb-slot {
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.7);
}
.ambient-tag {
  font-family: var(--font-sans);
}

/* --- Team: exhibit cards ---------------------------------------------- */
.subgroup-title {
  position: relative;
  display: table;
  margin: 0 auto 24px;
  padding: 6px 28px;
  font-family: var(--font-heading);
  background: radial-gradient(circle at 20% 15%, var(--iron-1), var(--iron-2) 60%, var(--iron-3));
  color: var(--brass-1);
  border: 1px solid #000;
  border-radius: var(--radius-sm);
  box-shadow: var(--bevel), var(--shadow-sm);
}
.team-avatar-slot {
  background: #090605;
  border: 0;
  box-shadow:
    var(--recess),
    0 0 0 3px var(--brass-2),
    0 0 0 4px #000;
}
.avatar-initials {
  font-family: var(--font-heading);
  text-shadow: 0 0 10px var(--gold-glow);
}
.member-team-badge {
  font-family: var(--font-sans);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  color: #1a0c02;
  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.45);
}
.member-name {
  font-family: var(--font-heading);
  color: var(--text-main);
}
.member-role {
  font-family: var(--font-sans);
  font-weight: 700;
}
.member-dept {
  font-family: var(--font-body);
  color: var(--text-secondary);
  font-size: 13px;
}
.member-email {
  font-family: var(--font-sans);
  color: var(--text-main);
}
.member-email:hover {
  color: var(--gold-hover);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce), (max-width: 480px) {
  .gallery-item {
    transform: none !important;
  }
}

/* ==========================================================================
   HALLOWEEN THEME LAYER · Step 8: Register, Travel, FAQ, Contact, Footer (§19–§23)
   ========================================================================== */

/* --- Registration: admission tickets ---------------------------------- */
.ambassador-banner {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #6e0b16, #3a050b);
  border: 3px solid var(--brass-2);
  border-radius: var(--radius-md);
  box-shadow: var(--bevel), var(--shadow-md);
}
.ambassador-badge,
.featured-ribbon,
.pass-tag {
  font-family: var(--font-sans);
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  color: #ffe9cf;
  border: 1px solid #000;
  box-shadow:
    inset -1px -2px 3px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.ambassador-title {
  font-family: var(--font-heading);
  color: var(--parchment-1);
}
.ambassador-text {
  font-family: var(--font-body);
  font-size: 16px;
  color: #f3dcc0;
}
.perk-tag {
  font-family: var(--font-sans);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #000;
  box-shadow: var(--recess);
  border-radius: var(--radius-sm);
  color: var(--parchment-1);
}

.pass-tier-card {
  position: relative;
  background:
    radial-gradient(circle at 0 62%, var(--bg-dark) 0 9px, transparent 10px),
    radial-gradient(circle at 100% 62%, var(--bg-dark) 0 9px, transparent 10px),
    radial-gradient(ellipse at 30% 20%, var(--parchment-1), var(--parchment-2));
  color: var(--parchment-ink);
  border: 1px solid #000;
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 0 36px rgba(90, 50, 10, 0.45),
    var(--shadow-md);
}
.pass-tier-card::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  height: 14px;
  opacity: 0.55;
  background: repeating-linear-gradient(
    90deg,
    var(--parchment-ink) 0 2px,
    transparent 2px 4px,
    var(--parchment-ink) 4px 5px,
    transparent 5px 9px
  );
  pointer-events: none;
}
.pass-featured {
  box-shadow:
    inset 0 0 36px rgba(90, 50, 10, 0.45),
    var(--shadow-md),
    0 0 0 3px var(--gold-primary),
    var(--shadow-gold);
}
.pass-title {
  font-family: var(--font-heading);
  color: var(--parchment-ink);
}
.price-val {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--wax-red);
}
.price-period {
  color: #5a4228;
  font-family: var(--font-sans);
}
.pass-desc,
.pass-perks-list,
.pass-perks-list li {
  font-family: var(--font-body);
  font-size: 15px;
  color: #3d2a16;
}
.pass-tier-card .btn-secondary,
.pass-tier-card .btn-primary {
  position: relative;
  z-index: 1;
}

.adapter-control-panel {
  background: radial-gradient(circle at 20% 15%, var(--iron-1), var(--iron-2) 60%, var(--iron-3));
  border: 1px solid #000;
  border-radius: var(--radius-md);
  box-shadow: var(--bevel), var(--shadow-md);
}
.adapter-status,
.status-indicator {
  font-family: var(--font-sans);
  color: var(--text-main);
}

/* on-site form: ledger on an oak cover */
.onsite-form-container {
  background: radial-gradient(ellipse at 30% 20%, var(--parchment-1), var(--parchment-2));
  color: var(--parchment-ink);
  border: 10px solid var(--oak-1);
  outline: 2px solid var(--brass-3);
  outline-offset: -4px;
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 0 40px rgba(90, 50, 10, 0.45),
    var(--shadow-lg);
}
.form-kicker {
  font-family: var(--font-sans);
  color: var(--wax-red);
}
.form-title,
.step-heading {
  font-family: var(--font-heading);
  color: var(--parchment-ink);
}
.form-subtitle,
.step-note {
  font-family: var(--font-body);
  color: #4a361f;
  font-size: 15px;
}
.step-node span {
  background: #090605;
  color: var(--text-secondary);
  border: 1px solid #000;
  box-shadow: var(--recess);
}
.step-node.active span,
.step-node.completed span {
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  color: #ffe9cf;
  box-shadow:
    inset -2px -2px 4px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(255, 122, 26, 0.4);
}
.step-node.completed span {
  background: radial-gradient(circle at 35% 30%, #b5ffd2, var(--ghost) 55%, #1f8a4f);
  color: #062014;
}
.step-node small {
  font-family: var(--font-sans);
  color: #5a4228;
}
.step-node.active small {
  color: var(--wax-red);
}
.step-line {
  background: repeating-linear-gradient(90deg, var(--brass-2) 0 6px, var(--brass-3) 6px 9px);
  height: 3px;
}
.form-field label {
  font-family: var(--font-sans);
  color: #4a361f;
  font-weight: 700;
}
.form-field .req {
  color: var(--wax-red);
}
.onsite-form-container input[type='text'],
.onsite-form-container input[type='email'],
.onsite-form-container input[type='tel'],
.onsite-form-container select,
.onsite-form-container textarea,
.onsite-form-container .form-select {
  background: rgba(43, 26, 12, 0.1);
  color: var(--parchment-ink);
  border: 1px solid rgba(43, 26, 12, 0.5);
  box-shadow: inset 0 2px 5px rgba(43, 26, 12, 0.3);
}
.onsite-form-container input:focus,
.onsite-form-container select:focus,
.onsite-form-container textarea:focus {
  border-color: var(--wax-red);
  box-shadow:
    inset 0 2px 5px rgba(43, 26, 12, 0.3),
    0 0 0 2px rgba(142, 15, 28, 0.35);
}
.onsite-form-container ::placeholder {
  color: #7a6448;
}
.field-error {
  color: var(--wax-red);
  font-family: var(--font-sans);
  font-weight: 700;
}
.event-checkbox-label {
  background: rgba(43, 26, 12, 0.08);
  border: 1px solid rgba(43, 26, 12, 0.4);
  border-radius: var(--radius-sm);
  color: var(--parchment-ink);
}
.event-checkbox-label:hover {
  background: rgba(43, 26, 12, 0.16);
  border-color: var(--wax-red);
}
.event-check-text strong {
  font-family: var(--font-sans);
  color: var(--parchment-ink);
}
.event-check-text small {
  color: #5a4228;
}
.onsite-form-container input[type='checkbox'] {
  accent-color: var(--wax-red);
}
.review-summary-card {
  background: rgba(43, 26, 12, 0.08);
  border: 1px dashed rgba(43, 26, 12, 0.5);
  border-radius: var(--radius-sm);
}
.review-row {
  border-bottom: 1px dashed rgba(43, 26, 12, 0.35);
}
.review-row strong {
  font-family: var(--font-sans);
  color: #4a361f;
}
.review-row span {
  font-family: var(--font-mono);
  color: var(--parchment-ink);
}
.consent-checkbox-label {
  color: #3d2a16;
  font-family: var(--font-body);
}
.onsite-form-container .btn-secondary {
  color: var(--text-main);
}

/* --- Travel: luggage-label cards -------------------------------------- */
.travel-card {
  position: relative;
  border: 1px solid #000;
}
.travel-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 34px;
  width: 8px;
  background: linear-gradient(90deg, #1b0f08, #3a2314 50%, #1b0f08);
  box-shadow: 0 0 0 1px #000;
  opacity: 0.7;
  pointer-events: none;
}
.transit-badge {
  font-family: var(--font-sans);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  color: #1a0c02;
  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.45);
  box-shadow: var(--bevel), var(--shadow-sm);
}
.transit-title {
  font-family: var(--font-heading);
  color: var(--text-main);
}
.transit-desc {
  font-family: var(--font-body);
  font-size: 15px;
}
.transit-meta {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.guideline-card {
  background: #0d0907;
  border: 1px solid #000;
  border-left: 4px solid var(--orange-accent);
  box-shadow: var(--recess);
  border-radius: var(--radius-sm);
}
.card-headline {
  font-family: var(--font-heading);
  color: var(--text-main);
}
.guideline-card p,
.card-note,
.rules-bullet-list {
  font-family: var(--font-body);
  font-size: 15px;
}
.travel-map-cta {
  position: relative;
  background: linear-gradient(160deg, var(--oak-1), var(--oak-3));
  border: 3px solid var(--brass-3);
  border-radius: var(--radius-sm) 28px 28px var(--radius-sm);
  box-shadow: var(--bevel), var(--shadow-md);
}
.travel-map-cta h4 {
  font-family: var(--font-heading);
  color: var(--gold-primary);
}
.travel-map-cta p {
  font-family: var(--font-body);
}

/* --- FAQ: pull-out drawers -------------------------------------------- */
.faq-cat-btn.active {
  background: linear-gradient(180deg, #ffa23d, #ff7a1a 45%, #c9500a);
  color: var(--text-on-gold);
  border: 1px solid #5a2203;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.7),
    0 3px 0 #6b2a05,
    var(--shadow-gold);
}
.faq-item {
  background: linear-gradient(160deg, var(--oak-1), var(--oak-2) 55%, var(--oak-3));
  border: 1px solid #000;
  border-radius: var(--radius-sm);
  box-shadow: var(--bevel), var(--shadow-sm);
  overflow: hidden;
}
.faq-item.open {
  box-shadow:
    var(--bevel),
    var(--shadow-md),
    0 0 16px rgba(255, 122, 26, 0.22);
}
.faq-question-btn {
  min-height: 48px;
  color: var(--text-main);
}
.faq-question-text {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-main);
}
.faq-cat-badge {
  font-family: var(--font-sans);
  color: var(--ghost);
}
.faq-chevron {
  color: var(--brass-1);
  filter: drop-shadow(0 1px 0 #000);
}
.faq-answer-panel {
  background: #090605;
  box-shadow: var(--recess);
  border-top: 2px solid #000;
}
.faq-answer-text {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text-main);
}

/* --- Contact: writing desk -------------------------------------------- */
.contact-info-card {
  background: radial-gradient(circle at 20% 15%, var(--iron-1), var(--iron-2) 60%, var(--iron-3));
  border: 1px solid #000;
  box-shadow: var(--bevel), var(--shadow-md);
}
.info-card-text {
  font-family: var(--font-body);
  font-size: 15px;
}
.channel-icon {
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  border: 1px solid #000;
  box-shadow: var(--bevel);
  color: #1a0c02;
}
.channel-label {
  font-family: var(--font-sans);
  color: var(--text-secondary);
}
.channel-value {
  font-family: var(--font-sans);
  color: var(--text-main);
}
.channel-value:hover {
  color: var(--gold-hover);
}
.socials-label {
  font-family: var(--font-sans);
}
.social-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  color: #1a0c02;
  border: 1px solid #000;
  box-shadow:
    var(--bevel),
    0 3px 0 #000;
}
.social-btn:hover {
  box-shadow:
    var(--bevel),
    0 3px 0 #000,
    var(--shadow-gold);
}
.contact-form-card {
  background: radial-gradient(ellipse at 30% 20%, var(--parchment-1), var(--parchment-2));
  color: var(--parchment-ink);
  border: 8px solid var(--oak-1);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 0 40px rgba(90, 50, 10, 0.45),
    var(--shadow-md);
}
.form-card-title {
  font-family: var(--font-heading);
  color: var(--parchment-ink);
}
.contact-form-card label {
  font-family: var(--font-sans);
  color: #4a361f;
  font-weight: 700;
}
.contact-form-card input[type='text'],
.contact-form-card input[type='email'],
.contact-form-card input[type='tel'],
.contact-form-card select,
.contact-form-card textarea {
  background: rgba(43, 26, 12, 0.1);
  color: var(--parchment-ink);
  border: 1px solid rgba(43, 26, 12, 0.5);
  box-shadow: inset 0 2px 5px rgba(43, 26, 12, 0.3);
}
.contact-form-card ::placeholder {
  color: #7a6448;
}
.contact-form-card .btn-primary {
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  color: #ffe9cf;
  text-shadow: 0 1px 0 #000;
  border: 1px solid #000;
  box-shadow:
    inset -2px -3px 5px rgba(0, 0, 0, 0.55),
    inset 2px 2px 3px rgba(255, 150, 150, 0.35),
    0 4px 0 #2a0308,
    0 8px 14px rgba(0, 0, 0, 0.55);
}
.contact-form-card .field-error {
  color: var(--wax-red);
}
.contact-form-card .consent-checkbox-label,
.contact-form-card p {
  color: #3d2a16;
}

/* Step 8 fixes */
.pass-tag {
  display: inline-block;
  width: fit-content;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}
.social-btn {
  width: auto;
  min-width: 44px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-info-card h3,
.contact-info-card h4 {
  font-family: var(--font-heading);
  color: var(--text-main);
}
.travel-card::before {
  content: none;
}

/* ==========================================================================
   HALLOWEEN THEME LAYER · Step 9: toasts, satellite pages, final pass (§24–§25)
   ========================================================================== */

/* Toast: wax-sealed note */
.toast-notification {
  background: linear-gradient(160deg, #2a1d14, #120c09);
  border: 1px solid #000;
  border-left: 6px solid var(--brass-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  color: var(--text-main);
  padding: 12px 20px 12px 44px;
  box-shadow: var(--bevel), var(--shadow-md);
}
.toast-notification::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  box-shadow:
    inset -1px -2px 3px rgba(0, 0, 0, 0.5),
    0 2px 3px rgba(0, 0, 0, 0.6);
}
.toast-success {
  border-left-color: var(--ghost);
  box-shadow:
    var(--bevel),
    var(--shadow-md),
    0 0 14px var(--ghost-glow);
}
.toast-success::before {
  background: radial-gradient(circle at 35% 30%, #b5ffd2, var(--ghost) 55%, #1f8a4f);
}

/* Print: restore a light, flat page */
@media print {
  html {
    background: #fff !important;
  }
  body::before,
  body::after,
  .section::before,
  .hero-section::before,
  .hero-section::after {
    display: none !important;
  }
  .glass-panel,
  .mat-oak,
  .about-card,
  .plan-card,
  .pass-tier-card,
  .lu-card,
  .faq-item {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
}

/* All section titles stay on one line at every width */
.section-header {
  max-width: min(100%, 1100px);
}
.section-title {
  white-space: nowrap;
  font-size: clamp(12px, 3.6vw, 44px);
}
@media (max-width: 600px) {
  #about .section-title {
    white-space: normal;
    font-size: clamp(18px, 6vw, 28px);
  }
}
@media (min-width: 601px) {
  #about .section-title {
    font-size: clamp(18px, 3vw, 36px);
  }
}

.section-header {
  position: relative;
}
.section > .container {
  position: relative;
}

/* ==========================================================================
   NAVBAR 2 · haunted-carnival header: cobweb, bunting, bats, pumpkin CTA
   ========================================================================== */
.site-header {
  background:
    radial-gradient(ellipse 340px 90px at 100% 0, rgba(255, 122, 26, 0.16), transparent 70%),
    radial-gradient(ellipse 420px 90px at 0 0, rgba(125, 255, 176, 0.07), transparent 70%),
    linear-gradient(180deg, #26212c, #0d0b12);
  border-bottom: 3px solid var(--brass-2);
  overflow: visible;
}

/* Brand: lantern-lit wordmark */
.brand-wordmark {
  filter: drop-shadow(0 0 10px rgba(255, 122, 26, 0.55));
}
.brand-link {
  position: relative;
}

.nav-link.active {
  text-shadow: 0 0 10px rgba(255, 122, 26, 0.55);
}

/* Plan badge */
.btn-plan-badge .icon-plan {
  color: var(--wax-red);
}

/* ==========================================================================
   HEADER CTAs · "My Plan" = leather grimoire, "Register" = carved pumpkin
   (replaces the earlier brass-tag / lacquer-button look)
   ========================================================================== */

/* --- My Plan: spellbook with brass spine + clasp ---------------------- */
.header-actions .btn-plan-badge {
  position: relative;
  height: 40px;
  padding: 0 16px 0 24px;
  gap: 8px;
  border-radius: 4px 12px 12px 4px;
  border: 1px solid #000;
  color: var(--parchment-1);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
  background:
    linear-gradient(
      90deg,
      var(--brass-2) 0 3px,
      #0a0503 3px 4px,
      var(--brass-3) 4px 9px,
      #0a0503 9px 10px,
      transparent 10px
    ),
    radial-gradient(ellipse at 60% 0, rgba(255, 200, 140, 0.14), transparent 65%),
    linear-gradient(180deg, #43251a, #1c0f09);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 3px 0 #000,
    0 8px 14px rgba(0, 0, 0, 0.55);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
/* brass clasp on the open edge */
.header-actions .btn-plan-badge::before {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 18px;
  margin-top: -9px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brass-1), var(--brass-3));
  box-shadow:
    0 0 0 1px #000,
    0 2px 3px rgba(0, 0, 0, 0.6);
}
.header-actions .btn-plan-badge .icon-plan {
  color: var(--ghost);
  font-size: 14px;
  text-shadow:
    0 0 8px var(--ghost),
    0 0 2px #fff;
  transition: transform 0.4s ease;
}
.header-actions .btn-plan-badge .badge-text {
  color: var(--parchment-1);
}
.header-actions .btn-plan-badge:hover {
  background:
    linear-gradient(
      90deg,
      var(--brass-2) 0 3px,
      #0a0503 3px 4px,
      var(--brass-3) 4px 9px,
      #0a0503 9px 10px,
      transparent 10px
    ),
    radial-gradient(ellipse at 60% 0, rgba(125, 255, 176, 0.22), transparent 65%),
    linear-gradient(180deg, #4d2b1e, #20110a);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 5px 0 #000,
    0 10px 18px rgba(0, 0, 0, 0.55),
    0 0 16px var(--ghost-glow);
}
.header-actions .btn-plan-badge:hover .icon-plan {
  transform: rotate(72deg) scale(1.15);
}
.header-actions .btn-plan-badge:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.2),
    0 0 0 #000;
}
/* saved-events counter: wax seal pinned to the corner */
.header-actions .btn-plan-badge .plan-count {
  position: absolute;
  top: -9px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: #ffe9cf;
  background: radial-gradient(circle at 35% 30%, var(--wax-red-hi), var(--wax-red) 60%, #4a0610);
  box-shadow:
    inset -1px -2px 3px rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.7);
}

/* --- Register: orange pill --------------------------------------------- */
.header-actions #navRegisterBtn {
  height: 42px;
  padding: 0 38px;
  border-radius: 999px;
  border: 2px solid #5a2203;
  color: #2a0f02;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: radial-gradient(ellipse at 50% 25%, #ffb857, #ff7a1a 55%, #b8460a);
  box-shadow:
    inset 0 2px 0 rgba(255, 235, 200, 0.5),
    0 4px 0 #6b2a05,
    0 8px 14px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
.header-actions #navRegisterBtn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.header-actions #navRegisterBtn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 235, 200, 0.4),
    0 1px 0 #6b2a05;
}

@media (min-width: 1200px) and (max-width: 1359px) {
  .header-actions .btn-plan-badge {
    padding: 0 12px 0 20px;
    font-size: 11px;
  }
  .header-actions #navRegisterBtn {
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 0.1em;
  }
}
/* Wider header row for the redesigned CTAs; hamburger below 1320px */
.site-header .header-inner {
  max-width: 1480px;
}
@media (max-width: 1319px) {
  .desktop-nav {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
}
@media (min-width: 1320px) and (max-width: 1459px) {
  .site-header .header-inner {
    gap: 10px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .nav-links {
    gap: 4px;
  }
  .nav-link {
    font-size: 11px;
    letter-spacing: 0.03em;
    padding: 6px 5px;
  }
  .header-actions {
    gap: 10px;
  }
  .header-actions .btn-plan-badge {
    padding: 0 10px 0 18px;
    font-size: 10.5px;
    letter-spacing: 0.05em;
  }
  .header-actions #navRegisterBtn {
    padding: 0 28px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
}

/* --- Gallery marquee + lightbox --------------------------------------- */
.gallery-marquee {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  padding: 14px 0;
}
.marquee-row {
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee-left 60s linear infinite;
}
.marquee-right .marquee-track {
  animation-name: marquee-right;
}
.marquee-track:has(.gallery-item:hover) {
  animation-play-state: paused;
}
.marquee-track .gallery-item {
  width: 280px;
  flex: none;
  margin-right: 18px;
} /* margin, not gap: the -50% loop must land exactly on a repeat */
@keyframes marquee-left {
  to {
    transform: translateX(-50%);
  }
}
@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
.gallery-view {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  cursor: var(--cur-hover);
  background: rgba(7, 5, 10, 0.55);
  color: var(--gold-primary);
  font: 800 14px var(--font-sans);
  letter-spacing: 0.24em;
  opacity: 0;
  transition: opacity 0.2s;
}
.gallery-item:hover .gallery-view,
.gallery-view:focus-visible {
  opacity: 1;
}
.gallery-lightbox {
  border: 1px solid #000;
  border-radius: 8px;
  padding: 16px;
  background: #e9ddc4;
  width: min(92vw, 760px);
}
.gallery-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.8);
}
.lightbox-art {
  aspect-ratio: 16/10;
  display: grid;
  place-content: center;
  text-align: center;
}
.lightbox-art .ambient-num {
  font-size: 64px;
  display: block;
}
.lightbox-caption {
  margin: 12px 0 0;
  font: italic 18px var(--font-body);
  color: var(--parchment-ink);
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: var(--cur-hover);
  background: #000a;
  color: #fff;
}
.gallery-section {
  overflow-x: clip;
}
.gallery-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.sponsors-tiered-wall {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.sponsor-tier-block {
  flex: 1 1 320px;
  max-width: 480px;
}

/* --- Contact redesign: slim info card + compact form ------------------ */
.contact-grid {
  align-items: start;
  gap: 20px;
}
@media (min-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr 2fr;
  }
}
.contact-info-card,
.contact-form-card {
  padding: 20px 24px;
}
.contact-channels {
  margin-bottom: 16px;
}
.contact-socials-box .socials-links-row {
  flex-wrap: wrap;
}
.contact-form {
  gap: 12px;
}
.form-card-title,
.info-card-title {
  margin-bottom: 12px;
}
.contact-form .form-field {
  margin-bottom: 0;
}
.contact-form {
  display: flex;
  flex-direction: column;
}
.contact-form .form-row {
  margin-bottom: 0;
}
@media (min-width: 600px) {
  .contact-form .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Contact v3: one centred card, contact strip on top --------------- */
.contact-grid {
  grid-template-columns: 1fr !important;
  max-width: 720px;
  margin: 0 auto;
}
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(74, 54, 31, 0.35);
}
.contact-strip-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 15px var(--font-sans);
  color: var(--parchment-ink);
  text-decoration: none;
}
.contact-strip-mail:hover {
  color: var(--wax-red);
}
.contact-strip-socials {
  display: flex;
  gap: 8px;
}
.contact-chip {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 800 14px var(--font-sans);
  text-decoration: none;
  color: #1a0c02;
  border: 1px solid #000;
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
  box-shadow:
    var(--bevel),
    0 2px 0 #000;
}
.contact-chip:hover {
  box-shadow:
    var(--bevel),
    0 2px 0 #000,
    var(--shadow-gold);
}
.contact-chip svg {
  display: block;
}

/* ==========================================================================
   HERO v2 · two-column: identity left, notice board right
   ========================================================================== */
.hero-section {
  justify-content: flex-start;
}
.hero-content {
  display: block;
  width: 100%;
}
.hx-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  text-align: left;
}
@media (min-width: 960px) {
  .hx-grid {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 56px;
  }
}
.hx-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font: 700 12px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hx-eyebrow::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-primary), transparent);
}
.hx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-primary);
  box-shadow: 0 0 10px var(--gold-primary);
}
.hx-wordmark {
  display: block;
  width: min(100%, 560px);
  height: auto;
  filter: drop-shadow(0 0 22px rgba(255, 122, 26, 0.55));
}
.hx-tagline {
  margin: 10px 0 28px;
  font: italic 20px/1.4 var(--font-body);
  color: var(--text-main);
  max-width: 34ch;
}
.hx-facts {
  display: grid;
  gap: 0;
  margin: 0 0 30px;
  padding: 0;
  border-left: 3px solid var(--gold-primary);
}
.hx-facts div {
  display: flex;
  gap: 16px;
  padding: 8px 0 8px 16px;
}
.hx-facts dt {
  flex: 0 0 72px;
  font: 800 11px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-primary);
  padding-top: 3px;
}
.hx-facts dd {
  margin: 0;
  font: 600 15px var(--font-sans);
  color: var(--text-main);
}
.hx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.hx-actions .hero-countdown-container {
  margin: 0;
}
.hx-board {
  padding: 22px 24px;
  background: linear-gradient(160deg, #e9ddc4, #d4c298);
  color: var(--parchment-ink);
  border: 6px solid var(--oak-1);
  border-radius: 4px;
  box-shadow:
    inset 0 0 30px rgba(90, 50, 10, 0.45),
    var(--shadow-md);
  transform: rotate(1.4deg);
}
.hx-board-title {
  margin: 0 0 12px;
  font: 700 20px var(--font-heading);
  color: var(--parchment-ink);
}
.hx-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hx-board-list a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(74, 54, 31, 0.45);
}
.hx-board-list li:last-child a {
  border-bottom: 0;
  padding-bottom: 0;
}
.hx-tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  font: 800 10px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--wax-red);
  border-radius: 2px;
}
.hx-text {
  display: block;
  font: 15px/1.45 var(--font-body);
}
.hx-board-list a:hover .hx-text {
  color: var(--wax-red);
}
@media (max-width: 959px) {
  .hx-board {
    transform: none;
  }
}
@media (max-width: 480px) {
  .hx-facts div {
    flex-direction: column;
    gap: 2px;
  }
  .hx-actions .btn-lg {
    width: 100%;
    justify-content: center;
  }
}
.hero-content::before {
  left: 52%;
  height: 70px;
}
@media (max-width: 480px) {
  .hx-facts dt {
    flex: none;
    padding-top: 0;
  }
  .hx-facts div {
    padding: 6px 0 6px 14px;
  }
}

/* ==========================================================================
   HERO v3 · wordmark over a full-bleed background video, nothing else
   ========================================================================== */
.hero-section {
  justify-content: center;
  padding: 0;
  background: #07050a;
}
.hero-mesh {
  z-index: 1;
}
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hero-content::before,
.hero-content::after {
  display: none;
} /* no dangling spiders */
.hero-section .hero-wordmark-img {
  z-index: 2;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Understated glass pill so the video and wordmark stay the focus */
.hero-trailer-btn {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 600 12px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.hero-trailer-btn:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--gold-primary);
}
.hero-section .hero-wordmark-img {
  position: relative;
  z-index: 1;
  width: min(80vw, 640px);
  height: auto;
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 22px rgba(255, 122, 26, 0.55));
}

/* Big countdown in the clear sky above the dome */
.hero-ignite {
  position: absolute;
  z-index: 3;
  top: clamp(24px, 6vh, 64px);
  left: 50%;
  transform: translateX(-50%);
}
.hero-ignite .ft-ignite-label {
  margin-bottom: 14px;
  font-size: clamp(14px, 1.6vw, 22px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
.hero-ignite .ft-ignite-row {
  gap: clamp(8px, 1.4vw, 18px);
}
.hero-ignite .ft-ignite-row span {
  min-width: clamp(64px, 9vw, 128px);
  padding: clamp(10px, 1.6vw, 20px) 6px clamp(8px, 1.2vw, 14px);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hero-ignite .ft-ignite-row small {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.hero-ignite .ft-ignite-row b {
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(255, 150, 40, 0.8);
  font-size: clamp(30px, 5.2vw, 76px);
}
.hero-ignite .ft-ignite-row small {
  font-size: clamp(9px, 1vw, 13px);
}

/* Navbar + mobile dock stay hidden over the hero */
.site-header,
.mobile-bottom-dock {
  transition: transform 0.35s ease;
}
body.on-hero .site-header {
  transform: translateY(-130%);
}
body.on-hero .mobile-bottom-dock {
  transform: translateY(130%);
}
.hero-section::before,
.hero-section::after {
  top: 0;
} /* navbar is hidden over the hero */
.hero-section .hero-wordmark-img {
  width: min(92vw, 1100px);
}
.hero-section .hero-wordmark-img {
  transform: translateX(6.45%);
} /* new logo art sits left of its canvas centre; nudge the lettering to the page centre */
.gallery-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lightbox-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Marquees run forever, even with reduced-motion on (the global reduced-motion rule would freeze them) */
.gallery-marquee .marquee-track {
  animation-duration: 60s !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running;
}
.gallery-marquee .marquee-track:has(.gallery-item:hover) {
  animation-play-state: paused;
}

/* --- Timeline v3: one wide card, events tagged by phase --------------- */
.phase-card {
  position: relative;
  padding: 30px 30px 26px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(165deg, #1c1420, #0d0a12);
  border: 1px solid var(--gold-primary);
  box-shadow:
    inset 0 0 40px rgba(255, 122, 26, 0.12),
    0 0 28px rgba(255, 122, 26, 0.25),
    0 14px 30px rgba(0, 0, 0, 0.55);
}
.phase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 2px solid #000;
  box-shadow: 0 1px 0 rgba(255, 190, 120, 0.1);
}
.phase-title {
  margin: 0;
  font: 700 34px/1.1 var(--font-heading);
  background: linear-gradient(180deg, #ffd27a, #ff7a1a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.phase-card {
  max-width: 720px;
  margin-inline: auto;
}
.phase-card::before,
.phase-card::after {
  /* full rangoli centred on a corner (the card clips it to a quarter), spinning in opposite directions */
  --s: 170px;
  content: '';
  position: absolute;
  z-index: 0;
  width: calc(var(--s) * 2);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.4;
  background: url('assets/elements/rangoli-full.svg') center / contain no-repeat;
}
.phase-card::before {
  top: calc(var(--s) * -1);
  left: calc(var(--s) * -1);
  animation: rangoli-cw 90s linear infinite;
}
.phase-card::after {
  bottom: calc(var(--s) * -1);
  right: calc(var(--s) * -1);
  animation: rangoli-ccw 90s linear infinite;
}
.phase-card > * {
  position: relative;
  z-index: 1;
} /* keep the text above the rangolis */
@media (prefers-reduced-motion: reduce) {
  .phase-card::before,
  .phase-card::after {
    animation: none;
  }
}
.phase-events {
  margin: 0;
  padding: 0;
  list-style: none;
}
.phase-events + .phase-events {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid rgba(255, 179, 71, 0.3);
}
.phase-events li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  font: 17px/1.35 var(--font-body);
  color: var(--text-main);
  border-bottom: 1px dashed rgba(201, 160, 90, 0.25);
  transition:
    transform 0.2s,
    color 0.2s;
}
.phase-time {
  flex: none;
  min-width: 52px;
  font: 800 14px var(--font-sans);
  letter-spacing: 0.08em;
  color: var(--gold-primary);
}
.phase-mins {
  flex: none;
  font: 700 12px var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.phase-events li:hover {
  transform: translateX(6px);
  color: #fff;
}
.phase-name {
  flex: 1;
}

/* Developers section: ID-pass cards */
.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 260px));
  justify-content: center;
  gap: 26px;
}
.dev-pass {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 44px 20px 0;
  text-align: center;
  border-radius: 18px;
  border: 1px solid #3a2a14;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 122, 26, 0.22), transparent 60%),
    linear-gradient(170deg, #1d1522, #0e0a12 75%);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.1),
    0 14px 30px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}
.dev-pass::after {
  content: attr(data-no);
  position: absolute;
  right: 14px;
  top: 24px;
  font: 900 64px/1 var(--font-heading);
  color: rgba(255, 179, 71, 0.06);
  pointer-events: none;
}
.dev-slot {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 54px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #050308;
  box-shadow:
    inset 0 1px 3px #000,
    0 1px 0 rgba(255, 190, 120, 0.2);
}
.dev-ring {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  margin-bottom: 18px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 200deg, #ffd27a, #ff7a1a, #7a2a08, #ffd27a);
  box-shadow: 0 0 22px rgba(255, 122, 26, 0.45);
}
.dev-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.dev-ring span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #120c16;
  font: 700 36px var(--font-heading);
  color: #ffd27a;
  letter-spacing: 0.04em;
}
.dev-name {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 2.3em;
  margin: 0 0 26px;
  font: 700 22px/1.15 var(--font-heading);
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff1d2, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dev-role {
  position: relative;
  margin: -16px 0 22px;
  font: 800 11px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.dev-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: calc(100% + 40px);
  margin: auto -20px 0;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.34);
  border-top: 1px dashed rgba(201, 160, 90, 0.35);
}
.dev-tag {
  font: 800 10px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.member-links {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}
.member-link {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #1a0c02;
  background: linear-gradient(145deg, var(--brass-1), var(--brass-2));
  border: 1px solid #000;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.member-link:hover {
  transform: scale(1.12);
  box-shadow: 0 0 14px rgba(255, 122, 26, 0.6);
}

/* Sponsor logos sit on a light plate so transparent brand marks stay legible on the dark card */
.sponsor-card {
  min-width: min(340px, 100%);
  padding: 24px 28px;
}
.sponsor-logo-box:has(.sponsor-logo) {
  /* same plate size for every sponsor; each logo scales to fit inside it */
  display: grid;
  place-items: center;
  width: min(300px, 100%);
  height: 120px;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  margin-bottom: 14px;
  box-sizing: border-box;
}
.sponsor-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sponsor-name {
  font-size: 17px;
}
.sponsor-tag {
  font-size: 12px;
}

/* Team cards: stack role / dept / email and centre them */
.team-info {
  text-align: center;
}
.team-info .member-role,
.team-info .member-dept,
.team-info .member-email {
  display: block;
}

/* Section ticks on the scroll rail (replace the header nav links) */
.scroll-rail-mark {
  position: absolute;
  left: -3px;
  right: -3px;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: #8a6a32;
  border: 1px solid #07050a;
  z-index: 1;
}
.scroll-rail-mark.active {
  background: #ff7a1a;
  box-shadow: 0 0 8px rgba(255, 122, 26, 0.9);
}
.scroll-rail-mark::after {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font: 700 12px/1.4 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd9a0;
  background: #07050a;
  border: 1px solid #8a6a32;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.scroll-rail-mark:hover::after,
.scroll-rail-mark:focus-visible::after {
  opacity: 1;
}
.scroll-rail-knob {
  pointer-events: none;
  z-index: 2;
}

/* Navigation lives on the scroll rail everywhere: no header bar, hamburger drawer or bottom dock */
.site-header,
.mobile-drawer,
.mobile-drawer-backdrop,
.mobile-bottom-dock {
  display: none !important;
}
:root {
  --header-height: 0px;
  --dock-height: 0px;
}
.scroll-rail {
  top: 24px;
}
.scroll-rail-mark.active::after {
  color: #1a0c02;
  background: #ff7a1a;
  border-color: #ffd9a0;
}
.scroll-rail.awake .scroll-rail-mark.active::after,
.scroll-rail:hover .scroll-rail-mark.active::after {
  opacity: 1;
}
.scroll-rail-mark.active::after {
  transition: opacity 0.4s;
}
@media (max-width: 768px) {
  .scroll-rail {
    width: 14px;
    right: 4px;
    bottom: 24px;
  }
  .scroll-rail-mark {
    height: 10px;
    margin-top: -5px;
  }
}

/* Faculty cards: centre the row instead of leaving empty grid tracks on the right */
.faculty-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.faculty-grid .team-card {
  flex: 0 1 300px;
}

/* ==========================================================================
   Footer: glowing top edge, brand + socials band, link columns, legal strip
   ========================================================================== */
.site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-top: 0;
  padding: 0 0 var(--dock-height);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 122, 26, 0.14), transparent 60%), #07050a;
}
.site-footer::before {
  /* glowing edge */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #ff7a1a 30%,
    #ffd27a 50%,
    #ff7a1a 70%,
    transparent
  );
  box-shadow: 0 0 18px rgba(255, 122, 26, 0.7);
}
.site-footer > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ft-grid {
  margin-block: auto;
}
.ft-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 48px 0 36px;
  border-bottom: 1px dashed rgba(201, 160, 90, 0.3);
}
.ft-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 560px;
  text-decoration: none;
}
.ft-logo {
  flex: none;
  width: 150px;
  height: auto;
  filter: drop-shadow(0 0 14px rgba(255, 122, 26, 0.5));
}
.ft-tagline {
  margin: 0;
  font: italic 16px/1.5 var(--font-body);
  color: var(--text-secondary);
}
.ft-social {
  display: flex;
  gap: 10px;
}
.ft-social a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #ffd27a;
  text-decoration: none;
  background: #120c16;
  border: 1px solid #3a2a14;
  transition:
    transform 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.ft-social a:hover {
  transform: translateY(-3px);
  color: #fff;
  border-color: var(--gold-primary);
  box-shadow: 0 0 18px rgba(255, 122, 26, 0.55);
}
.ft-social svg {
  display: block;
}
.ft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 28px;
  padding: 32px 0 40px;
}
@media (max-width: 1000px) {
  .ft-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .ft-grid {
    grid-template-columns: 1fr;
  }
}
.ft-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ft-ignite {
  text-align: center;
}
.ft-ignite-label {
  display: block;
  margin-bottom: 10px;
  font: 700 13px var(--font-heading);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.ft-ignite-row {
  display: flex;
  gap: 10px;
}
.ft-ignite-row span {
  display: grid;
  min-width: 62px;
  padding: 10px 6px 8px;
  border-radius: 12px;
  border: 1px solid #3a2a14;
  background: linear-gradient(180deg, #2a1608, #0e0a12);
  box-shadow: 0 0 16px rgba(255, 122, 26, 0.25);
}
.ft-ignite-row b {
  font: 700 26px/1 var(--font-heading);
  font-variant-numeric: tabular-nums;
  color: #ffd27a;
  text-shadow: 0 0 10px rgba(255, 150, 40, 0.8);
}
.ft-ignite-row small {
  margin-top: 5px;
  font: 600 10px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ft-top {
  font: 600 13px var(--font-sans);
  color: var(--gold-primary);
  text-decoration: none;
}
.ft-top:hover {
  color: #fff;
}
.ft-title {
  margin: 0 0 14px;
  font: 700 15px var(--font-heading);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.ft-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}
.ft-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font: 600 14px var(--font-sans);
  color: var(--text-secondary);
  text-decoration: none;
  transition:
    color 0.2s,
    transform 0.2s;
}
.ft-links a::before {
  content: '›';
  color: #ff7a1a;
  font-weight: 800;
}
.ft-links a:hover {
  color: #fff;
  transform: translateX(3px);
}
.ft-address {
  position: relative;
  margin: 0;
  padding: 20px 22px 20px 26px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #3a2a14;
  font-style: normal;
  font: 15px/1.6 var(--font-body);
  color: var(--text-secondary);
  background: linear-gradient(160deg, #1d1522, #0e0a12 70%);
}
.ft-address::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ffd27a, #ff7a1a 60%, #7a2a08);
}
.ft-address strong {
  display: block;
  margin-bottom: 4px;
  font: 700 17px var(--font-heading);
  color: var(--text-main);
}
.ft-address a {
  color: #ff9a3c;
  text-decoration: none;
  font-weight: 600;
}
.ft-address a:hover {
  color: #fff;
}
.ft-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px 28px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 190, 120, 0.12);
  font: 13px var(--font-sans);
  color: var(--text-secondary);
}
.ft-legal {
  display: flex;
  gap: 6px 18px;
  flex-wrap: wrap;
}
.ft-legal button {
  padding: 0;
  background: none;
  border: 0;
  min-width: 0;
  min-height: 0;
  font: 600 13px var(--font-sans);
  color: var(--text-secondary);
  cursor: var(--cur-hover);
}
.ft-legal button:hover {
  color: #fff;
  text-decoration: underline;
}
.ft-copy {
  margin: 0;
  text-align: right;
}
.ft-copy span {
  display: block;
  margin-top: 3px;
  color: var(--gold-primary);
}
@media (max-width: 820px) {
  .ft-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ft-address {
    grid-column: 1 / -1;
  }
  .ft-copy {
    text-align: left;
  }
}
@media (max-width: 520px) {
  .ft-grid {
    grid-template-columns: 1fr;
  }
  .ft-brand {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Policy dialogs (Privacy, Terms, Code of Conduct)
   ========================================================================== */
.lg-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4, 2, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.lg-backdrop.on {
  opacity: 1;
  pointer-events: auto;
}
.lg-dialog {
  position: fixed;
  z-index: 1001;
  left: 50%;
  top: 50%;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  overflow-y: auto;
  padding: 34px 34px 0 40px;
  border-radius: 16px;
  border: 1px solid var(--gold-primary);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255, 122, 26, 0.18), transparent 55%),
    linear-gradient(160deg, #1d1522, #0e0a12 75%);
  box-shadow:
    0 0 40px rgba(255, 122, 26, 0.25),
    0 24px 60px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.97);
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.lg-dialog[hidden] {
  display: none;
}
.lg-dialog.open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.lg-dialog::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #ffd27a, #ff7a1a 60%, #7a2a08);
}
.lg-icon {
  position: absolute;
  right: 22px;
  top: 54px;
  font-size: 96px;
  line-height: 1;
  opacity: 0.08;
  pointer-events: none;
}
.lg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.lg-kicker {
  display: block;
  margin-bottom: 8px;
  font: 800 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.lg-title {
  margin: 0;
  font: 700 clamp(26px, 5vw, 34px)/1.1 var(--font-heading);
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff1d2, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lg-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  cursor: var(--cur-hover);
  font-size: 15px;
  color: #ffd27a;
  background: #120c16;
  border: 1px solid #3a2a14;
  transition:
    transform 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.lg-close:hover {
  transform: rotate(90deg);
  color: #fff;
  border-color: var(--gold-primary);
}
.lg-points {
  position: relative;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: lg;
}
.lg-points li {
  counter-increment: lg;
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  font: 16px/1.55 var(--font-body);
  color: #eadfce;
  border-bottom: 1px dashed rgba(201, 160, 90, 0.25);
}
.lg-points li:first-child {
  border-top: 1px dashed rgba(201, 160, 90, 0.25);
}
.lg-points li::before {
  content: counter(lg, decimal-leading-zero);
  flex: none;
  font: 800 12px var(--font-sans);
  letter-spacing: 0.1em;
  color: #ff7a1a;
}
.lg-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 26px -34px 0 -40px;
  padding: 16px 34px 18px 40px;
  background: rgba(0, 0, 0, 0.34);
  border-top: 1px solid rgba(255, 190, 120, 0.15);
}
.lg-foot small {
  font: 700 11px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
@media (max-width: 480px) {
  .lg-dialog {
    padding: 28px 20px 0 26px;
  }
  .lg-foot {
    margin: 22px -20px 0 -26px;
    padding: 14px 20px 16px 26px;
  }
  .lg-foot small {
    display: none;
  }
  .lg-foot .btn-primary {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lg-dialog,
  .lg-backdrop {
    transition: none;
  }
}

/* ==========================================================================
   Cultural elements (SVGs in assets/elements): rangoli corners, diyas, butterfly knob
   ========================================================================== */
.section {
  overflow: clip;
} /* the spinning mandalas below are centred on the corners, so clip them to the section */
.section::after,
.rangoli-bl {
  /* full rangoli centred on a corner, only the quarter inside the section shows */
  --s: clamp(80px, 11vw, 160px);
  content: '';
  position: absolute;
  width: calc(var(--s) * 2);
  aspect-ratio: 1;
  pointer-events: none;
  background: url('assets/elements/rangoli-full.svg') center / contain no-repeat;
  opacity: 0.4;
}
.section::after {
  top: calc(12px - var(--s));
  right: calc(var(--s) * -1);
  animation: rangoli-ccw 90s linear infinite;
} /* top-right, anticlockwise */
.rangoli-bl {
  bottom: calc(12px - var(--s));
  left: calc(var(--s) * -1);
  animation: rangoli-cw 90s linear infinite;
} /* bottom-left, clockwise */
.contact-section .rangoli-bl {
  bottom: calc(var(--s) * -1);
} /* centre exactly on the bottom edge so it meets the footer as a clean quarter circle, not a sliver-cut one */
@media (prefers-reduced-motion: reduce) {
  .section::after,
  .rangoli-bl {
    animation: none;
  }
}
@media print {
  .rangoli-bl {
    display: none !important;
  }
}
@media (min-width: 1400px) {
  /* diyas flank every section title */
  .section-header::before,
  .section-header::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    pointer-events: none;
    background: url('assets/elements/diya.svg') center / contain no-repeat;
    animation: diya-glow 2.6s ease-in-out infinite;
  }
  .section-header::before {
    left: -70px;
    transform: translateY(-50%);
  }
  .section-header::after {
    right: -70px;
    transform: translateY(-50%);
    animation-delay: -1.3s;
  }
}
@keyframes diya-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(255, 150, 40, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(255, 190, 70, 0.95));
  }
}
.scroll-rail-knob {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: url('assets/elements/butterfly.svg') center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 8px rgba(255, 150, 40, 0.8));
}
.scroll-rail:hover .scroll-rail-knob,
.scroll-rail.dragging .scroll-rail-knob {
  width: 38px;
  height: 38px;
}
@media (max-width: 768px) {
  .scroll-rail-knob {
    width: 22px;
    height: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-header::before,
  .section-header::after {
    animation: none;
  }
}
@media print {
  .section::after,
  .section-header::before,
  .section-header::after {
    display: none !important;
  }
}

/* Rangoli across the very bottom of the footer: a mirrored corner at each end */
.ft-rangoli {
  position: relative;
  flex: none;
  height: clamp(170px, 22vw, 320px);
  overflow: hidden;
  pointer-events: none;
}
.ft-rangoli {
  --s: clamp(150px, 20vw, 280px);
}
.ft-rangoli::before,
.ft-rangoli::after {
  /* full mandala centred on each bottom corner, slowly spinning in opposite directions */
  content: '';
  position: absolute;
  bottom: calc(var(--s) * -1);
  width: calc(var(--s) * 2);
  aspect-ratio: 1;
  background: url('assets/elements/rangoli-full.svg') center / contain no-repeat;
  opacity: 0.7;
  filter: drop-shadow(0 0 10px rgba(255, 150, 40, 0.35));
  animation: rangoli-cw 90s linear infinite;
}
.ft-rangoli::before {
  left: calc(var(--s) * -1);
}
.ft-rangoli::after {
  right: calc(var(--s) * -1);
  animation-name: rangoli-ccw;
}
@keyframes rangoli-cw {
  to {
    transform: rotate(360deg);
  }
}
@keyframes rangoli-ccw {
  to {
    transform: rotate(-360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ft-rangoli::before,
  .ft-rangoli::after {
    animation: none;
  }
}
.ft-rangoli img {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: clamp(210px, 36vw, 560px);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 18px rgba(255, 122, 26, 0.55));
}

/* ==========================================================================
   About: two poster cards with a diya, a rangoli corner and drifting butterflies
   ========================================================================== */
.ab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
@media (min-width: 860px) {
  .ab-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.ab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 34px 32px 30px 38px;
  border-radius: 16px;
  border: 1px solid #3a2a14;
  background:
    linear-gradient(180deg, #ffd27a, #ff7a1a 60%, #7a2a08) 0 0 / 6px 100% no-repeat,
    /* left accent bar */
    radial-gradient(ellipse at 100% 0%, rgba(255, 122, 26, 0.14), transparent 55%),
    linear-gradient(160deg, #1d1522, #0e0a12 75%);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.1),
    0 14px 30px rgba(0, 0, 0, 0.5);
}
.ab-card::before,
.ab-card::after {
  /* full rangoli centred on a corner (card clips it to a quarter), slowly spinning in opposite directions */
  --s: 110px;
  content: '';
  position: absolute;
  width: calc(var(--s) * 2);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.4;
  background: url('assets/elements/rangoli-full.svg') center / contain no-repeat;
}
.ab-card::before {
  top: calc(var(--s) * -1);
  left: calc(var(--s) * -1);
  animation: rangoli-cw 90s linear infinite;
}
.ab-card::after {
  bottom: calc(var(--s) * -1);
  right: calc(var(--s) * -1);
  animation: rangoli-ccw 90s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ab-card::before,
  .ab-card::after {
    animation: none;
  }
}
.ab-diya {
  position: absolute;
  right: 22px;
  top: 20px;
  width: 46px;
  height: 46px;
  pointer-events: none;
  background: url('assets/elements/diya.svg') center / contain no-repeat;
  animation: diya-glow 2.6s ease-in-out infinite;
}
.ab-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.ab-label::before {
  content: '';
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, #ff7a1a, #ffd27a);
}
.ab-title {
  position: relative;
  z-index: 1;
  margin: 14px 64px 14px 0;
  font: 700 clamp(24px, 3vw, 32px)/1.15 var(--font-heading);
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff1d2, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ab-body {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 0 0 24px;
  font: 17px/1.7 var(--font-body);
  color: #eadfce;
}
.ab-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
}
.ab-tags li {
  padding: 6px 14px;
  border-radius: 999px;
  font: 700 12px var(--font-sans);
  letter-spacing: 0.06em;
  color: #ffd27a;
  background: rgba(255, 179, 71, 0.08);
  border: 1px solid rgba(255, 179, 71, 0.35);
}

/* Every section: a butterfly drifting in a side margin */
.section > .container::before {
  content: '';
  display: none;
  position: absolute;
  left: -64px;
  top: 34%;
  width: 46px;
  height: 46px;
  pointer-events: none;
  background: url('assets/elements/butterfly.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 150, 40, 0.6));
  animation: butterfly-drift 9s ease-in-out infinite;
}
main > div:nth-of-type(even) > .section > .container::before {
  left: auto;
  right: -64px;
  top: 62%;
  animation-delay: -4s;
}
@keyframes butterfly-drift {
  0%,
  100% {
    transform: translate(0, 0) rotate(-8deg);
  }
  25% {
    transform: translate(14px, -22px) rotate(10deg);
  }
  50% {
    transform: translate(-6px, -40px) rotate(-4deg);
  }
  75% {
    transform: translate(10px, -18px) rotate(12deg);
  }
}
@media (min-width: 1360px) {
  .section > .container::before {
    display: block;
  }
} /* only where the side gutters have room */
@media (prefers-reduced-motion: reduce) {
  .section > .container::before,
  .ab-diya {
    animation: none;
  }
}
@media print {
  .section > .container::before,
  .ab-diya {
    display: none !important;
  }
}

/* ==========================================================================
   Cultural decor: toran under the header, lotus divider under every title,
   section icons, falling petals / rising sparks, and the Line-up "stage"
   (curtains, spotlights, ghungroo, peacock feather). SVGs live in assets/elements.
   ========================================================================== */

/* Toran of marigolds and mango leaves hanging from the header */
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 49px;
  pointer-events: none;
  z-index: 5;
  background: url('assets/elements/toran.svg') repeat-x 0 0 / 46px 49px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55));
}
@media (max-width: 600px) {
  .site-header::after {
    height: 36px;
    background-size: 34px 36px;
  }
}

/* Lotus + paisley divider under every section title */
.section-header {
  padding-bottom: 40px;
  background: url('assets/elements/divider.svg') center bottom / min(300px, 80%) auto no-repeat;
}
.sec-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  filter: drop-shadow(0 0 10px rgba(255, 150, 40, 0.55));
}

/* Falling petals (hero) and rising sparks (footer) */
.fx-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.fx-field i {
  position: absolute;
  left: var(--x);
  width: var(--s);
  height: calc(var(--s) * 1.3);
  background: center / contain no-repeat;
  opacity: 0;
}
.fx-petals i {
  top: -40px;
  background-image: url('assets/elements/petal.svg');
  animation: fx-fall var(--t) linear var(--d) infinite;
}
.fx-sparks i {
  bottom: -30px;
  background-image: url('assets/elements/sparkle.svg');
  height: var(--s);
  animation: fx-rise var(--t) ease-in var(--d) infinite;
}
@keyframes fx-fall {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0);
  }
  8% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.6;
    transform: translate(var(--dx), 108vh) rotate(540deg);
  }
}
@keyframes fx-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), -70vh) scale(1.1) rotate(120deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx-field {
    display: none;
  }
}
.site-footer > .container {
  position: relative;
  z-index: 1;
}

/* Line-up: a stage with curtains and spotlights */
.lineup-section {
  overflow: hidden;
}
.lu-curtain,
.lu-beam {
  display: none;
  position: absolute;
  pointer-events: none;
}
.lu-curtain {
  top: 0;
  bottom: 0;
  width: clamp(48px, 5.5vw, 100px);
  background: url('assets/elements/curtain.svg') 0 0 / 100% 100% no-repeat;
  z-index: 0;
}
.lu-curtain-l {
  left: 0;
}
.lu-curtain-r {
  right: 0;
  transform: scaleX(-1);
}
.lu-beam {
  top: 0;
  width: 300px;
  height: 72%;
  z-index: 0;
  transform-origin: 50% 0;
  mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(255, 214, 130, 0.22), transparent 85%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  animation: lu-sway 9s ease-in-out infinite;
}
.lu-beam-l {
  left: 18%;
}
.lu-beam-r {
  right: 18%;
  animation-delay: -4.5s;
}
@keyframes lu-sway {
  0%,
  100% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(7deg);
  }
}
@media (min-width: 1000px) {
  .lu-curtain,
  .lu-beam {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lu-beam {
    animation: none;
  }
}

.lineup-section > .container {
  max-width: min(1500px, calc(100% - 2 * clamp(48px, 5.5vw, 100px)));
  padding-left: 14px;
  padding-right: 14px;
} /* use the space between the curtains */
.lu-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 620px) {
  .lu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .lu-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.lu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 26px 22px 26px 28px;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  border: 1px solid #3a2a14;
  background:
    linear-gradient(180deg, #ffd27a, #ff7a1a 60%, #7a2a08) 0 0 / 5px 100% no-repeat,
    /* left accent bar */
    radial-gradient(ellipse at 50% 0%, rgba(255, 122, 26, 0.2), transparent 62%),
    linear-gradient(170deg, #1d1522, #0e0a12 78%);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.1),
    0 14px 30px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}
.lu-card::before,
.lu-card::after {
  /* full rangoli centred on a corner (card clips it to a quarter), spinning in opposite directions */
  --s: 75px;
  content: '';
  position: absolute;
  z-index: 0;
  width: calc(var(--s) * 2);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.25;
  background: url('assets/elements/rangoli-full.svg') center / contain no-repeat;
}
.lu-card::before {
  top: calc(var(--s) * -1);
  left: calc(var(--s) * -1);
  animation: rangoli-cw 90s linear infinite;
}
.lu-card::after {
  bottom: calc(var(--s) * -1);
  right: calc(var(--s) * -1);
  animation: rangoli-ccw 90s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .lu-card::before,
  .lu-card::after {
    animation: none;
  }
}
.lu-photo {
  position: relative;
  flex: none;
  width: 124px;
  height: 124px;
  margin-bottom: 28px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 200deg, #ffd27a, #ff7a1a, #7a2a08, #ffd27a);
  box-shadow: 0 0 22px rgba(255, 122, 26, 0.45);
}
.lu-photo > img,
.lu-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #120c16;
}
.lu-ph img {
  width: 52px;
  height: 52px;
  opacity: 0.9;
}
.lu-info {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.lu-badge {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  font: 800 10px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a0c02;
  background: linear-gradient(145deg, #ffd27a, #ff7a1a);
  border: 1px solid #000;
}
.lu-cat {
  position: relative;
  display: block;
  font: 800 11px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.lu-name {
  position: relative;
  margin: 10px 0 4px;
  font: 700 clamp(15px, 1.3vw, 24px)/1.15 var(--font-heading);
  white-space: nowrap;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff1d2, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lu-role {
  position: relative;
  margin: 0 0 12px;
  font: italic 15px var(--font-body);
  color: var(--text-secondary);
  font-weight: 400;
}
.lu-bio {
  position: relative;
  margin: 0;
  font: 15px/1.6 var(--font-body);
  color: #d9ccb8;
}
.lu-card[data-id='UBI'] .lu-bio {
  white-space: nowrap;
  font-size: clamp(10px, 1.15vw, 14px);
} /* ponytail: UBI bios only; long SBI bios can't fit one line */

/* ==========================================================================
   Venue selector: numbered chips on a dark panel (diya title, round arrows)
   ========================================================================== */
.vp-bar {
  position: relative;
  overflow: hidden;
  margin-top: 26px;
  padding: 22px 24px 22px 30px;
  border-radius: 16px;
  border: 1px solid #3a2a14;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255, 122, 26, 0.14), transparent 55%),
    linear-gradient(160deg, #1d1522, #0e0a12 75%);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.1),
    0 14px 30px rgba(0, 0, 0, 0.5);
}
.vp-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #ffd27a, #ff7a1a 60%, #7a2a08);
}
.vp-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vp-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  cursor: var(--cur-hover);
  font-size: 22px;
  line-height: 1;
  color: #ffd27a;
  background: #120c16;
  border: 1px solid #3a2a14;
  transition:
    transform 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.vp-arrow:hover {
  color: #fff;
  border-color: var(--gold-primary);
  box-shadow: 0 0 14px rgba(255, 122, 26, 0.5);
  transform: scale(1.08);
}
.vp-list {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 12px;
  padding: 6px 2px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.vp-list::-webkit-scrollbar {
  display: none;
}
.vp-chip {
  --cat: #ffb347;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 10px 16px 10px 14px;
  border-radius: 12px;
  cursor: var(--cur-hover);
  text-align: left;
  scroll-snap-align: start;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 190, 120, 0.16);
  border-left: 3px solid var(--cat);
  transition:
    transform 0.2s,
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.vp-chip[data-category='academic'] {
  --cat: #5aa9ff;
}
.vp-chip[data-category='hostel'] {
  --cat: #eab308;
}
.vp-chip[data-category='palace'] {
  --cat: #b06be0;
}
.vp-chip[data-category='gate'] {
  --cat: #4ade80;
}
.vp-chip:hover {
  transform: translateY(-3px);
  background: rgba(255, 179, 71, 0.1);
  border-color: var(--cat);
}
.vp-chip.active {
  border-color: rgba(255, 210, 122, 0.45);
  box-shadow: 0 0 16px rgba(255, 180, 70, 0.25);
}
.vp-no {
  font: 800 12px var(--font-sans);
  letter-spacing: 0.08em;
  color: var(--cat);
}
.vp-text {
  display: grid;
  gap: 2px;
}
.vp-text b {
  font: 700 14px/1.2 var(--font-sans);
  white-space: nowrap;
}
.vp-text small {
  font: 700 10px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}
.vp-fest {
  padding: 2px 8px;
  border-radius: 999px;
  font: 800 9px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd27a;
  border: 1px solid rgba(255, 210, 122, 0.55);
}

@media (max-width: 600px) {
  .vp-bar {
    padding: 18px 14px 18px 20px;
  }
  .vp-arrow {
    display: none;
  }
}

/* --- Aftermovie card redesign: framed 16:9 poster, round play button --- */
.aftermovie-container {
  border: 1px solid rgba(255, 179, 71, 0.35);
  border-radius: 24px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 0 6px rgba(255, 179, 71, 0.06);
}
/* Trailer player: YouTube iframe filling a 16:9 frame */
.video-embed-frame {
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-embed-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-placeholder {
  aspect-ratio: 16 / 9;
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 122, 26, 0.28), transparent 48%),
    radial-gradient(
      circle at 50% 46%,
      transparent 0 22%,
      rgba(255, 179, 71, 0.18) 22.3% 22.7%,
      transparent 23% 31%,
      rgba(255, 179, 71, 0.1) 31.3% 31.6%,
      transparent 32%
    ),
    linear-gradient(160deg, #2a1240, #0a0514 70%);
  box-shadow: none;
}
.video-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.video-badge {
  background: none;
  border: 1px solid rgba(255, 179, 71, 0.5);
  color: var(--orange-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.video-title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 3.2vw, 30px);
  letter-spacing: 0.02em;
  text-shadow: none;
  color: #fff;
  margin: 0;
}
.video-desc {
  margin: 0;
  font-size: 14px;
  opacity: 0.7;
}
.btn-play-video {
  order: 2;
  width: 84px;
  height: 84px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  font-size: 28px;
  text-indent: 4px;
  box-shadow:
    0 0 0 10px rgba(255, 122, 26, 0.18),
    0 0 40px rgba(255, 122, 26, 0.5);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.btn-play-video:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 0 16px rgba(255, 122, 26, 0.2),
    0 0 56px rgba(255, 122, 26, 0.65);
}
.video-badge {
  order: 1;
}
.video-title {
  order: 3;
}
.video-desc {
  order: 4;
}

/* --- Map "coming soon" teaser --- */
.soon {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: clamp(48px, 9vw, 96px) 24px;
  border-radius: 24px;
  border: 1px solid rgba(255, 179, 71, 0.3);
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 122, 26, 0.16), transparent 55%),
    linear-gradient(180deg, #120a1c, #050309);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.6),
    inset 0 0 90px rgba(0, 0, 0, 0.8);
}
.soon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}
.soon::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  top: -90px;
  background: linear-gradient(180deg, transparent, rgba(255, 179, 71, 0.07), transparent);
  animation: soon-scan 6s linear infinite;
  pointer-events: none;
}
.soon > * {
  position: relative;
  z-index: 1;
}
.soon-tag {
  font: 700 11px var(--font-sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ff5a5a;
  padding: 5px 14px;
  border: 1px solid rgba(255, 90, 90, 0.55);
  border-radius: 999px;
  animation: soon-blink 2.4s steps(1) infinite;
}
.soon-orb {
  position: relative;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  font-size: 34px;
}
.soon-orb i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 179, 71, 0.55);
  animation: soon-ring 3.6s ease-out infinite;
}
.soon-orb i:nth-child(2) {
  animation-delay: 1.2s;
}
.soon-orb i:nth-child(3) {
  animation-delay: 2.4s;
}
.soon-orb b {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffa23d, #c9500a 60%, #3a1200);
  box-shadow: 0 0 40px rgba(255, 122, 26, 0.7);
  filter: grayscale(0.2);
}
.soon-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-family: var(--font-heading);
}
.soon-title span {
  font-size: clamp(16px, 2.6vw, 24px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f1e3cc;
}
.soon-title em {
  font-style: normal;
  font-size: clamp(44px, 9vw, 96px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffd27a, #ff7a1a 60%, #8a2a00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 122, 26, 0.55));
  animation: soon-flicker 5s infinite;
}
.soon-line {
  max-width: none;
  white-space: nowrap;
  margin: 0;
  font: italic 16px/1.6 var(--font-body);
  color: rgba(241, 227, 204, 0.7);
}
.soon-bar {
  width: min(320px, 80%);
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.soon-bar span {
  display: block;
  height: 100%;
  width: 73%;
  background: linear-gradient(90deg, #c9500a, #ffb347);
  box-shadow: 0 0 12px #ff7a1a;
  animation: soon-load 3s ease-in-out infinite alternate;
}
.soon-status {
  font: 600 11px var(--font-mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 179, 71, 0.8);
}
.soon-status span {
  animation: soon-blink 1.2s steps(1) infinite;
}
.soon-status span:nth-child(2) {
  animation-delay: 0.3s;
}
.soon-status span:nth-child(3) {
  animation-delay: 0.6s;
}
@keyframes soon-ring {
  from {
    transform: scale(0.6);
    opacity: 0.9;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes soon-blink {
  50% {
    opacity: 0.25;
  }
}
@keyframes soon-scan {
  to {
    transform: translateY(520px);
  }
}
@keyframes soon-load {
  from {
    width: 68%;
  }
  to {
    width: 76%;
  }
}
@keyframes soon-flicker {
  0%,
  90%,
  94%,
  100% {
    opacity: 1;
  }
  92% {
    opacity: 0.55;
  }
  96% {
    opacity: 0.8;
  }
}
@media (max-width: 720px) {
  .soon-line {
    white-space: normal;
    max-width: 460px;
  }
}

/* Committee avatars: photo fills the round slot */
.team-avatar-slot {
  width: 120px;
  height: 120px;
  overflow: hidden;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.avatar-initials {
  font-size: 36px;
}

/* --- FAQ redesign: sticky side panel + open Q&A list --- */
.faq-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}
.faq-side {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px;
  border-radius: 20px;
  border: 1px solid rgba(255, 179, 71, 0.25);
  background: radial-gradient(circle at 0 0, rgba(255, 122, 26, 0.16), transparent 60%), #120a1c;
}
.faq-side-lead {
  margin: 0;
  font: italic 18px/1.5 var(--font-body);
  color: #f5ead8;
}
.faq-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.faq-cat-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 179, 71, 0.4);
  background: none;
  color: #ffb347;
  font: 700 11px var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: var(--cur-hover);
  transition:
    background 0.2s,
    color 0.2s;
}
.faq-cat-chip.on,
.faq-cat-chip:hover {
  background: #ffb347;
  color: #1a0c02;
}
.faq-side-cta {
  font: 700 13px var(--font-sans);
  color: #ffb347;
  text-decoration: none;
  border-top: 1px solid rgba(255, 179, 71, 0.2);
  padding-top: 16px;
}
.faq-side-cta:hover {
  color: #ffd27a;
}
.faq-accordion {
  max-width: none;
  margin: 0;
  display: block;
}
.faq-item {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 179, 71, 0.2);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transform: none;
}
.faq-item::before {
  display: none;
}
.faq-item:hover,
.faq-item.open {
  border-color: rgba(255, 179, 71, 0.5);
  transform: none;
  box-shadow: none;
}
.faq-item[hidden] {
  display: none;
}
.faq-question-btn {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 22px 4px;
  text-align: left;
  background: none;
  border: 0;
  cursor: var(--cur-hover);
  min-height: 0;
}
.faq-q-mark {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 179, 71, 0.14);
  color: #ffb347;
  font: 700 14px var(--font-heading);
  transition:
    background 0.25s,
    color 0.25s;
}
.faq-item.open .faq-q-mark {
  background: #ffb347;
  color: #1a0c02;
}
.faq-question-text {
  flex: 1;
  font: 600 clamp(17px, 2.2vw, 20px)/1.4 var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  color: #f5ead8;
  padding-top: 2px;
}
.faq-chevron {
  flex: none;
  font: 300 28px/1 var(--font-sans);
  color: #ffb347;
  transition: transform 0.3s;
  filter: none;
}
.faq-item.open .faq-chevron {
  transform: rotate(45deg);
  background: none;
  color: #ffb347;
  border: 0;
}
.faq-answer-panel {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0 44px 22px 46px;
}
.faq-answer-text {
  margin: 0;
  padding: 0;
  font: 16px/1.75 var(--font-body);
  color: rgba(245, 234, 216, 0.8);
}
@media (max-width: 800px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .faq-side {
    position: static;
  }
  .faq-answer-panel {
    padding: 0 4px 22px 46px;
  }
}

/* Committee cards: identical size/layout regardless of badge or name length */
.core-grid,
.faculty-grid {
  align-items: stretch;
}
.core-grid {
  grid-template-columns: repeat(24, 1fr);
  gap: 16px 24px;
} /* 24 cols: every card spans 6, so the first 4 fill row one and cards 5-7 sit centred below */
.core-grid .team-card {
  grid-column: span 6;
}
.core-grid .team-card:nth-child(5) {
  grid-column: 4 / span 6;
}
.core-grid .team-card:nth-child(6) {
  grid-column: 10 / span 6;
}
.core-grid .team-card:nth-child(7) {
  grid-column: 16 / span 6;
}
.core-grid .team-card {
  padding: 22px 14px;
}
.creative-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 20px;
}
.creative-grid .team-card {
  flex: 1 1 200px;
  max-width: 250px;
  min-width: 190px;
  padding: 22px 8px;
}
.creative-grid .member-name {
  font-size: clamp(13px, 1vw, 15px);
  white-space: nowrap;
}
.creative-grid .member-email {
  font-size: 10px;
  white-space: nowrap;
  overflow-wrap: normal !important;
  word-break: normal !important;
  letter-spacing: -0.015em;
  max-width: 100%;
}
@media (max-width: 540px) {
  .creative-grid .team-card {
    max-width: 100%;
    min-width: 240px;
    width: 100%;
  }
}
@media (max-width: 900px) {
  .core-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .core-grid .team-card,
  .core-grid .team-card:nth-child(n) {
    grid-column: auto;
  }
}
@media (max-width: 480px) {
  .core-grid {
    grid-template-columns: 1fr;
  }
}
.faculty-grid .team-card {
  flex: 0 1 280px;
}
.team-card {
  justify-content: flex-start;
  overflow: hidden;
}
.team-card::before,
.team-card::after {
  /* full rangoli centred on a corner (card clips it to a quarter), spinning in opposite directions */
  --s: 80px;
  content: '';
  position: absolute;
  z-index: 0;
  width: calc(var(--s) * 2);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.35;
  background: url('assets/elements/rangoli-full.svg') center / contain no-repeat;
}
.team-card::before {
  top: calc(var(--s) * -1);
  left: calc(var(--s) * -1);
  animation: rangoli-cw 90s linear infinite;
}
.team-card::after {
  bottom: calc(var(--s) * -1);
  right: calc(var(--s) * -1);
  animation: rangoli-ccw 90s linear infinite;
}
.team-card > :not(.member-links) {
  position: relative;
  z-index: 1;
} /* keep the text above the rangolis */
@media (prefers-reduced-motion: reduce) {
  .team-card::before,
  .team-card::after {
    animation: none;
  }
}
.team-avatar-slot {
  flex: none;
  aspect-ratio: 1;
}
.team-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.member-team-badge {
  max-width: 100%;
  min-height: 2.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.member-email {
  overflow-wrap: anywhere;
}

.faq-no {
  display: none;
}

/* Option B: numbered cards */
[data-v='B'] .faq-layout {
  display: block;
  max-width: 860px;
}
[data-v='B'] .faq-side {
  display: none;
}
[data-v='B'] .faq-item {
  margin-bottom: 14px;
  border: 1px solid rgba(255, 179, 71, 0.2);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 179, 71, 0.06), rgba(255, 255, 255, 0.015));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
[data-v='B'] .faq-item:hover,
[data-v='B'] .faq-item.open {
  border-color: rgba(255, 179, 71, 0.6);
}
[data-v='B'] .faq-question-btn {
  align-items: center;
  padding: 18px 20px;
  gap: 18px;
}
[data-v='B'] .faq-no {
  display: block;
  flex: none;
  min-width: 44px;
  font: 400 30px/1 var(--font-heading);
  color: rgba(255, 179, 71, 0.35);
}
[data-v='B'] .faq-item.open .faq-no {
  color: #ffb347;
}
[data-v='B'] .faq-q-mark {
  display: none;
}
[data-v='B'] .faq-chevron {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 179, 71, 0.5);
  font-size: 20px;
}
[data-v='B'] .faq-item.open .faq-chevron {
  background: #ffb347;
  color: #1a0c02;
}
[data-v='B'] .faq-answer-panel {
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(255, 179, 71, 0.15);
  padding: 0 20px 0 68px;
}
[data-v='B'] .faq-answer-text {
  padding: 16px 0 20px;
}
@media (max-width: 600px) {
  [data-v='B'] .faq-no {
    display: none;
  }
  [data-v='B'] .faq-answer-panel {
    padding-left: 20px;
  }
}

/* --- Contact redesign: shared parts --- */
.ct-wrap {
  max-width: 980px;
  margin: 0 auto;
}
.ct-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ct-lead {
  margin: 0;
  font: 400 clamp(32px, 5vw, 48px)/1.05 var(--font-heading);
  color: #fff;
}
.ct-sub {
  margin: 0;
  font: 16px/1.6 var(--font-body);
  color: rgba(245, 234, 216, 0.75);
}
.ct-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font: 700 15px var(--font-sans);
  color: #ffb347;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ct-mail:hover {
  color: #ffd27a;
}
.ct-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ct-form-card {
  border-radius: 20px;
  padding: clamp(22px, 4vw, 36px);
  background: #120a1c;
  border: 1px solid rgba(255, 179, 71, 0.25);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.ct-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ct-form .form-row {
  display: grid;
  gap: 16px;
  margin: 0;
}
@media (min-width: 600px) {
  .ct-form .form-row {
    grid-template-columns: 1fr 1fr;
  }
}
.ct-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.ct-form label {
  font: 700 11px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffb347;
}
.ct-form input,
.ct-form select,
.ct-form textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 179, 71, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #f5ead8;
  font: 15px var(--font-sans);
  box-shadow: none;
}
.ct-form select option {
  color: #111;
}
.ct-form ::placeholder {
  color: rgba(245, 234, 216, 0.4);
}
.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus {
  outline: none;
  border-color: #ffb347;
  box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.2);
}
.ct-form .field-error {
  min-height: 0;
  font-size: 12px;
  color: #ff8a8a;
}

/* Option A: split, saffron info panel + dark form */
[data-v='A'] .ct-wrap {
  display: grid;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
@media (min-width: 860px) {
  [data-v='A'] .ct-wrap {
    grid-template-columns: 5fr 7fr;
  }
}
[data-v='A'] .ct-info {
  padding: clamp(28px, 4vw, 44px);
  justify-content: center;
  background:
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(160deg, #e8650f, #8e2a05);
}
[data-v='A'] .ct-lead,
[data-v='A'] .ct-mail {
  color: #fff;
}
[data-v='A'] .ct-sub {
  color: rgba(255, 255, 255, 0.85);
}
[data-v='A'] .ct-form-card {
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

/* Custom inquiry-type dropdown */
.ct-select {
  position: relative;
}
.ct-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 179, 71, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #f5ead8;
  font: 15px var(--font-sans);
  text-align: left;
  cursor: var(--cur-hover);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.ct-select-btn:hover,
.ct-select.open .ct-select-btn,
.ct-select-btn:focus-visible {
  outline: none;
  border-color: #ffb347;
  box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.2);
}
.ct-select-val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-select-ico {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 179, 71, 0.14);
  font-size: 15px;
}
.ct-select-caret {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid #ffb347;
  border-bottom: 2px solid #ffb347;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}
.ct-select.open .ct-select-caret {
  transform: rotate(225deg) translateY(-2px);
}
.ct-select-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 14px;
  border: 1px solid rgba(255, 179, 71, 0.4);
  background: #1a0f26;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
  animation: ct-pop 0.15s ease-out;
}
.ct-select-list[hidden] {
  display: none;
}
.ct-select-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  color: #f5ead8;
  font: 14px var(--font-sans);
  cursor: var(--cur-hover);
}
.ct-select-list li:hover,
.ct-select-list li:focus {
  outline: none;
  background: rgba(255, 179, 71, 0.14);
}
.ct-select-list li[aria-selected='true'] {
  background: rgba(255, 179, 71, 0.22);
  color: #ffd27a;
  font-weight: 700;
}
@keyframes ct-pop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.ct-form .opt {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0.6;
}
.ct-form .form-field[hidden] {
  display: none;
}

/* Dropdown: only the hovered/focused row gets a background; the chosen row is marked by gold text and a tick */
.ct-select-list {
  max-height: 280px;
  overflow-y: auto;
}
.ct-select-list li[aria-selected='true'] {
  background: none;
}
.ct-select-list li:hover,
.ct-select-list li:focus {
  background: rgba(255, 179, 71, 0.16);
}
.ct-select-list li[aria-selected='true']::after {
  content: '';
  margin-left: auto;
  width: 6px;
  height: 11px;
  border-right: 2px solid #ffd27a;
  border-bottom: 2px solid #ffd27a;
  transform: rotate(45deg) translateY(-2px);
}

/* --- Toast redesign: icon badge, title + message, countdown bar --- */
.toast-notification {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  padding: 16px 18px 18px;
  border: 1px solid rgba(255, 179, 71, 0.35);
  border-left: 1px solid rgba(255, 179, 71, 0.35);
  border-radius: 16px;
  background: linear-gradient(160deg, #1e1230, #0c0716);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
  font-weight: 400;
}
.toast-notification::before {
  display: none;
}
.toast-notification.on {
  transform: translateY(0);
}
.toast-ico {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #1a0c02;
  background: linear-gradient(135deg, #ffd27a, #ff9a3d);
  box-shadow: 0 0 18px rgba(255, 154, 61, 0.5);
}
.toast-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font: 13px/1.45 var(--font-sans);
  color: rgba(245, 234, 216, 0.8);
}
.toast-txt b {
  font: 700 15px var(--font-sans);
  color: #fff;
}
.toast-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #ffb347, #ff7a1a);
  transform-origin: left;
  animation: toast-count linear forwards;
}
.toast-success {
  border-color: rgba(125, 255, 176, 0.45);
  border-left-color: rgba(125, 255, 176, 0.45);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.65),
    0 0 22px rgba(125, 255, 176, 0.12);
}
.toast-success .toast-ico {
  background: linear-gradient(135deg, #b5ffd2, #3fd47f);
  box-shadow: 0 0 18px rgba(63, 212, 127, 0.5);
}
.toast-success .toast-bar {
  background: linear-gradient(90deg, #7dffb0, #3fd47f);
}
.toast-error {
  border-color: rgba(255, 110, 110, 0.5);
}
.toast-error .toast-ico {
  color: #fff;
  background: linear-gradient(135deg, #ff8a8a, #c22a38);
  box-shadow: 0 0 18px rgba(194, 42, 56, 0.55);
}
.toast-error .toast-bar {
  background: linear-gradient(90deg, #ff8a8a, #c22a38);
}
@keyframes toast-count {
  to {
    transform: scaleX(0);
  }
}

/* Line-up: one row per sponsor (--cols cards), cards keep the 4-up width and rows are centred */
.lu-grid + .lu-grid {
  margin-top: 22px;
}
@media (min-width: 1100px) {
  .lu-grid {
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    max-width: calc((100% - 66px) / 4 * var(--cols, 4) + 22px * (var(--cols, 4) - 1));
    margin-inline: auto;
  }
}

/* --- Merchandise section --- */
.merch-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.merch-card {
  flex: 0 1 280px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 179, 71, 0.25);
  background: linear-gradient(170deg, #1d1522, #0e0a12 75%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.merch-img {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 122, 26, 0.28), transparent 65%), #120a1c;
}
.merch-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.merch-ph {
  font: 400 clamp(26px, 3.4vw, 34px) var(--font-heading);
  letter-spacing: 0.1em;
  color: rgba(255, 179, 71, 0.35);
}
.merch-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  font: 700 10px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a0c02;
  background: linear-gradient(135deg, #ffd27a, #ff9a3d);
}
.merch-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 20px;
  border-top: 1px solid rgba(255, 179, 71, 0.18);
}
.merch-name {
  margin: 0;
  font: 700 18px/1.2 var(--font-heading);
  color: #fff;
}
.merch-price {
  font: 700 12px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffb347;
}
.merch-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 0;
  font: 700 13px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a0c02;
  background: linear-gradient(180deg, #ffa23d, #ff7a1a 45%, #c9500a);
  box-shadow:
    0 4px 0 #6b2a05,
    0 8px 18px rgba(0, 0, 0, 0.5);
  cursor: var(--cur-hover);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
a.merch-buy:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 #6b2a05,
    0 12px 22px rgba(0, 0, 0, 0.5);
}
a.merch-buy:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #6b2a05;
}
.merch-buy:disabled {
  cursor: not-allowed;
  color: rgba(245, 234, 216, 0.55);
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 179, 71, 0.35);
  box-shadow: none;
}

/* Merch: pill moved to the top-right, cards open in a modal */
.merch-open {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: var(--cur-hover);
  color: inherit;
  font: inherit;
}
.merch-card {
  cursor: var(--cur-hover);
  transition: border-color 0.25s;
}
@media (min-width: 420px) {
  /* wider cards so the whole price line ("₹499/- + Extra Delivery Charges") stays on one line */
  .merch-card {
    flex-basis: 360px;
  }
  .merch-info .merch-price {
    white-space: nowrap;
    letter-spacing: 0.08em;
  }
}
.merch-badge {
  left: auto;
  right: 14px;
}
.merch-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 440px);
  max-height: 92vh;
  overflow: auto;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(255, 179, 71, 0.4);
  background: linear-gradient(170deg, #1d1522, #0e0a12 75%);
  color: #f5ead8;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.merch-modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
}
.merch-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 179, 71, 0.5);
  background: rgba(0, 0, 0, 0.55);
  color: #ffb347;
  font: 400 24px/1 var(--font-sans);
  cursor: var(--cur-hover);
}
.merch-modal-close:hover {
  background: #ffb347;
  color: #1a0c02;
}
.merch-modal-body {
  display: grid;
}
.merch-modal-art {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 122, 26, 0.28), transparent 65%), #120a1c;
}
.merch-modal-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.merch-modal-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(24px, 4vw, 40px);
}
.merch-modal-info .merch-badge {
  position: static;
}
.merch-modal-name {
  margin: 0;
  font: 400 clamp(28px, 4vw, 38px)/1.1 var(--font-heading);
  color: #fff;
}
.merch-modal-info .merch-price {
  font-size: 18px;
}
.merch-modal-info .merch-buy {
  align-self: stretch;
}
.merch-modal-art {
  display: block;
  aspect-ratio: auto;
  min-height: 220px;
  display: grid;
}
.merch-modal-art img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: fill;
}
.merch-modal {
  overflow: hidden;
  max-height: none;
}
.merch-modal-art img {
  max-height: 58vh;
  object-fit: cover;
  object-position: center top;
}
.ft-rangoli img {
  transform: translateX(-43.55%);
} /* logo art sits left of its canvas centre (same 6.45% nudge as the hero wordmark), so the lettering lands centred between the two rangolis */
.merch-badge {
  left: 14px;
  right: auto;
}
.merch-note {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 14px 20px;
  text-align: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 179, 71, 0.4);
  background: rgba(255, 179, 71, 0.08);
  font: 800 15px/1.5 var(--font-sans);
  letter-spacing: 0.02em;
  color: #ffd27a;
}
.merch-note strong {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ff9a3d;
}
.ft-rangoli img {
  width: auto;
  height: 84%;
  bottom: 8%;
  max-width: 60%;
} /* fit the whole logo inside the strip instead of letting it overflow and get cropped */
.ft-rangoli {
  height: clamp(240px, 32vw, 460px);
}
.ft-rangoli img {
  height: 100%;
  bottom: 0;
  max-width: 70%;
} /* bigger footer logo */
/* Footer logo: bigger, with the artwork's lowest edge 18px above the bottom. logo.webp has 36.4% empty space under the art, so the image is pushed down by that much (minus 18px) and clipped by the strip. */
.ft-rangoli {
  --ih: clamp(300px, 52vw, 720px);
  height: calc(var(--ih) * 0.44 + 18px + 48px);
}
.ft-rangoli img {
  width: auto;
  height: var(--ih);
  max-width: none;
  bottom: calc(18px - var(--ih) * 0.364);
}

/* Footer fits exactly one screen on desktop/tablet-landscape: spacing shrinks with the viewport height,
   and the logo strip takes whatever height is left (the logo is sized from the strip's own height). */
@media (min-width: 821px) {
  .site-footer {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
  .site-footer > .container {
    flex: 0 0 auto;
  }
  .ft-band {
    padding: clamp(14px, 4vh, 48px) 0 clamp(12px, 3vh, 36px);
  }
  .ft-grid {
    padding: clamp(12px, 3vh, 32px) 0 clamp(12px, 3vh, 40px);
    margin-block: 0;
  }
  .ft-bottom {
    padding: clamp(8px, 1.6vh, 18px) 0;
  }
  .ft-rangoli {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    container-type: size;
    --ih: min(calc((100cqh - 26px) / 0.44), 70cqw, 720px);
  }
  .ft-rangoli img {
    height: var(--ih);
    bottom: calc(18px - var(--ih) * 0.364);
  }
}

/* ==========================================================================
   Custom cursor: coloured veena (assets/elements/veena-cursor*.svg). The hotspot is the neck tip.
   Links and buttons get the brighter variant; text fields keep the browser's I-beam.
   ========================================================================== */
:root {
  --cur-hover: url('assets/elements/golden-butterfly-cursor-hover.svg') 7 7, pointer;
}
html,
body {
  cursor:
    url('assets/elements/golden-butterfly-cursor.svg') 7 7,
    auto;
}
a,
button,
summary,
label,
select,
[role='button'] {
  cursor: var(--cur-hover);
}
input:not([type='checkbox']):not([type='radio']):not([type='range']),
textarea {
  cursor: text;
}

/* Ember trail canvas (src/ui/cursor-fx.js) */
.cfx-canvas {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

/* --- Event details modal (opens on card click) --- */
.event-card {
  cursor: pointer;
  transition:
    transform 0.25s,
    border-color 0.25s;
}
.event-card:focus-visible {
  outline: 2px solid var(--gold-primary);
}

/* Hanging tickets: equal-size ticket cards on swaying strings; every text block is clamped so nothing overflows */
.events-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.ev-hang {
  --cols: 1;
  flex: 0 0 calc((100% - 30px * (var(--cols) - 1)) / var(--cols));
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: ev-sway 5s ease-in-out infinite;
  animation-delay: var(--d);
}
@media (min-width: 560px) {
  .ev-hang {
    --cols: 2;
  }
}
@media (min-width: 860px) {
  .ev-hang {
    --cols: 3;
  }
}
@media (min-width: 1140px) {
  .ev-hang {
    --cols: 4;
  }
}
.ev-hang:has(.event-card:hover, .event-card:focus-visible) {
  animation-play-state: paused;
}
@keyframes ev-sway {
  0%,
  100% {
    transform: rotate(-1.6deg);
  }
  50% {
    transform: rotate(1.6deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ev-hang {
    animation: none;
  }
}
/* two strings meeting at a gold ring, like a hung frame */
.ev-string {
  position: relative;
  flex: none;
  width: 68%;
  height: 58px;
  margin-bottom: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 58' preserveAspectRatio='none'%3E%3Cpath d='M0 58 L50 6 L100 58' fill='none' stroke='%23d9a441' stroke-width='1.6' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.ev-string::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  box-sizing: border-box;
  border: 2.5px solid #ffd27a;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 179, 71, 0.6);
}
.ev-string::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: -3px;
  right: -3px;
  height: 6px;
  background:
    radial-gradient(circle, #ffd27a 0 3px, transparent 3.5px) left / 6px 6px no-repeat,
    radial-gradient(circle, #ffd27a 0 3px, transparent 3.5px) right / 6px 6px no-repeat;
}
.ev-hang .event-card {
  width: 100%;
  flex: 1;
  padding: 10px;
  background: #f3e3c3;
  border: 0;
  border-radius: 10px;
  color: #2a1608;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}
.ev-hang .event-card::before,
.ev-hang .event-card::after {
  display: none;
}
.ev-hang .ev-poster {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  border: 2px solid #2a1608;
  box-sizing: border-box;
}
.ev-hang .ev-day {
  top: 20px;
  right: 20px;
  max-width: calc(100% - 40px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ev-hang .ev-body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: 10px;
  padding: 12px 4px 4px;
  border-top: 2px dashed #2a1608;
  background: none;
}
.ev-hang .ev-body::before,
.ev-hang .ev-body::after {
  content: '';
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0e0a12;
}
.ev-hang .ev-body::before {
  left: -20px;
}
.ev-hang .ev-body::after {
  right: -20px;
}
.ev-hang .ev-club {
  color: #8a5a22;
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ev-hang .event-card-title {
  margin: 4px 0;
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.05;
  min-height: 2.1em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  background: none;
  color: #7a2a08;
}
.ev-hang .event-card-tagline {
  margin: 0 0 10px;
  font-size: 14px;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #4a3520;
}
.ev-hang .ev-stats {
  display: grid;
  gap: 6px;
  margin-top: auto;
}
.ev-hang .ev-stats div {
  min-width: 0;
  border-color: #2a1608;
  background: none;
}
.ev-hang .ev-stats dt {
  flex: none;
  color: #4a3520;
}
.ev-hang .ev-stats dd {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #2a1608;
}
.ev-hang .ev-tags {
  flex-wrap: nowrap;
  overflow: hidden;
  margin-top: 10px;
}
.ev-hang .ev-tags li {
  flex: none;
  color: #2a1608;
  border-color: #2a1608;
}
.event-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 640px);
  max-height: 92vh;
  overflow: auto;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(255, 179, 71, 0.4);
  background: linear-gradient(170deg, #1d1522, #0e0a12 75%);
  color: #f5ead8;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.event-modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
}
.event-modal-body {
  outline: none;
}
.event-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 179, 71, 0.5);
  background: rgba(0, 0, 0, 0.6);
  color: #ffb347;
  font: 400 24px/1 var(--font-sans);
  cursor: pointer;
}
.event-modal-close:hover {
  background: #ffb347;
  color: #1a0c02;
}
.event-modal-poster {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: #120a1c;
  border-bottom: 2px solid rgba(255, 179, 71, 0.5);
}
.event-modal-poster--empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 122, 26, 0.22), transparent 70%), #130d17;
}
.event-modal-poster--empty img {
  width: 30%;
  height: auto;
  opacity: 0.55;
}
.event-modal-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: clamp(22px, 4vw, 34px);
}
.event-modal-name {
  margin: 0;
  font: 400 clamp(30px, 5vw, 40px)/1.1 var(--font-heading);
  color: #fff;
}
.event-modal-tagline {
  margin: 0 0 6px;
  font: italic 16px/1.4 var(--font-body);
  color: var(--gold-primary);
}
.event-modal-desc {
  margin: 10px 0 14px;
  padding-top: 14px;
  width: 100%;
  border-top: 1px solid rgba(255, 179, 71, 0.2);
  font: 400 16px/1.65 var(--font-body);
  color: var(--text-secondary);
}
.event-modal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0;
}
.event-modal-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 179, 71, 0.08);
  border: 1px solid rgba(255, 179, 71, 0.3);
}
.event-modal-stats dt {
  font: 800 10px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.event-modal-stats dd {
  margin: 0;
  font: 700 14px/1.3 var(--font-sans);
  color: #ffd27a;
}

/* Skeleton shimmer shown on an image until it has loaded */
img.skel {
  background: linear-gradient(100deg, #1d1522 30%, #3a2a3c 50%, #1d1522 70%) 0 0 / 250% 100%;
  animation: skel-shimmer 1.3s linear infinite;
  color: transparent;
}
@keyframes skel-shimmer {
  to {
    background-position: -150% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  img.skel {
    animation: none;
  }
}

/* ==========================================================================
   Mobile pass: keep content clear of the scroll rail, tighten About, Gallery, Team
   ========================================================================== */
@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 30px;
  } /* right side leaves room for the fixed scroll rail */
  .scroll-rail-mark::after {
    display: none;
  } /* the hover/active section badge sits on top of the content on touch screens */

  /* About */
  .ab-card {
    padding: 26px 20px 22px 26px;
  }
  .ab-diya {
    right: 14px;
    top: 14px;
    width: 36px;
    height: 36px;
  }
  .ab-label {
    margin-right: 44px;
  }
  .ab-title {
    margin: 12px 0;
    font-size: 24px;
  }
  .ab-body {
    font-size: 16px;
    line-height: 1.65;
  }
  .ab-tags li {
    padding: 5px 12px;
    font-size: 11px;
  }

  /* Gallery */
  .aftermovie-container {
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    overflow: hidden;
  }
  .video-placeholder {
    min-height: 0;
    padding: 16px;
  }
  .video-title {
    font-size: 20px;
  }
  .video-desc {
    font-size: 13px;
  }

  /* Team */
  .subgroup-title {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
    font-size: 16px;
  }
  .faculty-grid .team-card {
    flex-basis: 100%;
  }
}

/* Section titles: centred, wrap onto balanced lines like the About title, never shrink to fit one line */
.section-title,
#about .section-title {
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: break-word;
  line-height: 1.2;
}
@media (max-width: 600px) {
  .section-title,
  #about .section-title {
    font-size: clamp(20px, 6vw, 28px);
  }
}

/* Mobile pass 2: schedule, line-up, merch proportions */
@media (max-width: 768px) {
  .phase-card {
    padding: 22px 18px 18px;
  }
  .phase-title {
    font-size: 26px;
  }
  .phase-events li {
    gap: 10px;
    font-size: 15px;
  }
  .phase-time {
    min-width: 46px;
    font-size: 13px;
  }

  .lineup-section > .container {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 30px;
  }
  .lu-card {
    padding: 24px 18px 24px 24px;
  }
  .lu-name {
    font-size: 17px;
    white-space: normal;
    text-wrap: balance;
  }
  .lu-card[data-id='UBI'] .lu-bio {
    white-space: normal;
    font-size: 14px;
  }

  .merch-card {
    flex-basis: 100%;
  }
}

/* Modals: size to their content, never taller than the screen, scroll inside when short (landscape phones) */
.gallery-lightbox {
  width: fit-content;
  min-width: min(300px, 92vw);
  max-width: min(92vw, 760px);
  max-height: 94dvh;
  box-sizing: border-box;
}
.lightbox-art {
  aspect-ratio: auto;
  min-height: 200px;
}
.lightbox-art img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(94dvh - 32px);
  margin: auto;
  object-fit: contain;
}
.event-modal,
.merch-modal {
  max-height: 92dvh;
  overscroll-behavior: contain;
}
.merch-modal {
  overflow: auto;
}
.merch-modal-art img {
  max-height: min(58vh, 58dvh);
}
@media (max-height: 520px) {
  .merch-modal-art img {
    max-height: 40dvh;
  }
  .lg-dialog {
    max-height: calc(100dvh - 24px);
  }
}
@media (max-width: 480px) {
  .event-modal,
  .merch-modal {
    width: calc(100vw - 28px);
    border-radius: 18px;
  }
  .event-modal-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* Running text is justified; hyphenation stops big gaps on narrow screens. Titles, labels and short captions stay as they are. */
.ab-body,
.faq-answer-text,
.event-modal-desc,
.lg-points li,
.ft-tagline,
.ct-sub,
.poster-desc,
.tier-desc,
.banner-text,
.video-desc,
.dir-text,
.section-subtitle,
.soon-line {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Justified text: better line breaks, tighter gaps on phones */
.ab-body,
.faq-answer-text,
.event-modal-desc,
.lg-points li,
.ft-tagline,
.ct-sub,
.poster-desc,
.tier-desc,
.banner-text,
.video-desc,
.dir-text,
.section-subtitle,
.soon-line {
  text-wrap: pretty;
}
@media (max-width: 480px) {
  .ab-body {
    font-size: 15px;
    line-height: 1.6;
  }
  .lu-name {
    font-size: 15px;
    letter-spacing: 0;
  }
  .phase-card::before,
  .phase-card::after {
    opacity: 0.25;
  }
}

/* Hero video stays pinned; every following section scrolls up over it */
#hero-mount {
  position: sticky;
  top: 0;
  z-index: 0;
}
main > div:not(#hero-mount) {
  position: relative;
  z-index: 1;
  background: var(--bg-dark);
}

/* About: Vice-Chancellor's letter (left) and enclosed video (right), same card design as the two above */
.ab-vc {
  margin-top: 26px;
}
.ab-photo {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #c9a05a;
  outline: 1px solid rgba(255, 179, 71, 0.4);
  outline-offset: 4px;
  background: radial-gradient(circle at 50% 35%, #2a1a14, #0e0a12);
  box-shadow: 0 0 20px rgba(255, 122, 26, 0.35);
}
.ab-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-photo svg {
  width: 62%;
  height: 62%;
  fill: rgba(255, 179, 71, 0.45);
}
.ab-letterhead {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-right: 0;
  padding-bottom: 14px;
  border-bottom: 3px double rgba(255, 179, 71, 0.4);
}
.ab-letterhead-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ab-letter-univ {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ab-salute {
  position: relative;
  z-index: 1;
  margin: 18px 0 10px;
  font: italic 700 20px var(--font-body);
  color: #fff1d2;
}
.ab-vc .ab-body {
  flex: 0 0 auto;
  margin-bottom: 12px;
}
.ab-signoff {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  margin-top: 10px;
  container-type: inline-size;
  font: italic 16px var(--font-body);
  color: #eadfce;
}
.ab-script {
  margin-top: 4px;
  white-space: nowrap;
  font:
    400 min(36px, 7cqw)/1.2 'Segoe Script',
    'Brush Script MT',
    'Lucida Handwriting',
    cursive;
  background: linear-gradient(180deg, #fff1d2, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ab-signoff small {
  font: 700 12px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.ab-video-card {
  justify-content: center;
  gap: 14px;
}
.ab-video-card .ab-label {
  margin-right: 56px;
}
.ab-video {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 179, 71, 0.35);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 122, 26, 0.28), transparent 55%), #0b0710;
}
.ab-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ab-video-play {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid #ffd27a;
  background: rgba(0, 0, 0, 0.45);
  color: #ffd27a;
  font-size: 26px;
  box-shadow: 0 0 24px rgba(255, 122, 26, 0.55);
  cursor: pointer;
}
.ab-video-play:hover {
  background: #ff7a1a;
  color: #1a0c02;
}
.ab-video-soon {
  font: 700 13px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ab-video-note {
  position: relative;
  z-index: 1;
  margin: 0;
  font: italic 15px var(--font-body);
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .ab-letterhead {
    gap: 14px;
  }
  .ab-video-card .ab-label {
    margin-right: 44px;
  }
  .ab-photo {
    width: 64px;
    height: 64px;
  }
  .ab-video-play {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
}

/* About card titles stay on one line: font scales with the card width */
.ab-card {
  container-type: inline-size;
}
.ab-title {
  white-space: nowrap;
  font-size: min(32px, calc((100cqw - 64px) / 25));
}
@media (max-width: 768px) {
  .ab-title {
    font-size: min(32px, calc(100cqw / 25));
  }
}

/* Events & Competitions: same surface as About */
#events {
  background: var(--bg-surface);
}

/* Every section: a big rangoli slowly turning behind the content */
.section > .container {
  z-index: 1;
}
.rangoli-big {
  --s: min(900px, 120vw);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--s);
  aspect-ratio: 1;
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  pointer-events: none;
  opacity: 0.12;
  background: url('assets/elements/rangoli-full.svg') center / contain no-repeat;
  animation: rangoli-cw 150s linear infinite;
}
.section:nth-of-type(even) .rangoli-big,
main > div:nth-of-type(even) .rangoli-big {
  animation-name: rangoli-ccw;
}
@media (prefers-reduced-motion: reduce) {
  .rangoli-big {
    animation: none;
  }
}
@media print {
  .rangoli-big {
    display: none !important;
  }
}

/* FAQ boxes: solid enough that the big rangoli behind them does not show through the text */
#faq .faq-item {
  background: linear-gradient(160deg, #1d1522, #0e0a12 85%);
}

/* Gallery coverflow: front photo holds 2.5 s, then the whole stack moves on (see src/ui/gallery.js) */
.gf {
  --w: min(64vw, 440px);
  position: relative;
  height: calc(var(--w) * 0.77 + 90px);
  margin-top: 36px;
  perspective: 1300px;
  overflow: hidden;
  outline: none;
  touch-action: pan-y;
}
.gf-it {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: calc(var(--w) * 0.77);
  margin: calc(var(--w) * -0.385) 0 0 calc(var(--w) / -2);
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid rgba(255, 179, 71, 0.5);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.7);
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.5s,
    filter 0.5s;
  cursor: pointer;
}
.gf-it img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.gf-it::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 40%);
  pointer-events: none;
}

/* Footer: media partner credit */
.ft-media {
  margin: 0;
  padding: 16px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 190, 120, 0.12);
  font: 700 12px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ft-media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ft-media-logo {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 2px solid #c9a05a;
  background: radial-gradient(circle at 50% 35%, #2a1a14, #0e0a12);
  font: 700 11px var(--font-sans);
  letter-spacing: 0.04em;
  color: rgba(255, 179, 71, 0.7);
}
.ft-media-logo img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0e0a12;
}
.ft-media strong {
  margin-left: 8px;
  color: var(--gold-primary);
}

/* Hero wordmark: canvas of petals (src/ui/hero-petals.js) */
.hero-petals {
  position: relative;
  z-index: 2;
  display: block;
  width: min(64vw, 1100px);
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 22px rgba(255, 122, 26, 0.55));
}
@media (max-width: 768px) {
  .hero-petals {
    width: 90vw;
  }
}

/* Schedule: Night sky (src/ui/schedule.js) */
.sky {
  --sky-blur: 3.5px; /* everything behind the palace is softened; the palace and the text stay sharp */
  position: relative;
  height: clamp(380px, 56vw, 500px);
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #3a2a14;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, #05030a 0%, #0c0618 55%, #180a28 100%);
}
.sky-day {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ff7a1a 0%, #8a283c 55%, #ffbe5a 100%);
  will-change: opacity;
}
.sky-stars {
  position: absolute;
  inset: 0;
  will-change: opacity;
}
.sky-stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: sky-tw 3s ease-in-out infinite;
}
@keyframes sky-tw {
  50% {
    opacity: 0.15;
  }
}
.sky-orb {
  filter: blur(var(--sky-blur));
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  width: clamp(54px, 9vw, 74px);
  aspect-ratio: 1;
  margin: calc(clamp(54px, 9vw, 74px) / -2) 0 0 calc(clamp(54px, 9vw, 74px) / -2);
  border-radius: 50%;
}
.sky-hill {
  filter: blur(var(--sky-blur));
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -50px;
  height: 150px;
  border-radius: 50% 50% 0 0;
  background: #07050a;
}
.sky-palace {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background: url('assets/mics/palace_bg.svg') center bottom / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 190, 120, 0.45));
}
.sky-txt {
  z-index: 2;
  position: absolute;
  left: 0;
  right: 0;
  top: 24%;
  padding: 0 16px;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}
.sky-time {
  font: 900 clamp(46px, 9vw, 92px) / 1 var(--font-heading);
  color: #fff1d2;
}
.sky-name {
  margin-top: 8px;
  font: 700 clamp(16px, 3vw, 28px) / 1.25 var(--font-heading);
  text-transform: uppercase;
  color: #fff;
}
.sky-meta {
  margin-top: 4px;
  font: 700 12px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd27a;
}
.sky-ctl {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 640px;
  margin: 22px auto 0;
}
.sky-ctl input {
  flex: 1;
  min-width: 0;
  accent-color: #ff7a1a;
}
.sky-2 {
  margin-top: 22px;
  background: linear-gradient(180deg, #ff7a1a 0%, #8a283c 55%, #ffbe5a 100%);
}
.stage-tl {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(94%, 760px);
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.stage-tl-head {
  margin: 0 0 8px;
  text-align: center;
  font: 900 clamp(24px, 4vw, 36px) / 1 var(--font-heading);
  text-transform: uppercase;
  color: #fff1d2;
}
.stage-tl ul {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  font: 600 clamp(12px, 1.5vw, 15px) / 1.2 var(--font-sans);
}
.stage-tl li {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 3px 0;
}
.stage-tl b {
  flex: none;
  min-width: 3.4em;
}
.stage-tl b {
  color: #ffd27a;
}
.stage-tl li span {
  margin-left: auto;
  opacity: 0.7;
  white-space: nowrap;
}
/* mobile: list fills the width */
@media (max-width: 720px) {
  .sky-2 {
    height: auto;
  }
  .stage-tl {
    position: relative;
    left: auto;
    transform: none;
    width: auto;
    padding: 16px;
  }
  .stage-tl li {
    padding: 6px 0;
  }
}
.sky-list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .sky-stars i {
    animation: none;
  }
}

/* ===== 3D map UI: simplified controls, site palette (oak panels, brass trim, pumpkin accent) ===== */
/* Fewer controls: the landmark list, orbit/top/fest presets, compass and fullscreen are enough */
.map-hud-top .hud-top-center,
#hudSnapBtn,
.earth-actions,
.esp-zoom-container,
.esp-section-heading:has(+ .earth-actions),
.esp-section-heading:has(+ .esp-zoom-container),
.earth-floating-zoom,
.bar #bHos,
.bar #bRaj,
.bar .bar-icon {
  display: none !important;
}

.earth-side-panel,
.hud-brand-pill,
.hud-guide-btn,
.hud-jewel-compass,
.hud-icon-btn {
  background: rgba(27, 19, 16, 0.92);
  border: 1px solid rgba(201, 160, 90, 0.35);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 220, 160, 0.08);
}
.earth-side-panel {
  border-radius: 16px;
}
.hud-guide-btn:hover,
.hud-jewel-compass:hover,
.hud-icon-btn:hover {
  border-color: #ff7a1a;
  color: #ffa23d;
}

.esp-main-title,
.hud-brand-text {
  font-family: 'Cinzel Decorative', serif;
  letter-spacing: 0.08em;
}
.esp-sub-title {
  font-family: 'Spectral', serif;
  font-style: italic;
}
.esp-badge {
  background: linear-gradient(135deg, #c9a05a, #8a6a32);
  color: #1a0c02;
}
.esp-badge-count {
  background: rgba(255, 122, 26, 0.14);
  color: #ffa23d;
}
.esp-section-heading {
  color: #c9a05a;
}

.esp-landmark-item {
  background: rgba(255, 180, 90, 0.04);
  border-color: rgba(201, 160, 90, 0.14);
}
.esp-landmark-item:hover {
  background: rgba(255, 140, 40, 0.09);
  border-color: rgba(255, 122, 26, 0.45);
}
.esp-landmark-item.active {
  background: rgba(255, 122, 26, 0.16);
  border-color: #ff7a1a;
  box-shadow: 0 0 14px rgba(255, 122, 26, 0.25);
}
.esp-landmark-item.fest-highlight {
  background: rgba(179, 20, 31, 0.14);
  border-color: rgba(179, 20, 31, 0.5);
}
.esp-lm-index {
  color: #c9a05a;
}

.bar {
  background: rgba(27, 19, 16, 0.92);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(201, 160, 90, 0.35);
}
.bar button {
  font-family: 'Inter', system-ui, sans-serif;
}
.bar button.on {
  background: #ff7a1a;
  color: #1a0c02;
}
.bar button#bOval,
.bar button#bOval.on {
  background: linear-gradient(135deg, #8e0f1c, #ff7a1a);
  color: #fff;
  box-shadow: none;
}

.tag {
  background: rgba(27, 19, 16, 0.92);
  border-color: rgba(201, 160, 90, 0.35);
  color: var(--ink);
}

/* ==========================================================================
   Venue selector redesign: arched jharokha cards with gold numerals,
   a diya-glow active state and a crest-style FEST badge
   ========================================================================== */
.vp-bar {
  padding: 30px 22px 22px 30px;
}
.vp-list {
  gap: 16px;
  padding: 18px 4px 8px;
}
.vp-chip {
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  width: 148px;
  padding: 26px 12px 16px;
  text-align: center;
  border-radius: 74px 74px 14px 14px;
  border: 1px solid rgba(255, 190, 120, 0.22);
  border-left: 1px solid rgba(255, 190, 120, 0.22);
  border-bottom: 3px solid var(--cat);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 190, 110, 0.16), transparent 62%),
    linear-gradient(180deg, #241a2a, #130d18);
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.12);
}
.vp-chip::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 69px 69px 10px 10px;
  border: 1px dashed rgba(255, 210, 122, 0.22);
  pointer-events: none;
}
.vp-no {
  font:
    800 30px/1 'Cinzel Decorative',
    serif;
  letter-spacing: 0;
  background: linear-gradient(180deg, #ffe7a8, var(--cat) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vp-text {
  justify-items: center;
  gap: 4px;
}
.vp-text b {
  font: 700 13px/1.25 var(--font-sans);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
.vp-text small::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--cat);
  box-shadow: 0 0 6px var(--cat);
}
.vp-fest {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  color: #1a0c02;
  background: linear-gradient(90deg, #ffd27a, #ff9a3c);
  border: 0;
  box-shadow: 0 4px 10px rgba(255, 122, 26, 0.45);
}
.vp-chip:hover {
  transform: translateY(-5px);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(255, 179, 71, 0.25);
}
.vp-chip.active {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 240, 200, 0.55), transparent 65%),
    linear-gradient(180deg, #ff9a3c, #c43a0a);
  border-color: #ffd27a;
  border-bottom-color: #ffd27a;
  box-shadow:
    0 0 26px rgba(255, 122, 26, 0.6),
    0 10px 24px rgba(0, 0, 0, 0.5);
}
.vp-chip.active::before {
  border-color: rgba(26, 12, 2, 0.35);
}
.vp-chip.active .vp-no {
  background: none;
  color: #2a1004;
}
.vp-chip.active .vp-text b {
  color: #1a0c02;
}
.vp-chip.active .vp-text small::before {
  background: #1a0c02;
  box-shadow: none;
}
.vp-chip.active .vp-fest {
  color: #ffd27a;
  background: #1a0c02;
  border: 1px solid rgba(255, 210, 122, 0.6);
}
@media (max-width: 600px) {
  .vp-chip {
    width: 132px;
  }
}

/* ==========================================================================
   Building tags redesign: carved nameplates with a gold diamond jewel,
   a double brass rule and a diamond pointer toward the building
   ========================================================================== */
.view .tag {
  --tc: #e0b860;
  padding: 7px 16px 7px 12px;
  border-radius: 10px;
  gap: 9px;
  font: 700 11.5px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(224, 184, 96, 0.45);
  border-bottom: 2px solid var(--tc);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(34, 24, 40, 0.96), rgba(14, 9, 20, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 190, 0.14),
    inset 0 0 0 3px rgba(14, 9, 20, 0.9),
    inset 0 0 0 4px rgba(224, 184, 96, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.6);
  color: #fdf1d6;
}
.view .tag::before {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #fff2c4, var(--tc));
  box-shadow: 0 0 8px var(--tc);
}
.view .tag::after {
  width: 9px;
  height: 9px;
  top: calc(100% - 5px);
  margin-left: -4.5px;
  background: rgba(14, 9, 20, 0.96);
  border: 0;
  border-right: 2px solid var(--tc);
  border-bottom: 2px solid var(--tc);
  transform: rotate(45deg);
}
.view .tag:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tc) 40%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(44, 30, 50, 0.98), rgba(20, 12, 28, 0.98));
  border-color: var(--tc);
  color: #fff;
  box-shadow:
    inset 0 0 0 3px rgba(14, 9, 20, 0.9),
    inset 0 0 0 4px color-mix(in srgb, var(--tc) 45%, transparent),
    0 10px 26px rgba(0, 0, 0, 0.75),
    0 0 18px color-mix(in srgb, var(--tc) 55%, transparent);
}
.view .tag.r {
  --tc: #e5485a;
}
.view .tag.g {
  --tc: #5ee09a;
}
.view .tag.a {
  --tc: #e0763c;
}
.view .tag.o {
  --tc: #ff7a1a;
}
.view .tag.p {
  --tc: #c26be0;
}
.view .tag.e {
  --tc: #5aa9ff;
}
.view .tag.f {
  --tc: #f5a524;
}
.view .tag.m {
  --tc: #f59e0b;
}
.view .tag.r,
.view .tag.g,
.view .tag.a,
.view .tag.o,
.view .tag.p,
.view .tag.e,
.view .tag.f,
.view .tag.m {
  border-left-width: 1px;
}
/* Fest tag keeps its festival gradient */
.view #t10 {
  background: linear-gradient(135deg, #5b1a8f, #d6246e 55%, #ff9a2e);
  border-color: rgba(255, 215, 120, 0.85);
  --tc: #ffd27a;
}
.view #t10::after {
  background: #d6246e;
}

/* ==========================================================================
   Place card redesign: palace plaque with a double gold frame, gradient
   Cinzel title, ribbon kicker, diamond divider and brass action buttons
   ========================================================================== */
#view .earth-place-card {
  padding: 22px 22px 18px;
  border-radius: 20px;
  border: 1px solid rgba(224, 184, 96, 0.5);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255, 122, 26, 0.2), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(176, 107, 224, 0.14), transparent 55%),
    linear-gradient(165deg, #231729, #0f0a14);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 230, 190, 0.16),
    inset 0 0 0 5px #120c18,
    inset 0 0 0 6px rgba(224, 184, 96, 0.22);
}
#view .earth-place-card::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, #ffd27a 25%, #ff7a1a 75%, transparent);
  pointer-events: none;
}
#view .earth-card-meta {
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding-right: 40px;
}
#view .earth-card-kicker {
  padding: 4px 11px;
  border-radius: 999px;
  color: #1a0c02;
  background: linear-gradient(90deg, #ffd27a, #ff9a3c);
  font: 800 9.5px var(--font-sans);
  letter-spacing: 0.16em;
  box-shadow: 0 4px 12px rgba(255, 122, 26, 0.35);
}
#view .earth-card-badge {
  margin-left: auto;
  color: #ffd27a;
  font: 700 11px var(--font-sans);
}
#view .earth-place-card h2 {
  margin: 0 0 12px;
  font:
    700 21px/1.2 'Cinzel Decorative',
    serif;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #fff3cf, #e0b860);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#view .earth-place-card h2::after {
  content: '';
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 10px;
  background:
    linear-gradient(45deg, transparent 38%, #e0b860 38% 62%, transparent 62%) center / 7px 7px
      no-repeat,
    linear-gradient(90deg, transparent, rgba(224, 184, 96, 0.6)) left center / calc(50% - 10px) 1px
      no-repeat,
    linear-gradient(270deg, transparent, rgba(224, 184, 96, 0.6)) right center / calc(50% - 10px)
      1px no-repeat;
}
#view .earth-place-card p {
  color: rgba(255, 244, 224, 0.82);
  font: 400 13px/1.6 var(--font-sans);
}
#view .earth-card-close {
  right: 16px;
  top: 16px;
  width: 30px;
  height: 30px;
  color: #ffd27a;
  background: rgba(224, 184, 96, 0.08);
  border: 1px solid rgba(224, 184, 96, 0.5);
}
#view .earth-card-close:hover {
  color: #1a0c02;
  background: #ffd27a;
  border-color: #ffd27a;
}
#view .earth-card-actions button {
  min-height: 38px;
  border-radius: 10px;
  color: #ffd27a;
  background: transparent;
  border: 1px solid rgba(224, 184, 96, 0.5);
  font: 700 12px var(--font-sans);
  letter-spacing: 0.04em;
}
#view .earth-card-actions button:hover {
  background: rgba(224, 184, 96, 0.14);
  border-color: #ffd27a;
}
#view .earth-card-actions button[data-card-route] {
  color: #1a0c02;
  border: 0;
  background: linear-gradient(135deg, #ffd27a, #ff7a1a);
  box-shadow: 0 6px 16px rgba(255, 122, 26, 0.4);
}
#view .earth-card-actions button[data-card-route]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 122, 26, 0.6);
}

/* Place card sits at the bottom right on desktop */
@media (min-width: 769px) {
  #view .earth-place-card {
    left: auto;
    right: 24px;
    bottom: 86px;
    width: min(390px, calc(100% - 382px));
  }
}

/* Mobile view: When clicking a building name, show ONLY the building name — hide full description & full details */
@media (max-width: 768px) {
  #view .earth-place-card,
  .earth-place-card {
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--safe-bottom, 0px) + 76px) !important;
    transform: translateX(-50%) translateY(14px) !important;
    width: auto !important;
    max-width: min(92vw, 380px) !important;
    min-width: 160px;
    padding: 10px 42px 10px 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(224, 184, 96, 0.6) !important;
    background:
      linear-gradient(180deg, rgba(35, 23, 41, 0.96), rgba(15, 10, 20, 0.98)) !important;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.8),
      0 0 20px rgba(224, 184, 96, 0.2),
      inset 0 1px 0 rgba(255, 230, 190, 0.2) !important;
    text-align: left;
    display: flex !important;
    align-items: center;
    pointer-events: auto;
    box-sizing: border-box;
    overflow: hidden;
  }

  #view .earth-place-card.on,
  .earth-place-card.on {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  #view .earth-place-card::before,
  .earth-place-card::before,
  #view .earth-place-card::after,
  .earth-place-card::after {
    display: none !important;
  }

  #view .earth-place-card h2,
  .earth-place-card h2 {
    margin: 0 !important;
    font: 700 14px/1.3 'Cinzel', serif !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffd27a !important;
    background: linear-gradient(180deg, #fff3cf, #e0b860) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }

  #view .earth-place-card h2::after,
  .earth-place-card h2::after {
    display: none !important;
  }

  /* CRITICAL: Hide full description, meta chips, events and actions in mobile view */
  #view .earth-place-card p,
  .earth-place-card p,
  #view .earth-place-card .earth-card-meta,
  .earth-place-card .earth-card-meta,
  #view .earth-place-card .earth-card-events,
  .earth-place-card .earth-card-events,
  #view .earth-place-card .earth-card-actions,
  .earth-place-card .earth-card-actions {
    display: none !important;
  }

  #view .earth-place-card .earth-card-close,
  .earth-place-card .earth-card-close {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    line-height: 1 !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(224, 184, 96, 0.12) !important;
    border: 1px solid rgba(224, 184, 96, 0.45) !important;
    color: #ffd27a !important;
    padding: 0 !important;
  }

  /* Fallback info card in festival-scene.js: show only building name, hide description/buttons */
  #view .info,
  .info {
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--safe-bottom, 0px) + 76px) !important;
    transform: translateX(-50%) translateY(8px) !important;
    width: auto !important;
    max-width: min(92vw, 380px) !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    text-align: center !important;
  }

  #view .info.on,
  .info.on {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  #view .info::before,
  .info::before {
    display: none !important;
  }

  #view .info h4,
  .info h4 {
    margin: 0 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #view .info .row,
  .info .row,
  #view .info button,
  .info button {
    display: none !important;
  }

  /* Hide extra tag subtitles/descriptions on mobile map tags */
  .tag .tag-sub {
    display: none !important;
  }
}

/* ==========================================================================
   Top HUD redesign: opaque lacquered pills with gold rims, drawn above the
   map tags so nothing shows through them
   ========================================================================== */
#view .map-hud-top {
  z-index: 5000;
}
#view .hud-brand-pill,
#view .hud-guide-btn,
#view .hud-lighting-dock,
#view .hud-icon-btn {
  background: linear-gradient(180deg, rgba(255, 230, 190, 0.08), transparent 50%), #17101d;
  border: 1px solid rgba(224, 184, 96, 0.55);
  box-shadow:
    inset 0 0 0 3px #17101d,
    inset 0 0 0 4px rgba(224, 184, 96, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.65);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#view .hud-brand-pill {
  padding: 9px 20px 9px 16px;
  gap: 10px;
}
#view .hud-brand-text {
  font:
    700 12px 'Cinzel Decorative',
    serif;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, #fff3cf, #e0b860);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#view .hud-guide-btn {
  padding: 9px 18px 9px 14px;
  color: #ffd27a;
  font: 700 12px var(--font-sans);
  letter-spacing: 0.05em;
}
#view .hud-guide-btn:hover {
  color: #1a0c02;
  background: linear-gradient(135deg, #ffd27a, #ff9a3c);
  border-color: #ffd27a;
  box-shadow: 0 10px 24px rgba(255, 122, 26, 0.45);
}
#view .hud-light-btn.active {
  color: #1a0c02;
  background: linear-gradient(135deg, #ffd27a, #ff9a3c);
  border: 0;
  box-shadow: 0 2px 10px rgba(255, 122, 26, 0.45);
}
#view .hud-icon-btn {
  color: #ffd27a;
}

/* ==========================================================================
   Camera dock redesign: lacquered plaque with a double gold rim, uppercase
   tracked labels, gold active state and a festival-gradient Fest button
   ========================================================================== */
#view .bar {
  gap: 4px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(224, 184, 96, 0.55);
  background: linear-gradient(180deg, rgba(255, 230, 190, 0.08), transparent 55%), #17101d;
  box-shadow:
    inset 0 0 0 3px #17101d,
    inset 0 0 0 4px rgba(224, 184, 96, 0.2),
    0 14px 32px rgba(0, 0, 0, 0.7);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#view .bar button {
  position: relative;
  border-radius: 12px;
  padding: 10px 18px;
  color: rgba(255, 244, 224, 0.78);
  font: 700 11.5px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#view .bar button:hover {
  color: #ffd27a;
  background: rgba(224, 184, 96, 0.1);
}
#view .bar button.on {
  color: #1a0c02;
  background: linear-gradient(135deg, #ffd27a, #ff9a3c);
  box-shadow: 0 4px 14px rgba(255, 122, 26, 0.45);
}
#view .bar button#bOval {
  margin-left: 4px;
  color: #fff;
  background: linear-gradient(135deg, #5b1a8f, #d6246e 55%, #ff9a2e);
  box-shadow:
    inset 0 0 0 1px rgba(255, 215, 120, 0.7),
    0 4px 16px rgba(214, 36, 110, 0.5);
}
#view .bar button#bOval:hover {
  color: #fff;
  box-shadow:
    inset 0 0 0 1px #ffd27a,
    0 6px 22px rgba(214, 36, 110, 0.7);
}

/* ==========================================================================
   Scroll-expand map: the section pins, then the map grows from the top
   corners to fill the screen (clip-path is driven from map-section.js)
   ========================================================================== */
.map-scrollfx .map-runway {
  height: 260vh;
}
.map-scrollfx .map-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  padding-top: calc(var(--header-height, 72px) + 24px);
  overflow: hidden;
}
.map-scrollfx .map-head {
  position: relative;
  z-index: 1;
  will-change: opacity, transform;
}
.map-scrollfx .map-viewport-wrapper {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  will-change: clip-path;
}
.map-scrollfx .map-viewport-wrapper::before,
.map-scrollfx .map-viewport-wrapper::after {
  display: none;
}

/* Guest card: role, bank and place each on their own line */
.lu-bio > span {
  display: block;
}

/* Sponsor logos: no white plate; a soft white halo keeps dark marks legible on the dark card */
.sponsor-logo-box:has(.sponsor-logo) {
  background: transparent;
}
.sponsor-logo {
  max-height: 92px;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}

/* VC letter stands alone in its row, centred */
.ab-vc {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

/* Sponsor cards: identical size regardless of logo/name width */
.sponsor-card {
  flex: 0 0 auto;
  width: min(420px, 100%);
  box-sizing: border-box;
}

/* Letter text: justified gaps look broken on narrow screens, so left-align */
@media (max-width: 600px) {
  .ab-body {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

/* Campus map: the search box is gone */
.esp-search-container {
  display: none !important;
}

/* Mobile view: One finger navigates the map, two fingers zoom in & out */
@media (pointer: coarse), (max-width: 768px) {
  #view canvas,
  canvas#c {
    touch-action: none !important;
  }
}

/* Mobile view: Gesture hint formatting */
@media (max-width: 768px) {
  .map-gesture-hint .desktop-hint {
    display: none !important;
  }
  .map-gesture-hint .mobile-hint {
    display: inline !important;
  }
  .map-gesture-hint {
    display: flex !important;
    font-size: 11px !important;
    padding: 6px 14px !important;
    bottom: calc(var(--safe-bottom, 0px) + 72px) !important;
    letter-spacing: 0.02em;
  }
}
@media (min-width: 769px) {
  .map-gesture-hint .mobile-hint {
    display: none !important;
  }
}

/* Phones: camera dock fits the screen instead of clipping its labels */
@media (max-width: 600px) {
  #view .bar {
    width: calc(100% - 24px);
    max-width: 420px;
    box-sizing: border-box;
    gap: 4px;
    padding: 5px;
  }
  #view .bar button {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 4px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-align: center;
  }
  #view .bar button#bOval {
    margin-left: 0;
  }
}

/* Phones: map is a poster in the page; "Open Map" shows it full screen with a close button */
.map-fs-cover,
.map-fs-close {
  display: none;
}
@media (max-width: 820px) and (pointer: coarse) {
  .map-viewport-wrapper {
    height: min(60vh, 460px);
    isolation: isolate; /* keeps the poster above the map tags and HUD without leaving the section */
  }
  .map-fs-cover {
    position: absolute;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    padding: 24px;
    color: #fff;
    background:
      linear-gradient(rgba(8, 4, 14, 0.55), rgba(8, 4, 14, 0.7)),
      url('assets/mics/campus-map.webp') center / cover;
  }
  .map-fs-cover strong {
    font: 800 24px / 1.1 var(--font-heading);
  }
  .map-viewport-wrapper.map-fs {
    position: fixed;
    inset: 0;
    z-index: 2000;
    width: 100%;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    clip-path: none;
  }
  .map-fs .map-fs-cover {
    display: none;
  }
  .map-fs .map-fs-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10001;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(224, 184, 96, 0.5);
    background: rgba(10, 5, 20, 0.85);
    color: #fff;
    font-size: 18px;
  }
  .map-viewport-wrapper.map-fs #view canvas,
  .map-viewport-wrapper.map-fs canvas#c {
    touch-action: none;
  }
}

/* Desktop: once the map is fully open it holds the scroll; Esc hands the page back */
.map-esc-hint {
  position: absolute;
  left: 50%;
  top: calc(var(--header-height, 72px) + 14px); /* the open map is clipped below the site header */
  z-index: 60;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(10, 5, 20, 0.85);
  border: 1px solid rgba(224, 184, 96, 0.5);
  color: #fff1d2;
  font:
    600 12px system-ui,
    sans-serif;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.map-locked .map-esc-hint {
  opacity: 1;
}
.map-esc-hint.alert {
  background: #ff7a1a;
  color: #1a0c02;
  border-color: #fff1d2;
  font-size: 14px;
}
/* Browser full screen: the scroll-expand clip must not cut the top strip */
.map-scrollfx .map-viewport-wrapper:fullscreen {
  clip-path: none !important;
}

/* ==========================================================================
   Map UI: venue drawer, photo-card landmarks, camera dial
   ========================================================================== */

/* Venue card: photo header, fact rows, actions. Desktop = full-height drawer on the right */
.ec-hero {
  position: relative;
  aspect-ratio: 5 / 3;
  background-color: #1a1220;
  border-radius: 14px 14px 0 0;
}
.ec-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(15, 10, 20, 0.95));
}
.ec-kicker {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  padding: 4px 11px;
  border-radius: 999px;
  color: #1a0c02;
  background: linear-gradient(90deg, #ffd27a, #ff9a3c);
  font: 800 9.5px var(--font-sans);
  letter-spacing: 0.14em;
}
.ec-body {
  padding: 4px 18px 18px;
}
.ec-facts {
  margin: 12px 0;
}
.ec-facts div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid rgba(224, 184, 96, 0.18);
  font: 500 12px var(--font-sans);
}
.ec-facts span {
  color: rgba(255, 244, 224, 0.55);
}
.ec-facts b {
  text-align: right;
  font-weight: 600;
  color: #fff1d2;
  text-transform: capitalize;
}
.earth-card-actions {
  display: flex;
  gap: 8px;
}
.earth-card-actions button {
  flex: 1;
}
#view .earth-place-card {
  padding: 0;
}
@media (min-width: 769px) {
  #view .earth-place-card {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 340px;
    max-height: none;
    border-radius: 0;
    border-width: 0 0 0 1px;
    transform: translateX(24px);
  }
  #view .earth-place-card.on {
    transform: none;
  }
  #view .ec-hero {
    border-radius: 0;
  }
  /* the dial moves out of the drawer's way */
  #mapStage #view:has(.earth-place-card.on) .bar {
    right: 364px;
  }
}
@media (max-width: 768px) {
  .ec-hero {
    display: none;
  }
  .ec-body {
    padding-top: 18px;
  }
}

/* Landmarks: two-column photo cards (an aerial crop of the map at each place) */
.earth-side-panel .esp-landmarks-scroll {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}
.esp-landmarks-scroll .esp-landmark-item {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.esp-landmarks-scroll .esp-landmark-item:hover {
  transform: translateY(-2px);
}
.esp-landmarks-scroll .esp-lm-thumb {
  position: relative;
  display: block;
  aspect-ratio: 5 / 3;
  background-color: #1a1220;
}
.esp-landmarks-scroll .esp-lm-thumb .esp-lm-index {
  position: absolute;
  left: 5px;
  top: 5px;
  min-width: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(10, 5, 20, 0.8);
}
.esp-landmarks-scroll .esp-lm-thumb .esp-lm-fest {
  position: absolute;
  right: 5px;
  top: 5px;
}
.esp-landmarks-scroll .esp-lm-details {
  padding: 6px 8px 8px;
}

/* Camera dial: Agnee Fest in the centre, 3D Orbit above, Top View below */
#mapStage #view .bar {
  left: auto;
  right: 28px;
  bottom: 52px;
  width: 128px;
  height: 128px;
  max-width: none;
  padding: 0;
  gap: 0;
  transform: none;
  border-radius: 50%;
  overflow: visible;
  display: block;
  background: rgba(27, 19, 16, 0.92);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(201, 160, 90, 0.35),
    inset 0 0 0 9px rgba(20, 12, 28, 0.9),
    inset 0 0 0 10px rgba(224, 184, 96, 0.22);
}
#mapStage #view .bar button {
  position: absolute;
  flex: none;
  margin: 0;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
#mapStage #view .bar #bFree,
#mapStage #view .bar #bTop {
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border: 1px solid rgba(224, 184, 96, 0.4);
  background: rgba(27, 19, 16, 0.96);
  font-size: 11px;
}
#mapStage #view .bar #bFree {
  top: -18px;
}
#mapStage #view .bar #bTop {
  bottom: -18px;
}
#mapStage #view .bar #bFree.on,
#mapStage #view .bar #bTop.on {
  background: #e0b860;
  border-color: #e0b860;
  color: #1a1006;
}
#mapStage #view .bar #bOval {
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  min-width: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  white-space: normal;
  line-height: 1.15;
  font-size: 10px;
  text-align: center;
  box-shadow: 0 0 18px rgba(255, 122, 26, 0.55);
}
#view .earth-card-close {
  z-index: 3;
}

/* Dial icons: drawn with masks so they take the button colour (replaces the emoji and text glyphs) */
#mapStage #view .bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#mapStage #view .bar button::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  opacity: 1;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
#mapStage #view .bar #bFree {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.5' transform='rotate%28-30 12 12%29'/%3E%3C/svg%3E");
}
#mapStage #view .bar #bTop {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18M15 3v18'/%3E%3C/svg%3E");
}
#mapStage #view .bar #bOval {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2c1 4 5 6 5 11a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 0-4-1-6 1-10z'/%3E%3C/svg%3E");
  flex-direction: column;
  gap: 3px;
}
#mapStage #view .bar #bOval::before {
  width: 22px;
  height: 22px;
}

/* Gesture hint: top centre, clear of the camera dial in the bottom-right corner */
#view .map-gesture-hint {
  top: 76px;
  bottom: auto;
  max-width: calc(100% - 32px);
  text-align: center;
}

/* Video coverflow (same stack as the photos): cards show a thumbnail or a branded tile, a play badge and the title */
.gf-video {
  margin-top: 28px;
}
.gv-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, #4a1f6e, #1a0c24 70%) center / cover;
}
.gv-play {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(255, 122, 26, 0.92);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
.gv-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 14px 12px;
  background: linear-gradient(transparent, rgba(8, 4, 14, 0.92));
  color: #fff1d2;
  font: 700 14px var(--font-sans);
}

/* Local video files: same 16:9 frame as the YouTube player, and a first-frame preview on stack cards */
.video-embed-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.gv-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.gv-play,
.gv-card figcaption {
  z-index: 1;
}

/* 3D map loading progress (shown in the poster after the visitor clicks Launch) */
.map-load { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.map-load[hidden] { display: none; }
.map-load-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.map-load-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e0b860, #ff7a1a); transition: width 0.35s ease; }
.map-load-pct { min-width: 3ch; font: 700 13px var(--font-sans, system-ui); color: #fff1d2; text-align: right; }