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

/* ---- The whole layout scales up past a 1920x960 viewport ----
   Every size on the site tops out in rem -- the type clamps, the spacing
   tokens, the content measures and the rail -- so the root font size is the
   one number that grows all of it together. At 16px it is the layout that
   was tuned and verified; on a 1440p or 4K screen it used to stop there and
   leave the composition floating in the middle of the window.

   Scaled by whichever of the two axes runs out first, measured against a
   1920x960 viewport (a 1080p monitor less the browser chrome): 16/1920 is
   0.8333vw and 16/960 is 1.6667vh. Scaling on width alone would grow a
   wide-and-short window's content past a fold the paging deck cannot
   scroll to. Floored at 100%, so nothing at or below 1080p changes and a
   reader's own default font size is still honoured; capped at 2x, which a
   4K screen at 100% OS scaling reaches.

   Not CSS `zoom`, which was tried: Chrome multiplies `vh` inside a zoomed
   root too, so a 100vh section drew 1733px tall on a 1300px screen. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: clamp(100%, min(0.8333vw, 1.6667vh), 200%);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
}

a {
  color: inherit;
}

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

button {
  font-family: inherit;
}

/* Visible focus state for keyboard users (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

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

/* Parked above the viewport by its OWN height, not a fixed offset. It was
   `top: -48px`, which cleared a link sized at the 16px root -- and once the
   root scaled up on a large screen (the `html` rule above) the link grew past
   48px and its bottom edge showed as a gold sliver over the sidebar logo. */
.skip-link {
  position: absolute;
  top: 0;
  left: var(--space-3);
  background: var(--accent);
  color: var(--text-on-accent);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transform: translateY(calc(-100% - 4px));
  transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  transform: translateY(var(--space-3));
}


/* ---- WITH JAVASCRIPT OFF ----
   The deck cannot draw itself, so index.html's <noscript> is the whole page.
   It is styled here rather than inline so it inherits the theme's surfaces
   and type like anything else -- a visitor with script off should still land
   on the site, not on a browser default.

   No fixed nav is showing in this state, so it centres in the viewport. */
.noscript {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

.noscript h1 {
  font-size: var(--fs-h2);
  line-height: 1.15;
}

.noscript ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.noscript a {
  color: var(--accent);
}