/* Keep the full-bleed stage from creating a document scrollbar; the rail scrolls itself. */
html{overflow-x:clip}
.hero-viewport::after{content:"";flex:0 0 calc(100% - clamp(360px,32vw,420px) - 24px - max(20px,calc((100% - 1180px)/2)))}
@media(max-width:760px){.hero-viewport::after{flex-basis:calc(16vw - 24px)}}
/* LOL.PS-inspired expanding rail: cards change layout width, never transform. */
.hero-carousel{width:100%;margin:0 0 20px;padding:26px 0 30px;background:#17191c;overflow:hidden}.hero-carousel-head{max-width:1180px;margin:0 auto 8px;padding:0 20px}.hero-carousel-head p{color:#a5abb3}.hero-carousel-head h1{color:#f3f4f5}.hero-carousel-controls{padding-right:0}.hero-arrow{border-color:#454a51;background:#202327;color:#d4d7db}.hero-arrow:hover{border-color:#737a83;background:#2a2e33;color:#fff}.hero-page{color:#a5abb3}.hero-viewport{gap:24px;padding:14px max(20px,calc((100% - 1180px)/2)) 24px;scroll-padding-inline:max(20px,calc((100% - 1180px)/2));perspective:none}.hero-slide{position:relative;z-index:0;flex:0 0 clamp(360px,32vw,420px);height:420px;scroll-snap-align:start;transition:flex-basis .35s ease}.hero-card{height:420px;min-height:0;border:1px solid #ffffff29;border-radius:10px;box-shadow:none;transform:none;transition:border-color .35s ease}.hero-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,#ffffff12,transparent 45%)}.hero-card-content{height:384px;transition:none}.hero-card strong{-webkit-line-clamp:2}.hero-card-content>span{opacity:.78;transition:opacity .35s ease}.hero-card b{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}.hero-card:focus-visible{outline:2px solid #f3f4f5;outline-offset:3px;transform:none}.hero-slide:focus-within{z-index:1;flex-basis:clamp(600px,55vw,700px)}.hero-slide:focus-within .hero-card{border-color:#ffffff65}.hero-slide:focus-within .hero-card strong{-webkit-line-clamp:3}.hero-slide:focus-within .hero-card-content>span{opacity:1}.hero-slide:focus-within .hero-card b{opacity:1;transform:none}@media(hover:hover) and (pointer:fine){.hero-slide:hover{z-index:1;flex-basis:clamp(600px,55vw,700px)}.hero-slide:hover .hero-card{border-color:#ffffff65}.hero-slide:hover .hero-card strong{-webkit-line-clamp:3}.hero-slide:hover .hero-card-content>span{opacity:1}.hero-slide:hover .hero-card b{opacity:1;transform:none}}@media(max-width:760px){.hero-carousel{margin:0 -12px 14px;width:auto;padding:18px 0 22px}.hero-carousel-head{padding:0 12px;margin-bottom:4px}.hero-viewport{gap:12px;padding:12px 12px 18px;scroll-padding-inline:12px}.hero-slide{flex-basis:84vw;height:360px;transition:none}.hero-card{height:360px;border-radius:8px}.hero-card-content{height:328px}.hero-card strong{-webkit-line-clamp:3}.hero-card-content>span{opacity:1}.hero-card b{opacity:1;transform:none}.hero-slide:focus-within{flex-basis:84vw}.hero-carousel-controls{gap:4px}.hero-page{min-width:38px}}@media(prefers-reduced-motion:reduce){.hero-slide,.hero-card,.hero-card-content>span,.hero-card b{transition:none}}

/* Show the original banner art without text scrims. */
.hero-card::before,.hero-card::after,.hero-card-shade{display:none!important;background:none!important}
.hero-card-content{background:none;text-shadow:0 1px 3px #0009}
.hero-card small{background:none;border:0;padding:0;color:#fff}
.hero-card-content>span{color:#fff}
/* Phase 1 (2026-10-23): half-height, white band. Banner art and copy stay as they were. */
.hero-carousel{margin:0 0 14px;padding:12px 0 8px;background:#fff;border-bottom:1px solid #e6e9ec}
.hero-carousel-head{margin-bottom:2px}.hero-carousel-head p{color:#68727d;font-size:11px;margin:0}.hero-carousel-head h1{color:#272a2e;font-size:18px;margin:2px 0 0}
.hero-arrow{border-color:#d2d8df;background:#fff;color:#272a2e}.hero-arrow:hover{border-color:#9aa3ad;background:#f2f4f6;color:#111}.hero-page{color:#68727d}
.hero-viewport{padding-top:8px;padding-bottom:10px}
.hero-slide,.hero-card{height:210px}.hero-card{border-color:#dfe3e8}.hero-card-content{height:180px;padding-top:14px;padding-bottom:14px}
.hero-card strong{font-size:20px;-webkit-line-clamp:2}.hero-card-content>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.hero-slide:focus-within .hero-card{border-color:#9aa3ad}.hero-slide:focus-within .hero-card strong{-webkit-line-clamp:2}
.hero-card:focus-visible{outline-color:#272a2e}
@media(hover:hover) and (pointer:fine){.hero-slide:hover .hero-card{border-color:#9aa3ad}.hero-slide:hover .hero-card strong{-webkit-line-clamp:2}}
@media(max-width:760px){.hero-carousel{padding:10px 0 6px;margin-bottom:10px}.hero-viewport{padding-top:6px;padding-bottom:8px}.hero-slide,.hero-card{height:180px}.hero-card-content{height:152px}.hero-card strong{font-size:17px;-webkit-line-clamp:2}.hero-carousel-head h1{font-size:16px}}