/* Solbera's D&D 5e book fonts (CC BY-SA 4.0, see fonts/README.md). Each face is a real cut, and font-synthesis is off,
   so the browser never fakes bold or italic: Mr Eaves and Solbera Imitation only come in one weight. */
@font-face { font-family: "Bookinsanity"; src: url("fonts/bookinsanity-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bookinsanity"; src: url("fonts/bookinsanity-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Bookinsanity"; src: url("fonts/bookinsanity-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bookinsanity"; src: url("fonts/bookinsanity-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Mr Eaves Small Caps"; src: url("fonts/mr-eaves-small-caps.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Scaly Sans"; src: url("fonts/scaly-sans-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Scaly Sans"; src: url("fonts/scaly-sans-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Scaly Sans"; src: url("fonts/scaly-sans-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Solbera Imitation"; src: url("fonts/solbera-imitation.woff2") format("woff2"); font-display: swap; }

/* Two looks: Tome (light) is the default, Dungeon (dark) follows the OS when Settings says System, or is forced by
   data-theme="dark" (theme.js). Every theme difference is a token here, so nothing below needs a theme selector. */
:root {
  font-synthesis: none;
  --font-body: "Bookinsanity", "Bookman Old Style", "Iowan Old Style", Georgia, serif; /* reading and writing */
  --font-display: "Mr Eaves Small Caps", "Iowan Old Style", Georgia, serif; /* headings, rubrics, buttons */
  --font-ui: "Scaly Sans", -apple-system, "Segoe UI", system-ui, sans-serif; /* sidebar, labels, small print */
  --font-initial: "Solbera Imitation", "Mr Eaves Small Caps", Georgia, serif; /* drop caps (capitals only) */
}

/* Tome: an aged parchment book with dark-brown ink, red rubrics and a leather-bound sidebar. */
:root {
  color-scheme: light;
  --bg: #f1e6cc;
  --panel: #f8f0dc;
  --fg: #2b1d12;
  --muted: #5c4632;
  --line: #d8c59f;
  --control-border: #735637;
  --hover: #e7d8b6;
  --accent: #7f1610;
  --accent-text: #7f1610;
  --accent-soft: #ecd2bc;
  --on-accent: #fff;
  --link: #7f1610;
  --kind-npc: #1a3f63;
  --kind-loot: #553204;
  --kind-quest: #213f1b;
  --kind-mystery: #4b2b70;
  --kind-quote: #4c3b28;
  --selected: #623c1f;
  --selected-text: #fff3d9;
  --side-edge: #2c180d;
  --rule: #b99a6a;
  --seal: #8b1a14;
  --seal-hi: #b3382c;
  --seal-lo: #5e0f0b;
  --seal-edge: #4d0b08;
  --seal-text: #fdf0d8;
  --initial: #8b1a14;
  --stitch: rgb(233 195 116 / 0.35);
  /* The leather sidebar (and the Settings tab bar) is dark inside a light theme: light ink, gold tooling. */
  --side-fg: #f3e5c6;
  --side-muted: #ddc8a3;
  --side-line: #6e4932;
  --side-control-border: #b4915f;
  --side-hover: #5e3a25;
  --side-panel: #38200f;
  --side-accent-text: #e9c374;
  --side-accent-soft: #73502a;
  --side-link: #e9c374;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .23 0 0 0 0 .09 0 0 0 .4 -.17'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .36 0 0 0 0 .12 0 0 0 .35 -.14'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23m)'/%3E%3C/svg%3E");
  --surface-page: var(--grain), var(--mottle), radial-gradient(ellipse 110% 90% at 50% 40%, transparent 60%, rgb(122 80 30 / 0.1)), #f1e6cc;
  --surface-panel: var(--grain), #f8f0dc;
  --surface-side:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='l' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .04 0 0 0 0 .02 0 0 0 1.2 -.45'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23l)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgb(0 0 0 / 0.2), transparent 14%, transparent 86%, rgb(0 0 0 / 0.28)),
    radial-gradient(ellipse 140% 60% at 30% 20%, rgb(255 220 170 / 0.07), transparent 70%),
    #4a2c1c;
  --fleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cg fill='%238b1a14'%3E%3Cpath d='M22 2.5 26.5 7 22 11.5 17.5 7z'/%3E%3Cpath d='M15.5 7C12.5 3.6 7.5 3.4 3 6.6c4.6 1.7 9 1.8 12.5.4zM28.5 7c3-3.4 8-3.6 12.5-.4-4.6 1.7-9 1.8-12.5.4z'/%3E%3Ccircle cx='1.6' cy='7' r='1'/%3E%3Ccircle cx='42.4' cy='7' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
/* Dungeon: torchlit stone, parchment-toned text and candle-gold accents. The same block twice: for the OS setting (when
   Settings picks System) and when Settings forces dark. Keep both copies identical (theme.test.js checks). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #1d1b19;
    --panel: #27241f;
    --fg: #eadcbf;
    --muted: #b3a284;
    --line: #3b362f;
    --control-border: #958670;
    --hover: #322d27;
    --accent: #d2a04a;
    --accent-text: #e0b462;
    --accent-soft: #4b3a1c;
    --on-accent: #1d1b19;
    --link: #e6bb6a;
    --kind-npc: #9dbfe4;
    --kind-loot: #e3b86a;
    --kind-quest: #a6cf8f;
    --kind-mystery: #c9aaea;
    --kind-quote: #c4b69c;
    --selected: #3d311e;
    --selected-text: #f6e9cc;
    --side-edge: #080707;
    --rule: #6b5a3e;
    --seal: #8a2219;
    --seal-hi: #b13d2e;
    --seal-lo: #5a130d;
    --seal-edge: #c9963f;
    --seal-text: #fbe8c2;
    --initial: #f0c66e;
    --stitch: transparent;
    --side-fg: var(--fg);
    --side-muted: var(--muted);
    --side-line: var(--line);
    --side-control-border: var(--control-border);
    --side-hover: var(--hover);
    --side-panel: var(--panel);
    --side-accent-text: var(--accent-text);
    --side-accent-soft: var(--accent-soft);
    --side-link: var(--link);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .58 0 0 0 0 .52 0 0 0 .4 -.17'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
    --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23m)'/%3E%3C/svg%3E");
    --surface-page: var(--grain), var(--mottle), radial-gradient(ellipse 90% 55% at 50% 0%, rgb(230 168 80 / 0.07), transparent 70%), #1d1b19;
    --surface-panel: var(--grain), #27241f;
    --surface-side: var(--grain), var(--mottle), linear-gradient(90deg, transparent 80%, rgb(0 0 0 / 0.3)), #141312;
    --fleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cg fill='%23d2a04a'%3E%3Cpath d='M22 2.5 26.5 7 22 11.5 17.5 7z'/%3E%3Cpath d='M15.5 7C12.5 3.6 7.5 3.4 3 6.6c4.6 1.7 9 1.8 12.5.4zM28.5 7c3-3.4 8-3.6 12.5-.4-4.6 1.7-9 1.8-12.5.4z'/%3E%3Ccircle cx='1.6' cy='7' r='1'/%3E%3Ccircle cx='42.4' cy='7' r='1'/%3E%3C/g%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1d1b19;
  --panel: #27241f;
  --fg: #eadcbf;
  --muted: #b3a284;
  --line: #3b362f;
  --control-border: #958670;
  --hover: #322d27;
  --accent: #d2a04a;
  --accent-text: #e0b462;
  --accent-soft: #4b3a1c;
  --on-accent: #1d1b19;
  --link: #e6bb6a;
  --kind-npc: #9dbfe4;
  --kind-loot: #e3b86a;
  --kind-quest: #a6cf8f;
  --kind-mystery: #c9aaea;
  --kind-quote: #c4b69c;
  --selected: #3d311e;
  --selected-text: #f6e9cc;
  --side-edge: #080707;
  --rule: #6b5a3e;
  --seal: #8a2219;
  --seal-hi: #b13d2e;
  --seal-lo: #5a130d;
  --seal-edge: #c9963f;
  --seal-text: #fbe8c2;
  --initial: #f0c66e;
  --stitch: transparent;
  --side-fg: var(--fg);
  --side-muted: var(--muted);
  --side-line: var(--line);
  --side-control-border: var(--control-border);
  --side-hover: var(--hover);
  --side-panel: var(--panel);
  --side-accent-text: var(--accent-text);
  --side-accent-soft: var(--accent-soft);
  --side-link: var(--link);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .58 0 0 0 0 .52 0 0 0 .4 -.17'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23m)'/%3E%3C/svg%3E");
  --surface-page: var(--grain), var(--mottle), radial-gradient(ellipse 90% 55% at 50% 0%, rgb(230 168 80 / 0.07), transparent 70%), #1d1b19;
  --surface-panel: var(--grain), #27241f;
  --surface-side: var(--grain), var(--mottle), linear-gradient(90deg, transparent 80%, rgb(0 0 0 / 0.3)), #141312;
  --fleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cg fill='%23d2a04a'%3E%3Cpath d='M22 2.5 26.5 7 22 11.5 17.5 7z'/%3E%3Cpath d='M15.5 7C12.5 3.6 7.5 3.4 3 6.6c4.6 1.7 9 1.8 12.5.4zM28.5 7c3-3.4 8-3.6 12.5-.4-4.6 1.7-9 1.8-12.5.4z'/%3E%3Ccircle cx='1.6' cy='7' r='1'/%3E%3Ccircle cx='42.4' cy='7' r='1'/%3E%3C/g%3E%3C/svg%3E");
}


/* ---------- The website (scripts/build-site.mjs puts the app's fonts and theme tokens above this) ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  color: var(--fg);
  font: 18px/1.6 var(--font-body);
  overflow-wrap: break-word;
}
main { flex: 1; width: 100%; }
img { max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent-soft); }
h1, h2, h3 { color: var(--accent-text); font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; }
strong { font-weight: 700; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 2;
  padding: 6px 14px;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--fg);
  font: 18px var(--font-display);
}
.skip:focus { top: 10px; }
/* Note-kind icons (src/icons.js), as in the app. */
.icon {
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.3em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0 5px;
  border: 1px solid var(--control-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--panel);
  color: var(--fg);
  font: 0.8em/1.45 ui-monospace, Menlo, Consolas, monospace;
  text-align: center;
  white-space: nowrap;
}
code { padding: 1px 5px; border-radius: 4px; background: var(--hover); font: 0.84em ui-monospace, Menlo, Consolas, monospace; }
/* Ornamental divider: a centred fleuron between two rules. */
hr, .prose h1::after {
  content: "";
  display: block;
  height: 14px;
  margin: 18px auto;
  border: 0;
  background:
    var(--fleuron) center / 44px 14px no-repeat,
    linear-gradient(var(--rule), var(--rule)) left center / calc(50% - 30px) 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) right center / calc(50% - 30px) 1px no-repeat;
}
/* Illuminated initial: Solbera's drop-cap capital, as on the app's page titles. */
.title::first-letter { margin-right: 0.03em; color: var(--initial); font: 1.5em/1 var(--font-initial); }

/* ---------- Header and footer: the app's leather sidebar (stone in Dungeon), with its stitching ---------- */
.band {
  --fg: var(--side-fg);
  --muted: var(--side-muted);
  --line: var(--side-line);
  --link: var(--side-link);
  --accent-text: var(--side-accent-text);
  position: relative;
  background: var(--surface-side);
  color: var(--fg);
  color-scheme: dark;
}
.band::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed var(--stitch); pointer-events: none; }
header.band { border-bottom: 1px solid var(--side-edge); box-shadow: 0 2px 8px rgb(0 0 0 / 0.18); }
header.band::after { bottom: 5px; }
footer.band { border-top: 1px solid var(--side-edge); }
footer.band::after { top: 5px; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-top: 12px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-text); font: 27px/1 var(--font-display); letter-spacing: 0.03em; text-decoration: none; }
.brand img { width: 36px; height: 36px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4)); }
.nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; font: 20px/1.2 var(--font-display); letter-spacing: 0.04em; }
.nav a { display: inline-block; padding: 8px 0 6px; color: var(--fg); text-decoration: none; }
.nav a:hover { color: var(--accent-text); }
.nav a[aria-current="page"] { color: var(--accent-text); box-shadow: inset 0 -2px var(--accent-text); }
.foot { padding-top: 26px; padding-bottom: 30px; color: var(--muted); font: 15px/1.6 var(--font-ui); text-align: center; }
.foot .nav { justify-content: center; margin-bottom: 8px; }
.foot p { margin: 2px 0; }

/* ---------- Home ---------- */
.hero { padding-top: 52px; padding-bottom: 8px; text-align: center; }
.app-icon { display: block; width: 128px; height: 128px; margin: 0 auto; filter: drop-shadow(0 8px 12px rgb(40 15 5 / 0.32)); }
.hero .title { margin: 10px 0 0; font-size: clamp(56px, 11vw, 84px); line-height: 1.05; }
.hero hr { max-width: 440px; margin: 12px auto 16px; }
.pitch { margin: 0 0 8px; color: var(--fg); font: clamp(25px, 4.4vw, 32px)/1.2 var(--font-display); letter-spacing: 0.03em; }
.lede { max-width: 34em; margin: 0 auto 28px; font-size: 19.5px; }
.seals { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 0 18px; }
/* Once the page knows your system (see build-site.mjs), its button stands alone and the others become links. */
.seals.picked { flex-direction: column; align-items: center; gap: 10px; }
.seals.picked > .seal { min-width: 300px; padding: 13px 36px 12px; font-size: 26px; }
.also { margin: 0; color: var(--muted); font: 16px/1.5 var(--font-ui); }
[id] { scroll-margin-top: 16px; }
/* Wax seal: the primary actions, as in the app. */
.seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 200px;
  padding: 10px 26px 9px;
  border: 1px solid var(--seal-edge);
  border-radius: 999px;
  background: radial-gradient(ellipse 120% 150% at 35% 15%, var(--seal-hi), var(--seal) 55%, var(--seal-lo));
  color: var(--seal-text);
  font: 22px/1.15 var(--font-display);
  letter-spacing: 0.03em;
  text-decoration: none;
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.4);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 -2px 3px rgb(0 0 0 / 0.3), 0 2px 5px rgb(0 0 0 / 0.3);
}
.seal small { margin-top: 2px; font: 14px/1.3 var(--font-ui); letter-spacing: 0; }
.seal:hover { filter: brightness(1.08); }
.seal:active { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.45); }
.fine { max-width: 36em; margin: 0 auto; color: var(--muted); font: 16px/1.5 var(--font-ui); }
/* The screenshot, framed like a plate in a book. */
.plate { max-width: 1040px; margin: 36px auto 0; padding: 0 24px; }
.frame {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-panel);
  box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px var(--line), 0 18px 40px rgb(40 18 4 / 0.28);
}
.frame img { display: block; width: 100%; height: auto; border-radius: 1.2% / 1.8%; } /* clips the window's white corners */
figcaption { margin-top: 12px; color: var(--muted); font: italic 16px/1.5 var(--font-body); text-align: center; }
.section { padding-top: 52px; padding-bottom: 8px; }
.section-title { margin: 0; font-size: clamp(32px, 5.5vw, 42px); line-height: 1.15; text-align: center; }
.section-title + hr { max-width: 360px; margin: 12px auto 26px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.card {
  min-width: 0;
  padding: 12px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--line);
}
.card h3 { margin: 2px 0 10px; padding-bottom: 5px; border-bottom: 2px solid var(--rule); font-size: 22px; line-height: 1.25; letter-spacing: 0.04em; }
.card h3 .icon { margin-right: 0.35em; }
.card p { margin: 0 0 10px; font-size: 17px; line-height: 1.55; }
.card p:last-child { margin-bottom: 0; }
.prefixes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.prefixes li { display: flex; align-items: center; gap: 8px; }
.kind {
  padding: 0 7px 0 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--k) 14%, transparent);
  color: var(--k);
  font: 17px/24px var(--font-display);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.kind .icon { margin-right: 0.25em; }
.kind-npc { --k: var(--kind-npc); }
.kind-loot { --k: var(--kind-loot); }
.kind-quest { --k: var(--kind-quest); }
.kind-mystery { --k: var(--kind-mystery); }
.kind-quote { --k: var(--kind-quote); }
.section-lede { max-width: 34em; margin: -8px auto 22px; color: var(--muted); font: 16px/1.5 var(--font-ui); text-align: center; }
/* How it works: three numbered steps, the numbers in the drop-cap face. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 28px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: 58px; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -6px;
  width: 44px;
  color: var(--initial);
  font: 56px/1 var(--font-initial);
  text-align: center;
}
.steps h3 { margin: 0 0 4px; font-size: 23px; line-height: 1.25; letter-spacing: 0.04em; }
.steps p { margin: 0; font-size: 17px; line-height: 1.55; }
/* Questions: each one opens in place. */
.faq { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 4px;
  color: var(--accent-text);
  font: 21px/1.3 var(--font-display);
  letter-spacing: 0.03em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; flex: none; width: 1em; color: var(--muted); font: 22px/1 var(--font-ui); text-align: center; }
.faq details[open] summary::before { content: "\2212"; }
.faq summary:hover { color: var(--fg); }
.faq details p { margin: 0 0 14px; padding-left: calc(1em + 16px); font-size: 17px; line-height: 1.55; }
.closing { padding-bottom: 64px; text-align: center; }
.closing p { margin: 12px auto 22px; max-width: 32em; }

/* ---------- Guide and privacy policy ---------- */
.prose { max-width: 46rem; margin: 0 auto; padding: 44px 24px 64px; }
.prose h1 { margin: 0 0 24px; font-size: clamp(38px, 7vw, 50px); line-height: 1.1; text-align: center; }
.prose h1::after { margin: 16px 0 0; }
.prose h2 { margin: 40px 0 12px; padding-bottom: 4px; border-bottom: 2px solid var(--rule); font-size: 30px; line-height: 1.2; }
.prose h3 { margin: 28px 0 8px; font-size: 24px; line-height: 1.25; }
.prose :is(p, ul, ol) { margin: 0 0 14px; }
.prose :is(ul, ol) { padding-left: 1.4em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--accent-text); }
.prose blockquote { margin: 14px 0; padding: 2px 16px; border-left: 3px solid var(--accent); font-style: italic; }
.prose code { overflow-wrap: anywhere; }
.prose pre { margin: 0 0 16px; padding: 14px 16px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-panel); }
.prose pre code { padding: 0; background: none; overflow-wrap: normal; }
.table-wrap { margin: 0 0 18px; overflow-x: auto; }
/* Contents under a long page's title. */
.toc { margin: 0 0 28px; padding: 12px 20px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-panel); box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--line); }
.toc-title { margin: 0 0 6px; color: var(--accent-text); font: 22px/1.3 var(--font-display); letter-spacing: 0.04em; }
.prose .toc ol { margin: 0; padding-left: 1.5em; columns: 2 14em; column-gap: 28px; font: 16px/1.5 var(--font-ui); }
.prose .toc li { margin: 0 0 4px; break-inside: avoid; }
.prose table { width: 100%; border-collapse: collapse; font-size: 17px; }
.prose th { padding: 6px 12px; border-bottom: 2px solid var(--rule); color: var(--accent-text); font: 20px/1.3 var(--font-display); letter-spacing: 0.03em; text-align: left; }
.prose td { padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Striped rows, like the tables in the 5e books. */
.prose tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }

@media (max-width: 600px) {
  body { font-size: 17px; }
  .wrap, .plate { padding-left: 16px; padding-right: 16px; }
  .bar { justify-content: center; }
  .bar .nav { gap: 0 14px; font-size: 17px; }
  .hero { padding-top: 36px; }
  .lede { font-size: 18px; }
  .seal, .seals.picked > .seal { width: 100%; min-width: 0; max-width: 340px; }
  .steps li { padding-left: 50px; }
  .prose { padding: 32px 16px 48px; }
  .prose h2 { font-size: 27px; }
}