/* RSVP only: keep the complete invitation mockups visible below the fixed header. */
.rayven-rsvp-page .rayven-page-banner {
    min-height: 480px;
}
.rayven-rsvp-page .rayven-page-banner .rayven-page-banner__media {
    top: 84px;
}
.rayven-rsvp-page .rayven-page-banner .rayven-page-banner__media img {
    object-fit: contain;
    object-position: right center;
    transform: none;
}
.rayven-rsvp-page .rayven-page-banner .rayven-page-banner__shade {
    background: linear-gradient(90deg, rgba(6,7,8,.68), rgba(8,9,10,.12) 60%, rgba(8,9,10,.08)),
                linear-gradient(0deg, rgba(5,6,7,.45), transparent 55%);
}
.rayven-rsvp-page .rayven-page-banner .rayven-page-banner__inner {
    align-items: flex-start;
    text-align: left;
}
.rayven-rsvp-page .rayven-page-banner h1 {
    max-width: 48%;
}
@media (max-width: 1024px) and (min-width: 768px) {
    .rayven-rsvp-page .rayven-page-banner { min-height: 420px; }
}
@media (max-width: 767px) {
    .rayven-rsvp-page .rayven-page-banner { min-height: 320px; }
    /* Stack the artwork and title instead of squeezing both into a desktop banner. */
    .rayven-rsvp-page.rayven-rsvp-page--has-image .rayven-page-banner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding-top: 80px;
    }
    .rayven-rsvp-page--has-image .rayven-page-banner .rayven-page-banner__media {
        position: relative;
        inset: auto;
        z-index: 0;
        flex: none;
        width: 100%;
        aspect-ratio: 1.6;
        max-height: 280px;
    }
    .rayven-rsvp-page--has-image .rayven-page-banner .rayven-page-banner__media img {
        /* Cropping is limited to the empty left side of the wide hero artwork. */
        object-fit: cover;
        object-position: right center;
    }
    .rayven-rsvp-page .rayven-page-banner .rayven-page-banner__shade {
        z-index: 1;
        background: linear-gradient(0deg, #0d0e0f 0%, rgba(13,14,15,.92) 24%, transparent 56%);
        pointer-events: none;
    }
    .rayven-rsvp-page .rayven-page-banner .rayven-page-banner__inner {
        width: calc(100% - 40px);
        align-items: center;
        text-align: center;
    }
    .rayven-rsvp-page--has-image .rayven-page-banner .rayven-page-banner__inner {
        padding: 16px 0 34px;
    }
    .rayven-rsvp-page .rayven-page-banner h1 {
        max-width: 100%;
        font-size: clamp(34px, 9vw, 52px);
    }
    .rayven-rsvp-page .rayven-page-banner .rayven-page-banner__letter { display: none; }
    .rayven-rsvp-page .rayven-page-banner .rayven-page-banner__crumbs { flex-wrap: wrap; justify-content: center; }
}