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

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* --clay on --cream is 3.84:1 — fails the 4.5:1 normal text needs on hover.
   --brass-deep clears 4.52:1 on --cream. */
a:hover { color: var(--brass-deep); }

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

/*
 * Double-ring focus indicator: a cream inner ring against the element edge
 * and a navy outer ring beyond it. --clay alone only clears 3:1 against
 * light grounds (3.84:1 on --cream) but fails against --navy (2.93:1), and
 * the header/footer/nav are navy. Pairing --cream (11.27:1 on navy) with
 * --navy (11.27:1 on cream) guarantees at least one ring clears 3:1 against
 * whatever sits behind the focused control.
 */
:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 0;
  box-shadow: 0 0 0 5px var(--navy);
}

.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.stack > * + * { margin-top: var(--space-5); }
.label {
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}