/* The layout system. Set the values for THIS world (NOTE.md), then build every section on them. */
:root {
  --bg: #8f87b5; --ink: #f4f0e8; --accent: #f2d98a;
  --sky: #8a82b0; --fog: #a59cc0; --ground: #5b5560; --ground-dk: #3f3a44;
  --paper-ink: #1f1c26; --red: #8e2a26; --lamp: #f2d98a; --blue: #2f4e8e;
  --font-display: "DotGothic16", ui-monospace, monospace;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --container: min(1200px, 100% - 2 * var(--s3));
  --reading: min(680px, 100% - 2 * var(--s3));
  --body: 18px; --label: 16px; --btn-h: 48px;
  --display: clamp(44px, 7vw, 96px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--body)/1.5 var(--font-body); font-synthesis: none; }
img, video { max-width: 100%; display: block; }
button { font: inherit; min-height: var(--btn-h); padding: .5em 1.3em; }
.container { width: var(--container); margin-inline: auto; }
.reading { width: var(--reading); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[data-ca] { overflow-wrap: anywhere; user-select: all; font-variant-numeric: tabular-nums; }
.is-off { opacity: .45; cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}