/* v4 / a magazine cover composition, not another row of decorations. */
.hero.cover-v4{height:780px;min-height:780px;overflow:hidden;background:#ffe43e;border-bottom:4px solid var(--ink);isolation:isolate}
.hero.cover-v4:after{display:none}.cover-v4 .hero-grid{inset:0;background:repeating-linear-gradient(110deg,transparent 0 15px,#172a311a 15px 17px);transform:none;opacity:.55;z-index:0}
.cover-v4 .pop-pattern{inset:0;background:radial-gradient(#172a31 1.5px,transparent 2px) 0 0/10px 10px;clip-path:polygon(0 45%,31% 45%,28% 100%,0 100%);opacity:.18;z-index:1}
.cover-slice{position:absolute;pointer-events:none;z-index:0}
.cover-slice-a{inset:0;background:#ff4090;clip-path:polygon(0 0,65% 0,29% 100%,0 100%)}
.cover-slice-b{inset:0;background:#00b8a8;clip-path:polygon(100% 12%,100% 100%,36% 100%)}
.cover-speed{position:absolute;inset:-20%;z-index:1;pointer-events:none;background:repeating-conic-gradient(from 15deg at 57% 49%,transparent 0deg 11deg,#fffbea 11deg 13deg,transparent 13deg 28deg,#172a31 28deg 28.6deg);mask-image:radial-gradient(ellipse at 57% 49%,transparent 0 140px,#000 500px);opacity:.78}
.cover-topline{position:absolute;top:14px;left:3%;right:3%;display:flex;align-items:center;gap:15px;font-size:10px;letter-spacing:.05em;z-index:12;font-family:var(--pop-font)}
.cover-topline b{font-size:15px;background:var(--ink);color:var(--cream);padding:4px 9px;rotate:-3deg;box-shadow:4px 4px 0 var(--cream)}.cover-topline i{margin-left:auto;font-size:22px;letter-spacing:10px;color:var(--ink);font-style:normal}
.cover-v4 .hero-copy{position:static;width:auto;padding:0;z-index:auto}.cover-v4 .hero-copy h1{position:static;display:contents;font-family:var(--pop-font);max-width:none;isolation:auto}.cover-v4 .hero-copy h1:before{display:none}
.cover-kicker{position:absolute;top:93px;left:5%;font-family:var(--pop-font);font-size:clamp(45px,6.2vw,90px);line-height:1;letter-spacing:-.09em;color:var(--cream);-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;text-shadow:6px 7px 0 var(--ink),12px 12px 0 #00b8a8;rotate:-8deg;z-index:9;white-space:nowrap}
.cover-title{position:absolute;left:4%;top:305px;z-index:10;rotate:-10deg;line-height:.98;letter-spacing:-.1em;color:var(--cream);font-size:clamp(78px,8vw,116px);-webkit-text-stroke:12px var(--ink);paint-order:stroke fill;text-shadow:7px 8px 0 var(--ink),12px 14px 0 var(--cream),19px 19px 0 #ff4090}
.cover-title>span,.cover-title strong{display:block;font-weight:900}.cover-title strong{font-size:1.12em;margin:18px 0 0 48px;color:#ffe43e;line-height:.98;letter-spacing:-.08em}.cover-title strong span{letter-spacing:-.14em;margin-left:5px}
.cover-v4 .hero-art{position:absolute;inset:0;top:0;right:0;width:100%;height:100%;z-index:4;pointer-events:none;translate:0 0!important}
.cover-v4 .hero-cutout{opacity:1;mask:none;filter:none;background-size:300% 100%;background-position:calc(var(--col)*50%) 50%;aspect-ratio:1/2;border-radius:0;pointer-events:none}
.cover-v4 .hero-cutout.hero-ruby{position:absolute;width:520px;left:39%;right:auto;top:62px;transform:rotate(6deg);z-index:5;filter:drop-shadow(-4px 0 0 #fffbea) drop-shadow(4px 0 0 #fffbea) drop-shadow(0 5px 0 #172a31)}
.cover-side{position:absolute;width:220px;height:255px;z-index:3;overflow:visible;filter:drop-shadow(6px 7px 0 var(--ink));transform-origin:50% 70%}
.cover-side:before{content:'';position:absolute;inset:17px 0 0;background:#fffbea;border:4px solid var(--ink);clip-path:polygon(0 8%,100% 0,94% 100%,4% 96%)}
.cover-side-nene{left:35%;top:360px;rotate:-15deg}.cover-side-riko{right:1%;top:335px;rotate:12deg}
.cover-v4 .cover-side .hero-cutout{position:absolute;left:-10%;right:auto;top:-25px;width:120%;height:calc(100% + 25px);aspect-ratio:auto;background-size:300% auto;background-position:calc(var(--col)*50%) 0;transform:none;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);z-index:1}
.cover-side span{position:absolute;bottom:-8px;left:13px;background:#ffe43e;border:3px solid var(--ink);padding:3px 9px;z-index:4;font-family:var(--pop-font);font-size:16px;rotate:-4deg}
.cover-vertical{position:absolute;top:83px;right:3%;z-index:7;display:flex;align-items:flex-start;gap:12px;font-family:var(--pop-font);rotate:7deg;pointer-events:none}
.cover-vertical b{writing-mode:vertical-rl;font-size:84px;line-height:1.03;letter-spacing:-.06em;color:#ff4090;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;text-shadow:6px 5px 0 #fffbea}
.cover-vertical>span{writing-mode:vertical-rl;font-size:24px;line-height:1;padding:9px 7px;background:var(--ink);color:var(--cream);box-shadow:5px 5px 0 #ff4090;rotate:1deg;letter-spacing:.09em;margin-top:12px}
.cover-impact{position:absolute;top:232px;left:28%;z-index:8;font-family:var(--pop-font);font-style:italic;font-size:69px;line-height:1;color:#ff4090;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 #fffbea;rotate:-18deg;white-space:nowrap;pointer-events:none}
.cover-impact span{display:inline-block;rotate:12deg;font-size:1.2em}
.cover-iq{position:absolute;right:3%;top:590px;z-index:7;font-family:var(--pop-font);rotate:-9deg;line-height:.9;color:var(--ink);pointer-events:none}.cover-iq small{display:block;font-size:12px;letter-spacing:.1em;margin-bottom:5px}.cover-iq b{font-size:26px}.cover-iq b span{font-size:66px;letter-spacing:-.09em;margin-left:3px}
.cover-v4 .hero-description{position:absolute;left:6%;bottom:119px;top:auto;width:auto;max-width:none;padding:0;margin:0;background:none;border:0;border-radius:0;rotate:-4deg;color:var(--ink);font-family:var(--pop-font);font-size:16px;line-height:1.65;z-index:12;white-space:nowrap}.cover-v4 .hero-description b{background:#fffbea;box-shadow:5px 4px 0 var(--ink);padding:3px 6px;font-size:18px}
.cover-v4 .cover-cta{position:absolute;left:29%;right:auto;top:auto;bottom:91px;width:310px;min-height:65px;margin:0;padding:16px 23px;display:flex;justify-content:center;align-items:center;gap:12px;font-size:22px;rotate:-5deg;border:4px solid #fff;background:#e00000;color:#fff;z-index:20;box-shadow:6px 8px 0 var(--ink),10px 12px 0 #ffe43e}.cover-v4 .cover-cta .play-icon{width:28px;height:21px;background:#fff}.cover-v4 .cover-cta .play-icon:after{left:11px;top:6px;border-left-color:#e00000}.cover-v4 .cover-cta .arrow{font-size:28px;margin-left:auto}.cover-v4 .cover-cta:hover{background:#c90000;translate:0 -3px;box-shadow:4px 6px 0 var(--ink),8px 10px 0 #ffe43e}.cover-v4 .cover-cta:hover .play-icon:after{border-left-color:#c90000}
.cover-foot{position:absolute;left:0;right:0;bottom:0;min-height:58px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 4%;background:#fffbea;border-top:4px solid var(--ink);z-index:21;font-family:var(--pop-font);transform:skewY(-2deg);transform-origin:100% 100%}.cover-foot>*{transform:skewY(2deg)}.cover-foot a{display:flex;gap:18px;align-items:center;min-height:44px;font-size:13px}.cover-foot a span{font-size:30px}.cover-replay{min-height:44px;display:flex;gap:9px;align-items:center;border:0;border-bottom:2px solid var(--ink);background:none;color:var(--ink);font:900 13px var(--pop-font);cursor:pointer}.cover-replay b{font-size:25px}.cover-replay:disabled{opacity:.4;cursor:default}
@keyframes coverSliceA{from{translate:-105% 0}to{translate:0 0}}
@keyframes coverSliceB{from{translate:105% 0}to{translate:0 0}}
@keyframes coverRuby{0%{translate:-170px 240px;rotate:-16deg}74%{translate:14px -16px;rotate:3deg}100%{translate:0 0;rotate:0deg}}
@keyframes coverLeft{0%{translate:-260px 30px;rotate:-28deg}80%{translate:9px -5px;rotate:3deg}100%{translate:0 0;rotate:0deg}}
@keyframes coverRight{0%{translate:260px -50px;rotate:24deg}80%{translate:-8px 4px;rotate:-3deg}100%{translate:0 0;rotate:0deg}}
@keyframes coverKicker{from{translate:-120% -60px}78%{translate:10px 5px}to{translate:0 0}}
@keyframes coverHeadline{0%{translate:95px 155px;rotate:16deg;scale:.6}72%{translate:-8px -14px;rotate:-2deg;scale:1.035}100%{translate:0 0;rotate:0deg;scale:1}}
@keyframes coverVertical{from{translate:40px -160px;rotate:-20deg}75%{translate:-6px 6px;rotate:4deg}to{translate:0 0;rotate:0deg}}
@keyframes coverImpact{0%{scale:0;rotate:-24deg}68%{scale:1.16;rotate:7deg}100%{scale:1;rotate:0deg}}
@keyframes coverIdle{0%,58%,100%{translate:0 0}68%{translate:0 -9px}78%{translate:0 2px}87%{translate:0 0}}
@keyframes coverPaper{0%,62%,100%{translate:0 0}72%{translate:-12px 4px}85%{translate:0 0}}
.motion-on .cover-v4 .hero-cutout{animation:none}
.motion-on .cover-v4.cover-playing .cover-slice-a{animation:coverSliceA .65s cubic-bezier(.16,1,.3,1) both,coverPaper 10s 5s ease-in-out infinite}
.motion-on .cover-v4.cover-playing .cover-slice-b{animation:coverSliceB .7s .1s cubic-bezier(.16,1,.3,1) both}
.motion-on .cover-v4.cover-playing .hero-ruby{animation:coverRuby .95s .15s both,coverIdle 9s 3s ease-in-out infinite}
.motion-on .cover-v4.cover-playing .cover-side-nene{animation:coverLeft .85s .45s both}
.motion-on .cover-v4.cover-playing .cover-side-riko{animation:coverRight .85s .5s both}
.motion-on .cover-v4.cover-playing .cover-kicker{animation:coverKicker .75s .3s both}
.motion-on .cover-v4.cover-playing .cover-title{animation:coverHeadline .8s .95s both}
.motion-on .cover-v4.cover-playing .cover-vertical{animation:coverVertical .75s .7s both}
.motion-on .cover-v4.cover-playing .cover-impact{animation:coverImpact .65s .6s both,coverIdle 11s 4s ease-in-out infinite}
html:not(.motion-on) .cover-v4 *,html.paused .cover-v4 *{animation:none!important}
@media(max-width:1100px) and (min-width:701px){.cover-v4 .hero-cutout.hero-ruby{left:32%;width:500px}.cover-title{font-size:90px;left:4%;top:340px}.cover-kicker{font-size:66px}.cover-vertical{right:2%}.cover-vertical b{font-size:65px}.cover-vertical>span{font-size:20px}.cover-side-nene{left:31%;top:390px}.cover-side-riko{right:0;top:370px}.cover-impact{left:18%;top:240px}.cover-v4 .cover-cta{left:35%;bottom:85px}.cover-v4 .hero-description{font-size:13px;left:3%;bottom:111px}.cover-v4 .hero-description b{font-size:15px}.cover-iq{right:2%;top:630px}.cover-iq b span{font-size:48px}}
@media(max-width:700px){
 .hero.cover-v4{height:752px;min-height:752px}.cover-topline{top:10px;left:13px;right:12px;gap:10px;font-size:7px}.cover-topline b{font-size:10px;padding:3px 6px;box-shadow:3px 3px 0 var(--cream)}.cover-topline i{font-size:13px;letter-spacing:2px}
 .cover-slice-a{clip-path:polygon(0 0,100% 0,0 67%)}.cover-slice-b{clip-path:polygon(100% 32%,100% 100%,0 93%,0 74%)}.cover-speed{inset:-10%;background:repeating-conic-gradient(from 10deg at 49% 38%,transparent 0deg 11deg,#fffbea 11deg 13deg,transparent 13deg 28deg,#172a31 28deg 28.6deg);mask-image:radial-gradient(ellipse at 49% 38%,transparent 0 90px,#000 310px)}.cover-v4 .pop-pattern{clip-path:polygon(0 42%,100% 58%,100% 100%,0 100%)}
 .cover-kicker{top:55px;left:15px;font-size:clamp(34px,10.5vw,48px);line-height:1;letter-spacing:-.09em;-webkit-text-stroke:6px var(--ink);text-shadow:4px 5px 0 var(--ink),8px 8px 0 #00b8a8;rotate:-9deg}
 .cover-v4 .hero-art{inset:0;width:100%;height:100%}.cover-v4 .hero-cutout.hero-ruby{width:410px;left:calc(50% - 235px);right:auto;top:106px;transform:rotate(5deg);filter:drop-shadow(-3px 0 0 #fffbea) drop-shadow(3px 0 0 #fffbea) drop-shadow(0 4px 0 #172a31)}
 .cover-side{width:150px;height:164px;filter:drop-shadow(4px 5px 0 var(--ink));z-index:6}.cover-side-nene{left:-21px;top:275px;rotate:-15deg}.cover-side-riko{right:-20px;top:285px;rotate:15deg}.cover-side:before{inset:0;border-width:3px}.cover-v4 .cover-side .hero-cutout{width:130%;left:-15%;top:-27px;height:calc(100% + 27px)}.cover-side span{bottom:-8px;left:12px;font-size:10px;padding:2px 5px;border-width:2px}
 .cover-vertical{top:123px;right:10px;gap:7px;rotate:7deg}.cover-vertical b{font-size:59px;-webkit-text-stroke:7px var(--ink);text-shadow:4px 4px 0 #fffbea}.cover-vertical>span{font-size:15px;padding:7px 4px;box-shadow:3px 3px 0 #ff4090;letter-spacing:.08em;margin-top:5px}
 .cover-impact{top:226px;left:4px;font-size:49px;-webkit-text-stroke:5px var(--ink);text-shadow:3px 3px 0 #fffbea;rotate:-20deg;z-index:9}
 .cover-title{left:20px;top:428px;font-size:clamp(59px,17.4vw,82px);line-height:.94;letter-spacing:-.095em;-webkit-text-stroke:9px var(--ink);text-shadow:5px 6px 0 var(--ink),9px 10px 0 #fffbea,15px 16px 0 #ff4090;rotate:-9deg;z-index:11}.cover-title strong{margin:13px 0 0 48px;font-size:1.14em;letter-spacing:-.08em}.cover-title strong span{margin-left:3px}
 .cover-iq{top:572px;right:9px;rotate:6deg;z-index:13}.cover-iq small{font-size:8px;margin-bottom:1px}.cover-iq b{font-size:15px}.cover-iq b span{font-size:40px;margin-left:1px;-webkit-text-stroke:2px var(--cream);paint-order:stroke fill;letter-spacing:-.08em}
 .cover-v4 .hero-description{left:18px;bottom:131px;font-size:10px;line-height:1.7;rotate:-5deg}.cover-v4 .hero-description b{font-size:12px;padding:2px 4px;box-shadow:3px 3px 0 var(--ink)}
 .cover-v4 .cover-cta{left:16%;right:auto;top:auto;bottom:65px;width:78%;min-height:58px;padding:12px 19px;font-size:20px;border-width:3px;box-shadow:5px 6px 0 var(--ink),8px 9px 0 #ffe43e;rotate:-5deg}.cover-v4 .cover-cta .arrow{font-size:27px}.cover-v4 .cover-cta .play-icon{width:27px;height:20px}.cover-v4 .cover-cta .play-icon:after{top:6px;left:10px}
 .cover-foot{padding:3px 12px;min-height:48px;border-top-width:3px;gap:8px}.cover-foot a{font-size:9px;gap:6px;min-height:44px}.cover-foot a span{font-size:24px}.cover-replay{min-height:44px;font-size:10px;gap:5px}.cover-replay b{font-size:22px}
}
@media(max-width:360px){.cover-title{font-size:60px;left:15px;top:430px}.cover-title strong{margin-left:35px}.cover-v4 .hero-cutout.hero-ruby{width:390px;left:calc(50% - 225px)}.cover-vertical b{font-size:54px}.cover-vertical>span{font-size:13px}.cover-kicker{font-size:36px}.cover-impact{font-size:44px}.cover-v4 .cover-cta{font-size:18px}}
@media(prefers-reduced-motion:reduce){.cover-v4 *,.cover-v4 *:before,.cover-v4 *:after{animation:none!important;transition:none!important}.cover-v4 .hero-grid,.cover-v4 .pop-pattern{translate:0 0!important}}
