#stStoryPhaseOverlay{position:fixed;inset:0;z-index:13120;display:none;align-items:center;justify-content:center;padding:18px;background:radial-gradient(circle at 50% 45%,rgba(124,90,39,.18),transparent 38%),rgb(2,5,8);overflow:hidden} #stStoryPhaseOverlay.open{display:flex} .st-story-phase-stage{position:relative;width:min(930px,calc(100vw - 28px));min-height:470px} .st-story-phase-card{position:absolute;left:50%;top:50%;width:min(650px,calc(100vw - 38px));box-sizing:border-box;padding:29px 30px 24px;border:1px solid #866d3e;background:linear-gradient(180deg,#1b2127,#0b1015);box-shadow:0 26px 80px rgba(0,0,0,.78),inset 0 0 45px rgba(150,106,41,.06);color:#eee7d6;transform:translate(-50%,-50%);transition:transform .58s cubic-bezier(.2,.8,.2,1)} .st-story-phase-stage.revealed .st-story-phase-card{transform:translate(calc(-50% - 105px),-50%)} .st-story-phase-card::before,.st-story-phase-card::after{content:"";position:absolute;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,#a38347,transparent)} .st-story-phase-card::before{top:13px}.st-story-phase-card::after{bottom:13px} .st-story-phase-kicker{font:800 10px/1 Arial,sans-serif;letter-spacing:.2em;color:#8f969c;text-transform:uppercase;margin-bottom:9px} .st-story-phase-card h2{margin:0 0 14px;color:#e7cb8d;font:900 clamp(28px,6vw,43px)/1.04 Georgia,serif;letter-spacing:.025em} .st-story-phase-card p{margin:0 0 13px;color:#c5c2b8;font:14px/1.58 Arial,sans-serif} .st-story-phase-card button{display:block;width:100%;margin-top:20px;padding:11px 14px;border:1px solid #957641;background:#272113;color:#f0d89f;font:900 12px Arial,sans-serif;letter-spacing:.06em;cursor:pointer} .st-story-phase-card button:hover{border-color:#c29b56} #stStoryAftermathCard{animation:stStoryCardIn .48s cubic-bezier(.2,.82,.25,1) both} #stStoryUnitReveal{position:absolute;right:0;top:18px;bottom:auto;width:315px;opacity:0;pointer-events:none;transform:translate(48vw,-28px) rotate(4deg) scale(.88)} .st-story-phase-stage.revealed #stStoryUnitReveal{animation:stStoryUnitInfoIn .72s .10s cubic-bezier(.15,.92,.24,1.1) forwards} #stStoryUnitReveal .st-unit-info-card{box-shadow:0 18px 48px rgba(0,0,0,.72);background:linear-gradient(180deg,rgba(23,28,34,.99),rgba(9,13,17,.99))} .st-story-new-label{position:absolute;left:-55px;top:-31px;color:#ffd36f;font:900 23px/1 Georgia,serif;letter-spacing:.02em;text-shadow:0 2px 0 #6d3118,0 0 5px rgba(0,0,0,.9);transform:rotate(-17deg);white-space:nowrap} .st-story-reinforcement-note{margin-top:10px;padding:9px 10px;border-left:3px solid #775f35;background:rgba(127,95,43,.10);color:#c2bcae;font:12px/1.42 Arial,sans-serif} .st-story-map-expand{text-align:center;margin-top:10px;color:#d8c08a;font:900 11px Arial,sans-serif;letter-spacing:.08em} @keyframes stStoryCardIn{from{opacity:0;transform:translate(-50%,calc(-50%+30px)) scale(.96)}to{opacity:1;transform:translate(-50%,-50%)}} @keyframes stStoryUnitInfoIn{0%{opacity:0;transform:translate(48vw,-28px) rotate(4deg) scale(.88)}70%{opacity:1;transform:translate(-14px,5px) rotate(-1deg) scale(1.02)}100%{opacity:1;transform:none}} @media(max-width:760px){.st-story-phase-stage{min-height:620px} .st-story-phase-card{top:42%;padding:25px 18px 21px} .st-story-phase-stage.revealed .st-story-phase-card{transform:translate(-50%,calc(-50% - 84px))} #stStoryUnitReveal{right:50%;top:auto;bottom:8px;width:min(315px,calc(100vw - 44px));transform:translate(50%,48vh) scale(.9)} .st-story-phase-stage.revealed #stStoryUnitReveal{animation-name:stStoryUnitInfoInMobile} .st-story-new-label{left:2px;top:-34px}} @keyframes stStoryUnitInfoInMobile{0%{opacity:0;transform:translate(50%,48vh) scale(.9)}70%{opacity:1;transform:translate(50%,-10px) scale(1.02)}100%{opacity:1;transform:translate(50%,0) scale(1)}}