/* ==========================================================================
   ARCHIVE - Design Tokens & Hero Stylesheet
   Direction: Light Editorial Museum Experience
   Typography: DM Sans (Display) & Geist (Descriptions / UI) & Garet (Wordmark)
   Layout: Vertical Dual Counter-Moving Tickers
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design System Tokens (Light Curated Gallery Palette)
   -------------------------------------------------------------------------- */
:root {
  /* Curated Gallery Light Palette */
  --color-bg: #f6f2ef;              /* Warm parchment / gallery paper */
  --color-bg-subtle: #efeae1;       /* Warm secondary wash */
  --color-bg-card: #ffffff;         /* Pure crisp archival mount */
  --color-text-main: #141312;       /* Deep mineral carbon */
  --color-text-muted: #575249;      /* Warm charcoal for descriptions */
  --color-text-dim: #8c857b;        /* Subtle archival metadata */
  --color-border-subtle: rgba(20, 19, 18, 0.12);
  --color-border-strong: rgba(20, 19, 18, 0.22);
  --color-accent: #141312;          /* Bold editorial obsidian for CTA */
  --color-accent-text: #f8f6f0;
  --color-highlight: #2d6a4f;       /* Deep editorial green accent */
  --color-highlight-soft: #7dbf9b;  /* Lifted green for use on dark surfaces */

  /* Dark surface — used by the "Across Generations" section (neutral) */
  --color-dark-bg: hsl(0 0% 6%);          /* Neutral near-black */
  --color-dark-bg-subtle: hsl(0 0% 14%);  /* Raised panel (neutral) */
  --color-dark-text-main: #ece7de;  /* Soft off-white */
  --color-dark-text-muted: #b6afa3; /* Soft light grey for descriptions */
  --color-dark-text-dim: #8b8478;   /* Quiet light metadata */
  --color-dark-border: rgba(236, 231, 222, 0.14);
  --color-dark-dot: 236, 231, 222;  /* Dot grid RGB (used with alpha) */

  /* Typography */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Space Mono', Menlo, Consolas, monospace;
  --font-wordmark: 'Garet', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

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

  /* Transitions & Easing */
  --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Radii */
  --radius-image: 6px;              /* Shared corner radius for all imagery */
}

/* --------------------------------------------------------------------------
   2. Reset & Document Setup
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.5;
  overflow-x: clip;
  position: relative;
}

/* Archival museum paper texture overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(20, 19, 18, 0.035) 1px, transparent 0);
  background-size: 20px 20px;
  opacity: 0.7;
  z-index: 99;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* The drawer, the story dialog and the lightboxes move focus programmatically
   (to the close control when they open, back to the trigger when they close),
   so the ring can appear on a control the visitor never tabbed to. While the
   pointer is the active input no ring is drawn anywhere; any keyboard input
   clears `.is-pointer` (see js/input-modality.js) and rings come back. This
   replaces the per-component opt-in rule the sections used to carry. */
html.is-pointer :focus-visible {
  outline: none;
}

/* --------------------------------------------------------------------------
   3. Minimal Navigation Bar
   3 Elements: Mini Player, ARCHIVE Wordmark, Section Nav
   -------------------------------------------------------------------------- */
.archive-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: var(--space-md) var(--space-xl);
  z-index: 50;
  background: linear-gradient(to bottom, rgba(248, 246, 240, 0.95), rgba(248, 246, 240, 0));
}

/* A. Mini Music Player — glass card matching the navbar CTA fill */
.nav-player {
  position: relative;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.nav-player:hover,
.nav-player:focus-within {
  border-color: rgba(255, 255, 255, 0.55);
}

.player-toggle-btn,
.player-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #ffffff;
  border-radius: 2px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.player-toggle-btn:hover,
.player-menu-btn:hover,
.player-menu-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.16);
}

.player-toggle-btn:focus-visible,
.player-menu-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.player-toggle-btn svg,
.player-menu-btn svg {
  width: 16px;
  height: 16px;
}

/* Swap play <-> pause based on state */
.player-icon-pause { display: none; }
.nav-player.is-playing .player-icon-play { display: none; }
.nav-player.is-playing .player-icon-pause { display: block; }

/* Thin divider between the two controls */
.player-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.22);
}

/* Track selection dropdown */
.player-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 2px;
  background: rgba(20, 19, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 60;
}

.player-menu[hidden] {
  display: none;
}

/* Track list inside the dropdown (kept separate from the seek bar) */
.player-tracks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-menu-item {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.82);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.player-menu-item:hover,
.player-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: none;
}

.player-menu-item.is-active {
  color: var(--color-highlight-soft);
  font-weight: 600;
}

/* Now playing + seek bar — pinned to the top of the track dropdown */
.player-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 4px;
}

.player-progress__title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.player-progress__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.player-progress__time {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.55);
  min-width: 4ch;
  text-align: center;
  user-select: none;
}

.player-progress__bar {
  position: relative;
  flex: 1;
  height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

/* The rail sits behind the fill so the whole 16px strip is a click target */
.player-progress__bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  transition: background var(--transition-fast);
}

.player-progress__bar:hover::before,
.player-progress__bar:focus-visible::before {
  background: rgba(255, 255, 255, 0.32);
}

.player-progress__bar:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: 2px;
}

.player-progress__bar.is-unavailable {
  cursor: default;
  opacity: 0.5;
}

.player-progress__fill {
  position: relative;
  height: 3px;
  width: 0%;
  border-radius: 2px;
  background: var(--color-highlight-soft);
  pointer-events: none;
}

/* B. ARCHIVE Wordmark (Garet) — the reference wordmark for the site */
.nav-wordmark {
  justify-self: center;
  font-family: var(--font-wordmark);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-text-main);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.nav-wordmark:hover {
  opacity: 0.75;
}

.nav-wordmark:focus-visible {
  outline: 2px solid var(--color-text-main);
  outline-offset: 4px;
}

/* C. Section navigation */
.nav-links {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-main);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-highlight);
  border-color: var(--color-highlight);
}

.nav-link:focus-visible {
  outline: 2px solid var(--color-text-main);
  outline-offset: 4px;
}

/* D. Mobile section menu — a compact control that replaces the inline links
   below the mobile breakpoint. Hidden on larger screens. */
.nav-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 2px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.nav-menu-btn:hover,
.nav-menu-btn[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.55);
}

.nav-menu-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Two offset strokes (not a generic three-bar glyph) that fold into an X. */
.nav-menu-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}

.nav-menu-line {
  position: absolute;
  left: 0;
  height: 1.5px;
  width: 18px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--transition-fast), top var(--transition-fast), width var(--transition-fast);
}

.nav-menu-line:nth-child(1) { top: 4px; }
.nav-menu-line:nth-child(2) { top: 10px; width: 12px; }

.nav-menu-btn[aria-expanded="true"] .nav-menu-line:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.nav-menu-btn[aria-expanded="true"] .nav-menu-line:nth-child(2) {
  top: 7px;
  width: 18px;
  transform: rotate(-45deg);
}

/* Dropdown panel (dark glass, matching the music player's menu) */
.nav-menu {
  position: absolute;
  top: calc(100% - var(--space-xs));
  right: var(--space-md);
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 2px;
  background: rgba(20, 19, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 60;
}

.nav-menu[hidden] {
  display: none;
}

.nav-menu-link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 11px 14px;
  border-radius: 2px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-menu-link:hover,
.nav-menu-link:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: none;
}

/* --------------------------------------------------------------------------
   4. Fullscreen 100vh 100vw Hero Video Experience
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100svh;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0d0c0b;
}

/* Background Video Container & Optimization */
.hero-video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(105%) brightness(88%) saturate(102%);
}

/* Cinematic Editorial Overlay Gradients */
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Symmetric scrim: even darkening for centered text + subtle top/bottom vignette */
  background: 
    radial-gradient(ellipse at center, rgba(13, 12, 11, 0.55) 0%, rgba(13, 12, 11, 0.72) 70%, rgba(13, 12, 11, 0.88) 100%),
    linear-gradient(to top, rgba(13, 12, 11, 0.7) 0%, transparent 35%),
    linear-gradient(to bottom, rgba(13, 12, 11, 0.65) 0%, transparent 25%);
  z-index: 2;
  pointer-events: none;
}

/* Foreground Content Wrapper (Spans full viewport height) */
.hero-content-wrap {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-3xl) + 20px) var(--space-xl) var(--space-xl) var(--space-xl);
  box-sizing: border-box;
}

/* Centered Editorial Headline & Narrative */
.hero-editorial {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  max-width: 720px;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.8vw, 5.5rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin-bottom: var(--space-md);
  text-wrap: balance;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.hero-description {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.35vw, 1.35rem);
  line-height: 1.6;
  color: #dfdcd3;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-xl);
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.hero-action-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.hero-primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 40px;
  background-color: #ffffff;
  color: #141312;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.hero-primary-cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.hero-primary-cta:hover {
  background-color: #f0ebe0;
  color: #000000;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.hero-primary-cta:hover svg {
  transform: translateY(4px);
}

.hero-primary-cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

/* Navigation adjustment for transparent overlay atop 100vh video */
.archive-nav {
  background: linear-gradient(to bottom, rgba(13, 12, 11, 0.85) 0%, rgba(13, 12, 11, 0) 100%);
}

.nav-wordmark {
  color: #ffffff;
}

.nav-link {
  color: #ffffff;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   Pinned navigation — once the hero has scrolled out of view the bar detaches
   from the top of the page and fixes to the viewport. The bar itself stays
   transparent (no fill, border or shadow) so only the player, wordmark and
   links float over the page.
   -------------------------------------------------------------------------- */
@keyframes nav-pin-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.archive-nav.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  background: none;
  animation: nav-pin-in var(--transition-smooth) both;
}

/* The transparent bar carries the page's dark ink over the light chapters and
   inverts back to the light hero treatment over the dark timeline chapter
   (js/nav-scroll.js toggles .is-fixed-invert). */
.archive-nav.is-fixed:not(.is-fixed-invert) .nav-wordmark,
.archive-nav.is-fixed:not(.is-fixed-invert) .nav-link {
  color: var(--color-text-main);
}

.archive-nav.is-fixed:not(.is-fixed-invert) .nav-link:hover {
  color: var(--color-highlight);
  border-color: var(--color-highlight);
}

.archive-nav.is-fixed:not(.is-fixed-invert) .nav-player {
  background: rgba(20, 19, 18, 0.03);
  border-color: var(--color-border-strong);
}

.archive-nav.is-fixed:not(.is-fixed-invert) .nav-player:hover,
.archive-nav.is-fixed:not(.is-fixed-invert) .nav-player:focus-within {
  border-color: var(--color-text-main);
}

.archive-nav.is-fixed:not(.is-fixed-invert) .player-toggle-btn,
.archive-nav.is-fixed:not(.is-fixed-invert) .player-menu-btn {
  color: var(--color-text-main);
}

.archive-nav.is-fixed:not(.is-fixed-invert) .player-toggle-btn:hover,
.archive-nav.is-fixed:not(.is-fixed-invert) .player-menu-btn:hover,
.archive-nav.is-fixed:not(.is-fixed-invert) .player-menu-btn[aria-expanded="true"] {
  background: rgba(20, 19, 18, 0.07);
}

.archive-nav.is-fixed:not(.is-fixed-invert) .player-toggle-btn:focus-visible,
.archive-nav.is-fixed:not(.is-fixed-invert) .player-menu-btn:focus-visible {
  outline-color: var(--color-text-main);
}

.archive-nav.is-fixed:not(.is-fixed-invert) .player-divider {
  background: var(--color-border-strong);
}

/* The mobile menu control tracks the player's light/dark treatment. */
.archive-nav.is-fixed:not(.is-fixed-invert) .nav-menu-btn {
  color: var(--color-text-main);
  background: rgba(20, 19, 18, 0.03);
  border-color: var(--color-border-strong);
}

.archive-nav.is-fixed:not(.is-fixed-invert) .nav-menu-btn:hover,
.archive-nav.is-fixed:not(.is-fixed-invert) .nav-menu-btn[aria-expanded="true"] {
  border-color: var(--color-text-main);
}

.archive-nav.is-fixed:not(.is-fixed-invert) .nav-menu-btn:focus-visible {
  outline-color: var(--color-text-main);
}

/* In-page anchor targets clear the bar when it is pinned to the top. */
#archive-explore,
#disciplines,
#stories,
#generations {
  scroll-margin-top: 96px;
}

/* --------------------------------------------------------------------------
   5. Responsiveness & Adaptive Viewports
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-content-wrap {
    padding: calc(var(--space-3xl) + 10px) var(--space-lg) var(--space-lg) var(--space-lg);
  }

  .hero-headline {
    font-size: clamp(2.5rem, 6.5vw, 3.8rem);
  }
}

@media (max-width: 640px) {
  .archive-nav {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-xs);
  }

  .nav-wordmark {
    font-size: 1.15rem;
  }

  /* Collapse the inline links into the toggle menu on small screens. */
  .nav-links {
    display: none;
  }

  .nav-menu-btn {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .hero-overlay {
    /* Tailored mobile scrim: even, continuous vertical cinematic gradient fill
       that smoothly protects the top nav and center content without squished radial distortion */
    background: 
      linear-gradient(
        to bottom,
        rgba(13, 12, 11, 0.88) 0%,
        rgba(13, 12, 11, 0.62) 22%,
        rgba(13, 12, 11, 0.58) 50%,
        rgba(13, 12, 11, 0.72) 78%,
        rgba(13, 12, 11, 0.92) 100%
      );
  }

  .hero-content-wrap {
    padding: calc(var(--space-3xl) + 24px) var(--space-md) var(--space-xl) var(--space-md);
  }

  .hero-headline {
    font-size: clamp(2.1rem, 9.5vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
  }

  .hero-description {
    font-size: 1.0625rem;
    line-height: 1.55;
    margin-bottom: var(--space-xl);
    max-width: 320px;
  }

  .hero-primary-cta {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    padding: 18px 24px;
  }

  .hero-action-group {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
  }
}

/* Narrow phones: the links now live in the toggle menu, so the bar stays a
   single row (player · wordmark · menu). Keep the parts comfortably spaced. */
@media (max-width: 520px) {
  .archive-nav {
    column-gap: var(--space-sm);
  }

  .nav-menu-btn {
    width: 32px;
    height: 32px;
  }
}

/* --------------------------------------------------------------------------
   6. Accessibility: Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    animation: none;
    will-change: auto;
  }

  .archive-nav.is-fixed {
    animation: none;
  }

  .nav-menu-line {
    transition: none;
  }
}