/* Shared layout for the studio and individual game pages. */
img{max-width:100%;height:auto}
.nav,main,footer{width:min(100%,94vw);max-width:1280px}
.hero,.how,.challenge,.extras,.mode-grid,.featured-game{min-width:0}
.hero>*,.how>*,.challenge>*,.extras>*,.mode-grid>*,.featured-game>*{min-width:0}
nav{flex-wrap:wrap}
footer{flex-wrap:wrap}
footer p,.studio footer p{white-space:normal}
p,a,summary{overflow-wrap:break-word}
.button{max-width:100%;text-align:center}
:root{font-size:100%}
.studio-hero h1{max-width:900px;font-size:clamp(44px,5vw,72px)}
.hero h1{font-size:clamp(44px,5vw,72px)}
.studio-hero .lead{max-width:50ch}
@media(max-width:600px){
 .nav,main,footer{width:100%;max-width:100%}
 .nav,.studio .nav{align-items:flex-start;flex-wrap:wrap;padding:16px;gap:8px 16px}
 .nav nav{gap:8px 16px}
 .nav nav a[href="/"]{display:inline-flex}
 .hero{padding:28px 16px 40px}
 .hero h1,.studio-hero h1{font-size:clamp(2.4rem,11vw,4rem)}
 .studio-hero{padding:32px 16px}
 .studio-games{padding:0 16px 40px}
 .studio-about,.section{padding-left:16px;padding-right:16px}
 .featured-copy{padding:24px 18px}
 .featured-art{padding:24px 18px}
 .featured-art a{width:100%}
 .numbers{padding:24px 16px;gap:20px 12px}
 footer{padding-left:16px;padding-right:16px}
 footer nav a{display:inline-flex}
}
@media(max-width:340px){
 .nav nav{width:100%;justify-content:space-between}
 .brand,.studio .brand{font-size:12px}
 .featured-copy h3{font-size:28px}
 .steps li{gap:14px}
 .game-frame{padding:12px}
}