/* Keep the supplied artwork at a bounded size; paper fills wider screens. */
html{overflow-x:clip}
body{background:#c9b89b url('assets/paper.webp') center top/cover fixed}
main{width:100%;max-width:1440px;margin-inline:auto}
.hero{height:auto}
.hero-scene{width:100%;aspect-ratio:1772/790}
.awards{height:auto;aspect-ratio:3508/830}
.clients{min-height:0}
.project img,.category img,.client-logos img,.section-heading-image{object-fit:contain}
.project img{object-fit:cover}
.projects[data-category="cartoons"] .project img{object-fit:contain}
.client-logos img{width:110px;height:62px}
.toolbar-track{width:44px;max-width:3.4%}
.theatre-photos h3{font-size:24px;line-height:1.3;overflow-wrap:anywhere}
@media(min-width:768px){
 nav a{font-size:13px}
 .bio h2{font-size:28px;line-height:1.2}
 .bio .role{font-size:14px;line-height:1.5}
 .bio .bio-copy{font-size:18px;line-height:1.4;text-align:left}
 .bio{padding:150px 0 60px}
 .astronaut{width:110px;height:auto}
 .studio .studio-intro,.studio .studio-story{font-size:13px;line-height:1.35}
 .testimonial span{font-size:11px}
 .studio .testimonial p{font-size:14px;line-height:1.4}
 .clients{padding:72px 9% 64px;margin-top:-48px}
 .clients h2{margin-bottom:32px}
 .clients h2 .section-heading-image{width:180px}
 .contact h2 .section-heading-image{width:320px}
 .about{margin-top:-10px}
 .portfolio{padding-bottom:36px}
 .theatre-album .caption{font-size:13px}
}
@media(min-width:768px) and (max-width:1100px){
 header{right:4%;width:52%}
 .bio{padding:112px 0 42px}
 .bio h2{font-size:24px}
 .bio .bio-copy{font-size:16px}
 .studio .studio-intro,.studio .studio-story{font-size:11px}
 .studio .testimonial p{font-size:12px}
 .testimonial span{font-size:10px}
 .astronaut{width:90px}
 .client-logos{gap:20px}
}
@media(max-width:767px){
 .hero{padding-top:44px}
 .bio h2{font-size:24px;padding-right:100px}
 .bio .bio-copy{font-size:16px;text-align:left}
 .astronaut{width:70px}
 .client-logos img{height:50px}
 .theatre-photos h3{font-size:20px}
 .category{max-width:190px;justify-self:center}
 .portfolio-cover .category:last-child{width:47%;max-width:190px}
}
@media(max-width:360px){header{padding-inline:10px}header nav{gap:4px}header nav a{font-size:10px}}

/* Home fills the screen; all other artwork remains bounded. */
main{max-width:none}
main > .artwork:not(.hero){width:100%;max-width:1440px;margin-inline:auto}
.hero{width:100%;height:auto}
.hero-scene{aspect-ratio:1772/790}
.hero-posters{width:100%;height:auto;object-fit:contain}
.hero-portrait{height:auto}

/* Full-width section backgrounds; independently bounded foregrounds. */
main > .artwork:not(.hero){max-width:none;width:100%;margin-inline:0}
.projects{max-width:1036px}
@media(min-width:768px){
 .bio{max-width:700px}
 .studio .studio-intro,.studio .studio-story{max-width:340px}
 .testimonial{max-width:300px}
 .portfolio-cover{aspect-ratio:auto;height:min(34.99vw,504px)}
 .portfolio-cover .categories{position:relative;width:100%;max-width:1440px;height:100%;margin-inline:auto}
 .portfolio-cover>.backdrop{display:none}
 .portfolio-cover>.sr{position:absolute;display:block;left:50%;top:14px;transform:translateX(-50%);clip:auto;overflow:visible;width:300px;height:75px;padding:0;margin:0;font-size:0;background:url("assets/portfolio-heading.png") center/contain no-repeat}
}