@layer reset, base;

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

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); }
  body {
    min-width: 20rem;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
  }
  a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
  a:hover { text-decoration-thickness: 0.12em; }
  button, a { -webkit-tap-highlight-color: transparent; }
  :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 0.35rem; }
  h1, h2, h3 {
    color: var(--color-heading);
    font-weight: 760;
    letter-spacing: -0.035em;
    line-height: 1.08;
  }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }
  p { max-width: 68ch; }
  address { font-style: normal; }
  section[id] { scroll-margin-top: calc(var(--header-height) + 1.25rem); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  }
}