/* ══════════════════════════════════════════════════════════
   illuminated.css — the manuscript layer (design pass 2026-10-04)

   thefire.lol reads as the same object as the books. Everything
   here is taken from the series typesetting, not invented:

     type     EB Garamond (body) + Cinzel (titles, rubrics) — the
              books' families (typesetting/epub.css, fonts/README.md),
              self-hosted from /fonts/, OFL.
     capitals Henry Shaw, Alphabets, Numerals and Devices (1845),
              plate 46 — the books' digitised initial set
              (typesetting/illuminated/initials/), keyed for the web
              into /images/initials/. Placed by partials/illuminate.html.
     marginal plate 48 vine (Fust & Schoeffer Bible, 1462), keyed off
              its parchment into /images/ornaments/.
     flame    typesetting/flame-motif.tex — \flame, \flamerule,
              \tripleflame — its TikZ paths translated to SVG below.
     palette  ember #CC6600 (unchanged), rubric vermilion, the Hidden
              Fire's gilt #C9A84C, on a dark vellum ground.

   Loaded from partials/head.html right after main.css, so it
   restyles the shared components every layout uses. Bespoke
   layouts keep their scoped <style> blocks; they read the tokens.
   Delete this file and its <link> to fall back to the pre-pass look
   (main.css keeps its own tokens).
   ══════════════════════════════════════════════════════════ */

/* ── Faces ── */
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  size-adjust: 112%;   /* Garamond's x-height is 0.40 em; this keeps
                          small UI text as legible as the old sans */
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  size-adjust: 112%;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-SemiBold.woff2") format("woff2");
  font-weight: 600 800; font-style: normal; font-display: swap;
  size-adjust: 112%;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600 800; font-style: italic; font-display: swap;
  size-adjust: 112%;
}
@font-face {
  font-family: "Cinzel";
  src: url("/fonts/Cinzel-Regular.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("/fonts/Cinzel-Bold.woff2") format("woff2");
  font-weight: 600 900; font-style: normal; font-display: swap;
}

/* ── Tokens ── */
:root {
  --font-serif: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --font-text: var(--font-serif);
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-label: "Cinzel", "Trajan Pro", Georgia, serif;   /* rubric labels */
  /* --font-case (Courier) is kept for the profiles' case-file register only */

  --rubric: #E0573A;          /* vermilion: 4.5:1+ on every panel tier */
  --rubric-deep: #a8321f;
  --rubric-line: rgba(224, 87, 58, 0.35);
  --gilt: #C9A84C;            /* The Hidden Fire's gold leaf */
  --gilt-dim: rgba(201, 168, 76, 0.45);
  --gilt-line: rgba(201, 168, 76, 0.26);
  --gilt-faint: rgba(201, 168, 76, 0.10);
  --selection-bg: rgba(224, 87, 58, 0.42);
  --nav-bg: rgba(20, 16, 11, 0.93);

  /* \flame from flame-motif.tex (outer firecolor, inner firecolor!60!yellow, white core) */
  --flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 140'%3E%3Cpath d='M30 140C45 100 60 80 50 40C45 20 35 10 30 0C25 10 15 20 10 40C0 80 15 100 30 140Z' fill='%23CC6600' fill-opacity='.9'/%3E%3Cpath d='M30 130C38 105 45 90 40 65C37 50 32 45 30 40C28 45 23 50 20 65C15 90 22 105 30 130Z' fill='%23E0A300' fill-opacity='.8'/%3E%3Cpath d='M30 120C33 105 36 95 34 85C32 80 30 78 30 75C30 78 28 80 26 85C24 95 27 105 30 120Z' fill='%23fff' fill-opacity='.5'/%3E%3C/svg%3E");
  /* four-point gilt star — the manuscript corner mark (.ornate-box's ✦, drawn) */
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0L12 8L20 10L12 12L10 20L8 12L0 10L8 8Z' fill='%23C9A84C'/%3E%3C/svg%3E");
  /* vellum grain — fractal noise, no image request */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .64 0 0 0 0 .42 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --leaf: radial-gradient(ellipse 120% 70% at 50% 0%, rgba(201, 168, 76, 0.045), transparent 70%);
}

/* ── Ground: dark vellum ── */
body {
  font-family: var(--font-text);
  font-size: 1rem;
  background-color: var(--bg-primary);
  background-image:
    var(--grain),
    radial-gradient(ellipse 90% 32rem at 50% -8rem, rgba(204, 102, 0, 0.06), transparent 70%),
    radial-gradient(ellipse 140% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, fixed;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

/* ── Titles and rubrics ── */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
}
h1 { line-height: 1.18; }
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
}
h4 {
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--rubric);
}

/* prose numerals sit on the line like the book's (EB Garamond oldstyle) */
.content-body p, .content-body li, .content-body dd, blockquote {
  font-variant-numeric: oldstyle-nums;
}

a { text-underline-offset: 0.18em; }
::selection { background: var(--selection-bg); }

/* ── Rules: the books' \flamerule ── */
hr,
.fire-line-thin {
  height: 22px;
  border: none;
  background:
    var(--flame) center / 9px 21px no-repeat,
    linear-gradient(90deg, transparent, var(--gilt-dim)) left center / calc(50% - 18px) 1px no-repeat,
    linear-gradient(270deg, transparent, var(--gilt-dim)) right center / calc(50% - 18px) 1px no-repeat;
  opacity: 0.9;
}
/* the strip under the nav and above the footer: a double rule, gilt over ember */
.fire-line {
  height: 4px;
  border: none;
  background:
    linear-gradient(90deg, transparent, var(--gilt-dim) 15%, var(--gilt) 50%, var(--gilt-dim) 85%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--accent-dark) 12%, var(--accent) 50%, var(--accent-dark) 88%, transparent) bottom / 100% 2px no-repeat;
}

/* ── Fleuron divider: \tripleflame between gilt rules ── */
.ornament {
  height: 30px;
  max-width: 460px;
  margin: 2.75rem auto;
  font-size: 0;
  opacity: 0.95;
  background:
    var(--flame) calc(50% - 24px) 70% / 8px 18px no-repeat,
    var(--flame) center / 12px 28px no-repeat,
    var(--flame) calc(50% + 24px) 70% / 8px 18px no-repeat,
    linear-gradient(90deg, transparent, var(--gilt-dim)) left center / calc(50% - 44px) 1px no-repeat,
    linear-gradient(270deg, transparent, var(--gilt-dim)) right center / calc(50% - 44px) 1px no-repeat;
}
.ornament::before { content: none; }

/* ── The leaf: every long-form body is a manuscript page ──
   gilt hairline, inner rubric ruling, four gilt corner stars. */
.content-body {
  position: relative;
  background-color: var(--bg-raised);
  background-image:
    var(--star), var(--star), var(--star), var(--star),
    var(--leaf);
  background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), 0 0;
  background-size: 11px 11px, 11px 11px, 11px 11px, 11px 11px, 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid var(--gilt-line);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 5px var(--bg-raised),
    inset 0 0 0 6px var(--rubric-line),
    0 24px 60px -34px rgba(0, 0, 0, 0.9);
}
/* marginal vine in the outer gutter, where the page has one */
@media (min-width: 1280px) {
  .content-body.drop-cap::after {
    content: "";
    position: absolute;
    top: 2.5rem;
    left: -112px;
    width: 92px;
    height: 278px;
    background: url("/images/ornaments/vine-tail.webp") center / contain no-repeat;
    opacity: 0.82;
    pointer-events: none;
  }
}

/* ── Drop caps ──
   1. Typographic fallback (no incipit found): a rubric Cinzel capital. */
.drop-cap > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--rubric);
  text-shadow: 0 0 18px rgba(224, 87, 58, 0.22);
}
/* 2. An incipit was marked: ::first-letter stands down for the real capital */
.drop-cap.illum-on > p:first-of-type::first-letter {
  float: none;
  font: inherit;
  color: inherit;
  padding: 0;
  initial-letter: normal;
  text-shadow: none;
}
.incipit { --lh: 1.75em; }
.initial {
  float: left;
  position: relative;
}
/* the painted capital — Method B of typesetting/illuminated: larger than its square,
   hanging a little into the margin where a rubricator put it */
.initial--img {
  height: calc(var(--lh) * 3.55);
  aspect-ratio: var(--ini-ar, 1.15);
  margin: 0.32em 0.5em 0.1em -0.4em;
  background: var(--ini) center / contain no-repeat;
  color: transparent;
  line-height: 1;
  font-size: 1em;
  overflow: hidden;
  filter: drop-shadow(0 0 10px rgba(224, 87, 58, 0.18));
  user-select: text;
}
.initial--img::selection { color: transparent; }
/* the typographic capital for letters the Lombardic set cannot carry */
.initial--type {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.9em;
  line-height: 0.78;
  margin: 0.06em 0.09em 0 -0.02em;
  color: var(--rubric);
  text-shadow: 0 0 18px rgba(224, 87, 58, 0.22);
}
/* the rest of the opening line in small capitals, as the books' openers run */
.incipit::first-line {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
  color: var(--text-heading);
}

/* ── Rubrication inside the leaf ── */
.content-body h2 { color: var(--rubric); }
.content-body h3 { color: var(--text-heading); }
blockquote:not(blockquote blockquote) {
  font-family: var(--font-serif);
  border-left: 0;
  box-shadow: inset 3px 0 0 var(--gilt-dim), inset 6px 0 0 transparent, inset 7px 0 0 var(--rubric-line);
  background: linear-gradient(90deg, var(--gilt-faint), transparent 70%);
  padding-left: 1.6rem;
}
.content-body ul li::marker { color: var(--rubric); }
.content-body ol li::marker {
  color: var(--rubric);
  font-family: var(--font-display);
  font-size: 0.85em;
}
.content-body img { border-radius: 2px; }

/* ── Pull quote: a gloss in the margin's hand ── */
.pull-quote {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  color: var(--gilt);
}
.pull-quote::before {
  color: var(--rubric);
  opacity: 0.6;
  font-family: var(--font-display);
}

/* ── Panels and cards share the leaf's gilt edge ── */
.card, .book-card, .profile-card, .timeline-card, .leaderboard, .combat-card,
.related-card, .pager-link, .page-toc, .quiz-card, .quiz-crossnav, .timeline-legend {
  border-color: var(--gilt-line);
  background-image: var(--leaf);
}
.card:hover, .book-card:hover, .profile-card:hover, .timeline-card:hover,
.related-card:hover, .pager-link:hover {
  border-color: var(--gilt-dim);
}
.ornate-box { border-color: var(--gilt-line); }
.ornate-box::before, .ornate-box::after,
.quiz-card::before, .quiz-card::after { color: var(--gilt); opacity: 0.8; }
.book-card__title, .card h3, .card-title { font-family: var(--font-display); letter-spacing: 0.02em; }

/* ── Buttons: rubric labels on ember ── */
.btn, .email-capture input[type="submit"], .quiz-next {
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 2px;
}

/* ── Navigation ── */
.site-nav { border-bottom: 1px solid var(--gilt-line); }
.site-nav::before {
  background: linear-gradient(90deg, transparent, var(--accent-dark) 18%, var(--accent) 50%, var(--accent-dark) 82%, transparent);
}
.nav-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}
/* the wordmark ember becomes the books' flame */
.nav-brand-ember {
  width: 10px;
  height: 22px;
  border-radius: 0;
  background: var(--flame) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 5px rgba(204, 102, 0, 0.6));
}
.nav-links a {
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.nav-links a.active {
  color: var(--rubric);
  border-bottom-color: var(--rubric);
}
.nav-links a:hover { color: var(--accent-hover); }
/* Cinzel capitals run wider than the old lowercase sans: give the bar room on wide
   screens, tighten it in between, so the links stay on the brand's row */
.nav-links { gap: 1.25rem; }
@media (min-width: 1180px) {
  .nav-inner { max-width: 1120px; }
}
@media (min-width: 769px) and (max-width: 1179px) {
  .nav-links { gap: 0.85rem; }
  .nav-links a { font-size: 0.7rem; letter-spacing: 0.07em; }
}

/* ── Footer: the colophon ── */
.site-footer { position: relative; }
.site-footer .container::before {
  content: "";
  display: block;
  height: 30px;
  max-width: 260px;
  margin: 0 auto 1.6rem;
  background:
    var(--flame) calc(50% - 20px) 70% / 7px 16px no-repeat,
    var(--flame) center / 11px 26px no-repeat,
    var(--flame) calc(50% + 20px) 70% / 7px 16px no-repeat;
}
.footer-links a {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer-copy { color: var(--text-muted); font-size: 0.95rem; }
.footer-motto {
  color: var(--gilt);
  font-size: 1.05rem;
  opacity: 0.85;
}
.rss-icon { background: var(--accent); }

/* ── Email capture: the cartouche ── */
.email-capture {
  position: relative;
  background-color: var(--bg-raised);
  background-image: var(--leaf);
  border: 1px solid var(--gilt-line);
  border-radius: 2px;
  box-shadow: inset 0 0 0 5px var(--bg-raised), inset 0 0 0 6px var(--rubric-line);
  padding: 1.6rem 2rem 2rem;
}
/* the plate-48 vine spray crowns the form, in flow so it can never sit on the label */
.email-capture::before {
  content: "";
  display: block;
  width: 230px;
  max-width: 70%;
  height: 74px;
  margin: 0 auto 0.9rem;
  background: url("/images/ornaments/vine-spray.webp") center / contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
.email-capture label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text-primary);
}
.email-capture input[type="email"] {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  background: var(--bg-primary);
  border: 1px solid var(--gilt-line);
  border-radius: 2px;
}
.email-capture input[type="email"]::placeholder { color: var(--text-dim); }
.email-capture .rss-alt { color: var(--text-muted); font-size: 0.95rem; }

/* ── Page headers: title in capitals, a flame beneath ── */
.page-header h1, .prose-header h1 { color: var(--text-heading); }
.page-header .date { color: var(--text-muted); }
.page-header .book-ref { font-family: var(--font-serif); font-size: 1.05rem; }

/* ── Archive lists ── */
.archive-list a { font-family: var(--font-serif); font-size: 1.2rem; }
.archive-list .date { color: var(--text-muted); font-variant-numeric: oldstyle-nums; }
.archive-list li:nth-child(even) { background: rgba(201, 168, 76, 0.025); }

/* ── Hero: the frontispiece ── */
.hero h1 { font-family: var(--font-display); }
.hero .tagline { font-family: var(--font-serif); color: var(--text-secondary); font-size: 1.35rem; }
.hero .thesis { font-size: 1.2rem; }

/* ── Tables and code keep their registers ── */
pre { border-color: var(--border); border-radius: 2px; font-family: var(--font-mono); }
code { font-family: var(--font-mono); }

/* ── The legal-status record stays sober by rule (layouts/record/single.html):
      book type, no display capitals, no rubrication, no gilt ── */
.rec h1, .rec h2, .rec h3, .rec h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: normal;
}
.rec h4 { color: var(--text-heading); }
.rec blockquote { box-shadow: none; }

/* ── Phones ── */
@media (max-width: 768px) {
  .content-body {
    background-position: 5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), 0 0;
    background-size: 9px 9px, 9px 9px, 9px 9px, 9px 9px, 100% 100%;
    box-shadow: inset 0 0 0 4px var(--bg-raised), inset 0 0 0 5px var(--rubric-line);
  }
  .initial--img {
    height: calc(var(--lh) * 3.05);
    margin: 0.3em 0.4em 0 -0.15em;
  }
  .initial--type { font-size: 4.2em; }
  .nav-links a { font-size: 0.85rem; }
  .email-capture { padding: 1.3rem 1.1rem 1.5rem; }
  .email-capture::before { width: 200px; height: 64px; }
  .pull-quote { font-size: 1.2rem; }

  /* Cinzel capitals set about a third wider than the old Georgia: long titles step down */
  main .ccg-page .ccg-header h1 { font-size: 1.75rem; }

  /* Phone overflow guards — these three pages scrolled sideways at 390px before this pass
     (measured with CDP device metrics): the rankings table, a research card with an
     unbreakable title, a long raw link in the glossary. */
  .leaderboard { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .research-index .rsx-grid { grid-template-columns: minmax(0, 1fr); }
  .research-index .rsx-card { min-width: 0; overflow-wrap: anywhere; }
  main a { overflow-wrap: anywhere; }
  main table a { overflow-wrap: normal; }   /* names in a ranking must not split per letter */
}