/* Frame-breaking illustration, with a different composition for each world. */
.storm .arrival{min-height:760px;height:100svh;background:#10225e}
.storm .arrival-title{margin-top:10vh;z-index:2}
.storm .arrival h1{font-size:clamp(6rem,19vw,21rem);line-height:.85;transform:rotate(-4deg);max-width:none}
.storm .arrival-title>p:not(.eyebrow){position:relative;z-index:4;display:inline-block;background:#ffe450;color:#172353;padding:8px 16px;text-shadow:none;transform:rotate(-2deg);font-family:'Bangers';letter-spacing:.05em}
.storm .arrival-title>a{position:absolute;right:0;top:65vh;z-index:6;background:#13224b;box-shadow:5px 5px #0005}
.storm .hero-actors{display:block;left:3%;bottom:-10%;width:94%;height:78%;max-height:none;object-fit:contain;object-position:center bottom;z-index:3;transform:translateY(calc(var(--scroll,0)*.035px));filter:drop-shadow(0 15px 15px #06112d)}
.storm .arrival-art{opacity:.5}
.storm .arrival .near{z-index:4}
.storm .origin{grid-template-columns:.85fr 1.4fr;gap:5%;padding-block:95px}
.comic-composition{position:relative;display:grid;grid-template-columns:1.5fr .8fr;gap:14px;min-height:560px;align-items:start;padding-bottom:100px}
.comic-window{margin:0;position:relative;border:7px solid #151d35;background:#ffeba4;box-shadow:8px 8px #15213a55;overflow:visible}
.comic-window img{display:block;width:100%;object-fit:cover}
.comic-window.wide{transform:rotate(-4deg);z-index:1}
.comic-window.wide img{height:330px;object-position:65% center}
.comic-window.narrow{margin-top:110px;transform:rotate(6deg)}
.comic-window.narrow img{height:310px;object-position:70% 50%}
.comic-window figcaption{font:21px 'Bangers';color:#16233c;padding:12px 16px;text-align:left}
.comic-cutout{position:absolute;width:52%;height:270px;object-fit:contain;bottom:-5px;left:18%;z-index:3;transform:rotate(-17deg);filter:drop-shadow(10px 15px 6px #0007)}
.storm .origin>.paper{transform:rotate(-2deg)}
.comic-story{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;align-items:start}
.comic-splash{position:sticky;top:35px;margin:0;border:7px solid #101934;transform:rotate(-3deg);box-shadow:10px 10px #0005}
.comic-splash img{display:block;width:100%;height:610px;object-fit:cover;object-position:63% center}
.storm .comic-story .story-scroll{display:block}
.storm .comic-story .story-scroll>p{margin:0 0 22px;transform:rotate(1deg);padding:25px 30px}
.tide .origin{grid-template-columns:1.1fr .9fr;gap:4%;padding-bottom:150px;overflow:visible;z-index:2}
.tide .origin>.paper{z-index:3;max-width:620px}
.harbor-panorama{margin:0;position:relative;height:540px;transform:rotate(3deg);align-self:start}
.harbor-panorama>img:first-child{width:100%;height:100%;object-fit:cover;object-position:center bottom;clip-path:polygon(0 5%,96% 0,100% 97%,4% 100%);filter:drop-shadow(0 15px 20px #002a3c55)}
.harbor-rope{position:absolute;inset:-6%;width:112%;height:112%;object-fit:fill;pointer-events:none}
.quay-relic{position:absolute;bottom:-30px;right:24%;width:210px;z-index:5}
.quay-relic .painted-artifact>img{height:220px}
.quay-relic figcaption{display:none}
.tide .myth{padding-top:150px}
.tide .cast .section-heading{text-align:left;margin:0 0 20px;max-width:650px}
.tide .cast .section-heading h2{font-size:clamp(4rem,8vw,8rem)}
.breakout-stage{grid-template-columns:1.3fr .8fr;gap:2%;margin-top:-40px}
.breakout-stage .character-theatre{aspect-ratio:1.05;min-height:450px}
.breakout-stage .cast-book{position:relative;z-index:4;border:0;box-shadow:none;background:none!important;padding:45px 0 30px 35px}
.tide .breakout-stage .cast-book h3{font-size:2rem}
.wood .root-family{isolation:isolate;padding-block:95px;overflow:visible;z-index:2}
.canopy-border{position:absolute;inset:-4% -3%;width:106%;height:108%;object-fit:fill;pointer-events:none;z-index:-1;opacity:.7}
.wood .family{position:relative;border:1px solid #cdcc8977;background:#193b28cc;padding:30px 50px;clip-path:polygon(0 3%,98% 0,100% 98%,2% 100%)}
.wood .family article{background:none}
.bell .mountain-cast{display:grid;grid-template-columns:.65fr 1.35fr;gap:0 60px;align-items:center}
.bell .mountain-cast .section-heading{grid-column:1/-1;margin-bottom:30px}
.ridge-emblem img{width:100%;max-height:350px;object-fit:contain;filter:drop-shadow(0 20px 12px #00132566)}
.bell .route-people{grid-template-columns:1fr}
.bell .route-people article{padding:18px 0}
.bell .route-people h3{margin-bottom:5px}
.bell .route-people p{margin-top:0}
.doorway-layout{gap:14%;padding-top:25px;align-items:center}
.doorway-layout details{border-radius:44% 44% 0 0 / 100px 100px 0 0;position:relative}
.doorway-layout details:last-child{margin-top:130px}
.doorway-layout .door-portrait{height:420px;margin-top:-80px;width:85%;filter:drop-shadow(0 0 14px #a9148c55)}
.doorway-layout details[open] .door-portrait{transform:scale(1.04)}
.mirror .mirror-register>h2{font-size:clamp(2.7rem,5vw,5.5rem);max-width:15ch}
@media(max-width:760px){
 .storm .arrival{min-height:650px}.storm .arrival-title{margin-top:14vh!important}
 .storm .arrival h1{font-size:25vw}.storm .hero-actors{left:-15%;width:130%;height:65%;bottom:-5%}
 .storm .arrival-title>a{right:0;top:56vh}.storm .arrival-title>p:not(.eyebrow){font-size:16px}
 .storm .origin{display:flex;flex-direction:column;gap:45px}.comic-composition{width:100%;min-height:420px}
 .comic-window.wide img{height:230px}.comic-window.narrow img{height:200px}.comic-window.narrow{margin-top:70px}
 .comic-window figcaption{font-size:15px;padding:9px}.comic-cutout{height:190px;bottom:0}
 .comic-story{display:block}.comic-splash{position:relative;top:0;margin-bottom:35px}.comic-splash img{height:320px}
 .tide .origin{display:block;padding-bottom:85px}.harbor-panorama{height:320px;margin-top:40px}
 .quay-relic{width:150px;right:9%;bottom:-25px}.quay-relic .painted-artifact>img{height:165px}
 .tide .myth{padding-top:100px}
 .breakout-stage{margin-top:0}.breakout-stage .character-theatre{min-height:0}
 .breakout-stage .cast-book{padding:20px 0}
 .tide .cast .section-heading h2{font-size:3.2rem}
 .wood .family{padding:20px 25px}.wood .root-family{padding-block:70px}.canopy-border{opacity:.35}
 .bell .mountain-cast{display:block}.ridge-emblem{float:right;width:130px;margin:0 0 12px 18px}
 .bell .route-people{display:block;border-top:0}.bell .route-people article{padding:15px 0}
 .doorway-layout{gap:5%}.doorway-layout .door-portrait{height:240px;width:100%;margin-top:-35px}
 .doorway-layout details:last-child{margin-top:80px}.doorway-layout details{border-radius:45% 45% 0 0 / 50px 50px 0 0}
}
@media(prefers-reduced-motion:reduce){.storm .hero-actors{transform:none!important}}
/* Keep expansive scenery inside the viewport without disabling sticky panels. */
.immersive{overflow-x:clip}
.storm .arrival-title{z-index:5}
.storm .arrival-title>p:not(.eyebrow){position:absolute;left:0;top:65vh;max-width:65%;font-size:clamp(1rem,2vw,1.8rem)}
@media(max-width:760px){.storm .arrival-title>p:not(.eyebrow){top:51vh;max-width:100%;left:0}.storm .arrival-title>a{top:64vh;font-size:9px}}
.tide .origin:before{transform:none}
.wood .root-family{overflow:clip}
.storm .arrival-title{z-index:auto}
.storm .arrival-title h1{position:relative;z-index:2}
.storm .arrival-title>.eyebrow{position:relative;z-index:5}
.storm .arrival-title>p:not(.eyebrow){z-index:6}
@media(max-width:760px){
 .storm .hero-actors{width:200%;left:-50%;height:73%;bottom:-6%}
 .bell .arrival-title{width:80%;margin-inline:auto}
 .doorway-layout{grid-template-columns:1fr;gap:55px;padding-top:65px}
 .doorway-layout details{width:100%;max-width:320px;margin-inline:auto;padding:18px}
 .doorway-layout details:last-child{margin-top:0}
 .doorway-layout .door-portrait{height:310px;margin-top:-65px}
 .doorway-layout p{font-size:15px;line-height:1.65}
 .doorway-layout small{font-size:12px}
}