.desktop-invitation-shell,
.desktop-invitation-shell__invitation {
    display: contents;
}

.desktop-invitation-shell__visual {
    display: none;
}

@media (min-width: 1024px) {
    body.desktop-invitation-preview,
    body.desktop-invitation-presentation {
        display: block !important;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        margin: 0;
        padding: 0 !important;
        overflow: hidden;
        background: #111411;
    }

    .desktop-invitation-shell--enabled {
        --desktop-invitation-panel-width: clamp(390px, 32vw, 480px);
        display: grid !important;
        width: 100vw;
        height: 100dvh;
        grid-template-columns: minmax(0, 1fr) var(--desktop-invitation-panel-width);
        grid-template-rows: minmax(0, 1fr);
        overflow: hidden;
        background: var(--desktop-invitation-surface, #111411);
        isolation: isolate;
    }

    .desktop-invitation-shell--cinematic_split {
        --desktop-invitation-panel-width: clamp(460px, 45vw, 680px);
    }

    .desktop-invitation-shell--enabled > .desktop-invitation-shell__visual {
        position: relative;
        z-index: 1;
        display: block;
        min-width: 0;
        min-height: 0;
        grid-column: 1;
        grid-row: 1;
        overflow: hidden;
        background:
            radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--desktop-invitation-accent, #d9c6a2) 22%, transparent), transparent 38%),
            var(--desktop-invitation-surface, #20231f);
    }

    .desktop-invitation-shell__photo {
        position: absolute;
        inset: 0;
        background-image: var(--desktop-invitation-photo);
        background-position: var(--desktop-invitation-photo-position, center 46%);
        background-repeat: no-repeat;
        background-size: cover;
        filter: saturate(0.9) contrast(1.02);
        scale: 1.002;
    }

    .desktop-invitation-shell__visual::before,
    .desktop-invitation-shell__visual::after {
        position: absolute;
        z-index: 1;
        inset: 0;
        content: "";
        pointer-events: none;
    }

    .desktop-invitation-shell__monogram {
        position: absolute;
        z-index: 2;
        top: clamp(28px, 5vh, 64px);
        left: 50%;
        color: var(--desktop-invitation-accent, #d9c6a2);
        font-family: "Noto Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
        font-size: clamp(44px, 5.6vw, 104px);
        font-weight: 400;
        letter-spacing: 0.12em;
        line-height: 1;
        opacity: 0.2;
        text-indent: 0.12em;
        translate: -50% 0;
    }

    .desktop-invitation-shell--without-photo .desktop-invitation-shell__monogram {
        top: 36%;
        font-size: clamp(72px, 10vw, 176px);
        opacity: 0.72;
        translate: -50% -50%;
    }

    .desktop-invitation-shell--without-photo .desktop-invitation-shell__visual::before {
        background:
            radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--desktop-invitation-accent, #d9c6a2) 18%, transparent), transparent 32%),
            repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px),
            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.26) 100%);
    }

    .desktop-invitation-shell__visual::before {
        background:
            radial-gradient(circle at 50% 38%, transparent 18%, rgba(5, 8, 6, 0.18) 78%, rgba(5, 8, 6, 0.34) 100%),
            linear-gradient(180deg, rgba(4, 7, 5, 0.1) 0%, rgba(4, 7, 5, 0.08) 42%, rgba(4, 7, 5, 0.68) 100%);
    }

    .desktop-invitation-shell__visual::after {
        inset: auto 0 0;
        height: 48%;
        background: linear-gradient(180deg, transparent, rgba(3, 6, 4, 0.42));
    }

    .desktop-invitation-shell__copy {
        position: absolute;
        z-index: 2;
        top: auto;
        bottom: clamp(48px, 9vh, 110px);
        left: 50%;
        width: min(76%, 760px);
        color: #fff;
        text-align: center;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.56);
        translate: -50% 0;
    }

    .desktop-invitation-shell__eyebrow {
        display: block;
        margin-bottom: clamp(8px, 1.2vh, 14px);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(12px, 0.82vw, 17px);
        font-weight: 600;
        letter-spacing: 0.18em;
        line-height: 1.4;
        color: var(--desktop-invitation-accent, #d9c6a2);
        text-transform: uppercase;
    }

    .desktop-invitation-shell__names {
        margin: 0;
        color: inherit;
        font-family: "Noto Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
        font-size: clamp(34px, 3.15vw, 64px);
        font-weight: 400;
        letter-spacing: 0.04em;
        line-height: 1.14;
        text-wrap: balance;
    }

    .desktop-invitation-shell__date {
        margin: clamp(10px, 1.6vh, 18px) 0 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(15px, 1.08vw, 22px);
        letter-spacing: 0.12em;
        line-height: 1.5;
    }

    .desktop-invitation-shell--enabled > .desktop-invitation-shell__invitation {
        position: relative;
        z-index: 3;
        display: block !important;
        width: 100%;
        height: 100dvh;
        min-width: 0;
        min-height: 0;
        grid-column: 2;
        grid-row: 1;
        overflow: hidden;
        background: #fff;
        box-shadow: -18px 0 48px rgba(0, 0, 0, 0.2);
    }

    /* A number of v1-derived covers use position:fixed. Establish the
       invitation pane as their containing block so they cannot cover the
       manifest-driven companion canvas on desktop. */
    body.legacy-theme-v2 .desktop-invitation-shell--enabled > .desktop-invitation-shell__invitation {
        contain: layout paint;
        transform: translateZ(0);
    }

    .desktop-invitation-shell__invitation .theme-loader {
        overflow: hidden;
        border-radius: 0 !important;
    }
}

@media (min-width: 1024px) and (max-height: 620px) {
    .desktop-invitation-shell__copy {
        bottom: clamp(28px, 6vh, 56px);
    }

    .desktop-invitation-shell__names {
        font-size: clamp(30px, 2.8vw, 48px);
    }
}