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

@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; }

  /* Clickability baseline — links already show a pointer, but buttons,
     summaries, role=button elements, and bound labels don't by default.
     Set it once here so every interactive control signals it's clickable
     (the close X, edit pencils, nudge, steppers, accordion rows, etc.)
     without per-component repetition. Disabled controls keep the default
     arrow (their .btn:disabled / [disabled] rules win on specificity). */
  button:not(:disabled):not([disabled]),
  summary,
  label[for],
  [role="button"] {
    cursor: pointer;
  }

  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); }
}