/* ==========================================================================
   KING rules site - royal grimoire design system
   Single stylesheet. No frameworks, no client libraries.

   CONTENTS
     1  tokens ................ colours, type, spacing, radii (all custom props)
     2  base .................. reset, document, focus, selection
     3  layout ................ topbar, sidebar, main, toc, footer, drawer
     4  prose ................. headings, paragraphs, lists, links, rules
     5  components ............ see the index below
     6  palette ............... command-palette search
     7  utilities ............. stat colours, chip rows, spacing helpers
     8  responsive ............ 360px -> 4K
     9  print ................. statblocks and reference pages on paper
     10 motion ................ prefers-reduced-motion

   COMPONENT INDEX (markup patterns are demonstrated on /styleguide.html)
     .statblock          creature statblock card
     .statband           key/value band inside a statblock
     .stat-table         six-stat table (value / mod / die)
     .tier-badge         T3 + die glyph, --t1 .. --t5
     .role-chip          --minor (steel) --major (gold) --sovereign (crimson)
     .ability            ability card, --passive --maneuver --declaration
                         --reaction --deed
     .spell              spell / prayer / litany card with tier + cost line
     .ladder             tree rank ladder (.ladder__rung + .ladder__tier)
     .data-table         data table, sticky header, zebra, tabular numerals
                         (always wrapped in .table-wrap for overflow)
     .callout            --note --example --gm --danger --rule
     .filterbar          filter pill bar + text box + live count
     .cardgrid / .card   image card grid (bestiary browser)
     .tilegrid / .tile   section tiles (landing page)
     .chiprow .tag .kbd .lede .orn .statline
   ========================================================================== */


/* ==========================================================================
   1  TOKENS
   ========================================================================== */

:root {
  color-scheme: dark;

  --font-display: "Cinzel", "Trajan Pro", "Palatino Linotype", Georgia, serif;
  --font-body: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  --step--2: clamp(.72rem, .70rem + .10vw, .78rem);
  --step--1: clamp(.84rem, .81rem + .14vw, .92rem);
  --step-0:  clamp(1rem, .97rem + .17vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.12rem + .30vw, 1.36rem);
  --step-2:  clamp(1.42rem, 1.31rem + .52vw, 1.78rem);
  --step-3:  clamp(1.70rem, 1.50rem + .95vw, 2.40rem);
  --step-4:  clamp(2.10rem, 1.70rem + 1.90vw, 3.60rem);

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;

  --r-sm: 3px;  --r-md: 5px;  --r-lg: 9px;
  --sidebar-w: 16.5rem;
  --toc-w: 14rem;
  --topbar-h: 3.5rem;
  --measure: 74ch;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- dark: warm charcoal ground, brass light ----------------------------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #100e0b;
  --bg-raise:    #17140f;
  --bg-card:     #1c1813;
  --bg-sunk:     #0a0907;
  --bg-inset:    #221d16;
  --line:        #2e2820;
  --line-strong: #443a2a;

  --text:        #e9e0cf;
  --text-dim:    #b2a794;
  --text-faint:  #918674;   /* 5.1:1 on --bg */

  --gold:        #d9b872;
  --gold-bright: #f0d8a0;
  --gold-soft:   #b0904f;
  --gold-deep:   #7d6531;
  --gold-wash:   rgba(217, 184, 114, .10);
  --gold-line:   rgba(217, 184, 114, .26);

  --crimson:      #c95244;
  --crimson-soft: #e28479;
  --crimson-wash: rgba(201, 82, 68, .12);

  --stat-body:    #dd7a60;
  --stat-mind:    #74a6e2;
  --stat-sense:   #63bb97;
  --stat-heart:   #e37ba0;
  --stat-cunning: #b58ce4;
  --stat-fate:    #e2c476;

  --hp-vitality: #d4594c;
  --hp-stamina:  #5f9ed6;
  --hp-vigor:    #58b3a2;
  --hp-wound:    #ab4a41;
  --hp-wound-soft: #d5867c;   /* wound hue at text contrast on a dark card */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 6px 20px -8px rgba(0, 0, 0, .75);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .85);
  --grain-opacity: .035;
  --vignette: radial-gradient(120% 80% at 50% -10%, rgba(217, 184, 114, .07), transparent 60%);
}

/* --- light: aged parchment, iron-gall ink -------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #f2e8d4;
  --bg-raise:    #f8f1e1;
  --bg-card:     #fcf7ec;
  --bg-sunk:     #e6d8ba;
  --bg-inset:    #ede0c6;
  --line:        #d5c4a1;
  --line-strong: #b9a377;

  --text:        #2a2217;
  --text-dim:    #574a37;
  --text-faint:  #6a5c43;   /* 5.0:1 on --bg */

  /* the golds double as body-text colour on parchment, so both are set to the
     darkest value that still reads as brass: 5.2:1 on --bg, 4.5:1 on --bg-sunk */
  --gold:        #7a5a10;
  --gold-bright: #6d500f;
  --gold-soft:   #785a12;
  --gold-deep:   #5b430c;
  --gold-wash:   rgba(138, 103, 22, .08);
  --gold-line:   rgba(138, 103, 22, .28);

  --crimson:      #972c23;
  --crimson-soft: #7d211a;
  --crimson-wash: rgba(151, 44, 35, .09);

  --stat-body:    #9d3a26;
  --stat-mind:    #2a568f;
  --stat-sense:   #1a6a4e;
  --stat-heart:   #96305a;
  --stat-cunning: #613793;
  --stat-fate:    #806015;

  --hp-vitality: #94281f;
  --hp-stamina:  #26537f;
  --hp-vigor:    #1a6559;
  --hp-wound:    #6f1c16;
  --hp-wound-soft: #6f1c16;

  --shadow-sm: 0 1px 2px rgba(90, 70, 35, .16);
  --shadow-md: 0 6px 20px -10px rgba(90, 70, 35, .38);
  --shadow-lg: 0 22px 55px -22px rgba(90, 70, 35, .45);
  --grain-opacity: .05;
  --vignette: radial-gradient(120% 80% at 50% -10%, rgba(138, 103, 22, .06), transparent 60%);
}


/* ==========================================================================
   2  BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 1.25rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* a faint gilt bloom at the top of the page, then film grain over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--vignette);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--gold-wash); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skiplink {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 999;
  padding: .6rem 1rem;
  background: var(--bg-card);
  color: var(--gold);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
  transform: translateY(-160%);
  transition: transform .18s var(--ease);
}
.skiplink:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ==========================================================================
   3  LAYOUT
   ========================================================================== */

/* --- topbar -------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-4);
  background: color-mix(in srgb, var(--bg-raise) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--gold-wash);
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.wordmark__crown { color: var(--gold); align-self: center; }
.wordmark__crown svg { filter: drop-shadow(0 0 6px var(--gold-wash)); }
.wordmark__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: .22em;
  color: var(--gold);
}
.wordmark__tag {
  font-size: var(--step--2);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.iconbtn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text-dim);
  cursor: pointer;
  transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.iconbtn:hover { color: var(--gold); background: var(--gold-wash); border-color: var(--gold-line); }

.topbar__menu { display: none; }
.burger, .burger::before, .burger::after {
  display: block;
  width: 17px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -5px; }
.burger::after { top: 5px; }

.searchbtn {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 auto;
  max-width: 30rem;
  margin-left: auto;
  padding: .42rem .7rem;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-faint);
  font-size: var(--step--1);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.searchbtn:hover { border-color: var(--gold-line); color: var(--text-dim); background: var(--bg-inset); }
.searchbtn__icon { display: flex; color: var(--gold-soft); }
.searchbtn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchbtn__keys { margin-left: auto; display: flex; gap: 3px; }

kbd, .kbd {
  font-family: var(--font-mono);
  font-size: .72em;
  line-height: 1;
  padding: .28em .42em;
  color: var(--text-dim);
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.themebtn__sun { display: none; }
:root[data-theme="light"] .themebtn__sun { display: block; }
:root[data-theme="light"] .themebtn__moon { display: none; }

/* --- shell grid ---------------------------------------------------------- */
.layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
  max-width: 100rem;
  margin: 0 auto;
}
.layout.has-toc { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); }
.page--full .layout { display: block; max-width: none; }
.page--full .main { padding: 0; }
.page--full .prose { max-width: none; }
/* layout: "wide" keeps the sidebar but drops the TOC and the reading measure,
   for browsers and directories (bestiary index, spell lists) */
.page--wide .prose { max-width: none; }

/* --- sidebar ------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-raise) 55%, transparent);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.sidebar__inner { padding: var(--sp-5) var(--sp-3) var(--sp-8); }

.navgroup { margin-bottom: .15rem; }
.navgroup__toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .45rem .6rem;
  background: none;
  border: 0;
  border-radius: var(--r-md);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.navgroup__toggle:hover { color: var(--gold); background: var(--gold-wash); }
.navgroup__name { flex: 1; text-align: left; }
.navgroup__chev {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s var(--ease);
  opacity: .7;
}
.navgroup.is-open > .navgroup__toggle .navgroup__chev { transform: rotate(45deg); }
.navgroup.is-open > .navgroup__toggle { color: var(--gold); }

.navgroup__list {
  list-style: none;
  margin: 0 0 .4rem;
  padding: 0 0 0 .35rem;
  display: none;
  border-left: 1px solid var(--line);
  margin-left: .85rem;
}
.navgroup.is-open > .navgroup__list { display: block; }

.navlink, .navgroup__solo {
  display: block;
  padding: .3rem .6rem;
  margin: 1px 0;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  text-decoration: none;
  font-size: var(--step--1);
  line-height: 1.4;
  transition: color .14s var(--ease), background .14s var(--ease);
}
.navlink:hover, .navgroup__solo:hover { color: var(--gold); background: var(--gold-wash); }
.navlink.is-active, .navgroup__solo.is-active {
  color: var(--gold-bright);
  background: var(--gold-wash);
  box-shadow: inset 2px 0 0 var(--gold);
}
.navgroup__solo {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .45rem .6rem;
}

.navsub { list-style: none; margin: .5rem 0 .25rem; }
.navsub__label {
  display: block;
  padding: 0 .6rem;
  font-size: var(--step--2);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.navsub ul { list-style: none; margin: .1rem 0 0; padding: 0; }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(6, 5, 4, .62);
  backdrop-filter: blur(2px);
  border: 0;
}
.scrim[hidden] { display: none; }

/* --- main ---------------------------------------------------------------- */
.main {
  min-width: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
}
.main:focus { outline: none; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: var(--sp-4);
  font-size: var(--step--2);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.crumbs a { color: var(--text-faint); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs__sep { color: var(--text-faint); }
.crumbs [aria-current] { color: var(--text-dim); }

.prose { max-width: var(--measure); }
.prose--wide { max-width: none; }

/* --- toc ----------------------------------------------------------------- */
.toc {
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-6) var(--sp-4) var(--sp-8) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.toc__title {
  margin: 0 0 .6rem;
  padding-left: .75rem;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc__item a {
  display: block;
  padding: .25rem .5rem .25rem .75rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--text-faint);
  font-size: var(--step--2);
  line-height: 1.45;
  text-decoration: none;
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.toc__item--h3 a { padding-left: 1.5rem; font-size: calc(var(--step--2) * .96); }
.toc__item a:hover { color: var(--gold); }
.toc__item a.is-current { color: var(--gold-bright); border-left-color: var(--gold); }

/* --- footer -------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-8);
  border-top: 1px solid var(--line);
  background: var(--bg-sunk);
}
.footer::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.footer__inner {
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  text-align: center;
}
.footer__brand { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--gold); }
.footer__name {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: .2em;
  font-size: var(--step--1);
  color: var(--gold);
}
.footer__name span { color: var(--text-faint); letter-spacing: .12em; }
.footer__note { margin: 0; color: var(--text-faint); font-size: var(--step--1); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin: 0; }
.footer__links a { color: var(--text-dim); font-size: var(--step--1); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.footer__links a:hover { color: var(--gold); border-color: var(--gold); }
.footer__dl { color: var(--gold) !important; }

.totop {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 50;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  background: var(--bg-card);
  color: var(--gold);
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.totop.is-shown { opacity: 1; transform: none; pointer-events: auto; }


/* ==========================================================================
   4  PROSE
   ========================================================================== */

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  color: var(--text);
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
  text-wrap: balance;
}

.prose h1 {
  margin: 0 0 var(--sp-5);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gold-bright);
}
.prose h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: .7rem;
  background: linear-gradient(90deg, var(--gold), var(--gold-line) 40%, transparent);
}

.prose h2 {
  margin: var(--sp-7) 0 var(--sp-3);
  font-size: var(--step-2);
  letter-spacing: .04em;
  color: var(--gold);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--line);
}
.prose h3 { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--step-1); letter-spacing: .03em; }
.prose h4 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--step-0);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.prose h5, .prose h6 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.prose p { margin: 0 0 var(--sp-4); }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { color: var(--text-dim); }
.prose a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.prose a:hover { color: var(--gold-bright); border-color: var(--gold); }

.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-left: 1.35rem; }
.prose li { margin-bottom: .35rem; }
.prose li > ul, .prose li > ol { margin: .35rem 0 .1rem; }
.prose ul { list-style: none; padding-left: 1.15rem; }
.prose ul > li { position: relative; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: -.95rem;
  top: .68em;
  width: 5px; height: 5px;
  background: var(--gold-soft);
  transform: rotate(45deg);
}
.prose ul ul > li::before { background: none; border: 1px solid var(--gold-soft); }

/* component lists opt out of the document list styling. Only lists belong
   here: .filterbar is a div and this rule was flattening its left padding. */
.prose .cardgrid, .prose .tilegrid, .prose .ladder,
.prose .hero__facts, .prose .table-strip {
  padding-left: 0;
  list-style: none;
}
.prose .cardgrid > li::before, .prose .tilegrid > li::before,
.prose .ladder > li::before, .prose .hero__facts > li::before,
.prose .table-strip > li::before { content: none; }

.prose code {
  font-family: var(--font-mono);
  font-size: .86em;
  padding: .12em .35em;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--gold-bright);
}
.prose pre {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  overflow-x: auto;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-soft);
  border-radius: var(--r-md);
}
.prose pre code { padding: 0; background: none; border: 0; color: var(--text-dim); font-size: .84em; }

.prose blockquote {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--gold-soft);
  background: var(--gold-wash);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text-dim);
}
.prose blockquote p:last-child { margin-bottom: 0; }

hr.rule, .prose hr {
  height: 1px;
  border: 0;
  margin: var(--sp-6) 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}

/* ornamental divider */
.orn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
  color: var(--gold-soft);
}
.orn::before, .orn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line));
}
.orn::after { background: linear-gradient(90deg, var(--gold-line), transparent); }
.orn__mark { font-size: .8rem; letter-spacing: .3em; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-dim);
  font-weight: 300;
  text-wrap: pretty;
}


/* ==========================================================================
   5  COMPONENTS
   ========================================================================== */

/* --- data table ---------------------------------------------------------- */
.table-wrap {
  margin: 0 0 var(--sp-5);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums lining-nums;
}
.data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .55rem .8rem;
  text-align: left;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--bg-inset);
  border-bottom: 1px solid var(--gold-line);
}
.data-table td {
  padding: .48rem .8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-inset) 45%, transparent); }
.data-table tbody tr:hover { background: var(--gold-wash); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .ta-center { text-align: center; }
.data-table .ta-right { text-align: right; }
.data-table--compact td, .data-table--compact th { padding: .32rem .6rem; }

/* --- tier badge ---------------------------------------------------------- */
.tier-badge {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  --tier-hue: var(--gold);
}
.tier-badge__t {
  padding: .34em .5em;
  background: color-mix(in srgb, var(--tier-hue) 20%, transparent);
  color: var(--tier-hue);
}
.tier-badge__die {
  padding: .34em .5em;
  background: var(--bg-inset);
  color: var(--text-dim);
  border-left: 1px solid var(--gold-line);
}
.tier-badge--t1 { --tier-hue: var(--stat-sense); }
.tier-badge--t2 { --tier-hue: var(--stat-mind); }
.tier-badge--t3 { --tier-hue: var(--stat-fate); }
.tier-badge--t4 { --tier-hue: var(--stat-body); }
.tier-badge--t5 { --tier-hue: var(--crimson); }
.tier-badge--t1, .tier-badge--t2, .tier-badge--t3,
.tier-badge--t4, .tier-badge--t5 { border-color: color-mix(in srgb, var(--tier-hue) 45%, transparent); }
.tier-badge--t1 .tier-badge__die, .tier-badge--t2 .tier-badge__die,
.tier-badge--t3 .tier-badge__die, .tier-badge--t4 .tier-badge__die,
.tier-badge--t5 .tier-badge__die { border-left-color: color-mix(in srgb, var(--tier-hue) 45%, transparent); }

/* --- role chip ----------------------------------------------------------- */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .6em;
  border-radius: 999px;
  border: 1px solid;
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.role-chip::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  transform: rotate(45deg);
}
.role-chip--minor { color: var(--text-dim); border-color: var(--line-strong); background: var(--bg-inset); }
.role-chip--major { color: var(--gold); border-color: var(--gold-line); background: var(--gold-wash); }
.role-chip--sovereign {
  color: var(--crimson-soft);
  border-color: color-mix(in srgb, var(--crimson) 55%, transparent);
  background: var(--crimson-wash);
}
:root[data-theme="light"] .role-chip--sovereign { color: var(--crimson); }

.tag {
  display: inline-block;
  padding: .18em .55em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--step--2);
  color: var(--text-faint);
  background: var(--bg-inset);
  white-space: nowrap;
}

.chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }

/* --- statblock ----------------------------------------------------------- */
.statblock {
  position: relative;
  margin: 0 0 var(--sp-6);
  padding: var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.statblock::before, .statblock::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold-soft);
  opacity: .75;
  pointer-events: none;
}
.statblock::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-radius: var(--r-md) 0 0 0; }
.statblock::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-radius: 0 0 var(--r-md) 0; }

.statblock__head { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.statblock__portrait {
  width: 190px;
  flex: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
  background: var(--bg-sunk);
  box-shadow: var(--shadow-sm);
}
.statblock__ident { flex: 1 1 16rem; min-width: 0; }
.statblock__name {
  margin: 0 0 .2rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--gold-bright);
  line-height: 1.15;
}
.statblock__line {
  margin: 0 0 .7rem;
  font-style: italic;
  color: var(--text-dim);
  font-size: var(--step--1);
}
.statblock__flavor { margin: var(--sp-4) 0 0; color: var(--text-dim); }

/* Component headings live inside .prose, where `.prose h1-h3` out-specifies a
   single component class and would impose the document rhythm on them. These
   restate the component's own scale. Extend the list if another card type
   uses a heading tag. */
.prose .statblock__name { margin: 0 0 .2rem; font-size: var(--step-2); }
.prose .statblock__name::after { content: none; }
.prose .card__title { margin: 0; font-size: var(--step-0); }
.prose .ability__name { margin: 0; font-size: var(--step-0); }
.prose .spell__name { margin: 0; font-size: var(--step-0); }
.prose .tile__title { margin: .3rem 0 .4rem; font-size: var(--step-1); }

/* --- stat band ----------------------------------------------------------- */
.statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1px;
  margin: var(--sp-5) 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.statband__item { padding: .55rem .75rem; background: var(--bg-inset); }
.statband__k {
  display: block;
  font-size: var(--step--2);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.statband__v {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.statband__v small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-faint);
  font-size: .68em;
  line-height: 1.3;
}

/* --- six-stat table ------------------------------------------------------ */
.stat-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stat-table th, .stat-table td { padding: .4rem .7rem; border-bottom: 1px solid var(--line); text-align: center; }
.stat-table th {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.stat-table td:first-child, .stat-table th:first-child { text-align: left; }
.stat-table td { font-family: var(--font-mono); font-size: var(--step--1); }
.stat-table td:first-child {
  font-family: var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: var(--step--2);
  font-weight: 600;
}
.stat-table tr:last-child td { border-bottom: 0; }
.stat-table .stat--body td:first-child { color: var(--stat-body); }
.stat-table .stat--mind td:first-child { color: var(--stat-mind); }
.stat-table .stat--sense td:first-child { color: var(--stat-sense); }
.stat-table .stat--heart td:first-child { color: var(--stat-heart); }
.stat-table .stat--cunning td:first-child { color: var(--stat-cunning); }
.stat-table .stat--fate td:first-child { color: var(--stat-fate); }

/* --- ability cards ------------------------------------------------------- */
.ability {
  --kind-hue: var(--gold);
  position: relative;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 3px);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.ability::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--kind-hue);
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.ability__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.ability__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--text);
  letter-spacing: .02em;
}
.ability__kind {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kind-hue);
  padding: .16em .5em;
  border: 1px solid color-mix(in srgb, var(--kind-hue) 40%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--kind-hue) 12%, transparent);
  line-height: 1;
}
.ability__meta { margin-left: auto; font-size: var(--step--2); color: var(--text-faint); font-family: var(--font-mono); }
.ability__body { color: var(--text-dim); font-size: var(--step--1); }
.ability__body > :last-child { margin-bottom: 0; }
.ability__body p { margin: 0 0 .6rem; }

.ability--passive     { --kind-hue: var(--stat-sense); }
.ability--maneuver    { --kind-hue: var(--stat-mind); }
.ability--declaration { --kind-hue: var(--stat-cunning); }
.ability--reaction    { --kind-hue: var(--stat-heart); }
.ability--deed        { --kind-hue: var(--gold); }
.ability--deed { background: linear-gradient(180deg, var(--gold-wash), transparent 55%), var(--bg-card); }

/* --- spell / prayer cards ------------------------------------------------ */
.spell {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}
.spell__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.spell__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.spell__tier {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .2em .6em;
  white-space: nowrap;
}
.spell__meta {
  margin: 0 0 .55rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
  letter-spacing: .02em;
}
.spell__meta span + span::before { content: " | "; color: var(--line-strong); }
.spell__body { font-size: var(--step--1); color: var(--text-dim); }
.spell__body > :last-child { margin-bottom: 0; }
.spell--prayer { border-left-color: var(--stat-sense); }
.spell--litany { border-left-color: var(--stat-heart); }
.spell--discipline { border-left-color: var(--stat-cunning); }
.spell--jutsu { border-left-color: var(--stat-body); }

/* --- rank ladder --------------------------------------------------------- */
.ladder { margin: 0 0 var(--sp-5); padding: 0; list-style: none; position: relative; }
.ladder::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: .8rem;
  bottom: .8rem;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-line), var(--line));
}
.ladder__rung {
  position: relative;
  display: flex;
  gap: var(--sp-4);
  padding: .45rem 0;
  margin: 0;
}
.ladder__rung::before { content: none; }
.ladder__tier {
  position: relative;
  z-index: 1;
  flex: none;
  width: 2.1rem; height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-inset);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
}
.ladder__rung--ultimate .ladder__tier {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px var(--gold-wash);
}
:root[data-theme="light"] .ladder__rung--ultimate .ladder__tier { color: var(--bg-card); }
.ladder__text { padding-top: .15rem; color: var(--text-dim); font-size: var(--step--1); }
.ladder__text strong { color: var(--text); }
.ladder__text > :last-child { margin-bottom: 0; }

/* --- callouts ------------------------------------------------------------ */
.callout {
  --call-hue: var(--gold);
  position: relative;
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  background: color-mix(in srgb, var(--call-hue) 7%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--call-hue) 28%, var(--line));
  border-left: 3px solid var(--call-hue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout__title {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--call-hue);
}
.callout > :last-child { margin-bottom: 0; }
.callout p { font-size: var(--step--1); }
.callout--note    { --call-hue: var(--stat-mind); }
.callout--example { --call-hue: var(--stat-sense); }
.callout--gm      { --call-hue: var(--stat-cunning); }
.callout--danger  { --call-hue: var(--crimson); }
.callout--rule    { --call-hue: var(--gold); }
.callout--wound   { --call-hue: var(--hp-wound); }
/* the two red hues sit at about 3:1 against their own tinted card in the dark
   theme, so the title takes the lighter sibling and the hue keeps the rule */
.callout--danger .callout__title { color: var(--crimson-soft); }
.callout--wound .callout__title { color: var(--hp-wound-soft); }

/* --- filter bar ---------------------------------------------------------- */
/* site.js rearranges the authored markup into .filterbar__head (search box,
   Filters button, live count, Reset) plus .filterbar__panel (the pill rows).
   On wide screens the panel is always open and reads as the original stack;
   below the drawer breakpoint the panel is a disclosure that opens over the
   content, so the sticky stack stays near one row tall. */
.filterbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 30;
  display: grid;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--bg-raise) 94%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.filterbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.filterbar__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.filterbar__head .filterbar__search { flex: 1 1 14rem; width: auto; }
.filterbar__panel { display: grid; gap: var(--sp-3); }
.filterbar__more { display: none; }

.filterbar__reset {
  flex: none;
  padding: .3em .75em;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: var(--step--2);
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.filterbar__reset:hover { color: var(--gold); border-color: var(--gold-line); }
.filterbar__reset[hidden] { display: none; }
.filterbar__label {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-right: .3rem;
  min-width: 3.2rem;
}
.filterbar__search {
  width: 100%;
  padding: .55rem .8rem;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--step--1);
}
.filterbar__search::placeholder { color: var(--text-faint); }
.filterbar__search:focus { border-color: var(--gold-line); outline-offset: 0; }

.filter-pill {
  padding: .3em .75em;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: var(--step--2);
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease);
}
.filter-pill:hover { color: var(--gold); border-color: var(--gold-line); }
.filter-pill.is-on {
  color: var(--bg);
  background: var(--gold);
  border-color: var(--gold-bright);
  font-weight: 600;
}
:root[data-theme="light"] .filter-pill.is-on { color: var(--bg-card); }

.filter-count {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
  margin-left: auto;
  white-space: nowrap;
}
/* sort control: same shape as a pill, wide enough for its longest option.
   appearance:none so the native widget stops drawing over the pill styling */
.filterbar__select {
  appearance: none;
  -webkit-appearance: none;
  padding: .3em 1.7em .3em .6em;
  background-color: var(--bg-inset);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23968a76' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55em center;
  background-size: .6em auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: var(--step--2);
  letter-spacing: .06em;
  cursor: pointer;
}
.filterbar__select:hover { color: var(--gold); border-color: var(--gold-line); }

.filter-empty {
  display: none;
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-faint);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}
.is-empty .filter-empty { display: block; }
.filter-empty__reset {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: .4em 1.1em;
  background: var(--bg-inset);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.filter-empty__reset:hover { background: var(--gold-wash); color: var(--gold-bright); }

/* A heading plus the filterable cards under it (spell tiers, aspects,
   litany tiers). When a filter empties the group the heading goes with it
   instead of stranding a label over blank space. */
.filtergroup:not(:has([data-filter-item]:not([hidden]))) { display: none; }

/* --- card grid ----------------------------------------------------------- */
.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
}
.cardgrid > li::before { content: none; }
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-line);
  box-shadow: var(--shadow-md);
}
.card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--line);
}
/* add --art when the image is a placeholder SVG from assets/img rather than a
   photographic portrait: line art must fit the box, not be cropped by it */
.card__thumb--art, .statblock__portrait--art {
  object-fit: contain;
  padding: 5%;
  background: var(--bg-sunk);
}
.card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--gold-bright);
  line-height: 1.2;
}
.card__meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.card__desc {
  margin: 0;
  font-size: var(--step--2);
  color: var(--text-faint);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__type {
  font-size: var(--step--2);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- section tiles ------------------------------------------------------- */
.tilegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tilegrid > li::before { content: none; }
.tile {
  position: relative;
  display: block;
  height: 100%;
  padding: var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 0% 0%, var(--gold-wash), transparent 65%);
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
.tile:hover { transform: translateY(-3px); border-color: var(--gold-line); box-shadow: var(--shadow-md); }
.tile:hover::after { opacity: 1; }
.tile__num {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .2em;
  color: var(--gold-soft);
}
.tile__title {
  margin: .3rem 0 .4rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: .03em;
}
.tile__desc { margin: 0 0 .7rem; font-size: var(--step--1); color: var(--text-dim); }
.tile__links { display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: var(--step--2); color: var(--text-faint); }

/* --- landing page -------------------------------------------------------- */
/* the landing page lives inside .prose, so switch off the document heading
   decoration that would otherwise double up on the hero and section titles */
.home h1::after { content: none; }
.home h1 { margin: 0; }
.home h2 { border-bottom: 0; padding-bottom: 0; }

.home { position: relative; z-index: 1; }
.home__section { max-width: 72rem; margin: 0 auto; padding: 0 var(--sp-5) var(--sp-7); }
.home__section--narrow { max-width: 50rem; }
.home .home__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.home .home__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 10vh, 7rem) var(--sp-5) clamp(3rem, 8vh, 5.5rem);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 45% at 50% 30%, var(--gold-wash), transparent 72%),
    radial-gradient(120% 60% at 50% 100%, var(--crimson-wash), transparent 70%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 52rem; margin: 0 auto; }
.hero__crown { color: var(--gold); display: flex; justify-content: center; margin-bottom: var(--sp-3); }
.hero__crown svg { width: 46px; height: auto; filter: drop-shadow(0 0 14px var(--gold-wash)); }
.hero__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: .28em;
  text-indent: .28em;
  line-height: 1;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__rule {
  width: min(24rem, 70%);
  height: 1px;
  margin: var(--sp-4) auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero__sub {
  margin: 0 auto var(--sp-5);
  max-width: 34rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-dim);
  text-wrap: pretty;
}
.hero__edition {
  display: inline-block;
  margin-bottom: var(--sp-4);
  padding: .3em .9em;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__search {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: min(30rem, 100%);
  margin: 0 auto var(--sp-5);
  padding: .8rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  color: var(--text-dim);
  font-size: var(--step-0);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.hero__search:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.hero__search span:first-of-type { color: var(--gold); display: flex; }
.hero__search .searchbtn__keys { margin-left: auto; display: flex; gap: 3px; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--text-faint);
}
.hero__facts > li::before { content: none; }
.hero__facts li { display: flex; align-items: baseline; gap: .4rem; }
.hero__facts b { font-family: var(--font-mono); color: var(--gold); font-weight: 600; }

/* one orchestrated entrance, landing page only */
.hero__reveal { opacity: 0; animation: reveal .7s var(--ease) forwards; }
.hero__reveal--1 { animation-delay: .05s; }
.hero__reveal--2 { animation-delay: .18s; }
.hero__reveal--3 { animation-delay: .30s; }
.hero__reveal--4 { animation-delay: .42s; }
.hero__reveal--5 { animation-delay: .54s; }
.hero__reveal--6 { animation-delay: .66s; }
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__rule.hero__reveal { animation-name: reveal-rule; }
@keyframes reveal-rule { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }

/* at-the-table strip */
.table-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px;
  margin: 0 auto var(--sp-7);
  max-width: 72rem;
  background: var(--line);
  border-block: 1px solid var(--line);
  list-style: none;
  padding: 0;
}
.table-strip > li::before { content: none; }
.table-strip a {
  display: block;
  height: 100%;
  padding: var(--sp-5);
  background: var(--bg-raise);
  color: inherit;
  text-decoration: none;
  transition: background .18s var(--ease);
}
.table-strip a:hover { background: var(--bg-card); }
.table-strip strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .3rem;
}
.table-strip span { font-size: var(--step--1); color: var(--text-faint); }

/* --- statline (KING.md Part 7B convention) ------------------------------- */
/* the whole point of the strip is that every fact is visible at a glance, so
   it wraps rather than hiding a third of itself behind a scrollbar. site.js
   groups each label with its value and adds --pairs, which turns the strip
   into a wrapping flex row where no pair ever splits across lines. */
.statline {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  color: var(--text-dim);
  padding: .6rem .8rem;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  white-space: normal;
}
.statline b { color: var(--gold); font-weight: 600; }
.statline--pairs { display: flex; flex-wrap: wrap; column-gap: .55rem; row-gap: .3rem; }
.statline__pair { display: inline-flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.statline__pair + .statline__pair::before {
  content: "\00b7";
  margin-right: .55rem;
  color: var(--line-strong);
}
/* a phone gets one fact per line rather than a long value forced onto one */
@media (max-width: 700px) {
  .statline--pairs { display: block; }
  .statline__pair { display: block; white-space: normal; }
  .statline__pair + .statline__pair::before { content: none; }
}

/* --- jump row ------------------------------------------------------------ */
/* anchor links to the h2 sections of a long reference page (equipment, the GM
   monster guide, advancement). The right-hand TOC does this job on wide
   screens; the jump row is what a phone at the table gets instead. */
.jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--sp-6); }
.prose .jump a {
  padding: .24em .75em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-inset);
}
.prose .jump a:hover,
.prose .jump a:focus-visible {
  color: var(--gold);
  border-color: var(--gold-line);
  background: var(--gold-wash);
}
@media print { .jump { display: none !important; } }

/* --- page nav (mobile in-page contents) ---------------------------------- */
/* The right-hand TOC is the wide-screen answer to "where am I in this
   chapter". Below its breakpoint every page that has one gets the same list
   as a disclosure under the h1, including the wide browsers that never get a
   TOC column. Plain <details>, so it works with scripting off. */
.pagenav { display: none; }
.pagenav[open] .pagenav__summary::after { transform: rotate(-135deg); }
.pagenav__summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .85rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pagenav__summary::-webkit-details-marker { display: none; }
.pagenav__summary::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.pagenav__n { font-family: var(--font-mono); color: var(--text-faint); letter-spacing: 0; }
.prose .pagenav__list {
  list-style: none;
  margin: .4rem 0 0;
  padding: .3rem 0;
  max-height: 55vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
}
.prose .pagenav__list > li { margin: 0; }
.prose .pagenav__list > li::before { content: none; }
.prose .pagenav__list a {
  display: block;
  padding: .4rem .85rem;
  color: var(--text-dim);
  font-size: var(--step--1);
  line-height: 1.4;
  text-decoration: none;
  border-bottom: 0;
}
.prose .pagenav__list a:hover { color: var(--gold); background: var(--gold-wash); }
.pagenav__item--h3 a { padding-left: 1.9rem !important; color: var(--text-faint) !important; }

@media (max-width: 1180px) {
  .pagenav { display: block; margin: 0 0 var(--sp-5); }
}
@media print { .pagenav { display: none !important; } }


/* ==========================================================================
   6  PALETTE (command-palette search)
   ========================================================================== */

.palette { position: fixed; inset: 0; z-index: 200; }
.palette[hidden] { display: none; }
.palette__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 4, .66);
  backdrop-filter: blur(3px);
  border: 0;
}
.palette__panel {
  position: relative;
  max-width: 40rem;
  margin: 8vh auto 0;
  background: var(--bg-raise);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: palette-in .16s var(--ease);
}
@keyframes palette-in { from { opacity: 0; transform: translateY(-8px) scale(.99); } }

.palette__bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
}
.palette__icon { display: flex; color: var(--gold); }
.palette__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-size: var(--step-0);
  color: var(--text);
}
.palette__input::placeholder { color: var(--text-faint); }
.palette__input::-webkit-search-cancel-button { display: none; }
.palette__esc { background: none; border: 0; cursor: pointer; padding: 0; }

.palette__body { max-height: min(60vh, 32rem); overflow-y: auto; overscroll-behavior: contain; }
.palette__results { list-style: none; margin: 0; padding: .35rem; }
.palette__group {
  padding: .55rem .75rem .2rem;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.palette__hit { border-radius: var(--r-md); }
.palette__hit a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem .7rem;
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
}
.palette__hit.is-sel a, .palette__hit a:hover { background: var(--gold-wash); }
.palette__hit.is-sel a { box-shadow: inset 2px 0 0 var(--gold); }
.palette__t { font-weight: 600; }
.palette__t mark { background: none; color: var(--gold-bright); font-weight: 700; }
.palette__s {
  margin-left: auto;
  font-size: var(--step--2);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
.palette__k {
  flex: none;
  width: 4.4rem;
  padding: .18em 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-faint);
  background: var(--bg-inset);
}
.palette__k[data-kind="creature"] { color: var(--crimson-soft); border-color: color-mix(in srgb, var(--crimson) 45%, transparent); }
.palette__k[data-kind="spell"], .palette__k[data-kind="prayer"],
.palette__k[data-kind="litany"], .palette__k[data-kind="discipline"],
.palette__k[data-kind="jutsu"], .palette__k[data-kind="mystic"] { color: var(--stat-cunning); border-color: color-mix(in srgb, var(--stat-cunning) 45%, transparent); }
.palette__k[data-kind="martial"] { color: var(--stat-body); border-color: color-mix(in srgb, var(--stat-body) 45%, transparent); }
.palette__k[data-kind="skill"] { color: var(--stat-sense); border-color: color-mix(in srgb, var(--stat-sense) 45%, transparent); }
.palette__k[data-kind="rule"] { color: var(--gold); border-color: var(--gold-line); }
.palette__k[data-kind="equipment"] { color: var(--stat-mind); border-color: color-mix(in srgb, var(--stat-mind) 45%, transparent); }
.palette__k[data-kind="throne"], .palette__k[data-kind="path"],
.palette__k[data-kind="race"], .palette__k[data-kind="character"] { color: var(--stat-heart); border-color: color-mix(in srgb, var(--stat-heart) 45%, transparent); }

.palette__hint { margin: 0; padding: .6rem .9rem; border-top: 1px solid var(--line); color: var(--text-faint); font-size: var(--step--2); }
.palette__none { padding: var(--sp-5); text-align: center; color: var(--text-faint); }

body.is-locked { overflow: hidden; }


/* ==========================================================================
   7  UTILITIES
   ========================================================================== */

.u-body    { color: var(--stat-body); }
.u-mind    { color: var(--stat-mind); }
.u-sense   { color: var(--stat-sense); }
.u-heart   { color: var(--stat-heart); }
.u-cunning { color: var(--stat-cunning); }
.u-fate    { color: var(--stat-fate); }
.u-vitality, .stat-vitality { color: var(--hp-vitality); }
.u-stamina { color: var(--hp-stamina); }
.u-vigor   { color: var(--hp-vigor); }
.u-wound   { color: var(--hp-wound); }
.u-gold    { color: var(--gold); }
.u-dim     { color: var(--text-faint); }
.u-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-nowrap  { white-space: nowrap; }
.u-center  { text-align: center; }
.u-stack   { display: grid; gap: var(--sp-4); }
.u-mt-6    { margin-top: var(--sp-6); }
.u-mb-0    { margin-bottom: 0; }

.columns-2 { columns: 2; column-gap: var(--sp-6); }
.columns-2 > * { break-inside: avoid; }


/* ==========================================================================
   8  RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
  .layout.has-toc { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 880px) {
  :root { --topbar-h: 3.5rem; }
  .topbar { padding: 0 var(--sp-2); gap: var(--sp-1); }
  .topbar__menu { display: grid; }
  .wordmark__tag { display: none; }
  .searchbtn__label { display: none; }
  .searchbtn { flex: none; width: 2.75rem; height: 2.75rem; justify-content: center; padding: 0; }
  .searchbtn__keys { display: none; }
  /* one-handed at the table: the three header controls hit 44x44 */
  .iconbtn { width: 2.75rem; height: 2.75rem; }
  .totop { width: 2.75rem; height: 2.75rem; right: .9rem; bottom: 1.6rem; }
  .filter-pill { min-height: 2.5rem; padding: .5em .85em; }
  .filterbar__reset, .filterbar__more, .filterbar__select { min-height: 2.5rem; }

  .layout, .layout.has-toc { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    z-index: 56;
    width: min(20rem, 84vw);
    height: calc(100dvh - var(--topbar-h));
    background: var(--bg-raise);
    box-shadow: var(--shadow-lg);
    transform: translateX(-102%);
    transition: transform .22s var(--ease);
  }
  body.drawer-open .sidebar { transform: none; }
  .main { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .statblock__portrait { width: 130px; }
  .columns-2 { columns: 1; }

  /* --- collapsed filter bar ---
     Four permanent pill rows ate more than half a phone screen. The sticky
     part is now one row: search, a Filters disclosure carrying the active
     count, and the live result count. The pills open over the page. */
  .filterbar { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .filterbar__head { gap: .4rem; }
  .filterbar__head .filterbar__search { flex: 1 1 8rem; }
  .filterbar__more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: none;
    min-height: 2.5rem;
    padding: .3em .8em;
    background: var(--bg-inset);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: var(--step--2);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .filterbar__more[aria-expanded="true"] {
    color: var(--gold);
    border-color: var(--gold-line);
    background: var(--gold-wash);
  }
  .filterbar__more-n {
    display: none;
    min-width: 1.35em;
    padding: .1em .3em;
    border-radius: 999px;
    background: var(--gold);
    color: var(--bg);
    font-family: var(--font-mono);
    letter-spacing: 0;
    text-align: center;
  }
  .filterbar.has-filters .filterbar__more-n { display: inline-block; }
  .filterbar .filter-count { flex: 1 0 100%; margin-left: 0; text-align: right; }

  .filterbar__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2;
    display: none;
    max-height: min(60vh, 26rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-3);
    background: var(--bg-raise);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-lg);
  }
  .filterbar.is-open .filterbar__panel { display: grid; }
  .filterbar__label { min-width: 100%; margin: 0 0 .1rem; }
}

@media (max-width: 460px) {
  .main { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  .statblock { padding: var(--sp-4); }
  .cardgrid { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
  .palette__panel { margin: 0; height: 100dvh; max-width: none; border-radius: 0; }
  .palette__body { max-height: calc(100dvh - 7rem); }
  .palette__s { display: none; }
}

@media (min-width: 2200px) {
  :root { --measure: 80ch; --sidebar-w: 19rem; --toc-w: 16rem; }
  .layout { max-width: 120rem; }
}


/* ==========================================================================
   9  PRINT
   ========================================================================== */

@media print {
  /* The no-flash boot script always stamps data-theme on <html>, so a bare
     :root here (0,1,0) loses to the theme blocks (0,2,0) and the page prints
     in whatever theme is on screen. Match their specificity and come later in
     the file, and print is black on white from either theme. */
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #fff; --bg-raise: #fff; --bg-card: #fff; --bg-sunk: #fff; --bg-inset: #fff;
    --text: #000; --text-dim: #222; --text-faint: #444;
    --line: #bbb; --line-strong: #888;
    --gold: #6a5010; --gold-bright: #4a3808; --gold-soft: #6a5010; --gold-deep: #4a3808;
    --gold-line: #999; --gold-wash: transparent;

    /* the accent hues carry meaning (stat colours, health tracks), so they
       stay hued but drop to values that hold up as ink */
    --crimson: #8c281f; --crimson-soft: #6f1c16; --crimson-wash: transparent;
    --stat-body: #8c3322; --stat-mind: #25497a; --stat-sense: #175a42;
    --stat-heart: #7f2a4d; --stat-cunning: #52307d; --stat-fate: #6b5012;
    --hp-vitality: #8c261d; --hp-stamina: #22486c; --hp-vigor: #17564b;
    --hp-wound: #6f1c16; --hp-wound-soft: #6f1c16;

    --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
    --grain-opacity: 0;
    --vignette: none;
  }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  body::before, body::after { display: none; }
  .topbar, .sidebar, .toc, .footer, .totop, .palette, .scrim, .skiplink,
  .crumbs, .filterbar { display: none !important; }
  .layout, .layout.has-toc { display: block; max-width: none; }
  .main { padding: 0; }
  .prose { max-width: none; }
  .statblock, .ability, .spell, .callout, .table-wrap, .card {
    box-shadow: none;
    break-inside: avoid;
    border-color: #999;
  }
  .statblock::before, .statblock::after { display: none; }
  /* the band draws its cell separators with a background, which browsers drop
     from printed output unless told otherwise */
  .statband, .statband__item, .data-table th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .statband { background: #888; }
  .statband__item { background: #fff; }
  .data-table th { position: static; background: #eee; color: #000; }
  .prose a { color: #000; border-bottom: 0; }
  .prose h1, .prose h2, .prose h3 { color: #000; break-after: avoid; }
  .callout__title, .callout--danger .callout__title, .callout--wound .callout__title { color: #000; }
}


/* ==========================================================================
   10  MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__line, .hero__reveal { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   11  ADDITIONS - reference grid  (added by the rules/character renderer)
   ========================================================================== */

/* .refgrid / .refcard: a dense card grid for pages that are consulted rather
   than read in order. Used by rules/reference.html and by the six-stat opener
   on character/creation.html. Cards size to their content, hold a compact
   table, and never split across a printed page. */
.refgrid {
  display: grid;
  /* 22rem so the tables inside a card stop hard-wrapping every row, auto-fit so
     a section holding two cards fills the row instead of leaving a hole. The
     min() keeps the track from outgrowing a phone column, which otherwise
     pushes the whole document 4px sideways. */
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--sp-4);
  align-items: start;
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
}
.refgrid > li::before { content: none; }
.refcard {
  padding: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.refcard--wide { grid-column: 1 / -1; }
/* ability pairs in a refgrid column are narrow enough that a long meta label
   wraps and a short one does not, which knocks the pair out of rhythm. Give
   the meta its own reserved line above the name in both cards. */
.refgrid > .ability > .ability__head > .ability__meta {
  order: -1;
  flex: 1 0 100%;
  margin-left: 0;
  text-align: right;
}
.prose .refcard__title {
  margin: 0 0 var(--sp-3);
  padding: 0 0 .35rem;
  font-size: var(--step-0);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-line);
}
.refcard__body { font-size: var(--step--1); color: var(--text-dim); }
.refcard__body > :last-child { margin-bottom: 0; }
.refcard__body p, .refcard__body ul, .refcard__body ol { margin: 0 0 .6rem; }
.refcard__body pre { margin: 0 0 .6rem; }
.refcard .table-wrap {
  margin: 0 0 .6rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.refcard .data-table th { background: var(--bg-card); }
.refcard__note { margin: .5rem 0 0; font-size: var(--step--2); color: var(--text-faint); }
.refcard__src { margin: .7rem 0 0; font-size: var(--step--2); }

/* a component heading inside .prose loses to .prose h3 / .prose h4 on
   specificity, so each card class has to restate its own scale. Restate the
   component, never someone else's: the spell name keeps its gilt small caps. */
.prose .ability__name {
  margin: 0;
  font-size: var(--step-0);
  text-transform: none;
  letter-spacing: .02em;
  color: var(--text);
}
.prose .spell__name {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold-bright);
}
.prose .tile__title { margin: .3rem 0 .4rem; font-size: var(--step-1); color: var(--gold-bright); }
.prose .card__title { margin: 0; font-size: var(--step-0); color: var(--gold-bright); }

/* an index of anchors above a long list of entries (paths, thrones) */
.prose a.tag {
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  text-decoration: none;
}
.prose a.tag:hover {
  color: var(--gold-bright);
  border-color: var(--gold-line);
  background: var(--gold-wash);
}

@media print {
  .refgrid { grid-template-columns: repeat(2, 1fr); gap: .45rem; }
  .refcard { break-inside: avoid; box-shadow: none; border-color: #999; }
  .refcard__src { display: none; }
}