:root{--scroll-gold:#d5a44a;--scroll-ink:#302315;--scroll-navy:#061426;--scroll-paper:#ead7a8}
.story-overlay{position:fixed;inset:0;z-index:5000;display:none;overflow:auto;background:rgba(1,7,17,.90);color:var(--scroll-ink);isolation:isolate}
.story-overlay.is-open{display:block;animation:veilIn .35s ease both}
.story-overlay *{box-sizing:border-box}
.story-backdrop{position:fixed;inset:0;background:radial-gradient(circle at 52% 72%,rgba(255,188,65,.12),transparent 25%),linear-gradient(rgba(2,10,22,.75),rgba(2,10,22,.93));backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.story-magic{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.story-magic:before{content:"";position:absolute;left:50%;bottom:-6vh;width:42vw;height:42vw;min-width:420px;min-height:420px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,235,168,.8) 0,rgba(255,187,55,.28) 18%,rgba(255,165,36,.08) 38%,transparent 68%);filter:blur(10px);animation:magicBreathe 3s ease-in-out infinite}
.story-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff1b6;box-shadow:0 0 7px #ffd36c,0 0 16px rgba(255,183,55,.9);animation:sparkRise var(--dur,4s) linear var(--delay,0s) infinite}
.story-close{position:fixed;right:24px;top:20px;z-index:12;width:50px;height:50px;border-radius:50%;border:1px solid rgba(232,189,87,.7);background:rgba(5,17,32,.92);color:#e8bd57;font:300 30px/1 Arial;cursor:pointer;box-shadow:0 0 22px rgba(229,173,54,.14)}
.story-stage{position:relative;z-index:3;min-height:100vh;padding:74px 28px 52px;display:grid;grid-template-columns:minmax(170px,220px) minmax(0,980px);gap:0;justify-content:center;align-items:start}
.story-rail{position:sticky;top:92px;z-index:5;padding-top:22px;filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}
.story-rail-title{margin-left:20px;width:180px;min-height:156px;padding:24px 18px 20px;text-align:center;color:#e4bd6b;background:linear-gradient(180deg,#112239,#071326);border:1px solid #8d6a31;clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);box-shadow:inset 0 0 0 3px rgba(215,171,79,.08)}
.rail-feather{display:block;font-size:27px;margin-bottom:8px}.story-rail-title strong{display:block;font:24px/1.1 Georgia,serif;text-transform:uppercase}.story-rail-title small{display:block;margin-top:11px;font:12px/1.4 Georgia,serif;letter-spacing:.08em;text-transform:uppercase}
.story-medallions{margin-top:-3px;display:flex;flex-direction:column;align-items:flex-end}.story-medallion{position:relative;width:180px;min-height:84px;padding:14px 13px 14px 46px;border:1px solid #9c7136;border-right:0;background:linear-gradient(90deg,#d8bf89,#f1dfb4 55%,#d5b77d);color:#3a2815;text-align:left;cursor:pointer;box-shadow:0 8px 16px rgba(0,0,0,.24),inset 0 0 24px rgba(93,61,25,.09);transition:.25s ease;clip-path:polygon(0 0,100% 5%,94% 50%,100% 95%,0 100%,5% 50%)}
.story-medallion+.story-medallion{margin-top:-1px}.story-medallion:before{content:"";position:absolute;left:15px;top:50%;width:20px;height:20px;transform:translateY(-50%);border:1px solid #78501e;border-radius:50%;background:radial-gradient(circle,#c69743 0 28%,transparent 30%)}
.story-medallion small{display:block;font:9px/1.1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.story-medallion strong{display:block;margin-top:5px;font:15px/1.2 Georgia,serif}.story-medallion span{display:block;margin-top:4px;font:11px/1.2 Georgia,serif;opacity:.78}.story-medallion.active{transform:translateX(9px);background:linear-gradient(90deg,#f0d791,#f9e9be 55%,#e3bd67);box-shadow:0 0 22px rgba(230,174,58,.45),0 10px 20px rgba(0,0,0,.3)}
.story-scroll{position:relative;width:min(100%,980px);filter:drop-shadow(0 34px 50px rgba(0,0,0,.62));transform:rotate(-.25deg);transform-origin:50% 10%;opacity:0}
.story-overlay.is-open .story-scroll{animation:scrollDrop .82s cubic-bezier(.19,.86,.24,1.03) .08s forwards}
.scroll-paper{position:relative;min-height:720px;padding:58px 66px 46px;background:
radial-gradient(circle at 18% 17%,rgba(112,75,28,.09),transparent 20%),
radial-gradient(circle at 79% 70%,rgba(87,55,22,.07),transparent 24%),
linear-gradient(90deg,rgba(100,64,26,.16),transparent 7%,transparent 93%,rgba(100,64,26,.16)),
linear-gradient(#ead6a7,#f2e2bd 47%,#e8d19d);border-left:1px solid #8b622c;border-right:1px solid #8b622c;box-shadow:inset 0 0 55px rgba(103,65,22,.2),inset 0 0 0 1px rgba(255,244,207,.4);overflow:hidden}
.scroll-paper:before{content:"";position:absolute;inset:18px;border:1px solid rgba(99,67,28,.35);pointer-events:none}.scroll-paper:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;background-image:repeating-radial-gradient(circle at 10% 20%,rgba(73,48,20,.25) 0 1px,transparent 1px 5px)}
.scroll-rod{height:42px;margin:0 -26px;position:relative;display:flex;align-items:center;z-index:4}.scroll-rod span{flex:1;height:28px;border-radius:14px;background:linear-gradient(#b3823c,#71491f 45%,#c89a4b 55%,#6b421c);border:1px solid #43280f;box-shadow:0 4px 8px rgba(0,0,0,.42)}.scroll-rod i{display:block;width:45px;height:45px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e0b160 0 18%,#9c6d31 45%,#5a3515 72%);border:1px solid #3a210d;box-shadow:0 5px 10px rgba(0,0,0,.5)}
.scroll-heading{text-align:center;position:relative;z-index:2}.scroll-chapter{font:700 12px/1 Arial,sans-serif;letter-spacing:.19em;text-transform:uppercase;color:#7a5725}.scroll-era{margin-top:8px;font:54px/.95 Georgia,serif;color:#3a2816}.scroll-title{margin:9px 0 0;font:700 31px/1.1 Georgia,serif;text-transform:uppercase;letter-spacing:.07em;color:#24324a}.scroll-subtitle{max-width:700px;margin:10px auto 0;font:italic 17px/1.45 Georgia,serif;color:#685132}.scroll-rule{display:flex;align-items:center;gap:10px;margin:17px auto 28px;max-width:560px;color:#976b2e}.scroll-rule:before,.scroll-rule:after{content:"";height:1px;background:linear-gradient(90deg,transparent,#8b612b,transparent);flex:1}.scroll-rule span{font-size:12px}
.scroll-content-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:42px}.scroll-body{font:17px/1.72 Georgia,serif;color:#33291e;white-space:pre-line}.scroll-body:first-letter{float:left;font:58px/.82 Georgia,serif;padding:8px 8px 0 0;color:#76501f}.scroll-quote{margin:28px 0 0;padding:17px 20px;border:1px solid rgba(107,72,29,.42);background:rgba(255,247,222,.34);font:italic 16px/1.5 Georgia,serif;color:#5c4528}.scroll-quote:empty{display:none}
.scroll-side{display:flex;flex-direction:column;gap:20px}.scroll-visual{min-height:250px;border:1px solid rgba(95,63,26,.38);background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(105,67,25,.08));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 28px rgba(91,57,20,.14)}.scroll-visual img{width:100%;height:100%;min-height:250px;object-fit:cover;filter:sepia(.42) saturate(.72) contrast(.96)}.scroll-icon{font-size:92px;color:#9a6e2e;text-shadow:0 2px 0 #f8e7b9,0 0 22px rgba(158,107,30,.25)}.scroll-highlights{list-style:none;padding:0;margin:0;display:grid;gap:8px}.scroll-highlights li{position:relative;padding:9px 10px 9px 27px;border-bottom:1px solid rgba(98,67,30,.22);font:700 12px/1.35 Arial,sans-serif;color:#5b4529}.scroll-highlights li:before{content:"✦";position:absolute;left:7px;top:8px;color:#9d6d27}
.scroll-nav{position:relative;z-index:2;margin-top:34px;padding-top:20px;border-top:1px solid rgba(108,74,31,.28);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.scroll-btn{border:1px solid #72501f;background:#07182c;color:#e3b85f;padding:13px 18px;font:700 11px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.25)}.scroll-btn:disabled{opacity:.25;cursor:default}.scroll-prev{justify-self:start}.scroll-next{justify-self:end}.scroll-progress{font:700 10px/1 Arial,sans-serif;color:#785929;letter-spacing:.12em;text-transform:uppercase}
.scroll-final{display:none;position:relative;z-index:2;margin-top:28px;text-align:center;padding:24px;border-top:1px solid rgba(106,71,27,.3)}.story-overlay.is-final .scroll-final{display:block}.scroll-final small{display:block;font:700 11px/1 Arial,sans-serif;letter-spacing:.17em;color:#8b642b;text-transform:uppercase}.scroll-final strong{display:block;margin:8px 0 18px;font:36px/1 Georgia,serif;color:#26364d}.scroll-final a{display:inline-block;padding:13px 22px;background:linear-gradient(#e8bd61,#b9822c);color:#1c160e;text-decoration:none;font:700 11px Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em}
.scroll-corner{position:absolute;width:46px;height:46px;z-index:3;opacity:.55}.scroll-corner:before,.scroll-corner:after{content:"";position:absolute;background:#95682c}.scroll-corner:before{width:38px;height:1px}.scroll-corner:after{width:1px;height:38px}.scroll-corner.tl{left:28px;top:28px}.scroll-corner.tr{right:28px;top:28px;transform:scaleX(-1)}.scroll-corner.bl{left:28px;bottom:28px;transform:scaleY(-1)}.scroll-corner.br{right:28px;bottom:28px;transform:scale(-1)}
.story-changing .scroll-paper{animation:inkFade .46s ease}.story-changing .story-medallion.active{animation:medGlow .5s ease}
@keyframes veilIn{from{opacity:0}to{opacity:1}}@keyframes scrollDrop{0%{opacity:0;transform:translateY(-100px) scaleY(.35) rotate(-1deg)}55%{opacity:1;transform:translateY(8px) scaleY(1.03) rotate(.2deg)}100%{opacity:1;transform:translateY(0) scaleY(1) rotate(-.25deg)}}@keyframes inkFade{0%{filter:brightness(1);opacity:1}45%{filter:brightness(1.25);opacity:.12}55%{opacity:.12}100%{opacity:1}}@keyframes medGlow{50%{box-shadow:0 0 34px rgba(242,188,70,.7),0 10px 20px rgba(0,0,0,.3)}}@keyframes magicBreathe{0%,100%{transform:translateX(-50%) scale(.9);opacity:.55}50%{transform:translateX(-50%) scale(1.13);opacity:1}}@keyframes sparkRise{0%{transform:translate3d(0,40px,0) scale(.25);opacity:0}14%{opacity:1}100%{transform:translate3d(var(--drift,30px),-78vh,0) scale(1.4);opacity:0}}
@media(max-width:980px){.story-stage{grid-template-columns:1fr;padding:74px 12px 38px}.story-rail{position:relative;top:auto;padding:0 8px 14px;display:block}.story-rail-title{margin:0 auto 10px;width:220px;min-height:auto;clip-path:none;border-radius:8px;padding:12px 16px}.rail-feather{display:none}.story-rail-title strong{font-size:18px}.story-rail-title small{margin-top:4px;font-size:9px}.story-medallions{flex-direction:row;overflow:auto;align-items:stretch;gap:6px;padding:4px 2px 8px;scrollbar-width:none}.story-medallions::-webkit-scrollbar{display:none}.story-medallion{flex:0 0 150px;width:150px;min-height:66px;padding:11px 10px 11px 30px;border-right:1px solid #9c7136;clip-path:none;border-radius:7px}.story-medallion:before{left:8px;width:14px;height:14px}.story-medallion.active{transform:translateY(-2px)}.story-scroll{transform:none}.story-overlay.is-open .story-scroll{animation:scrollDropMobile .7s ease forwards}.scroll-paper{padding:46px 34px 38px}.scroll-content-grid{grid-template-columns:1fr;gap:24px}.scroll-side{display:grid;grid-template-columns:minmax(180px,.8fr) 1.2fr;align-items:start}.scroll-visual{min-height:210px}.scroll-visual img{min-height:210px}.scroll-era{font-size:46px}.scroll-title{font-size:27px}.scroll-body{font-size:16px}.scroll-rod{margin:0 -12px}.story-close{right:12px;top:12px}}
@media(max-width:620px){.story-stage{padding-top:68px}.story-close{width:42px;height:42px;font-size:25px}.scroll-paper{padding:38px 22px 30px}.scroll-paper:before{inset:10px}.scroll-era{font-size:38px}.scroll-title{font-size:23px}.scroll-subtitle{font-size:15px}.scroll-content-grid{gap:18px}.scroll-body{font-size:15px;line-height:1.62}.scroll-body:first-letter{font-size:46px}.scroll-side{display:block}.scroll-visual{min-height:180px;margin-bottom:15px}.scroll-visual img{min-height:180px}.scroll-nav{grid-template-columns:1fr 1fr}.scroll-progress{grid-column:1/-1;grid-row:1;text-align:center}.scroll-prev{grid-column:1;grid-row:2}.scroll-next{grid-column:2;grid-row:2}.scroll-btn{padding:12px 10px;font-size:9px}.scroll-final strong{font-size:29px}.scroll-rod{height:34px}.scroll-rod span{height:23px}.scroll-rod i{width:36px;height:36px}.story-medallion{flex-basis:132px}.story-medallion strong{font-size:13px}}
@keyframes scrollDropMobile{from{opacity:0;transform:translateY(-60px) scaleY(.72)}to{opacity:1;transform:none}}