/* ============================================================
   WIKI — shared look for every page under /wiki.

   The palette below is COPIED from main-ui-shell.css's :root,
   the same way changelog.html copies it, and for the same
   reason: these pages must stay openable from anywhere,
   including a plain file server, and must not break when the
   shell's CSS moves. If that palette changes, this file needs
   the same edit.

   This is the ONE shared file the wiki allows itself — the
   pages are otherwise plain HTML with no script at all. A wiki
   page is a document; it should not be able to break.
   ============================================================ */

:root {
  --stone: #2b2f36;
  --stone-dark: #1c1e23;
  --parchment: #e9d9ac;
  --parchment-dark: #d9c48c;
  --parchment-border: #7a5a30;
  --ink: #2b1d0e;
  --ink-soft: #6b5530;
  --gold: #b8860b;
  --gold-bright: #f2c14e;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 24px 16px 64px;
  background: var(--stone-dark);
  color: var(--ink);
  font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
  display: flex;
  justify-content: center;
}
.page { width: 100%; max-width: 760px; }

header.masthead {
  background: var(--stone);
  border: 1px solid #111316;
  border-radius: 8px 8px 0 0;
  padding: 22px 28px 20px;
  color: var(--parchment);
}
header.masthead h1 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}
header.masthead .sub {
  margin-top: 6px;
  font-size: 0.95rem;
  color: #a9b0ba;
  font-style: italic;
}
header.masthead .crumb {
  margin-bottom: 10px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b929c;
}
header.masthead .crumb a { color: var(--gold-bright); text-decoration: none; }
header.masthead .crumb a:hover { text-decoration: underline; }

.scroll {
  background: var(--parchment);
  border: 1px solid var(--parchment-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 26px 28px 34px;
}

.intro {
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 4px;
}
.intro + .intro { margin-top: 10px; }

.rule {
  border-bottom: 1px solid rgba(122,90,48,0.35);
  margin: 22px 0 20px;
}

h2.topic {
  font-size: 1.15rem;
  margin: 0 0 2px;
  letter-spacing: 0.02em;
}
section.topic + section.topic { margin-top: 26px; }
section.topic p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 10px 0 0;
}

/* The index's GROUP HEADINGS (2026-09-13). The flat list reached
   thirteen entries and stopped being scannable; these cut it into
   four. Deliberately quieter than a page's own h2.topic — this is
   furniture for finding something, not a heading anyone reads. */
h2.group {
  font-size: 0.82rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin: 28px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(122,90,48,0.3);
}
/* The first group sits under the intro rule, which is already a
   divider — so it does not need the extra air the others do. */
h2.group:first-of-type { margin-top: 4px; }
ul.topics + h2.group { margin-top: 26px; }

/* The index's list of topics. */
ul.topics { list-style: none; margin: 10px 0 0; padding: 0; }
ul.topics li {
  position: relative;
  padding: 8px 0 8px 20px;
  line-height: 1.5;
}
ul.topics li::before {
  content: '\2726';
  position: absolute;
  left: 2px;
  color: var(--gold);
}
ul.topics a {
  color: var(--ink);
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px solid var(--parchment-border);
}
ul.topics a:hover { color: var(--parchment-border); }
ul.topics .blurb {
  display: block;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-soft);
  font-weight: normal;
  margin-top: 2px;
}

/* A CHILD TOPIC in the index (2026-09-14). One page hanging off
   another rather than standing beside it — attributes-and-skills
   under character-creation. Nested visually instead of promoted to
   a fourteenth flat entry, because a reference list of every
   attribute is not a topic you go looking for; it is somewhere you
   arrive from the page that sent you. Keep these directly under
   their parent's <li>, never at the end of the group. */
ul.topics li.child {
  padding: 2px 0 8px 44px;
}
ul.topics li.child::before {
  content: '\21B3';
  left: 24px;
  color: var(--ink-soft);
}
ul.topics li.child a { font-weight: normal; }

/* THE ROSTER ENTRIES on attributes-and-skills.html (2026-09-14).
   Every <dl class="stats"> on that page is machine-written by
   tools/gen-wiki-attributes.js out of public/js/descriptions.js —
   so this styling has to survive a regenerate without being part
   of it. It is deliberately a definition list and not a table: the
   copy is sentences, and a two-column table of sentences reads
   worse at phone width than it looks in a mockup. */
h3.stat-group {
  font-size: 0.78rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin: 22px 0 0;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(122,90,48,0.25);
}
dl.stats { margin: 8px 0 0; }
dl.stats dt {
  font-weight: bold;
  font-size: 1.02rem;
  margin-top: 14px;
  letter-spacing: 0.01em;
}
dl.stats dd {
  margin: 3px 0 0;
  font-size: 0.98rem;
  line-height: 1.5;
}
/* The pairing line — "Governed by Might." It is the load-bearing
   fact on the page for anyone planning a build, but it is the same
   six words nineteen more times, so it is set quiet enough to skim
   past and findable enough to stop on. */
dl.stats dd.gov {
  margin-top: 2px;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* An aside: the short, concrete illustration beside a rule. */
.aside {
  margin: 14px 0 0;
  padding: 12px 16px;
  background: var(--parchment-dark);
  border-left: 3px solid var(--parchment-border);
  border-radius: 0 4px 4px 0;
  font-size: 0.97rem;
  line-height: 1.55;
}
.aside strong { letter-spacing: 0.01em; }

kbd {
  font-family: Georgia, serif;
  font-weight: bold;
  color: var(--gold);
  background: none;
  border: none;
  padding: 0;
  font-size: 1em;
}

footer.foot {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid rgba(122,90,48,0.35);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}
footer.foot a { color: var(--parchment-border); }

@media (max-width: 520px) {
  body { padding: 12px 8px 40px; }
  header.masthead, .scroll { padding-left: 18px; padding-right: 18px; }
}