/* All opening banners share one height per breakpoint, in both languages. */
:root{--ab-banner-height:clamp(500px,33.4vw,810px)}
html body .hero.hero-panorama,html body .work-intro,html body .about-hero,html body .skills-hero,html body .detail-hero{height:var(--ab-banner-height)!important;min-height:var(--ab-banner-height)!important;max-height:var(--ab-banner-height)!important;box-sizing:border-box}
html body .work-intro{padding:40px 5%;justify-content:center}
html body .skills-hero-copy{padding:32px 5%}
html body .about-hero>div{padding:20px 6% 20px 3%}
html body .about-hero h1{font-size:clamp(32px,3.5vw,56px)}
html body .detail-hero-copy{padding:32px 6%}
@media(max-width:650px){
 :root{--ab-banner-height:600px}
 html body .work-intro{padding:32px 6%;justify-content:flex-start}
 html body .work-intro-copy h1{font-size:clamp(34px,8.5vw,48px);line-height:1.05}
 html body .work-intro-copy>p:last-child{margin-bottom:0}
 html body .work-hero-art{background-image:linear-gradient(90deg,#020b13db,#020b1370),linear-gradient(0deg,#020b13c4,transparent 65%),url('/assets/work-hero-art-mobile.webp');background-position:center 35%}
 html body .skills-hero,html body .about-hero,html body .detail-hero{align-items:flex-start}
 html body .skills-hero-copy{padding:32px 6%}
 html body .about-hero>div{padding:32px 6%;width:100%}
 html body .about-hero>img{height:100%;object-position:11% center}
 html body .about-hero h1{font-size:clamp(30px,8vw,44px);margin:16px 0 20px}
 html body .about-hero>div>p:not(.kicker){font-size:15px;line-height:1.5}
 html body .about-facts{gap:18px;margin:20px 0}
 html body .detail-hero-copy{position:relative;inset:auto;width:100%;box-sizing:border-box;padding:32px 6%}
 html body .detail-hero h1{font-size:clamp(34px,9vw,48px)}
}
/* Full-bleed photographs with restrained contrast overlays. */
html body .work-intro,html body .about-hero,html body .skills-hero,html body .detail-hero{background:#050c11;border:0!important;box-shadow:none}
html body .work-hero-art{background-image:url('/assets/work-hero-art-desktop.webp');background-size:cover;background-position:center}
html body .work-hero-art,html body .about-hero>img,html body .skills-hero>img,html body .detail-hero>img{inset:0;width:100%;height:100%;object-fit:cover;mask-image:none!important;-webkit-mask-image:none!important;transform:none!important;animation:none!important}
html body .work-intro:after,html body .about-hero:after,html body .skills-hero:after,html body .detail-hero:after{content:"";display:block;position:absolute;inset:0;z-index:0;pointer-events:none;mask-image:none;-webkit-mask-image:none}
html body .work-intro:after,html body .skills-hero:after,html body .detail-hero:after{background:linear-gradient(to bottom,transparent 90%,#050c11 100%),linear-gradient(90deg,#050c11e6 0%,#050c1199 40%,#050c111a 85%)}
html body .about-hero:after{background:linear-gradient(to bottom,transparent 90%,#050c11 100%),linear-gradient(90deg,transparent 5%,#050c1133 32%,#050c11d9 56%,#050c11e6 100%)}
html body .detail-hero:before{content:none}
html body .about-page .timeline{border-top:0}
@media(max-width:650px){
 /* The supplied portrait collage has baked-in empty space below its artwork.
    Crop that out through sizing, without stretching or changing the asset. */
 html body .work-hero-art{background-image:url('/assets/work-hero-art-mobile.webp');background-size:max(100%,calc(var(--ab-banner-height) * .81)) auto;background-position:center top}
 html body .work-intro:after,html body .about-hero:after,html body .skills-hero:after,html body .detail-hero:after{background:linear-gradient(to bottom,transparent 90%,#050c11 100%),linear-gradient(to bottom,#050c11b3 0%,#050c1180 45%,#050c1133 80%)}
}

/* Introductory copy stays readable within the shared banner height. */
html body .work-intro-copy .banner-intro,html body .skills-hero-copy .banner-intro{max-width:710px;margin:24px 0 0;font-size:17px;font-weight:400;line-height:1.6;letter-spacing:0;text-transform:none;color:#e0e6eb}
html body .skills-hero-copy .banner-tagline{font-size:22px;font-weight:800;letter-spacing:.08em;margin:20px 0 0}
@media(max-width:650px){
 html body .work-intro-copy .banner-intro,html body .skills-hero-copy .banner-intro{font-size:15px;line-height:1.55;margin-top:24px}
 html body .skills-hero-copy .banner-tagline{font-size:19px}
}

@media(min-width:651px){html body .skills-hero-copy h1{font-size:clamp(42px,5.2vw,76px);margin-top:18px}}

/* Uniform navy tint on the collage, independent of the existing fades. */
html body .work-hero-art:after{content:"";position:absolute;inset:0;background:rgba(5,12,17,.28);pointer-events:none}
html body .work-intro-copy .banner-intro{color:#fff}