/* Numina — an illuminated reference for the world of Aeledd.
   Aged parchment, forest green, burnished gold, deep red; one vine-and-leaf
   ornament family carried through every component. Light theme on :root;
   dark ("moonlit hall") via prefers-color-scheme (unless data-theme="light")
   or data-theme="dark". The two dark token blocks below MUST stay identical. */

@font-face {
  font-family: "Grenze Gotisch";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/grenze-gotisch-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Grenze Gotisch";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/grenze-gotisch-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/alegreya-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/alegreya-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya SC";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/alegreya-sc-latin-400-normal.woff2") format("woff2");
}

:root {
  --paper: #f0e6cd;
  --paper-raised: #f6eeda;
  --paper-sunken: #e6d8b6;
  --ink: #2c2415;
  --ink-soft: #5a4f38;
  --accent: #8a2318;
  --accent-soft: #a8402c;
  --red: #8a2318;
  --green: #2e5d3e;
  --green-deep: #1f4230;
  --heading: #27452f;
  --gold: #a17c2a;
  /* --gold is 3.11:1 on --paper: fine for an ornament, short of AA for a
     word. --gold-text is the same hue at 4.80:1, and is what every run of
     gold TEXT uses (kicker, crumb, permalink marks, the theme button).
     Ornament and map golds are untouched — they are not text. */
  --gold-text: #7d5f18;
  --gold-bright: #c39a3b;
  --gold-dim: #c5b183;
  --frame-ink: #7a6a45;
  --edge: #c9b587;
  --btn-bg: #7e2417;
  --btn-ink: #f6eeda;
  --shadow: 0 1px 4px rgba(43, 33, 20, 0.22);
  /* What the sticky header actually measures, so the sticky timeline-era
     chips clear it exactly: 0.65rem + (1.75rem wordmark x 1.65) + 0.65rem
     + 13px of ornament band + 1px border = 81px, and it is font-independent
     because the wordmark's line-height is a number. It was 5rem, which is
     80px, and a stuck chip sat 0.97px under the header's bottom edge.
     test/a11y/layout.mjs measures the header and fails if this drifts. */
  --header-h: 5.0625rem;
  --map-paper: #ecdcae;
  --map-paper-deep: #dfcc90;
  --map-ink: #4a3b1d;
  --map-sea-line: #8a7a4f;
  --map-gold: #96762a;
  --texture: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44IiBudW1PY3RhdmVzPSIzIiBzZWVkPSI3Ii8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuMzMgMCAwIDAgMCAwLjI1IDAgMCAwIDAgMC4xMiAwIDAgMCAwLjA3IDAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+Cg==");
  --display: "Grenze Gotisch", "Palatino Linotype", Palatino, serif;
  --body: "Alegreya", Georgia, "Times New Roman", serif;
  --caps: "Alegreya SC", "Alegreya", Georgia, serif;
  /* Ornament masks are alpha-only and theme-agnostic: recolored where used
     via background-color, so they are declared once, here only. */
  --orn-corner: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0yIDQ3IEwyIDEyIFEyIDIgMTIgMiBMNDcgMiIgc3Ryb2tlLXdpZHRoPSIyLjQiLz48cGF0aCBkPSJNNy41IDQ3IFE3IDI2IDEzLjUgMTYuNSBRMjAgNyA0NyA3LjUiIHN0cm9rZS13aWR0aD0iMS4yIi8+PHBhdGggZD0iTTE0IDE0IFEyMiAxMi41IDI2IDE3IFEyOSAyMSAyNS41IDI0IFEyMS41IDI2LjUgMTggMjMgUTE1IDE5LjUgMTguNSAxNi41IiBzdHJva2Utd2lkdGg9IjEuNSIvPjxwYXRoIGQ9Ik0yNiAxNyBRMzAgMTQgMzQgMTQuNSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48cGF0aCBkPSJNMTggMjMgUTE1IDI4IDE1LjUgMzMiIHN0cm9rZS13aWR0aD0iMS4yIi8+PC9nPjxwYXRoIGQ9Ik0zMyAxNSBRNDAgOS41IDQ2LjUgMTIgUTQxIDE3LjUgMzMuNSAxNy41IFEzMi41IDE2LjUgMzMgMTUgWiIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik0xNSAzNCBROS41IDQwLjUgMTIgNDcgUTE3LjUgNDEuNSAxNy41IDM0IFExNi41IDMzIDE1IDM0IFoiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNMjcgMjQuNSBRMzIgMjIuNSAzNS41IDI0LjUgUTMxLjUgMjcuNSAyNy41IDI2LjUgWiIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjIyIiBjeT0iMjAiIHI9IjEuNyIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjExIiBjeT0iMTEiIHI9IjEuNCIgZmlsbD0iIzAwMCIvPjwvc3ZnPgo=");
  --orn-leaf: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAyMCI+PHBhdGggZD0iTTEgMTYgUTEzIDEyLjUgMzQgOS41IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMyAxMi41IFExMCA0LjUgMTkuNSA2IFExNCAxMiA1LjUgMTMuNSBRMy44IDEzLjMgMyAxMi41IFoiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNMTYuNSAxMy41IFEyMy41IDcuNSAzMi41IDkuNSBRMjYgMTQuNSAxOCAxNS4zIFExNyAxNC42IDE2LjUgMTMuNSBaIiBmaWxsPSIjMDAwIi8+PGNpcmNsZSBjeD0iMzQiIGN5PSI5LjMiIHI9IjEuNSIgZmlsbD0iIzAwMCIvPjwvc3ZnPgo=");
  --orn-hr: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDAgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTMgMTMgUTI2IDkuNSA0NiAxMiBRNTYgMTMuMiA2MyAxMi4yIi8+PHBhdGggZD0iTTEzNyAxMS41IFExMTQgMTUgOTQgMTIgUTg0IDEwLjggNzcgMTEuOCIvPjxwYXRoIGQ9Ik00NiAxMiBRNDAgNi41IDMzIDcuNSIvPjxwYXRoIGQ9Ik05NCAxMiBRMTAxIDE3LjUgMTA4IDE1LjgiLz48cGF0aCBkPSJNOCAxMyBRNC41IDkuNSA2IDYiLz48L2c+PHBhdGggZD0iTTcwIDIuNSBRNzYuNSA4IDc0IDE0LjUgUTcwLjUgMTkuNSA2Ni41IDE0IFE2NC41IDcuNSA3MCAyLjUgWiIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik01NyAxMi4zIFE1MSA2LjggNDMuNSA4LjIgUTQ5IDEzLjUgNTYuNSAxMy40IFE1NyAxMi45IDU3IDEyLjMgWiIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik04MyAxMS44IFE4OS41IDE3IDk2LjUgMTUuNiBROTEgMTAuNSA4My42IDEwLjcgUTgzLjIgMTEuMiA4MyAxMS44IFoiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI3MCIgY3k9IjE5LjUiIHI9IjEuNiIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjMzIiBjeT0iNy4zIiByPSIxLjMiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSIxMDguNSIgY3k9IjE1LjYiIHI9IjEuMyIgZmlsbD0iIzAwMCIvPjwvc3ZnPgo=");
  --orn-band: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCAxMCI+PHBhdGggZD0iTTAgNSBRMTAgMSAyMCA1IFEzMCA5IDQwIDUgUTUwIDEgNjAgNSBRNzAgOSA4MCA1IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4zIi8+PHBhdGggZD0iTTE5IDQuNiBRMjMuNSAwLjggMjguNSAxLjggUTI0LjUgNS44IDE5LjYgNS40IFoiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNNTkgNS40IFE1NC41IDkuMiA0OS41IDguMiBRNTMuNSA0LjIgNTguNCA0LjYgWiIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjQwIiBjeT0iNSIgcj0iMS40IiBmaWxsPSIjMDAwIi8+PGNpcmNsZSBjeD0iNzkiIGN5PSI1IiByPSIwLjkiIGZpbGw9IiMwMDAiLz48L3N2Zz4K");
}
/* DARK THEME — this block and the [data-theme="dark"] block below must stay
   byte-identical. Moonlit green-black stone, glowing gold ornament. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1713;
    --paper-raised: #17221b;
    --paper-sunken: #0a100c;
    --ink: #ded6bd;
    --ink-soft: #a49f85;
    --accent: #d9b356;
    --accent-soft: #ecd489;
    --red: #c56a55;
    --green: #7fae8c;
    --green-deep: #4a7a5c;
    --heading: #d9c98d;
    --gold: #c9a852;
    --gold-text: #c9a852;
    --gold-bright: #ecd489;
    --gold-dim: #5c5233;
    --frame-ink: #8a7a4a;
    --edge: #2c3a30;
    --btn-bg: #c9a852;
    --btn-ink: #221a0b;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    --map-paper: #dcc795;
    --map-paper-deep: #ccb277;
    --map-ink: #42351a;
    --map-sea-line: #7d6c40;
    --map-gold: #7d6224;
    --texture: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44IiBudW1PY3RhdmVzPSIzIiBzZWVkPSIxMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwLjc4IDAgMCAwIDAgMC43NCAwIDAgMCAwIDAuNSAwIDAgMCAwLjA1IDAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+Cg==");
  }
}
:root[data-theme="dark"] {
  --paper: #0f1713;
  --paper-raised: #17221b;
  --paper-sunken: #0a100c;
  --ink: #ded6bd;
  --ink-soft: #a49f85;
  --accent: #d9b356;
  --accent-soft: #ecd489;
  --red: #c56a55;
  --green: #7fae8c;
  --green-deep: #4a7a5c;
  --heading: #d9c98d;
  --gold: #c9a852;
  --gold-text: #c9a852;
  --gold-bright: #ecd489;
  --gold-dim: #5c5233;
  --frame-ink: #8a7a4a;
  --edge: #2c3a30;
  --btn-bg: #c9a852;
  --btn-ink: #221a0b;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  --map-paper: #dcc795;
  --map-paper-deep: #ccb277;
  --map-ink: #42351a;
  --map-sea-line: #7d6c40;
  --map-gold: #7d6224;
  --texture: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44IiBudW1PY3RhdmVzPSIzIiBzZWVkPSIxMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwLjc4IDAgMCAwIDAgMC43NCAwIDAgMCAwIDAuNSAwIDAgMCAwLjA1IDAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+Cg==");
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--texture);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
}
img, svg { max-width: 100%; height: auto; }
::selection { background: var(--gold-dim); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Off-screen until focused rather than display:none, which would take it
   out of the tab order and leave the header's seven stops in front of
   every page. On focus it lands over the sticky header, so z-index beats
   .site-header's 10. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 11;
  font-family: var(--caps);
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--gold-dim);
  border-radius: 0 0 3px 0;
  padding: 0.5rem 1rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }
/* The skip link and in-page anchors both land here, and the header is
   sticky, so #main needs the same clearance every heading has. */
main:focus { outline: none; }
main { scroll-margin-top: calc(var(--header-h) + 1rem); }

h1, h2, h3, h4, h5, h6 {
  /* anchor jumps (permalinks, TOC, Pagefind sub-results, glossary links) must
     land below the sticky header, not underneath it */
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--heading);
  margin: 2rem 0 0.6rem;
}
h1 { font-size: 2.6rem; margin-top: 0.5rem; letter-spacing: 0.01em; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }
h4 { color: var(--ink); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-soft); }

/* engraved baseline + trailing leaf sprig on content section headings */
.shell main > h2 {
  padding-bottom: 0.35rem;
  background:
    linear-gradient(90deg, var(--frame-ink), var(--gold-dim) 55%, transparent 96%)
    bottom left / 100% 1px no-repeat;
}
.shell main > h2::after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 0.85rem;
  margin-left: 0.55rem;
  -webkit-mask: var(--orn-leaf) center / contain no-repeat;
  mask: var(--orn-leaf) center / contain no-repeat;
  background-color: var(--gold);
}

/* ---------- heading permalinks (§) ---------- */
/* The mark is CSS-generated so it stays out of the heading's text content (and
   therefore out of Pagefind's sub-result titles); the link is named by
   aria-label. Space is reserved at all times (opacity, not display) so
   revealing the mark never reflows the heading. */
.heading-anchor__mark::before { content: "\A7"; }
.heading-anchor {
  color: var(--gold-text);
  text-decoration: none;
  font-family: var(--caps);
  font-weight: 400;
  font-size: 0.66em;
  vertical-align: 0.22em;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
}
h2:hover > .heading-anchor,
h3:hover > .heading-anchor,
.heading-anchor:focus,
.heading-anchor:hover { opacity: 1; }
.heading-anchor:hover { color: var(--gold-bright); }
:target > .heading-anchor { opacity: 1; }
/* no hover on touch: keep the mark permanently visible there */
@media (hover: none) {
  .heading-anchor { opacity: 0.8; }
}

blockquote {
  margin: 1.4rem 0;
  padding: 0.7rem 1.1rem;
  border-left: 3px solid var(--red);
  border-top: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim);
  background: var(--paper-raised);
  font-style: italic;
}
code { background: var(--paper-sunken); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.9em; }

/* ledger-style tables (mechanics chapters are table-heavy).
   The scroll lives on the wrapper, not the table: `display: block` on a <table>
   makes it a generic block to a screen reader — no rows, no columns, no header
   association — and the mechanics chapters are almost entirely tables. Every
   table in a page body is wrapped in div.table-scroll (markdown by the
   renderer rule in eleventy.config.mjs, the two template/JS tables by hand);
   test/smoke.mjs fails on one that is not. */
.table-scroll { overflow-x: auto; }
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.4rem 0;
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 2px var(--paper-raised), inset 0 0 0 3px var(--gold-dim);
  background: var(--paper-raised);
  padding: 3px;
}
th, td { border: 0; border-bottom: 1px solid var(--edge); padding: 0.45rem 0.8rem; text-align: left; }
th {
  font-family: var(--caps);
  font-weight: 400;
  letter-spacing: 0.04em;
  background: var(--paper-sunken);
  border-bottom: 2px solid var(--gold-dim);
  color: var(--ink);
}
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--paper-sunken) 42%, transparent); }
tbody tr:last-child td { border-bottom: 0; }

/* per-skill permalink, the table-row twin of .heading-anchor: same gold mark,
   same hover-to-reveal, same CSS-drawn glyph so Pagefind never reads it as part
   of the skill's name */
.skill-anchor__mark::before { content: "\A7"; }
.skill-anchor {
  color: var(--gold-text);
  text-decoration: none;
  font-family: var(--caps);
  font-size: 0.8em;
  vertical-align: 0.18em;
  margin-left: 0.35em;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
}
tr:hover > td > .skill-anchor,
.skill-anchor:focus,
.skill-anchor:hover { opacity: 1; }
.skill-anchor:hover { color: var(--gold-bright); }
tr:target > td > .skill-anchor { opacity: 1; }
tr:target > td { background: color-mix(in srgb, var(--gold-dim) 38%, transparent); }
@media (hover: none) {
  .skill-anchor { opacity: 0.8; }
}

/* ---------- All Skills index ---------- */
.skill-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 1.2rem;
  margin: 1.4rem 0 0.6rem;
}
.skill-filter[hidden] { display: none; }
.skill-filter__row { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.skill-filter label { font-family: var(--caps); letter-spacing: 0.03em; color: var(--green); }
.skill-filter input, .skill-filter select {
  font: inherit;
  padding: 0.32rem 0.5rem;
  min-width: 13rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}
.skill-filter__count { margin: 0 0 0.35rem; color: var(--ink-soft); font-style: italic; }
.skill-index[hidden] { display: none; }
.skill-index td:first-child { white-space: nowrap; }
.skill-index__empty { font-style: italic; color: var(--ink-soft); }
.skill-index__empty[hidden] { display: none; }

/* markdown --- becomes a gilded rule with a leaf sprig at its heart.
   The gap the sprig sits in is a gap in the rule now, drawn as two half-width
   gradients that stop 4.75rem short of centre. It used to be one full-width
   gradient with an ::before patch of flat --paper laid over the middle, and
   because the body is textured that patch read as a rectangular seam around
   every ornament on the page. A mask would have been shorter and is wrong:
   a mask on hr also masks hr::after, which is the sprig.
   (No ::before here any more; print.css still names it, harmlessly.) */
hr {
  border: none;
  height: 1px;
  margin: 2.4rem 0;
  background:
    linear-gradient(90deg, transparent, var(--gold-dim) 30%, var(--gold-dim)) left center / calc(50% - 4.75rem) 100% no-repeat,
    linear-gradient(90deg, var(--gold-dim), var(--gold-dim) 70%, transparent) right center / calc(50% - 4.75rem) 100% no-repeat;
  position: relative;
  overflow: visible;
}
hr::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8.75rem;
  height: 1.5rem;
  -webkit-mask: var(--orn-hr) center / contain no-repeat;
  mask: var(--orn-hr) center / contain no-repeat;
  background-color: var(--gold);
}

dl dt { font-family: var(--caps); letter-spacing: 0.03em; color: var(--green); margin-top: 0.6rem; }
dl dd { margin: 0 0 0.4rem; }

/* ---------- shared ornament partials (inline SVG) ---------- */
.orn { display: block; margin: 0 auto; color: var(--gold); }
.orn--rule { max-width: 26rem; width: 100%; }
.orn--divider { max-width: 13rem; width: 100%; }
.orn--arch { max-width: 30rem; width: 100%; }

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0.65rem 1.2rem calc(0.65rem + 13px);
  border-bottom: 1px solid var(--gold-dim);
  background-color: var(--paper-raised);
  background-image: var(--texture);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 9px;
  -webkit-mask: var(--orn-band) left center / auto 100% repeat-x;
  mask: var(--orn-band) left center / auto 100% repeat-x;
  background-color: var(--gold);
  opacity: 0.9;
  pointer-events: none;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.75rem;
  text-decoration: none;
  color: var(--heading);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.wordmark::before {
  content: "";
  width: 1.5rem;
  height: 0.9rem;
  -webkit-mask: var(--orn-leaf) center / contain no-repeat;
  mask: var(--orn-leaf) center / contain no-repeat;
  background-color: var(--gold);
  transform: scaleX(-1) rotate(8deg);
}
.site-nav { display: flex; gap: 1.1rem; }
.site-nav a {
  font-family: var(--caps);
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.15rem 0.2rem;
  border-bottom: 2px solid transparent;
}
.site-nav a[aria-current], .site-nav a:hover { color: var(--accent); border-bottom-color: var(--gold); }
.header-search { margin-left: auto; }
.header-search input {
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 1px 2px rgba(43, 33, 20, 0.12);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  width: 11rem;
}
.header-search input:focus { border-color: var(--gold); outline: none; }
.theme-toggle {
  font-size: 1.2rem;
  background: none;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  color: var(--gold-text);
  width: 2.2rem;
  height: 2.2rem;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold-bright); }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--caps);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 0.25rem 0.7rem;
}
.mobile-nav nav {
  position: absolute;
  right: 0;
  top: 2.4rem;
  display: grid;
  gap: 0.4rem;
  background: var(--paper-raised);
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 2px var(--paper-raised), inset 0 0 0 3px var(--gold-dim), var(--shadow);
  border-radius: 3px;
  padding: 0.8rem 1.2rem;
  min-width: 9rem;
}
.mobile-nav nav a { font-family: var(--caps); text-decoration: none; }

/* ---------- shell / sidebar ---------- */
.shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2.5rem;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.8rem 1.2rem 3rem;
}
.shell--single { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.sidebar { font-size: 0.95rem; }
.sidebar summary {
  font-family: var(--caps);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--heading);
  cursor: pointer;
  margin-bottom: 0.4rem;
}
.sidebar ol { list-style: none; margin: 0; padding: 0 0 0 0.2rem; }
.sidebar li { margin: 0.28rem 0; }
.sidebar a { text-decoration: none; color: var(--ink-soft); }
.sidebar a:hover { color: var(--accent); }
.sidebar a[aria-current] { color: var(--accent); font-weight: bold; }
.sidebar__sub { padding-left: 1rem !important; border-left: 1px solid var(--gold-dim); margin-left: 0.3rem !important; }
.sidebar details summary { font-size: 0.85rem; color: var(--ink-soft); margin: 0.2rem 0; }

main { min-width: 0; max-width: 70ch; }
.crumb { font-family: var(--caps); font-size: 0.9rem; letter-spacing: 0.06em; margin: 0; color: var(--gold-text); }
.crumb a { text-decoration: none; color: var(--ink-soft); }
.crumb a:hover { color: var(--accent); }
.lede { font-size: 1.2rem; font-style: italic; color: var(--ink-soft); }
.print-action button {
  font-family: var(--caps);
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
}
.print-action button:hover { border-color: var(--gold); }

/* illuminated drop cap on lore chapter openers
   (nation chapters open lede → pull-quote → first paragraph) */
.shell main > p.lede + p::first-letter,
.shell main > p.lede + blockquote + p::first-letter,
.shell main > h1 + p:not(.lede):not(.print-action)::first-letter {
  font-family: var(--display);
  font-size: 4.05em;
  float: left;
  line-height: 0.78;
  padding: 0.04em 0.12em 0 0;
  color: var(--red);
  text-shadow: 0.055em 0.055em 0 var(--gold-dim);
}

/* ---------- framed panels: cards & infobox share the engraved treatment ---------- */
.card, .home-card, .infobox, .toc {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 3px var(--paper-raised),
    inset 0 0 0 4px var(--gold-dim),
    var(--shadow);
}
.card::before, .home-card::before, .infobox::before, .toc::before,
.card::after, .home-card::after, .infobox::after, .toc::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  -webkit-mask: var(--orn-corner) center / contain no-repeat;
  mask: var(--orn-corner) center / contain no-repeat;
  background-color: var(--gold);
  pointer-events: none;
}
.card::before, .home-card::before, .infobox::before, .toc::before { top: 5px; left: 5px; }
.card::after, .home-card::after, .infobox::after, .toc::after { bottom: 5px; right: 5px; transform: rotate(180deg); }

/* ---------- infobox (nation pages) ---------- */
.infobox {
  float: right;
  width: 13.5rem;
  margin: 0 0 1rem 1.4rem;
  padding: 1.05rem 1.15rem 1.15rem;
  font-size: 0.92rem;
}
.infobox__flag {
  height: 1.05rem;
  margin: 0 0 0.7rem;
  background: var(--nation-color, var(--accent));
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
}
.infobox .orn--divider { max-width: 9rem; margin-bottom: 0.4rem; }
.infobox dl { margin: 0; }
.infobox dl dt { margin-top: 0.5rem; }

/* ---------- generated "See also" (tools/see-also.mjs) ---------- */
/* Deliberately not a framed panel. These blocks are a footnote to the section
   above them — one on every nation page and one under each of the six Domains —
   and six engraved boxes down one chapter would read as six more cards. */
.see-also {
  margin: 1.5rem 0 2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--gold-dim);
  font-size: 0.95rem;
}
.see-also__title {
  margin: 0 0 0.5rem;
  font-family: var(--caps);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--heading);
}
.see-also dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
}
.see-also dt {
  font-family: var(--caps);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.see-also dd { margin: 0; }

/* ---------- "on this page" contents ---------- */
.toc {
  margin: 1.5rem 0 2rem;
  padding: 0.75rem 1.25rem 0.75rem 2.35rem;
  font-size: 0.95rem;
}
.toc[open] { padding-bottom: 1.15rem; }
.toc > summary {
  font-family: var(--caps);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--heading);
  cursor: pointer;
}
.toc > summary::marker { color: var(--gold-text); }
/* Core Rules alone has 96 headings — cap the open panel so the contents stay a
   lookup aid instead of burying the chapter it belongs to. */
.toc > nav {
  margin-top: 0.7rem;
  max-height: min(26rem, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.toc__list, .toc__sub { list-style: none; margin: 0; padding: 0; }
.toc__list > li { margin: 0.45rem 0; }
.toc__list > li > a {
  font-family: var(--caps);
  letter-spacing: 0.03em;
  color: var(--ink);
  text-decoration: none;
}
.toc__sub {
  margin: 0.25rem 0 0.7rem 0.15rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--gold-dim);
}
.toc__sub li { margin: 0.16rem 0; break-inside: avoid; }
.toc__sub a { color: var(--ink-soft); text-decoration: none; font-size: 0.94em; }
.toc__sub--wide {
  columns: 11rem auto;
  column-gap: 1.6rem;
  column-rule: 1px solid var(--gold-dim);
}
.toc a:hover { color: var(--accent); text-decoration: underline; }
.toc a:focus-visible { border-radius: 2px; }

/* ---------- cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.1rem;
  margin: 1.8rem 0;
}
.card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: 1.05rem 1.2rem;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.card:hover, .home-card:hover {
  color: var(--ink);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 3px var(--paper-raised),
    inset 0 0 0 4px var(--gold),
    0 4px 10px rgba(30, 24, 12, 0.25);
}
.card:hover::before, .card:hover::after,
.home-card:hover::before, .home-card:hover::after { background-color: var(--gold-bright); }
.card h2 { font-family: var(--display); font-size: 1.3rem; margin: 0 0 0.3rem; background: none; padding: 0; }
.card p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.card--nation { border-top: 4px solid var(--nation-color, var(--edge)); }

/* ---------- home ---------- */
.home { max-width: 68rem; margin: 0 auto; padding: 2.8rem 1.2rem 3rem; }
.hero { text-align: center; margin-bottom: 3rem; }
.hero .orn--arch { margin-bottom: -0.6rem; }
.hero__kicker {
  font-family: var(--caps);
  letter-spacing: 0.22em;
  font-size: 1.02rem;
  color: var(--gold-text);
  margin: 0;
}
.hero h1 {
  font-size: clamp(3.2rem, 9vw, 5.4rem);
  margin: 0.1rem 0 0.4rem;
  color: var(--heading);
  letter-spacing: 0.02em;
  text-shadow: 0.022em 0.03em 0 var(--gold-dim);
}
.hero__tagline { font-size: 1.28rem; font-style: italic; color: var(--ink-soft); max-width: 38rem; margin: 0 auto 1.1rem; }
.hero .orn--rule { margin-bottom: 1.2rem; }
.button {
  display: inline-block;
  font-family: var(--caps);
  letter-spacing: 0.04em;
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-bg);
  box-shadow: inset 0 0 0 2px var(--btn-bg), inset 0 0 0 3px rgba(246, 238, 218, 0.55), var(--shadow);
  border-radius: 3px;
  padding: 0.55rem 1.4rem;
  margin: 0.25rem;
}
.button:hover { filter: brightness(1.12); color: var(--btn-ink); }
.button--ghost {
  background: none;
  color: var(--accent);
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--gold-dim);
}
.button--ghost:hover { color: var(--accent-soft); border-color: var(--gold-bright); filter: none; }
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin-bottom: 3rem;
}
.home-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: 1.5rem 1.6rem;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.home-card h2 { margin: 0 0 0.4rem; background: none; padding: 0; }
.home-card p { margin: 0; color: var(--ink-soft); }
.home-map { max-width: 56rem; margin: 0 auto; }

/* ---------- come play ---------- */
/* The block that tells a reader Numina is a thing they can attend. It sits on
   the home page, the New to Numina landing page and the foot of New Players
   Start Here, and carries no date, price or registration mechanic: every one of
   those lives behind the three links. */
.come-play {
  max-width: 44rem;
  margin: 0 auto 3rem;
  padding: 1.6rem 1.8rem;
  background: var(--paper-raised);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow);
  text-align: left;
}
.come-play h2 { margin: 0 0 0.6rem; background: none; padding: 0; }
.come-play p { margin: 0 0 0.9rem; }
.come-play__links { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.come-play__links li { margin: 0 0 0.55rem; padding-left: 1.1rem; text-indent: -1.1rem; }
.come-play__links a { font-family: var(--caps); letter-spacing: 0.02em; }
.come-play__tip { margin: 0; font-style: italic; color: var(--ink-soft); }
.hero__plain { max-width: 40rem; margin: 0 auto 1.2rem; color: var(--ink-soft); }
@media (max-width: 34rem) {
  .come-play { padding: 1.2rem 1.1rem; }
}

/* ---------- world map ---------- */
.world-map { margin: 2rem 0; }
.world-map svg {
  display: block;
  box-shadow: var(--shadow), 0 0 0 1px var(--gold-dim);
  background: var(--map-paper);
}
.map-sea { fill: var(--map-paper); }
.map-grain { opacity: 0.55; pointer-events: none; }
.map-land { fill: var(--map-paper-deep); stroke: var(--map-ink); stroke-width: 2.2; }
.map-coast { fill: none; stroke: var(--map-sea-line); pointer-events: none; }
.map-coast--1 { stroke-width: 6; stroke-dasharray: 2 5; opacity: 0.5; }
.map-coast--2 { stroke-width: 13; stroke-dasharray: 1 7; opacity: 0.3; }
.map-coast--3 { stroke-width: 20; stroke-dasharray: 1 10; opacity: 0.16; }
.map-waves use, .map-waves path { stroke: var(--map-sea-line); fill: none; opacity: 0.55; }
.map-decor { pointer-events: none; }
.map-decor use, .map-decor path { stroke: var(--map-ink); fill: var(--map-paper-deep); opacity: 0.75; }
.map-decor .beast-line { fill: none; stroke: var(--map-ink); stroke-width: 1.8; stroke-linecap: round; }
.map-decor .beast-solid { fill: var(--map-paper-deep); stroke: var(--map-ink); stroke-width: 1.4; }
.map-decor .beast-sail { fill: var(--map-paper); stroke: var(--map-ink); stroke-width: 1.1; }
.map-decor .beast-eye { fill: var(--map-ink); stroke: none; }
.map-region path {
  fill: var(--nation-color, var(--edge));
  fill-opacity: 0.5;
  stroke: var(--map-ink);
  stroke-width: 1;
  stroke-opacity: 0.75;
  filter: url(#map-rough);
  transition: fill-opacity 120ms ease;
}
.map-region text {
  font-family: var(--caps);
  font-size: 18px;
  letter-spacing: 0.6px;
  fill: var(--map-ink);
  paint-order: stroke;
  stroke: var(--map-paper);
  stroke-width: 4px;
  pointer-events: none;
}
.map-region:hover path { fill-opacity: 0.72; stroke: var(--map-ink); stroke-width: 2; stroke-opacity: 1; }
.map-region:focus-visible { outline: none; }
.map-region:focus-visible path { fill-opacity: 0.72; stroke: var(--map-gold); stroke-width: 3; stroke-opacity: 1; }
.map-frame { pointer-events: none; }
.map-frame rect { fill: none; }
.map-frame .frame-outer { stroke: var(--map-ink); stroke-width: 2.5; }
.map-frame .frame-inner { stroke: var(--map-gold); stroke-width: 1.2; }
.map-frame .frame-corner { fill: none; stroke: var(--map-gold); stroke-width: 1.8; }
.map-frame .frame-corner-leaf { fill: var(--map-gold); stroke: none; }
.map-compass path, .map-compass circle, .map-compass line { stroke: var(--map-ink); }
.map-compass .compass-dark { fill: var(--map-ink); stroke: none; }
.map-compass .compass-light { fill: var(--map-gold); stroke: none; }
.map-compass .compass-ring { fill: none; stroke: var(--map-ink); stroke-width: 1.2; }
.map-compass text { font-family: var(--caps); font-size: 17px; fill: var(--map-ink); }
.map-cartouche .cartouche-scroll { fill: var(--map-paper); stroke: var(--map-ink); stroke-width: 2; }
.map-cartouche .cartouche-inner { fill: none; stroke: var(--map-gold); stroke-width: 1.1; }
.map-cartouche .cartouche-curl { fill: var(--map-paper-deep); stroke: var(--map-ink); stroke-width: 1.6; }
.map-cartouche .cartouche-sprig { fill: var(--map-gold); stroke: none; }
.map-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 4px;
  fill: var(--map-ink);
}
.map-subtitle { font-family: var(--caps); font-size: 12.5px; letter-spacing: 2px; fill: var(--map-ink); }
.world-map figcaption { font-size: 0.9rem; color: var(--ink-soft); text-align: center; margin-top: 0.55rem; font-style: italic; }
.world-map__note { font-size: 0.82rem; }
.world-map--home .map-region { pointer-events: auto; }

/* ---------- timeline ---------- */
.timeline {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 6.4rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-dim) 2rem, var(--gold-dim) calc(100% - 2rem), transparent);
}
.timeline__group { list-style: none; }
.timeline__events { list-style: none; margin: 0; padding: 0; }
/* An h2 whose own box is only a sticky positioner — the chip inside it carries
   every visual property, so the heading rules above must not reach through. */
.timeline__era {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  margin: 1.8rem 0 0.9rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
}
.timeline__era span {
  display: inline-block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--heading);
  background: var(--paper-raised);
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 2px var(--paper-raised), inset 0 0 0 3px var(--gold-dim), var(--shadow);
  border-radius: 2px;
  padding: 0.14rem 1.1rem;
}
.timeline__event {
  display: grid;
  grid-template-columns: 5.4rem 1fr;
  gap: 1.6rem;
  margin: 0.9rem 0;
  position: relative;
}
.timeline__event::before {
  content: "";
  position: absolute;
  left: 6.04rem;
  top: 0.42rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--nation-color, var(--ink-soft));
  border: 2px solid var(--gold-dim);
  box-shadow: 0 0 0 2px var(--paper);
}
.timeline__date {
  font-family: var(--caps);
  text-align: right;
  color: var(--ink-soft);
  padding-top: 0.15rem;
}
.timeline__body { padding-left: 0.6rem; }
.timeline__body h3 { margin: 0 0 0.2rem; }
.timeline__body p { margin: 0; color: var(--ink-soft); }
.timeline__more { font-family: var(--caps); font-size: 0.85rem; white-space: nowrap; }
.timeline__nations {
  margin: 0.35rem 0 0;
  font-family: var(--caps);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--gold-dim);
  background-color: var(--paper-raised);
  background-image: var(--texture);
  text-align: center;
  padding: calc(1.2rem + 11px) 1rem 1.9rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-top: 3rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 9px;
  -webkit-mask: var(--orn-band) left center / auto 100% repeat-x;
  mask: var(--orn-band) left center / auto 100% repeat-x;
  background-color: var(--gold);
  opacity: 0.9;
  transform: scaleY(-1);
  pointer-events: none;
}
.site-footer .orn--rule { max-width: 20rem; margin-bottom: 0.7rem; opacity: 0.9; }
.site-footer p { margin: 0.2rem 0; }
.site-footer__fine { font-size: 0.8rem; font-family: var(--caps); letter-spacing: 0.04em; }

/* ---------- search: the page, and the modal ---------- */
/* Pagefind's Component UI exposes its whole surface as --pf-* variables, so
   theming it is this block and not a sheet of selector surgery — which is what
   the Default UI needed, and what used to be here.

   :root:root, not :root. pagefind-component-ui.css declares its own defaults on
   a bare :root and that sheet loads *after* main.css in both places it appears —
   a <link> in the body on /search/, and appended to <head> by
   js/search-modal.js everywhere else — so at equal specificity the vendor's
   values win and every line below does nothing. The one that proved it was
   --pf-text-muted: the result count kept Pagefind's #767676 and axe called it at
   3.65:1 on our paper, which is a real contrast failure shipped by a block that
   looked like it had set the colour. Doubling the selector is 0,2,0 and wins
   wherever the sheet lands. */
:root:root {
  --pf-font: var(--body);
  --pf-text: var(--ink);
  --pf-text-secondary: var(--ink-soft);
  --pf-text-muted: var(--ink-soft);
  --pf-background: var(--paper-raised);
  --pf-border: var(--gold-dim);
  --pf-border-focus: var(--gold);
  --pf-border-radius: 3px;
  --pf-hover: var(--paper-sunken);
  --pf-skeleton: var(--paper-sunken);
  --pf-skeleton-shine: var(--paper-raised);
  --pf-mark: var(--ink);
  --pf-outline-focus: var(--gold);
  --pf-input-font-size: 1rem;
  --pf-input-height: 2.4rem;
  --pf-result-title-font-size: 1.05rem;
  --pf-result-excerpt-font-size: 0.95rem;
  --pf-summary-font-size: 0.85rem;
  --pf-modal-max-width: 40rem;
  --pf-modal-backdrop: rgba(18, 13, 6, 0.62);
}
.search-page { margin-top: 1rem; }
.search-page pagefind-summary {
  display: block;
  font-family: var(--caps);
  letter-spacing: 0.04em;
  margin: 0.9rem 0 0.2rem;
}
/* The component draws its own mark; this is the one place the site's gold is
   worth forcing, because --pf-mark only sets the text colour. */
pagefind-results mark, pagefind-modal mark, pagefind-searchbox mark {
  background: var(--gold-dim);
  padding: 0 0.15em;
}

/* The header button that opens the modal. Ships hidden; js/search-modal.js
   unhides it and hides the form beside it. */
.search-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding: 0.3rem 0.55rem 0.3rem 0.9rem;
  font-family: var(--caps);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(43, 33, 20, 0.12);
  cursor: pointer;
}
.search-trigger:hover { border-color: var(--gold); }
.search-trigger[hidden] { display: none; }
.search-trigger__key {
  font-family: var(--caps);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  padding: 0 0.3rem;
}

/* ---------- responsive ---------- */
@media (max-width: 52rem) {
  /* The trigger goes with the form and the nav: below this width the mobile
     menu's Search link is the way in, and Ctrl+K still works. */
  .site-nav, .header-search, .search-trigger { display: none; }
  .theme-toggle { margin-left: auto; }
  .mobile-nav { display: block; margin-left: 0; }
  .shell { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .sidebar__disclosure { border: 1px solid var(--gold-dim); border-radius: 3px; padding: 0.5rem 0.9rem; }
  .sidebar__disclosure:not([open]) { padding-bottom: 0.5rem; }
  .infobox { float: none; width: auto; margin: 0 0 1.2rem; }
  .toc { padding-left: 2rem; }
  .toc__sub--wide { columns: auto; }
  .card::before, .home-card::before, .infobox::before, .toc::before,
  .card::after, .home-card::after, .infobox::after, .toc::after { width: 20px; height: 20px; }
  .orn--arch { max-width: 88vw; }
  .timeline::before { left: 0.5rem; }
  .timeline__event { grid-template-columns: 1fr; gap: 0.1rem; padding-left: 1.6rem; }
  .timeline__event::before { left: 0.14rem; }
  .timeline__date { text-align: left; }
  .timeline__era { position: static; }
  /* max-content + 1fr puts a long Excellency list in a column narrower than its
     shortest link once the shell is one column. Stack the labels instead. */
  .see-also dl { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .see-also dd { margin-bottom: 0.5rem; }

  /* The map scales with the viewport, so 18px inside a 1000-unit viewBox lands
     around 6px on a phone. Enlarge the nation labels and drop the decorative
     terrain, which is what they would otherwise collide with. */
  .map-region text { font-size: 28px; letter-spacing: 0; stroke-width: 6px; }
  .map-decor { display: none; }
}

@media (max-width: 30rem) {
  /* Below ~480px, 28px still only renders around 10px, and going larger is not
     an option: at 30px the longest names start overlapping their neighbors.
     The card grid under the map links every nation, so drop the labels here and
     let the map read as a color key instead. */
  .map-region text { display: none; }
}

/* ---------- Character Builder ---------- */
.builder[hidden] { display: none; }
.builder__unofficial {
  border: 1px solid var(--gold-dim);
  background: var(--paper-raised);
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
}
.builder__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin: 1rem 0 0.5rem;
  padding: 0.5rem 0.8rem;
  background: var(--paper-raised);
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 2px var(--paper-raised), inset 0 0 0 3px var(--gold-dim), var(--shadow);
}
.builder__summary { margin: 0; font-family: var(--caps); letter-spacing: 0.03em; }
.builder__summary-cp[data-exact="false"]::before { content: "\2248 "; }
.builder__summary-state { margin-left: 0.8rem; color: var(--green); }
.builder__summary-state[data-legal="false"] { color: var(--accent); }
.builder__actions { margin: 0; }
.builder__button {
  font: inherit;
  font-family: var(--caps);
  letter-spacing: 0.03em;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
}
.builder__button:hover { border-color: var(--gold); }
.builder__step { margin: 0 0 1.2rem; }
.builder__note { color: var(--ink-soft); font-style: italic; margin: 0.2rem 0 0.6rem; }
.builder__hint { color: var(--ink-soft); font-style: italic; }
.builder__group { margin: 1rem 0 0.3rem; }
.builder__cap { font-family: var(--caps); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--gold-text); margin-left: 0.5rem; }
.builder__choices, .builder__skills, .builder__attributes, .builder__typed { list-style: none; margin: 0; padding: 0; }
.builder__choice, .builder__skill, .builder__attribute {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 1rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--edge);
}
.builder__choice:last-child, .builder__skill:last-child, .builder__attribute:last-child { border-bottom: 0; }
.builder__skills li:nth-child(even), .builder__choices li:nth-child(even) { background: color-mix(in srgb, var(--paper-sunken) 42%, transparent); }
.builder__pick { display: flex; align-items: baseline; gap: 0.5rem; cursor: pointer; grid-column: 1; }
.builder__pick input[type="checkbox"], .builder__pick input[type="radio"] { flex: none; position: relative; top: 0.1em; accent-color: var(--accent); }
.builder__pick input[type="text"], .builder__pick input[type="number"] {
  font: inherit;
  padding: 0.25rem 0.5rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}
.builder__pick input[type="text"] { min-width: 14rem; }
.builder__pick input[type="number"] { width: 4.5rem; }
.builder__name { font-weight: bold; }
.builder__cost { font-family: var(--caps); font-size: 0.85rem; letter-spacing: 0.03em; color: var(--green); white-space: nowrap; }
.builder__verbal { grid-column: 1; font-style: italic; color: var(--accent); font-size: 0.92rem; }
.builder__desc { grid-column: 1; font-size: 0.92rem; color: var(--ink-soft); }
.builder__link {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  font-family: var(--caps);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--gold-text);
  white-space: nowrap;
}
.builder__link:hover { color: var(--gold-bright); text-decoration: underline; }
.builder__typed li { padding: 0.3rem 0.6rem; }
.builder__problems { margin: 0.4rem 0; padding-left: 1.2rem; color: var(--accent); }
.builder__problems li { margin: 0.2rem 0; }
.builder__headline { font-size: 1.15rem; }
.builder__unpriced, .builder__provisional {
  border-left: 3px solid var(--gold);
  padding: 0.2rem 0 0.2rem 0.9rem;
  margin: 0.8rem 0;
}
.builder__unpriced ul, .builder__provisional ul { margin: 0.3rem 0; }
.builder__legal[data-legal="true"] { color: var(--green); }
.builder__legal[data-legal="false"] { color: var(--accent); }
.builder__bill { display: table; }
.builder__share { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sheet {
  background: var(--paper-raised);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  line-height: 1.35;
}
.sheet__title { font-family: var(--caps); font-size: 1.1rem; letter-spacing: 0.04em; margin: 0; }
.sheet__unofficial { margin: 0.1rem 0 0.4rem; font-style: italic; color: var(--ink-soft); font-size: 0.85rem; }
.sheet__blanks { margin: 0.3rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.sheet__blank-label { font-weight: bold; }
.sheet__blank-line { display: inline-block; width: 9rem; border-bottom: 1px solid var(--ink-soft); vertical-align: baseline; }
.sheet__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.2rem 1rem; margin: 0.4rem 0; }
.sheet__choice dt { font-weight: bold; }
.sheet__choice dd { margin: 0; }
.sheet__none { color: var(--ink-soft); }
.sheet__skills, .sheet__attributes { display: table; width: 100%; font-size: 0.85rem; margin: 0.5rem 0; }
.sheet__skills th, .sheet__skills td, .sheet__attributes th, .sheet__attributes td { padding: 0.15rem 0.4rem; }
.sheet__skill { font-weight: bold; }
.sheet__cp { white-space: nowrap; }
.sheet__verbal { font-style: italic; color: var(--accent); }
.sheet__attributes td { text-align: center; font-size: 1.05rem; }
.sheet__cp-line { margin: 0.3rem 0; }
.sheet__cp-line[data-exact="false"]::before { content: "\2248 "; }
.sheet__unpriced, .sheet__provisional { margin: 0.2rem 0; color: var(--ink-soft); }
.sheet__problems { margin: 0.2rem 0; color: var(--accent); }
.sheet__url { font-size: 0.75rem; color: var(--ink-soft); word-break: break-all; margin: 0.4rem 0 0; }
.builder__share input {
  flex: 1 1 16rem;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}
@media (max-width: 40rem) {
  .builder__choice, .builder__skill, .builder__attribute { grid-template-columns: minmax(0, 1fr); }
  .builder__link { grid-column: 1; grid-row: auto; }
}

/* --- The print packet and the offline kit ---------------------------------- */

/* The banner offline.js builds. It is inserted after the skip link so the skip
   link stays the first focusable thing on the page. */
.offline-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  background: var(--paper-raised);
  border-bottom: 1px solid var(--gold-dim);
  font-size: 0.95rem;
}
.offline-banner[hidden] { display: none; }
.offline-banner__text { margin: 0; flex: 1 1 20rem; }
.offline-banner__action, .offline-banner__dismiss {
  font-family: var(--caps);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
}
.offline-banner__action:hover, .offline-banner__dismiss:hover { border-color: var(--gold); }
.offline-banner__dismiss { color: var(--ink-soft); }

.packet-button {
  font-family: var(--caps);
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
}
.packet-button:hover { border-color: var(--gold); }
.packet-button[disabled] { opacity: 0.55; cursor: default; }
.packet-prebuilt__list { list-style: none; margin: 0; padding: 0; }
.packet-prebuilt__item {
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 0.6rem 0.9rem;
  margin: 0.6rem 0;
  background: var(--paper-raised);
}
.packet-prebuilt__item h3 { margin: 0 0 0.2rem; }
.packet-prebuilt__item p { margin: 0.2rem 0; }
.packet-prebuilt__what { font-family: var(--caps); font-size: 0.85rem; letter-spacing: 0.03em; color: var(--gold-text); }
.packet-form[hidden] { display: none; }
.packet-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.5rem 0;
  background: var(--paper);
  border-bottom: 1px solid var(--gold-dim);
}
.packet-bar__count { margin: 0; font-family: var(--caps); letter-spacing: 0.03em; }
.packet-bar__actions { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.packet-group { border: 1px solid var(--gold-dim); border-radius: 4px; margin: 1rem 0; padding: 0.4rem 0.9rem 0.7rem; }
.packet-group legend { font-family: var(--caps); letter-spacing: 0.05em; color: var(--heading); padding: 0 0.4rem; }
.packet-choices { list-style: none; margin: 0; padding: 0; }
.packet-choice {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.22rem 0.2rem;
  border-bottom: 1px solid var(--gold-dim);
}
.packet-choice:last-child { border-bottom: 0; }
.packet-choice:nth-child(even) { background: color-mix(in srgb, var(--paper-sunken) 42%, transparent); }
.packet-choice label { display: flex; align-items: baseline; gap: 0.5rem; cursor: pointer; flex: 1 1 auto; }
.packet-choice input[type="checkbox"] { flex: none; position: relative; top: 0.1em; accent-color: var(--accent); }
.packet-choice__link { font-size: 0.85rem; color: var(--ink-soft); }
.packet-offline { border: 1px solid var(--gold-dim); border-radius: 4px; padding: 0.6rem 0.9rem; margin: 1.4rem 0; }
.packet-offline__status { font-style: italic; color: var(--ink-soft); }
.packet-offline__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.packet-doc[hidden] { display: none; }
.packet-doc {
  margin-top: 1.6rem;
  border-top: 2px solid var(--gold-dim);
  padding-top: 1rem;
}
.packet-doc__message { font-style: italic; color: var(--ink-soft); }
.packet-cover { text-align: center; padding: 1.2rem 0; border-bottom: 1px solid var(--gold-dim); }
.packet-cover__site { font-family: var(--caps); letter-spacing: 0.2em; text-transform: uppercase; margin: 0; color: var(--gold-text); }
.packet-cover__title { margin: 0.3rem 0; }
.packet-cover__note { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.packet-contents ol { padding-left: 1.4rem; }
.packet-chapter { margin-top: 2rem; }