/* Base: reset, typography and focus (025 Stijlboek, chapters 3 and 8). */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 12px/1.4 var(--f-ui);
  font-variant-numeric: tabular-nums;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
/* Calm interface (025 Stijlboek, 1): links without underline, underlined
   only on hover and keyboard focus; links in written text keep it. */
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
.rt a { text-decoration: underline; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[hidden] { display: none !important; }
.mono { font-family: var(--f-mono); font-size: 11px; }
.hint { font-size: 11px; color: var(--fg-3); }
svg.i {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }