:root{
  /* palette — scorched vellum & ceremonial dark */
  --ink:#14100b;
  --ink-2:#1c160e;
  --ink-3:#241c11;
  --vellum:#e9dcc0;
  --faded:#b3a37e;
  --faded-2:#8a7c5c;
  --hair:rgba(233,220,192,.13);
  --blood:#8f312a;
  /* planetary seal-metals, mapped to the ranks (from the grimoire's own key) */
  --gold:#d9b45b;    /* Kings */
  --copper:#c67c4c;  /* Dukes */
  --silver:#c6cbd2;  /* Marquises */
  --tin:#9fb0a6;     /* Princes / Prelates */
  --bronze:#c09660;  /* Presidents */
  --iron:#9b948a;    /* Earls */
  --steel:#8fa0ad;   /* Knight */
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Courier New",monospace;
  --display:"Palatino Linotype","Book Antiqua",Palatino,"URW Palladio L",Georgia,serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #201810 0%, var(--ink) 55%) fixed,
    var(--ink);
  color:var(--vellum);
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:1120px;margin:0 auto;padding:0 22px;}

/* ---------- language switch (lives in the footer) ---------- */
.langbar{display:flex;gap:0;justify-content:center;margin:0 0 30px;}
.langbar button{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1px solid var(--hair);color:var(--faded);
  padding:6px 12px;cursor:pointer;transition:all .18s ease;
}
.langbar button+button{border-left:none;}
.langbar button.is-active{color:var(--ink);background:var(--gold);border-color:var(--gold);font-weight:700;}
.langbar button:not(.is-active):hover{color:var(--vellum);}

/* ---------- hero ---------- */
.hero{padding:74px 0 30px;text-align:center;position:relative;}
.seal{width:132px;height:132px;margin:0 auto 26px;display:block;opacity:.92;
  animation:rise 1.1s ease both;}
.seal .ring-outer{transform-origin:50% 50%;animation:spin 150s linear infinite;}
.overline{
  font-family:var(--mono);
  font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--faded-2);margin:0 0 14px;animation:rise 1s ease .05s both;
}
h1{
  font-family:var(--display);
  font-weight:400;font-size:clamp(2.6rem,7.5vw,4.6rem);line-height:.98;
  margin:0;letter-spacing:.01em;
  background:linear-gradient(180deg,#f3e7c9,#cdae72 78%,#a2833f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rise 1s ease .1s both;
}
h1 .sub{
  display:block;font-size:clamp(.82rem,2.2vw,1.02rem);letter-spacing:.32em;
  text-transform:uppercase;color:var(--faded);margin-top:20px;
  font-family:var(--mono);
  -webkit-text-fill-color:var(--faded);
}
.lede{
  max-width:640px;margin:26px auto 0;color:var(--faded);
  font-size:1.02rem;font-style:italic;animation:rise 1s ease .15s both;
}
.lede b{color:var(--vellum);font-style:normal;font-weight:400;}

.rule{
  height:1px;max-width:200px;margin:36px auto 0;
  background:linear-gradient(90deg,transparent,var(--blood),transparent);
  opacity:.7;
}
.wiki-nav{margin:18px 0 0;animation:rise 1s ease .2s both;}
.wiki-nav a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(217,180,91,.3);
}
.wiki-nav a:hover{border-bottom-color:var(--gold);}

/* ---------- key ---------- */
.key{
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;
  margin:34px auto 6px;max-width:760px;
  font-family:var(--mono);
  font-size:.68rem;letter-spacing:.08em;color:var(--faded);text-transform:uppercase;
}
.key span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.swatch{width:9px;height:9px;border-radius:50%;box-shadow:0 0 8px currentColor;}
.key .note{width:100%;text-align:center;text-transform:none;letter-spacing:.02em;
  color:var(--faded-2);font-size:.66rem;margin-top:4px;white-space:normal;display:inline;}

/* ---------- ranks reference ---------- */
.ranks-info{
  max-width:760px;margin:22px auto 0;text-align:left;
  border:1px solid var(--hair);border-radius:2px;background:var(--ink-2);
}
.ranks-info summary{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faded);padding:12px 16px;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:10px;
}
.ranks-info summary::-webkit-details-marker{display:none;}
.ranks-info summary::before{content:"›";color:var(--gold);transition:transform .18s ease;}
.ranks-info[open] summary::before{transform:rotate(90deg);}
.ranks-info summary:hover{color:var(--vellum);}
.ranks-info>div{padding:2px 18px 16px;}
.ranks-intro{color:var(--faded);font-size:.88rem;font-style:italic;margin:4px 0 14px;}
.rank-row{
  display:grid;grid-template-columns:130px 1fr;gap:2px 18px;
  padding:9px 0;border-top:1px solid var(--hair);align-items:baseline;
}
.rank-row .rank{white-space:normal;text-align:left;}
.rank-row .rank-detail{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faded);
}
.rank-row .rank-hours{grid-column:1/-1;font-size:.84rem;color:var(--faded);}
.rank-row .rank-hours .lbl{display:inline;margin-right:8px;}
@media (max-width:560px){
  .rank-row{grid-template-columns:1fr;}
}

/* ---------- history & ritual reference blocks ---------- */
.info-prose p{font-size:.88rem;color:var(--faded);margin:10px 0;}
.info-prose b{color:var(--vellum);font-weight:400;}
.ritual-figs{display:flex;gap:16px;flex-wrap:wrap;margin:4px 0 14px;}
.ritual-figs figure{margin:0;flex:1 1 180px;max-width:250px;}
.ritual-figs .frame{
  border:1px solid var(--hair);border-radius:2px;background:#e7dcc4;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px;
}
.ritual-figs img{max-width:100%;max-height:280px;object-fit:contain;display:block;}
.ritual-figs figcaption{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faded-2);margin-top:8px;text-align:center;
}
.ritual-item{padding:9px 0;border-top:1px solid var(--hair);}
.ritual-item .h{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vellum);margin:0 0 3px;
}
.ritual-item p{margin:0;font-size:.86rem;color:var(--faded);}

/* ---------- toolbar ---------- */
.toolbar{
  position:sticky;top:0;z-index:20;margin-top:26px;padding:16px 0 14px;
  background:linear-gradient(180deg,var(--ink) 72%,rgba(20,16,11,0));
  backdrop-filter:blur(2px);
}
.toolbar-inner{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;}
.search{position:relative;flex:1 1 260px;min-width:220px;}
.search input{
  width:100%;background:var(--ink-2);border:1px solid var(--hair);
  color:var(--vellum);padding:11px 14px 11px 38px;border-radius:2px;
  font-family:inherit;font-size:.98rem;letter-spacing:.01em;
}
.search input::placeholder{color:var(--faded-2);font-style:italic;}
.search input:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(217,180,91,.35);}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:var(--faded-2);}

.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{
  font-family:var(--mono);
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:1px solid var(--hair);color:var(--faded);
  padding:7px 12px;border-radius:2px;cursor:pointer;transition:all .18s ease;
  display:inline-flex;align-items:center;gap:7px;
}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--c,var(--faded));}
.chip .chip-count{opacity:.55;font-size:.62rem;letter-spacing:0;}
.chip.is-active .chip-count{opacity:.75;}
.chip:hover{color:var(--vellum);border-color:var(--faded-2);}
.chip.is-active{color:var(--ink);background:var(--c,var(--vellum));border-color:var(--c,var(--vellum));font-weight:700;}
.chip.is-active .dot{background:rgba(20,16,11,.55);}

.count{
  font-family:var(--mono);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faded-2);
  margin:2px 0 20px;text-align:right;
}

/* ---------- catalog ---------- */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;padding-bottom:20px;
}
.card{
  position:relative;background:var(--ink-2);
  border:1px solid var(--hair);border-left:3px solid var(--accent,var(--faded));
  padding:20px 20px 18px;border-radius:2px;overflow:hidden;
  animation:rise .6s ease both;cursor:pointer;
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0,var(--accent,transparent) 0,transparent 42%);
  opacity:.05;
}
.card:hover,.card:focus-visible{border-color:var(--accent,var(--faded));
  box-shadow:0 6px 26px -12px var(--accent),inset 0 0 0 1px rgba(233,220,192,.04);
  transform:translateY(-2px);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.card:focus-visible{outline:none;}
.card.hidden{display:none;}

.c-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.num{
  font-family:var(--mono);
  font-size:.82rem;letter-spacing:.1em;color:var(--faded-2);
}
.rank{
  font-family:var(--mono);
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent,var(--faded));display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;text-align:right;
}
.rank .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 7px var(--accent);}
.c-head{display:flex;gap:14px;align-items:flex-start;}
.c-head-text{flex:1;min-width:0;}
.name{
  font-family:var(--display);
  font-weight:400;font-size:1.52rem;line-height:1.1;margin:9px 0 2px;color:var(--vellum);
  letter-spacing:.01em;
}
.variants{font-size:.82rem;font-style:italic;color:var(--faded-2);margin:0 0 13px;min-height:1em;}
.sigil-thumb{
  width:64px;height:64px;flex:0 0 64px;margin-top:8px;
  border:1px solid var(--hair);border-radius:50%;padding:6px;
  background:radial-gradient(circle at 50% 40%,var(--ink-3),var(--ink-2));
}
.sigil-thumb img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:invert(.82) sepia(.5) saturate(1.4) hue-rotate(-12deg) brightness(1.05);
  opacity:.9;
}
.office{margin:0 0 12px;font-size:.98rem;color:var(--vellum);}
.appears{font-size:.86rem;color:var(--faded);margin:0;}
.appears .lbl,.lbl{
  font-family:var(--mono);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faded-2);
  display:block;margin-bottom:2px;
}
.c-foot{margin-top:14px;padding-top:11px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;align-items:center;}
.legions{
  font-family:var(--mono);
  font-size:.7rem;letter-spacing:.08em;color:var(--faded);text-transform:uppercase;
}
.legions b{color:var(--accent);font-size:.98rem;letter-spacing:0;}

.empty{
  display:none;text-align:center;padding:60px 20px;color:var(--faded-2);
  font-style:italic;font-size:1.05rem;grid-column:1/-1;
}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:50;display:none;
  align-items:flex-start;justify-content:center;overflow-y:auto;
  background:rgba(10,8,5,.82);backdrop-filter:blur(3px);
  padding:6vh 18px 8vh;
}
.modal.open{display:flex;}
.modal-box{
  position:relative;max-width:720px;width:100%;
  background:var(--ink-2);border:1px solid var(--hair);
  border-top:3px solid var(--accent,var(--faded));
  border-radius:2px;padding:34px 36px 30px;
  animation:rise .35s ease both;
}
.modal-close{
  position:absolute;top:12px;right:12px;
  background:transparent;border:1px solid var(--hair);color:var(--faded);
  width:34px;height:34px;border-radius:2px;cursor:pointer;
  font-size:1rem;line-height:1;font-family:var(--mono);
}
.modal-close:hover{color:var(--vellum);border-color:var(--faded-2);}
.m-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-right:40px;}
.m-name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.05;margin:8px 0 2px;color:var(--vellum);
}
.m-variants{font-size:.92rem;font-style:italic;color:var(--faded-2);margin:0 0 20px;}
.m-images{display:flex;gap:16px;margin:6px 0 20px;flex-wrap:wrap;}
.m-fig{margin:0;flex:1 1 180px;max-width:255px;}
.m-fig .frame{
  border:1px solid var(--hair);border-radius:2px;background:var(--ink-3);
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;overflow:hidden;padding:14px;
}
.m-fig.engraving .frame{background:#e7dcc4;padding:0;}
.m-fig .frame img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.m-fig.sigil .frame img{
  filter:invert(.82) sepia(.5) saturate(1.4) hue-rotate(-12deg) brightness(1.05);
}
.m-fig figcaption{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faded-2);margin-top:8px;text-align:center;
}
.m-section{margin:0 0 16px;}
.m-section p{margin:2px 0 0;font-size:.98rem;color:var(--vellum);}
.m-section.note p{color:var(--faded);font-size:.92rem;}
.m-section.lore{border-top:1px dashed var(--hair);padding-top:12px;}
.m-section.lore .lore-meta{font-size:.82rem;color:var(--faded-2);margin-top:8px;}
.m-section.lore .lore-meta .lbl{display:inline;margin-right:8px;}
.lore-src{
  display:inline-block;margin-top:8px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faded-2);text-decoration:none;border-bottom:1px solid var(--hair);
}
.lore-src:hover{color:var(--gold);border-bottom-color:var(--gold);}
.m-meta{
  display:flex;gap:24px;flex-wrap:wrap;margin-top:20px;padding-top:14px;
  border-top:1px solid var(--hair);
}
.m-meta .legions{font-size:.72rem;}
.m-link{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(217,180,91,.3);
  margin-left:auto;
}
.m-link:hover{border-bottom-color:var(--gold);}

/* ---------- статические страницы духов (tools/build-spirits.js) ---------- */
.spirit-page{max-width:820px;margin:40px auto 0;}
.sp-top{display:flex;justify-content:space-between;gap:16px;margin:0 0 30px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;}
.sp-top a{color:var(--faded);text-decoration:none;border-bottom:1px solid var(--hair);}
.sp-top a:hover{color:var(--gold);border-bottom-color:var(--gold);}
.spirit-page .m-images{margin:20px 0;}
.sp-chron{margin:10px 0 0;}
.sp-chron a{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(217,180,91,.3);}
.sp-chron a:hover{border-bottom-color:var(--gold);}
.sp-nav{display:flex;justify-content:space-between;gap:16px;margin-top:30px;padding-top:16px;
  border-top:1px solid var(--hair);font-size:.88rem;}
.sp-nav a{color:var(--faded);text-decoration:none;}
.sp-nav a:hover{color:var(--gold);}
.spirit-page+footer{margin-top:60px;}

/* «Хроника» в модалке — полная статья из wiki/data/ (стили тела — css/wiki.css) */
.m-chron{
  margin-top:20px;border:1px solid var(--hair);border-radius:2px;background:var(--ink-2);
}
.m-chron summary{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faded);padding:12px 16px;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:10px;
}
.m-chron summary::before{content:"›";color:var(--gold);transition:transform .18s ease;}
.m-chron[open] summary::before{transform:rotate(90deg);}
.m-chron summary:hover{color:var(--vellum);}
.m-chron .a-body{padding:0 16px 16px;}
.m-chron .a-body h2:first-child{margin-top:0;}
@media (max-width:759px){.m-chron .infobox{float:none;width:auto;margin:0 0 16px;}}

/* «подношение» в модалке духа (конфиг и послания — js/donate.js) */
.m-offer-wrap{margin-top:20px;padding-top:14px;border-top:1px dashed var(--hair);}
.m-offer-msg{
  margin:0 0 12px;font-size:.9rem;font-style:italic;color:var(--faded);
  border-left:2px solid var(--accent,var(--gold));padding-left:12px;
}
.m-offer{
  display:inline-block;padding:9px 16px;border-radius:2px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent,var(--gold));text-decoration:none;border:1px solid currentColor;
}
.m-offer:hover{background:var(--accent,var(--gold));color:var(--ink);border-color:var(--accent,var(--gold));}
.m-offer-note{margin:10px 0 0;font-size:.76rem;font-style:italic;color:var(--faded-2);}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--hair);margin-top:34px;padding:38px 0 70px;
  color:var(--faded);font-size:.9rem;
}
footer h2{
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faded-2);
  margin:0 0 14px;font-weight:400;
}
footer p{max-width:760px;margin:0 0 12px;}
footer a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(217,180,91,.3);}
footer a:hover{border-bottom-color:var(--gold);}
.foot-note{color:var(--faded-2);font-size:.82rem;font-style:italic;margin-top:18px;}

/* блок «подношение» в футере (конфиг — js/donate.js) */
.offer{
  margin:0 0 34px;padding:24px 20px 28px;text-align:center;
  border:1px solid var(--hair);border-top:3px solid var(--gold);
}
.offer h2{color:var(--gold);margin-bottom:12px;}
.offer p{max-width:560px;margin:0 auto 18px;font-size:.88rem;}
.offer-btn{
  display:inline-block;padding:10px 22px;border:1px solid var(--gold);border-radius:2px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
}
.offer-btn:hover{background:var(--gold);color:var(--ink);}
.offer-note{max-width:560px;margin:14px auto 0;font-size:.78rem;font-style:italic;color:var(--faded-2);}

@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes spin{to{transform:rotate(360deg);}}

@media (max-width:560px){
  .hero{padding:64px 0 22px;}
  /* на мобиле тулбар складывается в высокую колонку — липким быть не должен */
  .toolbar{position:static;background:none;backdrop-filter:none;}
  .toolbar-inner{flex-direction:column;align-items:stretch;}
  .count{text-align:left;}
  .grid{grid-template-columns:1fr;}
  .modal{padding:0;}
  .modal-box{min-height:100vh;padding:28px 20px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto;}
  .seal .ring-outer{animation:none!important;}
}