body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 { line-height: 1.1; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); line-height: 1.25; }
p { text-wrap: pretty; }
.lead { color: var(--muted); font-size: var(--t-lg); max-width: 58ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 0.86em; }
::selection { background: var(--cobalt); color: #fff; }

/* Brand display face: light, expanded capitals, as on the main site. */
.display { font-family: var(--display); font-stretch: 125%; font-weight: 300; text-transform: uppercase; letter-spacing: -0.012em; line-height: 1.02; }
.outline { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--paper) 62%, transparent); }
.label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hash { display: inline-block; padding: 3px 6px; border: 1px solid var(--border-strong); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--text); }

.container { width: min(1520px, 100% - 2 * var(--pad)); margin-inline: auto; }

:focus-visible { outline: 1.5px solid var(--cobalt-soft); outline-offset: 3px; border-radius: 2px; }
[data-theme='light'] :focus-visible { outline-color: var(--accent-ink); }
main:focus { outline: none; }
/* Clip at the screen edge, so full-bleed backgrounds reach it and decoration never adds sideways scroll. */
#main { overflow-x: clip; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 14px; background: var(--card); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.spacer { flex: 1; }

/* Shown by js/boot-check.js when the site's scripts cannot run. */
.boot-error { display: grid; gap: var(--s4); justify-items: start; width: min(640px, 100% - 2 * var(--s5)); margin: var(--s8) auto; }
.boot-error p { color: var(--muted); }
.boot-error code { padding: var(--s3) var(--s4); background: var(--card); border: 1px solid var(--border-strong); font-family: var(--mono); font-size: var(--t-sm); }