/* lib.css - "Occult library" theme shared by the Frater23 home and Zodiacal Releasing pages */
:root{
  --wood:#150d08;--wood2:#22150d;--leather:#2b1810;
  --vel:#efe0bd;--vel2:#e4d1a3;--vel3:#d3bb86;       /* vellum / parchment */
  --ink:#2a160c;--ink2:#5a3a22;--mute:#7a5a3a;
  --gold:#d6b05c;--gold2:#f0cd7b;--blood:#8b1e1e;--verd:#2f5d4a;--lap:#2b3f7a;
  --serif:"Cormorant Garamond","EB Garamond",Georgia,"Times New Roman",serif;
  --disp:Cinzel,"Trajan Pro",Georgia,serif;
}
*{box-sizing:border-box}
html{background:var(--wood);overflow-x:hidden}
body{margin:0;min-height:100vh;color:var(--vel);font-family:var(--serif);font-size:19px;line-height:1.55;overflow-x:clip;
  background:radial-gradient(ellipse at 50% 0%,#3a2312 0,#1b100a 45%,#0d0705 100%) fixed}
#dust{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,header.hero,.f23-foot{position:relative;z-index:2}
main{max-width:1000px;margin:0 auto;padding:0 16px 20px}
a{color:var(--gold2)}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:.04em;margin:0}

/* title page */
header.hero{text-align:center;padding:34px 16px 14px;max-width:900px;margin:0 auto}
.hero .sigil{font-size:34px;color:var(--gold);text-shadow:0 0 18px rgba(240,205,123,.55)}
.hero h1{font-size:clamp(30px,6.4vw,58px);color:var(--gold2);text-shadow:0 2px 0 #000,0 0 26px rgba(240,205,123,.35);margin:4px 0 2px}
.hero .sub{font-style:italic;font-size:clamp(17px,2.6vw,22px);color:#d9c79a;margin:0}
.rule{display:flex;align-items:center;gap:12px;margin:14px auto 0;max-width:520px;color:var(--gold)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* parchment leaf */
.leaf{position:relative;color:var(--ink);margin:22px 0;padding:22px 24px;border-radius:3px;
  background:
    radial-gradient(ellipse at 20% 10%,rgba(255,250,230,.55),transparent 55%),
    radial-gradient(ellipse at 90% 100%,rgba(120,80,30,.28),transparent 55%),
    linear-gradient(180deg,var(--vel),var(--vel2));
  box-shadow:0 0 0 1px #8a6a36,0 0 0 5px var(--vel2),0 0 0 6px #8a6a36,0 14px 30px rgba(0,0,0,.6),inset 0 0 60px rgba(120,80,30,.35)}
.leaf h2{font-size:clamp(20px,3.4vw,28px);color:var(--blood);margin-bottom:6px}
.leaf h2 .no{color:var(--gold);text-shadow:0 1px 0 #6b4a1a;margin-right:8px}
.leaf h3{font-size:16px;color:var(--ink2);margin:14px 0 4px;text-transform:uppercase;letter-spacing:.1em}
.leaf p{margin:.45em 0}
.leaf .lead{font-size:1.1em}
.leaf .lead::first-letter{font-family:var(--disp);float:left;font-size:3.1em;line-height:.85;padding:4px 8px 0 0;color:var(--blood);text-shadow:1px 1px 0 var(--gold)}
.leaf em.t{color:var(--blood);font-style:normal;font-weight:700}
.small{font-size:16px;color:var(--ink2)}
.leaf .corner{position:absolute;color:var(--gold);font-size:18px;line-height:1;text-shadow:0 1px 0 #6b4a1a}
.corner.tl{left:7px;top:5px}.corner.tr{right:7px;top:5px}.corner.bl{left:7px;bottom:5px}.corner.br{right:7px;bottom:5px}

/* form */
form.scribe{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}
.scribe label{display:flex;flex-direction:column;font-family:var(--disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);gap:4px}
.scribe input,.scribe select{font:inherit;font-family:var(--serif);font-size:18px;color:var(--ink);background:rgba(255,250,235,.7);
  border:1px solid #8a6a36;border-radius:2px;padding:8px 10px;width:100%;box-shadow:inset 0 1px 4px rgba(90,58,34,.25)}
.scribe input:focus,.scribe select:focus,button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--blood);outline-offset:2px}
.scribe .wide{grid-column:1/-1}
.choices{display:flex;flex-wrap:wrap;gap:10px 18px;font-family:var(--serif);font-size:18px;text-transform:none;letter-spacing:0;color:var(--ink)}
.choices label{flex-direction:row;align-items:center;gap:7px;font-family:var(--serif);font-size:18px;text-transform:none;letter-spacing:0;color:var(--ink)}
.choices input{width:auto;box-shadow:none}
button.seal,.btn{cursor:pointer;font-family:var(--disp);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:#fbe9c2;
  background:linear-gradient(180deg,#a02a2a,#6d1414);border:1px solid #3d0a0a;border-radius:3px;padding:12px 20px;
  box-shadow:0 3px 0 #3d0a0a,0 6px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25)}
button.seal:hover{filter:brightness(1.12)}button.seal:active{transform:translateY(2px);box-shadow:0 1px 0 #3d0a0a}
button.quill{cursor:pointer;font:inherit;font-family:var(--serif);font-size:16px;background:transparent;color:var(--blood);border:1px solid #8a6a36;border-radius:2px;padding:6px 10px}
button.quill:hover{background:rgba(139,30,30,.1)}
.err{color:var(--blood);font-weight:700;min-height:1.2em;grid-column:1/-1;margin:0}
.hint{font-size:15px;color:var(--mute);margin:0}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:17px}
.tbl th{font-family:var(--disp);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:left;color:var(--ink2);border-bottom:2px solid #8a6a36;padding:6px 8px}
.tbl td{padding:7px 8px;border-bottom:1px solid rgba(138,106,54,.4);vertical-align:middle}
.tbl tr.row{cursor:pointer}.tbl tr.row:hover td{background:rgba(214,176,92,.22)}
.tbl tr.now td{background:rgba(139,30,30,.13);font-weight:700}
.tbl tr.sub td{background:rgba(255,250,235,.45);padding:0}
.tbl .sym{font-size:1.2em;color:var(--blood);font-family:"Segoe UI Symbol","Noto Sans Symbols",var(--serif)}
.tbl .arrow{display:inline-block;width:1em;color:var(--gold);transition:transform .15s}
.tbl tr.open .arrow{transform:rotate(90deg)}
.tag{display:inline-block;font-family:var(--disp);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid;border-radius:2px;padding:1px 6px;margin-left:6px;white-space:nowrap}
.tag.peak{color:#7a5400;background:rgba(240,205,123,.55);border-color:#a47a1e}
.tag.lob{color:#fff;background:var(--lap);border-color:#14214d}
.tag.cut{color:var(--mute);border-color:var(--mute)}
.nest{margin:0 0 0 14px;padding:8px 0 8px 10px;border-left:3px double #b08a40}
.nest .tbl{font-size:16px}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* explanation steps */
details.step{border-top:1px solid rgba(138,106,54,.5);padding:8px 0}
details.step summary{cursor:pointer;font-family:var(--disp);font-size:15px;letter-spacing:.06em;color:var(--blood);list-style:none;padding:4px 0}
details.step summary::-webkit-details-marker{display:none}
details.step summary::before{content:"\2766";color:var(--gold);margin-right:9px;display:inline-block;transition:transform .15s}
details.step[open] summary::before{transform:rotate(90deg)}
.calc{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;background:rgba(90,58,34,.1);border-left:3px solid var(--gold);padding:8px 12px;margin:8px 0;overflow-x:auto;white-space:pre-wrap}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:10px 0}
.chip{border:1px solid #8a6a36;border-radius:3px;padding:10px 12px;background:rgba(255,250,235,.5)}
.chip b{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.chip .big{font-size:26px;color:var(--blood);font-family:var(--disp)}
.chip .big span{font-family:"Segoe UI Symbol","Noto Sans Symbols",var(--serif);color:var(--gold);text-shadow:0 1px 0 #6b4a1a}
.chain{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.chain li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;border:1px solid #8a6a36;border-radius:3px;padding:9px 12px;background:rgba(255,250,235,.55)}
.chain .lv{font-family:var(--disp);font-size:12px;letter-spacing:.1em;color:#fbe9c2;background:var(--blood);border-radius:2px;padding:4px 7px;grid-row:span 2;align-self:center;text-align:center;min-width:44px}
.chain .nm{font-family:var(--disp);font-size:18px;color:var(--ink)}
.chain .nm .sym{color:var(--blood);margin-right:4px}
.chain .dt{font-size:16px;color:var(--ink2)}
.where{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:6px 0 10px}
.ringwrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center}
.ringwrap svg{width:min(300px,86vw);height:auto}
.legend{font-size:15px;color:var(--ink2);flex:1 1 240px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px;border:1px solid #3a2a10}

/* tomes (home) */
.tomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:22px 0}
a.tome{display:block;text-decoration:none;color:#f1e2bd;padding:20px 20px 18px;border-radius:3px;position:relative;
  background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 40%),linear-gradient(180deg,var(--leather),#170c07);
  border:1px solid #6b4a1a;box-shadow:inset 0 0 0 4px var(--leather),inset 0 0 0 5px rgba(214,176,92,.55),0 10px 22px rgba(0,0,0,.55);transition:transform .15s,box-shadow .15s}
a.tome:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 4px var(--leather),inset 0 0 0 5px var(--gold2),0 16px 28px rgba(0,0,0,.6),0 0 22px rgba(240,205,123,.25)}
a.tome .g{font-size:34px;color:var(--gold);text-shadow:0 0 12px rgba(240,205,123,.5)}
a.tome h3{font-size:19px;color:var(--gold2);margin:6px 0 4px}
a.tome p{margin:0;font-size:17px;color:#d9c79a}
a.tome .new{position:absolute;right:10px;top:10px;font-family:var(--disp);font-size:10px;letter-spacing:.14em;color:#2a160c;background:var(--gold2);padding:2px 7px;border-radius:2px}
a.tome.feature{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:6px 20px;align-items:center}
a.tome.feature .g{font-size:54px;grid-row:span 2}
@media(max-width:560px){body{font-size:18px}.leaf{padding:18px 16px;margin:18px 0}.tbl{font-size:15.5px}.tbl td,.tbl th{padding:6px 5px}
  a.tome.feature{grid-template-columns:1fr}.hide-sm{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{#dust,.f23-nav,.f23-foot,form,button{display:none!important}body{background:#fff;color:#000}.leaf{box-shadow:none;border:1px solid #888}}
.trl{color:var(--blood);text-decoration:none;font-family:"Segoe UI Symbol","Noto Sans Symbols",var(--serif);border-bottom:1px dotted var(--blood);padding:0 2px;margin-left:2px;white-space:nowrap}
.trl:hover{background:rgba(139,30,30,.12)}