/* ============================================================
   Apollo — 10 base (typography, layout primitives, motion base)
   ============================================================ */

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
  overflow-x: hidden;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem); line-height: 0.98; }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); line-height: 1.06; }
h4 { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); line-height: 1.15; }

p { text-wrap: pretty; }
.word { display: inline-block; }
strong, b { font-weight: 600; color: var(--ink); }

.lead {
  font-size: clamp(1.1rem, 1.02rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--text);
  max-width: 40ch;
  text-wrap: pretty;
}

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
/* On phones 9vw collapses --section-y to its 72px floor, which reads cramped.
   Give sections a touch more breathing room (84px) without touching desktop. */
@media (max-width: 560px) { :root { --section-y: clamp(84px, 14vw, 104px); } }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.prose { max-width: var(--maxw-prose); }

/* A single, deliberate kicker system (used sparingly, NOT above every section). */
.kicker {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: none;
}
.kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}

.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }

/* ---------- Motion base ---------- */
[data-reveal] { opacity: 1; } /* visible by default; JS enhances, never gates */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: var(--z-toast);
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: var(--r-sm);
  transform: translateY(-150%); transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }