/* An open, uneven rhythm for the home page's light, people, and spaces. */
.sanctuary-home .sanctuary-preview {
    padding-top: 100px;
    padding-bottom: 65px;
    background: none;
}

.sanctuary-home .sanctuary-preview-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: 8vw;
}

.sanctuary-home .sanctuary-preview-photo {
    width: 96%;
    height: auto;
    aspect-ratio: 1.08;
    margin-top: 72px;
    align-self: center;
    background: none;
    mask-image: radial-gradient(
        ellipse closest-side at 50% 50%,
        #000 45%,
        #000000d9 62%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse closest-side at 50% 50%,
        #000 45%,
        #000000d9 62%,
        transparent 100%
    );
}

.sanctuary-home .sanctuary-with-chris.has-host-portrait {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: 'heading portrait' 'story portrait' 'visit visit';
    padding-top: 100px;
    padding-bottom: 35px;
    column-gap: 10vw;
    border-top: 0;
    background: none;
}

/* Warm light travels gently between the portrait and Chris's story. */
.host-atmosphere {
    position: absolute;
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    inset: -70px -7vw -75px;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 76%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 76%, transparent);
}

.host-atmosphere::before,
.host-atmosphere::after {
    content: '';
    position: absolute;
    inset: -8%;
    transform-origin: 70% 50%;
}

.host-atmosphere::before {
    background: radial-gradient(
        ellipse 35% 48% at 73% 48%,
        #bf985a33 0%,
        #a7824324 32%,
        #80703c10 58%,
        transparent 85%
    );
    animation: host-light-drift 28s ease-in-out infinite alternate;
}

.host-atmosphere::after {
    background: radial-gradient(
        ellipse 36% 29% at 50% 64%,
        #c7ab751a 0%,
        #a78a4e0e 46%,
        transparent 82%
    );
    animation: host-light-drift 36s ease-in-out -12s infinite alternate-reverse;
}

@keyframes host-light-drift {
    from {
        transform: translate3d(3%, -2%, 0) scale(.96) rotate(-3deg);
    }
    to {
        transform: translate3d(-4%, 3%, 0) scale(1.08) rotate(3deg);
    }
}

.sanctuary-home .host-portrait {
    width: 86%;
    max-width: 410px;
    justify-self: end;
    align-self: start;
    margin-top: 68px;
}

.sanctuary-home .has-host-portrait .sanctuary-next-step {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.88fr);
    grid-template-areas: 'photo heading' 'photo copy';
    column-gap: 8vw;
    row-gap: 20px;
    margin-top: 120px;
    padding-top: 0;
    border-top: 0;
}

.sanctuary-home .host-visit-photo {
    width: 100%;
    align-self: start;
}

.sanctuary-home .host-visit-heading {
    padding-top: 38px;
}

.sanctuary-home .sanctuary-community {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 8vw;
    padding-top: 90px;
    padding-bottom: 75px;
    border-top: 0;
    background: none;
}

.sanctuary-home .community-story,
.sanctuary-home .community-space {
    min-width: 0;
}

.sanctuary-home .community-copy {
    margin-top: 30px;
    max-width: 48ch;
}

.sanctuary-home .community-photo {
    width: 100%;
    margin-top: 0;
}

.sanctuary-home .community-photo img {
    aspect-ratio: 3/2;
    object-position: 50% 50%;
}

.sanctuary-home .community-contact {
    margin-top: 28px;
    padding: 0;
    border-top: 0;
}

.sanctuary-home .community-contact h3 {
    font-size: 34px;
    margin: 12px 0 16px;
}

.sanctuary-home .community-contact-copy {
    max-width: 52ch;
}

@media (min-width: 701px) and (max-width: 1000px) {
    .sanctuary-home .sanctuary-preview-layout,
    .sanctuary-home .sanctuary-with-chris.has-host-portrait,
    .sanctuary-home .has-host-portrait .sanctuary-next-step,
    .sanctuary-home .sanctuary-community {
        column-gap: 5vw;
    }

    .sanctuary-home .host-portrait {
        width: 100%;
        margin-top: 82px;
    }

    .sanctuary-home .host-visit-heading {
        padding-top: 0;
    }

    .sanctuary-home .host-visit-photo {
        align-self: center;
    }
}

@media (max-width: 700px) {
    .sanctuary-home .sanctuary-preview {
        padding-top: 58px;
        padding-bottom: 30px;
    }

    .sanctuary-home .sanctuary-preview-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sanctuary-home .sanctuary-preview-photo {
        width: 96%;
        aspect-ratio: 4/3;
        max-height: 350px;
        margin-top: 0;
    }

    .sanctuary-home .sanctuary-with-chris.has-host-portrait {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'heading' 'portrait' 'story' 'visit';
        padding-top: 55px;
        padding-bottom: 15px;
    }

    .sanctuary-home .host-portrait {
        width: 84%;
        max-width: 340px;
        margin-top: 0;
        margin-bottom: 25px;
    }

    .host-atmosphere {
        grid-row: 2 / 3;
        inset: -140px -12vw -180px;
        opacity: .85;
    }

    .host-atmosphere::before {
        background: radial-gradient(
            ellipse 56% 48% at 55% 48%,
            #bf985a33 0%,
            #a7824324 32%,
            #80703c10 58%,
            transparent 85%
        );
    }

    .sanctuary-home .has-host-portrait .sanctuary-next-step {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'heading' 'photo' 'copy';
        gap: 24px;
        margin-top: 65px;
    }

    .sanctuary-home .host-visit-heading {
        padding-top: 0;
    }

    .sanctuary-home .host-visit-photo {
        width: 94%;
    }
}

@media (max-width: 900px) {
    .sanctuary-home .sanctuary-community {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        padding-top: 65px;
        padding-bottom: 55px;
    }

    .sanctuary-home .community-story,
    .sanctuary-home .community-space {
        width: 100%;
        max-width: 640px;
        margin-inline: auto;
    }

    .sanctuary-home .community-copy {
        max-width: none;
        margin-top: 24px;
    }
}