/* =============================================================================
   Universe subdomain sites (inkandmayhem.exodusnds.com, ...)

   Shared structure for every universe site: page frame, top navigation,
   "explore" cards, table kit, footer. It carries no look of its own beyond
   neutral Exodus defaults. Each universe's theme.css, loaded after this file
   from assets/universes/<theme>/, sets the --us-* tokens and adds whatever
   flourishes that universe wants.
   ============================================================================= */

:root {
  --us-bg:            #0f1430;
  --us-surface:       #ffffff;
  --us-surface-alt:   #f3f4fa;
  --us-text:          #1b2040;
  --us-text-muted:    #5b6080;
  --us-on-dark:       #ffffff;
  --us-on-dark-muted: rgba(255, 255, 255, 0.62);
  --us-accent:        #1a7fff;
  --us-accent-2:      #7a3cff;
  --us-border:        rgba(27, 32, 64, 0.16);
  --us-font-display:  'Cinzel', Georgia, serif;
  --us-font-label:    system-ui, -apple-system, 'Segoe UI', sans-serif;
  --us-font-body:     'Crimson Pro', Georgia, serif;
  --us-max-width:     960px;
  --us-radius:        6px;

  /* rulebook.css styles the chapter content and reads the core site's tokens.
     Map them onto the universe tokens so one theme file restyles the prose too. */
  --ends-navy:          var(--us-text);
  --ends-purple:        var(--us-accent-2);
  --ends-purple-lt:     var(--us-accent);
  --ends-blue:          var(--us-accent-2);
  --ends-text:          var(--us-text);
  --ends-text-muted:    var(--us-text-muted);
  --ends-note-bg:       var(--us-surface-alt);
  --ends-desc-bg:       var(--us-bg);
  --ends-desc-text:     var(--us-on-dark);
  --theme-header-font:  var(--us-font-display);
  --theme-body-font:    var(--us-font-body);
  --theme-text-color:   var(--us-text);
  --theme-table-bg:     var(--us-surface);
  --theme-table-alt:    var(--us-surface-alt);
  --tblr-font-sans-serif: var(--us-font-label);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.universe-site {
  margin: 0;
  background: var(--us-bg);
  color: var(--us-text);
  font-family: var(--us-font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  overflow-x: hidden;
}

/* :where() keeps this reset at zero specificity so any theme rule beats it. */
:where(.universe-site) :where(h1, h2, h3, p, ul) { margin: 0; padding: 0; }

:where(.universe-site) img { max-width: 100%; height: auto; }

.universe-site :focus-visible {
  outline: 3px solid var(--us-accent);
  outline-offset: 3px;
}

/* Anchor jumps land below the sticky nav instead of under it. */
:where(.universe-site) [id] { scroll-margin-top: 4rem; }

.us-skip {
  position: absolute;
  left: -10000px;
  top: 0;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--us-surface);
  color: var(--us-text);
}
.us-skip:focus { left: 0; }

.us-inner {
  max-width: var(--us-max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* ── Top navigation ───────────────────────────────────────────────────────── */
.us-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1.25rem;
  padding: 0.55rem 24px;
  background: var(--us-bg);
  border-bottom: 3px solid var(--us-accent);
}

.us-nav-brand {
  font-family: var(--us-font-display);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--us-accent);
  text-decoration: none;
  white-space: nowrap;
}

.us-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.1rem;
  list-style: none;
}

.us-nav-link {
  font-family: var(--us-font-label);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--us-on-dark-muted);
  transition: color 0.15s;
}
.us-nav-link:hover,
.us-nav-link:focus-visible { color: var(--us-accent); }

.us-nav-link.us-nav-cta {
  padding: 0.3rem 0.85rem;
  color: var(--us-bg);
  background: var(--us-accent);
  border-radius: var(--us-radius);
}
.us-nav-link.us-nav-cta:hover,
.us-nav-link.us-nav-cta:focus-visible { color: var(--us-bg); filter: brightness(1.08); }

/* ── Site menu: five fixed groups, dropdown panels ────────────────────────── */
.us-menu,
.us-menu-panel { list-style: none; margin: 0; padding: 0; }

.us-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
}

.us-menu-group { position: relative; }

.us-menu-button {
  padding: 0.45rem 0.7rem;
  font-family: var(--us-font-label);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--us-on-dark-muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s;
}
.us-menu-button::after { content: ' \25BE'; font-size: 0.7em; }
.us-menu-group:hover > .us-menu-button,
.us-menu-group:focus-within > .us-menu-button,
.us-menu-group.is-active > .us-menu-button { color: var(--us-accent); }

.us-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 110;
  display: none;
  min-width: 15rem;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  padding: 0.4rem 0;
  background: var(--us-surface);
  border: 2px solid var(--us-border);
  border-radius: var(--us-radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.us-menu-group:nth-last-child(-n + 3) > .us-menu-panel { left: auto; right: 0; }

/* A long dropdown (a bestiary, a full GM guide) runs in two columns. */
.us-menu-panel.is-long { columns: 2; column-gap: 0; min-width: 30rem; }
.us-menu-panel.is-long > li { break-inside: avoid; }
.us-menu-group:hover > .us-menu-panel,
.us-menu-group:focus-within > .us-menu-panel { display: block; }

.us-menu-link {
  display: block;
  padding: 0.4rem 1rem;
  font-family: var(--us-font-label);
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--us-text);
}
.us-menu-link:hover,
.us-menu-link:focus-visible { background: var(--us-surface-alt); color: var(--us-accent-2); }
.us-menu-link.is-active { color: var(--us-accent-2); box-shadow: inset 4px 0 0 var(--us-accent-2); }

.us-menu-heading {
  margin-top: 0.35rem;
  padding: 0.55rem 1rem 0.2rem;
  font-family: var(--us-font-label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--us-text-muted);
  border-top: 1px solid var(--us-border);
}

.us-menu-toggle {
  display: none;
  padding: 0.35rem 0.85rem;
  font-family: var(--us-font-label);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--us-bg);
  background: var(--us-accent);
  border: 0;
  border-radius: var(--us-radius);
  cursor: pointer;
}

.us-notice {
  margin: 0;
  padding: 0.6rem 24px;
  text-align: center;
  font-family: var(--us-font-label);
  font-size: 0.9rem;
  color: var(--us-bg);
  background: var(--us-accent);
}

/* ── Chapter page ─────────────────────────────────────────────────────────── */
.us-page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(220px, 34vw, 400px);
  background-color: var(--us-bg);
  background-size: cover;
  background-position: center 30%;
}
.us-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.78) 100%);
}
.us-page-hero-plain { min-height: 0; }
.us-page-hero-plain::before { display: none; }

.us-page-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 24px 1.5rem;
}

.us-page-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--us-font-label);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--us-accent);
}

.us-page-title {
  margin: 0;
  font-family: var(--us-font-display);
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--us-on-dark);
}

.us-page {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2.5rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 24px 3rem;
  background: var(--us-surface);
}
.us-page-no-toc { grid-template-columns: minmax(0, 1fr); max-width: 900px; }

/* The page body sits on the surface colour edge to edge, whatever the width. */
main:has(> .us-page) { background: var(--us-surface); }

.us-toc-box {
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: 0.9rem 1rem;
  font-family: var(--us-font-label);
  font-size: 0.86rem;
  background: var(--us-surface-alt);
  border: 2px solid var(--us-border);
  border-radius: var(--us-radius);
}
.us-toc-box summary {
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--us-text-muted);
}
.us-toc-box ol { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.us-toc-box li + li { margin-top: 0.35rem; }
.us-toc-box li.us-toc-sub { padding-left: 0.85rem; font-size: 0.93em; color: var(--us-text-muted); }
.us-toc-box a { color: var(--us-text); text-decoration: none; }
.us-toc-box a:hover,
.us-toc-box a:focus-visible { color: var(--us-accent-2); text-decoration: underline; }

/* A pregen's own page. */
.us-page-kicker a { color: inherit; text-decoration: none; }
.us-page-kicker a:hover,
.us-page-kicker a:focus-visible { text-decoration: underline; }
.us-pregen-hero .us-page-hero-inner { padding-top: 2rem; }
.us-pregen-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; }
.us-pregen-chip {
  padding: 0.12rem 0.7rem;
  font-family: var(--us-font-label);
  font-size: 0.78rem;
  color: var(--us-bg);
  background: var(--us-accent);
  border-radius: 999px;
}
.us-pregen-sheet { font-family: var(--us-font-label); }

/* Chapter content. rulebook.css does the heavy lifting; this fits it to the page. */
.us-prose.rulebook-content { padding: 0; min-width: 0; }
.us-prose > :first-child { margin-top: 0; }
.us-prose img { display: block; max-width: 100%; height: auto; margin: 1.5rem auto; border-radius: var(--us-radius); }
/* No width cap on framed art. The books size it for a print column (325px);
   on the web it runs as wide as the text, like any other picture. */
.us-prose img.framed { border: 3px solid var(--us-border); }
.us-prose .image-caption { margin: -1rem auto 1.5rem; text-align: center; font-family: var(--us-font-label); font-size: 0.85rem; color: var(--us-text-muted); }
.us-prose a { color: var(--us-accent-2); }
.us-prose table { display: block; max-width: 100%; overflow-x: auto; }
.us-prose ul, .us-prose ol { padding-left: 1.4rem; }
.us-prose p, .us-prose ul, .us-prose ol { margin: 0 0 1rem; }
.us-prose .quote { margin: 1.5rem 0; padding: 0.9rem 1.2rem; border-left: 4px solid var(--us-accent-2); background: var(--us-surface-alt); font-style: italic; }
.us-prose .attribution { display: block; margin-top: 0.4rem; font-style: normal; font-size: 0.9rem; color: var(--us-text-muted); }
/* Result icons (success, boon, calamity...) are drawn as a mask over a fixed
   near-black in rulebook.css. Here they take the text colour, so they stay
   visible on a dark theme. */
.us-prose .diceicons,
.us-section-page .diceicons { background-color: currentColor; }

/* Vehicle crew and skill fields, labelled as in the printed stat block. */
.us-prose .vehicle { max-width: 34rem; margin: 0.75rem 0 1rem; }
.us-prose .archetype,
.us-prose .adversary,
.us-prose .minion { margin: 0.5rem 0; }
.us-prose .vehicle .cs,
.us-prose .vehicle .skill {
  grid-column: span 2;
  display: flex;
  align-items: baseline;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  background: var(--us-surface-alt);
  border: 1px solid var(--us-border);
  border-radius: 4px;
}
.us-prose .vehicle .cs::before,
.us-prose .vehicle .skill::before {
  margin-right: 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  opacity: 0.65;
}
.us-prose .vehicle .cs::before { content: 'CREW'; }
.us-prose .vehicle .skill::before { content: 'SKILL'; }
.us-prose h6 { margin-top: 1.1rem; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Blocks the books use beyond the core rules set. Neutral here; themes tint them. */
.us-prose .example,
.us-prose .note2 {
  margin: 1.2rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--us-surface-alt);
  border-left: 4px solid var(--us-accent);
  border-radius: 0 var(--us-radius) var(--us-radius) 0;
}
.us-prose .example > :last-child,
.us-prose .note > :last-child,
.us-prose .note2 > :last-child,
.us-prose .descriptive > :last-child { margin-bottom: 0; }
.us-prose .example h5,
.us-prose .note h5,
.us-prose .note2 h5 { margin-top: 0; }

/* Talent activation tags: {{type-active Active}} in the talent tables. */
.us-prose .type-active,
.us-prose .type-passive,
.us-prose .type-reaction {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  font-family: var(--us-font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px;
  color: var(--us-on-dark);
  background: var(--us-accent-2);
}
.us-prose .type-passive  { color: var(--us-text); background: transparent; border: 1px solid var(--us-border); }
.us-prose .type-reaction { color: var(--us-bg); background: var(--us-accent); }

/* Pull-quote band, one-line rule strip, and checklist. */
.us-prose .ends-band {
  margin: 1.75rem 0;
  padding: 1.1rem 1.3rem;
  text-align: center;
  color: var(--us-on-dark);
  background: var(--us-bg);
  border-top: 2px solid var(--us-accent);
  border-bottom: 2px solid var(--us-accent);
}
.us-prose .ends-band h5 { margin: 0 0 0.3rem; font-family: var(--us-font-display); font-size: 1.45rem; font-weight: 400; color: var(--us-accent); }
.us-prose .ends-band p { margin: 0; color: var(--us-on-dark-muted); }
.us-prose .ends-rule-strip {
  margin: 1.4rem 0;
  padding: 0.7rem 1rem;
  font-family: var(--us-font-label);
  font-size: 0.95rem;
  border: 1px solid var(--us-border);
  border-left: 4px solid var(--us-accent-2);
  background: var(--us-surface-alt);
}
.us-prose .ends-rule-strip p { margin: 0; }
.us-prose .ends-checklist ul { list-style: none; padding-left: 0; }
.us-prose .ends-checklist li { position: relative; padding-left: 1.6rem; margin-bottom: 0.4rem; }
.us-prose .ends-checklist li::before { content: '\2713'; position: absolute; left: 0; color: var(--us-accent-2); font-weight: 700; }

/* ── Spells ────────────────────────────────────────────────────────────────
   <div class="spell arcane"> holds five stat cells (difficulty, strain, range,
   duration, dispel); the write-up follows in .spell-short / .spell-section.
   Traditions colour the top rule and the bar before the spell's name. */
:root {
  --us-arcane: #7a3cff;
  --us-divine: #c49030;
  --us-primal: #2f9e5a;
}
.us-prose .spell-bar { display: inline-block; width: 0.5rem; height: 1.1em; margin-right: 0.5rem; vertical-align: -0.15em; background: var(--us-accent-2); }
.us-prose .spell-bar.arcane { background: var(--us-arcane); }
.us-prose .spell-bar.divine { background: var(--us-divine); }
.us-prose .spell-bar.primal { background: var(--us-primal); }
.us-prose .spell-bar.arcane-divine { background: linear-gradient(var(--us-arcane) 50%, var(--us-divine) 50%); }
.us-prose .spell-bar.arcane-primal { background: linear-gradient(var(--us-arcane) 50%, var(--us-primal) 50%); }
.us-prose .spell-bar.divine-primal { background: linear-gradient(var(--us-divine) 50%, var(--us-primal) 50%); }
.us-prose .spell-bar.arcane-divine-primal { background: linear-gradient(var(--us-arcane) 33%, var(--us-divine) 33% 66%, var(--us-primal) 66%); }

.us-prose .spell,
.us-prose .spell-combat {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 34rem;
  margin: 0.5rem 0 0.25rem;
  padding-top: 4px;
  border-top: 3px solid var(--us-accent-2);
  font-family: var(--us-font-label);
}
.us-prose .spell.arcane { border-top-color: var(--us-arcane); }
.us-prose .spell.divine { border-top-color: var(--us-divine); }
.us-prose .spell.primal { border-top-color: var(--us-primal); }
.us-prose .spell.arcane-divine { border-image: linear-gradient(90deg, var(--us-arcane) 50%, var(--us-divine) 50%) 1; }
.us-prose .spell.arcane-primal { border-image: linear-gradient(90deg, var(--us-arcane) 50%, var(--us-primal) 50%) 1; }
.us-prose .spell.divine-primal { border-image: linear-gradient(90deg, var(--us-divine) 50%, var(--us-primal) 50%) 1; }
.us-prose .spell.arcane-divine-primal { border-image: linear-gradient(90deg, var(--us-arcane) 33%, var(--us-divine) 33% 66%, var(--us-primal) 66%) 1; }

.us-prose .spell .stat,
.us-prose .spell-combat > span {
  display: flex;
  flex: 1 1 4.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 2.6rem;
  padding: 3px 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--us-on-dark);
  background: var(--us-bg);
  border-radius: 4px;
}
.us-prose .spell .stat::before,
.us-prose .spell-combat > span::before { font-size: 0.55rem; font-weight: 400; letter-spacing: 0.1em; opacity: 0.7; }
.us-prose .spell .diff::before   { content: 'DIFFICULTY'; }
.us-prose .spell .strain::before { content: 'STRAIN'; }
.us-prose .spell .range::before  { content: 'RANGE'; }
.us-prose .spell .dur::before    { content: 'DURATION'; }
.us-prose .spell .dispel::before { content: 'DISPEL'; }
.us-prose .spell-combat .dmg::before  { content: 'DAMAGE'; }
.us-prose .spell-combat .crit::before { content: 'CRIT'; }
.us-prose .spell-combat .qual::before { content: 'QUALITIES'; }
.us-prose .spell-combat .qual { flex-basis: 60%; }
.us-prose .spell .diff,
.us-prose .spell .dispel { flex-basis: 7rem; }
.us-prose .spell .dice-row { display: inline-flex; gap: 2px; }
.us-prose .spell-short ul,
.us-prose .spell-section ul { margin-top: 0.4rem; }
.us-prose .spell-meta { font-family: var(--us-font-label); font-size: 0.82rem; color: var(--us-text-muted); }
.us-prose .mishap,
.us-prose .ritual {
  margin: 0.6rem 0;
  padding: 0.6rem 0.9rem;
  border-left: 4px solid var(--us-accent-2);
  background: var(--us-surface-alt);
}
.us-prose hr { margin: 1.6rem 0; border: 0; border-top: 1px solid var(--us-border); }
.us-prose .adversary .peril.stat::before { content: 'PRL'; }

/* Scene art the books run inline between paragraphs. */
.us-prose img.spy-inline { width: 100%; max-height: 22rem; object-fit: cover; border: 1px solid var(--us-border); }

.us-prose .handout { margin: 1.5rem 0; padding: 1rem 1.2rem; background: var(--us-surface-alt); border: 2px dashed var(--us-border); }

.us-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 3rem;
  background: var(--us-surface);
}
.us-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: min(100%, 16rem);
  padding: 0.8rem 1.1rem;
  text-decoration: none;
  color: var(--us-text);
  background: var(--us-surface);
  border: 2px solid var(--us-border);
  border-radius: var(--us-radius);
  transition: transform 0.12s, box-shadow 0.12s;
}
.us-pager-link:hover,
.us-pager-link:focus-visible { transform: translate(-2px, -2px); }
.us-pager-next { margin-left: auto; text-align: right; }
.us-pager-dir { font-family: var(--us-font-label); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--us-text-muted); }
.us-pager-label { font-family: var(--us-font-display); font-size: 1.3rem; line-height: 1.1; }

/* ── Universe sections: lore, pregens, rules, glossary, gallery ───────────
   The markup is shared with the main site (pages/universe_sections/*), so the
   class names are the main site's. Everything here is scoped to the wrapper. */
.us-page-lead {
  max-width: 44rem;
  margin: 0.6rem 0 0;
  font-size: 1.15rem;
  color: var(--us-on-dark-muted);
}

main:has(> .us-section-page) { background: var(--us-surface); }

.us-section-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 24px 3.5rem;
  color: var(--us-text);
}

.us-section-page .universe-section + .universe-section,
.us-section-page .universe-glossary-index + .universe-section { margin-top: 2.75rem; }

.us-section-page .site-kicker {
  margin-bottom: 0.4rem;
  font-family: var(--us-font-label);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--us-accent-2);
}

.us-section-page h2 {
  margin: 0 0 0.75rem;
  font-family: var(--us-font-display);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 400;
  line-height: 1.1;
}
.us-section-page h3 {
  margin: 0 0 0.4rem;
  font-family: var(--us-font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.15;
}
.us-section-page p { margin: 0 0 0.75rem; }
.us-section-page .text-muted { color: var(--us-text-muted); }

/* Shared card surface. */
.us-section-page .universe-fact,
.us-section-page .universe-conceit,
.us-section-page .universe-info-panel,
.us-section-page .universe-touchstone,
.us-section-page .universe-pregen-card,
.us-section-page .universe-rule,
.us-section-page .universe-glossary-entry {
  padding: 1rem 1.15rem;
  background: var(--us-surface);
  border: 2px solid var(--us-border);
  border-radius: var(--us-radius);
}
.us-section-page .universe-info-panel p:last-child,
.us-section-page .universe-conceit p:last-child,
.us-section-page .universe-rule p:last-child { margin-bottom: 0; }

/* Lore */
.us-section-page .universe-voice-sample blockquote {
  margin: 0 0 0.9rem;
  padding: 0.9rem 1.2rem;
  font-size: 1.25rem;
  font-style: italic;
  background: var(--us-surface-alt);
  border-left: 5px solid var(--us-accent-2);
}
.us-section-page .universe-fact-grid,
.us-section-page .universe-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
}
.us-section-page .universe-fact dt {
  font-family: var(--us-font-label);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--us-accent-2);
}
.us-section-page .universe-fact dd { margin: 0.25rem 0 0; }
.us-section-page .universe-conceit-list {
  display: grid;
  gap: 0.9rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: conceit;
}
.us-section-page .universe-conceit { counter-increment: conceit; position: relative; padding-left: 3.6rem; }
.us-section-page .universe-conceit::before {
  content: counter(conceit);
  position: absolute;
  left: 1rem;
  top: 0.8rem;
  font-family: var(--us-font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--us-accent-2);
}
.us-section-page .universe-touchstone-list { display: grid; gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.us-section-page .universe-touchstone { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.75rem; }
.us-section-page .universe-touchstone-name { font-family: var(--us-font-label); font-size: 1.05rem; }
.us-section-page .universe-touchstone-tag {
  padding: 0.05rem 0.55rem;
  font-family: var(--us-font-label);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--us-bg);
  background: var(--us-accent);
  border-radius: 999px;
}
.us-section-page .universe-touchstone-note { flex-basis: 100%; font-size: 0.95rem; color: var(--us-text-muted); }

/* Pregens */
.us-section-page .universe-pregen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 3vw, 1.6rem);
}
.us-section-page .universe-pregen-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.us-section-page .universe-pregen-portrait { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.us-section-page .universe-pregen-body { display: flex; flex: 1; flex-direction: column; padding: 1.1rem 1.2rem 1.3rem; }
.us-section-page .universe-pregen-body h2 { margin-bottom: 0.2rem; font-size: 1.8rem; }
.us-section-page .universe-pregen-tagline { font-family: var(--us-font-label); color: var(--us-accent-2); }
.us-section-page .universe-pregen-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.us-section-page .universe-pregen-chip {
  padding: 0.1rem 0.6rem;
  font-family: var(--us-font-label);
  font-size: 0.75rem;
  color: var(--us-on-dark);
  background: var(--us-bg);
  border-radius: 999px;
}
.us-section-page .universe-pregen-quote {
  margin: 0 0 0.75rem;
  padding-left: 0.9rem;
  font-style: italic;
  border-left: 4px solid var(--us-accent);
}
.us-section-page .btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.45rem 1rem;
  font-family: var(--us-font-label);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--us-bg);
  background: var(--us-accent);
  border: 2px solid var(--us-border);
  border-radius: var(--us-radius);
}

/* Pregen cards link to the full character. */
.us-section-page .universe-pregen-name-link { color: inherit; text-decoration: none; }
.us-section-page .universe-pregen-name-link:hover,
.us-section-page .universe-pregen-name-link:focus-visible { text-decoration: underline; }
.us-section-page .universe-pregen-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 0.75rem; }
.us-section-page .universe-pregen-actions .btn { margin-top: 0; }
.us-section-page .universe-pregen-actions .btn-outline-light { color: var(--us-text); background: transparent; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Rules */
.us-section-page .universe-rule-list { display: grid; gap: 0.9rem; margin-top: 1rem; }
.us-section-page .universe-rule-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; margin: 0.7rem 0 0; font-size: 0.88rem; }
.us-section-page .universe-rule-meta dt {
  display: inline;
  font-family: var(--us-font-label);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--us-accent-2);
}
.us-section-page .universe-rule-meta dd { display: inline; margin: 0 0 0 0.35rem; color: var(--us-text-muted); }

/* Glossary */
.us-section-page .universe-glossary-index {
  position: sticky;
  top: 3.6rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.55rem 0.7rem;
  background: var(--us-surface-alt);
  border: 2px solid var(--us-border);
  border-radius: var(--us-radius);
}
.us-section-page .universe-glossary-index a {
  min-width: 1.9rem;
  padding: 0.1rem 0.35rem;
  text-align: center;
  font-family: var(--us-font-display);
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--us-text);
}
.us-section-page .universe-glossary-index a:hover,
.us-section-page .universe-glossary-index a:focus-visible { color: var(--us-accent-2); }
.us-section-page .universe-glossary-letter { font-size: 2.6rem; color: var(--us-accent-2); }
.us-section-page .universe-glossary-list { display: grid; gap: 0.6rem; margin: 0; }
.us-section-page .universe-glossary-entry dt { font-family: var(--us-font-label); font-size: 1.05rem; }
.us-section-page .universe-glossary-entry dd { margin: 0.2rem 0 0; }
.us-section-page .universe-glossary-ref { display: block; margin-top: 0.25rem; font-size: 0.82rem; color: var(--us-text-muted); }
.us-section-page .universe-glossary-block,
.us-section-page .universe-glossary-entry { scroll-margin-top: 7.5rem; }

/* Gallery */
.us-section-page .universe-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}
.us-section-page .universe-gallery-item {
  margin: 0;
  overflow: hidden;
  background: var(--us-surface);
  border: 2px solid var(--us-border);
  border-radius: var(--us-radius);
}
.us-section-page .universe-gallery-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.us-section-page .universe-gallery-item figcaption { padding: 0.5rem 0.7rem; font-family: var(--us-font-label); font-size: 0.82rem; color: var(--us-text-muted); }

/* ── Printable card decks (/cards/<deck>) ──────────────────────────────────
   Sheets are laid out at real Letter size on screen, so the fit pass in
   universe_sites/cards.php measures what the printer will print. Cards are
   always light paper with dark ink, whatever the site theme: they are for
   printing. Each group of cards takes one accent colour from the palette below,
   which a theme may override. */
:root {
  --uc-paper: #f6f1e4;
  --uc-ink:   #1a1408;
  --uc-muted: #5a5240;
  --uc-accent-1:  #7a1a20;
  --uc-accent-2:  #1a5a38;
  --uc-accent-3:  #1a3a5a;
  --uc-accent-4:  #5a2a18;
  --uc-accent-5:  #38205a;
  --uc-accent-6:  #3a2a08;
  --uc-accent-7:  #0a4a4a;
  --uc-accent-8:  #5a1a48;
  --uc-accent-9:  #2a3a10;
  --uc-accent-10: #4a3a18;
  --uc-accent-11: #1e2a42;
  --uc-accent-12: #3a0808;
}

/* Link row at the top of a chapter that has decks. */
.us-card-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin: 0 0 1.6rem; padding: 0.7rem 0.9rem; background: var(--us-surface-alt); border: 1px solid var(--us-border); border-left: 4px solid var(--us-accent-2); border-radius: var(--us-radius); }
.us-card-links-label { margin-right: 0.3rem; font-family: var(--us-font-label); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--us-text-muted); }
.us-prose a.us-card-link { padding: 0.25rem 0.75rem; font-family: var(--us-font-label); font-size: 0.9rem; text-decoration: none; color: var(--us-bg); background: var(--us-accent); border-radius: 999px; }
.us-prose a.us-card-link:hover,
.us-prose a.us-card-link:focus-visible { filter: brightness(1.08); }
.us-card-link-count { opacity: 0.7; font-size: 0.85em; }

main:has(> .uc-deck) { background: var(--us-surface-alt); }

.uc-toolbar { background: var(--us-surface); border-bottom: 1px solid var(--us-border); }
.uc-toolbar-inner { display: grid; gap: 0.6rem; max-width: 1180px; margin: 0 auto; padding: 0.8rem 24px; }
.uc-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.uc-button { padding: 0.45rem 1rem; font-family: var(--us-font-label); font-size: 0.9rem; color: var(--us-text); background: transparent; border: 2px solid var(--us-border); border-radius: var(--us-radius); cursor: pointer; }
.uc-button.is-active { color: var(--us-bg); background: var(--us-accent); border-color: var(--us-accent); }
.uc-button-print { margin-left: auto; color: var(--us-on-dark); background: var(--us-accent-2); border-color: var(--us-accent-2); }
.uc-hint { margin: 0; font-size: 0.9rem; color: var(--us-text-muted); }
.uc-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-family: var(--us-font-label); font-size: 0.88rem; }
.uc-links a { color: var(--us-accent-2); }
.uc-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; padding: 0; list-style: none; font-family: var(--us-font-label); font-size: 0.8rem; color: var(--us-text-muted); }
.uc-legend li { display: flex; align-items: center; gap: 0.35rem; }
.uc-swatch { width: 0.85rem; height: 0.85rem; background: var(--uc-accent); border-radius: 2px; }

.uc-deck { --uc-scale: 1; padding: 1.5rem 8px 3rem; overflow-x: hidden; }

/* One printed page. 8in x 10.5in inside Letter's margins. */
.uc-sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.14in;
  width: 8in;
  height: 10.4in;
  margin: 0 auto 0.4in;
  padding: 0;
  transform: scale(var(--uc-scale));
  transform-origin: top center;
  margin-bottom: calc(0.4in - (1 - var(--uc-scale)) * 10.4in);
}
.uc-deck[data-per-page="4"] .uc-sheet { grid-template-rows: repeat(2, minmax(0, 1fr)); }

/* Before the script runs (or without it) the cards simply flow in a grid. */
.uc-deck > .uc-card { max-width: 4in; margin: 0 auto 0.2in; min-height: 3.2in; }

.uc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  color: var(--uc-ink);
  background: var(--uc-paper);
  border: 1px solid #b9ad8f;
  border-radius: 0.09in;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.uc-band { flex: none; height: 0.13in; background: var(--uc-accent); }
.uc-card-head { flex: none; padding: 0.09in 0.16in 0.06in; border-bottom: 1px solid rgba(26, 20, 8, 0.16); }
.uc-kicker { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.03in; font-family: var(--us-font-label); font-size: 6.4pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--uc-accent); }
.uc-kicker span:last-child { text-align: right; color: var(--uc-muted); }
.uc-name { margin: 0; font-family: var(--us-font-display); font-size: 13.5pt; font-weight: 600; line-height: 1.1; letter-spacing: 0.01em; color: var(--uc-ink); }
.uc-chips { display: flex; flex-wrap: wrap; gap: 0.04in; margin: 0.05in 0 0; }
.uc-chip { padding: 0.01in 0.07in; font-family: var(--us-font-label); font-size: 6.8pt; line-height: 1.5; color: var(--uc-ink); background: rgba(26, 20, 8, 0.06); border: 1px solid rgba(26, 20, 8, 0.18); border-left: 3px solid var(--uc-accent); border-radius: 2px; }
.uc-chip strong { font-weight: 700; color: var(--uc-accent); text-transform: uppercase; font-size: 0.86em; letter-spacing: 0.06em; }

/* The text. Sizes step down with length; the script then fits what remains. */
.uc-rules.us-prose { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0.08in 0.16in 0.04in; font-family: var(--us-font-body); font-size: 9.4pt; line-height: 1.34; color: var(--uc-ink); }
.uc-length-medium .uc-rules.us-prose { font-size: 8.6pt; }
.uc-length-long .uc-rules.us-prose   { font-size: 7.8pt; line-height: 1.3; }
.uc-length-xlong .uc-rules.us-prose  { font-size: 7pt; line-height: 1.26; }
.uc-deck[data-per-page="4"] .uc-rules.us-prose { font-size: 10.6pt; }
.uc-deck[data-per-page="4"] .uc-length-medium .uc-rules.us-prose { font-size: 10pt; }
.uc-deck[data-per-page="4"] .uc-length-long .uc-rules.us-prose   { font-size: 9.2pt; }
.uc-deck[data-per-page="4"] .uc-length-xlong .uc-rules.us-prose  { font-size: 8.2pt; }
.uc-deck[data-per-page="4"] .uc-name { font-size: 16pt; }

.uc-rules.us-prose p,
.uc-rules.us-prose ul,
.uc-rules.us-prose ol { margin: 0 0 0.45em; color: var(--uc-ink); }
.uc-rules.us-prose ul,
.uc-rules.us-prose ol { padding-left: 1.1em; }
.uc-rules.us-prose li { margin-bottom: 0.15em; }
.uc-rules.us-prose strong { color: var(--uc-ink); }
.uc-rules.us-prose em { color: var(--uc-muted); }
.uc-rules.us-prose a { color: var(--uc-ink); text-decoration: none; }
.uc-rules.us-prose h5,
.uc-rules.us-prose h6 { margin: 0.4em 0 0.2em; font-size: 1em; color: var(--uc-accent); }
.uc-rules.us-prose .dice { width: 0.95em; height: 0.95em; }
.uc-rules.us-prose .diceicons { background-color: var(--uc-ink); }
.uc-rules.us-prose .spell,
.uc-rules.us-prose .spell-combat { max-width: none; margin: 0 0 0.4em; padding-top: 2px; border-top-width: 2px; gap: 2px; }
.uc-rules.us-prose .spell .stat,
.uc-rules.us-prose .spell-combat > span { min-height: 0; padding: 1px 3px; font-size: 0.86em; color: #fff; background: var(--uc-accent); border: 0; border-radius: 2px; }
.uc-rules.us-prose .spell .stat::before,
.uc-rules.us-prose .spell-combat > span::before { color: #fff; font-size: 0.62em; }
.uc-rules.us-prose .spell .dice,
.uc-rules.us-prose .spell-combat .dice { filter: brightness(1.7) saturate(0.7); }

.uc-tone-arcane { --uc-accent: #4a1f9e !important; }
.uc-tone-divine { --uc-accent: #8a5a08 !important; }
.uc-tone-primal { --uc-accent: #1a5a38 !important; }
.uc-tone-arcane-divine { --uc-accent: #6a3a52 !important; }
.uc-tone-arcane-primal { --uc-accent: #2a3a6a !important; }
.uc-tone-divine-primal { --uc-accent: #4a5a18 !important; }
.uc-tone-arcane-divine-primal { --uc-accent: #3a2a28 !important; }

.uc-foot { flex: none; display: flex; justify-content: space-between; padding: 0.03in 0.16in 0.06in; font-family: var(--us-font-label); font-size: 5.8pt; letter-spacing: 0.12em; text-transform: uppercase; color: var(--uc-muted); }
.uc-more { display: none; color: var(--uc-accent); }
.uc-card.is-clipped .uc-more { display: inline; }
.uc-card.is-clipped .uc-rules { -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }

@media print {
  @page { size: Letter; margin: 0.3in 0.25in; }

  html, body.universe-site { background: #fff !important; }
  .us-nav, .us-footer, .us-skip, .us-notice, .uc-screen { display: none !important; }
  main:has(> .uc-deck) { background: #fff !important; background-image: none !important; }
  .uc-deck { padding: 0; overflow: visible; }
  .uc-sheet { transform: none; margin: 0 auto; break-after: page; page-break-after: always; }
  .uc-sheet:last-child { break-after: auto; page-break-after: auto; }
  .uc-card { box-shadow: none; break-inside: avoid; }
}

/* ── Generic band ─────────────────────────────────────────────────────────── */
.us-band {
  position: relative;
  overflow: hidden;
  padding: 56px 0 64px;
  background: var(--us-surface);
}
.us-band-alt  { background: var(--us-surface-alt); }
.us-band-dark { background: var(--us-bg); color: var(--us-on-dark); }

.us-band-title {
  font-family: var(--us-font-display);
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: 1.75rem;
}

.us-band-lead {
  max-width: 46rem;
  margin-bottom: 1.75rem;
  color: var(--us-text-muted);
}
.us-band-dark .us-band-lead { color: var(--us-on-dark-muted); }

/* ── Explore cards (links into the universe's content sections) ───────────── */
.us-explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  list-style: none;
}

.us-explore-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 1.25rem 1.35rem 1.35rem;
  text-decoration: none;
  color: var(--us-text);
  background: var(--us-surface);
  border: 2px solid var(--us-border);
  border-radius: var(--us-radius);
  transition: transform 0.12s, box-shadow 0.12s;
}
.us-explore-card:hover,
.us-explore-card:focus-visible { transform: translate(-2px, -2px); }

.us-explore-card-title {
  font-family: var(--us-font-display);
  font-size: 1.45rem;
  line-height: 1.1;
}
.us-explore-card-blurb { font-size: 0.98rem; color: var(--us-text-muted); }
.us-explore-card-more {
  margin-top: auto;
  padding-top: 0.6rem;
  font-family: var(--us-font-label);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--us-accent-2);
}

/* ── Table kit (downloads and play aids) ──────────────────────────────────── */
.us-kit-groups { display: grid; gap: 1.75rem; }

.us-kit-group-title {
  font-family: var(--us-font-label);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: var(--us-text-muted);
}
.us-band-dark .us-kit-group-title { color: var(--us-on-dark-muted); }

.us-kit-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  list-style: none;
}

.us-kit-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  height: 100%;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--us-text);
  background: var(--us-surface);
  border: 2px solid var(--us-border);
  border-radius: var(--us-radius);
  transition: transform 0.12s, box-shadow 0.12s;
}
.us-kit-item:hover,
.us-kit-item:focus-visible { transform: translate(-2px, -2px); }

.us-kit-item-label { font-family: var(--us-font-label); font-size: 1rem; }
.us-kit-item-desc  { font-size: 0.9rem; color: var(--us-text-muted); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.us-footer {
  padding: 2.25rem 0 2.5rem;
  background: var(--us-bg);
  color: var(--us-on-dark-muted);
  border-top: 3px solid var(--us-accent);
  font-family: var(--us-font-label);
  font-size: 0.85rem;
}

.us-footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.us-footer-brand {
  font-family: var(--us-font-display);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--us-accent);
  text-decoration: none;
}

.us-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  list-style: none;
}
.us-footer a { color: var(--us-on-dark-muted); text-decoration: none; }
.us-footer a:hover,
.us-footer a:focus-visible { color: var(--us-accent); }

.us-footer-legal { margin-top: 1.5rem; font-size: 0.78rem; line-height: 1.5; }

@media (max-width: 900px) {
  /* Menu becomes one collapsible panel with every group listed open. Without
     JavaScript there is no toggle, so the panel simply stays open. */
  .us-js .us-menu-toggle { display: inline-block; }
  .us-menu { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .us-js .us-nav:not(.is-open) .us-menu { display: none; }
  .us-menu-button { width: 100%; padding: 0.7rem 0 0.2rem; text-align: left; cursor: default; color: var(--us-accent); }
  .us-menu-button::after { content: ''; }
  .us-menu-panel,
  .us-menu-group:nth-last-child(-n + 3) > .us-menu-panel {
    position: static;
    display: block;
    max-height: none;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .us-menu-panel.is-long { columns: 1; min-width: 0; }
  .us-menu-link { padding: 0.35rem 0 0.35rem 0.75rem; color: var(--us-on-dark); }
  .us-menu-link:hover,
  .us-menu-link:focus-visible { background: none; color: var(--us-accent); }
  .us-menu-heading { padding-left: 0.75rem; color: var(--us-on-dark-muted); border-top-color: rgba(255, 255, 255, 0.15); }
  .us-menu-home { padding: 0.7rem 0 0.4rem; }
  .us-nav.is-open { max-height: 100vh; overflow-y: auto; }

  .us-page { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-top: 1.25rem; }
  .us-section-page .universe-glossary-index { position: static; }
  .us-section-page .universe-glossary-block,
  .us-section-page .universe-glossary-entry { scroll-margin-top: 1rem; }
  .us-toc-box { position: static; max-height: none; }
  .us-toc-box:not([open]) { padding-bottom: 0.9rem; }
}

@media (max-width: 640px) {
  /* The nav wraps to several rows on a phone; pinned, it would eat the screen. */
  .us-nav { position: static; padding: 0.5rem 16px; }
  :where(.universe-site) [id] { scroll-margin-top: 0.5rem; }
  .us-inner { padding: 0 16px; }
  .us-band { padding: 40px 0 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .universe-site * { transition: none !important; }
}