.hero{background:#101311;height:260px;isolation:isolate}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 64%;z-index:-2}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101311d9 0%,#10131172 48%,transparent 78%);z-index:-1}.hero:after{display:none}.hero-content{position:relative;z-index:1}.hero h2{text-shadow:0 2px 16px #0005}.hero-bottom{z-index:1}
.section-art{position:relative;isolation:isolate;overflow:hidden;border:1px solid #354333;border-radius:16px;min-height:190px;margin:0 0 24px;background:#101311}.section-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;z-index:-2}.section-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101311ee 0%,#101311a3 46%,#10131110 100%);z-index:-1}.section-art>div{padding:32px;max-width:75%}.section-art h2{font-family:'Barlow Condensed',sans-serif;font-size:40px;line-height:1.05;margin:14px 0}.section-art p{font-size:13px;line-height:1.9;color:#c3cdbd;max-width:380px;margin:0}.section-art .eyebrow{font-size:9px;letter-spacing:1.8px;color:#b5f36b}
.story-image{background:#101311}.story-image img{object-position:center}.story-card{transition:border-color .2s,transform .2s}.story-card:hover{border-color:#657c51}.article-cover{height:auto;aspect-ratio:16/9;object-position:center}.image-credit{font-size:11px;line-height:1.6;color:#8e9b8c;margin:-12px 0 24px}.rail-art{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-top:18px}.mini-sponsor>.rail-art{margin:0 0 20px}.sponsor-card>img{object-position:center 42%}.sponsor-content{background:linear-gradient(0deg,#101311ed 0%,#10131196 38%,#10131108 78%)}
.state-art{display:block;width:160px;height:160px;object-fit:contain;border-radius:18px;margin:0 auto 15px}.empty:has(.state-art){background:#101311;border:1px solid #2c382c;border-radius:16px;padding:28px 20px}.empty h3{margin:8px 0}.status-art{width:46px;height:46px;object-fit:contain;border-radius:8px}.player-message>.state-art{width:140px;height:140px;margin-bottom:4px}.player-message{width:100%}.player-shell:has(.state-art){background:#101311;aspect-ratio:auto;min-height:380px}
.studio-art{width:calc(100% + 70px);max-width:none;height:145px;object-fit:cover;object-position:right center;margin:-35px -35px 30px;border-radius:14px 14px 0 0}.studio-banner{position:relative;overflow:hidden;isolation:isolate;min-height:105px;margin-bottom:28px;display:flex;align-items:center;padding:25px 30px;border-radius:14px;background:#101311;border:1px solid #34432f}.studio-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.studio-banner:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101311e8,#10131188,transparent);z-index:-1}.studio-banner span{font-size:11px;letter-spacing:2px;color:#b5f36b;max-width:70%;line-height:1.7}
@media(min-width:761px){.stream-poster img{object-position:center}.sponsor-carousel .sponsor-card{height:430px}.sponsor-content h2{max-width:75%}}
@media(max-width:760px){.hero{height:205px}.hero-art{object-position:70% 65%}.hero:before{background:linear-gradient(90deg,#101311ca,#10131160 64%,#10131110)}.hero-content{padding:20px}.hero h2{font-size:clamp(29px,8.7vw,38px);max-width:78%}.hero-tag{font-size:7px}.hero .button{margin-top:12px}.section-art{min-height:170px;margin-bottom:20px;border-radius:14px}.section-art>div{padding:23px 20px;max-width:90%}.section-art h2{font-size:33px;max-width:90%;margin:12px 0 10px}.section-art p{font-size:11px;max-width:250px;line-height:1.9}.section-art .eyebrow{font-size:7px;letter-spacing:1.5px}.section-art>img{object-position:68% center}.section-art:after{background:linear-gradient(90deg,#101311e8,#10131191 55%,#10131118)}.featured-story:first-child .story-image{height:auto;aspect-ratio:16/9}.featured-story:first-child .story-image img{display:block;aspect-ratio:16/9}.story-card:not(.featured-story) .story-image img{object-fit:cover;object-position:center}.article-cover{height:auto;aspect-ratio:16/9;border-radius:12px}.image-credit{font-size:10px;margin-top:-10px}.state-art{width:136px;height:136px}.empty:has(.state-art){padding:22px 16px}.player-shell:has(.state-art){min-height:355px}.studio-art{width:calc(100% + 52px);margin:-26px -26px 24px;height:120px}.studio-banner{padding:20px;min-height:95px}.studio-banner span{font-size:9px}.sponsor-content{background:linear-gradient(0deg,#101311f5 0%,#101311b8 44%,#10131105 85%)}.sponsor-content h2{max-width:95%}.sponsor-card>img{object-position:65% center}}
@media(prefers-reduced-motion:reduce){.story-card{transition:none}}
@media(max-width:760px){.hero-content{display:block}.hero h2{max-width:100%;margin:12px 0 10px}.hero .button{display:inline-flex;margin:4px 0 0}.hero .button .icon{display:none}}

/* Cards keep their artwork proportions independently of text length. */
.editorial-grid,.stream-grid,.sponsor-carousel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:stretch;gap:20px}
.story-card,.stream-card{min-width:0;display:flex;flex-direction:column}
.story-card.featured-story{grid-column:auto}
.story-card.featured-story:first-child{grid-column:1/-1}
.story-card .story-image,.story-card.featured-story .story-image{height:auto;aspect-ratio:16/9;border-radius:0}
.story-card>a{display:block;flex:none}
.story-card .story-image img{display:block;width:100%;height:100%;object-fit:cover}
.story-body,.stream-info{min-width:0;display:flex;flex-direction:column;flex:1;padding:20px}
.story-body h2,.stream-info h3,.sponsor-content h2{overflow-wrap:anywhere}
.story-body>p,.stream-info>p{display:block;line-height:1.9}
.story-meta{margin-top:auto;padding-top:18px;flex-wrap:wrap;gap:10px}
.story-meta .text-link{display:inline-flex;align-items:center;min-height:44px}
.stream-card .stream-poster{height:auto;aspect-ratio:16/9;flex:none;border-radius:0;align-self:stretch}
.stream-poster .badge{max-width:calc(100% - 24px);font-size:9px;left:12px;top:12px}
.stream-info .server-links{margin-top:auto;padding-top:16px}
.stream-info .countdown{line-height:1.7}
.stream-match-score:empty{display:none}
.stream-info .no-server{padding:10px 12px;border:1px solid #394332;border-radius:8px;font-size:12px;line-height:1.6;width:100%}
.sponsor-carousel{overflow:visible;scroll-snap-type:none}
.sponsor-carousel .sponsor-card{height:auto;display:flex;flex-direction:column;min-width:0}
.sponsor-card>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center}
.sponsor-card .sponsor-content{position:static;inset:auto;background:#1b221b;flex:1;padding:24px;justify-content:flex-start}
.sponsor-content h2{max-width:100%;font-size:24px;line-height:1.7}
.sponsor-content p{max-width:none;line-height:1.9}
.sponsor-content .button{margin-top:auto;min-height:44px;white-space:normal}
@media(max-width:760px){
 .editorial-grid,.stream-grid,.sponsor-carousel{grid-template-columns:1fr;gap:16px}
 .story-card,.story-card.featured-story:first-child,.stream-card{display:flex;padding:0;gap:0}
 .story-card .story-image,.story-card.featured-story .story-image,.stream-card .stream-poster{height:auto;aspect-ratio:16/9}
 .story-card .story-body,.story-card.featured-story:first-child .story-body,.stream-card .stream-info{padding:18px}
 .story-card .story-body h2,.story-card.featured-story:first-child .story-body h2{font-size:20px;line-height:1.5;margin:8px 0 12px}
 .story-card:lang(my) .story-body h2{line-height:1.85}
 .story-card .story-body>p,.story-card.featured-story:first-child .story-body>p,.stream-info>p{display:block;font-size:13px;margin:0 0 12px;line-height:1.9}
 .story-body .eyebrow,.stream-info .eyebrow{font-size:10px;line-height:1.8}
 .story-meta,.story-meta .text-link{font-size:11px}
 .stream-info h3{font-size:20px;line-height:1.5;margin:8px 0 12px}
 .stream-info .countdown{font-size:12px;margin:8px 0 12px}
 .stream-poster .play-symbol{width:48px;height:48px;font-size:30px}
 .stream-info .server-links .button{font-size:12px;min-height:44px}
 .sponsor-card .sponsor-content{padding:18px}
 .sponsor-content h2{font-size:22px;max-width:100%}
}