:root{--ink:#F3EFE5;--black:#090909;--gold:#C7A84A;--graphite:#2b2b2b;--graphite2:#3a3a3a;--violet:#8b7cf6;--dim:#a39f95;--red:#b5483a}
*{box-sizing:border-box}html,body{margin:0;background:var(--black);color:var(--ink)}
body{font:19px/1.55 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#spine{position:fixed;top:0;left:0;height:3px;background:var(--gold);width:0;transition:width .3s;z-index:5}
#top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);z-index:4;background:linear-gradient(var(--black) 70%,transparent)}
#top button{font:inherit;color:var(--gold);background:none;border:1px solid var(--graphite2);border-radius:999px;padding:7px 12px;cursor:pointer;letter-spacing:.12em}
#top button:hover{border-color:var(--gold)}
main{max-width:42rem;margin:0 auto;padding:84px 16px 140px;min-height:100vh}
.page{display:none;animation:in .35s ease}.page.on{display:block}@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kicker{font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
h1,h2,h3{font-weight:400;line-height:1.15;margin:0 0 .5em}h1{font-size:2.6rem;letter-spacing:.01em}h2{font-size:2rem}h3{font-size:1.5rem}
.page.part{min-height:60vh;display:none;align-items:center;justify-content:center;text-align:center}.page.part.on{display:flex}
.page.part h1{font-size:3rem;color:var(--gold)}.page.part h1::before{content:"✦";display:block;font-size:1rem;letter-spacing:1em;margin-bottom:20px;color:var(--dim)}
.page.title{text-align:center;padding-top:8vh}.page.title h1{font-size:3.4rem;color:var(--gold);margin:22px 0 8px}.page.title .sub{font-style:italic;color:var(--dim);max-width:30rem;margin:0 auto 26px}
.page.title .meta{font:12px/1.8 "SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.page.title .epi{margin:44px auto 0;max-width:28rem;font-style:italic}.page.title .epi small{display:block;font-style:normal;color:var(--dim);margin-top:6px;font-size:.8rem}
.page.title .ded{margin:36px auto 0;max-width:30rem;font-size:.95rem;color:var(--dim)}
.initial::first-letter{float:left;font-size:4.4rem;line-height:.82;padding:6px 10px 0 0;color:var(--gold);font-family:"Iowan Old Style",Palatino,Georgia,serif}
p{margin:0 0 1em}blockquote{margin:1.4em 0;padding-left:16px;border-left:2px solid var(--gold);font-style:italic;color:var(--ink)}
.poem{margin:1.4em 0 1.6em;padding-left:2px}.poem .stanza{margin:0 0 1.1em;white-space:normal}
.note{font-size:.92rem;color:var(--dim);border-top:1px solid var(--graphite);border-bottom:1px solid var(--graphite);padding:10px 0;margin:1.4em 0}
.axiom{padding:12px 14px;background:#111;border:1px solid var(--graphite);border-radius:6px;margin:0 0 12px}.axiom::before{content:"⟡ ";color:var(--gold)}
.invocation{font-style:italic;color:var(--dim)}.epigraph{font-style:italic;text-align:center;margin:2em 0}
hr.scene{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:1.8em 0}
.lab .l{font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-right:10px}
.lab.nowyou{border:1px solid var(--gold);border-radius:8px;padding:14px 16px;margin:1.4em 0}.lab.nowyou .l{color:var(--gold)}
.lab.patterns{font-size:.85rem;color:var(--dim)}.lab.sphinx .l{color:var(--violet)}.lab.sphinx{font-style:italic}
.tbl{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.92rem}.tbl th,.tbl td{border-bottom:1px solid var(--graphite);padding:8px 8px;text-align:left;vertical-align:top}.tbl th{color:var(--gold);font-weight:400;font:12px/1.4 "SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.tally td.c{text-align:center;color:var(--gold);font-size:1.1rem}.tally td.second{font-size:.85rem;font-style:italic;color:var(--ink)}
.dialogue .line{margin:0 0 .5em}.dialogue b{font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.14em;color:var(--gold);margin-right:8px;font-weight:400}
.plate{border:1px dashed var(--graphite2);border-radius:8px;padding:14px 16px;margin:1.4em 0;display:grid;gap:4px}.plate-kind{font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.18em;color:var(--gold)}.plate-text{font-style:italic}.plate-note{font-size:.75rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.gloss{margin:0 0 .7em}.gloss b{color:var(--gold);font-weight:400}.bib{font-size:.9rem;color:var(--dim)}.idx{display:inline-block;margin:0 10px 8px 0;padding:4px 10px;border:1px solid var(--graphite);border-radius:999px;font-size:.85rem}
.fn a{color:var(--gold);text-decoration:none}.fnote{font-size:.95rem;color:var(--dim)}.fnote sup{color:var(--gold);margin-right:6px}
/* THE GATE */
.gate{margin:2em 0 0;border:1px solid var(--gold);border-radius:12px;padding:20px 18px;position:relative;background:#0d0c0a}
.gate .seal{position:absolute;top:-14px;left:18px;background:var(--black);padding:0 10px;font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.gate form{display:flex;gap:10px;margin:8px 0 12px}
.gate input{flex:1;min-width:0;font:inherit;font-size:1.05rem;color:var(--ink);background:#111;border:1px solid var(--graphite2);border-radius:8px;padding:10px 12px;outline:none}.gate input:focus{border-color:var(--gold)}
.gate button{font:inherit;font-size:.95rem;color:var(--black);background:var(--gold);border:0;border-radius:8px;padding:10px 16px;cursor:pointer}
.gate .doors{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.9rem}.gate .doors a{color:var(--dim);text-decoration:none;border-bottom:1px dotted var(--graphite2);cursor:pointer}.gate .doors a:hover{color:var(--ink)}.gate .doors a.used{color:var(--graphite2);border-bottom:0;cursor:default}
.gate .sph{display:none;margin:12px 0 4px;font-style:italic;color:var(--violet)}.gate .sph .l{font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin-right:10px;font-style:normal}.gate.sphinxed .sph{display:block}
.gate .say{min-height:1.4em;margin:6px 0 0;color:var(--dim);font-size:.95rem}
.gate.shake{animation:shake .35s}@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.gate.open{border-color:var(--gold);background:#12100b}.gate.open form,.gate.open .doors{display:none}.gate.open .say{color:var(--ink);font-size:1.05rem}
.gate .opened{display:none;color:var(--gold);font:12px/1.6 "SF Mono",Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}.gate.open .opened{display:block}
.sealed{border:1px solid var(--graphite);border-radius:8px;padding:12px 14px;margin:0 0 12px;color:var(--dim);font-size:.95rem}.sealed.unsealed{border-color:var(--gold);color:var(--ink)}.sealed b{color:var(--gold);font-weight:400}
/* nav */
#nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px 22px;background:linear-gradient(transparent,var(--black) 35%);z-index:4}
#nav button{font:inherit;font-size:1.3rem;color:var(--gold);background:#111;border:1px solid var(--graphite2);border-radius:999px;width:52px;height:52px;cursor:pointer;line-height:1}
#nav button:disabled{color:var(--graphite2);cursor:not-allowed}#nav button.locked{color:var(--gold);border-color:var(--gold);opacity:.55}
#where{font:12px/1.5 "SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* contents */
#toc{position:fixed;inset:0;background:rgba(9,9,9,.96);z-index:9;display:none;overflow:auto;padding:70px 16px 40px}#toc.on{display:block}
#toc .in{max-width:42rem;margin:0 auto}#toc h2{color:var(--gold);font-size:1.2rem;margin:0 0 18px;letter-spacing:.04em}
#toc .part{font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:22px 0 10px}
#toc .chap{margin:10px 0 4px;color:var(--gold)}#toc a{display:block;color:var(--ink);text-decoration:none;padding:6px 0 6px 18px;border-left:1px solid var(--graphite)}#toc a:hover{color:var(--gold)}
#toc a.locked{color:var(--graphite2);cursor:not-allowed}#toc a.locked::after{content:" ✦ sealed";font-size:.75rem;color:var(--gold);letter-spacing:.1em}#toc a.here{border-left-color:var(--gold)}
#toc .x{position:fixed;top:14px;right:16px;font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.12em;color:var(--gold);background:none;border:1px solid var(--graphite2);border-radius:999px;padding:8px 12px;cursor:pointer}
.colophon{font-size:.92rem;color:var(--dim)}.colophon b{color:var(--gold);font-weight:400}
@media (max-width:480px){body{font-size:17px}h1{font-size:2.1rem}.page.title h1{font-size:2.6rem}.page.part h1{font-size:2.3rem}.gate form{flex-direction:column}}

/* THE PEN */
.pen{margin:.4em 0 1.6em;border:1px solid var(--graphite);border-radius:10px;padding:12px 14px;background:#0c0c0b}
.pen-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.pen-l .kept{color:var(--dim);letter-spacing:.08em;text-transform:none;font-size:11px}
.pen textarea{width:100%;display:block;font:inherit;font-size:1.02rem;line-height:1.55;color:var(--ink);background:transparent;border:0;outline:none;resize:none;padding:2px 0;min-height:2.6em;overflow:hidden;caret-color:var(--gold)}
.pen textarea::placeholder{color:#5a574f;font-style:italic}
.pen:focus-within{border-color:var(--gold)}
.tally td.tick{cursor:pointer;min-width:2.4em}.tally td.tick:hover{background:#151410}.tally td.tick.on{color:var(--gold)}
/* marks — THE SPINE's four inks */
mark.wm{background:transparent;color:inherit;border-bottom:2px solid;padding-bottom:1px;cursor:pointer;border-radius:2px}
mark.wm.gold{border-color:var(--gold);background:rgba(199,168,74,.14)}mark.wm.ruby{border-color:#c2413f;background:rgba(194,65,63,.16)}mark.wm.lapis{border-color:#3f6fc2;background:rgba(63,111,194,.18)}mark.wm.verdigris{border-color:#3f9c86;background:rgba(63,156,134,.16)}
mark.wm.noted::after{content:" ✎";font-size:.7em;color:var(--gold);vertical-align:super}
#pop{position:fixed;z-index:20;display:none;background:#121110;border:1px solid var(--gold);border-radius:10px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.6);max-width:min(92vw,26rem)}
#pop.on{display:block}#pop .dots{display:flex;gap:10px;align-items:center}
#pop .dot{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer}#pop .dot.gold{background:var(--gold)}#pop .dot.ruby{background:#c2413f}#pop .dot.lapis{background:#3f6fc2}#pop .dot.verdigris{background:#3f9c86}#pop .dot:hover{border-color:var(--ink)}
#pop .act{font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:none;border:1px solid var(--graphite2);border-radius:999px;padding:7px 10px;cursor:pointer}#pop .act.lift{color:var(--dim)}
#pop .msg{font-size:.85rem;color:var(--dim);font-style:italic}
#pop textarea{width:100%;margin-top:8px;font:inherit;font-size:.95rem;color:var(--ink);background:#0c0c0b;border:1px solid var(--graphite2);border-radius:6px;padding:8px;resize:none;min-height:3em;outline:none}#pop textarea:focus{border-color:var(--gold)}
/* WHAT YOU MADE */
.shelf .empty{color:var(--dim);font-style:italic}
.shelf .made{border-left:2px solid var(--gold);padding:2px 0 2px 16px;margin:0 0 1.6em}.shelf .made .k{font:12px/1.6 "SF Mono",Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.shelf .made .k a{color:var(--gold);text-decoration:none}
.shelf .made h4{margin:2px 0 6px;font-weight:400;font-size:1.15rem}.shelf .made .t{white-space:pre-wrap;margin:0}
.shelf .mk{margin:0 0 .8em;padding-left:16px;border-left:2px solid}.shelf .mk.gold{border-color:var(--gold)}.shelf .mk.ruby{border-color:#c2413f}.shelf .mk.lapis{border-color:#3f6fc2}.shelf .mk.verdigris{border-color:#3f9c86}.shelf .mk .q{font-style:italic}.shelf .mk .n{color:var(--ink);margin:4px 0 0}.shelf .mk .k{font:11px/1.6 "SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}.shelf .mk .k a{color:var(--gold);text-decoration:none}
.shelf .tools{display:flex;flex-wrap:wrap;gap:8px;margin:1em 0 1.6em}.shelf .tools button,.shelf .tools label{font:12px/1 "SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:none;border:1px solid var(--graphite2);border-radius:999px;padding:9px 12px;cursor:pointer}.shelf .tools button:hover,.shelf .tools label:hover{border-color:var(--gold)}.shelf .tools input{display:none}
.shelf .sum{font-size:.92rem;color:var(--dim)}
@media print{body{background:#fff;color:#000;font-size:12pt}#top,#nav,#toc,#spine,#pop,.shelf .tools{display:none!important}.page{display:none}.page.on{display:block}main{padding:0;max-width:none}.shelf .made,.shelf .mk{border-color:#000}.shelf .made .k a,.shelf .mk .k a{color:#000}}

/* THE RELEASE */
#top span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:12px}
.journey{margin-top:12px;border-top:1px dashed var(--graphite2);padding-top:10px;font-size:.93rem}
.jl{font:11px/1 "SF Mono",Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.journey p{margin:0 0 .5em}.journey .ph{color:var(--dim)}.journey .sp{color:var(--violet)}.journey .rule{padding:10px 12px;border:1px solid var(--gold);border-radius:8px;margin-top:8px}
.journey .rule button{font:inherit;font-size:.88rem;color:var(--black);background:var(--gold);border:0;border-radius:999px;padding:6px 12px;cursor:pointer;margin:4px 6px 0 0}.journey .rule button[data-rule="fell"]{background:transparent;color:var(--ink);border:1px solid var(--graphite2)}
.sealed .seal-mark{display:block}
.reckon{margin:1.2em 0}.reckon .sum{font-size:.92rem;color:var(--dim)}
.reckon .over{border:1px solid var(--gold);border-radius:10px;padding:14px 16px;background:#12100b}.reckon .over p{margin:0 0 .6em}.reckon .q{font-style:italic;color:var(--dim)}.reckon a{color:var(--gold);text-decoration:none;border-bottom:1px dotted var(--gold)}

/* the press's three hands, byte for byte */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(/books/war-of-wonder/fonts/cormorant-garamond-600-italic.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/books/war-of-wonder/fonts/cormorant-garamond-600.woff2) format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/books/war-of-wonder/fonts/eb-garamond-400-italic.woff2) format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/books/war-of-wonder/fonts/eb-garamond-400.woff2) format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/books/war-of-wonder/fonts/eb-garamond-600.woff2) format('woff2');}
@font-face{font-family:'UnifrakturCook';font-style:normal;font-weight:700;font-display:swap;src:url(/books/war-of-wonder/fonts/unifrakturcook-700.woff2) format('woff2');}

/* ═════════ THE HOUSE (v4) — the God Book's own hands, inked for black and gold ═════════ */
:root{--paper:#090909;--accent:#b5483a;--accent2:#C7A84A;--muted:#a39f95;--hairline:1px;--rule:1px;--strong-rule:1.5px;
 --serif:"EB Garamond","Iowan Old Style",Palatino,Georgia,serif;--display:"Cormorant Garamond","EB Garamond",Garamond,serif;
 --blackletter:"UnifrakturCook","Old English Text MT",serif;--herald-size:15px}
body{font-family:var(--serif);font-size:20.5px;line-height:1.6;font-kerning:normal;font-variant-numeric:oldstyle-nums;text-rendering:optimizeLegibility}
main{max-width:43rem}
/* the herald: every label the edition once set in a mono, now in the house's small capitals */
#top,#top button,.kicker,.lab .l,.tbl th,.dialogue b,.gate .seal,.gate .opened,.gate .sph .l,#where,#toc .part,#toc .x,.jl,.pen-l,#pop .act,
.shelf .made .k,.shelf .mk .k,.shelf .tools button,.shelf .tools label{font-family:var(--serif)!important;font-variant-caps:all-small-caps;text-transform:none!important;letter-spacing:.16em;font-size:var(--herald-size);font-weight:500;line-height:1.3}
#top span{font-size:14px;letter-spacing:.18em}#top button{white-space:nowrap;flex:none}
.pen-l .kept{font-variant-caps:normal;letter-spacing:.04em;font-size:13px;font-style:italic}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:.012em}
h3{font-family:var(--serif);font-size:1.6rem;font-weight:600;line-height:1.15;margin:.2em 0 .55em}
input,textarea,button{font-family:var(--serif)}
/* the body: justified, hyphenated, set like the press */
main .page > p,.chap-body > p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.opening{font-variant-caps:small-caps;letter-spacing:.04em}

/* ── the running head and the arch rule (the press's page furniture) ── */
.run-head{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted);font-variant-caps:all-small-caps;letter-spacing:.16em;font-size:15px;margin:-4px 0 0}
.run-head::before{content:attr(data-l)}.run-head::after{content:attr(data-r)}
.arch-rule{height:13px;margin:5px 0 30px;opacity:.85}.arch-rule svg{width:100%;height:100%;display:block}
.arch-rule path{stroke:var(--accent2);stroke-width:.8;fill:none;vector-effect:non-scaling-stroke}

/* ── the cover (the press's cathedral cover, in black and gold) ── */
.page.title{padding-top:0;text-align:center}
.cover{position:relative;margin:0 auto 34px;max-width:35rem;min-height:min(78vh,760px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:62px 40px 54px}
.cover-frame{position:absolute;inset:0;pointer-events:none}
.cover-frame .fr-outer{position:absolute;inset:0;border:2px solid var(--accent2)}
.cover-frame .fr-inner{position:absolute;inset:7px;border:1px solid rgba(199,168,74,.5)}
.cover-corner{position:absolute;width:32px;height:32px;color:var(--accent2)}.cover-corner svg{width:100%;height:100%;display:block}
.cover-corner.tl{top:-7px;left:-7px}.cover-corner.tr{top:-7px;right:-7px;transform:rotate(90deg)}.cover-corner.br{bottom:-7px;right:-7px;transform:rotate(180deg)}.cover-corner.bl{bottom:-7px;left:-7px;transform:rotate(270deg)}
.cover-kicker{font-variant-caps:all-small-caps;letter-spacing:.3em;font-size:15px;line-height:1.7;color:var(--accent2);max-width:28rem;margin:0 0 4px}
.cover-rose{width:158px;height:158px;margin:26px 0 30px}.cover-rose svg{width:100%;height:100%;display:block}
.page.title h1.cover-title{font-family:var(--display);font-weight:600;font-size:3.7rem;line-height:.98;letter-spacing:.02em;color:var(--ink);margin:0}
.cover-title .bl{font-family:var(--blackletter);font-weight:400;font-size:1.1em;color:var(--accent2);letter-spacing:0}
.cover .spark-divider{width:46%;margin:26px auto 22px}
.page.title .cover .sub{font-family:var(--display);font-size:1.32rem;line-height:1.3;color:var(--ink);opacity:.86;margin:0 auto;max-width:26rem}
.cover-author{margin-top:30px;font-variant-caps:small-caps;letter-spacing:.22em;font-size:17px;color:var(--ink)}
.page.title .meta{font-family:var(--serif);font-variant-caps:all-small-caps;text-transform:none;letter-spacing:.2em;font-size:14px}
.page.title .epi{font-family:var(--display);font-size:1.45rem;line-height:1.35;max-width:27rem}
.page.title .epi small{font-family:var(--serif);font-style:normal;font-variant-caps:small-caps;letter-spacing:.08em;font-size:15px}
.page.title .ded{font-style:italic;font-size:1rem}

/* ── the part pages ── */
.page.part h1{font-size:3.2rem;color:var(--ink)}.page.part h1::before{content:none}
.part-kicker{font-variant-caps:all-small-caps;letter-spacing:.22em;font-size:16px;color:var(--accent2);margin:0 0 14px}
.page.part .spark-divider{width:min(58%,22rem);margin:28px auto 0}
.page.part .pin{display:flex;flex-direction:column;align-items:center}

/* ── the chapter openings ── */
.chapter-block{text-align:center;margin:4vh 0 36px}
.chapter-kicker{font-variant-caps:all-small-caps;letter-spacing:.2em;font-size:16px;color:var(--accent2);margin:0 0 18px}
h2.chapter-title{font-size:2.65rem;line-height:1.06;margin:0;color:var(--ink)}
.chapter-block .spark-divider{width:min(66%,26rem);margin:26px auto 0}
.chapter-title .title-initial .initial{float:none;display:inline-flex;margin:0 .12em 0 0;vertical-align:-.13em;font-size:1.3em;height:1.1em;min-width:.9em;line-height:1}

/* ── the creature initials (geometry from the press; size for the screen) ── */
.initial{float:left;display:inline-flex;position:relative;align-items:center;justify-content:center;height:78px;min-width:60px;margin:6px 16px 0 2px;font-family:var(--blackletter);font-size:76px;line-height:.72;isolation:isolate;color:var(--accent2)}
.initial.dragon,.initial.sigildrake{padding:0 6px;margin-right:26px}
.beast-back,.beast-front{position:absolute;pointer-events:none;display:block}
.beast-back{z-index:-1;inset:-32% -46%}.beast-front{z-index:2;inset:-32% -46%}
.beast-back svg,.beast-front svg{width:100%;height:100%;display:block;overflow:visible}
.chapter-title .initial{color:var(--ink)}
.chap-body > p:first-child{min-height:3.4em}

/* ── the blocks, as the press sets them ── */
.spark-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:1.6em 0}
.spark-divider::before,.spark-divider::after{content:"";flex:1;border-top:1px solid rgba(243,239,229,.32)}
.spark-divider .burst{width:24px;height:24px;position:relative}
.spark-divider .burst:before,.spark-divider .burst:after{content:"";position:absolute;left:50%;top:50%;width:24px;border-top:1px solid var(--accent2);transform-origin:center}
.spark-divider .burst:before{transform:translate(-50%,-50%) rotate(45deg)}.spark-divider .burst:after{transform:translate(-50%,-50%) rotate(-45deg)}
blockquote{margin:2em auto;padding:.75em 0;max-width:86%;text-align:center;font-family:var(--display);font-style:normal;font-size:1.62rem;line-height:1.2;letter-spacing:.02em;border:0;position:relative;color:var(--ink)}
blockquote::before,blockquote::after{content:"";position:absolute;left:18%;right:18%;border-top:1px solid var(--accent2)}
blockquote::before{top:0}blockquote::after{bottom:0}
.callout,.callout.note,.callout.axiom{border:0;border-left:1px solid rgba(243,239,229,.55);border-radius:0;background:none;padding:.15em 0 .15em 1.05em;margin:1.5em 0;font-size:inherit;color:inherit}
.callout.axiom::before{content:none}
.callout .label{font-variant-caps:all-small-caps;font-weight:700;letter-spacing:.14em;font-size:15px;color:var(--muted);margin:0 0 4px}
.callout p{margin:0;font-size:.94em;line-height:1.5;color:var(--ink);text-align:left}
.callout.note p{color:#cfcabd}
.callout.axiom{border-left-color:var(--accent2);background:linear-gradient(90deg,rgba(199,168,74,.06),transparent 60%)}.callout.axiom .label{color:var(--accent2)}
.invocation{margin:2.2em auto;text-align:center;max-width:84%;font-style:normal;color:var(--ink)}
.invocation .sigil{font-size:13px;margin:6px 0;color:var(--accent2)}
.invocation .label{font-variant-caps:all-small-caps;letter-spacing:.2em;font-size:15px;color:var(--muted)}
.invocation .statement{font-family:var(--display);font-weight:600;font-size:1.45rem;line-height:1.24;letter-spacing:.02em;margin:12px 0}
.epigraph{max-width:80%;margin:2.2em auto;text-align:center}
.epigraph blockquote{font-style:italic;font-size:1.5rem;margin:0;padding:0;max-width:none}.epigraph blockquote::before,.epigraph blockquote::after{content:none}
.epigraph .source{margin:10px 0 0;font-variant-caps:small-caps;letter-spacing:.06em;font-size:16px;color:var(--muted)}
.scene-break{text-align:center;margin:1.9em 0;color:var(--accent2)}.scene-break svg{height:12px;width:auto;display:block;margin:0 auto}
.poem{max-width:36rem;margin:1.6em auto 1.8em;text-align:center}.poem .stanza{margin:0 0 1.15em}
.lab .l{color:var(--accent2);margin-right:8px}
.lab.nowyou{border:1px solid rgba(199,168,74,.6);border-radius:2px;padding:16px 18px;position:relative;margin:1.7em 0}
.lab.nowyou::before{content:"";position:absolute;inset:4px;border:1px solid rgba(199,168,74,.22);pointer-events:none}
.lab.sphinx .l{color:var(--violet)}
.lab.patterns{font-size:.86rem;font-variant-numeric:lining-nums}
.tbl th{color:var(--accent2);border-bottom:1.5px solid rgba(243,239,229,.55)}
.tbl td{border-bottom:1px solid #3a372f}
.tbl.tally{border:1.5px solid rgba(243,239,229,.55)}.tbl.tally th,.tbl.tally td{border:1px solid #3a372f;text-align:center}.tbl.tally th:first-child,.tbl.tally td:first-child{text-align:left}
.dialogue b{color:var(--accent2)}
.gloss b{font-family:var(--display);font-weight:600;font-size:1.08em}
.idx{font-variant-caps:small-caps;letter-spacing:.04em}
#toc h2{font-family:var(--display);font-size:1.7rem}#toc .chap{font-family:var(--display);font-weight:600;font-size:1.18rem}

/* ── the plates (bred by the press; framed as the press frames them) ── */
.plate{border:1px solid rgba(199,168,74,.55);border-radius:0;padding:24px 20px 18px;margin:1.9em 0 2em;position:relative;text-align:center;display:block;background:radial-gradient(ellipse at 50% 0%,rgba(199,168,74,.05),transparent 70%)}
.plate::before{content:"";position:absolute;inset:5px;border:1px solid rgba(199,168,74,.2);pointer-events:none}
.plate .kicker{margin:0 0 2px;color:var(--accent);font-weight:700;letter-spacing:.24em}
.plate .ptitle{font-family:var(--display);font-size:1.45rem;font-weight:600;letter-spacing:.02em;margin:0 0 14px}
.plate .pcap{font-size:.86rem;line-height:1.42;margin-top:14px;color:var(--muted);max-width:32rem;margin-left:auto;margin-right:auto}
.plate svg{display:block;margin:0 auto;max-width:100%;height:auto}
.plate .say{min-height:1.3em;margin:10px 0 0;font-size:.92rem;font-style:italic;color:var(--accent2)}
.plate .tools{margin-top:8px}.plate .tools button{font-size:13px;font-variant-caps:all-small-caps;letter-spacing:.16em;color:var(--muted);background:none;border:1px solid #3a372f;border-radius:999px;padding:6px 12px;cursor:pointer}.plate .tools button:hover{color:var(--accent2);border-color:var(--accent2)}
.lg-grid{display:grid;gap:0;margin:0 auto;border:1.5px solid rgba(243,239,229,.7);width:max-content;--cell:30px}
.lg-grid span{display:flex;align-items:center;justify-content:center;width:var(--cell);height:var(--cell);border:1px solid #3b372f;font-family:var(--display);font-size:calc(var(--cell)*.6);font-weight:600;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s,color .15s}
.lg-grid span:hover{background:rgba(199,168,74,.1)}
.lg-grid span.found{color:var(--accent2);background:rgba(199,168,74,.15)}
.lg-grid span.sel{background:var(--accent2);color:#090909}
.lg-grid span:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px}
.lg-words{margin-top:14px;font-variant-caps:all-small-caps;letter-spacing:.12em;font-size:16px;line-height:1.9}
.lg-words span{transition:color .2s}.lg-words span.found{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--accent2)}
.cipher-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin:6px 0}
.cipher-word{display:flex;gap:3px;padding:2px 3px;border-radius:3px;transition:background .3s}
.cipher-word.open{background:rgba(199,168,74,.12)}
.cipher-cell{display:flex;flex-direction:column;align-items:center;width:26px}
.cipher-cell .c{font-family:var(--display);font-size:18px;font-weight:600;height:24px;line-height:24px;color:var(--muted)}
.cipher-cell .w{width:24px;height:28px;border-bottom:1.5px solid rgba(243,239,229,.7)}
.cipher-cell input.w{display:block;padding:0;border:0;border-bottom:1.5px solid rgba(243,239,229,.7);background:transparent;color:var(--accent2);font-family:var(--display);font-size:19px;font-weight:600;text-align:center;text-transform:uppercase;outline:none;caret-color:var(--accent2);border-radius:0}
.cipher-cell input.w:focus{border-bottom-color:var(--accent2);background:rgba(199,168,74,.08)}
.cipher-word.open .c{color:var(--ink)}
.plate.solved{border-color:var(--accent2)}
.cipher-key{font-size:.86rem;color:var(--muted);margin-top:12px;letter-spacing:.02em}
.rungs{display:grid;gap:8px;max-width:20rem;margin:14px auto 0}
.rungs label{display:flex;align-items:baseline;gap:10px;font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:15px;color:var(--muted)}
.rungs input{flex:1;min-width:0;font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--ink);background:transparent;border:0;border-bottom:1px dashed rgba(243,239,229,.45);padding:2px 4px;outline:none;text-align:center}
.rungs input:focus{border-bottom:1px solid var(--accent2)}
.plate[data-plate="ring"] svg{width:min(320px,100%)}.plate[data-plate="ladder"] svg{width:min(300px,100%)}
.maze-wrap{position:relative;display:inline-block;max-width:100%;margin:0 auto}
.maze-wrap svg{display:block}
.maze-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
@media (max-width:480px){body{font-size:18.5px}h2.chapter-title{font-size:2.05rem}.page.title h1.cover-title{font-size:2.75rem}.cover{padding:46px 22px 40px}.cover-rose{width:124px;height:124px}
 .initial{font-size:62px;height:64px;min-width:50px;margin-right:14px}blockquote{font-size:1.36rem;max-width:94%}.invocation .statement{font-size:1.25rem}
 .tbl{font-size:.8rem}.tbl th{letter-spacing:.04em;font-size:12.5px;white-space:normal;word-break:normal;hyphens:auto}.tbl th,.tbl td{padding:6px 4px}.tally td.c{min-width:0}
 .cipher-cell{width:21px}.cipher-cell .w,.cipher-cell input.w{width:19px}.cipher-row{gap:10px 10px}.plate{padding:22px 12px 16px}}
@media (prefers-reduced-motion:reduce){.lg-grid span,.cipher-word,.lg-words span{transition:none}}
.lg-n10{grid-template-columns:repeat(10,var(--cell));--cell:min(30px,calc((100vw - 80px)/10))}
/* ═════════ THE LIVING (v5) — the book's own lines, made to move. Placeholder name; the name is Spark's. ═════════
   Every effect acts out a line the book already says (House Law 1: mythology maps to function). Drama is rationed: one moment
   a page, never a constant shimmer. body.still (the reader's switch, or prefers-reduced-motion) stops every animation and shows
   each scene at rest, finished. */
.living{position:relative}
body.still .living *,body.still .living{animation:none!important;transition:none!important}
.page .poem{position:relative}
.living-layer{position:absolute;inset:0;pointer-events:none;z-index:1}
.living-btn{white-space:nowrap;font-family:var(--serif);font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:15px;color:var(--accent2);background:none;border:1px solid #3a372f;border-radius:999px;padding:6px 13px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.living-btn:hover,.living-btn:focus-visible{border-color:var(--accent2);outline:none}
.living-btn[aria-pressed="true"]{background:rgba(199,168,74,.14);border-color:var(--accent2)}
.living-btn.quiet{color:var(--muted)}
.living-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 0}
.living-say{min-height:1.3em;margin:10px 0 0;font-size:.92rem;font-style:italic;color:var(--accent2);text-align:center}
.living-panel{border:1px solid rgba(199,168,74,.5);padding:22px 18px 18px;margin:2em 0;position:relative;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(199,168,74,.05),transparent 70%)}
.living-panel::before{content:"";position:absolute;inset:5px;border:1px solid rgba(199,168,74,.18);pointer-events:none}
.living-panel .lp-kicker{font-variant-caps:all-small-caps;letter-spacing:.24em;font-size:15px;font-weight:700;color:var(--accent);margin:0 0 2px}
.living-panel .lp-title{font-family:var(--display);font-size:1.45rem;font-weight:600;margin:0 0 12px}
.living-panel .lp-cap{font-size:.86rem;line-height:1.45;color:var(--muted);margin:12px auto 0;max-width:32rem}
.living-panel input,.living-panel textarea,.living-panel select{font-family:var(--serif);font-size:1.02rem;color:var(--ink);background:#0e0d0b;border:1px solid #3a372f;border-radius:6px;padding:8px 10px;outline:none;width:100%}
.living-panel input:focus,.living-panel textarea:focus,.living-panel select:focus{border-color:var(--accent2)}
.living-panel textarea{resize:vertical;min-height:4.6em;line-height:1.5}
.living-panel label.f{display:block;text-align:left;margin:10px 0 0}
.living-panel label.f span{display:block;font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:14px;color:var(--muted);margin:0 0 4px}
.ghost-word{position:absolute;left:12px;top:8px;font-family:var(--display);font-size:1.3rem;font-style:italic;color:rgba(243,239,229,.75);pointer-events:none;white-space:nowrap;animation:ghostUp 2.2s ease-out forwards;z-index:5}
@keyframes ghostUp{0%{opacity:.9;transform:translateY(0);filter:blur(0)}100%{opacity:0;transform:translateY(-70px) scale(1.12);filter:blur(6px)}}

/* ── the top bar's living switches ── */
#top .living-top{display:flex;gap:8px;align-items:center;flex:none;margin:0 auto 0 8px}
#btn-score{padding:6px 11px}
#btn-score .eq{display:inline-flex;gap:2px;align-items:flex-end;height:11px;margin-left:6px;vertical-align:-1px}
#btn-score .eq i{display:block;width:2px;height:3px;background:currentColor;border-radius:1px}
#btn-score[aria-pressed="true"] .eq i{animation:eq 1.1s ease-in-out infinite}
#btn-score[aria-pressed="true"] .eq i:nth-child(2){animation-delay:.2s}#btn-score[aria-pressed="true"] .eq i:nth-child(3){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}
body.still #btn-score .eq i{animation:none!important}
.toc-living{border:1px solid #3a372f;border-radius:10px;padding:14px 16px;margin:0 0 22px}
.toc-living .tl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:6px 0}
.toc-living .tl-l{font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:15px;color:var(--accent2)}
.toc-living .tl-s{font-size:.88rem;color:var(--muted);font-style:italic}

/* ── the spine: a lit wick ── */
#spine{box-shadow:0 0 10px rgba(199,168,74,.55)}
#spine::after{content:"";position:absolute;right:-5px;top:-3px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fff3c4 0,#e8c869 40%,rgba(199,168,74,0) 72%);animation:ember 2.6s ease-in-out infinite}
@keyframes ember{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
body.still #spine::after{animation:none}

/* ── the cover: the rose draws itself; WONDER takes the light once ── */
.cover-rose.draw svg circle,.cover-rose.draw svg line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s cubic-bezier(.6,.05,.3,1) forwards}
.cover-rose.draw svg line{animation-duration:1.6s;animation-delay:.6s}
.cover-rose.draw svg rect,.cover-rose.draw svg g[fill] circle{opacity:0;animation:pop .5s ease-out forwards;animation-delay:1.9s}
.cover-rose.draw svg > circle:last-child{opacity:0;animation:pop .6s ease-out 2.4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
.cover-rose.draw svg rect,.cover-rose.draw svg g circle{transform-box:fill-box;transform-origin:center}
.cover-title .bl.gleam{background:linear-gradient(100deg,var(--accent2) 0%,var(--accent2) 38%,#fff4c8 50%,var(--accent2) 62%,var(--accent2) 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gleam 2.2s ease-in-out 2.6s 1 forwards}
@keyframes gleam{to{background-position:0 0}}

/* ── every part and chapter: the divider draws from its heart ── */
.page.on .spark-divider::before,.page.on .spark-divider::after{animation:spread 1.1s cubic-bezier(.5,0,.2,1) both}
.page.on .spark-divider::before{transform-origin:right center}.page.on .spark-divider::after{transform-origin:left center}
.page.on .spark-divider .burst{animation:turnIn 1s ease-out both}
@keyframes spread{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes turnIn{from{transform:rotate(-90deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
body.still .page.on .spark-divider::before,body.still .page.on .spark-divider::after,body.still .page.on .spark-divider .burst{animation:none}

/* ── THE GATE: the door drawn on a wall, and the wonder that it opens ── */
.door-scene{width:min(260px,70vw);margin:26px auto 0;cursor:pointer;user-select:none;-webkit-user-select:none}
.door-scene .stage{position:relative;perspective:900px}
.door-scene svg{display:block;width:100%;height:auto;overflow:visible}
.door-scene .chalk path,.door-scene .chalk line{fill:none;stroke:#ece6d6;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.door-scene .hatch line{stroke-width:1.1;opacity:.35}
.door-scene .chalk [pathLength]{stroke-dasharray:1;stroke-dashoffset:0}
.door-scene .light{opacity:0}
.door-scene .panel{position:absolute;inset:0;transform-origin:25% 50%;transform-style:preserve-3d}
.door-scene .panel svg{position:absolute;inset:0}
.door-scene .panel .face{fill:#0c0b09;stroke:#ece6d6;stroke-width:2.2;opacity:.98}
.door-scene .panel .inner{fill:none;stroke:#ece6d6;stroke-width:1.3;opacity:.6}
.door-scene .panel .knob{fill:var(--accent2)}
.door-scene .said{font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--accent2);margin:14px 0 0;opacity:0;min-height:1.6em}
.door-scene.play .chalk [pathLength]{stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.55,.1,.35,1) forwards}
.door-scene.play .chalk .d2{animation-delay:.9s}.door-scene.play .chalk .d3{animation-delay:1.5s}.door-scene.play .hatch [pathLength]{animation-duration:.6s;animation-delay:1.9s}
.door-scene.play .panel{opacity:0;animation:panelIn .5s ease-out 2.1s forwards,swing 1.6s cubic-bezier(.45,0,.2,1) 2.9s forwards}
.door-scene.play .light{animation:lightIn 1.6s ease-out 3.1s forwards}
.door-scene.play .said{animation:fadeIn 1s ease-out 3.9s forwards}
.door-scene.open .panel{transform:rotateY(-104deg)}.door-scene.open .light{opacity:1}.door-scene.open .said{opacity:1}
@keyframes panelIn{to{opacity:1}}
@keyframes swing{from{transform:rotateY(0)}to{transform:rotateY(-104deg)}}
@keyframes lightIn{to{opacity:1}}
@keyframes fadeIn{to{opacity:1}}

/* ── the dragons wake: wings, a gold blink, the tongue — once as the page opens, again at a touch ── */
.initial.dragon{cursor:pointer}
.initial.dragon .beast-back svg g,.initial.dragon .beast-front svg circle,.initial.dragon .beast-front svg path:last-child{transform-box:fill-box}
.initial.dragon .beast-back svg g{transform-origin:0% 100%}
.initial.dragon .beast-front svg circle{transform-origin:50% 50%}
.initial.dragon .beast-front svg path:last-child{transform-origin:0% 50%}
.initial.dragon.wake .beast-back svg g{animation:wing 1.5s ease-in-out}
.initial.dragon.wake .beast-front svg circle{animation:blink 1.8s ease-in-out}
.initial.dragon.wake .beast-front svg path:last-child{animation:tongue 1.6s ease-in-out .5s}
.initial.dragon.wake{animation:breath 2.2s ease-in-out}
.chapter-title .initial.dragon.wake{animation:none}
@keyframes wing{0%,100%{transform:rotate(0)}22%{transform:rotate(-16deg)}44%{transform:rotate(4deg)}64%{transform:rotate(-10deg)}82%{transform:rotate(2deg)}}
@keyframes blink{0%,30%,40%,100%{transform:scaleY(1)}35%{transform:scaleY(.08)}62%{transform:scale(1.9)}80%{transform:scale(1)}}
@keyframes tongue{0%,100%{transform:scaleX(1)}30%{transform:scaleX(1.7) rotate(-6deg)}55%{transform:scaleX(.6)}75%{transform:scaleX(1.4)}}
@keyframes breath{0%,100%{filter:drop-shadow(0 0 0 rgba(199,168,74,0))}45%{filter:drop-shadow(0 0 10px rgba(199,168,74,.55))}}

/* ── Hall I · the Lantern: the light follows your eye; it burns small, the moth crosses, and the page lights ── */
.page.lantern{--lv:.3;--lx:50%;--ly:30%}
.page.lantern .lantern-glow{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at var(--lx) var(--ly),rgba(255,196,110,calc(.34 * var(--lv))) 0,rgba(255,170,80,calc(.11 * var(--lv))) calc(14% + 22% * var(--lv)),transparent calc(26% + 50% * var(--lv)));transition:background .6s}
.page.lantern .poem .stanza{transition:opacity .8s,text-shadow .8s;opacity:.72}
.page.lantern .poem .stanza.lit{opacity:1;text-shadow:0 0 18px rgba(255,190,100,.18)}
.page.lantern.dawned .poem .stanza{opacity:1}
.page.lantern.dawned .lantern-glow{background:radial-gradient(ellipse at 50% 40%,rgba(255,196,110,.24) 0,rgba(255,170,80,.08) 45%,transparent 80%)}
body.still .page.lantern .poem .stanza{opacity:1}
.moth{position:absolute;left:0;top:0;width:42px;height:34px;pointer-events:none;z-index:3;opacity:0;display:none}
.moth.fly,.moth.landed{display:block}   /* a moth that has not crossed the dark is not on the page at all */
.moth.fly{animation:mothIn 3.2s cubic-bezier(.4,.1,.3,1) forwards}
.moth .w{transform-box:fill-box;transform-origin:50% 100%;animation:flutter .18s ease-in-out infinite alternate}
.moth.landed .w{animation:flutter 1.6s ease-in-out infinite alternate}
@keyframes flutter{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
@keyframes mothIn{0%{opacity:0;transform:translate(var(--mx0),var(--my0)) rotate(-30deg)}15%{opacity:.95}60%{transform:translate(calc(var(--mx0) * .3),calc(var(--my0) * -.2)) rotate(12deg)}100%{opacity:.95;transform:translate(0,0) rotate(0)}}

/* ── Hall I · the Small King: the bars counted; the turn planted on four, landing on twelve ── */
.poem.bars{padding-left:44px}
.bar-num{position:absolute;left:14px;font-family:var(--serif);font-variant-numeric:oldstyle-nums;font-size:13px;color:#6e6a60;width:22px;text-align:right;line-height:1;transition:color .4s}
.bar-num.key{color:var(--accent2);font-weight:600}
.bar-arc{position:absolute;left:0;width:14px;pointer-events:none}
.bar-arc path{fill:none;stroke:var(--accent2);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1}
.bar-arc.drawn path{animation:draw 1.8s ease-in-out forwards}
body.still .bar-arc path{stroke-dashoffset:0}
.bar-tag{position:absolute;left:-96px;width:90px;text-align:right;font-variant-caps:all-small-caps;letter-spacing:.12em;font-size:12.5px;color:var(--accent2);opacity:0;transition:opacity .6s}
.bar-tag.on{opacity:.9}
@media (max-width:720px){.bar-tag{display:none}}

/* ── Hall II · the gates: a seal that breaks, a phantom that drifts, a chain held until the Release ── */
.gate{overflow:visible}
.seal-burst{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;pointer-events:none;z-index:6}
.seal-burst svg{width:100%;height:100%;overflow:visible}
.seal-burst .h{transform-box:fill-box;transform-origin:50% 50%}
.seal-burst.go .h.l{animation:halfL 1.4s cubic-bezier(.3,.1,.4,1) .45s forwards}
.seal-burst.go .h.r{animation:halfR 1.4s cubic-bezier(.3,.1,.4,1) .45s forwards}
.seal-burst.go{animation:sealIn .45s ease-out}
.seal-burst .spark{fill:#fff1c2;opacity:0;transform-box:fill-box;transform-origin:center}
.seal-burst.go .spark{animation:spark 1s ease-out .5s forwards}
@keyframes sealIn{from{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes halfL{to{transform:translate(-30px,46px) rotate(-38deg);opacity:0}}
@keyframes halfR{to{transform:translate(30px,40px) rotate(32deg);opacity:0}}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.3)}}
.chain-badge{display:inline-flex;align-items:center;gap:6px;margin-left:8px;vertical-align:-3px}
.chain-badge svg{width:18px;height:20px;overflow:visible}
.chain-badge .shackle{transform-box:fill-box;transform-origin:50% 100%}
.chain-badge.lock .shackle{animation:shut .6s cubic-bezier(.5,1.6,.5,1)}
.chain-badge.break .shackle{animation:spring .9s ease-out forwards}.chain-badge.break .body{animation:dropAway 1.2s ease-in .3s forwards}
@keyframes shut{from{transform:translateY(-5px)}to{transform:translateY(0)}}
@keyframes spring{to{transform:translateY(-9px) rotate(-30deg);opacity:0}}
@keyframes dropAway{to{transform:translateY(26px) rotate(18deg);opacity:0}}
.sph .tw{opacity:0;animation:fadeIn .01s linear forwards}

/* ── Hall III · the left edge lights; the mirror holds the line ── */
.edge-light{position:absolute;border-radius:3px;background:rgba(199,168,74,.24);box-shadow:0 0 12px rgba(199,168,74,.45);opacity:0;animation:edgeOn .5s ease-out forwards}
@keyframes edgeOn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.acro-word{display:flex;justify-content:center;align-items:center;gap:34px;flex-wrap:wrap;margin:16px 0 4px}
.acro-word .w{font-family:var(--blackletter);font-size:2.2rem;color:var(--accent2);opacity:0;animation:fadeIn .8s ease-out forwards}
.acro-word .w:nth-child(2){animation-delay:.35s}.acro-word .w:nth-child(3){animation-delay:.7s}
.mirror{margin:6px auto 0;max-width:36rem}
.mirror .strip{position:relative;display:flex;justify-content:center;gap:2px;height:46px;align-items:center;font-family:var(--display);font-weight:600;font-size:1.5rem;color:var(--ink);cursor:pointer}
.mirror .strip span{display:inline-block;width:1.05em;text-align:center;transition:transform 1.3s cubic-bezier(.6,0,.25,1),color .6s}
.mirror .strip span.hinge{color:var(--accent2)}
.mirror .axis{position:absolute;top:2px;bottom:2px;left:50%;width:1px;background:linear-gradient(transparent,var(--accent2),transparent);opacity:0;transition:opacity .6s}
.mirror.on .axis{opacity:1}
@media (max-width:480px){.mirror .strip{font-size:1.05rem;gap:0}}
.lg-wrap{position:relative;width:max-content;margin:0 auto}
.lg-caps{position:absolute;inset:0;pointer-events:none;overflow:visible}
.lg-caps rect{fill:none;stroke:var(--accent2);stroke-width:1.6;opacity:.85}
.lg-caps rect.new{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .9s ease-out forwards}

/* ── Hall IV · the inventory: cross out what was never said; the trapdoor opens ── */
.inv-cards{display:grid;gap:10px;max-width:30rem;margin:6px auto 0;perspective:700px}
.inv-card{position:relative;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #3a372f;border-radius:8px;padding:12px 14px;background:#0e0d0b;cursor:pointer;transform-origin:50% 100%;transition:border-color .2s}
.inv-card:hover{border-color:var(--accent2)}
.inv-card .q{font-family:var(--display);font-size:1.18rem;font-style:italic;flex:1;position:relative}
.inv-card .q::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;border-top:2px solid var(--accent2);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.inv-card.out .q::after{transform:scaleX(1)}
.inv-card.out{animation:trapdoor 1.1s cubic-bezier(.6,0,.4,1) .55s forwards}
.inv-card.gone{opacity:.35;animation:none;transform:none;border-style:dashed}
.inv-card .x{font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:13px;color:var(--muted)}
@keyframes trapdoor{0%{transform:rotateX(0)}100%{transform:rotateX(-82deg) translateY(10px);opacity:.35}}
.inv-mine{display:flex;gap:8px;max-width:30rem;margin:10px auto 0}

/* ── Hall V · point at the line ── */
.point-on .poem{cursor:crosshair}
.point-hit{position:absolute;pointer-events:auto;border-radius:6px;cursor:pointer;background:transparent;border:0;padding:0}
.point-hit:hover,.point-hit:focus-visible{background:rgba(199,168,74,.08);outline:none}
.point-ring{position:absolute;pointer-events:none;overflow:visible}
.point-ring path{vector-effect:non-scaling-stroke;fill:none;stroke:var(--accent2);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .8s ease-out forwards}
body.still .point-ring path{stroke-dashoffset:0}
.verdict{border-left:2px solid var(--accent2);padding:6px 0 6px 14px;margin:1.2em 0;text-align:left}
.verdict .k{font-variant-caps:all-small-caps;letter-spacing:.16em;font-size:14px;color:var(--accent2)}
.verdict .said{font-family:var(--display);font-style:italic;font-size:1.2rem;margin:4px 0}

/* ── Hall VI · THE INSTRUMENTS (the hall's own pattern: "the Astrolabe instinct, instruments over adjectives") ── */
.instruments{display:grid;gap:18px}
.instrument{border-top:1px solid #2c2a25;padding-top:16px}
.instrument:first-child{border-top:0;padding-top:0}
.instrument .i-name{font-variant-caps:all-small-caps;letter-spacing:.22em;font-size:15px;color:var(--accent2);margin:0 0 8px}
.instrument svg{display:block;margin:0 auto;max-width:100%;height:auto;overflow:visible}
.instrument .read{font-size:1rem;line-height:1.55;margin:10px auto 0;max-width:32rem}
.instrument .read b{font-family:var(--display);font-weight:600;font-size:1.22em;color:var(--accent2);font-variant-numeric:lining-nums tabular-nums}
.instrument .fine{font-size:.82rem;color:var(--muted);margin:6px auto 0;max-width:32rem}
.instrument input[type=range]{width:min(320px,100%);accent-color:var(--accent2);padding:0;border:0;background:none}
.venus-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px}
.gauge{width:94px;text-align:center}.gauge svg{width:84px;height:84px}
.gauge .g-l{font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:13px;color:var(--muted)}
.gauge circle.track{fill:none;stroke:#2c2a25;stroke-width:6}.gauge circle.fill{fill:none;stroke:var(--accent2);stroke-width:6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.gauge.turn circle.fill{stroke:#ece6d6}
.gauge .pct{font-family:var(--display);font-weight:600;font-size:15px;fill:var(--ink)}
.hearts .heart{transform-box:fill-box;transform-origin:50% 60%}
.instrument.run .hearts .heart.b{animation:beat 1.7s ease-in-out infinite}
.instrument.run .hearts .heart.g1{animation:beat 1.7s ease-in-out .28s infinite}
.instrument.run .hearts .heart.g2{animation:beat 1.7s ease-in-out .3s infinite}
.instrument.run .hearts .flow{stroke-dasharray:4 7;animation:flow 1.7s linear infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.28)}24%{transform:scale(.96)}36%{transform:scale(1.12)}50%{transform:scale(1)}}
@keyframes flow{to{stroke-dashoffset:-22}}
.photon{fill:#fff4c8;filter:drop-shadow(0 0 4px #ffd977)}
.dots{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:330px;margin:4px auto 0}
.dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--accent2);opacity:0;transform:scale(.3);transition:opacity .3s,transform .3s}
.dots i.on{opacity:1;transform:none}
.dots.stars i{background:#ece6d6}.dots.stars i.maybe{background:transparent;box-shadow:inset 0 0 0 1px rgba(236,230,214,.55)}
.dots-l{font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:13px;color:var(--muted);margin:10px 0 2px}
.tower .top{transition:transform .5s ease-out}
.jar .honey{transform-box:fill-box;transform-origin:50% 100%}

/* ── Hall VII · the candles ── */
.candles svg{width:min(420px,100%)}
.candle .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker 1.3s ease-in-out infinite alternate}
.candle:nth-child(3n) .flame{animation-duration:1.05s}.candle:nth-child(4n+1) .flame{animation-delay:.3s}
@keyframes flicker{0%{transform:scale(1,1) skewX(0)}30%{transform:scale(.92,1.08) skewX(3deg)}60%{transform:scale(1.04,.94) skewX(-2deg)}100%{transform:scale(.96,1.05) skewX(1deg)}}
.candle.out .flame{animation:snuff .5s ease-in forwards}
@keyframes snuff{to{transform:scale(.1,.1);opacity:0}}
.candle .smoke{fill:none;stroke:rgba(236,230,214,.5);stroke-width:1.4;stroke-dasharray:60;stroke-dashoffset:60;opacity:0}
.candle.out .smoke{animation:smoke 2.6s ease-out .3s forwards}
@keyframes smoke{0%{opacity:.8;stroke-dashoffset:60}100%{opacity:0;stroke-dashoffset:0;transform:translateY(-14px)}}
.gust path{fill:none;stroke:rgba(236,230,214,.45);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;opacity:0}
.gust.go path{animation:gust 1.6s ease-in-out forwards}.gust.go path:nth-child(2){animation-delay:.18s}.gust.go path:nth-child(3){animation-delay:.32s}
@keyframes gust{0%{opacity:0;stroke-dashoffset:120}30%{opacity:.9}100%{opacity:0;stroke-dashoffset:-120}}
.candle .wax{transform-box:fill-box;transform-origin:50% 100%}
.candles.burn .candle.lit .wax{animation:melt 5.5s linear forwards}
.candles.burn .candle.lit .flame{animation:flicker 1s ease-in-out infinite alternate,dieOut 5.5s steps(1,end) forwards}
@keyframes melt{to{transform:scaleY(.02)}}
@keyframes dieOut{to{opacity:0}}
.candles .dawn{opacity:0;transition:opacity 2.5s}.candles.burn .dawn{opacity:1;transition-delay:4.6s}
.candles.burn .candle.out .wax{stroke:var(--accent2);stroke-width:1.2}
.sheep-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:420px;margin:0 auto}
.sheep{width:28px;height:22px;opacity:.45;transition:opacity .4s,transform .4s}
.sheep.on{opacity:1;transform:translateY(-3px)}
.sheep.half{clip-path:inset(0 50% 0 0)}

/* ── Hall VIII · the table ── */
.table-game{text-align:left}
.tg-players{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 12px}
.tg-player{flex:1;min-width:140px;border:1px solid #3a372f;border-radius:8px;padding:8px 10px;text-align:center;transition:border-color .3s,background .3s}
.tg-player.turn{border-color:var(--accent2);background:rgba(199,168,74,.07)}
.tg-player input{text-align:center;border:0;background:transparent;font-family:var(--display);font-weight:600;font-size:1.15rem;padding:2px}
.tg-player .falls{font-size:.9rem;letter-spacing:.3em;color:var(--accent);min-height:1.2em}
.rungs-live{display:flex;flex-direction:column-reverse;gap:4px;align-items:center;margin:10px auto;max-width:22rem}
.rungs-live .rung{width:100%;text-align:center;font-family:var(--display);font-weight:600;font-size:1.15rem;border-bottom:1.5px solid rgba(243,239,229,.6);padding:2px 0;animation:rungIn .45s ease-out}
.rungs-live .rung small{font-family:var(--serif);font-weight:400;font-size:.78rem;color:var(--muted);margin-left:8px}
@keyframes rungIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tg-say{text-align:center}
.pilgrim-log{margin:12px 0 0}
.pilgrim-log .line{margin:0 0 .45em}
.pilgrim-log b{font-variant-caps:all-small-caps;letter-spacing:.14em;color:var(--accent2);font-weight:500;margin-right:8px}
.q-tokens{display:flex;gap:8px;justify-content:center;margin:8px 0}
.q-tokens i{display:block;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--accent2)}
.q-tokens i.spent{background:transparent;border-color:#3a372f}
.q-tokens i:not(.spent){background:rgba(199,168,74,.35)}
.ring-live .seat{cursor:pointer}.ring-live .seat circle,.ring-live .seat text{pointer-events:all}.ring-live .seat:focus-visible circle{stroke:var(--accent2);stroke-width:2}
.ring-live .seat circle{transition:fill .3s,stroke .3s}
.ring-live .seat.sel circle{fill:rgba(199,168,74,.25);stroke:var(--accent2)}
.ring-live .chair{transform-box:fill-box;transform-origin:50% 50%;transition:transform 1.1s cubic-bezier(.5,0,.2,1)}

/* ── Hall IX · THE FORGE ── */
.forge .tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 14px}
.forge .tabs button{font-family:var(--serif);font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:14px;color:var(--muted);background:none;border:1px solid #3a372f;border-radius:999px;padding:6px 12px;cursor:pointer}
.forge .tabs button[aria-selected="true"]{color:var(--accent2);border-color:var(--accent2);background:rgba(199,168,74,.08)}
.forge .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){.forge .grid2{grid-template-columns:1fr}}
.forge .station{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--accent2);text-align:left;margin:14px 0 0}
.forge-out{margin:18px 0 0}
.forge-card{position:relative;text-align:left;border:1px solid rgba(199,168,74,.6);padding:24px 22px 18px;background:#0b0a09;animation:forged .7s ease-out}
.forge-card::before{content:"";position:absolute;inset:5px;border:1px solid rgba(199,168,74,.2);pointer-events:none}
@keyframes forged{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.forge-card .fc-k{font-variant-caps:all-small-caps;letter-spacing:.22em;font-size:14px;color:var(--accent)}
.forge-card .fc-t{font-family:var(--display);font-weight:600;font-size:1.5rem;margin:2px 0 12px}
.forge-card .fc-verse{text-align:center;margin:0 0 10px}
.forge-card .fc-verse p{margin:0 0 .8em}
.forge-card .fc-verse .initial{float:none;display:inline-flex;vertical-align:-.2em;height:1.5em;min-width:1em;font-size:2.4em;margin:0 .14em 0 0}
.forge-card .fc-lab{margin:.5em 0}.forge-card .fc-lab .l{font-variant-caps:all-small-caps;letter-spacing:.16em;color:var(--accent2);margin-right:8px}
.forge-card .fc-by{font-variant-caps:small-caps;letter-spacing:.12em;color:var(--muted);font-size:.9rem;margin-top:12px;text-align:right}
.forge-card .fc-stamp{display:inline-block;margin-top:10px;font-variant-caps:all-small-caps;letter-spacing:.22em;font-size:13px;padding:4px 10px;border:1.5px solid var(--accent2);color:var(--accent2);transform:rotate(-3deg)}
.forge-card .fc-stamp.rumor{border-color:var(--accent);color:var(--accent)}
.forge-card .fc-acro p{margin:0 0 .35em;text-align:left}
.forge-card .fc-acro .initial{float:none;display:inline-flex;vertical-align:-.25em;height:1.3em;min-width:.9em;font-size:1.9em;margin:0 .22em 0 0}
.forge-card .fc-gate{display:flex;gap:8px;margin:12px 0 0}.forge-card .fc-gate input{flex:1}
.forge-list{display:grid;gap:10px;margin:14px 0 0}
.forge-list .fl{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid #2c2a25;border-radius:8px;padding:8px 12px;text-align:left}
.forge-list .fl b{font-family:var(--display);font-weight:600;font-size:1.05rem}
.forge-list .fl small{color:var(--muted)}
.living-forged{margin:2em 0 0}
.living-forged h4{font-weight:400;margin:0 0 .6em}

/* ── the Release: chains fall, seals break; the war ends in embers ── */
.embers{position:fixed;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.embers i{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fff3c4,#e8c869 50%,transparent 70%);animation:rise var(--t) ease-out var(--d) forwards;opacity:0}
@keyframes rise{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}100%{opacity:0;transform:translate(var(--x),-92vh)}}
.release-flash{animation:releaseFlash 1.6s ease-out}
@keyframes releaseFlash{0%{box-shadow:0 0 0 0 rgba(199,168,74,.0)}30%{box-shadow:0 0 0 6px rgba(199,168,74,.25)}100%{box-shadow:0 0 0 0 rgba(199,168,74,0)}}
@media (prefers-reduced-motion:reduce){.embers{display:none}}

/* the press's other bred manners, for the forge (geometry from the press, inked for black and gold) */
.initial.sigildrake{font-family:var(--blackletter);padding:0 6px;margin-right:26px}
.initial.genesis{font-family:var(--blackletter);font-size:.82em;padding:.04em .1em;border:1.5px solid var(--accent2);outline:1px solid var(--accent2);outline-offset:3px}
.initial.genesis::before{content:"";position:absolute;inset:5px;border:1px solid var(--accent);z-index:-1}
.initial.genesis i{position:absolute;top:-3px;left:50%;width:6px;height:6px;background:var(--accent2);transform:translateX(-50%) rotate(45deg)}
.initial.genesis .beast-back,.initial.genesis .beast-front{inset:-12% -20%}
.acro-word .initial{float:none;display:inline-flex;vertical-align:-.18em;height:1.15em;min-width:.8em;font-size:1.25em;margin:0 .06em 0 0;padding:0}

.poem.acrostic{text-align:left;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
.mirror .strip span{transition:color .6s}

.page.lantern .poem{overflow-x:clip}   /* the moth enters from the poem's edge; nothing it does can widen the page */

.lg-n10{grid-template-columns:repeat(10,var(--cell));--cell:min(30px,calc((100vw - 80px)/10))}.lg-n11{grid-template-columns:repeat(11,var(--cell));--cell:min(30px,calc((100vw - 80px)/11))}.lg-n12{grid-template-columns:repeat(12,var(--cell));--cell:min(30px,calc((100vw - 80px)/12))}.lg-n13{grid-template-columns:repeat(13,var(--cell));--cell:min(30px,calc((100vw - 80px)/13))}.lg-n14{grid-template-columns:repeat(14,var(--cell));--cell:min(30px,calc((100vw - 80px)/14))}.lg-n15{grid-template-columns:repeat(15,var(--cell));--cell:min(30px,calc((100vw - 80px)/15))}.lg-n16{grid-template-columns:repeat(16,var(--cell));--cell:min(30px,calc((100vw - 80px)/16))}
/* ═════════ THE ILLUMINATION (v6) — the illustrator's hand. Placeholder name; the name is Spark's. ═════════
   The press's law holds: creatures only at major openings (a beast for each hall's head, nowhere ordinary); scenes enter as an
   author's illustration, framed in double hairlines; one ink draws, gold whispers, the accent is spent once, no gradients. */

/* ── THE EMBLEMS: each hall's headpiece, framed as the press frames a figure ── */
.emblem{position:relative;margin:2vh auto 10px;max-width:440px;padding:14px 16px 12px;border:1px solid rgba(199,168,74,.55)}
.emblem::before{content:"";position:absolute;inset:4px;border:1px solid rgba(199,168,74,.2);pointer-events:none}
.emblem svg{display:block;width:100%;height:auto;overflow:visible}
.emblem .dash{stroke-dasharray:.015 .02}
.emblem.draw .d:not(.dash){stroke-dasharray:1;stroke-dashoffset:1;animation:embDraw 1.7s cubic-bezier(.55,.1,.35,1) forwards}
.emblem.draw .h,.emblem.draw .m,.emblem.draw .dash{animation:embFade .9s ease-out 1.1s both}
@keyframes embDraw{to{stroke-dashoffset:0}}
@keyframes embFade{from{opacity:0}}   /* no "to": each mark comes up to its own drawn opacity */
body.still .emblem.draw .d,body.still .emblem.draw .h,body.still .emblem.draw .m,body.still .emblem.draw .dash{animation:none;stroke-dashoffset:0;opacity:initial}
.emblem + .chapter-block{margin-top:22px}

/* ── a beast for each hall: the other orders stir as the dragons wake ── */
.initial[data-order]{cursor:pointer}
.initial[data-order] .beast-back svg,.initial[data-order] .beast-front svg{transform-origin:50% 60%}
.initial[data-order].stir .beast-back svg{animation:stirBack 1.8s ease-in-out}
.initial[data-order].stir .beast-front svg{animation:stirFront 1.8s ease-in-out}
.initial[data-order].stir{animation:breath 2.2s ease-in-out}
.chapter-title .initial[data-order].stir{animation:none}
@keyframes stirBack{0%,100%{transform:none}30%{transform:rotate(-4deg) scale(1.04)}60%{transform:rotate(2deg)}}
@keyframes stirFront{0%,100%{transform:none}25%{transform:translateY(-2px) scale(1.06)}55%{transform:translateY(1px)}}
.initial[data-order="celestial"].stir .beast-back svg{animation:spinStar 2s cubic-bezier(.5,0,.2,1)}
@keyframes spinStar{from{transform:rotate(-45deg) scale(.8);opacity:.3}to{transform:none;opacity:1}}
.initial[data-order="flame"].stir .beast-back svg,.initial[data-order="flame"].stir .beast-front svg{animation:flare 1.6s ease-in-out}
@keyframes flare{0%,100%{transform:none}30%{transform:scaleY(1.12) skewX(-3deg)}60%{transform:scaleY(.96) skewX(2deg)}}

/* ── THE PATINA: ink that ages — a page you have read warms, and its edge takes the gilt ── */
.page{--patina:0}
.page.on{color:color-mix(in srgb,var(--ink),#f1dcae calc(var(--patina) * 32%))}
.page.on .run-head{color:color-mix(in srgb,var(--muted),var(--accent2) calc(var(--patina) * 100%))}
.page.on .arch-rule{opacity:calc(.55 + .4 * var(--patina))}
.page.on::after{content:"";position:fixed;top:12vh;bottom:12vh;right:max(5px,calc(50vw - 21.5rem - 26px));width:2px;border-radius:2px;pointer-events:none;background:linear-gradient(transparent,var(--accent2) 18%,var(--accent2) 82%,transparent);opacity:calc(var(--patina) * .75);transition:opacity 1.2s}

/* ── THE FORE-EDGE: a painting hidden on the book's edge, revealed as the pages are read ── */
.fore-edge{margin:0 0 22px;border:1px solid #3a372f;border-radius:10px;padding:12px 14px 10px}
.fore-edge .fe-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 8px}
.fore-edge .fe-l{font-variant-caps:all-small-caps;letter-spacing:.16em;font-size:15px;color:var(--accent2)}
.fore-edge .fe-s{font-size:.86rem;color:var(--muted);font-style:italic}
.fore-edge .fe-book{position:relative;border-radius:3px;overflow:hidden;background:#0b0a08;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.fore-edge .fe-book svg{display:block;width:100%;height:auto}
.fore-edge:hover .fe-book,.fore-edge:focus-within .fe-book{transform:perspective(700px) rotateX(14deg) scaleY(1.06)}
.fore-edge .fe-strip{cursor:pointer}
.fore-edge .fe-strip:hover{fill:rgba(199,168,74,.18)}
.fore-edge.whole{border-color:var(--accent2);box-shadow:0 0 22px rgba(199,168,74,.18)}
body.still .fore-edge .fe-book{transition:none}

/* ── THE ILLUSTRATED HALLS: each hall's emblem beside its name ── */
#toc{background:rgba(9,9,9,.985)}
#toc .chap{display:flex;align-items:center;gap:0}#toc .chap a{flex:1;min-width:0}
#toc .chap .thumb{flex:none;display:inline-block;width:46px;height:28px;vertical-align:-8px;margin-right:10px;border:1px solid rgba(199,168,74,.35);border-radius:2px;padding:1px 2px}
#toc .chap .thumb svg{width:100%;height:100%;display:block}

/* ── EX LIBRIS: the reader's own bookplate ── */
.exlibris{max-width:22rem;margin:30px auto 0;text-align:center}
.exlibris .plate-ex{position:relative;border:1.5px solid var(--accent2);padding:18px 18px 14px}
.exlibris .plate-ex::before{content:"";position:absolute;inset:5px;border:1px solid rgba(199,168,74,.35);pointer-events:none}
.exlibris .ex-k{font-variant-caps:all-small-caps;letter-spacing:.34em;font-size:14px;color:var(--accent2)}
.exlibris .ex-l{margin:14px auto 18px;height:84px;display:flex;align-items:center;justify-content:center}
.exlibris .ex-l .initial{float:none;margin:0}
.exlibris .ex-n{font-family:var(--display);font-weight:600;font-size:1.55rem;color:var(--ink)}
.exlibris .ex-c{font-variant-caps:all-small-caps;letter-spacing:.18em;font-size:13px;color:var(--muted);margin-top:4px}
/* the column never grows past the plate, and the button wraps under the beast on a narrow phone (2026-10-11: the plate's
   form was 375px wide, so a real phone zoomed the whole cover out; found by the museum's own audit) */
.exlibris .ex-form{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.exlibris .ex-form .row2{display:flex;gap:8px;flex-wrap:wrap}
.exlibris .ex-form .row2 select{flex:1 1 9rem}
.exlibris .ex-form .row2 .living-btn{flex:1 1 auto}
.exlibris input,.exlibris select{font-family:var(--serif);font-size:1rem;color:var(--ink);background:#0e0d0b;border:1px solid #3a372f;border-radius:6px;padding:8px 10px;outline:none;min-width:0;flex:1}
.exlibris input:focus,.exlibris select:focus{border-color:var(--accent2)}
.exlibris .ex-edit{margin-top:8px}

/* ── THE ENDPAPERS: the house's ornaments, repeated, behind the cover and the colophon ── */
.page.title,.page[data-where="COLOPHON"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C7A84A' stroke-width='.8' opacity='.13'%3E%3Cpath d='M32 26 L38 32 L32 38 L26 32 Z'/%3E%3Cpath d='M2 2 l6 6 M8 2 l-6 6 M58 58 l4 4 M62 58 l-4 4'/%3E%3C/g%3E%3Ccircle cx='0' cy='32' r='1' fill='%23C7A84A' opacity='.18'/%3E%3Ccircle cx='64' cy='32' r='1' fill='%23C7A84A' opacity='.18'/%3E%3Ccircle cx='32' cy='0' r='1' fill='%23C7A84A' opacity='.18'/%3E%3Ccircle cx='32' cy='64' r='1' fill='%23C7A84A' opacity='.18'/%3E%3C/svg%3E");background-size:64px 64px;border-radius:4px}
.page.title .cover{background:var(--black)}
.emb-defs{position:absolute;width:0;height:0;overflow:hidden}
@media (max-width:480px){.emblem{padding:10px 10px 8px}#toc .chap .thumb{width:38px;height:23px}}

/* ═════════ THE PUBLISHER (v7) — the book read aloud, performed, cast, measured against tonight's sky, drawn on your wall.
   Placeholder name; the name is Spark's. Every part is held to the book's laws and to the Oracle Codex's. ═════════ */

/* ── READ TO ME: the sentence being read lights in the house's gold (the Custom Highlight API — the text itself is untouched) ── */
::highlight(wow-read){background-color:rgba(199,168,74,.26);color:inherit}
#btn-read[aria-pressed="true"]{background:rgba(199,168,74,.14);border-color:var(--accent2)}
.read-say{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);max-width:min(90vw,30rem);padding:8px 14px;border:1px solid rgba(199,168,74,.5);border-radius:999px;background:rgba(9,9,9,.92);font-size:.88rem;font-style:italic;color:var(--accent2);text-align:center;z-index:6;opacity:0;transition:opacity .4s;pointer-events:none}
.read-say.on{opacity:1}

/* ── YOUR CARD: the copy's Great Spark, cast blind ── */
.ex-card{margin:14px auto 0;max-width:22rem;border:1px solid rgba(199,168,74,.45);padding:14px 16px 12px;position:relative;text-align:center;animation:forged .8s ease-out}
.ex-card::before{content:"";position:absolute;inset:4px;border:1px solid rgba(199,168,74,.16);pointer-events:none}
.ex-card .k{font-variant-caps:all-small-caps;letter-spacing:.24em;font-size:13px;color:var(--accent)}
.ex-card .num{font-family:var(--display);font-weight:600;letter-spacing:.06em;font-size:2.1rem;color:var(--accent2);line-height:1.1;margin-top:6px}
.ex-card .nm{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--ink)}
.ex-card .or{font-variant-caps:all-small-caps;letter-spacing:.2em;font-size:13px;color:var(--muted);margin:2px 0 8px}
.ex-card .ln{font-family:var(--display);font-style:italic;font-size:1.06rem;line-height:1.4;margin:0 0 8px;color:#e9e2d2}
.ex-card .law{font-size:.8rem;color:var(--muted);margin:6px 0 0}
.ex-card .src{font-variant-caps:all-small-caps;letter-spacing:.16em;font-size:12px;color:var(--muted);margin-top:6px}
.ex-card.reversed .num{transform:rotate(180deg);display:inline-block}

/* ── THE FRONT: today's engagement ── */
.front{margin:0 0 22px;border:1px solid #3a372f;border-radius:10px;padding:12px 14px}
.front .fr-l{font-variant-caps:all-small-caps;letter-spacing:.16em;font-size:15px;color:var(--accent2)}
.front .fr-t{font-family:var(--display);font-weight:600;font-size:1.25rem;margin:4px 0 2px}
.front .fr-s{font-size:.88rem;color:var(--muted);font-style:italic}
.front .fr-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}

/* ── THE SMALL KING, PERFORMED ── */
.perform .pf-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 0}
.perform .pf-bar{font-size:1.1rem;padding:10px 26px}
.perform .pf-count{font-family:var(--display);font-weight:600;font-size:1.4rem;color:var(--accent2);margin:8px 0 0;min-height:1.4em}
.perform input[type=file]{display:none}
.perform label.living-btn{display:inline-flex;align-items:center}
.bar-num.now{color:var(--ink);font-weight:700;transform:scale(1.25);transition:transform .2s,color .2s}
::highlight(wow-bar){background-color:rgba(199,168,74,.2);color:inherit}
.perform .rec{color:var(--accent);border-color:var(--accent)}
.perform .rec[aria-pressed="true"]{background:rgba(181,72,58,.16)}

/* ── VENUS TONIGHT ── */
.venus-sky svg{width:min(300px,100%)}
.venus-sky .orbit{fill:none;stroke:#3a372f;stroke-dasharray:2 4}
.venus-sky .sight{stroke:var(--accent2);stroke-width:1;stroke-dasharray:3 3}
.venus-sky .arc{fill:none;stroke:var(--accent2);stroke-width:1.2}

/* ── THE DOOR ON YOUR WALL ── */
.wall-door{position:fixed;inset:0;z-index:30;background:#000;display:flex;align-items:center;justify-content:center}
.wall-door video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.wall-door .wd-stage{position:relative;width:min(62vw,340px);z-index:2;filter:drop-shadow(0 0 10px rgba(0,0,0,.6))}
.wall-door .wd-say{position:absolute;left:0;right:0;bottom:48px;text-align:center;z-index:3;font-family:var(--display);font-style:italic;font-size:1.25rem;color:#fff3cc;text-shadow:0 1px 6px #000}
.wall-door .wd-x{position:absolute;top:16px;right:16px;z-index:3}
.wall-door .door-scene{width:100%;margin:0}

/* ── THE LIVING ORACLE ── */
.rulings{margin:1.6em 0 0;border-top:1px solid #3a372f;padding-top:12px;text-align:left}
.rulings .rl{border-left:2px solid var(--accent2);padding:4px 0 4px 12px;margin:0 0 10px}
.rulings .rl b{font-family:var(--display);font-weight:600;font-size:1.1rem}
.offer textarea{width:100%;min-height:6.5em;font-family:var(--serif);font-size:.95rem;color:var(--ink);background:#0e0d0b;border:1px solid #3a372f;border-radius:6px;padding:10px}
/* The site cut: the book's inline styles, as rules (the museum's CSP blocks inline styles). */
#btn-reset{font:inherit;font-size:.9rem;color:var(--dim);background:none;border:1px solid var(--graphite2);border-radius:999px;padding:8px 14px;cursor:pointer}
.wow-cut-marks{margin:1.6em 0 .6em;font-weight:400}