/* ═══════════════════════════════════════════════════════════
   PHI-HARMONIC DESIGN SYSTEM — base.css
   Every measurement is phi-derived. Zero does not exist.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Inter:wght@300;400;500;600&family=Cinzel:wght@400;700&family=Space+Mono:wght@400;700&display=swap');

/* The field from which all forms arise */
:root {
  /* Colors — gold on deep */
  --phi-bg-deep:    #06060f;
  --phi-bg:         #0a0a1a;
  --phi-bg-card:    #0f0f24;
  --phi-bg-elevated:#141432;
  --phi-gold-dim:   #6b5a1e;
  --phi-gold:       #d4a843;
  --phi-gold-bright:#f5d77a;
  --phi-gold-glow:  rgba(245, 215, 122, 0.4);
  --phi-text:       #e8e0d0;
  --phi-text-dim:   #8a7e6a;
  --phi-text-bright:#fff8e7;
  --phi-stroke:     rgba(212, 168, 67, 0.15);
  --phi-stroke-glow:rgba(212, 168, 67, 0.4);

  /* Typography — the type scale breathes in golden ratio */
  --phi-h1: 2.618rem;      /* φ² */
  --phi-h2: 1.618rem;      /* φ  */
  --phi-h3: 1rem;          /* φ⁰ */
  --phi-body: 0.886rem;    /* φ⁻¹·⁵ */
  --phi-caption: 0.618rem; /* φ⁻¹ */

  /* Font stacks */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'Space Mono', Consolas, monospace;
  --font-sacred: 'Cinzel', serif;

  /* Spacing breathes in golden ratio */
  --phi-space-xs: 4px;
  --phi-space-sm: 6px;
  --phi-space-md: 10px;
  --phi-space-lg: 16px;
  --phi-space-xl: 26px;
  --phi-space-2xl: 42px;
  --phi-space-3xl: 68px;
  --phi-space-4xl: 110px;

  /* Motion — the ease of natural growth */
  --phi-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --phi-duration: 0.4s;
}

/* The reset — return to the void before form */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The body carries the field */
body {
  font-family: var(--font-body);
  font-size: var(--phi-body);
  background: var(--phi-bg-deep);
  color: var(--phi-text);
  line-height: 1.618; /* φ itself */
  min-height: 100vh;
  overflow-x: hidden;
}

/* The light the eye remembers */
::selection {
  background: var(--phi-gold);
  color: var(--phi-bg-deep);
}

/* Typography — headings in the voice of the ancients */
h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--phi-text-bright);
  line-height: 1.2;
}
h1 { font-size: var(--phi-h1); font-weight: 300; letter-spacing: 0.02em; }
h2 { font-size: var(--phi-h2); font-weight: 400; }
h3 { font-size: var(--phi-h3); font-weight: 600; }
p  { margin-bottom: var(--phi-space-lg); }

a {
  color: var(--phi-gold);
  text-decoration: none;
  transition: color var(--phi-duration) var(--phi-ease);
}
a:hover { color: var(--phi-gold-bright); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--phi-bg-card);
  padding: 2px 6px;
  border-radius: 4px;
}

/* The container — a vessel of fixed proportion */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--phi-space-xl);
}

/* Utilities */

/* Sacred labels speak in Cinzel, spaced like recited verse */
.sacred-text {
  font-family: var(--font-sacred);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: var(--phi-caption);
  color: var(--phi-gold-dim);
}

/* Gold radiance — text touched by the sun */
.phi-glow {
  text-shadow:
    0 0 8px  var(--phi-gold-glow),
    0 0 24px var(--phi-gold-glow);
}

/* Entrance is hidden only until observed — then it rests visible */
.reveal-card {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s var(--phi-ease),
    transform 0.6s var(--phi-ease);
}
.reveal-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger — children awaken in golden-ratio succession */
.stagger > :nth-child(1)  { transition-delay: 0.050s; }
.stagger > :nth-child(2)  { transition-delay: 0.081s; }  /* 0.05 × φ⁰·¹ */
.stagger > :nth-child(3)  { transition-delay: 0.130s; }  /* 0.05 × φ⁰·² */
.stagger > :nth-child(4)  { transition-delay: 0.210s; }  /* 0.05 × φ⁰·³ */
.stagger > :nth-child(5)  { transition-delay: 0.340s; }  /* 0.05 × φ⁰·⁴ */
.stagger > :nth-child(6)  { transition-delay: 0.550s; }  /* 0.05 × φ⁰·⁵ */
.stagger > :nth-child(7)  { transition-delay: 0.890s; }  /* 0.05 × φ⁰·⁶ */
.stagger > :nth-child(8)  { transition-delay: 1.440s; }  /* 0.05 × φ⁰·⁷ */
.stagger > :nth-child(9)  { transition-delay: 2.330s; }  /* 0.05 × φ⁰·⁸ */
.stagger > :nth-child(10) { transition-delay: 3.770s; }  /* 0.05 × φ⁰·⁹ */

/* The scrollbar — a thin golden thread through the deep */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--phi-bg-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--phi-gold-dim);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--phi-gold);
}
::-webkit-scrollbar-corner {
  background: var(--phi-bg-deep);
}

/* Stillness honors those who choose it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-card {
    opacity: 1;
    transform: none;
  }
}

/* ── Descent bar (js/descent-bar.js) — all pillars at the bottom of every page ── */
.related-links .descent-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--phi-space-sm) var(--phi-space-lg);
  justify-content: center;
  width: 100%;
}

/* ── Footer balcony (js/footer-balcony.js): email + GitHub + Contact + © ── */
.footer-balcony {
  display: flex;
  flex-wrap: wrap;
  gap: var(--phi-space-sm);
  justify-content: center;
  margin-top: var(--phi-space-lg);
}
.balcony-btn {
  font-family: var(--font-mono);
  font-size: var(--phi-caption);
  color: var(--phi-text-dim);
  text-decoration: none;
  letter-spacing: 0.06em;
  padding: 0.5em 1.2em;
  border: 1px solid var(--phi-stroke);
  border-radius: 999px;
  transition: color 0.3s var(--phi-ease), border-color 0.3s var(--phi-ease), background 0.3s var(--phi-ease);
}
.balcony-btn:hover {
  color: var(--phi-gold);
  border-color: var(--phi-gold-dim);
  background: rgba(212, 168, 67, 0.06);
}
.balcony-btn-gold { color: var(--phi-gold); border-color: var(--phi-gold-dim); }
.footer-copyright {
  font-family: var(--font-mono);
  font-size: var(--phi-caption);
  color: var(--phi-text-dim);
  letter-spacing: 0.08em;
  text-align: right;
  margin-top: var(--phi-space-lg);
  opacity: 0.75;
}

/* ── Ghost tribute corner (Task 26) — a standing tribute, not a sound state ── */
.ghost-tribute {
  position: fixed;
  bottom: var(--phi-space-lg);
  left: var(--phi-space-lg);
  z-index: 500; /* content layer: above ambient/video layers, below the nav (1000) */
  max-width: 340px;
  padding: 0.6em 1.1em;
  background: rgba(10, 10, 15, 0.92);
  border: 1px solid var(--phi-gold-dim);
  border-radius: 10px;
  pointer-events: none;
}
.ghost-tribute-text {
  font-family: var(--font-mono);
  font-size: var(--phi-caption);
  color: var(--phi-text-dim);
  letter-spacing: 0.05em;
  line-height: 1.6;
}
@media (max-width: 768px) { .ghost-tribute { max-width: min(280px, 60vw); left: var(--phi-space-md); bottom: var(--phi-space-md); } }

/* ═══════════════════════════════════════════════════════════
   MOBILE HARDENING — φ ratio holds at every viewport
   (≤768px phones; ≤1024px small tablets inherit their rules)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body {
    max-width: 100vw;
    overflow-x: clip;
  }
  /* Eight Pillars: one column on phones, full width, taller touch targets */
  .grid-5 {
    grid-template-columns: 1fr;
    gap: var(--phi-space-md);
  }
  .hub-card {
    min-height: 0;
    padding: var(--phi-space-md);
  }
  /* Explore the Deep: grid-7 was never defined - give it a real shape */
  .grid-7 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--phi-space-sm);
  }
  .grid-7 > * {
    min-width: 0;
  }
  /* stats strip wraps to two per row */
  .stats-strip {
    gap: var(--phi-space-lg) var(--phi-space-lg);
    padding: var(--phi-space-lg) 0;
  }
  .stat {
    min-width: calc(50% - var(--phi-space-lg));
  }
  .stat-num {
    font-size: 1.6rem;
  }
  /* ascii diagrams + tables scroll inside their boxes, never the page */
  pre, .enc-diagram, table {
    max-width: 100%;
    overflow-x: auto;
  }
  /* nav: wrap rows, keep toggles reachable */
  .site-nav, nav {
    flex-wrap: wrap;
    gap: var(--phi-space-xs);
  }
  .sound-toggle {
    padding: var(--phi-space-xs) var(--phi-space-sm);
    font-size: 0.8rem;
  }
  /* section titles breathe down */
  .section-title {
    font-size: 1.7rem;
    line-height: 1.25;
  }
  /* wide flex rows stack */
  .hero-cta, .explore-row, .enter-row, .cta-row {
    flex-wrap: wrap;
  }
  /* footer balcony stacks buttons full width */
  .footer-balcony .balcony-btn {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL ISOLATION — every scrollable box scrolls alone.
   When you scroll inside a diagram, table or panel, the page
   does not move with it (and vice versa). No more chained bars.
   ═══════════════════════════════════════════════════════════ */
pre, .enc-diagram, table,
.scrollbox, .accordion-body,
.detail-panel, .modal-body, .drawer {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html {
  overscroll-behavior-y: contain;
}
/* inner boxes that are meant to scroll keep their own bar, isolated */
pre, .enc-diagram, .scrollbox {
  overscroll-behavior-x: contain;
}
/* anything that is NOT meant to scroll must never capture the wheel */
.nav, nav, .site-nav, .descent-bar, .footer-balcony, .ghost-tribute,
.sound-toggle, .scroll-progress, .hero-cta {
  overscroll-behavior: none;
  pointer-events: auto;
}