/* base.css - reset + the page wrapper.

   The page is normal document flow. It used to be a fixed artboard that JS
   scaled with transform: scale(), which meant every height had to be measured
   and every top written by script; anything measured before fonts or images
   settled overlapped whatever came after it. The browser does that work now. */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: none;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--f-sans);

  /* grid over the accent band, both over the black foundation */
  background-color: var(--c-surface);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--gradient-page);
  background-size:
    var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size),
    auto;
  background-repeat: repeat, repeat, no-repeat;
}

/* --- page wrapper --------------------------------------------------------
   Full width, capped at the 1440 design width and centred. No transform, no
   scripted height: the wrapper is as tall as its content, so the footer can
   never be clipped or painted over. */
.viewport {
  position: relative;
  width: 100%;
  overflow: visible;
}

.canvas {
  position: static;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  height: auto;
  transform: none;
}

/* .abs is a leftover hook from the artboard build. Page structure is in flow
   now, so it carries no positioning. The overlays that genuinely need to be
   absolute (skip link, text-size panel, hyena panel, hero image and fade)
   declare it on their own class. */
.abs { position: static; }

/* --- accessibility furniture ------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  z-index: 99;
  background: var(--c-accent); color: var(--c-accent-ink);
  padding: 10px 16px; border-radius: 4px; text-decoration: none;
}
.skip:focus { left: 8px; top: 8px; }

:where(a, button):focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}