@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; overscroll-behavior: none; }
  button { font: inherit; }
  a { color: inherit; }
}

@layer base {
  body {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    color: var(--ink);
    background: var(--desk);
    -webkit-font-smoothing: antialiased;
  }

  a { text-decoration: none; }
  a:hover { text-decoration: underline; }

  h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: var(--weight-medium);
    margin: 0;
    line-height: var(--leading-tight);
    letter-spacing: -0.005em;
  }
  h1 { font-size: 32px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  h4 { font-size: 15px; font-weight: var(--weight-semibold); }
  p  { margin: 0 0 var(--space-3); }
}