/* Final fit-and-visibility corrections from the second finish review. */

.hero-world .hero-grid {
    min-height: 360px;
    grid-template-columns: minmax(0, 1.12fr) minmax(430px, .88fr);
}

.hero-world .hero-copy {
    max-width: 690px;
    padding-bottom: 8px;
}

.hero-world h1 {
    max-width: 660px;
    font-size: clamp(3.45rem, 5.4vw, 4.85rem);
}

.hero-art-integrated {
    min-height: 405px;
}

.hero-art-integrated img {
    right: -28px;
    bottom: 0;
    width: 660px;
}

.quilt-stage {
    margin-top: -104px;
}

.path-caption {
    z-index: 0;
}

.js [data-path-reveal] .quilt-strip-art,
.js [data-path-reveal] .quilt-piece,
.js [data-path-reveal] .path-caption {
    opacity: 1;
    transform: none;
}

@keyframes d2l-path-enter {
    from {
        opacity: .2;
        transform: translateY(18px) scale(.988);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.js [data-path-reveal].is-revealed .quilt-strip-art,
.js [data-path-reveal].is-revealed .quilt-piece,
.js [data-path-reveal].is-revealed .path-caption {
    animation: d2l-path-enter .66s var(--ease) both;
}

@media (max-width: 1080px) {
    .hero-world .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(420px, .78fr);
    }

    .hero-world h1 {
        font-size: clamp(3.35rem, 6.7vw, 4.45rem);
    }

    .hero-art-integrated img {
        right: -48px;
        width: 620px;
    }
}

@media (max-width: 900px) {
    .hero-world .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-world h1 {
        max-width: 680px;
        font-size: clamp(3.4rem, 9vw, 4.75rem);
    }

    .hero-art-integrated {
        min-height: 435px;
        overflow: hidden;
    }

    .hero-art-integrated img {
        right: -42px;
        bottom: 0;
        width: 650px;
    }

    .quilt-stage {
        margin-top: -70px;
    }
}

@media (max-width: 680px) {
    .hero-world h1 {
        font-size: clamp(2.85rem, 13.8vw, 3.75rem);
    }

    .hero-art-integrated {
        min-height: 350px;
    }

    .hero-art-integrated img {
        right: -92px;
        width: 520px;
    }

    .quilt-stage {
        margin-top: -40px;
    }

    .hero-world .coverage-quilt-connected .quilt-piece {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js [data-path-reveal].is-revealed .quilt-strip-art,
    .js [data-path-reveal].is-revealed .quilt-piece,
    .js [data-path-reveal].is-revealed .path-caption {
        animation: none;
    }
}