/* 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, das.css), then footer.css and theme.css. Dead Agents Society keeps its parchment inside
   the frame: das.css redefines some of these colours for its own pages. */
@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; } }