/* ═══════════════════════════════════════════════════════════════════════
   Base: the reset, the type, and the things every page owes a keyboard.
   ═══════════════════════════════════════════════════════════════════════ */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--ink);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--sans);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0;
  color:var(--text);
}

p{margin:0 0 1em;text-wrap:pretty}

a{color:var(--signal-lit);text-decoration-thickness:1px;text-underline-offset:3px}

img,svg{display:block;max-width:100%}
figure{margin:0}

/* Numbers that sit in a column line up. */
.amt{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ── focus ──────────────────────────────────────────────────────────
   The lit blue, offset by three pixels so the ring reads as something
   around the element rather than part of it. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible{
  outline:3px solid var(--signal-lit);
  outline-offset:3px;
  border-radius:2px;
}
:focus:not(:focus-visible){outline:none}

/* ── skip link ──────────────────────────────────────────────────────
   Off screen until a keyboard finds it, and then a real button. */
.skip{
  position:fixed;left:var(--gut);top:12px;z-index:9000;
  transform:translateY(calc(-100% - 24px));
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  background:var(--paper);color:#0c0f11;
  font-family:var(--sans);font-weight:600;font-size:15px;
  text-decoration:none;border-radius:3px;
  transition:transform var(--t) var(--ease);
}
.skip:focus{transform:none}

/* Visually hidden, still read aloud. */
.vh{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* Anything the header can cover when it is jumped to. */
[id]{scroll-margin-top:calc(var(--head-h) + 24px)}

/* ── selection ──────────────────────────────────────────────────────  */
::selection{background:var(--signal);color:#fff}

/* ── scrollbar ──────────────────────────────────────────────────────
   A default light scrollbar on a black page is a bright stripe down one
   edge. color-scheme handles most of it; this finishes the job. */
@supports (scrollbar-color:auto){
  html{scrollbar-color:var(--surface-3) var(--ink);scrollbar-width:thin}
}

/* ── reduced motion ─────────────────────────────────────────────────
   Last word on the subject. The 3D gallery checks this in script too and
   falls back to a plain scrollable row rather than a frozen one. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
}