@layer reset, base;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
  img { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }
}

@layer base {
  body {
    min-width: 0;
    overflow-wrap: break-word;
    color: var(--color-ink-950);
    background: var(--color-warm-50);
    font-family: var(--font-body);
    line-height: 1.6;
  }
  body.nav-open { overflow: hidden; }
  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.08;
    text-wrap: balance;
  }
  h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
  h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
  h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
  a { color: inherit; }
  :focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
    box-shadow: var(--focus);
  }
  .container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
  .container--wide { width: min(calc(100% - 2rem), var(--container-wide)); margin-inline: auto; }
  .section { padding-block: clamp(4rem, 9vw, 7.5rem); }
  .eyebrow {
    color: var(--color-teal-600);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .skip-link {
    position: fixed;
    z-index: 999;
    top: .75rem;
    left: .75rem;
    transform: translateY(-160%);
    padding: .75rem 1rem;
    color: var(--color-white);
    background: var(--color-ink-950);
  }
  .skip-link:focus { transform: none; }
  .draft-banner {
    padding: .75rem 1rem;
    color: var(--color-white);
    background: var(--color-warning);
    font-weight: 700;
    text-align: center;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
    }
  }
  @media (forced-colors: active) {
    :focus-visible {
      outline: 3px solid Highlight;
      outline-offset: 3px;
      box-shadow: none;
    }
  }
}
