/*
   Apple-inspired refinement layer
   Purpose: reduce decorative UI, give the site a stable visual rhythm, and
   make the experience intentional on small screens without changing content.
*/

:root {
  --content-width: 1200px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --liquid-glass-strength: 0.55;
  --section-space: clamp(72px, 9vw, 128px);
}

/* One quiet navigation treatment: translucent only where it aids legibility. */
.site-header {
  min-height: 48px;
  padding: 6px 32px;
  box-shadow: none;
}

.header-socials {
  gap: 20px;
}

.header-socials .nav-special-events,
.site-header.scrolled .header-socials .nav-special-events {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
}

.header-socials .nav-special-events::before,
.site-header.scrolled .header-socials .nav-special-events::before {
  display: none;
}

/* Buttons, cards and content groups use a small, deliberate token set. */
.button {
  min-height: 44px;
  min-width: 132px;
  padding: 0 22px;
  font-size: 14px;
  transition-duration: 180ms;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

.feature-section,
.journey-section,
.rings-section,
.private-library-section {
  max-width: var(--content-width);
}

/* Layout lives in sections.css; keep radius token only here. */
.journey-map,
.journey-detail-card,
.series-ep-thumb,
.private-library-panel {
  border-radius: var(--radius-lg);
}

.journey-map,
.journey-detail-card {
  box-shadow: 0 12px 32px var(--card-shadow);
}

/* Glass is a supporting material, not a user-facing feature. */
.journey-map-attribution,
.journey-map-hint,
.leaflet-pin-label {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

@media (max-width: 820px) {
  .site-header {
    padding: 6px 18px;
  }

  .header-socials a.nav-special-events {
    display: none;
  }

  .hero-container {
    margin-top: -48px;
  }
}

@media (max-width: 600px) {
  .site-header {
    gap: 8px;
  }

  .header-socials {
    gap: 8px;
  }

  /* Phone navigation contains only language and appearance controls. */
  .header-socials .nav-social,
  .header-socials .nav-backrooms,
  .header-socials a.nav-special-events {
    display: none;
  }

  /* Replace the two long scroll-controlled video stages with stable frames. */
  .hero-container {
    height: 100svh;
    margin-top: -48px;
  }

  .hero-sticky {
    position: relative;
    height: 100svh;
  }

  .hero-video-shell {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  .hero-overlay {
    opacity: 0.3 !important;
  }

  .hero-copy {
    top: 50%;
    bottom: auto;
    /* Mobile: keep a simple centered frame (no long sticky scroll). */
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: auto;
  }

  .scroll-video-wrapper {
    height: min(76svh, 560px);
  }

  .scroll-video-sticky {
    position: relative;
    height: 100%;
    min-height: 420px;
  }

  .transition-video {
    opacity: 1 !important;
    filter: saturate(1) contrast(0.92) brightness(0.68) !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .video-transition-content {
    padding: 0 24px;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Let the selected location lead; the map becomes a concise supporting card. */
  .journey-section {
    padding: 72px 20px;
  }

  .journey-copy {
    margin-bottom: 28px;
    text-align: left;
  }

  .journey-copy h2,
  .rings-copy h2 {
    font-size: clamp(36px, 10vw, 46px);
  }

  .journey-copy p,
  .rings-copy p {
    font-size: 16px;
  }

  .journey-tabs {
    margin-bottom: 20px;
    padding: 4px;
  }

  .journey-tab {
    min-height: 40px;
    padding: 8px 6px;
    font-size: 13px;
  }

  .journey-canvas {
    gap: 16px;
  }

  .journey-detail {
    order: 1;
  }

  .journey-map {
    order: 2;
    min-height: 260px;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
  }

  .journey-detail-card {
    gap: 12px;
    padding: 20px;
    border-radius: var(--radius);
  }

  .journey-map-attribution {
    left: 8px;
    bottom: 8px;
    font-size: 9px;
  }

  .journey-map-hint {
    top: 8px;
    left: 8px;
    padding: 5px 8px;
    font-size: 10px;
  }
}