/* Universal public-invitation viewport shell. Theme files still own the content design. */
.jj-shell {
    --jj-content-width: 500px;
    --jj-shell-bg: #163523;
    --jj-shell-accent: #e8d08a;
    --jj-shell-text: #f0e8cc;
    --jj-shell-overlay: .58;
    min-height: 100dvh;
}

.jj-shell-cover {
    display: none;
}

.jj-shell-content {
    position: relative;
}

@media (min-width: 1025px) {
    .jj-shell {
        background: var(--jj-shell-bg);
    }

    .jj-shell--split-sticky .jj-shell-cover {
        position: fixed;
        inset: 0 var(--jj-content-width) 0 0;
        z-index: 1;
        display: flex;
        isolation: isolate;
        align-items: center;
        overflow: hidden;
        padding: clamp(54px, 8vw, 150px);
        color: var(--jj-shell-text);
        background: color-mix(in srgb, var(--jj-shell-bg) 88%, #000);
    }

    .jj-shell--split-sticky.jj-shell-side--right .jj-shell-cover {
        inset: 0 0 0 var(--jj-content-width);
    }

    .jj-shell-cover__image,
    .jj-shell-cover__scrim {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .jj-shell-cover__image {
        z-index: -2;
        object-fit: cover;
        object-position: center;
    }

    .jj-shell-cover__scrim {
        z-index: -1;
        background: linear-gradient(90deg, rgba(5, 13, 9, var(--jj-shell-overlay)), rgba(5, 13, 9, calc(var(--jj-shell-overlay) * .7)));
    }

    .jj-shell-cover__copy {
        max-width: min(620px, 72%);
    }

    .jj-shell-cover__kicker {
        margin: 0 0 42px;
        color: var(--jj-shell-accent);
        font: 700 .76rem/1.4 system-ui, sans-serif;
        letter-spacing: .28em;
        text-transform: uppercase;
    }

    .jj-shell-cover__names {
        display: grid;
        gap: 4px;
        margin: 0;
        color: var(--jj-shell-accent);
        font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
        font-size: clamp(4.5rem, 7.4vw, 9rem);
        font-weight: 500;
        line-height: .75;
        letter-spacing: -.045em;
    }

    .jj-shell-cover__names i {
        margin: .15em 0;
        font-size: .48em;
        font-weight: 400;
    }

    .jj-shell-cover__date {
        margin: 54px 0 0;
        font: 600 1rem/1.5 system-ui, sans-serif;
        letter-spacing: .03em;
    }

    .jj-shell-cover__tagline {
        margin: 48px 0 0;
        color: var(--jj-shell-accent);
        font: italic 1.4rem/1.4 Georgia, serif;
    }

    .jj-shell-cover__brand {
        position: absolute;
        top: 28px;
        left: 34px;
        color: inherit;
        font: 700 .78rem/1 system-ui, sans-serif;
        letter-spacing: .16em;
        text-decoration: none;
        text-transform: uppercase;
    }

    .jj-shell--split-sticky .jj-shell-content {
        width: var(--jj-content-width);
        min-height: 100dvh;
        margin-left: auto;
        overflow: clip;
        box-shadow: -24px 0 60px rgba(0, 0, 0, .2);
    }

    .jj-shell--split-sticky.jj-shell-side--right .jj-shell-content {
        margin-right: auto;
        margin-left: 0;
        box-shadow: 24px 0 60px rgba(0, 0, 0, .2);
    }

    .jj-shell--centered-mobile .jj-shell-content {
        width: var(--jj-content-width);
        min-height: 100dvh;
        margin-inline: auto;
        overflow: clip;
        box-shadow: 0 0 60px rgba(0, 0, 0, .24);
    }

    .jj-shell--full-width .jj-shell-content {
        width: 100%;
        min-height: 100dvh;
    }

    .jj-shell--split-sticky .import-gate {
        right: 0;
        left: auto;
        width: var(--jj-content-width);
    }

    .jj-shell--split-sticky.jj-shell-side--right .import-gate {
        right: auto;
        left: 0;
    }

    .jj-shell--split-sticky .import-nav {
        right: calc(var(--jj-content-width) / 2);
        left: auto;
        transform: translateX(50%);
    }
}

@media (max-width: 1024px) {
    .jj-shell-content {
        width: 100%;
        max-width: none;
        margin: 0;
    }
}