@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Kalam:wght@300;400;700&family=Lancelot&display=swap");

:root{--ink:#24170f;--paper:#f4ead2;--paper2:#ead9b7;--wine:#4a234d;--gold:#9b6a22;--blue:#24364f;--shadow:rgba(32,18,8,.22)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Georgia,"Times New Roman",serif;background:#1b1718;background-image:radial-gradient(circle at 20% 0,#493544 0,transparent 30%),linear-gradient(#171417,#28201d);line-height:1.7}
a{color:inherit}.shell{max-width:980px;margin:auto;background:var(--paper);min-height:100vh;box-shadow:0 0 55px #0008}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:.65rem 1rem;background:#211820ee;color:#f5e9d0;border-bottom:1px solid #b8864d}.brand{font-family:Georgia,serif;font-weight:bold;letter-spacing:.04em}.topbar a{text-decoration:none}.hero{position:relative;min-height:72vh;display:grid;place-items:end center;background:#111;overflow:hidden}.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,#160f15dd 80%,#160f15)}.hero-copy{position:relative;z-index:2;color:#fff;text-align:center;padding:4rem 1.4rem 3rem;text-shadow:0 2px 12px #000;max-width:800px}.kicker{letter-spacing:.22em;text-transform:uppercase;font-size:.82rem}.hero h1,.chapter-head h1{font-family:Georgia,serif;font-variant:small-caps;letter-spacing:.035em;line-height:1.05}.hero h1{font-size:clamp(2.5rem,7vw,5.6rem);margin:.4rem 0}.subtitle{font-size:clamp(1.05rem,2.3vw,1.4rem);font-style:italic}.btn{display:inline-block;margin:.45rem;padding:.8rem 1.2rem;border:1px solid #d9b56f;border-radius:999px;background:#f2dfb5;color:#2a1928;text-decoration:none;font-weight:bold;box-shadow:0 4px 14px #0005}.btn.secondary{background:#2e2130;color:#fff}.section{padding:3.2rem clamp(1.1rem,5vw,4.5rem)}.section h2{text-align:center;font-variant:small-caps;letter-spacing:.06em;font-size:2rem}.intro{max-width:680px;margin:auto;text-align:center;font-size:1.1rem}.toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.7rem;list-style:none;padding:0}.toc a{display:block;padding:.8rem 1rem;background:#fff9e9;border:1px solid #d3bd92;border-radius:10px;text-decoration:none}.toc small{display:block;color:#755f4b}.party{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:1rem}.party-card{background:#fff9e9;border:1px solid #d3bd92;border-radius:12px;overflow:hidden;text-align:center}.party-card img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}.party-card b{display:block;padding:.7rem}.chapter{max-width:760px;margin:auto;padding:2.5rem clamp(1rem,4vw,3rem) 4rem}.chapter-head{text-align:center;padding:2rem 0}.chapter-no{letter-spacing:.18em;font-size:.78rem;color:#765c45}.chapter-head h1{font-size:clamp(2.1rem,6vw,3.8rem);margin:.5rem 0}.orn{font-size:1.5rem;color:var(--gold)}.prose p{font-size:1.08rem;margin:0 0 1.15rem}.prose ul{margin:-.3rem 0 1.3rem 1.2rem}.special{margin:1.7rem 0;padding:1rem 1.15rem;border-radius:12px;border:1px solid #c7a66e;background:#fff8e6;box-shadow:0 4px 16px var(--shadow)}.special.gm{font-family:"Comic Sans MS","Segoe Print",cursive;background:#f0e0bd;transform:rotate(-.15deg)}.special.achievement{background:#f5e7b8;border-color:#b98631}.special.dice{background:#e9e5f2;border-color:#7d6591}.special.rule{background:#f3dfd6;border-color:#a75d4c}.special.inventory{background:#e4ead9;border-color:#72805d}.special.secret{background:#e6e2e8;border-color:#786a7e}.special.soundtrack{background:#e0e5ef;border-color:#60708e}.special-title{font-weight:800;letter-spacing:.06em}.dice-result{font-size:2.2rem;text-align:center;font-weight:900;color:#4a234d}.chapter-art{margin:2rem -4vw 2.5rem}.chapter-art img{display:block;width:100%;border-radius:12px;box-shadow:0 8px 28px #0005}.caption{text-align:center;font-size:.82rem;color:#6c5947;margin-top:.4rem;font-style:italic}.nav{display:grid;grid-template-columns:1fr auto 1fr;gap:.7rem;align-items:stretch;margin-top:3rem;border-top:1px solid #c8af84;padding-top:1.4rem}.nav a{text-decoration:none;background:#fff8e8;border:1px solid #d3bd92;border-radius:10px;padding:.8rem}.nav .next{text-align:right}.complete{text-align:center;font-variant:small-caps;letter-spacing:.12em;color:#72542e;margin-top:3rem}.audio-placeholder{margin:2rem 0;padding:1rem;border:1px dashed #917c66;border-radius:10px;background:#eee3cf}.audio-placeholder strong{display:block}.audio-placeholder small{color:#765f50}.footer{text-align:center;padding:2rem;color:#d8c8b1;background:#211820}.notice{padding:.8rem 1rem;background:#4a234d;color:#fff;text-align:center;font-size:.88rem}.backtop{position:fixed;right:1rem;bottom:1rem;width:44px;height:44px;border-radius:50%;border:1px solid #b88a4b;background:#2d202c;color:#fff;cursor:pointer}.roll{display:inline-grid;place-items:center;width:58px;height:58px;margin:.5rem auto;border-radius:50%;background:#4a234d;color:#fff;font-size:1.6rem;font-weight:bold}.roll.animate{animation:roll .7s ease}@keyframes roll{0%{transform:rotate(0) scale(.8)}60%{transform:rotate(540deg) scale(1.15)}100%{transform:rotate(720deg) scale(1)}}
@media(max-width:600px){.hero{min-height:64vh}.section{padding:2.3rem 1rem}.chapter{padding:1.2rem 1rem 3rem}.prose p{font-size:1.02rem}.nav{grid-template-columns:1fr 1fr}.nav .contents{grid-column:1/-1;grid-row:2;text-align:center}.chapter-art{margin:1.6rem 0}.topbar{font-size:.85rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.soundtrack-player,.inline-audio{margin:2rem 0;padding:1rem;border:1px solid #60708e;border-radius:10px;background:#e0e5ef}.inline-audio{margin:1rem 0 0;background:#f4f6fb}.soundtrack-player strong,.soundtrack-player small,.inline-audio strong{display:block}.soundtrack-player small{color:#5b6474;margin:.2rem 0 .7rem}.soundtrack-player audio,.inline-audio audio{display:block;width:100%;margin-top:.7rem;max-width:100%}


/* === VARIANT D RESTORATION — visible even before JavaScript === */
:root{--display:"Lancelot","Palatino Linotype","Book Antiqua",Palatino,serif;--prose:"EB Garamond",Garamond,"Baskerville","Times New Roman",serif;--hand:"Kalam","Segoe Print","Bradley Hand",cursive;--purple:#56305f;--purple2:#321c3b;--brightgold:#c89a42}
body{font-family:var(--prose);font-size:18px;background-color:#191319}
.brand,.hero h1,.chapter-head h1,.section h2,.chapter-no,.complete,.special-title,.btn,.toc small{font-family:var(--display)}
.hero h1,.chapter-head h1{font-variant:normal;letter-spacing:.025em;font-weight:400}
.hero h1{font-size:clamp(3rem,8vw,6.25rem)}
.chapter-head h1{font-size:clamp(2.65rem,7vw,4.5rem)}
.section h2{font-size:clamp(2.25rem,5vw,3.25rem);font-weight:400}
.prose{font-family:var(--prose);font-size:1.08rem}.prose p{font-size:1.13rem;line-height:1.78}
.special{position:relative;border-width:2px;border-radius:5px;padding:1.25rem 1.4rem;box-shadow:0 7px 18px #2a170f2e,inset 0 0 28px #fff5}
.special:before,.special:after{content:"✦";position:absolute;color:#9b6a22;font-size:.85rem}.special:before{top:.35rem;left:.45rem}.special:after{bottom:.35rem;right:.45rem}
.special-title{font-size:1.22rem;letter-spacing:.08em;margin-bottom:.5rem}
.special.gm{font-family:var(--hand);font-size:1.08rem;background:linear-gradient(135deg,#f4e7c8,#ead5aa);border-color:#9c7541;transform:rotate(-.2deg)}
.special.gm .special-title{font-family:var(--hand);font-weight:700;font-size:1.35rem;letter-spacing:.03em}
.special.achievement{background:linear-gradient(135deg,#fff2c7,#ead18b);border-color:#aa7625}.special.achievement .special-title{color:#68420c}
.special.dice{overflow:hidden;text-align:center;background:radial-gradient(circle at 50% 20%,#f6eef8 0,#e5d8e9 55%,#d0bdd7 100%);border-color:#76507d}
.special.dice:before,.special.dice:after{color:#6f4a78}
.special.inventory{background:linear-gradient(135deg,#eef1df,#d9dfc3);border-color:#6e7d56}.special.rule{background:linear-gradient(135deg,#fae9df,#ead0c3);border-color:#9d5546}.special.secret{background:linear-gradient(135deg,#eee9f0,#ddd4e2);border-color:#6e5a76}.special.soundtrack,.soundtrack-player{background:linear-gradient(135deg,#e9edf5,#d7deeb);border-color:#536886}
/* Real visible d20: no emoji, no JS required to make it appear. */
.roll{--die:#633b70;position:relative;display:grid;place-items:center;width:104px;height:96px;margin:1rem auto .7rem;border-radius:0;background:linear-gradient(145deg,#8b61a0 0%,#60376f 48%,#3d2149 100%);clip-path:polygon(50% 0%,95% 25%,88% 78%,50% 100%,12% 78%,5% 25%);color:#fff8db;font-family:var(--display);font-size:2.75rem;font-weight:400;line-height:1;text-shadow:0 2px 3px #0009;filter:drop-shadow(0 7px 5px #2b15305c);isolation:isolate;cursor:pointer}
.roll:before{content:"";position:absolute;inset:7px;clip-path:polygon(50% 0%,95% 25%,88% 78%,50% 100%,12% 78%,5% 25%);background:linear-gradient(30deg,transparent 48%,#d9b8e055 49% 51%,transparent 52%),linear-gradient(150deg,transparent 48%,#d9b8e055 49% 51%,transparent 52%),linear-gradient(90deg,transparent 49%,#d9b8e044 50%,transparent 51%);z-index:-1}
.roll:after{content:"";position:absolute;inset:2px;clip-path:inherit;border:2px solid #d9b56f;z-index:2;pointer-events:none}
.roll[data-roll="20"]{background:linear-gradient(145deg,#e2bd61 0%,#9b6a22 50%,#5e3b0d 100%);color:#fff9df;filter:drop-shadow(0 7px 7px #6e4c205c)}
.roll[data-roll="20"]:before{background:linear-gradient(30deg,transparent 48%,#fff1a877 49% 51%,transparent 52%),linear-gradient(150deg,transparent 48%,#fff1a877 49% 51%,transparent 52%),linear-gradient(90deg,transparent 49%,#fff1a855 50%,transparent 51%)}
.roll.animate{animation:d20tumble .8s cubic-bezier(.2,.8,.3,1)}@keyframes d20tumble{0%{transform:rotate(-22deg) scale(.72)}35%{transform:rotate(18deg) scale(1.12)}68%{transform:rotate(-8deg) scale(.96)}100%{transform:rotate(0) scale(1)}}
@media(max-width:600px){body{font-size:17px}.prose p{font-size:1.07rem}.roll{width:92px;height:86px;font-size:2.45rem}}


/* === QUESTIONABLE HEROISM CHAPTER-OPENING D20 ORNAMENT ===
   Decorative only. Separate from canonical story-roll dice. */

/* Questionable Heroism series mark: the deliberately prestigious NATURAL 1. */
.chapter-series-emblem{display:flex;align-items:center;justify-content:center;gap:.85rem;margin:1.05rem auto .35rem;color:#5b3a61}
.chapter-series-emblem .orn-line{position:relative;display:block;width:clamp(52px,10vw,92px);height:1px;background:currentColor;opacity:.72}
.chapter-series-emblem .orn-line:after{content:"";position:absolute;top:50%;width:7px;height:7px;border:1px solid currentColor;transform:translateY(-50%) rotate(45deg);background:var(--paper,#f5ead1)}
.chapter-series-emblem .orn-left:after{right:-2px}.chapter-series-emblem .orn-right:after{left:-2px}
.nat1-emblem{display:block;width:68px;height:auto;overflow:visible;filter:drop-shadow(0 2px 1px rgba(54,31,55,.15))}
.nat1-emblem .die-outline{fill:rgba(91,58,97,.035);stroke:currentColor;stroke-width:3.2;stroke-linejoin:round}
.nat1-emblem .die-facet,.nat1-emblem .die-center{fill:none;stroke:none}
.nat1-emblem .die-ridge{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.nat1-emblem .nat1-number{fill:currentColor;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:31px;dominant-baseline:middle}
.chapter-head:hover .nat1-emblem{transform:rotate(-2deg) translateY(-1px);transition:transform .25s ease}
@media(max-width:600px){.chapter-series-emblem{gap:.62rem}.chapter-series-emblem .orn-line{width:46px}.nat1-emblem{width:58px}}
@media(prefers-reduced-motion:reduce){.chapter-head:hover .nat1-emblem{transform:none;transition:none}}

/* NAT-1 SERIES EMBLEM — visibility-locked review */
.chapter-series-emblem{display:flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important;gap:1rem!important;margin:1.15rem auto .65rem!important;min-height:92px!important;color:#5b3a61!important}
.chapter-series-emblem .nat1-emblem{display:block!important;visibility:visible!important;opacity:1!important;width:96px!important;height:86px!important;flex:0 0 96px!important}
.chapter-series-emblem .orn-line{display:block!important;width:88px!important;height:2px!important;background:#8a673c!important;opacity:.9!important}
@media(max-width:600px){.chapter-series-emblem .nat1-emblem{width:82px!important;height:74px!important;flex-basis:82px!important}.chapter-series-emblem .orn-line{width:48px!important}}

/* Recovered chapter-specific illustrated dice — exact supplied PNG assets */
.chapter-die-art{display:flex;justify-content:center;align-items:center;margin:1rem auto 1.35rem;min-height:116px}
.chapter-die-art img{display:block;width:clamp(104px,14vw,150px);height:auto;max-width:42vw;filter:drop-shadow(0 7px 8px rgba(44,26,44,.20));transition:transform .18s ease}
.chapter-die-art img:hover{transform:translateY(-2px) scale(1.02)}
@media(max-width:480px){.chapter-die-art{min-height:100px;margin:.8rem auto 1.1rem}.chapter-die-art img{width:112px;max-width:38vw}}
@media(prefers-reduced-motion:reduce){.chapter-die-art img{transition:none}.chapter-die-art img:hover{transform:none}}

/* Novel 1 Meet the Party: final portrait -> full character sheet interaction */
.party-hint{text-align:center;margin:-.7rem auto 1.5rem;color:#66513f;font-style:italic}
button.party-card{font:inherit;color:inherit;padding:0;cursor:pointer;box-shadow:0 3px 10px #0001;transition:transform .16s ease,box-shadow .16s ease}
button.party-card:hover,button.party-card:focus-visible{transform:translateY(-3px);box-shadow:0 8px 20px #0003;outline:2px solid #8d6333;outline-offset:2px}
.party-card span{display:block;padding:0 .6rem .7rem;font-size:.78rem;color:#755f4b}
.character-modal[hidden]{display:none}.character-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:clamp(.5rem,2vw,1.25rem)}
.character-modal-backdrop{position:absolute;inset:0;background:#100b10e8;backdrop-filter:blur(3px)}
.character-modal-dialog{position:relative;z-index:1;width:min(94vw,920px);height:min(94vh,1100px);display:flex;flex-direction:column;background:#211820;border:1px solid #c79a55;border-radius:14px;box-shadow:0 18px 70px #000c;overflow:hidden}
.character-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;color:#f5e9d0;border-bottom:1px solid #8f6a3c}.character-modal-bar h2{font-size:1.15rem;margin:0;font-family:var(--display)}
.character-modal-close{width:42px;height:42px;border-radius:50%;border:1px solid #d9b56f;background:#f2dfb5;color:#2a1928;font-size:1.8rem;line-height:1;cursor:pointer}
.character-sheet-scroll{overflow:auto;flex:1;background:#171017;text-align:center;padding:.75rem}.character-sheet-scroll img{display:block;max-width:100%;height:auto;margin:0 auto;box-shadow:0 6px 30px #0008}
body.sheet-open{overflow:hidden}
@media(max-width:600px){.character-modal{padding:0}.character-modal-dialog{width:100vw;height:100dvh;border-radius:0;border:0}.character-sheet-scroll{padding:.35rem}}