/* ============================================================
   base.css — Foundation layer
   ------------------------------------------------------------
   Goal: set the page's baseline — the box-model reset, default
   element appearance (body / a / img), the fluid heading type
   scale, and the generic layout helper classes the markup
   composes (.container, .center, .lede …).

   Contains: reset, base elements, layout helpers, type scale,
   and the responsive rules for .container (each media query is
   kept next to the rule it modifies so this file is self-contained).

   Depends on: tokens.css (loads after it, before components.css).
   ============================================================ */

/* ─── reset & base elements ─── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-cereal);
  font-size: 16px;
  line-height: 1.45;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ─── layout helpers ─── */
.container { max-width: 1200px; margin: 0 auto; padding: 96px 80px; }
.container-narrow { max-width: 780px; }
.center { text-align: center; }
.center-row { justify-content: center; }
.center-lede { margin-left: auto; margin-right: auto; }

.lede {
  color: var(--color-ink-secondary);
  font-size: 18px; line-height: 24px;
  max-width: 60ch; margin-bottom: 40px; font-weight: 400;
}

/* ─── type scale (Cereal — medium weights, tight tracking) ─── */
h1, h2, h3, h4 { color: var(--color-ink); }
h1 {
  font-size: clamp(32px, 5vw, 48px); line-height: 1.08;
  font-weight: 700; letter-spacing: -0.01em; margin-bottom: 16px;
}
h2 {
  font-size: clamp(26px, 3.6vw, 32px); line-height: 1.13;
  font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px;
}
h3 { font-size: 22px; line-height: 26px; font-weight: 600; margin-bottom: 8px; }
h4 { font-size: 16px; line-height: 20px; font-weight: 600; margin-bottom: 6px; }

/* ─── responsive — .container padding ─── */
@media (max-width: 1128px) {
  .container { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 744px) {
  .container { padding: 64px 24px; }
}