:root {
  --bg: #f6f1ea;
  --surface: #ffffff;
  --text: #221c19;
  --muted: #6a605a;
  --border: rgba(80, 55, 40, 0.14);
  --accent: #a4572f;

  /* The hero is always underground, in both themes */
  --rock: #1a1411;
  --rock-2: #2b211c;
  --lamp: #ffe7b0;
  --angel: #cfe3ff;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131010;
    --surface: #1c1716;
    --text: #efe8e2;
    --muted: #b0a59d;
    --border: rgba(255, 231, 176, 0.12);
    --accent: #e3a172;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--sans);
}

a { color: var(--accent); }

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Hero: a cavern ---------- */

.hero {
  --lx: 50%;
  --ly: 45%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: min(90vh, 780px);
  display: flex;
  align-items: center;
  padding: 150px 0 140px;
  text-align: center;
  color: #fff;
  /* Layered rock texture */
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(120, 90, 70, 0.25), transparent 70%),
    radial-gradient(ellipse 50% 35% at 80% 60%, rgba(110, 80, 60, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 55% 85%, rgba(90, 70, 55, 0.25), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, var(--rock-2), var(--rock));
}

/* Light falling from a crack above */
.skylight {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 50%;
  width: min(70vw, 620px);
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(207, 227, 255, 0.35), rgba(207, 227, 255, 0.08) 60%, transparent 90%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  filter: blur(10px);
  animation: breathe 7s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Dust drifting in the light (created by main.js) */
.motes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mote {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--angel);
  box-shadow: 0 0 6px var(--angel);
  animation: rise linear infinite;
}

@keyframes rise {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.6; }
  100% { transform: translate(24px, -90vh); opacity: 0; }
}

/* Headlamp: a warm pool of light, with darkness everywhere else */
.headlamp {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle 260px at var(--lx) var(--ly),
    rgba(255, 231, 176, 0.14) 0%,
    rgba(255, 231, 176, 0.05) 45%,
    rgba(8, 6, 5, 0.55) 100%);
  transition: background 0.05s linear;
}

.stalactites,
.floor {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;
}
.stalactites { top: 0; height: 140px; }
.floor { bottom: 0; height: 120px; }

.hero-inner { position: relative; z-index: 3; display: grid; justify-items: center; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lamp);
  opacity: 0.85;
}

.title {
  /* background-clip: text only paints glyphs inside this box, so pad it
     below the baseline or descenders (p, g, y…) render transparent. The
     negative margin cancels the padding so the layout doesn't shift. */
  padding-bottom: 0.2em;
  margin: 0 0 -0.2em;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(3.2rem, 12vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #fff 30%, var(--lamp) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(207, 227, 255, 0.35));
}

.lede {
  margin: 18px 0 26px;
  max-width: 40ch;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
}
.lede em { color: var(--angel); font-style: italic; }

.pill {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lamp);
  border: 1px solid rgba(255, 231, 176, 0.45);
  background: rgba(255, 231, 176, 0.08);
}

/* ---------- Chapters ---------- */

main { padding: 72px 16px 56px; }

main h2 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.5vw, 2.5rem);
  color: var(--accent);
}

.section-lede { margin: 0 0 28px; color: var(--muted); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.card {
  padding: 22px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(80, 55, 40, 0.18);
}
.card .icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 50%;
  font-size: 1.3rem;
  background: rgba(164, 87, 47, 0.14);
}
.card h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; }
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }

footer {
  padding: 24px 16px 40px;
  color: var(--muted);
  font-size: 0.875rem;
  border-top: 1px solid var(--border);
}

/* ---------- Entrance animation ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: calc(var(--i, 0) * 100ms);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- 404 page ---------- */

.hero.compact { min-height: 100vh; }
.cta {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  color: var(--rock);
  font-weight: 600;
  text-decoration: none;
  background: var(--lamp);
  box-shadow: 0 0 24px rgba(255, 231, 176, 0.35);
}
.cta:hover, .cta:focus-visible { background: #fff; outline: none; }

/* ---------- Respect reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .motes { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}