:root {
  --gold: #D4AF37;
  --dark: #0A0A0A;
  --cream: #FAF8F3;
  --accent: #8B7355;
  --shadow: rgba(212, 175, 55, 0.15);
  --transition: cubic-bezier(0.16, 1, 0.3, 1);
  --sand: #E8D5B0;
  --dusk: #C4956A;
  --deep: #1C1410;
  /* Brand wine — the confident accent for active/interactive states */
  --wine: #7E2A33;
  --wine-bright: #A64450;
  --wine-deep: #6B232B;

  /* Refined surfaces */
  --surface: #FFFCF7;
  --surface-raised: rgba(255, 252, 247, 0.95);
  --surface-hover: rgba(255, 252, 247, 0.98);
  --border-subtle: rgba(28, 20, 16, 0.06);
  --border-medium: rgba(28, 20, 16, 0.10);
  --text-primary: #1a1a1a;
  --text-secondary: rgba(28, 20, 16, 0.55);
  --text-tertiary: rgba(28, 20, 16, 0.35);

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Shadow system — warm-toned */
  --shadow-sm: 0 1px 3px rgba(28, 20, 16, 0.04), 0 1px 2px rgba(28, 20, 16, 0.02);
  --shadow-md: 0 4px 12px rgba(28, 20, 16, 0.06), 0 1px 3px rgba(28, 20, 16, 0.04);
  --shadow-lg: 0 8px 28px rgba(28, 20, 16, 0.08), 0 2px 6px rgba(28, 20, 16, 0.04);
  --shadow-xl: 0 16px 48px rgba(28, 20, 16, 0.10), 0 4px 12px rgba(28, 20, 16, 0.05);

  /* Radius tokens */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Type scale */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 44px;

  /* Layout tokens */
  --content-max: 1200px;
  --content-narrow: 720px;
  --nav-height: 52px;

  /* Motion tokens */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
}

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

body {
  font-family: 'Jost', sans-serif;
  /* The whole page sits in warm evening light, not on flat paper — a soft
     golden wash pooling from the top so the atmosphere carries past the hero. */
  background:
    radial-gradient(130% 44% at 50% -4%, rgba(238, 204, 156, 0.34) 0%, rgba(238, 204, 156, 0) 58%),
    var(--cream);
  background-attachment: fixed;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.app-container {
  min-height: 100vh;
  /* Flex column so the footer's margin-top:auto actually pins it to the
     viewport bottom on short views (it was inert without this) */
  display: flex;
  flex-direction: column;
  padding-top: calc(52px + env(safe-area-inset-top));
  /* No bottom padding: the dusk footer's street level runs flush to the
     viewport bottom (the old cream footer blended into a 40px strip here) */
  padding-bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
}

@media (min-width: 768px) {
  .app-container {
    max-width: var(--content-narrow);
    margin: 0 auto;
  }

  .event-card-image {
    width: 110px;
  }
}

@media (min-width: 1024px) {
  .app-container {
    max-width: var(--content-max);
  }

  .events {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .tech-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
  }
}

/* Navigation */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(52px + env(safe-area-inset-top));
  background: rgba(250, 248, 243, 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: env(safe-area-inset-top) max(24px, env(safe-area-inset-left)) 0 max(24px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  z-index: 100;
}

@media (min-width: 768px) {
  .nav-bar {
    padding-left: max(32px, calc((100% - var(--content-max)) / 2 + 32px));
    padding-right: max(32px, calc((100% - var(--content-max)) / 2 + 32px));
  }
}

.nav-brand {
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-spring);
  display: flex;
  align-items: center;
}

.nav-brand-img {
  height: 30px;
  width: auto;
  filter: contrast(1.1);
  display: block;
}

.nav-brand:hover {
  transform: scale(1.06) rotate(6deg);
}

.nav-items {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
  padding: 8px 18px;
  border-radius: var(--radius-xl);
  position: relative;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 2.5px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.nav-item:hover {
  background: rgba(28, 20, 16, 0.03);
}

.nav-item.active {
  background: rgba(28, 20, 16, 0.04);
}

.nav-item.active::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-item.active:hover {
  background: rgba(28, 20, 16, 0.06);
}

.nav-item-icon {
  padding: 10px 12px;
}

.nav-icon {
  width: 18px;
  height: 18px;
  transition: all var(--duration-normal) var(--ease-spring);
  stroke: var(--dark);
  opacity: 0.65;
}

.nav-item:hover .nav-icon {
  stroke: var(--dark);
  opacity: 1;
}

.nav-item.active .nav-icon {
  stroke: var(--dark);
  opacity: 1;
}

.nav-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
  letter-spacing: 0.1px;
  transition: color var(--duration-normal) var(--ease-spring), opacity var(--duration-normal) ease;
  opacity: 0.65;
}

.nav-item:hover .nav-label {
  color: var(--dark);
  opacity: 1;
}

.nav-item.active .nav-label {
  color: var(--dark);
  opacity: 1;
  font-weight: 600;
}

.nav-separator {
  width: 1px;
  height: 20px;
  background: var(--border-medium);
  margin: 0 4px;
  flex-shrink: 0;
}

.favorite-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--gold);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

@media (max-width: 767px) {
  .nav-brand {
    font-size: 22px;
  }

  .nav-items {
    gap: 4px;
  }

  .nav-item {
    padding: 10px 10px;
    min-height: 44px;
  }

  .nav-item-icon {
    padding: 10px 8px;
    min-height: 44px;
  }

  .nav-label {
    font-size: var(--text-sm);
    letter-spacing: 0;
  }

  .nav-separator {
    display: none;
  }
}

/* ============================================================
   HERO — Editorial luxury header (homepage only)
   ============================================================ */

.hero {
  position: relative;
  padding: 12px 24px 14px;
  overflow: visible;
}

/* Landing hero — homepage-specific overrides */

.view-home .hero.hero-landing .hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.view-home .hero.hero-landing .hero-title-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.view-home .hero.hero-landing .hero-rule {
  margin-bottom: 6px;
}

/* Title/logo sizes now set in base .hero-title / .hero-title-logo */

@media (min-width: 768px) {
  .hero {
    padding: 26px 32px 18px;
  }

  .hero-title {
    font-size: 76px;
    letter-spacing: -3.6px;
  }

  .hero-title-logo {
    height: 58px;
    margin-top: 8px;
  }

  .hero-location-row {
    margin-top: 14px;
  }

  .region-name {
    font-size: var(--text-base);
  }
}

@media (min-width: 1024px) {
  .hero {
    padding: 34px 40px 24px;
  }

  .hero-title {
    font-size: 84px;
    letter-spacing: -4px;
  }

  .hero-title-logo {
    height: 64px;
    margin-top: 10px;
  }
}

@media (max-width: 380px) {
  .view-home .hero.hero-landing {
    padding: 10px 20px 6px;
  }
  /* Title/logo 380px sizes now set in base hero styles */
}

/* Scroll indicator — hidden (compact hero doesn't need it) */
.hero-scroll-hint {
  display: none;
}

.hero-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--dusk), transparent);
  animation: scrollPulse 2.5s ease-in-out infinite;
}

@keyframes scrollPulse {

  0%,
  100% {
    opacity: 0.4;
    transform: scaleY(1);
  }

  50% {
    opacity: 0.8;
    transform: scaleY(1.15);
  }
}

/* Warm Côte d'Azur gradient background */
.hero-bg {
  position: absolute;
  inset: 0;
  /* Golden hour: a low warm sun glowing from the upper right over a cream→sand
     wash, so the page opens like an evening room rather than a flat banner. */
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(232, 179, 106, 0.55) 0%, rgba(232, 179, 106, 0) 42%),
    radial-gradient(90% 70% at 12% 6%, rgba(212, 175, 55, 0.14) 0%, rgba(212, 175, 55, 0) 46%),
    linear-gradient(162deg, #FBF6EE 0%, #F4E7D2 46%, #EDD7B8 78%, #E6CBA4 100%);
  z-index: 0;
}

/* A soft golden glow that breathes, like lamplight settling in. */
.hero-bg::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -8%;
  width: 60%;
  height: 150%;
  background: radial-gradient(circle at 60% 40%, rgba(245, 210, 150, 0.5), rgba(245, 210, 150, 0) 62%);
  filter: blur(10px);
  pointer-events: none;
  animation: heroGlow 9s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  from { opacity: 0.7; transform: translateY(0) scale(1); }
  to   { opacity: 1;   transform: translateY(-8px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg::before { animation: none; }
}

/* Faint vignette at the bottom edge */
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(250, 248, 243, 0.85));
}

/* Fine paper grain — barely-there texture that makes the light feel physical
   rather than a flat CSS gradient. The detail that reads as "printed", premium. */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* Hero panel transitions */
.hero-title-panel {
  transition: opacity 0.2s ease, transform 0.35s ease;
}

/* Region picker — dark immersive full-screen overlay */
.hero-region-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #1C1410;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-region-panel .region-panel-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, #1C1410 0%, #2A1D14 40%, #1A1612 100%);
  z-index: 0;
}

.hero-region-panel .region-panel-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
}

.region-panel-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(12px + env(safe-area-inset-top)) 28px 0;
  overflow: hidden;
}

.hero--picking .hero-title-panel {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.hero--picking .hero-region-panel {
  opacity: 1;
  pointer-events: auto;
}

/* Panel hero area */
.region-panel-hero {
  text-align: center;
  padding: 20px 0 28px;
}

.region-panel-pin {
  width: 36px;
  height: 36px;
  color: var(--dusk);
  margin-bottom: 14px;
  opacity: 0.8;
}

.region-panel-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0 0 8px;
}

.region-panel-subtitle {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  letter-spacing: 0.2px;
}

/* Close button */
.region-panel-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.25s ease;
  z-index: 2;
}

.region-panel-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Staggered entrance for mobile panel content */
.region-panel-hero,
.region-panel-list .region-panel-option,
.region-panel-list .region-panel-group-label,
.region-panel-list .region-panel-divider {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s var(--transition);
}

.hero--picking .region-panel-hero {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.hero--picking .region-panel-list .region-panel-option:nth-child(1),
.hero--picking .region-panel-list .region-panel-group:nth-child(1),
.hero--picking .region-panel-list .region-panel-divider:nth-child(1),
.hero--picking .region-panel-list> :nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

.hero--picking .region-panel-list> :nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

.hero--picking .region-panel-list> :nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.18s;
}

.hero--picking .region-panel-list> :nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.21s;
}

.hero--picking .region-panel-list> :nth-child(5) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.24s;
}

.hero--picking .region-panel-list> :nth-child(6) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.27s;
}

.hero--picking .region-panel-list> :nth-child(7) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.30s;
}

.hero--picking .region-panel-list .region-panel-group-label,
.hero--picking .region-panel-list .region-panel-divider {
  opacity: 1;
  transform: translateY(0);
}

.hero--picking .region-panel-group .region-panel-option {
  opacity: 1;
  transform: translateY(0);
}

/* Swipe handle (mobile sheet pattern) */
.region-panel-handle {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  cursor: grab;
  flex-shrink: 0;
}

.region-panel-handle-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.2s ease;
}

.region-panel-handle:active .region-panel-handle-bar {
  background: rgba(255, 255, 255, 0.4);
}

/* Auto-detect detected city sub-label */
.region-auto-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.region-auto-detected {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.3px;
}

.region-auto-detected:empty {
  display: none;
}

/* Checkmark indicator */
.region-option-check {
  display: none;
  align-items: center;
  flex-shrink: 0;
  color: var(--dusk);
}

.region-panel-option.active .region-option-arrow {
  display: none;
}

.region-panel-option.active .region-option-check {
  display: flex;
  animation: checkPop 0.3s var(--transition);
}

@keyframes checkPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  60% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Selection flash feedback */
.region-panel-option.selecting {
  background: rgba(196, 149, 106, 0.25) !important;
  color: #fff !important;
  transition: background 0.15s ease;
}

/* Tap micro-animation */
@keyframes regionOptionTap {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.97);
  }

  100% {
    transform: scale(1);
  }
}

.region-panel-option:active:not(.selecting) {
  animation: regionOptionTap 0.15s ease;
}

/* When region picker is open on mobile, elevate it above everything */
@media (max-width: 767px) {
  body.region-picking .hero-content {
    z-index: 9999;
  }

  body.region-picking .nav-bar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  body.region-picking .region-backdrop {
    pointer-events: none;
  }
}

/* Region backdrop */
.region-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(28, 20, 16, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.region-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop: card popover panel */
@media (min-width: 768px) {
  .hero-location-row {
    position: relative;
  }

  .hero-region-panel {
    position: absolute;
    inset: unset;
    top: 100%;
    right: 0;
    left: auto;
    width: 340px;
    z-index: 201;
    background: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.25s var(--transition), transform 0.25s var(--transition);
  }

  .hero--picking .hero-region-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(4px) scale(1);
  }

  .hero-region-panel .region-panel-bg {
    display: block;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 8px 40px rgba(28, 20, 16, 0.12),
      0 1px 3px rgba(28, 20, 16, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.45);
  }

  .hero-region-panel .region-panel-bg::after {
    display: none;
  }

  .region-panel-inner {
    padding: 20px 24px 16px;
    height: auto;
    overflow: visible;
    border-radius: 16px;
  }

  .region-panel-hero {
    display: none;
  }

  .region-panel-close {
    display: none;
  }

  .region-panel-handle {
    display: none;
  }

  .region-backdrop {
    display: none;
  }

  /* Reset stagger animations on desktop */
  .region-panel-list .region-panel-option,
  .region-panel-list .region-panel-group-label,
  .region-panel-list .region-panel-divider {
    opacity: 1;
    transform: none;
    transition: background 0.18s ease, color 0.18s ease;
  }

  /* Auto-detect sub-label on desktop */
  .region-auto-detected {
    color: rgba(139, 115, 85, 0.6);
  }
}

/* Region panel content — hidden eyebrow (replaced by panel hero) */
.region-panel-eyebrow {
  display: none;
}

.region-panel-list {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* Chevron rotates when picking */
.region-chevron {
  transition: transform 0.3s ease;
}

.hero--picking .region-chevron {
  transform: rotate(180deg);
}

/* Thin gold rule */
.hero-rule {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-bottom: 12px;
  opacity: 0;
  animation: heroRuleGrow 1s ease-out 0.3s forwards;
}

/* Main title */
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 49px;
  font-weight: 1000;
  color: var(--deep);
  letter-spacing: -2.2px;
  line-height: 0.95;
  margin-bottom: 0;
  opacity: 0;
  isolation: isolate;
  animation: heroFadeUp 0.9s var(--transition) 0.2s forwards;
}

@media (max-width: 380px) {
  .hero-title {
    font-size: 40px;
    letter-spacing: -1.5px;
  }
}

/* Soirée logo replacing the brand word — sits behind the rotating text */
.hero-title-logo {
  display: block;
  height: 38px;
  width: auto;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

@media (max-width: 380px) {
  .hero-title-logo {
    height: 29px;
    margin-top: 3px;
  }
}

/* Rotating title text — layered above logo */
.title-rotating {
  display: inline-block;
  position: relative;
  overflow: visible;
  vertical-align: bottom;
  height: 1.05em;
  z-index: 2;
  /* clip sides + top but let descenders bleed through the bottom */
  clip-path: inset(0 0 -0.3em 0);
}

.title-word {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.45s var(--transition), opacity 0.3s ease;
  white-space: nowrap;
  color: var(--dark);
  -webkit-text-stroke: 0.3px var(--dark);
  paint-order: stroke fill;
}

.title-word.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}

.title-word.exit {
  opacity: 0;
  transform: translateY(-100%);
}

/* Subtitle */
.hero-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 300;
  font-style: italic;
  color: var(--dusk);
  letter-spacing: 0.2px;
  line-height: 1.5;
  margin-bottom: 14px;
  opacity: 0;
  animation: heroFadeUp 0.9s var(--transition) 0.35s forwards;
}

/* Region selector row */
.hero-location-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 8px;
  opacity: 0;
  animation: heroFadeUp 0.9s var(--transition) 0.45s forwards;
}

/* Hero keyframes */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroRuleGrow {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: 48px;
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Legacy .header for other views (favorites, about) */
.header {
  padding: max(30px, env(safe-area-inset-top)) 25px 20px;
  position: relative;
}

.greeting {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 400;
  color: var(--dark);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--accent);
  font-weight: 400;
}

.location::before {
  content: '◆';
  font-size: 8px;
  color: var(--gold);
}

/* Region toggle pill */
.region-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 44px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s var(--transition);
  font-family: 'Jost', sans-serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.region-toggle:hover {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.region-toggle:active {
  transform: scale(0.97);
}

.hero--picking .region-toggle {
  opacity: 0;
  pointer-events: none;
}

.region-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.region-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dark);
}

.region-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hero--picking .region-chevron {
  transform: rotate(180deg);
}

/* ── Region picker panel ─────────────────────────────────────── */

.region-panel-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}

.region-panel-group {
  margin-bottom: 4px;
}

.region-panel-group-label {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dusk);
  opacity: 0.65;
  padding: 18px 0 8px;
}

.region-panel-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(196, 149, 106, 0.12), transparent 70%);
  margin: 6px 0;
}

.region-panel-option {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  padding: 10px 16px;
  margin: 2px 0;
  cursor: pointer;
  line-height: 1.15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  transition: all 0.2s var(--transition);
}

.region-option-content,
.region-option-arrow,
.region-option-check,
.region-option-check svg,
.region-auto-label {
  pointer-events: none;
}

.region-option-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.region-option-arrow {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: var(--dusk);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s var(--transition);
}

.region-panel-option:hover,
.region-panel-option:active {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 1);
}

.region-panel-option:hover .region-option-arrow,
.region-panel-option:active .region-option-arrow {
  opacity: 1;
  transform: translateX(0);
}

.region-panel-option.active {
  background: rgba(196, 149, 106, 0.15);
  color: #fff;
}

/* Auto-detect row */
.region-panel-option--auto {
  font-style: italic;
  color: var(--dusk);
}

.region-panel-option--auto:hover {
  background: rgba(196, 149, 106, 0.08);
}

.region-panel-auto-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--dusk);
  opacity: 0.7;
}

/* Desktop: card popover option styling */
@media (min-width: 768px) {
  .region-panel-eyebrow {
    display: none;
  }

  .region-panel-list {
    max-height: 380px;
    flex: unset;
    overflow-y: auto;
    margin: 0 -8px;
    padding: 0 8px;
    padding-bottom: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 149, 106, 0.3) transparent;
  }

  .region-panel-list::-webkit-scrollbar {
    width: 4px;
  }

  .region-panel-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .region-panel-list::-webkit-scrollbar-thumb {
    background: rgba(196, 149, 106, 0.3);
    border-radius: 2px;
  }

  .region-panel-option {
    font-size: 22px;
    padding: 8px 12px;
    margin: 1px 0;
    border-radius: 10px;
    color: var(--deep);
    background: none;
  }

  .region-panel-option--auto {
    font-size: 22px;
    padding: 8px 12px;
    color: var(--dusk);
  }

  .region-panel-option:hover {
    background: rgba(196, 149, 106, 0.08);
    color: var(--dusk);
  }

  .region-panel-option.active {
    background: rgba(196, 149, 106, 0.1);
    color: var(--dusk);
  }

  .region-option-arrow {
    display: none;
  }

  .region-panel-option::after {
    display: none;
  }

  .region-panel-option.active .region-option-check {
    display: flex;
    color: var(--dusk);
  }

  .region-panel-group-label {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(196, 149, 106, 0.6);
    padding: 12px 12px 4px;
  }

  .region-panel-divider {
    background: linear-gradient(90deg, rgba(196, 149, 106, 0.15), transparent);
    margin: 4px 12px;
  }

  .region-panel-group {
    margin-bottom: 2px;
  }
}



/* Coming Soon State */
.coming-soon-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  animation: fadeIn 0.5s ease;
}

.coming-soon-icon {
  font-size: 72px;
  margin-bottom: 20px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.coming-soon-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.coming-soon-text {
  font-size: 16px;
  color: var(--accent);
  margin-bottom: 30px;
  max-width: 400px;
  line-height: 1.6;
}

.decorative-line {
  position: absolute;
  top: 120px;
  left: 25px;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0;
  animation: lineGrow 1s ease-out 0.6s both;
}

@keyframes lineGrow {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: 40px;
    opacity: 0.4;
  }
}

/* Search */
.search-container {
  position: sticky;
  top: calc(52px + env(safe-area-inset-top));
  z-index: 90;
  padding: 10px 24px 8px;
  background: linear-gradient(to bottom, var(--cream) 70%, rgba(250, 248, 243, 0));
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Hide search/filters on home (gallery) view */
#discover-view.view-home .event-controls {
  display: none !important;
}

/* Hide gallery + home CTA on non-home views */
#discover-view:not(.view-home) .unified-gallery,
#discover-view:not(.view-home) #subscribe-strip-home {
  display: none;
}

.search-box {
  position: relative;
  flex: 1;
}

.search-input {
  width: 100%;
  padding: 11px 44px 11px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: white;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: var(--dark);
  transition: all var(--duration-normal) ease;
  box-shadow: var(--shadow-sm);
}

.search-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
  background: white;
}

.search-input::placeholder {
  color: var(--accent);
  opacity: 0.55;
}

.search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--accent);
  pointer-events: none;
  opacity: 0.6;
}

.search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 20px;
  padding: 0;
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
}

.search-clear.visible {
  display: flex;
}

/* Free Events Toggle - Premium Design */
.free-toggle-container {
  flex-shrink: 0;
}

.free-toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.free-toggle-text {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
  letter-spacing: 0.2px;
  transition: color 0.3s ease;
}

.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
}

.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%);
  border-radius: 28px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Active/Checked State */
.toggle-input:checked+.toggle-slider {
  background: linear-gradient(135deg, var(--dusk) 0%, #A07850 100%);
  box-shadow: 0 2px 8px rgba(196, 149, 106, 0.35);
  border-color: rgba(196, 149, 106, 0.3);
}

.toggle-input:checked+.toggle-slider::before {
  transform: translateX(24px);
}

/* Hover States */
.free-toggle-label:hover .toggle-slider {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.free-toggle-label:hover .toggle-input:checked+.toggle-slider {
  box-shadow: 0 3px 12px rgba(196, 149, 106, 0.45);
}

.free-toggle-label:hover .free-toggle-text {
  color: var(--gold);
}

/* Focus State for Accessibility */
.toggle-input:focus+.toggle-slider {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .free-toggle-text {
    font-size: 13px;
  }

  .toggle-switch {
    width: 48px;
    height: 26px;
  }

  .toggle-slider::before {
    height: 20px;
    width: 20px;
  }

  .toggle-input:checked+.toggle-slider::before {
    transform: translateX(22px);
  }
}

/* Filters */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 24px 14px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-xl);
  background: white;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  color: var(--accent);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--duration-normal) var(--ease-spring);
  position: relative;
}

.filter-chip::before {
  display: none;
}

.filter-chip.active {
  background: var(--dark);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}

.filter-chip.active::before {
  display: none;
}

.filter-chip:hover:not(.active) {
  background: white;
  border-color: var(--border-medium);
  transform: scale(1.01);
}

.filter-chip:active:not(.active) {
  transform: scale(0.97);
}

/* Pop animation on selection */
@keyframes chipPop {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.1);
  }

  60% {
    transform: scale(0.97);
  }

  100% {
    transform: scale(1);
  }
}

.filter-chip-pop {
  animation: chipPop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.filter-count {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.4;
  margin-left: -2px;
}

.filter-chip.active .filter-count {
  color: rgba(255, 255, 255, 0.6);
  opacity: 0.7;
}

/* Art sub-filter toggle (Openings / All Shows) */
.art-subfilter {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px;
  justify-content: center;
}

.art-subfilter.hidden {
  display: none;
}

.art-subfilter-btn {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 400;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  background: rgba(28, 20, 16, 0.02);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}

.art-subfilter-btn.active {
  background: rgba(160, 104, 107, 0.12);
  color: #A0686B;
  border-color: rgba(160, 104, 107, 0.25);
}

.art-subfilter-btn:hover:not(.active) {
  background: rgba(28, 20, 16, 0.04);
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  .filters {
    padding: 4px 28px 22px;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .filter-chip {
    padding: 8px 14px;
    font-size: 12px;
    gap: 5px;
  }

  .filter-chip::before {
    display: none;
  }
}

/* Events */
.events {
  padding: 8px 24px 60px;
}

@media (min-width: 768px) {
  .events {
    padding: 12px 32px 60px;
  }
}

@media (min-width: 1024px) {
  .events {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* ============================================================================
   DEALS — PEEK + EXPANDED
   ============================================================================ */

/* -- Peek: compact one-line teaser -- */
.deals-peek {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--surface-raised) 0%, rgba(255, 253, 247, 0.98) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.deals-peek::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(212, 175, 55, 0.3) 100%);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.deals-peek:hover {
  box-shadow: 0 4px 16px rgba(139, 115, 85, 0.12), 0 1px 4px rgba(0, 0, 0, 0.04);
  border-color: rgba(212, 175, 55, 0.3);
  transform: translateY(-1px);
}

.deals-peek:hover::before {
  opacity: 1;
}

.deals-peek:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

@media (min-width: 1024px) {
  .deals-peek { grid-column: 1 / -1; }
}

.deals-peek-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.deals-peek-count {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--dusk);
  margin-left: auto;
  flex-shrink: 0;
  padding: 3px 10px;
  background: rgba(139, 115, 85, 0.08);
  border-radius: 12px;
}

.deals-peek-chevron {
  width: 18px;
  height: 18px;
  color: var(--dusk);
  flex-shrink: 0;
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 480px) {
  .deals-peek {
    padding: 15px 18px;
  }

  .deals-peek-label {
    font-size: 17px;
  }

  .deals-peek-count {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* -- Expanded: full detail panel -- */
.deals-expanded {
  background: linear-gradient(135deg, var(--surface-raised) 0%, rgba(255, 253, 247, 0.98) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(139, 115, 85, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  animation: dealsExpandIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dealsExpandIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.deals-expanded::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(212, 175, 55, 0.2) 100%);
}

@media (min-width: 600px) {
  .deals-expanded { padding: 32px 28px; }
}

@media (min-width: 1024px) {
  .deals-expanded { grid-column: 1 / -1; }
}

.deals-exp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  position: relative;
}

.deals-exp-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--gold);
}

.deals-exp-label {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.deals-exp-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

@media (max-width: 380px) {
  .deals-exp-title {
    font-size: 24px;
  }
}

.deals-exp-close {
  background: rgba(139, 115, 85, 0.06);
  border: none;
  padding: 8px;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.deals-exp-close:hover {
  color: var(--text-primary);
  background: rgba(139, 115, 85, 0.12);
  transform: rotate(90deg);
}

.deals-exp-close:active {
  transform: rotate(90deg) scale(0.95);
}

/* -- Expanded: today list -- */
.deals-exp-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.deals-exp-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  position: relative;
  animation: dealItemFadeIn 0.3s ease-out backwards;
}

@keyframes dealItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animation for multiple items */
.deals-exp-item:nth-child(1) { animation-delay: 0.05s; }
.deals-exp-item:nth-child(2) { animation-delay: 0.08s; }
.deals-exp-item:nth-child(3) { animation-delay: 0.11s; }
.deals-exp-item:nth-child(4) { animation-delay: 0.14s; }
.deals-exp-item:nth-child(5) { animation-delay: 0.17s; }
.deals-exp-item:nth-child(6) { animation-delay: 0.20s; }
.deals-exp-item:nth-child(7) { animation-delay: 0.23s; }
.deals-exp-item:nth-child(8) { animation-delay: 0.26s; }
.deals-exp-item:nth-child(9) { animation-delay: 0.29s; }
.deals-exp-item:nth-child(10) { animation-delay: 0.32s; }
.deals-exp-item:nth-child(n+11) { animation-delay: 0.35s; }

.deals-exp-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
  transition: height 0.2s ease;
}

.deals-exp-item:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateX(2px);
}

.deals-exp-item:hover::before {
  height: 60%;
}

.deals-exp-offer {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  flex: 1;
  letter-spacing: -0.1px;
}

@media (max-width: 480px) {
  .deals-exp-offer {
    font-size: 16px;
  }
}

.deals-exp-venue {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--dusk);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 2px 8px;
  background: rgba(139, 115, 85, 0.08);
  border-radius: 10px;
}

@media (max-width: 480px) {
  .deals-exp-venue {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* -- Expanded: weekly day groups -- */
.deals-exp-days {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.deals-exp-day {
  position: relative;
  animation: dealDayFadeIn 0.35s ease-out backwards;
}

@keyframes dealDayFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animation for day groups */
.deals-exp-day:nth-child(1) { animation-delay: 0.05s; }
.deals-exp-day:nth-child(2) { animation-delay: 0.12s; }
.deals-exp-day:nth-child(3) { animation-delay: 0.19s; }
.deals-exp-day:nth-child(4) { animation-delay: 0.26s; }
.deals-exp-day:nth-child(5) { animation-delay: 0.33s; }
.deals-exp-day:nth-child(6) { animation-delay: 0.40s; }
.deals-exp-day:nth-child(7) { animation-delay: 0.47s; }

.deals-exp-day:first-child { padding-top: 0; }

.deals-exp-day-today {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.06) 0%, rgba(212, 175, 55, 0.02) 100%);
  margin: 0 -22px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212, 175, 55, 0.15);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.08);
}

@media (min-width: 600px) {
  .deals-exp-day-today {
    margin: 0 -28px;
    padding: 20px 28px;
  }
}

.deals-exp-day-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dusk);
}

.deals-exp-day-label span:first-child {
  position: relative;
  padding-left: 12px;
}

.deals-exp-day-label span:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--dusk);
  border-radius: 50%;
}

.deals-exp-day-today .deals-exp-day-label span:first-child::before {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
}

.deals-exp-today-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.15);
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* ============================================================================
   EVENT CARD
   ============================================================================ */

.event-card {
  background: linear-gradient(180deg, #fffdfa 0%, var(--surface-raised) 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(28, 20, 16, 0.05), 0 1px 2px rgba(28, 20, 16, 0.03);
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-spring),
    box-shadow var(--duration-normal) ease,
    border-color var(--duration-normal) ease,
    opacity var(--duration-slow) var(--ease-spring);
  position: relative;
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: row;
  /* Scroll-reveal: start hidden, revealed by IntersectionObserver */
  opacity: 0;
  transform: translateY(20px);
}

.event-card.card-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Card image thumbnail */
.event-card-image {
  width: 100px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s var(--ease-spring);
}

.event-card:hover .event-card-image {
  transform: scale(1.05);
}

@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.event-card:hover {
  transform: translateY(-4px);
  /* Layered warm elevation + a hairline gold glint drawn inside the edge —
     the small light detail that makes a card feel considered, not generic. */
  box-shadow: 0 18px 44px rgba(126, 42, 51, 0.13), 0 5px 16px rgba(28, 20, 16, 0.07),
    inset 0 0 0 1px rgba(212, 175, 55, 0.28);
  border-color: rgba(126, 42, 51, 0.20);
}

.event-card:active {
  transform: scale(0.985);
  transition-duration: 0.1s;
}

.event-card.hidden {
  display: none;
}

/* Category accent stripe — left edge */
.event-card-accent {
  width: 3px;
  flex-shrink: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--border-subtle);
}

.event-card[data-category="art"] .event-card-accent {
  background: linear-gradient(to bottom, #A0686B, #8B4545);
}

.event-card[data-category="perks"] .event-card-accent {
  background: linear-gradient(to bottom, #B8956A, #8B6347);
}

.event-card[data-category="community"] .event-card-accent {
  background: linear-gradient(to bottom, #8BA89B, #6B8B7B);
}

.event-card[data-category="music"] .event-card-accent {
  background: linear-gradient(to bottom, #8B8B8B, #5A5A5A);
}

.event-card[data-category="culinary"] .event-card-accent {
  background: linear-gradient(to bottom, #A8906E, #8B6F47);
}

.event-card[data-category="fashion"] .event-card-accent {
  background: linear-gradient(to bottom, #6B6B6B, #3D3D3D);
}

.event-card[data-category="lifestyle"] .event-card-accent {
  background: linear-gradient(to bottom, #C9A18E, #B8826B);
}

/* Card inner content */
.event-card-inner {
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Top row: category + date meta | favorite button */
.event-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.event-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.event-card-category {
  font-family: 'Jost', sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.event-card-date {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.capacity-indicator {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  color: var(--dark);
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 5;
}

.capacity-indicator.low {
  background: rgba(231, 76, 60, 0.95);
  color: white;
  animation: capacity-pulse 2s ease-in-out infinite;
}

@keyframes capacity-pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.5);
  }
}

.capacity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Favorite button */
.favorite-btn {
  position: relative;
  background: rgba(28, 20, 16, 0.03);
  border: 1px solid var(--border-subtle);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  flex-shrink: 0;
}

/* Extend tap target to 44x44 without enlarging the visible 32px disc */
.favorite-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.favorite-btn:hover {
  transform: scale(1.1);
  background: rgba(28, 20, 16, 0.06);
  border-color: var(--border-medium);
}

.favorite-btn.favorited {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.25);
}

.favorite-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  transition: all var(--duration-fast) ease;
}

.favorite-btn:hover svg {
  stroke: var(--text-secondary);
}

.favorite-btn.favorited svg {
  fill: var(--gold);
  stroke: var(--gold);
}

.favorite-btn.fav-pulse {
  animation: favPulse 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes favPulse {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(0.85);
  }

  40% {
    transform: scale(1.35);
  }

  65% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

/* Heart fill flash on favorite */
.favorite-btn.favorited svg {
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.favorite-btn.fav-pulse.favorited svg {
  filter: drop-shadow(0 0 6px var(--gold));
}

/* Event name — main title */
.event-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
}

/* Card body — holds the title */
.event-card-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
}

/* Card footer — location + free badge */
.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}

.event-footer-location {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-tertiary);
}

.event-footer-location svg {
  flex-shrink: 0;
  stroke: var(--text-tertiary);
}

.event-footer-location span {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-footer-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.event-footer-free {
  font-family: 'Jost', sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #2E7D32; /* deepened from #4CAF50 — AA on the white card */
  flex-shrink: 0;
  background: rgba(76, 175, 80, 0.08);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}

.event-footer-deals {
  font-family: 'Jost', sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #D4AF37;
  flex-shrink: 0;
  background: rgba(212, 175, 55, 0.08);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}

/* Desktop card image wider */
@media (min-width: 1024px) {
  .event-card-image {
    width: 130px;
  }
}

/* Mobile card scaling */
@media (max-width: 480px) {
  .event-card-image {
    width: 80px;
  }

  .event-card-inner {
    padding: 14px 16px;
    gap: 8px;
  }

  .event-name {
    font-size: 18px;
  }

  .event-card-category {
    font-size: 10px;
  }

  .event-card-date {
    font-size: var(--text-xs);
  }

  .event-footer-location span {
    font-size: var(--text-xs);
  }
}

/* ============================================================
   PREMIUM EVENT DETAIL MODAL — Bottom Sheet Design
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.modal-overlay.active {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  pointer-events: all;
}

/* The sheet itself — warm white surface */
.modal {
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 92dvh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.15);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal::-webkit-scrollbar {
  display: none;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

/* Desktop: centered card */
@media (min-width: 600px) {
  .modal-overlay {
    align-items: center;
    padding: 24px;
  }

  .modal {
    border-radius: var(--radius-xl);
    max-height: 88dvh;
    transform: translateY(40px) scale(0.97);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.3s ease;
    box-shadow: var(--shadow-xl);
  }

  .modal-overlay.active .modal {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Drag handle */
.modal-handle {
  width: 40px;
  height: 4px;
  background: rgba(28, 20, 16, 0.16);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

@media (min-width: 600px) {
  .modal-handle {
    display: none;
  }
}

/* Close button */
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(28, 20, 16, 0.04);
  border: 1px solid var(--border-subtle);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  transition: all var(--duration-fast) ease;
  color: var(--text-primary);
}

/* Extend tap target to 44x44 without enlarging the visible 32px disc */
.modal-close::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.modal-close:hover {
  background: rgba(28, 20, 16, 0.08);
  transform: scale(1.05);
}

.modal-close svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-secondary);
  stroke-width: 2;
}

/* ---- Hero — compact header with inset thumbnail ---- */
.modal-hero {
  position: relative;
  width: 100%;
  padding: 16px 20px 20px;
  flex-shrink: 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

@media (min-width: 600px) {
  .modal-hero {
    padding: 20px 24px 24px;
    gap: 20px;
  }
}

/* Category swatch — icon square with category accent */
.modal-hero-swatch {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
}

.modal-hero-swatch svg {
  width: 22px;
  height: 22px;
  opacity: 0.9;
}

.modal-hero-swatch[data-category="art"] {
  background: rgba(160, 104, 107, 0.2);
}
.modal-hero-swatch[data-category="art"] svg {
  stroke: #C8888B;
}
.modal-hero-swatch[data-category="perks"] {
  background: rgba(184, 149, 106, 0.2);
}
.modal-hero-swatch[data-category="perks"] svg {
  stroke: #D4B088;
}
.modal-hero-swatch[data-category="community"] {
  background: rgba(139, 168, 155, 0.2);
}
.modal-hero-swatch[data-category="community"] svg {
  stroke: #9BC0AD;
}

@media (min-width: 600px) {
  .modal-hero-swatch {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }
  .modal-hero-swatch svg {
    width: 24px;
    height: 24px;
  }
}

/* Category badge — pill */
.modal-hero-category {
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: rgba(28, 20, 16, 0.04);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  display: inline-block;
  line-height: 1;
}

/* Title block — beside thumbnail */
.modal-hero-title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}

.modal-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.12;
  letter-spacing: -0.3px;
  margin: 0;
}

@media (min-width: 600px) {
  .modal-hero-title {
    font-size: 30px;
  }
}

/* Source badge */
.modal-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
}

.modal-source-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* ---- Quick Actions Bar ---- */
.modal-actions-bar {
  display: flex;
  gap: 6px;
  padding: 0 20px 16px;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0;
}

@media (min-width: 600px) {
  .modal-actions-bar {
    padding: 0 24px 16px;
  }
}

.modal-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: rgba(28, 20, 16, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--duration-fast) ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.modal-action-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: var(--text-tertiary);
  transition: all var(--duration-fast) ease;
}

.modal-action-btn:hover {
  background: rgba(28, 20, 16, 0.06);
  border-color: var(--border-medium);
}

.modal-action-btn:hover svg {
  stroke: var(--text-secondary);
}

.modal-action-btn:active {
  transform: scale(0.96);
}

.modal-action-btn.favorited {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.25);
  color: var(--gold);
}

.modal-action-btn.favorited svg {
  stroke: var(--gold);
  fill: var(--gold);
}

.modal-action-btn.favorited:hover {
  background: rgba(212, 175, 55, 0.25);
  border-color: rgba(212, 175, 55, 0.35);
}

.modal-action-btn.favorited:hover svg {
  stroke: var(--gold);
  fill: var(--gold);
}

/* ---- Info Pills ---- */
.modal-info-pills {
  display: flex;
  gap: 8px;
  padding: 16px 20px 0;
  flex-wrap: wrap;
}

@media (min-width: 600px) {
  .modal-info-pills {
    padding: 16px 24px 0;
  }
}

.modal-info-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #fff, #fdfbf7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(28, 20, 16, 0.03);
  min-width: 0;
  flex: 1;
  min-width: 140px;
}

.modal-info-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--wine);
  stroke-width: 1.8;
  opacity: 0.85;
}

.modal-pill-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.modal-pill-label {
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1;
}

.modal-pill-value {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-pill-sub {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  line-height: 1.25;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Free badge pill */
.modal-free-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(76, 175, 80, 0.06);
  border: 1px solid rgba(76, 175, 80, 0.15);
  border-radius: var(--radius-lg);
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #2E7D32; /* deepened from #4CAF50 — AA on the pale pill */
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.modal-free-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #66BB6A;
}

/* ---- Body Content ---- */
.modal-body-content {
  margin: 16px 20px 0;
  padding: 20px;
  background: rgba(28, 20, 16, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

@media (min-width: 600px) {
  .modal-body-content {
    margin: 16px 24px 0;
    padding: 22px 24px;
  }
}

.modal-section-label {
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  display: block;
}

.modal-description {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* ---- Highlights ---- */
.modal-highlights-section {
  padding: 0 20px;
  margin-top: 20px;
}

@media (min-width: 600px) {
  .modal-highlights-section {
    padding: 0 24px;
  }
}

.modal-highlights-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
}

.modal-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 10px;
  background: transparent;
  border-radius: var(--radius-md);
  border: none;
  transition: background var(--duration-fast) ease;
}

.modal-highlight-item:last-child {
  border-bottom: none;
}

.modal-highlight-item:hover {
  background: rgba(126, 42, 51, 0.045);
}

.modal-highlight-check {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wine-bright), var(--wine));
  box-shadow: 0 1px 3px rgba(126, 42, 51, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.modal-highlight-check svg {
  width: 10px;
  height: 10px;
  stroke: white;
  stroke-width: 2.5;
}

.modal-highlight-text {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.45;
  flex: 1;
}

/* ---- Daily Deals Section ---- */
.modal-deals-section {
  padding: 0 20px;
  margin-top: 20px;
}

@media (min-width: 600px) {
  .modal-deals-section {
    padding: 0 24px;
  }
}

.modal-deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  background: rgba(212, 175, 55, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: var(--radius-lg);
  padding: 12px;
}

@media (min-width: 600px) {
  .modal-deals-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

.modal-deal-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: rgba(250, 248, 243, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) ease;
}

.modal-deal-item:hover {
  background: rgba(250, 248, 243, 1);
  border-color: rgba(212, 175, 55, 0.25);
  transform: translateY(-1px);
}

.modal-deal-day {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #D4AF37;
}

.modal-deal-text {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ---- CTA Section ---- */
.modal-cta-section {
  padding: 24px 20px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

@media (min-width: 600px) {
  .modal-cta-section {
    padding: 24px 24px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

.modal-cta-divider {
  height: 1px;
  background: var(--border-subtle);
  margin-bottom: 20px;
}

.modal-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background: var(--dark);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s var(--ease-spring);
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.modal-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  pointer-events: none;
}

.modal-cta-btn:hover {
  transform: translateY(-2px);
  background: #1a1a1a;
  box-shadow: var(--shadow-lg);
}

.modal-cta-btn:active {
  transform: scale(0.97);
}

.modal-cta-btn svg {
  width: 14px;
  height: 14px;
  stroke: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.modal-cta-btn.rsvp-btn {
  background: var(--dark);
}

.modal-cta-btn.rsvp-btn:hover {
  background: #1a1a1a;
}

/* Shared btn classes kept for compatibility */
.btn {
  padding: 18px 28px;
  border-radius: 14px;
  border: none;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.btn-block {
  flex: 1;
  width: 100%;
}

.btn-icon {
  width: 54px;
  height: 54px;
  padding: 0;
  flex-shrink: 0;
}

.btn-icon svg {
  width: 22px;
  height: 22px;
}

.btn-primary {
  background: var(--dark);
  color: white;
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.15);
}

.btn-primary:hover {
  background: #1a1a1a;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.25);
}

.btn-primary svg {
  width: 18px;
  height: 18px;
}

.btn-secondary {
  background: white;
  color: var(--dark);
  border: 1px solid rgba(10, 10, 10, 0.12);
}

.btn-secondary:hover {
  background: var(--cream);
  border-color: var(--gold);
  transform: translateY(-1px);
}


/* Loading */
.loading {
  text-align: center;
  padding: 60px 40px;
  color: var(--accent);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s var(--ease-smooth) infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Skeleton Loader — matches dark event card */
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-card {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border-subtle);
  animation: cardAppear 0.5s ease both;
}

.skeleton-card:nth-child(1) {
  animation-delay: 0s;
}

.skeleton-card:nth-child(2) {
  animation-delay: 0.1s;
}

.skeleton-card:nth-child(3) {
  animation-delay: 0.2s;
}

.skeleton-header {
  height: 120px;
  background: linear-gradient(90deg, rgba(28, 20, 16, 0.03) 25%, rgba(28, 20, 16, 0.06) 50%, rgba(28, 20, 16, 0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-label {
  padding: 14px 20px;
  margin-top: -10px;
  position: relative;
  z-index: 6;
  border-radius: 0 24px 0 0;
  align-self: flex-start;
  max-width: 55%;
}

.skeleton-line {
  height: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(28, 20, 16, 0.04) 25%, rgba(28, 20, 16, 0.07) 50%, rgba(28, 20, 16, 0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 6px;
}

.skeleton-line.short {
  width: 45%;
}

.skeleton-line.medium {
  width: 65%;
}

.skeleton-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px 20px;
}

.skeleton-footer .skeleton-line {
  margin-bottom: 0;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state-icon {
  margin-bottom: 20px;
  color: var(--gold);
  opacity: 0.35;
}

.empty-state-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  color: var(--dark);
  margin-bottom: 10px;
}

.empty-state-text {
  color: var(--accent);
  font-size: 14px;
}

.empty-state-cta {
  margin-top: 20px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0 20px;
  margin-top: 16px;
  gap: 16px;
}

@media (min-width: 1024px) {
  .pagination {
    grid-column: 1 / -1; /* Span all columns */
  }
}

.pagination-btn {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 12px 20px;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--dark);
  color: white;
  border-color: var(--dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.pagination-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pagination-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.pagination-info {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.3px;
}

/* Scroll behavior */
.app-container {
  scrollbar-width: none;
}

.app-container::-webkit-scrollbar {
  display: none;
}

.modal {
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 20, 16, 0.12) transparent;
}

.modal::-webkit-scrollbar {
  width: 4px;
}

.modal::-webkit-scrollbar-track {
  background: transparent;
}

.modal::-webkit-scrollbar-thumb {
  background: rgba(28, 20, 16, 0.12);
  border-radius: 2px;
}

/* Toast Notifications */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--dark);
  color: white;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transition: all var(--duration-normal) var(--ease-spring);
  z-index: 1000;
  max-width: 90%;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Utility Classes */
.hidden {
  display: none !important;
}

/* View transitions */
.view-fade-out {
  opacity: 0 !important;
  transform: translateY(8px);
  transition: opacity 0.28s cubic-bezier(0.4, 0, 1, 1),
    transform 0.28s cubic-bezier(0.4, 0, 1, 1) !important;
}

.view-fade-in {
  opacity: 0 !important;
  transform: translateY(-8px);
}

/* When view-fade-in is removed, it transitions back to normal */
#discover-view,
#favorites-view,
#about-view,
#social-view,
#pins-view {
  transition: opacity 0.32s cubic-bezier(0, 0, 0.2, 1),
    transform 0.32s cubic-bezier(0, 0, 0.2, 1);
}

/* /favorites opens straight into content — give it the breathing room the
   hero band gives every other view */
#favorites-view {
  padding-top: 44px;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Reduced motion — respect user preference */
@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;
  }

  .view-fade-out,
  .view-fade-in {
    transition: none !important;
    transform: none !important;
  }

  .hero-rule,
  .hero-title,
  .hero-sub,
  .hero-location-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .event-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Focus styles */
button:focus-visible,
.filter-chip:focus-visible,
.nav-item:focus-visible,
.event-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(139, 115, 85, 0.25);
}

/* Global button press feedback */
.filter-chip:active,
.gallery-tab:active,
.subscribe-chip:active,
.nav-item:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}


/* ================================================
   About Page — Premium Redesign
   Consistent with discover/favorites hero style.
   Apple/Airbnb-level typography & layout.
   ================================================ */

/* ── Live Stats Row ───────────────────────────── */
.about-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px 24px 0;
}

.about-stat-card {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  animation: cardAppear 0.7s var(--transition) both;
}

.about-stat-card:nth-child(1) {
  animation-delay: 0.15s;
}

.about-stat-card:nth-child(2) {
  animation-delay: 0.25s;
}

.about-stat-card:nth-child(3) {
  animation-delay: 0.35s;
}

.about-stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.5px;
}

.about-stat-lbl {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(28, 20, 16, 0.7);
  letter-spacing: 0.2px;
}

/* ── Content Flow ─────────────────────────────── */
.about-flow {
  padding: 32px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Generic Section ──────────────────────────── */
.about-section {
  padding: 36px 0;
  border-bottom: 1px solid rgba(28, 20, 16, 0.06);
}

.about-section:last-child {
  border-bottom: none;
}

.about-overline {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8a6d1f;
  margin-bottom: 14px;
}

.about-overline--light {
  color: rgba(255, 255, 255, 0.35);
}

.about-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--deep);
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

.about-heading em {
  font-style: italic;
  color: var(--accent);
}

.about-heading--light {
  color: white;
}

.about-heading--light em {
  color: var(--sand);
}

.about-body {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(28, 20, 16, 0.55);
}

/* ── Process Row (horizontal scroll on mobile) ── */
.about-process-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.about-process-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) ease;
}

.about-process-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.about-process-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--sand);
  line-height: 1;
  margin-bottom: 14px;
}

.about-process-title {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--deep);
  margin-bottom: 8px;
  letter-spacing: -0.1px;
}

.about-process-desc {
  font-family: 'Jost', sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(28, 20, 16, 0.48);
}

/* ── Architecture Section ─────────────────────── */
.about-arch-section {
  padding-bottom: 36px;
}

.about-arch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding-bottom: 0;
}

.about-arch-header-left .about-overline {
  margin-bottom: 6px;
}

.about-arch-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.about-arch-tag {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  color: rgba(28, 20, 16, 0.7);
  background: rgba(28, 20, 16, 0.05);
  border-radius: 4px;
  padding: 2px 7px;
}

.about-arch-status {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(28, 20, 16, 0.7);
  display: flex;
  align-items: center;
  gap: 5px;
}

.about-arch-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4CAF50;
  display: inline-block;
  animation: dotPulse 2s infinite;
}

@keyframes dotPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.about-arch-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(139, 115, 85, 0.08);
  border-radius: 20px;
  padding: 8px 14px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.about-arch-toggle-btn:hover {
  background: rgba(139, 115, 85, 0.14);
}

.about-arch-toggle-label {
  display: inline;
}

.tech-chevron {
  transition: transform 0.25s var(--transition);
}

/* ── Subscribe Section ────────────────────────── */
.about-subscribe-section {
  background: transparent;
}

/* ── GitHub CTA Section ──────────── */
.about-gh-section {
  background: var(--dark);
  border-radius: var(--radius-xl);
  padding: 44px 28px;
  border: none;
  margin-top: 16px;
  text-align: center;
}

.about-gh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--deep);
  background: white;
  border-radius: 24px;
  padding: 11px 22px;
  text-decoration: none;
  margin-top: 20px;
  transition: all 0.3s var(--transition);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.about-gh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

/* ── Subscription Form ────────────────────────── */
.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.subscribe-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.subscribe-label {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(28, 20, 16, 0.35);
}

.subscribe-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(28, 20, 16, 0.22);
}

.subscribe-input,
.subscribe-select {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--deep);
  background: white;
  border: 1.5px solid rgba(28, 20, 16, 0.09);
  border-radius: 12px;
  padding: 12px 15px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.subscribe-input::placeholder {
  color: rgba(28, 20, 16, 0.2);
}

.subscribe-input:focus,
.subscribe-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

.subscribe-select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23B0A090' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Chips — match main filter chips */
.subscribe-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subscribe-chip {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(28, 28, 30, 0.04);
  border: 1.5px solid rgba(28, 28, 30, 0.08);
  border-radius: 20px;
  padding: 7px 15px;
  cursor: pointer;
  transition: all 0.25s var(--transition);
  user-select: none;
}

.subscribe-chip:hover {
  background: rgba(28, 28, 30, 0.08);
  border-color: rgba(28, 28, 30, 0.14);
}

.subscribe-chip.active {
  background: var(--dark);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* Submit Button */
.subscribe-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px;
  background: var(--dark);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
  margin-top: 4px;
  box-shadow: var(--shadow-md);
  letter-spacing: 0.2px;
}

.subscribe-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

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

.subscribe-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Success State */
.subscribe-success {
  text-align: center;
  padding: 20px 0;
}

.subscribe-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 20px;
  font-weight: 600;
  animation: successPop 0.4s var(--transition);
}

@keyframes successPop {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.subscribe-success-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--deep);
  margin-bottom: 6px;
}

.subscribe-success-text {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(28, 20, 16, 0.45);
  margin: 0 0 16px;
}

.subscribe-again-btn {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent, #8B7355);
  background: none;
  border: 1px solid rgba(139, 115, 85, 0.2);
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subscribe-again-btn:hover {
  background: rgba(139, 115, 85, 0.06);
}

/* ── About Mobile ─────────────────────────────── */
@media (max-width: 600px) {
  .about-stats-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px 16px 0;
  }

  .about-stat-val {
    font-size: 22px;
  }

  .about-stat-lbl {
    font-size: 10px;
  }

  .about-flow {
    padding: 24px 16px 36px;
  }

  .about-heading {
    font-size: 26px;
  }

  .about-process-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .about-process-card {
    padding: 20px 18px;
  }

  .about-arch-toggle-label {
    display: none;
  }

  .about-gh-section {
    padding: 36px 20px;
    border-radius: 20px;
  }
}


/* ---- Tech Dashboard ---- */

.tech-header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tech-toggle {
  cursor: pointer;
  margin-bottom: 0;
}

.tech-chevron {
  color: var(--accent);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.version-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent);
  margin-left: 8px;
  font-weight: normal;
}

.status-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.status-dot-pulse {
  width: 8px;
  height: 8px;
  background: #4CAF50;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(76, 175, 80, 0.4);
  animation: tech-pulse 2s infinite;
}

@keyframes tech-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

.tech-dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

/* Legacy order fix: this flex-column base outranked the desktop grid rule
   (declared in the min-width:1024px block near the top of the file) purely
   by source order, collapsing /about to one narrow column. Re-assert grid
   after the base so the two-column dashboard returns on desktop. */
@media (min-width: 1024px) {
  .tech-dashboard-grid {
    display: grid;
  }
}

.tech-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.graph-module {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  background: #080d18;
  border-color: #1a2035;
}

@media (max-width: 480px) {
  .graph-module {
    min-height: 280px;
  }
}

.module-header {
  padding: 8px 16px;
  background: #f5f5f5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
}

.graph-module .module-header {
  color: rgba(212, 175, 55, 0.70);
  background: #0c1220;
  border-bottom-color: #1a2035;
}

.module-id {
  color: rgba(0, 0, 0, 0.2);
}

/* ── Source-health alert + module ─────────────────────────── */
.source-alert {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fbf0d8;
  border: 1px solid #e6c169;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #5c4409;
}
.source-alert.is-down {
  background: #fbe4e0;
  border-color: #e0a99f;
  color: #7a2317;
}
.source-alert.hidden { display: none; }
.source-alert-icon { flex: none; font-size: 11px; transform: translateY(-1px); }
.source-alert-text b { font-weight: 600; }

.source-health-module {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
.source-health-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(0, 0, 0, 0.05);
  max-height: 360px;
  overflow-y: auto;
}
.source-health-loading {
  grid-column: 1 / -1;
  padding: 18px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
.sh-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}
.sh-dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2E7D32;
}
.sh-row.low  .sh-dot { background: #E6A817; box-shadow: 0 0 6px rgba(230,168,23,.6); }
.sh-row.down .sh-dot { background: #C0392B; box-shadow: 0 0 6px rgba(192,57,43,.6); }
.sh-row.learning .sh-dot { background: rgba(0,0,0,0.22); }
.sh-name {
  flex: 1;
  min-width: 0;
  color: rgba(0, 0, 0, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-count { color: rgba(0, 0, 0, 0.9); font-variant-numeric: tabular-nums; }
.sh-count .sh-exp { color: rgba(0, 0, 0, 0.3); }
.sh-row.low .sh-count, .sh-row.down .sh-count { color: #8a2f22; font-weight: 600; }

.graph-wrapper-refined {
  position: relative;
  flex: 1;
  background: #080d18;
  border-radius: 0 0 12px 12px;
}

.graph-overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 20px;
}

.g-stat {
  display: flex;
  flex-direction: column;
}

.g-val {
  font-size: 20px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.92);
}

.g-lbl {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
}

.tech-side-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.specs-list {
  padding: 14px 16px;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 12px;
}

.spec-item:last-child {
  border-bottom: none;
}

.spec-key {
  color: var(--accent);
}

.spec-val {
  font-family: ui-monospace, monospace;
  font-weight: 500;
  color: var(--deep);
}

.tech-log-refined {
  height: 140px;
  overflow-y: hidden;
  padding: 12px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #888;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #fafafa;
}

.tech-log-entry {
  display: flex;
  gap: 8px;
}

.tech-log-ts {
  color: #ccc;
}

.tech-log-msg.success {
  color: #4CAF50;
}

.tech-log-msg.info {
  color: #777;
}

.tech-legend-refined {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid #1a2035;
  background: #0c1220;
}

.tech-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  font-family: ui-monospace, monospace;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.tech-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* Traffic module — dark card */
.traffic-module {
  background: #0e1525;
  border-color: #1a2035;
}

.traffic-module .module-header {
  background: #0c1220;
  border-bottom-color: #1a2035;
  color: rgba(255, 255, 255, 0.45);
}

.traffic-module .module-id {
  color: rgba(255, 255, 255, 0.22);
}


#network-graph {
  width: 100%;
  height: 100%;
  display: block;
}

/* Activity chart module */
.activity-module {
  background: #0e1525;
  border-color: #1a2035;
}

.activity-module .module-header {
  background: #0c1220;
  border-bottom-color: #1a2035;
  color: rgba(255, 255, 255, 0.45);
}

.activity-module .module-id {
  color: rgba(255, 255, 255, 0.22);
}

.activity-chart-wrapper {
  position: relative;
  height: 160px;
  padding: 12px 16px 4px;
}

.activity-chart-wrapper canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.activity-legend {
  display: flex;
  gap: 16px;
  padding: 6px 16px 10px;
}

.activity-legend-item {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ============================================================
   VALUE LINE — transition between hero and content
   ============================================================ */

.value-line {
  font-family: 'Jost', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  padding: 14px 24px 18px;
  margin: 0;
  background: transparent;
  position: relative;
}

.value-line-num {
  font-weight: 700;
  color: var(--wine);
}

#discover-view:not(.view-home) .value-line {
  display: none;
}

/* ============================================================
   EDITORIAL HEADINGS
   ============================================================ */

.editorial-overline {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dusk);
  margin-bottom: 8px;
}

.editorial-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--deep);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 0;
}

.editorial-heading em {
  font-style: italic;
  color: var(--dusk);
}

@media (min-width: 768px) {
  .editorial-heading {
    font-size: 42px;
    letter-spacing: -1px;
  }
}

/* ============================================================
   CATEGORY DISCOVERY GRID (home/All view)
   ============================================================ */

/* ── Unified Gallery ── */
.unified-gallery {
  padding: 12px 0 16px;
}

/* Gallery Tabs */
.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 16px 18px;
  overflow: hidden;
}

.gallery-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--radius-xl);
  background: white;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  font-family: 'Jost', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  cursor: pointer;
  flex: 1 1 0;
  transition: all var(--duration-normal) var(--ease-spring);
}

.gallery-tab:hover:not(.active) {
  background: white;
  border-color: var(--wine);
  color: var(--deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(126, 42, 51, 0.10);
}

.gallery-tab:active {
  transform: scale(0.97);
}

.gallery-tab.active {
  background: linear-gradient(135deg, var(--wine-bright) 0%, var(--wine) 55%, var(--wine-deep) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(126, 42, 51, 0.28), 0 1px 3px rgba(126, 42, 51, 0.22);
}

@media (min-width: 768px) {
  .gallery-tabs {
    justify-content: flex-start;
    padding: 0 32px 22px;
    gap: 10px;
    overflow-x: auto;
  }

  .gallery-tab {
    font-size: 14px;
    padding: 10px 24px;
    flex: 0 0 auto;
    letter-spacing: 0.3px;
  }
}

/* Gallery progress bar */
.gallery-progress-track {
  height: 2.5px;
  background: var(--border-subtle);
  margin: 0 24px 14px;
  border-radius: 2px;
  overflow: hidden;
}

.gallery-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .gallery-progress-track {
    margin: 0 32px 16px;
  }
}

/* ── Mobile: Card Stack ── */
.gallery-stack {
  display: block;
  position: relative;
  padding: 0 24px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .gallery-stack {
    display: none;
  }
}

/* ── Mobile browse: comfortable vertical feed (redesign) ──
   Overrides the legacy swipe-deck framing. The deck reserved a fixed 4/5
   aspect box with hidden overflow; the feed needs to grow with its cards. */
.gallery-stack--feed { padding: 0 20px; margin-bottom: 8px; }
.gallery-stack--feed .gallery-stack-counter {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: #6a5849;
  letter-spacing: 0;
  text-align: left;
  margin: 0 2px 14px;
}
.gallery-stack--feed .gallery-stack-cards {
  position: static;
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gallery-stack--feed .gallery-stack-cards .event-card {
  margin-bottom: 0;
  min-height: 108px;
}
.gallery-stack--feed .gallery-stack-cards .event-card-image {
  width: 118px;
  min-height: 108px;
}
.gallery-stack--feed .gallery-stack-actions { display: none !important; }

.gallery-stack-counter {
  font-family: 'Jost', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 14px;
}

.gallery-stack-cards {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 520px;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

/* Empty tab: drop the deck's reserved 4/5 aspect so the empty state sits
   directly under the pills instead of below ~430px of nothing */
.gallery-stack-cards.stack-cards-collapsed {
  aspect-ratio: auto;
  min-height: 0;
}

/* Stack card wrapper */
.stack-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s ease;
  will-change: transform, opacity;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Kill transitions while dragging */
.stack-card.dragging {
  transition: none !important;
}

/* Stack depth positions */
.stack-card[data-depth="0"] {
  z-index: 3;
  transform: scale(1) translateY(0);
  opacity: 1;
}

.stack-card[data-depth="1"] {
  z-index: 2;
  transform: scale(0.96) translateY(10px);
  opacity: 0.5;
  pointer-events: none;
  filter: blur(1px);
}

.stack-card[data-depth="2"] {
  z-index: 1;
  transform: scale(0.92) translateY(20px);
  opacity: 0;
  pointer-events: none;
}

/* Stack card inner overrides — display card vertically in stack */
.stack-card .event-card {
  margin-bottom: 0;
  height: 100%;
  animation: none;
  border-radius: var(--radius-xl);
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  opacity: 1;
  transform: none;
  /* fully opaque — the default 95%-alpha surface let the behind-card's
     title ghost through the front card's body */
  background: var(--surface);
}

.stack-card .event-card-accent {
  width: auto;
  height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  flex-shrink: 0;
}

/* Stack card image — banner at top */
.stack-card .event-card-image {
  width: auto;
  height: 0;
  flex: 1 1 45%;
  min-height: 120px;
  background-size: cover !important;
}

.stack-card .event-card-inner {
  padding: 20px 24px;
  gap: 12px;
  flex: 0 0 auto;
}

.stack-card .event-name {
  font-size: 24px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.stack-card .event-card-category {
  font-size: 11px;
}

.stack-card .event-card-date {
  font-size: 13px;
}

.stack-card .event-footer-location span {
  font-size: 13px;
}

/* Swipe feedback overlays */
.stack-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.stack-card-overlay--like {
  background: radial-gradient(ellipse at center, rgba(76, 175, 80, 0.2) 0%, transparent 70%);
  border: 2.5px solid rgba(76, 175, 80, 0.5);
  border-radius: 24px;
}

.stack-card-overlay--skip {
  background: radial-gradient(ellipse at center, rgba(158, 158, 158, 0.15) 0%, transparent 70%);
  border: 2.5px solid rgba(158, 158, 158, 0.35);
  border-radius: 24px;
}

/* Card promotion */
@keyframes promoteCard {
  from {
    transform: scale(0.95) translateY(12px);
    opacity: 0.65;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.stack-card.promoting {
  animation: promoteCard 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Action buttons below stack */
.gallery-stack-actions {
  display: flex;
  justify-content: center;
  gap: 44px;
  margin-top: 22px;
  padding-bottom: 4px;
}

.stack-action {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.stack-action:active {
  transform: scale(0.88);
}

.stack-action-skip {
  border-color: rgba(158, 158, 158, 0.2);
}

.stack-action-skip svg {
  stroke: #aaa;
}

.stack-action-skip:active {
  border-color: rgba(158, 158, 158, 0.4);
  background: rgba(158, 158, 158, 0.06);
}

.stack-action-fav {
  border-color: rgba(196, 149, 106, 0.25);
}

.stack-action-fav svg {
  stroke: var(--dusk);
}

.stack-action-fav:active {
  border-color: rgba(183, 149, 98, 0.5);
  background: rgba(183, 149, 98, 0.08);
}

/* Hover states for stack actions */
.stack-action:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: scale(1.06);
}

/* Stack empty & done states (desktop featured empty shares the centering) */
.gallery-stack-empty,
.gallery-stack-done,
.gallery-featured-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  text-align: center;
  padding: 40px 24px;
}

.gallery-empty-icon {
  color: rgba(28, 20, 16, 0.2);
  margin-bottom: 16px;
}

.gallery-empty-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: rgba(28, 20, 16, 0.6);
  margin-bottom: 6px;
}

.gallery-empty-text {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: rgba(28, 20, 16, 0.35);
}

.gallery-stack-done .gallery-done-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--dusk);
  color: var(--dusk);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.gallery-stack-done .gallery-done-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: rgba(28, 20, 16, 0.6);
  margin-bottom: 16px;
}

.gallery-done-reset {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dusk);
  background: none;
  border: 1px solid rgba(196, 149, 106, 0.3);
  border-radius: 100px;
  padding: 8px 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-done-reset:hover {
  background: var(--deep);
  color: var(--cream);
  border-color: var(--deep);
}

/* ── Desktop: Featured + Sidebar ── */
.gallery-featured {
  display: none;
}

@media (min-width: 768px) {
  .gallery-featured {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    padding: 0 32px;
    margin-bottom: 24px;
    min-height: 400px;
  }

  .gallery-featured-empty {
    grid-column: 1 / -1;
    min-height: 400px;
  }

  /* Empty tab: collapse the main/sidebar stubs so the message centers
     alone within the featured area instead of floating below them */
  .gallery-featured--empty .gallery-featured-main,
  .gallery-featured--empty .gallery-featured-sidebar {
    display: none;
  }

  /* Featured main card — display vertically like the stack */
  .gallery-featured-main .event-card {
    margin-bottom: 0;
    animation: none;
    height: 100%;
    min-height: 400px;
    border-radius: var(--radius-xl);
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    opacity: 1;
    transform: none;
  }

  .gallery-featured-main .event-card-accent {
    width: auto;
    height: 4px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* Featured card image — large banner */
  .gallery-featured-main .event-card-image {
    width: auto;
    height: 0;
    flex: 1 1 50%;
    min-height: 180px;
    background-size: cover !important;
  }

  /* Text seat: subtle dusk gradient at the photo's base so washed-out
     images keep the title block legible where photo meets text */
  .gallery-featured-main .event-card-image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(to top, rgba(28, 20, 16, 0.55), rgba(28, 20, 16, 0));
    pointer-events: none;
  }

  .gallery-featured-main .event-card-inner {
    padding: 24px 28px;
    gap: 14px;
    flex: 0 0 auto;
  }

  .gallery-featured-main .event-name {
    font-size: 26px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .gallery-featured-main .event-card-category {
    font-size: 11px;
  }

  .gallery-featured-main .event-card-date {
    font-size: 14px;
  }

  .gallery-featured-main .event-footer-location span {
    font-size: 14px;
  }

  .gallery-featured-main .event-card {
    cursor: pointer;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }

  .gallery-featured-main .event-card:hover {
    box-shadow: var(--shadow-xl);
    border-color: var(--border-medium);
  }

  /* Featured card entry animation */
  @keyframes featuredFadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .gallery-featured-main .event-card {
    animation: featuredFadeIn 0.3s ease forwards;
  }

  /* Sidebar */
  .gallery-featured-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 149, 106, 0.2) transparent;
    padding-right: 4px;
  }

  .gallery-featured-sidebar::-webkit-scrollbar {
    width: 4px;
  }

  .gallery-featured-sidebar::-webkit-scrollbar-thumb {
    background: rgba(196, 149, 106, 0.25);
    border-radius: 4px;
  }

  /* Sidebar cards */
  .sidebar-card {
    display: flex;
    gap: 0;
    background: var(--surface-raised);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid var(--border-subtle);
    position: relative;
    min-height: 80px;
    flex-shrink: 0;
  }

  .sidebar-card:hover {
    border-color: var(--border-medium);
    transform: translateX(-2px);
    box-shadow: var(--shadow-md);
  }

  .sidebar-card.active {
    border-color: var(--dusk);
    box-shadow: 0 0 0 1px var(--dusk), var(--shadow-md);
  }

  /* Sidebar card image */
  .sidebar-card-image {
    width: 64px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }

  /* Sidebar card color swatch — hidden when image present */
  .sidebar-card-accent {
    display: none;
  }

  .sidebar-card-accent[data-category="art"] {
    background: linear-gradient(to bottom, #A0686B, #8B4545);
  }

  .sidebar-card-accent[data-category="perks"] {
    background: linear-gradient(to bottom, #B8956A, #8B6347);
  }

  .sidebar-card-accent[data-category="community"] {
    background: linear-gradient(to bottom, #8BA89B, #6B8B7B);
  }

  .sidebar-card-accent[data-category="music"] {
    background: linear-gradient(to bottom, #8B8B8B, #5A5A5A);
  }

  .sidebar-card-accent[data-category="culinary"] {
    background: linear-gradient(to bottom, #A8906E, #8B6F47);
  }

  .sidebar-card-accent[data-category="fashion"] {
    background: linear-gradient(to bottom, #6B6B6B, #3D3D3D);
  }

  .sidebar-card-accent[data-category="lifestyle"] {
    background: linear-gradient(to bottom, #C9A18E, #B8826B);
  }

  /* Sidebar card info */
  .sidebar-card-info {
    flex: 1;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .sidebar-card-name {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .sidebar-card-meta {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Sidebar favorite button */
  .sidebar-card-fav {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(28, 20, 16, 0.06);
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: var(--text-secondary);
  }

  .sidebar-card:hover .sidebar-card-fav {
    opacity: 1;
  }

  .sidebar-card-fav svg {
    width: 13px;
    height: 13px;
    stroke: var(--text-secondary);
  }

  .sidebar-card-fav.favorited svg {
    fill: var(--dusk);
    stroke: var(--dusk);
  }

  .sidebar-card-fav.favorited {
    opacity: 1;
  }
}

/* ============================================================
   SUBSCRIBE SECTION — Full-bleed editorial CTA
   ============================================================ */

.subscribe-section {
  position: relative;
  margin: 24px 16px 0;
  padding: 40px 28px 36px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  cursor: pointer;
}

/* Inside about-flow, compensate for parent padding to match homepage spacing */
.about-flow .subscribe-section {
  margin-left: -8px;
  margin-right: -8px;
}

@media (max-width: 600px) {
  .about-flow .subscribe-section {
    margin-left: 0;
    margin-right: 0;
  }
}

.subscribe-section-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #FDFBF7 0%, #F7EDE0 40%, #F0E2CC 75%, #EBD8BB 100%);
  border-radius: var(--radius-xl);
  z-index: 0;
}

.subscribe-section-content {
  position: relative;
  z-index: 1;
  max-width: 480px;
  text-align: left;
}

.subscribe-section-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dusk);
  margin-bottom: 16px;
}

.subscribe-section-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0 0 14px;
}

.subscribe-section-heading em {
  font-style: italic;
  color: #C1553A;
}

.subscribe-section-text {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 380px;
}

@media (min-width: 768px) {
  .subscribe-section {
    padding: 48px 40px 44px;
    margin: 0 24px;
    border-radius: var(--radius-xl);
  }

  .subscribe-section-heading {
    font-size: 44px;
    letter-spacing: -1px;
  }
}

/* Instagram Grid */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
}

.ig-grid a {
  aspect-ratio: 1;
  overflow: hidden;
  display: block;
}

.ig-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ig-grid a:hover img {
  transform: scale(1.05);
}

/* Instagram Profile Header */
.ig-profile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 400px;
  margin: 0 auto 12px;
}

.ig-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ig-profile-avatar img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.ig-profile-name {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  flex: 1;
  text-align: left;
}

.ig-follow-btn {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #0095f6;
  border: none;
  border-radius: 8px;
  padding: 6px 20px;
  text-decoration: none;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.ig-follow-btn:hover {
  background: #1877f2;
}

/* Instagram CTA */
.ig-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: 14px 28px 14px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
}

.ig-cta-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(196, 149, 106, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(196, 149, 106, 0.15);
}

.ig-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: white;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}

.ig-cta-link:hover .ig-cta-icon {
  transform: scale(1.08);
}

.ig-cta-handle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.ig-cta-link:hover .ig-cta-handle {
  color: var(--dusk);
}

@media (min-width: 768px) {
  .ig-cta-handle {
    font-size: 28px;
  }

  .ig-cta-icon {
    width: 52px;
    height: 52px;
  }
}

.subscribe-strip-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.subscribe-form-row {
  display: flex;
  gap: 10px;
}

.subscribe-strip-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.subscribe-strip-label {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  text-align: left;
}

.subscribe-strip-select {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: white;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 13px 16px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}

.subscribe-strip-select:focus {
  border-color: var(--dusk);
}

.subscribe-strip-select option {
  background: #1C1C1E;
  color: white;
}

.subscribe-strip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.subscribe-strip-chip {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 7px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.subscribe-strip-chip.active {
  color: white;
  background: var(--dusk);
  border-color: var(--dusk);
}

.subscribe-strip-chip:hover:not(.active) {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
}

.subscribe-strip-input {
  flex: 1;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: white;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px 18px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}

.subscribe-strip-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.subscribe-strip-input:focus {
  border-color: var(--dusk);
  background: rgba(255, 255, 255, 0.1);
}

.subscribe-strip-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--dusk);
  color: white;
  border: none;
  border-radius: 14px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--transition);
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.subscribe-strip-btn:hover {
  background: #b8845a;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196, 149, 106, 0.4);
}

.subscribe-strip-btn:active {
  transform: scale(0.97);
}

.subscribe-strip-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.subscribe-strip-success {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--dusk);
  letter-spacing: 0.3px;
  margin-top: 20px;
  text-align: center;
}

@media (max-width: 480px) {
  .subscribe-form-row {
    flex-direction: column;
  }
}

/* ============================================================
   SCROLL-REVEAL ANIMATIONS
   ============================================================ */

.reveal-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-section.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children for how-it-works cards */
.reveal-section .home-how-step {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-section.revealed .home-how-step:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.reveal-section.revealed .home-how-step:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.reveal-section.revealed .home-how-step:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* ============================================================================
   FOOTER — "The City at Dusk"
   Hand-drawn burgundy skyline of Hoboken + NYC across the Hudson; gold
   windows light up staggered on scroll-into-view. All rules are scoped
   under .dusk-footer to avoid collisions with the rest of the app.
   ============================================================================ */
.app-footer.dusk-footer {
  --sf-wine: #7E2A33;
  --sf-wine-2: #A64450;
  --sf-gold: #D4AF37;
  --sf-gold-text: #B08D2E;
  --sf-sand: #E8D5B0;
  --sf-ink: #1C1410;
  --sf-ink-soft: #5B5148;
  --sf-warm-white: #FFFCF7;
  margin-top: auto;
  position: relative;
  overflow: hidden;
  /* the page's daylight cream cools into a low, warm dusk near the horizon */
  background: linear-gradient(to bottom,
    var(--cream) 0%,
    #FAF4E9 34%,
    #F7EBD8 62%,
    #F4E4CB 100%);
}

/* soft gold breath above where the sun sets */
.dusk-footer::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(120vw, 1100px);
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(212, 175, 55, .20), rgba(212, 175, 55, 0) 65%);
  pointer-events: none;
}

.dusk-footer .dusk-sky {
  position: relative;
  padding-top: clamp(2.6rem, 4.5vw, 4rem);
}

.dusk-footer .dusk-head {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 4vw, 2.5rem);
  text-align: center;
}

.dusk-footer .dusk-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  color: var(--sf-gold);
  margin-bottom: clamp(1.3rem, 2.4vw, 1.9rem);
}

.dusk-footer .orn-line {
  width: clamp(42px, 5vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sf-gold));
}

.dusk-footer .orn-line:last-child {
  background: linear-gradient(90deg, var(--sf-gold), transparent);
}

.dusk-footer .orn-spark {
  width: 13px;
  height: 13px;
  flex: none;
}

.dusk-footer .dusk-motto {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 36%;
  transform: translateX(-50%);
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3rem, 5.4vw, 5.1rem);
  line-height: 1;
  letter-spacing: -.01em;
  background: linear-gradient(to top, rgba(212, 175, 55, .30), rgba(212, 175, 55, .12));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: none;
  opacity: .8;
  margin: 0;
  white-space: nowrap;
  user-select: none;
}





/* skyline band */
.dusk-footer .dusk-skyline-wrap {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
  line-height: 0;
  pointer-events: none;
}

.dusk-footer .dusk-skyline {
  width: 100%;
  height: auto;
  display: block;
}

/* stroke language */
.dusk-footer .ln { fill: none; stroke: var(--sf-wine); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dusk-footer .ln-fine { fill: none; stroke: var(--sf-wine); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dusk-footer .ln-soft { fill: none; stroke: var(--sf-wine-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.dusk-footer .gold-ln { fill: none; stroke: var(--sf-gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dusk-footer .gold-fill { fill: var(--sf-gold); }

/* the sailboat keeps its warm-white sails on the gradient water */
.dusk-footer .ln-fine[fill="#FFFCF7"] { fill: var(--sf-warm-white); }

/* windows: always drawn, lit with gold one by one */
.dusk-footer .win {
  fill: var(--sf-gold);
  fill-opacity: 0;
  stroke: var(--sf-wine);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: fill-opacity 1.6s ease;
}

.dusk-footer .win.on { fill-opacity: .92; }

@keyframes sf-twinkle {
  0%, 100% { fill-opacity: .92; }
  50% { fill-opacity: .38; }
}

.dusk-footer .win.on.tw { animation: sf-twinkle var(--twd, 5s) ease-in-out var(--twdel, 0s) infinite; }

/* distant George Washington Bridge */
.dusk-footer .gwb { fill: none; stroke: var(--sf-wine-2); stroke-width: 1.5; stroke-linecap: round; opacity: .4; }

/* setting sun */
.dusk-footer .sun-halo { opacity: .5; }

@keyframes sf-breathe {
  from { opacity: .35; }
  to { opacity: .7; }
}

.dusk-footer.lit .sun-halo { animation: sf-breathe 5.5s ease-in-out infinite alternate; }
.dusk-footer .sun-body { fill: #F5DFA2; stroke: var(--sf-gold); stroke-width: 2.6; stroke-linecap: round; }
.dusk-footer .sun-ray { stroke: var(--sf-gold); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity 1.4s ease .4s; }
.dusk-footer .sun-ray.glow { opacity: .9; }
.dusk-footer .sun-reflect { stroke: var(--sf-gold); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity 1.8s ease .9s; }
.dusk-footer .sun-reflect.glow { opacity: .65; }

/* spire beacon + lamppost */
@keyframes sf-beacon {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

.dusk-footer .beacon { fill: var(--sf-gold); opacity: 0; transition: opacity 1s ease 2.2s; }
.dusk-footer .beacon.glow { opacity: 1; animation: sf-beacon 4s ease-in-out 3.4s infinite; }
.dusk-footer .lamp-glow { fill: var(--sf-gold); opacity: 0; transition: opacity 1.2s ease 1.6s; }
.dusk-footer .lamp-glow.glow { opacity: .9; }

/* ————— street level ————— */
.dusk-footer .dusk-street {
  position: relative;
  z-index: 3;
  background: var(--sf-warm-white);
  border-top: 2px solid var(--sf-wine);
}



.dusk-footer .dusk-truth {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.35;
  color: var(--sf-ink);
  min-height: 1.4em;
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .9s ease, transform .9s ease;
}

.dusk-footer .dusk-truth .num {
  font-style: normal;
  font-weight: 600;
  color: var(--sf-wine);
  padding: 0 .08em;
}

.dusk-footer .dusk-truth.show {
  opacity: 1;
  transform: none;
}





.dusk-footer .dusk-ig {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(.2rem, 1.5vw, .8rem);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--sf-ink);
  text-decoration: none;
  transition: color .3s ease;
}
.dusk-footer .dusk-ig .ig-doodle {
  width: clamp(20px, 2.4vw, 24px);
  height: clamp(20px, 2.4vw, 24px);
  color: var(--sf-wine);
  transition: transform .3s ease;
}
.dusk-footer .dusk-ig:hover { color: var(--sf-wine); }
.dusk-footer .dusk-ig:hover .ig-doodle { transform: rotate(-6deg) scale(1.08); }

.dusk-footer .dusk-navline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem clamp(.8rem, 1.6vw, 1.3rem);
  margin-top: clamp(1.6rem, 2.8vw, 2.3rem);
}

.dusk-footer .dusk-navline .sep {
  color: var(--sf-wine);
  opacity: .55;
  font-size: .9rem;
  user-select: none;
}

.dusk-footer .dusk-link-col h3 {
  font-family: 'Jost', sans-serif;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--sf-wine);
  margin: 0 0 1rem;
}

.dusk-footer .dusk-link-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dusk-footer .dusk-link-col li + li {
  margin-top: .55rem;
}

.dusk-footer .dusk-link-col a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .86rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sf-ink);
  text-decoration: none;
  padding-bottom: .1rem;
  cursor: pointer;
}

.dusk-footer .dusk-link-col a:hover,
.dusk-footer .dusk-link-col a:focus-visible {
  color: var(--sf-wine);
  text-decoration: underline wavy var(--sf-gold-text) 1.5px;
  text-underline-offset: 5px;
}

.dusk-footer .ig-doodle {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--sf-wine);
}

.dusk-footer .dusk-baseline {
  max-width: 1160px;
  margin: 0 auto;
  padding: .9rem clamp(1.4rem, 4vw, 2.5rem);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.dusk-footer .dusk-baseline p {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sf-ink-soft);
}

@media (max-width: 700px) {
  .dusk-footer .dusk-head {
    padding: 0 1.3rem;
  }
  .dusk-footer .dusk-truth {
    font-size: 1.2rem;
  }
  .dusk-footer .dusk-navline {
    gap: .3rem .9rem;
    margin-top: 1.2rem;
  }
  .dusk-footer .dusk-link-col a {
    min-height: 44px;
    align-items: center;
  }
  .dusk-footer .dusk-motto {
    font-size: clamp(2.4rem, 11.5vw, 2.95rem);
    bottom: 40%;
  }
  .dusk-footer .dusk-skyline-wrap {
    margin-top: .15rem;
  }
  .dusk-footer .dusk-baseline {
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    text-align: center;
  }
}

/* reduced motion: dusk arrives all at once, calm */
@media (prefers-reduced-motion: reduce) {
  .dusk-footer .win {
    transition: none !important;
    animation: none !important;
  }

  .dusk-footer .sun-ray,
  .dusk-footer .sun-reflect,
  .dusk-footer .beacon,
  .dusk-footer .lamp-glow {
    transition: none;
  }

  .dusk-footer.lit .sun-halo,
  .dusk-footer .beacon.glow {
    animation: none;
  }

  .dusk-footer .dusk-truth {
    transition: none;
    transform: none;
  }
}


/* ============================================================================
   SOCIAL MEDIA VIEW — iPhone-screenshot Instagram posts
   Each .social-post = exactly one screen (100dvh). No scroll needed.
   Warm cream editorial design with dark typography.
   ============================================================================ */

#social-view {
  background: #EDE8E0;
  padding: 0;
  overflow-x: hidden;
}

.social-posts-container {
  display: flex;
  flex-direction: column;
}

/* ---- Card: Instagram 4:5 portrait frame ---- */
.social-post {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background: #EDE8E0;
}

/* Alternating card backgrounds: dust → sand → sage */
#social-art {
  background: #EDE8E0;
}

#social-perks {
  background: #E8D5B0;
}

#social-community {
  background: #D4E0D8;
}

/* Subtle canvas/linen texture overlay */
.social-post::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.018;
  background-image:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(28, 20, 16, 0.3) 2px,
      rgba(28, 20, 16, 0.3) 3px),
    repeating-linear-gradient(90deg,
      transparent,
      transparent 2px,
      rgba(28, 20, 16, 0.2) 2px,
      rgba(28, 20, 16, 0.2) 3px);
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 1;
}

/* ---- Sand card: slightly adjusted for medium bg ---- */
#social-perks .social-event-row {
  border-bottom-color: rgba(28, 20, 16, 0.06);
}

/* Inner flex layout — fills screen, spaces header/list/footer */
.social-post-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 24px;
  box-sizing: border-box;
}

/* ---- Top: logo + category with rules + date range + vertical line ---- */
.social-post-top {
  text-align: center;
  flex-shrink: 0;
  padding-bottom: 4px;
}

.social-logo {
  width: 120px;
  height: auto;
  margin: 0 auto 8px;
  display: block;
  filter: brightness(0.1);
}

.social-post-category {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #1C1410;
  letter-spacing: 5px;
  margin-bottom: 4px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.social-post-category::before,
.social-post-category::after {
  content: '';
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: rgba(28, 20, 16, 0.25);
}

.social-post-week {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(28, 20, 16, 0.5);
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Vertical line separator between header and events */
.social-rule {
  flex-shrink: 0;
  width: 1px;
  height: 20px;
  margin: 0 auto;
  background: rgba(28, 20, 16, 0.2);
}

.social-rule:last-of-type {
  display: none;
}

/* ---- Event list — fills the middle space ---- */
.social-events-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.social-event-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 0;
  border-bottom: 1px solid rgba(28, 20, 16, 0.08);
}

.social-event-row:last-child {
  border-bottom: none;
}

.social-event-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 300;
  color: rgba(28, 20, 16, 0.3);
  flex-shrink: 0;
  width: 22px;
  text-align: right;
}

.social-event-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 400;
  color: #1C1410;
  flex: 1;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.social-event-meta {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: rgba(28, 20, 16, 0.45);
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* ---- Bottom: URL + tagline ---- */
.social-post-bottom {
  text-align: center;
  flex-shrink: 0;
  padding-top: 12px;
}

.social-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  color: rgba(28, 20, 16, 0.5);
  margin-bottom: 4px;
}

.social-url {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1C1410;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.social-empty {
  text-align: center;
  padding: 40px 24px;
  color: rgba(28, 20, 16, 0.4);
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-style: italic;
}

/* ---- Caption buttons below each card ---- */
.social-caption {
  background: #FFFFFF;
  padding: 16px 0;
  text-align: center;
}

.social-caption-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.social-copy-btn,
.social-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #1C1410;
  color: #FAF8F3;
  border: none;
  border-radius: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.social-copy-btn:hover,
.social-download-btn:hover {
  background: #2C2420;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(28, 20, 16, 0.2);
}

.social-copy-btn:active,
.social-download-btn:active {
  transform: translateY(0);
}

.social-copy-btn svg,
.social-download-btn svg {
  flex-shrink: 0;
}

.social-preview-image {
  margin-top: 16px;
  text-align: center;
}

.social-preview-hint {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: #888;
  margin-bottom: 12px;
}

.social-preview-img {
  width: 100%;
  max-width: 540px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.social-preview-close {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 20px;
  background: none;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.social-preview-close:hover {
  border-color: #999;
  color: #333;
}

/* ============================================================================
   PINNED POSTS VIEW — 3 Instagram 4:5 title cards (1080×1350px)
   A terracotta wave ribbon flows across all 3 when pinned on IG grid.
   Grid order L→R: card 3 | card 2 | card 1 (newest = leftmost).
   Wave enters from left edge of card 3, peaks at card 2, exits card 1.
   ============================================================================ */

#pins-view {
  padding: 0;
  overflow-x: hidden;
  background: #1C1410;
}

.pins-container {
  display: flex;
  flex-direction: column;
}

/* ---- Each card: 4:5 aspect ratio for phone screenshot ---- */
.pin-card {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1C1410;
  border-bottom: 2px solid #ff3333;
}

.pin-card:last-child {
  border-bottom: none;
}

/* Canvas texture */
.pin-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(250, 248, 243, 0.15) 3px, rgba(250, 248, 243, 0.15) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(250, 248, 243, 0.1) 3px, rgba(250, 248, 243, 0.1) 4px);
  background-size: 5px 5px;
  pointer-events: none;
  z-index: 1;
}

/* ---- Terracotta wave SVG ---- */
.pin-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.pin-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 32px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* ---- Shared elements ---- */

.pin-heart {
  width: 48px;
  height: auto;
  margin-bottom: 32px;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.pin-rule {
  width: 48px;
  height: 1px;
  background: rgba(250, 248, 243, 0.3);
  margin: 24px auto;
}

/* ---- Card 1: NYC Curated ---- */

.pin-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 300;
  color: #FAF8F3;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.05;
}

.pin-sub {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(250, 248, 243, 0.55);
  letter-spacing: 6px;
  text-transform: uppercase;
}

.pin-text-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pin-text-stack .pin-rule {
  margin: 20px auto;
}

/* ---- Card 2: Logo + URL ---- */

.pin-logo {
  width: 55%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  margin-bottom: 0;
}

.pin-url {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(250, 248, 243, 0.5);
  letter-spacing: 6px;
  text-transform: uppercase;
}

/* ---- Card 3: Categories ---- */

.pin-cats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pin-cats span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 300;
  color: #FAF8F3;
  letter-spacing: 2px;
}

.pin-cats-tagline {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(250, 248, 243, 0.45);
  letter-spacing: 5px;
  text-transform: uppercase;
}

/* Free Mode Toggle (High-End Sub-style) */
/* ── Real event photographs over the doodle fallback art ─────────────────
   The category doodle stays painted underneath as the brand fallback; when
   a listing has a real photo it layers on top, and a failed load removes
   itself so the doodle shows through. */
.event-card-image,
.sidebar-card-image {
  position: relative;
  overflow: hidden;
}

.event-art-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Sold Out state (truth pass strips "| Sold Out" from titles; the state
   still deserves to be seen). Same chip anatomy as the Free badge/pill,
   wine tone from the legacy palette. Actions stay live. */
.event-footer-soldout {
  font-family: 'Jost', sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #8B3A3A; /* wine — AA on the white card */
  flex-shrink: 0;
  text-transform: uppercase;
}

.modal-soldout-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(139, 69, 69, 0.06);
  border: 1px solid rgba(139, 69, 69, 0.18);
  border-radius: var(--radius-lg);
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #8B3A3A;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.modal-soldout-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A0686B;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SALON — full visual redesign layer (2026-07 reskin)
   Warm golden-hour cream gallery. This section restyles every surface to the
   approved "Salon" art direction. It overrides the earlier flatter styling
   while preserving all class hooks the app JS depends on.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --hand: 'Caveat', cursive;
  --sand-soft: #F1E4CC;
  --wine-2: #A64450;
  --gold-2: #B08D2E;
  /* Layered warm shadows — the soft, considered elevation of the Salon */
  --salon-shadow: 0 2px 4px rgba(74, 40, 30, .05), 0 14px 40px -14px rgba(74, 40, 30, .18);
  --salon-shadow-lift: 0 8px 18px rgba(74, 40, 30, .10), 0 40px 80px -30px rgba(74, 40, 30, .30);
}

/* Paper grain — a faint multiply-blend fractal noise across the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: 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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

::selection { background: var(--wine); color: var(--sand-soft); }

/* ── NAV — warm blur bar, serif-adjacent wordmark, wine underline ── */
.nav-bar {
  background: linear-gradient(180deg, rgba(250, 248, 243, .94), rgba(250, 248, 243, .74)) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid transparent !important;
  box-shadow: 0 8px 30px -22px rgba(74, 40, 30, .4);
}
.nav-item .nav-label {
  font-family: var(--sans, 'Jost', sans-serif);
  letter-spacing: .06em;
}
.nav-item.active .nav-label { color: var(--wine); }

/* ═══ HERO — Salon split grid ═══ */
.hero.hero-landing {
  min-height: auto;
}
.view-home .hero-salon-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 8px;
  width: 100%;
}
/* On list views (all/today/week) the doodle plate + editorial copy collapse
   to a clean compact header — only the rotating title lockup shows. */
#discover-view:not(.view-home) .hero-salon-grid {
  display: block;
  padding: 0;
}
#discover-view:not(.view-home) .hero-art,
#discover-view:not(.view-home) .hero-eyebrow,
#discover-view:not(.view-home) .hero-salon-lede,
#discover-view:not(.view-home) .hero-salon-actions,
#discover-view:not(.view-home) .salon-ticker {
  display: none !important;
}

.hero-copy { max-width: 600px; text-align: left; }
.hero-title-panel { text-align: left; align-items: flex-start; }

.hero-eyebrow {
  font-family: var(--sans, 'Jost', sans-serif);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 18px;
}

/* Oversized Cormorant headline: "Tonight's / Soirée" lockup */
.view-home .hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.01em;
  font-size: clamp(52px, 7vw, 104px);
  text-align: left;
  margin: 0 0 .12em;
  color: var(--ink, #1C1410);
}
.view-home .title-rotating,
.view-home .title-word {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--wine);
}
.view-home .hero-title-logo {
  height: clamp(46px, 6.6vw, 96px);
  width: auto;
  margin-top: -.02em;
  vertical-align: baseline;
}

.hero-salon-lede {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.5;
  color: #4a3b30;
  max-width: 480px;
  margin: 8px 0 30px;
}
.hero-salon-lede b { color: var(--wine); font-weight: 600; font-style: italic; }

.hero-salon-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-browse-btn {
  font-family: var(--sans, 'Jost', sans-serif);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wine);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  padding: 14px 28px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .25s var(--ease-spring);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 10px rgba(0, 0, 0, 0.06);
  text-decoration: none;
}
.hero-browse-btn:hover { background: rgba(255, 255, 255, 0.68); border-color: rgba(255, 255, 255, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 6px 18px rgba(0, 0, 0, 0.09); transform: translateY(-1px); }
.hero-browse-btn .arw { transition: transform .25s ease; }
.hero-browse-btn:hover .arw { transform: translate(3px, -2px); }
.hero-guest-count {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: #6a5849;
}
.hero-guest-count b { font-style: normal; font-weight: 600; color: var(--wine); font-size: 21px; }

/* Hero art — the tilted burgundy doodle plate + floating invitation tags */
.hero-art {
  position: relative;
  height: 520px;
  opacity: 0;
  animation: salonRise 1.1s .35s forwards;
}
@keyframes salonRise { to { opacity: 1; transform: none; } }
.hero-plate {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: var(--wine);
  overflow: hidden;
  box-shadow: var(--salon-shadow-lift);
  transform: rotate(-2.4deg);
}
.hero-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 30% 10%, rgba(212, 175, 55, .24), transparent 60%);
  mix-blend-mode: screen;
}
.hero-doodle {
  position: absolute;
  width: 118%;
  left: -9%;
  top: -6%;
  height: auto;
  opacity: .98;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .25));
  animation: salonSway 9s ease-in-out infinite;
}
@keyframes salonSway { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(.6deg); } }
.hero-tag {
  position: absolute;
  z-index: 3;
  background: var(--surface, #FFFCF7);
  border-radius: 14px;
  padding: 13px 18px 14px;
  box-shadow: var(--salon-shadow-lift);
  border: 1px solid rgba(255, 255, 255, .6);
}
.hero-tag-k { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--dusk); font-weight: 500; font-family: var(--sans, 'Jost', sans-serif); }
.hero-tag-v { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; line-height: 1.05; margin-top: 3px; }
.hero-tag-1 { top: 20px; right: -14px; transform: rotate(3deg); animation: salonFloat 6s ease-in-out infinite; }
.hero-tag-2 { bottom: 40px; left: -22px; transform: rotate(-3deg); animation: salonFloat 7s ease-in-out .8s infinite; }
.hero-tag-2 .hero-tag-v { color: var(--wine); }
@keyframes salonFloat { 0%, 100% { transform: translateY(0) rotate(var(--tr, 0)); } 50% { transform: translateY(-9px) rotate(var(--tr, 0)); } }
.hero-tag-1 { --tr: 3deg; } .hero-tag-2 { --tr: -3deg; }
.hero-scribble {
  position: absolute;
  font-family: var(--hand);
  color: #fff;
  font-size: 30px;
  transform: rotate(-8deg);
  right: 16px;
  bottom: -8px;
  z-index: 4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

@media (prefers-reduced-motion: reduce) {
  .hero-doodle, .hero-tag-1, .hero-tag-2, .hero-art { animation: none !important; opacity: 1 !important; }
}

/* ═══ MARQUEE TICKER ═══ */
.salon-ticker {
  margin: 44px auto 0;
  max-width: 1200px;
  border-top: 1px solid var(--border-medium);
  border-bottom: 1px solid var(--border-medium);
  overflow: hidden;
  padding: 15px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.salon-ticker-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: salonScroll 72s linear infinite;
}
.salon-ticker:hover .salon-ticker-track { animation-play-state: paused; }
.salon-ticker-track span {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 23px;
  color: #6a5849;
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  gap: 30px;
}
.salon-ticker-track span::after { content: "✦"; color: var(--gold-2); font-style: normal; font-size: 13px; }
@keyframes salonScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .salon-ticker-track { animation: none; } }

/* ═══ EDITORIAL SECTION HEADS ═══ */
.salon-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 8px auto 26px;
  padding: 0 32px;
}
.salon-sec-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(21px, 2.5vw, 31px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink, #1C1410);
  margin: 0;
}
.salon-sec-title em { font-style: italic; color: var(--wine); }
.salon-sec-num { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--gold-2); font-size: .5em; margin-right: 14px; vertical-align: baseline; }
.salon-sec-side { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; color: #6a5849; max-width: 320px; text-align: right; margin: 0; }
@media (max-width: 720px) {
  .salon-sec-head { padding: 0 22px; margin-bottom: 18px; }
  .salon-sec-side { display: none; }
}

/* ═══ VALUE LINE — serif italic instead of flat uppercase ═══ */
.value-line {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #6a5849 !important;
  padding: 28px 24px 10px !important;
}
.value-line-num { font-style: normal; font-weight: 600; color: var(--wine); }

/* ═══ CATEGORY TABS — Salon pills ═══ */
.gallery-tab {
  border-radius: 100px !important;
  font-family: var(--sans, 'Jost', sans-serif) !important;
  letter-spacing: .05em !important;
  background: var(--surface, #FFFCF7) !important;
}
.gallery-tab.active {
  background: var(--ink, #1C1410) !important;
  color: var(--sand-soft) !important;
  box-shadow: var(--salon-shadow) !important;
}
.gallery-tab:hover:not(.active) {
  border-color: var(--wine) !important;
  transform: translateY(-2px);
  box-shadow: var(--salon-shadow) !important;
}

/* ═══ EVENT CARDS — warm editorial ═══ */
.event-card {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  background: var(--surface, #FFFCF7) !important;
  box-shadow: var(--salon-shadow) !important;
  transition: transform .35s var(--ease-spring), box-shadow .35s ease !important;
}
.event-card:hover {
  transform: translateY(-6px) rotate(-.35deg) !important;
  box-shadow: var(--salon-shadow-lift) !important;
  border-color: rgba(255, 255, 255, .9) !important;
}
.event-name {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 600 !important;
  letter-spacing: -.005em;
}
.event-card-category {
  font-family: var(--sans, 'Jost', sans-serif) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--dusk) !important;
}
.event-card-date {
  font-family: var(--sans, 'Jost', sans-serif) !important;
  color: var(--dusk) !important;
  letter-spacing: .04em;
}
.event-footer-free {
  background: var(--gold) !important;
  color: var(--ink, #1C1410) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-weight: 600 !important;
}
.event-card-image::after {
  /* faint golden-hour warm-up over every photo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(212, 175, 55, .05), rgba(126, 42, 51, .06));
  pointer-events: none;
  mix-blend-mode: multiply;
}
.event-card-image { position: relative; }
.event-art-photo { filter: saturate(1.03) contrast(1.02); }

/* Featured main card — big editorial hero photo with serif title */
@media (min-width: 768px) {
  .gallery-featured-main .event-name { font-family: 'Cormorant Garamond', serif !important; font-size: 30px !important; }
  .gallery-featured-main .event-card { border-radius: 22px !important; box-shadow: var(--salon-shadow-lift) !important; }
  .gallery-featured-main .event-card:hover { transform: translateY(-4px) !important; box-shadow: var(--salon-shadow-lift) !important; }
  .sidebar-card-name { font-family: 'Cormorant Garamond', serif !important; font-weight: 600 !important; font-size: 16px !important; }
  .sidebar-card.active { border-color: var(--wine) !important; box-shadow: 0 0 0 1px var(--wine), var(--salon-shadow) !important; }
}

/* ═══ SALON STRIP — the house philosophy break ═══ */
.salon-strip {
  max-width: 1200px;
  margin: 90px auto 20px;
  padding: 0 32px;
}
.salon-strip-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border-radius: 26px;
  overflow: hidden;
  background: var(--ink, #1C1410);
  box-shadow: var(--salon-shadow-lift);
}
.salon-strip-copy { padding: 62px 52px; }
.salon-strip-eyebrow { font-family: var(--sans, 'Jost', sans-serif); font-weight: 500; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.salon-strip-heading { font-family: 'Cormorant Garamond', serif; font-weight: 500; color: var(--sand-soft); font-size: clamp(30px, 3.6vw, 48px); line-height: 1.02; margin: 0 0 18px; }
.salon-strip-heading em { font-style: italic; color: var(--dusk); }
.salon-strip-text { font-family: 'Cormorant Garamond', serif; font-size: 19px; line-height: 1.55; color: #d9c6ad; max-width: 420px; margin: 0 0 26px; }
.salon-strip-btn { display: inline-flex; font-family: var(--sans, 'Jost', sans-serif); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink, #1C1410); background: var(--dusk); padding: 15px 28px; border-radius: 100px; text-decoration: none; transition: transform .25s ease, background .25s ease; box-shadow: var(--salon-shadow); }
.salon-strip-btn:hover { transform: translateY(-2px); background: #d3a67f; }
.salon-strip-art { position: relative; align-self: stretch; min-height: 380px; background: #959c60; overflow: hidden; }
.salon-strip-art img { position: absolute; width: 82%; left: 9%; top: 50%; transform: translateY(-50%); filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .4)); }
@media (max-width: 900px) {
  .salon-strip-inner { grid-template-columns: 1fr; }
  .salon-strip-copy { padding: 44px 32px; }
  .salon-strip-art { min-height: 260px; }
}

/* ═══ DETAIL MODAL — the invitation drawer (desktop) ═══ */
.modal-photo-hero {
  position: relative;
  height: 300px;
  flex: none;
  overflow: hidden;
  background: var(--wine);
  border-radius: 0;
}
.modal-photo-hero .event-art-photo,
.modal-photo-hero img.event-art-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04);
}
.modal-photo-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 12, 8, .72), transparent 55%);
}
.modal-photo-cat {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 4;
  font-family: var(--sans, 'Jost', sans-serif);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink, #1C1410);
  background: var(--gold);
  padding: 7px 15px;
  border-radius: 100px;
  font-weight: 500;
}
/* Compact swatch header no longer needed once we have a photo hero */
.modal-hero-swatch { display: none !important; }
.modal-hero { padding-top: 22px !important; }
.modal-hero-title { font-family: 'Cormorant Garamond', serif !important; font-weight: 600 !important; letter-spacing: -.01em; }
.modal-hero-category { color: var(--wine) !important; font-family: 'Cormorant Garamond', serif !important; font-style: italic; text-transform: none !important; letter-spacing: 0 !important; font-size: 17px !important; }
.modal-info-pill { border-radius: 14px !important; }
.modal-pill-value { font-family: 'Cormorant Garamond', serif !important; font-weight: 600 !important; }
.modal-description { font-family: 'Cormorant Garamond', serif !important; font-size: 18px !important; line-height: 1.6 !important; color: #3f322a !important; }
.modal-section-label { color: var(--dusk) !important; letter-spacing: .2em !important; }
.modal-cta-btn { background: var(--ink, #1C1410) !important; color: var(--sand-soft) !important; border-radius: 100px !important; letter-spacing: .12em; }
.modal-cta-btn:hover { background: var(--wine) !important; }

/* Desktop: slide the sheet in from the right as an invitation drawer */
@media (min-width: 600px) {
  .modal-overlay { align-items: stretch !important; justify-content: flex-end !important; padding: 0 !important; }
  .modal {
    border-radius: 0 !important;
    max-width: 560px !important;
    width: min(560px, 100%) !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    transform: translateX(102%) !important;
    opacity: 1 !important;
    transition: transform .5s cubic-bezier(.4, 0, .1, 1) !important;
    box-shadow: -30px 0 80px -30px rgba(28, 20, 16, .5) !important;
  }
  .modal-overlay.active .modal { transform: none !important; }
  .modal-photo-hero { height: 340px; }
}

/* ═══ FAVORITES / list headers — serif polish ═══ */
.header .title, .greeting {
  font-family: 'Cormorant Garamond', serif;
}
.header .title { font-weight: 500; }

/* ═══ ABOUT — warm editorial polish over the dashboard ═══ */
.about-heading { font-family: 'Cormorant Garamond', serif; }
.about-heading em { color: var(--wine); }
.about-stat-val { font-family: 'Cormorant Garamond', serif !important; color: var(--wine) !important; }
.about-overline { color: var(--dusk) !important; letter-spacing: .28em !important; }

/* ═══ SUBSCRIBE / IG strip — serif heading ═══ */
.subscribe-section-heading { font-family: 'Cormorant Garamond', serif !important; font-weight: 500 !important; }
.subscribe-section-heading em { font-style: italic; color: var(--wine) !important; }

/* ═══ RESPONSIVE — mobile hero ═══ */
@media (max-width: 900px) {
  .view-home .hero-salon-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 22px 4px;
    text-align: left;
  }
  .hero-art { height: 340px; max-width: 420px; margin: 8px auto 0; }
  .salon-ticker { margin-top: 30px; }
}
/* Marquee ticker on phones: a slower, roomier ribbon of tonight's real event
   names. Warm hairlines top & bottom, gold ✦ dividers, edge fades so names
   drift in and out. (Reduced-motion → static, handled globally.) */
@media (max-width: 767px) {
  .salon-ticker {
    margin: 30px 0 0;
    padding: 14px 0;
    border-color: var(--border-medium);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  .salon-ticker-track { animation-duration: 62s; }
  .salon-ticker-track span {
    font-size: 21px;
    padding: 0 24px;
    gap: 24px;
    color: #5f4d40;
  }
  .salon-ticker-track span::after { font-size: 12px; }
}
@media (max-width: 480px) {
  .salon-ticker-track span { font-size: 20px; padding: 0 20px; gap: 20px; }
}

/* ═══ MOBILE-NATIVE HERO (elegant redesign) ═══
   The approved desktop hero is a large TILTED burgundy doodle "plate" with the
   two invitation tags ("Happening soon · N events", "Always · Free to wander")
   and a Caveat "stay curious" scribble tastefully OVERLAID ON the plate. The
   mobile version keeps exactly that craft: the copy stacks cleanly, then the
   plate sits below it — large, tilted, softly shadowed, gently floating — with
   the tags and scribble overlaid on the plate itself (never touching the copy). */
@media (max-width: 767px) {
  /* Feed replaces the swipe deck, so the swipe-position progress bar is moot. */
  .gallery-progress-track { display: none; }
  /* Category tabs to a comfortable ≥44px tap height. */
  .gallery-tab { min-height: 44px; padding: 11px 14px; }
  /* Keep nav labels on one line on narrow phones (iPhone mini widths). */
  .nav-label { white-space: nowrap; }
  .nav-items { gap: 2px; }
  .nav-item { padding: 10px 8px; }

  .view-home .hero.hero-landing { padding: 8px 0 6px; }
  .view-home .hero-salon-grid {
    gap: 15px;
    padding: 12px 20px 6px;
  }
  .hero-eyebrow { font-size: 11px; letter-spacing: .26em; margin-bottom: 12px; }
  .view-home .hero-title { font-size: clamp(48px, 15.5vw, 70px); line-height: .93; }
  .view-home .hero-title-logo { height: clamp(44px, 14vw, 62px); }
  .hero-salon-lede {
    font-size: 17px;
    line-height: 1.44;
    margin: 6px 0 12px;
    max-width: 40ch;
  }
  .hero-salon-actions { gap: 16px; }
  .hero-browse-btn {
    flex: 0 0 auto;
    justify-content: center;
    padding: 13px 24px;
    font-size: 12.5px;
  }

  /* The plate stays a large, tilted, layered card — the invitation tags and the
     scribble float ON it (absolutely positioned), exactly like desktop. We give
     the art block real height + a little breathing room for the tags that spill
     past the plate edge, so nothing clips against the viewport. */
  .hero-art {
    height: clamp(240px, 64vw, 310px);
    max-width: none;
    margin: 0 6px 0;
    display: block;
    position: relative;
    animation: salonRise 1.1s .3s forwards;
  }
  .hero-plate {
    position: absolute;
    inset: 0;
    height: auto;
    transform: rotate(-2.2deg);
    border-radius: 22px;
    box-shadow: var(--salon-shadow-lift);
    animation: salonPlateFloatM 8s ease-in-out infinite;
  }
  .hero-doodle { width: 118%; left: -9%; top: -6%; animation: salonSway 9s ease-in-out infinite; }

  /* Invitation tags float back ON the plate — warm cards with a soft lift,
     gently drifting. Top-right = "Happening soon"; lower-left = "Free to
     wander". They read as label-over-value cards, not full-width ribbons. */
  .hero-tag {
    position: absolute;
    top: auto; right: auto; bottom: auto; left: auto;
    display: block;
    padding: 11px 15px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .6);
    background: var(--surface, #FFFCF7);
    box-shadow: var(--salon-shadow-lift);
    max-width: 62%;
  }
  .hero-tag-k { font-size: 9.5px; letter-spacing: .24em; }
  .hero-tag-v { font-size: 19px; margin-top: 2px; text-align: left; line-height: 1.02; }
  .hero-tag-1 {
    top: 16px; right: -8px; left: auto;
    transform: rotate(2.6deg);
    animation: salonFloat 6s ease-in-out infinite;
  }
  .hero-tag-2 {
    bottom: 30px; left: -10px; right: auto; top: auto;
    transform: rotate(-2.8deg);
    animation: salonFloat 7s ease-in-out .8s infinite;
  }
  .hero-scribble {
    position: absolute;
    order: 0;
    top: auto; left: auto;
    right: 34px; bottom: 16px;
    transform: rotate(-7deg);
    font-size: 29px;
    color: #fff;
    z-index: 4;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
  }
}
/* Gentle plate drift on mobile — a subtle counterpart to the doodle sway,
   giving the layered "plate" a hand-placed, floating feel. */
@keyframes salonPlateFloatM {
  0%, 100% { transform: rotate(-2.2deg) translateY(0); }
  50% { transform: rotate(-2.6deg) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-plate { animation: none !important; }
}
@media (max-width: 480px) {
  .view-home .hero-salon-grid { padding: 11px 18px 4px; gap: 14px; }
  .view-home .hero-title { font-size: clamp(44px, 15.5vw, 62px); }
  .hero-salon-lede { font-size: 16px; line-height: 1.42; margin: 6px 0 12px; }
  .hero-art { height: clamp(262px, 71vw, 320px); }
  .hero-tag-v { font-size: 18px; }
  .hero-scribble { font-size: 26px; right: 28px; bottom: 14px; }
}

/* ═══ MOBILE BROWSE FEED — editorial, photo-forward cards ═══
   On desktop the feed isn't shown (the featured layout is). On a phone the
   browse feed is the whole experience, so each card becomes a full-width
   editorial tile: a large, warmly-graded photograph on top (real event photo,
   doodle art as the graceful 404 fallback), then a cream caption panel with a
   gold date eyebrow, an oversized Cormorant title, a hairline rule, and the
   location + gold Free chip. Big depth, a soft press state, generous rhythm. */
@media (max-width: 767px) {
  .gallery-stack--feed { padding: 0 18px; }
  .gallery-stack--feed .gallery-stack-cards { gap: 18px; }

  .gallery-stack--feed .gallery-stack-cards .event-card {
    flex-direction: column;
    min-height: 0;
    border-radius: 22px;
    border: 1px solid rgba(126, 42, 51, .08);
    background: linear-gradient(180deg, #fffdfa 0%, #fdf8f0 100%);
    box-shadow: 0 2px 8px rgba(74, 40, 30, .06), 0 22px 44px -26px rgba(74, 40, 30, .28);
    transition: transform .28s var(--ease-spring), box-shadow .28s ease;
    overflow: hidden;
  }
  /* The category accent stripe would read as an odd sliver on a stacked card —
     retire it here; the gold date eyebrow + Free chip carry the accent. */
  .gallery-stack--feed .gallery-stack-cards .event-card-accent { display: none; }

  /* Large photo on top — warmly graded, with a soft gradient scrim at the base
     so the cream panel meets it gracefully. Doodle art shows through on 404. */
  .gallery-stack--feed .gallery-stack-cards .event-card-image {
    width: 100%;
    min-height: 0;
    height: 200px;
    position: relative;
  }
  .gallery-stack--feed .gallery-stack-cards .event-art-photo {
    filter: saturate(1.04) contrast(1.02) brightness(1.01);
  }
  .gallery-stack--feed .gallery-stack-cards .event-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 55%, rgba(28, 20, 16, .16) 100%),
      radial-gradient(120% 80% at 50% 0%, rgba(212, 175, 55, .08), transparent 60%);
    pointer-events: none;
  }

  .gallery-stack--feed .gallery-stack-cards .event-card-inner {
    padding: 16px 18px 17px;
    gap: 11px;
  }
  .gallery-stack--feed .gallery-stack-cards .event-card-category {
    color: var(--gold-2);
    font-weight: 600;
    letter-spacing: 1.4px;
  }
  .gallery-stack--feed .gallery-stack-cards .event-card-date {
    color: var(--gold-2);
    font-weight: 500;
  }
  .gallery-stack--feed .gallery-stack-cards .event-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.005em;
    color: var(--deep);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Hairline rule between title and location — the editorial divider. */
  .gallery-stack--feed .gallery-stack-cards .event-card-footer {
    padding-top: 12px;
    border-top: 1px solid rgba(126, 42, 51, .10);
    margin-top: 1px;
  }
  .gallery-stack--feed .gallery-stack-cards .event-footer-location {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16.5px;
    color: #6a5849;
  }
  .gallery-stack--feed .gallery-stack-cards .event-footer-location svg {
    color: var(--wine);
    opacity: .8;
  }
  /* Warm gold Free chip. */
  .gallery-stack--feed .gallery-stack-cards .event-footer-free {
    background: linear-gradient(135deg, #f3d898, #e8c778);
    color: #5c4410;
    border: 1px solid rgba(176, 141, 46, .35);
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .4px;
    box-shadow: 0 1px 3px rgba(176, 141, 46, .25);
  }

  /* The category + date eyebrow stays in the caption panel (gold, editorial).
     The favorite heart lifts out and floats onto the photo as a frosted pill. */
  .gallery-stack--feed .gallery-stack-cards .event-card-top {
    display: block;
  }
  .gallery-stack--feed .gallery-stack-cards .event-card-meta {
    display: flex;
    gap: 9px;
  }
  .gallery-stack--feed .gallery-stack-cards .favorite-btn {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 252, 247, .82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(28, 20, 16, .18);
    color: var(--wine);
  }
  .gallery-stack--feed .gallery-stack-cards .favorite-btn.favorited { color: var(--wine); }
  .gallery-stack--feed .gallery-stack-cards .favorite-btn svg { width: 20px; height: 20px; }

  /* Soft, tactile press state (no hover on touch). */
  .gallery-stack--feed .gallery-stack-cards .event-card:active {
    transform: scale(.986);
    box-shadow: 0 2px 6px rgba(74, 40, 30, .08), 0 12px 26px -18px rgba(74, 40, 30, .30);
  }

  /* Tasteful staggered entrance for the feed tiles. */
  .gallery-stack--feed .gallery-stack-cards .event-card.card-revealed {
    animation: feedTileRise .6s cubic-bezier(.19, 1, .22, 1) both;
  }
  .gallery-stack--feed .gallery-stack-cards .event-card:nth-child(1) { animation-delay: .02s; }
  .gallery-stack--feed .gallery-stack-cards .event-card:nth-child(2) { animation-delay: .07s; }
  .gallery-stack--feed .gallery-stack-cards .event-card:nth-child(3) { animation-delay: .12s; }
  .gallery-stack--feed .gallery-stack-cards .event-card:nth-child(4) { animation-delay: .16s; }
  .gallery-stack--feed .gallery-stack-cards .event-card:nth-child(n+5) { animation-delay: .2s; }

  .gallery-stack--feed .gallery-stack-counter { font-size: 16px; margin-bottom: 16px; }
}
@keyframes feedTileRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gallery-stack--feed .gallery-stack-cards .event-card.card-revealed { animation: none; }
}
@media (max-width: 480px) {
  .gallery-stack--feed .gallery-stack-cards .event-card-image { height: 184px; }
  .gallery-stack--feed .gallery-stack-cards .event-name { font-size: 23px; }
}

/* ══════════════════════ CURATED VIEWS (Today / This Week) ══════════════════════
   Filtering doesn't just prune the list — it rewrites the framing and shifts the
   accent, so each view feels curated and each filter changes the room you're in. */
.curated-intro {
  padding: clamp(24px, 3.5vw, 40px) 0 clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  animation: curatedRise .7s cubic-bezier(.19, 1, .22, 1) both;
}
@keyframes curatedRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .curated-intro { animation: none; } }
.curated-eyebrow {
  font-family: var(--sans); font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--wine); margin: 0 0 14px; display: flex; align-items: center; gap: 11px;
}
.curated-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .55; }
.curated-head {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, 4.7vw, 3.9rem);
  line-height: .98; letter-spacing: -.015em; color: var(--ink); margin: 0;
}
.curated-head em { font-style: italic; color: var(--wine); }
.curated-sub {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: #6a5849; margin: 14px 0 0;
}
/* the accent shifts with the active filter — same palette, different room */
.curated-intro[data-cat="perks"] .curated-eyebrow,
.curated-intro[data-cat="perks"] .curated-head em { color: var(--gold-2); }
.curated-intro[data-cat="community"] .curated-eyebrow,
.curated-intro[data-cat="community"] .curated-head em { color: var(--wine-2); }
.curated-intro[data-cat="music"] .curated-eyebrow,
.curated-intro[data-cat="music"] .curated-head em { color: var(--gold-2); }

/* This Week — day-grouped weekly spread */
.day-group { margin-bottom: 6px; }
.day-divider { display: flex; align-items: baseline; gap: 14px; padding: 28px 0 15px; }
.day-name { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; color: var(--ink); letter-spacing: -.01em; }
.day-date { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dusk); }
.day-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.day-count { font-family: var(--sans); font-size: 12px; color: var(--wine); font-weight: 600; }

/* The static House Philosophy strip is redundant once a view is curated. */
#discover-view:not(.view-home) .salon-strip { display: none; }

/* Non-card elements must span the 2-column events grid, not sit in a cell. */
#events-list > .curated-intro,
#events-list > .day-divider,
#events-list > .deals-card,
#events-list > .deals-peek,
#events-list > .empty-state,
#events-list > .pagination { grid-column: 1 / -1; }

/* ── The Scene strip (Today / This Week) — dynamic house-philosophy summary ── */
#events-list > .scene-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  background: var(--ink, #1C1410);
  border-radius: 22px;
  overflow: hidden;
  margin: clamp(20px, 3vw, 32px) 0 26px;
  box-shadow: var(--salon-shadow-lift, 0 40px 80px -30px rgba(74,40,30,.3));
  animation: curatedRise .7s cubic-bezier(.19, 1, .22, 1) both;
}
@media (prefers-reduced-motion: reduce) { #events-list > .scene-strip { animation: none; } }
.scene-copy { padding: clamp(30px, 4vw, 52px); }
.scene-eyebrow {
  font-family: var(--sans, 'Jost', sans-serif); font-weight: 500; font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px;
  display: flex; align-items: center; gap: 11px;
}
.scene-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .6; }
.scene-head {
  font-family: 'Cormorant Garamond', serif; font-weight: 500; color: var(--sand-soft, #F1E4CC);
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.0; letter-spacing: -.01em; margin: 0 0 18px;
}
.scene-head em { font-style: italic; color: var(--dusk, #C4956A); }
.scene-summary {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.55; color: #d9c6ad; max-width: 460px; margin: 0 0 26px;
}
.scene-summary strong { color: var(--gold); font-weight: 600; font-style: normal; }
.scene-summary em { color: var(--sand-soft, #F1E4CC); font-style: italic; }
.scene-stats { display: flex; gap: clamp(20px, 3vw, 40px); }
.scene-stats span {
  font-family: var(--sans, 'Jost', sans-serif); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #9a8b76; display: flex; flex-direction: column; gap: 3px;
}
.scene-stats b { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; color: var(--sand-soft, #F1E4CC); letter-spacing: 0; }
.scene-art { position: relative; align-self: stretch; min-height: 240px; background: #959c60; overflow: hidden; }
.scene-art img { position: absolute; width: 84%; left: 8%; top: 50%; transform: translateY(-50%); filter: drop-shadow(0 18px 36px rgba(0,0,0,.35)); }
.scene-scribble { position: absolute; right: 20px; bottom: 12px; z-index: 2; font-family: var(--hand); color: #fff; font-size: 30px; transform: rotate(-8deg); text-shadow: 0 1px 8px rgba(0,0,0,.35); pointer-events: none; }
@media (max-width: 767px) {
  #events-list > .scene-strip { grid-template-columns: 1fr; }
  .scene-art { min-height: 200px; order: -1; }
}