/* Collection "rustic": boho, lemn și kraft, motive populare românești. Contract: docs/invitation-templates.md.
   Ornaments: ../../img/invitations/ornaments/rustic-*.svg, textures: ../../img/invitations/textures/rustic-*.svg.
   Every ornament is a black mask tinted from the palette; the hero pseudo-elements (::before/::after) are used as
   extra decoration slots (macramé, twine, embroidered bands, vine garland, wheat field). */

/* ---------- the collection's motion (ADR-0069): warm fireflies over the first screen, ornaments that sway in a
   light wind, the wheat divider at the corner of each wide section ---------- */

.inv-c--rustic {
    --pv-dust-display: block;
    --pv-dust: var(--inv-ornament);
    --pv-dust-opacity: .5;
    --pv-dust-time: 52s;
    --pv-orn-anim: inv-sway-soft;
    --pv-orn-time: 8s;
    --pv-deco: url(../../img/invitations/ornaments/rustic-wheat-divider.svg);
    --pv-deco-display: block;
    --pv-deco-ratio: 320 / 56;
}

.inv-c--rustic {
    --body-weight: 400;
}

/* ---------- Boho: macramé wall hanging, hanging feathers, arch window, boho rainbow, terracotta ---------- */

.inv--boho {
    --f-display: "Fraunces", Georgia, serif;
    --f-names: "Allura", "Fraunces", cursive;
    --names-weight: 400;
    --names-size: clamp(3.4rem, 19cqi, 7rem);
    --names-line: .95;
    --names-shadow: none;
    --amp-font: "Fraunces", Georgia, serif;
    --amp-style: italic;
    --amp-size: .34em;
    --amp-color: var(--inv-ornament);
    --kicker-font: "Jost", "Segoe UI", sans-serif;
    --kicker-size: .64rem;
    --kicker-spacing: .38em;
    --date-font: "Fraunces", Georgia, serif;
    --date-size: 1rem;
    --date-spacing: .32em;
    --heading-font: "Fraunces", Georgia, serif;
    --heading-style: italic;
    --heading-size: 2.2rem;
    --text-display-font: "Fraunces", Georgia, serif;
    --message-size: 1.16rem;
    --closing-font: "Allura", cursive;
    --closing-size: 3.2rem;
    --monogram-font: "Fraunces", Georgia, serif;
    --monogram-radius: 999px 999px 6px 6px;
    --divider-rule-display: none;
    --hero-halo: none;
    --hero-pad: 176px 8px 100px;
    --card-bg: var(--inv-surface);
    --card-radius: 999px 999px 20px 20px;
    --card-pad: 116px 24px 56px;
    --card-pad-wide: 170px 64px 64px;
    --card-margin-top: 24px;
    --card-shadow:
        0 0 0 9px color-mix(in srgb, var(--inv-surface) 55%, transparent),
        0 0 0 10px color-mix(in srgb, var(--inv-ornament) 50%, transparent),
        0 30px 60px -34px rgba(90, 45, 20, .5);
    --box-bg: color-mix(in srgb, var(--inv-accent) 42%, var(--inv-surface));
    --box-border: 0 solid transparent;
    --box-radius: 34px 34px 12px 12px;
    --box-shadow: none;
    --photo-width: min(86%, 320px);
    --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) 70%, transparent),
        0 26px 44px -26px rgba(0, 0, 0, .45);
    --button-radius: 999px;
    --env-front: linear-gradient(160deg, var(--inv-accent), color-mix(in srgb, var(--inv-accent) 72%, var(--inv-primary)));
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 60%, #fff), var(--inv-primary) 60%, color-mix(in srgb, var(--inv-primary) 70%, #000));
    --seal-color: var(--inv-on-primary);
}

.inv--boho .inv__backdrop {
    background:
        radial-gradient(640px 520px at 0% 0%, color-mix(in srgb, var(--inv-ornament) 34%, transparent), transparent 72%),
        radial-gradient(560px 480px at 100% 620px, color-mix(in srgb, var(--inv-primary) 14%, transparent), transparent 72%),
        radial-gradient(ellipse 80% 30% at 0% 70%, color-mix(in srgb, var(--inv-ornament) 20%, transparent), transparent 72%),
        radial-gradient(ellipse 70% 30% at 100% 100%, color-mix(in srgb, var(--inv-primary) 14%, transparent), transparent 72%),
        var(--inv-bg);
}

.inv--boho .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/rustic-linen.svg);
    --texture-size: 48px;
    --texture-opacity: .06;
    --texture-fill: var(--inv-text);
}

/* The arch window behind the names. */
.inv--boho .inv-hero__frame {
    display: block;
    --hero-frame-inset: 104px 7% 64px;
    --hero-frame-border: 0 solid transparent;
    --hero-frame-radius: 999px 999px 0 0;
    --hero-frame-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 62%, var(--inv-surface)), color-mix(in srgb, var(--inv-accent) 90%, var(--inv-ornament)));
    --hero-frame-shadow:
        0 0 0 10px color-mix(in srgb, var(--inv-surface) 45%, transparent),
        0 0 0 11px color-mix(in srgb, var(--inv-ornament) 55%, transparent);
}

/* Macramé hanging from a dowel over the top of the arch. */
.inv--boho .inv-hero::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 50%;
    z-index: 1;
    width: min(60%, 290px);
    aspect-ratio: 240 / 196;
    translate: -50% 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 62%, var(--inv-text)), var(--inv-ornament) 55%);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-macrame.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-macrame.svg) center / contain no-repeat;
    pointer-events: none;
}

/* A small boho rainbow at the foot of the arch. */
.inv--boho .inv-hero::after {
    content: "";
    position: absolute;
    bottom: 64px;
    left: 50%;
    width: min(44%, 220px);
    aspect-ratio: 2;
    translate: -50% 0;
    background: radial-gradient(50% 100% at 50% 100%,
        transparent 0 36%,
        var(--inv-primary) 36.5% 48%,
        transparent 48.5% 54%,
        var(--inv-ornament) 54.5% 66%,
        transparent 66.5% 72%,
        color-mix(in srgb, var(--inv-ornament) 45%, var(--inv-accent)) 72.5% 84%,
        transparent 84.5%);
    opacity: .5;
    pointer-events: none;
}

.inv--boho .inv-hero__corner--tl,
.inv--boho .inv-hero__corner--tr {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/rustic-feather-hang.svg);
    --hero-corner-ratio: 120 / 320;
    --hero-corner-size: 19%;
    --hero-corner-inset: 6px;
    --hero-corner-opacity: .85;
}

.inv--boho .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/rustic-feather.svg);
    --amb-ratio: 60 / 200;
    --amb-size: 14px;
    --amb-duration: 19s;
    --amb-opacity: .45;
}

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

.inv--boho .inv-hero .orn--hero-divider,
.inv--boho .inv-divider .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-boho-sun.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 86%;
    --orn-max: 300px;
}

.inv--boho .inv-hero .orn--hero-divider {
    --orn-width: 74%;
    --orn-max: 250px;
}

/* Countdown tiles as little arches. */
.inv--boho .inv-countdown > div {
    border-radius: 999px 999px 10px 10px;
    padding-top: 20px;
}

/* ---------- Pampas: dried pampas plumes swaying at the edges, sand and beige, airy serif ---------- */

.inv--pampas {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Tenor Sans", "Jost", sans-serif;
    --f-names: "Cormorant Garamond", Georgia, serif;
    --names-weight: 300;
    --names-style: italic;
    --names-size: clamp(3.1rem, 16cqi, 6.4rem);
    --names-line: .96;
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: .66em;
    --amp-color: var(--inv-ornament);
    --kicker-font: "Tenor Sans", "Jost", sans-serif;
    --kicker-size: .64rem;
    --kicker-weight: 400;
    --kicker-spacing: .46em;
    --date-font: "Tenor Sans", "Jost", sans-serif;
    --date-size: .78rem;
    --date-spacing: .5em;
    --heading-font: "Italianno", cursive;
    --heading-size: 3.3rem;
    --heading-weight: 400;
    --label-font: "Tenor Sans", "Jost", sans-serif;
    --label-weight: 400;
    --message-size: 1.34rem;
    --closing-font: "Italianno", cursive;
    --closing-size: 3.6rem;
    --monogram-font: "Cormorant Garamond", Georgia, serif;
    --monogram-radius: 0;
    --divider-rule-display: none;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 88%, transparent) 40%, transparent);
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-pad: 64px 30px 60px;
    --card-shadow:
        inset 0 0 0 12px var(--inv-surface),
        inset 0 0 0 13px color-mix(in srgb, var(--inv-ornament) 55%, transparent),
        0 26px 50px -32px rgba(70, 50, 30, .38);
    --box-bg: transparent;
    --box-border: 0 solid transparent;
    --box-radius: 0;
    --box-shadow: none;
    --photo-width: min(78%, 290px);
    --photo-ratio: 4 / 5;
    --photo-radius: 0;
    --photo-shadow: 14px 14px 0 0 var(--inv-accent), 0 0 0 1px color-mix(in srgb, var(--inv-ornament) 40%, transparent);
    --button-font: "Tenor Sans", "Jost", sans-serif;
    --button-radius: 0;
    --seal-radius: 0;
}

.inv--pampas .inv__backdrop {
    background:
        radial-gradient(900px 520px at 50% 0, var(--inv-surface), transparent 70%),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg)) 60%, var(--inv-bg));
}

.inv--pampas .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/rustic-kraft-fiber.svg);
    --texture-size: 220px;
    --texture-opacity: .1;
}

.inv--pampas .inv-hero__frame {
    display: block;
    --hero-frame-inset: 32px 12px 28px;
    --hero-frame-border: 1px solid color-mix(in srgb, var(--inv-ornament) 60%, transparent);
}

/* Plumes rooted below the first screen, three on each side, swaying from their stems. */
.inv--pampas .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/rustic-pampas.svg);
    --amb-ratio: 80 / 300;
    --amb-anim: inv-sway;
    --amb-duration: 10s;
    --amb-size: 80px;
    --amb-opacity: .9;
    --amb-fill: linear-gradient(180deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-text)) 45%, color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-text)));
}

.inv--pampas .inv__ambient i {
    top: auto;
    bottom: -3%;
    transform-origin: 50% 100%;
    animation-timing-function: ease-in-out;
}

.inv--pampas .inv__ambient i:nth-child(n + 7) { display: none; }
.inv--pampas .inv__ambient i:nth-child(1) { left: -6%; rotate: -18deg; }
.inv--pampas .inv__ambient i:nth-child(2) { left: 4%; rotate: -6deg; }
.inv--pampas .inv__ambient i:nth-child(3) { left: 12%; rotate: -27deg; }
.inv--pampas .inv__ambient i:nth-child(4) { left: auto; right: -6%; rotate: 18deg; }
.inv--pampas .inv__ambient i:nth-child(5) { left: auto; right: 4%; rotate: 6deg; }
.inv--pampas .inv__ambient i:nth-child(6) { left: auto; right: 12%; rotate: 27deg; }

.inv--pampas .inv-hero .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-pampas-bouquet.svg);
    --orn-ratio: 230 / 360;
    --orn-width: 34%;
    --orn-max: 140px;
    --orn-fill: linear-gradient(180deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-text)) 50%, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-text)));
}

.inv--pampas .inv-hero .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 44px;
    --orn-ratio: 44;
    --orn-margin: 22px auto 0;
}

.inv--pampas .inv-divider .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-pampas-divider.svg);
    --orn-ratio: 320 / 60;
    --orn-width: 88%;
    --orn-fill: color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-text));
}

.inv--pampas .inv-hero .orn--hero-divider {
    --orn-fill: color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-text));
}

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

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

.inv--pampas .inv-countdown > div + div {
    border-left: 1px solid var(--inv-line);
}

/* ---------- Kraft: kraft paper, a tag tied with twine, postmark, masking tape, torn paper, handwriting ---------- */

.inv--kraft {
    --f-display: "Libre Baskerville", Georgia, serif;
    --f-body: "Libre Baskerville", Georgia, serif;
    --f-names: "Caveat", "Libre Baskerville", cursive;
    --names-weight: 600;
    --names-size: clamp(3.2rem, 17cqi, 6.4rem);
    --names-line: .95;
    --names-color: var(--inv-text);
    --names-shadow: none;
    --amp-font: "Caveat", cursive;
    --amp-style: normal;
    --amp-size: .62em;
    --amp-color: var(--inv-primary);
    --kicker-font: "Libre Baskerville", Georgia, serif;
    --kicker-size: .62rem;
    --kicker-weight: 400;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-muted);
    --date-font: "Libre Baskerville", Georgia, serif;
    --date-size: .78rem;
    --date-spacing: .34em;
    --heading-font: "Libre Baskerville", Georgia, serif;
    --heading-size: .84rem;
    --heading-weight: 700;
    --heading-transform: uppercase;
    --heading-spacing: .3em;
    --label-font: "Libre Baskerville", Georgia, serif;
    --label-size: .62rem;
    --label-weight: 400;
    --text-display-font: "Libre Baskerville", Georgia, serif;
    --message-size: .96rem;
    --message-style: normal;
    --family-font: "Caveat", cursive;
    --family-size: 1.65rem;
    --closing-font: "Caveat", cursive;
    --closing-size: 3rem;
    --monogram-font: "Caveat", cursive;
    --divider-rule-display: none;
    --hero-halo: none;
    --hero-pad: 160px 26px 120px;
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-pad: 52px 24px 48px;
    --card-margin-top: 34px;
    --card-shadow: none;
    --box-bg: color-mix(in srgb, var(--inv-accent) 28%, var(--inv-surface));
    --box-border: 1px dashed color-mix(in srgb, var(--inv-ornament) 75%, transparent);
    --box-radius: 3px;
    --box-shadow: none;
    --photo-width: min(80%, 290px);
    --photo-ratio: 5 / 6;
    --photo-radius: 2px;
    --photo-pad: 12px 12px 46px;
    --pv-kb-photo: none; /* the photo does not grow over its paper border */
    --photo-bg: color-mix(in srgb, var(--inv-surface) 40%, #fff);
    --photo-rotate: -3deg;
    --photo-shadow: 0 16px 30px -14px rgba(40, 25, 10, .45);
    --button-font: "Libre Baskerville", Georgia, serif;
    --button-radius: 3px;
    --button-spacing: .16em;
    --env-bg: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--inv-bg) 55%, var(--inv-surface)), color-mix(in srgb, var(--inv-bg) 82%, var(--inv-ornament)) 75%);
    --env-fill: color-mix(in srgb, var(--inv-bg) 70%, var(--inv-ornament));
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-bg) 86%, var(--inv-ornament)), color-mix(in srgb, var(--inv-bg) 68%, var(--inv-ornament)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 62%, var(--inv-ornament)), color-mix(in srgb, var(--inv-bg) 84%, var(--inv-ornament)));
    --env-radius: 3px;
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 60%, #fff), var(--inv-primary) 58%, color-mix(in srgb, var(--inv-primary) 70%, #000));
    --seal-color: var(--inv-on-primary);
}

.inv--kraft .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 60% at 50% 30%, transparent 40%, color-mix(in srgb, var(--inv-ornament) 24%, transparent)),
        color-mix(in srgb, var(--inv-bg) 82%, var(--inv-ornament));
}

.inv--kraft .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/rustic-kraft-fiber.svg);
    --texture-size: 220px;
    --texture-opacity: .34;
    --texture-fill: color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-text));
}

/* The paper tag holding the names: cut top corners, a punched hole with a reinforcement ring. */
.inv--kraft .inv-hero__frame {
    display: block;
    --hero-frame-inset: 100px 4% 74px;
    --hero-frame-border: 0 solid transparent;
    --hero-frame-bg:
        radial-gradient(circle at 50% 44px, color-mix(in srgb, var(--inv-ornament) 40%, var(--inv-surface)) 0 17px, transparent 17.5px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 90%, var(--inv-ornament)), var(--inv-surface) 22%, var(--inv-surface) 82%, color-mix(in srgb, var(--inv-surface) 90%, var(--inv-ornament)));
    clip-path: polygon(20% 0, 80% 0, 100% 58px, 100% 100%, 0 100%, 0 58px);
    -webkit-mask: radial-gradient(circle at 50% 44px, transparent 8px, #000 8.5px);
    mask: radial-gradient(circle at 50% 44px, transparent 8px, #000 8.5px);
}

/* Paper thickness under the tag. */
.inv--kraft .inv-hero::after {
    content: "";
    position: absolute;
    inset: 104px calc(4% - 3px) 70px calc(4% + 3px);
    z-index: -1;
    background: color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    clip-path: polygon(20% 0, 80% 0, 100% 58px, 100% 100%, 0 100%, 0 58px);
    opacity: .55;
    pointer-events: none;
}

/* Twine through the hole of the tag. */
.inv--kraft .inv-hero::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    z-index: 1;
    width: 172px;
    aspect-ratio: 140 / 170;
    translate: -50% 0;
    background: var(--inv-ornament);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-twine.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-twine.svg) center / contain no-repeat;
    pointer-events: none;
}

.inv--kraft .inv-hero .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 120px;
    --orn-ratio: 60;
    --orn-fill: repeating-linear-gradient(90deg, var(--inv-ornament) 0 6px, transparent 6px 10px);
    --orn-margin: 20px auto 0;
}

.inv--kraft .inv-hero .orn--hero-bottom {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-postmark.svg);
    --orn-ratio: 230 / 96;
    --orn-width: 64%;
    --orn-max: 220px;
    --orn-fill: var(--inv-primary);
    --orn-opacity: .7;
    --orn-transform: rotate(-7deg);
    --orn-margin: 26px auto 0;
}

.inv--kraft .inv-hero__names {
    rotate: -2deg;
}

.inv--kraft .inv-card {
    filter: drop-shadow(0 14px 16px rgba(40, 25, 10, .2));
}

/* Torn paper along the top and bottom edges of the card. */
.inv--kraft .inv-card::before,
.inv--kraft .inv-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 14px;
    background: var(--inv-surface);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-torn-top.svg) repeat-x 0 0 / 120px 14px;
    mask: url(../../img/invitations/ornaments/rustic-torn-top.svg) repeat-x 0 0 / 120px 14px;
    pointer-events: none;
}

.inv--kraft .inv-card::before {
    bottom: calc(100% - 1px);
}

.inv--kraft .inv-card::after {
    top: calc(100% - 1px);
    -webkit-mask-image: url(../../img/invitations/ornaments/rustic-torn.svg);
    mask-image: url(../../img/invitations/ornaments/rustic-torn.svg);
}

/* Masking tape holding the card's top corners. */
.inv--kraft .inv-corner--tl,
.inv--kraft .inv-corner--tr {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/rustic-tape.svg);
    --corner-size: 24%;
    --corner-max: 110px;
    --corner-inset: -24px;
    --corner-opacity: .8;
    --corner-fill: color-mix(in srgb, var(--inv-accent) 65%, var(--inv-ornament));
}

.inv--kraft .inv-divider .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-twine-divider.svg);
    --orn-ratio: 320 / 56;
    --orn-width: 88%;
}

/* Headings stamped in ink. */
.inv--kraft .inv-heading {
    display: table;
    margin: 0 auto 26px;
    padding: .75em 1em .65em 1.3em;
    border: 2px solid currentColor;
    border-radius: 3px;
    box-shadow: inset 0 0 0 3px var(--inv-surface), inset 0 0 0 4px currentColor;
    rotate: -2deg;
    opacity: .88;
}

.inv--kraft .inv-message p {
    line-height: 1.95;
    letter-spacing: .02em;
}

.inv--kraft .inv-when__date,
.inv--kraft .inv-program__time,
.inv--kraft .inv-countdown span {
    font-family: "Caveat", cursive;
    font-weight: 600;
}

.inv--kraft .inv-when__date {
    font-size: 2.7rem;
}

.inv--kraft .inv-countdown small {
    font-size: .56rem;
    letter-spacing: .1em;
}

.inv--kraft .inv-program__index {
    border: 1.5px dashed var(--inv-primary);
}

/* Tape over the top of the polaroid. */
.inv--kraft .inv-photo::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    z-index: 1;
    width: 88px;
    aspect-ratio: 1;
    translate: -50% 0;
    rotate: 43deg;
    background: color-mix(in srgb, var(--inv-accent) 65%, var(--inv-ornament));
    -webkit-mask: url(../../img/invitations/ornaments/rustic-tape.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-tape.svg) center / contain no-repeat;
    opacity: .85;
    pointer-events: none;
}

/* ---------- Ie românească: cross-stitch bands in red and black on linen ---------- */

.inv--ie-romaneasca {
    --f-display: "Lora", Georgia, serif;
    --f-names: "Yeseva One", "Lora", serif;
    --names-weight: 400;
    --names-size: clamp(2.9rem, 14.5cqi, 5.6rem);
    --names-line: 1.04;
    --names-color: var(--inv-text);
    --amp-font: "Lora", Georgia, serif;
    --amp-style: italic;
    --amp-size: .42em;
    --amp-color: var(--inv-primary);
    --kicker-font: "Forum", Georgia, serif;
    --kicker-size: .84rem;
    --kicker-weight: 400;
    --kicker-spacing: .32em;
    --date-font: "Forum", Georgia, serif;
    --date-size: 1.02rem;
    --date-spacing: .4em;
    --heading-font: "Yeseva One", Georgia, serif;
    --heading-size: 1.9rem;
    --heading-weight: 400;
    --heading-color: var(--inv-text);
    --label-font: "Forum", Georgia, serif;
    --label-size: .82rem;
    --label-color: var(--inv-primary);
    --text-display-font: "Lora", Georgia, serif;
    --message-size: 1.12rem;
    --closing-font: "Yeseva One", Georgia, serif;
    --closing-size: 2.3rem;
    --monogram-font: "Yeseva One", Georgia, serif;
    --divider-rule-display: none;
    --hero-pad: 136px 8px 150px;
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-pad: 92px 22px 92px;
    --card-pad-wide: 104px 48px 104px;
    --card-shadow: 0 24px 50px -30px rgba(40, 20, 15, .35);
    --box-bg: var(--inv-surface);
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 45%, transparent);
    --box-radius: 0;
    --box-shadow: none;
    --photo-width: min(84%, 300px);
    --photo-ratio: 4 / 5;
    --photo-radius: 0;
    --photo-pad: 10px;
    --pv-kb-photo: none; /* the photo does not grow over its paper border */
    --photo-bg: var(--inv-surface);
    --photo-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-ornament) 60%, transparent), 0 20px 40px -24px rgba(0, 0, 0, .45);
    --button-radius: 0;
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-ornament) 60%, #fff), var(--inv-ornament) 58%, color-mix(in srgb, var(--inv-ornament) 70%, #000));
    --seal-color: #fff;
}

.inv--ie-romaneasca .inv__backdrop {
    background:
        radial-gradient(900px 600px at 50% 380px, var(--inv-surface), transparent 70%),
        var(--inv-bg);
}

.inv--ie-romaneasca .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/rustic-linen.svg);
    --texture-size: 36px;
    --texture-opacity: .07;
    --texture-fill: var(--inv-text);
}

/* The embroidered bands (altiță) across the top and the bottom of the first screen, in the ornament red. */
.inv--ie-romaneasca .inv-hero::before,
.inv--ie-romaneasca .inv-hero::after {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    height: 84px;
    background: var(--inv-ornament);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-ie-band.svg) repeat-x center top / auto 100%;
    mask: url(../../img/invitations/ornaments/rustic-ie-band.svg) repeat-x center top / auto 100%;
    pointer-events: none;
}

.inv--ie-romaneasca .inv-hero::before { top: 34px; }
.inv--ie-romaneasca .inv-hero::after { bottom: 34px; transform: scaleY(-1); }

/* A black stitched chain outside each band. */
.inv--ie-romaneasca .inv-hero__frame {
    display: block;
    --hero-frame-inset: 12px -16px;
    --hero-frame-border: 0 solid transparent;
    --hero-frame-bg: var(--inv-text);
    -webkit-mask:
        url(../../img/invitations/ornaments/rustic-ie-chain.svg) repeat-x center top / auto 15px,
        url(../../img/invitations/ornaments/rustic-ie-chain.svg) repeat-x center bottom / auto 15px;
    mask:
        url(../../img/invitations/ornaments/rustic-ie-chain.svg) repeat-x center top / auto 15px,
        url(../../img/invitations/ornaments/rustic-ie-chain.svg) repeat-x center bottom / auto 15px;
}

.inv--ie-romaneasca .inv-hero__scroll {
    bottom: 128px;
}

.inv--ie-romaneasca .inv-hero .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-ie-star.svg);
    --orn-ratio: 1;
    --orn-width: 58px;
    --orn-max: 58px;
}

/* Two-tone motif: black diamonds, red star in the middle. */
.inv--ie-romaneasca .inv-hero .orn--hero-divider,
.inv--ie-romaneasca .inv-divider .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-ie-motif.svg);
    --orn-ratio: 246 / 78;
    --orn-width: 62%;
    --orn-max: 220px;
    --orn-fill: linear-gradient(90deg, var(--inv-text) 0 30%, var(--inv-ornament) 30% 70%, var(--inv-text) 70%);
}

.inv--ie-romaneasca .inv-hero .orn--hero-divider {
    --orn-width: 150px;
    --orn-margin: 22px auto 0;
}

.inv--ie-romaneasca .inv-section .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-ie-chain.svg);
    --orn-ratio: 366 / 30;
    --orn-width: 46%;
    --orn-max: 170px;
    --orn-margin: -8px auto 24px;
}

/* Bands inside the card, at the top and at the bottom. */
.inv--ie-romaneasca .inv-card::before,
.inv--ie-romaneasca .inv-card::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    height: 54px;
    background: var(--inv-ornament);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-ie-band.svg) repeat-x center top / auto 100%;
    mask: url(../../img/invitations/ornaments/rustic-ie-band.svg) repeat-x center top / auto 100%;
    pointer-events: none;
}

.inv--ie-romaneasca .inv-card::before { top: 16px; }
.inv--ie-romaneasca .inv-card::after { bottom: 16px; transform: scaleY(-1); }

.inv--ie-romaneasca .inv-photo__frame {
    outline: 1.5px dashed color-mix(in srgb, var(--inv-ornament) 80%, transparent);
    outline-offset: -5px;
}

/* Monogram inside a stitched diamond. */
.inv--ie-romaneasca .inv-monogram {
    position: relative;
    border: 0;
    box-shadow: none;
}

.inv--ie-romaneasca .inv-monogram::before,
.inv--ie-romaneasca .inv-monogram::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1.5px solid var(--inv-ornament);
    rotate: 45deg;
}

.inv--ie-romaneasca .inv-monogram::after {
    inset: 2px;
    border: 1px dashed var(--inv-ornament);
}

/* ---------- Maramureș: carved wooden gate around the names, twisted rope, solar rosette, dark wood ---------- */

.inv--maramures {
    --f-display: "EB Garamond", Georgia, serif;
    --f-names: "Forum", "EB Garamond", serif;
    --names-weight: 400;
    --names-size: clamp(2.3rem, 10.5cqi, 4.4rem);
    --names-line: 1.05;
    --names-spacing: .02em;
    --amp-font: "Cinzel Decorative", "Forum", serif;
    --amp-style: normal;
    --amp-size: .5em;
    --amp-color: var(--inv-ornament);
    --kicker-font: "Cinzel", Georgia, serif;
    --kicker-size: .64rem;
    --kicker-weight: 400;
    --kicker-spacing: .28em;
    --date-font: "Cinzel", Georgia, serif;
    --date-size: .9rem;
    --date-spacing: .3em;
    --heading-font: "Cinzel", Georgia, serif;
    --heading-size: 1.45rem;
    --heading-weight: 400;
    --heading-spacing: .12em;
    --heading-transform: uppercase;
    --label-font: "Cinzel", Georgia, serif;
    --text-display-font: "EB Garamond", Georgia, serif;
    --message-size: 1.3rem;
    --closing-font: "Forum", Georgia, serif;
    --closing-size: 2.3rem;
    --monogram-font: "Cinzel", Georgia, serif;
    --divider-rule-display: none;
    --hero-pad: 130px 8px 90px;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 80%, transparent) 50%, transparent);
    --card-bg: linear-gradient(180deg, var(--inv-surface), color-mix(in srgb, var(--inv-surface) 82%, var(--inv-accent)));
    --card-radius: 4px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 45%, transparent);
    --card-pad: 86px 24px 80px;
    --card-margin-top: 30px;
    --card-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
    --box-bg: color-mix(in srgb, var(--inv-accent) 45%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 40%, transparent);
    --box-radius: 3px;
    --box-shadow: none;
    --photo-width: min(80%, 290px);
    --photo-radius: 999px 999px 4px 4px;
    --photo-inner-radius: 999px 999px 2px 2px;
    --photo-pad: 9px;
    --pv-kb-photo: none; /* the photo does not grow over its paper border */
    --photo-bg: linear-gradient(90deg, color-mix(in srgb, var(--inv-ornament) 70%, #000), var(--inv-ornament) 30%, color-mix(in srgb, var(--inv-ornament) 80%, #fff) 50%, var(--inv-ornament) 70%, color-mix(in srgb, var(--inv-ornament) 70%, #000));
    --photo-shadow: 0 24px 40px -22px rgba(0, 0, 0, .6);
    --button-radius: 2px;
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-bg)), color-mix(in srgb, var(--inv-ornament) 32%, var(--inv-bg)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 40%, var(--inv-bg)), color-mix(in srgb, var(--inv-ornament) 62%, var(--inv-bg)));
    --env-fill: color-mix(in srgb, var(--inv-ornament) 30%, var(--inv-bg));
}

.inv--maramures .inv__backdrop {
    background:
        radial-gradient(700px 800px at 50% 420px, color-mix(in srgb, var(--inv-surface) 70%, transparent), transparent 70%),
        linear-gradient(90deg, color-mix(in srgb, var(--inv-bg) 85%, #000), var(--inv-bg) 25%, var(--inv-bg) 75%, color-mix(in srgb, var(--inv-bg) 85%, #000));
}

.inv--maramures .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/rustic-wood.svg);
    --texture-size: 240px;
    --texture-opacity: .14;
}

/* The carved gate (poarta maramureșeană) framing the names: full width, the pillars run past the first screen. */
.inv--maramures .inv-hero__frame {
    display: block;
    inset: 12px auto 0 50%;
    width: min(calc(100% + 8px), 440px);
    translate: -50% 0;
    --hero-frame-border: 0 solid transparent;
    --hero-frame-bg: linear-gradient(90deg, color-mix(in srgb, var(--inv-ornament) 72%, #000), var(--inv-ornament) 18%, color-mix(in srgb, var(--inv-ornament) 80%, #fff) 50%, var(--inv-ornament) 82%, color-mix(in srgb, var(--inv-ornament) 72%, #000));
    -webkit-mask: url(../../img/invitations/ornaments/rustic-gate.svg) center top / 100% auto no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-gate.svg) center top / 100% auto no-repeat;
    opacity: .92;
}

.inv--maramures .inv-hero__content {
    max-width: 70%;
}

.inv--maramures .inv-hero__kicker,
.inv--maramures .inv-hero__place {
    text-wrap: balance;
}

.inv--maramures .inv-hero .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-rozeta.svg);
    --orn-ratio: 1;
    --orn-width: 66px;
    --orn-max: 66px;
}

.inv--maramures .inv-hero .orn--hero-divider,
.inv--maramures .inv-divider .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-funie.svg);
    --orn-ratio: 320 / 40;
    --orn-width: 100%;
    --orn-max: 230px;
}

.inv--maramures .inv-divider .orn--divider {
    --orn-width: 86%;
    --orn-max: 320px;
}

/* Rope borders carved along the top and the bottom of the card. */
.inv--maramures .inv-card::before,
.inv--maramures .inv-card::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    aspect-ratio: 320 / 40;
    max-height: 44px;
    background: var(--inv-ornament);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-funie.svg) center / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-funie.svg) center / 100% 100% no-repeat;
    opacity: .85;
    pointer-events: none;
}

.inv--maramures .inv-card::before { top: 16px; }
.inv--maramures .inv-card::after { bottom: 16px; }

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

/* ---------- Vie: vine garland with hanging grapes, a wine label in the first screen, wine and olive ---------- */

.inv--vie {
    --f-display: "Playfair Display", Georgia, serif;
    --f-names: "Playfair Display", Georgia, serif;
    --names-weight: 400;
    --names-style: italic;
    --names-size: clamp(2.7rem, 13.5cqi, 5.4rem);
    --names-line: 1.04;
    --amp-font: "Cinzel", Georgia, serif;
    --amp-style: normal;
    --amp-size: .34em;
    --amp-color: var(--inv-ornament);
    --kicker-font: "Cinzel", Georgia, serif;
    --kicker-size: .62rem;
    --kicker-weight: 400;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-muted);
    --date-font: "Cinzel", Georgia, serif;
    --date-size: 1rem;
    --date-spacing: .26em;
    --heading-font: "Playfair Display", Georgia, serif;
    --heading-style: italic;
    --heading-size: 2.1rem;
    --heading-weight: 400;
    --label-font: "Cinzel", Georgia, serif;
    --text-display-font: "Playfair Display", Georgia, serif;
    --message-size: 1.08rem;
    --closing-size: 2.4rem;
    --monogram-font: "Cinzel", Georgia, serif;
    --divider-rule-display: none;
    --hero-pad: 160px 8px 80px;
    --hero-halo: none;
    --hero-content-pad: 30px 22px 30px;
    --card-bg: var(--inv-surface);
    --card-radius: 6px;
    --card-pad: 92px 26px 70px;
    --card-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-ornament) 30%, transparent), 0 26px 56px -30px rgba(50, 15, 25, .4);
    --box-bg: color-mix(in srgb, var(--inv-accent) 28%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-primary) 22%, transparent);
    --box-radius: 6px;
    --photo-width: min(76%, 280px);
    --photo-ratio: 4 / 5;
    --photo-radius: 50%;
    --photo-shadow:
        0 0 0 6px var(--inv-surface),
        0 0 0 7px color-mix(in srgb, var(--inv-ornament) 60%, transparent),
        0 24px 44px -24px rgba(0, 0, 0, .45);
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 60%, #fff), var(--inv-primary) 58%, color-mix(in srgb, var(--inv-primary) 70%, #000));
    --seal-color: var(--inv-on-primary);
    --grape-fill: linear-gradient(180deg, var(--inv-ornament) 0 48%, var(--inv-primary) 60%);
}

.inv--vie .inv__backdrop {
    background:
        radial-gradient(900px 420px at 50% 0, color-mix(in srgb, var(--inv-ornament) 16%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 55%, var(--inv-bg)));
}

/* Vine garland along the top of the first screen (olive) with grapes hanging from it (wine). */
.inv--vie .inv-hero::before,
.inv--vie .inv-hero::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -16px;
    right: -16px;
    aspect-ratio: 400 / 190;
    pointer-events: none;
}

.inv--vie .inv-hero::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 80%, #000), var(--inv-ornament) 60%);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-vine-garland.svg) center top / 100% auto no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-vine-garland.svg) center top / 100% auto no-repeat;
}

.inv--vie .inv-hero::after {
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--inv-primary) 75%, #fff), var(--inv-primary) 60%);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-vine-grapes.svg) center top / 100% auto no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-vine-grapes.svg) center top / 100% auto no-repeat;
}

/* The wine label. */
.inv--vie .inv-hero__content {
    width: min(100%, 330px);
    border: 1px solid color-mix(in srgb, var(--inv-primary) 40%, transparent);
    border-radius: 3px;
    background: var(--inv-surface);
    box-shadow:
        inset 0 0 0 5px var(--inv-surface),
        inset 0 0 0 6px color-mix(in srgb, var(--inv-ornament) 55%, transparent),
        0 28px 50px -28px rgba(40, 10, 20, .45);
}

.inv--vie .inv-hero .orn--hero,
.inv--vie .inv-section .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-vine-sprig.svg);
    --orn-ratio: 150 / 60;
    --orn-width: 96px;
    --orn-max: 96px;
    --orn-fill: var(--grape-fill);
}

.inv--vie .inv-section .orn--heading {
    --orn-width: 84px;
    --orn-margin: -8px auto 22px;
}

.inv--vie .inv-hero .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 90px;
    --orn-ratio: 30;
    --orn-fill: linear-gradient(180deg, var(--inv-ornament) 0 1px, transparent 1px 2px, var(--inv-ornament) 2px);
    --orn-margin: 18px auto 0;
}

.inv--vie .inv-divider .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-vine-divider.svg);
    --orn-ratio: 320 / 60;
    --orn-width: 88%;
    --orn-fill: var(--grape-fill);
}

.inv--vie .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/rustic-vine-corner.svg);
    --corner-size: 24%;
    --corner-max: 130px;
    --corner-inset: 6px;
    --corner-opacity: .8;
}

.inv--vie .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/rustic-vine-leaf.svg);
    --amb-size: 18px;
    --amb-duration: 17s;
    --amb-opacity: .4;
}

.inv--vie .inv__ambient i:nth-child(3n) {
    display: none;
}

/* ---------- Spice de grâu: a sheaf of wheat, a golden field at the foot of the first screen, warm light ---------- */

.inv--spice-grau {
    --f-display: "Lora", Georgia, serif;
    --f-body: "Montserrat", "Segoe UI", sans-serif;
    --f-names: "Birthstone", "Lora", cursive;
    --names-weight: 400;
    --names-size: clamp(3.4rem, 19cqi, 7rem);
    --names-line: .98;
    --amp-font: "Lora", Georgia, serif;
    --amp-style: italic;
    --amp-size: .3em;
    --amp-color: var(--inv-ornament);
    --kicker-font: "Montserrat", "Segoe UI", sans-serif;
    --kicker-size: .62rem;
    --kicker-spacing: .42em;
    --date-font: "Lora", Georgia, serif;
    --date-size: 1.2rem;
    --date-spacing: .06em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Lora", Georgia, serif;
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 2.1rem;
    --label-font: "Montserrat", "Segoe UI", sans-serif;
    --text-display-font: "Lora", Georgia, serif;
    --message-size: 1.12rem;
    --closing-font: "Birthstone", cursive;
    --closing-size: 3.2rem;
    --monogram-font: "Lora", Georgia, serif;
    --divider-rule-display: none;
    --hero-pad: 60px 8px 180px;
    --card-bg: var(--inv-surface);
    --card-radius: 10px;
    --card-pad: 86px 26px 72px;
    --card-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-ornament) 45%, transparent), 0 26px 56px -30px rgba(90, 60, 10, .4);
    --box-bg: linear-gradient(180deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 45%, var(--inv-surface)));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 40%, transparent);
    --box-radius: 10px;
    --photo-width: min(72%, 270px);
    --photo-ratio: 1;
    --photo-radius: 50%;
    --photo-shadow:
        0 0 0 6px var(--inv-surface),
        0 0 0 7px var(--inv-ornament),
        0 0 0 13px var(--inv-surface),
        0 0 0 14px color-mix(in srgb, var(--inv-ornament) 45%, transparent),
        0 26px 44px -22px rgba(0, 0, 0, .4);
    --button-radius: 999px;
    --gold: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 70%, #fff), var(--inv-ornament) 45%, color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-primary)));
}

.inv--spice-grau .inv__backdrop {
    background:
        radial-gradient(520px 460px at 50% 250px, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 70%, var(--inv-bg)) 0, var(--inv-bg) 520px, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-bg)) 880px, var(--inv-bg) 1500px);
}

/* The wheat field along the foot of the first screen. */
.inv--spice-grau .inv-hero::after {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    bottom: 0;
    height: 150px;
    background: var(--gold);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-wheat-field.svg) repeat-x center bottom / auto 100%;
    mask: url(../../img/invitations/ornaments/rustic-wheat-field.svg) repeat-x center bottom / auto 100%;
    opacity: .9;
    pointer-events: none;
}

.inv--spice-grau .inv-hero__scroll {
    bottom: 160px;
}

.inv--spice-grau .inv-countdown span {
    font-size: 2.05rem;
}

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

.inv--spice-grau .inv-hero .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-wheat-sheaf.svg);
    --orn-ratio: 240 / 210;
    --orn-width: 52%;
    --orn-max: 190px;
    --orn-fill: var(--gold);
}

.inv--spice-grau .inv-hero .orn--hero-divider,
.inv--spice-grau .inv-divider .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-wheat-divider.svg);
    --orn-ratio: 320 / 56;
    --orn-width: 88%;
    --orn-fill: var(--gold);
}

.inv--spice-grau .inv-hero .orn--hero-divider {
    --orn-width: 72%;
    --orn-max: 240px;
}

.inv--spice-grau .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/rustic-wheat-corner.svg);
    --corner-size: 26%;
    --corner-max: 130px;
    --corner-inset: 8px;
    --corner-opacity: .85;
    --corner-fill: var(--gold);
}

/* Sunlit motes over the field. */
.inv--spice-grau .inv__ambient {
    display: block;
    --amb-anim: inv-twinkle;
    --amb-duration: 9s;
    --amb-size: 5px;
    --amb-opacity: .85;
    --amb-fill: color-mix(in srgb, var(--inv-ornament) 65%, #fff);
}

.inv--spice-grau .inv__ambient i {
    top: var(--amb-y);
    border-radius: 50%;
    -webkit-mask: none;
    mask: none;
    box-shadow: 0 0 8px 2px color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    animation-timing-function: ease-in-out;
}

/* Two ears of wheat around the monogram. */
.inv--spice-grau .inv-monogram {
    position: relative;
}

.inv--spice-grau .inv-monogram::before,
.inv--spice-grau .inv-monogram::after {
    content: "";
    position: absolute;
    bottom: -4px;
    width: 24px;
    aspect-ratio: 60 / 240;
    background: var(--gold);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-wheat-ear.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-wheat-ear.svg) center / contain no-repeat;
    transform-origin: 50% 100%;
}

.inv--spice-grau .inv-monogram::before {
    right: calc(100% - 3px);
    rotate: -15deg;
}

.inv--spice-grau .inv-monogram::after {
    left: calc(100% - 3px);
    rotate: 15deg;
}

/* ---------- Rodie: pomegranates and figs drawn as plates from a botanical atlas, fruit / leaf / ink tints ---------- */

.inv--rodie {
    --f-display: "EB Garamond", Georgia, serif;
    --f-body: "EB Garamond", Georgia, serif;
    --f-names: "EB Garamond", Georgia, serif;
    --names-weight: 400;
    --names-style: italic;
    --names-size: clamp(2.9rem, 14cqi, 5.6rem);
    --names-line: 1;
    --amp-font: "EB Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .5em;
    --amp-color: var(--inv-ornament);
    --kicker-font: "EB Garamond", Georgia, serif;
    --kicker-size: .74rem;
    --kicker-weight: 400;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-muted);
    --date-font: "EB Garamond", Georgia, serif;
    --date-size: .98rem;
    --date-spacing: .24em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "EB Garamond", Georgia, serif;
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 2.2rem;
    --label-font: "EB Garamond", Georgia, serif;
    --label-size: .76rem;
    --label-weight: 400;
    --label-spacing: .28em;
    --text-display-font: "EB Garamond", Georgia, serif;
    --message-size: 1.3rem;
    --family-size: 1.28rem;
    --closing-size: 2.7rem;
    --monogram-font: "EB Garamond", Georgia, serif;
    --button-font: "EB Garamond", Georgia, serif;
    --button-radius: 2px;
    --button-spacing: .24em;

    /* The three tints of the plates: fruit, leaves, ink. The leaves keep an olive green in every palette. */
    --rodie-fruit: linear-gradient(165deg, color-mix(in srgb, var(--inv-primary) 78%, #D8505C), var(--inv-primary) 62%, color-mix(in srgb, var(--inv-primary) 86%, #000));
    --rodie-leaf: color-mix(in srgb, #6F7A45 82%, var(--inv-ornament));
    --rodie-ink: color-mix(in srgb, var(--inv-text) 86%, var(--inv-primary));
    --rodie-rule: color-mix(in srgb, var(--rodie-ink) 30%, transparent);

    /* Widths of the two branches; the first screen keeps the text clear of them. */
    --rodie-top-w: min(calc(100cqi - 16px), 470px);
    --rodie-bot-w: min(86cqi, 400px);
    --hero-pad: calc(var(--rodie-top-w) * .34) 8px calc(var(--rodie-bot-w) * .315);
    --hero-halo: none;
    --hero-content-pad: 6px 12px 8px;

    --card-bg: var(--inv-surface);
    --card-radius: 3px;
    --card-pad: 62px 28px 58px;
    --card-pad-wide: 76px 60px 70px;
    --card-margin-top: 18px;
    --card-shadow:
        inset 0 0 0 9px var(--inv-surface),
        inset 0 0 0 10px var(--rodie-rule),
        inset 0 0 0 13px var(--inv-surface),
        inset 0 0 0 14px color-mix(in srgb, var(--rodie-ink) 16%, transparent),
        0 26px 56px -32px rgba(60, 20, 25, .45);
    --box-bg: color-mix(in srgb, var(--inv-accent) 24%, var(--inv-surface));
    --box-border: 1px solid var(--rodie-rule);
    --box-radius: 2px;
    --box-shadow: inset 0 0 0 3px var(--inv-surface), inset 0 0 0 4px color-mix(in srgb, var(--rodie-ink) 14%, transparent);
    --photo-width: min(80%, 300px);
    --photo-ratio: 4 / 5;
    --photo-radius: 2px;
    --photo-pad: 11px;
    --pv-kb-photo: none; /* the photo does not grow over its paper border */
    --photo-bg: var(--inv-surface);
    --photo-shadow: 0 0 0 1px var(--rodie-rule), 0 24px 44px -28px rgba(40, 15, 20, .55);
    --env-front: linear-gradient(160deg, var(--inv-accent), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-primary)));
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 62%, #fff), var(--inv-primary) 58%, color-mix(in srgb, var(--inv-primary) 70%, #000));
    --seal-color: var(--inv-on-primary);
}

.inv--rodie.inv--dark {
    --rodie-fruit: linear-gradient(165deg, color-mix(in srgb, #D9666C 84%, var(--inv-primary)), color-mix(in srgb, #B8434F 88%, var(--inv-primary)) 70%);
    --rodie-leaf: color-mix(in srgb, #97A163 82%, var(--inv-ornament));
    --rodie-ink: color-mix(in srgb, var(--inv-primary) 82%, var(--inv-text));
    --seal-fill: radial-gradient(circle at 35% 30%, #E08A8C, #B8434F 58%, #8C2F3B);
    --seal-color: #fff;
}

/* Old paper: lighter in the middle, a little foxed towards the edges. */
.inv--rodie .inv__backdrop {
    background:
        radial-gradient(ellipse 110% 520px at 50% 300px, color-mix(in srgb, var(--inv-surface) 78%, transparent), transparent 72%),
        radial-gradient(ellipse 60% 420px at 0 0, color-mix(in srgb, var(--inv-accent) 62%, transparent), transparent 70%),
        radial-gradient(ellipse 70% 480px at 100% 760px, color-mix(in srgb, var(--inv-accent) 70%, transparent), transparent 70%),
        var(--inv-bg);
}

.inv--rodie .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/rustic-kraft-fiber.svg);
    --texture-size: 260px;
    --texture-opacity: .07;
    --texture-fill: var(--inv-text);
}

/* The printed border of the plate. */
.inv--rodie .inv-hero__frame {
    display: block;
    --hero-frame-inset: 14px 0;
    --hero-frame-border: 1px solid var(--rodie-rule);
    outline: 1px solid color-mix(in srgb, var(--rodie-ink) 16%, transparent);
    outline-offset: -5px;
}

/* The two branches: each one is three stacked masks (leaves, fruit, ink) in the four corner slots.
   Top: the pomegranate branch, cut end at the right. Bottom: the fig branch, cut end at the left. */
.inv--rodie .inv-hero__corner {
    display: block;
    max-width: none;
    opacity: 1;
    transform: none;
}

.inv--rodie .inv-hero__corner--tl,
.inv--rodie .inv-hero__corner--tr {
    top: 6px;
    right: -16px;
    left: auto;
    width: var(--rodie-top-w);
    aspect-ratio: 440 / 200;
}

.inv--rodie .inv-hero__corner--bl,
.inv--rodie .inv-hero__corner--br {
    bottom: 4px;
    left: -16px;
    right: auto;
    width: var(--rodie-bot-w);
    aspect-ratio: 400 / 150;
}

.inv--rodie .inv-hero__corner--tr,
.inv--rodie .inv-hero__corner--bl {
    background: none;
    -webkit-mask: none;
    mask: none;
}

.inv--rodie .inv-hero__corner--tl,
.inv--rodie .inv-hero__corner--br {
    z-index: 1;
    --hero-corner-fill: var(--rodie-ink);
}

.inv--rodie .inv-hero__corner--tl { --hero-corner-image: url(../../img/invitations/ornaments/rustic-rodie-top-line.svg); }
.inv--rodie .inv-hero__corner--br { --hero-corner-image: url(../../img/invitations/ornaments/rustic-rodie-bottom-line.svg); }

.inv--rodie .inv-hero__corner--tr::before,
.inv--rodie .inv-hero__corner--tr::after,
.inv--rodie .inv-hero__corner--bl::before,
.inv--rodie .inv-hero__corner--bl::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--rodie-mask) center / contain no-repeat;
    mask: var(--rodie-mask) center / contain no-repeat;
}

.inv--rodie .inv-hero__corner--tr::before,
.inv--rodie .inv-hero__corner--bl::before {
    background: var(--rodie-leaf);
}

.inv--rodie .inv-hero__corner--tr::after,
.inv--rodie .inv-hero__corner--bl::after {
    background: var(--rodie-fruit);
}

.inv--rodie .inv-hero__corner--tr::before { --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-top-leaf.svg); }
.inv--rodie .inv-hero__corner--tr::after { --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-top-fruit.svg); }
.inv--rodie .inv-hero__corner--bl::before { --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-bottom-leaf.svg); }
.inv--rodie .inv-hero__corner--bl::after { --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-bottom-fruit.svg); }

/* The arrow sits in the gap between the two figs. */
.inv--rodie .inv-hero__scroll {
    left: calc(var(--rodie-bot-w) * .575 - 16px);
    bottom: calc(var(--rodie-bot-w) * .055);
}

.inv--rodie .inv-hero__kicker {
    margin-top: 14px;
}

.inv--rodie .inv-hero__date {
    margin-top: 20px;
    text-transform: uppercase;
}

.inv--rodie .inv-hero__place {
    font-size: .8rem;
    letter-spacing: .22em;
}

/* Two-layer motifs (fill + ink): the halved fig under the names and under every heading. */
.inv--rodie .inv-hero .orn--hero-divider,
.inv--rodie .inv-section .orn--heading {
    display: block;
    position: relative;
    background: none;
    -webkit-mask: none;
    mask: none;
    --orn-ratio: 160 / 40;
    --orn-width: 150px;
    --orn-max: 150px;
}

.inv--rodie .inv-hero .orn--hero-divider {
    --orn-width: 132px;
    --orn-margin: 10px auto 0;
}

.inv--rodie .inv-section .orn--heading {
    --orn-margin: -12px auto 22px;
}

.inv--rodie .orn--hero-divider::before,
.inv--rodie .orn--hero-divider::after,
.inv--rodie .orn--heading::before,
.inv--rodie .orn--heading::after,
.inv--rodie .orn--divider::before,
.inv--rodie .orn--divider::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--rodie-mask) center / contain no-repeat;
    mask: var(--rodie-mask) center / contain no-repeat;
}

.inv--rodie .orn--hero-divider::before,
.inv--rodie .orn--heading::before {
    background: var(--rodie-fruit);
    --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-fig-fruit.svg);
}

.inv--rodie .orn--hero-divider::after,
.inv--rodie .orn--heading::after {
    background: var(--rodie-ink);
    --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-fig-line.svg);
}

/* Divider: a halved pomegranate between two olive sprigs. Leaves and fruit in the ornament slot, the ink in
   the rule that follows it. */
.inv--rodie .inv-divider {
    position: relative;
}

.inv--rodie .inv-divider .orn--divider,
.inv--rodie .inv-divider__rule {
    display: block;
    width: 88%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 320 / 60;
}

.inv--rodie .inv-divider .orn--divider {
    position: relative;
    background: none;
    -webkit-mask: none;
    mask: none;
}

.inv--rodie .orn--divider::before {
    background: var(--rodie-leaf);
    --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-divider-leaf.svg);
}

.inv--rodie .orn--divider::after {
    background: var(--rodie-fruit);
    --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-divider-fruit.svg);
}

.inv--rodie .inv-divider__rule {
    position: absolute;
    top: 6px;
    left: 50%;
    translate: -50% 0;
    background: var(--rodie-ink);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-rodie-divider-line.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-rodie-divider-line.svg) center / contain no-repeat;
}

/* An olive sprig laid over two corners of the card (leaves + olives). */
.inv--rodie .inv-corner--tl,
.inv--rodie .inv-corner--br {
    display: block;
    background: none;
    -webkit-mask: none;
    mask: none;
    --corner-size: 30%;
    --corner-max: 124px;
    --corner-inset: 3px;
    --corner-opacity: 1;
}

.inv--rodie .inv-corner::before,
.inv--rodie .inv-corner::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--rodie-mask) center / contain no-repeat;
    mask: var(--rodie-mask) center / contain no-repeat;
}

.inv--rodie .inv-corner::before {
    background: var(--rodie-leaf);
    --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-corner-leaf.svg);
}

.inv--rodie .inv-corner::after {
    background: var(--rodie-fruit);
    --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-corner-fruit.svg);
}

/* The photograph as a plate tipped into the book, with its number. */
.inv--rodie .inv-photo__frame {
    outline: 1px solid color-mix(in srgb, var(--rodie-ink) 16%, transparent);
    outline-offset: -6px;
}

.inv--rodie .inv-photo::after {
    content: "Plan\219 a I";
    display: block;
    margin-top: 16px;
    font: italic 400 .95rem/1.2 "EB Garamond", Georgia, serif;
    letter-spacing: .12em;
    color: var(--inv-muted);
}

.inv--rodie .inv-when__time,
.inv--rodie .inv-program__title {
    letter-spacing: .2em;
}

.inv--rodie .inv-program__title {
    font-size: .88rem;
    font-weight: 600;
}

.inv--rodie .inv-countdown small {
    font-size: .64rem;
    font-weight: 400;
    letter-spacing: .1em;
}

.inv--rodie .inv-button {
    font-size: .8rem;
    font-weight: 400;
}

/* Olive wreath around the monogram. */
.inv--rodie .inv-monogram {
    position: relative;
    width: 104px;
    height: 104px;
    border: 0;
    box-shadow: none;
    font-style: italic;
    font-size: 1.3rem;
}

.inv--rodie .inv-monogram::before,
.inv--rodie .inv-monogram::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--rodie-mask) center / contain no-repeat;
    mask: var(--rodie-mask) center / contain no-repeat;
}

.inv--rodie .inv-monogram::before {
    background: var(--rodie-leaf);
    --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-wreath-leaf.svg);
}

.inv--rodie .inv-monogram::after {
    background: var(--rodie-fruit);
    --rodie-mask: url(../../img/invitations/ornaments/rustic-rodie-wreath-fruit.svg);
}

/* ---------- Horezu: a painted Horezu plate with the rooster over the names, wave and spiral bands, glazed tiles ---------- */

.inv--horezu {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --names-weight: 600;
    --names-size: clamp(2.7rem, 13.4cqi, 5.2rem);
    --names-line: 1.04;
    --names-shadow: none;
    --amp-font: "Fraunces", Georgia, serif;
    --amp-style: italic;
    --amp-size: .52em;
    --amp-color: var(--inv-ornament);
    --kicker-font: "Josefin Sans", "Segoe UI", sans-serif;
    --kicker-size: .68rem;
    --kicker-weight: 600;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-muted);
    --date-font: "Fraunces", Georgia, serif;
    --date-size: 1.08rem;
    --date-weight: 600;
    --date-spacing: .2em;
    --heading-font: "Fraunces", Georgia, serif;
    --heading-weight: 600;
    --heading-size: 1.85rem;
    --label-font: "Josefin Sans", "Segoe UI", sans-serif;
    --label-size: .7rem;
    --label-weight: 600;
    --label-spacing: .26em;
    --text-display-font: "Fraunces", Georgia, serif;
    --message-size: 1.14rem;
    --family-size: 1.14rem;
    --closing-size: 2.2rem;
    --monogram-font: "Fraunces", Georgia, serif;
    --button-font: "Josefin Sans", "Segoe UI", sans-serif;
    --button-radius: 14px;
    --divider-rule-display: none;

    /* The glaze: ivory slip with a soft sheen. */
    --horezu-glaze: linear-gradient(160deg, color-mix(in srgb, var(--inv-surface) 84%, #fff), var(--inv-surface) 46%, color-mix(in srgb, var(--inv-accent) 38%, var(--inv-surface)));
    --horezu-dots: 5px dotted var(--inv-ornament);

    --hero-pad: clamp(30px, 7cqi, 46px) 8px 54px;
    --hero-halo: none;
    --hero-content-pad: 0 12px;

    --card-bg: var(--inv-surface);
    --card-radius: 30px;
    --card-border: 2.5px solid var(--inv-primary);
    --card-pad: 50px 26px 54px;
    --card-pad-wide: 62px 56px 66px;
    --card-margin-top: 18px;
    --card-shadow: 0 26px 50px -30px rgba(70, 35, 10, .5);
    --box-bg: var(--horezu-glaze);
    --box-border: 2px solid var(--inv-primary);
    --box-radius: 14px;
    --box-shadow:
        inset 0 0 0 3px var(--inv-surface),
        inset 0 0 0 4.5px color-mix(in srgb, var(--inv-ornament) 75%, transparent),
        0 3px 0 color-mix(in srgb, var(--inv-primary) 30%, transparent);
    --photo-width: min(80%, 300px);
    --photo-ratio: 4 / 5;
    --photo-radius: 28px;
    --photo-inner-radius: 17px;
    --photo-pad: 13px;
    --pv-kb-photo: none; /* the photo does not grow over its paper border */
    --photo-bg: var(--inv-surface);
    --photo-shadow: 0 0 0 2.5px var(--inv-primary), 0 24px 40px -24px rgba(70, 35, 10, .55);
    --env-front: linear-gradient(160deg, var(--inv-accent), color-mix(in srgb, var(--inv-accent) 78%, var(--inv-primary)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 74%, var(--inv-primary)), var(--inv-accent));
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 62%, #fff), var(--inv-primary) 58%, color-mix(in srgb, var(--inv-primary) 70%, #000));
    --seal-color: var(--inv-on-primary);
}

.inv--horezu .inv__backdrop {
    background:
        radial-gradient(ellipse 120% 560px at 50% 240px, color-mix(in srgb, var(--inv-surface) 85%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 45%, var(--inv-bg)) 900px, var(--inv-bg) 1700px);
}

/* Speckles of the fired clay. */
.inv--horezu .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/rustic-horezu-speckle.svg);
    --texture-size: 180px;
    --texture-opacity: .16;
    --texture-fill: var(--inv-primary);
}

/* The first screen and the card share the rim of a plate: a line, a row of dots, a fine line. */
.inv--horezu .inv-hero__frame {
    display: block;
    --hero-frame-inset: 12px 0;
    --hero-frame-border: 2.5px solid var(--inv-primary);
    --hero-frame-radius: 30px;
}

.inv--horezu .inv-hero__frame::before,
.inv--horezu .inv-hero__frame::after,
.inv--horezu .inv-card::before,
.inv--horezu .inv-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.inv--horezu .inv-hero__frame::before,
.inv--horezu .inv-card::before {
    inset: 4px;
    border: var(--horezu-dots);
    border-radius: 24px;
}

.inv--horezu .inv-hero__frame::after,
.inv--horezu .inv-card::after {
    inset: 13px;
    border: 1.5px solid var(--inv-primary);
    border-radius: 15px;
}

/* The plate: glazed disc + two painted layers (primary and ornament colours). */
.inv--horezu .inv-hero .orn--hero {
    display: block;
    position: relative;
    -webkit-mask: none;
    mask: none;
    --orn-width: min(54cqi, 280px);
    --orn-max: none;
    --orn-ratio: 1;
    --orn-margin: 0 auto;
    border-radius: 50%;
    background:
        radial-gradient(circle at 33% 24%, color-mix(in srgb, #fff 42%, transparent), transparent 40%),
        radial-gradient(circle, transparent 44%, color-mix(in srgb, var(--inv-primary) 9%, transparent) 48.5%, transparent 55%),
        radial-gradient(circle, color-mix(in srgb, var(--inv-surface) 90%, #fff) 30%, var(--inv-surface) 68%, color-mix(in srgb, var(--inv-accent) 46%, var(--inv-surface)));
    box-shadow:
        0 3px 0 color-mix(in srgb, var(--inv-primary) 45%, var(--inv-bg)),
        0 22px 30px -16px rgba(70, 35, 10, .6);
}

.inv--horezu .orn--hero::before,
.inv--horezu .orn--hero::after,
.inv--horezu .orn--divider::before,
.inv--horezu .orn--divider::after,
.inv--horezu .orn--heading::before,
.inv--horezu .orn--heading::after,
.inv--horezu .orn--card-top::before,
.inv--horezu .orn--card-top::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--horezu-mask) center / contain no-repeat;
    mask: var(--horezu-mask) center / contain no-repeat;
}

.inv--horezu .orn--hero::before,
.inv--horezu .orn--divider::before,
.inv--horezu .orn--heading::before,
.inv--horezu .orn--card-top::before {
    background: var(--inv-primary);
}

.inv--horezu .orn--hero::after,
.inv--horezu .orn--divider::after,
.inv--horezu .orn--heading::after,
.inv--horezu .orn--card-top::after {
    background: var(--inv-ornament);
}

.inv--horezu .orn--hero::before { --horezu-mask: url(../../img/invitations/ornaments/rustic-horezu-plate-a.svg); }
.inv--horezu .orn--hero::after { --horezu-mask: url(../../img/invitations/ornaments/rustic-horezu-plate-b.svg); }

.inv--horezu .inv-hero__scroll {
    bottom: 28px;
}

.inv--horezu .inv-hero__kicker {
    margin: 18px 0 8px;
}

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

.inv--horezu .inv-hero__place {
    font-weight: 600;
    letter-spacing: .2em;
}

/* Two-tone ornaments in the card: tree of life at the top, the fish under headings, the wave band as divider. */
.inv--horezu .inv-card .orn--card-top,
.inv--horezu .inv-section .orn--heading,
.inv--horezu .inv-divider .orn--divider {
    display: block;
    position: relative;
    background: none;
    -webkit-mask: none;
    mask: none;
}

.inv--horezu .inv-card .orn--card-top {
    --orn-width: 76px;
    --orn-max: 76px;
    --orn-ratio: 120 / 132;
    --orn-margin: 0 auto 4px;
}

.inv--horezu .orn--card-top::before { --horezu-mask: url(../../img/invitations/ornaments/rustic-horezu-tree-a.svg); }
.inv--horezu .orn--card-top::after { --horezu-mask: url(../../img/invitations/ornaments/rustic-horezu-tree-b.svg); }

.inv--horezu .inv-section .orn--heading {
    --orn-width: 150px;
    --orn-max: 150px;
    --orn-ratio: 160 / 44;
    --orn-margin: -10px auto 24px;
}

.inv--horezu .orn--heading::before { --horezu-mask: url(../../img/invitations/ornaments/rustic-horezu-fish-a.svg); }
.inv--horezu .orn--heading::after { --horezu-mask: url(../../img/invitations/ornaments/rustic-horezu-fish-b.svg); }

.inv--horezu .inv-divider .orn--divider {
    --orn-width: 92%;
    --orn-max: 320px;
    --orn-ratio: 320 / 36;
}

.inv--horezu .orn--divider::before { --horezu-mask: url(../../img/invitations/ornaments/rustic-horezu-band-a.svg); }
.inv--horezu .orn--divider::after { --horezu-mask: url(../../img/invitations/ornaments/rustic-horezu-band-b.svg); }

.inv--horezu .inv-message p {
    font-weight: 300;
}

.inv--horezu .inv-when__date {
    font-size: 1.75rem;
}

/* The photograph in a tile with a dotted rim. */
.inv--horezu .inv-photo__frame {
    outline: 4px dotted var(--inv-ornament);
    outline-offset: -9.5px;
}

/* The countdown: four small plates. */
.inv--horezu .inv-countdown {
    gap: 8px;
}

.inv--horezu .inv-countdown > div {
    display: grid;
    place-content: center;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 3px var(--inv-surface),
        inset 0 0 0 4.5px color-mix(in srgb, var(--inv-ornament) 75%, transparent),
        0 3px 0 color-mix(in srgb, var(--inv-primary) 30%, transparent);
}

.inv--horezu .inv-countdown span {
    font-size: 1.7rem;
}

@container (max-width: 480px) {
    .inv--horezu .inv-countdown span {
        font-size: 1.45rem;
    }
}

.inv--horezu .inv-countdown small {
    margin-top: 3px;
    font-size: .54rem;
    font-weight: 600;
    letter-spacing: .05em;
}

.inv--horezu .inv-program__index {
    border: 2px solid var(--inv-primary);
    font-weight: 600;
}

.inv--horezu .inv-program__title {
    letter-spacing: .18em;
}

.inv--horezu .inv-button {
    padding-top: 14px;
    border-radius: 999px;
    font-weight: 600;
}

/* The monogram and the seal as small plates with a dotted rim. */
.inv--horezu .inv-monogram {
    width: 74px;
    height: 74px;
    border: 2px solid var(--inv-primary);
    background: var(--horezu-glaze);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--inv-primary) 30%, transparent);
    outline: 4px dotted var(--inv-ornament);
    outline-offset: -9px;
    font-weight: 600;
}

.inv--horezu .inv-envelope__seal {
    outline: 3px dotted var(--inv-ornament);
    outline-offset: 3px;
}

/* ---------- Hambar: a barn wedding: two rows of string lights across the top that glow in turns, the gable of the barn
   around the names (its walls run down the first screen), warm fireflies, jar lanterns on the floor ---------- */

.inv--hambar {
    --f-display: "DM Serif Display", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Great Vibes", "Allura", cursive;
    --wood: color-mix(in srgb, var(--inv-ornament) 72%, var(--inv-text));
    --wire: color-mix(in srgb, var(--inv-text) 62%, var(--inv-bg));
    --bulb: color-mix(in srgb, #FFD27A 78%, var(--inv-ornament));
    --barn-w: min(84cqi, 380px);
    --barn-top: 124px;
    --gable-h: calc((var(--barn-w) - 5px) * .6687);
    --names-weight: 400;
    --names-size: clamp(3.3rem, 16.5cqi, 6.2rem);
    --names-line: 1.02;
    --names-shadow: 0 0 30px color-mix(in srgb, var(--bulb) 32%, transparent);
    --amp-font: "DM Serif Display", Georgia, serif;
    --amp-style: italic;
    --amp-size: .3em;
    --amp-color: var(--inv-ornament);
    --kicker-size: .62rem;
    --kicker-weight: 600;
    --kicker-spacing: .38em;
    --date-font: "DM Serif Display", Georgia, serif;
    --date-size: 1.05rem;
    --date-spacing: .2em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-weight: 400;
    --heading-size: 2.1rem;
    --label-weight: 600;
    --text-display-font: "DM Serif Display", Georgia, serif;
    --message-size: 1.16rem;
    --closing-font: "Great Vibes", cursive;
    --closing-size: 3rem;
    --monogram-font: "DM Serif Display", Georgia, serif;
    --body-weight: 400;
    --divider-rule-display: none;
    --hero-halo: none;
    --hero-justify: flex-start;
    --hero-pad: calc(var(--barn-top) + var(--gable-h) * .6) 30px 96px;
    --hero-content-pad: 0 12px 24px;
    --card-bg: repeating-linear-gradient(90deg, transparent 0 71px, color-mix(in srgb, var(--wood) 16%, transparent) 71px 72px), var(--inv-surface);
    --card-radius: 6px;
    --card-border: 1px solid color-mix(in srgb, var(--wood) 40%, transparent);
    --card-shadow: 0 34px 60px -38px rgba(0, 0, 0, .65);
    --box-bg: color-mix(in srgb, var(--inv-accent) 50%, var(--inv-surface));
    --box-border: 2px solid color-mix(in srgb, var(--wood) 55%, transparent);
    --box-radius: 3px;
    --box-shadow: none;
    --photo-width: min(84%, 320px);
    --photo-ratio: 4 / 5;
    --photo-radius: 2px;
    --photo-shadow: 0 0 0 9px var(--wood), 0 0 0 10px color-mix(in srgb, var(--wood) 60%, #000), 0 26px 40px -20px rgba(0, 0, 0, .55);
    --button-radius: 3px;
    --env-bg: radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--bulb) 24%, var(--inv-bg)), var(--inv-bg) 70%);
    --env-front: repeating-linear-gradient(90deg, transparent 0 38px, color-mix(in srgb, var(--wood) 30%, transparent) 38px 39px),
        linear-gradient(165deg, color-mix(in srgb, var(--wood) 42%, var(--inv-accent)), color-mix(in srgb, var(--wood) 64%, var(--inv-accent)));
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 55%, #fff), var(--inv-primary) 60%, color-mix(in srgb, var(--inv-primary) 70%, #000));
    --seal-color: var(--inv-on-primary);
    --pv-letter-step: 60ms;
    --pv-dust: var(--bulb);
    --pv-deco: url(../../img/invitations/ornaments/rustic-lights-divider.svg);
    --pv-deco-ratio: 320 / 56;
}

/* Night in the barn yard: the warm light of the bulbs at the top, a softer glow inside the barn. */
.inv--hambar .inv__backdrop {
    background:
        radial-gradient(120% 340px at 50% 0, color-mix(in srgb, var(--bulb) 20%, transparent), transparent 75%),
        radial-gradient(70% 420px at 50% 520px, color-mix(in srgb, var(--bulb) 9%, transparent), transparent 80%),
        var(--inv-bg);
}

.inv--hambar .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/rustic-wood.svg);
    --texture-size: 160px 320px;
    --texture-opacity: .05;
    --texture-fill: var(--inv-text);
}

/* The string lights, as wide as the page: the wire with its sockets (two rows, the second one lower and shifted),
   then the bulbs in two sets that glow in turns. The three layers sway together. */
.inv--hambar .inv-hero::before,
.inv--hambar .inv-hero::after,
.inv--hambar .inv-hero__corner--tl {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    display: block;
    width: 100cqi;
    max-width: none;
    height: 124px;
    aspect-ratio: auto;
    margin-left: -50cqi;
    pointer-events: none;
    opacity: 1;
    transform: none;
    -webkit-mask: var(--strand) 0 4px / 240px 76px repeat-x, var(--strand) 120px 46px / 200px 63px repeat-x;
    mask: var(--strand) 0 4px / 240px 76px repeat-x, var(--strand) 120px 46px / 200px 63px repeat-x;
    animation: rustic-swing 7s ease-in-out infinite;
}

.inv--hambar .inv-hero::before {
    --strand: url(../../img/invitations/ornaments/rustic-lights-wire.svg);
    background: var(--wire);
}

.inv--hambar .inv-hero::after {
    --strand: url(../../img/invitations/ornaments/rustic-lights-bulbs-a.svg);
    background: var(--bulb);
    animation: rustic-swing 7s ease-in-out infinite, rustic-glow 3.2s ease-in-out infinite;
}

.inv--hambar .inv-hero__corner--tl {
    --strand: url(../../img/invitations/ornaments/rustic-lights-bulbs-b.svg);
    background: var(--bulb);
    animation: rustic-swing 7s ease-in-out infinite, rustic-glow 3.2s ease-in-out -1.6s infinite;
}

/* The gable of the barn: roof, trim, faint boards and the round vent. */
.inv--hambar .inv-hero__corner--tr {
    display: block;
    top: var(--barn-top);
    left: 50%;
    right: auto;
    width: calc((var(--barn-w) - 5px) * 1.0843);
    max-width: none;
    aspect-ratio: 360 / 222;
    transform: none;
    translate: -50% 0;
    --hero-corner-image: url(../../img/invitations/ornaments/rustic-barn.svg);
    --hero-corner-fill: var(--wood);
    --hero-corner-opacity: 1;
}

/* The walls under the gable: two boards' edges down each side, fading towards the floor, a warm light inside. */
.inv--hambar .inv-hero__frame {
    display: block;
    inset: calc(var(--barn-top) + var(--gable-h)) auto 0 50%;
    width: var(--barn-w);
    margin-left: calc(var(--barn-w) / -2);
    border: 5px solid var(--wood);
    border-width: 0 5px;
    border-radius: 0;
    background:
        linear-gradient(90deg, transparent 10px, color-mix(in srgb, var(--wood) 30%, transparent) 10px 11.5px, transparent 11.5px 22px, color-mix(in srgb, var(--wood) 22%, transparent) 22px 23.5px, transparent 23.5px) left / 30px 100% no-repeat,
        linear-gradient(270deg, transparent 10px, color-mix(in srgb, var(--wood) 30%, transparent) 10px 11.5px, transparent 11.5px 22px, color-mix(in srgb, var(--wood) 22%, transparent) 22px 23.5px, transparent 23.5px) right / 30px 100% no-repeat,
        radial-gradient(90% 60% at 50% 12%, color-mix(in srgb, var(--bulb) 14%, transparent), transparent 75%);
    box-shadow: none;
    -webkit-mask: linear-gradient(180deg, #000 50%, transparent 96%);
    mask: linear-gradient(180deg, #000 50%, transparent 96%);
}

/* Two jar lanterns on the floor, by the walls; their flames flicker. */
.inv--hambar .inv-hero__corner--bl,
.inv--hambar .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: 30px;
    width: 32px;
    max-width: none;
    aspect-ratio: 60 / 92;
    transform: none;
    --hero-corner-image: url(../../img/invitations/ornaments/rustic-lantern.svg);
    --hero-corner-fill: color-mix(in srgb, var(--wood) 60%, var(--bulb));
    --hero-corner-opacity: .9;
    animation: rustic-flicker 2.6s ease-in-out infinite;
}

.inv--hambar .inv-hero__corner--bl {
    left: calc(50% - var(--barn-w) / 2 + 18px);
}

.inv--hambar .inv-hero__corner--br {
    right: calc(50% - var(--barn-w) / 2 + 18px);
    animation-delay: -1.1s;
}

/* Fireflies: warm dots that wander and go out (light palettes get a deeper core, so they show on cream). */
.inv--hambar .inv__ambient {
    --amb-image: none;
    --amb-radius: 50%;
    --amb-size: 9px;
    --amb-fill: radial-gradient(circle, color-mix(in srgb, var(--bulb) 50%, var(--inv-ornament)) 0 26%, color-mix(in srgb, var(--bulb) 55%, transparent) 42%, transparent 70%);
    --amb-anim: inv-firefly;
    --amb-duration: 9s;
    --amb-opacity: .95;
}

.inv--hambar.inv--dark .inv__ambient {
    --amb-fill: radial-gradient(circle, #FFF3CF 0 24%, color-mix(in srgb, var(--bulb) 70%, transparent) 42%, transparent 70%);
}

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

.inv--hambar .inv__ambient i:nth-child(3n) {
    display: none;
}

.inv--hambar .inv-hero__kicker {
    margin-top: 0;
}

.inv--hambar .orn--hero-divider,
.inv--hambar .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-lights-divider.svg);
    --orn-ratio: 320 / 56;
    --orn-fill: var(--wood);
}

.inv--hambar .orn--hero-divider {
    --orn-width: min(50cqi, 210px);
    --orn-margin: 14px auto 0;
}

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

.inv--hambar .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-lantern.svg);
    --orn-ratio: 60 / 92;
    --orn-width: 20px;
    --orn-margin: -6px auto 18px;
    --orn-fill: var(--wood);
}

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

/* Countdown: four small crates. */
.inv--hambar .inv-countdown > div {
    background:
        repeating-linear-gradient(180deg, transparent 0 17px, color-mix(in srgb, var(--wood) 24%, transparent) 17px 18px),
        color-mix(in srgb, var(--inv-accent) 40%, var(--inv-surface));
}

.inv--hambar .inv-program__index {
    border-color: var(--wood);
    color: var(--wood);
}

.inv--hambar .inv-monogram {
    border: 2px solid var(--wood);
    box-shadow: 0 0 0 5px var(--inv-surface), 0 0 0 6px color-mix(in srgb, var(--wood) 50%, transparent);
}

.inv--hambar .inv-envelope__letter {
    font-family: "Great Vibes", cursive;
    font-size: 2.2rem;
}

/* A string of lights across the envelope's pocket. */
.inv--hambar .inv-envelope__front::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 10%;
    aspect-ratio: 320 / 56;
    background: var(--bulb);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-lights-divider.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-lights-divider.svg) center / contain no-repeat;
}

@keyframes rustic-swing {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

@keyframes rustic-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@keyframes rustic-flicker {
    0%, 100% { opacity: .92; }
    20% { opacity: .66; }
    45% { opacity: 1; }
    70% { opacity: .76; }
}

/* ---------- Floare de colț: an edelweiss that turns slowly above the kicker, the Alps in two layers that part as the
   page scrolls, sprigs of edelweiss at the corners, small flowers on the wind, linen stitched at the edges ---------- */

.inv--floarea-de-colt {
    --f-display: "Cinzel", "Cormorant Garamond", serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Italianno", "Great Vibes", cursive;
    --felt: color-mix(in srgb, #fff 66%, var(--inv-ornament));
    --ink: color-mix(in srgb, var(--inv-primary) 68%, var(--inv-ornament));
    --rock-far: color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-bg));
    --rock-near: color-mix(in srgb, var(--inv-ornament) 66%, var(--inv-primary));
    --snow: color-mix(in srgb, #fff 72%, var(--rock-far));
    --ridge-h: clamp(110px, 30cqi, 200px);
    --names-weight: 400;
    --names-size: clamp(3.6rem, 17.5cqi, 7rem);
    --names-line: .92;
    --names-shadow: none;
    --amp-font: "Cinzel", serif;
    --amp-style: normal;
    --amp-size: .2em;
    --amp-color: var(--inv-ornament);
    --kicker-font: "Cinzel", serif;
    --kicker-size: .6rem;
    --kicker-weight: 400;
    --kicker-spacing: .3em;
    --date-font: "Cinzel", serif;
    --date-size: .84rem;
    --date-spacing: .28em;
    --heading-font: "Cinzel", serif;
    --heading-size: 1.6rem;
    --heading-weight: 400;
    --heading-spacing: .08em;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --message-size: 1.34rem;
    --closing-font: "Italianno", cursive;
    --closing-size: 3.4rem;
    --monogram-font: "Cinzel", serif;
    --body-weight: 400;
    --divider-rule-display: none;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 72%, transparent), transparent);
    --hero-pad: 64px 10px calc(var(--ridge-h) + 6px);
    --card-bg: var(--inv-surface);
    --card-radius: 16px;
    --card-border: 1.5px dashed color-mix(in srgb, var(--inv-ornament) 75%, transparent);
    --card-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 8px color-mix(in srgb, var(--inv-ornament) 25%, transparent), 0 30px 60px -36px rgba(0, 0, 0, .35);
    --box-bg: color-mix(in srgb, var(--inv-accent) 45%, var(--inv-surface));
    --box-border: 1px dashed color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    --box-radius: 12px;
    --box-shadow: none;
    --photo-width: min(70%, 280px);
    --photo-ratio: 1;
    --photo-radius: 50%;
    --photo-shadow: 0 0 0 6px var(--inv-surface), 0 18px 34px -18px rgba(0, 0, 0, .4);
    --button-radius: 999px;
    --env-front: linear-gradient(170deg, var(--inv-accent), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)));
    --seal-fill: radial-gradient(circle at 35% 30%, #fff, var(--felt) 60%, color-mix(in srgb, var(--felt) 78%, var(--inv-ornament)));
    --seal-color: var(--inv-primary);
    --pv-orn-anim: inv-breathe;
    --pv-orn-time: 7s;
    --pv-letter-step: 48ms;
    --pv-in-odd: translateX(-70px) rotate(-2deg);
    --pv-in-even: translateX(70px) rotate(2deg);
    --pv-deco: url(../../img/invitations/ornaments/rustic-edelweiss-divider.svg);
    --pv-deco-ratio: 320 / 40;
}

/* At night the flower is white felt drawn in a darker line, the snow on the peaks catches the moon. */
.inv--floarea-de-colt.inv--dark {
    --felt: color-mix(in srgb, var(--inv-text) 88%, var(--inv-ornament));
    --ink: color-mix(in srgb, var(--inv-ornament) 62%, var(--inv-bg));
    --rock-far: color-mix(in srgb, var(--inv-ornament) 30%, var(--inv-bg));
    --rock-near: color-mix(in srgb, var(--inv-ornament) 24%, var(--inv-surface));
}

.inv--floarea-de-colt .inv__backdrop {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 72%, var(--inv-bg)), var(--inv-bg) 720px);
}

.inv--floarea-de-colt .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/rustic-linen.svg);
    --texture-size: 48px;
    --texture-opacity: .07;
    --texture-fill: var(--inv-text);
}

/* The Alps as wide as the page: far peaks with snow on the summits, a near slope with firs; while the page scrolls the
   far ridge sinks faster than the near one. */
.inv--floarea-de-colt .inv-hero::before,
.inv--floarea-de-colt .inv-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 100cqi;
    margin-left: -50cqi;
    pointer-events: none;
}

.inv--floarea-de-colt .inv-hero::before {
    bottom: calc(var(--ridge-h) * .3);
    height: var(--ridge-h);
    background: linear-gradient(180deg, var(--snow) 0 24%, var(--rock-far) 46%);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-alps-far.svg) bottom center / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/rustic-alps-far.svg) bottom center / auto 100% repeat-x;
    translate: 0 calc(var(--pv-scroll, 0) * 48px);
}

.inv--floarea-de-colt .inv-hero::after {
    bottom: -1px;
    height: calc(var(--ridge-h) * .56);
    background: linear-gradient(180deg, var(--rock-near), color-mix(in srgb, var(--rock-near) 40%, var(--inv-bg)));
    -webkit-mask: url(../../img/invitations/ornaments/rustic-alps-near.svg) bottom center / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/rustic-alps-near.svg) bottom center / auto 100% repeat-x;
    translate: 0 calc(var(--pv-scroll, 0) * 18px);
}

/* The edelweiss over the kicker: felt bracts and, over them, their outlines and the florets; it turns once in a
   minute and a half and breathes (the collection's ornament loop). */
.inv--floarea-de-colt .orn--hero {
    display: block;
    position: relative;
    --orn-width: min(32cqi, 128px);
    --orn-max: 128px;
    --orn-ratio: 1;
    --orn-margin: 0 auto 2px;
    -webkit-mask: none;
    mask: none;
    background: none;
}

.inv--floarea-de-colt .orn--hero::before,
.inv--floarea-de-colt .orn--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    animation: rustic-turn 90s linear infinite;
}

.inv--floarea-de-colt .orn--hero::before {
    background: var(--felt);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-edelweiss.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-edelweiss.svg) center / contain no-repeat;
}

.inv--floarea-de-colt .orn--hero::after {
    background: var(--ink);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-edelweiss-lines.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-edelweiss-lines.svg) center / contain no-repeat;
}

/* Sprigs of edelweiss growing from the near slope, swaying in the mountain wind. */
.inv--floarea-de-colt .inv-hero__corner--bl,
.inv--floarea-de-colt .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: calc(var(--ridge-h) * .04);
    width: min(16cqi, 84px);
    max-width: none;
    aspect-ratio: 120 / 300;
    transform-origin: 50% 100%;
    --hero-corner-image: url(../../img/invitations/ornaments/rustic-edelweiss-sprig.svg);
    --hero-corner-fill: var(--ink);
    --hero-corner-opacity: .8;
    animation: rustic-sprig 8s ease-in-out infinite;
}

.inv--floarea-de-colt .inv-hero__corner--bl {
    left: -2px;
    transform: none;
}

.inv--floarea-de-colt .inv-hero__corner--br {
    right: -2px;
    transform: scaleX(-1);
    animation-duration: 9.5s;
    animation-delay: -2s;
}

/* Small felt flowers carried by the wind across the first screen. */
.inv--floarea-de-colt .inv__ambient {
    --amb-image: url(../../img/invitations/ornaments/rustic-edelweiss-star.svg);
    --amb-size: 13px;
    --amb-fill: var(--inv-ornament);
    --amb-anim: inv-breeze;
    --amb-duration: 17s;
    --amb-opacity: .8;
}

.inv--floarea-de-colt.inv--dark .inv__ambient {
    --amb-fill: var(--felt);
}

.inv--floarea-de-colt .inv__ambient i {
    top: var(--amb-y);
}

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

.inv--floarea-de-colt .orn--hero-divider,
.inv--floarea-de-colt .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-edelweiss-divider.svg);
    --orn-ratio: 320 / 40;
    --orn-fill: var(--ink);
}

.inv--floarea-de-colt .orn--hero-divider {
    --orn-width: min(58cqi, 250px);
    --orn-margin: 14px auto 0;
}

.inv--floarea-de-colt .orn--divider {
    --orn-width: 82%;
    --orn-max: 300px;
}

.inv--floarea-de-colt .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-edelweiss-star.svg);
    --orn-ratio: 1;
    --orn-width: 22px;
    --orn-margin: 0 auto 18px;
    --orn-fill: var(--inv-ornament);
}

.inv--floarea-de-colt .inv-hero__names {
    color: var(--inv-primary);
}

.inv--floarea-de-colt .inv-photo__frame {
    outline: 1.5px dashed color-mix(in srgb, var(--inv-ornament) 80%, transparent);
    outline-offset: 10px;
}

.inv--floarea-de-colt .inv-monogram {
    border: 1.5px dashed color-mix(in srgb, var(--inv-ornament) 80%, transparent);
}

.inv--floarea-de-colt .inv-envelope__letter {
    font-family: "Italianno", cursive;
    font-size: 2.6rem;
}

/* Linen stitched along the pocket of the envelope, an edelweiss in its corner. */
.inv--floarea-de-colt .inv-envelope__front::after {
    content: "";
    position: absolute;
    right: 7%;
    bottom: 9%;
    width: 18%;
    aspect-ratio: 1;
    background: var(--ink);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-edelweiss-lines.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-edelweiss-lines.svg) center / contain no-repeat;
    opacity: .75;
}

.inv--floarea-de-colt .inv-envelope__front {
    outline: 1.5px dashed color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    outline-offset: -8px;
}

@keyframes rustic-turn {
    to { transform: rotate(360deg); }
}

@keyframes rustic-sprig {
    0%, 100% { rotate: -3deg; }
    50% { rotate: 3deg; }
}

/* ---------- Prispă: the porch of an old village house: a carved eave and two posts with brackets frame the first
   screen, a woven rug (scoarță) hangs at its foot and moves slowly, like cloth on the loom, geraniums in clay pots sway,
   petals drift down ---------- */

.inv--prispa {
    --f-display: "Gilda Display", "Cormorant Garamond", serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Alex Brush", "Great Vibes", cursive;
    --wood: color-mix(in srgb, #7B4A28 58%, var(--inv-text));
    --wood-light: color-mix(in srgb, var(--wood) 66%, #E8C9A0);
    --wood-dark: color-mix(in srgb, var(--wood) 72%, #000);
    --cloth: color-mix(in srgb, var(--inv-accent) 72%, var(--inv-surface));
    --leaf: color-mix(in srgb, #3F7034 76%, var(--inv-text));
    --rug-h: 72px;
    --rug-bottom: 22px;
    --pot-w: min(22cqi, 96px);
    --names-weight: 400;
    --names-size: clamp(3.2rem, 15.5cqi, 6.2rem);
    --names-line: 1;
    --names-shadow: none;
    --amp-font: "Gilda Display", serif;
    --amp-style: italic;
    --amp-size: .3em;
    --amp-color: var(--inv-ornament);
    --kicker-size: .64rem;
    --kicker-weight: 700;
    --kicker-spacing: .26em;
    --date-font: "Gilda Display", serif;
    --date-size: .98rem;
    --date-spacing: .26em;
    --heading-size: 2rem;
    --heading-weight: 400;
    --label-weight: 700;
    --text-display-font: "Gilda Display", serif;
    --message-size: 1.2rem;
    --closing-font: "Alex Brush", cursive;
    --closing-size: 3rem;
    --monogram-font: "Gilda Display", serif;
    --body-weight: 400;
    --divider-rule-display: none;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 78%, transparent), transparent);
    --hero-pad: 90px 24px calc(var(--rug-h) + var(--rug-bottom) + 100px);
    --card-bg: var(--inv-surface);
    --card-radius: 4px;
    --card-border: 0 solid transparent;
    --card-shadow: 0 30px 60px -38px rgba(60, 30, 10, .55);
    --card-pad: 70px 22px 70px;
    --card-pad-wide: 84px 56px;
    --box-bg: var(--cloth);
    --box-border: 0 solid transparent;
    --box-radius: 2px;
    --box-shadow: inset 0 4px 0 var(--inv-primary);
    --photo-width: min(80%, 300px);
    --photo-ratio: 4 / 5;
    --photo-radius: 2px;
    --photo-shadow: 0 0 0 5px var(--inv-surface), 0 0 0 9px var(--inv-primary), 0 0 0 12px var(--inv-surface), 0 0 0 14px var(--inv-ornament),
        0 26px 40px -22px rgba(0, 0, 0, .45);
    --button-radius: 2px;
    --env-front: linear-gradient(170deg, var(--cloth), color-mix(in srgb, var(--cloth) 80%, var(--inv-primary)));
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 55%, #fff), var(--inv-primary) 60%, color-mix(in srgb, var(--inv-primary) 72%, #000));
    --seal-color: var(--inv-on-primary);
    --pv-letter-step: 52ms;
    --pv-in-odd: translateY(56px);
    --pv-in-even: translateY(56px);
    --pv-deco: url(../../img/invitations/ornaments/rustic-rug-strip.svg);
    --pv-deco-ratio: 192 / 24;
}

.inv--prispa .inv__backdrop {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--wood) 14%, var(--inv-bg)), var(--inv-bg) 300px),
        var(--inv-bg);
}

.inv--prispa .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/rustic-linen.svg);
    --texture-size: 48px;
    --texture-opacity: .06;
    --texture-fill: var(--inv-text);
}

/* The eave of the porch, as wide as the page: beam, moulding and fretwork. */
.inv--prispa .inv-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100cqi;
    height: 48px;
    margin-left: -50cqi;
    background: var(--wood);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-eave.svg) 0 0 / 80px 48px repeat-x;
    mask: url(../../img/invitations/ornaments/rustic-eave.svg) 0 0 / 80px 48px repeat-x;
    pointer-events: none;
}

/* The two posts, turned wood with carved rings, from the eave down to the rug; their heads and brackets are the two
   top corners. */
.inv--prispa .inv-hero__frame {
    display: block;
    inset: 44px 6px calc(var(--rug-h) + var(--rug-bottom)) 6px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    --shaft: linear-gradient(90deg, var(--wood-dark), var(--wood) 28%, var(--wood-light) 50%, var(--wood) 72%, var(--wood-dark));
    --rings: repeating-linear-gradient(180deg, transparent 0 150px, var(--wood-dark) 150px 153px, transparent 153px 158px, var(--wood-dark) 158px 160px, transparent 160px 300px);
    background:
        var(--rings) left top / 18px 100% no-repeat, var(--rings) right top / 18px 100% no-repeat,
        var(--shaft) left top / 18px 100% no-repeat, var(--shaft) right top / 18px 100% no-repeat;
}

.inv--prispa .inv-hero__corner--tl,
.inv--prispa .inv-hero__corner--tr {
    display: block;
    top: 12px;
    width: 108px;
    max-width: none;
    aspect-ratio: 1;
    --hero-corner-image: url(../../img/invitations/ornaments/rustic-post.svg);
    --hero-corner-fill: var(--wood);
    --hero-corner-opacity: 1;
}

.inv--prispa .inv-hero__corner--tl {
    left: -3px;
}

.inv--prispa .inv-hero__corner--tr {
    right: -3px;
}

/* The woven rug hanging at the foot of the porch, as wide as the page: the cloth with its fringe, then the two
   colours of its pattern, which slide together by one motif, like cloth leaving the loom. */
.inv--prispa .inv-hero__frame::before,
.inv--prispa .inv-hero__frame::after,
.inv--prispa .inv-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    height: var(--rug-h);
    pointer-events: none;
}

.inv--prispa .inv-hero__frame::before {
    top: 100%;
    width: 100cqi;
    height: calc(var(--rug-h) + 12px);
    margin-left: -50cqi;
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--cloth) 70%, var(--inv-text)) 0 2px, transparent 2px 7px) bottom / 100% 12px no-repeat,
        repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--inv-text) 5%, transparent) 3px 4px) top / 100% var(--rug-h) no-repeat,
        linear-gradient(var(--cloth), var(--cloth)) top / 100% var(--rug-h) no-repeat;
    box-shadow: 0 -2px 0 color-mix(in srgb, var(--wood) 60%, transparent);
}

.inv--prispa .inv-hero__frame::after,
.inv--prispa .inv-hero::after {
    width: calc(100cqi + 240px);
    margin-left: calc(-50cqi - 60px);
    -webkit-mask: var(--motif) 0 0 / 108px 72px repeat-x;
    mask: var(--motif) 0 0 / 108px 72px repeat-x;
    animation: rustic-weave 18s linear infinite;
}

.inv--prispa .inv-hero__frame::after {
    --motif: url(../../img/invitations/ornaments/rustic-rug-a.svg);
    top: 100%;
    background: var(--inv-primary);
}

.inv--prispa .inv-hero::after {
    --motif: url(../../img/invitations/ornaments/rustic-rug-b.svg);
    bottom: var(--rug-bottom);
    background: var(--inv-ornament);
}

/* Geraniums in clay pots on the porch floor, swaying a little: the leaves, then the flowers and the pot. */
.inv--prispa .inv-hero__corner--bl,
.inv--prispa .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: calc(var(--rug-h) + var(--rug-bottom) - 2px);
    width: var(--pot-w);
    max-width: none;
    aspect-ratio: 140 / 160;
    -webkit-mask: none;
    mask: none;
    background: none;
    opacity: 1;
    transform-origin: 50% 100%;
    animation: rustic-pot 7s ease-in-out infinite;
}

.inv--prispa .inv-hero__corner--bl {
    left: 22px;
    transform: none;
}

.inv--prispa .inv-hero__corner--br {
    right: 22px;
    transform: scaleX(-1);
    animation-delay: -3s;
}

.inv--prispa .inv-hero__corner--bl::before,
.inv--prispa .inv-hero__corner--br::before,
.inv--prispa .inv-hero__corner--bl::after,
.inv--prispa .inv-hero__corner--br::after {
    content: "";
    position: absolute;
    inset: 0;
}

.inv--prispa .inv-hero__corner--bl::before,
.inv--prispa .inv-hero__corner--br::before {
    background: var(--leaf);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-geranium-leaves.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-geranium-leaves.svg) center / contain no-repeat;
}

.inv--prispa .inv-hero__corner--bl::after,
.inv--prispa .inv-hero__corner--br::after {
    background: var(--inv-primary);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-geranium-flowers.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/rustic-geranium-flowers.svg) center / contain no-repeat;
}

/* Petals drifting down over the porch. */
.inv--prispa .inv__ambient {
    --amb-image: url(../../img/invitations/ornaments/rustic-blossom.svg);
    --amb-size: 11px;
    --amb-fill: color-mix(in srgb, var(--inv-primary) 60%, var(--inv-surface));
    --amb-anim: inv-petal;
    --amb-duration: 16s;
    --amb-opacity: .75;
}

.inv--prispa .inv__ambient i:nth-child(odd) {
    display: none;
}

.inv--prispa .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-rhomb.svg);
    --orn-ratio: 1;
    --orn-width: 28px;
    --orn-margin: 0 auto 2px;
    --orn-fill: var(--inv-primary);
}

.inv--prispa .orn--hero-divider,
.inv--prispa .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-rug-strip.svg);
    --orn-ratio: 192 / 24;
    --orn-fill: var(--inv-ornament);
}

.inv--prispa .orn--hero-divider {
    --orn-width: min(48cqi, 200px);
    --orn-margin: 16px auto 0;
}

.inv--prispa .orn--divider {
    --orn-width: 70%;
    --orn-max: 260px;
}

.inv--prispa .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/rustic-rhomb.svg);
    --orn-ratio: 1;
    --orn-width: 18px;
    --orn-margin: 2px auto 18px;
    --orn-fill: var(--inv-primary);
}

/* Woven bands along the top and the bottom of the card. */
.inv--prispa .orn--card-top,
.inv--prispa .orn--card-bottom {
    display: block;
    position: absolute;
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    height: 18px;
    aspect-ratio: auto;
    margin: 0;
    background: var(--inv-primary);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-rug-strip.svg) center / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/rustic-rug-strip.svg) center / auto 100% repeat-x;
}

.inv--prispa .orn--card-top {
    top: 18px;
}

.inv--prispa .orn--card-bottom {
    bottom: 18px;
}

.inv--prispa .inv-hero__kicker {
    color: var(--inv-primary);
}

.inv--prispa .inv-program__index {
    border-color: var(--inv-ornament);
    color: var(--inv-ornament);
}

.inv--prispa .inv-monogram {
    border: 0;
    background: var(--cloth);
    box-shadow: 0 0 0 3px var(--inv-primary), 0 0 0 6px var(--inv-surface), 0 0 0 8px var(--inv-ornament);
}

.inv--prispa .inv-envelope__letter {
    font-family: "Alex Brush", cursive;
    font-size: 2.3rem;
}

/* A woven band across the pocket of the envelope. */
.inv--prispa .inv-envelope__front::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14%;
    height: 16px;
    background: var(--inv-primary);
    -webkit-mask: url(../../img/invitations/ornaments/rustic-rug-strip.svg) center / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/rustic-rug-strip.svg) center / auto 100% repeat-x;
}

@keyframes rustic-weave {
    to { transform: translateX(-108px); }
}

@keyframes rustic-pot {
    0%, 100% { rotate: -1.6deg; }
    50% { rotate: 1.6deg; }
}