/* Collection "seasonal": mare, iarnă, toamnă, Provence, grădini. Contract: docs/invitation-templates.md.
   Ornaments: ../../img/invitations/ornaments/seasonal-*.svg, textures: ../../img/invitations/textures/seasonal-*.svg. */

/* ---------- Marin: sky-light hero over layered waves, the card floats on a navy sea; anchor, rope, porthole photo ---------- */

.inv--marin {
    --f-display: "DM Serif Display", Georgia, serif;
    --f-body: "Montserrat", "Segoe UI", sans-serif;
    --f-names: "DM Serif Display", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.9rem, 14cqi, 5.6rem);
    --names-line: 1;
    --amp-font: "Pinyon Script", cursive;
    --amp-style: normal;
    --amp-size: .62em;
    --amp-color: var(--inv-ornament);
    --kicker-size: .64rem;
    --kicker-spacing: .38em;
    --date-weight: 600;
    --date-spacing: .36em;
    --heading-weight: 400;
    --heading-size: 2.1rem;
    --message-style: normal;
    --text-display-font: "DM Serif Display", Georgia, serif;
    --message-size: 1.2rem;
    --closing-font: "DM Serif Display", Georgia, serif;
    --closing-size: 2.2rem;
    --hero-pad: 56px 8px 150px;
    --hero-halo: none;
    --card-radius: 4px;
    --card-pad: 40px 22px;
    --box-radius: 2px;
    --box-bg: var(--inv-surface);
    --box-shadow: none;
    --button-radius: 999px;
    --divider-rule-display: none;
    --monogram-font: "DM Serif Display", Georgia, serif;
    --marin-sea: var(--inv-primary);
    --marin-photo: min(56cqi, 250px);
    --photo-width: var(--marin-photo);
    --photo-ratio: 1;
    --photo-radius: 50%;
    --photo-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
    --env-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg)), var(--inv-bg) 60%, var(--inv-bg) 78%, var(--marin-sea) 78%);
    --env-fill: var(--marin-sea);
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--marin-sea) 88%, #fff), var(--marin-sea));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--marin-sea) 70%, #000), color-mix(in srgb, var(--marin-sea) 92%, #fff));
    --seal-fill: radial-gradient(circle at 35% 30%, #fff, var(--inv-surface) 60%, color-mix(in srgb, var(--inv-surface) 80%, var(--inv-ornament)));
    --seal-color: var(--inv-primary);
    overflow: clip;
}

.inv--marin.inv--dark {
    --marin-sea: color-mix(in srgb, var(--inv-bg) 55%, #000);
}

.inv--marin .inv__backdrop {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg)), var(--inv-bg) 520px);
}

/* A compass rose, cropped by the top-right edge. */
.inv--marin .inv__deco--a {
    display: block;
    --deco-image: url(../../img/invitations/ornaments/seasonal-compass.svg);
    --deco-a-width: min(72cqi, 420px);
    --deco-a-top: -14cqi;
    --deco-a-left: auto;
    --deco-opacity: .14;
    left: auto;
    right: -22cqi;
}

.inv--marin .inv-hero::after {
    content: "";
    position: absolute;
    left: calc(50% - 50cqi);
    bottom: 0;
    width: 100cqi;
    height: 120px;
    background: var(--marin-sea);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-waves.svg) repeat-x 0 100% / 480px 120px;
    mask: url(../../img/invitations/ornaments/seasonal-waves.svg) repeat-x 0 100% / 480px 120px;
    pointer-events: none;
}

.inv--marin .inv-hero__scroll {
    z-index: 2;
}

.inv--marin .inv-hero__scroll span {
    border-color: #fff;
}

.inv--marin .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-anchor.svg);
    --orn-ratio: 160 / 210;
    --orn-width: 24%;
    --orn-max: 96px;
    --orn-fill: var(--inv-primary);
}

.inv--marin .orn--hero-divider,
.inv--marin .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-helm.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 78%;
    --orn-max: 300px;
    --orn-fill: var(--inv-ornament);
}

.inv--marin .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-wave-line.svg);
    --orn-ratio: 128 / 18;
    --orn-width: 26%;
    --orn-max: 110px;
    --orn-fill: var(--inv-ornament);
}

.inv--marin .inv-hero__names {
    color: var(--inv-primary);
}

/* The card floats on the sea: its own spread shadow paints the water beside and below it (clipped at its top edge). */
.inv--marin .inv-card {
    box-shadow:
        inset 0 0 0 8px var(--inv-surface),
        inset 0 0 0 9px var(--inv-line),
        inset 0 0 0 12px var(--inv-surface),
        inset 0 0 0 13px color-mix(in srgb, var(--inv-primary) 12%, transparent),
        0 0 0 100vmax var(--marin-sea);
    clip-path: inset(0 -100vmax -100vmax -100vmax);
}

/* Porthole: brass ring with bolts around the round photo. */
.inv--marin .inv-photo::after {
    content: "";
    position: absolute;
    top: calc(26px - var(--marin-photo) * .125);
    left: 50%;
    width: calc(var(--marin-photo) * 1.25);
    aspect-ratio: 1;
    translate: -50% 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--inv-ornament) 60%, #fff), var(--inv-ornament) 45%, color-mix(in srgb, var(--inv-ornament) 70%, #000));
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-porthole.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-porthole.svg) center / contain no-repeat;
    pointer-events: none;
}

.inv--marin .inv-photo {
    padding-block: calc(26px + var(--marin-photo) * .14);
}

.inv--marin .inv-family__item,
.inv--marin .inv-program__item {
    border-top: 3px solid var(--inv-primary);
}

.inv--marin .inv-countdown > div {
    border-bottom: 3px solid var(--inv-primary);
}

/* Program numbers as life buoys. */
.inv--marin .inv-program__index {
    width: 38px;
    height: 38px;
    top: -20px;
    margin-left: -19px;
    border: 0;
    background:
        radial-gradient(circle, var(--inv-surface) 0 10px, transparent 10.5px),
        repeating-conic-gradient(from 45deg, var(--inv-ornament) 0 45deg, var(--inv-surface) 0 90deg);
    box-shadow: 0 0 0 1.5px var(--inv-ornament), inset 0 0 0 1.5px var(--inv-ornament);
    font-weight: 600;
}

.inv--marin .inv-when__date,
.inv--marin .inv-program__time,
.inv--marin .inv-countdown span {
    font-weight: 400;
}

/* Envelope: it floats over the sky, the sea and its waves start under the button. */
.inv--marin .inv-envelope::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(78% - 96px);
    height: 120px;
    background: var(--marin-sea);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-waves.svg) repeat-x 0 100% / 480px 120px;
    mask: url(../../img/invitations/ornaments/seasonal-waves.svg) repeat-x 0 100% / 480px 120px;
    pointer-events: none;
}

/* ---------- Tropical: jungle frame of monstera and palm leaves around a pale setting sun; hibiscus, capsule photo ---------- */

.inv--tropical {
    --f-display: "Yeseva One", Georgia, serif;
    --f-body: "Outfit", "Segoe UI", sans-serif;
    --f-names: "Yeseva One", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.5rem, 12.5cqi, 5rem);
    --names-line: 1.02;
    --names-shadow: 0 0 24px color-mix(in srgb, var(--inv-bg) 90%, transparent);
    --amp-font: "Pacifico", cursive;
    --amp-style: normal;
    --amp-size: .5em;
    --amp-color: var(--inv-primary);
    --kicker-size: .66rem;
    --kicker-spacing: .36em;
    --date-weight: 500;
    --date-spacing: .34em;
    --heading-weight: 400;
    --heading-size: 2.15rem;
    --text-display-font: "Outfit", "Segoe UI", sans-serif;
    --message-style: normal;
    --message-size: 1.14rem;
    --closing-font: "Yeseva One", Georgia, serif;
    --closing-size: 2.3rem;
    --hero-pad: 150px 8px 170px;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 60%, transparent), transparent);
    --card-radius: 30px;
    --card-pad: 46px 22px;
    --card-margin-top: 30px;
    --card-shadow: 0 26px 60px -30px color-mix(in srgb, var(--inv-primary) 45%, transparent);
    --box-bg: color-mix(in srgb, var(--inv-accent) 42%, var(--inv-surface));
    --box-border: 0 solid transparent;
    --box-radius: 22px;
    --box-shadow: none;
    --button-radius: 999px;
    --divider-rule-display: none;
    --monogram-font: "Yeseva One", Georgia, serif;
    --tropical-photo: min(62cqi, 270px);
    --photo-width: var(--tropical-photo);
    --photo-ratio: 3 / 4.7;
    --photo-radius: 999px;
    --photo-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 8px color-mix(in srgb, var(--inv-ornament) 40%, transparent), 0 30px 50px -28px rgba(0, 0, 0, .5);
    --tropical-leaf: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 78%, #fff), var(--inv-ornament) 55%, color-mix(in srgb, var(--inv-ornament) 75%, #000));
    --tropical-flower: radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--inv-primary) 62%, #000) 0 10%, var(--inv-primary) 34%, color-mix(in srgb, var(--inv-primary) 88%, #fff));
    --env-bg: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--inv-accent) 60%, #fff), var(--inv-accent) 38%, var(--inv-bg) 75%);
    --env-fill: color-mix(in srgb, var(--inv-ornament) 85%, #000);
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 80%, #fff), var(--inv-ornament));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 70%, #000), color-mix(in srgb, var(--inv-ornament) 90%, #fff));
    --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);
}

.inv--tropical.inv--dark {
    --env-bg: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--inv-primary) 22%, var(--inv-bg)), var(--inv-bg) 70%);
}

/* Sunset sky: a warm band at the top fading into the page colour. */
.inv--tropical .inv__backdrop {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 78%, var(--inv-primary)) 0, var(--inv-accent) 260px, var(--inv-bg) 760px);
}

.inv--tropical.inv--dark .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 520px at 50% 330px, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 70%),
        var(--inv-bg);
}

/* A pale sun behind the names. */
.inv--tropical .inv-hero::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(92cqi, 440px);
    aspect-ratio: 1;
    translate: -50% -52%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-surface) 92%, var(--inv-accent)) 0 45%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)) 70%, transparent 71%);
    opacity: .9;
    pointer-events: none;
}

.inv--tropical.inv--dark .inv-hero::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 24%, var(--inv-bg)) 0 50%, color-mix(in srgb, var(--inv-primary) 12%, var(--inv-bg)) 70%, transparent 71%);
}

/* Four leaves around the hero: palm fronds top-left and bottom-right, monstera top-right and bottom-left. */
.inv--tropical .inv-hero__corner {
    display: block;
    max-width: none;
    --hero-corner-opacity: 1;
    --hero-corner-fill: var(--tropical-leaf);
}

.inv--tropical .inv-hero__corner--tl {
    --hero-corner-image: url(../../img/invitations/ornaments/seasonal-palm.svg);
    --hero-corner-ratio: 400 / 260;
    width: min(74cqi, 360px);
    top: -34px;
    left: -30cqi;
    transform: rotate(22deg);
}

.inv--tropical .inv-hero__corner--tr {
    --hero-corner-image: url(../../img/invitations/ornaments/seasonal-monstera.svg);
    --hero-corner-ratio: 300 / 352;
    width: min(56cqi, 280px);
    top: -64px;
    right: -20cqi;
    transform: rotate(-146deg);
}

.inv--tropical .inv-hero__corner--bl {
    --hero-corner-image: url(../../img/invitations/ornaments/seasonal-monstera.svg);
    --hero-corner-ratio: 300 / 352;
    width: min(50cqi, 250px);
    bottom: -40px;
    left: -19cqi;
    transform: rotate(46deg);
}

.inv--tropical .inv-hero__corner--br {
    --hero-corner-image: url(../../img/invitations/ornaments/seasonal-palm.svg);
    --hero-corner-ratio: 400 / 260;
    width: min(70cqi, 340px);
    bottom: 6px;
    right: -30cqi;
    transform: scaleX(-1) rotate(-8deg);
}

.inv--tropical .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-hibiscus.svg);
    --orn-ratio: 1;
    --orn-width: 22%;
    --orn-max: 84px;
    --orn-fill: var(--tropical-flower);
}

.inv--tropical .orn--hero-divider,
.inv--tropical .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-palm-divider.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 74%;
    --orn-max: 280px;
    --orn-fill: var(--inv-ornament);
}

.inv--tropical .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-palm-divider.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 38%;
    --orn-max: 150px;
    --orn-fill: var(--inv-ornament);
}

/* A hibiscus pinned on the top edge of the card. */
.inv--tropical .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-hibiscus.svg);
    --orn-ratio: 1;
    --orn-width: 84px;
    --orn-max: 84px;
    --orn-margin: -88px auto 4px;
    --orn-fill: var(--tropical-flower);
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .14));
}

/* A monstera leaf behind the capsule photo. */
.inv--tropical .inv-photo::before {
    content: "";
    position: absolute;
    top: -2%;
    left: calc(50% - var(--tropical-photo) / 2 - 30%);
    width: min(60cqi, 270px);
    aspect-ratio: 300 / 352;
    background: var(--tropical-leaf);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-monstera.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-monstera.svg) center / contain no-repeat;
    transform: rotate(-32deg);
    opacity: .92;
    pointer-events: none;
}

.inv--tropical .inv-photo__frame {
    position: relative;
    z-index: 1;
}

.inv--tropical .inv-program__item {
    padding-top: 34px;
}

.inv--tropical .inv-program__index {
    border: 0;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    font-weight: 600;
}

.inv--tropical .inv-countdown > div {
    padding-top: 20px;
    border-radius: 999px 999px 18px 18px;
}

.inv--tropical .inv-when__date,
.inv--tropical .inv-program__time,
.inv--tropical .inv-countdown span {
    font-weight: 400;
}

.inv--tropical .inv-closing__line {
    font-family: "Pacifico", cursive;
    font-size: 1.3rem;
    font-style: normal;
    color: var(--inv-muted);
}

/* Envelope: leaves reaching into the screen from two corners. */
.inv--tropical .inv-envelope::before,
.inv--tropical .inv-envelope::after {
    content: "";
    position: absolute;
    background: var(--tropical-leaf);
    pointer-events: none;
}

.inv--tropical .inv-envelope::before {
    top: -70px;
    right: -90px;
    width: 300px;
    aspect-ratio: 300 / 352;
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-monstera.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-monstera.svg) center / contain no-repeat;
    transform: rotate(-146deg);
}

.inv--tropical .inv-envelope::after {
    bottom: 20px;
    left: -120px;
    width: 360px;
    aspect-ratio: 400 / 260;
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-palm.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-palm.svg) center / contain no-repeat;
    transform: rotate(-12deg);
}

/* ---------- Iarnă: falling snow, a large ice crystal behind spaced capitals, frost ferns in the corners, hexagon cells ---------- */

.inv--iarna {
    --f-display: "Forum", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Forum", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.4rem, 12.4cqi, 4.8rem);
    --names-transform: uppercase;
    --names-spacing: .08em;
    --names-line: 1.08;
    --names-shadow: none;
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: 1.05em;
    --amp-color: var(--inv-muted);
    --kicker-size: .64rem;
    --kicker-weight: 600;
    --kicker-spacing: .5em;
    --date-font: "Forum", Georgia, serif;
    --date-size: 1.05rem;
    --date-spacing: .3em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Forum", Georgia, serif;
    --heading-size: 1.75rem;
    --heading-weight: 400;
    --heading-transform: uppercase;
    --heading-spacing: .16em;
    --label-weight: 600;
    --text-display-font: "Forum", Georgia, serif;
    --message-style: normal;
    --message-size: 1.28rem;
    --body-weight: 400;
    --closing-font: "Forum", Georgia, serif;
    --closing-size: 2rem;
    --hero-pad: 64px 8px 96px;
    --hero-content-pad: 24px 2px;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 70%, transparent), transparent);
    --card-radius: 24px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 45%, transparent);
    --card-shadow: 0 0 0 7px color-mix(in srgb, var(--inv-surface) 45%, transparent), 0 34px 70px -34px color-mix(in srgb, var(--inv-primary) 55%, transparent);
    --box-bg: linear-gradient(180deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface)));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 50%, transparent);
    --box-radius: 16px;
    --box-shadow: none;
    --divider-rule-display: none;
    --monogram-font: "Forum", Georgia, serif;
    --photo-width: min(66cqi, 290px);
    --photo-ratio: 3 / 4;
    --photo-radius: 50%;
    --photo-shadow: 0 0 0 5px var(--inv-surface), 0 0 0 6px var(--inv-ornament), 0 0 0 12px var(--inv-surface), 0 0 0 13px color-mix(in srgb, var(--inv-ornament) 50%, transparent), 0 30px 50px -26px rgba(0, 0, 0, .45);
    --iarna-ice: linear-gradient(135deg, color-mix(in srgb, var(--inv-ornament) 70%, #fff), var(--inv-ornament) 45%, color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-primary)));
    --env-bg: radial-gradient(circle at 50% 40%, var(--inv-surface), var(--inv-accent) 55%, var(--inv-bg) 85%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 60%, var(--inv-ornament));
    --env-front: linear-gradient(160deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 55%, var(--inv-ornament)), var(--inv-accent));
    --seal-fill: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--inv-ornament) 55%, #fff) 55%, var(--inv-ornament));
    --seal-color: var(--inv-text);
}

.inv--iarna.inv--dark {
    --env-bg: radial-gradient(circle at 50% 40%, var(--inv-accent), var(--inv-bg) 75%);
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)), var(--inv-accent));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, #000), color-mix(in srgb, var(--inv-accent) 85%, var(--inv-ornament)));
    --env-fill: color-mix(in srgb, var(--inv-accent) 80%, #000);
    --seal-color: var(--inv-bg);
}

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

.inv--iarna .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/seasonal-snow.svg);
    --texture-size: 220px;
    --texture-fill: var(--inv-ornament);
    --texture-opacity: .38;
}

.inv--iarna.inv--dark .inv__texture {
    --texture-fill: var(--inv-text);
    --texture-opacity: .2;
}

/* Falling snow over the first screen. */
.inv--iarna .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/seasonal-snowflake.svg);
    --amb-anim: inv-fall;
    --amb-size: 15px;
    --amb-duration: 17s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .85;
}

.inv--iarna.inv--dark .inv__ambient {
    --amb-fill: var(--inv-text);
    --amb-opacity: .7;
}

/* The ice crystal behind the names. */
.inv--iarna .inv-hero::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(104cqi, 500px);
    aspect-ratio: 1;
    translate: -50% -50%;
    background: var(--iarna-ice);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-crystal.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-crystal.svg) center / contain no-repeat;
    opacity: .3;
    pointer-events: none;
}

.inv--iarna.inv--dark .inv-hero::before {
    opacity: .24;
}

/* Frost ferns growing from the four corners of the first screen. */
.inv--iarna .inv-hero__corner {
    display: block;
    width: min(50cqi, 240px);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/seasonal-frost.svg);
    --hero-corner-fill: var(--iarna-ice);
    --hero-corner-opacity: .95;
}

.inv--iarna .inv-hero__corner--tl,
.inv--iarna .inv-hero__corner--bl {
    left: -16px;
}

.inv--iarna .inv-hero__corner--tr,
.inv--iarna .inv-hero__corner--br {
    right: -16px;
}

.inv--iarna .inv-hero__corner--tl,
.inv--iarna .inv-hero__corner--tr {
    top: 0;
}

.inv--iarna .inv-hero__corner--bl,
.inv--iarna .inv-hero__corner--br {
    bottom: 0;
    width: min(38cqi, 190px);
}

/* Silvery names: a vertical sheen from primary to a lighter ice tone. */
.inv--iarna .inv-hero__name {
    background: linear-gradient(180deg, var(--inv-primary) 30%, color-mix(in srgb, var(--inv-primary) 72%, var(--inv-ornament)) 62%, var(--inv-primary) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.inv--iarna .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-snowflake.svg);
    --orn-ratio: 1;
    --orn-width: 12%;
    --orn-max: 46px;
    --orn-fill: var(--iarna-ice);
}

.inv--iarna .orn--hero-divider,
.inv--iarna .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-snow-divider.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 80%;
    --orn-max: 300px;
    --orn-fill: var(--inv-ornament);
}

.inv--iarna.inv--dark .orn--hero-divider,
.inv--iarna.inv--dark .orn--divider {
    --orn-fill: var(--iarna-ice);
}

.inv--iarna .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-snowflake.svg);
    --orn-ratio: 1;
    --orn-width: 24px;
    --orn-max: 24px;
    --orn-margin: -8px auto 22px;
    --orn-fill: var(--inv-ornament);
}

.inv--iarna .inv-card .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/seasonal-frost.svg);
    --corner-size: 34%;
    --corner-max: 150px;
    --corner-inset: 5px;
    --corner-fill: var(--iarna-ice);
    --corner-opacity: .38;
}

/* Countdown in hexagonal ice cells. */
.inv--iarna .inv-countdown {
    gap: 6px;
}

.inv--iarna .inv-countdown > div {
    display: grid;
    align-content: center;
    aspect-ratio: 1 / 1.12;
    padding: 6px 2px;
    border: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 85%, var(--inv-surface)), var(--inv-accent));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

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

.inv--iarna .inv-countdown small {
    margin-top: 4px;
    font-size: .56rem;
    letter-spacing: .14em;
}

.inv--iarna .inv-program__index {
    width: 32px;
    height: 36px;
    margin-left: -16px;
    top: -18px;
    border: 0;
    border-radius: 0;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    font-weight: 600;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.inv--iarna .inv-program__item {
    padding-top: 34px;
}

.inv--iarna .inv-when__date {
    font-size: 1.9rem;
    letter-spacing: .06em;
}

.inv--iarna .inv-closing__line {
    font-family: "Italianno", cursive;
    font-size: 2rem;
    font-style: normal;
    color: var(--inv-muted);
}

.inv--iarna .inv-envelope::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--inv-ornament);
    opacity: .45;
    -webkit-mask: url(../../img/invitations/textures/seasonal-snow.svg) repeat 0 0 / 220px;
    mask: url(../../img/invitations/textures/seasonal-snow.svg) repeat 0 0 / 220px;
    pointer-events: none;
}

/* ---------- Toamnă: two-tone autumn branches (maple in rust, oak and acorns in ochre), falling maple leaves,
   warm italic serif, the photo as a polaroid print with a leaf tucked on its corner ---------- */

.inv--toamna {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --names-weight: 300;
    --names-style: italic;
    --names-size: clamp(2.8rem, 14.5cqi, 5.6rem);
    --names-line: 1;
    --names-shadow: 0 0 26px color-mix(in srgb, var(--inv-bg) 90%, transparent);
    --amp-font: "Allura", cursive;
    --amp-style: normal;
    --amp-size: .72em;
    --amp-color: var(--inv-ornament);
    --kicker-size: .64rem;
    --kicker-spacing: .42em;
    --kicker-weight: 500;
    --date-font: "Fraunces", Georgia, serif;
    --date-size: 1.2rem;
    --date-weight: 300;
    --date-spacing: .08em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Fraunces", Georgia, serif;
    --heading-size: 2.25rem;
    --heading-weight: 300;
    --heading-style: italic;
    --text-display-font: "Fraunces", Georgia, serif;
    --message-style: italic;
    --message-size: 1.28rem;
    --body-weight: 400;
    --closing-font: "Fraunces", Georgia, serif;
    --closing-size: 2.4rem;
    --hero-pad: 150px 8px 220px;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 80%, transparent), transparent);
    --card-radius: 6px;
    --card-pad: 52px 26px;
    --card-margin-top: 18px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 28%, transparent);
    --card-shadow: 0 2px 0 color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)), 0 30px 60px -32px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    --box-bg: linear-gradient(160deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 30%, transparent);
    --box-radius: 26px 4px;
    --box-shadow: none;
    --divider-rule-display: none;
    --monogram-font: "Fraunces", Georgia, serif;
    --toamna-photo: min(70cqi, 300px);
    --photo-width: var(--toamna-photo);
    --photo-ratio: 4 / 5;
    --photo-radius: 3px;
    --photo-inner-radius: 1px;
    --photo-pad: 12px 12px 50px;
    --photo-bg: color-mix(in srgb, var(--inv-surface) 40%, #fff);
    --photo-rotate: -3deg;
    --photo-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 22px 34px -18px rgba(0, 0, 0, .5);
    --toamna-leaf: linear-gradient(135deg, color-mix(in srgb, var(--inv-ornament) 78%, #fff), var(--inv-ornament) 42%, color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-primary)));
    --toamna-leaf-2: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 40%, #D9A23A), color-mix(in srgb, var(--inv-primary) 62%, #C58B2A));
    --env-bg: radial-gradient(circle at 50% 40%, var(--inv-surface), var(--inv-accent) 60%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)));
    --env-fill: color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-primary));
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-ornament)), var(--inv-accent));
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-ornament) 60%, #fff), var(--inv-ornament) 55%, var(--inv-primary));
    --seal-color: #fff;
}

.inv--toamna.inv--dark {
    --photo-bg: var(--inv-text);
    --card-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
    --toamna-leaf-2: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 70%, #fff), var(--inv-primary));
    --env-bg: radial-gradient(circle at 50% 40%, var(--inv-accent), var(--inv-bg) 75%);
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)), var(--inv-accent));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, #000), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)));
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, #000);
    --seal-color: var(--inv-bg);
}

/* Late-afternoon light from the top-left over warm paper. */
.inv--toamna .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 520px at 18% 0, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-surface)), transparent 70%),
        radial-gradient(ellipse 70% 420px at 100% 780px, color-mix(in srgb, var(--inv-ornament) 14%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-bg) 80%, var(--inv-accent)) 1200px, var(--inv-bg));
}

.inv--toamna.inv--dark .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 520px at 18% 0, color-mix(in srgb, var(--inv-ornament) 22%, transparent), transparent 70%),
        radial-gradient(ellipse 70% 420px at 100% 780px, color-mix(in srgb, var(--inv-ornament) 12%, transparent), transparent 70%),
        var(--inv-bg);
}

/* Maple leaves drifting down over the first screen, in two tones. */
.inv--toamna .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/seasonal-maple.svg);
    --amb-anim: inv-fall;
    --amb-size: 22px;
    --amb-duration: 18s;
    --amb-fill: var(--toamna-leaf);
    --amb-opacity: .8;
}

.inv--toamna .inv__ambient i:nth-child(3n) {
    --amb-fill: var(--toamna-leaf-2);
}

/* Branches: a large one reaching in from the top-left, a smaller one from the bottom-right.
   The base span is the whole branch (rust maple); ::before repaints the oak leaves and acorns in ochre. */
.inv--toamna .inv-hero__corner {
    display: block;
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/seasonal-autumn-branch.svg);
    --hero-corner-ratio: 400 / 300;
    --hero-corner-fill: var(--toamna-leaf);
    --hero-corner-opacity: 1;
}

.inv--toamna .inv-hero__corner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--toamna-leaf-2);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-autumn-branch-oak.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-autumn-branch-oak.svg) center / contain no-repeat;
}

.inv--toamna .inv-hero__corner--tr,
.inv--toamna .inv-hero__corner--bl {
    display: none;
}

.inv--toamna .inv-hero__corner--tl {
    width: min(98cqi, 470px);
    top: -12px;
    left: -26px;
    transform: rotate(-4deg);
}

.inv--toamna .inv-hero__corner--br {
    width: min(68cqi, 330px);
    bottom: 26px;
    right: -34px;
    transform: scale(-1, -1) rotate(-10deg);
}

.inv--toamna .inv-hero__name {
    color: var(--inv-primary);
}

.inv--toamna .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-maple.svg);
    --orn-ratio: 1;
    --orn-width: 14%;
    --orn-max: 52px;
    --orn-fill: var(--toamna-leaf);
    --orn-transform: rotate(-14deg);
}

.inv--toamna .orn--hero-divider,
.inv--toamna .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-autumn-divider.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 92%;
    --orn-max: 340px;
    --orn-fill: var(--toamna-leaf);
}

.inv--toamna .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-maple.svg);
    --orn-ratio: 1;
    --orn-width: 26px;
    --orn-max: 26px;
    --orn-margin: -10px auto 22px;
    --orn-fill: var(--toamna-leaf);
}

/* A sheet of paper: a thin inner rule and small branches in two corners. */
.inv--toamna .inv-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 30%, transparent);
    border-radius: 3px;
    pointer-events: none;
}

.inv--toamna .inv-card .inv-corner--tl,
.inv--toamna .inv-card .inv-corner--br {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/seasonal-autumn-branch.svg);
    --corner-ratio: 400 / 300;
    --corner-size: 40%;
    --corner-max: 190px;
    --corner-inset: 0;
    --corner-fill: var(--toamna-leaf);
    --corner-opacity: .26;
}

/* Polaroid print with a maple leaf tucked over its corner. */
.inv--toamna .inv-photo::after {
    content: "";
    position: absolute;
    top: 12px;
    left: calc(50% + var(--toamna-photo) / 2 - 42px);
    width: 66px;
    aspect-ratio: 1;
    background: var(--toamna-leaf);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-maple.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-maple.svg) center / contain no-repeat;
    transform: rotate(28deg);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .18));
    pointer-events: none;
}

.inv--toamna .inv-program__item {
    padding-top: 34px;
}

.inv--toamna .inv-program__index {
    border: 0;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    font-weight: 600;
}

.inv--toamna .inv-countdown > div {
    padding: 16px 4px 12px;
}

.inv--toamna .inv-countdown span {
    font-size: 2.1rem;
    font-style: italic;
}

.inv--toamna .inv-closing__line {
    font-family: "Allura", cursive;
    font-size: 2rem;
    font-style: normal;
    color: var(--inv-muted);
}

.inv--toamna .inv-envelope::before,
.inv--toamna .inv-envelope::after {
    content: "";
    position: absolute;
    width: min(96vw, 460px);
    aspect-ratio: 400 / 300;
    background: var(--toamna-leaf);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-autumn-branch.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-autumn-branch.svg) center / contain no-repeat;
    pointer-events: none;
}

.inv--toamna .inv-envelope::before {
    top: -10px;
    left: -30px;
}

.inv--toamna .inv-envelope::after {
    bottom: -10px;
    right: -30px;
    transform: scale(-1, -1);
}

/* ---------- Lalele: two tulip beds growing up from the bottom of the first screen (green leaves, blooms in the
   palette colour), awning stripes, calligraphic names, countdown in tulip-crown cups ---------- */

.inv--lalele {
    --f-display: "Lora", Georgia, serif;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Alex Brush", cursive;
    --names-weight: 400;
    --names-size: clamp(3.3rem, 17.5cqi, 6.6rem);
    --names-line: 1.02;
    --names-shadow: 0 0 22px color-mix(in srgb, var(--inv-surface) 90%, transparent);
    --amp-font: "Lora", Georgia, serif;
    --amp-style: italic;
    --amp-size: .4em;
    --amp-color: var(--inv-muted);
    --kicker-size: .68rem;
    --kicker-weight: 700;
    --kicker-spacing: .34em;
    --date-weight: 700;
    --date-size: .86rem;
    --date-spacing: .36em;
    --heading-font: "Lora", Georgia, serif;
    --heading-size: 2.05rem;
    --heading-weight: 400;
    --heading-style: italic;
    --text-display-font: "Lora", Georgia, serif;
    --message-style: italic;
    --message-size: 1.2rem;
    --body-weight: 500;
    --label-weight: 700;
    --closing-font: "Alex Brush", cursive;
    --closing-size: 3rem;
    --hero-pad: 90px 8px 330px;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-surface) 78%, transparent), transparent);
    --card-bg: var(--inv-surface);
    --card-radius: 28px;
    --card-pad: 50px 22px 46px;
    --card-margin-top: 10px;
    --card-shadow: 0 0 0 1px color-mix(in srgb, var(--lalele-green) 16%, transparent), 0 30px 60px -34px color-mix(in srgb, var(--lalele-green) 60%, transparent);
    --box-bg: color-mix(in srgb, var(--inv-accent) 45%, var(--inv-surface));
    --box-border: 0 solid transparent;
    --box-radius: 20px;
    --box-shadow: none;
    --button-radius: 999px;
    --divider-rule-display: none;
    --monogram-font: "Lora", Georgia, serif;
    --photo-width: min(68cqi, 290px);
    --photo-ratio: 4 / 5;
    --photo-radius: 50% 50% 28px 28px / 34% 34% 28px 28px;
    --photo-shadow: 0 0 0 6px var(--inv-surface), 0 0 0 8px color-mix(in srgb, var(--inv-ornament) 45%, transparent), 0 30px 50px -28px rgba(0, 0, 0, .45);
    /* leaves stay green in every palette; blooms take the palette's ornament colour */
    --lalele-green: color-mix(in srgb, #3F7A34 82%, var(--inv-text));
    --lalele-leaf: linear-gradient(180deg, color-mix(in srgb, #6FA955 80%, var(--inv-surface)), var(--lalele-green) 70%);
    --lalele-bloom: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 62%, #fff), var(--inv-ornament) 45%, color-mix(in srgb, var(--inv-ornament) 80%, #000));
    --env-bg: radial-gradient(circle at 50% 40%, var(--inv-surface), var(--inv-accent) 70%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--lalele-green));
    --env-front: linear-gradient(160deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 85%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, var(--lalele-green)), var(--inv-accent));
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-ornament) 55%, #fff), var(--inv-ornament) 60%, color-mix(in srgb, var(--inv-ornament) 75%, #000));
    --seal-color: #fff;
}

/* Soft awning stripes that fade out below the first screen. */
.inv--lalele .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 420px at 50% 360px, var(--inv-surface), transparent 70%),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 55%, transparent) 0 26px, transparent 26px 52px) top / 100% 1100px no-repeat,
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-bg) 60%, var(--inv-accent)) 820px, var(--inv-bg) 1200px);
}

/* Tulip beds: the span paints stems and leaves; ::before repaints only the blooms. */
.inv--lalele .inv-hero__corner--tl,
.inv--lalele .inv-hero__corner--tr {
    display: none;
}

.inv--lalele .inv-hero__corner--bl,
.inv--lalele .inv-hero__corner--br {
    display: block;
    width: min(54cqi, 270px);
    max-width: none;
    bottom: -70px;
    --hero-corner-image: url(../../img/invitations/ornaments/seasonal-tulips.svg);
    --hero-corner-ratio: 240 / 400;
    --hero-corner-fill: var(--lalele-leaf);
    --hero-corner-opacity: 1;
}

.inv--lalele .inv-hero__corner--bl {
    left: -30px;
    transform: rotate(-4deg);
}

.inv--lalele .inv-hero__corner--br {
    right: -30px;
    transform: scaleX(-1) rotate(-6deg);
    width: min(48cqi, 240px);
}

.inv--lalele .inv-hero__corner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--lalele-bloom);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-tulips-blooms.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-tulips-blooms.svg) center / contain no-repeat;
}

.inv--lalele .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-tulip.svg);
    --orn-ratio: 1;
    --orn-width: 12%;
    --orn-max: 44px;
    --orn-fill: var(--lalele-bloom);
}

.inv--lalele .orn--hero-divider,
.inv--lalele .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-tulip-divider.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 80%;
    --orn-max: 300px;
    --orn-fill: var(--lalele-green);
}

.inv--lalele .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-tulip.svg);
    --orn-ratio: 1;
    --orn-width: 24px;
    --orn-max: 24px;
    --orn-margin: -8px auto 22px;
    --orn-fill: var(--lalele-bloom);
}

.inv--lalele .inv-hero__name {
    color: var(--inv-primary);
}

.inv--lalele .inv-hero__date {
    color: var(--inv-primary);
}

/* Countdown and program index as tulip cups: three points on top, a round bottom. */
.inv--lalele .inv-countdown > div {
    padding: 26px 4px 14px;
    border-radius: 6px 6px 999px 999px / 6px 6px 60% 60%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 20%, var(--inv-surface)), color-mix(in srgb, var(--inv-ornament) 34%, var(--inv-surface)));
    clip-path: polygon(0 0, 22% 14%, 50% 0, 78% 14%, 100% 0, 100% 100%, 0 100%);
}

.inv--lalele .inv-countdown span {
    font-weight: 400;
    font-size: 2rem;
}

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

.inv--lalele .inv-program__index {
    width: 34px;
    height: 34px;
    margin-left: -17px;
    top: -17px;
    border: 0;
    border-radius: 6px 6px 50% 50%;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    font-weight: 700;
    clip-path: polygon(0 0, 25% 18%, 50% 0, 75% 18%, 100% 0, 100% 100%, 0 100%);
    padding-top: 4px;
}

.inv--lalele .inv-when__date,
.inv--lalele .inv-program__time {
    font-style: normal;
}

.inv--lalele .inv-closing__line {
    font-style: italic;
    color: var(--inv-muted);
}

/* Envelope: tulip beds at both sides of the screen, leaves and blooms in their own colours. */
.inv--lalele .inv-envelope::before,
.inv--lalele .inv-envelope::after {
    content: "";
    position: absolute;
    left: -24px;
    right: -24px;
    bottom: -50px;
    height: min(86vw, 440px);
    background: var(--lalele-leaf);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-tulips.svg) left bottom / auto 100% no-repeat, url(../../img/invitations/ornaments/seasonal-tulips.svg) right bottom / auto 84% no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-tulips.svg) left bottom / auto 100% no-repeat, url(../../img/invitations/ornaments/seasonal-tulips.svg) right bottom / auto 84% no-repeat;
    pointer-events: none;
}

.inv--lalele .inv-envelope::after {
    background: var(--lalele-bloom);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-tulips-blooms.svg) left bottom / auto 100% no-repeat, url(../../img/invitations/ornaments/seasonal-tulips-blooms.svg) right bottom / auto 84% no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-tulips-blooms.svg) left bottom / auto 100% no-repeat, url(../../img/invitations/ornaments/seasonal-tulips-blooms.svg) right bottom / auto 84% no-repeat;
}

/* ---------- Amalfi: a wall of majolica tiles, a white stucco arch window for the names, lemon branches in
   yellow and green on its shoulders, tiles inlaid in the card corners ---------- */

.inv--amalfi {
    --f-display: "Playfair Display", Georgia, serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Playfair Display", Georgia, serif;
    --names-weight: 400;
    --names-style: italic;
    --names-size: clamp(2.5rem, 12.6cqi, 5rem);
    --names-line: 1.04;
    --names-shadow: none;
    --amp-font: "Playfair Display", Georgia, serif;
    --amp-style: italic;
    --amp-size: .56em;
    --amp-color: var(--inv-ornament);
    --kicker-size: .64rem;
    --kicker-weight: 600;
    --kicker-spacing: .26em;
    --date-weight: 600;
    --date-size: .9rem;
    --date-spacing: .36em;
    --heading-font: "Playfair Display", Georgia, serif;
    --heading-size: 2.1rem;
    --heading-weight: 400;
    --heading-style: italic;
    --text-display-font: "Playfair Display", Georgia, serif;
    --message-style: italic;
    --message-size: 1.14rem;
    --body-weight: 400;
    --label-weight: 600;
    --closing-font: "Playfair Display", Georgia, serif;
    --closing-size: 2.3rem;
    --hero-pad: 96px 24px 120px;
    --hero-halo: none;
    --hero-content-pad: 24px 8px;
    --card-bg: var(--inv-surface);
    --card-radius: 4px;
    --card-pad: 62px 24px 56px;
    --card-margin-top: 10px;
    --card-border: 2px solid var(--inv-ornament);
    --card-shadow: inset 0 0 0 6px var(--inv-surface), inset 0 0 0 7px color-mix(in srgb, var(--inv-ornament) 55%, transparent), 0 30px 60px -30px rgba(0, 0, 0, .45);
    --box-bg:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--inv-ornament) 22%, transparent) 0 14px, transparent 15px),
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--inv-ornament) 22%, transparent) 0 14px, transparent 15px),
        radial-gradient(circle at 0 100%, color-mix(in srgb, var(--inv-ornament) 22%, transparent) 0 14px, transparent 15px),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--inv-ornament) 22%, transparent) 0 14px, transparent 15px),
        var(--inv-surface);
    --box-border: 1.5px solid var(--inv-ornament);
    --box-radius: 3px;
    --box-shadow: inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 40%, transparent);
    --divider-rule-display: none;
    --monogram-font: "Playfair Display", Georgia, serif;
    --photo-width: min(66cqi, 280px);
    --photo-ratio: 3 / 4.3;
    --photo-radius: 999px 999px 6px 6px;
    --photo-shadow: 0 0 0 6px var(--inv-surface), 0 0 0 8px var(--inv-ornament), 0 0 0 12px var(--inv-surface), 0 0 0 13px color-mix(in srgb, var(--inv-ornament) 50%, transparent), 0 30px 50px -26px rgba(0, 0, 0, .45);
    --amalfi-lemon: linear-gradient(160deg, color-mix(in srgb, #F7D64A 70%, #fff), #F2C230 45%, color-mix(in srgb, #E0A812 85%, var(--inv-text)));
    --amalfi-leaf: linear-gradient(160deg, color-mix(in srgb, #4E8E4A 85%, #fff), color-mix(in srgb, #2F6B3A 85%, var(--inv-text)));
    --env-bg: var(--inv-bg);
    --env-fill: color-mix(in srgb, var(--inv-ornament) 80%, #000);
    --env-front: linear-gradient(160deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 45%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 35%, var(--inv-surface)), var(--inv-surface));
    --seal-fill: radial-gradient(circle at 35% 30%, #FBE38A, #F2C230 55%, #C99310);
    --seal-color: color-mix(in srgb, var(--inv-primary) 80%, #000);
}

.inv--amalfi.inv--dark {
    --amalfi-lemon: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 70%, #fff), var(--inv-primary) 50%, color-mix(in srgb, var(--inv-primary) 80%, #8a5a00));
    --amalfi-leaf: linear-gradient(160deg, #7DB874, #4C8C50);
    --card-shadow: inset 0 0 0 6px var(--inv-surface), inset 0 0 0 7px color-mix(in srgb, var(--inv-ornament) 55%, transparent), 0 30px 70px -30px rgba(0, 0, 0, .7);
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-surface) 80%, var(--inv-ornament)), var(--inv-surface));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 40%, var(--inv-surface)), var(--inv-surface));
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 60%, #fff), var(--inv-primary) 55%, color-mix(in srgb, var(--inv-primary) 70%, #6b4a00));
    --seal-color: var(--inv-bg);
}

/* The tiled wall. */
.inv--amalfi .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/seasonal-majolica.svg);
    --texture-size: 96px;
    --texture-fill: var(--inv-ornament);
    --texture-opacity: .78;
}

.inv--amalfi.inv--dark .inv__texture {
    --texture-opacity: .55;
}

/* White stucco arch window with a tile-blue frame. */
.inv--amalfi .inv-hero__frame {
    display: block;
    inset: 38px 16px 64px;
    border: 0;
    border-radius: 999px 999px 10px 10px;
    background: linear-gradient(180deg, var(--inv-surface), color-mix(in srgb, var(--inv-surface) 88%, var(--inv-accent)));
    box-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 9px var(--inv-ornament), 0 0 0 13px var(--inv-surface), 0 0 0 14px var(--inv-ornament), 0 30px 60px -24px rgba(0, 0, 0, .45);
}

.inv--amalfi.inv--dark .inv-hero__frame {
    background: linear-gradient(180deg, var(--inv-surface), color-mix(in srgb, var(--inv-surface) 80%, var(--inv-bg)));
}

/* Lemon branches: the span paints twig and leaves in green, ::before repaints the lemons in yellow. */
.inv--amalfi .inv-hero__corner {
    display: block;
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/seasonal-lemons.svg);
    --hero-corner-ratio: 360 / 240;
    --hero-corner-fill: var(--amalfi-leaf);
    --hero-corner-opacity: 1;
}

.inv--amalfi .inv-hero__corner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--amalfi-lemon);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-lemons-fruit.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-lemons-fruit.svg) center / contain no-repeat;
}

.inv--amalfi .inv-hero__corner--tr,
.inv--amalfi .inv-hero__corner--bl {
    display: none;
}

.inv--amalfi .inv-hero__corner--tl {
    width: min(70cqi, 330px);
    top: 8px;
    left: -40px;
    transform: rotate(4deg);
}

.inv--amalfi .inv-hero__corner--br {
    width: min(56cqi, 270px);
    bottom: 6px;
    right: -34px;
    transform: scaleX(-1) rotate(-14deg);
}

.inv--amalfi .inv-hero__kicker {
    color: var(--inv-muted);
}

.inv--amalfi .orn--hero {
    display: block;
    position: relative;
    --orn-image: url(../../img/invitations/ornaments/seasonal-lemon.svg);
    --orn-ratio: 100 / 80;
    --orn-width: 16%;
    --orn-max: 62px;
    --orn-fill: var(--amalfi-leaf);
    --orn-margin: 30px auto 0;
}

.inv--amalfi .orn--hero::before,
.inv--amalfi .orn--heading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--amalfi-lemon);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-lemon-fruit.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-lemon-fruit.svg) center / contain no-repeat;
}

.inv--amalfi .orn--hero-divider,
.inv--amalfi .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-majolica-frieze.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 86%;
    --orn-max: 320px;
    --orn-fill: var(--inv-ornament);
}

.inv--amalfi .orn--heading {
    display: block;
    position: relative;
    --orn-image: url(../../img/invitations/ornaments/seasonal-lemon.svg);
    --orn-ratio: 100 / 80;
    --orn-width: 42px;
    --orn-max: 42px;
    --orn-margin: -10px auto 20px;
    --orn-fill: var(--amalfi-leaf);
}

/* One majolica tile inlaid in each corner of the card. */
.inv--amalfi .inv-card .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/textures/seasonal-majolica.svg);
    --corner-size: 56px;
    --corner-max: 56px;
    --corner-inset: 12px;
    --corner-fill: var(--inv-ornament);
    --corner-opacity: .9;
}

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

/* Program numbers in small diamond tiles. */
.inv--amalfi .inv-program__index {
    width: 38px;
    height: 38px;
    margin-left: -19px;
    top: -19px;
    border: 0;
    border-radius: 0;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    font-weight: 600;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.inv--amalfi .inv-countdown > div {
    display: grid;
    align-content: center;
    aspect-ratio: 1;
    padding: 4px 2px;
}

.inv--amalfi .inv-countdown span {
    font-size: 1.9rem;
    font-style: italic;
}

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

.inv--amalfi .inv-when__date,
.inv--amalfi .inv-program__time {
    font-style: italic;
}

.inv--amalfi .inv-closing__line {
    color: var(--inv-muted);
}

/* Envelope on the tiled wall, with a lemon branch reaching in. */
.inv--amalfi .inv-envelope::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--inv-ornament);
    opacity: .7;
    -webkit-mask: url(../../img/invitations/textures/seasonal-majolica.svg) repeat 0 0 / 96px;
    mask: url(../../img/invitations/textures/seasonal-majolica.svg) repeat 0 0 / 96px;
    pointer-events: none;
}

.inv--amalfi .inv-envelope__body {
    box-shadow: 0 0 0 10px var(--inv-surface), 0 0 0 12px var(--inv-ornament), 0 30px 60px -20px rgba(0, 0, 0, .5);
}

.inv--amalfi .inv-envelope__kicker {
    position: relative;
    padding: 8px 14px;
    background: var(--inv-surface);
    box-shadow: 0 0 0 2px var(--inv-ornament);
}

/* ---------- Provence: rows of lavender running to the horizon under a warm sky, a bouquet tied with a bow on the
   card, the card as stitched linen ---------- */

.inv--provence {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Tenor Sans", "Segoe UI", sans-serif;
    --f-names: "Great Vibes", cursive;
    --names-weight: 400;
    --names-size: clamp(3.2rem, 16.5cqi, 6.4rem);
    --names-line: 1.05;
    --names-shadow: 0 0 24px color-mix(in srgb, var(--inv-bg) 85%, transparent);
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .44em;
    --amp-color: var(--inv-muted);
    --kicker-size: .66rem;
    --kicker-weight: 400;
    --kicker-spacing: .38em;
    --date-font: "Cormorant Garamond", Georgia, serif;
    --date-size: 1.35rem;
    --date-weight: 400;
    --date-spacing: .1em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Cormorant Garamond", Georgia, serif;
    --heading-size: 1.6rem;
    --heading-weight: 400;
    --heading-transform: uppercase;
    --heading-spacing: .16em;
    --label-weight: 400;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --message-style: italic;
    --message-size: 1.36rem;
    --body-weight: 400;
    --closing-font: "Great Vibes", cursive;
    --closing-size: 2.9rem;
    --hero-pad: 70px 8px 250px;
    --hero-halo: none;
    --card-bg: color-mix(in srgb, var(--inv-surface) 90%, var(--inv-accent));
    --card-radius: 18px;
    --card-pad: 54px 26px 50px;
    --card-margin-top: 70px;
    --card-shadow: 0 1px 0 color-mix(in srgb, var(--inv-primary) 12%, transparent), 0 30px 60px -32px color-mix(in srgb, var(--inv-primary) 55%, transparent);
    --box-bg: color-mix(in srgb, var(--inv-accent) 40%, var(--inv-surface));
    --box-border: 1.5px dashed color-mix(in srgb, var(--inv-ornament) 60%, transparent);
    --box-radius: 14px;
    --box-shadow: none;
    --button-radius: 999px;
    --divider-rule-display: none;
    --monogram-font: "Cormorant Garamond", Georgia, serif;
    --photo-width: min(68cqi, 290px);
    --photo-ratio: 4 / 5;
    --photo-radius: 16px;
    --photo-shadow: 0 30px 50px -26px rgba(0, 0, 0, .45);
    --provence-lavender: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 70%, #fff), var(--inv-ornament) 40%, color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-primary)));
    --provence-stem: color-mix(in srgb, #7F9A73 80%, var(--inv-text));
    --provence-field: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-bg)), var(--inv-ornament) 35%, color-mix(in srgb, var(--inv-ornament) 45%, var(--inv-primary)));
    --env-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-surface)), var(--inv-bg) 55%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament));
    --env-front: linear-gradient(160deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)), var(--inv-accent));
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-ornament) 55%, #fff), var(--inv-ornament) 55%, var(--inv-primary));
    --seal-color: #fff;
}

.inv--provence.inv--dark {
    --card-bg: var(--inv-surface);
    --card-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
    --provence-stem: color-mix(in srgb, #9DB58F 80%, var(--inv-text));
    --provence-field: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-bg)), var(--inv-ornament) 45%, color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-primary)));
    --env-bg: linear-gradient(180deg, var(--inv-accent), var(--inv-bg) 60%);
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)), var(--inv-accent));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, #000), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)));
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, #000);
    --seal-color: var(--inv-bg);
}

/* Warm sky: pale at the top, a soft glow toward the horizon of the field. */
.inv--provence .inv__backdrop {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 55%, var(--inv-bg)), var(--inv-bg) 380px, color-mix(in srgb, var(--inv-bg) 70%, #F3D9B8) 640px, var(--inv-bg) 1000px);
}

.inv--provence.inv--dark .inv__backdrop {
    background: linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-bg) 75%, var(--inv-primary)) 640px, var(--inv-bg) 1000px);
}

/* The field: full bleed across the bottom of the first screen, fading out under the card. */
.inv--provence .inv-hero::after {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    bottom: -64px;
    aspect-ratio: 400 / 220;
    background: var(--provence-field);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-lavender-field.svg) center bottom / 100% 100% no-repeat, linear-gradient(180deg, #000 72%, transparent 96%);
    -webkit-mask-composite: source-in;
    mask: url(../../img/invitations/ornaments/seasonal-lavender-field.svg) center bottom / 100% 100% no-repeat, linear-gradient(180deg, #000 72%, transparent 96%);
    mask-composite: intersect;
    pointer-events: none;
}

@container (min-width: 700px) {
    .inv--provence .inv-hero::after {
        -webkit-mask: url(../../img/invitations/ornaments/seasonal-lavender-field.svg) center bottom / 100% 100% no-repeat, linear-gradient(180deg, #000 72%, transparent 96%), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
        -webkit-mask-composite: source-in, source-in;
        mask: url(../../img/invitations/ornaments/seasonal-lavender-field.svg) center bottom / 100% 100% no-repeat, linear-gradient(180deg, #000 72%, transparent 96%), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
        mask-composite: intersect;
    }
}

.inv--provence .inv-hero__name {
    color: var(--inv-primary);
}

.inv--provence .inv-hero__kicker {
    color: var(--inv-muted);
}

.inv--provence .inv-hero__date {
    color: var(--inv-primary);
}

.inv--provence .orn--hero-divider,
.inv--provence .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-lavender-divider.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 88%;
    --orn-max: 320px;
    --orn-fill: var(--provence-lavender);
}

.inv--provence .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-lavender-divider.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 46%;
    --orn-max: 170px;
    --orn-margin: -10px auto 22px;
    --orn-fill: var(--provence-lavender);
}

/* Bouquet tied with a bow on the top edge of the card: stems (span), flowers (::before), bow (::after). */
.inv--provence .orn--card-top {
    display: block;
    position: relative;
    --orn-image: url(../../img/invitations/ornaments/seasonal-lavender-bouquet.svg);
    --orn-ratio: 200 / 240;
    --orn-width: 124px;
    --orn-max: 124px;
    --orn-margin: -128px auto 14px;
    --orn-fill: var(--provence-stem);
}

.inv--provence .orn--card-top::before,
.inv--provence .orn--card-top::after {
    content: "";
    position: absolute;
    inset: 0;
}

.inv--provence .orn--card-top::before {
    background: var(--provence-lavender);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-lavender-bouquet-flowers.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-lavender-bouquet-flowers.svg) center / contain no-repeat;
}

.inv--provence .orn--card-top::after {
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 70%, #fff), var(--inv-primary));
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-lavender-bouquet-bow.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-lavender-bouquet-bow.svg) center / contain no-repeat;
}

/* Linen: a woven texture and a stitched seam inside the edge. */
.inv--provence .inv-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--inv-primary);
    opacity: .07;
    -webkit-mask: url(../../img/invitations/textures/seasonal-linen.svg) repeat 0 0 / 48px;
    mask: url(../../img/invitations/textures/seasonal-linen.svg) repeat 0 0 / 48px;
    pointer-events: none;
}

.inv--provence.inv--dark .inv-card::before {
    background: var(--inv-text);
    opacity: .05;
}

.inv--provence .inv-card::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1.5px dashed color-mix(in srgb, var(--inv-ornament) 65%, transparent);
    border-radius: 12px;
    pointer-events: none;
}

.inv--provence .inv-photo__frame {
    outline: 1.5px dashed color-mix(in srgb, var(--inv-ornament) 75%, transparent);
    outline-offset: 7px;
}

.inv--provence .inv-program__item {
    padding-top: 34px;
}

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

.inv--provence .inv-when__date {
    font-weight: 400;
}

.inv--provence .inv-countdown span {
    font-weight: 400;
}

.inv--provence .inv-countdown small {
    letter-spacing: .1em;
}

.inv--provence .inv-closing__line {
    color: var(--inv-muted);
}

/* Envelope: the lavender field across the bottom of the screen. */
.inv--provence .inv-envelope::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    aspect-ratio: 400 / 220;
    max-height: 46vh;
    background: var(--provence-field);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-lavender-field.svg) center bottom / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-lavender-field.svg) center bottom / 100% 100% no-repeat;
    pointer-events: none;
}

/* ================= Carte poștală: an air-mail letter with a striped border, a perforated stamp and a postmark carrying the date ================= */

.inv--carte-postala {
    --f-display: "Caveat", cursive;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Caveat", cursive;
    --names-weight: 600;
    --names-size: clamp(3.4rem, 17cqi, 6.6rem);
    --names-line: .9;
    --names-direction: row;
    --names-gap: 0 .26em;
    --names-shadow: none;
    --amp-font: "Caveat", cursive;
    --amp-style: normal;
    --amp-size: .7em;
    --amp-color: var(--inv-muted);
    --kicker-size: .62rem;
    --kicker-weight: 600;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-muted);
    --date-font: "Caveat", cursive;
    --date-size: 1.8rem;
    --date-weight: 400;
    --date-spacing: .01em;
    --date-short-display: grid;
    --date-long-display: block;
    --heading-font: "Caveat", cursive;
    --heading-size: 2.6rem;
    --heading-weight: 600;
    --label-weight: 600;
    --label-spacing: .26em;
    --text-display-font: "Josefin Sans", "Segoe UI", sans-serif;
    --message-style: normal;
    --message-size: 1.66rem;
    --body-weight: 400;
    --family-size: 1.1rem;
    --closing-font: "Caveat", cursive;
    --closing-size: 2.9rem;
    --hero-min-height: min(100svh, 740px);
    --hero-pad: 26px 0 64px;
    --hero-halo: none;
    --hero-frame-inset: 26px 0 64px;
    --hero-frame-border: 11px solid transparent;
    --hero-frame-radius: 3px;
    --hero-frame-bg: linear-gradient(var(--inv-surface), var(--inv-surface)) padding-box, var(--cp-stripes) border-box;
    --hero-frame-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 28px 46px -30px rgba(0, 0, 0, .5);
    --card-bg: linear-gradient(var(--inv-surface), var(--inv-surface)) padding-box, var(--cp-stripes) border-box;
    --card-border: 8px solid transparent;
    --card-radius: 3px;
    --card-pad: 42px 18px 44px;
    --card-pad-wide: 58px 44px;
    --card-margin-top: 6px;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 28px 50px -32px rgba(0, 0, 0, .45);
    --box-bg: color-mix(in srgb, var(--inv-accent) 32%, var(--inv-surface));
    --box-border: 1px dashed color-mix(in srgb, var(--inv-primary) 45%, transparent);
    --box-radius: 3px;
    --box-shadow: none;
    --button-radius: 3px;
    --divider-rule-display: none;
    --monogram-font: "Caveat", cursive;
    --cp-stripes: repeating-linear-gradient(135deg, var(--inv-primary) 0 7.5px, var(--inv-surface) 8.5px 15.5px, var(--inv-ornament) 16.5px 23.5px, var(--inv-surface) 24.5px 31.5px, var(--inv-primary) 32.5px);
    --cp-paper: color-mix(in srgb, var(--inv-accent) 58%, #fff);
    --cp-field: linear-gradient(160deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 78%, #000));
    --cp-cell: var(--cp-paper);
    --cp-stamp: min(21cqi, 106px);
    --cp-photo: min(72cqi, 310px);
    --photo-width: var(--cp-photo);
    --photo-ratio: 4 / 5;
    --photo-radius: 0;
    --photo-pad: 15px;
    --photo-bg: var(--cp-paper);
    --photo-rotate: -2.5deg;
    --photo-shadow: none;
    --env-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-bg)), var(--inv-bg) 70%);
    --env-fill: color-mix(in srgb, var(--inv-surface) 78%, var(--inv-primary));
    --env-front: linear-gradient(var(--inv-surface), var(--inv-surface)) center / calc(100% - 18px) calc(100% - 18px) no-repeat, var(--cp-stripes);
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 84%, var(--inv-primary)), color-mix(in srgb, var(--inv-surface) 94%, var(--inv-primary)));
    --env-radius: 3px;
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-ornament) 62%, #fff), var(--inv-ornament) 58%, color-mix(in srgb, var(--inv-ornament) 72%, #000));
    --seal-color: #fff;
}

.inv--carte-postala.inv--dark {
    --cp-paper: color-mix(in srgb, var(--inv-text) 92%, var(--inv-primary));
    --hero-frame-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8);
    --card-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
    --box-bg: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface));
    --cp-cell: var(--inv-accent);
    --env-fill: color-mix(in srgb, var(--inv-accent) 55%, #000);
    --env-flap: linear-gradient(180deg, var(--inv-accent), color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface)));
}

/* The desk under the letter. */
.inv--carte-postala .inv__backdrop {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 62%, var(--inv-bg)), var(--inv-bg) 760px);
}

.inv--carte-postala.inv--dark .inv__backdrop {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 70%, #000), var(--inv-bg) 760px);
}

/* The letter: the frame is the sheet with its air-mail border; the content fills it, so the postmark can be
   placed against its corner. */
.inv--carte-postala .inv-hero__frame {
    display: block;
}

.inv--carte-postala .inv-hero__content {
    flex: 1 1 auto;
    align-self: stretch;
    justify-content: center;
    padding: calc(var(--cp-stamp) * 1.25 + 46px) 24px 40px;
}

/* Stamp: perforated paper (corner), colour field (::before) and the dove (::after). The copy under it is its shadow. */
.inv--carte-postala .inv-hero__corner--tl,
.inv--carte-postala .inv-hero__corner--tr {
    display: block;
    top: 53px;
    right: 26px;
    left: auto;
    width: var(--cp-stamp);
    max-width: none;
    aspect-ratio: 4 / 5;
    background: var(--cp-paper);
    opacity: 1;
    transform: rotate(3deg);
    -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 7px) calc(100% - 7px) no-repeat, radial-gradient(circle, transparent 2.4px, #000 3px) -4px -4px / 8px 8px round;
    -webkit-mask-composite: source-over;
    mask: linear-gradient(#000 0 0) center / calc(100% - 7px) calc(100% - 7px) no-repeat, radial-gradient(circle, transparent 2.4px, #000 3px) -4px -4px / 8px 8px round;
    mask-composite: add;
}

.inv--carte-postala .inv-hero__corner--tl {
    background: rgba(0, 0, 0, .22);
    transform: translate(1.5px, 2.5px) rotate(3deg);
}

.inv--carte-postala .inv-hero__corner--tr::before,
.inv--carte-postala .inv-hero__corner--tr::after {
    content: "";
    position: absolute;
    inset: 9.5% 11.5%;
}

.inv--carte-postala .inv-hero__corner--tr::before {
    background: var(--cp-field);
}

.inv--carte-postala .inv-hero__corner--tr::after {
    background: var(--cp-paper);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-stamp-dove.svg) center / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-stamp-dove.svg) center / 100% 100% no-repeat;
}

/* The air-mail label. */
.inv--carte-postala .inv-hero__corner--bl {
    display: block;
    top: calc(53px + var(--cp-stamp) * .42);
    bottom: auto;
    left: 26px;
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    padding: .62em 1.3em .38em;
    background: var(--inv-primary);
    -webkit-mask: none;
    mask: none;
    opacity: 1;
    transform: rotate(-4deg);
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
    font: 600 calc(var(--cp-stamp) * .112) / 1.2 var(--f-body);
    letter-spacing: .22em;
    white-space: nowrap;
    color: var(--inv-on-primary);
}

.inv--carte-postala .inv-hero__corner--bl::before {
    content: "PAR AVION";
}

/* Postmark: the short date sits in the round date stamp, the wavy lines cancel the postage stamp. */
.inv--carte-postala .inv-hero__date-short {
    position: absolute;
    top: calc(32px + var(--cp-stamp) * .15);
    right: 19px;
    width: calc(var(--cp-stamp) * 2.5);
    aspect-ratio: 240 / 100;
    place-items: center;
    padding-right: calc(var(--cp-stamp) * 1.458);
    font: 600 calc(var(--cp-stamp) * .104) / 1 var(--f-body);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--inv-primary);
    transform: rotate(-7deg);
}

.inv--carte-postala .inv-hero__date-short::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--inv-primary);
    opacity: .84;
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-postmark.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-postmark.svg) center / contain no-repeat;
}

/* The address: names written by hand, the date and the place on ruled lines. */
.inv--carte-postala .inv-hero__names {
    align-items: baseline;
}

.inv--carte-postala .inv-hero__name {
    color: var(--inv-primary);
}

.inv--carte-postala .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-flourish.svg);
    --orn-ratio: 240 / 24;
    --orn-width: min(54cqi, 260px);
    --orn-max: none;
    --orn-margin: 4px auto 0;
    --orn-fill: var(--inv-ornament);
}

.inv--carte-postala .inv-hero__date,
.inv--carte-postala .inv-hero__place {
    width: min(66cqi, 340px);
    max-width: 100%;
    border-bottom: 1px solid color-mix(in srgb, var(--inv-primary) 34%, transparent);
}

.inv--carte-postala .inv-hero__date {
    margin: 12px 0 0;
    padding-bottom: 2px;
    line-height: 1.15;
    color: var(--inv-primary);
}

.inv--carte-postala .inv-hero__place {
    margin-top: 16px;
    padding-bottom: 7px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
}

/* The card: a letter sheet with the same striped edge. */
.inv--carte-postala .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-cancel.svg);
    --orn-ratio: 120 / 24;
    --orn-width: 84px;
    --orn-max: 84px;
    --orn-margin: -14px auto 22px;
    --orn-fill: var(--inv-ornament);
}

.inv--carte-postala .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-postmark-divider.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 88%;
    --orn-max: 320px;
    --orn-fill: var(--inv-primary);
    --orn-opacity: .8;
}

.inv--carte-postala .inv-message p {
    font-family: "Caveat", cursive;
    line-height: 1.28;
}

/* The photo is a large stamp: perforated paper, a soft shadow under it, a postmark over its corner. */
.inv--carte-postala .inv-photo__frame {
    -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 11px) calc(100% - 11px) no-repeat, radial-gradient(circle, transparent 3.8px, #000 4.4px) -6.5px -6.5px / 13px 13px round;
    -webkit-mask-composite: source-over;
    mask: linear-gradient(#000 0 0) center / calc(100% - 11px) calc(100% - 11px) no-repeat, radial-gradient(circle, transparent 3.8px, #000 4.4px) -6.5px -6.5px / 13px 13px round;
    mask-composite: add;
}

.inv--carte-postala .inv-photo::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 50%;
    width: calc(var(--cp-photo) * .9);
    aspect-ratio: 4 / 5;
    translate: -50% 0;
    background: rgba(0, 0, 0, .32);
    filter: blur(14px);
    pointer-events: none;
}

.inv--carte-postala .inv-photo::after {
    content: "";
    position: absolute;
    bottom: 30px;
    left: calc(50% + var(--cp-photo) / 2 - min(46cqi, 200px) + 26px);
    width: min(46cqi, 200px);
    aspect-ratio: 240 / 100;
    background: var(--inv-primary);
    opacity: .8;
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-postmark.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-postmark.svg) center / contain no-repeat;
    transform: scaleX(-1) rotate(9deg);
    pointer-events: none;
}

.inv--carte-postala .inv-family__names,
.inv--carte-postala .inv-program__venue {
    font-weight: 400;
}

.inv--carte-postala .inv-program__venue {
    font-size: 1.08rem;
}

.inv--carte-postala .inv-dress__text {
    font-size: 1.15rem;
}

.inv--carte-postala .inv-when__date {
    font-size: 2.4rem;
}

/* Countdown: four small stamps. */
.inv--carte-postala .inv-countdown {
    gap: 6px;
}

.inv--carte-postala .inv-countdown > div {
    padding: 14px 2px 12px;
    border: 0;
    border-radius: 0;
    background: var(--cp-cell);
    box-shadow: inset 0 0 0 4.5px var(--cp-cell), inset 0 0 0 5.5px color-mix(in srgb, var(--inv-ornament) 75%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 7px) calc(100% - 7px) no-repeat, radial-gradient(circle, transparent 2.4px, #000 3px) -4.5px -4.5px / 9px 9px round;
    -webkit-mask-composite: source-over;
    mask: linear-gradient(#000 0 0) center / calc(100% - 7px) calc(100% - 7px) no-repeat, radial-gradient(circle, transparent 2.4px, #000 3px) -4.5px -4.5px / 9px 9px round;
    mask-composite: add;
}

.inv--carte-postala .inv-countdown span {
    font-size: 2.25rem;
}

.inv--carte-postala .inv-countdown small {
    margin-top: 3px;
    letter-spacing: .04em;
}

.inv--carte-postala .inv-program__item {
    padding-top: 34px;
}

/* Program numbers as small round date stamps. */
.inv--carte-postala .inv-program__index {
    width: 38px;
    height: 38px;
    top: -20px;
    margin-left: -19px;
    padding-bottom: 2px;
    border: 1.5px solid var(--inv-primary);
    background: var(--inv-surface);
    box-shadow: inset 0 0 0 2.5px var(--inv-surface), inset 0 0 0 3.5px color-mix(in srgb, var(--inv-primary) 55%, transparent);
    font: 600 1.3rem / 1 "Caveat", cursive;
    font-variant-numeric: lining-nums;
    transform: rotate(-8deg);
}

.inv--carte-postala .inv-program__time {
    font-size: 2.5rem;
}

.inv--carte-postala .inv-closing__line {
    font-family: "Caveat", cursive;
    font-size: 1.7rem;
    font-style: normal;
    color: var(--inv-muted);
}

.inv--carte-postala .inv-monogram {
    padding-bottom: 3px;
    font-size: 1.6rem;
    font-weight: 600;
    transform: rotate(-8deg);
}

.inv--carte-postala .rsvp-person {
    border-style: dashed;
}

.inv--carte-postala .rsvp-person__name {
    font-weight: 600;
}

.inv--carte-postala .inv-envelope__letter {
    font-size: 2.1rem;
}

/* ================= La munte: layered mountain ridges fading into mist under the names, a line of firs in front, sun or moon ================= */

.inv--munte {
    --f-display: "Amatic SC", "Segoe UI", sans-serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Amatic SC", "Segoe UI", sans-serif;
    --names-weight: 700;
    --names-size: clamp(4rem, 21cqi, 8.4rem);
    --names-line: .92;
    --names-direction: row;
    --names-gap: 0 .2em;
    --names-spacing: .02em;
    --names-shadow: none;
    --amp-font: "Amatic SC", "Segoe UI", sans-serif;
    --amp-style: normal;
    --amp-size: .6em;
    --amp-color: var(--inv-muted);
    --kicker-size: .64rem;
    --kicker-weight: 700;
    --kicker-spacing: .3em;
    --date-font: "EB Garamond", Georgia, serif;
    --date-size: 1.32rem;
    --date-weight: 400;
    --date-spacing: .04em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Amatic SC", "Segoe UI", sans-serif;
    --heading-size: 2.8rem;
    --heading-weight: 700;
    --heading-spacing: .04em;
    --label-weight: 700;
    --label-spacing: .26em;
    --text-display-font: "EB Garamond", Georgia, serif;
    --message-style: italic;
    --message-size: 1.36rem;
    --body-weight: 400;
    --family-size: 1.3rem;
    --closing-font: "Amatic SC", "Segoe UI", sans-serif;
    --closing-size: 3.3rem;
    --munte-land: clamp(236px, 62cqi, 330px);
    --munte-foot: 46px;
    --hero-pad: 40px 8px calc(var(--munte-land) * .84 + var(--munte-foot));
    --hero-halo: none;
    --hero-content-pad: 10px 4px;
    --card-bg: var(--inv-surface);
    --card-radius: 20px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-primary) 14%, transparent);
    --card-pad: 46px 22px 138px;
    --card-pad-wide: 60px 48px 150px;
    --card-margin-top: 4px;
    --card-shadow: 0 30px 60px -36px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    --box-bg: color-mix(in srgb, var(--inv-accent) 42%, var(--inv-surface));
    --box-border: 0 solid transparent;
    --box-radius: 14px;
    --box-shadow: none;
    --button-radius: 12px;
    --divider-rule-display: none;
    --monogram-font: "Amatic SC", "Segoe UI", sans-serif;
    --munte-photo: min(62cqi, 300px);
    --munte-gable: polygon(50% 0, 100% 21%, 100% 100%, 0 100%, 0 21%);
    --photo-width: var(--munte-photo);
    --photo-ratio: 4 / 5.3;
    --photo-radius: 0;
    --photo-pad: 6px;
    --photo-bg: var(--inv-primary);
    --photo-clip: var(--munte-gable);
    --photo-shadow: none;
    /* distance: the far range is close to the sky colour, the firs in front are the darkest */
    --munte-mist: var(--inv-bg);
    --munte-l1: color-mix(in srgb, var(--inv-primary) 20%, var(--inv-bg));
    --munte-l2: color-mix(in srgb, var(--inv-primary) 36%, var(--inv-bg));
    --munte-l3: color-mix(in srgb, var(--inv-primary) 56%, var(--inv-bg));
    --munte-l4: color-mix(in srgb, var(--inv-primary) 72%, var(--inv-bg));
    --munte-fir: color-mix(in srgb, var(--inv-primary) 84%, var(--inv-text));
    --munte-sun: radial-gradient(circle, color-mix(in srgb, var(--inv-ornament) 62%, var(--inv-surface)), color-mix(in srgb, var(--inv-ornament) 44%, var(--inv-surface)));
    --munte-glow: 0 0 46px 10px color-mix(in srgb, var(--inv-ornament) 30%, transparent);
    --env-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 72%, var(--inv-bg)), var(--inv-bg) 60%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-primary));
    --env-front: linear-gradient(160deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 60%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 78%, var(--inv-ornament)), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)));
    --env-radius: 10px;
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 68%, #fff), var(--inv-primary) 60%, color-mix(in srgb, var(--inv-primary) 76%, #000));
    --seal-color: var(--inv-on-primary);
}

.inv--munte.inv--dark {
    --munte-mist: color-mix(in srgb, var(--inv-primary) 20%, var(--inv-bg));
    --munte-l1: color-mix(in srgb, var(--inv-primary) 30%, var(--inv-bg));
    --munte-l2: color-mix(in srgb, var(--inv-primary) 19%, var(--inv-bg));
    --munte-l3: color-mix(in srgb, var(--inv-primary) 9%, var(--inv-bg));
    --munte-l4: color-mix(in srgb, var(--inv-bg) 78%, #000);
    --munte-fir: color-mix(in srgb, var(--inv-bg) 52%, #000);
    --munte-sun: radial-gradient(circle at 38% 36%, #fff, color-mix(in srgb, var(--inv-text) 84%, var(--inv-primary)) 70%);
    --munte-glow: 0 0 54px 14px color-mix(in srgb, var(--inv-primary) 30%, transparent);
    --card-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
    --env-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 70%, #000), var(--inv-bg) 60%);
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)), var(--inv-accent));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 62%, #000), color-mix(in srgb, var(--inv-accent) 84%, var(--inv-ornament)));
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, #000);
}

/* Sky: a deeper tone at the top that clears toward the ridges. */
.inv--munte .inv__backdrop {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 74%, var(--inv-bg)), var(--inv-bg) 430px);
}

/* Night: a darker zenith and a handful of fixed stars (more of them twinkle, see the ambient layer). */
.inv--munte.inv--dark .inv__backdrop {
    background:
        radial-gradient(circle at 9% 58px, var(--inv-text) 0 1px, transparent 1.7px),
        radial-gradient(circle at 24% 96px, var(--inv-text) 0 .8px, transparent 1.4px),
        radial-gradient(circle at 37% 34px, var(--inv-text) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 56% 22px, var(--inv-text) 0 .7px, transparent 1.3px),
        radial-gradient(circle at 68% 52px, var(--inv-text) 0 1px, transparent 1.7px),
        radial-gradient(circle at 81% 104px, var(--inv-text) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 93% 66px, var(--inv-text) 0 .8px, transparent 1.4px),
        radial-gradient(circle at 5% 168px, var(--inv-text) 0 1px, transparent 1.7px),
        radial-gradient(circle at 96% 212px, var(--inv-text) 0 .9px, transparent 1.5px),
        radial-gradient(circle at 3% 296px, var(--inv-text) 0 .8px, transparent 1.4px),
        radial-gradient(circle at 97% 338px, var(--inv-text) 0 .8px, transparent 1.4px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 62%, #000), var(--inv-bg) 430px);
}

.inv--munte.inv--dark .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/seasonal-star.svg);
    --amb-anim: inv-twinkle;
    --amb-size: 10px;
    --amb-duration: 9s;
    --amb-fill: var(--inv-text);
    --amb-opacity: .85;
}

.inv--munte .inv__ambient i {
    top: calc(var(--amb-y) * .26);
}

/* Sun (moon at night) rising from the saddle of the far range. */
.inv--munte .inv-hero::before {
    content: "";
    position: absolute;
    left: 55%;
    bottom: calc(var(--munte-foot) + var(--munte-land) * .44);
    width: min(20cqi, 112px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--munte-sun);
    box-shadow: var(--munte-glow);
    pointer-events: none;
}

.inv--munte .inv-hero::after {
    content: "";
    position: absolute;
    top: 46px;
    right: 4%;
    width: min(17cqi, 92px);
    aspect-ratio: 84 / 36;
    background: color-mix(in srgb, var(--inv-primary) 62%, var(--inv-bg));
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-birds.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-birds.svg) center / contain no-repeat;
    pointer-events: none;
}

.inv--munte.inv--dark .inv-hero::after {
    display: none;
}

/* The landscape runs across the whole screen. Far and middle range sit in the frame slot, the wooded hill and the
   two rows of firs in the corner slots; every layer is darker at its crest and dissolves into mist below. */
.inv--munte .inv-hero__frame,
.inv--munte .inv-hero__corner {
    display: block;
    top: auto;
    right: auto;
    bottom: var(--munte-foot);
    left: calc(50% - 50cqi);
    width: 100cqi;
    max-width: none;
    height: var(--munte-land);
    aspect-ratio: auto;
    opacity: 1;
    transform: none;
}

.inv--munte .inv-hero__frame {
    border: 0;
}

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

.inv--munte .inv-hero__frame::before {
    background: linear-gradient(180deg, var(--munte-l1) 8%, var(--munte-mist) 64%);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-ridge-far.svg) 50% 100% / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/seasonal-ridge-far.svg) 50% 100% / auto 100% repeat-x;
}

.inv--munte .inv-hero__frame::after {
    background: linear-gradient(180deg, var(--munte-l2) 34%, var(--munte-mist) 82%);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-ridge-mid.svg) 50% 100% / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/seasonal-ridge-mid.svg) 50% 100% / auto 100% repeat-x;
}

.inv--munte .inv-hero__corner--tl {
    background: linear-gradient(180deg, var(--munte-l3) 60%, var(--munte-mist) 88%, var(--inv-bg));
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-ridge-near.svg) 50% 100% / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/seasonal-ridge-near.svg) 50% 100% / auto 100% repeat-x;
}

.inv--munte .inv-hero__corner--tr {
    height: calc(var(--munte-land) * .36);
    background: linear-gradient(180deg, var(--munte-l4), var(--munte-l4) 40%, var(--inv-bg) 94%);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-firs.svg) calc(50% + var(--munte-land) * .62) 100% / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/seasonal-firs.svg) calc(50% + var(--munte-land) * .62) 100% / auto 100% repeat-x;
}

.inv--munte .inv-hero__corner--bl {
    height: calc(var(--munte-land) * .5);
    background: linear-gradient(180deg, var(--munte-fir), var(--munte-fir) 46%, var(--inv-bg) 95%);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-firs.svg) 50% 100% / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/seasonal-firs.svg) 50% 100% / auto 100% repeat-x;
}

.inv--munte .inv-hero__corner--br {
    display: none;
}

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

.inv--munte .inv-hero__name {
    color: var(--inv-primary);
}

.inv--munte .inv-hero__date {
    margin-top: 14px;
    font-style: italic;
    color: var(--inv-primary);
}

.inv--munte .inv-hero__place {
    font-weight: 700;
    font-size: .68rem;
}

.inv--munte .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-peak.svg);
    --orn-ratio: 104 / 42;
    --orn-width: min(17cqi, 84px);
    --orn-max: none;
    --orn-fill: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-ornament));
}

.inv--munte .orn--hero-divider,
.inv--munte .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-ridge-line.svg);
    --orn-ratio: 320 / 44;
    --orn-width: 86%;
    --orn-max: 320px;
    --orn-fill: var(--inv-ornament);
}

.inv--munte .inv-hero .orn--hero-divider {
    --orn-width: min(56cqi, 270px);
    --orn-max: none;
    --orn-margin: 2px auto 0;
    --orn-fill: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-ornament));
}

.inv--munte .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/seasonal-peak.svg);
    --orn-ratio: 104 / 42;
    --orn-width: 62px;
    --orn-max: 62px;
    --orn-margin: -12px auto 22px;
    --orn-fill: var(--inv-ornament);
}

/* The foot of the card: a pale range and a line of firs, as on the first screen. */
.inv--munte .inv-card::before,
.inv--munte .inv-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0 0 19px 19px;
    pointer-events: none;
}

.inv--munte .inv-card::before {
    height: 132px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 16%, var(--inv-surface)), color-mix(in srgb, var(--inv-primary) 6%, var(--inv-surface)) 80%);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-ridge-far.svg) 50% 0 / auto 300px repeat-x;
    mask: url(../../img/invitations/ornaments/seasonal-ridge-far.svg) 50% 0 / auto 300px repeat-x;
}

.inv--munte .inv-card::after {
    height: 92px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 46%, var(--inv-surface)), color-mix(in srgb, var(--inv-primary) 22%, var(--inv-surface)));
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-firs.svg) 50% 100% / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/seasonal-firs.svg) 50% 100% / auto 100% repeat-x;
}

/* The photo in a cabin gable, with firs standing on both sides. */
.inv--munte .inv-photo__frame {
    position: relative;
    z-index: 1;
}

.inv--munte .inv-photo__frame img {
    clip-path: var(--munte-gable);
}

.inv--munte .inv-photo::before,
.inv--munte .inv-photo::after {
    content: "";
    position: absolute;
    bottom: 26px;
    width: 78px;
    aspect-ratio: 94 / 130;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 52%, var(--inv-surface)), color-mix(in srgb, var(--inv-primary) 30%, var(--inv-surface)));
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-fir-group.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/seasonal-fir-group.svg) center / contain no-repeat;
    pointer-events: none;
}

.inv--munte .inv-photo::before {
    left: calc(50% - var(--munte-photo) / 2 - 54px);
}

.inv--munte .inv-photo::after {
    left: calc(50% + var(--munte-photo) / 2 - 24px);
    transform: scaleX(-1);
}

.inv--munte .inv-when__date {
    font-size: 2.7rem;
    letter-spacing: .04em;
}

/* Countdown cells shaped like the cabin gable. */
.inv--munte .inv-countdown > div {
    padding: 26px 4px 12px;
    border-radius: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 78%, var(--inv-surface)), color-mix(in srgb, var(--inv-accent) 40%, var(--inv-surface)));
    clip-path: polygon(50% 0, 100% 20%, 100% 100%, 0 100%, 0 20%);
}

.inv--munte .inv-countdown span {
    font-size: 2.9rem;
}

.inv--munte .inv-countdown small {
    font-weight: 700;
    letter-spacing: .14em;
}

.inv--munte .inv-program__item {
    padding-top: 34px;
}

/* Program numbers as trail markers: a dot on a white square. */
.inv--munte .inv-program__index {
    width: 36px;
    height: 36px;
    top: -18px;
    margin-left: -18px;
    border: 1px solid color-mix(in srgb, var(--inv-primary) 34%, transparent);
    border-radius: 7px;
    background: radial-gradient(circle, var(--inv-primary) 0 11.5px, var(--inv-surface) 12.2px);
    color: var(--inv-on-primary);
    font-weight: 700;
}

.inv--munte .inv-program__time {
    font-size: 2.9rem;
    letter-spacing: .04em;
}

.inv--munte .inv-program__title {
    font-weight: 700;
}

.inv--munte .inv-button {
    font-weight: 700;
}

.inv--munte .inv-closing__line {
    color: var(--inv-muted);
}

.inv--munte .inv-monogram {
    font-size: 1.7rem;
    font-weight: 700;
}

/* Envelope: the far range and the firs along the bottom of the screen. */
.inv--munte .inv-envelope::before,
.inv--munte .inv-envelope::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
}

.inv--munte .inv-envelope::before {
    height: min(44vh, 330px);
    background: linear-gradient(180deg, var(--munte-l1) 8%, var(--munte-mist) 70%);
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-ridge-far.svg) 50% 100% / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/seasonal-ridge-far.svg) 50% 100% / auto 100% repeat-x;
}

.inv--munte .inv-envelope::after {
    height: min(21vh, 160px);
    background: linear-gradient(180deg, var(--munte-fir), var(--munte-l4));
    -webkit-mask: url(../../img/invitations/ornaments/seasonal-firs.svg) 50% 100% / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/seasonal-firs.svg) 50% 100% / auto 100% repeat-x;
}