/* To Scale: the design tokens. Everything is drawn to scale on graph paper, so the site is paper,
   ink, and a red index mark. Anybody for sizes and names, its width following size; Newsreader to read. */
:root {
  --d-font-display: "Anybody", ui-sans-serif, system-ui, sans-serif;
  --d-font-text: "Newsreader", "Iowan Old Style", Georgia, serif;
  --d-font-ui: "Anybody", ui-sans-serif, system-ui, sans-serif;
  --d-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --d-step--2: 0.75rem;
  --d-step--1: 0.875rem;
  --d-step-0: 1.125rem;
  --d-step-1: 1.3125rem;
  --d-step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --d-step-3: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  --d-step-4: clamp(2.5rem, 1.6rem + 5vw, 5.5rem);
  --d-step-5: clamp(3rem, 1.8rem + 8vw, 8rem);
  --d-leading-display: 0.98;
  --d-leading-text: 1.55;
  --d-tracking-label: 0.09em;
  --d-space-1: 4px;
  --d-space-2: 8px;
  --d-space-3: 12px;
  --d-space-4: 16px;
  --d-space-5: 24px;
  --d-space-6: 32px;
  --d-space-7: 48px;
  --d-space-8: 72px;
  --d-space-9: 112px;
  --d-gutter: clamp(16px, 4vw, 48px);
  --d-measure: 36rem;
  --d-radius-s: 3px;
  --d-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --d-dur-fast: 140ms;
  --d-dur: 280ms;
  --d-dur-slow: 640ms;
  --d-bg: #f4ecdc;
  --d-bg-2: #ebe2cf;
  --d-surface: #fbf7ee;
  --d-ink: #15141b;
  --d-ink-2: #2e2c35;
  --d-muted: #5f5a52;
  --d-line: rgba(21, 20, 27, 0.13);
  --d-line-strong: rgba(21, 20, 27, 0.34);
  --d-grid: rgba(21, 20, 27, 0.07);
  --d-accent: #e0301f;
  --d-accent-ink: #fff8f0;
  --d-mark: #ff3d2e;
  --d-focus: #e0301f;
  --d-stage-1: #fbf7ee;
  --d-stage-2: #e6dcc6;
  --d-night-1: #1d1a2b;
  --d-night-2: #0a0912;
  --d-night-ink: #f4efe6;
  --d-night-ink-2: #cfc8bb;
  --d-shadow: 0 1px 0 rgba(21, 20, 27, 0.06), 0 14px 34px -18px rgba(21, 20, 27, 0.4);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --d-bg: #14151b; --d-bg-2: #1b1c24; --d-surface: #1e1f28; --d-ink: #f1ece2; --d-ink-2: #d8d1c4; --d-muted: #a49d91;
    --d-line: rgba(241, 236, 226, 0.12); --d-line-strong: rgba(241, 236, 226, 0.32); --d-grid: rgba(241, 236, 226, 0.06);
    --d-accent: #ff5a46; --d-accent-ink: #14151b; --d-focus: #ff5a46; --d-stage-1: #262735; --d-stage-2: #0d0e14;
    --d-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 16px 40px -20px rgba(0, 0, 0, 0.85); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --d-bg: #14151b; --d-bg-2: #1b1c24; --d-surface: #1e1f28; --d-ink: #f1ece2; --d-ink-2: #d8d1c4; --d-muted: #a49d91;
  --d-line: rgba(241, 236, 226, 0.12); --d-line-strong: rgba(241, 236, 226, 0.32); --d-grid: rgba(241, 236, 226, 0.06);
  --d-accent: #ff5a46; --d-accent-ink: #14151b; --d-focus: #ff5a46; --d-stage-1: #262735; --d-stage-2: #0d0e14;
  --d-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 16px 40px -20px rgba(0, 0, 0, 0.85); color-scheme: dark;
}


/* Anybody (OFL), whose width runs from 50% to 150%, so a number can widen as the thing grows;
   Newsreader (OFL), with optical sizes, for reading. Self-hosted from public/fonts/. */
@font-face { font-family: "Anybody"; src: url("/fonts/anybody-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic-var.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

/* The header and the footer: a drafting sheet's border, with the title block at the bottom. */
html { background: var(--d-bg); color: var(--d-ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--d-font-text); font-size: var(--d-step-0); line-height: var(--d-leading-text); background: var(--d-bg); background-image: linear-gradient(var(--d-grid) 1px, transparent 1px), linear-gradient(90deg, var(--d-grid) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip; }
body > main { flex: 1 0 auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--d-focus); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 12px; background: var(--d-ink); color: var(--d-bg); font-family: var(--d-font-ui); }
.skip:focus { top: 12px; }
.site-head { position: relative; z-index: 20; display: flex; align-items: center; gap: 2px; padding: 10px max(10px, calc(var(--d-gutter) - 6px)) 10px; padding-top: calc(10px + env(safe-area-inset-top)); font-family: var(--d-font-ui); }
.brand { display: inline-flex; align-items: baseline; gap: 6px; margin-right: auto; text-decoration: none; font-weight: 800; font-size: 19px; font-stretch: 112%; letter-spacing: -0.01em; min-height: 40px; align-items: center; }
.brand .logo { display: none; }
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a, .site-menu summary, .mode { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 8px; box-sizing: border-box; font-size: 14px; font-weight: 600; font-stretch: 92%; text-decoration: none; border-radius: 3px; cursor: pointer; color: inherit; }
.site-nav a:hover, .site-menu summary:hover, .mode:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.site-nav .wide { display: none; }
@media (min-width: 900px) { .site-nav .wide { display: inline-flex; } .site-menu { display: none; } }
.site-nav .icon-link svg, .mode svg { width: 19px; height: 19px; }
.site-nav-go { background: var(--d-ink); color: var(--d-bg) !important; padding: 0 12px !important; margin-left: 4px; }
.past-world .site-head { background: var(--d-bg); border-bottom: 1px solid var(--d-line); }
.is-home .site-nav-go { background: var(--plate, var(--d-ink)); color: var(--plate-ink, var(--d-bg)) !important; }
.site-nav-go:hover { background: var(--d-accent) !important; color: var(--d-accent-ink) !important; }
.mode { all: unset; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; padding: 0 8px; box-sizing: border-box; border-radius: 3px; cursor: pointer; font: 600 13px/1 var(--d-font-ui); font-stretch: 90%; }
.mode .mode-word { display: none; }
@media (min-width: 560px) { .mode .mode-word { display: inline; } }
.mode:focus-visible { outline: 2px solid var(--d-focus); }
.site-menu { position: relative; }
.site-menu summary { list-style: none; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; display: grid; padding: 6px; background: var(--d-surface); color: var(--d-ink); border: 1px solid var(--d-line-strong); border-radius: 3px; box-shadow: var(--d-shadow); }
.site-menu-panel a { justify-content: flex-start; padding: 0 12px; }
.is-home .site-head { position: fixed; left: 0; right: 0; top: 0; color: var(--w-ink, var(--d-ink)); transition: color 0.3s; }
.site-foot { margin-top: var(--d-space-8); border-top: 1.5px solid var(--d-ink); background: var(--d-bg); font-family: var(--d-font-ui); font-size: 15px; }
.foot-inner { max-width: 1200px; margin: 0 auto; padding: var(--d-space-6) var(--d-gutter) calc(var(--d-space-5) + env(safe-area-inset-bottom)); display: grid; gap: var(--d-space-5); }
.foot-brand { margin: 0; font-weight: 800; font-size: 26px; font-stretch: 130%; letter-spacing: -0.01em; }
.foot-brand small { display: block; font-size: 13px; font-weight: 500; font-stretch: 90%; color: var(--d-muted); letter-spacing: 0; margin-top: 2px; }
.foot-inner nav { display: flex; flex-wrap: wrap; gap: 2px 18px; font-weight: 600; font-stretch: 92%; }
.foot-inner nav a { text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.foot-inner nav a:hover { text-decoration: underline; text-decoration-color: var(--d-accent); text-underline-offset: 4px; }
.fine { margin: 0; color: var(--d-muted); font-size: 13px; font-stretch: 92%; }
@media (min-width: 900px) { .foot-inner { grid-template-columns: 1fr auto auto; align-items: start; } .foot-inner .fine, .foot-inner .site-credit { grid-column: 1 / -1; } }
.site-credit { --credit-ink: var(--d-ink); --credit-muted: var(--d-muted); --credit-line: var(--d-line-strong); --credit-accent: var(--d-accent); --credit-heart: var(--d-accent); --credit-hover: color-mix(in srgb, var(--d-ink) 7%, transparent); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: var(--d-space-4); border-top: 1px solid var(--d-line); }
.site-credit-made { margin: 0; color: var(--credit-ink); font-weight: 700; font-stretch: 100%; }
.site-credit-made a { color: inherit; text-decoration: underline; text-decoration-color: var(--credit-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.site-credit-social { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-credit-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 3px; color: var(--credit-muted); transition: color 0.15s ease, background-color 0.15s ease; }
.site-credit-social a:hover { color: var(--credit-ink); background: var(--credit-hover); }
.site-credit-social svg { width: 19px; height: 19px; }
.site-credit-sponsor { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 40px; padding: 0 14px; border: 1px solid var(--credit-line); border-radius: 3px; color: var(--credit-ink); font-weight: 700; font-stretch: 96%; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; }
.site-credit-sponsor:hover { background: var(--credit-hover); border-color: var(--credit-muted); }
.site-credit-sponsor svg { width: 16px; height: 16px; color: var(--credit-heart); }
@media (max-width: 520px) { .site-credit-sponsor { margin-left: 0; } }
/* Going from page to page fades, where the browser can, so a thing's page opens on the same picture. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }