/* Collection "elegant": classic, refined weddings. Contract: docs/invitation-templates.md.
   Ornaments: ../../img/invitations/ornaments/, textures: ../../img/invitations/textures/. */

/* ---------- Mătase: champagne silk, silk bow, satin ribbon dividers, arch photo ---------- */

.inv--matase {
    --divider-rule-display: none;
    --satin: linear-gradient(90deg, var(--inv-ornament) 0%, #fff 22%, var(--inv-ornament) 45%, #fff 68%, var(--inv-ornament) 100%);
}

.inv--matase .inv__backdrop {
    background:
        radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--inv-ornament) 32%, transparent), transparent 55%),
        radial-gradient(ellipse at 96% 100%, color-mix(in srgb, var(--inv-ornament) 28%, transparent), transparent 55%),
        repeating-linear-gradient(115deg, transparent 0 40px, rgba(255, 255, 255, .38) 62px, transparent 92px, rgba(0, 0, 0, .035) 132px, transparent 172px),
        linear-gradient(135deg, var(--inv-accent), var(--inv-bg) 42%, var(--inv-surface) 58%, var(--inv-accent));
}

.inv--matase .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-silk-bow.svg);
    --orn-ratio: 240 / 170;
    --orn-width: 44%;
    --orn-max: 190px;
    --orn-fill: linear-gradient(135deg, #fff, var(--inv-ornament) 50%, color-mix(in srgb, var(--inv-ornament) 60%, #000));
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12));
}

.inv--matase .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/ribbon.svg);
    --orn-ratio: 320 / 44;
    --orn-fill: var(--satin);
}

.inv--matase .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/elegant-silk-corner.svg);
    --corner-size: 30%;
    --corner-max: 150px;
    --corner-inset: 8px;
    --corner-opacity: .85;
    --corner-fill: linear-gradient(135deg, color-mix(in srgb, var(--inv-ornament) 70%, #000), var(--inv-ornament) 30%, #fff 55%, var(--inv-ornament) 80%);
}

/* Satin ribbons draped over the top corners of the first screen. */
.inv--matase .inv-hero__corner--tl,
.inv--matase .inv-hero__corner--tr {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/elegant-silk-corner.svg);
    --hero-corner-size: 34%;
    --hero-corner-inset: 14px;
    --hero-corner-opacity: .7;
    --hero-corner-fill: linear-gradient(135deg, color-mix(in srgb, var(--inv-ornament) 70%, #000), var(--inv-ornament) 30%, #fff 55%, var(--inv-ornament) 80%);
}

/* ---------- Clasic: ivory card with a double gold frame, script names, filigree ---------- */

.inv--clasic {
    --f-names: "Great Vibes", "Cormorant Garamond", cursive;
    --names-weight: 400;
    --names-size: clamp(3.2rem, 17cqi, 6.6rem);
    --names-line: 1.05;
    --amp-style: normal;
    --card-radius: 3px;
    --card-pad: 70px 26px 56px;
    --photo-radius: 50%;
    --divider-rule-display: none;
    --card-shadow:
        inset 0 0 0 10px var(--inv-surface),
        inset 0 0 0 11px var(--inv-ornament),
        inset 0 0 0 15px var(--inv-surface),
        inset 0 0 0 16px color-mix(in srgb, var(--inv-ornament) 55%, transparent),
        0 20px 60px rgba(0, 0, 0, .12);
}

.inv--clasic .inv__backdrop {
    background:
        radial-gradient(circle at 50% 0%, var(--inv-surface), transparent 60%),
        var(--inv-bg);
}

.inv--clasic .orn--hero,
.inv--clasic .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-filigree-scroll.svg);
    --orn-ratio: 320 / 60;
    --orn-width: 76%;
    --orn-max: 280px;
}

.inv--clasic .orn--hero-bottom {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/filigree.svg);
    --orn-ratio: 260 / 34;
    --orn-width: 48%;
    --orn-opacity: .8;
}

/* Filigree in the corners of the first screen and inside the card's double frame. */
.inv--clasic .inv-hero__corner {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/elegant-filigree-corner.svg);
    --hero-corner-size: 26%;
    --hero-corner-inset: 20px;
    --hero-corner-opacity: .75;
}

.inv--clasic .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/elegant-filigree-corner.svg);
    --corner-size: 22%;
    --corner-max: 110px;
    --corner-inset: 20px;
    --corner-opacity: .8;
}

/* ---------- Dantelă: scalloped lace trims on the card, lace doily behind the names, blush ivory ---------- */

.inv--dantela {
    --f-names: "Alex Brush", "Cormorant Garamond", cursive;
    --names-weight: 400;
    --names-size: clamp(3.1rem, 16cqi, 6.2rem);
    --names-line: 1.04;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .4em;
    --kicker-font: "Cormorant Garamond", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-size: 1.2rem;
    --kicker-spacing: .04em;
    --kicker-weight: 400;
    --date-font: "Cormorant Garamond", Georgia, serif;
    --date-size: 1.3rem;
    --date-weight: 500;
    --date-spacing: .1em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Alex Brush", cursive;
    --heading-size: 2.7rem;
    --heading-weight: 400;
    --closing-size: 2.8rem;
    --monogram-font: "Alex Brush", cursive;
    --divider-rule-display: none;
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-pad: 58px 24px 62px;
    --card-margin-top: 34px;
    --card-shadow: 0 26px 50px -30px rgba(90, 55, 50, .35);
    --box-bg: var(--inv-surface);
    --box-border: 1px dashed color-mix(in srgb, var(--inv-ornament) 80%, transparent);
    --box-radius: 16px;
    --box-shadow: none;
    --photo-width: min(84%, 300px);
    --photo-radius: 0;
    --photo-shadow: none;
    --lace: url(../../img/invitations/ornaments/elegant-lace-edge.svg);
}

.inv--dantela .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 45% at 50% 0%, var(--inv-surface), transparent 70%),
        linear-gradient(180deg, var(--inv-bg), var(--inv-accent) 55%, var(--inv-bg));
}

.inv--dantela .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/elegant-lace-net.svg);
    --texture-size: 34px;
    --texture-opacity: .1;
}

/* The doily: a lace medallion centred behind the names. */
.inv--dantela .inv-hero__frame {
    display: block;
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(98cqi, 540px);
    aspect-ratio: 1;
    translate: -50% -50%;
    border: 0;
    background: color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-bg));
    opacity: .3;
    -webkit-mask: url(../../img/invitations/ornaments/elegant-doily.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/elegant-doily.svg) center / contain no-repeat;
}

.inv--dantela .inv-hero__content {
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 82%, transparent) 55%, transparent);
}

/* Lace trims: the tile repeats along the top edge (scallops up) and the bottom edge (scallops down). */
.inv--dantela .inv-card::before,
.inv--dantela .inv-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    background: var(--inv-surface);
    -webkit-mask: var(--lace) 0 0 / 60px 30px round no-repeat;
    mask: var(--lace) 0 0 / 60px 30px round no-repeat;
    pointer-events: none;
}

.inv--dantela .inv-card::before { bottom: calc(100% - 2px); }
.inv--dantela .inv-card::after { top: calc(100% - 2px); transform: scaleY(-1); }

.inv--dantela .orn--hero {
    display: block;
    --orn-image: var(--lace);
    --orn-ratio: 6;
    --orn-width: 132px;
    -webkit-mask: var(--lace) 0 0 / 44px 22px round no-repeat;
    mask: var(--lace) 0 0 / 44px 22px round no-repeat;
}

.inv--dantela .orn--divider {
    display: block;
    --orn-ratio: 11;
    --orn-width: 88%;
    --orn-max: 286px;
    --orn-transform: scaleY(-1);
    -webkit-mask: var(--lace) 0 0 / 52px 26px round no-repeat;
    mask: var(--lace) 0 0 / 52px 26px round no-repeat;
}

.inv--dantela .orn--heading {
    display: block;
    --orn-ratio: 6;
    --orn-width: 96px;
    -webkit-mask: var(--lace) 0 0 / 32px 16px round no-repeat;
    mask: var(--lace) 0 0 / 32px 16px round no-repeat;
}

/* Scalloped cameo photo with eyelet holes, on a blush lace mat. */
.inv--dantela .inv-photo::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--photo-width) + 34px);
    aspect-ratio: 3 / 4;
    translate: -50% -50%;
    background: var(--inv-ornament);
    opacity: .55;
    -webkit-mask: url(../../img/invitations/ornaments/elegant-scallop-oval.svg) center / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/elegant-scallop-oval.svg) center / 100% 100% no-repeat;
}

.inv--dantela .inv-photo__frame {
    position: relative;
    -webkit-mask: url(../../img/invitations/ornaments/elegant-scallop-oval.svg) center / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/elegant-scallop-oval.svg) center / 100% 100% no-repeat;
}

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

.inv--dantela .inv-monogram {
    border-style: dashed;
    font-size: 1.5rem;
}

/* ---------- Perle: pearl-strand frame and dividers, pearly sheen, fine serif names ---------- */

.inv--perle {
    --f-names: "Gilda Display", "Cormorant Garamond", serif;
    --names-weight: 400;
    --names-size: clamp(2.7rem, 13.5cqi, 5.4rem);
    --names-line: 1.08;
    --names-spacing: .01em;
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: .9em;
    --amp-color: var(--inv-muted);
    --date-font: "Gilda Display", serif;
    --date-size: .95rem;
    --date-spacing: .36em;
    --heading-font: "Cormorant Garamond", Georgia, serif;
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 2.2rem;
    --closing-font: "Gilda Display", serif;
    --closing-size: 2rem;
    --monogram-font: "Gilda Display", serif;
    --divider-rule-display: none;
    --card-radius: 26px;
    --card-bg: linear-gradient(170deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 30%, var(--inv-surface)) 60%, var(--inv-surface));
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 45%, transparent);
    --card-margin-top: 24px;
    --box-bg: linear-gradient(140deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface)));
    --box-radius: 16px;
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 40%, transparent);
    --photo-radius: 50%;
    --photo-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 9px color-mix(in srgb, var(--inv-ornament) 70%, transparent), 0 26px 44px -24px rgba(0, 0, 0, .45);
    --pearl: url(../../img/invitations/ornaments/elegant-pearl.svg);
    --sheen: rgba(255, 255, 255, .42);
}

.inv--perle.inv--dark {
    --sheen: rgba(255, 255, 255, .07);
}

/* Nacre: soft pink and blue lights over the palette background. */
.inv--perle .inv__backdrop {
    background:
        radial-gradient(ellipse 70% 40% at 12% 4%, var(--sheen), transparent 70%),
        radial-gradient(ellipse 60% 38% at 92% 26%, color-mix(in srgb, #F3D9E2 42%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 40% at 6% 62%, color-mix(in srgb, #D9E6F0 46%, transparent), transparent 70%),
        linear-gradient(165deg, var(--inv-bg), var(--inv-accent) 50%, var(--inv-bg));
}

.inv--perle.inv--dark .inv__backdrop {
    background:
        radial-gradient(ellipse 70% 45% at 50% 18%, color-mix(in srgb, var(--inv-ornament) 16%, transparent), transparent 70%),
        linear-gradient(165deg, var(--inv-bg), var(--inv-surface) 50%, var(--inv-bg));
}

/* Pearl frame around the hero: four rows of pearls, evenly spaced (round). */
.inv--perle .inv-hero__frame {
    display: block;
    inset: 30px 4px 58px;
    border: 0;
    background:
        var(--pearl) 0 0 / 13px 13px round no-repeat,
        var(--pearl) 0 100% / 13px 13px round no-repeat,
        var(--pearl) 0 0 / 13px 13px no-repeat round,
        var(--pearl) 100% 0 / 13px 13px no-repeat round;
}

.inv--perle .inv-hero__frame::after {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    border-radius: 999px 999px 0 0;
}

.inv--perle .orn--hero {
    display: block;
    --orn-ratio: 320 / 132;
    --orn-width: 78%;
    --orn-max: 300px;
    --orn-margin: -4px auto 0;
    -webkit-mask: none;
    mask: none;
    background: url(../../img/invitations/ornaments/elegant-pearl-swag.svg) center / contain no-repeat;
}

.inv--perle .orn--hero-divider,
.inv--perle .orn--divider {
    display: block;
    --orn-ratio: 8;
    -webkit-mask: none;
    mask: none;
    background: url(../../img/invitations/ornaments/elegant-pearl-strand.svg) center / contain no-repeat;
}

.inv--perle .orn--hero-divider { --orn-width: 74%; --orn-max: 280px; }

.inv--perle .orn--heading {
    display: block;
    --orn-ratio: 5;
    --orn-width: 62px;
    -webkit-mask: none;
    mask: none;
    background: var(--pearl) 0 50% / 12px 12px space no-repeat;
}

/* A slow sheen of light passing over the first screen. */
.inv--perle .inv-hero {
    overflow: hidden;
}

.inv--perle .inv-hero::after {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -70%;
    width: 60%;
    background: linear-gradient(100deg, transparent, var(--sheen) 50%, transparent);
    pointer-events: none;
    animation: elegant-sheen 16s ease-in-out infinite;
}

@keyframes elegant-sheen {
    0%, 55% { transform: translateX(0) skewX(-12deg); opacity: 0; }
    60% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translateX(380%) skewX(-12deg); opacity: 0; }
}

.inv--perle .inv-program__index {
    border: 0;
    background: radial-gradient(circle at 36% 30%, #fff, #F2ECE5 45%, #D6CBBE 85%, #B9AD9F);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .18);
    color: #4A423B;
}

.inv--perle .inv-monogram {
    box-shadow: inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px var(--inv-line), 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 30%, transparent);
}

/* ---------- Regal: crest with crown and laurels, damask, gold script names ---------- */

.inv--regal {
    --f-display: "Cinzel", "Cormorant Garamond", serif;
    --f-names: "Allura", "Cormorant Garamond", cursive;
    --names-weight: 400;
    --names-size: clamp(3.2rem, 16.5cqi, 6.4rem);
    --names-line: 1.02;
    --names-shadow: none;
    --amp-font: "Cinzel", serif;
    --amp-style: normal;
    --amp-size: .3em;
    --kicker-font: "Cinzel", serif;
    --kicker-size: .72rem;
    --kicker-weight: 500;
    --kicker-spacing: .38em;
    --date-font: "Cinzel", serif;
    --date-size: .9rem;
    --date-spacing: .3em;
    --heading-font: "Cinzel", serif;
    --heading-size: 1.3rem;
    --heading-weight: 500;
    --heading-transform: uppercase;
    --heading-spacing: .2em;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --closing-size: 2.9rem;
    --monogram-font: "Cinzel", serif;
    --monogram-radius: 6px 6px 50% 50% / 6px 6px 42% 42%;
    --divider-rule-display: none;
    --card-bg: var(--inv-surface);
    --card-radius: 2px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 60%, transparent);
    --card-margin-top: 44px;
    --card-pad: 62px 22px 48px;
    --box-bg: color-mix(in srgb, var(--inv-bg) 35%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 40%, transparent);
    --box-radius: 0;
    --photo-radius: 999px 999px 0 0;
    --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) 50%, transparent), 0 26px 50px -24px rgba(0, 0, 0, .6);
    --gold: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 55%, #fff), var(--inv-ornament) 40%, color-mix(in srgb, var(--inv-ornament) 70%, #000) 72%, var(--inv-ornament));
}

.inv--regal .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 50% at 50% 22%, color-mix(in srgb, var(--inv-primary) 13%, transparent), transparent 70%),
        radial-gradient(ellipse 120% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, .18)),
        var(--inv-bg);
}

.inv--regal .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/elegant-damask.svg);
    --texture-size: 76px;
    --texture-opacity: .07;
}

.inv--regal .inv-hero__frame {
    display: block;
    inset: 22px 2px 54px;
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px color-mix(in srgb, var(--inv-ornament) 35%, transparent);
}

.inv--regal .inv-hero__corner {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/elegant-filigree-corner.svg);
    --hero-corner-size: 24%;
    --hero-corner-fill: var(--gold);
    --hero-corner-opacity: .8;
}

.inv--regal .inv-hero__corner--tl,
.inv--regal .inv-hero__corner--tr { top: 30px; }
.inv--regal .inv-hero__corner--bl,
.inv--regal .inv-hero__corner--br { bottom: 62px; }
.inv--regal .inv-hero__corner--tl,
.inv--regal .inv-hero__corner--bl { left: 10px; }
.inv--regal .inv-hero__corner--tr,
.inv--regal .inv-hero__corner--br { right: 10px; }

.inv--regal .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-crest.svg);
    --orn-ratio: 260 / 270;
    --orn-width: 50%;
    --orn-max: 200px;
    --orn-fill: var(--gold);
}

.inv--regal .inv-hero__name {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 72%, #fff) 12%, var(--inv-primary) 50%, color-mix(in srgb, var(--inv-primary) 80%, #000) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 0 .08em .12em;
}

.inv--regal .inv-hero__amp {
    color: var(--inv-primary);
    letter-spacing: .1em;
    margin: .3em 0 .2em;
}

.inv--regal .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-fleur-divider.svg);
    --orn-ratio: 320 / 48;
    --orn-width: 76%;
    --orn-max: 280px;
    --orn-fill: var(--gold);
}

.inv--regal .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-crown.svg);
    --orn-ratio: 240 / 176;
    --orn-width: 88px;
    --orn-margin: -104px auto 30px;
    --orn-fill: var(--gold);
}

.inv--regal .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-laurel-pair.svg);
    --orn-ratio: 320 / 110;
    --orn-width: 56%;
    --orn-max: 210px;
    --orn-fill: var(--gold);
}

.inv--regal .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-laurel-sprig.svg);
    --orn-ratio: 5;
    --orn-width: 132px;
    --orn-margin: -10px auto 24px;
    --orn-fill: var(--gold);
}

.inv--regal .inv-program__index {
    border-color: var(--inv-primary);
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    font-family: "Cinzel", serif;
}

.inv--regal .inv-monogram {
    width: 64px;
    height: 76px;
    border-color: var(--inv-ornament);
}

/* ---------- Monogramă: the initials, huge, in a laurel wreath; everything else quiet ---------- */

.inv--monograma {
    --f-display: "Bodoni Moda", "Cormorant Garamond", serif;
    --f-names: "Bodoni Moda", "Cormorant Garamond", serif;
    --names-direction: row;
    --names-gap: 0;
    --names-weight: 400;
    --names-size: clamp(4.4rem, 25cqi, 8.6rem);
    --names-line: 1;
    --names-shadow: none;
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: .52em;
    --amp-color: var(--inv-muted);
    --kicker-spacing: .5em;
    --kicker-size: .66rem;
    --date-font: "Bodoni Moda", serif;
    --date-size: 1.2rem;
    --date-spacing: .08em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Bodoni Moda", serif;
    --heading-size: 1.02rem;
    --heading-weight: 500;
    --heading-transform: uppercase;
    --heading-spacing: .34em;
    --text-display-font: "Bodoni Moda", serif;
    --message-size: 1.12rem;
    --family-size: 1.08rem;
    --closing-font: "Bodoni Moda", serif;
    --closing-size: 1.7rem;
    --monogram-font: "Bodoni Moda", serif;
    --hero-halo: none;
    --divider-rule-display: none;
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-shadow: none;
    --card-border: 1px solid var(--inv-line);
    --card-pad: 50px 24px;
    --box-bg: transparent;
    --box-border: 1px solid var(--inv-line);
    --box-radius: 0;
    --box-shadow: none;
    --photo-radius: 0;
    --photo-pad: 10px;
    --photo-bg: var(--inv-surface);
    --photo-shadow: 0 0 0 1px var(--inv-line);
    --wreath: url(../../img/invitations/ornaments/elegant-laurel-wreath.svg);
    --wreath-fill: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 65%, #fff), var(--inv-ornament) 45%, color-mix(in srgb, var(--inv-ornament) 72%, #000));
}

.inv--monograma .inv__backdrop {
    background:
        radial-gradient(circle at 50% 34%, var(--inv-surface), transparent 58%),
        var(--inv-bg);
}

/* The names become their initials: each name is shrunk to nothing except its first letter. The full names stay in
   the heading for screen readers and appear again in the closing. */
.inv--monograma .inv-hero__names {
    position: relative;
    width: min(84cqi, 340px);
    aspect-ratio: 400 / 412;
    margin: 4px auto 0;
    padding-bottom: 7%;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
}

.inv--monograma .inv-hero__names::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--wreath-fill);
    -webkit-mask: var(--wreath) center / contain no-repeat;
    mask: var(--wreath) center / contain no-repeat;
}

.inv--monograma .inv-hero__name {
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
}

.inv--monograma .inv-hero__name::first-letter {
    font-size: clamp(4.4rem, 25cqi, 8.6rem);
    line-height: 1;
}

.inv--monograma .inv-hero__amp {
    margin: .3em -.02em 0;
    line-height: 1;
}

.inv--monograma .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    background: var(--inv-ornament);
    --orn-width: 36px;
    --orn-ratio: 36;
    --orn-margin: 14px auto 0;
}

.inv--monograma .orn--divider {
    display: block;
    --orn-image: var(--wreath);
    --orn-ratio: 400 / 412;
    --orn-width: 46px;
    --orn-fill: var(--wreath-fill);
}

.inv--monograma .orn--heading {
    display: block;
    -webkit-mask: none;
    mask: none;
    background: var(--inv-ornament);
    --orn-width: 28px;
    --orn-ratio: 28;
    --orn-margin: -8px auto 24px;
}

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

.inv--monograma .inv-program__index {
    border-radius: 0;
    font-family: "Bodoni Moda", serif;
}

.inv--monograma .inv-monogram {
    position: relative;
    width: 104px;
    height: 104px;
    border: 0;
    box-shadow: none;
    font-size: 1.35rem;
}

.inv--monograma .inv-monogram::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wreath-fill);
    -webkit-mask: var(--wreath) center / contain no-repeat;
    mask: var(--wreath) center / contain no-repeat;
}

/* ---------- Sigiliu: a letter on deckle-edged paper, a wax seal in the middle, handwritten names ---------- */

.inv--sigiliu {
    --f-display: "EB Garamond", Georgia, serif;
    --f-names: "Petit Formal Script", "EB Garamond", cursive;
    --names-weight: 400;
    --names-size: clamp(2.3rem, 11.5cqi, 4.6rem);
    --names-line: 1.3;
    --names-shadow: none;
    --amp-font: "EB Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .5em;
    --amp-color: var(--inv-muted);
    --kicker-font: "EB Garamond", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-size: 1.15rem;
    --kicker-spacing: .03em;
    --kicker-weight: 400;
    --kicker-color: var(--inv-muted);
    --date-font: "EB Garamond", Georgia, serif;
    --date-size: 1.2rem;
    --date-spacing: .06em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Petit Formal Script", cursive;
    --heading-size: 1.75rem;
    --heading-weight: 400;
    --text-display-font: "EB Garamond", Georgia, serif;
    --message-size: 1.3rem;
    --closing-size: 1.9rem;
    --hero-halo: none;
    --divider-rule-display: none;
    --card-bg: transparent;
    --card-shadow: none;
    --card-radius: 0;
    --card-pad: 54px 26px 58px;
    --card-margin-top: 10px;
    --box-bg: transparent;
    --box-border: 0 solid transparent;
    --box-shadow: none;
    --index-display: none;
    --photo-width: min(80%, 290px);
    --photo-ratio: 4 / 5;
    --photo-radius: 0;
    --photo-pad: 10px 10px 36px;
    --photo-bg: #fff;
    --photo-rotate: -2.5deg;
    --photo-shadow: 0 16px 26px -14px rgba(40, 25, 10, .45);
    --deckle:
        url(../../img/invitations/ornaments/elegant-deckle-h.svg) 0 0 / 240px 14px repeat-x,
        url(../../img/invitations/ornaments/elegant-deckle-h.svg) 0 100% / 240px 14px repeat-x,
        url(../../img/invitations/ornaments/elegant-deckle-v.svg) 0 0 / 14px 240px repeat-y,
        url(../../img/invitations/ornaments/elegant-deckle-v.svg) 100% 0 / 14px 240px repeat-y,
        linear-gradient(#000, #000) 50% 50% / calc(100% - 12px) calc(100% - 12px) no-repeat;
    --paper:
        linear-gradient(180deg, transparent 33.2%, rgba(90, 60, 30, .05) 33.4%, rgba(255, 255, 255, .5) 33.7%, transparent 34.4%,
            transparent 66.4%, rgba(90, 60, 30, .05) 66.6%, rgba(255, 255, 255, .5) 66.9%, transparent 67.6%),
        radial-gradient(ellipse at 50% 42%, var(--inv-surface) 58%, color-mix(in srgb, var(--inv-surface) 86%, var(--inv-ornament)));
    --wax: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--inv-primary) 62%, #fff), var(--inv-primary) 52%, color-mix(in srgb, var(--inv-primary) 62%, #000));
}

/* Linen underneath the letter. */
.inv--sigiliu .inv__backdrop {
    background:
        radial-gradient(ellipse 100% 70% at 50% 30%, transparent 50%, rgba(60, 40, 20, .12)),
        repeating-linear-gradient(0deg, rgba(80, 55, 30, .035) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(80, 55, 30, .03) 0 1px, transparent 1px 5px),
        var(--inv-bg);
}

/* The first page of the letter. */
.inv--sigiliu .inv-hero__frame {
    display: block;
    inset: 30px 0 48px;
    border: 0;
    background: var(--paper);
    -webkit-mask: var(--deckle);
    mask: var(--deckle);
}

.inv--sigiliu .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-wax-seal.svg);
    --orn-ratio: 1;
    --orn-width: 104px;
    --orn-max: 104px;
    --orn-margin: 20px auto 0;
    --orn-fill: var(--wax);
    rotate: -8deg;
}

.inv--sigiliu .orn--hero-bottom {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/filigree.svg);
    --orn-ratio: 260 / 34;
    --orn-width: 46%;
    --orn-opacity: .8;
}

/* The second page: paper and a sheet beneath it, both deckle-edged. */
.inv--sigiliu .inv-card {
    isolation: isolate;
}

.inv--sigiliu .inv-card::before,
.inv--sigiliu .inv-card::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--deckle);
    mask: var(--deckle);
    pointer-events: none;
}

.inv--sigiliu .inv-card::before {
    z-index: -1;
    background: var(--paper);
}

.inv--sigiliu .inv-card::after {
    z-index: -2;
    background: color-mix(in srgb, var(--inv-surface) 80%, var(--inv-ornament));
    transform: rotate(-1.4deg) translate(4px, 8px);
}

.inv--sigiliu .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/filigree.svg);
    --orn-ratio: 260 / 34;
    --orn-width: 62%;
    --orn-max: 240px;
}

.inv--sigiliu .inv-when__date {
    font-size: 1.8rem;
    line-height: 1.35;
}

.inv--sigiliu .inv-program__list {
    gap: 0;
}

.inv--sigiliu .inv-program__item {
    padding: 22px 8px;
    border-bottom: 1px solid var(--inv-line);
}

.inv--sigiliu .inv-program__item:last-child {
    border-bottom: 0;
}

.inv--sigiliu .inv-countdown > div {
    border-top: 1px solid var(--inv-line);
    border-bottom: 1px solid var(--inv-line);
}

.inv--sigiliu .inv-family__item {
    border-top: 1px solid var(--inv-line);
}

/* The closing monogram and the envelope seal are pressed in wax too. */
.inv--sigiliu .inv-monogram,
.inv--sigiliu .inv-envelope__seal {
    border: 0;
    box-shadow: none;
    background: var(--wax);
    color: var(--inv-on-primary);
    -webkit-mask: url(../../img/invitations/ornaments/elegant-wax-blank.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/elegant-wax-blank.svg) center / contain no-repeat;
}

.inv--sigiliu .inv-monogram {
    width: 88px;
    height: 88px;
    font: 400 1.05rem/1 "EB Garamond", Georgia, serif;
    rotate: 6deg;
}

.inv--sigiliu .inv-envelope__seal {
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
}

/* ---------- Voal: layers of tulle, veils that sway slowly, airy blush ---------- */

.inv--voal {
    --f-names: "Pinyon Script", "Cormorant Garamond", cursive;
    --names-weight: 400;
    --names-size: clamp(3rem, 15cqi, 6rem);
    --names-line: 1.12;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .36em;
    --amp-color: var(--inv-muted);
    --kicker-font: "Cormorant Garamond", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-size: 1.15rem;
    --kicker-spacing: .06em;
    --kicker-weight: 400;
    --date-font: "Cormorant Garamond", Georgia, serif;
    --date-size: 1.05rem;
    --date-weight: 500;
    --date-spacing: .32em;
    --heading-font: "Pinyon Script", cursive;
    --heading-size: 2.5rem;
    --heading-weight: 400;
    --closing-size: 2.7rem;
    --monogram-font: "Pinyon Script", cursive;
    --divider-rule-display: none;
    --card-bg: color-mix(in srgb, var(--inv-surface) 58%, transparent);
    --card-radius: 180px 180px 26px 26px;
    --card-shadow: 0 30px 60px -34px rgba(90, 40, 55, .32);
    --card-pad: 70px 24px 50px;
    --card-margin-top: 20px;
    --box-bg: color-mix(in srgb, var(--inv-surface) 68%, transparent);
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    --box-radius: 20px;
    --box-shadow: none;
    --photo-shadow: 0 0 0 8px color-mix(in srgb, var(--inv-surface) 70%, transparent), 0 0 0 18px color-mix(in srgb, var(--inv-surface) 38%, transparent), 0 26px 50px -24px rgba(90, 40, 55, .4);
    --tulle-fill: linear-gradient(90deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 40%, #fff) 50%, var(--inv-ornament));
}

.inv--voal .inv__backdrop {
    background:
        radial-gradient(ellipse 60% 40% at 0% 55%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 40% at 100% 80%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 58%, var(--inv-bg)), var(--inv-bg) 900px, var(--inv-accent));
}

.inv--voal .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/elegant-tulle.svg);
    --texture-size: 14px;
    --texture-opacity: .16;
}

/* Two veils hanging from the top corners, drawn in translucent white, swaying very slowly. */
.inv--voal .inv__deco {
    display: block;
    --deco-image: url(../../img/invitations/ornaments/elegant-veil.svg);
    --deco-fill: #fff;
    --deco-opacity: .92;
    --deco-a-ratio: 300 / 520;
    --deco-b-ratio: 300 / 520;
    --deco-a-width: min(58%, 380px);
    --deco-b-width: min(52%, 340px);
    --deco-a-top: -40px;
    --deco-a-left: -16%;
    --deco-b-top: -30px;
    --deco-b-right: -16%;
    --deco-b-bottom: auto;
    transform-origin: 50% 0;
    animation: elegant-veil-sway 18s ease-in-out infinite;
}

.inv--voal .inv__deco--a { --veil-turn: 9deg; --veil-flip: 1; }
.inv--voal .inv__deco--b { --veil-turn: -9deg; --veil-flip: -1; animation-delay: -9s; }

@keyframes elegant-veil-sway {
    0%, 100% { transform: scaleX(var(--veil-flip, 1)) rotate(var(--veil-turn, 0deg)); }
    50% { transform: scaleX(var(--veil-flip, 1)) rotate(calc(var(--veil-turn, 0deg) * .6)) translateY(6px); }
}

/* Layers of tulle behind the hero texts: an arch and two looser, fainter ones around it. */
.inv--voal .inv-hero__frame {
    display: block;
    inset: 70px 30px 96px;
    border: 0;
    border-radius: 999px 999px 30px 30px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 46%, transparent), color-mix(in srgb, var(--inv-surface) 20%, transparent));
    box-shadow:
        0 0 0 12px color-mix(in srgb, var(--inv-surface) 18%, transparent),
        0 0 0 26px color-mix(in srgb, var(--inv-surface) 10%, transparent);
}

.inv--voal .inv-hero__content {
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-surface) 70%, transparent) 40%, transparent);
}

.inv--voal .orn--hero-divider,
.inv--voal .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-tulle-wave.svg);
    --orn-ratio: 320 / 44;
    --orn-fill: var(--tulle-fill);
}

.inv--voal .orn--hero-divider { --orn-width: 70%; --orn-max: 260px; }
.inv--voal .orn--divider { --orn-width: 80%; --orn-max: 300px; }

.inv--voal .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-tulle-wave.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 120px;
    --orn-fill: var(--tulle-fill);
}

/* The card is a stack of tulle sheets: two translucent layers, slightly turned, behind the text. */
.inv--voal .inv-card {
    isolation: isolate;
}

.inv--voal .inv-card::before,
.inv--voal .inv-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: color-mix(in srgb, var(--inv-surface) 42%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 55%, transparent);
    pointer-events: none;
}

.inv--voal .inv-card::before { transform: rotate(-2.2deg) translate(-6px, 4px); }
.inv--voal .inv-card::after { transform: rotate(1.8deg) translate(6px, 10px); }

.inv--voal .inv-monogram {
    font-size: 1.6rem;
    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--inv-surface) 60%, transparent), inset 0 0 0 5px var(--inv-line), 0 0 0 8px color-mix(in srgb, var(--inv-surface) 45%, transparent);
}

/* ================= Fundă: a paper card tied with a satin ribbon and a large drawn bow, fine script names ================= */

.inv--funda {
    --f-names: "Italianno", "Cormorant Garamond", cursive;
    --names-weight: 400;
    --names-size: clamp(3.8rem, 20cqi, 7.2rem);
    --names-line: .9;
    --names-direction: row;
    --names-gap: 0 .2em;
    --names-shadow: none;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .4em;
    --amp-color: var(--inv-muted);
    --kicker-font: "Cormorant Garamond", Georgia, serif;
    --kicker-size: .8rem;
    --kicker-weight: 600;
    --kicker-spacing: .26em;
    --date-font: "Cormorant Garamond", Georgia, serif;
    --date-size: 1.1rem;
    --date-weight: 400;
    --date-spacing: .3em;
    --heading-font: "Italianno", cursive;
    --heading-size: 3.1rem;
    --heading-weight: 400;
    --closing-size: 3.3rem;
    --hero-halo: none;
    --hero-pad: 44px 8px 86px;
    --hero-content-pad: 0 14px;
    --divider-rule-display: none;
    --card-bg: var(--inv-surface);
    --card-radius: 4px;
    --card-shadow: 0 26px 50px -34px color-mix(in srgb, var(--inv-primary) 70%, transparent);
    --card-pad: 80px 26px 56px;
    --card-margin-top: 58px;
    --box-bg: color-mix(in srgb, var(--inv-bg) 55%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 45%, transparent);
    --box-radius: 3px;
    --box-shadow: none;
    --photo-width: min(84%, 300px);
    --photo-ratio: 4 / 5;
    --photo-radius: 3px;
    --photo-pad: 9px;
    --photo-bg: var(--inv-surface);
    --photo-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-ornament) 60%, transparent), 0 22px 34px -24px color-mix(in srgb, var(--inv-primary) 80%, transparent);
    --ribbon: color-mix(in srgb, var(--inv-ornament) 88%, var(--inv-primary));
    --satin: linear-gradient(165deg, color-mix(in srgb, var(--ribbon) 60%, #fff), var(--ribbon) 46%, color-mix(in srgb, var(--ribbon) 76%, var(--inv-primary)));
    --satin-shade: color-mix(in srgb, var(--inv-primary) 78%, var(--inv-ornament));
    --satin-band:
        linear-gradient(90deg, rgba(0, 0, 0, .16), transparent 9px, transparent calc(100% - 9px), rgba(0, 0, 0, .16)),
        linear-gradient(180deg, color-mix(in srgb, var(--ribbon) 82%, #fff), color-mix(in srgb, var(--ribbon) 52%, #fff) 30%, var(--ribbon) 62%, color-mix(in srgb, var(--ribbon) 80%, var(--inv-primary)));
    --bow: url(../../img/invitations/ornaments/elegant-bow-satin.svg);
    --bow-shade: url(../../img/invitations/ornaments/elegant-bow-satin-shade.svg);
    --bow-w: min(50cqi, 210px);
}

/* Ticking stripes under the cards. */
.inv--funda .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 520px at 50% 0, color-mix(in srgb, var(--inv-surface) 70%, transparent), transparent),
        repeating-linear-gradient(90deg, transparent 0 12px, color-mix(in srgb, var(--inv-ornament) 13%, transparent) 12px 24px),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 60%, var(--inv-bg)));
}

/* The first screen is a card of its own, with a hairline inside the edge. */
.inv--funda .inv-hero__frame {
    display: block;
    inset: 22px 0 62px;
    border: 0;
    border-radius: 4px;
    background: var(--inv-surface);
    box-shadow: var(--card-shadow);
}

.inv--funda .inv-hero__frame::after,
.inv--funda .inv-card::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 60%, transparent);
    border-radius: 2px;
    pointer-events: none;
}

/* The ribbon band goes round the card at the height of the knot, whatever the length of the names. */
.inv--funda .inv-hero__content {
    width: 100%;
}

.inv--funda .inv-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -8px;
    right: -8px;
    top: calc(var(--bow-w) * .206 - 8px);
    height: 16px;
    background: var(--satin-band);
    box-shadow: 0 4px 6px -3px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}

/* The bow in two layers: satin body and the parts in shadow. */
.inv--funda .orn--hero,
.inv--funda .orn--card-top {
    display: block;
    position: relative;
    --orn-ratio: 320 / 300;
    -webkit-mask: none;
    mask: none;
    background: none;
    filter: drop-shadow(0 5px 5px color-mix(in srgb, var(--inv-primary) 28%, transparent));
}

.inv--funda .orn--hero {
    --orn-width: var(--bow-w);
    --orn-max: none;
}

.inv--funda .orn--hero::before,
.inv--funda .orn--hero::after,
.inv--funda .orn--card-top::before,
.inv--funda .orn--card-top::after,
.inv--funda .inv-photo::before,
.inv--funda .inv-photo::after,
.inv--funda .inv-envelope__seal::before,
.inv--funda .inv-envelope__seal::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--satin);
    -webkit-mask: var(--bow) center / contain no-repeat;
    mask: var(--bow) center / contain no-repeat;
    pointer-events: none;
}

.inv--funda .orn--hero::after,
.inv--funda .orn--card-top::after,
.inv--funda .inv-photo::after,
.inv--funda .inv-envelope__seal::after {
    background: var(--satin-shade);
    -webkit-mask-image: var(--bow-shade);
    mask-image: var(--bow-shade);
}

.inv--funda .inv-hero__kicker {
    margin: 8px 0 14px;
}

.inv--funda .inv-hero__names {
    align-items: baseline;
}

.inv--funda .inv-hero__amp {
    margin: 0;
}

.inv--funda .inv-hero__date {
    margin: 18px 0 6px;
}

.inv--funda .orn--hero-divider,
.inv--funda .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-ribbon-thin.svg);
    --orn-ratio: 200 / 24;
    --orn-fill: var(--satin);
}

.inv--funda .orn--hero-divider {
    --orn-width: min(34cqi, 136px);
    --orn-max: none;
    --orn-margin: 12px auto 0;
}

.inv--funda .orn--heading {
    --orn-width: 84px;
    --orn-margin: -14px auto 22px;
}

/* The content card is tied at the top: a smaller bow over its edge. */
.inv--funda .orn--card-top {
    --orn-width: 112px;
    --orn-max: none;
    --orn-margin: -104px auto 8px;
}

.inv--funda .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-ribbon-bow.svg);
    --orn-ratio: 320 / 52;
    --orn-width: 86%;
    --orn-max: 300px;
    --orn-fill: linear-gradient(180deg, color-mix(in srgb, var(--ribbon) 82%, #fff), color-mix(in srgb, var(--ribbon) 74%, var(--inv-primary)));
}

/* A ribbon across the corner of the photo, tied with a small bow. */
.inv--funda .inv-photo__frame {
    position: relative;
}

.inv--funda .inv-photo__frame::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 36px;
    left: -32px;
    width: 156px;
    height: 12px;
    rotate: -45deg;
    background: var(--satin-band);
    box-shadow: 0 3px 5px -2px rgba(0, 0, 0, .3);
}

.inv--funda .inv-photo::before,
.inv--funda .inv-photo::after {
    inset: auto;
    z-index: 1;
    top: 52px;
    left: calc(50% - var(--photo-width) / 2 + 7px);
    width: 78px;
    aspect-ratio: 320 / 300;
    transform-origin: 50% 22%;
    rotate: -45deg;
}

.inv--funda .inv-program__index {
    border-color: var(--inv-primary);
    background: var(--inv-primary);
    color: var(--inv-on-primary);
}

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

.inv--funda .inv-closing__names {
    word-spacing: .12em;
}

.inv--funda .inv-monogram {
    border-color: color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    font-size: 1.15rem;
}

/* The envelope is tied with the same ribbon; the bow takes the place of the seal. */
.inv--funda .inv-envelope__body::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: calc(58% - 7px);
    height: 14px;
    background: var(--satin-band);
    box-shadow: 0 4px 6px -3px rgba(0, 0, 0, .3);
    transition: opacity .35s ease;
}

.inv--funda .inv-envelope.is-opening .inv-envelope__body::after {
    opacity: 0;
}

.inv--funda .inv-envelope__seal {
    width: 116px;
    height: 109px;
    margin: -24px 0 0 -58px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: transparent;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .22));
}

/* ================= Porțelan: blue-and-white china, painted flowering branches with two birds, a scalloped plate-rim frame ================= */

.inv--portelan {
    --f-names: "Playfair Display", "Cormorant Garamond", serif;
    --names-weight: 400;
    --names-size: clamp(2.5rem, 12cqi, 4.8rem);
    --names-line: 1.1;
    --names-shadow: none;
    --amp-font: "Playfair Display", serif;
    --amp-style: italic;
    --amp-size: .5em;
    --kicker-font: "Cormorant Garamond", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-size: 1.12rem;
    --kicker-spacing: .03em;
    --kicker-weight: 400;
    --date-font: "Playfair Display", serif;
    --date-size: .9rem;
    --date-spacing: .32em;
    --heading-font: "Playfair Display", serif;
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 1.85rem;
    --closing-size: 1.9rem;
    --monogram-font: "Playfair Display", serif;
    --hero-halo: none;
    --hero-pad: 66px 8px 104px;
    --hero-content-pad: 0 30px;
    --divider-rule-display: none;
    --card-bg: var(--inv-surface);
    --card-radius: 2px;
    --card-shadow: 0 0 0 1.5px var(--inv-primary), 0 26px 50px -36px color-mix(in srgb, var(--inv-primary) 80%, #000);
    --card-pad: 66px 26px 62px;
    --card-margin-top: 30px;
    --box-bg: var(--inv-surface);
    --box-border: 1px solid color-mix(in srgb, var(--inv-primary) 42%, transparent);
    --box-radius: 2px;
    --box-shadow: none;
    --photo-width: min(60%, 220px);
    --photo-ratio: 1;
    --photo-radius: 50%;
    --photo-shadow: none;
    --paint: var(--inv-primary);
    --paint-soft: color-mix(in srgb, var(--inv-primary) 55%, transparent);
    --scallop: 22px;
    --plate: url(../../img/invitations/ornaments/elegant-china-plate.svg);
    --rim: url(../../img/invitations/ornaments/elegant-china-rim.svg);
}

.inv--portelan.inv--dark {
    --card-shadow: 0 0 0 1.5px var(--inv-primary), 0 30px 60px -30px rgba(0, 0, 0, .6);
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg));
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-primary)), var(--inv-accent));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 84%, var(--inv-primary)), color-mix(in srgb, var(--inv-accent) 94%, var(--inv-primary)));
}

/* Glaze: a soft light at the top of the page. */
.inv--portelan .inv__backdrop {
    background:
        radial-gradient(ellipse 85% 460px at 50% 0, var(--inv-surface), transparent),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 45%, var(--inv-bg)));
}

/* The plate rim: a festooned edge (a grid of circles joined to a rectangle), drawn twice for the outline. */
.inv--portelan .inv-hero__frame {
    display: block;
    inset: 30px 6px 66px;
    border: 0;
    background: var(--paint);
    -webkit-mask:
        radial-gradient(farthest-side, #000 96%, transparent) 0 0 / var(--scallop) var(--scallop) round,
        linear-gradient(#000, #000) 50% 50% / calc(100% - var(--scallop)) calc(100% - var(--scallop)) no-repeat;
    mask:
        radial-gradient(farthest-side, #000 96%, transparent) 0 0 / var(--scallop) var(--scallop) round,
        linear-gradient(#000, #000) 50% 50% / calc(100% - var(--scallop)) calc(100% - var(--scallop)) no-repeat;
}

.inv--portelan .inv-hero__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--inv-surface);
    -webkit-mask:
        radial-gradient(farthest-side, #000 82%, transparent 86%) 0 0 / var(--scallop) var(--scallop) round,
        linear-gradient(#000, #000) 50% 50% / calc(100% - var(--scallop) - 3px) calc(100% - var(--scallop) - 3px) no-repeat;
    mask:
        radial-gradient(farthest-side, #000 82%, transparent 86%) 0 0 / var(--scallop) var(--scallop) round,
        linear-gradient(#000, #000) 50% 50% / calc(100% - var(--scallop) - 3px) calc(100% - var(--scallop) - 3px) no-repeat;
}

/* Inside the rim: a band of trellis between two lines. */
.inv--portelan .inv-hero__frame::after {
    content: "";
    position: absolute;
    inset: 17px;
    border: 7px solid transparent;
    border-radius: 12px;
    background:
        linear-gradient(var(--inv-surface), var(--inv-surface)) padding-box,
        repeating-linear-gradient(45deg, var(--paint-soft) 0 1px, transparent 1px 6px) border-box,
        repeating-linear-gradient(-45deg, var(--paint-soft) 0 1px, transparent 1px 6px) border-box,
        var(--inv-surface) border-box;
    box-shadow: 0 0 0 1px var(--paint), inset 0 0 0 1px var(--paint);
}

/* Painted branches from two opposite corners: an underlay in the colour of the glaze hides the rim behind the
   flowers, the paint goes over it in several strengths. */
.inv--portelan .inv-hero__corner--tl,
.inv--portelan .inv-hero__corner--br {
    display: block;
    --hero-corner-size: 66%;
    --hero-corner-max: 330px;
    -webkit-mask: none;
    mask: none;
    background: none;
    opacity: 1;
}

.inv--portelan .inv-hero__corner--tl {
    top: 8px;
    left: -2px;
    --hero-corner-ratio: 260 / 212;
    --art: url(../../img/invitations/ornaments/elegant-china-branch-a.svg);
    --art-solid: url(../../img/invitations/ornaments/elegant-china-branch-a-solid.svg);
}

.inv--portelan .inv-hero__corner--br {
    right: -2px;
    bottom: 44px;
    transform: none;
    --hero-corner-ratio: 262 / 204;
    --art: url(../../img/invitations/ornaments/elegant-china-branch-b.svg);
    --art-solid: url(../../img/invitations/ornaments/elegant-china-branch-b-solid.svg);
}

.inv--portelan .inv-hero__corner::before,
.inv--portelan .inv-hero__corner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--inv-surface);
    -webkit-mask: var(--art-solid) center / contain no-repeat;
    mask: var(--art-solid) center / contain no-repeat;
}

.inv--portelan .inv-hero__corner::after {
    background: var(--paint);
    -webkit-mask-image: var(--art);
    mask-image: var(--art);
}

/* A few petals come off the branches, slowly. */
.inv--portelan .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/elegant-china-petal.svg);
    --amb-size: 9px;
    --amb-duration: 24s;
    --amb-fill: var(--paint);
    --amb-opacity: .45;
}

.inv--portelan .inv__ambient i:nth-child(even) {
    display: none;
}

.inv--portelan .inv-hero__kicker {
    margin: 0 0 10px;
    color: var(--inv-text);
}

.inv--portelan .inv-hero__amp {
    margin: .1em 0 .16em;
}

.inv--portelan .inv-hero__date {
    margin: 14px 0 6px;
}

.inv--portelan .orn--hero-divider,
.inv--portelan .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-china-mark.svg);
    --orn-ratio: 120 / 20;
    --orn-fill: var(--paint);
}

.inv--portelan .orn--hero-divider {
    --orn-width: 132px;
    --orn-max: none;
    --orn-margin: 14px auto 0;
}

.inv--portelan .orn--heading {
    --orn-width: 108px;
    --orn-margin: -10px auto 24px;
}

/* The card: a double painted line and a sprig in two opposite corners. */
.inv--portelan .inv-card::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid var(--paint-soft);
    pointer-events: none;
}

.inv--portelan .inv-corner--tl,
.inv--portelan .inv-corner--br {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/elegant-china-sprig.svg);
    --corner-size: 28%;
    --corner-max: 116px;
    --corner-inset: 7px;
    --corner-fill: var(--paint);
    --corner-opacity: 1;
}

.inv--portelan .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/elegant-china-border.svg);
    --orn-ratio: 320 / 40;
    --orn-width: 92%;
    --orn-max: 320px;
    --orn-fill: var(--paint);
}

/* The photo is the well of a plate. */
.inv--portelan .inv-photo {
    padding-block: calc(var(--photo-width) * .2 + 20px);
}

.inv--portelan .inv-photo::before,
.inv--portelan .inv-monogram::before,
.inv--portelan .inv-envelope__seal::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--photo-width) * 1.4);
    aspect-ratio: 1;
    translate: -50% -50%;
    background: var(--paint);
    -webkit-mask: var(--plate) center / contain no-repeat;
    mask: var(--plate) center / contain no-repeat;
    pointer-events: none;
}

/* The monogram and the seal of the envelope: small plates with a bolder rim. */
.inv--portelan .inv-monogram::before,
.inv--portelan .inv-envelope__seal::before {
    width: 100%;
    -webkit-mask-image: var(--rim);
    mask-image: var(--rim);
}

.inv--portelan .inv-program__index {
    border-color: var(--paint);
    font-family: "Playfair Display", serif;
}

.inv--portelan .inv-monogram {
    position: relative;
    width: 104px;
    height: 104px;
    border: 0;
    box-shadow: none;
}

.inv--portelan .inv-envelope__seal {
    width: 88px;
    height: 88px;
    margin: -44px 0 0 -44px;
    border-radius: 0;
    background: var(--inv-surface);
    box-shadow: none;
    color: var(--inv-primary);
    -webkit-mask: url(../../img/invitations/ornaments/elegant-china-rim-solid.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/elegant-china-rim-solid.svg) center / contain no-repeat;
}