/* ============================================
   ANNA B — Sub-page Styles (About, Events)
   ============================================ */

/* --- Page Layout --- */
.page {
  min-height: 100vh;
  padding: var(--space-12) var(--space-6);
}

@media (max-width: 768px) {
  .page {
    padding-top: 88px;
  }
}

/* Connect page — centered, static tron backdrop pinned to the viewport. */
body.connect-page {
  background-color: #0a0a0f;
}

.connect-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* Lock to the initial viewport height captured at page load (browser
     chrome visible). Never recalculates — so when Safari's bottom bar
     hides and the viewport grows, the tron image does not rescale. Falls
     back to 100svh (small viewport height) if the JS didn't run. */
  height: var(--connect-bg-h, 100svh);
  z-index: -1;
  pointer-events: none;
  background-color: #0a0a0f;
  background-image: url('../img/tron.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.55;
}

.page--connect {
  min-height: 100vh;
  padding: 0 var(--space-4) var(--space-8);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* On the dedicated connect page, let the carousel run edge to edge and let the
   phones' neon glow bleed above/below without a hard horizontal cutoff. */
.page--connect .connect-carousel {
  margin: 0 calc(-1 * var(--space-4)) -96px;
  padding: 160px var(--space-4) 120px;
  transform: translateY(-96px);
}

.page--connect .connect-cta-group {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.page-container {
  max-width: 800px;
  margin: 0 auto;
}

/* --- Page Header --- */
.page-header {
  margin-bottom: var(--space-10);
  position: relative;
}

.back-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-6);
  transition: color var(--transition-fast);
}

.back-link:hover {
  color: var(--accent-pink);
}

.page-header-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.page-number {
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  opacity: 0.06;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

/* --- Section --- */
.page-section {
  margin-bottom: var(--space-10);
}

/* --- Stacked scroll: later sections slide up over the previous --- */
.page-container--stack {
  /* each child section becomes a sticky "card" — scroll room comes from min-height */
}

.page-container--stack > .page-section {
  position: sticky;
  top: 0;
  min-height: 100vh;
  background: var(--bg, #0a0a0f);
  margin-bottom: 0;
  padding: var(--space-10) var(--space-2) var(--space-12);
  border-top: 1px solid rgba(255, 60, 111, 0.12);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -24px 48px -24px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
  .page-container--stack > .page-section {
    padding: var(--space-8) var(--space-2) var(--space-10);
    border-radius: 20px 20px 0 0;
  }
}

/* --- Horizontal swipe-through: sections side-by-side on mobile --- */
@media (max-width: 768px) {
  main.page:has(.page-container--swipe) {
    padding: 88px 0 0;
  }

  .page-container--swipe {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    height: calc(100vh - 88px);
  }
  .page-container--swipe::-webkit-scrollbar {
    display: none;
  }

  .page-container--swipe > .page-header,
  .page-container--swipe > .page-section {
    flex: 0 0 100vw;
    width: 100vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    padding: var(--space-2) var(--space-5) var(--space-6);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  /* Swipe hint arrow — sits on the right edge of each panel */
  .page-container--swipe > .page-section:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 22px;
    height: 22px;
    border-right: 2px solid var(--accent-pink);
    border-top: 2px solid var(--accent-pink);
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 0 0 8px rgba(255, 60, 111, 0.6);
    opacity: 0.6;
    animation: swipe-arrow-nudge 1.4s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes swipe-arrow-nudge {
    0%, 100% { transform: translateY(-50%) translateX(0) rotate(45deg); opacity: 0.4; }
    50% { transform: translateY(-50%) translateX(6px) rotate(45deg); opacity: 0.9; }
  }

  /* Upcoming hero on mobile swipe — size to fit, no scroll */
  .page-container--swipe .upcoming-hero-frame {
    width: 62%;
    max-width: 280px;
  }

  .page-container--swipe .page-section {
    justify-content: flex-start;
  }

  /* Hide the standalone header panel — the hamburger provides context */
  .page-container--swipe > .page-header {
    display: none;
  }

  /* Swipe hint dots at the bottom of each panel header */
  .page-container--swipe > .page-section::after {
    content: '';
    display: block;
    height: 1px;
  }
}

.section-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-pink);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 60, 111, 0.15);
}

/* --- Bio Grid --- */
.bio-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-6);
  align-items: start;
}

.bio-text p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.bio-text p:last-child {
  margin-bottom: 0;
}

/* --- Stats Card (sub-pages) --- */
.stats-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.stats-card .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stats-card .stat-row:last-child {
  border-bottom: none;
}

.stats-card .stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.stats-card .stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Model Section --- */
.model-text {
  margin-bottom: var(--space-6);
}

.model-text p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.model-text p:last-child {
  margin-bottom: 0;
}

/* --- Upcoming Hero: neon-framed featured image / fallback sign --- */
.upcoming-hero {
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.upcoming-hero-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 78%;
  max-width: 340px;
  border-radius: 18px;
  overflow: hidden;
  padding: 6px;
  background: #0a0a0f;
  box-shadow:
    0 0 0 2px var(--accent-pink),
    0 0 12px var(--accent-pink),
    0 0 32px var(--accent-pink),
    0 0 64px rgba(255, 60, 111, 0.5),
    inset 0 0 20px rgba(255, 60, 111, 0.25);
  animation: upcoming-hero-pulse 3s ease-in-out infinite alternate;
}

/* Show details under the image */
.upcoming-hero-details {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upcoming-hero-date {
  font-family: 'VT323', monospace;
  font-size: 28px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-pink);
  text-shadow: 0 0 6px rgba(255, 60, 111, 0.6), 0 0 14px rgba(255, 60, 111, 0.3);
}

.upcoming-hero-venue {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

.upcoming-hero-city {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #a0a0b0);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.upcoming-hero-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.upcoming-hero-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.upcoming-hero-frame img[src=''],
.upcoming-hero-frame img:not([src]) {
  display: none;
}

/* Neon sign fallback — shown when no image set */
.upcoming-hero-sign {
  display: none;
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  background: #0a0a0f;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: var(--space-4);
}

.upcoming-hero.no-image .upcoming-hero-sign {
  display: flex;
}

.upcoming-hero.no-image .upcoming-hero-frame img {
  display: none;
}

.upcoming-hero-sign-line1,
.upcoming-hero-sign-line2 {
  font-family: 'VT323', monospace;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.upcoming-hero-sign-line1 {
  font-size: 32px;
  text-shadow:
    0 0 6px #fff,
    0 0 12px var(--accent-blue),
    0 0 28px var(--accent-blue),
    0 0 60px rgba(77, 201, 246, 0.5);
  animation: upcoming-sign-flicker-blue 7s ease-in-out infinite;
}

.upcoming-hero-sign-line2 {
  font-size: 56px;
  line-height: 0.9;
  text-shadow:
    0 0 6px #fff,
    0 0 14px var(--accent-pink),
    0 0 36px var(--accent-pink),
    0 0 80px rgba(255, 60, 111, 0.6);
  animation: upcoming-sign-flicker-pink 5s ease-in-out infinite;
}

@keyframes upcoming-hero-pulse {
  from {
    box-shadow:
      0 0 0 2px var(--accent-pink),
      0 0 12px var(--accent-pink),
      0 0 32px var(--accent-pink),
      0 0 64px rgba(255, 60, 111, 0.5),
      inset 0 0 20px rgba(255, 60, 111, 0.25);
  }
  to {
    box-shadow:
      0 0 0 2px var(--accent-pink),
      0 0 8px var(--accent-pink),
      0 0 20px var(--accent-pink),
      0 0 40px rgba(255, 60, 111, 0.3),
      inset 0 0 10px rgba(255, 60, 111, 0.15);
  }
}

@keyframes upcoming-sign-flicker-pink {
  0%, 100% { opacity: 1; }
  4% { opacity: 0.85; }
  5% { opacity: 1; }
  22% { opacity: 0.4; }
  23% { opacity: 1; }
  55% { opacity: 0.3; }
  56% { opacity: 0.9; }
  57% { opacity: 1; }
}

@keyframes upcoming-sign-flicker-blue {
  0%, 100% { opacity: 1; }
  12% { opacity: 0.6; }
  13% { opacity: 1; }
  40% { opacity: 0.3; }
  41% { opacity: 1; }
  77% { opacity: 0.7; }
  78% { opacity: 1; }
}

/* --- Section CTA link: wireframe neon matching hero ANNA --- */
.section-cta {
  display: block;
  width: fit-content;
  margin: var(--space-8) auto 0;
  padding: 8px 16px;
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.9);
  text-align: center;
  /* Keep the glow radii small enough that they hug the letterforms and fall off
     BEFORE reaching the panel edges. The old 100-180px shadows spilled past the
     content and got clipped by the section's overflow into a hard pink
     rectangle ("square lines"). These stay a soft round halo. */
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 8px var(--accent-pink))
    drop-shadow(0 0 22px var(--accent-pink))
    drop-shadow(0 0 42px rgba(255, 60, 111, 0.5));
  animation:
    neon-cta-glow 2.5s ease-in-out infinite alternate,
    neon-cta-flicker 8s ease-in-out infinite;
  transition: transform 200ms ease;
}

.section-cta:hover {
  transform: scale(1.04);
}

@keyframes neon-cta-glow {
  from {
    filter:
      drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 10px var(--accent-pink))
      drop-shadow(0 0 26px var(--accent-pink))
      drop-shadow(0 0 48px rgba(255, 60, 111, 0.55));
  }
  to {
    filter:
      drop-shadow(0 0 2px rgba(255, 255, 255, 0.7))
      drop-shadow(0 0 6px var(--accent-pink))
      drop-shadow(0 0 16px rgba(255, 60, 111, 0.6))
      drop-shadow(0 0 32px rgba(255, 60, 111, 0.35));
  }
}

@keyframes neon-cta-flicker {
  0%, 100% { opacity: 1; }
  4% { opacity: 0.9; }
  6% { opacity: 1; }
  12% { opacity: 0.4; }
  13% { opacity: 0.9; }
  14% { opacity: 0.2; }
  15% { opacity: 1; }
  46% { opacity: 0.3; }
  47% { opacity: 0.8; }
  48% { opacity: 0.2; }
  49% { opacity: 1; }
}

/* --- Photo Grid --- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.photo-placeholder {
  aspect-ratio: 3 / 4;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-normal);
}

.photo-placeholder:hover {
  border-color: var(--border-hover);
}

.photo-placeholder--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

.photo-placeholder-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.photo-slot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 3 / 4;
}

.photo-slot--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

/* --- Events List --- */
.events-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.event-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.event-card:hover {
  border-color: var(--accent-pink);
  box-shadow: 0 4px 24px rgba(255, 60, 111, 0.08);
}

.event-card--past {
  opacity: 0.7;
}

.event-card--past:hover {
  border-color: var(--border-hover);
  box-shadow: none;
  opacity: 0.85;
}


.event-cover {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
}

.event-cover img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 440px;
}

.event-ticket-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-primary);
  color: #fff;
  background: var(--accent-pink);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  margin-top: var(--space-2);
  transition: background 150ms ease, transform 150ms ease;
  text-decoration: none;
}

.event-ticket-btn:hover {
  background: #e6356a;
}

.event-ticket-btn:active {
  transform: scale(0.97);
}

.event-ticket-tag { display: inline-block; margin-top: var(--space-2); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-pink); }

/* Event detail action row: tickets + share sit side by side */
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Share button — outline variant of the ticket button (native share sheet) */
.event-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-primary);
  color: var(--accent-pink);
  background: transparent;
  border: 1px solid var(--accent-pink);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  margin-top: var(--space-2);
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.event-share-btn:hover { background: var(--accent-pink); color: #fff; }
.event-share-btn:active { transform: scale(0.97); }
.event-share-btn:disabled { opacity: 0.5; cursor: default; }

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 60, 111, 0.06);
  border-radius: var(--radius-md);
}

.event-month {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-pink);
}

.event-day {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.event-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  justify-content: center;
}

.event-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.event-venue {
  font-size: 14px;
  color: var(--text-secondary);
}

.event-location {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.events-empty-note {
  font-size: 14px;
  color: var(--text-muted);
}

/* --- Event Row (card + fan photos side-by-side) --- */
.event-row {
  display: block;
}

.event-row--has-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

.event-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.event-photo-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.event-photo-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 60, 111, 0.12);
}

.event-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.event-photo-item:hover img {
  transform: scale(1.05);
}

.event-photo-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Fan Photo Button (Event Cards) --- */
.event-fan-photos-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  padding: 0;
  border: none;
  background: none;
  color: var(--accent-pink);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.event-fan-photos-btn:hover {
  color: var(--accent-blue);
}

/* --- Fan Photo Gallery Modal --- */
.fan-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.fan-gallery-modal.open {
  display: flex;
}

.fan-gallery-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fan-gallery-panel {
  position: relative;
  width: 90vw;
  max-width: 900px;
  max-height: 85vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fan-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.fan-gallery-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.fan-gallery-close {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.fan-gallery-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.fan-gallery-grid {
  padding: var(--space-4) var(--space-6);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.fan-gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--bg);
}

.fan-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms;
}

.fan-gallery-item:hover img {
  transform: scale(1.03);
}

.fan-gallery-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fan-gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--text-muted);
  font-size: 14px;
}

@media (max-width: 600px) {
  .fan-gallery-panel {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .fan-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--space-4);
  }

  .fan-gallery-header {
    padding: var(--space-4);
  }
}

.inline-link {
  color: var(--accent-pink);
  transition: color var(--transition-fast);
}

.inline-link:hover {
  color: var(--accent-blue);
}

/* --- Booking Card --- */
/* --- Notify signup card --- */
.notify-card {
  background: rgba(77, 201, 246, 0.04);
  border: 1px solid rgba(77, 201, 246, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
}

.notify-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.notify-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.notify-form {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  max-width: 420px;
  margin: 0 auto;
}

.notify-input {
  flex: 1;
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  font-family: var(--font-primary);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.notify-input::placeholder {
  color: var(--text-muted);
}

.notify-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue);
}

.notify-btn {
  height: 48px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-primary);
  color: #fff;
  background: var(--accent-blue);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, transform 150ms ease;
}

.notify-btn:hover {
  background: #3ab8e8;
}

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

.notify-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.notify-success {
  margin-top: var(--space-4);
  font-size: 14px;
  color: var(--accent-blue);
  font-weight: 500;
}

.notify-error {
  margin-top: var(--space-3);
  font-size: 14px;
  color: var(--accent-pink);
}

.booking-card {
  background: rgba(255, 60, 111, 0.04);
  border: 1px solid rgba(255, 60, 111, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
}

.booking-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.booking-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.booking-links {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

.booking-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  min-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking-btn:hover {
  background: rgba(255, 60, 111, 0.12);
  border-color: var(--accent-pink);
}

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

/* --- Photographer Cards (landing view) --- */
.photographer-cards {
  display: grid;
  /* auto-fit (not auto-fill): a lone photographer fills the row as one big card,
     but as soon as more are added the row splits into 2-3 columns. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

/* On phones a single card should still be the big full-width card, but two or
   more should pack into a 2-column grid instead of one long stack. */
@media (max-width: 768px) {
  .photographer-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.photographer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.photographer-card:hover {
  border-color: var(--accent-pink);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(255, 60, 111, 0.12);
}

.photographer-card:active {
  transform: translateY(-2px) scale(0.98);
}

.photographer-card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.photographer-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.photographer-card:hover .photographer-card-cover img {
  transform: scale(1.05);
}

.photographer-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 15, 0.6) 0%, transparent 60%);
}

.photographer-card-body {
  padding: var(--space-4);
}

.photographer-card-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.photographer-card-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.photographer-card-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent-pink);
}

/* --- Gallery View (after clicking a photographer) --- */
.gallery-view-header {
  margin-bottom: var(--space-6);
}

.gallery-back {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--space-4);
  transition: color 150ms ease;
}

.gallery-back:hover {
  color: var(--accent-pink);
}

.gallery-view-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 60, 111, 0.15);
}

.gallery-view-title h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.photographer-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent-pink);
  transition: color 150ms ease;
}

.photographer-link:hover {
  color: var(--accent-blue);
}

/* --- Videos --- */
.video-featured {
  margin-bottom: var(--space-8);
  scroll-margin-top: 96px;
}

/* Retro TV frame housing the video player */
.video-tv {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.video-tv picture {
  display: block;
}

.video-tv-frame {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.4));
}

.video-tv-screen {
  position: absolute;
  z-index: 1;
  /* Adjust these to align iframe with the TV screen area */
  top: 11.4%;
  left: 7.9%;
  width: 67.3%;
  height: 77.8%;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.video-tv-screen iframe {
  width: 100%;
  height: 100%;
  border: none;
  position: relative;
  z-index: 1;
}

/* TV static / channel-change effect */
.tv-static {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.05s;
}

.tv-static.active {
  opacity: 1;
}

/* Clickable dial knob overlay — invisible, sits over the TV knob */
.tv-dial {
  position: absolute;
  z-index: 3;
  top: 28.5%;
  right: 9%;
  width: 6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Channel number flash — inside the screen */
.tv-channel-num {
  position: absolute;
  z-index: 3;
  top: 6%;
  right: 6%;
  font-family: 'VT323', monospace;
  font-size: clamp(28px, 5vw, 56px);
  color: #00ff00;
  text-shadow: 0 0 8px #00ff00, 0 0 20px rgba(0, 255, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  line-height: 1;
}

.tv-channel-num.visible {
  opacity: 1;
}

/* Rotate phone prompt — mobile portrait only */
.rotate-prompt {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--accent-pink);
  border-radius: 12px;
  margin-bottom: var(--space-6);
  animation: rotate-nudge 2s ease-in-out infinite;
}

.rotate-prompt-icon {
  width: 32px;
  height: 32px;
  color: var(--accent-pink);
  flex-shrink: 0;
  animation: rotate-phone 2s ease-in-out infinite;
}

@keyframes rotate-phone {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-90deg); }
  50%, 75% { transform: rotate(-90deg); }
}

@keyframes rotate-nudge {
  0%, 100% { border-color: var(--accent-pink); }
  50% { border-color: var(--accent-blue); }
}

.rotate-prompt-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.rotate-prompt-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.rotate-prompt.dismissed {
  display: none !important;
}

/* Mobile portrait: shrink TV so the page remains functional */
@media (max-width: 768px) and (orientation: portrait) {
  .rotate-prompt {
    display: none;
  }

  .video-tv {
    max-width: 340px;
    margin: 0 auto;
  }

  .video-featured {
    margin-bottom: var(--space-4);
  }

  .video-featured-info {
    justify-content: center;
    text-align: center;
  }
}

/* Landscape mobile: immersive TV */
@media (max-width: 932px) and (orientation: landscape) {
  .video-featured {
    margin-bottom: var(--space-4);
  }

  .video-tv {
    max-width: 80%;
    margin: 0 auto;
  }
}

/* Legacy fallback (if no TV frame) */
.video-player {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.video-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-featured-info {
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.video-featured-title {
  font-family: 'VT323', monospace;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 6px #fff,
    0 0 10px #fff,
    0 0 18px var(--accent-pink),
    0 0 40px var(--accent-pink),
    0 0 80px rgba(255, 60, 111, 0.5);
  animation: video-title-flicker 6s ease-in-out infinite;
}

@keyframes video-title-flicker {
  0%, 100% { opacity: 1; }
  3% { opacity: 0.85; }
  4% { opacity: 1; }
  11% { opacity: 0.5; }
  12% { opacity: 1; }
  28% { opacity: 1; }
  29% { opacity: 0.6; }
  30% { opacity: 1; }
  46% { opacity: 0.3; }
  47% { opacity: 0.9; }
  48% { opacity: 0.2; }
  49% { opacity: 1; }
  72% { opacity: 1; }
  73% { opacity: 0.75; }
  74% { opacity: 1; }
}

.video-featured-duration {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* Compact thumbnail chooser under the TV — a centered, horizontally scrolling
   strip so viewers can pick a clip without leaving the TV panel. */
.video-chooser {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  max-width: 640px;
  margin: clamp(14px, 2.4vh, 26px) auto 0;
  padding: 0 var(--space-1);
}
.video-chip {
  flex: 0 0 auto;
  width: 152px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
}
.video-chip img,
.video-chip-ph {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.video-chip:hover img { border-color: var(--border-hover); }
.video-chip.active img,
.video-chip.active .video-chip-ph {
  border-color: var(--accent-pink);
  box-shadow: 0 0 0 1px var(--accent-pink), 0 4px 16px rgba(255, 60, 111, 0.18);
}
.video-chip:active img { transform: scale(0.96); }
.video-chip-title {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 152px;
}

/* On phones keep the chooser to a single scrolling row so it stays compact. */
@media (max-width: 768px) {
  .video-chooser {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .video-chooser::-webkit-scrollbar { display: none; }
  .video-chip { width: 140px; scroll-snap-align: start; }
  .video-chip-title { max-width: 140px; }
}

.video-card {
  cursor: pointer;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.video-card:hover {
  border-color: var(--accent-pink);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(255, 60, 111, 0.12);
}

.video-card:active {
  transform: translateY(-2px) scale(0.98);
}

.video-card.active {
  border-color: var(--accent-pink);
  box-shadow: 0 0 0 1px var(--accent-pink), 0 4px 20px rgba(255, 60, 111, 0.15);
}

.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.video-card:hover .video-thumb img {
  transform: scale(1.05);
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  opacity: 0;
  transition: opacity 200ms ease;
}

.video-card:hover .video-play-overlay {
  opacity: 1;
}

.video-card-info {
  padding: var(--space-3) var(--space-4);
}

.video-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-card.active .video-card-title {
  color: var(--accent-pink);
}

/* --- Portfolio / Gallery --- */
.page-container--wide {
  max-width: 1080px;
}

.gallery-filters {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.filter-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.filter-btn.active {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: rgba(255, 60, 111, 0.08);
}

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

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.gallery-item:hover {
  border-color: var(--accent-pink);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(255, 60, 111, 0.12);
}

.gallery-item:active {
  transform: translateY(-2px) scale(0.98);
}

.gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--surface);
}

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 15, 0.7) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-category {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-pink);
}

.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.gallery-empty-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.gallery-empty-sub {
  font-size: 14px;
  color: var(--text-muted);
}

.gallery-empty-sub code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 200ms ease-out;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  transform: scale(0.95);
  transition: transform 200ms ease-out;
}

.lightbox.open .lightbox-img {
  transform: scale(1);
}

.lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  font-size: 28px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--transition-fast);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 28px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--transition-fast);
}

.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.15);
}

.lightbox-caption {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 10;
}

/* --- Footer (sub-pages) --- */
.footer {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.footer-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ============================================
   Responsive — Sub-pages
   ============================================ */

/* --- Tablet (≤768px) --- */
@media (max-width: 768px) {
  .page {
    padding: var(--space-8) var(--space-4);
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Play overlay always visible on touch */
  .video-play-overlay {
    opacity: 0.6;
  }

  .bio-grid {
    grid-template-columns: 1fr;
  }

  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .photo-placeholder--wide {
    grid-column: span 2;
  }

  .page-number {
    font-size: 48px;
  }

  .event-row--has-photos {
    grid-template-columns: 1fr;
  }

  .event-photos-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .event-card {
    padding: var(--space-4);
    gap: var(--space-4);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery overlays always visible on touch (no hover) */
  .gallery-item-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(10, 10, 15, 0.5) 0%, transparent 40%);
  }

  /* Lightbox: larger buttons for touch */
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    width: 48px;
    height: 48px;
  }

  /* Photographer card: full width on smaller tablets */
  .photographer-cards {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
}

/* --- Mobile (≤480px) --- */
@media (max-width: 480px) {
  .page {
    padding: var(--space-6) var(--space-4);
  }

  .page-title {
    font-size: 24px;
  }

  /* Lock the videos page to the viewport on mobile: no outer page scroll,
     only the channel-flip feed scrolls internally. */
  html:has(body.videos-page),
  body.videos-page {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.videos-page .page {
    height: 100dvh;
    overflow: hidden;
    padding-bottom: 0;
  }

  body.videos-page .page-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.videos-page .page-section:last-of-type {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body.videos-page .footer {
    display: none;
  }

  /* Channel-flip vertical feed: snap through videos, each swipe changes the channel */
  .video-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: var(--space-3);
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-2) var(--space-1);
    scrollbar-width: none;
  }
  .video-grid::-webkit-scrollbar {
    display: none;
  }

  .video-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex-shrink: 0;
    width: 100%;
    transform: scale(0.92);
    opacity: 0.55;
    transition: transform 300ms ease, opacity 300ms ease, border-color 300ms ease;
  }

  .video-card.in-view {
    transform: scale(1);
    opacity: 1;
    border-color: var(--accent-pink);
    box-shadow: 0 0 0 1px var(--accent-pink), 0 8px 32px rgba(255, 60, 111, 0.25);
  }

  .video-featured-title {
    font-size: 16px;
  }

  .video-card-info {
    padding: var(--space-2) var(--space-3);
  }

  .page-number {
    font-size: 40px;
  }

  .page-header {
    margin-bottom: var(--space-8);
  }

  /* Back link: hidden on mobile — hamburger nav covers it */
  .back-link {
    display: none;
  }

  .photo-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Stacked scroll: each photo pins and the next slides over it */
  .photo-grid > .photo-slot,
  .photo-grid > .photo-placeholder {
    position: sticky;
    top: 72px;
    aspect-ratio: 3 / 4;
    max-height: calc(100vh - 120px);
    border-radius: 20px;
    box-shadow: 0 -24px 48px -24px rgba(0, 0, 0, 0.7);
    background: var(--bg, #0a0a0f);
    margin-bottom: var(--space-8);
  }

  .photo-placeholder--wide {
    grid-column: span 1;
  }

  .notify-card {
    padding: var(--space-6);
  }

  .notify-form {
    flex-direction: column;
  }

  .notify-btn {
    width: 100%;
  }

  .booking-card {
    padding: var(--space-6);
  }

  .booking-links {
    flex-direction: column;
    align-items: center;
  }

  .booking-btn {
    width: 100%;
    max-width: 240px;
    min-height: 48px;
  }

  .event-photos-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .event-card {
    flex-direction: column;
    gap: var(--space-3);
  }

  .event-date {
    flex-direction: row;
    gap: var(--space-2);
    min-width: auto;
    width: fit-content;
  }

  /* Gallery: 2-col on mobile (not 1-col — images are portrait so 2-col is better) */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* Gallery back button: larger touch target */
  .gallery-back {
    padding: var(--space-2) 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Filter buttons: horizontal scroll instead of wrap */
  .gallery-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
    gap: var(--space-2);
  }

  .gallery-filters::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    min-height: 44px;
    padding: 0 16px;
    flex-shrink: 0;
  }

  /* Lightbox: hide prev/next (swipe to navigate), keep close */
  .lightbox-prev,
  .lightbox-next {
    display: none;
  }

  .lightbox-img {
    max-width: 100vw;
    max-height: 80vh;
    border-radius: 0;
  }

  .lightbox-close {
    top: env(safe-area-inset-top, 12px);
    right: 12px;
  }

  .lightbox-caption {
    bottom: calc(env(safe-area-inset-bottom, 8px) + 8px);
  }

  /* Photographer card body */
  .photographer-card-body {
    padding: var(--space-4);
  }

  /* Gallery view header */
  .gallery-view-title {
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Section headings */
  .section-heading {
    margin-bottom: var(--space-4);
  }
}

/* --- Small phones (≤375px) --- */
@media (max-width: 375px) {
  .page {
    padding: var(--space-4) var(--space-3);
  }

  .gallery-grid {
    gap: var(--space-2);
  }

  .gallery-item-category {
    font-size: 9px;
  }

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

  .booking-title {
    font-size: 18px;
  }
}

/* --- Press Page --- */
.press-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms, transform 150ms;
}

.press-card:hover {
  border-color: var(--accent-pink);
  transform: translateY(-2px);
}

.press-card:active {
  transform: scale(0.99);
}

.press-card-image {
  width: 200px;
  min-height: 140px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg);
}

.press-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.press-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.press-card-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.press-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.press-card-source {
  color: var(--accent-pink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.press-card-dot {
  color: var(--text-muted);
}

.press-card-date {
  color: var(--text-muted);
}

.press-card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.press-card-cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-pink);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: auto;
}

/* Press responsive */
@media (max-width: 600px) {
  .press-card {
    flex-direction: column;
  }

  .press-card-image {
    width: 100%;
    height: 180px;
    min-height: auto;
  }

  .press-card-title {
    font-size: 16px;
  }
}

/* ===== Event Detail Page ===== */
.event-card--link { text-decoration: none; cursor: pointer; }
.detail-loading,
.detail-notfound { padding: var(--space-8) 0; text-align: center; color: var(--text-muted); }
.detail-notfound h1 { font-family: var(--font-display, 'Playfair Display', serif); font-size: 28px; color: var(--text-primary); margin-bottom: var(--space-2); }
.detail-notfound p { margin-bottom: var(--space-4); }
.detail-help-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0; line-height: 0; }
.detail-help-btn:hover { color: var(--accent-pink); }
.detail-help-popover { position: absolute; right: 0; top: 100%; margin-top: var(--space-2); max-width: 280px; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13px; color: var(--text-secondary); z-index: 20; }
.detail-hero { width: 100%; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-5); display: flex; justify-content: center; background: rgba(0, 0, 0, 0.28); }
.detail-hero img { display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh; }
.detail-head { margin-bottom: var(--space-5); }
.detail-title { font-family: var(--font-display, 'Playfair Display', serif); font-size: 32px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-2); }
.detail-meta { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.detail-date { font-family: var(--font-mono); font-size: 14px; color: var(--accent-pink); letter-spacing: 0.04em; }
.detail-venue { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.detail-address { font-size: 13px; color: var(--text-muted); }
.detail-description { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: var(--space-6); }
.detail-description :is(p, ul, ol) { margin-bottom: var(--space-3); }
.detail-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-2); }
.detail-photo { position: relative; aspect-ratio: 1 / 1; padding: 0; border: none; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; background: var(--surface); }
.detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms ease; }
.detail-photo:hover img { transform: scale(1.04); }
.detail-gallery-empty { font-size: 14px; color: var(--text-muted); }
.detail-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-3); background: rgba(0,0,0,0.92); padding: var(--space-6); }
.detail-lightbox img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: var(--radius-md); }
.detail-lightbox-name { color: var(--text-secondary); font-size: 14px; }
.detail-lightbox-close { position: absolute; top: var(--space-4); right: var(--space-4); width: 40px; height: 40px; border: none; background: rgba(255,255,255,0.1); color: #fff; font-size: 28px; line-height: 1; border-radius: 50%; cursor: pointer; }
.detail-qr-block { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.detail-qr { background: #fff; padding: 12px; border-radius: var(--radius-md); line-height: 0; }
.detail-qr img { display: block; }
.detail-qr-text { flex: 1; min-width: 180px; }
.detail-qr-text p { font-size: 14px; color: var(--text-secondary); margin-bottom: var(--space-3); }
.detail-qr-url { font-size: 12px; color: var(--text-secondary); margin-top: var(--space-3); margin-bottom: 0; line-height: 1.5; }
.detail-qr-url a { color: var(--accent-pink); word-break: break-all; }

/* =========================================================================
   SECTION DECK (OddStack-style) — full-screen snapping panels + dot rail.
   Engine: js/deck.js. Applied to pages with a [data-deck] container.
   ========================================================================= */
html.deck-locked, body.deck-locked {
  overflow: hidden;
  overscroll-behavior: none;
  height: 100%;
}

.deck {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;                 /* below the film-grain / nav / burger overlays */
  background: var(--bg, #0a0a0f);
}

.deck-track {
  position: relative;
  will-change: transform;
}

.deck-section {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  box-sizing: border-box;
  padding: clamp(78px, 12vh, 132px) clamp(20px, 5vw, 64px) clamp(48px, 8vh, 96px);
  scrollbar-width: none;
}
.deck-section::-webkit-scrollbar { display: none; }

/* faint divider glow at the top of each panel, like the sub-page cards */
.deck-section + .deck-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: min(680px, 70%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 60, 111, 0.35), transparent);
}

/* margin:auto centers a panel that fits, but collapses when the panel
   overflows — so tall content scrolls from the top instead of clipping. */
.deck-inner {
  width: 100%;
  max-width: 760px;
  margin: auto;
}
.deck-inner--wide { max-width: 1080px; }

/* small header row inside the first panel */
.deck-eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.deck-eyebrow .page-number { font-size: 44px; }
.deck-eyebrow .page-title { font-size: 22px; }

/* scroll hint on the first panel */
.deck-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 4vh, 34px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
  pointer-events: none;
}
.deck-hint span {
  width: 18px; height: 28px;
  border: 1.5px solid var(--text-muted);
  border-radius: 10px;
  position: relative;
}
.deck-hint span::after {
  content: '';
  position: absolute;
  top: 5px; left: 50%;
  width: 3px; height: 6px;
  border-radius: 2px;
  background: var(--accent-pink);
  transform: translateX(-50%);
  animation: deckHintDot 1.6s ease-in-out infinite;
}
@keyframes deckHintDot {
  0%   { transform: translate(-50%, 0);   opacity: 1; }
  60%  { transform: translate(-50%, 9px); opacity: 0; }
  100% { transform: translate(-50%, 0);   opacity: 1; }
}

/* ---------- right-edge dot rail ---------- */
.deck-dots {
  position: fixed;
  top: 50%;
  right: max(env(safe-area-inset-right, 0px), 0.6rem);
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.deck-dot {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
}

.deck-dot > i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: height 0.3s cubic-bezier(.22,1,.36,1),
              width 0.3s cubic-bezier(.22,1,.36,1),
              background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.deck-dot:hover > i,
.deck-dot:focus-visible > i {
  background: var(--accent-pink);
  transform: scale(1.25);
}
.deck-dot:focus-visible { outline: none; }

.deck-dot--active > i {
  width: 8px;
  height: 24px;
  border-radius: 5px;
  background: var(--accent-pink);
  box-shadow: 0 0 12px var(--accent-glow-pink), 0 0 4px var(--accent-glow-pink);
  transform: none;
}

/* hover label — pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .deck-dot::before {
    content: attr(data-label);
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    padding: 4px 10px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    white-space: nowrap;
    background: rgba(20, 20, 24, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .deck-dot:hover::before,
  .deck-dot:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* the deck flips as one unit during page-to-page transitions; hide the
   rail while a page flip animates so it doesn't smear */
html.page-flip-exit .deck-dots { opacity: 0; transition: opacity 0.2s ease; }

@media (max-width: 768px) {
  .deck-dots { right: max(env(safe-area-inset-right, 0px), 0.2rem); gap: 0; }
  .deck-dot { width: 32px; height: 36px; }
  .deck-dot--active > i { height: 20px; }

  /* clear the dot rail on the right so text doesn't run under it */
  .deck-section { padding-right: clamp(38px, 11vw, 54px); }

  /* stack the bio + stats on phones */
  .deck-section .bio-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .deck-track { transition: none !important; }
  .deck-dot > i { transition: background 0.2s ease; }
  .deck-hint span::after { animation: none; }
}

/* Gallery inside a deck panel — smaller, denser thumbnails so more of the
   set is visible per screen (the full-size grid felt too big). */
.deck-section .photo-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  align-content: start;
  width: 100%;
  max-width: 560px;
  margin: var(--space-6, 24px) auto var(--space-4, 16px);
}
.deck-section .photo-grid > .photo-slot,
.deck-section .photo-grid > .photo-slot--wide {
  aspect-ratio: 3 / 4;
  grid-column: auto;   /* keep every thumbnail the same compact size */
}
@media (max-width: 768px) {
  .deck-section .photo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: none;
  }
}

/* Portfolio inside the deck — centered like the other panels, smaller media */
.deck-section .photographer-cards {
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  justify-content: center;
  width: 100%;
  margin: var(--space-6, 24px) auto 0;
}
.deck-section .gallery-view { width: 100%; }
.deck-section .gallery-view-header { text-align: center; }
.deck-section .gallery-view-title { justify-content: center; }
.deck-section .gallery-filters { justify-content: center; flex-wrap: wrap; }
.deck-section .gallery-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3, 12px);
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .deck-section .photographer-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .deck-section .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   CONNECT — "After-Hours" neon marquee redesign
   (single centered deck panel: marquee sign + neon link
   buttons + a live Spotify player + book/notify)
   ============================================================ */
.connect-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.1vw, 16px);
  text-align: center;
  width: 100%;
}
.connect-hub .deck-eyebrow { width: 100%; }

/* Help icon — bare, no filled bubble */
.page-help-wrap { position: relative; margin-left: auto; display: inline-flex; }
.page-help {
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim, rgba(255,255,255,.55));
  transition: color .2s ease, filter .2s ease;
}
.page-help svg { width: 22px; height: 22px; }
.page-help:hover, .page-help:focus-visible {
  color: var(--accent-blue, #4dc9f6);
  filter: drop-shadow(0 0 6px rgba(77,201,246,.7));
  outline: none;
}
.page-help-pop {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(280px, 74vw); z-index: 40;
  padding: 12px 14px; text-align: left;
  font-size: 12.5px; line-height: 1.5;
  color: rgba(255,255,255,.86);
  background: rgba(14,14,20,.96);
  border: 1px solid rgba(77,201,246,.35);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.55), 0 0 22px rgba(77,201,246,.12);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.page-help-wrap:hover .page-help-pop,
.page-help:focus-visible + .page-help-pop { opacity: 1; transform: translateY(0); }

/* ---- Marquee sign ---- */
.marquee {
  position: relative;
  padding: clamp(22px, 4vw, 40px) clamp(24px, 6vw, 64px);
  border: 1px solid rgba(255, 60, 111, .55);
  border-radius: 18px;
  background: radial-gradient(120% 130% at 50% 0%, rgba(255,60,111,.10), rgba(77,201,246,.05) 46%, transparent 72%);
  box-shadow:
    0 0 0 1px rgba(255,60,111,.12),
    0 0 22px rgba(255,60,111,.28),
    inset 0 0 26px rgba(255,60,111,.10);
}
.marquee-sub {
  margin: 12px 0 0;
  font-size: 14px; color: rgba(255,255,255,.62);
  letter-spacing: .01em;
}
/* ---- Bottom row: now playing + book/notify ---- */
.connect-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
  width: 100%;
  align-items: start;
  margin-top: 4px;
}
.now-playing {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
}
.np-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent-blue, #4dc9f6);
  text-shadow: 0 0 8px rgba(77,201,246,.5);
}
.np-frame {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(77,201,246,.22), 0 0 22px rgba(77,201,246,.12);
}
.np-embed { width: 100%; height: 152px; border: 0; display: block; }

/* Connect page: reclaim the tall deck chrome so the neon sign can go big
   and everything still fits one screen. */
.deck-section--connect { padding-top: clamp(40px, 5vh, 64px); padding-bottom: clamp(28px, 4vh, 48px); }
.connect-hub .deck-eyebrow { margin-bottom: clamp(6px, 1.2vh, 14px); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .connect-bottom { grid-template-columns: 1fr; }
  .np-embed { height: 300px; }
}

/* ---- Marquee as photoreal neon sign image (with flicker) ---- */
/* Transparent neon sign (frame + text baked in) floating on the page.
   Real alpha — no blend tricks, no rectangle. */
.marquee--float {
  border: none; background: none; box-shadow: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.marquee--float picture { display: block; width: 100%; max-width: 576px; margin: 0 auto; }
.marquee-img {
  display: block; width: 100%; height: auto;
  border: none; border-radius: 0; box-shadow: none;
  /* Soft neon bleed onto the page (static filter; flicker is opacity-only) */
  filter: drop-shadow(0 0 16px rgba(255,60,111,.30)) drop-shadow(0 0 26px rgba(77,201,246,.22));
  animation: sign-warmup 1.7s ease-out 1 both, sign-buzz 5s ease-in-out 2.6s infinite;
}
@keyframes sign-warmup {
  0% { opacity: 0; } 7% { opacity: .85; } 11% { opacity: .15; }
  19% { opacity: 1; } 26% { opacity: .4; } 33% { opacity: 1; } 100% { opacity: 1; }
}
/* Livelier neon: constant low-level flicker + a full flash/blink every ~5s so
   the sign always feels "on" and does something noticeable. */
@keyframes sign-buzz {
  0% { opacity: 1; }
  9% { opacity: .9; } 10% { opacity: 1; }
  24% { opacity: .95; } 25% { opacity: 1; }
  40% { opacity: .88; } 41% { opacity: 1; }
  58% { opacity: .96; } 59% { opacity: 1; }
  /* the ~5s flash — quick off / on / off / on blink like a buzzing tube */
  82% { opacity: 1; }
  84% { opacity: .12; }
  86% { opacity: 1; }
  88% { opacity: .35; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}

/* ---- Neon image social buttons (sliced from generated art) ---- */
.social-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(6px, 1vw, 14px); max-width: 780px;
}
.social-btn { display: inline-flex; text-decoration: none; line-height: 0; }
.social-btn img {
  display: block; height: clamp(38px, 4.2vw, 48px); width: auto;
  transition: transform .18s ease, filter .2s ease;
}
.social-btn:hover img, .social-btn:focus-visible img {
  transform: translateY(-2px);
  filter: brightness(1.14) saturate(1.08);
  outline: none;
}
.connect-bottom .notify-card { margin: 0; }

/* ---- Connect: make the two bottom boxes uniform (equal height + same card) ---- */
.connect-bottom { align-items: stretch; }
.connect-bottom .now-playing,
.connect-bottom .notify-card {
  margin: 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.connect-bottom .notify-card .notify-title,
.connect-bottom .notify-card .notify-text { margin: 0; }

/* ---- Connect footer (official bar: info · nav · build credit) ---- */
.connect-footer {
  width: 100%;
  margin-top: clamp(30px, 5vh, 56px);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px clamp(16px, 3vw, 34px);
  padding: clamp(14px, 2vh, 20px) 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}
.connect-footer .cf-brand { white-space: nowrap; }
.connect-footer .cf-dot { color: var(--accent-pink, #ff3c6f); opacity: .7; padding: 0 2px; }
.connect-footer .cf-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(12px, 2vw, 24px); flex: 1 1 auto;
}
.connect-footer .cf-credit { white-space: nowrap; }
.connect-footer a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}
.connect-footer .cf-nav a { color: rgba(255, 255, 255, 0.42); }
.connect-footer a:hover {
  color: var(--accent-pink, #ff3c6f);
  text-shadow: 0 0 10px rgba(255, 60, 111, 0.6);
}
@media (max-width: 720px) {
  .connect-footer { justify-content: center; text-align: center; gap: 6px 18px; }
  .connect-footer .cf-nav { order: 3; width: 100%; }
}

/* ---- Home: boombox hero as section 1 of the deck (keeps the original hero
   composition — vertically centered column: title, boombox, hint, social bar,
   footer). deck.js flips down to About; the boombox stays a live player. ---- */
.deck-section--home {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(32px, 4vh, 56px) clamp(20px, 5vw, 64px) clamp(16px, 2.5vh, 32px);
}
.deck-section--home .hero-content { width: 100%; margin: auto; }
.deck-section--home .hero-subtitle { margin-bottom: clamp(8px, 1.5vh, 18px); }
/* Scale the boombox to the space left after the title, readout pill + social bar
   so the whole composition fits one screen. Photo aspect 1600x1115 = 1.435. */
.deck-section--home .boombox-wrapper {
  width: min(760px, 90vw, calc(43vh * 1.435));
}
.deck-section--home .neon-social-bar { margin-top: clamp(10px, 1.8vh, 20px); }
.deck-section--home .footer { margin-top: clamp(10px, 1.6vh, 20px); }
/* Trim the neon title's footprint a touch so the boombox can stay generous. */
.deck-section--home .hero-title { margin-bottom: clamp(6px, 1vh, 12px); }

/* Short desktops: shrink the title + spacing and trim the boombox so the whole
   hero still fits one screen without internal scroll. */
@media (min-width: 769px) and (max-height: 900px) {
  .deck-section--home { padding-top: clamp(18px, 2.6vh, 36px); padding-bottom: clamp(12px, 1.8vh, 24px); }
  .deck-section--home .neon-anna { width: clamp(300px, 40vh, 460px); }
  .deck-section--home .neon-blue { font-size: clamp(54px, 8vh, 82px); }
  .deck-section--home .hero-subtitle { margin-bottom: clamp(8px, 1.4vh, 18px); }
  .deck-section--home .hero-location { margin-bottom: clamp(2px, 0.6vh, 8px); }
  .deck-section--home .boombox-wrapper { width: min(760px, 90vw, calc(39vh * 1.435)); }
}

/* Phones: the boombox was capped only by 90vw, so it never shrank when the
   Safari toolbar ate vertical space (dvh < vh) — the whole hero grew taller than
   the visible panel and clipped the ANNA logo at the top. Cap it by the DYNAMIC
   viewport too so the full hero always fits one screen. */
@media (max-width: 768px) {
  .deck-section--home { padding-top: clamp(14px, 2.2vh, 30px); padding-bottom: clamp(10px, 1.6vh, 22px); }
  .deck-section--home .boombox-wrapper { width: min(90vw, calc(30dvh * 1.435)); }
  .deck-section--home .hero-title { margin-bottom: clamp(4px, 0.8vh, 10px); }
  .deck-section--home .hero-subtitle { margin-bottom: clamp(6px, 1.1vh, 14px); }
}

/* ---- Mobile deck refinements ---- */
@media (max-width: 768px) {
  /* Videos: lift the content to the top instead of vertically centering the
     short panel, so the TV sits high and a tapped clip lands right on it. */
  #videos .deck-inner { margin: clamp(6px, 1.5vh, 16px) auto auto; }

  /* Compact, page-centered video chooser feed — narrower cards, centered. */
  .video-grid { align-items: center; }
  .video-card { max-width: 320px; }

  /* Events: top-align and cap the flyer to the dynamic viewport so the card +
     date + details fit one screen instead of overflowing. */
  #events .deck-inner { margin: clamp(6px, 1.5vh, 16px) auto auto; }
  #events .deck-eyebrow { margin-bottom: clamp(6px, 1.2vh, 14px); }
  #events .section-heading { margin-bottom: clamp(6px, 1vh, 12px); }
  .event-cover img { max-height: min(440px, 38dvh); }
  #events .event-card { padding: var(--space-3); gap: var(--space-3); }
}