/* Local presentations follow the website's compact spacing in ordinary browsing. */
@media screen {
 body:not(.presenting) .section{padding-block:32px}
 body:not(.presenting) .section-heading{margin-bottom:28px}
}
@media screen and (max-width:700px){
 body:not(.presenting) .section{padding-block:24px}
 body:not(.presenting) .section-heading{margin-bottom:24px}
}
/* Keep every board's hero in proportion on ultrawide displays. */
@media screen and (min-width:1600px){
 body:not(.presenting) .wrap{width:min(1760px,calc(100% - 120px))}
 body:not(.presenting) .header{padding-inline:max(60px,calc((100vw - 1760px)/2))}
 body:not(.presenting) .hero{max-width:2040px;margin-inline:auto;height:820px;min-height:0}
 body:not(.presenting) .hero-art{left:auto;right:0;width:min(100%,1600px);object-fit:contain;object-position:right center}
 body:not(.presenting) .hero-content{padding-bottom:55px}
 body:not(.presenting) .hero h1{font-size:88px}
 body:not(.presenting) .hero-detail{max-width:420px;font-size:15px}
}
/* Remove the inherited dimming from the native board hero renders. */
.hero-art{opacity:1}
/* Keep the product clear; only the desktop text column needs shading. */
.hero .hero-shade{background:linear-gradient(90deg,#0a1012 0%,#0a1012f2 23%,#0a101240 37%,transparent 48%)}
@media(max-width:760px){.hero .hero-shade{background:none}}

/* Fit the entire native render, never crop the board to fill the hero. */
.hero .studio-hero .hero-art{object-fit:contain;object-position:right center;mask-image:none}
.enclosure-image img,.blade-visual img,.system-visual img{object-fit:contain}
@media(max-width:1100px){.header nav{display:none}}
@media(min-width:761px) and (max-width:1000px){
 .hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;align-items:center}
 .hero-content{order:0;padding-block:36px 24px}
 .hero .studio-hero{order:1;display:block;width:min(640px,100%)}
 .hero .studio-hero .hero-art{position:static;width:100%;height:auto;aspect-ratio:8/5;object-position:center}
 .hero .hero-shade{display:none}
 .hero-bottom{order:2;position:static;padding-block:18px}
}
@media(max-width:760px){
 .hero{min-height:0}
 .hero .studio-hero .hero-art{width:100%;max-width:100%;left:0;right:0;bottom:34px;height:auto;aspect-ratio:8/5;object-position:center}
 .hero-content{padding-bottom:calc(62.5vw + 40px)}
 .hero-meta{width:auto;flex-wrap:wrap;row-gap:10px}
 .actions{flex-wrap:wrap}
 .hero-bottom .art-label{max-width:55%}
 .dialog-image-wrap img{min-width:0;max-width:100%}
 .viewer-controls,.viewer-toolbar,.view-actions{min-width:0;flex-wrap:wrap}
 .case-visibility{flex-wrap:wrap}
}