/* ============================================================
   Sanctuary Codex — shared stylesheet
   Palette, type and components for all pages.
   ============================================================ */

:root{
  --ink:#0b0a12;
  --ink-2:#13111d;
  --ink-3:#1b1828;
  --vault:#241f36;
  --bone:#e8e2d4;
  --bone-dim:#a9a293;
  --gold:#d3a04a;
  --gold-bright:#f0c274;
  --glass:#6ea3c9;
  --ember:#b9422f;
  --verdant:#7a9a5c;
  --violet:#8d7ab5;
  --rule:rgba(211,160,74,.28);
  --rule-soft:rgba(232,226,212,.10);
  --nav-h:60px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background-color:var(--ink);
  background-image:
    radial-gradient(1100px 620px at 50% -12%, #221c33 0%, rgba(34,28,51,0) 62%),
    linear-gradient(180deg,#0b0a12 0%,#0e0c17 55%,#0b0a12 100%);
  background-attachment:fixed;
  color:var(--bone);
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.cinzel{font-family:"Cinzel",Georgia,serif;font-weight:700;text-wrap:balance;margin:0}
h2{font-size:clamp(1.35rem,3.8vw,1.85rem);color:var(--gold-bright);line-height:1.2}
h3{font-size:1rem;letter-spacing:.05em;text-transform:uppercase;color:var(--bone);margin-top:36px}
h4{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;font-weight:600;
   letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0}
p{margin:0 0 1em}
a{color:var(--gold-bright)}
strong{color:#fff;font-weight:600}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

.wrap{max-width:900px;margin:0 auto;padding-inline:20px}
.wrap-wide{max-width:1080px;margin:0 auto;padding-inline:20px}

/* ---------------- navigation ---------------- */
.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:rgba(11,10,18,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.nav-in{
  max-width:1080px;margin:0 auto;padding:0 20px;height:var(--nav-h);
  display:flex;align-items:center;gap:22px;
}
.brand{
  font-family:"Cinzel",serif;font-weight:700;font-size:.92rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-bright);text-decoration:none;white-space:nowrap;
  display:flex;align-items:center;gap:9px;
}
.brand .mark{width:16px;height:16px;flex:0 0 auto}
.nav-links{display:flex;gap:18px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);text-decoration:none;white-space:nowrap;padding:6px 0;border-bottom:1px solid transparent;
}
.nav-links a:hover{color:var(--bone)}
.nav-links a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
@media (max-width:620px){
  .nav-in{gap:14px}
  .brand span.full{display:none}
}

/* ---------------- page hero ---------------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero .rose{
  position:absolute;pointer-events:none;user-select:none;
  opacity:.5;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
}
.hero-in{position:relative;z-index:2;padding-block:clamp(44px,9vw,92px) clamp(28px,5vw,48px);text-align:center}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--bone-dim);margin-bottom:20px;
}
.eyebrow .hot{color:var(--ember)}
.eyebrow .cool{color:var(--glass)}
h1{
  font-size:clamp(2.1rem,8vw,4.2rem);line-height:1;letter-spacing:.02em;
  background:linear-gradient(175deg,#fff 0%,var(--gold-bright) 46%,#9c6f2c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .sub{max-width:46ch;margin:20px auto 0;color:var(--bone-dim);font-size:1.03rem}

/* index hero sizing */
.hero-home .rose{width:min(1100px,150vw);top:-26%;left:50%;transform:translateX(-50%);opacity:.34}
.hero-home::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(62% 56% at 50% 46%, rgba(11,10,18,.82) 0%, rgba(11,10,18,.48) 46%, rgba(11,10,18,0) 80%);
}
.hero-home .hero-in{padding-block:clamp(76px,15vw,150px) clamp(48px,8vw,80px)}
/* guide hero sizing */
.hero-page .rose{width:min(640px,105vw);top:-46%;right:-14%;opacity:.33}

/* ---------------- sections ---------------- */
section{padding-block:clamp(34px,5.5vw,54px);border-bottom:1px solid var(--rule-soft)}
section:last-of-type{border-bottom:none}
.num{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.2em;display:block;margin-bottom:8px;color:var(--ember)}
.num.cool{color:var(--glass)}
.lede{color:var(--bone-dim);max-width:62ch;margin-top:10px}

/* ---------------- index cards ---------------- */
.deck{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px}
@media (min-width:720px){.deck{grid-template-columns:repeat(2,1fr)}}
.gcard{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--rule-soft);text-decoration:none;color:inherit;
  transition:border-color .22s ease, transform .22s ease;
}
.gcard:hover{border-color:var(--rule);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.gcard{transition:none}.gcard:hover{transform:none}}
.gcard .thumb{position:relative;height:150px;overflow:hidden;background:#0d0b16;border-bottom:1px solid var(--rule-soft)}
.gcard .thumb img{position:absolute;width:300px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.72}
.gcard .body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.gcard .kicker{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.gcard h3{font-family:"Cinzel",serif;text-transform:none;letter-spacing:.01em;font-size:1.22rem;color:var(--bone);margin:9px 0 7px}
.gcard p{margin:0;font-size:.92rem;color:var(--bone-dim);flex:1}
.gcard .go{margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright)}

/* ---------------- shared components ---------------- */
.call{border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(211,160,74,.10),rgba(211,160,74,0));padding:15px 18px;margin-top:24px}
.call.warn{border-left-color:var(--ember);background:linear-gradient(90deg,rgba(185,66,47,.12),rgba(185,66,47,0))}
.call.ok{border-left-color:var(--verdant);background:linear-gradient(90deg,rgba(122,154,92,.12),rgba(122,154,92,0))}
.call.cool{border-left-color:var(--glass);background:linear-gradient(90deg,rgba(110,163,201,.12),rgba(110,163,201,0))}
.call p{margin:0;font-size:.95rem}
.call h4{margin-bottom:6px}
.call.warn h4{color:#e0755f}
.call.ok h4{color:#9cba7c}
.call.cool h4{color:#8fbede}

ul.tick{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px}
ul.tick li{padding-left:26px;position:relative;color:var(--bone-dim)}
ul.tick li::before{content:"";position:absolute;left:4px;top:.68em;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
ul.tick li b{color:var(--bone)}
ul.cross li::before{background:var(--ember)}

.tbl{overflow-x:auto;margin-top:24px}
table{border-collapse:collapse;width:100%;min-width:500px;font-size:.93rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
th{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border-bottom-color:var(--rule)}
td:first-child{font-family:"Cinzel",serif;color:var(--bone);white-space:nowrap}
tbody tr:nth-child(odd){background:rgba(255,255,255,.018)}
.tag{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
     border:1px solid var(--rule);color:var(--gold);padding:2px 6px;white-space:nowrap}
.tag.must{border-color:var(--ember);color:#e0755f}

.steps{counter-reset:s;display:grid;gap:2px;margin-top:26px;background:var(--rule-soft)}
.step{background:var(--ink-2);padding:18px 20px 18px 62px;position:relative}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:20px;top:18px;
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--gold)}
.step b{font-family:"Cinzel",serif;color:var(--bone);display:block;margin-bottom:4px}
.step p{margin:0;font-size:.94rem;color:var(--bone-dim)}
.step .when{float:right;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--glass);border:1px solid rgba(110,163,201,.4);padding:1px 7px;margin-left:12px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-top:26px}
.card{background:var(--ink-2);border:1px solid var(--rule-soft);padding:18px}
.card b{font-family:"Cinzel",serif;color:var(--gold-bright);display:block;margin-bottom:6px}
.card p{margin:0;font-size:.9rem;color:var(--bone-dim)}
.card .cost{display:block;margin-top:10px;font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ember)}

.scroller{overflow-x:auto;padding-bottom:6px;margin-top:26px}
.scroller svg{display:block;min-width:680px;max-width:100%}

.glance{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule-soft);margin-top:clamp(28px,5vw,44px)}
.glance div{background:var(--ink-2);padding:16px 14px}
.glance dt{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.glance dd{margin:6px 0 0;font-family:"Cinzel",serif;font-size:1.02rem;color:var(--gold-bright)}
@media (max-width:620px){.glance{grid-template-columns:repeat(2,1fr)}}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--rule);margin-top:10px}
.foot-in{padding-block:36px 48px;color:var(--bone-dim);font-size:.88rem;
  display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media (max-width:640px){.foot-in{grid-template-columns:1fr}}
.foot a{color:var(--bone-dim)}
.srcs{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.foot .fine{margin-top:16px;font-size:.82rem;opacity:.75}
.next{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.next a{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--rule);color:var(--gold-bright);padding:9px 14px;text-decoration:none;
}
.next a:hover{background:rgba(211,160,74,.10)}

.foot-in.foot-solo{grid-template-columns:1fr}

/* ---------------- class pages ---------------- */
/* per-class accent: the leading colour of that class's stained glass */
.hero-barbarian,.ccard-barbarian{--accent:#c07a3a;--accent-glow:#efb36a}
.hero-druid,.ccard-druid{--accent:#8aa06a;--accent-glow:#cfe0a8}
.hero-necromancer,.ccard-necromancer{--accent:#b9b3c9;--accent-glow:#e6e2f0}
.hero-paladin,.ccard-paladin{--accent:#d3a04a;--accent-glow:#f6d79a}
.hero-rogue,.ccard-rogue{--accent:#8fb0c4;--accent-glow:#d3e6f0}
.hero-sorcerer,.ccard-sorcerer{--accent:#d88a4a;--accent-glow:#ffd2a0}
.hero-spiritborn,.ccard-spiritborn{--accent:#c9a04a;--accent-glow:#f0d58a}
.hero-warlock,.ccard-warlock{--accent:#a06ac4;--accent-glow:#e0b8f0}

.hero-page[class*=" hero-"] .rose{opacity:.42}
.crest{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--accent,var(--gold)) 55%,transparent);
  background:radial-gradient(circle,rgba(11,10,18,.35),rgba(11,10,18,.85));
  box-shadow:0 0 34px color-mix(in srgb,var(--accent-glow,var(--gold-bright)) 22%,transparent)}
.crest img{width:40px;height:40px;display:block}

/* class switcher bar */
.switch{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;justify-content:safe center;
  padding:10px 16px;border-bottom:1px solid var(--rule-soft);background:rgba(19,17,29,.7)}
.switch::-webkit-scrollbar{display:none}
.switch a{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 12px;text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-dim);border:1px solid transparent}
.switch a img{width:20px;height:20px;opacity:.7}
.switch a:hover{color:var(--bone);border-color:var(--rule-soft)}
.switch a:hover img{opacity:1}
.switch a[aria-current="page"]{color:var(--gold-bright);border-color:var(--rule);background:rgba(211,160,74,.08)}
.switch a[aria-current="page"] img{opacity:1}

/* character art beside the opening section */
.figure-row{display:grid;grid-template-columns:1fr;gap:clamp(22px,4vw,40px);align-items:start}
.figure-art{max-width:240px;margin-inline:auto;width:100%}
.figure-art img{display:block;width:100%;height:auto}
.figure-art.painted img{border:1px solid var(--rule);box-shadow:0 18px 50px rgba(0,0,0,.55);aspect-ratio:2/3;object-fit:cover}
@media (min-width:720px){
  .figure-row{grid-template-columns:minmax(200px,270px) 1fr}
  .figure-art{max-width:none;position:sticky;top:calc(var(--nav-h) + 16px)}
}
.glance-2{grid-template-columns:repeat(2,1fr)}
.body-note{margin-top:12px;color:var(--bone-dim);max-width:62ch}

/* ---------------- class index ---------------- */
.class-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px}
@media (min-width:620px){.class-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.class-grid{grid-template-columns:repeat(4,1fr)}}
.ccard{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--rule-soft);
  transition:border-color .22s ease, transform .22s ease}
.ccard:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.ccard{transition:none}.ccard:hover{transform:none}}
.ccard-art{display:block;height:230px;overflow:hidden;background:#0d0b16;border-bottom:1px solid var(--rule-soft)}
.ccard-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.ccard-body{position:relative;padding:18px 18px 20px;flex:1;display:flex;flex-direction:column}
.ccard-sigil{position:absolute;right:16px;top:16px;width:30px;height:30px;opacity:.85}
.ccard .kicker{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ccard h3{font-family:"Cinzel",serif;text-transform:none;letter-spacing:.01em;font-size:1.25rem;color:var(--bone);margin:8px 0 2px}
.ccard-build{font-family:"Cinzel",serif;color:var(--accent-glow);font-size:.95rem;margin:0 0 8px}
.ccard p{margin:0;font-size:.9rem;color:var(--bone-dim)}
.ccard-body > p:last-of-type{flex:1}
.ccard-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.ccard-links a{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);color:var(--gold-bright);padding:8px 10px;text-decoration:none}
.ccard-links a:hover{background:rgba(211,160,74,.10)}
section[id]{scroll-margin-top:calc(var(--nav-h) + 10px)}

/* levelling / endgame toggle for the current class */
.pair{display:grid;grid-template-columns:1fr 1fr;max-width:620px;margin:0 auto;padding:18px 16px 6px;gap:10px}
.pair a{display:block;text-align:center;text-decoration:none;padding:12px 10px;border:1px solid var(--rule-soft);
  background:var(--ink-2);color:var(--bone-dim);font-family:"Cinzel",serif;font-size:.95rem;line-height:1.3}
.pair a small{display:block;font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:4px}
.pair a:hover{border-color:var(--rule);color:var(--bone)}
.pair a[aria-current="page"]{border-color:var(--gold);color:var(--gold-bright);background:rgba(211,160,74,.10)}
.pair a[aria-current="page"] small{color:var(--gold)}
/* one levelling tab plus one per build */
.pair{grid-template-columns:repeat(2,1fr)}
.pair-3,.pair-4,.pair-5{max-width:1040px}
@media (min-width:760px){
  .pair-3{grid-template-columns:repeat(3,1fr)}
  .pair-4{grid-template-columns:repeat(4,1fr)}
  .pair-5{grid-template-columns:repeat(5,1fr)}
}
.pair a{display:flex;flex-direction:column;justify-content:center}
.ccard-links a.lvl{border-color:var(--rule-soft);color:var(--bone)}

/* ---------------- build finder ---------------- */
.finder{margin-top:30px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink-2);border:1px solid var(--rule-soft);color:var(--bone-dim);padding:9px 13px;cursor:pointer;
}
.chips button:hover{color:var(--bone);border-color:var(--rule)}
.chips button[aria-pressed="true"]{color:var(--gold-bright);border-color:var(--gold);background:rgba(211,160,74,.10)}
#finder td:first-child{white-space:normal}
#finder td a{text-decoration:none}
#finder td a:hover{text-decoration:underline}
#finder td:nth-child(2){font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-dim)}
.finder-none{margin-top:18px;color:var(--bone-dim)}
.checked{margin:18px 0 0;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-dim);opacity:.75}

/* ---------------- Ceckard Dain, the assistant ---------------- */
.cd{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:80;
  font-family:"Spectral",Georgia,serif}
.cd-launch{display:flex;align-items:center;gap:9px;padding:12px 17px;cursor:pointer;
  font-family:"Cinzel",serif;font-size:.88rem;letter-spacing:.04em;color:var(--bone);
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid var(--rule);
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
.cd-launch:hover{border-color:var(--gold);color:var(--gold-bright)}
.cd-spark{width:9px;height:9px;background:var(--gold-bright);transform:rotate(45deg);flex:0 0 auto;
  box-shadow:0 0 12px var(--gold-bright)}
.cd-panel{position:absolute;right:0;bottom:0;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 40px));
  display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--rule);
  box-shadow:0 26px 70px rgba(0,0,0,.65)}
.cd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;
  border-bottom:1px solid var(--rule-soft);background:rgba(211,160,74,.06)}
.cd-head b{font-family:"Cinzel",serif;color:var(--gold-bright);font-size:.98rem;display:block}
.cd-head small{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim)}
.cd-close{background:none;border:0;color:var(--bone-dim);font-size:1.4rem;line-height:1;cursor:pointer;padding:2px 6px}
.cd-close:hover{color:var(--bone)}
.cd-log{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:11px}
.cd-msg{max-width:88%;padding:10px 13px;font-size:.92rem;line-height:1.55;white-space:pre-wrap}
.cd-you{align-self:flex-end;background:rgba(211,160,74,.12);border:1px solid var(--rule);color:var(--bone)}
.cd-bot{align-self:flex-start;background:var(--ink-3);border:1px solid var(--rule-soft);color:var(--bone-dim)}
.cd-thinking{color:var(--gold);letter-spacing:.2em}
.cd-go{align-self:flex-start;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--gold);color:var(--gold-bright);padding:9px 13px;text-decoration:none}
.cd-go:hover{background:rgba(211,160,74,.12)}
.cd-seeds{display:flex;flex-wrap:wrap;gap:6px;padding:0 15px 10px}
.cd-seeds:empty{display:none}
.cd-seeds button{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid var(--rule-soft);color:var(--bone-dim);padding:7px 10px;cursor:pointer}
.cd-seeds button:hover{border-color:var(--rule);color:var(--bone)}
.cd-form{display:flex;gap:8px;padding:11px 15px;border-top:1px solid var(--rule-soft)}
.cd-input{flex:1;background:var(--ink);border:1px solid var(--rule-soft);color:var(--bone);
  padding:10px 12px;font-family:"Spectral",serif;font-size:.92rem}
.cd-input:focus{outline:none;border-color:var(--gold)}
.cd-send{background:none;border:1px solid var(--rule);color:var(--gold-bright);padding:0 15px;cursor:pointer;font-size:1.05rem}
.cd-send:hover{background:rgba(211,160,74,.12)}
.cd-fine{margin:0;padding:0 15px 12px;font-size:.66rem;color:var(--bone-dim);opacity:.7}
@media (max-width:420px){.cd-launch span:last-child{display:none}.cd-launch{padding:13px}}
/* ============================================================
   Phase A additions — append to assets/site.css (or merge)
   Sanctuary Codex premium UI — Jamie approved 2026-09-20
   ============================================================ */

:root{
  --ember-text:#e0755f;
}
.num,.eyebrow .hot{color:var(--ember-text)}

/* Card titles — reset global h3 */
.card h3{
  font-family:"Cinzel",serif;
  font-weight:700;
  text-transform:none;
  letter-spacing:.01em;
  font-size:1.05rem;
  color:var(--gold-bright);
  margin:0 0 6px;
  line-height:1.25;
}

/* Trust strip — no competitor Sources */
.trust{
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
  margin:18px auto 0;max-width:46ch;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);
}
.trust span{white-space:nowrap}
.trust span + span::before{
  content:"";display:inline-block;width:3px;height:3px;margin-right:18px;
  background:var(--gold);border-radius:50%;vertical-align:middle;opacity:.7;
}
.hero-page .trust,.hero-home .trust{margin-top:16px}

/* Class card art — less mobile dominance */
.ccard-art{height:clamp(160px,42vw,230px)}

/* Compress guide chrome slightly */
.switch{padding:8px 14px}
.pair{padding:12px 14px 4px;gap:8px}
.pair a{padding:10px 8px}

/* -------- Nav: Menu + More -------- */
.nav-menu{
  display:none;margin-left:auto;
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);background:none;border:1px solid var(--rule);padding:10px 14px;min-height:44px;cursor:pointer;
}
.nav-menu:hover{border-color:var(--gold);background:rgba(211,160,74,.08)}
.nav-more{position:relative;display:flex;align-items:center}
.nav-more-btn{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);background:none;border:0;padding:6px 0;border-bottom:1px solid transparent;cursor:pointer;
}
.nav-more-btn:hover{color:var(--bone)}
.nav-more-btn[aria-expanded="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.nav-more-panel{
  position:absolute;right:0;top:calc(100% + 10px);min-width:200px;z-index:60;
  display:flex;flex-direction:column;gap:0;
  background:var(--ink-2);border:1px solid var(--rule);padding:8px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.nav-more-panel[hidden]{display:none !important}
.nav-more-panel a{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-dim);text-decoration:none;padding:12px 14px;min-height:44px;display:flex;align-items:center;
  border-bottom:0;white-space:nowrap;
}
.nav-more-panel a:hover{color:var(--bone);background:rgba(211,160,74,.06)}
.nav-more-panel a[aria-current="page"]{color:var(--gold)}

@media (max-width:759px){
  .nav-menu{display:inline-flex;align-items:center}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:var(--nav-h);
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:rgba(11,10,18,.96);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--rule);padding:8px 12px 14px;max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  }
  .nav.is-open .nav-links{display:flex}
  .nav-links > a{
    padding:14px 12px;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--rule-soft);
  }
  .nav-more{flex-direction:column;align-items:stretch;width:100%}
  .nav-more-btn{
    text-align:left;padding:14px 12px;min-height:44px;width:100%;border-bottom:1px solid var(--rule-soft);
  }
  .nav-more-panel{
    position:static;box-shadow:none;border:0;background:transparent;padding:0 0 0 8px;min-width:0;
  }
  .nav-more-panel:not([hidden]){display:flex}
}

@media (min-width:760px){
  .nav-menu{display:none !important}
  .nav-links{display:flex;overflow:visible}
}

/* -------- TOC -------- */
.toc-toggle{
  display:none;width:100%;margin:18px 0 0;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);background:var(--ink-2);border:1px solid var(--rule);padding:12px 14px;min-height:44px;cursor:pointer;
}
.toc{
  margin:20px 0 0;padding:16px 18px;background:var(--ink-2);border:1px solid var(--rule-soft);
}
.toc-title{
  font-family:"IBM Plex Mono",monospace !important;font-size:.64rem !important;font-weight:600 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--gold) !important;
  margin:0 0 12px !important;background:none !important;-webkit-background-clip:unset !important;background-clip:unset !important;
}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.toc a{
  font-family:"Spectral",serif;font-size:.92rem;color:var(--bone-dim);text-decoration:none;
  display:block;padding:4px 0;
}
.toc a:hover{color:var(--gold-bright)}

@media (max-width:759px){
  .toc-toggle{display:block}
  .toc{display:none;margin-top:8px}
  .toc.is-open{display:block}
}
@media (min-width:760px){
  .toc-toggle{display:none !important}
  .toc{display:block;position:sticky;top:calc(var(--nav-h) + 8px);z-index:5}
}

/* -------- Assistant open state -------- */
.cd.cd-open .cd-launch[hidden]{display:none !important}
.cd-close{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
}
.cd-panel{z-index:90}

/* ============================================================
   Phase B — type scale, class cards, gold restraint, hero CTAs
   Append after Phase A block in assets/site.css
   ============================================================ */

:root{
  /* Type / space scale */
  --text-body:1.0625rem;          /* 17px */
  --text-ui:.75rem;               /* chrome labels — larger than old .7/.64 */
  --text-ui-sm:.68rem;
  --track-ui:.1em;                /* was .14–.3em */
  --track-eyebrow:.18em;          /* was .3em */
  --space-1:6px;
  --space-2:12px;
  --space-3:18px;
  --space-4:28px;
  --space-5:44px;
  /* Gold restraint: bright gold only for current/primary */
  --gold-quiet:rgba(211,160,74,.55);
}

body{font-size:var(--text-body)}

/* Chrome: larger mono, less tracking — keep Cinzel for display only */
.nav-links a,
.nav-more-btn,
.nav-menu,
.chips button,
.toc-toggle,
th,
.tag,
.checked,
.cd-seeds button{
  font-size:var(--text-ui);
  letter-spacing:var(--track-ui);
}
.eyebrow{letter-spacing:var(--track-eyebrow);font-size:var(--text-ui-sm)}
.num{letter-spacing:.14em;font-size:var(--text-ui-sm)}
h4{letter-spacing:var(--track-ui);font-size:var(--text-ui-sm)}

/* Restrained gold — default chrome bone-dim; gold for current/hover only */
.nav-links a{color:var(--bone-dim);border-bottom-color:transparent}
.nav-links a:hover{color:var(--bone)}
.nav-links a[aria-current="page"]{color:var(--gold-bright);border-bottom-color:var(--gold)}
.chips button{color:var(--bone-dim);border-color:var(--rule-soft)}
.chips button[aria-pressed="true"]{
  color:var(--gold-bright);border-color:var(--gold);background:rgba(211,160,74,.08);
}
/* Soften automatic gold on every th — keep readable, less glitter */
th{color:var(--gold-quiet);border-bottom-color:var(--rule)}
.glance dd{color:var(--gold-bright)} /* keep — few cells */

/* Homepage hero — shorter band + CTAs */
.hero-home .hero-in{padding-block:clamp(48px,9vw,96px) clamp(28px,5vw,48px)}
.hero-home .rose{opacity:.28}
.hero .sub{max-width:42ch;margin-top:14px;font-size:1rem}
.hero-cta{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:22px;
}
.hero-cta a{
  font-family:"IBM Plex Mono",monospace;font-size:var(--text-ui);letter-spacing:var(--track-ui);
  text-transform:uppercase;text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center;padding:10px 16px;
  border:1px solid var(--rule);color:var(--gold-bright);
}
.hero-cta a:hover{background:rgba(211,160,74,.1);border-color:var(--gold)}
.hero-cta a.primary{
  border-color:var(--gold);background:rgba(211,160,74,.12);
}

/* Class grid note (replaces per-card kicker spam) */
.class-grid-note{
  font-family:"IBM Plex Mono",monospace;font-size:var(--text-ui-sm);letter-spacing:var(--track-ui);
  text-transform:uppercase;color:var(--bone-dim);margin:20px 0 0;
}

/* Class cards — craft, equal link rows, quieter accent */
.ccard{
  border-color:var(--rule-soft);
  box-shadow:none;
  transition:border-color .2s ease, transform .2s ease;
}
.ccard:hover{
  border-color:color-mix(in srgb,var(--accent) 40%,var(--rule-soft));
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion:reduce){.ccard:hover{transform:none;box-shadow:none}}
.ccard .kicker{display:none} /* moved to .class-grid-note */
.ccard-build{font-size:.88rem;color:var(--accent-glow);opacity:.92}
.ccard-links{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:auto;
  padding-top:var(--space-3);
}
@media (min-width:400px){
  .ccard-links{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(44px,auto)}
  .ccard-links a.lvl{grid-column:1 / -1}
}
.ccard-links a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:44px;padding:8px 10px;box-sizing:border-box;
  font-size:var(--text-ui-sm);letter-spacing:var(--track-ui);
  border:1px solid var(--rule-soft);color:var(--gold-bright);text-decoration:none;
}
.ccard-links a.lvl{
  border-color:var(--rule);color:var(--bone);background:rgba(232,226,212,.03);
}
.ccard-links a:hover{background:rgba(211,160,74,.08);border-color:var(--gold-quiet)}
.ccard-links a.lvl:hover{border-color:var(--gold);color:var(--gold-bright)}

/* Guide chrome — a bit more air without a third sticky bar */
.switch{gap:2px}
.pair a{font-size:.9rem}
.pair a small{letter-spacing:var(--track-ui)}

/* Focus — gold outline only, no glow */
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;box-shadow:none}
/* ============================================================
   Phase C — mobile finder cards, farming search, stacked tables
   Append to assets/site.css after Phase B
   ============================================================ */

/* Finder count */
.finder-count{
  margin:12px 0 0;
  font-family:"IBM Plex Mono",monospace;font-size:var(--text-ui-sm, .68rem);
  letter-spacing:var(--track-ui, .1em);text-transform:uppercase;color:var(--bone-dim);
}

/* Desktop table / mobile cards */
.finder-table table{min-width:0} /* was inline 680px — kill page overflow */
.finder-cards{display:none;gap:10px;margin-top:16px}
.fcard{
  background:var(--ink-2);border:1px solid var(--rule-soft);padding:14px 16px;
}
.fcard-title{
  font-family:"Cinzel",serif;font-size:1.05rem;color:var(--gold-bright);text-decoration:none;display:block;
}
.fcard-title:hover{text-decoration:underline}
.fcard-meta{
  display:flex;flex-wrap:wrap;gap:8px 14px;margin:8px 0 0;
  font-family:"IBM Plex Mono",monospace;font-size:var(--text-ui-sm, .68rem);
  letter-spacing:var(--track-ui, .1em);text-transform:uppercase;color:var(--bone-dim);
}
.fcard-diff{margin:8px 0 0;font-size:.92rem;color:var(--bone)}
.fcard-needs{margin:6px 0 0;font-size:.9rem;color:var(--bone-dim)}

@media (max-width:719px){
  .finder-table{display:none}
  .finder-cards{display:grid}
}
@media (min-width:720px){
  .finder-cards{display:none !important}
  .finder-table{display:block}
  .finder-table table{min-width:560px} /* scroll inside .tbl only */
}

/* Stack reference tables on small screens */
@media (max-width:719px){
  .tbl.stack-mobile table,
  main.wrap .tbl table{min-width:0}
  .tbl.stack-mobile thead,
  main.wrap .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl.stack-mobile tbody tr,
  main.wrap .tbl tbody tr{
    display:block;border:1px solid var(--rule-soft);background:var(--ink-2);
    margin:0 0 10px;padding:10px 12px;
  }
  .tbl.stack-mobile tbody td,
  main.wrap .tbl tbody td{
    display:block;border:0;padding:4px 0;white-space:normal;
  }
  .tbl.stack-mobile tbody td:first-child,
  main.wrap .tbl tbody td:first-child{
    font-family:"Cinzel",serif;color:var(--bone);font-size:1rem;
  }
  .tbl.stack-mobile tbody td:not(:first-child),
  main.wrap .tbl tbody td:not(:first-child){
    font-size:.9rem;color:var(--bone-dim);
  }
}

/* Farming search tools */
.ref-tools{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  margin:0 0 8px;padding:18px 0 6px;
  border-bottom:1px solid var(--rule-soft);
  position:sticky;top:var(--nav-h);z-index:4;
  background:linear-gradient(180deg,var(--ink) 70%,rgba(11,10,18,0));
}
.ref-search{display:flex;flex-direction:column;gap:6px;flex:1;min-width:min(100%,220px)}
.ref-search-label{
  font-family:"IBM Plex Mono",monospace;font-size:var(--text-ui-sm, .68rem);
  letter-spacing:var(--track-ui, .1em);text-transform:uppercase;color:var(--gold);
}
.ref-search-input{
  width:100%;min-height:44px;padding:10px 12px;
  background:var(--ink-2);border:1px solid var(--rule-soft);color:var(--bone);
  font-family:"Spectral",serif;font-size:1rem;
}
.ref-search-input:focus{outline:none;border-color:var(--gold)}
.ref-count{
  margin:0;font-family:"IBM Plex Mono",monospace;font-size:var(--text-ui-sm, .68rem);
  letter-spacing:var(--track-ui, .1em);text-transform:uppercase;color:var(--bone-dim);
  min-height:1.2em;
}

/* Deck / wide SVG — contain scroll, hint edges */
.scroller{
  overflow-x:auto;max-width:100%;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
  padding-bottom:8px;
}
.scroller svg{max-width:none} /* keep diagram readable; scroll inside scroller only */
/* Phase C hotfix — author display:block on stacked rows was beating [hidden]
   Spot-check: farming search "Gohr" left Deathgrip visible (count said 1).
   Append to assets/site.css */

main.wrap .tbl tbody tr[hidden],
.tbl tbody tr[hidden],
.finder-cards .fcard[hidden],
.tbl[hidden],
h3[hidden],
.finder-none[hidden]{
  display:none !important;
}

/* Companion to farming-search.js grouping fix */
.is-search-hidden,
h3.is-search-hidden,
p.is-search-hidden,
.tbl.is-search-hidden,
.call.is-search-hidden{
  display:none !important;
}

/* ---------------- News (More) ---------------- */
.hero-news .rose-news{
  width:min(920px,120vw); top:-18%; left:50%; right:auto; transform:translateX(-50%);
  opacity:.42; object-fit:contain;
}
.news-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.news-item{
  display:grid;grid-template-columns:1fr;gap:16px;align-items:start;
  background:var(--ink-2);border:1px solid var(--rule-soft);padding:16px 18px;
}
.news-item:has(.news-thumb){grid-template-columns:72px 1fr}
.news-thumb{width:72px;height:72px;object-fit:cover;border:1px solid var(--rule-soft)}
.news-meta{
  display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 8px;
  font-family:"IBM Plex Mono",monospace;font-size:var(--text-ui-sm,.68rem);
  letter-spacing:var(--track-ui,.1em);text-transform:uppercase;color:var(--bone-dim);
}
.news-item h3{
  font-family:"Cinzel",serif;text-transform:none;letter-spacing:.01em;
  font-size:1.15rem;margin:0 0 6px;color:var(--bone);
}
.news-item h3 a{color:var(--gold-bright);text-decoration:none}
.news-item h3 a:hover{text-decoration:underline}
.news-body > p{margin:0 0 10px;font-size:.95rem;color:var(--bone-dim)}
.news-body > p:last-child{margin-bottom:0}
.news-action{color:var(--bone)}
.news-action b{color:var(--gold)}
@media (max-width:520px){
  .news-item:has(.news-thumb){grid-template-columns:1fr}
  .news-thumb{width:56px;height:56px}
}