/* book.css - the companion's one stylesheet: the web book and the print edition.
   DESIGN.md is the reference. Two registers in one book:
     .mode-grimoire  the illuminated grimoire (story, lore, characters): vellum, iron-gall ink, red rubrics, gold
     .mode-guide     the strategy guide (systems, bosses, walkthrough): an iron page, hard black frames, chunky caps
   Every colour is one of the game's 32 (src/core.js PAL_LIST). No other colour may be added: the book keeps the
   game's palette rule. Ornaments are CSS and inline SVG only. Fonts are self-hosted, SIL OFL 1.1 (assets/fonts/). */

/* ---- type ------------------------------------------------------------------------------------------------------ */
@font-face { font-family: "Jacquard 24"; src: url(../fonts/jacquard-24-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(../fonts/pixelify-sans-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(../fonts/eb-garamond-latin.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(../fonts/eb-garamond-italic-latin.woff2) format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Oswald"; src: url(../fonts/oswald-latin.woff2) format("woff2"); font-weight: 200 700; font-display: swap; }

/* ---- the palette (the game's, by its own keys) ------------------------------------------------------------------ */
:root {
  --k: #050407; --n0: #0d0b12; --d1: #1a1520;
  --gr0: #2a2630; --gr1: #48434f; --gr2: #77707d; --gr3: #a8a0a6;
  --bn0: #8c7d68; --bn1: #c4b392; --w: #eee4cc;
  --r0: #240408; --r1: #520a11; --r2: #8e1318; --r3: #c8231f; --r4: #ff4f3a;
  --br0: #2b1810; --br1: #553221; --br2: #875634; --gd: #c39535; --y: #f3d37a;
  --v0: #0b1c1d; --v1: #15332f; --v2: #275651; --v3: #468a7f; --v4: #8cc6b3;
  --b0: #0a1030; --b1: #1b2d6c; --b2: #3658bd; --b3: #86a8ff;
  --sk0: #6a5a63; --sk1: #b9a6a6; --p1: #8a4fc0;

  --goth: "Jacquard 24", "Pixelify Sans", serif;
  --pix: "Pixelify Sans", ui-monospace, monospace;
  --book: "EB Garamond", Georgia, serif;
  --caps: "Oswald", "Arial Narrow", sans-serif;

  /* the type scale: a 1.25 step on a 19px book size (web); print sets its own base */
  --s-1: .8rem; --s0: 1rem; --s1: 1.25rem; --s2: 1.563rem; --s3: 1.953rem; --s4: 2.441rem; --s5: 3.052rem; --s6: 3.815rem;
  --measure: 38rem; --margin-col: 15rem; --gap: 2.2rem;

  /* the dither: a 2x2 checker of two palette colours, drawn as SVG (the game makes every gradient by ordered dither) */
  --dith-iron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%230d0b12'/%3E%3Crect width='2' height='2' fill='%231a1520'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%231a1520'/%3E%3C/svg%3E");
  --dith-vellum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%23eee4cc'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23c4b392'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23c4b392'/%3E%3C/svg%3E");
  --dith-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23c39535'/%3E%3Crect width='1' height='1' fill='%23f3d37a'/%3E%3C/svg%3E");
  /* the lattice ring: the game's vista mark, the book's own sign */
  --ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cg fill='none' stroke='%23c39535' stroke-width='2'%3E%3Ccircle cx='16' cy='16' r='12'/%3E%3Cpath d='M16 4v24M4 16h24M7.5 7.5l17 17M24.5 7.5l-17 17'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='3' fill='%23c8231f'/%3E%3C/svg%3E");
  --fleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' shape-rendering='crispEdges'%3E%3Cpath d='M0 6h48M72 6h48' stroke='%23520a11' stroke-width='1'/%3E%3Cpath d='M60 0l6 6-6 6-6-6z' fill='%238e1318'/%3E%3Cpath d='M50 6l3-3 3 3-3 3zM64 6l3-3 3 3-3 3z' fill='%23c39535'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { font-size: 19px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--book); line-height: 1.55; color: var(--n0); background: var(--w) var(--dith-vellum); }
img.px, .px img { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--r2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--r3); }
code { font-family: var(--pix); font-size: .78em; background: var(--bn1); padding: 0 .2em; }
strong { font-weight: 700; }

/* ---- the bar (both modes) ---------------------------------------------------------------------------------------- */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .8rem; padding: .35rem 1rem; background: var(--k); border-bottom: 2px solid var(--r1); font-family: var(--pix); font-size: .72rem; letter-spacing: .04em; }
.bar-home { display: flex; align-items: center; gap: .55rem; color: var(--bn1); text-decoration: none; margin-right: auto; }
.bar-mark { width: 22px; height: 22px; background: var(--ring) center/contain no-repeat; }
.bar-title { font-family: var(--goth); font-size: 1.15rem; color: var(--w); letter-spacing: .02em; }
.bar button { font: inherit; color: var(--bn1); background: var(--d1); border: 1px solid var(--gr1); padding: .25rem .6rem; cursor: pointer; }
.bar button:hover, .bar button[aria-pressed="true"] { color: var(--y); border-color: var(--gd); }
.bar-toc { display: none; }

/* ---- the page grid: text, a margin column for the notes, a contents rail ------------------------------------------ */
.page { max-width: calc(var(--measure) + var(--margin-col) + var(--gap) + 2rem); margin: 0 auto; padding: 2rem 1rem 4rem; }
.text { max-width: var(--measure); position: relative; }
.toc { position: fixed; left: 0; top: 2.6rem; bottom: 0; width: 14.5rem; overflow: auto; padding: 1.2rem 1rem 2rem; font-family: var(--pix); font-size: .62rem; line-height: 1.45; }
.toc ol { list-style: none; margin: 0 0 1rem; padding: 0; }
.toc li { margin: .3rem 0; }
.toc a { text-decoration: none; }
.toc-h { text-transform: uppercase; letter-spacing: .12em; color: var(--gr2); margin: .4rem 0; }
.toc-seals li::before { content: "\25CF  "; }
@media (min-width: 1240px) { .page { padding-left: 15.5rem; max-width: calc(var(--measure) + var(--margin-col) + var(--gap) + 17.5rem); } }
@media (max-width: 1239px) {
  .bar-toc { display: inline-block; }
  .toc, .mode-grimoire .toc, .mode-guide .toc { display: none; z-index: 30; background: var(--k); color: var(--bn1); width: min(19rem, 86vw); box-shadow: 6px 0 0 var(--r1); border: 0; }
  .toc.open, .mode-grimoire .toc.open, .mode-guide .toc.open { display: block; }
  .toc a, .mode-grimoire .toc a, .mode-guide .toc a { color: var(--bn1); }
}
/* pages with no contents rail keep the centred column at every width */
@media (min-width: 1240px) { .mode-index .page, .mode-print .page { padding-left: 1rem; } .mode-index .foot, .mode-print .foot { padding-left: 1rem; } }
/* small screens: a smaller base, and titles that fit */
@media (max-width: 600px) {
  html { font-size: 17px; }
  .opener-title, .tp-title { font-size: clamp(2.1rem, 10vw, var(--s6)) !important; overflow-wrap: anywhere; }
  .mode-guide .text h2 { font-size: var(--s2); }
}

/* margin notes: in the margin column on a wide page, set in the text on a narrow one */
.margin { display: block; font-size: .86rem; line-height: 1.35; margin: 1rem 0 1rem 1.2rem; padding-left: .8rem; border-left: 2px solid currentColor; }
@media (min-width: 900px) {
  .margin { float: right; clear: right; width: var(--margin-col); margin: .25rem calc(-1 * (var(--margin-col) + var(--gap))) 1rem 0; }
}
.margin .m-text { display: block; font-style: italic; }
.margin .tag { display: block; margin-bottom: .2rem; }
.ref { display: block; font-family: var(--pix); font-size: .58rem; letter-spacing: .03em; color: var(--gr2); margin-top: .25rem; font-style: normal; }

/* the speaker tags, as the game's captions set them: the god in gold with an ember, Wick in bone */
.tag { font-family: var(--pix); font-size: .62rem; letter-spacing: .12em; font-style: normal; }
.tag-god { color: var(--gd); }
.tag-wick { color: var(--bn0); }
.tag-person { color: var(--gr2); }
.ember { display: inline-block; width: .55em; height: .55em; margin-right: .4em; background: var(--r4); box-shadow: 0 0 0 1px var(--y) inset; transform: rotate(45deg) translateY(-.08em); }

/* ---- the opener: every chapter's title page ---------------------------------------------------------------------- */
.opener { max-width: var(--measure); margin: 1rem 0 2.5rem; }
.opener-part { font-family: var(--pix); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 .6rem; }
.opener-title { margin: 0; line-height: .95; font-weight: 400; }
.opener-kicker { font-size: var(--s1); font-style: italic; margin: .8rem 0 .4rem; }
.opener-rubric { color: var(--r2); font-style: italic; margin: .2rem 0 1rem; }
.opener-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.aud, .spoil, .status { font-family: var(--pix); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .45rem; font-style: normal; border: 1px solid; }
.aud-newcomer { color: var(--v2); } .aud-lore { color: var(--r2); } .aud-streamer { color: var(--b2); }
.spoil, .status { color: var(--gr1); }
.mode-guide .aud-newcomer { color: var(--v4); } .mode-guide .aud-lore { color: var(--r4); } .mode-guide .aud-streamer { color: var(--b3); }
.mode-guide .spoil, .mode-guide .status { color: var(--gr3); }
.candles { display: flex; align-items: flex-end; gap: 6px; margin-top: 1rem; height: 30px; }
.candles i { width: 7px; height: 18px; background: var(--bn1); position: relative; }
.candles i.lit::before { content: ""; position: absolute; left: 1px; top: -9px; width: 5px; height: 7px; background: var(--y); box-shadow: 0 -2px 0 var(--r4) inset; }
.candles i.out { background: var(--gr1); }
.candles i.out::before { content: ""; position: absolute; left: 3px; top: -8px; width: 1px; height: 7px; background: var(--gr2); }
.candles span { font-family: var(--pix); font-size: .58rem; margin-left: .5rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gr2); }

/* ==================================================================================================================
   THE GRIMOIRE: vellum, iron-gall ink, red rubrics, gold, plates in double rules
   ================================================================================================================== */
.mode-grimoire, .mode-index, .print-ch.mode-grimoire { color: var(--n0); }
.mode-grimoire .toc { background: var(--bn1); border-right: 3px double var(--r1); }
.mode-grimoire .toc a { color: var(--n0); }
.mode-grimoire .opener-part { color: var(--r2); }
.mode-grimoire .opener-title { font-family: var(--goth); font-size: var(--s6); color: var(--n0); }
.mode-grimoire .opener-title::after { content: ""; display: block; height: 12px; margin-top: .8rem; background: var(--fleuron) left center/120px 12px no-repeat; }
.mode-grimoire .text h2 { font-family: var(--goth); font-weight: 400; font-size: var(--s4); line-height: 1; color: var(--r2); margin: 2.6rem 0 .8rem; }
.mode-grimoire .text h3 { font-family: var(--book); font-variant: small-caps; letter-spacing: .06em; font-size: var(--s1); margin: 1.8rem 0 .4rem; color: var(--br1); }
.mode-grimoire .text h4 { font-family: var(--pix); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--r2); margin: 1.4rem 0 .3rem; }
/* the first paragraph after an h2 opens with an illuminated capital */
.mode-grimoire .text h2 + p::first-letter, .mode-grimoire .opener + .text > p:first-child::first-letter {
  font-family: var(--goth); float: left; font-size: 4.1em; line-height: .78; padding: .08em .12em 0 0; margin-right: .06em; color: var(--r2);
  text-shadow: 2px 2px 0 var(--gd);
}
.mode-grimoire blockquote { margin: 1.2rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px double var(--r2); font-style: italic; }
.rubric { color: var(--r2); font-style: italic; font-size: var(--s1); margin: 1.4rem 0; }
.rubric::first-letter { font-family: var(--goth); font-style: normal; font-size: 1.9em; color: var(--r3); text-shadow: 1px 1px 0 var(--gd); }
hr.orn { border: 0; height: 12px; margin: 2.2rem 0; background: var(--fleuron) center/120px 12px no-repeat; }
.mode-grimoire .margin-god { color: var(--br1); border-color: var(--gd); }
.mode-grimoire .margin-wick { color: var(--n0); border-color: var(--r2); }
.mode-grimoire .margin-person, .mode-grimoire .margin-record { color: var(--gr1); border-color: var(--gr2); }

/* an in-game line, set as a caption on a black strip (the game's own look), inside the vellum */
.line { margin: 1.4rem 0; background: var(--k); color: var(--w); padding: .7rem 1rem .6rem; border-left: 4px solid var(--gr1); }
.line blockquote { margin: .25rem 0 0; padding: 0; border: 0; font-style: normal; font-size: 1.02rem; line-height: 1.4; color: var(--w); }
.line-god { border-left-color: var(--gd); }
.line-god blockquote { color: var(--y); }
.line-wick { border-left-color: var(--bn0); }
.line-record blockquote { font-style: italic; color: var(--bn1); }
.line figcaption { font-family: var(--book); font-size: .76rem; color: var(--gr3); margin-top: .35rem; font-style: italic; }
.line figcaption .ref { color: var(--gr2); }

/* the plate: a pixel screen framed like a plate in an old book (double rule, gold corners, a numbered caption) */
.plate { margin: 2rem 0; max-width: 32rem; }
.plate-row .plate, .plate.wide { max-width: none; }
.plate-frame { position: relative; padding: 9px; background: var(--n0); border: 3px double var(--br1); outline: 1px solid var(--gd); outline-offset: -6px; }
.plate-frame::before, .plate-frame::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--dith-gold); }
.plate-frame::before { left: -5px; top: -5px; } .plate-frame::after { right: -5px; bottom: -5px; }
.plate img, .plate video { display: block; width: 100%; height: auto; }
.plate figcaption { margin-top: .55rem; font-size: .86rem; line-height: 1.35; }
.plate-n { font-family: var(--pix); font-size: .6rem; letter-spacing: .16em; color: var(--r2); margin-right: .6rem; }
.plate-title { font-variant: small-caps; letter-spacing: .04em; font-weight: 600; margin-right: .4rem; }
.plate-cap { font-style: italic; }
.plate-src { display: block; font-family: var(--pix); font-size: .56rem; color: var(--gr2); margin-top: .2rem; }
.plate-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.2rem; }
.plate-row .plate { margin: .6rem 0; }
@media (min-width: 900px) { .plate.wide { margin-right: calc(-1 * (var(--margin-col) + var(--gap))); } }
/* the keepsake faces (the box and the cards): a printed piece is shown whole and smooth, never pixelated */
.plate.size-card { max-width: 15rem; } .plate.size-small { max-width: 22rem; } .plate.size-tall { max-width: 20rem; }
.plate-row .plate.size-card, .plate-row .plate.size-small, .plate-row .plate.size-tall { max-width: none; }
.plate.size-card figcaption, .plate-row .plate figcaption { font-size: .8rem; }
.plate-foot { display: block; font-style: normal; font-family: var(--pix); font-size: .56rem; letter-spacing: .08em; color: var(--gr2); margin-top: .25rem; }

/* gallery entries: a card with a blackletter initial in a lattice ring (no portraits: the HUD faces are painted) */
.entry { margin: 2.2rem 0; padding: 1.1rem 1.2rem 1rem; background: var(--w); border: 1px solid var(--bn0); box-shadow: 4px 4px 0 var(--bn1); }
.entry-head { display: flex; gap: 1rem; align-items: center; margin-bottom: .6rem; }
.entry-mark { flex: 0 0 64px; height: 64px; display: grid; place-items: center; font-family: var(--goth); font-size: 2.6rem; color: var(--w); background: var(--n0); border: 3px double var(--gd); box-shadow: 0 0 0 3px var(--r1); }
.entry-mark.gold { color: var(--y); } .entry-mark.red { color: var(--r4); } .entry-mark.verd { color: var(--v4); } .entry-mark.blue { color: var(--b3); }
.entry h3 { margin: 0 !important; font-family: var(--goth) !important; font-variant: normal !important; font-size: var(--s3) !important; color: var(--n0) !important; letter-spacing: 0 !important; line-height: 1; }
.entry-aka { margin: .2rem 0 0; font-style: italic; color: var(--br1); }
.entry-role { margin: .15rem 0 0; font-family: var(--pix); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--r2); }
.entry-body > :first-child { margin-top: 0; }
.entry .margin { float: none; width: auto; margin: .8rem 0; }

/* ==================================================================================================================
   THE GUIDE: an iron page, bold caps, hard frames, callout boxes, boss panels, numbered routes
   ================================================================================================================== */
body.mode-guide { color: var(--w); background: var(--n0) var(--dith-iron); }
.mode-guide a { color: var(--y); }
.mode-guide a:hover { color: var(--w); }
.mode-guide code { background: var(--d1); color: var(--v4); }
.mode-guide .toc { background: var(--k); border-right: 2px solid var(--gd); }
.mode-guide .toc a { color: var(--bn1); }
.mode-guide .opener-part { color: var(--gd); }
.mode-guide .opener-title { font-family: var(--caps); font-weight: 700; font-size: var(--s6); text-transform: uppercase; letter-spacing: .01em; color: var(--w); text-shadow: 4px 4px 0 var(--r2), 8px 8px 0 var(--k); }
.mode-guide .opener-kicker { color: var(--bn1); }
.mode-guide .opener-rubric { color: var(--r4); }
.mode-guide .text h2 { font-family: var(--caps); font-weight: 700; text-transform: uppercase; font-size: var(--s3); letter-spacing: .02em; color: var(--k); background: var(--gd); display: inline-block; padding: .05rem .6rem .1rem; margin: 2.8rem 0 1rem; box-shadow: 5px 5px 0 var(--r2); }
.mode-guide .text h3 { font-family: var(--caps); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: var(--s1); color: var(--y); margin: 2rem 0 .5rem; border-bottom: 2px solid var(--gr1); padding-bottom: .15rem; }
.mode-guide .text h4 { font-family: var(--pix); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--v4); margin: 1.4rem 0 .3rem; }
.mode-guide blockquote { margin: 1.2rem 0; padding: .4rem 1rem; border-left: 4px solid var(--v3); background: var(--k); }
.mode-guide .margin-god { color: var(--y); border-color: var(--gd); }
.mode-guide .margin-wick { color: var(--bn1); border-color: var(--bn0); }
.mode-guide .margin-person, .mode-guide .margin-record { color: var(--gr3); border-color: var(--gr2); }
.mode-guide hr.orn { background: none; height: 4px; border-top: 2px solid var(--gr1); border-bottom: 2px solid var(--gr1); }

/* the guide's screen frame: a black bezel, a tab label, an offset verdigris shadow */
.screen .plate-frame { background: var(--k); border: 3px solid var(--k); outline: 2px solid var(--gr2); outline-offset: 0; box-shadow: 8px 8px 0 var(--v1); }
.screen .plate-frame::before, .screen .plate-frame::after { display: none; }
.screen figcaption { color: var(--bn1); }
.screen .plate-n { display: inline-block; color: var(--k); background: var(--v4); padding: .05rem .4rem; letter-spacing: .1em; }
.screen .plate-title { font-family: var(--caps); font-variant: normal; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; color: var(--w); }

/* tables: a hard grid */
.tbl { overflow-x: auto; margin: 1.2rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .84rem; line-height: 1.35; }
th, td { text-align: left; vertical-align: top; padding: .4rem .55rem; }
.mode-grimoire th, .mode-index th { font-variant: small-caps; letter-spacing: .05em; border-bottom: 2px solid var(--r2); color: var(--r2); }
.mode-grimoire td, .mode-index td { border-bottom: 1px solid var(--bn1); }
.mode-guide th { font-family: var(--caps); text-transform: uppercase; font-weight: 600; letter-spacing: .05em; font-size: .72rem; background: var(--gr0); color: var(--y); border: 2px solid var(--k); }
.mode-guide td { border: 2px solid var(--k); background: var(--d1); }

/* callout boxes: a heavy frame, a header strip, a pixel label */
.callout { margin: 1.6rem 0; border: 3px solid var(--k); background: var(--d1); color: var(--w); box-shadow: 6px 6px 0 var(--k); }
.callout-head { display: flex; align-items: baseline; gap: .6rem; padding: .3rem .7rem; background: var(--gr1); }
.callout-kind { font-family: var(--pix); font-size: .66rem; letter-spacing: .14em; color: var(--k); background: var(--w); padding: .05rem .4rem; }
.callout-title { font-family: var(--caps); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; color: var(--w); }
.callout-body { padding: .6rem .9rem .3rem; font-size: .92rem; }
.callout-body p { margin: .3rem 0 .6rem; }
.callout-tip .callout-head { background: var(--v2); } .callout-tip { box-shadow: 6px 6px 0 var(--v1); }
.callout-rule .callout-head { background: var(--gd); } .callout-rule .callout-title { color: var(--k); } .callout-rule { box-shadow: 6px 6px 0 var(--br1); }
.callout-warn .callout-head { background: var(--r2); } .callout-warn { box-shadow: 6px 6px 0 var(--r0); }
.callout-lore .callout-head { background: var(--p1); }
.callout-secret .callout-head { background: var(--b1); } .callout-secret .callout-kind { background: var(--b3); }
.callout-tbd .callout-head { background: var(--gr2); }
/* in the grimoire a callout is a gloss on vellum: bone ground, a rubric-red strip */
.mode-grimoire .callout, .mode-index .callout { background: var(--bn1); color: var(--n0); border: 2px solid var(--br1); box-shadow: 4px 4px 0 var(--bn0); }
.mode-grimoire .callout-head, .mode-index .callout-head { background: var(--r2); }
.mode-grimoire .callout-kind, .mode-index .callout-kind { background: var(--w); color: var(--r2); }
.mode-grimoire .callout-title, .mode-index .callout-title { color: var(--w); }
.mode-grimoire .callout-tbd .callout-head, .mode-index .callout-tbd .callout-head { background: var(--gr1); }

/* numbered routes: big numerals down a rail */
.route ol { list-style: none; counter-reset: step; margin: 1.2rem 0; padding: 0; }
.route li { counter-increment: step; position: relative; padding: .55rem 0 .7rem 3.4rem; border-left: 3px solid var(--gr1); margin-left: 1.3rem; }
.route li::before { content: counter(step); position: absolute; left: -1.35rem; top: .35rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; font-family: var(--caps); font-weight: 700; font-size: 1.25rem; color: var(--k); background: var(--y); border: 3px solid var(--k); box-shadow: 3px 3px 0 var(--r2); }
.route li:last-child { border-left-color: transparent; }

/* the phase B slots: an empty screen with what to capture */
.slot { margin: 1.4rem 0; }
.slot-frame { aspect-ratio: 1 / 1; max-width: 20rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .3rem; border: 3px dashed var(--gr2); background: repeating-linear-gradient(45deg, var(--d1) 0 6px, var(--n0) 6px 12px); color: var(--gr3); font-family: var(--pix); }
.slot-clip .slot-frame { aspect-ratio: 16 / 9; max-width: 26rem; border-color: var(--b2); }
.slot-kind { font-size: .9rem; letter-spacing: .14em; color: var(--y); }
.slot-clip .slot-kind { color: var(--b3); }
.slot-note { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; }
.slot figcaption { font-size: .82rem; margin-top: .45rem; max-width: 30rem; font-style: italic; }
.mode-grimoire .slot-frame { border-color: var(--bn0); background: repeating-linear-gradient(45deg, var(--bn1) 0 6px, var(--w) 6px 12px); color: var(--br1); }
.mode-grimoire .slot-kind { color: var(--r2); }

/* the TBD mark */
.tbd { font-family: var(--pix); font-size: .62rem; letter-spacing: .08em; padding: .05rem .35rem; color: var(--k); background: var(--y); white-space: nowrap; font-style: normal; }

/* stats: key-value grid */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .4rem; margin: 1.2rem 0; }
.stats div { border: 2px solid var(--k); background: var(--d1); padding: .35rem .55rem; color: var(--w); }
.stats dt { font-family: var(--pix); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--v4); }
.stats dd { margin: .1rem 0 0; font-family: var(--caps); font-size: 1.02rem; font-weight: 500; }
.mode-grimoire .stats div { background: var(--bn1); color: var(--n0); border-color: var(--br1); }
.mode-grimoire .stats dt { color: var(--r2); }

/* ---- the boss panel ---------------------------------------------------------------------------------------------- */
.boss { margin: 3rem 0; border: 4px solid var(--k); background: var(--d1); box-shadow: 10px 10px 0 var(--r1); color: var(--w); }
.boss-head { padding: .6rem 1rem .5rem; background: linear-gradient(var(--r2), var(--r2)) left bottom/100% 4px no-repeat, var(--k); }
.boss-kicker { font-family: var(--pix); font-size: .62rem; letter-spacing: .2em; color: var(--r4); }
.boss-name { margin: .1rem 0 0 !important; font-family: var(--caps) !important; font-weight: 700 !important; font-size: var(--s3) !important; text-transform: uppercase; letter-spacing: .01em; color: var(--w) !important; border: 0 !important; padding: 0 !important; line-height: 1.05; }
.boss-title { display: block; font-style: italic; color: var(--bn1); margin-top: .1rem; }
.boss-top { display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: 1rem; padding: 1rem; }
.boss-plate { border: 3px solid var(--k); outline: 2px solid var(--gr2); box-shadow: 6px 6px 0 var(--v1); align-self: start; }
.boss-plate img { display: block; width: 100%; height: auto; }
.boss-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .35rem; margin: 0; align-content: start; }
.boss-stats div { background: var(--n0); border: 2px solid var(--k); padding: .3rem .5rem; }
.boss-stats dt { font-family: var(--pix); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gd); }
.boss-stats dd { margin: .05rem 0 0; font-size: .86rem; line-height: 1.3; }
.boss-sentence { margin: 0 1rem 1rem; padding: .7rem .9rem; background: var(--k); border-left: 5px solid var(--y); font-size: 1.05rem; font-style: italic; }
.boss-sentence span { display: block; font-family: var(--pix); font-style: normal; font-size: .58rem; letter-spacing: .2em; color: var(--y); margin-bottom: .2rem; }
.boss-body { padding: 0 1rem 1rem; }
.boss-body h4 { margin-top: 1rem !important; }
@media (max-width: 640px) { .boss-top { grid-template-columns: 1fr; } }
.mode-grimoire .boss { color: var(--w); }

/* the tells: one row a move, the wind-up as a bar, the floor ink as a chip */
.tells { margin: .8rem 0 1rem; border: 2px solid var(--k); background: var(--n0); font-size: .82rem; }
.tells-head, .tell { display: grid; grid-template-columns: 1.3fr 1.1fr 1.3fr .55fr 2fr; gap: .6rem; padding: .4rem .6rem; align-items: center; }
.tells-head { font-family: var(--pix); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gd); background: var(--k); }
.tell { border-top: 1px solid var(--gr0); }
.tell-name { font-family: var(--caps); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--w); }
.tell-wind { display: flex; align-items: center; gap: .4rem; }
.wbar { flex: 1; height: 8px; background: var(--gr0); border: 1px solid var(--k); }
.wbar i { display: block; height: 100%; background: var(--y); }
.tell-wind b { font-family: var(--pix); font-weight: 400; font-size: .64rem; color: var(--bn1); white-space: nowrap; }
.chip { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--k); outline: 1px solid var(--gr2); margin-right: .4rem; vertical-align: -1px; }
.snd { font-family: var(--pix); font-size: .62rem; color: var(--gr3); }
.tell-dmg { font-family: var(--caps); color: var(--r4); }
.tell-note { color: var(--bn1); font-style: italic; }
.tells-key { margin: 0; padding: .4rem .6rem; font-size: .7rem; color: var(--gr3); border-top: 1px solid var(--gr0); }
@media (max-width: 760px) {
  .tells-head { display: none; }
  .tell { grid-template-columns: 1fr 1fr; }
  .tell-note { grid-column: 1 / -1; }
}

/* ---- the seals: the layered spoilers ----------------------------------------------------------------------------- */
.sealed { margin: 1.8rem 0; border: 2px solid var(--br1); background: var(--bn1); }
.sealed > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: .7rem .9rem; }
.sealed > summary::-webkit-details-marker { display: none; }
.seal { flex: 0 0 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--goth); font-size: 1.15rem; color: var(--w);
  background: radial-gradient(circle at 35% 30%, var(--r4) 0 10%, var(--r3) 11% 40%, var(--r2) 41% 70%, var(--r1) 71%); box-shadow: 0 0 0 3px var(--r1), 3px 4px 0 3px var(--r0); }
.seal b { font-weight: 400; text-shadow: 1px 1px 0 var(--r0); }
.sealed-mid .seal { background: radial-gradient(circle at 35% 30%, var(--gr2) 0 10%, var(--gr1) 11% 40%, var(--gr0) 41% 70%, var(--d1) 71%); box-shadow: 0 0 0 3px var(--k), 3px 4px 0 3px var(--n0); }
.sealed-end .seal { color: var(--k); background: radial-gradient(circle at 35% 30%, var(--w) 0 10%, var(--y) 11% 40%, var(--gd) 41% 70%, var(--br2) 71%); box-shadow: 0 0 0 3px var(--br1), 3px 4px 0 3px var(--br0); }
.sealed-end .seal b { text-shadow: none; }
.seal-text { display: flex; flex-direction: column; }
.seal-kicker { font-family: var(--pix); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--r2); }
.seal-title { font-size: 1.08rem; font-weight: 600; }
.seal-hint { font-size: .78rem; font-style: italic; color: var(--br2); }
.sealed[open] .seal-hint { display: none; }
.sealed[open] .seal { transform: rotate(-12deg) scale(.9); }
.sealed[open] { background: var(--w); }
.sealed-body { padding: .2rem 1.1rem 1rem; border-top: 1px dashed var(--br1); }
.mode-guide .sealed, .mode-guide .sealed[open] { border-color: var(--gr1); background: var(--k); }
.mode-guide .seal-hint { color: var(--gr3); }
.mode-guide .seal-kicker { color: var(--r4); }
.mode-guide .sealed-body { border-top-color: var(--gr1); }

/* ---- prev / next, foot -------------------------------------------------------------------------------------------- */
.pn { display: flex; justify-content: space-between; gap: 1rem; max-width: var(--measure); margin-top: 4rem; padding-top: 1rem; border-top: 3px double currentColor; }
.pn a { text-decoration: none; max-width: 48%; font-weight: 600; }
.pn a span { display: block; font-family: var(--pix); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; color: var(--gr2); }
.pn-next { text-align: right; margin-left: auto; }
.foot { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; font-family: var(--pix); font-size: .56rem; letter-spacing: .03em; color: var(--gr2); }
@media (min-width: 1240px) { .foot { padding-left: 15.5rem; } }

/* ---- the index: the title page and the book map ------------------------------------------------------------------ */
.title-page { text-align: center; padding: 2.5rem 1rem 1.5rem; max-width: 46rem; margin: 0 auto; }
.title-page::before { content: ""; display: block; width: 84px; height: 84px; margin: 0 auto 1.2rem; background: var(--ring) center/contain no-repeat; }
.tp-game { font-family: var(--goth); font-size: var(--s5); margin: 0; line-height: 1; color: var(--n0); letter-spacing: .04em; }
.tp-sub { font-family: var(--pix); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--r2); margin: .3rem 0 1.4rem; }
.tp-title { font-family: var(--goth); font-weight: 400; font-size: var(--s6); line-height: .95; margin: 0; color: var(--r2); text-shadow: 3px 3px 0 var(--gd); }
.tp-kicker { font-style: italic; font-size: var(--s1); margin: .8rem 0 .3rem; }
.mode-index .page { max-width: 62rem; }
.mode-index .text { margin: 0 auto 2rem; }
.bookmap { display: grid; gap: 1.6rem; }
.bm-part { padding: 1.2rem 1.4rem; border: 3px double var(--br1); background: var(--bn1); }
.bm-part h2 { font-family: var(--goth); font-weight: 400; font-size: var(--s4); margin: 0; color: var(--r2); line-height: 1; }
.bm-guide { background: var(--n0) var(--dith-iron); border: 4px solid var(--k); box-shadow: 8px 8px 0 var(--r1); color: var(--w); }
.bm-guide h2 { font-family: var(--caps); font-weight: 700; text-transform: uppercase; color: var(--y); text-shadow: 3px 3px 0 var(--r2); }
.bm-blurb { font-style: italic; margin: .4rem 0 1rem; }
.bm-part ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: .5rem; }
.bm-part li a { display: grid; grid-template-columns: 2.4rem 1fr; grid-template-areas: "n t" "n s" "n a"; column-gap: .5rem; padding: .55rem .6rem; text-decoration: none; color: inherit; border: 1px solid var(--bn0); background: var(--w); height: 100%; }
.bm-guide li a { border: 2px solid var(--k); background: var(--d1); }
.bm-part li a:hover { outline: 2px solid var(--gd); }
.bm-num { grid-area: n; font-family: var(--goth); font-size: 1.6rem; color: var(--r2); line-height: 1; }
.bm-guide .bm-num { font-family: var(--caps); font-weight: 700; color: var(--y); font-size: 1.3rem; }
.bm-t { grid-area: t; font-weight: 700; line-height: 1.2; }
.bm-guide .bm-t { font-family: var(--caps); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.bm-s { grid-area: s; font-size: .8rem; line-height: 1.3; font-style: italic; margin: .15rem 0 .3rem; }
.bm-aud { grid-area: a; display: flex; flex-wrap: wrap; gap: .25rem; }
.bm-aud i { font-size: .5rem; padding: .05rem .3rem; }
.bm-print { text-align: center; font-family: var(--pix); font-size: .7rem; margin-top: 2rem; }

/* ---- the print edition (one page; the sealed pages as appendices) -------------------------------------------------- */
.print-edition .bar-seals, .print-edition .bar-toc { display: none; }
.print-toc { max-width: var(--measure); margin: 2rem auto; }
.print-toc ol { columns: 2; font-size: .86rem; }
.print-ch { padding: 2rem 0; border-top: 3px double var(--br1); }
.print-ch.mode-guide { background: var(--n0) var(--dith-iron); color: var(--w); padding: 2rem 1rem; margin: 0 -1rem; }
.sealed-ref { display: flex; align-items: center; gap: .8rem; padding: .5rem .7rem; border: 2px dashed var(--br1); font-size: .9rem; }
.sealed-ref .seal { flex-basis: 34px; height: 34px; font-size: .8rem; }
.appx-sealed { margin: 1.6rem 0; padding-top: .8rem; border-top: 1px solid var(--bn0); }
.appx-sealed h3 { font-family: var(--goth); font-weight: 400; font-size: var(--s2); color: var(--r2); margin: 0 0 .4rem; }
.appx-n { font-family: var(--pix); font-size: .7rem; color: var(--k); background: var(--y); padding: .05rem .35rem; vertical-align: middle; }
.appx-from { display: block; font-family: var(--pix); font-size: .58rem; letter-spacing: .08em; color: var(--gr1); }

@media print {
  @page { size: 7.5in 10in; margin: .7in .65in .8in .75in; }
  @page :left { margin-left: .65in; margin-right: .75in; }
  html { font-size: 10.5pt; }
  body, body.mode-guide { background: var(--w) !important; color: var(--n0) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bar, .toc, .pn, .foot, .bm-print { display: none !important; }
  .page { max-width: none; padding: 0; }
  .text, .opener { max-width: none; }
  .print-ch { break-before: page; border: 0; padding: 0; }
  /* the guide prints on paper too: the frames and strips stay, the iron page goes (ink is dear) */
  .print-ch.mode-guide { background: var(--w) !important; color: var(--n0) !important; margin: 0; padding: 0; }
  .mode-guide .opener-title { color: var(--n0); text-shadow: 3px 3px 0 var(--gd); }
  .mode-guide .text h3 { color: var(--r2); border-bottom-color: var(--n0); }
  .mode-guide .text h4 { color: var(--v2); }
  .mode-guide td { background: transparent; border-color: var(--gr2); }
  .mode-guide th { background: var(--n0); }
  .mode-guide .margin-god { color: var(--br1); } .mode-guide .margin-wick { color: var(--n0); } .mode-guide .margin-person { color: var(--gr1); }
  .mode-guide a { color: var(--r2); }
  .margin { float: right; width: 30%; margin: 0 0 .6rem 1rem; font-size: .8rem; }
  .plate, .boss, .callout, .entry, .line, .tells, .route li, .sealed-ref, .slot { break-inside: avoid; }
  .boss, .callout { box-shadow: none; }
  .plate { max-width: 70%; }
  .plate-row .plate { max-width: none; }
  .sealed { display: none; } /* never on paper: the print edition moves them to Appendix A */
  .appendix { break-before: page; }
  a { text-decoration: none; }
}

/* two columns of a list (the cast of the circus, the scroll's rubrics) */
.cols ul, .cols ol { columns: 2; column-gap: 2.2rem; margin: 1rem 0; padding-left: 1.1rem; }
.cols li { break-inside: avoid; margin-bottom: .35rem; }
@media (max-width: 640px) { .cols ul, .cols ol { columns: 1; } }

/* ==================================================================================================================
   THE CRT TREATMENT (the owner, 2026-10-04: "Both"): chapter openers in the game's CRT look, detail shots in clean
   pixels, from ONE clean source image. Modelled on src/crt.js COMPOSITE at strength 8, the game's default look:
   scan .18 (soft, one line per game row), the signal copy (red and green-blue split about 1 game px, blurred about 1 game
   px, saturated x1.5) over the sharp frame at .5, grain .3 soft-lit, vignette .39 in the void colour, corners 6%.
   As in the game, the CRT is a presentation layer stacked over the palette pixels and never alters them: its blends
   (scanline darkening, the signal's smear, grain, vignette) are the one place the book lets colours mix.
   ================================================================================================================== */
.crt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.crt-tube { position: relative; overflow: hidden; border-radius: 6.2%; isolation: isolate; background: var(--k); line-height: 0; }
.crt-tube img { display: block; width: 100%; height: auto; }
.crt-base { image-rendering: pixelated; image-rendering: crisp-edges; filter: saturate(1.35) contrast(1.03) brightness(.98); }
.crt-sig { position: absolute; inset: 0; height: 100% !important; image-rendering: pixelated; filter: url(#crt-signal) saturate(1.5); opacity: .5; }
.crt-scan, .crt-noise, .crt-vig { position: absolute; inset: 0; pointer-events: none; }
.crt-scan { background: repeating-linear-gradient(to bottom, rgba(5, 4, 7, 0) 0, rgba(5, 4, 7, .06) 35%, rgba(5, 4, 7, .30) 75%, rgba(5, 4, 7, .06) 100%); background-size: 100% calc(100% / 240); mix-blend-mode: multiply; }
.crt-noise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .3; mix-blend-mode: soft-light; }
.crt-vig { background: radial-gradient(ellipse at center, rgba(5, 4, 7, 0) 55%, rgba(5, 4, 7, .39) 100%); }
.opener-plate { margin: 1.6rem 0 0; max-width: 34rem; }
.opener-plate .plate-frame { padding: 10px; }
.opener-plate figcaption { margin-top: .5rem; font-size: .84rem; }
.mode-guide .opener-plate .plate-frame { background: var(--k); border: 3px solid var(--k); outline: 2px solid var(--gr2); outline-offset: 0; box-shadow: 8px 8px 0 var(--r1); }
.mode-guide .opener-plate .plate-frame::before, .mode-guide .opener-plate .plate-frame::after { display: none; }
.mode-guide .opener-plate figcaption { color: var(--bn1); }
@media print { .crt-noise { display: none; } .opener-plate { max-width: 60%; break-inside: avoid; } }

/* ==================================================================================================================
   THE LEDGER: the book's own voice (the owner, 2026-10-04: "Add an in-world voice"). Set apart from the game's lines
   at a glance: a ruled ledger slip (cold-blue rules, a red margin rule), an accountant's upright hand in rust-brown ink,
   the ledger's mark (a small red seal with a quill stroke), and a label that says it is the book speaking, not the game.
   ================================================================================================================== */
.ledger { display: block; font-size: .84rem; line-height: 1.5; margin: 1rem 0 1rem 1.2rem; padding: .45rem .7rem .5rem 1.1rem; color: var(--br1);
  background: var(--w) repeating-linear-gradient(to bottom, var(--w) 0, var(--w) calc(1.26rem - 1px), var(--b3) calc(1.26rem - 1px), var(--b3) 1.26rem);
  background-position: 0 .55rem; border-left: 3px double var(--r3); box-shadow: 3px 3px 0 var(--bn1); font-style: normal; }
@media (min-width: 900px) { .ledger { float: right; clear: right; width: var(--margin-col); margin: .25rem calc(-1 * (var(--margin-col) + var(--gap))) 1rem 0; } }
.ledger-label { display: flex; align-items: center; gap: .35rem; font-family: var(--pix); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; color: var(--r2); margin-bottom: .25rem; }
.ledger-mark { flex: 0 0 13px; height: 13px; border-radius: 50%; background: var(--r2); box-shadow: 0 0 0 1px var(--r0); position: relative; }
.ledger-mark::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 1px; background: var(--y); transform: rotate(-35deg); }
.ledger-text { display: block; font-family: var(--book); font-variant-numeric: oldstyle-nums; letter-spacing: .01em; }
.mode-guide .ledger { box-shadow: 3px 3px 0 var(--k); }
.entry .ledger, .sealed-body .ledger { float: none; width: auto; margin: .8rem 0; }
@media print { .ledger { float: right; width: 30%; margin: 0 0 .6rem 1rem; font-size: .78rem; break-inside: avoid; } }

/* the palette strip (the art chapter): the game's 32 colours, one chip each */
.palette { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .4rem; }
.palette li { margin: 0; padding: 0; display: block; }
.palette li::before { content: none; }
.pal-chip { display: block; height: 2rem; border: 2px solid var(--k); outline: 1px solid var(--gr2); }
.palette b { display: block; font-family: var(--pix); font-size: .54rem; letter-spacing: .06em; font-weight: normal; margin-top: .15rem; }
.palette span { display: block; font-family: var(--pix); font-size: .52rem; color: var(--gr2); }
@media print { .palette { grid-template-columns: repeat(8, 1fr); break-inside: avoid; } }