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

   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;
    --seal-radius: 50%;

    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. */
.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);
    background: var(--amb-fill, var(--inv-ornament));
    -webkit-mask: var(--amb-image) center / contain no-repeat;
    mask: var(--amb-image) 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%; }


@keyframes inv-fall {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(18px, 55cqh) rotate(160deg); }
    100% { transform: translate(-12px, 118cqh) rotate(320deg); }
}

@keyframes inv-rise {
    0% { transform: translateY(120cqh); }
    100% { transform: translateY(-20cqh); }
}

@keyframes inv-twinkle {
    0%, 100% { opacity: .15; transform: scale(.7); }
    50% { opacity: var(--amb-opacity, .8); transform: scale(1); }
}

@keyframes inv-sway {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}

@keyframes inv-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ========== 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);
}

.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;
    animation: inv-bounce 2.4s ease-in-out infinite;
}

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

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);
    transition: opacity .7s ease;
}

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

.inv-envelope__body {
    position: relative;
    width: min(78vw, 340px);
    aspect-ratio: 1 / .66;
    perspective: 900px;
    border-radius: var(--env-radius);
    background: var(--env-fill);
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .45);
    animation: inv-float 3.2s ease-in-out infinite;
}

.inv-envelope__letter {
    position: absolute;
    inset: 8% 6%;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: 12px;
    border-radius: 3px;
    background: var(--inv-surface);
    font-family: var(--names-font);
    font-weight: var(--names-weight);
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--inv-primary);
    transition: transform .9s cubic-bezier(.2, .7, .2, 1) .55s;
}

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

.inv-envelope__flap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 58%;
    background: var(--env-flap);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top;
    transition: transform .7s ease .25s, z-index 0s .6s;
}

.inv-envelope__seal {
    position: absolute;
    top: 58%;
    left: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    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 6px 14px rgba(0, 0, 0, .3);
    color: var(--seal-color);
    font: 600 .95rem/1 var(--monogram-font);
    letter-spacing: .04em;
    transition: opacity .35s ease, transform .35s ease;
}

.inv-envelope.is-opening .inv-envelope__body {
    animation: none;
}

.inv-envelope.is-opening .inv-envelope__seal {
    opacity: 0;
    transform: scale(1.4);
}

.inv-envelope.is-opening .inv-envelope__flap {
    z-index: 0;
    transform: rotateX(180deg);
}

.inv-envelope.is-opening .inv-envelope__letter {
    z-index: 2;
    transform: translateY(-62%);
}

.inv-envelope.is-open {
    opacity: 0;
    pointer-events: none;
}

/* ========== motion ========== */

html.inv-js .inv [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s ease, transform .9s ease;
}

html.inv-js .inv [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@keyframes inv-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

@keyframes inv-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .inv *,
    .inv *::before,
    .inv *::after {
        animation: none !important;
        transition: none !important;
    }

    .inv__ambient {
        display: none !important;
    }

    html.inv-js .inv [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

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

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

.inv--dark .inv-envelope__letter {
    background: #F7F1EA;
    color: #3A3128;
}

/* ========== 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 {
    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-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__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;
    }
}

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