/* civ.css — shared stylesheet for the static per-polity pages (/civ/<id>) and the
   /civ/ index. Generated pages link this one file instead of inlining styles so the
   ~2,800 pages stay small and the browser caches the chrome once.
   Palette = the site's light "Stone" tokens (styles.css --srf-*); the map figure is
   drawn in the paper-atlas palette (src/paper.js) by tools/build-civ-pages.js. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800;
  font-display: swap; src: url('/fonts/PlusJakartaSans-var.woff2') format('woff2'); }
:root { --bg:#f1eee6; --ink:#282419; --dim:#6d6759; --accent:#9c4a31;
  --edge:#cfcaba; --card:#f7f5ef; --kbd:rgba(40,36,25,.07); }
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.55; padding: 0 20px 60px; }
.wrap { max-width: 760px; margin: 0 auto; }
.site-link { display: inline-block; margin: 26px 12px 34px 0; color: var(--dim); text-decoration: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.site-link:hover { color: var(--accent); }
h1 { font-size: 42px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.lifespan { margin-top: 6px; font-size: 19px; color: var(--accent); font-weight: 700; }
.chips { margin: 14px 0 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dim); background: var(--kbd); border: 1px solid var(--edge); border-radius: 99px; padding: 4px 12px; }
.blurb { font-size: 19px; }
.fate { margin-top: 10px; color: var(--dim); font-style: italic; }
figure { margin: 34px 0; }
figure svg { width: 100%; height: auto; display: block; border: 1px solid var(--edge); border-radius: 10px; }
figcaption { margin-top: 8px; font-size: 12.5px; color: var(--dim); text-align: center; }
.cta { display: inline-block; margin: 4px 0 10px; background: var(--accent); color: #f1eee6;
  text-decoration: none; font-weight: 700; padding: 12px 22px; border-radius: 8px; }
.cta:hover { filter: brightness(1.08); }
h2 { margin: 44px 0 14px; font-size: 15px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--edge); padding-bottom: 8px; }
.frames { color: var(--dim); font-size: 15px; }
.frames strong { color: var(--ink); }
ul.events { list-style: none; }
ul.events li { display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--edge); }
.ev-year { flex: 0 0 66px; font-weight: 800; color: var(--accent); }
ul.books { list-style: none; display: grid; gap: 14px; }
.book { background: var(--card); border: 1px solid var(--edge); border-radius: 10px; padding: 14px 16px; }
.book a { text-decoration: none; color: inherit; display: block; }
.book-title { font-weight: 800; font-size: 16.5px; }
.book a .book-title:hover { color: var(--accent); }
.book-meta { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; }
.book-why { margin-top: 8px; font-size: 14px; }
.book.fiction { border-left: 3px solid var(--accent); }
ul.sources { font-size: 13.5px; color: var(--dim); padding-left: 18px; }
ul.sources a { color: inherit; }
footer { margin-top: 48px; font-size: 12px; color: var(--dim); border-top: 1px solid var(--edge); padding-top: 14px; }
footer a { color: inherit; }
/* /civ/ index */
.index-intro { font-size: 17px; max-width: 640px; }
ul.civ-index { list-style: none; column-width: 220px; column-gap: 28px; margin-top: 6px; }
ul.civ-index li { break-inside: avoid; padding: 3px 0; font-size: 15px; }
ul.civ-index a { color: inherit; text-decoration: none; font-weight: 600; }
ul.civ-index a:hover { color: var(--accent); }
.civ-years { color: var(--dim); font-size: 12.5px; white-space: nowrap; }