/* Shared page chrome for every public page: resets, the centered .wrap
   layout, the top nav bar, and the small uppercase "kicker" label.
   Load alongside modernist.css so the token-driven colors resolve. */

:root {
  --edge: clamp(20px, 5vw, 72px);
  --wrap: 1200px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; text-wrap: pretty; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--edge); }

/* ── header ─────────────────────────────────────────────────────────────── */
.nav { flex-wrap: wrap; gap: 12px 24px; padding-inline: var(--edge); }
.nav-brand { letter-spacing: -0.03em; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.nav-links a { min-height: 44px; display: flex; align-items: center; }

/* ── kicker ─────────────────────────────────────────────────────────────── */
.kicker {
  display: block; font-size: 13px; line-height: 1.4; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent-700); margin: 0 0 24px;
}

/* ── placeholder pages ──────────────────────────────────────────────────── */
.placeholder { padding-block: clamp(48px, 8vw, 96px); min-height: 50vh; }