/* All reset rules live inside the `base` layer so they cascade BELOW
   the layered rules in main.css. Without this, the universal
   `* { margin: 0 }` rule was an unlayered declaration that outranked
   `.wrap { margin-inline: auto }` (which sits inside @layer layout),
   keeping every .wrap stuck to the left edge of the viewport. */
@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
    min-height: 100vh;
    overflow-x: hidden;
  }

  img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: var(--ink);
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  :focus-visible {
    outline: 2px solid var(--moss);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection { background: var(--ink); color: var(--paper); }
}