@font-face{font-family:SteampuffDisplay;src:url('display.woff2') format('woff2');font-display:swap;font-weight:100 900}
@font-face{font-family:Manrope;src:url('manrope.woff2') format('woff2');font-display:swap;font-weight:200 800}
:root{--paper:#f7e9c7;--gold:#e4bd76;--soft:#d8c2ad;--red:#3d101c;--night:#0a1721;--cyan:#a6dae0;--merch-bg:#032d43;--line:rgba(230,201,157,.24);--display:SteampuffDisplay,Georgia,serif;--body:Manrope,Arial,sans-serif;--gutter:clamp(24px,5.4vw,100px);--ease:cubic-bezier(.23,1,.32,1);--sc-canvas:#281016;--sc-ink:#f7e9c7;--sc-ink-soft:#d8c2ad;--sc-accent:#e4bd76;--sc-font-display:var(--display);--sc-font-text:var(--body)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px;scrollbar-width:thin;scrollbar-color:#a58e75 transparent}body{margin:0;background:#201018;color:var(--paper);font:400 15px/1.75 var(--body);-webkit-font-smoothing:antialiased}body.nav-open{overflow:hidden}::selection{background:var(--gold);color:#271019}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}img{display:block;max-width:100%;height:auto}svg{display:inline-block;width:24px;height:24px;flex:none}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.04;text-wrap:balance}h1,h2{letter-spacing:-.045em}h2{font-size:clamp(40px,4.9vw,76px)}h3{font-size:27px}p{text-wrap:pretty}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:6px}a,button{touch-action:manipulation}.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip-link{position:fixed;top:-100px;left:20px;background:var(--paper);color:var(--night);padding:12px 20px;z-index:300}.skip-link:focus{top:12px}button:active,.button:active{transform:translateY(2px)}[hidden]{display:none!important}.section-pad{padding:112px var(--gutter)}.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:700;text-transform:uppercase;color:var(--gold);margin-bottom:25px}.button{display:inline-flex;align-items:center;gap:36px;background:var(--gold);color:#2d1418;padding:15px 22px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--gold);transition:background .2s,transform .2s;min-height:50px;white-space:nowrap}.button svg{width:21px}.button:hover{background:#f5d797}.text-link{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;gap:24px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0}.text-link svg{width:20px;transition:transform .2s}.text-link:hover svg{transform:translateX(5px)}
.site-header{height:92px;position:absolute;z-index:100;top:0;left:0;width:100%;display:flex;align-items:center;padding:0 var(--gutter);gap:40px;background:none;isolation:isolate}.wordmark{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.wordmark span{font-family:var(--display);font-size:25px;letter-spacing:.02em;font-weight:600}.wordmark svg{width:34px;height:34px;color:var(--gold)}#main-nav{display:flex;justify-content:center;align-items:center;gap:33px;margin-left:auto}#main-nav a{font-size:14.3px;letter-spacing:.035em;position:relative;padding:15px 0}#main-nav a:after,.motion-toggle:after{content:"";position:absolute;bottom:7px;left:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s}#main-nav a:hover:after,.motion-toggle:hover:after{transform:scaleX(1)}.motion-toggle{--motion-inset:24px;position:relative;display:flex;gap:10px;align-items:center;background:none;border:0;border-left:1px solid var(--line);padding:15px 0 15px var(--motion-inset);font-size:14.3px;letter-spacing:.035em;min-height:44px;white-space:nowrap}.motion-toggle:after{left:var(--motion-inset);width:calc(100% - var(--motion-inset))}.motion-symbol{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;line-height:1}.motion-symbol svg{width:24px;height:24px}.motion-icon-off,html.motion-off .motion-icon-on{display:none}html.motion-off .motion-icon-off{display:block}.menu-toggle{display:none}.hero{height:155svh;min-height:800px;position:relative}.hero-stage{height:100svh;min-height:640px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#581a23}.hero-city{position:absolute;inset:-3%;z-index:0;transform:scale(calc(1.025 + var(--hero-p,0)*.065)) translateY(calc(var(--hero-p,0)*45px))}.hero-city img{width:100%;height:100%;object-fit:cover;object-position:65% 50%}.hero-copy{position:absolute;z-index:5;left:var(--gutter);top:50%;width:50%;max-width:690px;transform:translateY(calc(-40% - var(--hero-p,0)*65px));opacity:calc(1 - var(--hero-p,0)*.4)}.hero-copy h1{text-transform:uppercase;font-size:clamp(66px,7.6vw,120px);max-width:7.5em;line-height:.94;letter-spacing:-.048em;margin-left:-5px}.hero-copy .eyebrow{margin-bottom:30px}.hero-intro{font-size:28px;max-width:30ch;margin-top:27px;color:#f2ddc4;line-height:1.7}.hero-copy .button{margin-top:32px}.hero-cast{position:absolute;inset:0;z-index:4;pointer-events:none}.hero-rebel{position:absolute;right:6%;bottom:-8%;width:auto;height:99%;max-width:none;transform:translate(calc(var(--px,0)*-12px),calc(var(--hero-p,0)*-120px)) rotate(calc(var(--hero-p,0)*-3deg));filter:drop-shadow(-25px 30px 25px #2b071b88)}.hero-muse{position:absolute;right:-11%;bottom:11%;width:auto;height:80%;max-width:none;transform:translate(calc(var(--px,0)*5px),calc(var(--hero-p,0)*-55px));filter:brightness(.85);opacity:.87}.hero-fog{position:absolute;left:-10%;right:-10%;bottom:-12%;height:31%;z-index:6;pointer-events:none;background:radial-gradient(ellipse at 35% 85%,#792030cc,transparent 65%),linear-gradient(0deg,#29121c,transparent);transform:translateY(calc(var(--hero-p,0)*-60px))}.orbit{position:absolute;z-index:2;width:47vw;height:47vw;border:1px solid #e3ba7150;border-radius:50%;right:1%;top:15%;transform:rotate(calc(var(--hero-p,0)*50deg))}.orbit:before{content:"";position:absolute;inset:18px;border:1px dashed #e3ba7140;border-radius:50%}.orbit:after{content:"";position:absolute;top:-18px;left:50%;height:36px;width:1px;background:var(--gold)}
.world-rail{position:fixed;right:22px;top:50%;z-index:60;display:flex;flex-direction:column;gap:24px;transform:translateY(-50%);mix-blend-mode:screen}.world-rail a{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:20px}.world-rail span{font-size:8px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .2s}.world-rail i{width:5px;height:5px;border:1px solid #eed9b1;transform:rotate(45deg)}.world-rail .active i{background:var(--paper);width:8px;height:8px}.world-rail a:hover span,.world-rail .active span{opacity:1}.stratus-section{background:#2e111e;min-height:780px;display:grid;grid-template-columns:44% 56%;align-items:center;position:relative;overflow:hidden;padding-top:85px;padding-bottom:65px}.world-copy{position:relative;z-index:4;max-width:470px}.world-copy h2{max-width:7.5em}.world-copy>p:not(.eyebrow){max-width:43ch;margin-top:30px;color:#d9c3b5;font-size:14px;line-height:1.85}.world-copy .text-link{margin-top:22px}.world-facts{display:flex;gap:37px;margin-top:55px;border-top:1px solid var(--line);padding-top:24px;font-size:12px;color:var(--gold)}.world-facts small{display:block;font-size:9px;color:#c7a99e;margin-top:6px}.muse-scene{position:relative;height:630px;isolation:isolate}.sun-disc{position:absolute;top:9%;left:18%;width:76%;aspect-ratio:1;border:1px solid #d5a86477;border-radius:50%;background:radial-gradient(ellipse at 65% 30%,#7b3326,transparent 70%);box-shadow:inset 0 0 0 20px #c0905206}.sun-disc:after{content:"";position:absolute;inset:18px;border:1px solid #d5a86433;border-radius:50%}.muse-figure{height:100%;width:auto;max-width:none;position:absolute;left:12%;bottom:0;z-index:2;transform:translate(calc(var(--pointer-x,0)*12px),calc(var(--pointer-y,0)*8px));filter:drop-shadow(-25px 30px 30px #12091377)}.scene-word{position:absolute;left:-7%;top:40%;font-family:var(--display);font-size:7.6vw;line-height:1;letter-spacing:-.04em;opacity:.18;color:var(--gold);transform:rotate(-90deg)}.scene-caption{position:absolute;bottom:0;right:4%;z-index:3;display:flex;gap:38px;align-items:center;padding:18px 22px;background:#331622eb;border:1px solid var(--line);font-family:var(--display);font-size:21px}.scene-caption small{font-family:var(--body);font-size:9px;display:block;color:var(--soft);letter-spacing:.03em}.threshold{padding:65px 24px 95px;text-align:center;background:#2e111e}.threshold p{font-family:var(--display);font-size:clamp(25px,3.2vw,43px);color:#dfc1a2;max-width:21ch;margin:23px auto;line-height:1.2}.thread-line{display:block;height:40px;width:1px;background:#cbac7760;margin:auto}.descent{height:250svh;position:relative;background:#0b1823}.descent-stage{height:100svh;min-height:650px;position:sticky;top:0;overflow:hidden;isolation:isolate}.frost-city{position:absolute;inset:-4%;z-index:0;transform:scale(calc(1.06 - var(--descent-p,0)*.06))}.frost-city img{width:100%;height:100%;object-fit:cover;object-position:65% 50%}.cold-shade{position:absolute;z-index:1;inset:0;background:radial-gradient(ellipse at 13% 55%,#091725e8,transparent 73%),linear-gradient(0deg,#0c1823 2%,transparent 36%)}.frost-copy{position:absolute;left:var(--gutter);top:50%;transform:translateY(calc(-32% + (1 - var(--frost-in,0))*45px));opacity:var(--frost-in,0);z-index:4;max-width:480px}.frost-copy h2{max-width:7.5em;font-size:clamp(54px,6.4vw,96px);text-transform:uppercase}.frost-copy>p:not(.eyebrow){color:#bfd0d8;max-width:36ch;margin-top:26px;font-size:14px;line-height:1.8}.frost-copy .eyebrow{color:var(--cyan)}.frost-copy .button{margin-top:30px}.button-cold{background:var(--cyan);border-color:var(--cyan);color:#102630}.button-cold:hover{background:#c2edf0}.beast-layer{position:absolute;z-index:3;right:-1%;bottom:-9%;height:94%;width:57%;transform:translateY(calc((1 - var(--frost-in,0))*140px)) rotate(calc((1 - var(--frost-in,0))*8deg));opacity:var(--frost-in,0)}.beast-layer img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(-25px 20px 30px #07122199)}.frost-mark{font-family:var(--display);position:absolute;z-index:2;top:7%;left:12%;font-size:26vw;line-height:1;letter-spacing:-.04em;color:#afdbe122;transform:translateX(calc((1 - var(--descent-p,0))*100px))}.fracture-plate{position:absolute;inset:-5% 0 0;z-index:6;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);will-change:clip-path}.fracture-plate>img{width:100%;height:100%;object-fit:cover;object-position:65% 65%;transform:translateY(calc(var(--descent-p,0)*-70px)) scale(1.1)}.fracture-plate>div{position:absolute;inset:0;background:radial-gradient(ellipse at center,#2707189c,transparent 75%)}.fracture-plate>p{position:absolute;left:var(--gutter);top:35%;max-width:11em;font-family:var(--display);font-size:clamp(45px,6.5vw,100px);line-height:.99;text-transform:uppercase;opacity:calc(1 - var(--descent-p,0)*3)}.frost-fog{position:absolute;z-index:7;left:-20%;right:-20%;bottom:-8%;height:25%;pointer-events:none;background:radial-gradient(ellipse at center,#7bc6da35,transparent 64%);opacity:var(--frost-in,0);animation:fog 15s ease-in-out infinite alternate}.descent-caption{position:absolute;z-index:8;left:var(--gutter);bottom:25px;font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:#d0e4e7;opacity:var(--frost-in,0)}
.characters-section{background:#0c1823;padding-top:100px;padding-bottom:110px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:48px}.section-heading h2{font-size:clamp(37px,4.6vw,70px)}.section-heading>p{max-width:32ch;font-size:12px;color:#acbfc9;line-height:1.9;padding-bottom:6px}.characters-section .eyebrow{color:#94c8d2}.character-filters{display:flex;gap:26px;border-bottom:1px solid #a1c5d429;margin-bottom:35px}.character-filters button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 0 17px;color:#9fb3bf;font-size:11px;min-height:48px}.character-filters button span{font-size:8px;margin-left:9px}.character-filters button.active{border-color:var(--cyan);color:#eef9fb}.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 22px}.character-card{min-width:0}.character-portrait{height:320px;position:relative;overflow:hidden;--portrait-start:#2A3C5F;--portrait-mid:#1C2A46;--portrait-end:#101B30;background:linear-gradient(145deg,var(--portrait-start) 0%,var(--portrait-mid) 55%,var(--portrait-end) 100%);isolation:isolate}.character-card.stratus .character-portrait{--portrait-start:#581734;--portrait-mid:#3D1329;--portrait-end:#230F1D}.character-portrait:after{content:"";position:absolute;inset:0;border:1px solid #D6A461;z-index:3}.portrait-ring{position:absolute;inset:12% 7%;border:1px solid #a7cad124;border-radius:50%}.portrait-ring:after{content:"";position:absolute;inset:10px;border:1px dashed #a7cad11a;border-radius:50%}.character-portrait img{height:105%;width:100%;object-fit:contain;object-position:center bottom;position:relative;z-index:2;transform-origin:center bottom;transition:transform .55s var(--ease);filter:drop-shadow(-8px 12px 14px #07141d55)}.character-name{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:20px 0 0}.character-name small{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#9eb5c2;display:block;margin-bottom:8px}.character-name h3{font-size:clamp(21px,2.2vw,29px);color:#e5e5db}.character-name svg{width:17px;color:#afc8d0}.lore-section{background:#13242e;border-top:1px solid #9cbbc31a}.lore-section .eyebrow{color:#92c4c9}.lore-grid{display:grid;grid-template-columns:1.17fr 1fr 1fr;gap:28px}.lore-card{display:block}.lore-image{height:235px;overflow:hidden;position:relative;background:#422136}.lore-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}.lore-image.family img{object-fit:contain;object-position:center 18%;height:135%;transform:rotate(-7deg);filter:drop-shadow(10px 10px 20px #120d1b)}.lore-image span{position:absolute;left:16px;bottom:16px;font-size:8px;letter-spacing:.1em;text-transform:uppercase;background:#0d1d29df;padding:6px 10px;color:#e5e8dc}.lore-card-copy{padding:23px 0 0}.lore-card h3{font-size:27px;line-height:1.13;max-width:13em}.lore-card p{font-size:11px;color:#abc0c9;margin-top:16px;line-height:1.8}.lore-card .text-link{margin-top:20px;font-size:9px;border:0;gap:15px}.collectibles-section{background:var(--merch-bg);display:grid;grid-template-columns:49% 51%;min-height:740px;align-items:center;position:relative;overflow:hidden}.collection-art{position:relative;width:100%;height:auto;aspect-ratio:1;max-width:640px;margin-inline:auto}.collection-art>img{position:absolute;inset:6%;height:88%;width:88%;object-fit:contain;object-position:50% 50%;z-index:2;transform:none;transform-origin:50% 50%;filter:drop-shadow(0 16px 26px #011b2c66)}.collection-ring{position:absolute;inset:0;border:1px solid #d3b37855;width:100%;height:100%;border-radius:50%}.collection-ring:after{content:"";position:absolute;inset:17px;border:1px solid #d3b37822;border-radius:50%}.collection-copy{padding-left:10%;max-width:570px}.collection-copy h2{font-size:clamp(40px,4.6vw,67px)}.collection-copy>p:not(.eyebrow){font-size:13px;color:#c8bdbb;max-width:37ch;margin-top:28px;line-height:1.85}.collection-types{display:flex;gap:18px;flex-wrap:wrap;font-size:9px;color:#ccb488;border-top:1px solid var(--line);padding-top:24px;margin-top:32px}.collection-copy .collection-note{font-size:10px;margin-top:22px;color:var(--gold)}.collection-copy .text-link{margin-top:24px;font-size:9px}.collectible-list{margin:20px 0}.collectible-list a{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:15px 0}.site-footer{background:#032D43;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:42px var(--gutter);gap:22px;border-top:1px solid #b2b4a421}.site-footer .wordmark span{font-size:22px}.site-footer p{font-size:10px;color:#aca9a5}.site-footer>a:not(.wordmark){display:flex;gap:20px;align-items:center;font-size:10px}.site-footer>a svg{width:18px}.site-footer small{font-size:9px;flex-basis:100%;border-top:1px solid #b2b4a41a;padding-top:24px;color:#918f93}
.embers,.snow{position:absolute;inset:0;pointer-events:none;z-index:8}.embers i,.snow i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f4bc76;bottom:10%;left:64%;animation:ember 9s linear infinite;opacity:0}.embers i:nth-child(2){left:48%;animation-delay:-3s}.embers i:nth-child(3){left:81%;animation-delay:-6s}.embers i:nth-child(4){left:36%;animation-delay:-8s}.embers i:nth-child(5){left:90%;animation-delay:-5s}.embers i:nth-child(6){left:19%;animation-delay:-2s}.snow{opacity:var(--frost-in,0)}.snow i{background:#d9f7fa;animation:flake 10s linear infinite;top:-3%;bottom:auto;left:60%}.snow i:nth-child(2){left:78%;animation-delay:-2s}.snow i:nth-child(3){left:88%;animation-delay:-7s}.snow i:nth-child(4){left:38%;animation-delay:-4s}.snow i:nth-child(5){left:13%;animation-delay:-8s}@keyframes ember{0%{transform:translate(0,0);opacity:0}15%{opacity:.7}85%{opacity:.6}100%{transform:translate(50px,-65vh);opacity:0}}@keyframes flake{0%{transform:translate(0,0);opacity:0}10%{opacity:.6}95%{opacity:.5}100%{transform:translate(-70px,100vh);opacity:0}}@keyframes fog{to{transform:translateX(5%)}}.is-offscreen *{animation-play-state:paused!important}
.inner-page{padding-top:92px;background:#0c1823;min-height:85svh}.inner-page .eyebrow{color:#9ed1d8}.breadcrumbs{padding:28px var(--gutter) 0;display:flex;align-items:center;gap:12px;color:#9eb7c3;font-size:10px}.breadcrumbs a:hover{color:var(--paper)}.profile-hero{display:grid;grid-template-columns:50% 50%;position:relative;overflow:hidden;min-height:780px;padding:60px var(--gutter) 85px;align-items:center;background:radial-gradient(ellipse at 75% 50%,#183c4b,transparent 63%)}.profile-hero.stratus{background:radial-gradient(ellipse at 70% 50%,#563126,transparent 63%)}.profile-copy{z-index:4;max-width:510px}.profile-copy h1{font-size:clamp(65px,7vw,106px);text-transform:uppercase;margin-bottom:26px}.profile-copy .role{color:#cfb488;font-family:var(--display);font-size:25px;margin-bottom:25px}.profile-copy .entry-content{font-size:14px;max-width:48ch;color:#c4d0d5}.profile-visual{height:630px;position:relative}.profile-visual>img{height:100%;width:100%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(-20px 25px 20px #08111d66)}.profile-visual .portrait-ring{inset:15% 0}.profile-quote{font-family:var(--display);font-size:clamp(25px,3.4vw,45px);text-align:center;padding:65px var(--gutter);background:#162831;border-block:1px solid #b1c8c026}.profile-information{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;background:#10212b}.profile-information h2{font-size:43px}.profile-information dl{margin:35px 0 0}.profile-information dt{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--cyan);margin-top:25px}.profile-information dd{margin:8px 0 0;font-size:14px}.pack-figure{margin:0;display:flex;align-items:center;gap:26px}.pack-figure img{height:350px;width:195px;object-fit:cover}.pack-figure figcaption{max-width:24ch;font-size:10px;color:#a9c1ca;line-height:1.9}.pack-figure strong{display:block;color:#d9e4df;font-size:12px;margin-bottom:10px}.profile-links{display:flex;justify-content:space-between;gap:25px;padding:38px var(--gutter);background:#0c1823}.archive-hero{padding:90px var(--gutter) 60px;max-width:1000px}.archive-hero h1{font-size:clamp(55px,7vw,95px);max-width:9em}.archive-hero>p:not(.eyebrow){max-width:52ch;color:#acbfca;margin-top:30px;font-size:14px}.archive-list{padding-top:20px}.article-header{padding:70px var(--gutter) 50px;max-width:1100px}.article-header h1{font-size:clamp(50px,6vw,85px);max-width:12em}.article-header>p:not(.eyebrow){max-width:60ch;margin-top:30px;font-size:16px;color:#b3c7d1}.article-cover{margin:0 var(--gutter);height:430px;overflow:hidden;background:#402136}.article-cover img{width:100%;height:100%;object-fit:cover;object-position:center 55%}.article-cover.family img{object-fit:contain;height:160%;object-position:center top}.article-body{padding:70px 24px 100px;max-width:790px;margin:auto;color:#c4d1d8;font-size:16px;line-height:1.9}.entry-content p{margin-bottom:22px}.entry-content h2{font-size:33px;color:#f0e4cc;margin:46px 0 22px;letter-spacing:-.02em}.entry-content ul{padding-left:20px}.entry-content a{color:var(--gold);text-decoration:underline}.related-lore{padding-top:65px;padding-bottom:70px}.related-lore h2{font-size:39px;margin-bottom:35px}.empty-page{padding:150px var(--gutter);min-height:80vh}.empty-page h1{font-size:70px;margin-bottom:25px}
@media(hover:hover) and (pointer:fine){.lore-card:hover .lore-image img{transform:scale(1.045)}.lore-card:hover .lore-image.family img{transform:rotate(-4deg) scale(1.04)}}
@media(min-width:1600px){.hero-rebel{right:13%}.hero-muse{right:-1%}.hero-copy{left:8%}.section-pad{padding-inline:8%}.character-portrait{height:400px}}
@media(max-width:1100px){.site-header{gap:22px}#main-nav{gap:22px}.motion-label{display:none}.motion-toggle{--motion-inset:15px}.hero-copy{width:53%}.hero-copy h1{font-size:8vw}.hero-rebel{right:-7%;height:92%}.hero-muse{right:-19%;height:70%}.world-rail{right:13px}.world-rail span{display:none}.stratus-section{grid-template-columns:47% 53%}.muse-scene{height:540px}.muse-figure{left:4%}.character-portrait{height:270px}.character-grid{gap:28px 15px}.lore-image{height:190px}.lore-card h3{font-size:24px}.profile-information{gap:30px}.pack-figure{gap:20px}.pack-figure img{height:300px;width:167px}.pack-figure figcaption{font-size:9px}}
@media(max-width:760px){:root{--gutter:24px}.site-header{height:76px;padding:0 24px;gap:15px}.wordmark span{font-size:21px}.wordmark svg{width:28px;height:28px}.menu-toggle{display:flex;align-items:center;gap:10px;background:none;border:0;margin-left:auto;padding:14px 0;font-size:10px}.menu-toggle i{width:17px;height:8px;border-block:1px solid var(--paper);display:block}.motion-toggle{--motion-inset:13px;padding:10px 0 10px var(--motion-inset)}.motion-symbol{font-size:24px}#main-nav{display:none;position:absolute;top:76px;left:0;right:0;padding:30px 24px;background:#581734;border-bottom:1px solid var(--line);align-items:flex-start}#main-nav.open{display:flex;flex-direction:column;gap:7px}#main-nav a{font-family:var(--display);font-size:33.8px;width:100%;padding:11px 0}.hero{height:135svh;min-height:800px}.hero-stage{min-height:690px}.hero-city img{object-position:62% 45%}.hero-copy{left:24px;top:126px;width:calc(100% - 48px);transform:translateY(calc(var(--hero-p,0)*-20px));max-width:none;z-index:5}.hero-copy .eyebrow{font-size:8px;letter-spacing:.13em;margin-bottom:22px}.hero-copy h1{font-size:clamp(51px,12vw,81px);max-width:7.5em;line-height:.94;margin-left:-2px}.hero-intro{font-size:22px;max-width:23ch;margin-top:20px}.hero-copy .button{margin-top:23px;font-size:9px;padding:12px 14px;min-height:44px;gap:20px}.hero-cast{z-index:4}.hero-rebel{height:63%;right:-12%;bottom:-4%;transform:translateY(calc(var(--hero-p,0)*-52px));filter:drop-shadow(-12px 18px 15px #330a2288)}.hero-muse{right:-19%;bottom:9%;height:50%;opacity:.77}.hero-fog{height:22%;bottom:-8%}.orbit{width:83vw;height:83vw;right:-13%;top:41%}.world-rail{display:none}.section-pad{padding:64px 24px}.stratus-section{display:flex;flex-direction:column;align-items:stretch;padding-top:56px;padding-bottom:40px;min-height:0;gap:24px}.world-copy{max-width:none}.world-copy h2{font-size:48px;max-width:8em}.eyebrow{font-size:8px;letter-spacing:.16em;margin-bottom:20px}.world-copy>p:not(.eyebrow){font-size:12px;line-height:1.85;max-width:43ch;margin-top:23px}.world-copy .text-link{font-size:9px;margin-top:18px}.world-facts{margin-top:31px;gap:30px;font-size:10px;padding-top:18px}.world-facts small{font-size:8px}.muse-scene{height:470px;margin-top:5px}.muse-figure{left:16%;max-width:95%;object-fit:contain}.sun-disc{width:80%;left:12%}.scene-word{font-size:16vw;left:-4%;top:47%}.scene-caption{bottom:0;right:3%;padding:14px 17px;font-size:19px}.scene-caption small{font-size:8px}.threshold{padding:40px 24px 70px}.threshold p{font-size:30px;max-width:18ch}.thread-line{height:27px}.descent{height:215svh}.descent-stage{min-height:690px}.fracture-plate>p{top:20%;font-size:50px;left:24px}.frost-copy{top:75px;left:24px;right:24px;max-width:none;transform:translateY(calc((1 - var(--frost-in,0))*30px))}.frost-copy .eyebrow{font-size:8px}.frost-copy h2{font-size:clamp(45px,12vw,70px);max-width:8em}.frost-copy>p:not(.eyebrow){font-size:11px;max-width:30ch;margin-top:20px;line-height:1.7}.frost-copy .button{font-size:9px;padding:11px 14px;min-height:43px;gap:20px;margin-top:20px}.beast-layer{width:85%;height:59%;right:-12%;bottom:-3%;z-index:3}.cold-shade{background:radial-gradient(ellipse at 8% 24%,#091725ef,transparent 90%),linear-gradient(0deg,#0c1823 0%,transparent 45%)}.frost-city img{object-position:60% center}.frost-mark{font-size:41vw;left:0;top:41%;opacity:.7}.frost-fog{height:26%}.descent-caption{bottom:17px;left:24px;font-size:7px}.section-heading{display:block;margin-bottom:30px}.section-heading h2{font-size:43px}.section-heading>p{font-size:11px;margin-top:22px}.section-heading>.text-link{margin-top:18px;font-size:9px}.character-filters{gap:20px;overflow:auto;white-space:nowrap;margin-bottom:25px;scrollbar-width:thin}.character-filters button{font-size:10px;padding:10px 0 13px;flex-shrink:0}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 14px}.character-portrait{height:240px}.character-name{padding-top:15px}.character-name h3{font-size:21px}.character-name small{font-size:6px;letter-spacing:.07em;margin-bottom:7px}.character-name svg{width:13px}.lore-grid{grid-template-columns:1fr;gap:36px}.lore-image{height:230px}.lore-card-copy{padding-top:20px}.lore-card h3{font-size:29px;max-width:17em}.lore-card p{font-size:11px;max-width:45ch;margin-top:13px}.lore-card .text-link{margin-top:10px}.collectibles-section{grid-template-columns:1fr;padding-top:50px;padding-bottom:65px}.collection-art{height:auto;max-width:460px;width:100%;margin:auto}.collection-copy{padding:35px 0 0;max-width:none}.collection-copy h2{font-size:46px;max-width:9em}.collection-copy>p:not(.eyebrow){font-size:12px;margin-top:22px}.collection-types{font-size:9px;gap:18px}.site-footer{padding:34px 24px;gap:22px;display:grid;grid-template-columns:1fr}.site-footer p{font-size:10px}.site-footer .wordmark span{font-size:23px}.site-footer small{padding-top:20px}.inner-page{padding-top:76px}.breadcrumbs{padding:25px 24px 0;font-size:9px;flex-wrap:wrap}.profile-hero{grid-template-columns:1fr;padding:45px 24px 50px;min-height:0;gap:30px}.profile-copy h1{font-size:65px}.profile-copy .role{font-size:22px}.profile-copy .entry-content{font-size:12px;max-width:48ch}.profile-visual{height:470px;order:-1}.profile-hero{padding-top:20px}.profile-quote{padding:40px 24px;font-size:27px}.profile-information{grid-template-columns:1fr;gap:45px}.profile-information h2{font-size:34px}.profile-information dd{font-size:12px}.pack-figure img{height:320px;width:178px}.pack-figure figcaption{font-size:10px}.profile-links .text-link{font-size:8px;gap:10px}.profile-links{padding:30px 24px}.archive-hero{padding:60px 24px 45px}.archive-hero h1{font-size:58px}.archive-hero>p:not(.eyebrow){font-size:12px;margin-top:25px}.article-header{padding:50px 24px 35px}.article-header h1{font-size:46px}.article-header>p:not(.eyebrow){font-size:13px;margin-top:24px}.article-cover{margin:0;height:260px}.article-body{font-size:14px;padding:40px 24px 65px}.entry-content h2{font-size:28px}.related-lore h2{font-size:34px}.empty-page h1{font-size:48px}}
@media(max-width:380px){.hero-stage{min-height:650px}.hero-copy{top:110px}.hero-copy h1{font-size:49px}.hero-copy .eyebrow{font-size:7px}.hero-intro{font-size:20px;max-width:21ch}.hero-rebel{height:57%;right:-14%}.hero-muse{height:43%;right:-21%}.character-portrait{height:208px}.character-name h3{font-size:19px}.muse-scene{height:400px}.beast-layer{height:54%;width:87%}.frost-copy{top:65px}.frost-copy h2{font-size:44px}.pack-figure{gap:15px}.pack-figure img{height:285px;width:159px}.pack-figure figcaption{font-size:9px}}
html.motion-off{scroll-behavior:auto}html.motion-off *,html.motion-off *:before,html.motion-off *:after{animation:none!important;transition:none!important}html.motion-off .hero{height:100svh;min-height:690px}html.motion-off .hero-stage{position:relative}html.motion-off .hero-city,html.motion-off .hero-rebel,html.motion-off .hero-muse,html.motion-off .muse-figure{transform:none!important}html.motion-off .descent{height:100svh!important;min-height:690px}html.motion-off .descent-stage{position:relative}html.motion-off .fracture-plate{display:none}html.motion-off .frost-copy{opacity:1;transform:translateY(-32%)}html.motion-off .beast-layer{opacity:1;transform:none}html.motion-off .descent-caption{opacity:1}html.motion-off .hero-copy{opacity:1}html.motion-off .embers,html.motion-off .snow{display:none}
@media(max-width:760px){html.motion-off .frost-copy{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero{height:100svh;min-height:690px}.hero-stage{position:relative}.hero-city,.hero-rebel,.hero-muse,.muse-figure{transform:none!important}.descent{height:100svh!important;min-height:690px}.descent-stage{position:relative}.fracture-plate{display:none}.frost-copy{opacity:1;transform:translateY(-32%)}.beast-layer{opacity:1;transform:none}.descent-caption,.hero-copy{opacity:1}.embers,.snow{display:none}}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.frost-copy{transform:none}}
@media print{.site-header,.world-rail,.motion-toggle,.embers,.snow{display:none}.hero,.descent{height:auto!important;min-height:700px}.hero-stage,.descent-stage{position:relative}.fracture-plate{display:none}.frost-copy,.beast-layer{opacity:1}.section-pad{break-inside:avoid}a{color:inherit}}
html:not(.js) .hero,html:not(.js) .descent{height:100svh;min-height:690px}html:not(.js) .hero-stage,html:not(.js) .descent-stage{position:relative}html:not(.js) .fracture-plate{display:none}html:not(.js) .frost-copy,html:not(.js) .beast-layer,html:not(.js) .descent-caption{opacity:1}html:not(.js) .beast-layer{transform:none}html:not(.js) .frost-copy{transform:translateY(-32%)}html:not(.js) .character-filters,html:not(.js) .motion-toggle{display:none}
@media(max-width:760px){html:not(.js) .frost-copy{transform:none}html:not(.js) .menu-toggle{display:none}html:not(.js) #main-nav{display:flex;position:static;background:none;flex-direction:row;padding:0;gap:12px;border:0;margin:0;flex-wrap:wrap}html:not(.js) .site-header{height:auto;min-height:110px;flex-wrap:wrap;padding-block:12px}html:not(.js) #main-nav a{font-family:var(--body);font-size:13px;width:auto;padding:0}}
.frost-copy{max-width:570px;transform:translateY(calc(-44% + (1 - var(--frost-in,0))*45px))}.frost-copy h2{font-size:clamp(54px,6vw,90px);max-width:8.5em}.descent-caption{bottom:22px}.gallery-tools{display:flex;align-items:baseline;justify-content:space-between;gap:28px;border-bottom:1px solid #a1c5d429;margin-bottom:35px}.gallery-tools .character-filters{border:0;margin:0}.art-switch{display:flex;flex-shrink:0;align-items:center;gap:0;border:1px solid #9ab9c42e;padding:3px}.art-switch button{border:0;background:none;color:#9db4bf;font-size:9px;min-height:36px;padding:8px 12px}.art-switch button[aria-pressed=true]{background:#29414d;color:#e3edf0}.character-portrait img.pack-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:16px;opacity:0;transform:translateY(14px) scale(.94);transition:opacity .25s,transform .35s var(--ease);filter:none}.character-grid.view-pack .character-art{opacity:0;transform:scale(.96)}.character-grid.view-pack .pack-art{opacity:1;transform:none}.character-art{transition:opacity .25s,transform .55s var(--ease)}html:not(.js) .art-switch{display:none}
@media(max-width:1000px){.gallery-tools{flex-direction:column;gap:14px;padding-bottom:17px}.gallery-tools .character-filters{width:100%}.art-switch{align-self:flex-end}}
@media(max-width:760px){.frost-copy{max-width:none;transform:translateY(calc((1 - var(--frost-in,0))*30px))}.frost-copy h2{font-size:clamp(45px,12vw,70px);max-width:8em}.art-switch{align-self:flex-start}.art-switch button{font-size:9px;min-height:38px}.gallery-tools{margin-bottom:25px}.character-portrait img.pack-art{padding:11px}}
@media(max-width:380px){.frost-copy h2{font-size:44px}}
.profile-copy h1{font-size:clamp(54px,5.8vw,88px)}.collectible-image{margin:0 var(--gutter);display:flex;justify-content:center}.collectible-image img{max-height:600px;width:auto;object-fit:contain}html.motion-off .frost-copy{transform:translateY(-44%)}
@media(max-width:760px){.profile-copy h1{font-size:clamp(40px,11.5vw,65px)}html.motion-off .frost-copy{transform:none}}
@media(prefers-reduced-motion:reduce){.frost-copy{transform:translateY(-44%)}}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.frost-copy{transform:none}}
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
/* Static information areas stay outside the illustrated world scene. */
.site-header{--paper:#d6a461;--gold:#d6a461;color:#d6a461}
#main-nav a,.site-header .motion-toggle,.site-header .menu-toggle{text-transform:uppercase;transition:color .2s}
#main-nav a:is(:hover,:focus-visible),.site-header .motion-toggle:is(:hover,:focus-visible),.site-header .menu-toggle:is(:hover,:focus-visible){color:#edd5a7}
.site-header:before{content:'';position:absolute;z-index:-1;inset:0 0 auto;height:180px;pointer-events:none;background:linear-gradient(180deg,rgb(88 23 52 / 100%) 0%,rgb(88 23 52 / 100%) 18%,rgb(88 23 52 / 78%) 40%,rgb(88 23 52 / 49.4%) 58%,rgb(88 23 52 / 26%) 74%,rgb(88 23 52 / 9.1%) 87%,rgb(88 23 52 / 0%) 100%)}
@media(max-width:760px){.site-header:before{height:140px}}
.site-header .wordmark{flex-shrink:0;position:relative}
.site-header .wordmark:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(110deg,transparent 40%,#fff8e88c 47%,#fffdf4 50%,#fff8e88c 53%,transparent 60%) 100% 0/250% 100% no-repeat;mask:url('steampuff-logo.svg') center/100% 100% no-repeat;-webkit-mask:url('steampuff-logo.svg') center/100% 100% no-repeat;animation:logo-reflection 10s linear infinite}
/* The sweep occupies the first second; the remaining nine seconds are still. */
@keyframes logo-reflection{0%{background-position:100% 0;opacity:0}1%,9%{opacity:.95}10%,100%{background-position:0% 0;opacity:0}}
html.motion-off .site-header .wordmark:after{animation:none}
@media(prefers-reduced-motion:reduce){.site-header .wordmark:after{animation:none}}
.site-header .wordmark img{width:220px;height:auto}
.site-footer .wordmark img{width:200px;height:auto}
@media(max-width:760px){.site-header .wordmark img{width:clamp(140px,44vw,176px)}}
@media(max-width:760px){.site-footer .wordmark img{width:176px}}
.hero-copy h1,.hero-copy .hero-intro{color:#d6a461}
.hero-actions{--gold:#d6a461;display:inline-flex;flex-direction:column;align-items:stretch;width:max-content;max-width:100%;gap:16px;margin-top:28px}
.hero-actions-primary{display:flex;align-items:center;flex-wrap:wrap;gap:inherit}
.hero-actions .hero-button-placeholder{position:relative;width:100%;min-height:56px;isolation:isolate;background:#edd5a7;box-shadow:0 0 0 2px #704016,0 0 16px #d6a46155;transition:background .2s,transform .2s,box-shadow .22s}
.hero-button-placeholder .shopping-bag-icon{margin-left:auto;width:21px;height:21px}
@media(hover:hover) and (pointer:fine){.hero-actions .hero-button-placeholder:hover,.floating-merch:hover{transform:scale(1.03)}}
.hero-button-placeholder:before,.floating-merch:before,.floating-merch:after{content:"";position:absolute;inset:-2px;padding:3px;pointer-events:none;opacity:1;background:linear-gradient(110deg,#704016 0%,#d6a461 15%,#ffe4a3 25%,#fff9e5 29%,#c58a35 36%,#754216 48%,#edbe65 62%,#fff4cc 70%,#8a511b 83%,#704016 100%) 0 50%/250% 100%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@keyframes hero-border-flow{from{background-position:0 50%}to{background-position:166.6667% 50%}}
@media(prefers-reduced-motion:no-preference){html:not(.motion-off) .hero-button-placeholder:before,html:not(.motion-off) .floating-merch:before,html:not(.motion-off) .floating-merch:after{animation:hero-border-flow 4.8s linear infinite}}
.hero.is-offscreen .hero-button-placeholder:before{animation-play-state:paused}
@media(max-width:760px){.hero-actions .hero-button-placeholder{min-height:50px}}
.hero-actions .button:hover,.button-story:is(:hover,:focus-visible){background:#edd5a7}
.button-story{--gold:#d6a461;min-height:44px;padding:12px 18px;font-size:10px;gap:24px;margin-top:24px;border:0;text-shadow:none}
.button-story .arrow-icon{display:block;width:20px;height:20px;flex:none}
.hero-actions .button,.hero--video .hero-copy .hero-actions .button{margin-top:0;border:0}
.hero-actions .button .arrow-icon{display:block;width:24px;height:24px;flex:none}
.product-information{position:relative;background:#10212b;border-bottom:1px solid #d3e1df1f}
.product-information .eyebrow,.product-document .eyebrow{color:var(--cyan)}
.product-information .section-heading>p{max-width:41ch}
.product-information-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}
.product-record-card{min-width:0;border:1px solid #d3e1df22;background:#0c1a23}
.product-record-image{display:grid;place-items:center;min-width:0;padding:24px;background:#0b1922}
.product-record-image img{width:100%;height:245px;object-fit:contain}
.product-record-copy{padding:20px}
.product-record-copy h3{font-size:27px}
.product-record-copy p{font-size:12px;line-height:1.75;color:#bacad1;margin-top:14px}
.product-record-copy .text-link{font-size:9px;margin-top:14px;gap:12px}
.product-record-copy .text-link svg{width:16px}
.product-information-empty{min-height:280px;display:grid;place-items:center;border:1px solid #d3e1df30;padding:32px;color:#bacad1}
.product-image-pending{display:grid;place-items:center;min-height:245px;font-size:12px;color:#bacad1}
.product-document{background:#10212b}
.product-document-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:8%;align-items:start;padding-top:60px}
.product-document h1{font-size:clamp(48px,6vw,82px);overflow-wrap:anywhere}
.product-document-intro{margin-top:24px;color:#bacad1;font-size:15px}
.product-information-facts{margin:36px 0 0}
.product-information-facts>div{display:grid;grid-template-columns:minmax(130px,.75fr) minmax(0,1.25fr);gap:24px;padding:22px 0;border-top:1px solid #d3e1df30;font-size:14px}
.product-information-facts dt{font-weight:600}
.product-information-facts dd{margin:0;color:#bacad1;white-space:pre-line;overflow-wrap:anywhere}
.product-document-pack{margin:0;min-width:0}
.product-document-pack .product-record-image img{height:440px}
.product-document-pack figcaption{margin-top:22px;font-size:12px;line-height:1.8;color:#bacad1;white-space:pre-line}
.product-document-body{font-size:14px;color:#bacad1;margin-top:30px}
.practical-information{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10%;background:#21111b;border-top:1px solid var(--line)}
.practical-intro>p:not(.eyebrow){max-width:35ch;font-size:14px;color:var(--soft);margin-top:24px}
.contact-information{margin-top:45px}
.contact-information h3{font-size:25px}
.contact-information p{color:var(--soft);font-size:13px;margin-top:12px}
.contact-information a{overflow-wrap:anywhere}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:15px;font-weight:600}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary>span{font-size:23px;font-weight:400;color:var(--gold)}
.faq-list details[open] summary>span{transform:rotate(45deg)}
.js .faq-list summary>span{transition:transform .32s var(--ease)}
.js .faq-list details:not(.is-faq-open) summary>span{transform:none}
.faq-list details.is-faq-animating{overflow:hidden}
.faq-answer{padding:0 35px 25px 0;font-size:14px;color:var(--soft);line-height:1.85}
.faq-answer p{white-space:pre-line}
.faq-answer .text-link{margin-top:12px;font-size:10px}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:12px;color:#4C839E}
.footer-links a:hover{text-decoration:underline;text-underline-offset:5px}
@media(min-width:761px) and (max-width:1000px){#main-nav{gap:14px}#main-nav a{white-space:nowrap}.site-header{gap:14px;padding-inline:28px}.product-information-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.practical-information{gap:40px}.product-information-facts>div{grid-template-columns:1fr;gap:8px}}
@media(max-width:760px){
 .hero-actions{gap:10px;margin-top:20px}
 .product-information-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.product-record-image{padding:16px 10px}.product-record-image img{height:190px}.product-record-copy{padding:16px 12px}.product-record-copy h3{font-size:23px}.product-record-copy p{font-size:11px}.product-record-copy .text-link{font-size:8px;gap:8px;letter-spacing:.035em}
 .product-document-layout{grid-template-columns:1fr;gap:36px;padding-top:40px}.product-information-facts>div{grid-template-columns:1fr;gap:8px}.product-document-pack .product-record-image img{height:350px}
 .practical-information{grid-template-columns:1fr;gap:38px}.contact-information{margin-top:28px}.faq-list summary{font-size:14px;padding:20px 0}.faq-answer{font-size:13px;padding-right:12px}
}
/* One 2880 Ă— 7414 coordinate space. Its transparent 670px head overlaps the hero.
   The city foregrounds keep their full 5120px canvas, registered 2294px lower. */
.world-scene{position:relative;isolation:isolate;z-index:10;overflow:clip visible;width:100%;aspect-ratio:2880/6744;background:linear-gradient(#b79883,#d3bea6 25%,#111a22 60%)}
.world-scene-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.world-scene-clip{position:absolute;inset:0;overflow:hidden}
.world-scene-canvas{position:absolute;top:0;left:50%;width:100%;aspect-ratio:2880/7414;transform:translate3d(-50%,-9.03696%,0);pointer-events:none}
.world-plane{position:absolute;inset:0;display:block;width:100%;height:100%;transform:translate3d(0,var(--world-y,0px),0)}
.world-plane img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none}
.world-plane--registered img{top:30.941462%}
.world-plane--background{z-index:0}
.world-plane--background img{mask-image:linear-gradient(#000 98%,transparent 100%)}
.world-plane--frost{z-index:1}
.world-plane--balcony{z-index:2}
.world-plane--fog{z-index:3;inset:-20px 0 20px}
/* The source alpha already cuts out the roof and wall. Fade only the lower join. */
.world-plane--balcony img{mask-image:linear-gradient(180deg,#000 47%,transparent 50.6%)}
/* The cutout defines the Frost silhouette; keep its buildings fully opaque. */
.world-plane--frost img{mask-image:none}
/* Finish against the next section's colour without exposing buildings behind it. */
.world-scene-clip:after{content:"";position:absolute;z-index:6;inset:auto 0 0;height:clamp(60px,10vw,160px);background:linear-gradient(transparent,#0c1823);pointer-events:none}
/* Decorative exit only; the artwork and scene geometry remain registered.
   Keep the plain fade until a successful GPU draw, including without JS. */
.world-exit{position:absolute;z-index:6;left:0;bottom:-1px;width:100%;height:clamp(300px,42vw,680px);display:block;opacity:0;pointer-events:none}
.has-world-exit .world-exit{opacity:1}
.world-scene-clip.has-world-exit:after{opacity:0}
@media(max-width:760px){.world-exit{height:300px}}
.is-world-active .world-plane{will-change:transform}
.world-scene-copy{position:absolute;z-index:2;width:min(470px,40%);line-height:1.8}
.world-scene-copy h2{max-width:8em}
/* The Stratus introduction takes the former left-hand Currents position. */
.world-copy--stratus{top:30%;margin-top:0;left:var(--gutter);right:auto;width:36%;max-width:550px;color:#351c27;scroll-margin-top:-24px}
.world-copy--stratus h2{font-size:clamp(36px,3.8vw,64px)}
.world-copy--stratus .eyebrow{color:#351c27}
/* Center the crest on the natural text height; clip each sibling to the clouds. */
:is(.world-copy--stratus,.world-copy--frost){--crest-size:clamp(320px,36vw,560px)}
:is(.stratus-copy-body,.frost-copy-body){display:flow-root}
:is(.stratus-crest,.frost-crest){position:absolute;left:calc(min(100%,430px) + 16px);top:50%;transform:translateY(-50%);width:var(--crest-size);aspect-ratio:1;pointer-events:none}
.frost-crest{left:calc(100% + 16px)}
:is(.stratus-crest,.frost-crest) img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%}
:is(.stratus-crest,.frost-crest).is-crest-active img{will-change:transform}
html.motion-off :is(.stratus-crest,.frost-crest) img{transform:none!important;will-change:auto}
@media(prefers-reduced-motion:reduce){:is(.stratus-crest,.frost-crest) img{transform:none!important;will-change:auto}}
.world-description{font-size:14px;max-width:43ch;margin-top:26px}
.world-copy--stratus .world-description{color:#1b0711;font-weight:500}
:is(.world-scene-copy,.stratus-copy-body)>.text-link{margin-top:16px}
.world-copy--stratus .text-link{border-color:#4a2c3d55}
.world-copy--stratus .world-facts{margin-top:30px;padding-top:20px;border-color:#4a2c3d55;color:#351c27;gap:32px}
.world-copy--stratus .world-facts small{color:#28131c;font-weight:500}
.world-character-link{display:inline-flex;align-items:center;gap:32px;font-family:var(--display);font-size:23px;line-height:1.2;margin-top:24px;padding:8px 0}
.world-character-link small{display:block;font-family:var(--body);font-size:10px;margin-top:6px}
.world-character-link svg{width:20px;transition:transform .2s}
.world-character-link:hover svg{transform:translateX(5px)}
.world-transition{position:absolute;z-index:2;top:58%;right:var(--gutter);width:40%;max-width:610px;color:var(--paper);text-shadow:0 2px 16px #18132177}
.world-statement{font-family:var(--display);font-size:clamp(38px,4.9vw,72px);line-height:1.02;letter-spacing:-.035em;text-transform:uppercase}
.world-transition .thread-line{margin:30px 0;height:35px;background:#efd7ba80}
.world-bridge{font-family:var(--display);font-size:clamp(25px,2.8vw,43px);line-height:1.2;max-width:23ch}
/* Place the Frost introduction over the lower-left city towers in the reference. */
.world-copy--frost{top:69%;left:8%;right:auto;width:40%;max-width:610px;color:var(--paper);text-shadow:0 2px 14px #07121bbb}
.world-copy--frost .eyebrow{color:var(--cyan)}
.world-copy--frost h2{text-transform:none;font-size:clamp(48px,4.9vw,76px)}
.world-copy--frost .world-description{color:#d4e3e6;max-width:36ch}
.world-copy--frost .button{margin-top:30px;text-shadow:none}
.world-copy--frost .button-cold{background:var(--shortcut-bg);border-color:var(--shortcut-edge);color:var(--shortcut-ink)}
.world-copy--frost .button-cold:is(:hover,:focus-visible){background:var(--shortcut-hover-bg);color:var(--shortcut-hover-ink)}
.world-copy--frost .button-cold:focus-visible{outline-color:var(--shortcut-focus)}
.world-epilogue{font-size:9px;letter-spacing:.17em;text-transform:uppercase;margin-top:44px;color:#d0e4e7}
html.motion-off .world-plane,html:not(.js) .world-plane{transform:translate3d(0,0,0)!important;will-change:auto}
/* The static entrance places its complete silhouette below this full-height hero. */
html.motion-off .hero,html:not(.js) .hero{height:max(100svh,690px);min-height:0}
/* Render the entrance and cloud field together, using the painting once in its
   original orientation. The lower end meets the unchanged city artwork. */
.world-cloud-entry,.world-cloud-join{position:absolute;z-index:5;display:block;pointer-events:none;opacity:0}
/* End the panorama strip before the nearest moving foreground silhouette. */
.world-scene-art{--panorama-extension:min(60svh,calc(max(100vw,640px)*.3 - 50px))}
.world-cloud-entry{--cloud-extension:60svh;left:0;top:calc(10px - var(--cloud-extension));width:100%;height:calc(var(--cloud-extension) + 25% + var(--panorama-extension))}
html.motion-off .world-cloud-entry,html:not(.js) .world-cloud-entry{--cloud-extension:clamp(130px,17vw,300px)}
@media(prefers-reduced-motion:reduce){.world-cloud-entry{--cloud-extension:clamp(130px,17vw,300px)}}
.world-cloud-join{z-index:6;left:0;top:24.080664%;width:100%;height:calc(var(--panorama-extension) + 12px)}
html.motion-off .world-scene-art,html:not(.js) .world-scene-art{--panorama-extension:min(clamp(130px,17vw,300px),calc(max(100vw,640px)*.3 - 50px))}
@media(prefers-reduced-motion:reduce){.world-scene-art{--panorama-extension:min(clamp(130px,17vw,300px),calc(max(100vw,640px)*.3 - 50px))}}
.has-world-cloud-entry>.world-cloud-entry,.has-world-cloud-join>.world-cloud-join{opacity:1}
/* The reference's reading-order ink reveal follows scroll in either direction. */
.stratus-ink-word{white-space:nowrap}
.stratus-ink-letter{opacity:.18;transition:opacity 90ms linear}
.stratus-reveal-ready:focus-within .stratus-ink-letter,html.motion-off .stratus-ink-letter{opacity:1!important;transition:none}
@media(prefers-reduced-motion:reduce){.stratus-ink-letter{opacity:1!important;transition:none}}
@media(min-width:761px) and (max-width:1000px){.world-copy--stratus{top:38%;width:40%}.world-copy--stratus .world-description{font-size:12px}.world-epilogue{margin-top:24px}}
/* Keep the left-side Frost introduction below the preceding story on tablets. */
@media(min-width:761px) and (max-width:1000px){.world-copy--frost{top:max(70%,calc(56% + 284px));width:46%}}
@media(max-width:760px){
 .world-scene{min-height:1500px}
 .world-scene-canvas{width:max(100%,640px)}
 .world-scene-copy{left:24px;right:24px;width:auto;max-width:none}
 .world-scene-copy .eyebrow{margin-bottom:18px;font-size:8px}
 .world-scene-copy h2{font-size:40px;max-width:8em}
 .world-description{font-size:12px;line-height:1.75;margin-top:18px;max-width:none}
 :is(.world-scene-copy,.stratus-copy-body)>.text-link{font-size:9px;margin-top:10px}
 .world-copy--stratus .world-facts{margin-top:24px;padding-top:16px;font-size:10px;gap:28px}
 .world-copy--stratus .world-facts small{font-size:8px}
 .world-character-link{font-size:21px;margin-top:16px}.world-character-link small{font-size:9px}
 .world-transition{top:59%;left:24px;right:24px;width:auto;max-width:none}
 .world-statement{font-size:34px;max-width:10em}.world-transition .thread-line{height:24px;margin:22px 0}.world-bridge{font-size:25px;max-width:21ch}
 .world-copy--frost{top:59%}.world-copy--frost .world-description{max-width:none}
 .world-copy--frost .button{font-size:9px;padding:12px 16px;min-height:44px;gap:24px;margin-top:22px}
 .world-epilogue{font-size:8px;margin-top:30px}
}
@media(max-width:360px){
 .world-scene{min-height:1640px}
 .world-scene-canvas{width:max(100%,700px)}
 .world-transition{top:60%}.world-copy--frost{top:60%}
}
@media(prefers-reduced-motion:reduce){.hero{height:max(100svh,690px);min-height:0}.world-plane{transform:translate3d(0,0,0)!important;will-change:auto}}
.world-rail{color:#d6a461;mix-blend-mode:normal;transform:translateY(-50%) scale(1.3);transform-origin:right center}
.world-rail:before,.world-rail:after{content:'';position:absolute;right:3px;top:10px;bottom:10px;width:2px;pointer-events:none}
.world-rail:before{background:#d6a46140}
.world-rail:after{background:linear-gradient(180deg,#d6a461 0%,#d6a461 33.333333%,#4c839e 50%,#4c839e 100%);clip-path:inset(0 0 calc((1 - var(--rail-progress,0))*100%) 0)}
.world-rail a{position:relative;z-index:1;color:#d6a461;text-shadow:0 1px 5px #0b1823,0 0 12px #0b182399;transition:color .2s}
.world-rail a{--chapter-active:#d6a461}
.world-rail a:is([href="#frost"],[href="#lore"],[href="#collectibles"],[href="#practical-information"]){--chapter-active:#4c839e}
.world-rail span{display:block;opacity:1;font-weight:500;transform-origin:right center;transition:color .2s,transform .18s ease}
.world-rail a:is(:hover,:focus-visible) span{transform:scale(1.1)}
.world-rail i{width:8px;height:8px;border-color:currentColor;background:transparent}
.world-rail .is-past{color:var(--chapter-active,#d6a461)}
.world-rail a:is(:hover,:focus-visible),.world-rail .active{color:var(--chapter-active,#edd5a7)}
.world-rail .active span{font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.world-rail :is(.active,.is-past) i{background:currentColor}
.hero--video{--hero-still-bleed:calc(clamp(130px,17vw,300px)*.31 + 28px);isolation:isolate;z-index:0}
.hero--video,.hero--video .hero-stage{background:#29131e}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none;transform:scale(calc(1.18 - var(--hero-p,0)*.18));transform-origin:50% 25%}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%}
.hero-poster img,.hero-video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-video{opacity:0;transition:opacity .35s ease}
.hero.video-playing .hero-video{opacity:1}

.hero--video .hero-copy{--hero-shade-pad:24px;left:var(--gutter);top:calc(50% + 260px);width:min(1034px,calc((100vw - 8px)/.924 - 48px));max-width:none;isolation:isolate;transform:translateY(-40%) scale(.84);transform-origin:left center;opacity:1;text-align:center}
/* A local burgundy scrim fades into the video without a panel or backdrop blur. */
.hero--video .hero-copy:before{content:'';position:absolute;z-index:-1;pointer-events:none;top:calc(-1*(var(--hero-shade-pad) + var(--hero-shade-extra-y,0px)));left:calc(-1*(var(--hero-shade-pad) + var(--hero-shade-extra-x,0px)));width:calc(100% + 2*(var(--hero-shade-pad) + var(--hero-shade-extra-x,0px)));height:calc(100% + 2*(var(--hero-shade-pad) + var(--hero-shade-extra-y,0px)));background:radial-gradient(ellipse at center,rgb(88 23 52 / 65%) 0%,rgb(88 23 52 / 52%) 35%,rgb(88 23 52 / 23.4%) 65%,rgb(88 23 52 / 0%) 85%);filter:blur(18px);transform:scale(1.12,1.45)}
.hero--video .hero-copy h1{font-size:clamp(48px,5.68vw,89.6px);margin-left:0;max-width:none;white-space:nowrap;text-wrap:nowrap;text-align:left;text-transform:none}
.hero--video .hero-intro,.hero--video .hero-actions{margin-left:auto;margin-right:auto}
.hero--video .hero-intro{font-size:22.4px;text-align:left;max-width:none}
.hero--video .hero-actions{display:flex;flex-direction:row;flex-wrap:nowrap;max-width:none}
.hero--video .hero-actions-primary{display:contents}
.hero--video .hero-actions .button{flex:0 0 auto;min-height:56px;padding:16px 23px}
.hero--video .hero-actions .hero-button-placeholder{width:auto;flex:1 0 auto}

html.motion-off .hero-media,html:not(.js) .hero-media{transform:none}
@media(max-width:1100px) and (min-width:761px){.hero--video .hero-copy h1{font-size:5.76vw}}
@media(max-width:760px){
 .hero--video .hero-media{transform:scale(calc(1.09 - var(--hero-p,0)*.09))}
 .hero--video .hero-poster img,.hero--video .hero-video{object-position:50% 35%}
 
 .hero--video .hero-copy{--hero-shade-pad:10px;top:380px;left:var(--gutter);right:auto;width:calc((100vw - 8px)/.924 - 20px);max-width:none;transform:scale(.84);transform-origin:left top}
 .hero--video .hero-copy h1{font-size:clamp(30.4px,8.32vw,52px)}
 .hero--video .hero-copy .eyebrow{margin-bottom:18px}
 .hero--video .hero-intro{font-size:17.6px;max-width:none;margin-top:17px}
 .hero--video .hero-actions{display:grid;grid-template-columns:1.12fr 1fr 1.12fr;width:100%;gap:8px}
 .hero--video .hero-actions .button{min-width:0;white-space:normal;gap:6px;padding:13px 9px;letter-spacing:.02em;justify-content:space-between}
 .hero--video .hero-actions .button svg{width:16px;height:16px}
 .hero--video .hero-copy .button{margin-top:20px}
}
@media(max-width:380px){.hero--video .hero-copy{top:370px}.hero--video .hero-intro{font-size:16px}}
@media(prefers-reduced-motion:reduce){.hero--video .hero-media{transform:none}}
/* Continue the same still image beneath every valley of the cloud boundary.
   Keep the stage and copy at the hero's height; only the artwork extends. */
html.motion-off .hero--video .hero-stage,html:not(.js) .hero--video .hero-stage{height:100%;min-height:0;overflow:visible}
html.motion-off .hero--video .hero-media,html:not(.js) .hero--video .hero-media{bottom:calc(-1*var(--hero-still-bleed));overflow:hidden}
@media(prefers-reduced-motion:reduce){
 .hero--video .hero-stage{height:100%;min-height:0;overflow:visible}
 .hero--video .hero-media{bottom:calc(-1*var(--hero-still-bleed));overflow:hidden}
}

/* Reading stops sit over the existing artwork; they never drive its geometry or motion. */
.world-story,.world-inhabitant{position:absolute;z-index:2;margin:0}
.world-inhabitant--muse{top:4.5%;right:9%;width:35%;max-width:550px;color:#321a26}
.world-inhabitant-link{display:block;text-align:center}
.world-inhabitant .story-portrait{width:100%;height:clamp(310px,27vw,480px);object-fit:contain;object-position:center bottom}
.inhabitant-caption{display:block;margin-top:16px;color:var(--paper);text-shadow:0 2px 8px #21111b}
.inhabitant-caption .eyebrow{display:block;margin-bottom:10px;color:inherit}
.inhabitant-name{display:flex;justify-content:center;align-items:center;gap:24px;font-family:var(--display);font-size:clamp(32px,3vw,48px);line-height:1.1}
.inhabitant-name svg{width:24px;transition:transform .2s}
.world-inhabitant-link:hover .inhabitant-name svg{transform:translateX(5px)}
.inhabitant-role{display:block;font-size:12px;line-height:1.6;margin-top:8px}
.world-story{left:var(--gutter);width:36%;max-width:550px}
.world-story .eyebrow{font-size:9px;letter-spacing:.13em;margin-bottom:22px;line-height:1.7}
.world-story h3{font-size:clamp(34px,3.8vw,60px);line-height:1.02;letter-spacing:-.035em}
.world-story-description{font-size:14px;line-height:1.8;max-width:38ch;margin-top:22px}
.world-story .text-link{font-size:10px;gap:20px;margin-top:20px}
.world-story--currents{top:30%;color:#321a26}
.world-story--currents .eyebrow{color:#321a26}
.world-story--currents .text-link{border-color:#321a2655}
.world-currents{display:flex;gap:30px;margin:26px 0 0}
.world-currents>div{flex:1;border-top:1px solid #321a2655;padding-top:15px}
.world-currents dt{font-family:var(--display);font-size:23px;display:flex;gap:16px;align-items:center}
.world-currents dt span{font-family:var(--body);font-size:18px}
.world-currents dd{font-size:12px;line-height:1.8;margin:8px 0 0}
.world-story--rupture{top:47%;color:var(--paper);text-shadow:0 2px 10px #21111bd9}
@media(min-width:1001px){.world-story--rupture{top:46.2%;left:35%;right:auto}}
.world-story--rupture .eyebrow{color:#f0ce98}
.world-story--hex{top:79%;width:43%;max-width:680px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:16px;align-items:center;color:var(--paper);text-shadow:0 2px 12px #07121b}
.world-story--hex .story-portrait{width:100%;height:clamp(250px,23vw,390px);object-fit:contain;object-position:center bottom}
.world-story--hex .eyebrow{color:var(--cyan);margin-bottom:14px}
.world-story--hex h3{font-size:clamp(35px,3.4vw,54px)}
.world-story--hex .world-story-description{font-size:12px;margin-top:18px}
.world-story--hex .inhabitant-role{color:var(--cyan);font-size:11px}
@media(min-width:761px) and (max-width:1000px){
 .world-inhabitant--muse{top:5%;right:5%;width:38%}.world-inhabitant .story-portrait{height:300px}
 .world-story{width:40%}.world-story--currents{top:38%}.world-story--rupture{top:56%}
 .world-story h3{font-size:32px}.world-story .eyebrow{font-size:8px;margin-bottom:14px}.world-currents{gap:16px;margin-top:18px}.world-currents dt{font-size:20px}.world-currents dd{font-size:11px}
 .world-story-description{font-size:12px;margin-top:16px}.world-story--hex{top:80%;width:42%;grid-template-columns:100px minmax(0,1fr);gap:10px}.world-story--hex .story-portrait{height:230px}.world-story--hex .world-story-description{display:none}
}
@media(max-width:760px){
 .world-inhabitant--muse{top:30%;left:24px;right:24px;width:auto;max-width:none;color:var(--paper);text-shadow:0 2px 10px #21111b}
 .world-inhabitant-link{display:flex;align-items:center;gap:20px;text-align:left}.world-inhabitant .story-portrait{width:90px;height:130px;flex:none}.inhabitant-caption{margin:0}.inhabitant-caption .eyebrow{font-size:7px;margin-bottom:8px}.inhabitant-name{font-size:29px;justify-content:flex-start;gap:16px}.inhabitant-name svg{width:18px}.inhabitant-role{font-size:10px}
 .world-story{left:24px;right:24px;width:auto;max-width:none}.world-story .eyebrow{font-size:7px;margin-bottom:9px;line-height:1.5}.world-story h3{font-size:27px}.world-story .text-link{font-size:8px;gap:14px;margin-top:10px;padding-bottom:7px}
 .world-story--currents{top:40%;color:var(--paper);text-shadow:0 2px 10px #21111b}.world-story--currents .eyebrow{color:var(--paper)}.world-story--currents h3 br{display:none}.world-currents{display:none}.world-story--currents .text-link{border-color:#efd7ba80}
 .world-story--rupture{top:48%}.world-story--rupture h3{font-size:25px}.world-story--rupture h3 br{display:none}.world-story-description{font-size:11px;line-height:1.7;margin-top:12px;max-width:42ch}.world-story-detail{display:none}
 .world-story--hex{top:auto;bottom:8px;display:block}.world-story--hex .story-portrait,.world-story--hex .eyebrow,.world-story--hex h3,.world-story--hex .inhabitant-role,.world-story--hex .world-story-description{display:none}.world-story--hex .text-link{margin:0}
}

/* Keep reference imagery intact and the two gallery controls usable together. */
html.gallery-filtering{overflow-anchor:none}
.characters-section{position:relative;box-shadow:0 var(--gallery-flow-gap,0px) 0 #0c1823}
.character-grid{position:relative;align-content:start}
.character-card{transform-origin:0 0}
.character-card.gallery-exit{position:absolute;z-index:2;margin:0;pointer-events:none}
/* Move a clipped colour layer instead of repainting the gradient each frame. */
.portrait-ring{z-index:1;pointer-events:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .character-portrait:before{
  content:"";position:absolute;inset:-60%;z-index:0;pointer-events:none;opacity:0;visibility:hidden;
  background:linear-gradient(145deg,var(--portrait-start) 0%,var(--portrait-mid) 25%,var(--portrait-end) 50%,var(--portrait-mid) 75%,var(--portrait-start) 100%);
  animation:portrait-gradient-flow 6s cubic-bezier(.37,0,.63,1) infinite alternate paused;
  transition:opacity .35s ease,visibility 0s linear .35s;
 }
 html:not(.motion-off) .character-card:is(:hover,:focus-visible):not(.gallery-exit) .character-portrait:before{
  opacity:.8;visibility:visible;transition-delay:0s;animation-play-state:running;will-change:transform,opacity;
 }
 @keyframes portrait-gradient-flow{
  from{transform:translate3d(-14%,-8%,0)}
  to{transform:translate3d(14%,8%,0)}
 }
}
.character-portrait img.pack-art{transform-origin:center}
/* Matching origins let the artwork cancel the frame's direct transform exactly. */
.portrait-artwork{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.character-portrait,.portrait-artwork{transform-origin:50% 50%}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html:not(.motion-off) .character-grid.has-box-parallax :is(.character-portrait,.portrait-artwork){will-change:transform}
}
html.motion-off .character-grid :is(.character-portrait,.portrait-artwork){transform:none!important}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.character-grid :is(.character-portrait,.portrait-artwork){transform:none!important}}
.pack-figure img{object-fit:contain}
/* Merchandise stays available; only the return-to-top control follows scroll. */
.floating-actions{--shortcut-bg:#d6a461;--shortcut-ink:#581734;--shortcut-edge:#d6a461;--shortcut-hover-bg:#edd5a7;--shortcut-hover-ink:#581734;--shortcut-focus:#edd5a7;position:fixed;right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;flex-direction:column;gap:10px;pointer-events:none}
/* Meet Beast and the Frost scroll-up control share their complete palette. */
.floating-actions.is-frost,.world-copy--frost .button-cold{--shortcut-bg:#4c839e;--shortcut-ink:#032d43;--shortcut-edge:#4c839e;--shortcut-hover-bg:#b9dfeb;--shortcut-hover-ink:#032d43;--shortcut-focus:#b9dfeb}
.floating-action{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--shortcut-edge);background:var(--shortcut-bg);color:var(--shortcut-ink);box-shadow:0 3px 14px #0b182333;pointer-events:auto;transition:background-color .45s ease,color .45s ease,border-color .45s ease,outline-color .45s ease,transform .2s}
.floating-action svg{display:block;width:23px;height:23px}
.floating-action:is(:hover,:focus-visible){background:var(--shortcut-hover-bg);color:var(--shortcut-hover-ink)}
.floating-action:focus-visible{outline:2px solid var(--shortcut-focus);outline-offset:3px}
.floating-merch{--shortcut-bg:#edd5a7;--shortcut-ink:#2d1418;--shortcut-hover-bg:#edd5a7;--shortcut-hover-ink:#2d1418;--shortcut-focus:#edd5a7;position:relative;isolation:isolate;border:0;box-shadow:0 0 0 2px #704016,0 0 16px #d6a46155;transition:background-color .45s ease,color .45s ease,outline-color .45s ease,box-shadow .45s ease,transform .2s}
.floating-merch:before{transition:opacity .45s ease}
.floating-merch:after{opacity:0;background-image:linear-gradient(110deg,#032d43 0%,#4c839e 15%,#9ccddd 25%,#eaf9ff 29%,#5d9ebb 36%,#254f68 48%,#89c6dd 62%,#eaf9ff 70%,#3c7390 83%,#032d43 100%);transition:opacity .45s ease}
.floating-actions.is-frost .floating-merch{--shortcut-bg:#b9dfeb;--shortcut-ink:#032d43;--shortcut-hover-bg:#d7f0f7;--shortcut-hover-ink:#032d43;--shortcut-focus:#b9dfeb;box-shadow:0 0 0 2px #254f68,0 0 16px #4c839e66}
.floating-actions.is-frost .floating-merch:before{opacity:0}
.floating-actions.is-frost .floating-merch:after{opacity:1}
.floating-top{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:background-color .45s ease,color .45s ease,border-color .45s ease,outline-color .45s ease,opacity .2s,transform .2s,visibility .2s}
.floating-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
html.motion-off .floating-actions,html.motion-off .floating-action{transition:none}
@media(prefers-reduced-motion:reduce){.floating-actions,.floating-action{transition:none}}
@media(max-width:760px){.floating-actions{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}}
@media print{.floating-actions{display:none}}
.gallery-tools{flex-wrap:wrap}
@media(max-width:760px){.gallery-tools{gap:12px;padding-bottom:16px}.gallery-tools .character-filters{width:100%}.art-switch button{min-height:44px}}
/* The crew occupies the cloud field before the panorama, in normal reading order. */
.world-journey{--world-cloud-head:56.388889vw;--crew-lift:45svh;position:relative;display:flow-root;isolation:isolate;z-index:10}
.world-journey:before{content:"";position:absolute;z-index:0;inset:calc(-1*var(--crew-lift)) 0 auto;height:calc(var(--cloud-field-bottom,100%) + var(--crew-lift));background:#b79883 url('stratus-frost-bg-2160.webp') 50% 11.55%/auto 460.5% no-repeat;pointer-events:none}
.world-journey.has-world-cloud-entry:before{opacity:0}
.world-journey>.world-cloud-entry{height:calc(var(--cloud-extension) + var(--cloud-field-bottom,1800px) - 10px)}
.world-journey .world-scene{margin-top:calc(-1*var(--world-cloud-head));z-index:auto;isolation:auto;background:transparent}
.world-journey .world-scene-art{z-index:auto}
.world-journey .world-scene-clip{z-index:0;clip-path:inset(var(--world-cloud-head) 0 0)}
.world-chapter-anchor{position:absolute;top:24.080664%;left:0;width:1px;height:1px;pointer-events:none}
.world-journey .world-story,.world-journey .world-scene-copy{z-index:8}
/* Anchor the heading at the navbar clearance, without adding the section padding twice. */
.characters-section--clouds{--crew-top-padding:clamp(48px,5vw,96px);z-index:8;background:transparent;color:#351c27;margin-top:calc(200px - var(--crew-lift));padding-top:var(--crew-top-padding);scroll-margin-top:calc(-1*var(--crew-top-padding));padding-bottom:clamp(96px,8vw,150px);box-shadow:none}
.characters-section--clouds .character-grid{min-height:var(--crew-grid-height,0px)}
.characters-section--clouds .eyebrow,.characters-section--clouds .character-name small,.characters-section--clouds .character-name h3,.characters-section--clouds .character-name svg{color:#351c27}
.characters-section--clouds .character-name small{font-size:12px}
.character-name h3{position:relative;width:fit-content}
.character-name h3:after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .25s ease}
.character-card:is(:hover,:focus-visible) .character-name h3:after{transform:scaleX(1)}
html.motion-off .character-name h3:after{transition:none}
@media(prefers-reduced-motion:reduce){.character-name h3:after{transition:none}}
.characters-section--clouds .gallery-tools{border-color:#58173440}
.characters-section--clouds .character-filters button{color:#351c27;font-size:16.5px}
.characters-section--clouds .character-filters button.active{border-color:#581734;color:#581734;font-weight:800}
.characters-section--clouds .art-switch{border-color:#58173455;background:#edd5a7b3}
.characters-section--clouds .art-switch button{color:#351c27;font-size:13.5px}
.characters-section--clouds .art-switch button[aria-pressed=true]{background:#581734;color:#edd5a7}
.characters-section--clouds :is(a,button):focus-visible{outline-color:#581734}
/* Continue Frost through the existing mist silhouette into the supplied pits.
   The canvas paints the picture's first strip at identical coordinates. */
.frost-pits{--frost-mist-height:min(60svh,clamp(300px,42vw,680px));--frost-art-height:max(56.25vw,calc(var(--frost-mist-height) + 50svh));--frost-fade-height:clamp(80px,10vw,180px);position:relative;z-index:1;min-height:var(--frost-art-height);margin-top:calc(-1*var(--frost-mist-height))}
.frost-pits-art{position:absolute;inset:0 0 auto;height:var(--frost-art-height);display:block;mask-image:linear-gradient(transparent,#000 var(--frost-mist-height));pointer-events:none}
.frost-pits-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.frost-pits>.world-exit{top:0;bottom:auto;height:var(--frost-mist-height)}
.frost-pits.has-world-frost-pits>.world-exit{opacity:1}
.frost-pits.has-world-frost-pits>.frost-pits-art{mask-image:none;clip-path:inset(calc(var(--frost-mist-height) - 1px) 0 0)}
.frost-pits:before{content:"";position:absolute;inset:var(--frost-art-height) 0 0;background:var(--merch-bg);pointer-events:none}
.frost-pits:after{content:"";position:absolute;z-index:7;inset:calc(var(--frost-art-height) - var(--frost-fade-height)) 0 auto;height:var(--frost-fade-height);background:linear-gradient(transparent,var(--merch-bg));pointer-events:none}
/* Lore reads directly on the pits; only its text gets a local contrast backing. */
.lore-section--pits{--lore-top-padding:clamp(120px,10vw,190px);position:relative;z-index:8;background:transparent;border:0;padding-top:var(--lore-top-padding);scroll-margin-top:calc(-1*var(--lore-top-padding))}
.lore-section--pits .section-heading{position:relative;isolation:isolate}
.lore-section--pits .section-heading:before{content:"";position:absolute;z-index:-1;inset:-28px -24px;background:radial-gradient(ellipse at 25% 50%,#0c1823b3,transparent 75%);pointer-events:none}
.lore-section--pits .lore-intro{color:#d4e3e6;text-shadow:0 2px 12px #032d43b3}
.lore-section--pits .lore-card-copy{padding:22px;background:linear-gradient(#0c1823e6,#0c1823f5)}
@media(min-width:761px){.lore-section--pits{padding-right:max(var(--gutter),170px)}}
@media(max-width:760px){.lore-section--pits{--lore-top-padding:calc(var(--frost-mist-height) + 32px)}}
/* The still edge can reach .694 of the mist strip. Leave room for the
   complete Lore heading below it; phones already clear the entire strip. */
@media(min-width:761px){html.motion-off .lore-section--pits{--lore-top-padding:max(clamp(120px,10vw,190px),calc(var(--frost-mist-height)*.7 + 40px))}}
@media(prefers-reduced-motion:reduce) and (min-width:761px){.lore-section--pits{--lore-top-padding:max(clamp(120px,10vw,190px),calc(var(--frost-mist-height)*.7 + 40px))}}
@media(min-width:761px){.characters-section--clouds{padding-right:max(var(--gutter),170px)}}
@media(max-width:760px){.world-journey{--world-cloud-head:max(56.388889vw,361.21px)}.world-journey:before{background-image:url('stratus-frost-bg-900.webp')}}
@media(max-width:360px){.world-journey{--world-cloud-head:394.923px}}
/* The still cloud edge is shallower, so keep its crew content below that edge. */
html.motion-off .world-journey,html:not(.js) .world-journey{--crew-lift:clamp(70px,9vw,150px)}
@media(prefers-reduced-motion:reduce){.world-journey{--crew-lift:clamp(70px,9vw,150px)}}
/* Keep the fallback cloud painting below the landing screen as well. */
html.motion-off .world-journey:before,html:not(.js) .world-journey:before{top:0;height:var(--cloud-field-bottom,100%)}
@media(prefers-reduced-motion:reduce){.world-journey:before{top:0;height:var(--cloud-field-bottom,100%)}}
/* On phones the restored introduction reads above the other city stories. */
@media(max-width:760px){
 .characters-section--clouds .character-filters button{font-size:15px}
 .characters-section--clouds .character-name small{font-size:9px}
 .world-journey .world-copy--stratus{top:calc(var(--world-cloud-head) + 32px);left:24px;right:24px;width:auto;max-width:none;margin:0;scroll-margin-top:0}
 .world-copy--stratus h2{font-size:clamp(32px,8vw,42px)}
 .world-copy--stratus .eyebrow{margin-bottom:14px}
 .world-copy--stratus .world-description{font-size:12px;line-height:1.8;margin-top:18px}
 .world-copy--stratus .text-link{font-size:10px;margin-top:14px}
 :is(.stratus-crest,.frost-crest){position:relative;left:auto;top:auto;transform:none;width:clamp(104px,30vw,160px);margin-top:24px}
 .frost-pits{--frost-mist-height:min(60svh,300px);margin-top:calc(var(--world-story-tail,0px) - var(--frost-mist-height))}
 .world-journey .world-story--rupture{top:max(54%,calc(var(--stratus-story-end,0px) + 32px))}
 .world-journey .world-copy--frost{top:max(66%,calc(var(--rupture-story-end,0px) + 40px))}
}
@media(min-width:761px) and (max-height:650px){.world-rail{gap:14px}}
/* One type scale for the city introductions and the Rupture story.
   Letter-fill spans inherit these dimensions in both their faint and filled states. */
.world-scene{--world-heading-size:clamp(36px,3.8vw,64px);--world-body-size:14px;--frost-copy-ink:#d4e3e6}
.world-scene :is(.world-copy--stratus h2,.world-copy--frost h2,.world-story--rupture h3){font-size:var(--world-heading-size);line-height:1.04;letter-spacing:-.045em}
.world-scene :is(.world-description,.world-story-description){font-size:var(--world-body-size);line-height:1.8}
.world-copy--frost :is(h2,.world-description){color:var(--frost-copy-ink)}
@media(max-width:1000px){.world-scene{--world-body-size:12px}}
@media(max-width:760px){.world-scene{--world-heading-size:clamp(32px,8vw,42px)}}

/* Promote only the moving Beast; the surrounding ring stays stationary. */
.collection-art.has-collection-parallax>img{will-change:transform}
html.motion-off .collection-art>img{transform:none!important;will-change:auto}
@media(prefers-reduced-motion:reduce){.collection-art>img{transform:none!important;will-change:auto}}