/* Original photos stay separate from the colour/contrast layer. */
section.site-hero.cms-sharp-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #03251a !important;
}
.cms-sharp-hero .cms-hero-image {
    position: absolute;
    inset: 0 0 0 auto;
    width: 68%;
    max-width: 960px;
    height: 100%;
    object-fit: var(--hero-fit, cover);
    object-position: var(--hero-focus-x, 50%) var(--hero-focus-y, 50%);
    image-rendering: auto;
    filter: none;
    transform: none;
    z-index: 0;
}
.site-hero.cms-sharp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, #03251a 0%, #03251af5 32%, #03251ad9 48%, #03251a40 68%, #03251a00 85%);
}
.cms-sharp-hero .site-hero-content,
.cms-sharp-hero .publication-hero-inner {
    position: relative;
    z-index: 2;
}
.cms-sharp-hero.page-hero::after { z-index: 3; }
.site-hero.cms-sharp-hero .site-hero-content p { max-width: min(640px, 55%); }
@media (max-width: 700px) {
    .cms-sharp-hero .cms-hero-image {
        width: 100%;
        max-width: none;
        object-position: var(--hero-focus-mobile-x, 50%) var(--hero-focus-mobile-y, 50%);
    }
    .site-hero.cms-sharp-hero::before {
        background: linear-gradient(90deg, #021f16ed 0%, #021f16c7 55%, #021f16a6 100%);
    }
    .site-hero.cms-sharp-hero .site-hero-content p { max-width: 100%; }
}

/* Frame the second homepage portrait without its transparent source padding. */
.hero .hero-slide:nth-child(2).image-left .cover-visual { transform: none; }
.hero .hero-slide:nth-child(2) .cover-portrait {
    scale: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    transform-origin: center bottom;
}

/* Match each portrait's shoulder line while retaining the original images. */
.hero .hero-track { z-index: 5; }
.hero-slide:is([data-banner-id="1"], [data-banner-id="3"], [data-banner-id="4"]) {
    --hero-portrait-height: min(calc(100vh - 150px), 820px);
    --hero-copy-shift: 0;
}
.hero .hero-slide:is([data-banner-id="1"], [data-banner-id="3"], [data-banner-id="4"]) .cover-visual {
    height: var(--hero-portrait-height);
    transform: none;
}
.hero .hero-slide:is([data-banner-id="1"], [data-banner-id="3"], [data-banner-id="4"]) .cover-portrait {
    width: 100%;
    height: 100%;
    max-width: none;
    scale: 1;
}
.hero-slide[data-banner-id="1"] { --hero-copy-shift: 0; }
.hero-slide[data-banner-id="3"] {
    --hero-copy-shift: 0;
    --hero-portrait-height: min(calc((100vh - 150px) * .88), 720px);
}
.hero-slide[data-banner-id="4"] { --hero-copy-shift: 0; }
@media (min-width: 769px) {
    .hero .hero-slide:not(.image-left):not(.full-image) .hero-inner {
        grid-template-columns: .88fr 1.12fr;
    }
    .hero .hero-slide:not(.image-left):not(.full-image) .hero-title {
        max-width: 680px;
    }
    .hero-slide:is([data-banner-id="1"], [data-banner-id="3"], [data-banner-id="4"]) .hero-copy {
        padding: 0;
        transform: translateY(calc(var(--hero-portrait-height) * var(--hero-copy-shift)));
    }
}
@media (max-width: 768px) {
    .hero .hero-slide:is([data-banner-id="1"], [data-banner-id="3"], [data-banner-id="4"]) .hero-inner {
        height: 540px;
        min-height: 0;
    }
    .hero .hero-slide:is([data-banner-id="1"], [data-banner-id="3"], [data-banner-id="4"]) .cover-visual {
        height: 0;
        flex: 1 1 0;
        align-items: flex-start;
    }
    .hero .hero-slide:is([data-banner-id="1"], [data-banner-id="3"], [data-banner-id="4"]) .cover-portrait {
        height: auto;
        max-height: 100%;
    }
}
/* Full artwork slides retain their composition instead of zooming to fill the stage. */
.hero-slide.full-image { background: #03251a; }
.hero-slide.full-image .hero-full-image { object-fit: contain; object-position: center; }