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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--font-ui);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--text-link-hover); }
a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

p { font: var(--font-body); margin: 0 0 var(--s-4); }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); }
h1 { font: var(--font-h1); letter-spacing: var(--t-h1-ls); }
h2 { font: var(--font-h2); letter-spacing: var(--t-h2-ls); }
h3 { font: var(--font-h3); letter-spacing: var(--t-h3-ls); text-transform: uppercase; }

/* Utility type classes — the named scale, applied. */
.cs-display { font: var(--font-display); letter-spacing: var(--t-display-ls); }
.cs-section { font: var(--font-section); letter-spacing: var(--t-section-ls); }
.cs-body { font: var(--font-body); }
.cs-ui { font: var(--font-ui); letter-spacing: var(--t-ui-ls); }
.cs-data { font: var(--font-data); font-variant-numeric: tabular-nums; }
.cs-label { font: var(--font-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--text-muted); }
.cs-eyebrow { font: var(--font-eyebrow); letter-spacing: var(--t-eyebrow-ls); text-transform: uppercase; color: var(--pillar-type); }