/* =========================================================
   THE GAIA ODYSSEY — Dark Cosmic Theme (Clean Minimal)
   ========================================================= */

:root {
  --gaia-bg: #0a0f1c;
  --gaia-surface: #121826;
  --gaia-surface-2: #1a2233;
  --gaia-text: #e2e8f0;
  --gaia-muted: #94a3b8;
  --gaia-gold: #c9a66b;
  --gaia-teal: #34d399;
  --gaia-violet: #a78bfa;
  --gaia-border: #2a354d;
}

body {
  font-family: 'Inter', system_ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--gaia-bg);
  color: var(--gaia-text);
  line-height: 1.7;
}

/* Headings */
h1, h2, .font-display, .section-title {
  font-family: Georgia, 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  line-height: 1.08;
}

/* Navigation */
.gaia-nav {
  background: rgba(10, 15, 28, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gaia-border);
}

.gaia-nav a:hover {
  color: var(--gaia-gold);
}

/* Cards */
.gaia-card {
  background: var(--gaia-surface);
  border: 1px solid var(--gaia-border);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.gaia-card:hover {
  transform: translateY(-4px);
  border-color: var(--gaia-gold);
}

/* Accent colors */
.cosmos-accent { color: var(--gaia-violet); }
.life-accent { color: var(--gaia-teal); }
.dino-accent { color: var(--gaia-gold); }

/* Video */
.video-wrapper {
  background: #0a0f1c;
  border: 1px solid var(--gaia-border);
}

/* Basic narrative */
.narrative {
  font-size: 1.05rem;
  max-width: 70ch;
}
.narrative p {
  margin-bottom: 1.1rem;
}

/* Footer */
.gaia-footer {
  background: #070b15;
  border-top: 1px solid var(--gaia-border);
}

/* Mobile heading overflow fix */
@media (max-width: 768px) {
  .detail-hero h1 {
    font-size: 2.8rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}