/* The site's one look (owner, 2026-10-13: quirkyagents and /wizard must read as one site): fonts, colours in light
   and dark, the page frame, links, focus and the header. Every page loads this first, then its own stylesheet
   (home.css, wizard.css), then footer.css and theme.css. */
@font-face { font-family: "Pixelify"; src: url("/fonts/pixelify.4a5633a0c9.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* Pixelify's 8 reads as a 3 and its 5 as an S (owner, 09-30), its C as an O, its B as a G and its Z as a 2 (10-11), so 0-9, B, C and Z come from Jersey 10 (OFL, fonts/OFL-jersey.txt),
   sized to Pixelify's cap height (64 vs 54 units). Declared after Pixelify's own face, so it wins for those. */
@font-face { font-family: "Pixelify"; src: url("/fonts/jersey.c44e76589b.woff2") format("woff2"); font-weight: 400 700; unicode-range: U+0030-0039, U+0042-0043, U+005A; size-adjust: 118.5%; font-display: swap; }
/* Reading text and small labels: Atkinson Hyperlegible Next (OFL, fonts/OFL-atkinson.txt), built so look-alike
   letters stay apart. Pixelify only where it is big: titles and logos (owner, 2026-10-12: small pixel and italic serif read badly). */
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson.18b2a1a39a.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson-italic.4a5037bfaf.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

/* cream, ink, deep indigo and starlight gold. An agent's own little things (counts, badges) wear its mascot's colours instead */
:root { color-scheme: light only; --ink: #231c26; --muted: #6b6258; --line: #e6dccb; --bg: #fbf6ec; --card: #fffdf8; --foot: #f1e8d6;
  --accent: #3b3a8c; --gold: #d9a441; --tint: #eeedf8; --bar: #e3e1f5; --bar-mine: #cdcaf0; --mark: #f6e3b4;
  --pixel: Pixelify, system-ui, sans-serif; --sans: Atkinson, system-ui, sans-serif; --ease: cubic-bezier(.2, .7, .2, 1); }
/* dark (theme.js, only when the visitor picks it): the night sky. Indigo lifted so links read; gold stays gold */
:root[data-theme="dark"] { --ink: #ece6d8; --muted: #a9a2b6; --line: #34304d; --bg: #13121d; --card: #1c1a2b; --foot: #181726;
  --accent: #a5a3f2; --gold: #e2b65a; --tint: #26244a; --bar: #2e2b55; --bar-mine: #423e78; --mark: #5a4718; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* a class that sets display never un-hides */
html { background: var(--bg); overflow-x: clip; }   /* no page scrolls sideways; wide things scroll in their own box */
/* never overflow on body: with html clipping, it would make body its own scroll box and the sticky header would scroll away */
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; position: relative;
  background: var(--bg); color: var(--ink); font: 18px/1.6 var(--sans); }
body > main { flex: 1 0 auto; width: 100%; max-width: 42rem; margin: 0 auto; padding: 0 16px 3rem; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* the header, the same on every page, held at the top of the screen: a mascot's face, still, the section's name, the
   site search, its doors, the light switch. Quirky Agents pages show Shifty; /wizard shows the wizard
   (partials/header.html, partials/wizard-header.html). On a phone the search is the header's second row */
html { scroll-padding-top: 7rem; }   /* a #link lands below the header, not under it */
.site-head { position: sticky; top: 0; z-index: 20; width: 100%; background: var(--bg); border-bottom: 2px solid var(--ink); }
.head-bar { max-width: 42rem; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
.site-home { display: flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font: 600 1.05rem/1 var(--pixel); }
.site-face { height: 30px; width: auto; image-rendering: pixelated; }
.head-bar .search { flex: 1 1 9rem; min-width: 0; }
.site-nav { display: flex; gap: 1.1rem; font: 500 .95rem/1 var(--sans); }
.site-nav a { color: var(--ink); text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; transition: border-color .2s var(--ease); }
.site-nav a:hover, .site-nav a[aria-current] { border-bottom-color: var(--gold); }
.site-head .theme-toggle { width: 36px; height: 36px; }
.site-head .theme-toggle svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .site-nav { margin-left: auto; }
  .head-bar .search { order: 1; flex-basis: 100%; }
}
/* the pixel mascots are outlined in near-black: at night they get a thin moonlit rim instead */
:root[data-theme="dark"] canvas.site-face, :root[data-theme="dark"] canvas.wizard-big, :root[data-theme="dark"] canvas.mascot {
  filter: drop-shadow(1px 0 0 #8784c9) drop-shadow(-1px 0 0 #8784c9) drop-shadow(0 1px 0 #8784c9) drop-shadow(0 -1px 0 #8784c9); }

/* the site's buttons: ink border, a gold shadow, a press that moves them */
.rune, .cast .button { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--gold);
  transition: background-color .2s var(--ease), transform .1s var(--ease), box-shadow .1s var(--ease); }
.rune:active, .cast .button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--gold); }

@media (max-width: 480px) { body { font-size: 17px; } .site-nav { gap: .9rem; } .head-bar { gap: .5rem .8rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; } }