:root{
  /* Base text size for the guide — every size below is a rem multiple of it. */
  --fs:16px;
  --ink:#0d0b10; --stone:#151218; --stone2:#1b1720; --line:#2a2433;
  --bone:#cdbfa3; --ash:#8d8496; --blood:#a11226; --essence:#46c8b2; --gold:#d8a53f;
  --r-common:#9aa0a6; --r-magic:#5b8ff0; --r-rare:#e8c14a; --r-leg:#e07a2f; --r-myth:#e84a9b;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:var(--fs);}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{margin:0;background:var(--ink);color:var(--bone);
  font:1rem/1.62 Georgia,'Iowan Old Style','Times New Roman',serif;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.05;
  background-image:radial-gradient(#fff 1px, transparent 1px);background-size:180px 180px;}

.wrap{display:grid;grid-template-columns:230px minmax(0,860px);gap:44px;max-width:1180px;margin:0 auto;padding:0 20px 120px;}
@media (max-width:900px){ .wrap{grid-template-columns:1fr;} nav.toc{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line);padding-bottom:14px;} }

/* ---- the cover ---- */
header.cover{grid-column:1/-1;padding:78px 0 44px;border-bottom:1px solid var(--blood);}
.cover .rune{color:var(--blood);font-size:0.8125rem;letter-spacing:.55em;text-transform:uppercase;}
.cover h1{margin:.2em 0 .1em;font-size:clamp(2.625rem,7vw,4.625rem);font-weight:400;letter-spacing:.14em;color:#e8dfc8;}
.cover h1 b{color:var(--blood);font-weight:400;}
.cover .sub{color:var(--ash);font-style:italic;max-width:62ch;}

/* ---- the rail ---- */
nav.toc{position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto;padding:26px 14px 26px 0;border-right:1px solid var(--line);font-size:0.84375rem;}
nav.toc .lbl{color:var(--blood);letter-spacing:.3em;text-transform:uppercase;font-size:0.6875rem;margin-bottom:10px;}
nav.toc a{display:flex;gap:10px;color:var(--ash);text-decoration:none;padding:4.5px 0;}
nav.toc a:hover,nav.toc a:focus-visible{color:var(--bone);}
nav.toc a:focus-visible{outline:1px solid var(--essence);outline-offset:2px;}
nav.toc .n{color:var(--blood);width:26px;flex:none;font-variant-numeric:tabular-nums;}

main{padding-top:26px;min-width:0;}
section{margin-bottom:72px;}
h2{font-size:0.9375rem;font-weight:400;letter-spacing:.4em;text-transform:uppercase;color:#e8dfc8;
  display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:10px;}
h2 .n{color:var(--blood);letter-spacing:0;font-size:1.25rem;}
h3{font-size:0.78125rem;letter-spacing:.28em;text-transform:uppercase;color:var(--essence);font-weight:400;margin:34px 0 8px;}
p{margin:.55em 0;}
em{color:#ded4bd;}
.mut{color:var(--ash);}
.note{border-left:2px solid var(--blood);padding:2px 0 2px 14px;color:var(--ash);font-style:italic;margin:14px 0;}

kbd{font:0.78125rem ui-monospace,Menlo,Consolas,monospace;color:#e8dfc8;background:var(--stone2);
  border:1px solid #3a3344;border-bottom-width:3px;border-radius:4px;padding:1px 7px;white-space:nowrap;}
code,.num{font:0.875rem ui-monospace,Menlo,Consolas,monospace;color:#d8cfe0;}

table{width:100%;border-collapse:collapse;margin:14px 0;font-size:0.90625rem;}
th{font:0.6875rem ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
  text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);}
td{padding:7px 10px;border-bottom:1px solid #201b28;vertical-align:top;}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}
tr:hover td{background:rgba(255,255,255,.015);}
.scroll{overflow-x:auto;}

/* ---- specimen cards (the signature) ---- */
.spec{background:var(--stone);border:1px solid var(--line);border-left:3px solid var(--blood);
  padding:16px 20px 14px;margin:16px 0;}
.spec .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;}
.spec .nm{font-size:1.1875rem;color:#e8dfc8;letter-spacing:.06em;}
.spec .tier{font:0.71875rem ui-monospace,monospace;color:var(--ink);background:var(--bone);padding:1px 8px;border-radius:3px;letter-spacing:.08em;}
.spec .stats{font:0.78125rem ui-monospace,Menlo,monospace;color:var(--ash);margin-left:auto;}
.spec .stats b{color:#d8cfe0;font-weight:400;}
.spec p{margin:.5em 0 0;font-size:0.9375rem;}
.spec.summon{border-left-color:#c8e84a;}
.spec.boss{border-left-color:var(--gold);}

/* ---- skill cards ---- */
.skgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:14px 0;}
.sk{background:var(--stone);border:1px solid var(--line);padding:14px 16px;}
.sk .g{float:right;font-size:1.375rem;color:var(--essence);}
.sk .nm{color:#e8dfc8;letter-spacing:.04em;}
.sk .meta{font:0.71875rem ui-monospace,monospace;color:var(--ash);margin:2px 0 8px;}
.sk ol{margin:0;padding-left:20px;font-size:0.8625rem;}
.sk li{margin:3px 0;}
.sk li::marker{color:var(--blood);font-family:ui-monospace,monospace;font-size:0.75rem;}

.rar-common{color:var(--r-common);} .rar-magic{color:var(--r-magic);} .rar-rare{color:var(--r-rare);}
.rar-leg{color:var(--r-leg);} .rar-myth{color:var(--r-myth);}
.gold{color:var(--gold);} .ess{color:var(--essence);} .blood{color:#e05a6a;}

.keys{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:14px 0;align-items:baseline;}
footer{grid-column:1/-1;border-top:1px solid var(--line);color:var(--ash);font-style:italic;padding-top:18px;font-size:0.84375rem;}