/* Tokens. Every colour, size and space the site uses is named here and nowhere else. DESIGN-truemage section 3.
   One trap: clamp() needs spaces around + and - inside it. Unspaced, the whole declaration is invalid and the type silently
   falls back to 16px. bin/check-site.mjs fails the build on an unspaced clamp. */
@font-face{font-family:Oswald;font-weight:200 700;font-style:normal;font-display:swap;src:url(/fonts/oswald-latin.woff2?v=571f3457) format("woff2")}
@font-face{font-family:Lora;font-weight:400 700;font-style:normal;font-display:swap;src:url(/fonts/lora-v37-0QIvMX1D_JOuMwr7Iw.woff2?v=ddb8c660) format("woff2")}
@font-face{font-family:Lora;font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/lora-v37-0QI8MX1D_JOuMw_hLdO6T2wV9KnW-MoFoq92nA.woff2?v=723cc14f) format("woff2")}
@font-face{font-family:"Space Mono";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/spacemono-v17-i7dMIFZifjKcF5UAWdDRaPpZUFWaHg.woff2?v=2d46bd15) format("woff2")}
/* Local fallbacks sized to the real faces, so the swap does not move the title or reflow the sheet. Measured in Chromium against
   metric-compatible faces: Oswald 700 caps run 0.782 of Arial's width; Lora 400 prose runs 1.155 of Times New Roman's. The ascent and
   descent overrides are the real face's hhea metrics (Oswald 1193 and 289, Lora 1006 and 274, per 1000) divided by the size-adjust. */
@font-face{font-family:"Oswald Fallback";src:local("Arial"),local("Arimo"),local("Liberation Sans");size-adjust:78%;ascent-override:153%;descent-override:37%;line-gap-override:0%}
@font-face{font-family:"Lora Fallback";src:local("Times New Roman"),local("Tinos"),local("Liberation Serif");size-adjust:115.5%;ascent-override:87.1%;descent-override:23.7%;line-gap-override:0%}

:root{
  --art-black:#000; --void:#0c0a08; --void-2:#080605; --panel:#15110b; --panel-2:#1c1710;
  --bone:#efe6d4; --bone-dim:#d2c9b6; --ash:#a39a86;
  --crimson:#e11d2a; --crimson-2:#ff3a47; --violet:#9a7bff; --gold:#cdb64a; --cream:#e3d6b4;
  --line:#756b58; --rule-d:#2b251c;
  --status-ink:#7a1119; --cream-label:#5a5140; --cream-line:#b9ab86; --cream-ink:#16120d; --chalk:#efe6d4;
  /* the sheet: the page the prose sits on. It follows the theme, so in the dark theme it is dark paper */
  --paper:#100d0a; --ink:#e9e0cf; --muted:#a59c8a; --read-accent:#ff6b73; --line-paper:#756b58; --dot:rgba(233,224,207,.09);

  color-scheme:dark; --mark-f:none;

  --disp:Oswald,"Oswald Fallback","Arial Narrow",system-ui,sans-serif;
  --serif:Lora,"Lora Fallback",Charter,Georgia,serif;
  --mono:"Space Mono","Courier New",ui-monospace,monospace;

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;
  --pad-x:clamp(1rem, .6rem + 1.4vw, 1.625rem);
  --div-y:clamp(1.5rem, 1rem + 1.6vw, 2.25rem);

  /* the readability floor: a fixed token, never fed to a clamp, never smaller */
  --fs-micro:.72rem;
  --fs-meta:clamp(.8rem, .76rem + .2vw, .875rem);
  --fs-ui:1rem;
  --fs-read:clamp(1.125rem, 1rem + .55vw, 1.3125rem);
  --fs-lede:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-h3:clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-h2:clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --fs-h1:clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --fs-shout:clamp(2.25rem, 10vw, 3rem);

  --measure:38rem; --grid-max:72rem; --sheet:44rem; --rail:20rem; --mast-h:56px;
  --fast:150ms; --base:240ms; --slow:600ms; --ease:cubic-bezier(.16, 1, .3, 1);
}
@media (min-width:48rem){:root{--fs-shout:clamp(2.75rem, 5vw, 4rem)}}
@media (min-width:1500px){:root{--grid-max:90rem}}
@media (min-width:1900px){:root{--grid-max:104rem}}
/* Two themes. :root above is the dark one (the original look). The light one is written twice, because CSS has no way to say
   "this block, or that block": once for a visitor who chose it (data-theme, set by js/now.js before paint and by the mast button),
   once for a visitor whose system asks for light and who has not chosen. bin/check-site.mjs fails the build if the two copies differ. */
:root[data-theme=light]{color-scheme:light;--mark-f:brightness(0);--void:#f3ecdd; --void-2:#ece4d2; --panel:#ece4d2; --panel-2:#e4dac4; --bone:#16120d; --bone-dim:#3e372b; --ash:#5d5445; --crimson-2:#b81620; --violet:#5a3fd0; --gold:#6b5c10; --line:#857a64; --rule-d:#c9bea4; --paper:#f3ecdd; --ink:#16120d; --muted:#6e6557; --read-accent:#b81620; --line-paper:#8a7f6a; --dot:rgba(22,18,13,.1)}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){color-scheme:light;--mark-f:brightness(0);--void:#f3ecdd; --void-2:#ece4d2; --panel:#ece4d2; --panel-2:#e4dac4; --bone:#16120d; --bone-dim:#3e372b; --ash:#5d5445; --crimson-2:#b81620; --violet:#5a3fd0; --gold:#6b5c10; --line:#857a64; --rule-d:#c9bea4; --paper:#f3ecdd; --ink:#16120d; --muted:#6e6557; --read-accent:#b81620; --line-paper:#8a7f6a; --dot:rgba(22,18,13,.1)}}
/* The art is dark in both themes. Anything sitting on art-black re-pins the dark values for itself, so ink never lands on black.
   bin/check-site.mjs fails the build if these values drift from :root. */
.stage,.ehero,.plate{--void:#0c0a08; --void-2:#080605; --panel:#15110b; --panel-2:#1c1710; --bone:#efe6d4; --bone-dim:#d2c9b6; --ash:#a39a86; --crimson-2:#ff3a47; --violet:#9a7bff; --gold:#cdb64a; --line:#756b58; --rule-d:#2b251c; color:var(--bone); color-scheme:dark}
/* higher specificity than the theme blocks, so the system's ask for more contrast beats both */
@media (prefers-contrast:more){:root:root:root{--ash:var(--bone-dim); --muted:var(--ink)}}