/* Reset + base typography + layout primitives.
   Loaded after tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 450;
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Defensive: prevent any wide child from causing horizontal scroll on mobile.
     `clip` is preferable to `hidden` — doesn't create a new scroll context. */
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* Display type — apply Fraunces with axis variation */
.font-display,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  line-height: var(--lh-display);
}

h1 { font-size: var(--fs-display-xl); }
h2 { font-size: var(--fs-display-lg); }
h3 { font-size: var(--fs-display-sm); }
h4 { font-size: var(--fs-display-xs); }

p { line-height: var(--lh-body); }

/* Layout primitives */

.container {
  width: 100%;
  /* Outer max = content max (1328) + 2 × page gutter (56). Effective content
     area = --container-max. Aligns with site-header__inner / site-footer__inner
     which use max-width: var(--container-max) inside a parent with the same
     56px gutter padding. */
  max-width: calc(var(--container-max) + 2 * var(--page-pad-x));
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
}

.section {
  padding-block: var(--space-9);
}

.section--tight { padding-block: var(--space-8); }
.section--flush {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* Visually hidden — accessible labels */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Utility — flow */
.stack > * + * { margin-top: var(--stack, var(--space-4)); }
.stack-2 { --stack: var(--space-2); }
.stack-3 { --stack: var(--space-3); }
.stack-4 { --stack: var(--space-4); }
.stack-5 { --stack: var(--space-5); }
.stack-6 { --stack: var(--space-6); }