/* Collection "baptism": botezuri și petreceri pentru cei mici. Contract: docs/invitation-templates.md.
   Ornaments: ../../img/invitations/ornaments/baptism-*.svg, textures: ../../img/invitations/textures/baptism-*.svg.
   Every model has its own visual idea; shared rules for the whole collection stay minimal. */

/* ---------- common to the collection ---------- */

.inv-c--baptism {
    --button-radius: 999px;
    --button-transform: none;
    --button-spacing: .06em;
}


/* ---------- Nor pufos: pastel sky, the name floats on a big fluffy cloud, a cloud bank carries the card ---------- */
.inv--nor-pufos {
    --f-display: "Comfortaa", "Quicksand", sans-serif;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Comfortaa", "Quicksand", sans-serif;
    --names-weight: 700;
    --names-size: clamp(2.6rem, 13.5cqi, 5.2rem);
    --names-line: 1.08;
    --names-spacing: -.01em;
    --names-shadow: none;
    --kicker-weight: 700;
    --kicker-size: .68rem;
    --kicker-spacing: .3em;
    --date-weight: 700;
    --date-spacing: .3em;
    --heading-weight: 500;
    --heading-size: 1.75rem;
    --text-display-font: "Quicksand", sans-serif;
    --message-style: normal;
    --message-size: 1.12rem;
    --family-font: "Comfortaa", sans-serif;
    --family-size: 1.02rem;
    --label-weight: 700;
    --body-weight: 500;
    --hero-halo: none;
    --hero-content-pad: 40px 36px 34px;
    --card-bg: var(--inv-surface);
    --card-radius: 0 0 40px 40px;
    --card-shadow: 0 34px 70px -40px color-mix(in srgb, var(--inv-primary) 45%, transparent);
    --card-pad: 30px 22px 44px;
    --box-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 75%, var(--inv-surface)), color-mix(in srgb, var(--inv-accent) 35%, var(--inv-surface)));
    --box-border: 0 solid transparent;
    --box-radius: 26px;
    --box-shadow: 0 14px 26px -18px color-mix(in srgb, var(--inv-primary) 50%, transparent);
    --divider-rule-display: none;
    --photo-width: min(100%, 400px);
    --photo-ratio: 360 / 232;
    --photo-radius: 0;
    --photo-shadow: none;
    --monogram-font: "Comfortaa", sans-serif;
    --closing-font: "Comfortaa", sans-serif;
    --closing-size: 2.1rem;
    --env-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-bg)), var(--inv-bg) 70%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface));
    --env-front: linear-gradient(170deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 85%, var(--inv-ornament)), var(--inv-accent));
    --env-radius: 18px;
    --seal-fill: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--inv-ornament) 70%, #fff) 60%, var(--inv-ornament));
    --seal-color: var(--inv-primary);
    --cloud: linear-gradient(180deg, var(--inv-surface) 45%, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-surface)));
}

.inv--nor-pufos .inv__backdrop {
    background:
        radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--inv-surface) 70%, transparent), transparent 170px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 62%, var(--inv-bg)) 0, color-mix(in srgb, var(--inv-ornament) 30%, var(--inv-bg)) 480px, var(--inv-bg) 900px);
}

/* The big cloud behind the texts. */
.inv--nor-pufos .inv-hero__frame {
    display: block;
    inset: auto -34px;
    top: 50%;
    height: 360px;
    margin-top: -196px;
    border: 0;
    background: var(--cloud);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-cloud.svg) center / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-cloud.svg) center / 100% 100% no-repeat;
}

/* Its hand-drawn outline, above the cloud and under the texts. */
.inv--nor-pufos .inv-hero::after {
    content: "";
    position: absolute;
    left: -34px;
    right: -34px;
    top: 50%;
    height: 360px;
    margin-top: -196px;
    background: var(--inv-ornament);
    opacity: .75;
    -webkit-mask: url(../../img/invitations/ornaments/baptism-cloud-line.svg) center / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-cloud-line.svg) center / 100% 100% no-repeat;
    pointer-events: none;
}

/* A bank of clouds at the bottom of the first screen: the card rises out of it. */
.inv--nor-pufos .inv-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -16px;
    right: -16px;
    bottom: -62px;
    aspect-ratio: 800 / 220;
    background: var(--inv-surface);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-cloud-bank.svg) top / 100% 100% no-repeat, linear-gradient(#000 58%, transparent);
    -webkit-mask-composite: source-in;
    mask: url(../../img/invitations/ornaments/baptism-cloud-bank.svg) top / 100% 100% no-repeat, linear-gradient(#000 58%, transparent);
    mask-composite: intersect;
    pointer-events: none;
}

.inv--nor-pufos .inv-hero__scroll {
    z-index: 2;
}

/* Little clouds drifting on the spot. */
.inv--nor-pufos .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/baptism-cloudlet.svg);
    --amb-ratio: 120 / 72;
    --amb-size: 74px;
    --amb-fill: var(--inv-surface);
    --amb-opacity: .92;
    --amb-anim: baptism-float;
    --amb-duration: 16s;
}

.inv--nor-pufos .inv__ambient i {
    top: var(--amb-y);
    animation-timing-function: ease-in-out;
}

.inv--nor-pufos .inv__ambient i:nth-child(n + 7) {
    display: none;
}

.inv--nor-pufos .inv__ambient i:nth-child(1) { left: 4%; --amb-y: 9%; }
.inv--nor-pufos .inv__ambient i:nth-child(2) { left: 70%; --amb-y: 5%; scale: .8; }
.inv--nor-pufos .inv__ambient i:nth-child(3) { left: 38%; --amb-y: 14%; scale: .5; }
.inv--nor-pufos .inv__ambient i:nth-child(4) { left: 76%; --amb-y: 20%; scale: .45; }
.inv--nor-pufos .inv__ambient i:nth-child(5) { left: 2%; --amb-y: 74%; scale: .6; }
.inv--nor-pufos .inv__ambient i:nth-child(6) { left: 80%; --amb-y: 72%; scale: .7; }

@keyframes baptism-float {
    0%, 100% { transform: translate(-10px, 0); }
    50% { transform: translate(12px, -5px); }
}

.inv--nor-pufos .orn--hero-divider {
    display: block;
    width: 46px;
    height: 5px;
    aspect-ratio: auto;
    margin: 18px auto 0;
    border-radius: 5px;
    -webkit-mask: none;
    mask: none;
    background: var(--inv-ornament);
}

.inv--nor-pufos .inv-hero__date {
    margin-top: 16px;
    color: var(--inv-primary);
}

.inv--nor-pufos .inv-hero__place {
    font-weight: 600;
    letter-spacing: .16em;
}

.inv--nor-pufos .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-cloudlet.svg);
    --orn-ratio: 120 / 72;
    --orn-width: 58px;
    --orn-margin: -10px auto 20px;
}

.inv--nor-pufos .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-cloud-divider.svg);
    --orn-ratio: 320 / 60;
    --orn-width: 78%;
    --orn-max: 300px;
}

/* The photo is cut as a cloud. */
.inv--nor-pufos .inv-photo__frame {
    -webkit-mask: url(../../img/invitations/ornaments/baptism-cloud.svg) center / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-cloud.svg) center / 100% 100% no-repeat;
}

.inv--nor-pufos .inv-photo {
    padding-bottom: 12px;
}

.inv--nor-pufos .inv-countdown > div {
    border-radius: 999px 999px 26px 26px;
    padding-top: 20px;
}

.inv--nor-pufos .inv-program__index {
    border: 0;
    background: var(--inv-ornament);
    color: var(--inv-surface);
    font-weight: 700;
}

.inv--nor-pufos .inv-program__title {
    font-weight: 700;
    letter-spacing: .12em;
}

.inv--nor-pufos .inv-when__date,
.inv--nor-pufos .inv-countdown span,
.inv--nor-pufos .inv-program__time {
    font-weight: 500;
}

.inv--nor-pufos .inv-monogram {
    border: 0;
    background: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface));
    box-shadow: 0 0 0 6px var(--inv-surface), 0 0 0 8px color-mix(in srgb, var(--inv-ornament) 60%, transparent);
    font-weight: 700;
}

.inv--nor-pufos .inv-closing__line {
    font-style: normal;
    font-weight: 600;
}

.inv--nor-pufos .orn--heading,
.inv--nor-pufos .orn--divider {
    --orn-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-surface)), var(--inv-ornament));
}

/* ---------- Îngeraș: feathered wings spread behind the name, a halo above it, soft gold light ---------- */

.inv--ingeras {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Great Vibes", "Allura", cursive;
    --names-weight: 400;
    --names-size: clamp(3.4rem, 17cqi, 6rem);
    --names-line: 1.15;
    --names-shadow: 0 0 18px var(--inv-surface);
    --kicker-font: "Cormorant Garamond", Georgia, serif;
    --kicker-size: 1.18rem;
    --kicker-style: italic;
    --kicker-weight: 500;
    --kicker-spacing: .02em;
    --kicker-transform: none;
    --kicker-color: var(--inv-text);
    --date-font: "Cormorant Garamond", Georgia, serif;
    --date-size: 1.02rem;
    --date-weight: 600;
    --date-spacing: .32em;
    --heading-font: "Great Vibes", cursive;
    --heading-size: 2.75rem;
    --heading-weight: 400;
    --message-size: 1.34rem;
    --family-font: "Cormorant Garamond", serif;
    --family-size: 1.3rem;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-surface) 70%, transparent), transparent);
    --hero-content-pad: 24px 4px;
    --card-bg: var(--inv-surface);
    --card-radius: 30px;
    --card-shadow: 0 30px 70px -44px color-mix(in srgb, var(--inv-primary) 60%, transparent),
        inset 0 0 0 10px var(--inv-surface), inset 0 0 0 11px color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    --card-pad: 58px 26px 48px;
    --box-bg: radial-gradient(120% 90% at 50% 0, color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface)), var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 45%, transparent);
    --box-radius: 20px;
    --box-shadow: 0 16px 30px -24px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    --divider-rule-display: none;
    --photo-width: min(74%, 280px);
    --photo-ratio: 1;
    --photo-radius: 50%;
    --photo-shadow: 0 0 0 6px var(--inv-surface), 0 0 0 7.5px var(--inv-ornament), 0 0 46px 12px color-mix(in srgb, var(--inv-ornament) 30%, transparent);
    --monogram-font: "Great Vibes", cursive;
    --closing-font: "Great Vibes", cursive;
    --closing-size: 3rem;
    --gold: linear-gradient(100deg, color-mix(in srgb, var(--inv-ornament) 65%, var(--inv-primary)), color-mix(in srgb, var(--inv-ornament) 75%, #fff) 45%, var(--inv-ornament) 62%, color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-primary)));
    --env-bg: radial-gradient(circle at 50% 36%, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg)) 74%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 75%, var(--inv-surface));
    --env-front: linear-gradient(165deg, 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) 70%, var(--inv-ornament)), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-surface)));
    --env-radius: 12px;
}

.inv--ingeras .inv__backdrop {
    background:
        radial-gradient(ellipse 70% 42% at 50% 30%, color-mix(in srgb, var(--inv-surface) 92%, transparent), transparent 70%),
        radial-gradient(ellipse 90% 60% at 50% 30%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 72%),
        var(--inv-bg);
}

/* Wings behind the name, halo above it: both hang on the name, so they follow it wherever it lands. */
.inv--ingeras .inv-hero__names {
    position: relative;
    padding-top: 58px;
}

.inv--ingeras .inv-hero__names::before,
.inv--ingeras .inv-hero__names::after {
    content: "";
    position: absolute;
    left: 50%;
    z-index: -1;
    background: var(--gold);
    pointer-events: none;
}

.inv--ingeras .inv-hero__names::before {
    top: calc(58px + .8em);
    width: min(98cqi, 560px);
    aspect-ratio: 586 / 198;
    opacity: .82;
    transform: translate(-50%, -100%);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-wings.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-wings.svg) center / contain no-repeat;
}

.inv--ingeras .inv-hero__names::after {
    top: 0;
    width: 120px;
    aspect-ratio: 200 / 62;
    transform: translateX(-50%);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-halo.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-halo.svg) center / contain no-repeat;
}

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

.inv--ingeras .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-feather-h.svg);
    --orn-ratio: 196 / 68;
    --orn-width: 92px;
    --orn-margin: 14px auto 0;
    --orn-fill: var(--gold);
}

.inv--ingeras .inv-hero__date {
    margin-top: 14px;
    color: var(--inv-primary);
}

/* Feathers drifting down, a few and slowly. */
.inv--ingeras .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/baptism-feather.svg);
    --amb-ratio: 68 / 192;
    --amb-size: 15px;
    --amb-duration: 19s;
    --amb-opacity: .55;
}

.inv--ingeras .inv__ambient i:nth-child(n + 8) {
    display: none;
}

.inv--ingeras .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-winged-heart.svg);
    --orn-ratio: 200 / 72;
    --orn-width: 150px;
    --orn-margin: -84px auto 18px;
    --orn-fill: var(--gold);
}

.inv--ingeras .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-halo.svg);
    --orn-ratio: 200 / 62;
    --orn-width: 64px;
    --orn-margin: -6px auto 22px;
    --orn-fill: var(--gold);
}

.inv--ingeras .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-winged-heart.svg);
    --orn-ratio: 200 / 72;
    --orn-width: 118px;
    --orn-fill: var(--gold);
}

/* The photo gets its own little wings. */
.inv--ingeras .inv-photo {
    isolation: isolate;
    padding-top: 40px;
}

.inv--ingeras .inv-photo::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 34%;
    width: min(100%, 440px);
    aspect-ratio: 586 / 198;
    background: var(--gold);
    opacity: .7;
    transform: translate(-50%, -50%);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-wings.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-wings.svg) center / contain no-repeat;
}

.inv--ingeras .inv-countdown {
    gap: 8px;
}

.inv--ingeras .inv-countdown > div {
    aspect-ratio: 1;
    display: grid;
    align-content: center;
    padding: 4px;
    border-radius: 50%;
}

.inv--ingeras .inv-countdown span {
    font-family: "Cormorant Garamond", serif;
    font-size: 2.1rem;
    font-weight: 500;
}

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

.inv--ingeras .inv-when__date,
.inv--ingeras .inv-program__time {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
}

.inv--ingeras .inv-program__index {
    border-color: var(--inv-ornament);
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
}

.inv--ingeras .inv-closing__line {
    font-weight: 500;
}

.inv--ingeras .inv-monogram {
    border-color: var(--inv-ornament);
    font-size: 1.7rem;
    box-shadow: inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 60%, transparent), 0 0 30px color-mix(in srgb, var(--inv-ornament) 35%, transparent);
}

.inv--ingeras .inv-envelope__letter {
    font-size: 2.3rem;
}

.inv--ingeras.inv--dark {
    --names-shadow: 0 0 26px color-mix(in srgb, var(--inv-bg) 80%, transparent);
    --card-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 0 0 10px var(--inv-surface), inset 0 0 0 11px color-mix(in srgb, var(--inv-ornament) 45%, transparent);
}

/* ---------- Ursuleț: a plush teddy sits on a stitched fabric patch, gingham blanket, sewn details ---------- */

.inv--ursulet {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --names-weight: 600;
    --names-size: clamp(3rem, 15cqi, 5rem);
    --names-line: 1.05;
    --names-spacing: -.01em;
    --names-shadow: none;
    --kicker-weight: 800;
    --kicker-size: .68rem;
    --kicker-spacing: .26em;
    --kicker-color: var(--inv-muted);
    --date-weight: 800;
    --date-size: .86rem;
    --date-spacing: .26em;
    --heading-weight: 600;
    --heading-size: 2rem;
    --label-weight: 800;
    --text-display-font: "Nunito", sans-serif;
    --message-style: normal;
    --message-size: 1.12rem;
    --family-font: "Fraunces", serif;
    --family-size: 1.15rem;
    --body-weight: 500;
    --hero-pad: 150px 6px 84px;
    --hero-halo: var(--inv-surface);
    --hero-content-pad: 8px 24px 34px;
    --hero-content-radius: 38px;
    --stitch: color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-primary));
    --plush: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-ornament));
    --card-bg: var(--inv-surface);
    --card-radius: 38px;
    --card-shadow: 0 26px 50px -34px color-mix(in srgb, var(--inv-primary) 55%, transparent);
    --card-pad: 44px 26px 48px;
    --box-bg: color-mix(in srgb, var(--inv-accent) 45%, var(--inv-surface));
    --box-border: 2px dashed color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    --box-radius: 24px;
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-width: min(86%, 320px);
    --photo-ratio: 4 / 5;
    --photo-radius: 30px;
    --photo-pad: 12px;
    --photo-bg: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface));
    --photo-inner-radius: 20px;
    --photo-rotate: -2deg;
    --photo-shadow: 0 22px 40px -26px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    --monogram-font: "Fraunces", serif;
    --closing-font: "Fraunces", serif;
    --closing-size: 2.3rem;
    --env-bg: var(--inv-bg);
    --env-fill: color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament));
    --env-front: linear-gradient(170deg, var(--inv-accent), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 65%, var(--inv-ornament)), var(--inv-accent));
    --env-radius: 16px;
    --seal-fill: radial-gradient(circle at 50% 50%, var(--plush) 55%, color-mix(in srgb, var(--plush) 80%, #000) 57%, var(--plush) 60%);
    --seal-color: var(--inv-surface);
}

/* A gingham baby blanket under everything. */
.inv--ursulet .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/baptism-gingham.svg);
    --texture-size: 30px;
    --texture-opacity: .16;
}

/* The hero is a sewn fabric patch; the teddy sits on its top edge. */
.inv--ursulet .inv-hero__content {
    width: min(100%, 340px);
    outline: 2px dashed var(--stitch);
    outline-offset: -11px;
    box-shadow: 0 26px 44px -30px color-mix(in srgb, var(--inv-primary) 55%, transparent), 0 0 0 6px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}

.inv--ursulet .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-teddy.svg);
    --orn-ratio: 200 / 220;
    --orn-width: 150px;
    --orn-max: 150px;
    --orn-margin: -132px auto 0;
    --orn-fill: var(--plush);
}

.inv--ursulet .inv-hero__kicker {
    margin-top: 16px;
}

.inv--ursulet .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/bow.svg);
    --orn-ratio: 200 / 110;
    --orn-width: 58px;
    --orn-margin: 16px auto 0;
    --orn-fill: var(--inv-ornament);
}

.inv--ursulet .inv-hero__date {
    margin-top: 14px;
    color: var(--inv-primary);
}

.inv--ursulet .inv-hero__place {
    font-weight: 700;
    letter-spacing: .14em;
}

.inv--ursulet .inv-card {
    outline: 2px dashed var(--stitch);
    outline-offset: -12px;
}

.inv--ursulet .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-paw.svg);
    --orn-ratio: 34 / 36;
    --orn-width: 26px;
    --orn-margin: -8px auto 22px;
    --orn-fill: var(--inv-ornament);
}

.inv--ursulet .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-paws.svg);
    --orn-ratio: 320 / 60;
    --orn-width: 82%;
    --orn-max: 300px;
    --orn-fill: var(--plush);
}

.inv--ursulet .inv-photo__frame {
    outline: 2px dashed var(--stitch);
    outline-offset: -6px;
}

.inv--ursulet .inv-family__names {
    font-weight: 500;
}

.inv--ursulet .inv-when__date,
.inv--ursulet .inv-countdown span,
.inv--ursulet .inv-program__time {
    font-weight: 600;
}

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

.inv--ursulet .inv-countdown > div {
    border-radius: 20px;
}

.inv--ursulet .inv-program__index {
    border: 2px solid var(--inv-surface);
    background: var(--plush);
    color: var(--inv-surface);
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--plush);
}

.inv--ursulet .inv-program__title {
    font-weight: 800;
    letter-spacing: .12em;
}

.inv--ursulet .inv-closing__line {
    font-style: normal;
    font-weight: 600;
}

/* The monogram is a sewing button. */
.inv--ursulet .inv-monogram {
    border: 0;
    background: var(--plush);
    color: var(--inv-surface);
    font-weight: 600;
    font-size: 1.25rem;
    box-shadow: inset 0 0 0 5px var(--plush), inset 0 0 0 7px color-mix(in srgb, var(--inv-surface) 70%, transparent), 0 8px 18px -8px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}

.inv--ursulet .inv-envelope__seal {
    box-shadow: inset 0 0 0 5px var(--plush), inset 0 0 0 7px color-mix(in srgb, var(--inv-surface) 70%, transparent), 0 6px 14px rgba(0, 0, 0, .3);
}

/* ---------- Steluțe: a lullaby night, a sleeping crescent moon, a star mobile hanging from the top, twinkles ---------- */

.inv--stelute {
    --f-display: "Josefin Sans", "Segoe UI", sans-serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Allura", "Great Vibes", cursive;
    --names-weight: 400;
    --names-size: clamp(3.6rem, 19cqi, 6.4rem);
    --names-line: 1.1;
    --names-shadow: 0 0 24px color-mix(in srgb, var(--inv-ornament) 35%, transparent);
    --kicker-weight: 300;
    --kicker-size: .72rem;
    --kicker-spacing: .44em;
    --kicker-color: var(--inv-text);
    --date-weight: 400;
    --date-size: .86rem;
    --date-spacing: .44em;
    --heading-weight: 300;
    --heading-size: 1.45rem;
    --heading-transform: uppercase;
    --heading-spacing: .24em;
    --text-display-font: "Lora", Georgia, serif;
    --message-size: 1.14rem;
    --family-font: "Lora", serif;
    --family-size: 1.14rem;
    --label-weight: 400;
    --label-spacing: .34em;
    --body-weight: 300;
    --hero-pad: 150px 8px 88px;
    --hero-halo: none;
    --card-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 92%, transparent), var(--inv-surface) 240px);
    --card-radius: 26px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 30%, transparent);
    --card-shadow: 0 30px 70px -40px color-mix(in srgb, var(--inv-ornament) 30%, transparent);
    --card-pad: 50px 24px 46px;
    --box-bg: color-mix(in srgb, var(--inv-accent) 40%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 32%, transparent);
    --box-radius: 999px;
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-width: min(76%, 290px);
    --photo-ratio: 1;
    --photo-radius: 50%;
    --photo-shadow: 0 0 0 8px color-mix(in srgb, var(--inv-ornament) 14%, transparent), 0 0 0 9px color-mix(in srgb, var(--inv-ornament) 40%, transparent), 0 0 70px 6px color-mix(in srgb, var(--inv-ornament) 32%, transparent);
    --monogram-font: "Allura", cursive;
    --closing-font: "Allura", cursive;
    --closing-size: 3.2rem;
    --button-font: "Josefin Sans", sans-serif;
    --env-bg: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg)), var(--inv-bg) 70%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 85%, var(--inv-bg));
    --env-front: linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-ornament)), var(--inv-accent));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)), color-mix(in srgb, var(--inv-accent) 90%, var(--inv-ornament)));
    --env-radius: 14px;
    --seal-color: var(--inv-bg);
}

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

.inv--stelute .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/baptism-stardust.svg);
    --texture-size: 170px;
    --texture-opacity: .55;
}

/* The mobile hangs from the top edge on both sides. */
.inv--stelute .inv-hero__corner--tl,
.inv--stelute .inv-hero__corner--tr {
    display: block;
    top: 0;
    --hero-corner-image: url(../../img/invitations/ornaments/baptism-mobile.svg);
    --hero-corner-ratio: 170 / 196;
    --hero-corner-size: 36%;
    --hero-corner-inset: 2px;
    --hero-corner-opacity: .95;
}

.inv--stelute .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-moon.svg);
    --orn-ratio: 1;
    --orn-width: 128px;
    --orn-max: 128px;
    --orn-margin: -40px auto 6px;
    --orn-fill: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 60%, #fff), var(--inv-ornament) 60%);
}

.inv--stelute .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-sparkles.svg);
    --orn-ratio: 2;
    --orn-width: 52px;
    --orn-margin: 12px auto 0;
}

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

.inv--stelute .inv-hero__date {
    margin-top: 12px;
    color: var(--inv-primary);
}

.inv--stelute .inv-hero__place {
    letter-spacing: .3em;
}

/* Stars twinkling on the spot. */
.inv--stelute .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/baptism-sparkle.svg);
    --amb-size: 13px;
    --amb-anim: inv-twinkle;
    --amb-duration: 9s;
    --amb-opacity: .9;
}

.inv--stelute .inv__ambient i {
    top: var(--amb-y);
    animation-timing-function: ease-in-out;
}

/* Every third twinkle is a tiny round star instead of a sparkle. */
.inv--stelute .inv__ambient i:nth-child(3n) {
    --amb-image: url(../../img/invitations/ornaments/baptism-star.svg);
    width: 10px;
}

.inv--stelute .inv__ambient i:nth-child(1) { --amb-y: 36%; left: 8%; }
.inv--stelute .inv__ambient i:nth-child(5) { --amb-y: 30%; left: 88%; }
.inv--stelute .inv__ambient i:nth-child(8) { --amb-y: 60%; }
.inv--stelute .inv__ambient i:nth-child(12) { --amb-y: 82%; left: 70%; }

.inv--stelute .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-star-garland.svg);
    --orn-ratio: 320 / 50;
    --orn-width: 88%;
    --orn-max: 340px;
    --orn-margin: -30px auto 12px;
}

.inv--stelute .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-sparkles.svg);
    --orn-ratio: 2;
    --orn-width: 46px;
    --orn-margin: -8px auto 22px;
}

.inv--stelute .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-star-garland.svg);
    --orn-ratio: 320 / 50;
    --orn-width: 80%;
    --orn-max: 300px;
}

.inv--stelute .inv-message p {
    font-style: italic;
}

/* A little moon rests on the round photo. */
.inv--stelute .inv-photo {
    isolation: isolate;
}

.inv--stelute .inv-photo::after {
    content: "";
    position: absolute;
    top: 8px;
    left: calc(50% + min(38%, 145px) - 62px);
    width: 76px;
    aspect-ratio: 1;
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 60%, #fff), var(--inv-ornament) 60%);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-moon.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-moon.svg) center / contain no-repeat;
}

.inv--stelute .inv-family__item {
    padding: 16px 20px;
}

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

.inv--stelute .inv-countdown > div {
    padding: 22px 4px 18px;
}

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

.inv--stelute .inv-program__item {
    border-radius: 40px;
}

.inv--stelute .inv-program__index {
    border-color: color-mix(in srgb, var(--inv-ornament) 50%, transparent);
    background: var(--inv-surface);
    color: var(--inv-primary);
}

.inv--stelute .inv-program__title {
    font-weight: 400;
    letter-spacing: .24em;
}

.inv--stelute .inv-program__venue {
    font-family: "Lora", serif;
}

.inv--stelute .inv-monogram {
    border-color: color-mix(in srgb, var(--inv-ornament) 50%, transparent);
    font-size: 1.9rem;
    box-shadow: inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 35%, transparent), 0 0 34px color-mix(in srgb, var(--inv-ornament) 30%, transparent);
}

.inv--stelute .inv-envelope__letter {
    font-size: 2.4rem;
}

/* ---------- Porumbel: a church-window arch, a dove with an olive branch in a glory of golden rays ---------- */

.inv--porumbel {
    --f-display: "Cinzel", "Cormorant Garamond", serif;
    --f-body: "EB Garamond", Georgia, serif;
    --f-names: "Pinyon Script", "Great Vibes", cursive;
    --names-weight: 400;
    --names-size: clamp(3rem, 15.5cqi, 5.4rem);
    --names-line: 1.2;
    --names-color: var(--inv-primary);
    --names-shadow: 0 0 20px var(--inv-surface);
    --kicker-font: "Cinzel", serif;
    --kicker-size: .7rem;
    --kicker-weight: 500;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-muted);
    --date-font: "Cinzel", serif;
    --date-size: .92rem;
    --date-weight: 500;
    --date-spacing: .34em;
    --heading-font: "Cinzel", serif;
    --heading-size: 1.3rem;
    --heading-weight: 500;
    --heading-transform: uppercase;
    --heading-spacing: .2em;
    --label-font: "Cinzel", serif;
    --text-display-font: "EB Garamond", Georgia, serif;
    --message-size: 1.28rem;
    --family-font: "EB Garamond", serif;
    --family-size: 1.22rem;
    --body-weight: 400;
    --hero-pad: 96px 18px 104px;
    --hero-halo: none;
    --hero-content-pad: 18px 10px;
    --card-bg: var(--inv-surface);
    --card-radius: 999px 999px 20px 20px / 190px 190px 20px 20px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 60%, transparent);
    --card-shadow: inset 0 0 0 9px var(--inv-surface), inset 0 0 0 10px color-mix(in srgb, var(--inv-ornament) 45%, transparent),
        0 30px 70px -46px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    --card-pad: 34px 26px 50px;
    --box-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 45%, var(--inv-surface)), var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 50%, transparent);
    --box-radius: 14px;
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-width: min(80%, 300px);
    --photo-ratio: 3 / 4;
    --photo-radius: 999px 999px 10px 10px;
    --photo-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 8px var(--inv-ornament), 0 26px 50px -30px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    --monogram-font: "Pinyon Script", cursive;
    --closing-font: "Pinyon Script", cursive;
    --closing-size: 2.9rem;
    --button-font: "Cinzel", serif;
    --button-spacing: .14em;
    --gold: linear-gradient(115deg, color-mix(in srgb, var(--inv-ornament) 45%, var(--inv-primary)), color-mix(in srgb, var(--inv-ornament) 85%, #fff) 40%, var(--inv-ornament) 55%, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-primary)) 85%);
    --env-bg: radial-gradient(circle at 50% 36%, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 60%, var(--inv-bg)) 76%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface));
    --env-front: linear-gradient(165deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-ornament)), color-mix(in srgb, var(--inv-accent) 85%, var(--inv-surface)));
    --env-radius: 10px;
    --seal-fill: var(--gold);
    --seal-color: var(--inv-surface);
}

.inv--porumbel .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 50% at 50% 18%, color-mix(in srgb, var(--inv-ornament) 20%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 45%, var(--inv-bg)) 1200px, var(--inv-bg));
}

/* The church window: an arch with a double golden line, lit from inside. */
.inv--porumbel .inv-hero__frame {
    display: block;
    inset: 40px 6px 44px;
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 75%, transparent);
    border-radius: 999px 999px 16px 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 92%, transparent), color-mix(in srgb, var(--inv-surface) 55%, transparent) 70%, color-mix(in srgb, var(--inv-surface) 20%, transparent));
    box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--inv-bg) 55%, transparent), inset 0 0 0 9px color-mix(in srgb, var(--inv-ornament) 55%, transparent),
        0 30px 60px -44px color-mix(in srgb, var(--inv-primary) 55%, transparent);
}

/* Light pouring from the dove. */
.inv--porumbel .inv-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 80px;
    width: min(118cqi, 480px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: var(--inv-ornament);
    opacity: .4;
    -webkit-mask: url(../../img/invitations/ornaments/baptism-rays.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-rays.svg) center / contain no-repeat;
    pointer-events: none;
}

.inv--porumbel .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-dove.svg);
    --orn-ratio: 240 / 210;
    --orn-width: 150px;
    --orn-max: 150px;
    --orn-margin: 0 auto 4px;
    --orn-fill: var(--gold);
}

.inv--porumbel .inv-hero__kicker {
    margin: 14px 0 12px;
}

.inv--porumbel .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-olive-divider.svg);
    --orn-ratio: 320 / 54;
    --orn-width: 78%;
    --orn-max: 250px;
    --orn-margin: 16px auto 0;
    --orn-fill: var(--gold);
}

.inv--porumbel .inv-hero__date {
    margin-top: 16px;
    color: var(--inv-primary);
}

.inv--porumbel .inv-hero__place {
    font-family: "EB Garamond", serif;
    font-size: .8rem;
    letter-spacing: .22em;
}

/* Motes of light rising slowly. */
.inv--porumbel .inv__ambient {
    display: block;
    --amb-size: 7px;
    --amb-anim: inv-rise;
    --amb-duration: 20s;
    --amb-opacity: .75;
}

.inv--porumbel .inv__ambient i {
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-ornament) 60%, #fff), color-mix(in srgb, var(--inv-ornament) 60%, transparent) 45%, transparent 70%);
    -webkit-mask: none;
    mask: none;
}

.inv--porumbel .inv__ambient i:nth-child(n + 10) {
    display: none;
}

.inv--porumbel .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-dove.svg);
    --orn-ratio: 240 / 210;
    --orn-width: 84px;
    --orn-max: 84px;
    --orn-margin: 4px auto 22px;
    --orn-fill: var(--gold);
}

.inv--porumbel .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-olive.svg);
    --orn-ratio: 200 / 60;
    --orn-width: 76px;
    --orn-margin: 0 auto 22px;
    --orn-fill: var(--gold);
}

.inv--porumbel .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-olive-divider.svg);
    --orn-ratio: 320 / 54;
    --orn-width: 80%;
    --orn-max: 290px;
    --orn-fill: var(--gold);
}

.inv--porumbel .inv-message p {
    font-style: italic;
}

.inv--porumbel .inv-family__names {
    font-style: italic;
}

/* Countdown boxes are little arched windows too. */
.inv--porumbel .inv-countdown > div {
    border-radius: 999px 999px 10px 10px;
    padding: 26px 4px 14px;
}

.inv--porumbel .inv-countdown span {
    font-family: "Cinzel", serif;
    font-weight: 500;
    font-size: 1.75rem;
}

.inv--porumbel .inv-when__date {
    font-family: "EB Garamond", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.9rem;
}

.inv--porumbel .inv-program__time {
    font-family: "Cinzel", serif;
    font-weight: 500;
}

.inv--porumbel .inv-program__index {
    border-color: var(--inv-ornament);
    font-family: "Cinzel", serif;
    font-weight: 500;
}

.inv--porumbel .inv-program__title {
    letter-spacing: .2em;
}

.inv--porumbel .inv-monogram {
    border-color: var(--inv-ornament);
    font-size: 1.6rem;
    box-shadow: inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 55%, transparent);
}

.inv--porumbel .inv-closing__line {
    font-style: italic;
}

.inv--porumbel .inv-envelope__letter {
    font-size: 2.2rem;
}

.inv--porumbel.inv--dark {
    --names-shadow: 0 0 24px color-mix(in srgb, var(--inv-bg) 85%, transparent);
    --card-shadow: inset 0 0 0 9px var(--inv-surface), inset 0 0 0 10px color-mix(in srgb, var(--inv-ornament) 40%, transparent), 0 30px 80px rgba(0, 0, 0, .5);
}

/* ---------- Balon cu aer cald: a morning sky, hot-air balloons rising past the name, a balloon-shaped photo ---------- */

.inv--balon-aer {
    --f-display: "Pacifico", "Dancing Script", cursive;
    --f-body: "Poppins", "Segoe UI", sans-serif;
    --f-names: "Pacifico", "Dancing Script", cursive;
    --names-weight: 400;
    --names-size: clamp(2.5rem, 12cqi, 4.6rem);
    --names-line: 1.3;
    --names-color: var(--inv-primary);
    --names-shadow: 0 3px 0 color-mix(in srgb, var(--inv-surface) 80%, transparent);
    --kicker-font: "Poppins", sans-serif;
    --kicker-size: .66rem;
    --kicker-weight: 600;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-muted);
    --date-font: "Poppins", sans-serif;
    --date-size: .84rem;
    --date-weight: 600;
    --date-spacing: .3em;
    --heading-font: "Pacifico", cursive;
    --heading-size: 1.85rem;
    --heading-weight: 400;
    --label-weight: 600;
    --label-spacing: .26em;
    --text-display-font: "Poppins", sans-serif;
    --message-style: normal;
    --message-size: 1.04rem;
    --family-font: "Poppins", sans-serif;
    --family-size: 1rem;
    --body-weight: 300;
    --hero-pad: 70px 10px 96px;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 75%, transparent), transparent);
    --hero-content-pad: 20px 26px;
    --card-bg: var(--inv-surface);
    --card-radius: 34px;
    --card-shadow: 0 30px 60px -40px color-mix(in srgb, var(--inv-primary) 55%, transparent);
    --card-pad: 26px 24px 46px;
    --card-margin-top: 90px;
    --box-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 22%, var(--inv-surface)), var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 40%, transparent);
    --box-radius: 24px;
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-width: min(76%, 280px);
    --photo-ratio: 112 / 148;
    --photo-radius: 0;
    --photo-shadow: none;
    --monogram-font: "Pacifico", cursive;
    --closing-font: "Pacifico", cursive;
    --closing-size: 2.2rem;
    --button-font: "Poppins", sans-serif;
    --warm: color-mix(in srgb, #F2A488 55%, var(--inv-ornament));
    --balloon: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 60%, #fff), var(--inv-ornament) 40%, color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-primary)) 78%, var(--inv-primary));
    --balloon-warm: linear-gradient(180deg, color-mix(in srgb, var(--warm) 60%, #fff), var(--warm) 40%, color-mix(in srgb, var(--warm) 60%, var(--inv-primary)) 78%, var(--inv-primary));
    --cloud-fill: var(--inv-surface);
    --env-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-bg)), var(--inv-bg) 78%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface));
    --env-front: linear-gradient(170deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)), var(--inv-accent));
    --env-radius: 18px;
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--warm) 50%, #fff), var(--warm) 60%, color-mix(in srgb, var(--warm) 70%, var(--inv-primary)));
    --seal-color: #fff;
}

.inv--balon-aer .inv__backdrop {
    background:
        radial-gradient(circle at 84% 92px, color-mix(in srgb, var(--warm) 45%, #fff) 0 26px, color-mix(in srgb, var(--warm) 35%, transparent) 27px, transparent 96px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-bg)) 0, color-mix(in srgb, var(--inv-ornament) 22%, var(--inv-bg)) 560px, var(--inv-bg) 980px);
}

/* Two soft clouds in the sky. */
.inv--balon-aer .inv__deco {
    display: block;
    --deco-image: url(../../img/invitations/ornaments/baptism-cloudlet.svg);
    --deco-fill: var(--cloud-fill);
    --deco-opacity: .95;
}

.inv--balon-aer .inv__deco--a {
    --deco-a-ratio: 120 / 72;
    --deco-a-width: min(44%, 220px);
    --deco-a-top: 128px;
    --deco-a-left: -9%;
}

.inv--balon-aer .inv__deco--b {
    --deco-b-ratio: 120 / 72;
    --deco-b-width: min(36%, 180px);
    --deco-b-top: 560px;
    --deco-b-bottom: auto;
    --deco-b-right: -7%;
    --deco-b-transform: scaleX(-1);
}

/* Balloons rising slowly behind the name. */
.inv--balon-aer .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/baptism-balloon.svg);
    --amb-ratio: 120 / 196;
    --amb-size: 34px;
    --amb-anim: inv-rise;
    --amb-duration: 22s;
    --amb-fill: var(--balloon);
    --amb-opacity: .82;
}

.inv--balon-aer .inv__ambient i:nth-child(3n) {
    background: var(--balloon-warm);
}

.inv--balon-aer .inv__ambient i:nth-child(3n + 2) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 45%, #fff), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-ornament)) 55%, var(--inv-primary));
}

.inv--balon-aer .inv__ambient i:nth-child(n + 8) {
    display: none;
}

.inv--balon-aer .inv__ambient i:nth-child(1) { left: 5%; scale: .8; }
.inv--balon-aer .inv__ambient i:nth-child(2) { left: 21%; scale: .55; }
.inv--balon-aer .inv__ambient i:nth-child(4) { left: 86%; scale: .7; }
.inv--balon-aer .inv__ambient i:nth-child(6) { left: 72%; scale: 1.05; }
.inv--balon-aer .inv__ambient i:nth-child(7) { left: 90%; scale: .5; }

/* The big balloon carries the invitation. */
.inv--balon-aer .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-balloon.svg);
    --orn-ratio: 120 / 196;
    --orn-width: 104px;
    --orn-max: 104px;
    --orn-margin: 0 auto 6px;
    --orn-fill: var(--balloon-warm);
}

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

.inv--balon-aer .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-balloon-divider.svg);
    --orn-ratio: 320 / 78;
    --orn-width: 70%;
    --orn-max: 230px;
    --orn-margin: 10px auto 0;
    --orn-fill: var(--inv-ornament);
}

.inv--balon-aer .inv-hero__date {
    margin-top: 14px;
    color: var(--inv-primary);
}

.inv--balon-aer .inv-hero__place {
    font-weight: 500;
    letter-spacing: .2em;
}

.inv--balon-aer .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-balloons.svg);
    --orn-ratio: 286 / 204;
    --orn-width: 200px;
    --orn-max: 200px;
    --orn-margin: -118px auto 18px;
    --orn-fill: var(--balloon);
}

.inv--balon-aer .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-balloon.svg);
    --orn-ratio: 120 / 196;
    --orn-width: 20px;
    --orn-margin: -4px auto 20px;
    --orn-fill: var(--balloon-warm);
}

.inv--balon-aer .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-balloon-divider.svg);
    --orn-ratio: 320 / 78;
    --orn-width: 80%;
    --orn-max: 290px;
    --orn-fill: var(--inv-ornament);
}

/* The photo is the balloon itself, with its basket hanging below. */
.inv--balon-aer .inv-photo__frame {
    -webkit-mask: url(../../img/invitations/ornaments/baptism-balloon-envelope.svg) center / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-balloon-envelope.svg) center / 100% 100% no-repeat;
}

.inv--balon-aer .inv-photo::after {
    content: "";
    display: block;
    width: calc(min(76%, 280px) * 120 / 112);
    aspect-ratio: 120 / 46;
    margin: -10px auto 0;
    background: color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-primary));
    -webkit-mask: url(../../img/invitations/ornaments/baptism-balloon-basket.svg) center / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-balloon-basket.svg) center / 100% 100% no-repeat;
}

/* Countdown: four little balloons. */
.inv--balon-aer .inv-countdown {
    gap: 10px;
}

.inv--balon-aer .inv-countdown > div {
    position: relative;
    padding: 20px 4px 24px;
    margin-bottom: 14px;
    border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
}

.inv--balon-aer .inv-countdown > div::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    width: 12px;
    height: 9px;
    margin-left: -6px;
    border-radius: 2px 2px 3px 3px;
    background: color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-primary));
    box-shadow: 0 -5px 0 -3px color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-primary));
}

.inv--balon-aer .inv-countdown span {
    font-weight: 500;
}

.inv--balon-aer .inv-when__date {
    font-weight: 500;
}

.inv--balon-aer .inv-program__time {
    font-weight: 500;
}

.inv--balon-aer .inv-program__index {
    border: 0;
    background: var(--balloon);
    color: #fff;
    font-weight: 600;
}

.inv--balon-aer .inv-program__title {
    font-weight: 600;
    letter-spacing: .14em;
}

.inv--balon-aer .inv-family__names {
    font-weight: 500;
}

.inv--balon-aer .inv-monogram {
    border: 0;
    background: var(--balloon-warm);
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 0 0 5px var(--inv-surface), 0 0 0 6px color-mix(in srgb, var(--inv-ornament) 60%, transparent);
}

.inv--balon-aer .inv-envelope__letter {
    font-size: 1.9rem;
}

.inv--balon-aer.inv--dark {
    --hero-halo: none;
    --cloud-fill: color-mix(in srgb, var(--inv-ornament) 22%, var(--inv-surface));
    --names-shadow: none;
    --card-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    --seal-color: var(--inv-bg);
}

/* ---------- Curcubeu: a boho pastel rainbow with a rising sun and clouds at its feet; its colours run through the card ---------- */

.inv--curcubeu {
    --f-display: "DM Serif Display", Georgia, serif;
    --f-body: "Outfit", "Segoe UI", sans-serif;
    --f-names: "DM Serif Display", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.8rem, 15cqi, 5.4rem);
    --names-line: 1.05;
    --names-spacing: -.01em;
    --names-color: var(--inv-text);
    --names-shadow: none;
    --kicker-font: "Outfit", sans-serif;
    --kicker-size: .68rem;
    --kicker-weight: 500;
    --kicker-spacing: .32em;
    --kicker-color: var(--inv-muted);
    --date-font: "Outfit", sans-serif;
    --date-size: .86rem;
    --date-weight: 500;
    --date-spacing: .3em;
    --heading-font: "DM Serif Display", serif;
    --heading-size: 2rem;
    --heading-weight: 400;
    --heading-style: italic;
    --label-weight: 500;
    --label-spacing: .28em;
    --text-display-font: "Outfit", sans-serif;
    --message-style: normal;
    --message-size: 1.08rem;
    --family-font: "DM Serif Display", serif;
    --family-size: 1.2rem;
    --body-weight: 300;
    --hero-pad: 64px 10px 92px;
    --hero-halo: none;
    --hero-content-pad: 12px 10px;
    --card-bg: var(--inv-surface);
    --card-radius: 28px;
    --card-shadow: 0 26px 60px -40px color-mix(in srgb, var(--inv-primary) 50%, transparent);
    --card-pad: 30px 24px 46px;
    --box-bg: color-mix(in srgb, var(--inv-accent) 30%, var(--inv-surface));
    --box-border: 0 solid transparent;
    --box-radius: 18px;
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-width: min(74%, 280px);
    --photo-ratio: 4 / 5;
    --photo-radius: 999px 999px 18px 18px;
    --photo-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 11px var(--rb5), 0 0 0 13px var(--inv-surface), 0 0 0 17px var(--rb4),
        0 0 0 19px var(--inv-surface), 0 0 0 23px var(--rb3), 0 0 0 25px var(--inv-surface), 0 0 0 29px var(--rb2),
        0 0 0 31px var(--inv-surface), 0 0 0 35px var(--rb1);
    --monogram-font: "DM Serif Display", serif;
    --closing-font: "DM Serif Display", serif;
    --closing-size: 2.3rem;
    --button-font: "Outfit", sans-serif;
    /* the rainbow: warm boho pastels, softened towards the palette background */
    --rb1: color-mix(in srgb, #E39A8C 82%, var(--inv-bg));
    --rb2: color-mix(in srgb, #F0B98E 82%, var(--inv-bg));
    --rb3: color-mix(in srgb, #EDD38A 82%, var(--inv-bg));
    --rb4: color-mix(in srgb, #AFCBA6 82%, var(--inv-bg));
    --rb5: color-mix(in srgb, #9FBEDB 82%, var(--inv-bg));
    --rb-sun: color-mix(in srgb, #F3C77E 75%, var(--inv-bg));
    --rainbow: radial-gradient(circle farthest-side at 50% 100%,
        var(--rb-sun) 0 27%, transparent 27.6% 48.4%,
        var(--rb5) 49% 57.4%, transparent 58% 59.4%,
        var(--rb4) 60% 68.4%, transparent 69% 70.4%,
        var(--rb3) 71% 79.4%, transparent 80% 81.4%,
        var(--rb2) 82% 90.4%, transparent 91% 92.4%,
        var(--rb1) 93% 99.4%, transparent 100%);
    --cloud-mask: url(../../img/invitations/ornaments/baptism-cloudlet.svg);
    --env-bg: radial-gradient(circle at 50% 100%, var(--rb3) 0 60px, transparent 61px), var(--inv-bg);
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface));
    --env-front: linear-gradient(170deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--rb2) 55%, var(--inv-accent)), var(--inv-accent));
    --env-radius: 16px;
    --seal-fill: radial-gradient(circle, var(--rb1) 0 44%, var(--rb2) 45% 60%, var(--rb3) 61% 76%, var(--rb4) 77%);
    --seal-color: #fff;
}

.inv--curcubeu .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 40% at 50% 26%, color-mix(in srgb, var(--rb3) 22%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 40%, var(--inv-bg)) 1400px, var(--inv-bg));
}

/* The rainbow itself, drawn with CSS so each arc keeps its own colour. */
.inv--curcubeu .orn--hero {
    position: relative;
    display: block;
    width: min(86cqi, 340px);
    max-width: none;
    aspect-ratio: 2;
    margin: 0 auto 38px;
    background: var(--rainbow);
    -webkit-mask: none;
    mask: none;
}

/* Clouds at both feet: an outline layer and a white layer, each with two cloud masks. */
.inv--curcubeu .orn--hero::before,
.inv--curcubeu .orn--hero::after {
    content: "";
    position: absolute;
    left: -34px;
    right: -34px;
    bottom: -30px;
    height: 100px;
    pointer-events: none;
}

.inv--curcubeu .orn--hero::before {
    background: color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-muted));
    opacity: .55;
    -webkit-mask: var(--cloud-mask) left -3px bottom -3px / calc(40% + 6px) auto no-repeat, var(--cloud-mask) right -3px bottom -3px / calc(40% + 6px) auto no-repeat;
    mask: var(--cloud-mask) left -3px bottom -3px / calc(40% + 6px) auto no-repeat, var(--cloud-mask) right -3px bottom -3px / calc(40% + 6px) auto no-repeat;
}

.inv--curcubeu .orn--hero::after {
    background: linear-gradient(180deg, var(--inv-surface) 55%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)));
    -webkit-mask: var(--cloud-mask) left bottom / 40% auto no-repeat, var(--cloud-mask) right bottom / 40% auto no-repeat;
    mask: var(--cloud-mask) left bottom / 40% auto no-repeat, var(--cloud-mask) right bottom / 40% auto no-repeat;
}

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

/* Five rainbow dots under the name. */
.inv--curcubeu .orn--hero-divider,
.inv--curcubeu .orn--divider {
    display: block;
    width: 112px;
    max-width: none;
    aspect-ratio: auto;
    height: 12px;
    -webkit-mask: none;
    mask: none;
    background:
        radial-gradient(circle, var(--rb1) 0 5px, transparent 5.6px) 0 50% / 20% 100% no-repeat,
        radial-gradient(circle, var(--rb2) 0 5px, transparent 5.6px) 25% 50% / 20% 100% no-repeat,
        radial-gradient(circle, var(--rb3) 0 5px, transparent 5.6px) 50% 50% / 20% 100% no-repeat,
        radial-gradient(circle, var(--rb4) 0 5px, transparent 5.6px) 75% 50% / 20% 100% no-repeat,
        radial-gradient(circle, var(--rb5) 0 5px, transparent 5.6px) 100% 50% / 20% 100% no-repeat;
}

.inv--curcubeu .orn--hero-divider {
    margin: 20px auto 0;
}

.inv--curcubeu .inv-hero__date {
    margin-top: 18px;
    color: var(--inv-primary);
}

.inv--curcubeu .inv-hero__place {
    font-weight: 400;
    letter-spacing: .22em;
}

/* A small rainbow sits on the card's top edge, smaller ones under the headings. */
.inv--curcubeu .orn--card-top,
.inv--curcubeu .orn--heading {
    display: block;
    max-width: none;
    aspect-ratio: 2;
    background: var(--rainbow);
    -webkit-mask: none;
    mask: none;
}

.inv--curcubeu .orn--card-top {
    width: 110px;
    margin: -8px auto 26px;
}

.inv--curcubeu .orn--heading {
    width: 38px;
    margin: -2px auto 22px;
}

/* Each box wears one colour of the rainbow on its top edge. */
.inv--curcubeu .inv-family__item,
.inv--curcubeu .inv-countdown > div,
.inv--curcubeu .inv-program__item {
    box-shadow: inset 0 5px 0 var(--rb-box, var(--rb3));
}

.inv--curcubeu .inv-family__item:nth-child(2n) { --rb-box: var(--rb5); }
.inv--curcubeu .inv-family__item:nth-child(2n + 1) { --rb-box: var(--rb1); }
.inv--curcubeu .inv-countdown > div:nth-child(1) { --rb-box: var(--rb1); }
.inv--curcubeu .inv-countdown > div:nth-child(2) { --rb-box: var(--rb2); }
.inv--curcubeu .inv-countdown > div:nth-child(3) { --rb-box: var(--rb4); }
.inv--curcubeu .inv-countdown > div:nth-child(4) { --rb-box: var(--rb5); }
.inv--curcubeu .inv-program__item:nth-child(4n + 1) { --rb-box: var(--rb1); }
.inv--curcubeu .inv-program__item:nth-child(4n + 2) { --rb-box: var(--rb3); }
.inv--curcubeu .inv-program__item:nth-child(4n + 3) { --rb-box: var(--rb4); }
.inv--curcubeu .inv-program__item:nth-child(4n) { --rb-box: var(--rb5); }

.inv--curcubeu .inv-photo {
    padding-block: 36px;
}

.inv--curcubeu .inv-when__date {
    font-size: 2rem;
}

.inv--curcubeu .inv-countdown span {
    font-weight: 400;
    font-size: 2.1rem;
}

.inv--curcubeu .inv-program__time {
    font-weight: 400;
}

.inv--curcubeu .inv-program__index {
    border: 0;
    background: var(--rb-box, var(--rb3));
    color: var(--inv-text);
    font-weight: 600;
}

.inv--curcubeu .inv-program__title {
    font-weight: 600;
    letter-spacing: .16em;
}

.inv--curcubeu .inv-monogram {
    border: 0;
    background: var(--inv-surface);
    color: var(--inv-text);
    box-shadow: inset 0 0 0 4px var(--rb1), inset 0 0 0 6px var(--inv-surface), inset 0 0 0 10px var(--rb3), inset 0 0 0 12px var(--inv-surface), inset 0 0 0 16px var(--rb5);
}

.inv--curcubeu .inv-envelope__letter {
    font-size: 2rem;
}

/* ---------- Iepuraș: a bunny on a sunny disc, a spring meadow of daisies, butterflies, a bunny peeking over the photo ---------- */

.inv--iepuras {
    --f-display: "Playfair Display", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Dancing Script", "Great Vibes", cursive;
    --names-weight: 600;
    --names-size: clamp(3.2rem, 17cqi, 5.8rem);
    --names-line: 1.1;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --kicker-font: "Raleway", sans-serif;
    --kicker-size: .68rem;
    --kicker-weight: 700;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-muted);
    --date-font: "Raleway", sans-serif;
    --date-size: .86rem;
    --date-weight: 700;
    --date-spacing: .3em;
    --heading-font: "Playfair Display", serif;
    --heading-size: 1.9rem;
    --heading-weight: 400;
    --heading-style: italic;
    --label-weight: 700;
    --label-spacing: .26em;
    --text-display-font: "Playfair Display", serif;
    --message-size: 1.16rem;
    --family-font: "Playfair Display", serif;
    --family-size: 1.14rem;
    --body-weight: 500;
    --hero-pad: 56px 10px 170px;
    --hero-halo: none;
    --hero-content-pad: 16px 12px;
    --card-bg: var(--inv-surface);
    --card-radius: 30px;
    --card-shadow: 0 26px 56px -38px color-mix(in srgb, var(--inv-primary) 55%, transparent);
    --card-pad: 34px 24px 20px;
    --box-bg: color-mix(in srgb, var(--inv-accent) 45%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 45%, transparent);
    --box-radius: 22px;
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-width: min(76%, 290px);
    --photo-ratio: 4 / 5;
    --photo-radius: 999px 999px 24px 24px;
    --photo-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 9px color-mix(in srgb, var(--inv-ornament) 70%, transparent), 0 24px 44px -26px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    --monogram-font: "Dancing Script", cursive;
    --closing-font: "Dancing Script", cursive;
    --closing-size: 2.7rem;
    --button-font: "Raleway", sans-serif;
    --bunny: color-mix(in srgb, color-mix(in srgb, var(--inv-muted) 75%, var(--inv-ornament)) 58%, var(--inv-surface));
    --meadow: linear-gradient(0deg, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-ornament)), var(--inv-ornament) 55%, color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-surface)));
    --daisy: url(../../img/invitations/ornaments/baptism-daisy.svg);
    --env-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-bg)), var(--inv-bg) 70%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface));
    --env-front: linear-gradient(170deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 65%, var(--inv-ornament)), var(--inv-accent));
    --env-radius: 18px;
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-ornament) 45%, #fff), var(--inv-ornament) 62%, color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-primary)));
    --seal-color: #fff;
}

.inv--iepuras .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 36% at 50% 0, color-mix(in srgb, var(--inv-accent) 80%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 35%, var(--inv-bg)) 1300px, var(--inv-bg));
}

/* The bunny sits in front of a soft sunny disc. */
.inv--iepuras .inv-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 26px;
    left: 50%;
    width: 176px;
    aspect-ratio: 1;
    margin-left: -88px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-surface) 80%, var(--inv-accent)) 0 62%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)) 63%);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--inv-accent) 45%, transparent);
    pointer-events: none;
}

.inv--iepuras .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-bunny.svg);
    --orn-ratio: 200 / 222;
    --orn-width: 128px;
    --orn-max: 128px;
    --orn-margin: 0 auto 4px;
    --orn-fill: var(--bunny);
}

.inv--iepuras .inv-hero__kicker {
    margin: 22px 0 8px;
}

/* Three daisies: small, big, small. */
.inv--iepuras .orn--hero-divider {
    display: block;
    width: 88px;
    max-width: none;
    aspect-ratio: auto;
    height: 28px;
    margin: 14px auto 0;
    background: var(--inv-ornament);
    -webkit-mask: var(--daisy) left center / 19px no-repeat, var(--daisy) center / 28px no-repeat, var(--daisy) right center / 19px no-repeat;
    mask: var(--daisy) left center / 19px no-repeat, var(--daisy) center / 28px no-repeat, var(--daisy) right center / 19px no-repeat;
}

.inv--iepuras .inv-hero__date {
    margin-top: 16px;
    color: var(--inv-primary);
}

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

/* A meadow at the bottom of the first screen: tall daisies in both corners and a strip of grass. */
.inv--iepuras .inv-hero__corner--bl,
.inv--iepuras .inv-hero__corner--br {
    display: block;
    max-width: 168px;
    --hero-corner-image: url(../../img/invitations/ornaments/baptism-meadow.svg);
    --hero-corner-ratio: 150 / 156;
    --hero-corner-size: 42%;
    --hero-corner-inset: 0;
    --hero-corner-opacity: .9;
    --hero-corner-fill: var(--meadow);
}

.inv--iepuras .inv-hero__corner--bl { left: -12px; transform: none; }
.inv--iepuras .inv-hero__corner--br { right: -12px; transform: scaleX(-1); }

.inv--iepuras .inv-hero::before {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    bottom: 0;
    height: 46px;
    background: color-mix(in srgb, var(--inv-primary) 45%, var(--inv-ornament));
    opacity: .6;
    -webkit-mask: url(../../img/invitations/ornaments/baptism-meadow-row.svg) center bottom / 320px 52px repeat-x;
    mask: url(../../img/invitations/ornaments/baptism-meadow-row.svg) center bottom / 320px 52px repeat-x;
    pointer-events: none;
}

.inv--iepuras .inv-hero__scroll {
    bottom: 64px;
}

/* Butterflies playing on the spot. */
.inv--iepuras .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/baptism-butterfly.svg);
    --amb-ratio: 40 / 34;
    --amb-size: 24px;
    --amb-anim: baptism-flutter;
    --amb-duration: 15s;
    --amb-opacity: .85;
}

.inv--iepuras .inv__ambient i {
    top: var(--amb-y);
    animation-timing-function: ease-in-out;
}

.inv--iepuras .inv__ambient i:nth-child(n + 6) {
    display: none;
}

.inv--iepuras .inv__ambient i:nth-child(2n) {
    background: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-ornament));
}

.inv--iepuras .inv__ambient i:nth-child(1) { left: 10%; --amb-y: 12%; }
.inv--iepuras .inv__ambient i:nth-child(2) { left: 80%; --amb-y: 18%; scale: .8; }
.inv--iepuras .inv__ambient i:nth-child(3) { left: 84%; --amb-y: 48%; scale: .7; }
.inv--iepuras .inv__ambient i:nth-child(4) { left: 6%; --amb-y: 56%; scale: .65; }
.inv--iepuras .inv__ambient i:nth-child(5) { left: 64%; --amb-y: 6%; scale: .55; }

@keyframes baptism-flutter {
    0%, 100% { transform: translate(0, 0) rotate(-10deg); }
    25% { transform: translate(16px, -12px) rotate(8deg); }
    50% { transform: translate(6px, -26px) rotate(-4deg); }
    75% { transform: translate(-14px, -10px) rotate(10deg); }
}

.inv--iepuras .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-butterfly.svg);
    --orn-ratio: 40 / 34;
    --orn-width: 38px;
    --orn-margin: 0 auto 22px;
    --orn-fill: var(--inv-ornament);
    --orn-transform: rotate(-8deg);
}

.inv--iepuras .orn--heading {
    display: block;
    --orn-image: var(--daisy);
    --orn-ratio: 1;
    --orn-width: 24px;
    --orn-margin: -4px auto 22px;
    --orn-fill: var(--inv-ornament);
}

.inv--iepuras .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-meadow-row.svg);
    --orn-ratio: 320 / 52;
    --orn-width: 82%;
    --orn-max: 300px;
    --orn-fill: color-mix(in srgb, var(--inv-primary) 45%, var(--inv-ornament));
}

/* Grass grows along the bottom edge of the card. */
.inv--iepuras .orn--card-bottom {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-meadow-row.svg);
    --orn-ratio: 320 / 52;
    --orn-width: 100%;
    --orn-max: 420px;
    --orn-margin: 18px auto 0;
    --orn-fill: color-mix(in srgb, var(--inv-primary) 45%, var(--inv-ornament));
    --orn-opacity: .75;
}

/* A bunny peeks over the top of the photo. */
.inv--iepuras .inv-photo {
    padding-top: 84px;
}

.inv--iepuras .inv-photo::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 16px;
    left: 50%;
    width: 124px;
    aspect-ratio: 200 / 132;
    margin-left: -62px;
    background: var(--bunny);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-bunny-peek.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-bunny-peek.svg) center / contain no-repeat;
    pointer-events: none;
}

.inv--iepuras .inv-message p {
    font-style: italic;
}

/* Every countdown box wears a daisy on its top edge. */
.inv--iepuras .inv-countdown {
    margin-top: 12px;
}

.inv--iepuras .inv-countdown > div {
    position: relative;
    padding-top: 20px;
}

.inv--iepuras .inv-countdown > div::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    background: var(--inv-ornament);
    -webkit-mask: var(--daisy) center / contain no-repeat;
    mask: var(--daisy) center / contain no-repeat;
}

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

.inv--iepuras .inv-when__date {
    font-style: italic;
}

.inv--iepuras .inv-program__index {
    border: 0;
    background: var(--inv-ornament);
    color: var(--inv-surface);
    font-weight: 700;
}

.inv--iepuras .inv-program__title {
    font-weight: 700;
    letter-spacing: .14em;
}

.inv--iepuras .inv-monogram {
    border: 0;
    background: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface));
    font-weight: 600;
    font-size: 1.7rem;
    box-shadow: 0 0 0 5px var(--inv-surface), 0 0 0 7px color-mix(in srgb, var(--inv-ornament) 60%, transparent);
}

.inv--iepuras .inv-closing__line {
    font-style: italic;
}

.inv--iepuras .inv-envelope__letter {
    font-size: 2.3rem;
}

/* ---------- Cruciuliță: a small golden cross in an olive wreath under a fine three-lobed arch; classic, bright, traditional ---------- */

.inv--cruciulita {
    --f-display: "Gilda Display", "Cormorant Garamond", Georgia, serif;
    --f-body: "Lora", Georgia, serif;
    --f-names: "Alex Brush", "Great Vibes", cursive;
    --names-weight: 400;
    --names-size: clamp(3rem, 14.8cqi, 4.6rem);
    --names-line: 1.14;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --kicker-font: "Gilda Display", Georgia, serif;
    --kicker-size: .74rem;
    --kicker-weight: 400;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-muted);
    --date-font: "Gilda Display", Georgia, serif;
    --date-size: 1.04rem;
    --date-weight: 400;
    --date-spacing: .3em;
    --heading-font: "Gilda Display", Georgia, serif;
    --heading-size: 1.72rem;
    --heading-weight: 400;
    --label-font: "Lora", Georgia, serif;
    --label-size: .66rem;
    --label-weight: 600;
    --label-spacing: .3em;
    --text-display-font: "Lora", Georgia, serif;
    --message-size: 1.12rem;
    --family-font: "Gilda Display", Georgia, serif;
    --family-size: 1.14rem;
    --body-weight: 400;
    /* the arch is as wide as the first screen allows (hero side padding 8px + column padding 16px) */
    --arch-w: min(100cqi - 48px, 400px);
    --arch-y: calc(var(--arch-w) * .6 - 1px);
    --trace: color-mix(in srgb, var(--inv-ornament) 64%, var(--inv-primary));
    /* the cross stays golden in every palette (decoration only) */
    --gold: linear-gradient(118deg, #A67E3A, #E6CE93 36%, #C6A057 58%, #9C7634 94%);
    --hero-pad: 40px 8px 60px;
    /* warm light around the cross; it stays inside the arch */
    --hero-halo: radial-gradient(ellipse 50% calc(var(--arch-w) * .335) at 50% calc(var(--arch-w) * .335), color-mix(in srgb, var(--inv-ornament) 24%, transparent), transparent);
    --hero-content-pad: calc(var(--arch-w) * .218) 30px 30px;
    --card-bg: var(--inv-surface);
    --card-radius: 3px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-ornament) 62%, transparent);
    --card-shadow: 0 36px 50px -40px color-mix(in srgb, var(--inv-primary) 50%, transparent);
    --card-pad: 58px 26px 54px;
    --card-pad-wide: 70px 54px 62px;
    --box-bg: color-mix(in srgb, var(--inv-bg) 62%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 58%, transparent);
    --box-radius: 2px;
    --box-shadow: inset 0 0 0 3px var(--inv-surface), inset 0 0 0 4px color-mix(in srgb, var(--inv-ornament) 34%, transparent);
    --divider-rule-display: none;
    --photo-width: min(66%, 240px);
    --photo-ratio: 4 / 5;
    --photo-radius: 50%;
    --photo-shadow: 0 0 0 6px var(--inv-surface), 0 0 0 7px var(--trace), 0 0 0 12px var(--inv-surface),
        0 0 0 13px color-mix(in srgb, var(--inv-ornament) 50%, transparent), 0 30px 46px -30px color-mix(in srgb, var(--inv-primary) 55%, transparent);
    --monogram-font: "Gilda Display", Georgia, serif;
    --closing-font: "Alex Brush", cursive;
    --closing-size: 3rem;
    --button-font: "Lora", Georgia, serif;
    --button-radius: 2px;
    --button-transform: uppercase;
    --button-spacing: .18em;
    --env-bg: radial-gradient(circle at 50% 36%, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 55%, var(--inv-bg)) 78%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 72%, var(--inv-surface));
    --env-front: linear-gradient(165deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 82%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 66%, var(--inv-ornament)), color-mix(in srgb, var(--inv-accent) 88%, var(--inv-surface)));
    --env-radius: 4px;
    --seal-fill: var(--gold);
    --seal-color: #fff;
}

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

.inv--cruciulita .inv-hero__content {
    width: var(--arch-w);
}

/* The arch: three lobes, two fine lines, small capitals; the columns run down beside the texts and fade out. */
.inv--cruciulita .inv-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 -14px;
    background: linear-gradient(180deg, var(--trace) 0, var(--trace) 58%, transparent 96%);
    -webkit-mask:
        url(../../img/invitations/ornaments/baptism-cross-arch.svg) center top / 100% auto no-repeat,
        linear-gradient(#000, #000) calc(3% - .7px) var(--arch-y) / 1.5px 100% no-repeat,
        linear-gradient(#000, #000) calc(97% + .7px) var(--arch-y) / 1.5px 100% no-repeat,
        linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .62)) calc(5% - .45px) var(--arch-y) / 1px 100% no-repeat,
        linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .62)) calc(95% + .45px) var(--arch-y) / 1px 100% no-repeat;
    mask:
        url(../../img/invitations/ornaments/baptism-cross-arch.svg) center top / 100% auto no-repeat,
        linear-gradient(#000, #000) calc(3% - .7px) var(--arch-y) / 1.5px 100% no-repeat,
        linear-gradient(#000, #000) calc(97% + .7px) var(--arch-y) / 1.5px 100% no-repeat,
        linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .62)) calc(5% - .45px) var(--arch-y) / 1px 100% no-repeat,
        linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .62)) calc(95% + .45px) var(--arch-y) / 1px 100% no-repeat;
    pointer-events: none;
}

/* A fine glory fills the middle lobe; it starts from the heart of the cross. */
.inv--cruciulita .inv-hero__content::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: calc(var(--arch-w) * .335);
    width: calc(var(--arch-w) * .57);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: var(--inv-ornament);
    opacity: .6;
    -webkit-mask: url(../../img/invitations/ornaments/baptism-cross-glory.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-cross-glory.svg) center / contain no-repeat;
    pointer-events: none;
}

/* The emblem: the wreath takes the palette, the cross stays golden. */
.inv--cruciulita .orn--hero {
    position: relative;
    display: block;
    width: calc(var(--arch-w) * .52);
    max-width: none;
    aspect-ratio: 240 / 172;
    margin: 0 auto;
    background: none;
    -webkit-mask: none;
    mask: none;
}

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

.inv--cruciulita .orn--hero::before {
    inset: 0;
    background: linear-gradient(180deg, var(--inv-ornament), var(--trace));
    -webkit-mask: url(../../img/invitations/ornaments/baptism-cross-wreath.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-cross-wreath.svg) center / contain no-repeat;
}

.inv--cruciulita .orn--hero::after {
    left: 50%;
    top: 3%;
    width: 42%;
    aspect-ratio: 120 / 152;
    transform: translateX(-50%);
    background: var(--gold);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-cross.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-cross.svg) center / contain no-repeat;
}

.inv--cruciulita .inv-hero__kicker {
    margin: 16px 0 8px;
}

.inv--cruciulita .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-cross-divider.svg);
    --orn-ratio: 400 / 44;
    --orn-width: calc(var(--arch-w) * .66);
    --orn-max: none;
    --orn-margin: 10px auto 0;
    --orn-fill: var(--trace);
}

.inv--cruciulita .inv-hero__date {
    margin-top: 14px;
    color: var(--inv-primary);
}

.inv--cruciulita .inv-hero__place {
    font-size: .7rem;
    letter-spacing: .2em;
}

.inv--cruciulita .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/baptism-cross-corner.svg);
    --corner-size: 66px;
    --corner-max: 66px;
    --corner-inset: 9px;
    --corner-fill: var(--trace);
    --corner-opacity: 1;
}

.inv--cruciulita .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-cross-sprig.svg);
    --orn-ratio: 132 / 28;
    --orn-width: 104px;
    --orn-margin: -10px auto 22px;
    --orn-fill: var(--trace);
}

.inv--cruciulita .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-cross-divider.svg);
    --orn-ratio: 400 / 44;
    --orn-width: 92%;
    --orn-max: 330px;
    --orn-fill: var(--trace);
}

.inv--cruciulita .inv-photo {
    padding-block: 34px;
}

.inv--cruciulita .inv-family__item {
    padding: 18px 14px;
}

.inv--cruciulita .inv-when__date {
    font-size: 1.9rem;
}

.inv--cruciulita .inv-when__time {
    letter-spacing: .24em;
}

.inv--cruciulita .inv-countdown span {
    font-size: 1.75rem;
}

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

.inv--cruciulita .inv-program__index {
    border-color: var(--trace);
    font-family: "Gilda Display", Georgia, serif;
}

.inv--cruciulita .inv-program__title {
    font-size: .76rem;
    letter-spacing: .2em;
}

.inv--cruciulita .inv-program__venue {
    font-family: "Gilda Display", Georgia, serif;
    font-size: 1.2rem;
}

.inv--cruciulita .inv-dress__text {
    font-family: "Gilda Display", Georgia, serif;
}

.inv--cruciulita .inv-monogram {
    border-color: var(--trace);
    font-size: 1.25rem;
    box-shadow: inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 55%, transparent);
}

.inv--cruciulita .inv-envelope__letter {
    font-size: 2.3rem;
}

.inv--cruciulita.inv--dark {
    --gold: linear-gradient(118deg, #D2B36E, #F7E8BE 36%, #E2C886 58%, #C5A45C 94%);
    --seal-color: var(--inv-bg);
    --card-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 82%, var(--inv-ornament)), var(--inv-accent));
}

/* ---------- Bărcuță: a folded paper boat bobbing on layered waves, sun, clouds and gulls above; the card floats on the sea ---------- */

.inv--barcuta {
    --f-display: "Nunito", "Quicksand", sans-serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Nunito", "Quicksand", sans-serif;
    --names-weight: 700;
    --names-size: clamp(3rem, 15cqi, 5.2rem);
    --names-line: 1.06;
    --names-spacing: -.015em;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --kicker-size: .7rem;
    --kicker-weight: 700;
    --kicker-spacing: .28em;
    --date-size: .92rem;
    --date-weight: 700;
    --date-spacing: .28em;
    --heading-size: 1.62rem;
    --heading-weight: 700;
    --label-weight: 700;
    --label-spacing: .24em;
    --text-display-font: "Nunito", "Segoe UI", sans-serif;
    --message-style: normal;
    --message-size: 1.1rem;
    --family-size: 1.08rem;
    --body-weight: 400;
    --paper: var(--inv-surface);
    --fold: var(--inv-primary);
    --sea: color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-primary));
    --wave-back: var(--inv-ornament);
    --line: var(--sea);
    --cloud-fill: var(--inv-surface);
    --gull: color-mix(in srgb, var(--inv-primary) 62%, var(--inv-ornament));
    --buoy: color-mix(in srgb, var(--inv-primary) 72%, var(--inv-ornament));
    --ring: color-mix(in srgb, var(--inv-ornament) 62%, var(--inv-surface));
    /* a warm sun in every light palette (decoration only) */
    --sun: color-mix(in srgb, #F7CB66 80%, var(--inv-ornament));
    --hero-pad: 134px 8px 178px;
    --hero-halo: none;
    --hero-content-pad: 34px 16px 16px;
    --card-bg: var(--inv-surface);
    --card-radius: 30px;
    --card-shadow: 0 36px 52px -42px color-mix(in srgb, var(--inv-primary) 55%, transparent);
    --card-pad: 40px 22px 0;
    --card-pad-wide: 54px 46px 0;
    --box-bg: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface));
    --box-border: 0 solid transparent;
    --box-radius: 22px;
    --box-shadow: none;
    --divider-rule-display: none;
    --photo-width: min(62%, 230px);
    --photo-ratio: 1;
    --photo-radius: 50%;
    --photo-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 45%, var(--inv-ornament)), 0 0 0 19px var(--ring),
        0 0 0 21px color-mix(in srgb, var(--inv-primary) 32%, var(--inv-ornament)), 0 22px 34px -8px color-mix(in srgb, var(--inv-primary) 38%, transparent);
    --closing-size: 2.2rem;
    --env-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 46%, var(--inv-bg)), var(--inv-bg) 74%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface));
    --env-front: linear-gradient(170deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 68%, var(--inv-ornament)), var(--inv-accent));
    --env-radius: 16px;
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--sea) 45%, #fff), var(--sea) 60%, color-mix(in srgb, var(--sea) 72%, var(--inv-primary)));
    --seal-color: #fff;
}

.inv--barcuta .inv__backdrop {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-bg)) 0, color-mix(in srgb, var(--inv-ornament) 13%, var(--inv-bg)) 180px, var(--inv-bg) 420px);
}

/* Far waves, behind the boat. They run across the whole page; the invitation clips them. */
.inv--barcuta .inv-hero::before {
    content: "";
    position: absolute;
    left: -50vw;
    right: -50vw;
    bottom: 12px;
    height: 104px;
    background: var(--wave-back);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-waves-back.svg) center top / 240px 104px repeat-x;
    mask: url(../../img/invitations/ornaments/baptism-waves-back.svg) center top / 240px 104px repeat-x;
    pointer-events: none;
}

/* Near waves, in front of the boat. The sea goes on under the card and fades away. */
.inv--barcuta .inv-hero::after {
    content: "";
    position: absolute;
    left: -50vw;
    right: -50vw;
    bottom: -260px;
    height: 324px;
    background: linear-gradient(180deg, var(--sea) 0, var(--sea) 74px, color-mix(in srgb, var(--sea) 45%, var(--inv-bg)) 190px, var(--inv-bg));
    -webkit-mask: url(../../img/invitations/ornaments/baptism-waves-front.svg) center top / 240px 64px repeat-x, linear-gradient(#000, #000) 0 63px / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-waves-front.svg) center top / 240px 64px repeat-x, linear-gradient(#000, #000) 0 63px / 100% 100% no-repeat;
    pointer-events: none;
}

/* The paper boat: white paper, the folds shaded with the palette; it bobs gently (the only moving thing). */
.inv--barcuta .inv-hero__frame {
    display: block;
    inset: auto auto 33px 50%;
    width: 150px;
    aspect-ratio: 200 / 144;
    margin-left: -75px;
    border: 0;
    border-radius: 0;
    background: var(--paper);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-boat.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-boat.svg) center / contain no-repeat;
    transform-origin: 50% 92%;
    animation: baptism-bob 8s ease-in-out infinite;
}

.inv--barcuta .inv-hero__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--fold);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-boat-folds.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-boat-folds.svg) center / contain no-repeat;
}

@keyframes baptism-bob {
    0%, 100% { transform: translateY(1px) rotate(-3deg); }
    50% { transform: translateY(-4px) rotate(2.5deg); }
}

/* The sky: a cloud on the left, the sun on the right with a small cloud in front of it, one more cloud low on the horizon. */
.inv--barcuta .inv-hero__corner {
    display: block;
    transform: none;
    --hero-corner-image: url(../../img/invitations/ornaments/baptism-cloudlet.svg);
    --hero-corner-ratio: 120 / 72;
    --hero-corner-fill: var(--cloud-fill);
    --hero-corner-opacity: .96;
}

.inv--barcuta .inv-hero__corner--tl {
    top: 58px;
    left: -3%;
    width: 33%;
    max-width: 150px;
}

.inv--barcuta .inv-hero__corner--tr {
    top: 44px;
    right: 9%;
    width: 60px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--sun) 55%, #fff), var(--sun) 72%);
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--sun) 30%, transparent), 0 0 0 21px color-mix(in srgb, var(--sun) 14%, transparent);
    -webkit-mask: none;
    mask: none;
    opacity: 1;
}

.inv--barcuta .inv-hero__corner--bl {
    top: 86px;
    bottom: auto;
    left: auto;
    right: 20%;
    width: 21%;
    max-width: 96px;
}

.inv--barcuta .inv-hero__corner--br {
    bottom: 118px;
    right: -5%;
    width: 24%;
    max-width: 110px;
    opacity: .8;
}

/* Two gulls keep close to the texts. */
.inv--barcuta .inv-hero__content::before,
.inv--barcuta .inv-hero__content::after {
    content: "";
    position: absolute;
    aspect-ratio: 60 / 24;
    background: var(--gull);
    -webkit-mask: url(../../img/invitations/ornaments/baptism-gull.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/baptism-gull.svg) center / contain no-repeat;
    pointer-events: none;
}

.inv--barcuta .inv-hero__content::before {
    top: 4px;
    left: 16%;
    width: 34px;
    transform: rotate(-8deg);
}

.inv--barcuta .inv-hero__content::after {
    top: 16px;
    right: 18%;
    width: 22px;
    opacity: .8;
    transform: rotate(6deg);
}

.inv--barcuta .inv-hero__kicker {
    margin: 18px 0 12px;
}

.inv--barcuta .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-wave-line.svg);
    --orn-ratio: 120 / 16;
    --orn-width: 84px;
    --orn-margin: 14px auto 0;
    --orn-fill: var(--line);
}

.inv--barcuta .inv-hero__date {
    margin-top: 14px;
    color: var(--inv-primary);
}

.inv--barcuta .inv-hero__place {
    font-weight: 700;
    letter-spacing: .16em;
}

.inv--barcuta .inv-hero__scroll {
    bottom: 4px;
}

.inv--barcuta .inv-hero__scroll span {
    border-color: var(--paper);
}

/* Waves along the bottom edge of the card. */
.inv--barcuta .orn--card-bottom {
    display: block;
    width: auto;
    max-width: none;
    height: 62px;
    aspect-ratio: auto;
    margin: 20px -22px 0;
    border-radius: 0 0 30px 30px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sea) 70%, var(--inv-surface)), var(--sea));
    -webkit-mask: url(../../img/invitations/ornaments/baptism-waves-front.svg) center top / 240px 64px repeat-x;
    mask: url(../../img/invitations/ornaments/baptism-waves-front.svg) center top / 240px 64px repeat-x;
}

@container (min-width: 560px) {
    .inv--barcuta .orn--card-bottom {
        margin-inline: -46px;
    }
}

.inv--barcuta .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-anchor.svg);
    --orn-ratio: 40 / 44;
    --orn-width: 24px;
    --orn-margin: -10px auto 20px;
    --orn-fill: var(--line);
}

.inv--barcuta .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/baptism-wave-divider.svg);
    --orn-ratio: 320 / 50;
    --orn-width: 86%;
    --orn-max: 300px;
    --orn-fill: var(--line);
}

/* The photo looks out through a porthole: a thick ring with rivets and a glint on the glass. */
.inv--barcuta .inv-photo {
    padding-block: 46px;
}

.inv--barcuta .inv-photo__frame {
    position: relative;
}

.inv--barcuta .inv-photo__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 38%);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .18);
}

.inv--barcuta .inv-photo::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(min(62%, 230px) + 30px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    --rivet: radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 50%, var(--inv-ornament)) 0 2.4px, transparent 3px);
    background:
        var(--rivet) 100% 50% / 8px 8px no-repeat, var(--rivet) 85.36% 85.36% / 8px 8px no-repeat,
        var(--rivet) 50% 100% / 8px 8px no-repeat, var(--rivet) 14.64% 85.36% / 8px 8px no-repeat,
        var(--rivet) 0 50% / 8px 8px no-repeat, var(--rivet) 14.64% 14.64% / 8px 8px no-repeat,
        var(--rivet) 50% 0 / 8px 8px no-repeat, var(--rivet) 85.36% 14.64% / 8px 8px no-repeat;
    pointer-events: none;
}

.inv--barcuta .inv-family__item {
    padding: 16px 14px;
}

.inv--barcuta .inv-family__names {
    font-weight: 700;
}

.inv--barcuta .inv-when__date {
    font-size: 1.8rem;
}

.inv--barcuta .inv-when__time {
    font-weight: 700;
    letter-spacing: .22em;
}

/* Countdown: four small portholes. */
.inv--barcuta .inv-countdown {
    gap: 8px;
}

.inv--barcuta .inv-countdown > div {
    display: grid;
    align-content: center;
    aspect-ratio: 1;
    padding: 4px;
    border: 4px solid var(--ring);
    border-radius: 50%;
    background: var(--inv-surface);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 32%, var(--inv-ornament)), inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 32%, var(--inv-ornament));
}

.inv--barcuta .inv-countdown span {
    font-size: 1.5rem;
}

.inv--barcuta .inv-countdown small {
    margin-top: 2px;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.inv--barcuta .inv-program__time {
    font-size: 2rem;
}

/* The step number sits in a life buoy. */
.inv--barcuta .inv-program__index {
    top: -18px;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    border: 0;
    background:
        radial-gradient(circle, var(--inv-surface) 0 10px, var(--buoy) 10.5px 11.5px, transparent 12px),
        repeating-conic-gradient(from 22.5deg, var(--buoy) 0 45deg, var(--inv-surface) 0 90deg);
    box-shadow: 0 0 0 1.5px var(--buoy);
    font-size: .74rem;
    font-weight: 700;
}

.inv--barcuta .inv-program__title {
    font-weight: 700;
    letter-spacing: .14em;
}

.inv--barcuta .inv-button {
    font-size: .8rem;
    font-weight: 700;
}

.inv--barcuta .inv-closing__line {
    font-style: normal;
    font-weight: 700;
    font-size: 1.2rem;
}

.inv--barcuta .inv-monogram {
    width: 76px;
    height: 76px;
    border: 0;
    background:
        radial-gradient(circle, var(--inv-surface) 0 22px, var(--buoy) 22.5px 24px, transparent 24.5px),
        repeating-conic-gradient(from 22.5deg, var(--buoy) 0 45deg, var(--inv-surface) 0 90deg);
    box-shadow: 0 0 0 2px var(--buoy), 0 12px 20px -10px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    font-weight: 700;
    font-size: 1.15rem;
}

.inv--barcuta .inv-envelope__letter {
    font-size: 1.9rem;
}

/* Night: the moon instead of the sun, stars in the sky, a moonlit sea. */
.inv--barcuta.inv--dark {
    --paper: color-mix(in srgb, var(--inv-text) 92%, var(--inv-ornament));
    --fold: var(--inv-bg);
    --sea: color-mix(in srgb, var(--inv-accent) 82%, var(--inv-text));
    --wave-back: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-text));
    --line: color-mix(in srgb, var(--inv-ornament) 58%, var(--inv-accent));
    --cloud-fill: color-mix(in srgb, var(--inv-accent) 86%, var(--inv-text));
    --gull: var(--inv-muted);
    --buoy: var(--inv-ornament);
    --ring: color-mix(in srgb, var(--inv-ornament) 78%, var(--inv-bg));
    --card-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    --env-bg: linear-gradient(180deg, color-mix(in srgb, #000 24%, var(--inv-bg)), var(--inv-bg) 74%);
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-text)), var(--inv-accent));
    --seal-color: var(--inv-text);
}

.inv--barcuta.inv--dark .inv__backdrop {
    background: linear-gradient(180deg, color-mix(in srgb, #000 24%, var(--inv-bg)) 0, var(--inv-bg) 460px);
}

.inv--barcuta.inv--dark .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/baptism-stardust.svg);
    --texture-size: 210px;
    --texture-opacity: .6;
    -webkit-mask: var(--texture-image) repeat 0 0 / var(--texture-size), linear-gradient(#000 0, #000 260px, transparent 520px);
    -webkit-mask-composite: source-in;
    mask: var(--texture-image) repeat 0 0 / var(--texture-size), linear-gradient(#000 0, #000 260px, transparent 520px);
    mask-composite: intersect;
}

.inv--barcuta.inv--dark .inv-hero__corner--tr {
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 55%, #fff), var(--inv-ornament) 62%);
    box-shadow: none;
    -webkit-mask: radial-gradient(circle at 26% 34%, transparent 0 45%, #000 46.5%);
    mask: radial-gradient(circle at 26% 34%, transparent 0 45%, #000 46.5%);
}

.inv--barcuta.inv--dark .inv-hero__corner--br {
    opacity: 1;
}