/* Understanding Labyrinthe: high-fantasy theme */
:root {
  --ink: #e9dfc8;
  --ink-soft: #c8bb9c;
  --muted: #9a8f78;
  --bg: #0f0c14;
  --bg-2: #17121f;
  --panel: #1d1726;
  --panel-2: #241c30;
  --line: #3a2f47;
  --gold: #d9b46a;
  --gold-2: #f3dc9c;
  --gold-deep: #8a5a1a;
  --blood: #a8322a;
  --ok: #6fbf73;
  --link: #f0c878;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --hdr-h: 74px;
  --side-w: 300px;
  --display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --heading: 'Cinzel', Georgia, 'Times New Roman', serif;
  --body: 'EB Garamond', Garamond, Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--hdr-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 1.18rem/1.65 var(--body);
  background:
    radial-gradient(1200px 600px at 80% -10%, #2a1f3d55, transparent 60%),
    radial-gradient(900px 500px at -10% 30%, #3a241455, transparent 60%),
    linear-gradient(var(--bg), #0b0910);
  background-attachment: fixed;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--link); text-decoration-color: #f0c87866; text-underline-offset: 3px; }
a:hover { color: var(--gold-2); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: #000; padding: 8px 14px; z-index: 100; border-radius: 6px; }
.skip:focus { left: 8px; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; vertical-align: -0.18em; flex: none; }
.ico.big { width: 2.4rem; height: 2.4rem; color: var(--gold); }
.cut { fill: #000; fill-opacity: .42; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50; min-height: var(--hdr-h);
  background: linear-gradient(180deg, #1a1322f2, #120e18f2);
  border-bottom: 1px solid #000; box-shadow: 0 1px 0 #d9b46a55, 0 6px 20px #0008;
  backdrop-filter: blur(6px);
}
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .55; }
.hdr-inner { max-width: 1500px; margin: 0 auto; padding: 10px 18px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; flex: 1; }
.brand-ico { width: 44px; height: 44px; fill: var(--gold); flex: none; filter: drop-shadow(0 0 8px #d9b46a55); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-title { font: 700 1.45rem/1.1 var(--display); color: var(--gold-2); letter-spacing: .02em; text-shadow: 0 2px 0 #000; }
.brand-strap { font: 500 .78rem/1.3 var(--heading); color: var(--ink-soft); letter-spacing: .02em; }
.hdr-search { position: relative; display: flex; align-items: center; width: min(360px, 34vw); flex: none; }
.hdr-search > .ico { position: absolute; left: 12px; color: var(--gold); pointer-events: none; }
.hdr-search input[type=search] {
  width: 100%; padding: 10px 14px 10px 40px; border-radius: 999px; border: 1px solid var(--line);
  background: #0c0a10; color: var(--ink); font: 1rem var(--body);
  box-shadow: inset 0 1px 6px #000a;
}
.hdr-search input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px #d9b46a33; }
.suggest {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(460px, 92vw);
  background: var(--panel); border: 1px solid var(--gold-deep); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 6px; max-height: 70vh; overflow: auto;
}
.suggest a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.suggest a .ico { color: var(--gold); width: 1.4em; height: 1.4em; }
.suggest a span { display: flex; flex-direction: column; line-height: 1.25; }
.suggest a small { color: var(--muted); font-size: .8rem; }
.suggest a:hover, .suggest a.sel { background: var(--panel-2); }
.suggest a.all { justify-content: center; color: var(--link); font-family: var(--heading); font-size: .85rem; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.suggest .none { padding: 12px; color: var(--muted); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; width: 44px; height: 40px; padding: 9px 10px; cursor: pointer; flex: none; }
.nav-toggle span { display: block; height: 2px; background: var(--gold); margin: 4px 0; border-radius: 2px; transition: .2s; }

/* ---------------------------------------------------------------- layout */
.layout { flex: 1; width: 100%; max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); gap: 28px; padding: 22px 18px 40px; }
.sidebar { position: sticky; top: calc(var(--hdr-h) + 18px); align-self: start; max-height: calc(100vh - var(--hdr-h) - 36px); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sidebar nav { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 10px; box-shadow: var(--shadow); }
.side-home { display: flex; gap: 10px; align-items: center; padding: 8px 10px; font-family: var(--heading); text-decoration: none; color: var(--gold-2); border-radius: 8px; }
.side-home.active, .side-home:hover { background: var(--panel-2); }
.side-h { font: 700 .78rem var(--heading); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 12px 10px 6px; }
.toc, .toc-sub { list-style: none; margin: 0; padding: 0; }
.toc-sec { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font: 500 .95rem/1.25 var(--heading); }
.toc-sec .ico { color: var(--gold); }
.toc-sec .n, .toc-sub .n { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.toc-sec:hover { background: var(--panel-2); color: var(--gold-2); }
.toc > li.active > .toc-sec { background: linear-gradient(90deg, #d9b46a2a, transparent); color: var(--gold-2); box-shadow: inset 3px 0 0 var(--gold); }
.toc-sub { display: none; margin: 2px 0 8px 22px; border-left: 1px dashed var(--line); }
.toc > li.open > .toc-sub { display: block; }
.toc-sub a { display: flex; gap: 6px; padding: 4px 10px; font-size: .95rem; line-height: 1.3; text-decoration: none; color: var(--ink-soft); border-radius: 6px; }
.toc-sub a:hover { color: var(--gold-2); }
.toc-sub a.current { color: var(--gold-2); background: #d9b46a14; }
.scrim { position: fixed; inset: 0; background: #000a; z-index: 65; }

main { min-width: 0; outline: none; transition: opacity .15s; }
main.loading { opacity: .4; }

/* ---------------------------------------------------------------- banner */
.banner { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid #000; aspect-ratio: 4 / 1; min-height: 210px; background: #0b0d16; }
.banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.banner-text { position: absolute; left: 0; bottom: 0; top: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 5% 6%; max-width: 64%; background: linear-gradient(90deg, #0b0910e6 0%, #0b091099 60%, transparent); }
.banner-num { font: 700 .8rem var(--heading); letter-spacing: .25em; text-transform: uppercase; color: var(--gold); display: flex; gap: 6px; align-items: center; }
.banner h1 { margin: .2em 0 .15em; font: 700 clamp(1.5rem, 3.3vw, 2.9rem)/1.1 var(--display); color: var(--gold-2); text-shadow: 0 3px 0 #000, 0 0 24px #d9b46a44; }
.banner p { margin: 0; color: var(--ink); font-style: italic; font-size: clamp(.95rem, 1.4vw, 1.2rem); }
.banner p.banner-sub { margin-top: .35em; font-style: normal; font-family: var(--heading); font-size: clamp(.8rem, 1.1vw, 1rem); color: var(--gold-2); letter-spacing: .02em; }

/* ---------------------------------------------------------------- content */
.on-page { margin: 20px 0 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; }
.on-page h2 { margin: 0 0 6px; font: 700 .8rem var(--heading); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.on-page h2 .ico { color: var(--gold); }
.on-page ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.on-page a { display: inline-flex; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink-soft); font-size: .98rem; background: var(--bg-2); }
.on-page a .n { color: var(--gold); font-family: var(--heading); font-size: .82rem; align-self: center; }
.on-page a:hover, .on-page a.current { border-color: var(--gold-deep); color: var(--gold-2); }

.sub { margin: 26px 0 0; padding: 22px clamp(16px, 3vw, 34px) 26px; background: linear-gradient(180deg, #1d1726f0, #171220f0); border: 1px solid var(--line); border-radius: 14px; position: relative; box-shadow: 0 6px 24px #0006; }
.sub::before { content: ''; position: absolute; inset: 6px; border: 1px solid #d9b46a1a; border-radius: 10px; pointer-events: none; }
.sub-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 700 clamp(1.25rem, 2.2vw, 1.65rem)/1.2 var(--heading); color: var(--gold-2); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sub-title > .ico { width: 1.6em; height: 1.6em; color: var(--gold); padding: 5px; border: 1px solid var(--gold-deep); border-radius: 50%; background: radial-gradient(#2b2036, #120e18); }
.sub-title .n { color: var(--gold); font-size: .8em; opacity: .85; }
.sub-title .anchor { margin-left: auto; opacity: 0; text-decoration: none; color: var(--muted); font-size: .9em; }
.sub-title:hover .anchor { opacity: 1; }
.prose > p, .prose > ul, .prose > dl.glossary, .prose > .callout { max-width: 82ch; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: .7em 0; }
.prose .lead { font-size: 1.3rem; color: var(--gold-2); line-height: 1.55; }
.prose .lead-sm { font-style: italic; color: var(--ink-soft); }
.prose .emph { font-style: italic; color: var(--gold-2); border-left: 3px solid var(--gold); padding-left: 14px; }
.prose code { font-family: ui-monospace, Consolas, monospace; font-size: .85em; background: #0c0a10; border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; color: var(--gold-2); }
.muted { color: var(--muted); }
.rune-h { font: 700 1.1rem var(--heading); color: var(--gold); margin: 1.5em 0 .5em; display: flex; align-items: center; gap: 10px; letter-spacing: .04em; }
.rune-h::before { content: '✦'; color: var(--gold-deep); }
.rune-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
ul.rune-list { list-style: none; padding: 0; margin: .8em 0; }
ul.rune-list > li { position: relative; padding-left: 28px; margin: .45em 0; }
ul.rune-list > li::before { content: '◆'; position: absolute; left: 4px; top: .05em; color: var(--gold); font-size: .8em; }
mark.hit { background: #f3dc9c; color: #1a1208; border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 2px #f3dc9c55; }

/* callouts */
.callout { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); margin: 1.1em 0; border: 1px solid; }
.callout > .ico { width: 1.7em; height: 1.7em; margin-top: 2px; }
.callout > div { flex: 1; }
.callout.tip { background: #1e2a1c; border-color: #3f6a3a; } .callout.tip > .ico { color: var(--ok); }
.callout.warn { background: #2c1816; border-color: #6a2a20; } .callout.warn > .ico { color: #ff8a70; }
.callout.lore { background: #231c13; border-color: #6a5124; } .callout.lore > .ico { color: var(--gold); }

/* tables */
.table-wrap { overflow-x: auto; margin: 1em 0; -webkit-overflow-scrolling: touch; }
.table-wrap > table { margin: 0; }
table.tome { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1em 0; font-size: 1.02rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.tome th { font: 700 .82rem var(--heading); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); text-align: left; background: linear-gradient(#3a2a18, #2a1e12); padding: 10px 12px; border-bottom: 1px solid var(--gold-deep); }
table.tome td { padding: 9px 12px; border-top: 1px solid #ffffff0d; vertical-align: top; }
table.tome tbody tr:nth-child(even) td { background: #ffffff06; }
table.tome tbody tr:hover td { background: #d9b46a10; }
table.tome td:first-child { font-weight: 600; color: var(--gold-2); }
table.tome.small { font-size: .98rem; }
table.compare td:first-child { white-space: nowrap; }
table.compare .ico { color: var(--gold); }
.badge { display: inline-grid; place-items: center; min-width: 2em; height: 2em; padding: 0 6px; border-radius: 6px; background: linear-gradient(var(--gold-2), var(--gold-deep)); color: #1a1208; font: 700 .9rem var(--heading); box-shadow: 0 2px 0 #000; }

/* stat blocks */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 1em 0; }
.stat-strip > div { background: radial-gradient(circle at 50% 0, #3a2a18, #1a1320); border: 1px solid var(--gold-deep); border-radius: var(--radius); padding: 14px; text-align: center; }
.stat-strip .stat { display: block; font: 700 1.6rem var(--display); color: var(--gold-2); }
.stat-strip .lbl { font-size: .92rem; color: var(--ink-soft); }
dl.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 1em 0; }
dl.stats > div { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; padding: 8px 12px; }
dl.stats dt { font: 700 .75rem var(--heading); letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
dl.stats dd { margin: 2px 0 0; }
dl.glossary { margin: 1em 0; display: grid; grid-template-columns: minmax(160px, 260px) 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
dl.glossary dt { font: 700 1rem var(--heading); color: var(--gold-2); padding: 10px 14px; background: #2a1e12aa; border-top: 1px solid var(--line); }
dl.glossary dd { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); }
dl.glossary dt:first-of-type, dl.glossary dd:first-of-type { border-top: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-row span, .tag-cloud span { padding: 3px 12px; border: 1px solid var(--gold-deep); border-radius: 999px; background: #2a1e12; color: var(--gold-2); font-size: .95rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

/* cards */
.card-grid, .feature-grid, .bracket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 1em 0; }
.card-grid.three { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.card, .feature, .bracket { background: linear-gradient(180deg, var(--panel-2), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; position: relative; }
.card h4, .feature h4, .bracket h4 { margin: .2em 0 .35em; font: 700 1.08rem var(--heading); color: var(--gold-2); }
.card p, .feature p, .bracket p { margin: .3em 0; font-size: 1.04rem; }
.card ul { padding-left: 1.1em; margin: .4em 0; font-size: 1.02rem; } .card li { margin: .3em 0; }
.card.link { text-decoration: none; color: var(--ink); transition: transform .15s, border-color .15s; }
.card.link:hover { transform: translateY(-3px); border-color: var(--gold); }
.bracket.dim { opacity: .75; }
.card.red { border-top: 3px solid #d9483b; } .card.blue { border-top: 3px solid #3f86e8; } .card.brown { border-top: 3px solid #a07a4e; } .card.grey { border-top: 3px solid #9a9aa8; }
.feature { text-align: center; }

.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 1em 0; }
.rule { border-radius: var(--radius); padding: 12px 16px; border: 1px solid; }
.rule h4 { margin: 0 0 .3em; font: 700 1.05rem var(--heading); }
.rule ul { margin: 0; padding-left: 1.1em; } .rule li { margin: .35em 0; }
.rule.ok { background: #18241a; border-color: #3f6a3a; } .rule.ok h4 { color: var(--ok); }
.rule.no { background: #261614; border-color: #6a2a20; } .rule.no h4 { color: #ff8a70; }

/* calls & grades */
.call-list { display: grid; gap: 10px; margin: 1em 0; }
.call { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.call p { margin: 0; }
.call-name { font: 700 1rem var(--heading); color: #1a1208; background: linear-gradient(var(--gold-2), var(--gold)); padding: 6px 10px; border-radius: 6px; text-align: center; letter-spacing: .06em; box-shadow: 0 2px 0 #000; }
.call.safety { border-color: #8a2a20; background: #2a1412; }
.call.safety .call-name { background: linear-gradient(#ff8a70, #a8322a); color: #fff; }
.grade-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 1em 0; }
.grade { background: radial-gradient(circle at 50% 0, #3a1f1a, #1a1320); border: 1px solid #6a2a20; border-radius: var(--radius); padding: 12px; text-align: center; }
.grade span { font: 700 .9rem var(--heading); letter-spacing: .15em; color: #ff9f80; }
.grade b { display: block; font: 700 2.2rem var(--display); color: var(--gold-2); }
.grade p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 1em 0; }
.ac { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.ac h4 { margin: .3em 0; font: 700 1rem var(--heading); color: var(--gold-2); }
.ac p { margin: 0; font-size: 1rem; }
.ac.dim { opacity: .7; }
.ac-tag { display: inline-block; font: 700 .8rem var(--heading); background: var(--gold-deep); color: var(--gold-2); padding: 2px 10px; border-radius: 999px; }

ol.order-list { counter-reset: o; list-style: none; padding: 0; }
ol.order-list > li { counter-increment: o; position: relative; padding: 10px 14px 10px 58px; margin: 8px 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
ol.order-list > li::before { content: counter(o); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 1rem var(--heading); color: #1a1208; background: linear-gradient(var(--gold-2), var(--gold-deep)); }

/* home path steps */
ol.path-steps { list-style: none; padding: 0; counter-reset: p; display: grid; gap: 10px; }
ol.path-steps > li { counter-increment: p; }
ol.path-steps > li > a, ol.path-steps > li > span { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: .15s; }
ol.path-steps > li > a::before, ol.path-steps > li > span::before { content: counter(p); font: 700 1.3rem var(--display); color: var(--gold); min-width: 1.2em; }
ol.path-steps > li > a .ico { color: var(--gold); width: 1.6em; height: 1.6em; }
ol.path-steps > li > a:hover { border-color: var(--gold); transform: translateX(4px); }

/* chapters grid on home */
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.chapter { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px; padding: 14px; border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--ink); border: 1px solid var(--line); isolation: isolate; transition: transform .15s, border-color .15s; }
.chapter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% center; z-index: -2; transition: transform .4s; }
.chapter::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 10%, #0b0910ee 70%); z-index: -1; }
.chapter:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--ink); }
.chapter:hover img { transform: scale(1.06); }
.chapter .cn { position: absolute; top: 10px; left: 12px; font: 700 1.6rem var(--display); color: var(--gold-2); text-shadow: 0 2px 6px #000; }
.chapter .ico.big { width: 1.8rem; height: 1.8rem; }
.chapter strong { font: 700 1.05rem var(--heading); color: var(--gold-2); margin-top: 4px; }
.chapter small { color: var(--ink-soft); font-size: .92rem; line-height: 1.3; }

/* world/classes extras */
.align-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 1em 0; max-width: 560px; }
.align-grid span { padding: 14px 8px; text-align: center; font: 700 .85rem var(--heading); border-radius: 8px; border: 1px solid var(--line); }
.align-grid .lg, .align-grid .ng, .align-grid .cg { background: #2a3420; }
.align-grid .ln, .align-grid .nn, .align-grid .cn { background: #2a2a30; }
.align-grid .le, .align-grid .ne, .align-grid .ce { background: #3a1a1a; }
.wheel-wrap { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 20px; align-items: center; }
.magic-wheel { width: 100%; height: auto; }
.body-diagram { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start; margin: 1em 0; }
.body-diagram svg { width: 100%; height: auto; }
.body-diagram .crit { fill: #4a1f22; }
.undead-ladder { display: grid; gap: 10px; margin: 1em 0; }
.rung { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.rung h4 { margin: 0; font: 700 1.05rem var(--heading); color: var(--gold-2); }
.rung p { margin: .25em 0 0; }
.rung .lvl { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font: 700 1.5rem var(--display); color: #dff5d0; background: radial-gradient(#3a5a2a, #142010); border: 2px solid #6fbf73; }
.rung .lvl::before { content: 'Dismiss'; position: absolute; font: 600 .5rem var(--heading); letter-spacing: .1em; text-transform: uppercase; margin-top: -32px; color: #9fe08a; }
.rung .lvl { position: relative; }
.element-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 1em 0; }
.el { border-radius: var(--radius); padding: 12px; text-align: center; border: 1px solid #0006; }
.el b { display: block; font: 700 1rem var(--heading); }
.el span { font-size: .98rem; }
.el.blue { background: #1c3a6e; } .el.brown { background: #5a3f26; } .el.red { background: #6e2219; }
.el.green { background: #1d5a3a; } .el.black { background: #0a0a0c; border-color: #444; } .el.white { background: #ece6d4; color: #1a1208; }
.church { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 14px; }
.church h3 { margin: 0 0 .4em; font: 700 1.15rem var(--heading); color: var(--gold-2); display: flex; gap: 10px; align-items: center; }
.church h3 .ico { color: var(--gold); }
.church blockquote { margin: .5em 0; padding: 8px 16px; border-left: 3px solid var(--gold); font-style: italic; color: var(--gold-2); background: #2a1e1255; }
.weapon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 1em 0; }
.wpn { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.wpn h4 { display: inline; margin-left: 8px; font: 700 1.02rem var(--heading); color: var(--gold-2); }
.wpn p { margin: .5em 0 0; font-size: 1rem; }
.armour-table .pac { display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; font: 700 1rem var(--display); color: #1a1208; background: linear-gradient(var(--gold-2), var(--gold-deep)); }
.armour-table tr.light td:nth-child(2) { color: #a8d8a0; } .armour-table tr.medium td:nth-child(2) { color: #f0c878; } .armour-table tr.heavy td:nth-child(2) { color: #ff9f80; }

/* spells & miracles */
.spell-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: .5em 0 1em; }
.spell { position: relative; background: linear-gradient(180deg, #241c30, #16111d); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; border-top: 4px solid var(--gold-deep); }
.spell.grey { border-top-color: #9a9aa8; } .spell.blue { border-top-color: #3f86e8; } .spell.brown { border-top-color: #a07a4e; } .spell.red { border-top-color: #d9483b; }
.spell.miracle { border-top-color: #f3dc9c; }
.spell header { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.spell h4 { margin: 0; font: 700 1.08rem var(--heading); color: var(--gold-2); flex: 1 1 60%; }
.spell .cost { display: inline-flex; align-items: center; gap: 4px; font: 700 .82rem var(--heading); padding: 3px 10px; background: #0c0a10; border: 1px solid var(--gold-deep); border-radius: 999px; color: var(--gold-2); white-space: nowrap; }
.spell .cost .ico { color: var(--gold); width: 1em; height: 1em; }
.spell .align { font: 700 .72rem var(--heading); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; align-self: center; }
.align.goodly { background: #f3dc9c; color: #3a2a08; } .align.neutral { background: #55506a; color: #fff; } .align.evil { background: #6a1a1a; color: #ffd0c8; }
.spell .verbal { font-style: italic; color: #f6e7bf; background: #2a1e1288; border-left: 3px solid var(--gold); padding: 6px 12px; border-radius: 0 6px 6px 0; margin: .7em 0; }
.spell .verbal .ph { font-style: normal; color: var(--gold); font-family: var(--heading); font-size: .82em; }
.spell .gesture { display: flex; gap: 8px; font-size: 1rem; color: var(--ink-soft); }
.spell .gesture .ico { color: var(--gold); margin-top: 4px; }
.spell p { margin: .5em 0; font-size: 1.03rem; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 1em 0 0; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { cursor: pointer; font: 700 .82rem var(--heading); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #0c0a10; color: var(--ink-soft); }
.chip.on { background: linear-gradient(var(--gold-2), var(--gold)); color: #1a1208; border-color: var(--gold); }
.chip.grey:not(.on) { border-color: #9a9aa8; } .chip.blue:not(.on) { border-color: #3f86e8; } .chip.brown:not(.on) { border-color: #a07a4e; } .chip.red:not(.on) { border-color: #d9483b; }

/* inputs, calculator */
.az-filter, .big-search { display: flex; align-items: center; gap: 8px; background: #0c0a10; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; flex: 1 1 260px; }
.az-filter .ico, .big-search .ico { color: var(--gold); }
.az-filter input, .big-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); font: 1.05rem var(--body); outline: none; padding: 4px 0; }
.big-search { padding: 10px 18px; }
.big-search input { font-size: 1.2rem; }
.btn { cursor: pointer; font: 700 .95rem var(--heading); padding: 10px 22px; border-radius: 999px; border: 0; color: #1a1208; background: linear-gradient(var(--gold-2), var(--gold)); box-shadow: 0 3px 0 var(--gold-deep); }
.btn:hover { filter: brightness(1.08); }
.widget { background: var(--bg-2); border: 1px solid var(--gold-deep); border-radius: 12px; padding: 16px; }
.calc-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.calc-in label { display: flex; flex-direction: column; font: 700 .78rem var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); gap: 4px; }
.calc-in input { background: #0c0a10; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 10px; font: 1.1rem var(--body); width: 100%; }
.calc-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 4px; font-size: .95rem; color: var(--muted); }
.calc-presets button { cursor: pointer; font: 600 .8rem var(--heading); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); }
.calc-presets button:hover { border-color: var(--gold); color: var(--gold-2); }

/* search page & results */
.search-page-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 10px; }
.search-results { margin-top: 10px; }
ol.results { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
ol.results a { display: flex; gap: 14px; padding: 14px 16px; background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
ol.results a:hover { border-color: var(--gold); }
ol.results .ico { width: 2rem; height: 2rem; color: var(--gold); margin-top: 4px; }
ol.results span { display: flex; flex-direction: column; }
ol.results small { font: 600 .78rem var(--heading); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
ol.results strong { font: 700 1.1rem var(--heading); color: var(--gold-2); }
ol.results em { font-style: normal; color: var(--ink-soft); font-size: 1rem; }
ol.results em b { color: #1a1208; background: var(--gold-2); border-radius: 3px; padding: 0 2px; font-weight: 600; }

/* A–Z */
.az-tools { position: sticky; top: calc(var(--hdr-h) + 8px); z-index: 5; margin: 20px 0 10px; padding: 12px; background: #17121ff2; border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 10px; box-shadow: var(--shadow); }
.az-letters { display: flex; flex-wrap: wrap; gap: 4px; }
.az-letters a { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 6px; text-decoration: none; font: 700 .9rem var(--heading); color: var(--gold-2); background: var(--panel-2); border: 1px solid var(--line); }
.az-letters a:hover { background: var(--gold); color: #1a1208; }
.az { columns: 2 380px; column-gap: 24px; }
.az-group { break-inside: avoid; margin: 0 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; }
.az-group h2 { margin: 0 0 6px; font: 700 1.6rem var(--display); color: var(--gold); border-bottom: 1px solid var(--line); }
.az-group ul { list-style: none; margin: 0; padding: 0; }
.az-group li { padding: 5px 0; border-bottom: 1px dashed #ffffff10; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.az-group .t { font-weight: 600; }
.az-group .refs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .92rem; }
.az-group .refs a { text-decoration: none; color: var(--muted); }
.az-group .refs a:hover { color: var(--gold-2); }

/* prev / next */
.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 0; }
.pn { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--panel); color: var(--gold-2); font: 700 1.02rem var(--heading); }
.pn small { font: 600 .75rem var(--heading); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.pn .ico { color: var(--gold); }
.pn.next { text-align: right; align-items: flex-end; }
.pn:hover { border-color: var(--gold); }

/* footer */
.site-footer { margin-top: auto; background: linear-gradient(#120e18, #09070c); border-top: 1px solid #000; box-shadow: 0 -1px 0 #d9b46a44; }
.ftr-inner { max-width: 1500px; margin: 0 auto; padding: 26px 18px 30px; text-align: center; }
.ftr-notice { font: 600 1.05rem var(--heading); color: var(--gold-2); margin: 0 0 14px; }
.ftr-notice .ico { color: var(--gold); }
.ftr-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 14px; }
.ftr-links a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font: 500 .88rem var(--heading); background: var(--panel); }
.ftr-links a .ico { color: var(--gold); }
.ftr-links a:hover { border-color: var(--gold); color: var(--gold-2); }
.ftr-small { margin: 0; color: var(--muted); font-size: .95rem; }

.to-top { position: fixed; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold-deep); background: var(--panel); color: var(--gold); cursor: pointer; box-shadow: var(--shadow); z-index: 30; }
.to-top .ico { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  :root { --side-w: 260px; }
  .brand-strap { font-size: .72rem; }
}
@media (max-width: 920px) {
  :root { --hdr-h: 64px; }
  .nav-toggle { display: block; }
  .layout { grid-template-columns: 1fr; padding: 16px 12px 30px; }
  .sidebar { position: fixed; z-index: 70; top: 0; left: 0; bottom: 0; width: min(330px, 86vw); max-height: none; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-105%); transition: transform .25s ease; padding: 12px; background: var(--bg); box-shadow: var(--shadow); }
  body.nav-open .sidebar { transform: none; }
  /* Mobile menu scrolls independently of the page */
  .sidebar { -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: auto; scrollbar-color: var(--gold-deep) transparent;
             padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .sidebar::-webkit-scrollbar { width: 6px; }
  .sidebar::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  body.nav-open { position: fixed; left: 0; right: 0; width: 100%; }
  .sidebar nav { padding: 10px 8px; }
  .side-home { padding: 6px 10px; font-size: .95rem; }
  .side-h { margin: 8px 10px 4px; font-size: .72rem; }
  .toc-sec { font-size: .86rem; padding: 5px 10px; }
  .toc-sub a { font-size: .86rem; padding: 2px 10px; }
  .toc-sub { margin: 0 0 4px 22px; }
  body.nav-open { overflow: hidden; }
  .hdr-inner { flex-wrap: wrap; gap: 10px; padding: 8px 12px; }
  .brand { flex: 1 1 calc(100% - 60px); }
  .brand-ico { width: 36px; height: 36px; }
  .brand-title { font-size: 1.2rem; }
  .hdr-search { width: 100%; order: 3; }
  .suggest { left: 0; right: 0; width: auto; }
  .wheel-wrap, .body-diagram { grid-template-columns: 1fr; }
  .body-diagram svg { max-width: 180px; margin: 0 auto; }
  .magic-wheel { max-width: 300px; margin: 0 auto; display: block; }
}
@media (max-width: 640px) {
  body { font-size: 1.08rem; }
  .brand-strap { font-size: .66rem; line-height: 1.25; }
  .banner { aspect-ratio: auto; min-height: 230px; border-radius: 10px; }
  .banner-img { object-position: 82% center; }
  .banner-text { max-width: 100%; right: 0; background: linear-gradient(0deg, #0b0910f2 10%, #0b091088 60%, transparent); padding: 0 16px 16px; }
  .sub { padding: 16px 14px 20px; border-radius: 10px; }
  .call { grid-template-columns: 1fr; }
  dl.glossary { grid-template-columns: 1fr; }
  dl.glossary dd { border-top: 0; padding-top: 0; }
  .prev-next { grid-template-columns: 1fr; }
  .pn.next { text-align: left; align-items: flex-start; }
  .spell-list { grid-template-columns: 1fr; }
  .align-grid span { font-size: .72rem; padding: 10px 4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .site-header, .sidebar, .site-footer, .to-top, .on-page, .prev-next, .filter-bar { display: none !important; }
  body { background: #fff; color: #000; }
  .layout { display: block; }
  .sub { box-shadow: none; border-color: #ccc; background: #fff; break-inside: avoid; }
}

/* ================================================================ HERO BUILDER */
.hero-builder { margin-top: 20px; }
.hb-progress { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.hb-dot { flex: 1 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); font: 600 .82rem var(--heading); cursor: pointer; white-space: nowrap; }
.hb-dot .hb-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0c0a10; border: 1px solid var(--line); color: var(--gold); font-size: .8rem; }
.hb-dot.done .hb-num { background: #2a4a24; border-color: var(--ok); color: #dff5d0; }
.hb-dot.on { border-color: var(--gold); color: var(--gold-2); background: linear-gradient(#2a1e12, var(--panel)); }
.hb-dot.on .hb-num { background: linear-gradient(var(--gold-2), var(--gold)); color: #1a1208; border-color: var(--gold); }
.hb-dot:disabled { opacity: .45; cursor: not-allowed; }
.hb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.hb-main { background: linear-gradient(180deg, #1d1726f0, #171220f0); border: 1px solid var(--line); border-radius: 14px; padding: 20px clamp(14px, 3vw, 30px) 22px; box-shadow: 0 6px 24px #0006; min-width: 0; }
.hb-h { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; font: 700 clamp(1.2rem, 2vw, 1.5rem) var(--heading); color: var(--gold-2); }
.hb-h .ico { color: var(--gold); width: 1.3em; height: 1.3em; }
.hb-main h2.hb-h:not(:first-child) { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.hb-field { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.hb-field > span { font: 700 .8rem var(--heading); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.hb-field em { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.hb-field .req { color: #ff8a70; }
.hb-field input, .hb-field textarea, .hb-slot select, .hb-slot input {
  width: 100%; background: #0c0a10; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 10px 12px; font: 1.1rem var(--body); }
.hb-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.hb-field input:focus, .hb-field textarea:focus, .hb-slot select:focus, .hb-slot input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px #d9b46a33; }
.hb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 14px 0; }
.hb-cards.three { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hb-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--bg-2)); cursor: pointer; transition: border-color .15s, transform .15s; }
.hb-card input { position: absolute; opacity: 0; pointer-events: none; }
.hb-card:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.hb-card.on { border-color: var(--gold); box-shadow: 0 0 0 2px #d9b46a55, 0 8px 20px #0007; background: linear-gradient(180deg, #33261a, var(--bg-2)); }
.hb-card.on::after { content: '✓'; position: absolute; top: 10px; right: 12px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1208; font-weight: 700; }
.hb-card:has(input:focus-visible) { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.hb-card.disabled { opacity: .45; cursor: not-allowed; transform: none; }
.hb-card-t { font: 700 1.05rem var(--heading); color: var(--gold-2); }
.hb-card-d { font-size: 1rem; color: var(--ink-soft); line-height: 1.4; }
.hb-card .hb-stats { font-size: .95rem; color: var(--ink); border-top: 1px dashed var(--line); padding-top: 6px; }
.hb-card .hb-stats b { color: var(--gold-2); }
.hb-why { font-size: .9rem; color: #ff9f80; }
.pacb { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: linear-gradient(var(--gold-2), var(--gold-deep)); color: #1a1208; font: 700 .9rem var(--heading); }
.swatch { display: inline-block; width: .9em; height: .9em; border-radius: 50%; vertical-align: -1px; border: 1px solid #0008; }
.swatch.grey { background: #9a9aa8; } .swatch.blue { background: #3f86e8; } .swatch.brown { background: #a07a4e; } .swatch.red { background: #d9483b; }
.hb-align-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 620px; margin: 14px 0; }
.hb-align { position: relative; display: grid; place-items: center; min-height: 66px; padding: 8px; text-align: center; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font: 700 .9rem var(--heading); transition: .15s; }
.hb-align input { position: absolute; opacity: 0; }
.hb-align.good { background: #23301c; } .hb-align.neutral { background: #26242e; } .hb-align.evil { background: #341818; }
.hb-align:hover { border-color: var(--gold-deep); }
.hb-align.on { border-color: var(--gold); box-shadow: 0 0 0 2px #d9b46a77; color: var(--gold-2); }
.hb-align.disabled { opacity: .35; cursor: not-allowed; }
.hb-align:has(input:focus-visible) { outline: 2px solid var(--gold-2); }
.hb-note { display: flex; gap: 10px; align-items: flex-start; background: #231c13; border: 1px solid #6a5124; border-radius: 10px; padding: 10px 14px; font-size: 1rem; }
.hb-note .ico { color: var(--gold); margin-top: 3px; }
.hb-levelled, .hb-picks { display: grid; gap: 10px; margin: 12px 0; }
.hb-slot { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px 12px; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.hb-slot .lv { grid-row: span 3; display: grid; place-items: center; align-content: center; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(#3a2a18, #1a1320); border: 1px solid var(--gold-deep); font: 700 1.3rem var(--display); color: var(--gold-2); line-height: 1; }
.hb-slot .lv small { font: 600 .55rem var(--heading); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.hb-slot-d { font-size: .97rem; color: var(--ink-soft); }
.hb-slot-d:empty { display: none; }
.hb-more { margin: 18px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); padding: 0 14px; }
.hb-more summary { cursor: pointer; padding: 10px 0; font: 700 .95rem var(--heading); color: var(--gold-2); display: flex; gap: 8px; align-items: center; }
.hb-more summary .ico { color: var(--gold); }
.hb-booklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; padding: 0 0 14px; }
.hb-spell { border-left: 3px solid var(--gold-deep); padding: 6px 10px; background: #0c0a10; border-radius: 0 6px 6px 0; font-size: .97rem; }
.hb-spell.grey { border-left-color: #9a9aa8; } .hb-spell.blue { border-left-color: #3f86e8; } .hb-spell.brown { border-left-color: #a07a4e; } .hb-spell.red { border-left-color: #d9483b; }
.hb-spell strong { color: var(--gold-2); font-family: var(--heading); font-size: .92rem; }
.hb-spell .lvl, .hs-sheet .lvl { font: 700 .72rem var(--heading); background: var(--gold-deep); color: var(--gold-2); padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.hb-spell em { display: block; color: var(--ink-soft); }
.hb-spell .ph, .hs-book .ph { font-style: normal; font-family: var(--heading); font-size: .82em; color: var(--gold); }
.hb-error { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: #2c1816; border: 1px solid #a8322a; color: #ffb4a0; }
.hb-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.hb-nav [data-act=next] { margin-left: auto; }
.btn.ghost { background: transparent; color: var(--gold-2); border: 1px solid var(--gold-deep); box-shadow: none; }
.btn .ico { width: 1.1em; height: 1.1em; }
.hb-summary { position: sticky; top: calc(var(--hdr-h) + 18px); background: linear-gradient(180deg, #2a1e12, var(--panel) 40%); border: 1px solid var(--gold-deep); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
.hb-sum-head { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.hb-sum-head .ico.big { width: 2.6rem; height: 2.6rem; }
.hb-sum-head strong { display: block; font: 700 1.1rem var(--heading); color: var(--gold-2); word-break: break-word; }
.hb-sum-head small { display: block; color: var(--ink-soft); font-size: .92rem; line-height: 1.3; }
.hb-sum-head small.gold { color: var(--gold); }
.hb-sum-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 8px; }
.hb-sum-stats div { text-align: center; background: #0c0a10; border: 1px solid var(--line); border-radius: 8px; padding: 6px 2px; }
.hb-sum-stats dt { font: 700 .58rem var(--heading); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hb-sum-stats dd { margin: 0; font: 700 1.3rem var(--display); color: var(--gold-2); }
.hb-sum-w { margin: 6px 0 0; font-size: .95rem; display: flex; gap: 6px; align-items: flex-start; }
.hb-sum-w .ico { color: var(--gold); margin-top: 3px; }
.hb-export { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0 6px; }
.hb-check { display: inline-flex; gap: 8px; align-items: center; font-size: 1rem; cursor: pointer; }
.hb-check input { width: 18px; height: 18px; accent-color: var(--gold); }
.hb-tip { font-size: .95rem; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.hb-tip .ico { color: var(--gold); }
.sheet-preview { margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--gold-deep); background: #f1e4c6; color: #2a1a0c; box-shadow: var(--shadow); }
.sheet-preview .hs-book { border-top: 6px double #8a5a1a; }

@media (max-width: 1100px) {
  .hb-layout { grid-template-columns: 1fr; }
  .hb-summary { position: static; order: -1; }
  .hb-sum-stats { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 640px) {
  .hb-dot .hb-lbl { display: none; }
  .hb-dot.on .hb-lbl { display: inline; }
  .hb-sum-stats { grid-template-columns: repeat(3, 1fr); }
  .hb-cards, .hb-cards.three { grid-template-columns: 1fr; }
  .hb-align { min-height: 56px; font-size: .74rem; }
  .hb-main { padding: 16px 12px; }
}

/* ================================================================ HERO SHEET & SPELLBOOK (preview + print) */
#hero-print { display: none; }
.hs-sheet, .hs-book { font-family: var(--body); color: #2a1a0c; padding: 22px 26px; position: relative; }
.hs-sheet h2, .hs-book h2 { font: 700 .95rem var(--heading); letter-spacing: .1em; text-transform: uppercase; color: #6a3a0a; margin: 0 0 6px; display: flex; gap: 6px; align-items: center; border-bottom: 1px solid #b08a4a; padding-bottom: 4px; }
.hs-sheet h2 .ico, .hs-book .ico { color: #8a5a1a; }
.hs-head { display: flex; gap: 16px; align-items: center; border-bottom: 3px double #8a5a1a; padding-bottom: 10px; margin-bottom: 12px; }
.hs-crest { width: 64px; height: 64px; fill: #8a5a1a; flex: none; }
.hs-crest .cut, .bk-sigil .cut { fill: #f1e4c6; fill-opacity: .6; }
.hs-kicker { margin: 0; font: 700 .72rem var(--heading); letter-spacing: .25em; text-transform: uppercase; color: #8a5a1a; }
.hs-head h1 { margin: 0; font: 700 2rem/1.1 var(--display); color: #3a1a08; word-break: break-word; }
.hs-sub { margin: 2px 0 0; font: 600 1rem var(--heading); color: #5a3a1a; }
.hs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 6px; margin: 0 0 10px; }
.hs-stats div { text-align: center; border: 1.5px solid #8a5a1a; border-radius: 8px; padding: 6px 2px; background: #fbf3df; }
.hs-stats b { display: block; font: 700 1.5rem var(--display); color: #3a1a08; line-height: 1.1; }
.hs-stats span { font: 700 .58rem var(--heading); letter-spacing: .08em; text-transform: uppercase; color: #6a4a2a; }
.hs-small { font-size: .82rem; color: #5a4028; margin: 4px 0; }
.hs-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin: 10px 0; }
.hs-box { border: 1px solid #b08a4a; border-radius: 8px; padding: 10px 12px; background: #fbf3dfcc; break-inside: avoid; page-break-inside: avoid; }
.hs-box p { margin: .3em 0; font-size: .95rem; }
.hs-box ul { margin: 0; padding-left: 1.1em; font-size: .93rem; line-height: 1.4; }
.hs-box li { margin: .3em 0; }
.hs-box li em { color: #5a2a08; }
.hs-box .none { color: #8a7050; font-style: italic; }
.hs-sheet .lvl { background: #8a5a1a; color: #fff6dc; }
.hs-body table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.hs-body th { text-align: left; font: 700 .68rem var(--heading); letter-spacing: .08em; text-transform: uppercase; color: #6a4a2a; border-bottom: 1px solid #b08a4a; padding: 3px 4px; }
.hs-body td { border-bottom: 1px dotted #b08a4a; padding: 4px; }
.hs-body td:nth-child(2) { font-weight: 700; text-align: center; width: 54px; }
.hs-body td.tally { width: 45%; }
.hs-body tr.crit td:first-child { color: #8a1a0a; font-weight: 600; }
.hs-body tr.crit small { font: 600 .6rem var(--heading); text-transform: uppercase; letter-spacing: .06em; color: #a8322a; }
.hs-body tr.tot td { font-weight: 700; border-top: 1.5px solid #8a5a1a; }
.hs-bg { margin: 10px 0; }
.hs-bg p { font-style: italic; }
.hs-foot { margin-top: 10px; padding-top: 6px; border-top: 1px solid #b08a4a; font-size: .72rem; color: #7a6040; text-align: center; }

/* spellbook */
.hs-book { background:
   radial-gradient(ellipse at 50% 0%, #fff6dc 0%, transparent 60%),
   radial-gradient(ellipse at 0% 100%, #d9c08a66, transparent 50%),
   radial-gradient(ellipse at 100% 100%, #d9c08a66, transparent 50%),
   #efdfb8; }
.bk-head { text-align: center; padding: 10px 0 6px; }
.bk-orn { font-size: 1rem; letter-spacing: .6em; color: #8a5a1a; }
.bk-orn.end { text-align: center; margin-top: 10px; }
.bk-sigil { width: 70px; height: 70px; fill: #8a5a1a; display: block; margin: 6px auto; }
.bk-head h1 { margin: 4px 0 2px; font: 700 2.1rem/1.15 var(--display); color: #3a1208; }
.bk-sub { margin: 0; font: italic 1.1rem var(--body); color: #5a2a08; }
.bk-intro { text-align: center; font-style: italic; max-width: 70ch; margin: 8px auto; }
.bk-rules { border: 2px solid #8a5a1a; outline: 1px solid #8a5a1a; outline-offset: 3px; border-radius: 4px; padding: 8px 14px; margin: 14px 4px; background: #fbf3df99; break-inside: avoid; }
.bk-rules h2 { justify-content: center; border: 0; }
.bk-rules ul { margin: 0; padding-left: 1.1em; font-size: .93rem; columns: 2 260px; }
.bk-list { display: block; }
.bk-entry { position: relative; margin: 12px 0; padding: 10px 14px 10px 18px; border: 1px solid #b08a4a; border-left: 6px solid #8a5a1a; border-radius: 4px 10px 10px 4px; background: #fbf3dfd9; break-inside: avoid; page-break-inside: avoid; }
.bk-entry.grey { border-left-color: #6a6a78; } .bk-entry.blue { border-left-color: #2a5ab0; } .bk-entry.brown { border-left-color: #7a5a30; } .bk-entry.red { border-left-color: #a8281a; }
.bk-entry header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px dotted #b08a4a; padding-bottom: 3px; }
.bk-entry h3 { margin: 0; font: 700 1.2rem var(--display); color: #3a1208; }
.bk-entry h3::first-letter { color: #8a1a0a; font-size: 1.25em; }
.bk-level { flex: none; font: 700 .8rem var(--heading); letter-spacing: .06em; color: #fff6dc; background: #6a2a08; padding: 2px 10px; border-radius: 999px; }
.bk-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 5px 0; font-size: .88rem; color: #4a3018; }
.bk-meta b { font-family: var(--heading); font-size: .78rem; letter-spacing: .05em; color: #6a3a0a; }
.bk-label { display: block; font: 700 .64rem var(--heading); letter-spacing: .18em; text-transform: uppercase; color: #8a5a1a; font-style: normal; }
.bk-verbal { margin: 6px 0; padding: 6px 12px; font: italic 1.15rem/1.4 var(--body); color: #4a0e04; background: #f6e7bf; border-radius: 6px; border: 1px dashed #b08a4a; }
.bk-gesture { margin: 4px 0; font-size: .95rem; }
.bk-effect { margin: 4px 0 0; font-size: 1rem; line-height: 1.45; }
.bk-note { font-style: italic; text-align: center; font-size: .92rem; color: #5a3a1a; }

@media (max-width: 640px) {
  .hs-sheet, .hs-book { padding: 14px 12px; }
  .hs-head h1, .bk-head h1 { font-size: 1.5rem; }
  .hs-crest { width: 46px; height: 46px; }
}

/* ---------------- print: only the hero document when exporting */
@media print {
  body.print-hero > *:not(#hero-print) { display: none !important; }
  body.print-hero { background: #fff !important; display: block; min-height: 0; }
  body.print-hero #hero-print { display: block !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #hero-print .hp-bg { position: fixed; inset: 0; z-index: -1;
    background: radial-gradient(ellipse at 50% 0%, #fff8e4 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, #dcc48e88, transparent 45%), radial-gradient(ellipse at 100% 100%, #dcc48e88, transparent 45%), #f3e6c6;
    border: 3px double #8a5a1a; }
  #hero-print.plain .hp-bg { display: none; }
  #hero-print .hs-sheet, #hero-print .hs-book { padding: 4mm 6mm; background: transparent; }
  #hero-print .hs-book { break-before: page; page-break-before: always; }
  #hero-print.plain .hs-box, #hero-print.plain .hs-stats div, #hero-print.plain .bk-entry, #hero-print.plain .bk-rules, #hero-print.plain .bk-verbal { background: #fff; }
  #hero-print .hs-head h1 { font-size: 26pt; }
  #hero-print .hs-cols { grid-template-columns: 1fr 1fr; }
  #hero-print .bk-entry { margin: 3mm 0; }
  #hero-print .hs-box { break-inside: auto; page-break-inside: auto; }
  #hero-print .hs-box li, #hero-print .hs-body, #hero-print .hs-stats { break-inside: avoid; page-break-inside: avoid; }
  #hero-print .hs-cols { display: block; columns: 2; column-gap: 8px; }
  #hero-print .hs-cols > .hs-box { margin: 0 0 8px; display: block; }
  #hero-print a { color: inherit; text-decoration: none; }
}
@page { size: A4; margin: 10mm; }

/* ================================================================ HOW DO I BOOK? */
.book-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 1em 0; }
.book-way { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 14px; border-radius: 12px; border: 1px solid var(--gold-deep); background: radial-gradient(circle at 50% 0, #3a2a18, #1a1320); text-decoration: none; color: var(--ink); transition: transform .15s, border-color .15s; }
.book-way:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--ink); }
.book-way strong { font: 700 1.2rem var(--heading); color: var(--gold-2); }
.book-way span { font-weight: 600; word-break: break-word; }
.book-way small { color: var(--ink-soft); }
.contact-card { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--gold-deep); background: linear-gradient(90deg, #2a1e12, var(--bg-2)); margin: .5em 0 1em; }
.contact-card .ico.big { width: 3rem; height: 3rem; }
.contact-card p { margin: .2em 0; }
.contact-label { font: 700 .78rem var(--heading); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.contact-main { font: 700 clamp(1.3rem, 3vw, 1.9rem) var(--display); word-break: break-word; }
.contact-main a { color: var(--gold-2); text-decoration: none; }
.contact-main a:hover { text-decoration: underline; }
table.hours { max-width: 460px; }
table.hours tr.closed td { color: var(--muted); font-style: italic; }
table.hours tr.closed td:first-child { color: var(--muted); }
.np-tag { display: inline-block; padding: 1px 10px; border-radius: 999px; background: linear-gradient(var(--gold-2), var(--gold)); color: #1a1208; font: 700 .85rem var(--heading); white-space: nowrap; }
ol.path-steps > li > span > .ico { color: var(--gold); width: 1.6em; height: 1.6em; }
.book-links { display: flex; flex-wrap: wrap; gap: 10px; }
.book-links .btn { text-decoration: none; display: inline-block; }
@media (max-width: 640px) { .contact-card { flex-direction: column; text-align: center; } }

/* paper doll (hero sheet) */
.paper-doll { display: flex; flex-direction: column; align-items: center; }
.paper-doll svg { width: 100%; max-width: 290px; height: auto; display: block; }
.pd-part path, .pd-part circle { fill: #fbf3df; stroke: #8a5a1a; stroke-width: 2; }
.pd-part.crit path, .pd-part.crit circle { fill: #f4d9c6; stroke: #8a1a0a; }
.pd-num { font: 700 21px 'Cinzel Decorative', 'Cinzel', Georgia, serif; fill: #3a1a08; text-anchor: middle; }
.pd-lbl { font: 700 8.5px 'Cinzel', Georgia, serif; letter-spacing: .08em; fill: #6a4a2a; text-anchor: middle; }
.pd-part.crit .pd-lbl { fill: #8a1a0a; }
.pd-tblp path { fill: #6a2a08; stroke: #3a1208; stroke-width: 2; }
.pd-tnum { font: 700 26px 'Cinzel Decorative', 'Cinzel', Georgia, serif; fill: #fff6dc; text-anchor: middle; }
.pd-tlbl { font: 700 7.5px 'Cinzel', Georgia, serif; letter-spacing: .1em; fill: #f3dc9c; text-anchor: middle; }
.pd-key { margin: 4px 0 0; font-size: .8rem; color: #5a4028; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: center; }
.pd-key .sw { display: inline-block; width: 12px; height: 12px; border: 1.5px solid #8a5a1a; background: #fbf3df; border-radius: 3px; vertical-align: -1px; }
.pd-key .sw.crit { background: #f4d9c6; border-color: #8a1a0a; }
@media print { #hero-print .paper-doll svg { max-width: 62mm; } }
.pd-part .pd-ac circle, .pd-part.crit .pd-ac circle { fill: #2a4a6a; stroke: #fbf3df; stroke-width: 1.5; }
.pd-ac text { font: 700 10.5px 'Cinzel', Georgia, serif; fill: #fff; text-anchor: middle; }
.pd-key .ac-key { width: 18px; height: 18px; vertical-align: -4px; }
.pd-key .ac-key circle { fill: #2a4a6a; }
.pd-key .ac-key text { font: 700 11px 'Cinzel', Georgia, serif; fill: #fff; text-anchor: middle; }

/* how to get there */
.travel-grid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: stretch; margin: .5em 0 1em; }
.address-card { margin: 0; align-items: flex-start; }
.address-card address { font-style: normal; font-size: 1.15rem; line-height: 1.45; margin: .3em 0; }
.address-card address strong { color: var(--gold-2); font-family: var(--heading); }
.muted.small { font-size: .9rem; }
.btn.sm { padding: 7px 16px; font-size: .85rem; text-decoration: none; display: inline-block; }
.map-frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--gold-deep); min-height: 280px; background: #0c0a10; box-shadow: var(--shadow); }
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 280px; border: 0; filter: sepia(.25) saturate(.9); }
@media (max-width: 760px) { .travel-grid { grid-template-columns: 1fr; } .address-card { flex-direction: row; text-align: left; } }

/* ================================================================ THEME TOGGLE */
.theme-toggle { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--gold-2); font: 700 .8rem var(--heading); cursor: pointer; }
.theme-toggle:hover { border-color: var(--gold); }
.theme-toggle .ico { width: 1.2em; height: 1.2em; color: var(--gold); }
.theme-toggle .t-moon { display: none; }
html[data-theme="light"] .theme-toggle .t-sun { display: none; }
html[data-theme="light"] .theme-toggle .t-moon { display: inline; }
@media (max-width: 920px) {
  .theme-toggle { order: 2; padding: 0 10px; }
  .theme-toggle .t-label { display: none; }
  .brand { flex: 1 1 calc(100% - 120px); }
}

/* ================================================================ LIGHT MODE (parchment) */
html[data-theme="light"] {
  --ink: #2e2014;
  --ink-soft: #5a4630;
  --muted: #86704f;
  --bg: #f4e9d0;
  --bg-2: #fbf4e2;
  --panel: #fffaf0;
  --panel-2: #f6ead0;
  --line: #d9c49c;
  --gold: #a8701f;
  --gold-2: #5e3208;
  --gold-deep: #c9a462;
  --blood: #a8322a;
  --ok: #3d7a38;
  --link: #8a420a;
  --shadow: 0 8px 22px rgba(96, 64, 20, .16);
  color-scheme: light;
}
html[data-theme="light"] body {
  background:
    radial-gradient(1200px 600px at 80% -10%, #fff9ea, transparent 60%),
    radial-gradient(900px 500px at -10% 30%, #e9d6ae66, transparent 60%),
    linear-gradient(#f4e9d0, #ecdcb8);
  background-attachment: fixed;
}
html[data-theme="light"] a { text-decoration-color: #8a420a55; }
html[data-theme="light"] .cut { fill: #fff8e6; fill-opacity: .72; }
html[data-theme="light"] .site-header { background: linear-gradient(180deg, #fffaf0f2, #f6ead0f2); border-bottom-color: #c9a462; box-shadow: 0 1px 0 #fff, 0 6px 18px rgba(96,64,20,.15); }
html[data-theme="light"] .brand-title { text-shadow: 0 1px 0 #fff; }
html[data-theme="light"] .brand-ico { filter: none; }
html[data-theme="light"] .hdr-search input[type=search],
html[data-theme="light"] .az-filter, html[data-theme="light"] .big-search,
html[data-theme="light"] .calc-in input,
html[data-theme="light"] .hb-field input, html[data-theme="light"] .hb-field textarea,
html[data-theme="light"] .hb-slot select, html[data-theme="light"] .hb-slot input { background: #fffdf8; box-shadow: inset 0 1px 3px rgba(96,64,20,.12); }
html[data-theme="light"] .scrim { background: rgba(60, 40, 10, .35); }
html[data-theme="light"] .sidebar nav { background: linear-gradient(180deg, #fffaf0, #f8eed6); }
html[data-theme="light"] .toc > li.active > .toc-sec { background: linear-gradient(90deg, #e9c46a55, transparent); }
html[data-theme="light"] .toc-sub a.current { background: #e9c46a33; }

/* banners: cream overlay with dark lettering */
html[data-theme="light"] .banner { border-color: #c9a462; background: #f4e9d0; }
html[data-theme="light"] .banner-text { background: linear-gradient(90deg, #fbf4e2f0 0%, #fbf4e2b3 60%, transparent); }
html[data-theme="light"] .banner h1 { color: #4a2406; text-shadow: 0 2px 0 #fff8e6, 0 0 18px #fff8e6; }
html[data-theme="light"] .banner p { color: #3a2810; }
html[data-theme="light"] .banner p.banner-sub { color: #8a420a; }
html[data-theme="light"] .banner-num { color: #8a5a1a; }

/* panels & cards */
html[data-theme="light"] .sub, html[data-theme="light"] .hb-main { background: linear-gradient(180deg, #fffaf0f2, #fbf2dcf2); box-shadow: 0 4px 18px rgba(96,64,20,.12); }
html[data-theme="light"] .sub::before { border-color: #c9a46233; }
html[data-theme="light"] .sub-title > .ico { background: radial-gradient(#fffaf0, #f0e0bc); }
html[data-theme="light"] .prose .lead { color: #5e3208; }
html[data-theme="light"] .prose code { background: #fff6e0; color: #6a3a0a; }
html[data-theme="light"] .card, html[data-theme="light"] .feature, html[data-theme="light"] .bracket,
html[data-theme="light"] .hb-card { background: linear-gradient(180deg, #fffdf6, #f7ecd4); }
html[data-theme="light"] .hb-card.on { background: linear-gradient(180deg, #fbe9bf, #f7ecd4); box-shadow: 0 0 0 2px #c8902a66, 0 6px 16px rgba(96,64,20,.18); }
html[data-theme="light"] .callout.tip { background: #eef6e6; border-color: #9fc38f; }
html[data-theme="light"] .callout.warn { background: #fbe9e3; border-color: #dba08f; } html[data-theme="light"] .callout.warn > .ico { color: #b0402a; }
html[data-theme="light"] .callout.lore, html[data-theme="light"] .hb-note { background: #fbf0d6; border-color: #d9b46a; }
html[data-theme="light"] .rule.ok { background: #eef6e6; border-color: #9fc38f; }
html[data-theme="light"] .rule.no { background: #fbe9e3; border-color: #dba08f; } html[data-theme="light"] .rule.no h4 { color: #a8322a; }
html[data-theme="light"] table.tome th { background: linear-gradient(#f3dca8, #e9cd92); color: #4a2406; border-bottom-color: #c9a462; }
html[data-theme="light"] table.tome td { border-top-color: #e6d6b4; }
html[data-theme="light"] table.tome tbody tr:nth-child(even) td { background: #fbf2de; }
html[data-theme="light"] table.tome tbody tr:hover td { background: #f6e3b8; }
html[data-theme="light"] .stat-strip > div, html[data-theme="light"] .grade, html[data-theme="light"] .book-way { background: radial-gradient(circle at 50% 0, #fff8e6, #f2e2bd); }
html[data-theme="light"] .grade { border-color: #dba08f; } html[data-theme="light"] .grade span { color: #a8322a; }
html[data-theme="light"] dl.glossary dt { background: #f6e6c2; }
html[data-theme="light"] .pill-row span, html[data-theme="light"] .tag-cloud span { background: #f6e6c2; }
html[data-theme="light"] .call { background: #fffaf0; }
html[data-theme="light"] .call.safety { background: #fbe9e3; border-color: #dba08f; }
html[data-theme="light"] .chapter::before { background: linear-gradient(180deg, transparent 5%, #fbf4e2f2 68%); }
html[data-theme="light"] .chapter .cn { text-shadow: 0 1px 4px #fff; }
html[data-theme="light"] .align-grid .lg, html[data-theme="light"] .align-grid .ng, html[data-theme="light"] .align-grid .cg,
html[data-theme="light"] .hb-align.good { background: #e6f0d6; }
html[data-theme="light"] .align-grid .ln, html[data-theme="light"] .align-grid .nn, html[data-theme="light"] .align-grid .cn,
html[data-theme="light"] .hb-align.neutral { background: #ece6da; }
html[data-theme="light"] .align-grid .le, html[data-theme="light"] .align-grid .ne, html[data-theme="light"] .align-grid .ce,
html[data-theme="light"] .hb-align.evil { background: #f3dcd4; }
html[data-theme="light"] .body-diagram g[fill] { fill: #fffaf0; stroke: #a8701f; }
html[data-theme="light"] .body-diagram .crit { fill: #f4d9c6; }
html[data-theme="light"] .body-diagram text { fill: #4a2406; }
html[data-theme="light"] .rung .lvl { background: radial-gradient(#e6f0d6, #c7dfb2); color: #2a4a1a; border-color: #5f9a52; }
html[data-theme="light"] .rung .lvl::before { color: #3d7a38; }
html[data-theme="light"] .el { border-color: #0002; color: #fff; }
html[data-theme="light"] .church blockquote { background: #f6e6c2; }
html[data-theme="light"] .armour-table tr.light td:nth-child(2) { color: #3d7a38; }
html[data-theme="light"] .armour-table tr.medium td:nth-child(2) { color: #8a5a0a; }
html[data-theme="light"] .armour-table tr.heavy td:nth-child(2) { color: #a8322a; }
html[data-theme="light"] .spell { background: linear-gradient(180deg, #fffdf6, #f6ead0); }
html[data-theme="light"] .spell.miracle { border-top-color: #c8902a; }
html[data-theme="light"] .spell .verbal { color: #4a0e04; background: #fbefd2; }
html[data-theme="light"] .spell .cost, html[data-theme="light"] .chip, html[data-theme="light"] .hb-sum-stats div,
html[data-theme="light"] .hb-spell, html[data-theme="light"] .hb-dot .hb-num { background: #fffdf8; }
html[data-theme="light"] .hb-spell em { color: #5a4630; }
html[data-theme="light"] .hb-spell .lvl, html[data-theme="light"] .hs-sheet .lvl { color: #fff6dc; background: #8a5a1a; }
html[data-theme="light"] .hb-dot.on { background: linear-gradient(#fbe9bf, #fffaf0); }
html[data-theme="light"] .hb-dot.done .hb-num { background: #e6f0d6; color: #2a4a1a; }
html[data-theme="light"] .hb-slot .lv { background: radial-gradient(#fff8e6, #f2e2bd); }
html[data-theme="light"] .hb-error { background: #fbe9e3; color: #8a1a0a; }
html[data-theme="light"] .hb-summary, html[data-theme="light"] .contact-card { background: linear-gradient(180deg, #fbe9bf, #fffaf0 45%); }
html[data-theme="light"] .az-tools { background: #fffaf0f2; }
html[data-theme="light"] .az-group li { border-bottom-color: #e6d6b4; }
html[data-theme="light"] .map-frame { background: #f4e9d0; }
html[data-theme="light"] .map-frame iframe { filter: sepia(.15); }
html[data-theme="light"] mark.hit { background: #ffe08a; color: #2a1608; }
html[data-theme="light"] .ac { background: #fffaf0; }
html[data-theme="light"] .ac-tag { color: #fff6dc; background: #a8701f; }
html[data-theme="light"] .hb-why { color: #a8322a; }
html[data-theme="light"] .hb-field .req { color: #b0402a; }

/* gold buttons & badges: bright gold with dark text in both themes */
html[data-theme="light"] .btn, html[data-theme="light"] .chip.on, html[data-theme="light"] .call-name,
html[data-theme="light"] .badge, html[data-theme="light"] .np-tag, html[data-theme="light"] .pacb,
html[data-theme="light"] .armour-table .pac, html[data-theme="light"] ol.order-list > li::before,
html[data-theme="light"] .hb-dot.on .hb-num, html[data-theme="light"] .hb-card.on::after,
html[data-theme="light"] .az-letters a:hover, html[data-theme="light"] ol.results em b {
  background: linear-gradient(#f3d27e, #d39a3a); color: #2a1608; }
html[data-theme="light"] .btn { box-shadow: 0 3px 0 #a8701f; }
html[data-theme="light"] .btn.ghost { background: transparent; color: #5e3208; box-shadow: none; }
html[data-theme="light"] .call.safety .call-name { background: linear-gradient(#f4a08a, #c0402a); color: #fff; }

/* footer */
html[data-theme="light"] .site-footer { background: linear-gradient(#f6ead0, #ead7ae); border-top-color: #c9a462; box-shadow: 0 -1px 0 #fff; }
html[data-theme="light"] .ftr-links a { background: #fffaf0; }
html[data-theme="light"] .to-top { background: #fffaf0; }

@media (max-width: 640px) {
  html[data-theme="light"] .banner-text { background: linear-gradient(0deg, #fbf4e2f2 10%, #fbf4e2a6 60%, transparent); }
}