/* ==== css/variables.css ==== */
/* ============================================================
   DESIGN TOKENS — Museum of Tomorrow, 1975
   ============================================================ */
:root {
  /* --- Primary palette --- */
  --mustard:        #F9A825;
  --mustard-deep:   #C7860F;
  --olive:          #6B6212;
  --burnt-orange:   #EF6C00;
  --cream:          #FFF3D6;
  --cream-dim:      #E8DBB0;
  --black:          #0B0A08;
  --panel-black:    #16140F;

  /* --- Accents --- */
  --crt-green:      #4FE870;
  --crt-green-dim:  #1F5C30;
  --radar-lime:     #C6FF00;
  --warm-white:     #F5EBD3;
  --rust:           #8B3A1E;
  --copper:         #B8733A;
  --dark-brown:     #2B1D14;
  --neon-cyan:      #00FFFF;
  --neon-magenta:   #FF00FF;

  /* --- Surfaces --- */
  --surface-0:      var(--black);
  --surface-1:      #1B170F;
  --surface-2:      #241E14;
  --panel-metal:    linear-gradient(180deg, #3a3225 0%, #221d15 100%);

  /* --- Typography --- */
  --font-display:   'Michroma', 'Eurostile', 'Arial Narrow', sans-serif;
  --font-body:      'IBM Plex Mono', 'Courier Prime', monospace;
  --font-terminal:  'VT323', 'Courier New', monospace;

  /* --- Type scale --- */
  --fs-hero:        clamp(2.6rem, 8vw, 7.2rem);
  --fs-h1:           clamp(2rem, 4.5vw, 3.6rem);
  --fs-h2:           clamp(1.5rem, 3vw, 2.4rem);
  --fs-h3:           clamp(1.1rem, 2vw, 1.5rem);
  --fs-body:         1rem;
  --fs-small:        0.8rem;
  --fs-caption:      0.72rem;

  /* --- Spacing --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* --- Motion --- */
  --ease-mech:  cubic-bezier(.65,.05,.36,1);
  --ease-soft:  cubic-bezier(.22,.61,.36,1);
  --dur-fast:   0.2s;
  --dur-med:    0.6s;
  --dur-slow:   1.4s;

  /* --- Effects --- */
  --grain-opacity: 0.08;
  --scanline-opacity: 0.08;
  --vignette: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.85) 100%);
  --border-metal: 1px solid rgba(249,168,37,0.25);
  --shadow-panel: 0 8px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  --radius-panel: 4px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.001s;
    --dur-med: 0.001s;
    --dur-slow: 0.001s;
  }
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  background: var(--surface-0);
  color: var(--warm-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }
button, input, textarea { border: none; outline: none; background: none; color: inherit; }

::selection { background: var(--mustard); color: var(--black); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--mustard); color: var(--black); padding: .75em 1.2em;
  font-family: var(--font-body); font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--radar-lime); outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, .display {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--cream); line-height: 1.1;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-terminal); font-size: 1rem;
  letter-spacing: 0.28em; color: var(--radar-lime); text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--radar-lime); box-shadow: 0 0 8px var(--radar-lime);
  animation: blink-dot 2s infinite ease-in-out;
}
p.lede { font-size: 1.05rem; color: var(--cream-dim); max-width: 60ch; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.site { position: relative; isolation: isolate; }
section { position: relative; padding: var(--space-xl) var(--space-lg); max-width: 1440px; margin: 0 auto; }
.section-head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: var(--space-lg); max-width: 720px; }

/* ============================================================
   AMBIENT BACKGROUND LAYERS
   ============================================================ */
#bg-canvas { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; background: var(--black); }
.grain-overlay {
  position: fixed; inset: -100px; z-index: 50; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 8s steps(8) infinite;
}
.scanline-overlay {
  position: fixed; inset: 0; z-index: 49; pointer-events: none; opacity: var(--scanline-opacity);
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.6) 0px, rgba(255,255,255,0.6) 1px, transparent 2px, transparent 3px);
  mix-blend-mode: overlay;
}
.vignette-overlay { position: fixed; inset: 0; z-index: 48; pointer-events: none; background: var(--vignette); }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor {
  position: fixed; top: 0; left: 0; width: 28px; height: 28px;
  border: 1.5px solid var(--radar-lime); border-radius: 50%; pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%); transition: width var(--dur-fast) var(--ease-soft), height var(--dur-fast) var(--ease-soft), border-color var(--dur-fast);
  mix-blend-mode: difference;
}
.cursor::before { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; background: var(--radar-lime); border-radius: 50%; transform: translate(-50%, -50%); }
.cursor::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid transparent; }
.cursor .cursor-sweep {
  position: absolute; top: 50%; left: 50%; width: 50%; height: 1.5px;
  background: linear-gradient(90deg, var(--radar-lime), transparent); transform-origin: left center; animation: cursor-rotate 3s linear infinite;
}
.cursor-coords { position: absolute; top: 16px; left: 16px; font-family: var(--font-terminal); font-size: 0.85rem; color: var(--radar-lime); white-space: nowrap; opacity: 0; transition: opacity var(--dur-fast); }
.cursor.is-hover { width: 52px; height: 52px; border-color: var(--mustard); }
.cursor.is-hover .cursor-coords { opacity: 1; }
.cursor.is-click { width: 18px; height: 18px; }
@media (hover: none) { .cursor { display: none; } body { cursor: auto; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.9em 1.8em;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); background: linear-gradient(180deg, #40372590, #1a160e90); border: var(--border-metal); border-radius: 2px;
  box-shadow: var(--shadow-panel); cursor: none; transition: transform var(--dur-fast) var(--ease-mech), box-shadow var(--dur-fast);
}
.btn::before {
  content: ''; position: absolute; left: 0.7em; top: 50%; width: 6px; height: 6px; transform: translateY(-50%);
  background: var(--rust); border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,0.4); transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover::before, .btn:focus-visible::before { background: var(--crt-green); box-shadow: 0 0 8px var(--crt-green), 0 0 0 2px rgba(0,0,0,0.4); }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08); }
.btn:active { transform: translateY(0); }
.btn--primary { 
  background: linear-gradient(180deg, #FFFF00 0%, #FFE066 100%); 
  color: var(--black); 
  border: 2px solid #FFFF00;
  font-weight: 800;
  padding: 1.2em 2.4em;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  box-shadow: 
    0 0 20px rgba(255,255,0,0.8),
    0 0 40px rgba(255,224,102,1),
    0 0 60px rgba(255,255,0,0.6),
    0 0 80px rgba(255,237,78,0.4),
    0 12px 40px rgba(0,0,0,0.7),
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -2px 0 rgba(0,0,0,0.2);
  transition: all var(--dur-fast) var(--ease-mech);
  position: relative;
  z-index: 999999999;
  animation: btn-glow-pulse-enhanced 2s ease-in-out infinite;
}
.btn--primary::after {
  content: '';
  position: absolute;
  inset: -16px -24px -16px -16px;
  border: 3px solid #E5453F;
  border-radius: 0;
  background: none;
  opacity: 1;
  z-index: 999999998;
  clip-path: polygon(0 30%, 85% 30%, 100% 50%, 85% 70%, 0 70%, 5% 50%);
  box-shadow: 
    0 0 10px rgba(229, 69, 63, 0.5),
    0 0 20px rgba(229, 69, 63, 0.7),
    0 0 35px rgba(255, 107, 99, 0.5),
    inset 0 0 12px rgba(229, 69, 63, 0.4);
  transition: all var(--dur-fast);
  animation: rocket-glow 2s ease-in-out infinite;
}
.btn--primary::before { background: rgba(0,0,0,0.4); }
.btn--primary:hover { 
  box-shadow: 
    0 0 30px rgba(255,255,0,1),
    0 0 60px rgba(255,255,0,0.9),
    0 0 90px rgba(255,224,102,0.8),
    0 0 120px rgba(255,255,0,0.5),
    0 16px 50px rgba(0,0,0,0.8),
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.3);
  transform: translateY(-4px) scale(1.08);
  letter-spacing: 0.18em;
}
.btn--primary:hover::after { 
  opacity: 1; 
  border-color: #FF4444; 
  box-shadow: 
    0 0 15px rgba(255, 68, 68, 0.9),
    0 0 30px rgba(255, 107, 99, 1),
    0 0 50px rgba(255, 68, 68, 0.7),
    inset 0 0 15px rgba(255, 107, 99, 0.5);
}
.btn--primary:hover::before { background: #FFD700; box-shadow: 0 0 16px rgba(255, 215, 0, 0.9); }
.btn-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes grain-shift {
  0% { transform: translate(0,0); } 10% { transform: translate(-2%,-3%); } 20% { transform: translate(-4%,2%); } 30% { transform: translate(2%,-4%); }
  40% { transform: translate(-2%,5%); } 50% { transform: translate(-4%,2%); } 60% { transform: translate(3%,0); } 70% { transform: translate(0,3%); }
  80% { transform: translate(-3%,0); } 90% { transform: translate(2%,2%); } 100% { transform: translate(0,0); }
}
@keyframes cursor-rotate { to { transform: rotate(360deg); } }
@keyframes blink-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes btn-glow-pulse-enhanced { 
  0%, 100% { 
    box-shadow: 
      0 0 20px rgba(255,255,0,0.8),
      0 0 40px rgba(255,224,102,1),
      0 0 60px rgba(255,255,0,0.6),
      0 0 80px rgba(255,237,78,0.4),
      0 12px 40px rgba(0,0,0,0.7),
      inset 0 2px 0 rgba(255,255,255,0.4),
      inset 0 -2px 0 rgba(0,0,0,0.2);
  } 
  50% { 
    box-shadow: 
      0 0 30px rgba(255,255,0,1),
      0 0 50px rgba(255,255,0,0.9),
      0 0 80px rgba(255,224,102,0.9),
      0 0 100px rgba(255,255,0,0.6),
      0 12px 40px rgba(0,0,0,0.7),
      inset 0 2px 0 rgba(255,255,255,0.5),
      inset 0 -2px 0 rgba(0,0,0,0.2);
  } 
}
@keyframes nav-slide-in {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes nav-slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes flicker { 0%, 100%, 92%, 94%, 97% { opacity: 1; } 93% { opacity: 0.82; } 96% { opacity: 0.7; } }
@keyframes crt-flicker-in { 0% { opacity: 0; filter: brightness(3) blur(2px); } 10% { opacity: 1; filter: brightness(0.5); } 15% { filter: brightness(2); } 20% { filter: brightness(1); } 100% { opacity: 1; filter: brightness(1); } }
@keyframes blink-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
@keyframes rocket-hover { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes scan-down { 0% { top: -10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 110%; opacity: 0; } }
@keyframes glitch-anim { 0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, 2px); } 20% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -2px); } 40% { clip-path: inset(40% 0 50% 0); transform: translate(-2px, 2px); } 60% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); } 80% { clip-path: inset(10% 0 70% 0); transform: translate(-2px, 2px); } 100% { clip-path: inset(30% 0 50% 0); transform: translate(2px, -2px); } }
.reveal-up { opacity: 0; transform: translateY(60px); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between;
  padding: 1.4em var(--space-lg); background: linear-gradient(180deg, rgba(22,20,15,0.92), rgba(22,20,15,0.75)); border-bottom: var(--border-metal);
  backdrop-filter: blur(6px); transition: padding var(--dur-med) var(--ease-mech), background var(--dur-med);
}
.nav.is-compact { padding: 0.7em var(--space-lg); background: rgba(11,10,8,0.92); }
.nav-brand { display: flex; align-items: center; gap: 0.7em; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.12em; color: var(--cream); }
.nav-brand .nav-radar { width: 26px; height: 26px; position: relative; }
.nav-light { width: 8px; height: 8px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 2px rgba(0,0,0,0.5); animation: blink-dot 3s infinite ease-in-out; }
.nav.is-compact .nav-light { background: var(--crt-green); box-shadow: 0 0 6px var(--crt-green); }
.nav-links { display: flex; gap: 1.8em; }
.nav-links a { position: relative; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); padding: 0.4em 0; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--mustard); transition: width var(--dur-fast) var(--ease-mech); }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--mustard); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 1em; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 28px; cursor: none; transition: all var(--dur-med); }
.nav-toggle span { height: 2px; background: var(--mustard); width: 100%; transition: all var(--dur-med) var(--ease-mech); }
.nav-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(10px, 10px); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

/* ============================================================
   HERO (UPGRADED)
   ============================================================ */
.hero { position: relative; min-height: 100svh; height: auto; display: flex; align-items: center; overflow: hidden; padding: clamp(6.5rem, 15vh, 9rem) var(--space-lg) var(--space-lg); }

.hero-backdrop { position: absolute; inset: 0; z-index: 0; }
.hero-grid-overlay {
  position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(rgba(249,168,37,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(249,168,37,0.07) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 72% 45%, black 0%, transparent 68%);
}
.hero-vignette-strip { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(11,10,8,0.92) 0%, rgba(11,10,8,0.5) 45%, transparent 64%); }

/* Outer HUD frame */
.hero-hud-corners { position: absolute; inset: 28px; pointer-events: none; z-index: 2; opacity: 0.55; }
.hud-corner { position: absolute; width: 34px; height: 34px; border: 2px solid var(--radar-lime); }
.hud-corner.top-left { top: 0; left: 0; border-right: none; border-bottom: none; }
.hud-corner.top-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.hud-corner.bottom-left { bottom: 0; left: 0; border-right: none; border-top: none; }
.hud-corner.bottom-right { bottom: 0; right: 0; border-left: none; border-top: none; }

/* Split layout: mission dossier (left) + instrument cluster (right) */
.hero-content {
  position: relative; z-index: 3; width: 100%; max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
}

.hero-copy { text-align: left; }
.hero-eyebrow { display: inline-flex; align-items: center; font-family: var(--font-terminal); font-size: 1.1rem; letter-spacing: 0.4em; color: var(--radar-lime); margin-bottom: 1em; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--radar-lime); box-shadow: 0 0 8px var(--radar-lime); margin-right: 0.7em; flex-shrink: 0; animation: blink-dot 2s infinite ease-in-out; }

.hero-title {
  font-family: var(--font-display); line-height: 1.03; color: var(--cream); position: relative;
  font-size: clamp(2.4rem, 5.2vw, 5.6rem);
  text-shadow: 0 0 50px rgba(249,168,37,0.35), 3px 3px 0 rgba(139,58,30,0.55), -2px -1px 0 rgba(198,255,0,0.14);
  animation: crt-flicker-in 1.6s var(--ease-soft) both; animation-delay: 0.15s;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .accent { color: var(--mustard); }

.hero-subtitle { margin: 1.3em 0 0; max-width: 46ch; font-family: var(--font-body); font-size: 1.05rem; color: var(--cream-dim); }
.hero-cta { justify-content: flex-start; }

.hero-manifest { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: 1.6em 2.6em; padding-top: 1.2em; border-top: 1px dashed rgba(255,243,214,0.2); }
.manifest-row { display: flex; flex-direction: column; gap: 0.3em; }
.manifest-row span:first-child { font-family: var(--font-terminal); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--mustard); }
.manifest-row span:last-child { font-family: var(--font-body); font-size: 0.95rem; color: var(--cream); }
.manifest-row .ok { color: var(--radar-lime); }

.hero-instrument { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.8em; }
.instrument-bezel {
  position: relative; width: min(42vw, 460px); aspect-ratio: 1; border-radius: 50%;
  background: var(--panel-metal); border: var(--border-metal); box-shadow: var(--shadow-panel), inset 0 0 60px rgba(0,0,0,0.6);
  overflow: hidden;
}
.instrument-bezel::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgba(249,168,37,0.25); pointer-events: none; z-index: 3; }
#hero-three { position: absolute; inset: 0; z-index: 1; }
.instrument-ring {
  position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, rgba(198,255,0,0.08) 0deg 1.5deg, transparent 1.5deg 6deg);
}
.hero-satellite { position: absolute; width: 54px; opacity: 0.9; animation: float-slow 9s ease-in-out infinite; z-index: 4; }
.hero-satellite.s1 { top: 6%; left: -6%; animation-duration: 11s; }
.hero-satellite.s2 { bottom: 8%; right: -8%; width: 40px; animation-duration: 8s; }

.hero-telemetry { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.2em, 3vw, 2.4em); }
.tel-block { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tel-label { font-family: var(--font-terminal); font-size: 0.78rem; color: var(--mustard); letter-spacing: 0.18em; margin-bottom: 0.2em; }
.tel-val { font-family: var(--font-body); font-size: 1.05rem; color: var(--cream); }
.blink-fast { animation: blink-dot 1s infinite; }

.hero-scroll-indicator { position: absolute; bottom: 2em; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.6em; font-family: var(--font-terminal); font-size: 0.9rem; letter-spacing: 0.3em; color: var(--cream-dim); }
.scroll-rocket { width: 18px; height: 34px; animation: rocket-hover 3s ease-in-out infinite; }
.radar-graphic { position: relative; border-radius: 50%; border: 1px solid rgba(198,255,0,0.35); }
.radar-graphic::before, .radar-graphic::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(198,255,0,0.2); }
.radar-graphic::after { inset: 42%; }
.radar-sweep-arm { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(198,255,0,0.55), transparent 24%); animation: radar-sweep 4s linear infinite; }

/* ============================================================
   SECTIONS 1-3 (Kept intact structurally)
   ============================================================ */
.intro { background: linear-gradient(rgba(11,10,8,0.86), rgba(11,10,8,0.94)), repeating-linear-gradient(0deg, rgba(249,168,37,0.03) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(249,168,37,0.03) 0 1px, transparent 1px 32px); border-top: var(--border-metal); border-bottom: var(--border-metal); }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.intro-copy p { color: var(--cream-dim); margin-bottom: 1em; max-width: 52ch; }
.intro-stats { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-md); margin-top: var(--space-md); }
.intro-stat .num { font-family: var(--font-display); font-size: 2rem; color: var(--mustard); display: block; }
.intro-stat .label { font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.blueprint-frame { position: relative; aspect-ratio: 4/5; border: var(--border-metal); background: var(--surface-1); overflow: hidden; }
.blueprint-frame svg { width: 100%; height: 100%; }
.blueprint-label { position: absolute; bottom: 1em; left: 1em; font-family: var(--font-terminal); font-size: 1rem; color: var(--radar-lime); letter-spacing: 0.1em; }

.timeline-section { padding-left: 0; padding-right: 0; max-width: none; }
.timeline-section .section-head { padding: 0 var(--space-lg); max-width: 720px; margin-left: auto; margin-right: auto; }
.timeline-viewport { position: relative; height: 78vh; min-height: 520px; overflow: hidden; border-top: var(--border-metal); border-bottom: var(--border-metal); background: var(--surface-1); }
.timeline-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; will-change: transform; }
.timeline-progress-rail { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.1); z-index: 1; }
.timeline-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--mustard), var(--radar-lime)); box-shadow: 0 0 12px var(--radar-lime); }
.timeline-event { position: relative; z-index: 2; width: min(80vw, 460px); flex-shrink: 0; margin: 0 var(--space-lg); padding: var(--space-md); background: var(--panel-metal); border: var(--border-metal); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); opacity: 0.45; transform: scale(0.92); transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft); }
.timeline-event.is-active { opacity: 1; transform: scale(1); border-color: var(--mustard); }
.timeline-event .year { font-family: var(--font-display); font-size: 2.6rem; color: var(--mustard); display: block; margin-bottom: 0.2em; }
.timeline-event.is-active .year { color: var(--radar-lime); text-shadow: 0 0 16px rgba(198,255,0,0.5); }
.timeline-event h3 { margin-bottom: 0.4em; }
.timeline-event p { color: var(--cream-dim); font-size: 0.92rem; margin-bottom: 0.6em; }
.timeline-event .fact { font-family: var(--font-terminal); font-size: 1rem; color: var(--crt-green); border-top: 1px dashed rgba(255,255,255,0.15); padding-top: 0.6em; }
.timeline-event .craft { position: absolute; top: -18px; right: 16px; width: 46px; height: 46px; opacity: 0.85; }
.timeline-hint { position: absolute; bottom: 1em; right: var(--space-lg); font-family: var(--font-terminal); font-size: 0.95rem; color: var(--cream-dim); letter-spacing: 0.1em; z-index: 3; }
.timeline-hint .kbd { border: 1px solid rgba(255,255,255,0.3); padding: 0.1em 0.5em; margin: 0 0.2em; border-radius: 2px; }

.exhibit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.exhibit-card { position: relative; background: var(--panel-metal); border: var(--border-metal); border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--shadow-panel); cursor: none; }
.exhibit-card .art { aspect-ratio: 4/3; position: relative; overflow: hidden; border-bottom: var(--border-metal); }
.exhibit-card .art svg { width: 100%; height: 100%; transition: transform 1.2s var(--ease-soft); }
.exhibit-card:hover .art svg { transform: scale(1.08); }
.exhibit-card .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5)); opacity: 0; transition: opacity var(--dur-med); }
.exhibit-card:hover .art::after { opacity: 1; }
.exhibit-body { padding: 1.4em; }
.exhibit-tag { font-family: var(--font-terminal); font-size: 0.9rem; color: var(--radar-lime); letter-spacing: 0.15em; }
.exhibit-body h3 { margin: 0.3em 0 0.4em; }
.exhibit-body p { color: var(--cream-dim); font-size: 0.9rem; margin-bottom: 1em; }
.exhibit-link { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mustard); display: inline-flex; align-items: center; gap: 0.5em; }
.exhibit-link::after { content: '→'; transition: transform var(--dur-fast); }
.exhibit-card:hover .exhibit-link::after { transform: translateX(6px); }
.exhibit-card .rivet { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.5); box-shadow: inset 0 1px 1px rgba(255,255,255,0.15); }
.exhibit-card .rivet.tl { top: 8px; left: 8px; } .exhibit-card .rivet.tr { top: 8px; right: 8px; }

/* ============================================================
   SECTION 4 — GALLERY (FILM ARCHIVE CONTACT SHEET)
   ============================================================ */
.filmstrip-wrap { position: relative; margin-top: var(--space-lg); }
.filmstrip-rail {
  height: 20px; background: #060504;
  background-image: radial-gradient(circle, #2b2820 3px, transparent 3.2px);
  background-size: 34px 100%; background-position: 17px center; background-repeat: repeat-x;
  border-top: 1px solid #000; border-bottom: 1px solid #000;
}
.filmstrip-track {
  display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x proximity;
  padding: var(--space-lg) var(--space-lg); background: #0a0908;
  scrollbar-width: none; -ms-overflow-style: none;
}
.filmstrip-track::-webkit-scrollbar { display: none; }

.gallery-item {
  flex: 0 0 260px; scroll-snap-align: center; position: relative; cursor: none;
  background: #16140f; padding: 16px 16px 68px; border: 1px solid #333; border-bottom: 3px solid #1c1a15;
  box-shadow: 0 14px 30px rgba(0,0,0,0.7);
  transition: transform var(--dur-med) var(--ease-mech), box-shadow var(--dur-med), border-color var(--dur-med);
}
.gallery-item:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(198,255,0,0.15), inset 0 0 10px rgba(198,255,0,0.08); border-color: rgba(198,255,0,0.4); }

.frame-tag {
  position: absolute; top: -11px; left: 16px; background: var(--mustard); color: #16140f; z-index: 1;
  font-family: var(--font-terminal); font-size: 0.72rem; letter-spacing: 0.12em; padding: 2px 8px;
}

.gallery-art-container { overflow: hidden; border: 2px solid #000; border-radius: 2px; background: #000; position: relative; }
.gallery-item svg {
  width: 100%; display: block; filter: contrast(1.1) brightness(0.9);
  transition: filter 0.4s var(--ease-mech), transform 0.6s var(--ease-mech);
}
/* RGB SPLIT HOVER EFFECT */
.gallery-item:hover svg {
  transform: scale(1.05);
  filter: drop-shadow(4px 0px 0px rgba(255,0,0,0.8)) drop-shadow(-4px 0px 0px rgba(0,255,255,0.8)) contrast(1.3) saturate(1.5);
}
.gallery-label { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; }
.gallery-label .g-title { font-family: var(--font-display); font-size: 0.8rem; color: #a19d94; letter-spacing: 0.08em; text-transform: uppercase; }
.gallery-label .g-meta { font-family: var(--font-terminal); font-size: 0.85rem; color: var(--mustard); margin-top: -2px; }

.filmstrip-controls { display: flex; align-items: center; justify-content: center; gap: 1.4em; margin-top: var(--space-md); font-family: var(--font-terminal); letter-spacing: 0.15em; color: var(--cream-dim); }
.filmstrip-nav {
  width: 38px; height: 38px; border: 1px solid var(--border-metal); background: var(--panel-metal); color: var(--cream);
  font-size: 1.2rem; line-height: 1; cursor: none; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-med), border-color var(--dur-med), color var(--dur-med);
}
.filmstrip-nav:hover { border-color: var(--mustard); color: var(--mustard); }
.filmstrip-counter { font-size: 0.9rem; }

/* Lightbox remains */
.lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(5,4,2,0.96); opacity: 0; pointer-events: none; transition: opacity var(--dur-med); }
.lightbox.is-open { opacity: 1; pointer-events: all; }
.lightbox-frame { max-width: min(90vw, 720px); max-height: 85vh; position: relative; }
.lightbox-frame svg { width: 100%; height: auto; max-height: 70vh; filter: drop-shadow(0 0 20px rgba(249,168,37,0.2)); }
.lightbox-caption { margin-top: 1em; text-align: center; color: var(--cream-dim); font-family: var(--font-terminal); font-size: 1.2rem; letter-spacing: 0.08em; }
.lightbox-close { position: absolute; top: -2.6em; right: 0; font-family: var(--font-terminal); font-size: 1.2rem; color: var(--cream); cursor: none; }

/* ============================================================
   SECTION 5 — ASTRONAUTS (UPGRADED FOIL & SCANLINES)
   ============================================================ */
.astro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.astro-card { perspective: 1400px; height: 380px; cursor: none; }
.astro-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s var(--ease-mech); }
.astro-card:hover .astro-card-inner, .astro-card.is-flipped .astro-card-inner { transform: rotateY(180deg) scale(1.05); }

.astro-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border: 1px solid rgba(79,232,112,0.3); border-radius: var(--radius-panel);
  background: var(--surface-1); box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  padding: 1.2em; display: flex; flex-direction: column; overflow: hidden;
}
.astro-face.back { transform: rotateY(180deg); justify-content: space-between; border-color: rgba(249,168,37,0.4); }

/* Holographic Glare overlay */
.holo-glare {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0;
  background: linear-gradient(125deg, transparent 20%, rgba(255,255,255,0.4) 40%, rgba(0,255,255,0.2) 50%, transparent 60%);
  background-size: 200% 200%; transition: opacity 0.4s;
}
.astro-card:hover .holo-glare { opacity: 1; animation: holo-shift 1.5s ease-out forwards; }
@keyframes holo-shift { 0% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }

.astro-portrait {
  flex: 1; border: 1px solid rgba(79,232,112,0.4); margin-bottom: 0.8em;
  background: repeating-linear-gradient(0deg, rgba(79,232,112,0.05) 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, rgba(79,232,112,0.05) 0 1px, transparent 1px 20px), #080c09;
  position: relative; overflow: hidden;
}
.astro-portrait svg { width: 100%; height: 100%; position: relative; z-index: 2; }

/* The sweeping CRT Scanline */
.astro-scanline {
  position: absolute; left: 0; width: 100%; height: 4px; background: rgba(79,232,112,0.8);
  box-shadow: 0 0 15px 4px rgba(79,232,112,0.6); z-index: 5; opacity: 0.8;
  animation: scan-down 3.5s linear infinite; pointer-events: none;
}

.astro-face .id-label { font-family: var(--font-terminal); font-size: 0.85rem; color: var(--radar-lime); letter-spacing: 0.1em; }
.astro-face h3 { font-size: 1rem; margin: 0.15em 0; z-index: 2; position: relative; }
.astro-face .rank { font-size: 0.8rem; color: var(--cream-dim); z-index: 2; position: relative; }
.astro-face.back p { font-size: 0.85rem; color: var(--cream-dim); margin-bottom: 0.6em; position: relative; z-index: 2; }
.astro-badges { display: flex; gap: 0.5em; flex-wrap: wrap; position: relative; z-index: 2; }
.astro-badge { font-family: var(--font-terminal); font-size: 0.8rem; padding: 0.2em 0.6em; border: 1px solid var(--mustard); color: var(--mustard); border-radius: 2px; }


/* ============================================================
   SECTIONS 6-8 + FOOTER (Kept intact structurally)
   ============================================================ */
.terminal-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-lg); align-items: center; }
.terminal-shell { position: relative; background: #0d1410; border: 3px solid #2a2620; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.7), inset 0 0 40px rgba(0,0,0,0.6); padding: 1.6em; animation: crt-flicker-in 1.2s var(--ease-soft) both; }
.terminal-shell::before { content: ''; position: absolute; inset: 0; border-radius: 8px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px); pointer-events: none; animation: flicker 6s infinite; }
.terminal-topbar { display: flex; justify-content: space-between; font-family: var(--font-terminal); font-size: 0.95rem; color: var(--crt-green); margin-bottom: 0.8em; letter-spacing: 0.08em; }
.terminal-screen { height: 280px; overflow-y: auto; font-family: var(--font-terminal); font-size: 1.15rem; color: var(--crt-green); text-shadow: 0 0 6px rgba(79,232,112,0.5); line-height: 1.5; padding-right: 0.5em; }
.terminal-screen .line { margin-bottom: 0.5em; white-space: pre-wrap; }
.terminal-screen .prompt-user::before { content: '> '; color: var(--radar-lime); }
.terminal-input-row { display: flex; align-items: center; margin-top: 0.8em; border-top: 1px dashed rgba(79,232,112,0.3); padding-top: 0.8em; }
.terminal-input-row .caret { color: var(--crt-green); font-family: var(--font-terminal); font-size: 1.15rem; animation: blink-caret 1s step-end infinite; }
.terminal-input-row input { flex: 1; font-family: var(--font-terminal); font-size: 1.15rem; color: var(--crt-green); padding: 0.2em 0.5em; }
.terminal-copy .lede { margin-bottom: var(--space-sm); }
.terminal-suggestions { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 1em; }
.terminal-suggestions button { font-family: var(--font-terminal); font-size: 0.95rem; border: 1px solid var(--copper); color: var(--copper); padding: 0.4em 0.8em; border-radius: 2px; cursor: none; transition: all var(--dur-fast); }
.terminal-suggestions button:hover { background: var(--copper); color: var(--black); }

.vr-section { position: relative; min-height: 70vh; display: flex; align-items: center; border-top: var(--border-metal); border-bottom: var(--border-metal); overflow: hidden; }
.vr-bg { position: absolute; inset: 0; z-index: 0; }
.vr-content { position: relative; z-index: 2; max-width: 640px; }
.vr-hotspot { position: absolute; z-index: 3; width: 14px; height: 14px; border-radius: 50%; background: var(--radar-lime); box-shadow: 0 0 0 0 rgba(198,255,0,0.6); }
.vr-hotspot::after { content: attr(data-label); position: absolute; left: 22px; top: -6px; font-family: var(--font-terminal); font-size: 0.95rem; color: var(--radar-lime); white-space: nowrap; opacity: 0; transition: opacity var(--dur-fast); }
.vr-hotspot:hover::after { opacity: 1; }
.vr-hotspot .ring { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--radar-lime); animation: pulse-ring 2s ease-out infinite; }

.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); }
.event-card { background: var(--surface-1); border: var(--border-metal); border-radius: var(--radius-panel); padding: 1.4em; box-shadow: var(--shadow-panel); }
.event-card .event-date { font-family: var(--font-terminal); color: var(--radar-lime); font-size: 1rem; letter-spacing: 0.1em; }
.event-card h3 { margin: 0.3em 0; }
.event-card p { color: var(--cream-dim); font-size: 0.88rem; margin-bottom: 0.8em; }
.event-countdown { display: flex; gap: 0.8em; font-family: var(--font-display); margin-top: 0.6em; }
.event-countdown div { text-align: center; }
.event-countdown .n { font-size: 1.3rem; color: var(--mustard); display: block; }
.event-countdown .u { font-size: 0.6rem; color: var(--cream-dim); letter-spacing: 0.1em; }

.ticket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.ticket { position: relative; background: var(--cream); color: var(--black); border-radius: 10px; padding: 1.6em; font-family: var(--font-body); box-shadow: var(--shadow-panel); overflow: hidden; cursor: none; transition: transform var(--dur-fast) var(--ease-mech); }
.ticket:hover { transform: translateY(-6px) rotate(-1deg); }
.ticket::before { content: ''; position: absolute; top: 0; bottom: 0; left: 72%; border-left: 2px dashed rgba(0,0,0,0.25); }
.ticket::after { content: ''; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: var(--surface-0); border-radius: 50%; }
.ticket-tier { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.06em; }
.ticket-price { font-size: 2rem; font-family: var(--font-display); margin: 0.3em 0; }
.ticket ul { font-size: 0.85rem; margin: 0.8em 0; }
.ticket ul li { margin-bottom: 0.3em; }
.ticket ul li::before { content: '— '; }
.ticket-stamp { position: absolute; top: 1.2em; right: 22%; font-family: var(--font-terminal); font-size: 0.9rem; border: 2px solid var(--rust); color: var(--rust); padding: 0.1em 0.5em; transform: rotate(8deg); opacity: 0.7; }
.ticket-serial { position: absolute; bottom: 0.8em; left: 1.6em; font-family: var(--font-terminal); font-size: 0.85rem; color: rgba(0,0,0,0.45); }
.ticket-btn { margin-top: 1em; width: 100%; padding: 0.7em; background: var(--black); color: var(--cream); font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: none; }

.booking-modal-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(5,4,2,0.8); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; }
.booking-modal-backdrop.is-open { opacity: 1; pointer-events: all; }
.booking-modal { width: min(560px, 92vw); background: var(--surface-1); border: var(--border-metal); border-radius: var(--radius-panel) var(--radius-panel) 0 0; padding: var(--space-md); transform: translateY(100%); transition: transform var(--dur-med) var(--ease-mech); max-height: 85vh; overflow-y: auto; }
.booking-modal-backdrop.is-open .booking-modal { transform: translateY(0); }
.booking-modal h3 { margin-bottom: 0.4em; }
.booking-modal p { color: var(--cream-dim); margin-bottom: 1em; }
.booking-form { display: grid; gap: 0.9em; }
.field { display: flex; flex-direction: column; gap: 0.3em; }
.field label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--radar-lime); }
.field input, .field select { padding: 0.7em; background: var(--surface-2); border: var(--border-metal); font-family: var(--font-body); color: var(--cream); }
.booking-confirm { display: none; text-align: center; padding: 1em 0; }
.booking-confirm.is-shown { display: block; }
.booking-confirm .num { font-family: var(--font-terminal); font-size: 1.3rem; color: var(--radar-lime); margin-top: 0.6em; display: block; }

footer.mission-control { position: relative; padding: var(--space-xl) var(--space-lg) var(--space-lg); background: var(--surface-1); border-top: var(--border-metal); overflow: hidden; }
.footer-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--space-lg); position: relative; z-index: 2; }
.footer-col h3 { font-size: 1rem; color: var(--mustard); margin-bottom: var(--space-sm); }
.footer-col p, .footer-col li { color: var(--cream-dim); font-size: 0.9rem; margin-bottom: 0.5em; }
.footer-col a:hover { color: var(--radar-lime); }
.footer-radar { position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; opacity: 0.25; z-index: 1; }
.newsletter-form { display: flex; border: var(--border-metal); margin-top: var(--space-sm); }
.newsletter-form input { flex: 1; padding: 0.8em 1em; font-family: var(--font-body); background: var(--surface-2); color: var(--cream); }
.newsletter-form button { padding: 0.8em 1.2em; background: var(--mustard); color: var(--black); font-weight: 700; letter-spacing: 0.1em; cursor: none; }
.footer-bottom { max-width: 1440px; margin: var(--space-lg) auto 0; padding-top: var(--space-md); border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1em; font-size: var(--fs-caption); color: var(--cream-dim); letter-spacing: 0.08em; text-transform: uppercase; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .exhibit-grid { grid-template-columns: repeat(2, 1fr); }
  .astro-grid { grid-template-columns: repeat(2, 1fr); }
  .events-grid, .ticket-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .terminal-wrap { grid-template-columns: 1fr; }
  .intro-grid { grid-template-columns: 1fr; }
  .gallery-item { flex-basis: 220px; }
  .hero-content { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { text-align: center; }
  .hero-eyebrow, .hero-manifest { justify-content: center; }
  .hero-subtitle { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .instrument-bezel { width: min(60vw, 380px); }
}
@media (max-width: 780px) {
  section { padding: var(--space-lg) var(--space-md); }
  .nav { padding: 1em var(--space-md); }
  .hero {
    min-height: 100svh;
    padding: max(6rem, 14svh) var(--space-md) 7rem;
  }
  .hero-hud-corners { inset: 16px; }
  .hero-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    text-align: center;
  }
  .hero-copy { width: 100%; text-align: center; }
  .hero-eyebrow {
    justify-content: center;
    max-width: 100%;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
  }
  .hero-subtitle { max-width: 34ch; }
  .hero-manifest { justify-content: center; gap: 1.25rem 1.75rem; }
  .hero-instrument { width: 100%; }
  .hero-scroll-indicator { bottom: 1.25rem; }
  .nav-links { 
    position: fixed; 
    top: 4.5em; 
    left: 0; 
    right: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 0; 
    background: linear-gradient(180deg, rgba(22,20,15,0.98), rgba(22,20,15,0.95)); 
    border-bottom: 1px solid rgba(249,168,37,0.25);
    padding: 1.5em var(--space-lg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: all var(--dur-med) var(--ease-mech);
    z-index: 99;
    max-height: calc(100vh - 4.5em);
    overflow-y: auto;
  }
  .nav-links.is-open { 
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    animation: nav-slide-in var(--dur-med) var(--ease-mech) forwards;
  }
  .nav-links a { 
    padding: 0.8em 0; 
    border-bottom: 1px solid rgba(249,168,37,0.1);
    transition: all var(--dur-fast);
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a:hover { color: var(--mustard); padding-left: 0.5em; }
  .nav-toggle { display: flex; }
  .nav-cta .btn { padding: 0.8em 1.2em; font-size: 0.75rem; }
  .nav-cta .btn span { display: inline; }
  .nav-cta .btn::before { display: none; }
  .nav-cta .btn::after { inset: -8px -12px -8px -8px; border: 2px solid #E5453F; }
  .exhibit-grid, .astro-grid, .events-grid, .ticket-grid, .footer-grid { grid-template-columns: 1fr; }
  .gallery-item { flex-basis: 78vw; }
  .filmstrip-rail { background-size: 26px 100%; background-position: 13px center; height: 16px; }
  .hero-satellite { display: none; }
  .instrument-bezel { width: min(70vw, 300px); }
  /* On touch screens the timeline is a native horizontal scroller.  Keep the
     first and last cards centred and let the browser own horizontal swipes. */
  .timeline-section .section-head { padding-inline: var(--space-md); }
  .timeline-viewport {
    height: min(72svh, 620px);
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 8vw;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .timeline-track {
    position: relative;
    width: max-content;
    min-width: 100%;
    height: 100%;
    padding-inline: calc((100vw - min(84vw, 420px)) / 2);
    gap: max(1rem, 5vw);
    will-change: auto;
  }
  .timeline-event {
    width: min(84vw, 420px);
    margin-inline: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .timeline-hint { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
  .cursor { display: none; }
  body { cursor: auto; }
}
@media (max-width: 480px) {
  .hero-title { font-size: clamp(2.2rem, 11vw, 3rem); }
  .hero-eyebrow { font-size: 0.84rem; letter-spacing: 0.14em; }
  .hero-manifest { gap: 1rem; }
}