/* Lorekeeper — grimoire chrome. Locked visual system from DESIGN.md:
   IM Fell English (display) + Sorts Mill Goudy (body), parchment + iron-gall
   ink, B6 weighted-base frame, A7 inked stamps, B3 inset callouts. */

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Sorts+Mill+Goudy:ital@0;1&display=swap');

:root {
  --paper: #f4ead0;
  --paper-edge: #ece0c2;
  --ink: #2c2113;
  --ink-soft: #5b4a30;
  --oxblood: #5a2a1f;
  --indigo: #3c4a63;
  --rule: #b79b67;
  --rule-soft: rgba(122, 46, 38, 0.28);
  --hl: rgba(196, 150, 40, 0.42);
  --display: 'IM Fell English', Georgia, serif;
  --body: 'Sorts Mill Goudy', Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #241c14;
  background-image:
    radial-gradient(ellipse at 50% 0%, #322619 0%, #1c1610 80%);
  color: var(--ink);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.62;
  padding: 28px 16px 80px;
}

.sheet {
  position: relative;
  isolation: isolate;
  max-width: 860px;
  margin: 0 auto;
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 252, 240, 0.55), transparent 60%),
    radial-gradient(140% 120% at 100% 100%, rgba(120, 86, 40, 0.10), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  border: 1px solid var(--rule);
  border-bottom: 5px solid var(--oxblood);
  padding: 46px 54px 60px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

/* ---- Pinned table of contents ---- */
/* Lives outside the sheet, fixed to the left margin on wide screens. Tucked
   away below the breakpoint where there is no room beside the page. */
/* Sits on the dark page background, outside the parchment sheet, so it uses a
   light, warm palette for contrast rather than the dark inks used on paper. */
.toc {
  position: fixed;
  top: 40px;
  left: max(16px, calc((100vw - 860px) / 2 - 250px));
  width: 222px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  font-family: var(--display);
  color: #e7d6ad;
  padding-right: 8px;
}
.toc-head {
  font-style: italic;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c9a96a;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 169, 106, 0.45);
}
.toc-list { display: flex; flex-direction: column; }
.toc-link {
  font-size: 14.5px;
  line-height: 1.3;
  color: #d8c69e;
  text-decoration: none;
  padding: 3px 0 3px 10px;
  border-left: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.toc-link:hover { color: #f6ead0; }
.toc-link.toc-sub {
  font-style: italic;
  font-size: 13px;
  color: #b89968;
  margin-top: 6px;
  padding-left: 6px;
}
.toc-link.on {
  color: #f6ead0;
  border-left-color: #c9a96a;
}


/* Hide the pinned TOC where there is no margin room for it. */
@media (max-width: 1280px) {
  .toc { display: none; }
}

/* ---- Masthead / nav ---- */

.brand {
  font-family: var(--display);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 28px;
}
.brand a { color: var(--oxblood); text-decoration: none; }
.brand nav a { margin-left: 16px; border-bottom: 1px solid transparent; }
.brand nav a:hover { border-bottom-color: var(--rule-soft); }
.brand nav a.here { border-bottom-color: var(--oxblood); }

/* ---- Cover ---- */
.cover-title {
  font-family: var(--display);
  font-size: 68px;
  color: var(--oxblood);
  line-height: 1;
  margin: 18px 0 6px;
}
.cover-sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 21px;
  color: var(--indigo);
  margin-bottom: 30px;
}
.dateline {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  margin: 0 0 34px;
}
.contents { columns: 2; column-gap: 44px; }
.contents h2 {
  font-family: var(--display);
  font-size: 24px;
  color: var(--oxblood);
  margin: 0 0 10px;
  break-after: avoid;
}
.contents ul { list-style: none; padding: 0; margin: 0 0 26px; break-inside: avoid; }
.contents li { margin: 2px 0; }
.contents a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.contents a:hover { border-bottom-color: var(--rule-soft); }

/* ---- Section pages ---- */
.section-title {
  font-family: var(--display);
  font-size: 46px;
  color: var(--oxblood);
  margin: 6px 0 4px;
}
.group-head {
  font-family: var(--display);
  font-style: italic;
  font-size: 36px;
  color: var(--ink-soft);
  text-align: center;
  margin: 52px 0 0;
}

/* ---- Entity entry ---- */
.entry { position: relative; padding: 26px 0 6px; border-bottom: 1px solid var(--rule-soft); }
.entry:last-child { border-bottom: 0; }
.entry-name { font-family: var(--display); font-size: 34px; color: var(--oxblood); line-height: 1.05; margin: 0 0 2px; }
.entry-meta { font-family: var(--display); font-style: italic; font-size: 15px; color: var(--indigo); margin: 0 0 12px; }
.entry-meta a { color: var(--indigo); text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
.entry-body p { margin: 0 0 12px; }

/* Drop cap opens each timeline session entry (not glossary entries, where an
   every-other-one cap reads inconsistently). */
.timeline-body p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 56px;
  line-height: 0.7;
  float: left;
  color: var(--oxblood);
  padding: 6px 9px 0 0;
}

/* A7 inked stamp — faction mark, top-right of an entry. */
.stamp {
  position: absolute;
  top: 30px;
  right: 0;
  border: 1.5px solid var(--oxblood);
  color: var(--oxblood);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 9px 4px;
  transform: rotate(3deg);
  opacity: 0.78;
  text-decoration: none;
  max-width: 150px;
  text-align: center;
  line-height: 1.25;
}
.stamp:hover { opacity: 1; }

/* Deceased status stamp — struck in red, like a blood mark over the name. */
.stamp.deceased {
  color: #a11717;
  border-color: #a11717;
  transform: rotate(-2deg);
  letter-spacing: 1px;
  opacity: 0.82;
}

/* PC / NPC portrait token — floated right, circular, oxblood ring. */
.entry-portrait {
  float: right;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2.5px solid var(--oxblood);
  object-fit: cover;
  margin: 0 0 16px 24px;
  box-shadow: 0 2px 6px rgba(44,33,19,.25);
}

/* Cross-links within prose. */
.entry-body a, .x { color: var(--oxblood); text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
.entry-body a:hover { border-bottom-color: var(--oxblood); }

/* B3 inset callout — for later in-page asides. */
.callout {
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: 5px;
  background: rgba(255, 250, 235, 0.4);
  padding: 14px 18px;
  margin: 20px 6px;
}

/* "Mentioned in" backlinks footer. */
.backlinks {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 10px 0 0;
}
.backlinks a { color: var(--indigo); text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
.backlinks a:hover { border-bottom-color: var(--indigo); }

/* Hover preview card. */
.card-pop {
  position: fixed;
  z-index: 50;
  max-width: 264px;
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--oxblood);
  padding: 6px 12px 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.08s;
}
.card-pop.on { opacity: 1; }
.card-pop strong { display: block; font-family: var(--display); font-size: 17px; line-height: 1.15; color: var(--oxblood); margin-bottom: 1px; }
.card-pop span { display: block; font-family: var(--body); font-size: 13.5px; line-height: 1.32; color: var(--ink); }

/* Lesser-figures roster — compact list of marked-minor entries at section foot. */
.minor-roster { margin: 44px 0 6px; padding-top: 18px; border-top: 1px solid var(--rule); }
.minor-head {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.minor-list { list-style: none; padding: 0; margin: 0; }
.minor-entry {
  font-size: 16px;
  line-height: 1.42;
  color: var(--ink);
  padding: 5px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.minor-entry:last-child { border-bottom: 0; }
.minor-name { font-family: var(--display); color: var(--oxblood); }
.minor-entry a { color: var(--oxblood); text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
.minor-back { font-family: var(--display); font-style: italic; font-size: 13.5px; color: var(--ink-soft); }
.minor-back a { color: var(--indigo); }

/* Timeline. */
.timeline-lede { font-family: var(--display); font-style: italic; font-size: 19px; color: var(--ink-soft); margin: 0 0 24px; }
.timeline { position: relative; margin-left: 8px; padding-left: 30px; border-left: 2px solid var(--rule); }
.timeline-entry { position: relative; padding: 0 0 30px; }
.timeline-entry::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 12px;
  width: 11px;
  height: 11px;
  background: var(--oxblood);
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--rule);
}
.timeline-title { font-family: var(--display); font-size: 27px; color: var(--oxblood); margin: 0 0 8px; line-height: 1.1; }
.timeline-body p { margin: 0 0 10px; }
.timeline-body a { color: var(--oxblood); text-decoration: none; border-bottom: 1px solid var(--rule-soft); }

/* A6 printed marginalia / discovery badge. */
.margin-note {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  border-left: 2px solid var(--rule);
  padding-left: 10px;
  margin: 14px 0;
}

/* ---- Interactive map ---- */
/* The map page widens the sheet so the Witherwild has room to breathe. */
.sheet-wide { max-width: 1200px; }

.map-lede {
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

.map-wrap {
  position: relative;
  line-height: 0;
  border: 1px solid var(--rule);
  border-bottom: 4px solid var(--oxblood);
  box-shadow: inset 0 0 0 1px rgba(122, 46, 38, 0.12);
}
.map-img {
  display: block;
  width: 100%;
  height: auto;
  /* Warm the cool grey paper of the map render toward the parchment palette. */
  filter: sepia(0.16) contrast(1.02);
}

/* A pin is a zero-size anchor at the exact map coordinate; the dot and label
   are positioned off that point. The dot marks the place, the label names it. */
.map-pin {
  position: absolute;
  width: 0;
  height: 0;
  line-height: normal;
  text-decoration: none;
  z-index: 2;
}
.map-pin:hover { z-index: 5; }

.map-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
  background: var(--oxblood);
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--rule), 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: transform 0.1s;
}
.map-pin:hover .map-dot { transform: translate(-50%, -50%) scale(1.25); }

.map-label {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: var(--oxblood);
  background: rgba(244, 234, 208, 0.86);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--oxblood);
  padding: 1px 8px 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: background 0.1s;
}
.map-pin:hover .map-label { background: var(--paper); }
.map-right .map-label { left: 13px; }
.map-left .map-label { right: 13px; }

/* ---- Decorative ornaments ----
   Committed SVGs in assets/ (oxblood line art): foliate + diamond + asterisk
   dividers, corner vine, procedural parchment-grain tile. The grain and corners
   sit at z-index -1; .sheet { isolation: isolate } gives them a stacking context
   so they paint above the paper background but below the prose. */

/* Parchment fiber-speckle, tiled across the sheet. */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("assets/parchment-grain.svg");
  background-repeat: repeat;
  background-size: 110px 110px;
  opacity: 0.35;
}

/* Foliate flourish under the cover subtitle only — section titles read cleaner
   without one sitting under them. */
.cover-sub::after {
  content: "";
  display: block;
  height: 64px;
  margin: 18px 0 6px;
  background: url("assets/divider.svg") no-repeat center center / auto 100%;
}

/* Asterisk divider beneath each centered group heading. */
.group-head::after {
  content: "";
  display: block;
  height: 50px;
  margin: 2px auto 8px;
  background: url("assets/divider-short.svg") no-repeat center / auto 100%;
}

/* No separators between individual entries — whitespace alone divides them. */
.entry { border-bottom: 0; }

/* Colophon */
.colophon-intro { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 0 0 24px; }
.colophon-rule { border: none; border-top: 1px solid var(--rule); margin: 0 0 20px; }
.colophon-manifest { display: flex; flex-direction: column; gap: 10px; }
.colophon-row { display: flex; gap: 12px; align-items: baseline; }
.colophon-label { font-family: var(--display); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--oxblood); min-width: 110px; flex-shrink: 0; }
.colophon-detail { font-size: 13px; line-height: 1.5; color: var(--ink); }
.colophon-detail a { color: var(--oxblood); text-decoration: none; border-bottom: 1px solid var(--rule-soft); }

@media (max-width: 620px) {
  .sheet { padding: 30px 22px 44px; }
  .cover-title { font-size: 46px; }
  .contents { columns: 1; }
  .stamp { position: static; display: inline-block; transform: none; margin-bottom: 10px; }
  .entry { padding-top: 20px; }
  .map-label { font-size: 11px; padding: 0 4px 1px; }
  .map-dot { width: 10px; height: 10px; }
}