/* Digital invitations — base system shared by every template.
   Public page /i/{token}, the organizer's live preview and the template thumbnails all render the same markup
   (Components/Shared/InvitationCard.razor). A template never changes markup: it lives in the CSS file of its
   collection (css/invitations/{collection}.css) as rules under .inv--{code} that set the variables below, switch
   on ornament slots and add its own decoration. Contract and examples: docs/invitation-templates.md.

   This file is the structure (layout, slots, the envelope's parts, the RSVP form). Everything that moves, the scene
   and the intro of a cover collection and the wide layout are in invitation-motion.css (ADR-0069), loaded after it.

   Sizes follow the invitation's own width (container queries, cqi), so a 390 px preview looks like a phone. */

/* ========== page ========== */

.inv-page {
    min-height: 100vh;
    margin: 0;
    overflow-x: clip;
    background: #f4f1ec;
}

body.inv-locked {
    overflow: hidden;
}

.inv-footer {
    padding: 20px 16px 28px;
    text-align: center;
    font: 12px/1.4 "Jost", system-ui, sans-serif;
    letter-spacing: .08em;
    color: #8a8580;
}

.inv-missing {
    max-width: 520px;
    margin: 0 auto;
    padding: 110px 24px;
    text-align: center;
    font-family: "Jost", system-ui, sans-serif;
    color: #3b3228;
}

.inv-missing h1 {
    font: 300 2.2rem/1.2 "Cormorant Garamond", Georgia, serif;
}

/* ========== variables (defaults) ========== */

.inv {
    /* palette (set inline from the chosen palette) */
    --inv-bg: #F6F0E6;
    --inv-surface: #FFFDF9;
    --inv-text: #3A3128;
    --inv-primary: #8F7045;
    --inv-accent: #EADFC8;
    --inv-muted: #7A6E60;
    --inv-ornament: #B89668;
    --inv-on-primary: #FFFFFF;
    --inv-line: color-mix(in srgb, var(--inv-primary) 24%, transparent);

    /* fonts: only families declared in invitation-fonts.css */
    --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --f-body: "Jost", "Segoe UI", system-ui, sans-serif;
    --f-names: var(--f-display);
    --f-script: var(--f-names);

    /* alignment */
    --inv-align: center;
    --inv-items: center;

    /* names */
    --names-font: var(--f-names);
    --names-weight: 300;
    --names-size: clamp(3rem, 15cqi, 6.2rem);
    --names-style: normal;
    --names-transform: none;
    --names-spacing: 0;
    --names-line: .98;
    --names-color: var(--inv-primary);
    --names-shadow: 0 0 28px color-mix(in srgb, var(--inv-surface) 85%, transparent);
    --amp-font: inherit;
    --amp-style: italic;
    --amp-size: .56em;
    --amp-color: inherit;

    /* hero texts */
    --kicker-font: var(--f-body);
    --kicker-size: .7rem;
    --kicker-weight: 500;
    --kicker-spacing: .42em;
    --kicker-transform: uppercase;
    --kicker-style: normal;
    --kicker-color: var(--inv-primary);
    --date-font: var(--f-body);
    --date-size: .82rem;
    --date-weight: 400;
    --date-spacing: .42em;
    --date-short-display: block;
    --date-long-display: none;
    --place-display: block;

    /* sections */
    --heading-font: var(--f-display);
    --heading-size: 2.3rem;
    --heading-weight: 300;
    --heading-style: normal;
    --heading-transform: none;
    --heading-spacing: 0;
    --heading-color: var(--inv-primary);
    --label-font: var(--f-body);
    --label-size: .68rem;
    --label-weight: 500;
    --label-spacing: .3em;
    --label-transform: uppercase;
    --label-color: var(--inv-muted);
    --text-display-font: var(--f-display);
    --message-size: 1.32rem;
    --message-style: italic;
    --body-weight: 300;

    /* layout */
    --column-width: 660px;
    --hero-min-height: min(100svh, 900px);
    --hero-halo: radial-gradient(closest-side, color-mix(in srgb, var(--inv-bg) 75%, transparent), transparent);
    --card-bg: color-mix(in srgb, var(--inv-surface) 94%, transparent);
    --card-radius: 22px;
    --card-border: 0 solid transparent;
    --card-shadow: 0 20px 60px rgba(0, 0, 0, .12);
    --card-pad: 44px 24px;
    --card-pad-wide: 60px 48px;
    --box-bg: linear-gradient(135deg, var(--inv-surface), color-mix(in srgb, var(--inv-bg) 70%, var(--inv-surface)));
    --box-border: 1px solid var(--inv-line);
    --box-radius: 4px;
    --box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .35);

    /* photo */
    --photo-width: min(100%, 360px);
    --photo-ratio: 3 / 4;
    --photo-radius: 999px 999px 16px 16px;
    --photo-clip: none;
    --photo-rotate: 0deg;
    --photo-pad: 0;
    --photo-bg: transparent;
    --photo-shadow: 0 0 0 6px var(--inv-surface), 0 0 0 7px var(--inv-line), 0 22px 44px -22px rgba(0, 0, 0, .45);
    --photo-filter: none;

    /* buttons, monogram */
    --button-font: var(--f-body);
    --button-radius: 2px;
    --button-transform: uppercase;
    --button-spacing: .22em;
    --monogram-font: var(--f-display);
    --monogram-radius: 50%;

    /* envelope intro */
    --env-bg: radial-gradient(circle at 50% 38%, var(--inv-surface), var(--inv-bg) 72%);
    --env-fill: color-mix(in srgb, var(--inv-accent) 82%, var(--inv-ornament));
    --env-front: linear-gradient(160deg, var(--inv-accent), color-mix(in srgb, var(--inv-accent) 75%, var(--inv-ornament)));
    --env-flap: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)), var(--inv-accent));
    --env-radius: 6px;
    --seal-fill: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-ornament) 50%, #fff), var(--inv-ornament) 58%, color-mix(in srgb, var(--inv-ornament) 70%, #000));
    --seal-color: #fff;
    /* wax is never a perfect circle */
    --seal-radius: 48% 52% 50% 50% / 51% 48% 52% 49%;
    /* ADR-0104: the cord along the flap's edges and the grain of the paper */
    --env-cord: linear-gradient(90deg, color-mix(in srgb, var(--inv-ornament) 70%, #000), color-mix(in srgb, var(--inv-ornament) 55%, #fff) 50%, color-mix(in srgb, var(--inv-ornament) 70%, #000));
    --env-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");

    container-type: inline-size;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background: var(--inv-bg);
    color: var(--inv-text);
    font-family: var(--f-body);
    font-weight: var(--body-weight);
    line-height: 1.6;
    text-align: var(--inv-align);
}

.inv *,
.inv *::before,
.inv *::after {
    box-sizing: border-box;
}

/* ========== backdrop and decoration layers ========== */

.inv__backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--inv-bg);
}

/* Repeating texture over the backdrop: --texture-image is a mask tinted with --texture-fill. */
.inv__texture {
    position: absolute;
    inset: 0;
    display: none;
    background: var(--texture-fill, var(--inv-ornament));
    opacity: var(--texture-opacity, .12);
    -webkit-mask: var(--texture-image) repeat 0 0 / var(--texture-size, 240px);
    mask: var(--texture-image) repeat 0 0 / var(--texture-size, 240px);
}

/* Two large illustrations on the backdrop (e.g. branches at the top-left and bottom-right of the hero). */
.inv__deco {
    position: absolute;
    display: none;
    pointer-events: none;
    background: var(--deco-fill, var(--inv-ornament));
    -webkit-mask: var(--deco-image) center / contain no-repeat;
    mask: var(--deco-image) center / contain no-repeat;
    opacity: var(--deco-opacity, .5);
}

.inv__deco--a {
    top: var(--deco-a-top, 0);
    left: var(--deco-a-left, 0);
    right: var(--deco-a-right, auto);
    width: var(--deco-a-width, 46%);
    aspect-ratio: var(--deco-a-ratio, 1);
    transform: var(--deco-a-transform, none);
}

.inv__deco--b {
    top: var(--deco-b-top, auto);
    right: var(--deco-b-right, 0);
    left: var(--deco-b-left, auto);
    bottom: var(--deco-b-bottom, 0);
    width: var(--deco-b-width, 46%);
    aspect-ratio: var(--deco-b-ratio, 1);
    transform: var(--deco-b-transform, scale(-1, -1));
}

/* Ornament slots: hidden until a template switches them on (display: block) and sets --orn-image. */
.orn {
    display: none;
    width: var(--orn-width, 60%);
    max-width: var(--orn-max, 320px);
    aspect-ratio: var(--orn-ratio, 8);
    margin: var(--orn-margin, 0 auto);
    background: var(--orn-fill, var(--inv-ornament));
    -webkit-mask: var(--orn-image) center / contain no-repeat;
    mask: var(--orn-image) center / contain no-repeat;
    opacity: var(--orn-opacity, 1);
    transform: var(--orn-transform, none);
}

.inv-corner {
    position: absolute;
    display: none;
    width: var(--corner-size, 26%);
    max-width: var(--corner-max, 130px);
    aspect-ratio: var(--corner-ratio, 1);
    pointer-events: none;
    background: var(--corner-fill, var(--inv-ornament));
    -webkit-mask: var(--corner-image) center / contain no-repeat;
    mask: var(--corner-image) center / contain no-repeat;
    opacity: var(--corner-opacity, .9);
}

.inv-corner--tl { top: var(--corner-inset, 0); left: var(--corner-inset, 0); }
.inv-corner--tr { top: var(--corner-inset, 0); right: var(--corner-inset, 0); transform: scaleX(-1); }
.inv-corner--bl { bottom: var(--corner-inset, 0); left: var(--corner-inset, 0); transform: scaleY(-1); }
.inv-corner--br { bottom: var(--corner-inset, 0); right: var(--corner-inset, 0); transform: scale(-1, -1); }

/* Ambient particles (falling petals, twinkling stars, rising balloons…) in the first screen: 24 masked elements. The
   layer is always there (the dust of light of invitation-motion.css lives on it); a particle shows only when the
   template gives it a shape with --amb-image (a mask; "none" makes a plain dot rounded by --amb-radius). The
   animations (--amb-anim) are the inv-* keyframes of invitation-motion.css. */
.inv__ambient {
    container-type: size;
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.inv__ambient i {
    position: absolute;
    top: -8%;
    left: 50%;
    width: var(--amb-size, 16px);
    aspect-ratio: var(--amb-ratio, 1);
    border-radius: var(--amb-radius, 0);
    background: var(--amb-fill, var(--inv-ornament));
    -webkit-mask: var(--amb-image, linear-gradient(transparent, transparent)) center / contain no-repeat;
    mask: var(--amb-image, linear-gradient(transparent, transparent)) center / contain no-repeat;
    opacity: var(--amb-opacity, .7);
    animation: var(--amb-anim, inv-fall) var(--amb-duration, 14s) linear infinite;
}

.inv__ambient i:nth-child(1) { left: 6%; animation-delay: 0s; scale: .9; --amb-y: 14%; }
.inv__ambient i:nth-child(2) { left: 18%; animation-delay: -3s; scale: .6; --amb-y: 62%; }
.inv__ambient i:nth-child(3) { left: 29%; animation-delay: -7s; scale: 1.1; --amb-y: 30%; }
.inv__ambient i:nth-child(4) { left: 41%; animation-delay: -11s; scale: .7; --amb-y: 84%; }
.inv__ambient i:nth-child(5) { left: 52%; animation-delay: -5s; scale: 1; --amb-y: 8%; }
.inv__ambient i:nth-child(6) { left: 63%; animation-delay: -9s; scale: .8; --amb-y: 46%; }
.inv__ambient i:nth-child(7) { left: 74%; animation-delay: -2s; scale: 1.2; --amb-y: 72%; }
.inv__ambient i:nth-child(8) { left: 85%; animation-delay: -12s; scale: .65; --amb-y: 22%; }
.inv__ambient i:nth-child(9) { left: 94%; animation-delay: -6s; scale: .95; --amb-y: 56%; }
.inv__ambient i:nth-child(10) { left: 12%; animation-delay: -10s; scale: .75; --amb-y: 38%; }
.inv__ambient i:nth-child(11) { left: 58%; animation-delay: -13s; scale: .55; --amb-y: 90%; }
.inv__ambient i:nth-child(12) { left: 80%; animation-delay: -8s; scale: .85; --amb-y: 4%; }
.inv__ambient i:nth-child(13) { left: 3%; animation-delay: -4.5s; scale: .5; --amb-y: 48%; }
.inv__ambient i:nth-child(14) { left: 23%; animation-delay: -14.5s; scale: 1.05; --amb-y: 76%; }
.inv__ambient i:nth-child(15) { left: 35%; animation-delay: -1.5s; scale: .7; --amb-y: 18%; }
.inv__ambient i:nth-child(16) { left: 46%; animation-delay: -9.5s; scale: .6; --amb-y: 66%; }
.inv__ambient i:nth-child(17) { left: 57%; animation-delay: -6.5s; scale: 1.15; --amb-y: 34%; }
.inv__ambient i:nth-child(18) { left: 69%; animation-delay: -12.5s; scale: .8; --amb-y: 94%; }
.inv__ambient i:nth-child(19) { left: 78%; animation-delay: -3.5s; scale: .55; --amb-y: 12%; }
.inv__ambient i:nth-child(20) { left: 89%; animation-delay: -10.5s; scale: 1; --amb-y: 42%; }
.inv__ambient i:nth-child(21) { left: 98%; animation-delay: -7.5s; scale: .7; --amb-y: 80%; }
.inv__ambient i:nth-child(22) { left: 15%; animation-delay: -2.5s; scale: .9; --amb-y: 26%; }
.inv__ambient i:nth-child(23) { left: 50%; animation-delay: -11.5s; scale: .65; --amb-y: 60%; }
.inv__ambient i:nth-child(24) { left: 66%; animation-delay: -5.5s; scale: 1.1; --amb-y: 2%; }

/* ========== column, hero ========== */

.inv__column {
    position: relative;
    max-width: var(--column-width);
    margin-inline: auto;
    padding: 0 16px 40px;
}

.inv-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: var(--inv-items);
    justify-content: var(--hero-justify, center);
    min-height: var(--hero-min-height);
    padding: var(--hero-pad, 64px 8px 72px);
}

.inv--preview .inv-hero {
    min-height: 640px;
}

.inv-hero__image {
    display: none;
}

/* Decorative frame around the hero texts (arch window, double border…), switched on by templates. */
.inv-hero__frame {
    position: absolute;
    display: none;
    inset: var(--hero-frame-inset, 40px 12px);
    border: var(--hero-frame-border, 1px solid var(--inv-line));
    border-radius: var(--hero-frame-radius, 0);
    background: var(--hero-frame-bg, transparent);
    box-shadow: var(--hero-frame-shadow, none);
    pointer-events: none;
}

.inv-hero__corner {
    position: absolute;
    display: none;
    width: var(--hero-corner-size, 22%);
    max-width: var(--hero-corner-max, 140px);
    aspect-ratio: var(--hero-corner-ratio, 1);
    pointer-events: none;
    background: var(--hero-corner-fill, var(--inv-ornament));
    -webkit-mask: var(--hero-corner-image) center / contain no-repeat;
    mask: var(--hero-corner-image) center / contain no-repeat;
    opacity: var(--hero-corner-opacity, .9);
}

.inv-hero__corner--tl { top: var(--hero-corner-inset, 24px); left: var(--hero-corner-inset, 8px); }
.inv-hero__corner--tr { top: var(--hero-corner-inset, 24px); right: var(--hero-corner-inset, 8px); transform: scaleX(-1); }
.inv-hero__corner--bl { bottom: var(--hero-corner-inset, 24px); left: var(--hero-corner-inset, 8px); transform: scaleY(-1); }
.inv-hero__corner--br { bottom: var(--hero-corner-inset, 24px); right: var(--hero-corner-inset, 8px); transform: scale(-1, -1); }

.inv-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: var(--inv-items);
    max-width: 100%;
    padding: var(--hero-content-pad, 24px 12px);
    background: var(--hero-halo);
    border-radius: var(--hero-content-radius, 0);
}

.inv-hero__kicker {
    margin: 18px 0 14px;
    font-family: var(--kicker-font);
    font-size: var(--kicker-size);
    font-style: var(--kicker-style);
    font-weight: var(--kicker-weight);
    line-height: 1.5;
    letter-spacing: var(--kicker-spacing);
    text-transform: var(--kicker-transform);
    color: var(--kicker-color);
}

/* The plain name beside its letters (InvitationCard): for screen readers and search, not for the eye. */
.inv-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.inv-hero__names {
    display: flex;
    flex-direction: var(--names-direction, column);
    flex-wrap: wrap;
    align-items: var(--inv-items);
    justify-content: var(--inv-items);
    gap: var(--names-gap, 0 .3em);
    margin: 0;
    font-family: var(--names-font);
    font-weight: var(--names-weight);
    font-style: var(--names-style);
    font-size: var(--names-size);
    line-height: var(--names-line);
    letter-spacing: var(--names-spacing);
    text-transform: var(--names-transform);
    color: var(--names-color);
    text-shadow: var(--names-shadow);
    overflow-wrap: anywhere;
}

.inv-hero__amp {
    margin: .08em 0;
    font-family: var(--amp-font);
    font-size: var(--amp-size);
    font-style: var(--amp-style);
    color: var(--amp-color);
}

.inv-hero__date {
    margin: 26px 0 6px;
    font-family: var(--date-font);
    font-size: var(--date-size);
    font-weight: var(--date-weight);
    letter-spacing: var(--date-spacing);
}

.inv-hero__date-short { display: var(--date-short-display); }
.inv-hero__date-long { display: var(--date-long-display); }

.inv-hero__place {
    display: var(--place-display);
    margin: 0;
    font-size: .74rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--inv-muted);
}

.inv-hero .orn--hero { --orn-width: 46%; --orn-max: 200px; --orn-ratio: 2; }
.inv-hero .orn--hero-divider { --orn-width: 50%; --orn-max: 220px; --orn-ratio: 12; --orn-margin: 18px auto 0; }
.inv-hero .orn--hero-bottom { --orn-width: 40%; --orn-max: 180px; --orn-ratio: 6; --orn-margin: 18px auto 0; }

.inv-hero__scroll {
    position: absolute;
    bottom: 22px;
    left: 50%;
    z-index: 1;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    display: grid;
    place-items: center;
}

.inv-hero__scroll span {
    width: 12px;
    height: 12px;
    border-right: 1.5px solid var(--inv-primary);
    border-bottom: 1.5px solid var(--inv-primary);
    transform: rotate(45deg);
}

/* Photo behind the names: a template that wants it shows .inv-hero__image and .inv-hero__overlay (display: block)
   and usually hides the photo section (.inv-photo). Both exist only when the invitation has a photo. */
.inv-hero__image {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--photo-filter);
}

.inv-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: none;
    background: var(--hero-photo-overlay, linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .62)));
}

/* ========== card and sections ========== */

.inv-card {
    position: relative;
    margin-top: var(--card-margin-top, 0);
    padding: var(--card-pad);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

@container (min-width: 560px) {
    .inv-card {
        padding: var(--card-pad-wide);
    }
}

.inv-card .orn--card-top { --orn-width: 50%; --orn-max: 260px; --orn-ratio: 4; --orn-margin: -40px auto 12px; }
.inv-card .orn--card-bottom { --orn-width: 50%; --orn-max: 260px; --orn-ratio: 4; --orn-margin: 12px auto -40px; }

.inv-section {
    position: relative;
    padding: 26px 0;
}

.inv-heading {
    margin: 0 0 22px;
    font-family: var(--heading-font);
    font-size: var(--heading-size);
    font-style: var(--heading-style);
    font-weight: var(--heading-weight);
    line-height: 1.1;
    letter-spacing: var(--heading-spacing);
    text-transform: var(--heading-transform);
    color: var(--heading-color);
}

.inv-section .orn--heading { --orn-width: 30%; --orn-max: 140px; --orn-ratio: 8; --orn-margin: -12px auto 22px; }

.inv-label {
    margin: 0 0 6px;
    font-family: var(--label-font);
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    line-height: 1.4;
    letter-spacing: var(--label-spacing);
    text-transform: var(--label-transform);
    color: var(--label-color);
}

.inv-message p {
    margin: 0 auto;
    max-width: 30em;
    font-family: var(--text-display-font);
    font-size: var(--message-size);
    font-style: var(--message-style);
    font-weight: 400;
    line-height: 1.55;
    white-space: pre-line;
}

.inv-photo__frame {
    width: var(--photo-width);
    aspect-ratio: var(--photo-ratio);
    margin: 0 auto;
    padding: var(--photo-pad);
    overflow: hidden;
    border-radius: var(--photo-radius);
    clip-path: var(--photo-clip);
    background: var(--photo-bg);
    box-shadow: var(--photo-shadow);
    transform: rotate(var(--photo-rotate));
}

.inv-photo__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--photo-inner-radius, 0);
    filter: var(--photo-filter);
}

.inv-family__grid {
    display: grid;
    gap: 12px;
}

@container (min-width: 520px) {
    .inv-family__grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
}

.inv-family__item,
.inv-program__item,
.inv-countdown > div {
    border: var(--box-border);
    border-radius: var(--box-radius);
    background: var(--box-bg);
    box-shadow: var(--box-shadow);
}

.inv-family__item {
    padding: 16px 12px;
}

.inv-family__names {
    margin: 0;
    font-family: var(--family-font, var(--text-display-font));
    font-size: var(--family-size, 1.22rem);
    font-weight: 400;
    line-height: 1.3;
}

.inv-divider {
    display: flex;
    justify-content: var(--inv-items);
    padding: 6px 0;
}

.inv-divider .orn--divider { --orn-width: 82%; --orn-max: 320px; --orn-ratio: 7; }

/* Without a divider ornament the template gets a thin rule. */
.inv-divider__rule {
    display: var(--divider-rule-display, block);
    width: 120px;
    height: 1px;
    background: var(--inv-line);
}

.inv-when__date {
    margin: 0;
    font: var(--heading-weight) 2.2rem/1.15 var(--heading-font);
    font-style: var(--heading-style);
    color: var(--inv-primary);
}

.inv-when__time {
    margin: 6px 0 0;
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.inv-countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 440px;
    margin: 26px auto 0;
}

@container (max-width: 480px) {
    .inv-countdown small {
        font-size: .56rem;
        letter-spacing: .08em;
    }
}

@container (max-width: 340px) {
    .inv-countdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.inv-countdown > div {
    padding: 14px 4px 10px;
}

.inv-countdown span {
    display: block;
    font: var(--heading-weight) 2.5rem/1 var(--heading-font);
    color: var(--inv-primary);
}

.inv-countdown small {
    display: block;
    margin-top: 6px;
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--inv-muted);
}

.inv-program__list {
    display: grid;
    gap: 26px;
    margin: 0;
    padding: 12px 0 0;
    list-style: none;
}

.inv-program__item {
    position: relative;
    padding: 30px 20px 22px;
}

.inv-program__index {
    position: absolute;
    top: -15px;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    display: var(--index-display, grid);
    place-items: center;
    border: 1px solid var(--inv-line);
    border-radius: 50%;
    background: var(--inv-surface);
    font-size: .78rem;
    font-weight: 500;
    color: var(--inv-primary);
}

.inv-program__time {
    margin: 0;
    font: var(--heading-weight) 2.2rem/1 var(--heading-font);
    color: var(--inv-primary);
}

.inv-program__title {
    margin: 10px 0 6px;
    font: 600 .82rem/1.3 var(--f-body);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.inv-program__venue {
    margin: 0;
    font-family: var(--text-display-font);
    font-size: 1.25rem;
    font-weight: 400;
}

.inv-program__address {
    margin: 2px 0 0;
    font-size: .9rem;
    color: var(--inv-muted);
}

/* Times, dates and the countdown use lining figures (old-style figures look like lowercase letters). */
.inv-hero__date,
.inv-when__date,
.inv-countdown span,
.inv-program__time,
.inv-program__index {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.inv-map {
    margin-top: 14px;
}

.inv-map summary {
    list-style: none;
}

.inv-map summary::-webkit-details-marker {
    display: none;
}

.inv-map__links {
    display: grid;
    gap: 6px;
    max-width: 260px;
    margin: 12px auto 0;
}

.inv-map__links a {
    padding: 10px;
    border: 1px solid var(--inv-line);
    border-radius: var(--box-radius);
    background: var(--inv-surface);
    color: var(--inv-text);
    text-decoration: none;
    font-size: .9rem;
}

.inv-calendar {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--inv-items);
    gap: 10px;
    margin: 22px 0 0;
}

.inv-dress__text {
    margin: 0;
    font-family: var(--text-display-font);
    font-size: 1.35rem;
    font-weight: 400;
}

.inv-closing__line {
    margin: 12px 0 0;
    font-family: var(--text-display-font);
    font-size: 1.4rem;
    font-style: italic;
}

.inv-closing__names {
    margin: 4px 0 20px;
    font-family: var(--closing-font, var(--names-font));
    font-weight: var(--names-weight);
    font-style: var(--names-style);
    font-size: var(--closing-size, 2.5rem);
    line-height: 1.1;
    text-transform: var(--names-transform);
    letter-spacing: var(--names-spacing);
    color: var(--inv-primary);
}

.inv-monogram {
    display: inline-grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border: 1px solid var(--inv-line);
    border-radius: var(--monogram-radius);
    font: 400 1.05rem/1 var(--monogram-font);
    letter-spacing: .06em;
    color: var(--inv-primary);
    box-shadow: inset 0 0 0 4px var(--inv-surface), inset 0 0 0 5px var(--inv-line);
}

.inv-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    border: 1px solid var(--inv-primary);
    border-radius: var(--button-radius);
    background: var(--inv-primary);
    color: var(--inv-on-primary);
    font: 500 .72rem/1 var(--button-font);
    letter-spacing: var(--button-spacing);
    text-transform: var(--button-transform);
    text-decoration: none;
    cursor: pointer;
}

.inv-button--ghost {
    background: transparent;
    color: var(--inv-primary);
}

/* Blazor focuses the page h1 after navigation (FocusOnNavigate): no focus ring on the names. */
.inv h1:focus {
    outline: none;
}

.inv-button:focus-visible,
.inv a:focus-visible,
.inv input:focus-visible,
.inv select:focus-visible,
.inv textarea:focus-visible {
    outline: 2px solid var(--inv-primary);
    outline-offset: 2px;
}

/* Left-aligned templates keep boxes readable. */
.inv-family__item,
.inv-program__item,
.inv-map__links {
    text-align: var(--inv-align);
}

/* ========== envelope intro (only with JavaScript; never in the preview) ========== */

.inv-envelope {
    display: none;
}

/* Slots of a cover (a full-screen first page with the names and "Deschide invitația"): a collection of the kind
   "cover" (inv-k--cover) hides .inv-envelope__body and shows these (invitation-motion.css). */
.inv-envelope__photo,
.inv-envelope__scene,
.inv-envelope__door,
.inv-envelope__names,
.inv-envelope__date {
    display: none;
}

html.inv-js .inv-envelope {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 24px;
    background: var(--env-bg);
}

.inv-envelope__kicker {
    margin: 0;
    font: 500 .74rem/1.4 var(--f-body);
    letter-spacing: .36em;
    text-transform: uppercase;
    color: var(--inv-primary);
}

/* The envelope (ADR-0104): a pocket envelope as large as the screen, four flaps folded towards the middle and closed
   with the wax seal. The side flaps lie underneath, the bottom flap over them, the top flap over all with the seal at
   its point. At the tap the flaps open one after another towards the guest and the invitation itself is under them:
   nothing is drawn behind the flaps (the overlay turns transparent at the tap).
   The overlay is a single grid cell: the envelope, the guest's name and the button lie on top of each other, so the
   name and the button stay on the bottom flap whatever the size of the screen. Collections keep their variables
   (--env-front for the bottom flap, --env-flap for the top one, --env-fill for the sides, --seal-*) and their slots
   (.inv-envelope__front is the bottom flap, .inv-envelope__flap the top one). */
html.inv-js .inv-k--envelope .inv-envelope {
    --env-vh: 100vh;
    --env-pad-b: 0px;
    --env-cell: calc(var(--env-vh) - var(--env-pad-b));
    --env-h: var(--env-cell);
    /* where the point of the top flap (and the seal) is, and where the point of the bottom flap reaches */
    --env-tip: 55%;
    --env-base: 42%;
    /* how far the side flaps reach from their edge */
    --env-side: 58%;
    --env-seal-scale: 1.6;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    gap: 0;
    padding: 0 0 var(--env-pad-b);
    overflow: hidden;
    background: var(--env-fill);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@supports (height: 100dvh) {
    html.inv-js .inv-k--envelope .inv-envelope {
        --env-vh: 100dvh;
    }
}

@media (min-width: 900px) {
    html.inv-js .inv-k--envelope .inv-envelope {
        --env-seal-scale: 2;
    }
}

html.inv-js .inv-k--envelope .inv-envelope > * {
    grid-area: 1 / 1;
}

.inv-envelope__body {
    position: relative;
    width: 100%;
    height: var(--env-h);
    align-self: start;
}

/* The side flaps, underneath: shaded towards the middle, where the other flaps lie on them. */
.inv-envelope__side {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: var(--env-side);
    background: var(--env-grain), linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .1)), var(--env-fill);
}

.inv-envelope__side--l {
    left: 0;
    transform-origin: 0 50%;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.inv-envelope__side--r {
    right: 0;
    transform-origin: 100% 50%;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: var(--env-grain), linear-gradient(270deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .1)), var(--env-fill);
}

/* The bottom flap (the pocket of the envelope), over the sides; the guest's name is written on it. */
.inv-envelope__base {
    position: absolute;
    top: var(--env-base);
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .14)) drop-shadow(0 -10px 14px rgba(0, 0, 0, .08));
}

.inv-envelope__front {
    position: absolute;
    inset: 0;
    background: var(--env-front);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.inv-envelope__front::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--env-grain), linear-gradient(0deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .05));
}

/* The top flap with the seal at its point, over all. */
.inv-envelope__lid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: var(--env-tip);
    transform-origin: 50% 0;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2)) drop-shadow(0 12px 18px rgba(0, 0, 0, .12));
}

.inv-envelope__flap {
    position: absolute;
    inset: 0;
    background: var(--env-flap);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.inv-envelope__flap::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--env-grain), linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .07) 100%);
}

/* A cord along the edges of the top and bottom flaps, and a fine line pressed in a little inside them. */
.inv-envelope__lid::after,
.inv-envelope__base::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--env-cord);
    -webkit-mask: var(--env-lines) 0 0 / 100% 100% no-repeat;
    mask: var(--env-lines) 0 0 / 100% 100% no-repeat;
}

.inv-envelope__lid {
    --env-lines: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><g fill='none' stroke='black' vector-effect='non-scaling-stroke'><path d='M0 0 L50 100 L100 0' stroke-width='5' vector-effect='non-scaling-stroke'/><path d='M8 0 L50 84 L92 0' stroke-width='1' stroke-opacity='.55' vector-effect='non-scaling-stroke'/></g></svg>");
}

.inv-envelope__base {
    --env-lines: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><g fill='none' stroke='black'><path d='M0 100 L50 0 L100 100' stroke-width='5' vector-effect='non-scaling-stroke'/><path d='M8 100 L50 16 L92 100' stroke-width='1' stroke-opacity='.55' vector-effect='non-scaling-stroke'/></g></svg>");
}

/* The wax seal at the point of the top flap, with the monogram pressed in. Drawn at 60 px (collections size it so)
   and scaled to the screen. */
.inv-envelope__seal {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    transform: scale(var(--env-seal-scale, 1));
    border-radius: var(--seal-radius);
    background: var(--seal-fill);
    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--inv-ornament) 80%, #000), inset 0 0 0 6px color-mix(in srgb, var(--inv-ornament) 60%, #fff), 0 4px 10px rgba(0, 0, 0, .28);
    color: var(--seal-color);
    font: 600 .95rem/1 var(--monogram-font);
    letter-spacing: .04em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3), 0 -1px 0 rgba(0, 0, 0, .35);
}

.inv-envelope__seal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 52%), radial-gradient(circle at 68% 80%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 58%);
}

/* The guest's name on a card of the invitation's paper, laid on the bottom flap, and the invitation to tap under it:
   both on the page's own colours, so they read on any envelope, light or dark. */
html.inv-js .inv-k--envelope .inv-envelope__kicker {
    z-index: 4;
    align-self: end;
    max-width: 82vw;
    margin-bottom: calc(var(--env-h) * .115);
    padding: 10px 24px 11px;
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 45%, transparent);
    border-radius: 2px;
    background: color-mix(in srgb, var(--inv-surface) 86%, transparent);
    box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .45);
    font: italic 400 clamp(1.15rem, 5vw, 1.7rem)/1.3 var(--f-display);
    letter-spacing: .01em;
    text-transform: none;
    text-align: center;
    color: var(--inv-text);
}

html.inv-js .inv-k--envelope .inv-envelope .inv-button {
    z-index: 4;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: calc(var(--env-h) * .035 + env(safe-area-inset-bottom));
    padding: 9px 18px 9px 12px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--inv-surface) 72%, transparent);
    box-shadow: none;
    color: var(--inv-text);
    font: 500 .7rem/1.2 var(--f-body);
    letter-spacing: .3em;
    text-transform: uppercase;
    opacity: .82;
}

/* A ring that pulses like a fingertip on the paper. */
html.inv-js .inv-k--envelope .inv-envelope .inv-button::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0 3px, transparent 3.5px);
}

html.inv-js .inv-k--envelope .inv-envelope .inv-button::after {
    content: none;
}

/* A collection's drawings around the envelope (from the time it was a small envelope on a scene) stay under it. */
html.inv-js .inv-k--envelope .inv-envelope::before,
html.inv-js .inv-k--envelope .inv-envelope::after {
    z-index: 0;
}
/* The opening of the envelope (the seal that cracks, the flap, the card), the reveal of the sections and every
   keyframe are in invitation-motion.css. The invitation moves whatever the system's "reduce motion" setting says
   (ADR-0059): Windows turns animations off over Remote Desktop and on many office or battery-saving machines without
   the person asking, and the motion is what the couple chose the template for. Only the public site (landing.css)
   still follows the setting. */

/* ========== dark palettes ========== */

.inv--dark {
    --names-shadow: none;
    --card-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

/* ========== thumbnails (editor picker, gallery) ========== */

.inv-thumb {
    position: relative;
    width: calc(390px * var(--thumb-scale, .34));
    aspect-ratio: 390 / 560;
    overflow: hidden;
    border-radius: 10px;
    pointer-events: none;
}

.inv-thumb > .inv {
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    transform: scale(var(--thumb-scale, .34));
    transform-origin: 0 0;
}

.inv-thumb .inv-hero {
    min-height: 560px;
}

.inv-thumb .inv-hero__scroll,
.inv-thumb .inv__ambient,
.inv-thumb .inv__backdrop::before,
.inv-thumb .inv__backdrop::after {
    display: none !important;
}

/* ========== RSVP (inside the card) ========== */

.rsvp {
    text-align: left;
}

.rsvp .inv-heading,
.rsvp__intro {
    text-align: center;
}

.rsvp__intro {
    margin: -8px 0 18px;
    color: var(--inv-muted);
}

.rsvp__notice {
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--inv-line);
    border-radius: var(--box-radius);
    background: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface));
}

.rsvp__notice--error {
    border-color: #c96a6a;
    background: #fbeaea;
    color: #7a1f1f;
}

.rsvp__summary {
    margin: 8px 0 0;
    padding-left: 18px;
}

.rsvp-person {
    margin: 14px 0;
    padding: 16px;
    border: 1px solid var(--inv-line);
    border-radius: var(--box-radius);
    background: var(--inv-surface);
}

.rsvp-person__name {
    padding: 0 4px;
    font: 400 1.25rem/1.3 var(--text-display-font);
    color: var(--inv-text);
}

.rsvp-person--slot {
    border-style: dashed;
}

.rsvp-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.rsvp-choice label {
    display: block;
    cursor: pointer;
}

.rsvp-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.rsvp-choice span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px;
    border: 1px solid var(--inv-line);
    border-radius: var(--button-radius);
    font: 500 .72rem/1.2 var(--button-font);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--inv-primary);
    background: var(--inv-surface);
}

.rsvp-choice input:checked + span {
    border-color: var(--inv-primary);
    background: var(--inv-primary);
    color: var(--inv-on-primary);
}

.rsvp-choice input:focus-visible + span {
    outline: 2px solid var(--inv-primary);
    outline-offset: 2px;
}

/* ADR-0036: nothing is chosen for who has not answered; the details open with "Particip". */
.rsvp-person__pending {
    margin: 4px 4px 0;
    font-size: .85rem;
    font-style: italic;
    color: var(--inv-muted, var(--inv-text));
    opacity: .8;
}

.rsvp-person:has(.rsvp-choice input:checked) .rsvp-person__pending {
    display: none;
}

.rsvp-person__details {
    display: none;
    gap: 10px;
    margin-top: 12px;
}

.rsvp-person:has(.rsvp-choice input[value="true" i]:checked) .rsvp-person__details {
    display: grid;
}

.rsvp-remove {
    margin-top: 10px;
}

.rsvp-person:has(.rsvp-remove input:checked) :is(.rsvp-choice, .rsvp-person__details, .rsvp-person__pending) {
    display: none;
}

.rsvp-person:has(.rsvp-remove input:checked) .rsvp-person__name {
    text-decoration: line-through;
    opacity: .6;
}

/* Free seats: one "Adaugă o persoană" at a time; an opened seat shows the fields and "Elimină". */
.rsvp-person.rsvp-person--slot {
    padding: 0;
    border: none;
    background: none;
}

.rsvp-slot__toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.rsvp-slot__add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px dashed var(--inv-primary);
    border-radius: var(--button-radius);
    font: 500 .72rem/1.2 var(--button-font);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--inv-primary);
    cursor: pointer;
}

.rsvp-slot__toggle:focus-visible + .rsvp-slot__add {
    outline: 2px solid var(--inv-primary);
    outline-offset: 2px;
}

.rsvp-slot__body {
    display: none;
}

.rsvp-person--slot:has(.rsvp-slot__toggle:checked) {
    padding: 16px;
    border: 1px dashed var(--inv-line);
    border-radius: var(--box-radius);
    background: var(--inv-surface);
}

.rsvp-person--slot:has(.rsvp-slot__toggle:checked) .rsvp-slot__add {
    display: none;
}

.rsvp-person--slot:has(.rsvp-slot__toggle:checked) .rsvp-slot__body {
    display: grid;
    gap: 10px;
}

.rsvp-person--slot:has(.rsvp-slot__toggle:not(:checked)) ~ .rsvp-person--slot:has(.rsvp-slot__toggle:not(:checked)) {
    display: none;
}

.rsvp-slot__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rsvp-slot__remove {
    font-size: .8rem;
    text-decoration: underline;
    color: var(--inv-primary);
    cursor: pointer;
}

.rsvp__seats {
    margin: 4px 0 14px;
    font-size: .85rem;
    opacity: .8;
}

.rsvp-field.rsvp-person__age {
    display: none;
}

.rsvp-person:has(.rsvp-child input:checked) .rsvp-person__age {
    display: flex;
}

.rsvp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.rsvp-field {
    display: flex;
    flex: 1 1 170px;
    flex-direction: column;
    gap: 4px;
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--inv-muted);
}

.rsvp-field--narrow {
    flex: 0 1 110px;
}

.rsvp-field input,
.rsvp-field select,
.rsvp-field textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--inv-line);
    border-radius: var(--button-radius);
    background: color-mix(in srgb, var(--inv-bg) 55%, var(--inv-surface));
    color: var(--inv-text);
    font: 400 16px/1.4 var(--f-body);
}

.rsvp-check {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: .92rem;
    cursor: pointer;
}

.rsvp-check input {
    width: 20px;
    height: 20px;
    flex: none;
    accent-color: var(--inv-primary);
}

.rsvp-consent {
    align-items: flex-start;
    margin: 16px 0;
    font-size: .8rem;
    color: var(--inv-muted);
}

.rsvp-whatsapp {
    display: grid;
    gap: 10px;
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--inv-line);
    border-radius: var(--button-radius);
}

.rsvp-whatsapp .rsvp-check {
    align-items: flex-start;
    font-size: .8rem;
    color: var(--inv-muted);
}

.rsvp__actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.rsvp__actions .inv-button {
    width: 100%;
    min-height: 52px;
}

.rsvp__decline {
    margin-top: 10px;
    text-align: center;
}

.rsvp__decline button {
    border: 0;
    background: none;
    color: var(--inv-muted);
    font: 400 .9rem var(--f-body);
    text-decoration: underline;
    cursor: pointer;
}

.rsvp__change {
    margin-top: 12px;
}

.rsvp__change > summary {
    display: flex;
    justify-content: center;
    list-style: none;
}

.rsvp__change > summary::-webkit-details-marker {
    display: none;
}

.rsvp__privacy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rsvp__privacy {
    margin: 12px 0 0;
    font-size: .74rem;
    text-align: center;
    color: var(--inv-muted);
}

/* ========== public demonstration (/demo/{code}) ========== */

.inv-demo {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60; /* above the envelope: the way back to the site is always at hand */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(29, 18, 51, .96);
    color: #fff;
    font: 400 .82rem/1.3 "Outfit", system-ui, sans-serif;
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .5);
}

.inv-demo p {
    margin: 0;
}

.inv-demo__what {
    display: grid;
}

.inv-demo__what strong {
    font-size: .9rem;
    font-weight: 600;
}

.inv-demo__what span {
    opacity: .75;
}

.inv-demo__palettes {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inv-demo__palettes a {
    display: block;
    width: 26px;
    height: 26px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
}

.inv-demo__palettes a[aria-current="true"] {
    border-color: #fff;
    box-shadow: 0 0 0 2px #e0559b;
}

.inv-demo__links {
    display: flex;
    align-items: center;
    gap: 14px;
}

.inv-demo__links a {
    color: #ffc7e3;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.inv-demo__links a.inv-demo__use {
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #c2185b, #6b3fa0);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

/* The bar never covers the end of the invitation. */
.inv-page:has(.inv-demo) {
    padding-bottom: 76px;
}

@media (max-width: 560px) {
    .inv-page:has(.inv-demo) {
        padding-bottom: 132px;
    }
}

/* The intro of a demonstration (an envelope or a cover) keeps its button above the bar. */
html.inv-js .inv-page:has(.inv-demo) .inv-envelope {
    --env-pad-b: 92px;
    padding-bottom: 92px;
}

@media (max-width: 560px) {
    html.inv-js .inv-page:has(.inv-demo) .inv-envelope {
        --env-pad-b: 148px;
        padding-bottom: 148px;
    }
}

.inv-button[disabled] {
    opacity: .55;
    cursor: not-allowed;
}
/* ========== development gallery (/dev/invitatii) ========== */

.inv-gallery {
    padding: 16px;
    font-family: system-ui, sans-serif;
    background: #f4f1ec;
}

.inv-gallery h2 {
    margin: 24px 0 4px;
    font: 600 18px/1.3 system-ui, sans-serif;
}

.inv-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.inv-gallery__item {
    display: block;
    color: #222;
    font-size: 13px;
    text-decoration: none;
}

.inv-gallery__item small {
    display: block;
    color: #777;
}

/* ADR-0102: the sound of the invitation (the hosts' voice, then the song). The button in the corner starts and stops
   the sound; without JavaScript nothing plays and nothing is shown. */
.inv-sound { position: fixed; right: 16px; bottom: 16px; z-index: 60; }
.inv-sound__toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .45); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.inv-sound__toggle svg { width: 22px; height: 22px; fill: currentColor; }
.inv-sound__toggle[data-state="off"] .inv-sound__on, .inv-sound__toggle[data-state="on"] .inv-sound__off { display: none; }
html:not(.inv-js) .inv-sound { display: none; }