/* Collection "celebration": zile de naștere, majorate, aniversări, evenimente de firmă. Contract: docs/invitation-templates.md.
   Ornaments: ../../img/invitations/ornaments/celebration-*.svg, textures: ../../img/invitations/textures/celebration-*.svg.
   Every model has its own visual idea (burst of confetti, balloon bouquet, neon sign, 70s sunset, laurel medallion,
   corporate cover, conference badge, Art Deco cocktail); colours always come from the palette. */

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

.inv-c--celebration {
    --button-transform: none;
    --button-spacing: .06em;
}

/* =====================================================================================================
   Confetti: a party popper bursts above a hand-lettered name, multicolour confetti falls over a
   confetti-strewn backdrop; round photo in a candy-striped ring, dashed "party" boxes.
   ===================================================================================================== */

.inv--confetti {
    --f-display: "Poppins", "Segoe UI", sans-serif;
    --f-body: "Poppins", "Segoe UI", sans-serif;
    --f-names: "Dancing Script", cursive;
    --mix: color-mix(in srgb, var(--inv-primary) 50%, var(--inv-ornament));
    --stripes: repeating-conic-gradient(from 6deg, var(--inv-primary) 0 12deg, var(--inv-ornament) 12deg 24deg, var(--mix) 24deg 36deg);
    --names-weight: 600;
    --names-size: clamp(3.6rem, 21cqi, 6.6rem);
    --names-line: 1.12;
    --names-shadow: .04em .05em 0 color-mix(in srgb, var(--inv-ornament) 75%, transparent);
    --kicker-size: .68rem;
    --kicker-weight: 600;
    --kicker-spacing: .34em;
    --date-size: .8rem;
    --date-weight: 600;
    --date-spacing: .2em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Dancing Script", cursive;
    --heading-weight: 600;
    --heading-size: 2.6rem;
    --label-weight: 600;
    --text-display-font: "Poppins", sans-serif;
    --message-style: normal;
    --message-size: 1.04rem;
    --family-font: "Poppins", sans-serif;
    --family-size: 1rem;
    --body-weight: 400;
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 92%, transparent) 55%, transparent);
    --hero-content-pad: 18px 22px 28px;
    --card-bg: var(--inv-surface);
    --card-radius: 30px;
    --card-shadow: 0 30px 60px -34px color-mix(in srgb, var(--inv-primary) 55%, transparent);
    --box-bg: var(--inv-surface);
    --box-border: 2px dashed color-mix(in srgb, var(--inv-primary) 34%, transparent);
    --box-radius: 20px;
    --box-shadow: none;
    --button-radius: 999px;
    --divider-rule-display: none;
    --photo-width: min(82%, 300px);
    --photo-ratio: 1;
    --photo-radius: 50%;
    --photo-pad: 11px;
    --photo-bg: var(--stripes);
    --photo-inner-radius: 50%;
    --photo-shadow: 0 0 0 5px var(--inv-surface), 0 0 0 7px color-mix(in srgb, var(--inv-primary) 22%, transparent), 0 22px 40px -22px rgba(0, 0, 0, .5);
    --monogram-font: "Dancing Script", cursive;
    --closing-font: "Dancing Script", cursive;
    --closing-size: 3rem;
    --env-bg: radial-gradient(circle at 50% 40%, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg)) 75%);
    --env-fill: color-mix(in srgb, var(--inv-primary) 70%, #000);
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 88%, #fff), var(--inv-primary));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, #000), color-mix(in srgb, var(--inv-primary) 92%, #fff));
    --env-radius: 6px;
    --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) 70%, #000));
    --seal-color: color-mix(in srgb, var(--inv-text) 85%, var(--inv-ornament));
}

.inv--confetti .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 45% at 50% 0%, color-mix(in srgb, var(--inv-accent) 80%, transparent), transparent 75%),
        var(--inv-bg);
}

.inv--confetti .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/celebration-confetti.svg);
    --texture-size: 230px;
    --texture-fill: linear-gradient(135deg, var(--inv-primary), var(--inv-ornament) 50%, var(--inv-primary));
    --texture-opacity: .24;
}

.inv--confetti .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-popper.svg);
    --orn-ratio: 260 / 150;
    --orn-width: min(74cqi, 290px);
    --orn-max: 290px;
    --orn-margin: 0 auto -4px;
    --orn-fill:
        conic-gradient(at 50% 69%, transparent 0 145deg, var(--inv-primary) 145deg 215deg, transparent 215deg),
        repeating-conic-gradient(at 50% 69%, var(--inv-primary) 0 7deg, var(--inv-ornament) 7deg 14deg, var(--mix) 14deg 21deg);
}

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

.inv--confetti .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-squiggle.svg);
    --orn-ratio: 200 / 20;
    --orn-width: 36%;
    --orn-max: 150px;
    --orn-margin: 12px auto 0;
    --orn-fill: var(--inv-ornament);
}

.inv--confetti .inv-hero__date {
    margin-top: 22px;
    padding: 10px 22px 9px;
    border-radius: 999px;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    box-shadow: 0 10px 22px -12px var(--inv-primary);
}

.inv--confetti .inv-hero__place {
    margin-top: 12px;
}

.inv--confetti .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/celebration-piece-strip.svg);
    --amb-anim: inv-fall;
    --amb-size: 15px;
    --amb-duration: 14s;
    --amb-opacity: .9;
}

.inv--confetti .inv__ambient i:nth-child(3n + 1) { --amb-fill: var(--inv-primary); }
.inv--confetti .inv__ambient i:nth-child(3n + 2) { --amb-fill: var(--inv-ornament); --amb-image: url(../../img/invitations/ornaments/celebration-piece-curl.svg); }
.inv--confetti .inv__ambient i:nth-child(3n) { --amb-fill: var(--mix); }
/* every fourth piece is a curly serpentine streamer */
.inv--confetti .inv__ambient i:nth-child(4n) { --amb-image: url(../../img/invitations/ornaments/celebration-streamer.svg); --amb-ratio: 24 / 80; --amb-size: 9px; }

.inv--confetti .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-stars.svg);
    --orn-ratio: 120 / 50;
    --orn-width: 30%;
    --orn-max: 120px;
    --orn-margin: -38px auto 4px;
    --orn-fill: linear-gradient(90deg, var(--inv-ornament), var(--inv-primary) 50%, var(--inv-ornament));
}

.inv--confetti .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-squiggle.svg);
    --orn-ratio: 200 / 20;
    --orn-width: 22%;
    --orn-max: 90px;
    --orn-margin: -10px auto 22px;
    --orn-fill: var(--inv-ornament);
}

.inv--confetti .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-confetti-line.svg);
    --orn-ratio: 300 / 32;
    --orn-width: 86%;
    --orn-fill: linear-gradient(90deg, var(--inv-ornament), var(--inv-primary) 35%, var(--mix) 65%, var(--inv-ornament));
}

.inv--confetti .inv-countdown > div:nth-child(odd) {
    --box-bg: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface));
    --box-border: 2px solid transparent;
}

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

.inv--confetti .inv-monogram {
    border: 4px solid transparent;
    background: linear-gradient(var(--inv-surface), var(--inv-surface)) padding-box, var(--stripes) border-box;
    box-shadow: none;
    font-size: 1.6rem;
    font-weight: 600;
}

/* =====================================================================================================
   Baloane: a sky gradient, a bouquet of multicolour balloons above the name, single balloons drifting up;
   the photo is a balloon (with knot and string) and the countdown is a bunch of balloon-shaped cells.
   ===================================================================================================== */

.inv--baloane {
    --f-display: "Quicksand", "Segoe UI", sans-serif;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Pacifico", cursive;
    --b1: color-mix(in srgb, var(--inv-ornament) 62%, var(--inv-surface));
    --b2: var(--inv-primary);
    --b3: var(--inv-ornament);
    --b4: color-mix(in srgb, var(--inv-primary) 48%, var(--inv-surface));
    --b5: color-mix(in srgb, var(--inv-primary) 50%, var(--inv-ornament));
    --bouquet:
        radial-gradient(12% 10.5% at 10.4% 42.7%, var(--b1) 97%, transparent 100%),
        radial-gradient(13.5% 11.5% at 25.8% 26.7%, var(--b2) 97%, transparent 100%),
        radial-gradient(14.5% 12.5% at 50% 15%, var(--b3) 97%, transparent 100%),
        radial-gradient(13.5% 11.5% at 74.2% 26.7%, var(--b4) 97%, transparent 100%),
        radial-gradient(12% 10.5% at 89.6% 42.7%, var(--b5) 97%, transparent 100%),
        color-mix(in srgb, var(--inv-muted) 80%, var(--inv-surface));
    --names-weight: 400;
    --names-size: clamp(3.2rem, 17cqi, 5.8rem);
    --names-line: 1.3;
    --names-shadow: 0 .06em 0 color-mix(in srgb, var(--inv-primary) 16%, transparent);
    --kicker-weight: 700;
    --kicker-size: .72rem;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-text);
    --date-weight: 700;
    --date-size: .84rem;
    --date-spacing: .3em;
    --heading-font: "Pacifico", cursive;
    --heading-weight: 400;
    --heading-size: 2.1rem;
    --label-weight: 700;
    --text-display-font: "Quicksand", sans-serif;
    --message-style: normal;
    --message-size: 1.12rem;
    --family-font: "Quicksand", sans-serif;
    --body-weight: 500;
    --hero-halo: none;
    --card-bg: var(--inv-surface);
    --card-radius: 38px;
    --card-shadow: 0 34px 70px -40px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    --box-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)), var(--inv-surface));
    --box-border: 0 solid transparent;
    --box-radius: 26px;
    --box-shadow: 0 14px 26px -20px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    --button-radius: 999px;
    --divider-rule-display: none;
    --photo-width: min(74%, 270px);
    --photo-ratio: 5 / 6;
    --photo-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
    --photo-pad: 7px;
    --photo-bg: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--inv-ornament) 50%, #fff), var(--inv-ornament) 60%, color-mix(in srgb, var(--inv-ornament) 80%, #000));
    --photo-inner-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
    --photo-shadow: 0 24px 40px -24px rgba(0, 0, 0, .45);
    --monogram-font: "Pacifico", cursive;
    --closing-font: "Pacifico", cursive;
    --closing-size: 2.4rem;
    --env-bg: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 85%, var(--inv-primary)), var(--inv-bg) 75%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-primary));
    --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) 75%, var(--inv-primary)), var(--inv-accent));
    --env-radius: 8px;
    --seal-fill: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--inv-ornament) 45%, #fff), var(--inv-ornament) 62%, color-mix(in srgb, var(--inv-ornament) 75%, #000));
    --seal-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
}

.inv--baloane .inv__backdrop {
    background:
        radial-gradient(ellipse 34% 7% at 18% 9%, color-mix(in srgb, var(--inv-surface) 85%, transparent), transparent),
        radial-gradient(ellipse 26% 5% at 84% 22%, color-mix(in srgb, var(--inv-surface) 75%, transparent), transparent),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 82%, var(--inv-primary)) 0, var(--inv-accent) 420px, var(--inv-bg) 860px);
}

.inv--baloane .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-balloons.svg);
    --orn-ratio: 240 / 300;
    --orn-width: min(52cqi, 210px);
    --orn-max: 210px;
    --orn-margin: 0 auto -16px;
    --orn-fill: var(--bouquet);
    filter: drop-shadow(0 14px 16px color-mix(in srgb, var(--inv-primary) 22%, transparent));
}

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

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

.inv--baloane .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/celebration-balloon.svg);
    --amb-ratio: 60 / 150;
    --amb-anim: inv-rise;
    --amb-size: 22px;
    --amb-duration: 20s;
    --amb-opacity: .26;
}

.inv--baloane .inv__ambient i:nth-child(odd) { --amb-fill: var(--inv-primary); }
.inv--baloane .inv__ambient i:nth-child(1) { left: 3%; }
.inv--baloane .inv__ambient i:nth-child(2) { left: 11%; }
.inv--baloane .inv__ambient i:nth-child(3) { left: 19%; }
.inv--baloane .inv__ambient i:nth-child(4) { left: 82%; }
.inv--baloane .inv__ambient i:nth-child(5) { left: 89%; }
.inv--baloane .inv__ambient i:nth-child(6) { left: 94%; }
.inv--baloane .inv__ambient i:nth-child(7) { left: 7%; }
.inv--baloane .inv__ambient i:nth-child(8) { left: 86%; }
.inv--baloane .inv__ambient i:nth-child(9) { left: 15%; }
.inv--baloane .inv__ambient i:nth-child(10) { left: 78%; }
.inv--baloane .inv__ambient i:nth-child(11) { left: 1%; }
.inv--baloane .inv__ambient i:nth-child(12) { left: 91%; }
.inv--baloane .inv__ambient i:nth-child(even) { --amb-fill: var(--inv-ornament); }

/* The photo is a balloon: a rubber rim, a highlight, then the knot and the string under it. */
.inv--baloane .inv-photo__frame {
    position: relative;
}

.inv--baloane .inv-photo__frame::after {
    content: "";
    position: absolute;
    top: 11%;
    left: 17%;
    width: 16%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    transform: rotate(28deg);
}

.inv--baloane .inv-photo::after {
    content: "";
    display: block;
    width: 34px;
    aspect-ratio: 40 / 120;
    margin: -1px auto 0;
    background: var(--inv-ornament);
    -webkit-mask: url(../../img/invitations/ornaments/celebration-balloon-tail.svg) center top / contain no-repeat;
    mask: url(../../img/invitations/ornaments/celebration-balloon-tail.svg) center top / contain no-repeat;
}

.inv--baloane .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-balloons.svg);
    --orn-ratio: 240 / 300;
    --orn-width: 64px;
    --orn-max: 64px;
    --orn-fill: var(--bouquet);
}

/* Countdown: four balloons of the bouquet. */
.inv--baloane .inv-countdown {
    gap: 12px;
}

.inv--baloane .inv-countdown > div {
    position: relative;
    padding: 18px 4px 20px;
    border-radius: 50% 50% 46% 46% / 44% 44% 56% 56%;
    box-shadow: inset -6px -8px 14px -8px rgba(0, 0, 0, .12), 0 14px 22px -18px rgba(0, 0, 0, .4);
}

.inv--baloane .inv-countdown > div::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 12px;
    height: 8px;
    margin-left: -6px;
    background: inherit;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.inv--baloane .inv-countdown > div:nth-child(1) { --box-bg: color-mix(in srgb, var(--b1) 55%, var(--inv-surface)); }
.inv--baloane .inv-countdown > div:nth-child(2) { --box-bg: color-mix(in srgb, var(--b4) 60%, var(--inv-surface)); }
.inv--baloane .inv-countdown > div:nth-child(3) { --box-bg: color-mix(in srgb, var(--b3) 40%, var(--inv-surface)); }
.inv--baloane .inv-countdown > div:nth-child(4) { --box-bg: color-mix(in srgb, var(--b5) 38%, var(--inv-surface)); }

.inv--baloane .inv-countdown span {
    font-weight: 700;
    font-size: 2rem;
    color: var(--inv-text);
}

.inv--baloane .inv-countdown small {
    color: var(--inv-text);
}

.inv--baloane .inv-program__index {
    border: 0;
    background: var(--inv-ornament);
    color: var(--inv-text);
    font-weight: 700;
    border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%;
}

.inv--baloane .inv-monogram {
    border: 0;
    background: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface));
    box-shadow: none;
    border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%;
    font-size: 1.4rem;
}

/* =====================================================================================================
   Neon: a glowing sign on a dark brick wall — a neon tube frame, a cake drawn in light, the name in a
   glowing script that flickers now and then; every box and the photo are lit tubes.
   ===================================================================================================== */

.inv--neon {
    --f-display: "Pacifico", cursive;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Pacifico", cursive;
    --tube: color-mix(in srgb, var(--inv-primary) 30%, #fff);
    --tube-2: color-mix(in srgb, var(--inv-ornament) 30%, #fff);
    --glow: 0 0 .05em #fff, 0 0 .14em var(--inv-primary), 0 0 .34em var(--inv-primary), 0 0 .7em color-mix(in srgb, var(--inv-primary) 70%, transparent);
    --glow-2: 0 0 4px var(--inv-ornament), 0 0 12px color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    --tube-box: 0 0 3px var(--inv-ornament), 0 0 12px color-mix(in srgb, var(--inv-ornament) 70%, transparent), inset 0 0 3px var(--inv-ornament), inset 0 0 14px color-mix(in srgb, var(--inv-ornament) 35%, transparent);
    --names-weight: 400;
    --names-size: clamp(3.2rem, 18cqi, 6rem);
    --names-line: 1.35;
    --names-color: var(--tube);
    --names-shadow: var(--glow);
    --kicker-size: .72rem;
    --kicker-weight: 700;
    --kicker-spacing: .4em;
    --kicker-color: var(--tube-2);
    --date-weight: 700;
    --date-size: .86rem;
    --date-spacing: .34em;
    --heading-weight: 400;
    --heading-size: 2.2rem;
    --heading-color: var(--tube);
    --label-weight: 700;
    --label-color: var(--tube-2);
    --text-display-font: "Quicksand", sans-serif;
    --message-style: normal;
    --message-size: 1.1rem;
    --family-font: "Quicksand", sans-serif;
    --body-weight: 500;
    --hero-halo: none;
    --card-bg: color-mix(in srgb, var(--inv-surface) 90%, transparent);
    --card-radius: 28px;
    --card-border: 1.5px solid var(--tube-2);
    --card-shadow: var(--tube-box), 0 40px 80px rgba(0, 0, 0, .6);
    --card-pad: 44px 22px;
    --box-bg: color-mix(in srgb, var(--inv-bg) 70%, var(--inv-surface));
    --box-border: 1.5px solid var(--tube);
    --box-radius: 18px;
    --box-shadow: 0 0 3px var(--inv-primary), 0 0 12px color-mix(in srgb, var(--inv-primary) 55%, transparent), inset 0 0 10px color-mix(in srgb, var(--inv-primary) 25%, transparent);
    --button-radius: 999px;
    --divider-rule-display: none;
    --photo-width: min(78%, 290px);
    --photo-ratio: 4 / 5;
    --photo-radius: 24px;
    --photo-shadow: 0 0 0 6px var(--inv-surface), 0 0 0 8px var(--tube), 0 0 16px 6px color-mix(in srgb, var(--inv-primary) 60%, transparent), 0 0 44px 10px color-mix(in srgb, var(--inv-primary) 25%, transparent);
    --monogram-font: "Pacifico", cursive;
    --closing-font: "Pacifico", cursive;
    --closing-size: 2.4rem;
    --env-bg: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--inv-primary) 16%, var(--inv-surface)), var(--inv-bg) 70%);
    --env-fill: color-mix(in srgb, var(--inv-surface) 70%, #000);
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-surface) 85%, #fff), var(--inv-surface));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 80%, #000), color-mix(in srgb, var(--inv-surface) 90%, #fff));
    --env-radius: 14px;
    --seal-fill: radial-gradient(circle at 35% 30%, #fff, var(--inv-primary) 55%, color-mix(in srgb, var(--inv-primary) 70%, #000));
    --seal-color: var(--inv-on-primary);
}

.inv--neon .inv__backdrop {
    background:
        radial-gradient(ellipse 80% 38% at 50% 26%, color-mix(in srgb, var(--inv-primary) 20%, transparent), transparent 72%),
        radial-gradient(ellipse 120% 80% at 50% 40%, transparent 45%, rgba(0, 0, 0, .55)),
        var(--inv-bg);
}

.inv--neon .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/celebration-brick.svg);
    --texture-size: 124px;
    --texture-fill: var(--inv-text);
    --texture-opacity: .055;
}

.inv--neon .inv-hero__frame {
    display: block;
    inset: 58px 6px 80px;
    border: 2px solid var(--tube-2);
    border-radius: 34px;
    box-shadow: var(--tube-box);
}

.inv--neon .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-neon-cake.svg);
    --orn-ratio: 170 / 160;
    --orn-width: min(40cqi, 156px);
    --orn-max: 156px;
    --orn-margin: 0 auto;
    --orn-fill: var(--tube);
}

.inv--neon .inv-hero__kicker {
    text-shadow: var(--glow-2);
}

.inv--neon .inv-hero__names {
    animation: celebration-flicker 11s linear infinite;
}

.inv--neon .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 90px;
    --orn-max: 90px;
    --orn-ratio: auto;
    height: 3px;
    border-radius: 3px;
    --orn-margin: 8px auto 0;
    --orn-fill: var(--tube-2);
    box-shadow: var(--glow-2);
}

.inv--neon .inv-hero__date {
    margin-top: 22px;
    color: var(--inv-text);
    text-shadow: 0 0 8px color-mix(in srgb, var(--inv-text) 45%, transparent);
}

.inv--neon .inv-hero__place {
    color: var(--tube-2);
    text-shadow: var(--glow-2);
}

.inv--neon .inv-hero__scroll span {
    border-color: var(--tube-2);
}

.inv--neon .inv-heading,
.inv--neon .inv-closing__names {
    text-shadow: var(--glow);
}

.inv--neon .inv-closing__names {
    color: var(--tube);
}

.inv--neon .inv-when__date,
.inv--neon .inv-program__time,
.inv--neon .inv-countdown span {
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    color: var(--tube);
    text-shadow: 0 0 10px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}

.inv--neon .inv-when__date {
    font-size: 1.7rem;
}

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

.inv--neon .inv-label,
.inv--neon .inv-countdown small {
    color: var(--tube-2);
    text-shadow: 0 0 8px color-mix(in srgb, var(--inv-ornament) 55%, transparent);
}

.inv--neon .orn--divider,
.inv--neon .orn--heading {
    display: block;
    -webkit-mask: none;
    mask: none;
    height: 2px;
    border-radius: 2px;
    --orn-ratio: auto;
    --orn-fill: var(--tube-2);
    box-shadow: var(--glow-2);
}

.inv--neon .orn--divider {
    --orn-width: 56%;
    --orn-max: 240px;
    margin-block: 10px;
}

.inv--neon .orn--heading {
    --orn-width: 44px;
    --orn-max: 44px;
    --orn-margin: -8px auto 26px;
}

.inv--neon .inv-program__index {
    border: 1.5px solid var(--tube-2);
    background: var(--inv-surface);
    color: var(--tube-2);
    box-shadow: var(--glow-2);
}

.inv--neon .inv-button {
    box-shadow: 0 0 6px var(--inv-primary), 0 0 20px color-mix(in srgb, var(--inv-primary) 55%, transparent);
}

.inv--neon .inv-button--ghost {
    border-color: var(--tube);
    color: var(--tube);
    box-shadow: 0 0 4px var(--inv-primary), inset 0 0 6px color-mix(in srgb, var(--inv-primary) 40%, transparent);
}

.inv--neon .inv-monogram {
    border: 2px solid var(--tube);
    color: var(--tube);
    font-size: 1.5rem;
    box-shadow: 0 0 4px var(--inv-primary), 0 0 14px color-mix(in srgb, var(--inv-primary) 60%, transparent), inset 0 0 8px color-mix(in srgb, var(--inv-primary) 40%, transparent);
    text-shadow: var(--glow);
}

.inv--neon .inv-envelope__body {
    box-shadow: 0 0 0 2px var(--tube-2), 0 0 16px color-mix(in srgb, var(--inv-ornament) 60%, transparent), 0 30px 60px -28px rgba(0, 0, 0, .7);
}

.inv--neon .inv-envelope__kicker {
    color: var(--tube-2);
    text-shadow: var(--glow-2);
}

@keyframes celebration-flicker {
    0%, 62%, 64.5%, 67%, 100% { opacity: 1; }
    63%, 66% { opacity: .55; }
}

/* =====================================================================================================
   Retro: the 70s — a striped setting sun with a fan of rays, groovy wavy stripes at the bottom of the
   first screen, soft chunky serif with a stepped shadow, rainbow-ringed arch photo, sticker boxes.
   ===================================================================================================== */

.inv--retro {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --ink: var(--inv-text);
    --names-weight: 600;
    --names-size: clamp(3.4rem, 20cqi, 6.6rem);
    --names-line: 1;
    --names-spacing: -.025em;
    --names-color: var(--inv-primary);
    --names-shadow: .04em .04em 0 var(--inv-ornament), .08em .08em 0 color-mix(in srgb, var(--inv-ornament) 40%, var(--inv-accent));
    --kicker-weight: 700;
    --kicker-size: .72rem;
    --kicker-spacing: .3em;
    --kicker-color: var(--ink);
    --date-weight: 700;
    --date-size: .8rem;
    --date-spacing: .24em;
    --heading-weight: 600;
    --heading-size: 2.3rem;
    --heading-spacing: -.01em;
    --label-weight: 700;
    --label-color: var(--inv-muted);
    --text-display-font: "Fraunces", Georgia, serif;
    --message-size: 1.22rem;
    --family-font: "Fraunces", Georgia, serif;
    --body-weight: 400;
    --hero-halo: none;
    --hero-pad: 40px 8px 150px;
    --card-bg: var(--inv-surface);
    --card-radius: 34px;
    --card-border: 2px solid var(--ink);
    --card-shadow: 8px 8px 0 var(--inv-ornament);
    --box-bg: var(--inv-surface);
    --box-border: 2px solid var(--ink);
    --box-radius: 22px;
    --box-shadow: 4px 4px 0 var(--inv-ornament);
    --button-radius: 999px;
    --divider-rule-display: none;
    --photo-width: min(70%, 260px);
    --photo-ratio: 3 / 4;
    --photo-radius: 999px 999px 18px 18px;
    --photo-shadow: 0 0 0 8px var(--inv-ornament), 0 0 0 16px var(--inv-primary), 0 0 0 24px color-mix(in srgb, var(--inv-primary) 45%, var(--ink));
    --monogram-font: "Fraunces", Georgia, serif;
    --closing-font: "Fraunces", Georgia, serif;
    --closing-size: 2.6rem;
    --env-bg: radial-gradient(circle at 50% 38%, var(--inv-surface), var(--inv-accent) 80%);
    --env-fill: color-mix(in srgb, var(--inv-primary) 75%, #000);
    --env-front: linear-gradient(170deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-primary)));
    --env-flap: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 75%, var(--inv-ornament)));
    --env-radius: 18px;
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-accent) 70%, #fff), var(--inv-accent) 60%);
    --seal-color: var(--inv-primary);
}

.inv--retro .inv__backdrop {
    background:
        radial-gradient(ellipse 90% 50% at 50% 12%, color-mix(in srgb, var(--inv-accent) 70%, transparent), transparent 75%),
        var(--inv-bg);
}

/* Rays behind the sun: centred on the sun's horizon line (the sun is 240 px wide, 122 px tall). */
.inv--retro .inv-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(40px + 116px);
    left: 50%;
    width: 820px;
    aspect-ratio: 2;
    background: var(--inv-ornament);
    opacity: .3;
    transform: translate(-50%, -100%);
    -webkit-mask: url(../../img/invitations/ornaments/celebration-sunburst.svg) center bottom / contain no-repeat;
    mask: url(../../img/invitations/ornaments/celebration-sunburst.svg) center bottom / contain no-repeat;
    pointer-events: none;
}

.inv--retro .inv-hero__content {
    --hero-content-pad: 40px 12px 24px;
}

.inv--retro .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-retro-sun.svg);
    --orn-ratio: 240 / 122;
    --orn-width: 240px;
    --orn-max: 240px;
    --orn-margin: 0 auto 6px;
    --orn-fill: linear-gradient(180deg, var(--inv-ornament) 10%, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-primary)) 55%, var(--inv-primary) 95%);
}

.inv--retro .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-squiggle.svg);
    --orn-ratio: 200 / 20;
    --orn-width: 40%;
    --orn-max: 150px;
    --orn-margin: 22px auto 0;
    --orn-fill: var(--inv-ornament);
}

.inv--retro .inv-hero__date {
    margin-top: 22px;
    padding: 9px 20px 8px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--inv-surface);
    box-shadow: 3px 3px 0 var(--inv-ornament);
}

.inv--retro .inv-hero__place {
    margin-top: 14px;
    font-weight: 700;
}

/* Groovy stripes across the bottom of the first screen. */
.inv--retro .inv-hero::after {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    bottom: 70px;
    height: 64px;
    background: var(--inv-primary);
    -webkit-mask: url(../../img/invitations/ornaments/celebration-groovy-waves.svg) 0 0 / 320px 64px repeat-x;
    mask: url(../../img/invitations/ornaments/celebration-groovy-waves.svg) 0 0 / 320px 64px repeat-x;
    pointer-events: none;
}

.inv--retro .inv-hero__scroll span {
    border-color: var(--ink);
    border-width: 0 2.5px 2.5px 0;
}

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

.inv--retro .inv-heading {
    text-shadow: .05em .05em 0 color-mix(in srgb, var(--inv-ornament) 55%, transparent);
}

.inv--retro .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-squiggle.svg);
    --orn-ratio: 200 / 20;
    --orn-width: 24%;
    --orn-max: 90px;
    --orn-margin: -8px auto 24px;
    --orn-fill: var(--inv-ornament);
}

.inv--retro .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-groovy-waves.svg);
    --orn-ratio: 400 / 80;
    --orn-width: 56%;
    --orn-max: 220px;
    --orn-fill: var(--inv-primary);
}

.inv--retro .inv-photo {
    padding-block: 50px;
}

.inv--retro .inv-countdown span {
    font-size: 1.75rem;
    letter-spacing: -.02em;
}

.inv--retro .inv-countdown small {
    letter-spacing: .08em;
}

.inv--retro .inv-countdown > div:nth-child(even) {
    --box-bg: color-mix(in srgb, var(--inv-accent) 65%, var(--inv-surface));
}

.inv--retro .inv-program__index {
    border: 2px solid var(--ink);
    background: var(--inv-ornament);
    color: var(--ink);
    font-weight: 700;
}

.inv--retro .inv-monogram {
    border: 2px solid var(--ink);
    background: var(--inv-accent);
    box-shadow: 3px 3px 0 var(--inv-ornament);
    font-weight: 600;
    font-size: 1.4rem;
}

/* =====================================================================================================
   Jubileu: golden anniversary — the name in gold leaf inside an oval laurel wreath tied with a bow,
   Roman capitals, a double gilt hairline frame, a medallion photo and round countdown medals.
   ===================================================================================================== */

.inv--jubileu {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Pinyon Script", cursive;
    --gold-hi: color-mix(in srgb, var(--inv-ornament) 65%, #fff);
    --gold-name: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-ornament));
    --gold: linear-gradient(100deg, var(--inv-primary) 0%, var(--gold-name) 28%, var(--inv-primary) 50%, var(--gold-name) 74%, var(--inv-primary) 100%);
    --gold-orn: linear-gradient(120deg, var(--inv-ornament), var(--gold-hi) 35%, var(--inv-ornament) 55%, color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-primary)) 100%);
    --names-weight: 400;
    --names-size: clamp(3.3rem, 18cqi, 5.4rem);
    --names-line: 1.25;
    --names-shadow: none;
    --kicker-font: "Cinzel", serif;
    --kicker-weight: 600;
    --kicker-size: .7rem;
    --kicker-spacing: .3em;
    --date-font: "Cinzel", serif;
    --date-size: .86rem;
    --date-weight: 400;
    --date-spacing: .2em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-font: "Cinzel", serif;
    --heading-size: 1.5rem;
    --heading-weight: 400;
    --heading-spacing: .14em;
    --heading-transform: uppercase;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --message-size: 1.36rem;
    --family-font: "Cormorant Garamond", Georgia, serif;
    --hero-halo: none;
    --card-bg: var(--inv-surface);
    --card-radius: 2px;
    --card-shadow:
        inset 0 0 0 9px var(--inv-surface),
        inset 0 0 0 10px color-mix(in srgb, var(--inv-ornament) 80%, transparent),
        inset 0 0 0 13px var(--inv-surface),
        inset 0 0 0 14px color-mix(in srgb, var(--inv-ornament) 45%, transparent),
        0 24px 60px rgba(0, 0, 0, .14);
    --card-pad: 50px 28px;
    --box-bg: linear-gradient(180deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 35%, var(--inv-surface)));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 60%, 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) 30%, transparent);
    --button-radius: 0;
    --button-transform: uppercase;
    --button-spacing: .2em;
    --divider-rule-display: none;
    --photo-width: min(78%, 280px);
    --photo-ratio: 1;
    --photo-radius: 50%;
    --photo-pad: 8px;
    --photo-bg: conic-gradient(from 20deg, var(--inv-primary), var(--gold-hi), var(--inv-primary), var(--gold-hi), var(--inv-primary), var(--gold-hi), var(--inv-primary));
    --photo-inner-radius: 50%;
    --photo-shadow: 0 0 0 6px var(--inv-surface), 0 0 0 7px color-mix(in srgb, var(--inv-ornament) 70%, transparent), 0 24px 44px -22px rgba(0, 0, 0, .5);
    --monogram-font: "Pinyon Script", cursive;
    --closing-font: "Pinyon Script", cursive;
    --closing-size: 3rem;
    --env-bg: radial-gradient(circle at 50% 38%, var(--inv-surface), var(--inv-bg) 72%);
    --seal-fill: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--inv-ornament) 55%, color-mix(in srgb, var(--inv-ornament) 60%, #000));
}

.inv--jubileu .inv__backdrop {
    background:
        radial-gradient(ellipse 70% 40% at 50% 36%, color-mix(in srgb, var(--inv-ornament) 18%, transparent), transparent 72%),
        radial-gradient(circle at 50% 0%, var(--inv-surface), transparent 60%),
        var(--inv-bg);
}

.inv--jubileu .inv-hero__frame {
    display: block;
    inset: 30px 4px 64px;
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 75%, transparent);
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--inv-bg) 60%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--inv-ornament) 45%, transparent);
}

.inv--jubileu .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-stars.svg);
    --orn-ratio: 120 / 50;
    --orn-width: 26%;
    --orn-max: 96px;
    --orn-fill: var(--gold-orn);
}

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

/* The oval wreath around the name. */
.inv--jubileu .inv-hero__names {
    position: relative;
    margin: 88px 0 84px;
    padding: 0 .25em;
    background: var(--gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.inv--jubileu .inv-hero__names::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(92cqi, 350px);
    aspect-ratio: 340 / 250;
    background: var(--gold-orn);
    transform: translate(-50%, -49%);
    -webkit-mask: url(../../img/invitations/ornaments/celebration-laurel-oval.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/celebration-laurel-oval.svg) center / contain no-repeat;
    pointer-events: none;
}

.inv--jubileu .inv-hero__date {
    margin-top: 0;
    color: var(--inv-text);
}

.inv--jubileu .inv-hero__place {
    margin-top: 6px;
    font-family: "Cinzel", serif;
    letter-spacing: .18em;
}

.inv--jubileu .orn--card-top {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-laurel.svg);
    --orn-ratio: 260 / 40;
    --orn-width: 62%;
    --orn-max: 240px;
    --orn-margin: -8px auto 8px;
    --orn-fill: var(--gold-orn);
}

.inv--jubileu .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-laurel.svg);
    --orn-ratio: 260 / 40;
    --orn-width: 70%;
    --orn-max: 260px;
    --orn-fill: var(--gold-orn);
}

.inv--jubileu .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-stars.svg);
    --orn-ratio: 120 / 50;
    --orn-width: 50px;
    --orn-max: 50px;
    --orn-margin: -10px auto 22px;
    --orn-fill: var(--gold-orn);
}

.inv--jubileu .inv-when__date,
.inv--jubileu .inv-program__time {
    font-family: "Cinzel", serif;
    font-size: 1.6rem;
}

/* Countdown medals. */
.inv--jubileu .inv-countdown {
    gap: 8px;
}

.inv--jubileu .inv-countdown > div {
    display: grid;
    place-content: center;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
}

.inv--jubileu .inv-countdown span {
    font: 400 1.7rem/1 "Cinzel", serif;
}

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

.inv--jubileu .inv-program__index {
    font-family: "Cinzel", serif;
    border-color: color-mix(in srgb, var(--inv-ornament) 70%, transparent);
}

.inv--jubileu .inv-closing__names {
    padding: 0 .2em;
    background: var(--gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

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

/* =====================================================================================================
   Business: a clean corporate cover — left aligned, a strong sans title with a colour bar, crisp
   geometric wedges in the corner, a dotted grid, square cards with an accent edge, offset photo.
   ===================================================================================================== */

.inv--business {
    --f-display: "Montserrat", "Segoe UI", sans-serif;
    --f-body: "Montserrat", "Segoe UI", sans-serif;
    --f-names: "Montserrat", "Segoe UI", sans-serif;
    --inv-align: left;
    --inv-items: flex-start;
    --names-weight: 600;
    --names-size: clamp(2.5rem, 13cqi, 4.6rem);
    --names-line: 1.04;
    --names-spacing: -.025em;
    --names-color: var(--inv-text);
    --names-shadow: none;
    --kicker-size: .64rem;
    --kicker-weight: 600;
    --kicker-spacing: .14em;
    --date-size: .78rem;
    --date-weight: 600;
    --date-spacing: .16em;
    --date-short-display: none;
    --date-long-display: block;
    --heading-size: 1.6rem;
    --heading-weight: 600;
    --heading-spacing: -.01em;
    --heading-color: var(--inv-text);
    --label-weight: 600;
    --label-spacing: .2em;
    --label-color: var(--inv-primary);
    --text-display-font: "Montserrat", sans-serif;
    --message-style: normal;
    --message-size: 1.02rem;
    --family-font: "Montserrat", sans-serif;
    --family-size: 1rem;
    --body-weight: 400;
    --hero-halo: none;
    --hero-justify: flex-end;
    --hero-pad: 64px 10px 110px;
    --hero-content-pad: 0 8px;
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-shadow: 0 1px 0 var(--inv-line), 0 30px 60px -40px rgba(0, 0, 0, .35);
    --card-pad: 40px 24px 44px;
    --box-bg: var(--inv-surface);
    --box-border: 1px solid var(--inv-line);
    --box-radius: 0;
    --box-shadow: inset 3px 0 0 var(--inv-primary);
    --button-radius: 0;
    --button-transform: uppercase;
    --button-spacing: .16em;
    --index-display: none;
    --divider-rule-display: block;
    --photo-width: calc(100% - 16px);
    --photo-ratio: 4 / 3;
    --photo-radius: 0;
    --photo-shadow: 14px 14px 0 var(--inv-accent);
    --monogram-font: "Montserrat", sans-serif;
    --monogram-radius: 0;
    --closing-font: "Montserrat", sans-serif;
    --closing-size: 1.7rem;
    --env-bg: linear-gradient(160deg, var(--inv-surface), var(--inv-bg));
    --env-fill: color-mix(in srgb, var(--inv-primary) 75%, #000);
    --env-front: linear-gradient(160deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)));
    --env-flap: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 80%, #fff));
    --env-radius: 2px;
    --seal-fill: var(--inv-primary);
    --seal-color: var(--inv-on-primary);
    --seal-radius: 2px;
}

.inv--business .inv__backdrop {
    background:
        linear-gradient(180deg, var(--inv-surface) 0, var(--inv-bg) 640px);
}

.inv--business .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/celebration-dots.svg);
    --texture-size: 18px;
    --texture-fill: var(--inv-muted);
    --texture-opacity: .22;
}

.inv--business .inv__deco--a {
    display: block;
    left: auto;
    right: 0;
    --deco-image: url(../../img/invitations/ornaments/celebration-corporate.svg);
    --deco-a-width: min(70%, 440px);
    --deco-fill: linear-gradient(225deg, var(--inv-primary), var(--inv-ornament));
    --deco-opacity: .95;
}

.inv--business .inv__deco--b {
    display: block;
    --deco-image: url(../../img/invitations/ornaments/celebration-corporate-lines.svg);
    --deco-b-top: 480px;
    --deco-b-bottom: auto;
    --deco-b-width: min(44%, 280px);
    --deco-b-transform: scale(-1, -1);
    right: auto;
    left: 0;
    --deco-fill: var(--inv-ornament);
    --deco-opacity: .35;
}

.inv--business .inv-hero__kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
}

.inv--business .inv-hero__kicker::before {
    content: "";
    flex: none;
    width: 28px;
    height: 2px;
    background: var(--inv-primary);
}

.inv--business .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 72px;
    --orn-max: 72px;
    --orn-ratio: auto;
    height: 5px;
    --orn-margin: 24px 0 0;
    --orn-fill: linear-gradient(90deg, var(--inv-primary) 70%, var(--inv-ornament) 70%);
}

.inv--business .inv-hero__date {
    margin: 22px 0 4px;
    color: var(--inv-primary);
}

.inv--business .inv-hero__place {
    letter-spacing: .14em;
    font-weight: 500;
}

.inv--business .inv-hero__scroll {
    left: 26px;
    margin-left: 0;
}

.inv--business .inv-card {
    border-top: 4px solid var(--inv-primary);
}

.inv--business .inv-heading {
    margin-bottom: 14px;
}

.inv--business .orn--heading {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 36px;
    --orn-max: 36px;
    --orn-ratio: auto;
    height: 3px;
    --orn-margin: 0 0 22px;
    --orn-fill: var(--inv-primary);
}

.inv--business .inv-divider {
    padding: 8px 0;
}

.inv--business .inv-divider__rule {
    width: 100%;
    background: var(--inv-line);
}

.inv--business .inv-message p {
    margin: 0;
    padding-left: 16px;
    border-left: 3px solid var(--inv-ornament);
}

.inv--business .inv-photo__frame {
    margin: 0;
}

.inv--business .inv-when__date,
.inv--business .inv-program__time {
    font-size: 1.9rem;
    letter-spacing: -.02em;
    color: var(--inv-text);
}

.inv--business .inv-countdown {
    margin-left: 0;
    gap: 6px;
}

.inv--business .inv-countdown > div {
    min-width: 0;
    padding: 14px 6px 10px 9px;
    text-align: left;
    --box-shadow: inset 0 3px 0 var(--inv-primary);
}

.inv--business .inv-countdown span {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--inv-text);
}

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

.inv--business .inv-program__item {
    padding: 22px 20px 20px 24px;
}

.inv--business .inv-program__time {
    color: var(--inv-primary);
}

.inv--business .inv-monogram {
    width: 56px;
    height: 56px;
    border: 0;
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    box-shadow: 6px 6px 0 var(--inv-accent);
    font-weight: 600;
}

/* =====================================================================================================
   Conferință: the event badge — a pass hanging on a lanyard over a dark tech backdrop (gradient glows,
   grid, network geometry); gradient title, chip kicker, glassy boxes, gradient-rimmed photo.
   ===================================================================================================== */

.inv--conferinta {
    --f-display: "Outfit", "Segoe UI", sans-serif;
    --f-body: "Outfit", "Segoe UI", sans-serif;
    --f-names: "Outfit", "Segoe UI", sans-serif;
    --grad: linear-gradient(100deg, var(--inv-primary), var(--inv-ornament));
    --names-weight: 600;
    --names-size: clamp(2.5rem, 13cqi, 4.4rem);
    --names-line: 1.02;
    --names-spacing: -.03em;
    --names-shadow: none;
    --kicker-size: .64rem;
    --kicker-weight: 600;
    --kicker-spacing: .18em;
    --kicker-color: var(--inv-text);
    --date-size: .8rem;
    --date-weight: 600;
    --date-spacing: .22em;
    --heading-weight: 600;
    --heading-size: 1.9rem;
    --heading-spacing: -.02em;
    --heading-color: var(--inv-text);
    --label-weight: 600;
    --label-spacing: .2em;
    --text-display-font: "Outfit", sans-serif;
    --message-style: normal;
    --message-size: 1.08rem;
    --family-font: "Outfit", sans-serif;
    --body-weight: 300;
    --hero-halo: none;
    --hero-pad: 150px 30px 120px;
    --hero-content-pad: 22px 14px 26px;
    --card-bg: color-mix(in srgb, var(--inv-surface) 88%, transparent);
    --card-radius: 26px;
    --card-border: 1px solid color-mix(in srgb, var(--inv-primary) 30%, transparent);
    --card-shadow: 0 40px 90px -40px color-mix(in srgb, var(--inv-primary) 45%, transparent);
    --box-bg: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 45%, var(--inv-surface)), var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-primary) 32%, transparent);
    --box-radius: 16px;
    --box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--inv-primary) 60%, transparent);
    --button-radius: 12px;
    --divider-rule-display: none;
    --photo-width: 100%;
    --photo-ratio: 16 / 11;
    --photo-radius: 22px;
    --photo-pad: 3px;
    --photo-bg: var(--grad);
    --photo-inner-radius: 19px;
    --photo-shadow: 0 30px 50px -30px color-mix(in srgb, var(--inv-primary) 70%, transparent);
    --monogram-font: "Outfit", sans-serif;
    --monogram-radius: 16px;
    --closing-font: "Outfit", sans-serif;
    --closing-size: 1.9rem;
    --env-bg: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--inv-primary) 30%, transparent), transparent 55%), radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--inv-ornament) 25%, transparent), transparent 55%), var(--inv-bg);
    --env-fill: color-mix(in srgb, var(--inv-surface) 70%, #000);
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-surface) 80%, var(--inv-primary)), var(--inv-surface));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 60%, var(--inv-primary)), var(--inv-surface));
    --env-radius: 16px;
    --seal-fill: var(--grad);
    --seal-color: var(--inv-on-primary);
    --seal-radius: 16px;
}

.inv--conferinta .inv__backdrop {
    background:
        radial-gradient(circle at 12% 6%, color-mix(in srgb, var(--inv-primary) 42%, transparent), transparent 380px),
        radial-gradient(circle at 96% 34%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 360px),
        radial-gradient(circle at 10% 78%, color-mix(in srgb, var(--inv-ornament) 16%, transparent), transparent 420px),
        var(--inv-bg);
}

.inv--conferinta .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/celebration-grid.svg);
    --texture-size: 32px;
    --texture-fill: var(--inv-text);
    --texture-opacity: .06;
}

.inv--conferinta .inv__deco--a {
    display: block;
    --deco-image: url(../../img/invitations/ornaments/celebration-network.svg);
    --deco-a-width: min(64%, 400px);
    --deco-a-top: 330px;
    --deco-a-left: 58%;
    --deco-fill: var(--inv-ornament);
    --deco-opacity: .3;
}

.inv--conferinta .inv__deco--b {
    display: block;
    --deco-image: url(../../img/invitations/ornaments/celebration-network.svg);
    --deco-b-top: 60px;
    --deco-b-bottom: auto;
    --deco-b-right: 64%;
    --deco-b-width: min(48%, 300px);
    --deco-b-transform: rotate(30deg);
    --deco-fill: var(--inv-primary);
    --deco-opacity: .28;
}

/* The badge (hero frame) with its lanyard. */
.inv--conferinta .inv-hero__frame {
    display: block;
    inset: 110px 12px 76px;
    border: 1px solid color-mix(in srgb, var(--inv-primary) 45%, transparent);
    border-radius: 26px;
    background:
        linear-gradient(90deg, var(--inv-primary), var(--inv-ornament)) 0 0 / 100% 64px no-repeat,
        linear-gradient(170deg, color-mix(in srgb, var(--inv-surface) 96%, var(--inv-primary)), var(--inv-surface));
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .6), 0 0 0 6px color-mix(in srgb, var(--inv-primary) 10%, transparent);
}

.inv--conferinta .inv-hero__frame::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    width: 58px;
    height: 12px;
    margin-left: -29px;
    border-radius: 6px;
    background: var(--inv-bg);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45);
}

.inv--conferinta .inv-hero__frame::after {
    content: "";
    position: absolute;
    bottom: calc(100% - 26px);
    left: 50%;
    width: 30px;
    height: 150px;
    margin-left: -15px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 30%, transparent 70%, rgba(0, 0, 0, .25)),
        linear-gradient(180deg, var(--inv-ornament), var(--inv-primary));
    clip-path: polygon(0 0, 100% 0, 100% 84%, 70% 100%, 30% 100%, 0 84%);
    z-index: -1;
}

.inv--conferinta .inv-hero__kicker {
    margin: 14px 0 20px;
    padding: 7px 14px 6px;
    border: 1px solid color-mix(in srgb, var(--inv-primary) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--inv-primary) 14%, transparent);
    line-height: 1.35;
}

.inv--conferinta .inv-hero__names {
    padding-bottom: .06em;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.inv--conferinta .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 100%;
    --orn-max: 240px;
    --orn-ratio: auto;
    height: 1px;
    --orn-margin: 22px auto 0;
    --orn-fill: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-text) 35%, transparent), transparent);
}

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

.inv--conferinta .inv-hero__place {
    color: var(--inv-muted);
}

.inv--conferinta .orn--hero-bottom {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 150px;
    --orn-max: 150px;
    --orn-ratio: auto;
    height: 26px;
    --orn-margin: 18px auto 0;
    --orn-fill: repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 70%, transparent) 0 2px, transparent 2px 4px, color-mix(in srgb, var(--inv-text) 70%, transparent) 4px 5px, transparent 5px 8px, color-mix(in srgb, var(--inv-text) 70%, transparent) 8px 11px, transparent 11px 13px);
    opacity: .5;
}

.inv--conferinta .inv-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 26px;
    right: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--grad);
}

.inv--conferinta .orn--heading,
.inv--conferinta .orn--divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-ratio: auto;
    --orn-fill: var(--grad);
}

.inv--conferinta .orn--heading {
    --orn-width: 44px;
    --orn-max: 44px;
    height: 4px;
    border-radius: 4px;
    --orn-margin: -8px auto 24px;
}

.inv--conferinta .orn--divider {
    --orn-width: 100%;
    --orn-max: 100%;
    height: 1px;
    --orn-fill: linear-gradient(90deg, transparent, var(--inv-primary) 30%, var(--inv-ornament) 70%, transparent);
    margin-block: 12px;
}

.inv--conferinta .inv-when__date,
.inv--conferinta .inv-program__time,
.inv--conferinta .inv-countdown span {
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--inv-text);
}

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

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

.inv--conferinta .inv-program__time {
    font-size: 2rem;
    color: var(--inv-primary);
}

.inv--conferinta .inv-program__index {
    border: 0;
    border-radius: 9px;
    background: var(--grad);
    color: var(--inv-on-primary);
    font-weight: 600;
}

.inv--conferinta .inv-monogram {
    border: 1px solid color-mix(in srgb, var(--inv-primary) 50%, transparent);
    box-shadow: inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 40%, transparent);
    font-weight: 600;
}

/* =====================================================================================================
   Cocktail: an Art Deco evening — two coupes clinking above the name, champagne bubbles rising, stepped
   gilt corners, pinstripes, a high-contrast italic serif, an octagonal photo and dark lacquered cards.
   ===================================================================================================== */

.inv--cocktail {
    --f-display: "Bodoni Moda", "Playfair Display", Georgia, serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Bodoni Moda", "Playfair Display", Georgia, serif;
    --gilt: linear-gradient(135deg, var(--inv-ornament), color-mix(in srgb, var(--inv-primary) 45%, #fff) 45%, var(--inv-primary) 60%, var(--inv-ornament));
    --octagon: polygon(29% 0, 71% 0, 100% 22%, 100% 78%, 71% 100%, 29% 100%, 0 78%, 0 22%);
    --names-weight: 400;
    --names-style: italic;
    --names-size: clamp(3.2rem, 17cqi, 5.8rem);
    --names-line: 1.08;
    --names-spacing: -.01em;
    --names-shadow: none;
    --kicker-font: "Josefin Sans", sans-serif;
    --kicker-size: .7rem;
    --kicker-weight: 400;
    --kicker-spacing: .46em;
    --date-font: "Josefin Sans", sans-serif;
    --date-size: .84rem;
    --date-weight: 400;
    --date-spacing: .42em;
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 2.3rem;
    --label-font: "Josefin Sans", sans-serif;
    --label-weight: 400;
    --label-spacing: .34em;
    --text-display-font: "Bodoni Moda", Georgia, serif;
    --message-size: 1.18rem;
    --family-font: "Bodoni Moda", Georgia, serif;
    --body-weight: 300;
    --hero-halo: none;
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-shadow:
        inset 0 0 0 10px var(--inv-surface),
        inset 0 0 0 11px color-mix(in srgb, var(--inv-ornament) 70%, transparent),
        0 30px 80px rgba(0, 0, 0, .35);
    --card-pad: 56px 26px;
    --box-bg: color-mix(in srgb, var(--inv-bg) 45%, var(--inv-surface));
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 55%, transparent);
    --box-radius: 0;
    --box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--inv-bg) 45%, var(--inv-surface)), inset 0 0 0 5px color-mix(in srgb, var(--inv-ornament) 25%, transparent);
    --button-radius: 0;
    --button-transform: uppercase;
    --button-spacing: .28em;
    --divider-rule-display: none;
    --photo-width: min(80%, 290px);
    --photo-ratio: 4 / 5;
    --photo-radius: 0;
    --photo-clip: var(--octagon);
    --photo-pad: 5px;
    --photo-bg: var(--gilt);
    --photo-shadow: none;
    --monogram-font: "Bodoni Moda", Georgia, serif;
    --monogram-radius: 0;
    --closing-font: "Bodoni Moda", Georgia, serif;
    --closing-size: 2.6rem;
    --env-bg: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--inv-ornament) 22%, var(--inv-bg)), var(--inv-bg) 70%);
    --env-fill: color-mix(in srgb, var(--inv-bg) 70%, #000);
    --env-front: linear-gradient(160deg, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)), var(--inv-accent));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-ornament)), var(--inv-accent));
    --env-radius: 0;
    --seal-fill: var(--gilt);
    --seal-color: var(--inv-bg);
    --seal-radius: 0;
}

.inv--cocktail .inv__backdrop {
    background:
        radial-gradient(ellipse 70% 42% at 50% 0%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 75%),
        repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--inv-ornament) 9%, transparent) 22px 23px),
        var(--inv-bg);
}

.inv--cocktail .inv-hero__frame {
    display: block;
    inset: 34px 4px 70px;
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 60%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 92%, transparent), color-mix(in srgb, var(--inv-surface) 88%, transparent));
    box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--inv-bg) 90%, transparent), inset 0 0 0 7px color-mix(in srgb, var(--inv-ornament) 35%, transparent);
}

.inv--cocktail .inv-hero__corner {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/celebration-deco-corner.svg);
    --hero-corner-size: 22%;
    --hero-corner-fill: var(--gilt);
    --hero-corner-opacity: 1;
}

.inv--cocktail .inv-hero__corner--tl,
.inv--cocktail .inv-hero__corner--tr {
    top: 42px;
}

.inv--cocktail .inv-hero__corner--bl,
.inv--cocktail .inv-hero__corner--br {
    bottom: 78px;
}

.inv--cocktail .inv-hero__corner--tl,
.inv--cocktail .inv-hero__corner--bl {
    left: 12px;
}

.inv--cocktail .inv-hero__corner--tr,
.inv--cocktail .inv-hero__corner--br {
    right: 12px;
}

.inv--cocktail .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-coupes.svg);
    --orn-ratio: 240 / 190;
    --orn-width: 52%;
    --orn-max: 200px;
    --orn-margin: 0 auto 4px;
    --orn-fill: var(--gilt);
}

.inv--cocktail .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-glass-divider.svg);
    --orn-ratio: 300 / 44;
    --orn-width: 84%;
    --orn-max: 280px;
    --orn-margin: 20px auto 0;
    --orn-fill: var(--gilt);
}

.inv--cocktail .inv-hero__date {
    margin-top: 20px;
}

.inv--cocktail .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/celebration-bubble.svg);
    --amb-anim: inv-rise;
    --amb-size: 11px;
    --amb-duration: 15s;
    --amb-fill: color-mix(in srgb, var(--inv-primary) 60%, #fff);
    --amb-opacity: .45;
}

.inv--cocktail .inv-corner {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/celebration-deco-corner.svg);
    --corner-size: 16%;
    --corner-max: 76px;
    --corner-inset: 18px;
    --corner-fill: var(--gilt);
    --corner-opacity: .95;
}

.inv--cocktail .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-glass-divider.svg);
    --orn-ratio: 300 / 44;
    --orn-width: 88%;
    --orn-fill: var(--gilt);
}

.inv--cocktail .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/line-diamond.svg);
    --orn-ratio: 240 / 20;
    --orn-width: 38%;
    --orn-max: 150px;
    --orn-margin: -10px auto 24px;
    --orn-fill: var(--gilt);
}

.inv--cocktail .inv-photo__frame img {
    clip-path: var(--octagon);
}

.inv--cocktail .inv-when__date,
.inv--cocktail .inv-program__time,
.inv--cocktail .inv-countdown span {
    font-style: italic;
}

.inv--cocktail .inv-countdown span {
    font-size: 1.8rem;
    letter-spacing: -.02em;
}

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

.inv--cocktail .inv-program__index {
    border-radius: 0;
    border-color: color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    background: var(--inv-surface);
    font-family: "Bodoni Moda", Georgia, serif;
    font-style: italic;
}

.inv--cocktail .inv-monogram {
    clip-path: var(--octagon);
    border: 0;
    background: var(--gilt);
    color: var(--inv-bg);
    box-shadow: none;
    font-style: italic;
    font-size: 1.3rem;
}

/* =====================================================================================================
   Vinil: a record rising out of its sleeve — the first screen is the sleeve (thumb notch ringed by 70s
   stripes) with the disc behind it: grooves, a light reflection and a label that turns slowly; the photo
   is an album cover with its LP, the countdown is four singles, dividers are equaliser bars.
   ===================================================================================================== */

.inv--vinil {
    --f-display: "Yeseva One", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Yeseva One", Georgia, serif;
    --sleeve: min(100cqi - 48px, 430px);
    --cover: min(62%, 250px);
    --stripe-3: color-mix(in srgb, var(--inv-ornament) 42%, var(--inv-accent));
    --stripes: linear-gradient(180deg, var(--inv-primary) 0 33.4%, var(--inv-ornament) 33.4% 66.7%, var(--stripe-3) 66.7%);
    /* the record: fixed dark wax (slightly tinted by the palette), fine grooves, a fixed reflection */
    --wax: color-mix(in srgb, var(--inv-text) 6%, #141212);
    --wax-hi: color-mix(in srgb, var(--inv-text) 10%, #2c2828);
    --grooves: repeating-radial-gradient(circle closest-side, var(--wax) 0, var(--wax-hi) 1.3px, var(--wax) 2.6px);
    --shine: conic-gradient(transparent 20deg, rgba(255, 255, 255, .1) 42deg, transparent 64deg, transparent 106deg, rgba(255, 255, 255, .14) 128deg, transparent 150deg, transparent 282deg, rgba(255, 255, 255, .24) 306deg, transparent 330deg);
    --rim: color-mix(in srgb, var(--inv-text) 16%, transparent);
    --halo: color-mix(in srgb, var(--inv-accent) 85%, transparent);
    --wave: var(--inv-ornament);
    --sleeve-edge: transparent;
    --names-weight: 400;
    --names-size: clamp(2.4rem, 13cqi, 4rem);
    --names-line: 1.04;
    --names-spacing: -.01em;
    --names-shadow: none;
    --names-direction: row;
    --names-gap: 0 .26em;
    --amp-style: normal;
    --amp-size: .62em;
    --amp-color: var(--inv-text);
    --kicker-size: .66rem;
    --kicker-weight: 600;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-text);
    --date-size: .86rem;
    --date-weight: 600;
    --date-spacing: .26em;
    --heading-weight: 400;
    --heading-size: 1.85rem;
    --label-weight: 600;
    --label-spacing: .26em;
    --text-display-font: "Jost", "Segoe UI", sans-serif;
    --message-style: normal;
    --message-size: 1.14rem;
    --family-size: 1.08rem;
    --body-weight: 400;
    --hero-halo: none;
    --hero-pad: 24px 8px 64px;
    --card-bg: var(--inv-surface);
    --card-radius: 6px;
    --card-shadow: 0 28px 60px -32px rgba(0, 0, 0, .5);
    --card-pad: 50px 24px 44px;
    --card-pad-wide: 66px 48px 60px;
    --box-bg: color-mix(in srgb, var(--inv-bg) 62%, var(--inv-surface));
    --box-border: 0 solid transparent;
    --box-radius: 6px;
    --box-shadow: 0 16px 26px -20px rgba(0, 0, 0, .5);
    --button-radius: 999px;
    --divider-rule-display: none;
    --photo-width: var(--cover);
    --photo-ratio: 1;
    --photo-radius: 4px;
    --photo-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-text) 12%, transparent), 0 20px 36px -20px rgba(0, 0, 0, .6);
    --monogram-font: "Yeseva One", Georgia, serif;
    --closing-size: 2.4rem;
    --env-bg: radial-gradient(circle at 50% 38%, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 80%, var(--inv-bg)) 78%);
    --env-fill: color-mix(in srgb, var(--inv-primary) 62%, #000);
    --env-front: linear-gradient(165deg, color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface)), var(--inv-accent));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, #000), var(--inv-primary));
    --env-radius: 5px;
    --seal-fill: radial-gradient(circle closest-side, var(--inv-primary) 0 56%, var(--wax) 59% 66%, transparent 68%), var(--shine), var(--grooves);
    --seal-color: var(--inv-on-primary);
}

.inv--vinil.inv--dark {
    --halo: color-mix(in srgb, var(--inv-primary) 26%, transparent);
    --wave: var(--inv-primary);
    --rim: color-mix(in srgb, var(--inv-text) 30%, transparent);
    --sleeve-edge: color-mix(in srgb, var(--inv-text) 9%, transparent);
}

.inv--vinil .inv__backdrop {
    background:
        radial-gradient(ellipse 110% 460px at 50% 0, color-mix(in srgb, var(--inv-accent) 62%, transparent), transparent 100%),
        var(--inv-bg);
}

.inv--vinil .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/celebration-dots.svg);
    --texture-size: 14px;
    --texture-fill: var(--inv-ornament);
    --texture-opacity: .16;
}

/* The sleeve is the text panel; it is as wide as --sleeve and grows with long names. */
.inv--vinil .inv-hero__content {
    width: var(--sleeve);
    margin-top: calc(var(--sleeve) * .5);
    padding: calc(var(--sleeve) * .17 + 18px) min(5cqi, 24px) 30px;
}

/* Sleeve face: a thumb notch centred on the record's label, ringed by three stripes. */
.inv--vinil .inv-hero__content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 5px;
    background:
        radial-gradient(circle at 50% calc(var(--sleeve) * -.045),
            transparent calc(var(--sleeve) * .155 - 7px),
            rgba(0, 0, 0, .3) calc(var(--sleeve) * .155 - .5px),
            var(--inv-primary) calc(var(--sleeve) * .155 + .5px) calc(var(--sleeve) * .176 - .5px),
            var(--inv-ornament) calc(var(--sleeve) * .176 + .5px) calc(var(--sleeve) * .197 - .5px),
            var(--stripe-3) calc(var(--sleeve) * .197 + .5px) calc(var(--sleeve) * .218 - .5px),
            var(--inv-surface) calc(var(--sleeve) * .218 + .5px));
    box-shadow: inset 1px 0 0 var(--sleeve-edge), inset -1px 0 0 var(--sleeve-edge), inset 0 -1px 0 var(--sleeve-edge), 0 26px 44px -24px rgba(0, 0, 0, .55);
}

/* Spine text on the right edge of the sleeve. */
.inv--vinil .inv-hero__content::after {
    content: "FAȚA A  ·  STEREO";
    position: absolute;
    right: 7px;
    bottom: 16px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font: 600 .5rem/1 var(--f-body);
    letter-spacing: .34em;
    white-space: pre;
    color: var(--inv-muted);
}

/* The record: the slot is a square as wide as the sleeve, centred on the disc (halo and sound waves in
   its background); ::before is the disc, ::after the label, the only part that turns. */
.inv--vinil .orn--hero {
    display: block;
    position: absolute;
    top: calc(var(--sleeve) * -.545);
    left: 0;
    z-index: -2;
    --orn-width: 100%;
    --orn-max: none;
    --orn-ratio: 1;
    --orn-margin: 0;
    -webkit-mask: none;
    mask: none;
    border-radius: 50%;
    --orn-fill:
        radial-gradient(circle closest-side,
            transparent calc(82% - 1.5px), color-mix(in srgb, var(--wave) 60%, transparent) calc(82% - .5px) calc(82% + .5px), transparent calc(82% + 1.5px),
            transparent calc(90% - 1.5px), color-mix(in srgb, var(--wave) 40%, transparent) calc(90% - .5px) calc(90% + .5px), transparent calc(90% + 1.5px),
            transparent calc(98% - 1.5px), color-mix(in srgb, var(--wave) 24%, transparent) calc(98% - .5px) calc(98% + .5px), transparent calc(98% + 1.5px)),
        radial-gradient(circle closest-side, var(--halo) 60%, transparent);
}

.inv--vinil .orn--hero::before {
    content: "";
    position: absolute;
    inset: 12.5%;
    border-radius: 50%;
    background:
        var(--shine),
        radial-gradient(circle closest-side, var(--wax) 40%, transparent 41%, transparent 59%, rgba(255, 255, 255, .08) 59.5% 60.3%, transparent 60.8%, transparent 77%, rgba(255, 255, 255, .08) 77.5% 78.3%, transparent 78.8%, transparent 95.5%, var(--wax) 96.5%),
        var(--grooves);
    box-shadow: 0 0 0 1px var(--rim), 0 14px 30px -10px rgba(0, 0, 0, .6);
}

.inv--vinil .orn--hero::after {
    content: "";
    position: absolute;
    inset: 37.25%;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, color-mix(in srgb, var(--inv-bg) 78%, #000) 6.5%, transparent 8%),
        radial-gradient(circle closest-side, var(--inv-surface) 19%, transparent 20.5%),
        linear-gradient(var(--inv-on-primary), var(--inv-on-primary)) 50% 70% / 44% 3.2% no-repeat,
        linear-gradient(var(--inv-on-primary), var(--inv-on-primary)) 50% 78% / 32% 3.2% no-repeat,
        linear-gradient(var(--inv-on-primary), var(--inv-on-primary)) 50% 86% / 20% 3.2% no-repeat,
        radial-gradient(circle closest-side, rgba(0, 0, 0, .34) 88%, transparent 100%) 50% 17% / 13% 13% no-repeat,
        radial-gradient(circle closest-side, transparent 89%, rgba(0, 0, 0, .22) 90.5% 92.5%, transparent 94%),
        linear-gradient(180deg, var(--inv-ornament) 49.5%, var(--inv-primary) 50.5%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
    animation: celebration-vinyl-spin 26s linear infinite;
}

@keyframes celebration-vinyl-spin {
    to { transform: rotate(360deg); }
}

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

.inv--vinil .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 62px;
    --orn-max: 62px;
    --orn-ratio: auto;
    height: 9px;
    border-radius: 2px;
    --orn-margin: 16px auto 0;
    --orn-fill: var(--stripes);
}

.inv--vinil .inv-hero__date {
    margin: 16px 0 5px;
}

.inv--vinil .inv-hero__place {
    font-weight: 500;
}

/* Card: an inner sleeve with the three stripes across its top edge. */
.inv--vinil .orn--card-top {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    -webkit-mask: none;
    mask: none;
    --orn-width: auto;
    --orn-max: none;
    --orn-ratio: auto;
    --orn-margin: 0;
    border-radius: 6px 6px 0 0;
    --orn-fill: var(--stripes);
}

.inv--vinil .orn--heading {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: 54px;
    --orn-max: 54px;
    --orn-ratio: auto;
    height: 9px;
    border-radius: 2px;
    --orn-margin: -10px auto 26px;
    --orn-fill: var(--stripes);
}

.inv--vinil .orn--divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-equalizer.svg);
    --orn-ratio: 236 / 48;
    --orn-width: 58%;
    --orn-max: 210px;
    --orn-fill: linear-gradient(0deg, var(--inv-primary) 20%, var(--inv-ornament) 95%);
}

.inv--vinil .inv-divider {
    padding: 10px 0;
}

/* Photo: an album cover with its LP half out on the right. */
.inv--vinil .inv-photo__frame {
    margin-left: calc((100% - var(--cover) * 1.42) / 2);
}

.inv--vinil .inv-photo::before {
    content: "";
    position: absolute;
    top: 26px;
    left: calc((100% - var(--cover) * 1.42) / 2 + var(--cover) * .42);
    width: var(--cover);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, color-mix(in srgb, var(--inv-surface) 80%, #000) 2.2%, var(--inv-surface) 2.8% 6%, var(--inv-primary) 6.8% 28%, var(--inv-ornament) 28.6% 33.4%, var(--wax) 34.2% 40%, transparent 41%),
        var(--shine),
        radial-gradient(circle closest-side, transparent 59%, rgba(255, 255, 255, .08) 59.5% 60.3%, transparent 60.8%, transparent 77%, rgba(255, 255, 255, .08) 77.5% 78.3%, transparent 78.8%, transparent 95.5%, var(--wax) 96.5%),
        var(--grooves);
    box-shadow: 0 0 0 1px var(--rim), 0 16px 26px -14px rgba(0, 0, 0, .55);
}

.inv--vinil .inv-when__date {
    font-size: clamp(1.55rem, 7.4cqi, 2.2rem);
}

/* Countdown: four singles; the number sits on the label. */
.inv--vinil .inv-countdown {
    gap: 9px;
}

.inv--vinil .inv-countdown > div {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.inv--vinil .inv-countdown span {
    display: grid;
    place-items: center;
    width: min(100%, 96px);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, var(--inv-primary) 60%, var(--wax) 62.5% 69%, transparent 71%),
        var(--shine),
        var(--grooves);
    box-shadow: 0 0 0 1px var(--rim), 0 10px 16px -10px rgba(0, 0, 0, .6);
    font: 600 clamp(1.05rem, 5.2cqi, 1.6rem)/1 var(--f-body);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
    color: var(--inv-on-primary);
}

.inv--vinil .inv-countdown > div:nth-child(even) span {
    background:
        radial-gradient(circle closest-side, var(--inv-surface) 60%, var(--wax) 62.5% 69%, transparent 71%),
        var(--shine),
        var(--grooves);
    color: var(--inv-primary);
}

.inv--vinil .inv-countdown small {
    margin-top: 9px;
}

/* Program: sleeves with the stripes on top; the step number is a small record. */
.inv--vinil .inv-program__item {
    padding-top: 40px;
}

.inv--vinil .inv-program__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 9px;
    border-radius: 6px 6px 0 0;
    background: var(--stripes);
}

.inv--vinil .inv-program__index {
    top: -18px;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    border: 0;
    background:
        radial-gradient(circle closest-side, var(--inv-primary) 56%, var(--wax) 59% 66%, transparent 68%),
        var(--shine),
        var(--grooves);
    box-shadow: 0 0 0 1px var(--rim), 0 6px 10px -6px rgba(0, 0, 0, .6);
    font-weight: 600;
    color: var(--inv-on-primary);
}

.inv--vinil .inv-program__time {
    font-size: 2.3rem;
}

.inv--vinil .rsvp-field :is(input, select, textarea) {
    border-radius: 14px;
}

.inv--vinil .inv-closing__line {
    font-style: normal;
}

.inv--vinil .inv-monogram {
    width: 92px;
    height: 92px;
    border: 0;
    background:
        radial-gradient(circle closest-side, var(--inv-primary) 54%, var(--wax) 57% 63%, transparent 65%),
        var(--shine),
        var(--grooves);
    box-shadow: 0 0 0 1px var(--rim), 0 12px 20px -12px rgba(0, 0, 0, .6);
    font-size: 1.1rem;
    color: var(--inv-on-primary);
}

.inv--vinil .inv-envelope__seal {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 14px rgba(0, 0, 0, .4);
    font-weight: 400;
    font-size: .8rem;
}

/* =====================================================================================================
   Bilet: an admission ticket on a coloured stage — a tall ticket with perforated top and bottom edges,
   side notches at the tear line and a stub with barcode and seat; ticket labels around the name, date
   and place, boxes as small tickets, dashed tear lines with scissors, stars twinkling around.
   ===================================================================================================== */

.inv--bilet {
    --f-display: "Poppins", "Segoe UI", sans-serif;
    --f-body: "Poppins", "Segoe UI", sans-serif;
    --f-names: "Poppins", "Segoe UI", sans-serif;
    /* the stage: the primary colour behind the ticket and the card */
    --stage-top: color-mix(in srgb, var(--inv-primary) 82%, #fff);
    --stage: var(--inv-primary);
    --stage-ink: var(--inv-on-primary);
    --tint: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-surface));
    --perf: color-mix(in srgb, var(--inv-text) 38%, transparent);
    --hair: color-mix(in srgb, var(--inv-text) 14%, transparent);
    --stub: 112px;
    --head: 54px;
    --notch: 11px;
    --tk-pad: 22px;
    --tk-side: max(20px, calc(50% - 200px));
    --tk-max: 660px;
    --names-weight: 600;
    --names-size: clamp(1.9rem, 10.6cqi, 3.5rem);
    --names-line: 1.06;
    --names-spacing: -.01em;
    --names-transform: uppercase;
    --names-shadow: none;
    --amp-style: normal;
    --amp-size: .5em;
    --amp-color: var(--inv-text);
    --kicker-size: .62rem;
    --kicker-weight: 600;
    --kicker-spacing: .28em;
    --kicker-color: var(--inv-text);
    --date-size: .92rem;
    --date-weight: 600;
    --date-spacing: .02em;
    --heading-weight: 600;
    --heading-size: 1.42rem;
    --heading-transform: uppercase;
    --heading-spacing: .05em;
    --heading-color: var(--inv-text);
    --label-weight: 600;
    --label-size: .62rem;
    --label-spacing: .24em;
    --text-display-font: "Poppins", "Segoe UI", sans-serif;
    --message-style: normal;
    --message-size: 1.04rem;
    --family-size: 1rem;
    --body-weight: 400;
    --hero-halo: none;
    --hero-pad: 30px 20px 72px;
    --card-bg: var(--inv-surface);
    --card-radius: 0;
    --card-shadow: 0 26px 40px -26px rgba(0, 0, 0, .55);
    --box-bg:
        radial-gradient(circle 8px at 0 50%, transparent 94%, var(--tint)) 0 0 / 51% 100% no-repeat,
        radial-gradient(circle 8px at 100% 50%, transparent 94%, var(--tint)) 100% 0 / 51% 100% no-repeat;
    --box-border: 0 solid transparent;
    --box-radius: 8px;
    --box-shadow: none;
    --button-radius: 8px;
    --button-spacing: .08em;
    --divider-rule-display: none;
    --photo-width: min(84%, 310px);
    --photo-ratio: 4 / 5;
    --photo-radius: 0;
    --photo-pad: 12px;
    --photo-bg: var(--tint);
    --photo-shadow: none;
    --monogram-font: "Poppins", "Segoe UI", sans-serif;
    --closing-size: 1.9rem;
    --env-bg: linear-gradient(180deg, var(--stage-top), var(--stage) 62%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 78%, var(--inv-text));
    --env-front: linear-gradient(165deg, var(--inv-surface), var(--tint));
    --env-flap: linear-gradient(180deg, var(--inv-accent), var(--tint));
    --env-radius: 4px;
    --seal-fill: var(--inv-primary);
    --seal-color: var(--inv-on-primary);
    --seal-radius: 50%;
}

.inv--bilet.inv--dark {
    --stage-top: color-mix(in srgb, var(--inv-primary) 54%, var(--inv-bg));
    --stage: color-mix(in srgb, var(--inv-primary) 32%, var(--inv-bg));
    --stage-ink: var(--inv-text);
}

.inv--bilet .inv__backdrop {
    background: linear-gradient(180deg, var(--stage-top), var(--stage) 440px);
}

.inv--bilet .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/celebration-starfield.svg);
    --texture-size: 170px;
    --texture-fill: var(--stage-ink);
    --texture-opacity: .16;
}

/* Stars around the ticket: on the stage only (the ticket covers the rest). */
.inv--bilet .inv__ambient {
    display: block;
    --amb-image: url(../../img/invitations/ornaments/celebration-star.svg);
    --amb-anim: inv-twinkle;
    --amb-size: 13px;
    --amb-duration: 9s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .95;
}

.inv--bilet .inv__ambient i:nth-child(odd) { left: max(3px, calc(50% - 232px)); }
.inv--bilet .inv__ambient i:nth-child(even) { left: min(calc(100% - 16px), calc(50% + 219px)); }
.inv--bilet .inv__ambient i:nth-child(1) { top: 12%; }
.inv--bilet .inv__ambient i:nth-child(2) { top: 24%; }
.inv--bilet .inv__ambient i:nth-child(3) { top: 43%; }
.inv--bilet .inv__ambient i:nth-child(4) { top: 56%; }
.inv--bilet .inv__ambient i:nth-child(5) { top: 71%; }
.inv--bilet .inv__ambient i:nth-child(6) { top: 82%; }
.inv--bilet .inv__ambient i:nth-child(7) { top: 8px; left: 24%; }
.inv--bilet .inv__ambient i:nth-child(8) { top: 9px; left: 71%; }
.inv--bilet .inv__ambient i:nth-child(9) { top: calc(100% - 56px); left: 16%; }
.inv--bilet .inv__ambient i:nth-child(10) { top: calc(100% - 34px); left: 80%; }
.inv--bilet .inv__ambient i:nth-child(11) { top: calc(100% - 30px); left: 31%; }
.inv--bilet .inv__ambient i:nth-child(12) { top: calc(100% - 58px); left: 66%; }

/* The ticket: the frame has the same box as the texts (hero padding = frame inset), so the header band,
   the tear line and the notches are painted at fixed distances from its top and bottom. */
.inv--bilet .inv-hero__frame {
    display: block;
    inset: 30px var(--tk-side) 72px;
    max-height: var(--tk-max);
    margin-block: auto;
    border: 0;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .3));
}

.inv--bilet .inv-hero__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, var(--perf) 0 7px, transparent 7px 13px) 50% calc(100% - var(--stub)) / calc(100% - 44px) 2px no-repeat,
        linear-gradient(var(--inv-primary), var(--inv-primary)) 0 var(--head) / 100% 3px no-repeat,
        linear-gradient(var(--tint), var(--tint)) 0 0 / 100% var(--head) no-repeat,
        var(--inv-surface);
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub) - 1px), transparent 94%, #000),
        radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub) - 1px), transparent 94%, #000),
        radial-gradient(circle 4.5px at 50% 0, transparent 90%, #000) 0 0 / 16px 100% round,
        radial-gradient(circle 4.5px at 50% 100%, transparent 90%, #000) 0 0 / 16px 100% round;
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub) - 1px), transparent 94%, #000),
        radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub) - 1px), transparent 94%, #000),
        radial-gradient(circle 4.5px at 50% 0, transparent 90%, #000) 0 0 / 16px 100% round,
        radial-gradient(circle 4.5px at 50% 100%, transparent 90%, #000) 0 0 / 16px 100% round;
    mask-composite: intersect;
}

/* Texts on the ticket: header, a centred group (kicker, name, stars), the fields above the tear line, the stub. */
.inv--bilet .inv-hero__content {
    flex: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto minmax(0, 1fr) auto auto;
    width: min(100%, 400px);
    max-height: var(--tk-max);
    padding: 0;
}

/* A large pale star printed behind the name. */
.inv--bilet .inv-hero__content::before {
    content: "";
    position: absolute;
    grid-area: 2 / 1 / 7 / -1;
    inset: 0;
    z-index: -1;
    width: min(76%, 300px);
    max-height: 100%;
    aspect-ratio: 1;
    margin: auto;
    background: var(--tint);
    -webkit-mask: url(../../img/invitations/ornaments/celebration-star.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/celebration-star.svg) center / contain no-repeat;
}

.inv--bilet .orn--hero {
    grid-area: 1 / 1 / 2 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--head);
    padding: 5px 20px 0;
    -webkit-mask: none;
    mask: none;
    --orn-width: auto;
    --orn-max: none;
    --orn-ratio: auto;
    --orn-margin: 0;
    --orn-fill: none;
    font: 600 .62rem/1 var(--f-body);
    letter-spacing: .24em;
    color: var(--inv-text);
}

.inv--bilet .orn--hero::before {
    content: "INVITAȚIE";
}

.inv--bilet .orn--hero::after {
    content: "Nr. 0001";
    letter-spacing: .12em;
}

.inv--bilet .inv-hero__kicker {
    grid-area: 3 / 1 / 4 / -1;
    margin: 14px 0 10px;
    padding: 0 20px;
}

.inv--bilet .inv-hero__names {
    grid-area: 4 / 1 / 5 / -1;
    padding: 0 12px;
}

.inv--bilet .inv-hero__amp {
    margin: .2em 0;
}

.inv--bilet .orn--hero-divider {
    grid-area: 5 / 1 / 6 / -1;
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-stars.svg);
    --orn-ratio: 120 / 50;
    --orn-width: 60px;
    --orn-max: 60px;
    --orn-margin: 12px auto 14px;
    --orn-fill: var(--inv-ornament);
}

/* Ticket fields: DATA | LOCAȚIE. */
.inv--bilet .inv-hero__date,
.inv--bilet .inv-hero__place {
    grid-row: 7;
    align-self: stretch;
    margin: 0 0 18px;
    padding: 11px 0 10px;
    border-block: 1px solid var(--hair);
    text-align: left;
}

.inv--bilet .inv-hero__date {
    grid-column: 1;
    margin-left: 20px;
    padding-right: 14px;
    border-right: 1.5px dashed var(--perf);
    white-space: nowrap;
}

.inv--bilet .inv-hero__date:nth-last-child(2) {
    grid-column: 1 / -1;
    margin-right: 20px;
    padding-right: 0;
    border-right: 0;
    text-align: center;
}

.inv--bilet .inv-hero__place {
    grid-column: 2;
    margin-right: 20px;
    padding-left: 14px;
    font: 600 .8rem/1.35 var(--f-body);
    letter-spacing: .05em;
    color: var(--inv-text);
}

.inv--bilet .inv-hero__date::before,
.inv--bilet .inv-hero__place::before {
    display: block;
    margin-bottom: 4px;
    font: 600 .54rem/1.3 var(--f-body);
    letter-spacing: .26em;
    color: var(--inv-muted);
}

.inv--bilet .inv-hero__date::before {
    content: "DATA";
}

.inv--bilet .inv-hero__place::before {
    content: "LOCAȚIE";
}

/* The stub: barcode and seat. */
.inv--bilet .orn--hero-bottom {
    grid-area: 8 / 1 / 9 / -1;
    display: block;
    position: relative;
    height: var(--stub);
    -webkit-mask: none;
    mask: none;
    --orn-width: auto;
    --orn-max: none;
    --orn-ratio: auto;
    --orn-margin: 0;
    --orn-fill: none;
}

.inv--bilet .orn--hero-bottom::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 50%;
    width: min(66%, 218px);
    height: 40px;
    transform: translateX(-50%);
    background: var(--inv-text);
    -webkit-mask: url(../../img/invitations/ornaments/celebration-barcode.svg) center / 100% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/celebration-barcode.svg) center / 100% 100% no-repeat;
}

.inv--bilet .orn--hero-bottom::after {
    content: "INTRARE  ★  PETRECERE";
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    font: 600 .56rem/1.3 var(--f-body);
    letter-spacing: .28em;
    white-space: pre;
    color: var(--inv-muted);
}

.inv--bilet .inv-hero__scroll span {
    border-color: var(--stage-ink);
    border-width: 0 2px 2px 0;
}

/* Card: a long ticket — perforated top and bottom, notches where the tear lines are. */
.inv--bilet .inv-card {
    padding: 52px var(--tk-pad) 46px;
}

@container (min-width: 560px) {
    .inv--bilet .inv-card {
        --tk-pad: 48px;
        padding-block: 66px 60px;
    }
}

.inv--bilet .orn--card-top,
.inv--bilet .orn--card-bottom {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    -webkit-mask: none;
    mask: none;
    --orn-width: auto;
    --orn-max: none;
    --orn-ratio: auto;
    --orn-margin: 0;
}

.inv--bilet .orn--card-top {
    top: 0;
    --orn-fill: radial-gradient(circle 4.5px at 50% 0, var(--stage) 90%, transparent) 0 0 / 16px 100% round;
}

.inv--bilet .orn--card-bottom {
    bottom: 0;
    --orn-fill: radial-gradient(circle 4.5px at 50% 100%, var(--stage) 90%, transparent) 0 0 / 16px 100% round;
}

.inv--bilet .inv-divider {
    position: relative;
    margin-inline: calc(var(--tk-pad) * -1);
    padding: 16px calc(var(--notch) + 10px);
}

.inv--bilet .inv-divider::before,
.inv--bilet .inv-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--notch);
    height: calc(var(--notch) * 2);
    margin-top: calc(var(--notch) * -1);
    background: var(--stage);
}

.inv--bilet .inv-divider::before {
    left: 0;
    border-radius: 0 var(--notch) var(--notch) 0;
}

.inv--bilet .inv-divider::after {
    right: 0;
    border-radius: var(--notch) 0 0 var(--notch);
}

.inv--bilet .orn--divider {
    display: block;
    position: relative;
    flex: 1;
    height: 2px;
    -webkit-mask: none;
    mask: none;
    --orn-width: auto;
    --orn-max: none;
    --orn-ratio: auto;
    --orn-margin: 0;
    --orn-fill: repeating-linear-gradient(90deg, var(--perf) 0 7px, transparent 7px 13px) 36px 0 / calc(100% - 36px) 100% no-repeat;
}

.inv--bilet .orn--divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 27px;
    aspect-ratio: 48 / 32;
    transform: translateY(-50%);
    background: var(--inv-primary);
    -webkit-mask: url(../../img/invitations/ornaments/celebration-scissors.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/celebration-scissors.svg) center / contain no-repeat;
}

.inv--bilet .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/celebration-stars.svg);
    --orn-ratio: 120 / 50;
    --orn-width: 52px;
    --orn-max: 52px;
    --orn-margin: -14px auto 20px;
    --orn-fill: var(--inv-ornament);
}

/* Photo: bitten corners, like a coupon. */
.inv--bilet .inv-photo__frame {
    -webkit-mask:
        radial-gradient(circle 14px at 0 0, transparent 94%, #000) 0 0 / 51% 51% no-repeat,
        radial-gradient(circle 14px at 100% 0, transparent 94%, #000) 100% 0 / 51% 51% no-repeat,
        radial-gradient(circle 14px at 0 100%, transparent 94%, #000) 0 100% / 51% 51% no-repeat,
        radial-gradient(circle 14px at 100% 100%, transparent 94%, #000) 100% 100% / 51% 51% no-repeat;
    mask:
        radial-gradient(circle 14px at 0 0, transparent 94%, #000) 0 0 / 51% 51% no-repeat,
        radial-gradient(circle 14px at 100% 0, transparent 94%, #000) 100% 0 / 51% 51% no-repeat,
        radial-gradient(circle 14px at 0 100%, transparent 94%, #000) 0 100% / 51% 51% no-repeat,
        radial-gradient(circle 14px at 100% 100%, transparent 94%, #000) 100% 100% / 51% 51% no-repeat;
}

.inv--bilet .inv-when__date {
    font-size: clamp(1.45rem, 6.9cqi, 2rem);
    letter-spacing: -.01em;
}

/* Countdown: four stubs — the number, a tear line, the unit. */
.inv--bilet .inv-countdown > div {
    padding: 14px 2px 8px;
    background:
        repeating-linear-gradient(90deg, var(--perf) 0 4px, transparent 4px 8px) 50% calc(100% - 28px) / calc(100% - 22px) 1.5px no-repeat,
        radial-gradient(circle 5.5px at 0 calc(100% - 29px), transparent 92%, var(--tint)) 0 0 / 51% 100% no-repeat,
        radial-gradient(circle 5.5px at 100% calc(100% - 29px), transparent 92%, var(--tint)) 100% 0 / 51% 100% no-repeat;
}

.inv--bilet .inv-countdown span {
    font-size: clamp(1.45rem, 7.4cqi, 2rem);
    letter-spacing: -.02em;
}

.inv--bilet .inv-countdown small {
    margin-top: 18px;
    font-weight: 600;
}

/* Program: one ticket per step — number and hour on the stub, the details under the tear line. */
.inv--bilet .inv-program__list {
    gap: 14px;
    padding-top: 0;
}

.inv--bilet .inv-program__item {
    padding: 20px 20px 24px;
    background:
        repeating-linear-gradient(90deg, var(--perf) 0 6px, transparent 6px 11px) 50% 88px / calc(100% - 40px) 2px no-repeat,
        radial-gradient(circle 9px at 0 89px, transparent 94%, var(--tint)) 0 0 / 51% 100% no-repeat,
        radial-gradient(circle 9px at 100% 89px, transparent 94%, var(--tint)) 100% 0 / 51% 100% no-repeat;
}

.inv--bilet .inv-program__index {
    position: static;
    display: block;
    width: auto;
    height: 14px;
    margin: 0 0 8px;
    border: 0;
    border-radius: 0;
    background: none;
    font: 600 .58rem/14px var(--f-body);
    letter-spacing: .26em;
    color: var(--inv-muted);
}

.inv--bilet .inv-program__index::before {
    content: "Nr. ";
}

.inv--bilet .inv-program__time {
    font-size: 2rem;
    line-height: 32px;
    letter-spacing: -.01em;
}

.inv--bilet .inv-program__title {
    margin-top: 36px;
}

.inv--bilet .inv-program__venue {
    font-size: 1.1rem;
    font-weight: 600;
}

.inv--bilet .inv-dress__text {
    font-size: 1.2rem;
    font-weight: 600;
}

.inv--bilet .inv-closing__line {
    font-size: 1.1rem;
    font-style: normal;
}

.inv--bilet .inv-monogram {
    width: 112px;
    height: 58px;
    border: 0;
    border-radius: 6px;
    background:
        radial-gradient(circle 7px at 0 50%, transparent 92%, var(--inv-primary)) 0 0 / 51% 100% no-repeat,
        radial-gradient(circle 7px at 100% 50%, transparent 92%, var(--inv-primary)) 100% 0 / 51% 100% no-repeat;
    box-shadow: none;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--inv-on-primary);
}

/* Envelope on the stage; the seal is a starburst sticker. */
.inv--bilet .inv-envelope__kicker {
    color: var(--stage-ink);
}

.inv--bilet .inv-envelope .inv-button {
    border-color: var(--inv-surface);
    background: var(--inv-surface);
    color: var(--inv-primary);
}

.inv--bilet .inv-envelope__seal {
    width: 66px;
    height: 66px;
    margin: -33px 0 0 -33px;
    clip-path: polygon(50.0% 0.0%, 57.8% 5.5%, 67.1% 3.0%, 72.6% 10.9%, 82.1% 11.7%, 84.6% 20.9%, 93.3% 25.0%, 92.5% 34.5%, 99.2% 41.3%, 95.2% 50.0%, 99.2% 58.7%, 92.5% 65.5%, 93.3% 75.0%, 84.6% 79.1%, 82.1% 88.3%, 72.6% 89.1%, 67.1% 97.0%, 57.8% 94.5%, 50.0% 100.0%, 42.2% 94.5%, 32.9% 97.0%, 27.4% 89.1%, 17.9% 88.3%, 15.4% 79.1%, 6.7% 75.0%, 7.5% 65.5%, 0.8% 58.7%, 4.8% 50.0%, 0.8% 41.3%, 7.5% 34.5%, 6.7% 25.0%, 15.4% 20.9%, 17.9% 11.7%, 27.4% 10.9%, 32.9% 3.0%, 42.2% 5.5%);
    box-shadow: inset 0 0 0 7px var(--inv-primary), inset 0 0 0 8.5px color-mix(in srgb, var(--inv-on-primary) 70%, transparent);
    font-size: .85rem;
}