@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(body, h1, h2, h3, p, figure, ul, ol) { margin: 0; padding: 0; }
  :where(ul) { list-style: none; }
  /* height:auto matters as much as max-width. The width and height attributes
     on <img> are presentational hints, so constraining only the width leaves
     the height pinned and the picture squashes sideways once the viewport is
     narrower than the file. */
  :where(img, svg, video) { display: block; max-width: 100%; height: auto; }
  /* The hidden attribute is only a default display:none, so any later rule
     setting display beats it. This makes it mean what it says. */
  [hidden] { display: none !important; }
  :where(a) { color: inherit; text-decoration: none; }
  :where(button) { font: inherit; color: inherit; background: none; border: 0; }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;   /* safety net; the nav fix above is the actual cure */
  }

  body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
  }

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

  .skip {
    position: absolute; left: -9999px;
    background: var(--accent); color: var(--sf-chalk);
    padding: .75rem 1rem; z-index: 99;
  }
  .skip:focus { left: 1rem; top: 1rem; }

  /* Visually hidden but read aloud — the h1 the homepage needs for search
     without putting a headline over the panels. */
  .vh {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  .prose { max-width: var(--measure); }
  .prose p + p { margin-top: 1em; }

  .section__h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    letter-spacing: var(--display-tracking);
    margin-bottom: 1.5rem;
  }

  .empty { color: var(--ink-quiet); }
}