@font-face{font-family:Preciosa;src:url('assets/preciosa-regular.woff2') format('woff2');font-display:swap}@font-face{font-family:Kurale;src:url('assets/kurale-cyrillic.woff2') format('woff2');font-display:swap;unicode-range:U+0400-052F}@font-face{font-family:Kurale;src:url('assets/kurale-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-024F}@font-face{font-family:PTSerif;src:url('assets/pt-serif-regular-cyrillic.woff2') format('woff2');font-display:swap;unicode-range:U+0400-052F}@font-face{font-family:PTSerif;src:url('assets/pt-serif-regular-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-024F}
:root{--bright:#e2edf1;--metal:#b5cbd4;--accent:#9ec6d9;--deep:#070e17;--paper:#ddd9ce;--ink:#34342f}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100svh;background:var(--deep);color:var(--bright);font-family:Kurale,Georgia,serif}.scene,.veil,.motes{position:fixed;inset:0;pointer-events:none}.scene{background:url('assets/anduin-light.jpg') left center/cover no-repeat;filter:saturate(.5) brightness(.55);transform:scale(1.03)}.veil{background:linear-gradient(90deg,rgba(4,12,22,.65),rgba(6,16,29,.18) 54%,rgba(4,10,18,.58)),linear-gradient(0deg,#070e17 0%,transparent 45%,rgba(5,12,21,.5) 100%)}.header{height:112px;padding:24px 5vw;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--metal)}.brand svg{height:61px;width:52px}.brand>span{font:30px/1.2 Kurale,serif;letter-spacing:.18em}.brand small{display:block;font-size:7px;letter-spacing:.26em;margin-top:5px}.topnav{display:flex;gap:36px;align-items:center}.topnav a,.topnav button{text-decoration:none;color:var(--metal);font:16px Kurale,serif;background:none;border:none;padding:10px 0;cursor:pointer}.topnav a:hover,.topnav button:hover{color:white}.language{font:12px PTSerif,serif;color:var(--metal);letter-spacing:.06em}.language span{padding:0 9px;opacity:.4}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,.story:focus-visible{outline:2px solid var(--accent);outline-offset:7px}.intro{position:relative;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;max-width:1400px;margin:auto;padding:32px 7vw 74px;min-height:calc(100svh - 154px);gap:45px}.kicker{display:flex;align-items:center;gap:14px;font:11px PTSerif,serif;color:var(--accent);letter-spacing:.11em}.kicker span{width:32px;height:1px;background:var(--metal);opacity:.7}.intro h1{font:normal clamp(42px,5.5vw,80px)/1.18 Preciosa,Kurale,serif;letter-spacing:.015em;margin:34px 0 16px;text-shadow:0 3px 28px #000;max-width:650px}.ornament,.divider{height:26px;background:url('assets/grimoire-divider-v1.png') center/130px auto no-repeat}.ornament{background-position:left center;opacity:.5;width:160px;filter:invert(1)}.subtitle{font:22px/1.55 Kurale,serif;color:#becbd0;margin:15px 0 30px}.read-button{border:1px solid #688396;color:var(--bright);padding:13px 24px;background:linear-gradient(#243847b3,#0a1928c4);font:19px Kurale,serif;cursor:pointer;box-shadow:inset 0 0 0 3px #0b152340,0 4px 20px #0005}.read-button span{margin-left:34px;color:var(--accent)}.read-button:hover{border-color:#bdd8e3;background:#2a435acc}.cover-area{text-align:center;perspective:1400px}.cover{border:0;background:none;padding:0;cursor:pointer;transform:rotateY(-13deg) rotateZ(-2deg);transition:transform .6s;filter:drop-shadow(20px 25px 25px #0009);width:min(350px,100%)}.cover:hover{transform:rotateY(-5deg) rotateZ(0) translateY(-8px)}.cover img{width:100%;height:auto;display:block}.cover-hint{font:13px Kurale,serif;color:var(--metal);margin:24px 0 0}.reader{position:relative;max-width:1400px;padding:8px 3vw 24px;margin:auto;text-align:center}.book{position:relative;display:grid;grid-template-columns:37% 63%;width:100%;height:min(76vh,850px);min-height:470px;padding:5.2% 5.5% 5.4%;gap:0;background:url('assets/folio-binding-v1.png') center/100% 100% no-repeat;filter:drop-shadow(0 22px 34px #000a);isolation:isolate}.book::before{content:'';position:absolute;inset:7% 6%;background:#d4d2c9;z-index:-1}.left-page,.right-page{color:var(--ink);display:flex;flex-direction:column;min-height:0;min-width:0;text-align:left}.left-page{padding:8px 27px 0 10px;border-right:1px solid #74716440;background:linear-gradient(90deg,transparent 78%,#5d55451b)}.right-page{padding:8px 18px 0 32px;background:linear-gradient(90deg,#4d47301a,transparent 10%)}.page-label{font:9px/1.4 PTSerif,serif;letter-spacing:.13em;color:#6c6c62;text-align:center;margin-bottom:12px}.left-page h2{font:normal 29px Kurale,serif;text-align:center;margin:0}.divider{height:26px;flex-shrink:0;margin:0 0 10px;opacity:.6}.contents{overflow:auto;scrollbar-width:thin;scrollbar-color:#979084 transparent;padding-right:8px}.chapter-link{font:15px/1.3 Kurale,serif;display:grid;grid-template-columns:25px 1fr;gap:8px;width:100%;border:none;border-bottom:1px solid #7b796c35;padding:11px 0;text-align:left;background:none;color:#57564c;cursor:pointer}.chapter-link>span:first-child{font-size:13px;opacity:.7}.chapter-link[aria-current=page]{color:#192f3c;text-shadow:0 0 1px #192f3c;border-bottom-color:#69848b}.chapter-link:hover{color:#15191b}.folio{text-align:center;padding-top:11px;font:12px PTSerif,serif;color:#79776d}.reader-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #79796c40;padding:0 0 10px;margin-bottom:12px;gap:12px}.reader-toolbar>span{font:13px Kurale,serif;color:#6d6c61;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-toolbar button{display:none}.story{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#9c9788 transparent;padding:0 15px 18px 2px;font:17px/1.7 PTSerif,Georgia,serif;overscroll-behavior:contain}.story p{margin:0 0 16px;overflow-wrap:anywhere}.story h2{font:normal 29px/1.3 Kurale,serif;margin:8px 0 23px}.story h3{font:normal 22px/1.4 Kurale,serif;margin:30px 0 18px}.page-controls{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid #77746430;margin-top:auto;font:12px Kurale,serif;color:#747266}.page-controls button{font:23px Kurale,serif;color:#3f4a4b;border:0;background:none;cursor:pointer;padding:3px 12px}.page-controls button:disabled{opacity:.25;cursor:default}.close-book{border:0;background:none;color:var(--bright);font:20px Kurale,serif;padding:18px;cursor:pointer;text-shadow:0 3px 10px #000}.close-book:hover{color:var(--accent)}footer{position:relative;display:flex;justify-content:space-between;gap:20px;padding:17px 5vw;border-top:1px solid #a6c6d31a;font:9px PTSerif,serif;letter-spacing:.1em;color:#869cab}footer a{color:#869cab;text-decoration:none}.motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:#c5e5ed;opacity:.3;box-shadow:0 0 10px #a6d1dd;animation:drift 14s ease-in-out infinite}.motes i:nth-child(1){left:8%;top:20%}.motes i:nth-child(2){left:30%;top:68%;animation-delay:-5s}.motes i:nth-child(3){left:52%;top:15%;animation-delay:-3s}.motes i:nth-child(4){left:75%;top:48%;animation-delay:-10s}.motes i:nth-child(5){left:89%;top:25%;animation-delay:-7s}.motes i:nth-child(6){left:41%;top:83%;animation-delay:-2s}@keyframes drift{50%{transform:translate(18px,-70px);opacity:.65}}
@media(min-width:1600px){.intro{gap:100px}.cover{width:390px}.book{height:78vh}}@media(max-width:1000px){.header{height:90px;padding:18px 4vw}.topnav{gap:18px}.topnav a,.topnav button{font-size:14px}.brand>span{font-size:24px}.brand svg{height:48px;width:40px}.intro{padding:25px 6vw 45px;min-height:calc(100svh - 146px);gap:20px}.cover{width:290px}.intro h1{font-size:56px}.book{grid-template-columns:34% 66%;height:76vh;padding:5%}.left-page{padding-right:17px}.right-page{padding-left:23px}.chapter-link{font-size:13px}.story{font-size:16px}}@media(max-width:700px){.topnav{display:none}.header{height:80px}.intro{display:flex;flex-direction:column;padding:25px 24px 38px;gap:30px;text-align:center}.kicker{justify-content:center;font-size:9px}.intro h1{font-size:48px;margin:23px 0 12px}.ornament{margin:auto;background-position:center}.subtitle{font-size:19px;margin-bottom:20px}.cover{width:205px}.cover-hint{font-size:11px;margin-top:17px}.reader{padding:7px 12px 12px}.book{display:block;height:calc(100svh - 155px);min-height:430px;padding:35px 24px 30px;background-image:none;background-color:#d8d5cb;border:8px ridge #57636a;border-radius:7px;box-shadow:inset 0 0 18px #60574350}.book::before{display:none}.left-page{display:none;position:absolute;inset:24px;background:#d8d5cb;z-index:2;padding:10px;border:0}.book.contents-open .left-page{display:flex}.right-page{height:100%;padding:0;background:none}.page-label{font-size:8px}.reader-toolbar button{display:block;border:0;background:none;font-size:22px;color:#4b514c;cursor:pointer}.story{font-size:16px;padding-right:9px}.story h2{font-size:25px}.story h3{font-size:21px}.contents{height:100%}.chapter-link{font-size:15px}.close-book{padding:14px;font-size:17px}footer{font-size:8px;flex-wrap:wrap;padding:14px 20px}footer span:nth-child(2){display:none}.scene{background-position:40% center}.veil{background:linear-gradient(0deg,#070e17,rgba(5,13,23,.5) 55%,rgba(4,12,21,.5))}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* The folio keeps the illustrated parchment and its original centre binding. */
.book{grid-template-columns:50% 50%;background:none;height:calc(100svh - 230px);min-height:470px;padding:5.8% 8.5%;max-width:1110px;margin:auto}.book::before{inset:0;background:url('assets/folio-binding-v1.png') center/100% 100% no-repeat;filter:grayscale(.94) brightness(1.08)}.left-page{padding-right:32px;background:none;border:0}.right-page{padding-left:30px;padding-right:4px;background:none}.cover img{filter:grayscale(.92) brightness(.9)}.cover-title{position:absolute;inset:13% 13% auto;display:flex;flex-direction:column;align-items:center;color:#dce1e0;text-shadow:0 2px 4px #000;pointer-events:none}.cover-title small{font:9px PTSerif,serif;letter-spacing:.17em}.cover-title strong{font:normal 35px Preciosa,serif;letter-spacing:.1em;margin-top:10px}.cover-subtitle{position:absolute;inset:auto 12% 13%;color:#dde1dc;font:26px/1.05 Kurale,serif;pointer-events:none;text-shadow:0 2px 4px #000}.cover-subtitle small{display:block;font:8px PTSerif,serif;letter-spacing:.14em;margin-top:15px}.intro h1{font-size:clamp(42px,5.1vw,74px)}@media(max-width:1000px){.book{padding:6% 8%;height:calc(100svh - 200px)}.left-page{padding-right:20px}.right-page{padding-left:22px}.chapter-link{font-size:13px}}@media(max-width:700px){.book{display:block;padding:30px 22px 25px;height:calc(100svh - 155px);min-height:430px;background:#d8d5cb}.book::before{display:none}.right-page{padding:0}.left-page{background:#d8d5cb;padding:10px}.cover-title strong{font-size:25px}.cover-title small{font-size:6px}.cover-subtitle{font-size:20px}.cover-subtitle small{font-size:6px}.intro h1{font-size:48px}}

.scene{background-position:right center;filter:saturate(.5) brightness(.72)}@media(max-width:700px){.scene{background-position:65% center}}

.book{padding-bottom:7.5%}@media(max-width:700px){.book{padding-bottom:25px}}
/* Keep the illustrated book visible on narrow screens as well. */
@media(max-width:700px){.book{border:0;border-radius:0;background:none;box-shadow:none;padding:46px 36px 42px}.book::before{display:block;inset:0;background:url('assets/folio-binding-v1.png') right center/200% 100% no-repeat;filter:grayscale(.94) brightness(1.08)}.book.contents-open .left-page{inset:36px 28px}.right-page{position:relative}}
/* Readable book typography, with decorative faces reserved for the cover. */
.story{font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.65;letter-spacing:normal;color:#292820;padding:0 14px 20px 1px;overflow-wrap:break-word;hyphens:auto}
.story p{margin:0 0 .8em;text-indent:1.25em;overflow-wrap:break-word}
.story h2{font-family:PTSerif,Georgia,serif;font-size:27px;font-weight:400;line-height:1.3;letter-spacing:normal;text-wrap:balance;margin:6px 0 24px}
.story h3{font-family:PTSerif,Georgia,serif;font-size:21px;font-weight:600;line-height:1.4;text-wrap:balance;margin:28px 0 16px}
.story h2+p,.story h3+p,.chapter>p:first-child{text-indent:0}
.chapter-link{font-family:PTSerif,Georgia,serif;font-size:14px;line-height:1.45;padding:10px 0}
.reader-toolbar>span,.page-controls{font-family:PTSerif,Georgia,serif}
@media(max-width:700px){.story{font-size:17px;line-height:1.6;padding-right:7px}.story h2{font-size:24px}.story h3{font-size:20px}.chapter-link{font-size:15px}}
@media(min-width:701px){.book{height:calc(100svh - 190px);min-height:470px}.story h2{font-size:24px;margin:5px 0 16px}.story h3{font-size:19px;margin:20px 0 13px}}
.page-controls button{font-family:Arial,sans-serif;color:#32352f}
/* Keep chapter numbers and text within the parchment margins. */
.left-page{padding-left:34px;padding-right:26px;overflow:hidden}
.contents{flex:1;min-height:0;padding:0 9px 8px 0;overflow-x:hidden}
.chapter-link{grid-template-columns:22px minmax(0,1fr);gap:6px;padding:8px 0;font-size:13px;line-height:1.35}
.chapter-link>span{min-width:0;overflow-wrap:break-word}
.chapter-link>span:first-child{font-size:11px;text-align:center}
.story h2{font-size:22px;line-height:1.3;margin-bottom:14px;overflow-wrap:break-word}
.story h3{font-size:18px;line-height:1.35;margin:18px 0 11px;overflow-wrap:break-word}
.page-controls{margin-bottom:15px;flex-shrink:0}
@media(max-width:1000px) and (min-width:701px){.left-page{padding-left:23px;padding-right:18px}.chapter-link{font-size:12px}}
@media(max-width:700px){.book.contents-open .left-page{inset:46px 40px;padding:6px 4px 12px}.chapter-link{font-size:13px;padding:8px 0}.story h2{font-size:22px}.story h3{font-size:18px}.page-controls{margin-bottom:7px}}
/* Stormwind artwork: ivory stone, Alliance blue and aged gold. */
:root{--bright:#f3eddd;--metal:#ac9162;--accent:#d4b978;--deep:#152336;--paper:#e6dfcd;--ink:#302c25}
body{background:#18283c}
.scene{background-image:url('assets/anduin-stormwind.png');background-position:left center;filter:saturate(.88) brightness(.95);transform:none}
.veil{background:linear-gradient(180deg,rgba(246,242,229,.8) 0,rgba(245,242,230,.08) 115px,transparent 40%,rgba(9,22,38,.35) 75%,rgba(9,22,38,.87) 100%)}
.header{background:linear-gradient(180deg,rgba(246,242,229,.66),rgba(246,242,229,.14));border-bottom:1px solid #846b3e32}
.brand,.topnav a,.topnav button,.language{color:#25364b;text-shadow:0 1px 5px #f5f0e7a0}
.brand svg{filter:sepia(.5) saturate(.75)}
.topnav a:hover,.topnav button:hover{color:#75572c}
.reader{padding-top:24px}
.book::before{filter:grayscale(.3) brightness(1.04)}
.book{filter:drop-shadow(0 20px 22px #07122080)}
.cover img{filter:grayscale(.3) brightness(.96)}
.close-book{font-size:18px;background:#182b40e6;border:1px solid #b39a663f;padding:9px 25px;margin-top:18px;color:#eee4ce;text-shadow:none;box-shadow:0 6px 18px #09142340}
.close-book:hover{background:#243b53;color:#f9e3af}
footer{background:#0e1e30a6;color:#cfbb92;border-top-color:#c9ad6f35}
.motes i{background:#ffe3a5;box-shadow:0 0 10px #ffd37d}
.chapter-link[aria-current=page]{color:#5d4324;text-shadow:none;border-bottom-color:#9c784d}
.chapter-link:hover{color:#69491f}
.story{color:#302b23}
.story::selection{background:#c0a06466}
.intro-copy{padding:22px 30px;background:#f4efe2de;border:1px solid #ad956844;box-shadow:0 12px 40px #16253b18}
.intro h1{color:#24364a;text-shadow:none;font-size:clamp(40px,4.2vw,64px)}
.kicker,.subtitle,.cover-hint{color:#34465a}
.ornament{filter:none;opacity:.7}
.read-button{background:#20364a;color:#f2e4c9;border-color:#b6975c}
.read-button:hover{background:#2b455e;border-color:#ddbd7b}
@media(min-width:1200px){.book{width:calc(100% - 230px);max-width:980px;margin-left:auto;margin-right:0}.close-book{position:relative;left:115px}.intro{grid-template-columns:1fr .8fr;padding-left:29vw;gap:35px}.intro-copy{padding:25px}.intro h1{font-size:52px}.cover{width:265px}}
@media(max-width:1199px) and (min-width:701px){.book{width:100%;max-width:1020px;margin:auto}.intro-copy{padding:22px}.intro h1{font-size:48px}}
@media(max-width:700px){.scene{background-position:23% top}.veil{background:linear-gradient(180deg,#f3eee580,transparent 25%,#102035b3 75%,#102035)}.header{background:#f3eee5b8}.reader{padding-top:14px}.book::before{filter:grayscale(.3) brightness(1.04)}.close-book{font-size:16px;margin-top:12px}.intro-copy{padding:18px}.intro h1{font-size:43px}.cover-hint{color:#e5d6b7}}
@media(max-width:700px){.book{padding:48px 64px 78px 32px}.story{font-size:16px;line-height:1.6}.story h2{font-size:20px}.story h3{font-size:17px}.book.contents-open .left-page{inset:48px 62px 76px 30px}.page-controls{margin-bottom:0}}
/* A quiet navigation line and a clear reading surface over softened artwork. */
.scene{filter:blur(3px) saturate(.8) brightness(.88);transform:scale(1.025)}
.veil{background:linear-gradient(180deg,#f5f0e494 0,transparent 135px),linear-gradient(0deg,#0b1b30b8,transparent 75%),linear-gradient(90deg,#14223710,#152b4526)}
.header{height:96px;padding:20px 4vw;max-width:1680px;margin:auto;background:none;border:0;gap:36px}
.topnav{display:flex;gap:36px;margin-left:auto}
.topnav a{font-family:PTSerif,Georgia,serif;font-size:15px;font-weight:400;line-height:1.5;padding:8px 0;background:none;border:0;color:#213349;text-shadow:0 1px 8px #fffae6c7;white-space:nowrap}
.topnav a:hover{color:#755328}
.reader{max-width:1440px;padding:12px 40px 24px}
.book{height:clamp(450px,calc(100svh - 170px),720px);padding:clamp(42px,4vw,62px) clamp(64px,6.5vw,96px) clamp(66px,5.5vw,86px);max-width:1040px;width:100%;margin:auto}
.book{filter:drop-shadow(0 20px 24px #071b3280)}
.left-page{padding-left:25px;padding-right:26px}
.right-page{padding-left:28px;padding-right:8px}
.reader-toolbar{min-height:24px;margin-bottom:14px}
.close-book{position:static;left:auto;justify-self:center;background:none;border:0;box-shadow:none;padding:10px 20px;margin:12px 0 0;color:#efe6d2;font:16px PTSerif,Georgia,serif;text-shadow:0 2px 8px #102032}
.close-book:hover{background:none;color:#ffe4ab}
@media(min-width:1200px){.reader{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0}.book,.close-book{grid-column:2}.book{width:100%;margin:auto}}
@media(min-width:701px) and (max-width:1199px){.header{padding:16px 3vw;gap:22px}.topnav{gap:24px}.topnav a{font-size:14px}.reader{padding:12px 20px 20px}.book{padding:46px 8.5% 72px}.left-page{padding-left:24px;padding-right:22px}.right-page{padding-left:25px}}
@media(max-width:700px){.header{height:auto;min-height:106px;display:flex;flex-wrap:wrap;justify-content:center;padding:14px 16px 8px;gap:10px}.brand{gap:9px}.brand svg{width:29px;height:35px}.brand>span{font-size:21px}.topnav{display:flex;justify-content:center;flex-wrap:wrap;width:100%;gap:5px 17px;margin:0}.topnav a{font-size:11px;padding:4px 0}.scene{filter:blur(2px) saturate(.8) brightness(.88)}.reader{padding:6px 12px 14px}.book{height:calc(100svh - 166px);min-height:430px;padding:43px 62px 74px 32px}.left-page{padding:6px 4px 12px}.right-page{padding:0}.book.contents-open .left-page{inset:43px 60px 72px 30px}.close-book{font-size:14px;padding:8px 14px;margin-top:8px}.reader-toolbar{margin-bottom:11px}}