/* ════════════════════════════════════════════════════════════════════
   RUNI BASE — reset and page canvas.

   Lifted verbatim out of runi-parent.css, which is the homepage's
   stylesheet. Nothing here is homepage-specific: it is the box model,
   the margin reset, and the paper canvas every public page stands on.
   Pages used to obtain it by downloading the entire front page.

   Load order: runi-tokens.css → runi-base.css → runi-public-shell.css
   → runi-public-content.css.
   ════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  overflow-x: clip;
  background: var(--rs-paper);
  color: var(--rs-ink);
  font-family: var(--rs-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image: url('/assets/bg-texture.png');
  background-size: 1100px auto;
  background-blend-mode: multiply;
}

/* Element defaults. img's max-width in particular is load-bearing: without
   it, images overflow their grid tracks and collapse page layouts. */
img {
  display: block;
  max-width: 100%;
}

a { color: inherit; }

button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--rs-paper);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--rs-red);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}