/* Collection "floral": flowers, watercolour and greenery. Contract: docs/invitation-templates.md.
   Ornaments: ../../img/invitations/ornaments/, all drawn as black masks tinted from the palette.

   Two-tone ornaments (roses, peonies, the wreath, cherry and olive branches) come as two SVGs with the same
   viewBox: the greenery (leaves already cut around the flowers) and the flowers. A template that uses them turns
   the slot into an empty box (no mask, no background) and paints ::before with --leaf-image / --leaf-fill and
   ::after with --bloom-image / --bloom-fill, stacked on the same box. */

.inv-c--floral {
    /* greenery that suits any palette: sage, nudged towards the palette's ornament colour */
    --floral-leaf: color-mix(in srgb, #6a8560 80%, var(--inv-ornament));
}

.inv-c--floral.inv--dark {
    --floral-leaf: color-mix(in srgb, #9fb591 78%, var(--inv-ornament));
}

/* ---------- Botanic: airy, eucalyptus garlands in the corners ---------- */

.inv--botanic {
    --f-display: "Playfair Display", Georgia, serif;
    --f-names: "Allura", "Playfair Display", cursive;
    --names-weight: 400;
    --names-size: clamp(3.4rem, 17cqi, 6.6rem);
    --names-line: 1.1;
    --heading-weight: 400;
    --heading-style: italic;
    --card-radius: 28px;
    --box-radius: 16px;
    --divider-rule-display: none;
    --eucalyptus: color-mix(in srgb, var(--inv-ornament) 78%, var(--inv-primary));
}

.inv--botanic .inv__backdrop {
    background:
        radial-gradient(ellipse at 0% 20%, color-mix(in srgb, var(--inv-ornament) 22%, transparent), transparent 50%),
        radial-gradient(ellipse at 100% 80%, color-mix(in srgb, var(--inv-ornament) 18%, transparent), transparent 50%),
        var(--inv-bg);
}

/* Eucalyptus garland hanging from the top-left of the first screen, and again at the end of the page. */
.inv--botanic .inv__deco--a,
.inv--botanic .inv__deco--b {
    display: block;
    --deco-image: url(../../img/invitations/ornaments/floral-eucalyptus.svg);
    --deco-fill: var(--eucalyptus);
    --deco-opacity: .62;
}

.inv--botanic .inv__deco--a {
    --deco-a-width: min(62%, 340px);
    --deco-a-top: -8px;
    --deco-a-left: -14px;
}

.inv--botanic .inv__deco--b {
    --deco-b-width: min(54%, 300px);
    --deco-b-right: -14px;
    --deco-b-bottom: -8px;
}

.inv--botanic .orn--hero,
.inv--botanic .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-eucalyptus-sprig.svg);
    --orn-ratio: 240 / 80;
    --orn-width: min(46cqi, 200px);
    --orn-fill: var(--eucalyptus);
}

.inv--botanic .orn--divider {
    --orn-width: 62%;
    --orn-max: 240px;
}

.inv--botanic .orn--hero {
    --orn-max: none;
}

.inv--botanic .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/sprig.svg);
    --orn-ratio: 180 / 120;
    --orn-width: 64px;
    --orn-margin: -14px auto 18px;
    --orn-fill: var(--eucalyptus);
    --orn-opacity: .8;
}

.inv--botanic .inv-corner--tl,
.inv--botanic .inv-corner--br {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/floral-eucalyptus.svg);
    --corner-ratio: 1;
    --corner-size: 36%;
    --corner-max: 170px;
    --corner-inset: -6px;
    --corner-opacity: .7;
    --corner-fill: var(--eucalyptus);
}

.inv--botanic .inv-card {
    --card-pad: 104px 24px 64px;
}

/* ---------- Trandafiri: rose bouquets over the names and in the card corners, blush and burgundy ---------- */

.inv--trandafiri {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-names: "Pinyon Script", "Cormorant Garamond", cursive;
    --names-weight: 400;
    --names-size: clamp(3rem, 15.5cqi, 6rem);
    --names-line: 1.14;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-size: .42em;
    --kicker-font: "Cormorant Garamond", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-size: 1.18rem;
    --kicker-spacing: .05em;
    --kicker-weight: 400;
    --date-font: "Cormorant Garamond", Georgia, serif;
    --date-size: 1.2rem;
    --date-weight: 600;
    --date-spacing: .24em;
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 2.4rem;
    --closing-font: "Pinyon Script", cursive;
    --closing-size: 2.6rem;
    --monogram-font: "Pinyon Script", cursive;
    --divider-rule-display: none;
    --card-bg: var(--inv-surface);
    --card-radius: 4px;
    --card-pad: 104px 26px 108px;
    --card-margin-top: 26px;
    --card-shadow:
        inset 0 0 0 9px var(--inv-surface),
        inset 0 0 0 10px color-mix(in srgb, var(--inv-ornament) 55%, transparent),
        0 26px 60px -26px color-mix(in srgb, var(--inv-primary) 45%, transparent);
    --box-bg: color-mix(in srgb, var(--inv-accent) 30%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 38%, transparent);
    --box-radius: 14px;
    --box-shadow: none;
    --photo-radius: 50%;
    --photo-ratio: 4 / 5;
    --photo-width: min(86%, 320px);
    --leaf-fill: linear-gradient(150deg, color-mix(in srgb, var(--floral-leaf) 72%, #fff), var(--floral-leaf) 55%, color-mix(in srgb, var(--floral-leaf) 82%, #000));
    --bloom-fill: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--inv-ornament) 80%, #fff), var(--inv-ornament) 38%, color-mix(in srgb, var(--inv-ornament) 45%, var(--inv-primary)) 85%);
    --rose-divider: linear-gradient(90deg, var(--floral-leaf) 0 39%, var(--inv-ornament) 39% 61%, var(--floral-leaf) 61%);
}

.inv--trandafiri.inv--dark {
    --bloom-fill: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--inv-ornament) 35%, #fff), color-mix(in srgb, var(--inv-ornament) 72%, #fff) 45%, var(--inv-ornament) 90%);
}

.inv--trandafiri .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 420px at 50% 0%, var(--inv-surface), transparent 70%),
        radial-gradient(ellipse 60% 30% at 0% 55%, color-mix(in srgb, var(--inv-ornament) 16%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 30% at 100% 92%, color-mix(in srgb, var(--inv-ornament) 16%, transparent), transparent 70%),
        var(--inv-bg);
}

.inv--trandafiri .orn--hero,
.inv--trandafiri .inv-corner--tl,
.inv--trandafiri .inv-corner--br {
    display: block;
    -webkit-mask: none;
    mask: none;
    background: none;
}

.inv--trandafiri .orn--hero {
    position: relative;
    --orn-ratio: 400 / 150;
    --orn-width: min(92cqi, 390px);
    --orn-max: none;
    --orn-margin: 0 auto -4px;
    --leaf-image: url(../../img/invitations/ornaments/floral-rose-crest-leaves.svg);
    --bloom-image: url(../../img/invitations/ornaments/floral-rose-crest.svg);
    filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--inv-primary) 16%, transparent));
}

.inv--trandafiri .inv-corner--tl,
.inv--trandafiri .inv-corner--br {
    --corner-size: 46%;
    --corner-max: 210px;
    --corner-inset: -16px;
    --corner-opacity: 1;
    --leaf-image: url(../../img/invitations/ornaments/floral-rose-corner-leaves.svg);
    --bloom-image: url(../../img/invitations/ornaments/floral-rose-corner.svg);
}

.inv--trandafiri .orn--hero::before,
.inv--trandafiri .orn--hero::after,
.inv--trandafiri .inv-corner::before,
.inv--trandafiri .inv-corner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.inv--trandafiri .orn--hero::before,
.inv--trandafiri .inv-corner::before {
    background: var(--leaf-fill);
    -webkit-mask: var(--leaf-image) center / contain no-repeat;
    mask: var(--leaf-image) center / contain no-repeat;
}

.inv--trandafiri .orn--hero::after,
.inv--trandafiri .inv-corner::after {
    background: var(--bloom-fill);
    -webkit-mask: var(--bloom-image) center / contain no-repeat;
    mask: var(--bloom-image) center / contain no-repeat;
}

.inv--trandafiri .orn--hero-divider,
.inv--trandafiri .orn--divider,
.inv--trandafiri .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-rose-divider.svg);
    --orn-ratio: 300 / 64;
    --orn-fill: var(--rose-divider);
}

.inv--trandafiri .orn--hero-divider {
    --orn-width: min(54cqi, 230px);
    --orn-max: none;
    --orn-margin: 14px auto 0;
}

.inv--trandafiri .orn--divider {
    --orn-width: 78%;
    --orn-max: 300px;
}

.inv--trandafiri .orn--heading {
    --orn-width: 42%;
    --orn-max: 170px;
    --orn-margin: -10px auto 22px;
    --orn-opacity: .9;
}

.inv--trandafiri .inv-monogram {
    border-color: color-mix(in srgb, var(--inv-ornament) 60%, transparent);
    font-size: 1.7rem;
}

/* ---------- Bujori: one generous peony over the names, arched card, coral and pink ---------- */

.inv--bujori {
    --f-display: "Gilda Display", Georgia, serif;
    --f-names: "Italianno", "Gilda Display", cursive;
    --names-weight: 400;
    --names-size: clamp(3.9rem, 20.5cqi, 7.6rem);
    --names-line: .92;
    --amp-font: "Gilda Display", Georgia, serif;
    --amp-style: normal;
    --amp-size: .32em;
    --kicker-font: "Gilda Display", Georgia, serif;
    --kicker-size: .74rem;
    --kicker-spacing: .36em;
    --kicker-weight: 400;
    --date-font: "Gilda Display", Georgia, serif;
    --date-size: .95rem;
    --date-spacing: .34em;
    --heading-font: "Italianno", cursive;
    --heading-size: 3.3rem;
    --heading-weight: 400;
    --closing-font: "Italianno", cursive;
    --closing-size: 3.4rem;
    --monogram-font: "Gilda Display", Georgia, serif;
    --text-display-font: "Gilda Display", Georgia, serif;
    --message-style: normal;
    --message-size: 1.18rem;
    --divider-rule-display: none;
    --hero-pad: 36px 8px 72px;
    --card-bg: var(--inv-surface);
    --card-radius: 210px 210px 28px 28px;
    --card-pad: 86px 24px 60px;
    --card-margin-top: 30px;
    --card-shadow: 0 30px 70px -34px color-mix(in srgb, var(--inv-primary) 50%, transparent);
    --box-bg: color-mix(in srgb, var(--inv-accent) 48%, var(--inv-surface));
    --box-border: 0 solid transparent;
    --box-radius: 22px;
    --box-shadow: none;
    --photo-radius: 999px 999px 26px 26px;
    --photo-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 8px color-mix(in srgb, var(--inv-ornament) 60%, transparent), 0 22px 44px -24px rgba(0, 0, 0, .4);
    --button-radius: 999px;
    --leaf-fill: linear-gradient(170deg, color-mix(in srgb, var(--floral-leaf) 70%, #fff), var(--floral-leaf) 50%, color-mix(in srgb, var(--floral-leaf) 80%, #000));
    --bloom-fill: radial-gradient(closest-side circle at 50% 47%, color-mix(in srgb, var(--inv-ornament) 52%, var(--inv-primary)), var(--inv-ornament) 50%, color-mix(in srgb, var(--inv-ornament) 72%, #fff) 96%);
    --peony-sprig: linear-gradient(90deg, var(--floral-leaf) 0 42%, var(--inv-ornament) 42% 58%, var(--floral-leaf) 58%);
}

.inv--bujori .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 360px at 50% 120px, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 72%),
        radial-gradient(ellipse 70% 30% at 100% 100%, color-mix(in srgb, var(--inv-ornament) 18%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 55%, var(--inv-bg)) 55%, var(--inv-bg));
}

.inv--bujori .orn--hero {
    display: block;
    position: relative;
    -webkit-mask: none;
    mask: none;
    background: none;
    --orn-ratio: 400 / 290;
    --orn-width: min(94cqi, 430px);
    --orn-max: none;
    --orn-margin: 0 auto -2px;
    --leaf-image: url(../../img/invitations/ornaments/floral-peony-leaves.svg);
    --bloom-image: url(../../img/invitations/ornaments/floral-peony.svg);
    filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--inv-primary) 18%, transparent));
}

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

.inv--bujori .orn--hero::before {
    background: var(--leaf-fill);
    -webkit-mask: var(--leaf-image) center / contain no-repeat;
    mask: var(--leaf-image) center / contain no-repeat;
}

.inv--bujori .orn--hero::after {
    background: var(--bloom-fill);
    -webkit-mask: var(--bloom-image) center / contain no-repeat;
    mask: var(--bloom-image) center / contain no-repeat;
}

.inv--bujori .inv-hero__kicker {
    margin-top: 6px;
}

.inv--bujori .orn--hero-divider,
.inv--bujori .orn--divider,
.inv--bujori .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-peony-sprig.svg);
    --orn-ratio: 300 / 70;
    --orn-fill: var(--peony-sprig);
}

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

.inv--bujori .orn--divider {
    --orn-width: 76%;
    --orn-max: 300px;
}

/* A peony bud crowning the arched card. */
.inv--bujori .orn--card-top {
    --orn-width: 70%;
    --orn-max: 280px;
    --orn-margin: -40px auto 6px;
}

.inv--bujori .inv-countdown span,
.inv--bujori .inv-program__time {
    font-family: "Gilda Display", Georgia, serif;
}

/* ---------- Acuarelă: overlapping watercolour washes and fine stems, pastel ---------- */

.inv--acuarela {
    --f-display: "Lora", Georgia, serif;
    --f-names: "Birthstone", "Lora", cursive;
    --names-weight: 400;
    --names-size: clamp(3.4rem, 18cqi, 6.8rem);
    --names-line: 1.04;
    --amp-font: "Lora", Georgia, serif;
    --amp-size: .34em;
    --kicker-font: "Lora", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-size: 1.06rem;
    --kicker-spacing: .03em;
    --kicker-weight: 400;
    --date-font: "Lora", Georgia, serif;
    --date-size: .92rem;
    --date-spacing: .3em;
    --heading-font: "Birthstone", cursive;
    --heading-size: 3.1rem;
    --heading-weight: 400;
    --closing-font: "Birthstone", cursive;
    --closing-size: 3rem;
    --monogram-font: "Birthstone", cursive;
    --divider-rule-display: none;
    --wash: var(--inv-ornament);
    --wash-warm: color-mix(in oklab, var(--inv-ornament) 38%, #f4a08a);
    --wash-cool: color-mix(in oklab, var(--inv-ornament) 38%, #86d0c2);
    --wash-deep: color-mix(in srgb, var(--inv-primary) 45%, var(--inv-ornament));
    --card-bg:
        radial-gradient(70% 22% at 0% 0%, color-mix(in srgb, var(--inv-ornament) 22%, transparent), transparent 70%),
        radial-gradient(70% 20% at 100% 100%, color-mix(in srgb, var(--wash-cool) 24%, transparent), transparent 70%),
        color-mix(in srgb, var(--inv-surface) 90%, transparent);
    --card-radius: 38px;
    --card-shadow: 0 30px 60px -36px color-mix(in srgb, var(--inv-primary) 45%, transparent);
    --box-bg: color-mix(in srgb, var(--inv-accent) 40%, var(--inv-surface));
    --box-border: 0 solid transparent;
    --box-radius: 24px;
    --box-shadow: none;
    --photo-radius: 48% 52% 44% 56% / 40% 42% 58% 60%;
    --photo-shadow: 0 0 0 10px color-mix(in srgb, var(--inv-ornament) 26%, transparent), 0 24px 44px -26px rgba(0, 0, 0, .35);
    --button-radius: 999px;
}

.inv--acuarela .inv__backdrop {
    background:
        radial-gradient(150px 120px at 14% 90px, color-mix(in srgb, var(--wash-warm) 42%, transparent), transparent 72%),
        radial-gradient(210px 150px at 34% 170px, color-mix(in srgb, var(--wash) 34%, transparent), transparent 72%),
        radial-gradient(150px 120px at 84% 110px, color-mix(in srgb, var(--wash-cool) 34%, transparent), transparent 72%),
        radial-gradient(200px 170px at 94% 300px, color-mix(in srgb, var(--wash-warm) 30%, transparent), transparent 72%),
        radial-gradient(220px 160px at 4% 540px, color-mix(in srgb, var(--wash-cool) 36%, transparent), transparent 72%),
        radial-gradient(180px 140px at 98% 620px, color-mix(in srgb, var(--wash) 30%, transparent), transparent 72%),
        radial-gradient(40% 520px at 6% 50%, color-mix(in srgb, var(--wash-cool) 26%, transparent), transparent 72%),
        radial-gradient(46% 600px at 96% 64%, color-mix(in srgb, var(--wash) 24%, transparent), transparent 72%),
        radial-gradient(44% 560px at 100% 96%, color-mix(in srgb, var(--wash-warm) 26%, transparent), transparent 72%),
        var(--inv-bg);
}

/* Watercolour washes: one spills from the top-left, one blooms behind the names, one closes the page. */
.inv--acuarela .inv__deco--a,
.inv--acuarela .inv__deco--b {
    display: block;
    --deco-image: url(../../img/invitations/ornaments/floral-wash.svg);
    --deco-fill: radial-gradient(circle at 32% 30%, var(--wash-warm), var(--wash) 45%, var(--wash-cool) 78%);
    --deco-opacity: .9;
}

.inv--acuarela .inv__deco--a {
    --deco-a-width: min(92%, 480px);
    --deco-a-top: -40px;
    --deco-a-left: -26%;
}

.inv--acuarela .inv__deco--b {
    --deco-b-width: min(86%, 440px);
    --deco-b-right: -22%;
    --deco-b-bottom: -30px;
    --deco-fill: radial-gradient(circle at 32% 30%, var(--wash-cool), var(--wash) 50%, var(--wash-warm) 80%);
}

.inv--acuarela .inv-hero__frame {
    display: block;
    inset: auto;
    top: 36%;
    right: -30%;
    width: min(96%, 460px);
    aspect-ratio: 1;
    border: 0;
    background: radial-gradient(circle at 30% 30%, var(--wash), var(--wash-warm) 55%, var(--wash-deep) 85%);
    opacity: .75;
    -webkit-mask: url(../../img/invitations/ornaments/floral-wash.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-wash.svg) center / contain no-repeat;
    transform: rotate(160deg);
}

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

/* Fine wild stems rising from both lower corners of the first screen. */
.inv--acuarela .inv-hero__corner--bl,
.inv--acuarela .inv-hero__corner--br {
    display: block;
    max-width: 170px;
    --hero-corner-image: url(../../img/invitations/ornaments/floral-stems.svg);
    --hero-corner-ratio: 220 / 320;
    --hero-corner-size: 40%;
    --hero-corner-inset: 0px;
    --hero-corner-fill: var(--inv-primary);
    --hero-corner-opacity: .5;
}

.inv--acuarela .inv-hero__corner--bl { left: -12px; transform: none; }
.inv--acuarela .inv-hero__corner--br { right: -12px; transform: scaleX(-1); --hero-corner-opacity: .38; }

.inv--acuarela .orn--hero-divider,
.inv--acuarela .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-stem-line.svg);
    --orn-ratio: 300 / 44;
    --orn-fill: var(--inv-primary);
    --orn-opacity: .75;
}

.inv--acuarela .orn--hero-divider {
    --orn-width: min(62cqi, 250px);
    --orn-max: none;
    --orn-margin: 14px auto 0;
}

.inv--acuarela .orn--divider {
    --orn-width: 80%;
    --orn-max: 300px;
}

.inv--acuarela .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-posy.svg);
    --orn-ratio: 120 / 36;
    --orn-width: 34%;
    --orn-max: 120px;
    --orn-margin: -14px auto 22px;
    --orn-fill: color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-primary));
}

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

/* Countdown cells as soft paint drops. */
.inv--acuarela .inv-countdown > div {
    border-radius: 48% 52% 44% 56% / 56% 46% 54% 44%;
    background: radial-gradient(circle at 35% 30%, var(--inv-surface), color-mix(in srgb, var(--inv-ornament) 26%, var(--inv-surface)));
}

/* ---------- Flori de câmp: a meadow of wild flowers along the first screen and the card ---------- */

.inv--flori-de-camp {
    --f-display: "Fraunces", Georgia, serif;
    --f-names: "Fraunces", Georgia, serif;
    --names-weight: 300;
    --names-style: italic;
    --names-size: clamp(3rem, 15cqi, 5.8rem);
    --names-line: 1;
    --amp-font: "Caveat", cursive;
    --amp-style: normal;
    --amp-size: .56em;
    --kicker-font: "Amatic SC", sans-serif;
    --kicker-size: 1.4rem;
    --kicker-weight: 700;
    --kicker-spacing: .14em;
    --date-font: "Amatic SC", sans-serif;
    --date-size: 1.6rem;
    --date-weight: 700;
    --date-spacing: .18em;
    --heading-font: "Amatic SC", sans-serif;
    --heading-size: 2.8rem;
    --heading-weight: 700;
    --heading-spacing: .04em;
    --closing-font: "Fraunces", Georgia, serif;
    --closing-size: 2.5rem;
    --text-display-font: "Fraunces", Georgia, serif;
    --message-size: 1.2rem;
    --monogram-font: "Fraunces", Georgia, serif;
    --divider-rule-display: none;
    --meadow-h: calc(min(100cqi, 660px) * .29);
    --hero-pad: 52px 8px calc(var(--meadow-h) + 44px);
    --card-bg: var(--inv-surface);
    --card-radius: 28px;
    --card-pad: 48px 24px calc(var(--meadow-h) + 30px);
    --card-pad-wide: 60px 48px calc(var(--meadow-h) + 30px);
    --card-shadow: 0 24px 50px -30px rgba(60, 70, 30, .4);
    --box-bg: var(--inv-surface);
    --box-border: 1.5px dashed color-mix(in srgb, var(--inv-ornament) 65%, transparent);
    --box-radius: 18px;
    --box-shadow: none;
    --photo-radius: 4px;
    --photo-rotate: -2.5deg;
    --photo-pad: 10px 10px 40px;
    --photo-bg: #fff;
    --photo-inner-radius: 2px;
    --photo-shadow: 0 18px 34px -18px rgba(0, 0, 0, .45);
    --photo-ratio: 4 / 5;
    --photo-width: min(80%, 300px);
    --button-radius: 999px;
    /* meadow colours: natural wild flowers, softened towards the paper */
    --stem: color-mix(in srgb, #748a5c 68%, var(--inv-ornament));
    --poppy: color-mix(in srgb, #d6503f 88%, var(--inv-bg));
    --sun: color-mix(in srgb, #e3ae2f 88%, var(--inv-bg));
    --corn: color-mix(in srgb, #4b6fb4 88%, var(--inv-bg));
    --bell: color-mix(in srgb, #9a86c8 88%, var(--inv-bg));
    --amp-color: var(--poppy);
    --meadow-blooms: linear-gradient(90deg, var(--poppy) 0 6.9%, var(--sun) 6.9% 13.9%, var(--corn) 13.9% 21.6%, var(--bell) 21.6% 28.5%,
        var(--sun) 28.5% 34.7%, var(--poppy) 34.7% 42.5%, var(--corn) 42.5% 50.1%, var(--sun) 50.1% 56.8%, var(--poppy) 56.8% 64.4%,
        var(--bell) 64.4% 71.7%, var(--corn) 71.7% 78.5%, var(--sun) 78.5% 85.1%, var(--poppy) 85.1% 92.9%, var(--corn) 92.9%);
    --meadow-divider: linear-gradient(90deg, var(--stem) 0 7.1%, var(--corn) 7.1% 14.2%, var(--stem) 14.2% 19.5%, var(--sun) 19.5% 27.2%,
        var(--stem) 27.2% 32.3%, var(--corn) 32.3% 41%, var(--stem) 41% 44.5%, var(--poppy) 44.5% 55.5%, var(--stem) 55.5% 59%,
        var(--corn) 59% 67.7%, var(--stem) 67.7% 72.8%, var(--sun) 72.8% 80.5%, var(--stem) 80.5% 85.8%, var(--corn) 85.8% 92.9%, var(--stem) 92.9%);
}

.inv--flori-de-camp .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 380px at 50% 0%, color-mix(in srgb, var(--sun) 20%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 50%, var(--inv-bg)) 40%, var(--inv-bg));
}

/* The meadow: stems and grasses (::before) with the flower heads on top (::after), along the bottom edge. */
.inv--flori-de-camp .inv-hero::before,
.inv--flori-de-camp .inv-hero::after,
.inv--flori-de-camp .inv-card::before,
.inv--flori-de-camp .inv-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    aspect-ratio: 600 / 170;
    pointer-events: none;
}

.inv--flori-de-camp .inv-hero::before,
.inv--flori-de-camp .inv-hero::after {
    left: -16px;
    right: -16px;
}

.inv--flori-de-camp .inv-card::before,
.inv--flori-de-camp .inv-card::after {
    left: 0;
    right: 0;
}

.inv--flori-de-camp .inv-hero::before,
.inv--flori-de-camp .inv-card::before {
    background: var(--stem);
    -webkit-mask: url(../../img/invitations/ornaments/floral-meadow.svg) center bottom / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/floral-meadow.svg) center bottom / 100% 100% no-repeat;
}

.inv--flori-de-camp .inv-hero::after,
.inv--flori-de-camp .inv-card::after {
    background: var(--meadow-blooms);
    -webkit-mask: url(../../img/invitations/ornaments/floral-meadow-blooms.svg) center bottom / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/floral-meadow-blooms.svg) center bottom / 100% 100% no-repeat;
}

.inv--flori-de-camp .inv-card::before,
.inv--flori-de-camp .inv-card::after {
    transform: scaleX(-1);
}

.inv--flori-de-camp .inv-card {
    overflow: hidden;
}

.inv--flori-de-camp .inv-hero__scroll {
    bottom: calc(var(--meadow-h) + 4px);
}

.inv--flori-de-camp .orn--hero,
.inv--flori-de-camp .orn--hero-divider,
.inv--flori-de-camp .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-meadow-divider.svg);
    --orn-ratio: 300 / 60;
    --orn-fill: var(--meadow-divider);
}

.inv--flori-de-camp .orn--hero {
    --orn-width: min(46cqi, 200px);
    --orn-max: none;
}

.inv--flori-de-camp .orn--hero-divider {
    --orn-width: min(64cqi, 260px);
    --orn-max: none;
    --orn-margin: 12px auto 0;
}

.inv--flori-de-camp .orn--divider {
    --orn-width: 86%;
    --orn-max: 320px;
}

.inv--flori-de-camp .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-posy.svg);
    --orn-ratio: 120 / 36;
    --orn-width: 30%;
    --orn-max: 110px;
    --orn-margin: -12px auto 20px;
    --orn-fill: linear-gradient(90deg, var(--stem) 0 41%, var(--sun) 41% 59%, var(--stem) 59%);
}

.inv--flori-de-camp .inv-hero__names {
    letter-spacing: -.01em;
}

.inv--flori-de-camp .inv-countdown span,
.inv--flori-de-camp .inv-program__time {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
}

/* ---------- Floare de cireș: blossoming cherry branches and falling petals, pale pink ---------- */

.inv--cires {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-names: "Great Vibes", "Cormorant Garamond", cursive;
    --names-weight: 400;
    --names-size: clamp(3.2rem, 17cqi, 6.4rem);
    --names-line: 1.08;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-size: .42em;
    --kicker-size: .68rem;
    --kicker-spacing: .46em;
    --date-font: "Cormorant Garamond", Georgia, serif;
    --date-size: 1.35rem;
    --date-weight: 500;
    --date-spacing: .1em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Great Vibes", cursive;
    --heading-size: 2.8rem;
    --heading-weight: 400;
    --closing-font: "Great Vibes", cursive;
    --closing-size: 2.9rem;
    --monogram-font: "Great Vibes", cursive;
    --divider-rule-display: none;
    --hero-pad: 150px 8px 76px;
    --card-bg: color-mix(in srgb, var(--inv-surface) 92%, transparent);
    --card-radius: 30px;
    --card-pad: 104px 24px 56px;
    --card-shadow: 0 26px 60px -30px color-mix(in srgb, var(--inv-primary) 40%, transparent);
    --box-bg: color-mix(in srgb, var(--inv-accent) 36%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 40%, transparent);
    --box-radius: 18px;
    --box-shadow: none;
    --photo-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 8px color-mix(in srgb, var(--inv-ornament) 70%, transparent), 0 22px 44px -22px rgba(0, 0, 0, .4);
    --wood: color-mix(in srgb, var(--inv-text) 48%, var(--inv-primary));
    --blossom: radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--inv-ornament) 55%, #fff), var(--inv-ornament) 52%, color-mix(in srgb, var(--inv-ornament) 72%, var(--inv-primary)));
}

.inv--cires.inv--dark {
    --wood: color-mix(in srgb, var(--inv-muted) 55%, var(--inv-bg));
    --blossom: radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--inv-ornament) 30%, #fff), color-mix(in srgb, var(--inv-ornament) 62%, #fff) 50%, var(--inv-ornament));
}

.inv--cires .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 460px at 70% 0%, color-mix(in srgb, var(--inv-accent) 80%, transparent), transparent 72%),
        radial-gradient(ellipse 70% 30% at 0% 100%, color-mix(in srgb, var(--inv-accent) 70%, transparent), transparent 70%),
        var(--inv-bg);
}

/* Cherry branches: wood (::before) and blossoms (::after) on the same box. One enters from the top-right of
   the first screen, one from the bottom-left of the page, one rests on the card's top-right corner. */
.inv--cires .inv__deco--a,
.inv--cires .inv__deco--b,
.inv--cires .inv-corner--tr {
    display: block;
    aspect-ratio: 400 / 240;
    -webkit-mask: none;
    mask: none;
    background: none;
    opacity: 1;
}

.inv--cires .inv__deco--a {
    top: -8px;
    left: auto;
    right: -14px;
    width: min(98%, 560px);
    transform: none;
}

.inv--cires .inv__deco--b {
    right: auto;
    left: -14px;
    bottom: -8px;
    width: min(82%, 460px);
}

.inv--cires .inv-corner--tr {
    top: -14px;
    right: -12px;
    width: 58%;
    max-width: 300px;
    transform: none;
}

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

.inv--cires .inv__deco::before,
.inv--cires .inv-corner--tr::before {
    background: var(--wood);
    -webkit-mask: url(../../img/invitations/ornaments/floral-cherry-branch.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-cherry-branch.svg) center / contain no-repeat;
}

.inv--cires .inv__deco::after,
.inv--cires .inv-corner--tr::after {
    background: var(--blossom);
    -webkit-mask: url(../../img/invitations/ornaments/floral-cherry-blossoms.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-cherry-blossoms.svg) center / contain no-repeat;
}

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

/* Petals drifting down over the first screen. */
.inv--cires .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/floral-petal.svg);
    --amb-size: 13px;
    --amb-duration: 16s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .8;
}

.inv--cires .orn--hero-divider,
.inv--cires .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-cherry-divider.svg);
    --orn-ratio: 300 / 50;
    --orn-fill: color-mix(in srgb, var(--inv-ornament) 82%, var(--inv-primary));
}

.inv--cires .orn--hero-divider {
    --orn-width: min(62cqi, 250px);
    --orn-max: none;
    --orn-margin: 14px auto 0;
}

.inv--cires .orn--divider {
    --orn-width: 84%;
    --orn-max: 320px;
}

.inv--cires .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-blossom.svg);
    --orn-ratio: 1;
    --orn-width: 30px;
    --orn-margin: -12px auto 20px;
    --orn-fill: var(--inv-ornament);
}

/* ---------- Coroniță: a round floral wreath around the names ---------- */

.inv--coronita {
    --f-display: "EB Garamond", Georgia, serif;
    --f-names: "Alex Brush", "EB Garamond", cursive;
    --names-weight: 400;
    --names-size: clamp(2.7rem, 13.5cqi, 4.4rem);
    --names-line: 1.06;
    --amp-font: "EB Garamond", Georgia, serif;
    --amp-size: .44em;
    --kicker-font: "Cinzel", Georgia, serif;
    --kicker-size: .68rem;
    --kicker-spacing: .32em;
    --kicker-weight: 400;
    --date-font: "Cinzel", Georgia, serif;
    --date-size: .84rem;
    --date-spacing: .32em;
    --heading-font: "EB Garamond", Georgia, serif;
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 2.3rem;
    --closing-font: "Alex Brush", cursive;
    --closing-size: 2.6rem;
    --monogram-font: "Alex Brush", cursive;
    --divider-rule-display: none;
    --hero-halo: none;
    --card-bg: var(--inv-surface);
    --card-radius: 18px;
    --card-pad: 54px 24px 56px;
    --card-margin-top: 24px;
    --card-shadow: 0 24px 56px -32px rgba(40, 50, 30, .38);
    --box-bg: color-mix(in srgb, var(--inv-accent) 34%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 36%, transparent);
    --box-radius: 14px;
    --box-shadow: none;
    --photo-radius: 50%;
    --photo-ratio: 1;
    --photo-width: min(78%, 290px);
    --wreath-size: min(88cqi, 390px);
    --leaf-fill: linear-gradient(135deg, color-mix(in srgb, var(--floral-leaf) 76%, #fff), var(--floral-leaf) 50%, color-mix(in srgb, var(--floral-leaf) 82%, #000));
    --bloom-fill: radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--inv-primary) 72%, #fff), color-mix(in srgb, var(--inv-primary) 38%, #fff) 62%);
    --garland: linear-gradient(90deg, var(--floral-leaf) 0 32.5%, var(--bloom) 32.5% 39.5%, var(--floral-leaf) 39.5% 45%, var(--bloom) 45% 55%,
        var(--floral-leaf) 55% 60.5%, var(--bloom) 60.5% 67.5%, var(--floral-leaf) 67.5%);
    --bloom: color-mix(in srgb, var(--inv-primary) 55%, #fff);
}

.inv--coronita.inv--dark {
    --bloom-fill: radial-gradient(circle at 30% 70%, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 50%, #fff) 60%);
}

.inv--coronita .inv__backdrop {
    background:
        radial-gradient(circle 360px at 50% 320px, var(--inv-surface), transparent 72%),
        radial-gradient(ellipse 60% 26% at 0% 100%, color-mix(in srgb, var(--inv-ornament) 16%, transparent), transparent 70%),
        var(--inv-bg);
}

/* The wreath: centred on the names, which get a box as tall as the wreath so the kicker and date sit outside. */
.inv--coronita .inv-hero__names {
    position: relative;
    min-height: calc(var(--wreath-size) * .98);
    margin: -4px 0;
    justify-content: center;
}

.inv--coronita .inv-hero__names::before,
.inv--coronita .inv-hero__names::after,
.inv--coronita .inv-monogram::before,
.inv--coronita .inv-monogram::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--wreath-size);
    aspect-ratio: 1;
    translate: -50% -50%;
    z-index: -1;
    pointer-events: none;
}

.inv--coronita .inv-hero__names::before,
.inv--coronita .inv-monogram::before {
    background: var(--leaf-fill);
    -webkit-mask: url(../../img/invitations/ornaments/floral-wreath-leaves.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-wreath-leaves.svg) center / contain no-repeat;
}

.inv--coronita .inv-hero__names::after,
.inv--coronita .inv-monogram::after {
    background: var(--bloom-fill);
    -webkit-mask: url(../../img/invitations/ornaments/floral-wreath-blooms.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-wreath-blooms.svg) center / contain no-repeat;
}

.inv--coronita .inv-hero__kicker {
    margin-bottom: 0;
}

.inv--coronita .inv-hero__date {
    margin-top: 8px;
}

/* A small wreath around the monogram at the end of the card. */
.inv--coronita .inv-monogram {
    position: relative;
    isolation: isolate;
    width: 86px;
    height: 86px;
    margin: 30px 0 22px;
    border: 0;
    box-shadow: none;
    font-size: 1.9rem;
    --wreath-size: 150px;
}

.inv--coronita .orn--hero-divider,
.inv--coronita .orn--divider,
.inv--coronita .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-garland.svg);
    --orn-ratio: 300 / 48;
    --orn-fill: var(--garland);
}

.inv--coronita .orn--hero-divider {
    display: none;
}

.inv--coronita .orn--divider {
    --orn-width: 80%;
    --orn-max: 300px;
}

.inv--coronita .orn--card-top {
    --orn-width: 66%;
    --orn-max: 260px;
    --orn-margin: -30px auto 10px;
}

/* ---------- Ramură de măslin: olive branches, Mediterranean, sage and cream, restrained ---------- */

.inv--maslin {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-names: "Cormorant Garamond", Georgia, serif;
    --names-weight: 300;
    --names-style: italic;
    --names-size: clamp(3.1rem, 15.5cqi, 6rem);
    --names-line: 1;
    --amp-size: .46em;
    --kicker-font: "Tenor Sans", "Jost", sans-serif;
    --kicker-size: .66rem;
    --kicker-spacing: .42em;
    --kicker-weight: 400;
    --date-font: "Tenor Sans", "Jost", sans-serif;
    --date-size: .82rem;
    --date-spacing: .42em;
    --label-font: "Tenor Sans", "Jost", sans-serif;
    --label-weight: 400;
    --heading-size: 1.45rem;
    --heading-weight: 500;
    --heading-transform: uppercase;
    --heading-spacing: .26em;
    --closing-font: "Cormorant Garamond", Georgia, serif;
    --closing-size: 2.4rem;
    --monogram-font: "Cormorant Garamond", Georgia, serif;
    --button-font: "Tenor Sans", "Jost", sans-serif;
    --button-radius: 0;
    --divider-rule-display: none;
    --hero-pad: 120px 8px 96px;
    --hero-frame-inset: 26px 4px 62px;
    --hero-frame-border: 1px solid color-mix(in srgb, var(--inv-ornament) 60%, 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);
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-pad: 62px 28px 60px;
    --card-margin-top: 20px;
    --card-shadow:
        inset 0 0 0 10px var(--inv-surface),
        inset 0 0 0 11px color-mix(in srgb, var(--inv-ornament) 55%, transparent),
        0 24px 50px -30px rgba(40, 50, 20, .35);
    --box-bg: transparent;
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 50%, transparent);
    --box-radius: 0;
    --box-shadow: none;
    --photo-radius: 999px 999px 0 0;
    --photo-shadow: 0 0 0 8px var(--inv-surface), 0 0 0 9px color-mix(in srgb, var(--inv-ornament) 60%, transparent);
    --leaf-fill: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 72%, #fff), var(--inv-ornament) 45%, color-mix(in srgb, var(--inv-ornament) 72%, var(--inv-primary)));
    --fruit-fill: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-primary) 60%);
    --olive-divider: linear-gradient(90deg, var(--inv-ornament) 0 44%, var(--inv-primary) 44% 56%, var(--inv-ornament) 56%);
}

.inv--maslin .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 400px at 50% 40%, color-mix(in srgb, var(--inv-surface) 70%, transparent), transparent 72%),
        repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--inv-ornament) 5%, transparent) 3px 4px),
        repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--inv-ornament) 4%, transparent) 3px 4px),
        var(--inv-bg);
}

.inv--maslin .inv-hero__frame {
    display: block;
}

/* Olive branches: leaves (::before) and fruit (::after). Top-left of the first screen, bottom-right of the page. */
.inv--maslin .inv__deco--a,
.inv--maslin .inv__deco--b {
    display: block;
    aspect-ratio: 1;
    -webkit-mask: none;
    mask: none;
    background: none;
    opacity: .95;
}

.inv--maslin .inv__deco--a {
    --deco-a-width: min(54%, 300px);
    --deco-a-top: -6px;
    --deco-a-left: -10px;
}

.inv--maslin .inv__deco--b {
    --deco-b-width: min(56%, 300px);
    --deco-b-right: -10px;
    --deco-b-bottom: -6px;
}

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

.inv--maslin .inv__deco::before {
    background: var(--leaf-fill);
    -webkit-mask: url(../../img/invitations/ornaments/floral-olive-branch.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-olive-branch.svg) center / contain no-repeat;
}

.inv--maslin .inv__deco::after {
    background: var(--fruit-fill);
    -webkit-mask: url(../../img/invitations/ornaments/floral-olive-fruits.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-olive-fruits.svg) center / contain no-repeat;
}

/* A lighter sprig (leaves only) answering from the lower-right corner of the frame. */
.inv--maslin .inv-hero__corner--br {
    display: block;
    right: -8px;
    bottom: 22px;
    max-width: 180px;
    --hero-corner-image: url(../../img/invitations/ornaments/floral-olive-branch.svg);
    --hero-corner-size: 42%;
    --hero-corner-fill: var(--leaf-fill);
    --hero-corner-opacity: .75;
}

.inv--maslin .orn--hero-divider,
.inv--maslin .orn--divider,
.inv--maslin .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-olive-divider.svg);
    --orn-ratio: 300 / 60;
    --orn-fill: var(--olive-divider);
}

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

.inv--maslin .orn--divider {
    --orn-width: 78%;
    --orn-max: 300px;
}

.inv--maslin .orn--card-top {
    --orn-width: 58%;
    --orn-max: 240px;
    --orn-margin: -8px auto 14px;
}

.inv--maslin .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/line-diamond.svg);
    --orn-ratio: 240 / 20;
    --orn-width: 26%;
    --orn-max: 110px;
    --orn-margin: -8px auto 22px;
}

.inv--maslin .inv-countdown span,
.inv--maslin .inv-program__time {
    font-weight: 300;
}

/* ---------- Glicină: wisteria racemes hanging over the names from a twisting vine, an English garden in pastel ---------- */

.inv--glicina {
    --f-display: "Libre Baskerville", Georgia, serif;
    --f-names: "Petit Formal Script", "Libre Baskerville", cursive;
    --names-weight: 400;
    --names-size: clamp(2.3rem, 11cqi, 4rem);
    --names-line: 1.42;
    --amp-font: "Libre Baskerville", Georgia, serif;
    --amp-size: .44em;
    --kicker-font: "Libre Baskerville", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-size: .92rem;
    --kicker-spacing: .03em;
    --kicker-weight: 400;
    --date-font: "Libre Baskerville", Georgia, serif;
    --date-size: .84rem;
    --date-spacing: .36em;
    --heading-size: 1.7rem;
    --heading-weight: 400;
    --heading-style: italic;
    --message-size: 1.04rem;
    --family-size: 1rem;
    --closing-font: "Petit Formal Script", cursive;
    --closing-size: 1.7rem;
    --monogram-font: "Libre Baskerville", Georgia, serif;
    --divider-rule-display: none;
    --hero-pad: clamp(118px, 31cqi, 204px) 8px 76px;
    --hero-content-pad: 24px 0;
    --card-bg: var(--inv-surface);
    --card-radius: 26px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 30%, transparent);
    --card-pad: 116px 24px 56px;
    --card-pad-wide: 150px 48px 64px;
    --card-margin-top: 14px;
    --card-shadow: 0 26px 60px -34px color-mix(in srgb, var(--inv-primary) 50%, transparent);
    --box-bg: color-mix(in srgb, var(--inv-accent) 36%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 36%, transparent);
    --box-radius: 16px;
    --box-shadow: none;
    --photo-radius: 50%;
    --photo-ratio: 4 / 5;
    --photo-width: min(80%, 300px);
    --photo-shadow:
        0 0 0 6px var(--inv-surface),
        0 0 0 7px color-mix(in srgb, var(--inv-ornament) 70%, transparent),
        0 0 0 13px color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface)),
        0 0 0 14px color-mix(in srgb, var(--inv-ornament) 34%, transparent),
        0 26px 44px -26px rgba(0, 0, 0, .4);
    --button-radius: 999px;
    /* three tints: pale clusters at the back, sage leaves on a woody vine, full clusters in front (darker at the tips) */
    --wisteria: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 64%, var(--inv-surface)), var(--inv-ornament) 44%, color-mix(in srgb, var(--inv-ornament) 58%, var(--inv-primary)) 92%);
    --wisteria-pale: color-mix(in srgb, var(--inv-ornament) 44%, var(--inv-bg));
    --wisteria-vine: linear-gradient(180deg, color-mix(in srgb, var(--inv-muted) 70%, var(--floral-leaf)) 0 5%, var(--floral-leaf) 12%);
    --wisteria-leaf: linear-gradient(160deg, color-mix(in srgb, var(--floral-leaf) 74%, #fff), var(--floral-leaf) 60%);
}

.inv--glicina .inv__backdrop {
    background:
        radial-gradient(ellipse 120% 330px at 50% 0, color-mix(in srgb, var(--inv-ornament) 24%, transparent), transparent 72%),
        radial-gradient(ellipse 70% 30% at 100% 100%, color-mix(in srgb, var(--inv-ornament) 16%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 55%, var(--inv-bg)), var(--inv-bg) 560px);
}

/* The curtain: three stacked masks with one viewBox, across the top of the first screen. Clusters are long at the
   sides and short in the middle, so the names stay clear. On a phone the drawing is wider than the screen and its
   outer clusters fall off the edges; on a wide page it repeats sideways, like a pergola. */
.inv--glicina .inv-hero::before,
.inv--glicina .inv-hero::after,
.inv--glicina .inv-hero__frame,
.inv--glicina .inv-envelope::before,
.inv--glicina .inv-envelope::after,
.inv--glicina .inv-envelope__kicker::before {
    --curtain: clamp(500px, 128cqi, 692px);
    content: "";
    position: absolute;
    display: block;
    inset: 0 auto auto 50%;
    width: 100cqi;
    height: calc(var(--curtain) * 460 / 600);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
    translate: -50% 0;
    transform-origin: 50% 0;
    -webkit-mask: var(--curtain-image) center top / var(--curtain) auto repeat-x;
    mask: var(--curtain-image) center top / var(--curtain) auto repeat-x;
}

.inv--glicina .inv-hero::before,
.inv--glicina .inv-envelope::before {
    --curtain-image: url(../../img/invitations/ornaments/floral-wisteria-back.svg);
    background: var(--wisteria-pale);
    animation: floral-wisteria-sway 17s ease-in-out -6s infinite;
}

.inv--glicina .inv-hero__frame,
.inv--glicina .inv-envelope__kicker::before {
    --curtain-image: url(../../img/invitations/ornaments/floral-wisteria-vine.svg);
    background: var(--wisteria-vine);
}

.inv--glicina .inv-hero::after,
.inv--glicina .inv-envelope::after {
    --curtain-image: url(../../img/invitations/ornaments/floral-wisteria-front.svg);
    background: var(--wisteria);
    animation: floral-wisteria-sway 13s ease-in-out infinite;
}

/* The same curtain over the envelope screen, a little smaller and behind the envelope. */
.inv--glicina .inv-envelope::before,
.inv--glicina .inv-envelope::after,
.inv--glicina .inv-envelope__kicker::before {
    --curtain: clamp(440px, 100cqi, 640px);
    z-index: -1;
}

/* A slow breeze: the clusters lean from the vine, which stays still. */
@keyframes floral-wisteria-sway {
    0%, 100% { transform: skewX(-.9deg); }
    50% { transform: skewX(.9deg); }
}

/* Thumbnails (first screen only, no scroll arrow) stay still, like the ambient effects of the base. */
.inv--glicina .inv-hero:not(:has(.inv-hero__scroll))::before,
.inv--glicina .inv-hero:not(:has(.inv-hero__scroll))::after {
    animation: none;
}

.inv--glicina .inv-hero__kicker {
    margin-bottom: 6px;
}

.inv--glicina .inv-hero__amp {
    margin: -.5em 0;
}

.inv--glicina .orn--hero-divider,
.inv--glicina .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-wisteria-sprig.svg);
    --orn-ratio: 120 / 46;
    --orn-fill: linear-gradient(180deg, var(--floral-leaf) 0 30%, var(--inv-ornament) 30%, color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-primary)));
}

.inv--glicina .orn--hero-divider {
    --orn-width: min(30cqi, 124px);
    --orn-max: none;
    --orn-margin: 10px auto 0;
}

.inv--glicina .orn--heading {
    --orn-width: 84px;
    --orn-margin: -10px auto 18px;
}

.inv--glicina .inv-hero__date {
    margin-top: 16px;
}

/* A small vine with hanging clusters between the sections. */
.inv--glicina .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-wisteria-divider.svg);
    --orn-ratio: 300 / 84;
    --orn-width: 78%;
    --orn-max: 290px;
    --orn-fill: linear-gradient(180deg, var(--floral-leaf) 0 23%, color-mix(in srgb, var(--inv-ornament) 72%, var(--inv-surface)) 23%, var(--inv-ornament) 60%, color-mix(in srgb, var(--inv-ornament) 58%, var(--inv-primary)));
}

/* The vine climbs over both top corners of the card: leaves (::before) and clusters (::after). */
.inv--glicina .inv-corner--tl,
.inv--glicina .inv-corner--tr {
    display: block;
    -webkit-mask: none;
    mask: none;
    background: none;
    --corner-ratio: 220 / 230;
    --corner-size: 41%;
    --corner-max: 200px;
    --corner-inset: -9px;
    --corner-opacity: 1;
}

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

.inv--glicina .inv-corner::before {
    background: var(--wisteria-leaf);
    -webkit-mask: url(../../img/invitations/ornaments/floral-wisteria-corner-leaves.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-wisteria-corner-leaves.svg) center / contain no-repeat;
}

.inv--glicina .inv-corner::after {
    background: var(--wisteria);
    -webkit-mask: url(../../img/invitations/ornaments/floral-wisteria-corner.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-wisteria-corner.svg) center / contain no-repeat;
}

/* Libre Baskerville is wide: the fixed sizes of the base are brought down to match. */
.inv--glicina .inv-when__date {
    font-size: 1.7rem;
}

.inv--glicina .inv-countdown span {
    font-size: 1.75rem;
    font-style: normal;
}

.inv--glicina .inv-program__time {
    font-size: 1.8rem;
}

.inv--glicina .inv-program__venue,
.inv--glicina .inv-dress__text,
.inv--glicina .inv-closing__line,
.inv--glicina .rsvp-person__name {
    font-size: 1.06rem;
}

.inv--glicina .inv-closing__names {
    line-height: 1.5;
}

.inv--glicina .inv-monogram {
    font-style: italic;
}

/* Pill buttons, but the message box keeps a calmer shape. */
.inv--glicina .rsvp-field textarea {
    border-radius: 18px;
}

/* ---------- Grădină de seară: large blooms on a dark ground, growing in from two opposite corners like a still life ---------- */

.inv--gradina-de-seara {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-names: "Bodoni Moda", "Playfair Display", Georgia, serif;
    --names-weight: 400;
    --names-style: italic;
    --names-size: clamp(3rem, 15cqi, 5.6rem);
    --names-line: 1.04;
    --names-shadow: 0 0 34px color-mix(in srgb, var(--inv-primary) 46%, transparent), 0 0 3px color-mix(in srgb, var(--inv-primary) 30%, transparent);
    --amp-size: .5em;
    --kicker-font: "Bodoni Moda", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-size: 1rem;
    --kicker-spacing: .04em;
    --kicker-weight: 400;
    --kicker-color: var(--inv-text);
    --date-font: "Bodoni Moda", Georgia, serif;
    --date-size: 1.02rem;
    --date-spacing: .3em;
    --heading-font: "Bodoni Moda", Georgia, serif;
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 2rem;
    --message-size: 1.3rem;
    --closing-font: "Bodoni Moda", Georgia, serif;
    --closing-size: 2.1rem;
    --monogram-font: "Bodoni Moda", Georgia, serif;
    --divider-rule-display: none;
    --hero-pad: clamp(140px, 36cqi, 200px) 8px clamp(124px, 32cqi, 170px);
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 55%, transparent), transparent);
    --card-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 94%, var(--inv-primary)), var(--inv-surface) 240px);
    --card-radius: 3px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-primary) 50%, transparent);
    --card-pad: 40px 24px 56px;
    --card-margin-top: 10px;
    --card-shadow:
        0 0 0 5px var(--inv-bg),
        0 0 0 6px color-mix(in srgb, var(--inv-primary) 20%, transparent),
        0 34px 80px rgba(0, 0, 0, .55);
    --box-bg: color-mix(in srgb, var(--inv-accent) 40%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-primary) 22%, transparent);
    --box-radius: 3px;
    --box-shadow: none;
    --button-radius: 2px;
    /* the photograph hangs like a small painting in a thin frame */
    --photo-radius: 2px;
    --photo-ratio: 4 / 5;
    --photo-width: min(80%, 300px);
    --photo-pad: 8px;
    --photo-bg: linear-gradient(145deg, color-mix(in srgb, var(--inv-primary) 82%, var(--inv-bg)), color-mix(in srgb, var(--inv-primary) 42%, var(--inv-bg)) 48%, color-mix(in srgb, var(--inv-primary) 74%, var(--inv-bg)));
    --photo-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-bg) 70%, #000), 0 28px 50px -18px rgba(0, 0, 0, .75);
    /* three tints of the still life: dark foliage, petals in the ornament colour, highlights in the primary colour */
    --evening-leaf: linear-gradient(140deg, color-mix(in srgb, var(--floral-leaf) 52%, var(--inv-bg)), color-mix(in srgb, var(--floral-leaf) 27%, var(--inv-bg)) 70%);
    --evening-bloom: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--inv-ornament) 78%, var(--inv-primary)), var(--inv-ornament) 34%, color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-bg)) 80%);
    --evening-light: radial-gradient(circle at 44% 26%, color-mix(in srgb, var(--inv-primary) 86%, #fff), var(--inv-primary) 46%, color-mix(in srgb, var(--inv-primary) 76%, var(--inv-ornament)));
    --evening-sprig: color-mix(in srgb, var(--floral-leaf) 62%, var(--inv-surface));
}

.inv--gradina-de-seara .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 380px at 50% 340px, color-mix(in srgb, var(--inv-accent) 70%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 78%, #000), var(--inv-bg) 260px, var(--inv-bg) calc(100% - 320px), color-mix(in srgb, var(--inv-bg) 78%, #000));
}

/* The still life. Each corner is two stacked boxes of the same size: the first holds the foliage (::before) and the
   dahlias (::after), the second the light blooms. The drawing's corner sits 64 units inside its 560 viewBox, so
   the boxes are pushed out by that much: on a phone the flowers run off the screen, on a wide page they show whole. */
.inv--gradina-de-seara .inv-hero__corner {
    display: block;
    width: min(100cqi, 540px);
    max-width: none;
    aspect-ratio: 1;
    -webkit-mask: none;
    mask: none;
    background: none;
    opacity: 1;
}

.inv--gradina-de-seara .inv-hero__corner--tl,
.inv--gradina-de-seara .inv-hero__corner--tr {
    top: 0;
    right: auto;
    left: -16px;
    transform: translate(-11.43%, -11.43%);
    /* nothing is drawn above the invitation's own top edge (it may sit inside a preview panel) */
    clip-path: inset(11.43% -20% -20% -20%);
}

.inv--gradina-de-seara .inv-hero__corner--bl,
.inv--gradina-de-seara .inv-hero__corner--br {
    top: auto;
    left: auto;
    right: -16px;
    bottom: 0;
    width: min(80cqi, 460px);
    transform: translate(11.43%, 11.43%) rotate(180deg);
}

.inv--gradina-de-seara .inv-hero__corner--tl,
.inv--gradina-de-seara .inv-hero__corner--bl {
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .38));
}

.inv--gradina-de-seara .inv-hero__corner--tl::before,
.inv--gradina-de-seara .inv-hero__corner--tl::after,
.inv--gradina-de-seara .inv-hero__corner--bl::before,
.inv--gradina-de-seara .inv-hero__corner--bl::after {
    content: "";
    position: absolute;
    inset: 0;
}

.inv--gradina-de-seara .inv-hero__corner--tl::before,
.inv--gradina-de-seara .inv-hero__corner--bl::before {
    background: var(--evening-leaf);
    -webkit-mask: url(../../img/invitations/ornaments/floral-evening-leaves.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-evening-leaves.svg) center / contain no-repeat;
}

.inv--gradina-de-seara .inv-hero__corner--tl::after,
.inv--gradina-de-seara .inv-hero__corner--bl::after {
    background: var(--evening-bloom);
    -webkit-mask: url(../../img/invitations/ornaments/floral-evening-blooms.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-evening-blooms.svg) center / contain no-repeat;
}

.inv--gradina-de-seara .inv-hero__corner--tr,
.inv--gradina-de-seara .inv-hero__corner--br {
    background: var(--evening-light);
    -webkit-mask: url(../../img/invitations/ornaments/floral-evening-lights.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-evening-lights.svg) center / contain no-repeat;
}

.inv--gradina-de-seara .inv-hero__kicker {
    margin-bottom: 18px;
}

/* The arrow moves up, clear of the flowers in the lower corner. */
.inv--gradina-de-seara .inv-hero__scroll {
    bottom: clamp(76px, 20cqi, 110px);
}

.inv--gradina-de-seara .inv-hero__amp {
    color: color-mix(in srgb, var(--inv-primary) 78%, var(--inv-ornament));
}

/* A hairline under the names instead of an ornament: the flowers are in the corners. */
.inv--gradina-de-seara .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 54px;
    --orn-ratio: 54;
    --orn-margin: 20px auto 0;
    --orn-fill: color-mix(in srgb, var(--inv-primary) 60%, transparent);
}

.inv--gradina-de-seara .inv-hero__date {
    margin-top: 18px;
}

/* One small anemone between leaves: at the top of the card and between the sections. */
.inv--gradina-de-seara .orn--card-top,
.inv--gradina-de-seara .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-evening-divider.svg);
    --orn-ratio: 300 / 70;
    --orn-fill: linear-gradient(90deg, var(--evening-sprig) 0 40%, var(--inv-primary) 40% 60%, var(--evening-sprig) 60%);
}

.inv--gradina-de-seara .orn--card-top {
    --orn-width: 70%;
    --orn-max: 270px;
    --orn-margin: 0 auto 4px;
}

.inv--gradina-de-seara .orn--divider {
    --orn-width: 76%;
    --orn-max: 290px;
}

.inv--gradina-de-seara .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/floral-evening-bloom.svg);
    --orn-ratio: 1;
    --orn-width: 24px;
    --orn-margin: -10px auto 20px;
    --orn-fill: var(--inv-ornament);
}

.inv--gradina-de-seara .inv-countdown span,
.inv--gradina-de-seara .inv-program__time {
    font-style: normal;
}

.inv--gradina-de-seara .inv-countdown span {
    font-size: 2rem;
}

.inv--gradina-de-seara .inv-monogram {
    font-style: italic;
    font-size: 1.15rem;
}

/* The envelope screen repeats the still life: top-left and, smaller, bottom-right, behind the envelope. */
.inv--gradina-de-seara .inv-envelope::before,
.inv--gradina-de-seara .inv-envelope::after,
.inv--gradina-de-seara .inv-envelope__kicker::before,
.inv--gradina-de-seara .inv-envelope__kicker::after,
.inv--gradina-de-seara .inv-envelope .inv-button::before,
.inv--gradina-de-seara .inv-envelope .inv-button::after {
    content: "";
    position: absolute;
    z-index: -1;
    aspect-ratio: 1;
    pointer-events: none;
}

.inv--gradina-de-seara .inv-envelope::before,
.inv--gradina-de-seara .inv-envelope__kicker::before,
.inv--gradina-de-seara .inv-envelope .inv-button::before {
    top: 0;
    left: 0;
    width: min(100vw, 62vh, 520px);
    transform: translate(-11.43%, -11.43%);
}

.inv--gradina-de-seara .inv-envelope__kicker::after,
.inv--gradina-de-seara .inv-envelope .inv-button::after,
.inv--gradina-de-seara .inv-envelope::after {
    right: 0;
    bottom: 0;
    width: min(84vw, 52vh, 440px);
    transform: translate(11.43%, 11.43%) rotate(180deg);
}

.inv--gradina-de-seara .inv-envelope::before,
.inv--gradina-de-seara .inv-envelope__kicker::after {
    background: var(--evening-leaf);
    -webkit-mask: url(../../img/invitations/ornaments/floral-evening-leaves.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-evening-leaves.svg) center / contain no-repeat;
}

.inv--gradina-de-seara .inv-envelope__kicker::before,
.inv--gradina-de-seara .inv-envelope .inv-button::after {
    background: var(--evening-bloom);
    -webkit-mask: url(../../img/invitations/ornaments/floral-evening-blooms.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-evening-blooms.svg) center / contain no-repeat;
}

.inv--gradina-de-seara .inv-envelope .inv-button::before,
.inv--gradina-de-seara .inv-envelope::after {
    background: var(--evening-light);
    -webkit-mask: url(../../img/invitations/ornaments/floral-evening-lights.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/floral-evening-lights.svg) center / contain no-repeat;
}