/* Portrait and ribbon artwork stay separate from the live text and links. */
.hero--ribbon,
.contacts--ribbon {
    isolation: isolate;
    background: var(--c-ink);
}

.ribbon-scene {
    pointer-events: none;
    overflow: hidden;
}

.ribbon-scene > picture,
.ribbon-art,
.ribbon-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ribbon-art, .ribbon-video { object-fit: cover; object-position: center; }
.ribbon-video { opacity: 0; }
.ribbon-scene.is-video-ready .ribbon-video { opacity: 1; }

.hero--ribbon .hero-content {
    max-width: min(64%, 760px);
}

.hero-portrait {
    position: absolute;
    z-index: 1;
    right: -2%;
    bottom: -1px;
    width: min(64vw, 1050px);
    pointer-events: none;
}

.hero-portrait img {
    display: block;
    width: 100%;
    height: auto;
}

.hero--ribbon .ribbon-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 10, 10, .2), transparent 62%);
}

.contacts--ribbon {
    padding-bottom: clamp(200px, 18vw, 300px);
}

.contacts--ribbon::after {
    display: none;
}

.contacts--ribbon .ribbon-art,
.contacts--ribbon .ribbon-video {
    object-fit: fill;
    opacity: 1;
}

@media (min-width: 1700px) {
    .hero-portrait { right: calc((100vw - var(--max)) / 2 - 220px); }
}

@media (max-width: 800px) {
    .hero--ribbon {
        min-height: 100svh;
        padding-bottom: calc(min(78vw, 470px) + 32px);
    }

    .hero--ribbon .hero-content {
        max-width: 100%;
        width: 100%;
        padding-bottom: 0;
    }

    .hero--ribbon .hero-title { font-size: clamp(28px, 8.4vw, 52px); }

    .hero--ribbon .ribbon-scene {
        top: auto;
        height: min(90vw, 550px);
    }

    .hero--ribbon .ribbon-scene::after {
        background: linear-gradient(180deg, var(--c-ink), transparent 24%);
    }

    .hero-portrait {
        right: -4%;
        width: min(108vw, 650px);
    }

    .contacts--ribbon { padding-bottom: 240px; }

    .contacts--ribbon .ribbon-scene {
        top: auto;
        height: 330px;
    }

    .contacts--ribbon .ribbon-art,
.contacts--ribbon .ribbon-video {
        object-fit: cover;
        object-position: center bottom;
    }

    .contacts--ribbon .ribbon-scene::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, var(--c-ink), transparent 28%);
    }


}


@media(prefers-reduced-motion:reduce) { .ribbon-video { display:none; } }