/* 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). */

.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;
    --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;
    --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;
    --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;
    --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;
    --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;
}