/* Collection "luxe": dark backgrounds, gold, Art Deco, velvet, night sky, jewels. Contract: docs/invitation-templates.md.
   Ornaments: ../../img/invitations/ornaments/luxe-*.svg, textures: ../../img/invitations/textures/luxe-*.svg.
   Every ornament is a black mask tinted from the palette, so each template works in all of its palettes. */

/* ========== shared by the collection ========== */

.inv-c--luxe {
    /* gold foil: dark gold, a pale highlight, dark gold again */
    --foil: linear-gradient(100deg, var(--inv-primary) 0%, color-mix(in srgb, var(--inv-primary) 45%, #fff) 42%, var(--inv-primary) 62%, color-mix(in srgb, var(--inv-primary) 80%, #000) 100%);
    --foil-v: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 55%, #fff), var(--inv-ornament) 55%, color-mix(in srgb, var(--inv-ornament) 70%, #000));
    --button-radius: 0;
}

/* Light palettes (gala in bordo): the foil highlight goes darker instead of white, so it stays readable. */
.inv-c--luxe:not(.inv--dark) {
    --foil: linear-gradient(100deg, var(--inv-primary) 0%, color-mix(in srgb, var(--inv-primary) 70%, #000) 45%, var(--inv-primary) 100%);
    --foil-v: linear-gradient(180deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 75%, #000));
}

.inv-c--luxe .inv-hero__amp {
    text-transform: none;
}

/* ========== Gală: black-tie ballroom. Sunburst crown, pinstripes, framed hero, foil capitals ========== */

.inv--gala {
    --f-display: "Cinzel", Georgia, serif;
    --f-body: "Montserrat", "Segoe UI", sans-serif;
    --f-names: "Cinzel", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.1rem, 10.4cqi, 4.6rem);
    --names-spacing: .1em;
    --names-transform: uppercase;
    --names-line: 1.04;
    --names-shadow: none;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .72em;
    --amp-color: var(--inv-ornament);
    --kicker-size: .62rem;
    --kicker-spacing: .44em;
    --date-font: "Cinzel", Georgia, serif;
    --date-size: .92rem;
    --date-spacing: .28em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Cinzel", Georgia, serif;
    --heading-size: 1.6rem;
    --heading-weight: 400;
    --heading-spacing: .14em;
    --heading-transform: uppercase;
    --text-display-font: "EB Garamond", Georgia, serif;
    --message-size: 1.3rem;
    --family-size: 1.24rem;
    --closing-font: "Cinzel", Georgia, serif;
    --closing-size: 1.6rem;
    --monogram-font: "Cinzel", Georgia, serif;
    --hero-content-pad: 24px 18px;
    --hero-pad: 72px 8px 84px;
    --card-radius: 0;
    --card-border: 1px solid var(--inv-ornament);
    --card-shadow: inset 0 0 0 6px var(--inv-surface), inset 0 0 0 7px color-mix(in srgb, var(--inv-ornament) 50%, transparent), 0 30px 80px rgba(0, 0, 0, .45);
    --box-radius: 0;
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 42%, transparent);
    --box-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 7%, var(--inv-surface)), var(--inv-surface));
    --divider-rule-display: none;
    --photo-radius: 0;
    --photo-ratio: 4 / 5;
    --photo-shadow: 0 0 0 6px var(--inv-surface), 0 0 0 7px var(--inv-ornament), 0 0 0 12px var(--inv-surface), 0 0 0 13px color-mix(in srgb, var(--inv-ornament) 50%, transparent);
    --env-bg: repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--inv-ornament) 8%, transparent) 46px 47px), radial-gradient(circle at 50% 36%, var(--inv-surface), var(--inv-bg) 70%);
    --env-fill: color-mix(in srgb, var(--inv-bg) 70%, var(--inv-ornament));
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-surface) 88%, var(--inv-ornament)), var(--inv-surface));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 78%, var(--inv-ornament)), var(--inv-surface));
    --env-radius: 0;
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-ornament) 45%, #fff), var(--inv-ornament) 58%, color-mix(in srgb, var(--inv-ornament) 65%, #000));
    --seal-color: var(--inv-on-primary);
}

.inv--gala:not(.inv--dark) {
    --card-shadow: inset 0 0 0 6px var(--inv-surface), inset 0 0 0 7px color-mix(in srgb, var(--inv-ornament) 50%, transparent), 0 24px 60px rgba(60, 20, 30, .14);
    --seal-color: #fff;
}

.inv--gala .inv__backdrop {
    background:
        radial-gradient(ellipse 70% 38% at 50% 0%, color-mix(in srgb, var(--inv-ornament) 20%, transparent), transparent 70%),
        repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--inv-ornament) 8%, transparent) 46px 47px),
        var(--inv-bg);
}

.inv--gala .inv-hero__frame {
    display: block;
    --hero-frame-inset: 14px;
    --hero-frame-border: 1px solid color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    --hero-frame-shadow: inset 0 0 0 5px color-mix(in srgb, var(--inv-bg) 60%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--inv-ornament) 32%, transparent);
}

.inv--gala .inv-hero__corner {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/luxe-step-corner.svg);
    --hero-corner-size: 21%;
    --hero-corner-inset: 22px;
    --hero-corner-opacity: .95;
}

.inv--gala .inv-hero__names {
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.inv--gala .inv-hero__amp {
    -webkit-text-fill-color: var(--inv-ornament);
    margin: .02em 0 .06em;
    line-height: .8;
}

.inv--gala .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-sunburst.svg);
    --orn-ratio: 240 / 132;
    --orn-width: 62%;
    --orn-max: 250px;
    --orn-fill: var(--foil-v);
}

.inv--gala .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-deco-rule.svg);
    --orn-ratio: 300 / 40;
    --orn-width: 72%;
    --orn-max: 280px;
    --orn-margin: 20px auto 0;
}

.inv--gala .inv-hero__date {
    margin-top: 16px;
    color: var(--inv-text);
}

.inv--gala .inv-hero__place {
    font-size: .66rem;
    letter-spacing: .3em;
}

.inv--gala .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-deco-rule.svg);
    --orn-ratio: 300 / 40;
    --orn-width: 78%;
}

.inv--gala .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/line-diamond.svg);
    --orn-width: 34%;
    --orn-margin: -8px auto 22px;
}

.inv--gala .inv-countdown small {
    letter-spacing: .12em;
}

.inv--gala .inv-program__index {
    border-color: color-mix(in srgb, var(--inv-ornament) 60%, transparent);
    border-radius: 0;
    rotate: 45deg;
    font-size: 0;
}

.inv--gala .inv-program__index::after {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--inv-ornament);
}

.inv--gala .inv-monogram {
    border-color: color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    border-radius: 0;
    box-shadow: inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 40%, transparent);
}

/* ========== Art Deco: Gatsby poster. Layered fan, quarter fans in the corners, chevrons, octagon photo ========== */

.inv--art-deco {
    --f-display: "Forum", Georgia, serif;
    --f-body: "Tenor Sans", "Segoe UI", sans-serif;
    --f-names: "Josefin Sans", "Segoe UI", sans-serif;
    --body-weight: 400;
    --names-weight: 300;
    --names-size: clamp(2.1rem, 10.8cqi, 4.6rem);
    --names-spacing: .16em;
    --names-transform: uppercase;
    --names-line: 1.02;
    --names-color: var(--inv-text);
    --names-shadow: none;
    --amp-font: "Forum", Georgia, serif;
    --amp-style: normal;
    --amp-size: .56em;
    --amp-color: var(--inv-primary);
    --kicker-font: "Tenor Sans", "Segoe UI", sans-serif;
    --kicker-size: .62rem;
    --kicker-spacing: .5em;
    --date-font: "Josefin Sans", "Segoe UI", sans-serif;
    --date-size: .86rem;
    --date-weight: 400;
    --date-spacing: .46em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Forum", Georgia, serif;
    --heading-size: 1.9rem;
    --heading-weight: 400;
    --heading-transform: uppercase;
    --heading-spacing: .18em;
    --label-font: "Josefin Sans", "Segoe UI", sans-serif;
    --label-weight: 400;
    --label-spacing: .34em;
    --text-display-font: "Forum", Georgia, serif;
    --message-style: normal;
    --message-size: 1.3rem;
    --family-size: 1.3rem;
    --closing-font: "Forum", Georgia, serif;
    --closing-size: 1.9rem;
    --monogram-font: "Forum", Georgia, serif;
    --button-font: "Josefin Sans", "Segoe UI", sans-serif;
    --button-spacing: .3em;
    --hero-pad: 84px 8px 96px;
    --hero-content-pad: 18px 14px;
    --card-radius: 0;
    --card-pad: 64px 24px 56px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    --card-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    --card-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 96%, transparent), color-mix(in srgb, var(--inv-surface) 90%, transparent));
    --box-radius: 0;
    --box-border: 0 solid transparent;
    --box-shadow: none;
    --box-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)), color-mix(in srgb, var(--inv-accent) 25%, var(--inv-surface)));
    --divider-rule-display: none;
    --photo-ratio: 1;
    --photo-width: min(100%, 330px);
    --photo-radius: 0;
    --photo-pad: 6px;
    --photo-bg: var(--foil-v);
    --photo-shadow: none;
    --photo-clip: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
    --env-bg: repeating-conic-gradient(from -90deg at 50% 118%, color-mix(in srgb, var(--inv-ornament) 9%, var(--inv-bg)) 0 3deg, var(--inv-bg) 3deg 7deg);
    --env-fill: var(--inv-surface);
    --env-front: linear-gradient(180deg, var(--inv-surface), color-mix(in srgb, var(--inv-surface) 88%, var(--inv-ornament)));
    --env-flap: repeating-conic-gradient(from 90deg at 50% 100%, color-mix(in srgb, var(--inv-ornament) 26%, var(--inv-surface)) 0 4deg, var(--inv-surface) 4deg 9deg);
    --env-radius: 0;
    --seal-fill: var(--foil-v);
    --seal-color: var(--inv-on-primary);
}

.inv--art-deco .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, color-mix(in srgb, var(--inv-ornament) 16%, transparent), transparent 70%),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-ornament) 22%, transparent) 0 1px, transparent 1px 7px) 0 0 / 29px 100% no-repeat,
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-ornament) 22%, transparent) 0 1px, transparent 1px 7px) 100% 0 / 29px 100% no-repeat,
        var(--inv-bg);
}

.inv--art-deco .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/luxe-chevron.svg);
    --texture-size: 48px 28px;
    --texture-opacity: .05;
    left: 36px;
    right: 36px;
}

.inv--art-deco .inv-hero__corner {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/luxe-quarter-fan.svg);
    --hero-corner-size: 30%;
    --hero-corner-inset: 16px;
    --hero-corner-opacity: .85;
}

.inv--art-deco .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-deco-fan.svg);
    --orn-ratio: 220 / 134;
    --orn-width: 60%;
    --orn-max: 240px;
    --orn-fill: var(--foil-v);
}

.inv--art-deco .inv-hero__amp {
    display: flex;
    align-items: center;
    gap: .5em;
    margin: .22em 0 .26em;
}

.inv--art-deco .inv-hero__amp::before,
.inv--art-deco .inv-hero__amp::after {
    content: "";
    width: 2.6em;
    height: 3px;
    border-block: 1px solid var(--inv-ornament);
}

.inv--art-deco .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-chevron-divider.svg);
    --orn-ratio: 300 / 44;
    --orn-width: 70%;
    --orn-max: 260px;
    --orn-margin: 22px auto 0;
}

.inv--art-deco .inv-hero__date {
    margin-top: 16px;
    color: var(--inv-primary);
    text-transform: uppercase;
}

.inv--art-deco .inv-when__date {
    font-size: 1.7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.inv--art-deco .inv-closing__line {
    font: 400 .72rem/1.6 "Josefin Sans", "Segoe UI", sans-serif;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--inv-muted);
}

.inv--art-deco .inv-hero__place {
    font-family: "Tenor Sans", "Segoe UI", sans-serif;
    font-size: .66rem;
    letter-spacing: .32em;
}

.inv--art-deco .orn--card-top,
.inv--art-deco .orn--card-bottom {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-deco-frieze.svg);
    --orn-ratio: 400 / 64;
    --orn-width: calc(100% + 48px);
    --orn-max: none;
    --orn-fill: var(--inv-ornament);
    --orn-opacity: .8;
}

.inv--art-deco .orn--card-top {
    --orn-margin: -64px -24px 34px;
}

.inv--art-deco .orn--card-bottom {
    --orn-margin: 30px -24px -56px;
    --orn-transform: scaleY(-1);
}

@container (min-width: 560px) {
    .inv--art-deco {
        --card-pad-wide: 64px 48px 56px;
    }

    .inv--art-deco .orn--card-top,
    .inv--art-deco .orn--card-bottom {
        --orn-width: calc(100% + 96px);
    }

    .inv--art-deco .orn--card-top {
        --orn-margin: -64px -48px 34px;
    }

    .inv--art-deco .orn--card-bottom {
        --orn-margin: 30px -48px -56px;
    }
}

.inv--art-deco .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-chevron-divider.svg);
    --orn-ratio: 300 / 44;
    --orn-width: 76%;
}

.inv--art-deco .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-chevron-divider.svg);
    --orn-ratio: 300 / 44;
    --orn-width: 40%;
    --orn-max: 150px;
    --orn-margin: -10px auto 24px;
}

.inv--art-deco .inv-photo__frame img {
    clip-path: var(--photo-clip);
}

.inv--art-deco .inv-family__item,
.inv--art-deco .inv-program__item,
.inv--art-deco .inv-countdown > div {
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}

.inv--art-deco .inv-program__item {
    padding-top: 40px;
    clip-path: none;
    background:
        linear-gradient(var(--inv-ornament), var(--inv-ornament)) 50% 0 / 1px 22px no-repeat,
        var(--box-bg);
}

.inv--art-deco .inv-program__index {
    top: 10px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border: 0;
    border-radius: 0;
    background: var(--inv-ornament);
    rotate: 45deg;
    font-size: 0;
}

.inv--art-deco .inv-countdown span {
    font-family: "Josefin Sans", "Segoe UI", sans-serif;
    font-weight: 300;
}

.inv--art-deco .inv-closing__names {
    letter-spacing: .14em;
}

.inv--art-deco .inv-monogram {
    border: 0;
    border-radius: 0;
    background: var(--foil-v);
    color: var(--inv-on-primary);
    box-shadow: none;
    clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}

.inv--art-deco .inv-envelope__seal {
    border-radius: 0;
    box-shadow: none;
    clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}

/* ========== Noir: film noir. Black and white photo behind the names, light through blinds, gold brackets ========== */

.inv--noir {
    --f-display: "Bodoni Moda", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Bodoni Moda", Georgia, serif;
    --body-weight: 400;
    --names-weight: 400;
    --names-style: italic;
    --names-size: clamp(2.8rem, 15cqi, 6.2rem);
    --names-line: .98;
    --names-color: var(--inv-text);
    --names-shadow: 0 2px 30px rgba(0, 0, 0, .6);
    --amp-font: "Bodoni Moda", Georgia, serif;
    --amp-style: italic;
    --amp-size: .44em;
    --amp-color: var(--inv-ornament);
    --kicker-size: .6rem;
    --kicker-spacing: .56em;
    --kicker-weight: 600;
    --kicker-color: var(--inv-text);
    --date-size: .74rem;
    --date-weight: 600;
    --date-spacing: .56em;
    --heading-font: "Bodoni Moda", Georgia, serif;
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 2.3rem;
    --heading-color: var(--inv-text);
    --label-weight: 600;
    --label-spacing: .4em;
    --label-color: var(--inv-primary);
    --text-display-font: "Bodoni Moda", Georgia, serif;
    --message-size: 1.22rem;
    --family-size: 1.22rem;
    --closing-size: 2.6rem;
    --monogram-font: "Bodoni Moda", Georgia, serif;
    --monogram-radius: 0;
    --hero-pad: 90px 24px 96px;
    --hero-halo: none;
    --hero-content-pad: 0;
    --photo-filter: grayscale(1) contrast(1.2) brightness(.56);
    --hero-photo-overlay:
        repeating-linear-gradient(-32deg, rgba(0, 0, 0, .32) 0 20px, transparent 26px 36px, rgba(0, 0, 0, .32) 42px) 0 0 / 100% 72% no-repeat,
        radial-gradient(ellipse 80% 60% at 50% 42%, transparent 30%, rgba(0, 0, 0, .5)),
        linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .2) 28%, rgba(0, 0, 0, .36) 60%, var(--inv-bg) 100%);
    --card-bg: transparent;
    --card-border: 0 solid transparent;
    --card-shadow: none;
    --card-radius: 0;
    --card-pad: 56px 26px;
    --box-bg: transparent;
    --box-border: 0 solid transparent;
    --box-shadow: none;
    --box-radius: 0;
    --photo-radius: 0;
    --photo-ratio: 4 / 5;
    --photo-pad: 16px;
    --photo-shadow: none;
    --photo-bg:
        linear-gradient(var(--inv-ornament), var(--inv-ornament)) 0 0 / 44px 1px,
        linear-gradient(var(--inv-ornament), var(--inv-ornament)) 0 0 / 1px 44px,
        linear-gradient(var(--inv-ornament), var(--inv-ornament)) 100% 100% / 44px 1px,
        linear-gradient(var(--inv-ornament), var(--inv-ornament)) 100% 100% / 1px 44px;
    --env-bg: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 255, 255, .07), transparent 70%), var(--inv-bg);
    --env-fill: color-mix(in srgb, var(--inv-surface) 80%, #000);
    --env-front: linear-gradient(170deg, var(--inv-surface), color-mix(in srgb, var(--inv-surface) 70%, #000));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 85%, #fff), var(--inv-surface));
    --env-radius: 0;
    --seal-fill: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--inv-surface) 70%, #fff), var(--inv-bg) 75%);
    --seal-color: var(--inv-ornament);
    --seal-radius: 0;
}

.inv--noir .inv__backdrop {
    background:
        radial-gradient(ellipse 58% 44% at 50% 0%, rgba(255, 255, 255, .1), transparent 72%),
        linear-gradient(180deg, transparent 0, var(--inv-bg) 760px),
        repeating-linear-gradient(-32deg, rgba(255, 255, 255, .035) 0 22px, transparent 22px 40px),
        var(--inv-bg);
}

.inv--noir .inv-hero {
    margin-inline: -16px;
}

.inv--noir .inv-hero__image,
.inv--noir .inv-hero__overlay {
    display: block;
}

.inv--noir .inv-hero__image ~ .inv-hero__content .inv-hero__place {
    color: color-mix(in srgb, var(--inv-text) 78%, transparent);
}

.inv--noir .inv-photo {
    display: none;
}

.inv--noir .inv-hero__corner {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/luxe-bracket.svg);
    --hero-corner-size: 24%;
    --hero-corner-inset: 18px;
    --hero-corner-opacity: 1;
}

.inv--noir .orn--hero {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 1px;
    --orn-ratio: 1 / 64;
    --orn-margin: 0 auto 10px;
    --orn-fill: linear-gradient(180deg, transparent, var(--inv-ornament));
}

.inv--noir .inv-hero__amp {
    margin: .12em 0 .16em;
}

.inv--noir .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 56px;
    --orn-ratio: 56 / 1;
    --orn-margin: 30px auto 0;
    --orn-fill: var(--inv-ornament);
}

.inv--noir .inv-hero__date {
    margin-top: 24px;
}

.inv--noir .inv-hero__place {
    font-size: .64rem;
    letter-spacing: .34em;
}

.inv--noir .inv-card {
    border-block: 1px solid color-mix(in srgb, var(--inv-ornament) 20%, transparent);
}

.inv--noir .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/luxe-bracket.svg);
    --corner-size: 16%;
    --corner-max: 76px;
    --corner-inset: 0;
    --corner-opacity: 1;
}

.inv--noir .inv-corner--tl,
.inv--noir .inv-corner--tr {
    display: none;
}

.inv--noir .inv-divider__rule {
    width: 56px;
    background: var(--inv-ornament);
}

.inv--noir .orn--heading {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 28px;
    --orn-ratio: 28 / 1;
    --orn-margin: -8px auto 26px;
    --orn-fill: var(--inv-ornament);
}

.inv--noir .inv-family__item {
    padding: 18px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--inv-text) 14%, transparent);
}

.inv--noir .inv-family__item:last-child {
    border-bottom: 0;
}

.inv--noir .inv-countdown {
    gap: 0;
}

.inv--noir .inv-countdown > div + div {
    border-left: 1px solid color-mix(in srgb, var(--inv-text) 16%, transparent);
}

.inv--noir .inv-countdown span {
    color: var(--inv-text);
    font-style: italic;
}

.inv--noir .inv-program__list {
    gap: 8px;
}

.inv--noir .inv-program__item {
    padding: 28px 8px;
    border-top: 1px solid color-mix(in srgb, var(--inv-text) 14%, transparent);
}

.inv--noir .inv-program__index {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 10px;
    border: 0;
    background: none;
    font: italic 400 1rem/1 "Bodoni Moda", Georgia, serif;
    color: var(--inv-ornament);
}

.inv--noir .inv-program__index::before {
    content: "N° ";
    font-size: .7em;
}

.inv--noir .inv-program__time {
    font-style: italic;
    color: var(--inv-text);
}

.inv--noir .inv-closing__names {
    color: var(--inv-text);
}

.inv--noir .inv-monogram {
    border-color: var(--inv-ornament);
    box-shadow: none;
    font-style: italic;
    color: var(--inv-ornament);
}

/* ========== Catifea: baroque velvet. Draped folds, damask, gold tassels, baroque crest, script names ========== */

.inv--catifea {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "EB Garamond", Georgia, serif;
    --f-names: "Alex Brush", cursive;
    --body-weight: 400;
    --names-weight: 400;
    --names-size: clamp(3.1rem, 16cqi, 6.4rem);
    --names-line: 1.12;
    --names-shadow: none;
    --amp-font: "EB Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .46em;
    --amp-color: var(--inv-text);
    --kicker-font: "EB Garamond", Georgia, serif;
    --kicker-size: 1rem;
    --kicker-style: italic;
    --kicker-weight: 500;
    --kicker-transform: none;
    --kicker-spacing: .06em;
    --kicker-color: var(--inv-text);
    --date-font: "Cormorant Garamond", Georgia, serif;
    --date-size: 1.02rem;
    --date-weight: 600;
    --date-spacing: .26em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Alex Brush", cursive;
    --heading-size: 2.7rem;
    --heading-weight: 400;
    --label-font: "Cormorant Garamond", Georgia, serif;
    --label-size: .78rem;
    --label-weight: 600;
    --label-spacing: .24em;
    --text-display-font: "EB Garamond", Georgia, serif;
    --message-size: 1.3rem;
    --family-size: 1.24rem;
    --closing-size: 3.1rem;
    --monogram-font: "Alex Brush", cursive;
    --button-font: "Cormorant Garamond", Georgia, serif;
    --button-spacing: .2em;
    --hero-pad: 150px 8px 88px;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 70%, transparent), transparent);
    --card-radius: 4px;
    --card-bg: radial-gradient(ellipse 90% 40% at 50% 0%, color-mix(in srgb, var(--inv-surface) 80%, #fff 6%), transparent), color-mix(in srgb, var(--inv-surface) 96%, transparent);
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    --card-shadow: inset 0 0 0 5px color-mix(in srgb, var(--inv-surface) 96%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--inv-ornament) 38%, transparent), 0 30px 80px rgba(0, 0, 0, .5);
    --card-pad: 52px 26px;
    --box-radius: 6px;
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 36%, transparent);
    --box-bg: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-surface)), var(--inv-surface) 80%);
    --divider-rule-display: none;
    --photo-radius: 50%;
    --photo-ratio: 4 / 5;
    --photo-width: min(86%, 320px);
    --photo-shadow: 0 0 0 5px var(--inv-surface), 0 0 0 6px var(--inv-ornament), 0 0 0 10px var(--inv-surface), 0 0 0 11px color-mix(in srgb, var(--inv-ornament) 45%, transparent), 0 24px 50px -20px rgba(0, 0, 0, .7);
    --env-bg: repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0, rgba(255, 255, 255, .03) 40px, rgba(0, 0, 0, .2) 80px), radial-gradient(circle at 50% 36%, var(--inv-surface), var(--inv-bg) 72%);
    --env-fill: color-mix(in srgb, var(--inv-surface) 80%, #000);
    --env-front: linear-gradient(165deg, color-mix(in srgb, var(--inv-surface) 90%, #fff), color-mix(in srgb, var(--inv-surface) 80%, #000));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-surface)), var(--inv-surface));
    --env-radius: 4px;
}

.inv--catifea .inv__backdrop {
    background:
        radial-gradient(ellipse 70% 34% at 50% 0%, color-mix(in srgb, var(--inv-primary) 16%, transparent), transparent 72%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0, rgba(255, 255, 255, .035) 34px, rgba(0, 0, 0, .12) 58px, rgba(255, 255, 255, .02) 76px, rgba(0, 0, 0, .22) 96px),
        var(--inv-bg);
}

.inv--catifea .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/luxe-damask.svg);
    --texture-size: 120px 160px;
    --texture-opacity: .075;
}

.inv--catifea .inv__deco {
    display: block;
    --deco-image: url(../../img/invitations/ornaments/luxe-tassel.svg);
    --deco-fill: var(--foil-v);
    --deco-opacity: .95;
}

.inv--catifea .inv__deco--a {
    --deco-a-width: 11%;
    --deco-a-ratio: 80 / 250;
    --deco-a-left: 7%;
    --deco-a-top: -24px;
    max-width: 64px;
}

.inv--catifea .inv__deco--b {
    --deco-b-width: 11%;
    --deco-b-ratio: 80 / 250;
    --deco-b-right: 7%;
    --deco-b-top: -24px;
    --deco-b-bottom: auto;
    --deco-b-transform: none;
    max-width: 64px;
}

.inv--catifea .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-crest.svg);
    --orn-ratio: 200 / 130;
    --orn-width: 52%;
    --orn-max: 210px;
    --orn-fill: var(--foil-v);
}

.inv--catifea .inv-hero__kicker {
    margin: 14px 0 6px;
}

.inv--catifea .inv-hero__names {
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 0 .12em;
}

.inv--catifea .inv-hero__amp {
    -webkit-text-fill-color: var(--inv-text);
    margin: .12em 0 .02em;
}

.inv--catifea .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-baroque-divider.svg);
    --orn-ratio: 300 / 50;
    --orn-width: 74%;
    --orn-max: 280px;
    --orn-margin: 16px auto 0;
    --orn-fill: var(--foil-v);
}

.inv--catifea .inv-hero__date {
    margin-top: 14px;
    color: var(--inv-primary);
}

.inv--catifea .inv-hero__place {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: .8rem;
    font-weight: 600;
}

.inv--catifea .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/luxe-baroque-corner.svg);
    --corner-size: 20%;
    --corner-max: 92px;
    --corner-inset: 10px;
    --corner-fill: var(--foil-v);
}

.inv--catifea .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-baroque-divider.svg);
    --orn-ratio: 300 / 50;
    --orn-width: 80%;
}

.inv--catifea .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-baroque-divider.svg);
    --orn-ratio: 300 / 50;
    --orn-width: 46%;
    --orn-max: 170px;
    --orn-margin: -14px auto 20px;
}

.inv--catifea .inv-when__date,
.inv--catifea .inv-countdown span,
.inv--catifea .inv-program__time {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
}

.inv--catifea .inv-heading,
.inv--catifea .inv-closing__names {
    color: var(--inv-primary);
}

.inv--catifea .inv-program__index {
    border-color: color-mix(in srgb, var(--inv-ornament) 60%, transparent);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
}

.inv--catifea .inv-monogram {
    font-size: 1.5rem;
    border-color: color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    box-shadow: inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 40%, transparent);
}

/* ========== Celest: night sky. Twinkling stars, crescent moon, an orbit ring around the names ========== */

.inv--celest {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Cormorant Garamond", Georgia, serif;
    --body-weight: 400;
    --names-weight: 300;
    --names-size: clamp(2.3rem, 11.4cqi, 4.9rem);
    --names-transform: uppercase;
    --names-spacing: .12em;
    --names-line: 1.02;
    --names-color: var(--inv-text);
    --names-shadow: 0 0 26px color-mix(in srgb, var(--inv-primary) 45%, transparent);
    --amp-font: "Allura", cursive;
    --amp-style: normal;
    --amp-size: .95em;
    --amp-color: var(--inv-primary);
    --kicker-size: .6rem;
    --kicker-spacing: .5em;
    --date-font: "Cormorant Garamond", Georgia, serif;
    --date-size: 1.02rem;
    --date-weight: 500;
    --date-spacing: .3em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-style: italic;
    --heading-size: 2.4rem;
    --heading-weight: 400;
    --label-spacing: .36em;
    --text-display-font: "Lora", Georgia, serif;
    --message-size: 1.14rem;
    --family-size: 1.14rem;
    --closing-font: "Allura", cursive;
    --closing-size: 3rem;
    --monogram-font: "Cormorant Garamond", Georgia, serif;
    --button-radius: 999px;
    --hero-pad: 70px 8px 90px;
    --hero-halo: none;
    --card-radius: 30px;
    --card-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 78%, transparent), color-mix(in srgb, var(--inv-surface) 92%, transparent) 30%);
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 28%, transparent);
    --card-shadow: 0 0 60px -10px color-mix(in srgb, var(--inv-primary) 16%, transparent), 0 30px 80px rgba(0, 0, 0, .45);
    --box-radius: 18px;
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 26%, transparent);
    --box-bg: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--inv-accent) 55%, transparent), transparent 75%), color-mix(in srgb, var(--inv-surface) 70%, var(--inv-bg));
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-radius: 50%;
    --photo-ratio: 1;
    --photo-width: min(82%, 300px);
    --photo-shadow: 0 0 0 6px var(--inv-surface), 0 0 0 7px var(--inv-ornament), 0 0 0 16px var(--inv-surface), 0 0 0 17px color-mix(in srgb, var(--inv-ornament) 30%, transparent), 0 0 70px 10px color-mix(in srgb, var(--inv-primary) 22%, transparent);
    --env-bg: radial-gradient(circle, color-mix(in srgb, var(--inv-ornament) 70%, transparent) 0 1px, transparent 1.6px) 0 0 / 37px 41px, radial-gradient(circle, color-mix(in srgb, var(--inv-ornament) 45%, transparent) 0 .8px, transparent 1.3px) 18px 22px / 29px 31px, radial-gradient(circle at 50% 30%, var(--inv-surface), var(--inv-bg) 70%);
    --env-fill: color-mix(in srgb, var(--inv-surface) 75%, #000);
    --env-front: radial-gradient(circle, color-mix(in srgb, var(--inv-ornament) 60%, transparent) 0 .9px, transparent 1.4px) 0 0 / 23px 19px, linear-gradient(165deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)), var(--inv-surface));
    --env-flap: linear-gradient(180deg, var(--inv-accent), var(--inv-surface));
    --env-radius: 10px;
}

.inv--celest .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 50% at 50% 100%, color-mix(in srgb, var(--inv-accent) 45%, transparent), transparent 70%),
        radial-gradient(ellipse 70% 40% at 80% 6%, color-mix(in srgb, var(--inv-primary) 10%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 85%, #000), var(--inv-bg) 40%);
}

.inv--celest .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/luxe-starfield.svg);
    --texture-size: 220px;
    --texture-opacity: .55;
    --texture-fill: var(--inv-text);
}

.inv--celest .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/luxe-star.svg);
    --amb-anim: inv-twinkle;
    --amb-size: 13px;
    --amb-duration: 9s;
    --amb-opacity: .95;
    --amb-fill: var(--inv-primary);
}

.inv--celest .inv__ambient i {
    top: var(--amb-y);
}

/* keep the twinkling stars off the texts in the middle column */
.inv--celest .inv__ambient i:nth-child(6) {
    top: 3%;
}

.inv--celest .inv__ambient i:nth-child(7) {
    top: 94%;
}

/* moonlight: a soft glow behind the names (no outline, so nothing crosses the texts) */
.inv--celest .inv-hero__frame {
    display: block;
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(110cqi, 520px);
    aspect-ratio: 1;
    translate: -50% -52%;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-accent) 55%, transparent), color-mix(in srgb, var(--inv-accent) 18%, transparent) 60%, transparent);
}

.inv--celest .inv__deco {
    display: block;
    --deco-image: url(../../img/invitations/ornaments/luxe-star-chart.svg);
    --deco-opacity: .42;
}

.inv--celest .inv__deco--a {
    --deco-a-width: min(68%, 420px);
}

.inv--celest .inv__deco--b {
    --deco-b-width: min(68%, 420px);
    --deco-b-bottom: 40px;
}

.inv--celest .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-moon.svg);
    --orn-ratio: 180 / 120;
    --orn-width: 44%;
    --orn-max: 180px;
    --orn-fill: var(--foil-v);
    --orn-margin: 0 auto 4px;
}

.inv--celest .inv-hero__amp {
    margin: .02em 0 -.04em;
    line-height: .9;
    text-shadow: none;
}

.inv--celest .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-constellation.svg);
    --orn-ratio: 300 / 44;
    --orn-width: 68%;
    --orn-max: 260px;
    --orn-margin: 18px auto 0;
}

.inv--celest .inv-hero__date {
    margin-top: 14px;
    font-size: .86rem;
    text-transform: uppercase;
    color: var(--inv-primary);
}

.inv--celest .inv-hero__place {
    font-size: .64rem;
    letter-spacing: .32em;
}

.inv--celest .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-star.svg);
    --orn-ratio: 1;
    --orn-width: 30px;
    --orn-margin: -59px auto 22px;
    --orn-fill: var(--inv-primary);
}

.inv--celest .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-star-divider.svg);
    --orn-ratio: 300 / 40;
    --orn-width: 78%;
}

.inv--celest .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-star-divider.svg);
    --orn-ratio: 300 / 40;
    --orn-width: 44%;
    --orn-max: 170px;
    --orn-margin: -10px auto 22px;
}

.inv--celest .inv-program__index {
    border-color: color-mix(in srgb, var(--inv-ornament) 50%, transparent);
    background: var(--inv-surface);
}

.inv--celest .inv-closing__names {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.inv--celest .inv-monogram {
    border-color: color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    box-shadow: 0 0 30px color-mix(in srgb, var(--inv-primary) 25%, transparent), inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 30%, transparent);
    font-style: italic;
}

/* ========== Smarald: emerald-cut jewel. Faceted stone, octagonal settings, a line of baguettes ========== */

.inv--smarald {
    --f-display: "Playfair Display", Georgia, serif;
    --f-body: "Outfit", "Segoe UI", sans-serif;
    --f-names: "Gilda Display", Georgia, serif;
    --body-weight: 300;
    --names-weight: 400;
    --names-size: clamp(2.2rem, 11cqi, 4.8rem);
    --names-transform: uppercase;
    --names-spacing: .08em;
    --names-line: 1.06;
    --names-shadow: none;
    --amp-font: "Playfair Display", Georgia, serif;
    --amp-style: italic;
    --amp-size: .56em;
    --amp-color: var(--inv-text);
    --kicker-size: .62rem;
    --kicker-spacing: .46em;
    --kicker-weight: 400;
    --date-font: "Gilda Display", Georgia, serif;
    --date-size: 1rem;
    --date-spacing: .34em;
    --heading-style: italic;
    --heading-size: 2.2rem;
    --heading-weight: 400;
    --label-weight: 400;
    --label-spacing: .34em;
    --text-display-font: "Playfair Display", Georgia, serif;
    --message-size: 1.16rem;
    --family-size: 1.18rem;
    --closing-font: "Gilda Display", Georgia, serif;
    --closing-size: 1.9rem;
    --monogram-font: "Gilda Display", Georgia, serif;
    --button-font: "Outfit", "Segoe UI", sans-serif;
    --hero-pad: 70px 8px 90px;
    --hero-content-pad: 20px 18px;
    --card-radius: 0;
    --card-border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
    --card-shadow: none;
    --chamfer-line: transparent 0 16.4px, color-mix(in srgb, var(--gold) 60%, transparent) 16.4px 17.8px, transparent 17.8px;
    --card-bg:
        linear-gradient(135deg, var(--chamfer-line)) border-box 0 0 / 50% 50% no-repeat,
        linear-gradient(225deg, var(--chamfer-line)) border-box 100% 0 / 50% 50% no-repeat,
        linear-gradient(45deg, var(--chamfer-line)) border-box 0 100% / 50% 50% no-repeat,
        linear-gradient(315deg, var(--chamfer-line)) border-box 100% 100% / 50% 50% no-repeat,
        color-mix(in srgb, var(--inv-surface) 95%, transparent);
    --box-radius: 0;
    --box-border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    --box-bg: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface)), var(--inv-surface) 60%);
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-ratio: 3 / 4;
    --photo-width: min(88%, 320px);
    --photo-radius: 0;
    --photo-pad: 7px;
    --photo-bg: var(--foil-v);
    --photo-shadow: none;
    --photo-clip: polygon(11% 0, 89% 0, 100% 8.25%, 100% 91.75%, 89% 100%, 11% 100%, 0 91.75%, 0 8.25%);
    --env-bg: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)), var(--inv-bg) 70%);
    --env-fill: color-mix(in srgb, var(--inv-surface) 70%, #000);
    --env-front: conic-gradient(from 180deg at 50% 52%, color-mix(in srgb, var(--inv-accent) 90%, #fff 6%), var(--inv-surface) 25%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)) 50%, var(--inv-surface) 75%, color-mix(in srgb, var(--inv-accent) 90%, #fff 6%));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 85%, #fff 6%), var(--inv-surface));
    --env-radius: 0;
    --seal-fill: var(--foil-v);
    --seal-color: var(--inv-on-primary);
    /* the setting is in primary (gold or platinum), the stone takes the hue of the accent */
    --gold: var(--inv-primary);
    --orn-fill: var(--foil-v);
    --corner-fill: var(--foil-v);
    --hero-corner-fill: var(--foil-v);
    --texture-fill: var(--inv-primary);
    --foil-v: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 55%, #fff), var(--inv-primary) 55%, color-mix(in srgb, var(--inv-primary) 70%, #000));
}

.inv--smarald .inv__backdrop {
    background:
        radial-gradient(ellipse 60% 34% at 50% 26%, color-mix(in srgb, var(--inv-accent) 70%, transparent), transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .035) 42%, transparent 54%),
        linear-gradient(65deg, transparent 46%, rgba(255, 255, 255, .03) 58%, transparent 70%),
        var(--inv-bg);
}

.inv--smarald .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/luxe-facet.svg);
    --texture-size: 60px 104px;
    --texture-opacity: .06;
}

.inv--smarald .inv-hero__frame {
    display: block;
    --hero-frame-inset: 26px 12px;
    border: 0;
    background: color-mix(in srgb, var(--gold) 75%, transparent);
    clip-path: polygon(evenodd,
        24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px, 24px 0,
        24.4px 1px, 1px 24.4px, 1px calc(100% - 24.4px), 24.4px calc(100% - 1px), calc(100% - 24.4px) calc(100% - 1px), calc(100% - 1px) calc(100% - 24.4px), calc(100% - 1px) 24.4px, calc(100% - 24.4px) 1px, 24.4px 1px);
}

.inv--smarald .inv-hero__corner {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/luxe-facet-corner.svg);
    --hero-corner-size: 64px;
    --hero-corner-inset: 26px;
}

.inv--smarald .inv-hero__corner--tl,
.inv--smarald .inv-hero__corner--bl {
    left: 12px;
}

.inv--smarald .inv-hero__corner--tr,
.inv--smarald .inv-hero__corner--br {
    right: 12px;
}

.inv--smarald .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-gem.svg);
    --orn-ratio: 170 / 120;
    --orn-width: 42%;
    --orn-max: 170px;
    position: relative;
    background: linear-gradient(145deg, color-mix(in srgb, var(--inv-accent) 40%, #fff), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-text)) 45%, var(--inv-accent));
    background: linear-gradient(145deg, oklch(from var(--inv-accent) .86 calc(c * 1.4) h), oklch(from var(--inv-accent) .62 calc(c * 2.6) h) 46%, oklch(from var(--inv-accent) .4 calc(c * 2.2) h));
    filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--inv-accent) 80%, transparent));
}

.inv--smarald .orn--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--foil-v);
    -webkit-mask: url(../../img/invitations/ornaments/luxe-gem-edges.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/luxe-gem-edges.svg) center / contain no-repeat;
}

.inv--smarald .inv-hero__names {
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.inv--smarald .inv-hero__amp {
    -webkit-text-fill-color: var(--inv-text);
    margin: .1em 0 .12em;
}

.inv--smarald .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-gem-line.svg);
    --orn-ratio: 300 / 30;
    --orn-width: 78%;
    --orn-max: 290px;
    --orn-margin: 22px auto 0;
}

.inv--smarald .inv-hero__date {
    margin-top: 18px;
}

.inv--smarald .inv-hero__place {
    font-size: .64rem;
    letter-spacing: .3em;
}

.inv--smarald .inv-card {
    clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
}

.inv--smarald .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/luxe-facet-corner.svg);
    --corner-size: 64px;
    --corner-inset: 0;
}

.inv--smarald .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-gem-line.svg);
    --orn-ratio: 300 / 30;
    --orn-width: 84%;
}

.inv--smarald .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-gem-line.svg);
    --orn-ratio: 300 / 30;
    --orn-width: 48%;
    --orn-max: 180px;
    --orn-margin: -8px auto 22px;
}

.inv--smarald .inv-photo__frame img {
    clip-path: var(--photo-clip);
}

.inv--smarald .inv-program__index {
    border-radius: 0;
    border-color: color-mix(in srgb, var(--gold) 60%, transparent);
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
    background: color-mix(in srgb, var(--inv-accent) 60%, var(--inv-surface));
}

.inv--smarald .inv-closing__names {
    letter-spacing: .1em;
}

.inv--smarald .inv-monogram {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--foil-v);
    color: var(--inv-on-primary);
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.inv--smarald .inv-envelope__seal {
    border-radius: 0;
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

/* ========== Strălucire: champagne glam. Glitter-dipped top, falling gold dust, clinking coupes ========== */

.inv--stralucire {
    --f-display: "Yeseva One", Georgia, serif;
    --f-body: "Poppins", "Segoe UI", sans-serif;
    --f-names: "Great Vibes", cursive;
    --body-weight: 300;
    --names-weight: 400;
    --names-size: clamp(3.3rem, 17.5cqi, 7rem);
    --names-line: 1.08;
    --names-shadow: none;
    --amp-style: normal;
    --amp-size: .62em;
    --kicker-size: .6rem;
    --kicker-spacing: .5em;
    --kicker-weight: 500;
    --date-font: "Yeseva One", Georgia, serif;
    --date-size: .92rem;
    --date-spacing: .24em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Yeseva One", Georgia, serif;
    --heading-size: 1.8rem;
    --heading-weight: 400;
    --heading-spacing: .04em;
    --label-weight: 500;
    --label-spacing: .34em;
    --text-display-font: "EB Garamond", Georgia, serif;
    --message-size: 1.28rem;
    --family-size: 1.22rem;
    --closing-size: 3.2rem;
    --monogram-font: "Yeseva One", Georgia, serif;
    --button-font: "Poppins", "Segoe UI", sans-serif;
    --button-radius: 999px;
    --hero-pad: 90px 8px 90px;
    --card-radius: 22px;
    --card-border: 1px solid transparent;
    --card-bg: linear-gradient(var(--inv-surface), var(--inv-surface)) padding-box, linear-gradient(135deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 30%, var(--inv-surface)) 30%, var(--inv-ornament) 50%, color-mix(in srgb, var(--inv-ornament) 30%, var(--inv-surface)) 72%, var(--inv-ornament)) border-box;
    --card-shadow: 0 0 0 5px color-mix(in srgb, var(--inv-bg) 60%, transparent), 0 30px 80px rgba(0, 0, 0, .5);
    --box-radius: 14px;
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 38%, transparent);
    --box-bg: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface)), var(--inv-surface) 70%);
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-ratio: 2 / 3;
    --photo-width: min(76%, 280px);
    --photo-radius: 999px;
    --photo-inner-radius: 999px;
    --photo-pad: 6px;
    --photo-bg: var(--foil-v);
    --photo-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 8px color-mix(in srgb, var(--inv-ornament) 40%, transparent), 0 20px 60px -10px color-mix(in srgb, var(--inv-primary) 30%, transparent);
    --env-bg: radial-gradient(circle, color-mix(in srgb, var(--inv-ornament) 80%, transparent) 0 1px, transparent 1.5px) 0 0 / 13px 17px, radial-gradient(circle, color-mix(in srgb, var(--inv-ornament) 55%, transparent) 0 .7px, transparent 1.2px) 6px 9px / 11px 7px, radial-gradient(circle at 50% 36%, var(--inv-surface), var(--inv-bg) 70%);
    --env-fill: color-mix(in srgb, var(--inv-surface) 70%, var(--inv-ornament));
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 42%, var(--inv-surface)), var(--inv-surface) 55%, color-mix(in srgb, var(--inv-ornament) 30%, var(--inv-surface)));
    --env-flap: radial-gradient(circle, color-mix(in srgb, var(--inv-ornament) 90%, #fff) 0 .8px, transparent 1.3px) 0 0 / 9px 11px, linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-surface)), color-mix(in srgb, var(--inv-ornament) 25%, var(--inv-surface)));
    --env-radius: 12px;
    --seal-fill: var(--foil-v);
    --seal-color: var(--inv-on-primary);
}

.inv--stralucire .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 40% at 50% 30%, color-mix(in srgb, var(--inv-primary) 18%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 16%, var(--inv-bg)), var(--inv-bg) 700px);
}

/* glitter-dipped top: the drip shape intersected with two layers of glitter */
.inv--stralucire .inv__texture {
    display: block;
    bottom: auto;
    height: 300px;
    opacity: 1;
    background: var(--foil-v);
    -webkit-mask:
        url(../../img/invitations/textures/luxe-drip.svg) 0 0 / 400px 300px repeat-x,
        url(../../img/invitations/textures/luxe-glitter.svg) 0 0 / 58px repeat,
        url(../../img/invitations/textures/luxe-glitter.svg) 23px 31px / 86px repeat;
    -webkit-mask-composite: source-in, source-over;
    mask:
        url(../../img/invitations/textures/luxe-drip.svg) 0 0 / 400px 300px repeat-x,
        url(../../img/invitations/textures/luxe-glitter.svg) 0 0 / 58px repeat,
        url(../../img/invitations/textures/luxe-glitter.svg) 23px 31px / 86px repeat;
    mask-composite: intersect, add;
}

.inv--stralucire .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/luxe-flake.svg);
    --amb-anim: inv-fall;
    --amb-ratio: 24 / 28;
    --amb-size: 8px;
    --amb-duration: 16s;
    --amb-opacity: .85;
    --amb-fill: var(--foil-v);
}

.inv--stralucire .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-champagne.svg);
    --orn-ratio: 220 / 150;
    --orn-width: 46%;
    --orn-max: 190px;
    --orn-fill: var(--foil-v);
}

.inv--stralucire .inv-hero__kicker {
    margin-top: 22px;
}

.inv--stralucire .inv-hero__names {
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 0 .14em;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--inv-primary) 35%, transparent));
}

.inv--stralucire .inv-hero__amp {
    margin: -.12em 0 -.1em;
}

.inv--stralucire .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-sparkle-divider.svg);
    --orn-ratio: 300 / 40;
    --orn-width: 70%;
    --orn-max: 260px;
    --orn-margin: 16px auto 0;
    --orn-fill: var(--foil-v);
}

.inv--stralucire .inv-hero__date {
    margin-top: 14px;
    color: var(--inv-primary);
}

.inv--stralucire .inv-hero__place {
    font-size: .64rem;
    letter-spacing: .3em;
}

.inv--stralucire .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-sparkle.svg);
    --orn-ratio: 1;
    --orn-width: 34px;
    --orn-margin: -61px auto 22px;
    --orn-fill: var(--foil-v);
}

.inv--stralucire .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-sparkle-divider.svg);
    --orn-ratio: 300 / 40;
    --orn-width: 80%;
    --orn-fill: var(--foil-v);
}

.inv--stralucire .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/luxe-sparkle-divider.svg);
    --orn-ratio: 300 / 40;
    --orn-width: 46%;
    --orn-max: 170px;
    --orn-margin: -10px auto 22px;
}

.inv--stralucire .inv-button:not(.inv-button--ghost) {
    border-color: transparent;
    background: var(--foil);
}

.inv--stralucire .inv-program__index {
    border: 0;
    background: var(--foil-v);
    color: var(--inv-on-primary);
}

.inv--stralucire .inv-closing__names {
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 0 .1em;
}

.inv--stralucire .inv-monogram {
    border: 0;
    background: var(--foil-v);
    color: var(--inv-on-primary);
    box-shadow: 0 0 0 4px var(--inv-surface), 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 50%, transparent), 0 0 30px color-mix(in srgb, var(--inv-primary) 35%, transparent);
}

/* ========== Vitraliu: an arched stained-glass window. Half rose in the lunette, a band of panes, gold cames ========== */

.inv--vitraliu {
    --f-display: "Cinzel", Georgia, serif;
    --f-body: "Lora", Georgia, serif;
    --f-names: "Cinzel Decorative", Georgia, serif;
    --body-weight: 400;
    --names-weight: 400;
    --names-size: clamp(1.6rem, 8.7cqi, 3.3rem);
    --names-line: 1.08;
    --names-spacing: .02em;
    --names-shadow: none;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .6em;
    --amp-color: var(--inv-text);
    --kicker-font: "Cinzel", Georgia, serif;
    --kicker-size: .6rem;
    --kicker-weight: 400;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-text);
    --date-font: "Cinzel", Georgia, serif;
    --date-size: .84rem;
    --date-spacing: .22em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Cinzel Decorative", Georgia, serif;
    --heading-size: 1.5rem;
    --heading-weight: 400;
    --heading-spacing: .03em;
    --label-font: "Cinzel", Georgia, serif;
    --label-size: .64rem;
    --label-weight: 400;
    --label-spacing: .28em;
    --text-display-font: "EB Garamond", Georgia, serif;
    --message-size: 1.3rem;
    --family-size: 1.24rem;
    --closing-font: "Cinzel", Georgia, serif;
    --closing-size: 1.6rem;
    --monogram-font: "Cinzel", Georgia, serif;
    --button-font: "Cinzel", Georgia, serif;
    --button-spacing: .2em;

    /* the window: width, distance from the top and bottom of the first screen; the lunette is half the width tall */
    --win-w: min(100cqi - 54px, 460px);
    --win-top: 18px;
    --win-bottom: 18px;
    --win-head: calc(var(--win-w) / 2);
    --win-band: calc(var(--win-w) * .0775);
    --win-sill: calc(var(--win-w) * .085);

    /* glass: the palette's own hue plus fixed jewel tints pulled towards the palette; cames in the primary colour */
    --vg-own: color-mix(in srgb, var(--inv-accent) 46%, var(--inv-ornament));
    --vg-ruby: color-mix(in srgb, #D3284C 80%, var(--inv-accent));
    --vg-sapphire: color-mix(in srgb, #2F62DC 80%, var(--inv-accent));
    --vg-emerald: color-mix(in srgb, #14A871 80%, var(--inv-accent));
    --vg-amber: color-mix(in srgb, #F3AC3C 84%, var(--inv-primary));
    --vg-sheen: linear-gradient(118deg, rgba(255, 255, 255, .24) 0, transparent 26%, rgba(0, 0, 0, .2) 52%, transparent 76%, rgba(255, 255, 255, .14) 100%);
    --vg-lead: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 62%, #fff), var(--inv-primary) 38%, color-mix(in srgb, var(--inv-primary) 74%, #000));

    --hero-pad: calc(var(--win-top) + var(--win-head) + 10px) 8px calc(var(--win-bottom) + var(--win-sill) + 46px);
    --hero-halo: none;
    --hero-content-pad: 4px 0;
    --card-radius: 0;
    --card-pad: 56px 24px 50px;
    --card-bg: color-mix(in srgb, var(--inv-surface) 96%, transparent);
    --card-border: 1px solid color-mix(in srgb, var(--inv-primary) 62%, transparent);
    --card-shadow: inset 0 0 0 5px color-mix(in srgb, var(--inv-surface) 96%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--inv-primary) 30%, transparent), 0 30px 80px rgba(0, 0, 0, .5);
    --box-radius: 0;
    --box-border: 1px solid color-mix(in srgb, var(--inv-primary) 36%, transparent);
    --box-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 46%, var(--inv-surface)), var(--inv-surface) 72%);
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-width: min(84%, 300px);
    --photo-ratio: 3 / 4;
    --photo-radius: 999px 999px 0 0;
    --photo-inner-radius: 999px 999px 0 0;
    --photo-pad: 10px;
    --photo-bg:
        repeating-linear-gradient(0deg, var(--inv-primary) 0 1.5px, transparent 1.5px 38px),
        linear-gradient(180deg, var(--vg-sapphire), var(--vg-emerald) 24%, var(--vg-own) 50%, var(--vg-ruby) 78%, var(--vg-amber));
    --photo-shadow: 0 0 0 1.5px var(--inv-primary), 0 24px 50px -22px rgba(0, 0, 0, .8);
    --env-bg: radial-gradient(ellipse 70% 46% at 50% 34%, color-mix(in srgb, var(--vg-own) 26%, transparent), transparent 72%), var(--inv-bg);
    --env-fill: color-mix(in srgb, var(--inv-surface) 78%, #000);
    --env-line: transparent calc(50% - 1.2px), var(--inv-primary) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px);
    --env-front:
        linear-gradient(to top right, var(--env-line)) 0 0 / 50% 52% no-repeat,
        linear-gradient(to top left, var(--env-line)) 100% 0 / 50% 52% no-repeat,
        linear-gradient(165deg, color-mix(in srgb, var(--inv-surface) 88%, #fff), var(--inv-surface) 50%, color-mix(in srgb, var(--inv-surface) 80%, #000));
    /* the flap is a fan of seven panes that meet under the seal */
    --env-flap:
        linear-gradient(180deg, rgba(0, 0, 0, .34), transparent 70%),
        repeating-conic-gradient(from -52.56deg at 50% 100%, var(--inv-primary) 0 .7deg, transparent .7deg 15.02deg),
        conic-gradient(from -52.56deg at 50% 100%, var(--vg-own) 0 15.02deg, var(--vg-sapphire) 15.02deg 30.04deg, var(--vg-emerald) 30.04deg 45.06deg, var(--vg-ruby) 45.06deg 60.08deg, var(--vg-emerald) 60.08deg 75.1deg, var(--vg-sapphire) 75.1deg 90.12deg, var(--vg-own) 90.12deg 106deg, transparent 106deg);
    --env-radius: 0;
    --seal-fill: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--vg-amber) 60%, #fff), var(--vg-amber) 56%, color-mix(in srgb, var(--vg-amber) 72%, #000));
    --seal-color: var(--inv-on-primary);
}

@supports (color: oklch(from red l c h)) {
    .inv--vitraliu {
        --vg-own: oklch(from var(--inv-accent) .5 calc(c * 2.5) h);
    }
}

.inv--vitraliu .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 420px at 50% 280px, color-mix(in srgb, var(--vg-own) 15%, transparent), transparent 72%),
        radial-gradient(ellipse 50% 260px at 12% 1040px, color-mix(in srgb, var(--vg-ruby) 9%, transparent), transparent 70%),
        radial-gradient(ellipse 50% 260px at 88% 1420px, color-mix(in srgb, var(--vg-sapphire) 9%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 78%, #000), var(--inv-bg) 520px);
}

/* the dark backing of the window, with a faint wash of coloured light under the lunette */
.inv--vitraliu .inv-hero__frame {
    display: block;
    inset: var(--win-top) 0 var(--win-bottom);
    width: var(--win-w);
    margin-inline: auto;
    border: 0;
    border-radius: 999px 999px 0 0;
    background:
        radial-gradient(ellipse 86% 300px at 50% var(--win-head), color-mix(in srgb, var(--vg-own) 24%, transparent), transparent 72%),
        color-mix(in srgb, var(--inv-bg) 80%, #000);
    box-shadow: 0 0 70px -8px color-mix(in srgb, var(--vg-own) 42%, transparent), 0 36px 60px -34px rgba(0, 0, 0, .9);
}

/* clear light: diamond quarries, fading out behind the texts */
.inv--vitraliu .inv-hero__frame::before {
    content: "";
    position: absolute;
    inset: var(--win-head) var(--win-band) var(--win-sill);
    background: var(--inv-primary);
    opacity: .17;
    -webkit-mask:
        url(../../img/invitations/textures/luxe-glass-quarry.svg) 50% 0 / 30px 50px repeat,
        radial-gradient(ellipse 64% 50% at 50% 46%, transparent 58%, #000 100%);
    -webkit-mask-composite: source-in;
    mask:
        url(../../img/invitations/textures/luxe-glass-quarry.svg) 50% 0 / 30px 50px repeat,
        radial-gradient(ellipse 64% 50% at 50% 46%, transparent 58%, #000 100%);
    mask-composite: intersect;
}

/* the four layers of the window share one box: lunette at the top, a tile repeated down the sides, the sill at the bottom */
.inv--vitraliu .inv-hero__corner {
    display: block;
    inset: var(--win-top) 0 var(--win-bottom);
    width: var(--win-w);
    max-width: none;
    aspect-ratio: auto;
    margin-inline: auto;
    padding: var(--win-head) 0 var(--win-sill);
    transform: none;
    opacity: 1;
    -webkit-mask-image: var(--m-head), var(--m-side), var(--m-sill);
    -webkit-mask-position: 50% 0, 50% 0, 50% 100%;
    -webkit-mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat, repeat-y, no-repeat;
    -webkit-mask-origin: border-box, content-box, border-box;
    -webkit-mask-clip: border-box, content-box, border-box;
    mask-image: var(--m-head), var(--m-side), var(--m-sill);
    mask-position: 50% 0, 50% 0, 50% 100%;
    mask-size: 100% auto;
    mask-repeat: no-repeat, repeat-y, no-repeat;
    mask-origin: border-box, content-box, border-box;
    mask-clip: border-box, content-box, border-box;
}

/* glass in the palette's own hue */
.inv--vitraliu .inv-hero__corner--tl {
    --m-head: url(../../img/invitations/ornaments/luxe-glass-head-a.svg);
    --m-side: url(../../img/invitations/textures/luxe-glass-side-a.svg);
    --m-sill: url(../../img/invitations/ornaments/luxe-glass-sill-a.svg);
    background: var(--vg-sheen), var(--vg-own);
}

/* jewel glass: ruby at the springing of the arch, sapphire, emerald at the crown; the same run goes down the sides */
.inv--vitraliu .inv-hero__corner--tr {
    --m-head: url(../../img/invitations/ornaments/luxe-glass-head-b.svg);
    --m-side: url(../../img/invitations/textures/luxe-glass-side-b.svg);
    --m-sill: url(../../img/invitations/ornaments/luxe-glass-sill-b.svg);
    background:
        var(--vg-sheen),
        conic-gradient(from -90deg at 50% 100%, var(--vg-ruby) 0deg, var(--vg-sapphire) 45deg, var(--vg-emerald) 90deg, var(--vg-sapphire) 135deg, var(--vg-ruby) 180deg, var(--vg-ruby) 360deg) 50% 0 / 100% var(--win-head) no-repeat,
        linear-gradient(180deg, var(--vg-ruby) var(--win-head), var(--vg-sapphire) calc(var(--win-head) + 130px), var(--vg-emerald) calc(var(--win-head) + 260px), var(--vg-sapphire) calc(var(--win-head) + 390px), var(--vg-ruby) calc(var(--win-head) + 520px), var(--vg-sapphire) calc(var(--win-head) + 650px));
}

/* amber: hub, spandrels and roundels of the rose, the corner squares of the sill */
.inv--vitraliu .inv-hero__corner--bl {
    --m-head: url(../../img/invitations/ornaments/luxe-glass-head-c.svg);
    --m-side: none;
    --m-sill: url(../../img/invitations/ornaments/luxe-glass-sill-c.svg);
    background: var(--vg-sheen), var(--vg-amber);
}

/* the cames */
.inv--vitraliu .inv-hero__corner--br {
    --m-head: url(../../img/invitations/ornaments/luxe-glass-head-lead.svg);
    --m-side: url(../../img/invitations/textures/luxe-glass-side-lead.svg);
    --m-sill: url(../../img/invitations/ornaments/luxe-glass-sill-lead.svg);
    background: var(--vg-lead);
}

/* daylight behind the rose: slowly brightens and dims */
.inv--vitraliu .inv-hero::after {
    content: "";
    position: absolute;
    top: var(--win-top);
    left: 0;
    right: 0;
    width: var(--win-w);
    height: var(--win-head);
    margin-inline: auto;
    border-radius: 999px 999px 0 0;
    background: radial-gradient(ellipse 62% 96% at 50% 100%, rgba(255, 240, 205, .36), transparent 72%);
    pointer-events: none;
    animation: luxe-glass-glow 11s ease-in-out infinite alternate;
}

@keyframes luxe-glass-glow {
    0% { opacity: .25; }
    100% { opacity: 1; }
}

.inv--vitraliu .inv-hero__content {
    max-width: calc(var(--win-w) - var(--win-band) * 2 - 14px);
}

.inv--vitraliu .inv-hero__kicker {
    margin: 10px 0 12px;
    text-wrap: balance;
}

.inv--vitraliu .inv-hero__names {
    background: var(--vg-lead);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.inv--vitraliu .inv-hero__amp {
    -webkit-text-fill-color: var(--inv-text);
    margin: .04em 0 .1em;
    line-height: .9;
}

/* a small band of lead and glass: divider in the first screen, between sections and under headings */
.inv--vitraliu .orn--hero-divider,
.inv--vitraliu .orn--divider,
.inv--vitraliu .orn--heading {
    display: block;
    position: relative;
    background: none;
    -webkit-mask: none;
    mask: none;
    --orn-ratio: 300 / 28;
}

.inv--vitraliu .orn--hero-divider::before,
.inv--vitraliu .orn--divider::before,
.inv--vitraliu .orn--heading::before,
.inv--vitraliu .orn--hero-divider::after,
.inv--vitraliu .orn--divider::after,
.inv--vitraliu .orn--heading::after {
    content: "";
    position: absolute;
    inset: 0;
}

.inv--vitraliu .orn--hero-divider::before,
.inv--vitraliu .orn--divider::before,
.inv--vitraliu .orn--heading::before {
    background: linear-gradient(90deg, var(--vg-own) 22%, var(--vg-ruby) 22% 29.33%, var(--vg-sapphire) 29.33% 36.67%, var(--vg-emerald) 36.67% 45.67%, var(--vg-amber) 45.67% 54.33%, var(--vg-emerald) 54.33% 63.33%, var(--vg-sapphire) 63.33% 70.67%, var(--vg-ruby) 70.67% 78%, var(--vg-own) 78%);
    -webkit-mask: url(../../img/invitations/ornaments/luxe-glass-band.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/luxe-glass-band.svg) center / contain no-repeat;
}

.inv--vitraliu .orn--hero-divider::after,
.inv--vitraliu .orn--divider::after,
.inv--vitraliu .orn--heading::after {
    background: var(--vg-lead);
    -webkit-mask: url(../../img/invitations/ornaments/luxe-glass-band-lead.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/luxe-glass-band-lead.svg) center / contain no-repeat;
}

.inv--vitraliu .orn--hero-divider {
    --orn-width: min(58cqi, 250px);
    --orn-max: none;
    --orn-margin: 16px auto 0;
}

.inv--vitraliu .orn--divider {
    --orn-width: 86%;
}

.inv--vitraliu .orn--heading {
    --orn-width: 56%;
    --orn-max: 200px;
    --orn-margin: -8px auto 24px;
}

.inv--vitraliu .inv-hero__date {
    margin-top: 14px;
    text-transform: uppercase;
}

.inv--vitraliu .inv-hero__place {
    font-size: .64rem;
    letter-spacing: .26em;
}

.inv--vitraliu .inv-hero__scroll {
    bottom: calc(var(--win-bottom) + var(--win-sill) + 4px);
}

/* card: fine gold lines and a quarter rose of glass in each corner */
.inv--vitraliu .inv-corner {
    display: block;
    --corner-size: 84px;
    --corner-max: none;
    --corner-inset: -1px;
    --corner-opacity: 1;
    background: none;
    -webkit-mask: none;
    mask: none;
}

.inv--vitraliu .inv-corner::before,
.inv--vitraliu .inv-corner::after {
    content: "";
    position: absolute;
    inset: 0;
}

.inv--vitraliu .inv-corner::before {
    background:
        radial-gradient(circle farthest-corner at 8% 8%, var(--vg-amber) 0 10.7%, transparent 10.9%),
        conic-gradient(from 90deg at 8% 8%, var(--vg-ruby) 0 30deg, var(--vg-own) 30deg 60deg, var(--vg-sapphire) 60deg 90deg, transparent 90deg);
    -webkit-mask: url(../../img/invitations/ornaments/luxe-glass-corner.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/luxe-glass-corner.svg) center / contain no-repeat;
}

.inv--vitraliu .inv-corner::after {
    background: var(--vg-lead);
    -webkit-mask: url(../../img/invitations/ornaments/luxe-glass-corner-lead.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/luxe-glass-corner-lead.svg) center / contain no-repeat;
}

.inv--vitraliu .inv-photo__frame img {
    box-shadow: 0 0 0 1.5px var(--inv-primary);
}

.inv--vitraliu .inv-when__date {
    font-size: 1.5rem;
}

.inv--vitraliu .inv-countdown span,
.inv--vitraliu .inv-program__time {
    font-family: "Cinzel", Georgia, serif;
}

/* countdown: four small lancet windows, one jewel each */
.inv--vitraliu .inv-countdown > div {
    --tint: var(--vg-ruby);
    padding: 26px 4px 12px;
    border: 1px solid color-mix(in srgb, var(--inv-primary) 62%, transparent);
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 42%, var(--inv-surface)), color-mix(in srgb, var(--tint) 10%, var(--inv-surface)) 74%);
    box-shadow: inset 0 0 0 3px var(--inv-surface), inset 0 0 0 4px color-mix(in srgb, var(--inv-primary) 28%, transparent);
}

.inv--vitraliu .inv-countdown > div:nth-child(2) { --tint: var(--vg-sapphire); }
.inv--vitraliu .inv-countdown > div:nth-child(3) { --tint: var(--vg-emerald); }
.inv--vitraliu .inv-countdown > div:nth-child(4) { --tint: var(--vg-amber); }

.inv--vitraliu .inv-countdown span {
    font-size: 2rem;
}

.inv--vitraliu .inv-countdown small {
    font-family: "Cinzel", Georgia, serif;
    font-size: .5rem;
    letter-spacing: .06em;
}

/* boxes: a strip of glass along the top edge */
.inv--vitraliu .inv-family__item,
.inv--vitraliu .inv-program__item {
    background:
        linear-gradient(var(--inv-primary), var(--inv-primary)) 0 6px / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, transparent 0 calc(100% / 9 - 1px), var(--inv-primary) calc(100% / 9 - 1px) calc(100% / 9)) 0 0 / 100% 6px no-repeat,
        linear-gradient(90deg, var(--vg-own) 11.11%, var(--vg-ruby) 11.11% 22.22%, var(--vg-sapphire) 22.22% 33.33%, var(--vg-emerald) 33.33% 44.44%, var(--vg-amber) 44.44% 55.56%, var(--vg-emerald) 55.56% 66.67%, var(--vg-sapphire) 66.67% 77.78%, var(--vg-ruby) 77.78% 88.89%, var(--vg-own) 88.89%) 0 0 / 100% 6px no-repeat,
        var(--box-bg);
}

.inv--vitraliu .inv-family__item {
    padding-top: 22px;
}

.inv--vitraliu .inv-program__item {
    padding-top: 36px;
}

/* a roundel instead of the step number */
.inv--vitraliu .inv-program__index {
    border: 1.5px solid var(--inv-primary);
    background: radial-gradient(circle, var(--inv-primary) 0 3px, transparent 3.6px), var(--vg-amber);
    box-shadow: 0 0 0 3px var(--inv-surface);
    font-size: 0;
}

.inv--vitraliu .inv-closing__names {
    letter-spacing: .03em;
}

.inv--vitraliu .inv-monogram {
    border: 1.5px solid var(--inv-primary);
    box-shadow: inset 0 0 0 5px var(--vg-own), inset 0 0 0 6.5px var(--inv-primary);
    background: var(--inv-surface);
}

.inv--vitraliu .inv-envelope__body {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 70%, transparent), 0 30px 60px -28px rgba(0, 0, 0, .7);
}

.inv--vitraliu .inv-envelope__letter {
    font-family: "Cinzel", Georgia, serif;
    font-size: 1.3rem;
}

.inv--vitraliu .inv-envelope__seal {
    box-shadow: inset 0 0 0 1.5px var(--inv-primary), inset 0 0 0 6px var(--vg-own), inset 0 0 0 7.5px var(--inv-primary), 0 6px 14px rgba(0, 0, 0, .45);
}

/* ========== Opal: mother-of-pearl sheen. An iridescent halo, a hairline oval around the names, small pearls ========== */

.inv--opal {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --body-weight: 300;
    --names-weight: 300;
    --names-size: clamp(2.1rem, 11.4cqi, 4.4rem);
    --names-line: 1.04;
    --names-spacing: -.012em;
    --names-color: var(--inv-text);
    --names-shadow: none;
    --amp-font: "Fraunces", Georgia, serif;
    --amp-style: italic;
    --amp-size: .5em;
    --amp-color: var(--inv-primary);
    --kicker-size: .58rem;
    --kicker-weight: 400;
    --kicker-spacing: .46em;
    --date-size: .78rem;
    --date-weight: 400;
    --date-spacing: .44em;
    --heading-font: "Fraunces", Georgia, serif;
    --heading-style: italic;
    --heading-weight: 300;
    --heading-size: 2.05rem;
    --label-size: .62rem;
    --label-weight: 400;
    --label-spacing: .4em;
    --text-display-font: "Fraunces", Georgia, serif;
    --message-size: 1.14rem;
    --family-size: 1.12rem;
    --closing-size: 2.3rem;
    --monogram-font: "Fraunces", Georgia, serif;
    --button-radius: 999px;
    --button-spacing: .26em;

    /* iridescence: fixed pastel hues pulled towards the palette; --op-a is how strong a colour field is */
    --op-pink: color-mix(in srgb, #F6A9CF 74%, var(--inv-accent));
    --op-lilac: color-mix(in srgb, #BDA8F4 74%, var(--inv-accent));
    --op-aqua: color-mix(in srgb, #92DCEC 74%, var(--inv-accent));
    --op-mint: color-mix(in srgb, #A4EBC9 74%, var(--inv-accent));
    --op-gold: color-mix(in srgb, #F6DE9A 74%, var(--inv-accent));
    --op-a: 46%;
    --op-line: color-mix(in srgb, var(--inv-primary) 34%, transparent);
    --op-sheen: conic-gradient(from 200deg, var(--op-pink), var(--op-gold) 18%, var(--op-mint) 36%, var(--op-aqua) 54%, var(--op-lilac) 76%, var(--op-pink));
    --op-sheen-b: conic-gradient(from 310deg, var(--op-pink), var(--op-gold) 18%, var(--op-mint) 36%, var(--op-aqua) 54%, var(--op-lilac) 76%, var(--op-pink));
    --op-pearl: radial-gradient(circle at 34% 30%, #fff 0, color-mix(in srgb, var(--op-lilac) 26%, #fff) 30%, color-mix(in srgb, var(--inv-ornament) 62%, var(--op-pink)) 82%, color-mix(in srgb, var(--inv-ornament) 76%, var(--inv-primary)) 100%);
    --op-nacre: linear-gradient(125deg, var(--inv-surface) 0, color-mix(in srgb, var(--op-pink) 14%, var(--inv-surface)) 30%, color-mix(in srgb, var(--op-aqua) 14%, var(--inv-surface)) 62%, color-mix(in srgb, var(--op-gold) 12%, var(--inv-surface)) 100%);

    --hero-pad: 42px 8px 64px;
    --hero-content-pad: 80px 30px 76px;
    --hero-content-radius: 50%;
    --hero-halo:
        radial-gradient(closest-side, transparent calc(100% - 9.5px), var(--op-line) calc(100% - 8.5px), var(--op-line) calc(100% - 8px), transparent calc(100% - 7px)),
        radial-gradient(closest-side, var(--inv-surface) 0, color-mix(in srgb, var(--inv-surface) 94%, transparent) 52%, color-mix(in srgb, var(--inv-surface) 58%, transparent) 84%, color-mix(in srgb, var(--inv-surface) 30%, transparent) 100%);
    --card-radius: 30px;
    --card-pad: 50px 24px;
    --card-border: 1px solid transparent;
    --card-bg:
        radial-gradient(ellipse 90% 240px at 50% 0, color-mix(in srgb, var(--op-lilac) 16%, transparent), transparent 72%) padding-box,
        linear-gradient(var(--inv-surface), var(--inv-surface)) padding-box,
        var(--op-sheen) border-box;
    --card-shadow: 0 0 0 5px color-mix(in srgb, var(--inv-surface) 46%, transparent), 0 26px 70px -24px color-mix(in srgb, var(--inv-primary) 30%, transparent);
    --box-radius: 20px;
    --box-border: 1px solid color-mix(in srgb, var(--inv-primary) 15%, transparent);
    --box-bg: var(--op-nacre);
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-width: min(80%, 290px);
    --photo-ratio: 4 / 5;
    --photo-radius: 50%;
    --photo-inner-radius: 50%;
    --photo-pad: 5px;
    --photo-bg: var(--op-sheen);
    --photo-shadow: 0 0 0 9px color-mix(in srgb, var(--inv-surface) 70%, transparent), 0 0 0 10px var(--op-line), 0 30px 60px -30px color-mix(in srgb, var(--inv-primary) 50%, transparent);
    --monogram-radius: 50%;
    --env-bg:
        radial-gradient(ellipse 60% 34% at 22% 22%, color-mix(in srgb, var(--op-pink) var(--op-a), transparent), transparent 72%),
        radial-gradient(ellipse 60% 34% at 82% 34%, color-mix(in srgb, var(--op-aqua) var(--op-a), transparent), transparent 72%),
        radial-gradient(ellipse 70% 36% at 40% 78%, color-mix(in srgb, var(--op-lilac) var(--op-a), transparent), transparent 72%),
        var(--inv-bg);
    --env-fill: color-mix(in srgb, var(--inv-surface) 86%, var(--inv-ornament));
    --env-front: linear-gradient(160deg, var(--inv-surface), color-mix(in srgb, var(--op-pink) 20%, var(--inv-surface)) 34%, color-mix(in srgb, var(--op-aqua) 22%, var(--inv-surface)) 66%, color-mix(in srgb, var(--op-gold) 18%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--op-lilac) 26%, var(--inv-surface)), color-mix(in srgb, var(--op-mint) 12%, var(--inv-surface)) 70%, var(--inv-surface));
    --env-radius: 14px;
    --seal-fill: radial-gradient(circle at 34% 28%, var(--inv-surface), color-mix(in srgb, var(--op-lilac) 22%, var(--inv-surface)) 58%, color-mix(in srgb, var(--op-aqua) 34%, var(--inv-surface)));
    --seal-color: var(--inv-primary);
}

/* dark palettes: the same hues glow like oil on water */
.inv--opal.inv--dark {
    --op-pink: color-mix(in srgb, #F27FC0 80%, var(--inv-primary));
    --op-lilac: color-mix(in srgb, #A98BF5 80%, var(--inv-primary));
    --op-aqua: color-mix(in srgb, #5FD3EC 80%, var(--inv-primary));
    --op-mint: color-mix(in srgb, #6FE8B4 80%, var(--inv-primary));
    --op-gold: color-mix(in srgb, #F3D276 80%, var(--inv-primary));
    --op-a: 20%;
    --texture-opacity: .2;
    --card-shadow: 0 0 0 5px color-mix(in srgb, var(--inv-surface) 40%, transparent), 0 0 70px -18px color-mix(in srgb, var(--op-lilac) 40%, transparent), 0 30px 80px rgba(0, 0, 0, .5);
}

.inv--opal .inv__backdrop {
    background:
        radial-gradient(ellipse 72% 360px at 6% 90px, color-mix(in srgb, var(--op-pink) var(--op-a), transparent), transparent 72%),
        radial-gradient(ellipse 70% 380px at 100% 250px, color-mix(in srgb, var(--op-aqua) var(--op-a), transparent), transparent 72%),
        radial-gradient(ellipse 76% 380px at 0% 600px, color-mix(in srgb, var(--op-lilac) var(--op-a), transparent), transparent 72%),
        radial-gradient(ellipse 70% 340px at 96% 780px, color-mix(in srgb, var(--op-gold) var(--op-a), transparent), transparent 72%),
        radial-gradient(ellipse 80% 420px at 10% 1500px, color-mix(in srgb, var(--op-mint) var(--op-a), transparent), transparent 72%),
        radial-gradient(ellipse 80% 420px at 94% 2200px, color-mix(in srgb, var(--op-pink) var(--op-a), transparent), transparent 72%),
        radial-gradient(ellipse 80% 420px at 6% 2900px, color-mix(in srgb, var(--op-aqua) var(--op-a), transparent), transparent 72%),
        var(--inv-bg);
}

/* growth lines of the shell: very fine waves, tinted by the sheen */
.inv--opal .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/luxe-nacre.svg);
    --texture-size: 320px 200px;
    opacity: var(--texture-opacity, .55);
    --texture-fill: linear-gradient(100deg, var(--op-lilac), var(--op-aqua) 30%, var(--op-pink) 55%, var(--op-gold) 78%, var(--op-mint));
}

/* a wide hairline circle around the oval: on a phone only its top and bottom arcs show */
.inv--opal .inv-hero__frame {
    display: block;
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(150cqi, 720px);
    aspect-ratio: 1;
    translate: -50% calc(-50% - 11px);
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    border-radius: 50%;
}

/* the oval follows the texts: its disc is the content's own background, the two halos lie on its rim */
.inv--opal .inv-hero__content {
    justify-content: center;
    width: min(84cqi, 430px);
    min-height: calc(min(84cqi, 430px) * 1.2);
    border: 1px solid var(--op-line);
    box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--inv-primary) 60%, transparent);
}

.inv--opal .inv-hero__content::before,
.inv--opal .inv-hero__content::after {
    content: "";
    position: absolute;
    inset: -34px;
    z-index: -1;
    border-radius: 50%;
    background: var(--op-sheen);
    filter: blur(22px);
    opacity: .85;
    pointer-events: none;
    -webkit-mask: radial-gradient(closest-side, transparent 56%, #000 84%, transparent 100%);
    mask: radial-gradient(closest-side, transparent 56%, #000 84%, transparent 100%);
    animation: luxe-opal-sheen 17s ease-in-out infinite alternate-reverse;
}

/* the second halo carries the hues the other way round; the two cross-fade, so the sheen shifts slowly */
.inv--opal .inv-hero__content::after {
    background: var(--op-sheen-b);
    opacity: 0;
    animation-direction: alternate;
}

@keyframes luxe-opal-sheen {
    0% { opacity: 0; transform: scale(.98); }
    100% { opacity: .85; transform: scale(1.03); }
}

/* pearls: three on the top of the oval, one at the bottom */
.inv--opal .orn--hero,
.inv--opal .orn--hero-bottom {
    display: block;
    position: absolute;
    left: 50%;
    margin: 0;
    max-width: none;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--op-pearl);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--inv-primary) 34%, transparent);
    -webkit-mask: none;
    mask: none;
}

.inv--opal .orn--hero {
    top: 0;
    width: 13px;
    translate: -50% -52%;
}

.inv--opal .orn--hero::before,
.inv--opal .orn--hero::after {
    content: "";
    position: absolute;
    top: 4.6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--op-pearl);
}

.inv--opal .orn--hero::before {
    left: -15px;
    box-shadow: -11.5px 2.6px 0 -1.4px color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-surface));
}

.inv--opal .orn--hero::after {
    right: -15px;
    box-shadow: 11.5px 2.6px 0 -1.4px color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-surface));
}

.inv--opal .orn--hero-bottom {
    bottom: 0;
    width: 9px;
    translate: -50% 52%;
}

.inv--opal .inv-hero__kicker {
    margin: 0 0 16px;
    text-wrap: balance;
}

.inv--opal .inv-hero__amp {
    margin: .1em 0 .12em;
    line-height: 1;
}

/* a hairline with one pearl */
.inv--opal .orn--hero-divider,
.inv--opal .orn--divider,
.inv--opal .orn--heading {
    display: block;
    position: relative;
    height: 11px;
    aspect-ratio: auto;
    background: linear-gradient(90deg, transparent, var(--op-line) 26%, var(--op-line) 74%, transparent) center / 100% 1px no-repeat;
    -webkit-mask: none;
    mask: none;
}

.inv--opal .orn--hero-divider::before,
.inv--opal .orn--divider::before,
.inv--opal .orn--heading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--op-pearl);
    box-shadow: 0 0 0 5px var(--inv-surface), 0 1px 4px 5px color-mix(in srgb, var(--inv-primary) 16%, transparent);
}

.inv--opal .orn--hero-divider {
    --orn-width: min(44cqi, 190px);
    --orn-max: none;
    --orn-margin: 22px auto 0;
}

.inv--opal .orn--divider {
    --orn-width: 78%;
    --orn-max: 280px;
}

.inv--opal .orn--divider::before {
    width: 11px;
    height: 11px;
}

.inv--opal .orn--heading {
    --orn-width: 34%;
    --orn-max: 120px;
    --orn-margin: -10px auto 24px;
}

.inv--opal .orn--heading::before {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 4px var(--inv-surface);
}

.inv--opal .inv-hero__date {
    margin-top: 20px;
    color: var(--inv-primary);
}

.inv--opal .inv-hero__place {
    font-size: .6rem;
    letter-spacing: .3em;
}

/* loose pearls in the corners of the first screen, outside the oval */
.inv--opal .inv-hero__corner {
    display: block;
    max-width: none;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--op-pearl);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--inv-primary) 30%, transparent);
    opacity: 1;
    transform: none;
    -webkit-mask: none;
    mask: none;
}

.inv--opal .inv-hero__corner--tl { top: 9%; left: 7%; width: 15px; }
.inv--opal .inv-hero__corner--tr { top: 15%; right: 5%; width: 8px; }
.inv--opal .inv-hero__corner--bl { bottom: 17%; left: 4%; width: 9px; }
.inv--opal .inv-hero__corner--br { bottom: 10%; right: 8%; width: 19px; }

.inv--opal .inv-heading {
    letter-spacing: -.01em;
}

.inv--opal .inv-when__date {
    font-style: normal;
    font-size: 1.9rem;
}

/* countdown: four pearls */
.inv--opal .inv-countdown {
    gap: 12px;
}

.inv--opal .inv-countdown > div {
    --tint: var(--op-pink);
    display: grid;
    place-content: center;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--inv-primary) 20%, transparent);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, var(--inv-surface) 0, color-mix(in srgb, var(--tint) 12%, var(--inv-surface)) 54%, color-mix(in srgb, var(--tint) 30%, var(--inv-surface)) 100%);
    box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}

.inv--opal .inv-countdown > div:nth-child(2) { --tint: var(--op-lilac); }
.inv--opal .inv-countdown > div:nth-child(3) { --tint: var(--op-aqua); }
.inv--opal .inv-countdown > div:nth-child(4) { --tint: var(--op-gold); }

.inv--opal .inv-countdown span {
    font-size: 1.75rem;
}

.inv--opal .inv-countdown small {
    margin-top: 3px;
    font-size: .5rem;
    font-weight: 400;
    letter-spacing: .1em;
}

.inv--opal .inv-program__index {
    border: 0;
    background: var(--op-pearl);
    box-shadow: 0 0 0 5px var(--inv-surface), 0 2px 6px 4px color-mix(in srgb, var(--inv-primary) 14%, transparent);
    width: 14px;
    height: 14px;
    top: -7px;
    margin-left: -7px;
    font-size: 0;
}

.inv--opal .inv-program__time {
    font-size: 2rem;
}

.inv--opal .inv-closing__line {
    font-size: 1.2rem;
}

.inv--opal .inv-monogram {
    border-color: var(--op-line);
    background: var(--seal-fill);
    box-shadow: 0 0 0 6px var(--inv-surface), 0 0 0 7px color-mix(in srgb, var(--inv-ornament) 50%, transparent), 0 12px 26px -12px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    font-style: italic;
}

.inv--opal .inv-envelope__seal {
    box-shadow: inset 0 0 0 1px var(--op-line), 0 6px 16px color-mix(in srgb, var(--inv-primary) 36%, transparent);
    font-style: italic;
    font-weight: 300;
}

.inv--opal .rsvp-field textarea {
    border-radius: 18px;
}

.inv--opal .inv-envelope__flap {
    border-radius: 14px 14px 0 0;
}

.inv--opal .inv-envelope__letter {
    font-size: 1.5rem;
}