/* css/base.css — reset + base typography.
   Function system: Ftbase (Inter) carries all UI/body text at a tight
   -0.37px tracking (the system's signature — most sans tightens at small
   sizes, this one stays tight even at display sizes); Financier Display
   (Alegreya) is reserved for h1/h2 "editorial moment" headlines only — h3
   and smaller stay in Ftbase per the system's own hierarchy rule. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.37px;
  -webkit-font-smoothing: antialiased;
}
h1, h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.1;
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.8rem); }
/* h3 stays in Ftbase, not Financier — the system reserves its serif for
   hero/section headline "moments" (one per section); h3 is a functional
   subheading, styled like the "Featured Section Header" component. */
h3 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}
h3 { font-size: clamp(1.1rem, 2.2vw, 1.4rem); }
/* The one-italic-word accent is the system's signature move (roman +
   italic in the same headline) — applied via <em> in the copy itself. */
h1 em, h2 em { font-style: italic; font-weight: 400; }
p { margin: 0 0 var(--space-2); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}
.section {
  padding: var(--space-5) 0;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}