/* ==========================================================================
   SmartInvites design kit — new-generation invitation designs.
   Markup: app/Views/invitations/templates/kit.php. Registry: app/Config/InvitationTemplates.php.
   Sizes use container-query units (cqw) so one card scales from the 235px homepage
   preview to the 540px public invitation. Palette variables (--invite-*) come from
   app.css; typography presets and the six layouts are defined here, then each design
   adds its own pattern, artwork placement and details under `.invitation-<variant>`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */
.invitation.kit {
    --k-paper: color-mix(in srgb, var(--invite-bg) 30%, #fffdf8);
    --k-ink: var(--invite-ink);
    --k-soft: color-mix(in srgb, var(--invite-ink) 64%, transparent);
    --k-line: color-mix(in srgb, var(--invite-gold) 55%, transparent);
    --k-accent: var(--invite-accent-strong);
    --k-accent-soft: var(--invite-accent);
    --k-gold: var(--invite-gold);
    --k-tint: color-mix(in srgb, var(--invite-accent) 14%, transparent);
    --k-leaf: var(--invite-leaf, #7b9b8a);
    --k-flower: var(--invite-flower, #d9a3a9);
    --k-rose-light: var(--invite-rose-light, #f1dcd6);
    --k-rose-deep: var(--invite-rose-deep, #6d3038);
    --k-display: "Playfair Display", Georgia, serif;
    --k-body: "Cormorant Garamond", Georgia, serif;
    --k-label: Inter, "Segoe UI", sans-serif;
    --k-names-size: 9.6cqw;
    --k-names-weight: 500;
    --k-names-style: normal;
    --k-names-transform: none;
    --k-names-spacing: -.01em;
    container-type: inline-size;
    aspect-ratio: auto;
    padding: 3cqw;
    border-radius: 2.4cqw;
    overflow: visible;
    background: var(--invite-bg);
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--invite-ink) 45%, transparent);
    color: var(--k-ink);
    font-family: var(--k-body);
    text-align: center;
}
.invitation.kit.palette-midnight {
    --k-paper: color-mix(in srgb, var(--invite-bg) 86%, #ffffff);
    --k-soft: color-mix(in srgb, var(--invite-ink) 72%, transparent);
    --k-line: color-mix(in srgb, var(--invite-gold) 50%, transparent);
    --k-accent: var(--invite-gold);
    --k-tint: color-mix(in srgb, var(--invite-gold) 14%, transparent);
}
.invitation.kit.invitation-compact { aspect-ratio: 10 / 17.2; overflow: hidden; }
.kit .kit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 1.4cqw;
    background: var(--k-paper);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--invite-gold) 28%, transparent);
    overflow: hidden;
    isolation: isolate;
}
.kit.invitation-compact .kit-card { height: 100%; justify-content: center; }
.kit.invitation-compact .kit-footer { margin-top: 4cqw; }
.kit .kit-pattern, .kit .kit-art, .kit .kit-frame, .kit .kit-orn-scatter { position: absolute; pointer-events: none; }
.kit .kit-pattern { inset: 0; z-index: 0; opacity: .55; }
.kit .kit-art { z-index: 0; background: var(--kit-art) no-repeat center / contain; }
.kit .kit-frame { inset: 2.4cqw; z-index: 3; border: 1px solid var(--k-line); border-radius: .6cqw; }
.kit .kit-frame::after { content: ""; position: absolute; inset: .8cqw; border: 1px solid color-mix(in srgb, var(--invite-gold) 22%, transparent); border-radius: .4cqw; }
.kit .kit-orn-scatter { inset: 0; z-index: 1; color: var(--k-accent-soft); opacity: .38; overflow: hidden; }
.kit .kit-orn-scatter svg { position: absolute; top: -2%; left: -4%; width: 108%; height: auto; }
.kit .kit-orn { display: inline-block; color: var(--k-accent); line-height: 0; }
.kit .kit-orn svg { display: block; width: 100%; height: auto; }
.kit .kit-orn-top { width: 30cqw; margin: 0 auto 2.2cqw; }
.kit .kit-orn-divider { width: 34cqw; margin: 3.2cqw auto 0; opacity: .9; }
.kit .kit-orn-bottom { width: 12cqw; margin: 4cqw auto 0; opacity: .75; }
.kit .kit-orn-icon { width: 10cqw; }

/* --------------------------------------------------------------------------
   1. Typography presets
   -------------------------------------------------------------------------- */
.kit.type-classic { --k-display: "Playfair Display", Georgia, serif; --k-body: "Cormorant Garamond", Georgia, serif; --k-label: Inter, sans-serif; }
.kit.type-elegant { --k-display: "Cormorant Garamond", Georgia, serif; --k-body: "Cormorant Garamond", Georgia, serif; --k-label: Inter, sans-serif; --k-names-size: 10.4cqw; --k-names-weight: 500; }
.kit.type-modern { --k-display: Montserrat, Inter, sans-serif; --k-body: Inter, sans-serif; --k-label: Montserrat, Inter, sans-serif; --k-names-size: 7.6cqw; --k-names-weight: 600; --k-names-spacing: -.02em; }
.kit.type-script { --k-display: "Marck Script", cursive; --k-body: "Cormorant Garamond", Georgia, serif; --k-label: Inter, sans-serif; --k-names-size: 11.5cqw; --k-names-weight: 400; }
.kit.type-playful { --k-display: Caveat, "Marck Script", cursive; --k-body: Montserrat, Inter, sans-serif; --k-label: Montserrat, Inter, sans-serif; --k-names-size: 12.5cqw; --k-names-weight: 700; --k-names-spacing: 0; }
.kit.type-bold { --k-display: Oswald, Montserrat, sans-serif; --k-body: Inter, sans-serif; --k-label: Oswald, Montserrat, sans-serif; --k-names-size: 9cqw; --k-names-weight: 600; --k-names-transform: uppercase; --k-names-spacing: .04em; }

/* --------------------------------------------------------------------------
   2. Shared content blocks
   -------------------------------------------------------------------------- */
.kit .kit-hero { position: relative; z-index: 2; }
.kit .kit-kind {
    display: inline-block;
    font: 600 2cqw/1 var(--k-label);
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--k-accent);
}
.kit .kit-body { position: relative; z-index: 2; padding: 0 7.5cqw; }
.kit .kit-recipient { margin: 0 0 3cqw; display: grid; gap: .6cqw; }
.kit .kit-recipient small { font: 500 1.9cqw/1 var(--k-label); letter-spacing: .22em; text-transform: uppercase; color: var(--k-soft); }
.kit .kit-recipient strong { font: italic 500 3.6cqw/1.2 var(--k-body); color: var(--k-ink); }
.kit.type-modern .kit-recipient strong, .kit.type-bold .kit-recipient strong, .kit.type-playful .kit-recipient strong { font-style: normal; font-weight: 600; font-size: 3cqw; }
.kit .kit-intro { margin: 0 auto; max-width: 80%; font: italic 400 3.1cqw/1.45 var(--k-body); color: var(--k-soft); }
.kit.type-modern .kit-intro, .kit.type-bold .kit-intro, .kit.type-playful .kit-intro { font-style: normal; font-size: 2.6cqw; line-height: 1.55; }
.kit .kit-names {
    margin: 2.4cqw 0 0;
    font-family: var(--k-display);
    font-weight: var(--k-names-weight);
    font-style: var(--k-names-style);
    font-size: var(--k-names-size);
    line-height: 1.04;
    letter-spacing: var(--k-names-spacing);
    text-transform: var(--k-names-transform);
    color: var(--k-ink);
    text-wrap: balance;
}
.kit .kit-age-line { margin: 1.6cqw 0 0; font: 600 2.6cqw/1 var(--k-label); letter-spacing: .12em; text-transform: uppercase; color: var(--k-accent); }
.kit .kit-age-line b { font: 700 5.2cqw/1 var(--k-display); letter-spacing: 0; margin-right: .3em; }
.kit .kit-reply { margin: 3cqw auto 0; max-width: 82%; font: italic 400 2.9cqw/1.45 var(--k-body); color: var(--k-soft); }
.kit.type-modern .kit-reply, .kit.type-bold .kit-reply, .kit.type-playful .kit-reply { font-style: normal; font-size: 2.5cqw; }
.kit .kit-when { margin: 4.6cqw 0 0; display: grid; gap: 1.2cqw; justify-items: center; }
.kit .kit-weekday { font: italic 400 2.5cqw/1 var(--k-body); color: var(--k-soft); text-transform: lowercase; }
.kit.type-modern .kit-weekday, .kit.type-bold .kit-weekday, .kit.type-playful .kit-weekday { font-style: normal; font-size: 2cqw; letter-spacing: .2em; text-transform: uppercase; }
.kit .kit-date {
    position: relative;
    display: inline-block;
    padding: 0 4cqw;
    font: 500 4.8cqw/1.1 var(--k-display);
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--k-ink);
}
.kit .kit-date::before, .kit .kit-date::after { content: ""; position: absolute; top: 50%; width: 12cqw; height: 1px; background: var(--k-line); }
.kit .kit-date::before { right: 100%; }
.kit .kit-date::after { left: 100%; }
.kit.type-playful .kit-date { font-size: 6cqw; letter-spacing: .02em; }
.kit.type-bold .kit-date { font-size: 5.6cqw; letter-spacing: .08em; }
.kit .kit-venue { margin: 0; font: 500 2.15cqw/1.5 var(--k-label); letter-spacing: .24em; text-transform: uppercase; color: var(--k-accent); }
.kit .kit-venue em { margin: 0 1.4cqw; font-style: normal; color: var(--k-line); }
.kit .kit-count { margin: 4.6cqw 0 0; display: grid; justify-items: center; gap: 1cqw; }
.kit .kit-count .invitation-count-label { margin: 0; font: 500 1.85cqw/1.3 var(--k-label); letter-spacing: .22em; text-transform: uppercase; color: var(--k-soft); text-align: center; }
.kit .kit-countdown { display: inline-flex; align-items: baseline; gap: 1.2cqw; padding: 0; background: none; border: 0; box-shadow: none; }
.kit .kit-countdown strong { font: 500 5.2cqw/1 var(--k-display); color: var(--k-ink); font-variant-numeric: tabular-nums; }
.kit .kit-countdown small { font: italic 400 2.7cqw/1 var(--k-body); color: var(--k-soft); }
.kit.type-modern .kit-countdown small, .kit.type-bold .kit-countdown small, .kit.type-playful .kit-countdown small { font-style: normal; font-size: 2.2cqw; letter-spacing: .12em; text-transform: uppercase; }
.kit.is-past .kit-count { margin-top: 3.6cqw; }

.kit .kit-extended { position: relative; z-index: 2; margin-top: 6cqw; padding: 0 7.5cqw; }
.kit.invitation-compact .kit-extended { display: none; }
.kit .kit-quote { margin: 0 auto; max-width: 86%; }
.kit .kit-quote p { margin: 0; font: italic 400 3cqw/1.5 var(--k-body); color: var(--k-soft); }
.kit.type-modern .kit-quote p, .kit.type-bold .kit-quote p, .kit.type-playful .kit-quote p { font-style: normal; font-size: 2.5cqw; }
.kit .kit-quote p::before { content: "“"; color: var(--k-gold); margin-right: .2em; }
.kit .kit-quote p::after { content: "”"; color: var(--k-gold); margin-left: .2em; }

.kit .kit-timeline { list-style: none; margin: 6cqw 0 0; padding: 0; display: grid; text-align: left; }
.kit .kit-timeline li { position: relative; display: grid; grid-template-columns: 11cqw 4.4cqw 1fr; column-gap: 2.4cqw; align-items: start; padding: 0 0 3.6cqw; }
.kit .kit-timeline li[hidden] { display: none; }
.kit .kit-timeline li::before { content: ""; position: absolute; left: calc(11cqw + 2.4cqw + 2.2cqw - .5px); top: 4.6cqw; bottom: -.4cqw; width: 1px; background: var(--k-line); }
.kit .kit-timeline li:last-of-type::before { display: none; }
.kit .kit-timeline li:has(~ li:not([hidden]))::before { display: block; }
.kit .kit-time { font: 600 2.5cqw/1.7 var(--k-label); letter-spacing: .06em; text-align: right; font-variant-numeric: tabular-nums; color: var(--k-ink); }
.kit .kit-dot { position: relative; z-index: 1; width: 4.4cqw; height: 4.4cqw; display: grid; place-items: center; border-radius: 50%; background: var(--k-paper); border: 1px solid var(--k-gold); color: var(--k-accent); }
.kit .kit-dot svg { width: 2.8cqw; height: 2.8cqw; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kit .kit-stop { display: block; color: inherit; text-decoration: none; }
.kit .kit-stop strong { display: block; font: 600 2.35cqw/1.6 var(--k-label); letter-spacing: .16em; text-transform: uppercase; color: var(--k-accent); }
.kit .kit-stop p { margin: .1cqw 0 0; font: 400 2.7cqw/1.4 var(--k-body); color: var(--k-soft); }
.kit.type-modern .kit-stop p, .kit.type-bold .kit-stop p, .kit.type-playful .kit-stop p { font-size: 2.3cqw; }
.kit a.kit-stop p { text-decoration: underline; text-decoration-color: var(--k-line); text-underline-offset: .3em; }
.kit .kit-simple-agenda { margin: 5cqw auto 0; display: inline-grid; gap: .6cqw; padding: 2.4cqw 6cqw; border: 1px solid var(--k-line); border-radius: 999px; }
.kit .kit-simple-agenda small { font: 600 1.8cqw/1 var(--k-label); letter-spacing: .24em; text-transform: uppercase; color: var(--k-accent); }
.kit .kit-simple-agenda strong { font: 500 4cqw/1 var(--k-display); color: var(--k-ink); font-variant-numeric: tabular-nums; }
.kit .kit-christening { margin: 5cqw 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.kit .kit-christening article[hidden] { display: none; }
.kit .kit-christening small { display: block; font: 600 1.75cqw/1.4 var(--k-label); letter-spacing: .24em; text-transform: uppercase; color: var(--k-accent); }
.kit .kit-christening strong { display: block; margin-top: .8cqw; font: 400 2.8cqw/1.35 var(--k-body); color: var(--k-ink); }
.kit .kit-notes { margin: 6cqw 0 0; padding: 4.4cqw 0 0; border-top: 1px solid var(--k-line); display: grid; grid-template-columns: repeat(auto-fit, minmax(28%, 1fr)); gap: 3.6cqw 4cqw; }
.kit .kit-notes div[hidden] { display: none; }
.kit .kit-notes dt { font: 600 1.75cqw/1.4 var(--k-label); letter-spacing: .24em; text-transform: uppercase; color: var(--k-accent); }
.kit .kit-notes dd { margin: 1cqw 0 0; font: 400 2.6cqw/1.45 var(--k-body); color: var(--k-ink); }
.kit.type-modern .kit-notes dd, .kit.type-bold .kit-notes dd, .kit.type-playful .kit-notes dd { font-size: 2.2cqw; }
.kit .kit-deadline { margin: 5cqw 0 0; font: italic 400 2.6cqw/1.4 var(--k-body); color: var(--k-soft); }
.kit .kit-deadline strong { font-style: normal; font-weight: 600; color: var(--k-ink); }
.kit .kit-map { display: inline-block; margin-top: 2cqw; font: 500 2.1cqw/1.4 var(--k-label); letter-spacing: .12em; text-transform: uppercase; color: var(--k-accent); }
.kit .kit-rsvp {
    display: inline-block;
    margin: 4.6cqw 0 0;
    padding: 2.2cqw 6cqw;
    border: 1px solid var(--k-ink);
    border-radius: 999px;
    font: 600 2.1cqw/1.2 var(--k-label);
    letter-spacing: .22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--k-ink);
    background: transparent;
    transition: background .25s ease, color .25s ease;
}
.kit a.kit-rsvp:hover { background: var(--k-ink); color: var(--k-paper); }
.kit.palette-midnight .kit-rsvp { border-color: var(--k-gold); color: var(--k-gold); }
.kit .kit-footer { position: relative; z-index: 2; margin-top: auto; padding: 6cqw 7.5cqw 5cqw; display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; font: italic 400 2cqw/1.3 var(--k-body); color: var(--k-soft); }
.kit.invitation-compact .kit-footer { padding-top: 4cqw; }
.kit .kit-powered { font: 500 1.7cqw/1.3 var(--k-label); letter-spacing: .08em; color: var(--k-soft); text-decoration: none; white-space: nowrap; }

/* Photo slot — shape decided by the layout; collapses when hidden */
.kit .kit-photo { --photo-zoom: 1; --photo-x: 50%; --photo-y: 50%; position: relative; margin: 0; width: auto; height: auto; overflow: hidden; inset: auto; transform: none; z-index: 2; touch-action: none; cursor: grab; }
.kit .kit-photo.is-dragging { cursor: grabbing; }
.kit .kit-photo[hidden] { display: none !important; }
.kit .kit-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--photo-x) var(--photo-y); transform: scale(var(--photo-zoom)); transform-origin: var(--photo-x) var(--photo-y); }


/* --------------------------------------------------------------------------
   2b. Procedural scenes (App\Libraries\Scenes) and the text panel
   -------------------------------------------------------------------------- */
.kit .kit-scene-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.kit .kit-scene-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kit.kit-has-scene .kit-pattern { display: none; }
.kit.kit-has-scene .kit-frame { z-index: 4; }
.kit .kit-main { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; }
.kit.kit-has-panel .kit-main { margin: 0 5.5cqw 5.5cqw; padding: 5cqw 0 0; border-radius: 2cqw; background: color-mix(in srgb, var(--k-paper) 90%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-gold) 40%, transparent), 0 2cqw 6cqw color-mix(in srgb, var(--invite-ink) 22%, transparent); backdrop-filter: blur(6px); }
.kit.kit-has-panel .kit-body, .kit.kit-has-panel .kit-extended { padding-inline: 6cqw; }
.kit.kit-has-panel .kit-footer { padding: 5cqw 6cqw 4.5cqw; }
.kit.kit-has-panel .kit-frame { display: none; }
.kit.kit-has-panel.kit-poster .kit-hero, .kit.kit-has-panel.kit-ticket .kit-hero { margin-bottom: 4cqw; }
.kit.kit-has-panel.kit-poster .kit-scene::after, .kit.kit-has-scene.kit-poster .kit-scene::after { background: none; }
.kit.kit-has-scene.kit-poster .kit-scene { mix-blend-mode: normal; }
.kit.kit-has-scene.kit-ticket .kit-hero { background: color-mix(in srgb, var(--k-accent) 82%, transparent); backdrop-filter: blur(3px); }
.kit.kit-has-scene .kit-kind { text-shadow: 0 1px 0 color-mix(in srgb, var(--k-paper) 60%, transparent); }
.kit.kit-has-scene.kit-monogram .kit-medallion, .kit.kit-has-scene.kit-arch .kit-arch { box-shadow: 0 0 0 1px var(--k-gold), 0 0 0 1.6cqw var(--k-paper), 0 0 0 calc(1.6cqw + 1px) var(--k-line), 0 2cqw 5cqw color-mix(in srgb, var(--invite-ink) 25%, transparent); }

/* --------------------------------------------------------------------------
   3. Layouts
   -------------------------------------------------------------------------- */
/* 3a. Editorial — centred classic, artwork in the corners */
.kit-editorial .kit-card { padding-top: 12cqw; }
.kit-editorial .kit-hero { display: grid; justify-items: center; gap: 2cqw; padding: 0 7.5cqw; margin-bottom: 5.5cqw; }
.kit-editorial .kit-orn-top { margin-bottom: 0; }
.kit-editorial .kit-art { top: -3cqw; left: -3cqw; width: 46cqw; height: 46cqw; }
.kit-editorial .kit-art::after { content: ""; position: absolute; right: -80cqw; bottom: -80cqw; width: 40cqw; height: 40cqw; background: inherit; transform: rotate(180deg); }
.kit-editorial .kit-hero .kit-photo { width: 44cqw; aspect-ratio: 4 / 5; margin-top: 3cqw; border-radius: 50cqw 50cqw 1.2cqw 1.2cqw; box-shadow: 0 0 0 1px var(--k-line), 0 0 0 1.4cqw var(--k-paper), 0 0 0 calc(1.4cqw + 1px) var(--k-line); }
.kit-editorial .kit-venue-icon { width: 11cqw; color: var(--k-accent); }
.kit-editorial .kit-venue-icon svg { width: 100%; height: auto; }

/* 3b. Arch — big arched window with artwork or the photo */
.kit-arch .kit-card { padding-top: 9cqw; }
.kit-arch .kit-hero { display: grid; justify-items: center; gap: 2.4cqw; padding: 0 7.5cqw; margin-bottom: 5cqw; }
.kit-arch .kit-arch { position: relative; width: 62cqw; aspect-ratio: 4 / 5.2; border-radius: 31cqw 31cqw 1.6cqw 1.6cqw; overflow: hidden; background: var(--k-tint); box-shadow: 0 0 0 1px var(--k-line), 0 0 0 1.6cqw var(--k-paper), 0 0 0 calc(1.6cqw + 1px) var(--k-line); }
.kit-arch .kit-arch-art { position: absolute; inset: 0; background: var(--kit-art) no-repeat center / cover; }
.kit-arch .kit-arch-icon { position: absolute; left: 50%; top: 50%; width: 16cqw; transform: translate(-50%, -50%); color: var(--k-accent); opacity: .9; }
.kit-arch .kit-arch .kit-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.kit-arch.invitation-has-photo .kit-arch-art, .kit-arch.invitation-has-photo .kit-arch-icon { display: none; }
.kit-arch .kit-orn-top { margin: 1cqw auto 0; width: 22cqw; }

/* 3c. Poster — full-bleed scene on top, badge, optional round photo */
.kit-poster .kit-card { padding-top: 0; }
.kit-poster .kit-hero { position: relative; height: 58cqw; margin-bottom: 6cqw; display: grid; align-content: start; justify-items: center; padding-top: 5cqw; }
.kit-poster .kit-scene { position: absolute; inset: 0; background: var(--kit-art) no-repeat center top / cover; }
.kit-poster .kit-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--k-paper) 100%); }
.kit-poster .kit-kind { position: relative; padding: 1.2cqw 3cqw; border-radius: 999px; background: color-mix(in srgb, var(--k-paper) 82%, transparent); backdrop-filter: blur(4px); }
.kit-poster .kit-badge { position: absolute; top: 5cqw; right: 6cqw; display: grid; place-items: center; align-content: center; gap: .4cqw; width: 17cqw; height: 17cqw; border-radius: 50%; background: var(--k-accent); color: var(--k-paper); box-shadow: 0 0 0 1cqw var(--k-paper), 0 0 0 calc(1cqw + 1px) var(--k-accent); transform: rotate(8deg); }
.kit-poster .kit-badge b { font: 700 8cqw/.86 var(--k-display); }
.kit-poster .kit-badge small { font: 600 1.6cqw/1 var(--k-label); letter-spacing: .12em; text-transform: uppercase; }
.kit-poster .kit-badge-year b { font-size: 4.6cqw; letter-spacing: .02em; }
.kit-poster .kit-hero .kit-photo { position: absolute; left: 50%; bottom: -12cqw; width: 34cqw; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 1.4cqw var(--k-paper), 0 0 0 calc(1.4cqw + 1px) var(--k-line), 0 1.6cqw 4cqw color-mix(in srgb, var(--invite-ink) 25%, transparent); }
.kit-poster.invitation-has-photo .kit-hero { margin-bottom: 16cqw; }
.kit-poster .kit-orn-top { position: absolute; left: 6cqw; top: 6cqw; width: 14cqw; margin: 0; color: var(--k-paper); filter: drop-shadow(0 2px 6px rgba(0,0,0,.2)); }

/* 3d. Ticket — coloured head with big number/date, perforation, paper body */
.kit-ticket .kit-card { padding-top: 0; }
.kit-ticket .kit-hero { position: relative; padding: 7cqw 7.5cqw 9cqw; margin-bottom: 6cqw; display: grid; justify-items: center; gap: 1.6cqw; background: var(--k-accent); color: var(--k-paper); overflow: hidden; }
.kit-ticket .kit-hero .kit-kind { color: color-mix(in srgb, var(--k-paper) 85%, transparent); }
.kit-ticket .kit-ticket-date { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2.4cqw; margin-top: 1cqw; }
.kit-ticket .kit-ticket-date b { font: 500 20cqw/.9 var(--k-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kit-ticket .kit-ticket-date span { display: grid; gap: .4cqw; text-align: left; border-left: 1px solid color-mix(in srgb, var(--k-paper) 45%, transparent); padding-left: 2.4cqw; }
.kit-ticket .kit-ticket-date i { font: 600 2.4cqw/1.3 var(--k-label); letter-spacing: .22em; text-transform: uppercase; font-style: normal; }
.kit-ticket .kit-ticket-number b { display: block; font: 600 26cqw/.9 var(--k-display); letter-spacing: -.02em; }
.kit-ticket .kit-venue-icon { width: 12cqw; opacity: .95; }
.kit-ticket .kit-venue-icon svg { width: 100%; height: auto; }
.kit-ticket .kit-perforation { position: absolute; left: 0; right: 0; bottom: -1px; height: 3cqw; color: var(--k-paper); }
.kit-ticket .kit-perforation svg { width: 100%; height: 100%; }
.kit-ticket .kit-perforation::before, .kit-ticket .kit-perforation::after { content: ""; position: absolute; top: 50%; width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--k-paper); transform: translateY(-50%); }
.kit-ticket .kit-perforation::before { left: -2.5cqw; }
.kit-ticket .kit-perforation::after { right: -2.5cqw; }
.kit-ticket .kit-hero .kit-photo { width: 26cqw; aspect-ratio: 1; border-radius: 50%; margin-top: 1cqw; box-shadow: 0 0 0 1cqw var(--k-paper); }
.kit-ticket .kit-art { right: -6cqw; top: -4cqw; width: 52cqw; height: 40cqw; opacity: .9; z-index: 0; }
.kit-ticket .kit-hero > * { position: relative; z-index: 1; }
.kit-ticket .kit-hero > .kit-art, .kit-ticket .kit-hero > .kit-perforation { position: absolute; }
.kit-ticket .kit-orn-top { width: 22cqw; margin-bottom: 0; color: var(--k-paper); opacity: .95; }
.kit-ticket .kit-hero .kit-orn-top { color: color-mix(in srgb, var(--k-paper) 90%, transparent); }
.kit-ticket .kit-orn-scatter { color: var(--k-paper); opacity: .22; height: 55cqw; }

/* 3e. Monogram — medallion with initials (or photo) */
.kit-monogram .kit-card { padding-top: 9cqw; }
.kit-monogram .kit-hero { display: grid; justify-items: center; gap: 2.6cqw; margin-bottom: 5cqw; padding: 0 7.5cqw; }
.kit-monogram .kit-orn-top { position: absolute; left: 50%; top: 4cqw; width: 58cqw; transform: translateX(-50%); margin: 0; color: var(--k-accent-soft); opacity: .7; z-index: 0; }
.kit-monogram .kit-medallion { position: relative; display: grid; place-items: center; width: 34cqw; height: 34cqw; margin-top: 4cqw; border-radius: 50%; background: var(--k-paper); box-shadow: 0 0 0 1px var(--k-gold), 0 0 0 1.4cqw var(--k-paper), 0 0 0 calc(1.4cqw + 1px) var(--k-line); overflow: hidden; }
.kit-monogram .kit-initials { font: 500 14cqw/1 var(--k-display); letter-spacing: .02em; color: var(--k-ink); }
.kit-monogram .kit-medallion-icon { position: absolute; bottom: 3cqw; width: 7cqw; opacity: .8; }
.kit-monogram .kit-medallion .kit-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.kit-monogram.invitation-has-photo .kit-initials, .kit-monogram.invitation-has-photo .kit-medallion-icon { display: none; }

/* 3f. Photo — photo hero with gradient, fallback artwork when empty */
.kit-photo .kit-card { padding-top: 0; }
.kit-photo .kit-hero { position: relative; height: 62cqw; margin-bottom: 5cqw; display: grid; align-content: end; justify-items: center; padding-bottom: 4cqw; background: linear-gradient(160deg, var(--k-tint), transparent 60%), var(--k-paper); }
.kit-photo .kit-hero .kit-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; z-index: 0; }
.kit-photo .kit-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, var(--k-paper) 100%); pointer-events: none; }
.kit-photo .kit-hero .kit-kind { position: relative; z-index: 2; }
.kit-photo .kit-photo-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--k-accent-soft); opacity: .55; }
.kit-photo .kit-photo-fallback .kit-orn-icon { width: 30cqw; }
.kit-photo.invitation-has-photo .kit-photo-fallback { display: none; }
.kit-photo .kit-badge { position: absolute; right: 6cqw; top: 6cqw; z-index: 2; display: grid; place-items: center; align-content: center; gap: .4cqw; width: 17cqw; height: 17cqw; border-radius: 50%; background: var(--k-paper); color: var(--k-accent); box-shadow: 0 0 0 1px var(--k-line); }
.kit-photo .kit-badge b { font: 500 8cqw/.86 var(--k-display); }
.kit-photo .kit-badge small { font: 600 1.5cqw/1 var(--k-label); letter-spacing: .16em; text-transform: uppercase; }

/* Artwork per design (CSS, so it works under the strict CSP) */
.invitation-wedding-atelier { --kit-art: url('/assets/images/invitations/wedding-watercolor-corner-v1.webp'); }
.invitation-wedding-arch { --kit-art: url('/assets/images/invitations/wedding-meadow-clay-corner-v1.webp'); }
.invitation-wedding-azure { --kit-art: url('/assets/images/invitations/wedding-watercolor-corner-v1.webp'); }
.invitation-wedding-rose { --kit-art: url('/assets/images/invitations/wedding-blush-bouquet-v1.webp'); }
.invitation-wedding-meadow { --kit-art: url('/assets/images/invitations/wedding-meadow-clay-corner-v1.webp'); }
.invitation-wedding-berry { --kit-art: url('/assets/images/invitations/wedding-berry-lilac-corner-v1.webp'); }
.invitation-kids-unicorn { --kit-art: url('/assets/images/invitations/kids-unicorn-watercolor-v1.webp'); }
.invitation-kids-dinosaur { --kit-art: url('/assets/images/invitations/kids-dinosaur-watercolor-v1.webp'); }
.invitation-kids-space { --kit-art: url('/assets/images/invitations/kids-space-watercolor-v1.webp'); }
.invitation-kids-safari { --kit-art: url('/assets/images/invitations/kids-safari-watercolor-v1.webp'); }
.invitation-kids-bear { --kit-art: url('/assets/images/invitations/baby-boy-watercolor-v1.webp'); }
.invitation-kids-balloon { --kit-art: url('/assets/images/invitations/baby-girl-watercolor-v1.webp'); }
.invitation-baptism-garden { --kit-art: url('/assets/images/invitations/christening-font-garden-v1.webp'); }
.invitation-baptism-arch { --kit-art: url('/assets/images/invitations/christening-pearl-arch-v1.webp'); }
.invitation-prom-garden { --kit-art: url('/assets/images/invitations/wedding-berry-lilac-corner-v1.webp'); }
.kit-has-art .kit-arch-icon { display: none; }

/* --------------------------------------------------------------------------
   4. Designs
   -------------------------------------------------------------------------- */
/* Wedding · Atelier */
.invitation-wedding-atelier .kit-pattern { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--invite-rose-light, #f1e4dc) 30%, transparent), transparent 60%); }
.invitation-wedding-atelier.palette-blush .kit-art, .invitation-wedding-atelier.palette-butter .kit-art { --kit-art: url('/assets/images/invitations/wedding-blush-bouquet-v1.webp'); top: -10cqw; left: 19cqw; width: 62cqw; height: 38cqw; }
.invitation-wedding-atelier.palette-blush .kit-art::after, .invitation-wedding-atelier.palette-butter .kit-art::after { display: none; }
.invitation-wedding-atelier.palette-blush .kit-card, .invitation-wedding-atelier.palette-butter .kit-card { padding-top: 26cqw; }
.invitation-wedding-atelier.palette-sage .kit-art, .invitation-wedding-atelier.palette-meadow .kit-art, .invitation-wedding-atelier.palette-clay .kit-art { --kit-art: url('/assets/images/invitations/wedding-meadow-clay-corner-v1.webp'); width: 60cqw; height: 40cqw; }
.invitation-wedding-atelier.palette-burgundy .kit-art { --kit-art: url('/assets/images/invitations/wedding-berry-lilac-corner-v1.webp'); left: auto; right: -3cqw; width: 60cqw; height: 40cqw; }
.invitation-wedding-atelier.palette-burgundy .kit-art::after { right: auto; left: -80cqw; }

/* Wedding · Monogram Noir */
.invitation-wedding-monogram .kit-pattern { background: repeating-linear-gradient(0deg, transparent 0 7cqw, color-mix(in srgb, var(--invite-gold) 10%, transparent) 7cqw calc(7cqw + 1px)); opacity: .4; }
.invitation-wedding-monogram .kit-frame { inset: 3.4cqw; border-width: 1.5px; }
.invitation-wedding-monogram .kit-orn-top { top: 3cqw; width: 64cqw; }
.invitation-wedding-monogram .kit-names { font-style: italic; }

/* Wedding · Golden Vows (photo) */
.invitation-wedding-photo .kit-hero { background: linear-gradient(180deg, var(--k-accent) 0%, color-mix(in srgb, var(--k-accent) 60%, var(--k-paper)) 100%); }
.invitation-wedding-photo .kit-photo-fallback { color: var(--k-paper); opacity: .5; }
.invitation-wedding-photo .kit-hero .kit-kind { color: var(--k-accent); }
.invitation-wedding-photo .kit-pattern { background: radial-gradient(circle at 50% 100%, var(--k-tint), transparent 55%); }

/* Wedding · Botanical Arch / Azure Bloom — soft art inside the arch */
.invitation-wedding-arch .kit-arch-art, .invitation-wedding-azure .kit-arch-art { background-size: 150%; background-position: 0% 0%; opacity: .95; }
.invitation-wedding-arch .kit-arch, .invitation-wedding-azure .kit-arch { background: linear-gradient(180deg, var(--k-paper), var(--k-tint)); }
.invitation-wedding-arch .kit-pattern { background: radial-gradient(circle at 100% 100%, var(--k-tint), transparent 40%); }
.invitation-wedding-azure .kit-pattern { background: radial-gradient(circle at 0% 100%, var(--k-tint), transparent 42%); }
.invitation-wedding-azure .kit-arch-icon, .invitation-wedding-arch .kit-arch-icon { display: none; }

/* Wedding · Rose Veil (poster, swag art) */
.invitation-wedding-rose .kit-hero { height: 44cqw; }
.invitation-wedding-rose .kit-scene { background-size: 92%; background-position: center 30%; }
.invitation-wedding-rose .kit-scene::after { background: linear-gradient(180deg, transparent 40%, var(--k-paper) 100%); }
.invitation-wedding-rose .kit-kind { margin-top: 30cqw; }
.invitation-wedding-rose .kit-pattern { background: radial-gradient(circle at 50% 110%, var(--k-tint), transparent 50%); }

/* Wedding · Meadow & Clay (editorial modern) */
.invitation-wedding-meadow .kit-art { width: 62cqw; height: 42cqw; top: -4cqw; left: -4cqw; }
.invitation-wedding-meadow .kit-art::after { width: 52cqw; height: 35cqw; right: -90cqw; bottom: -95cqw; }
.invitation-wedding-meadow .kit-frame { display: none; }
.invitation-wedding-meadow .kit-pattern { background: linear-gradient(180deg, transparent 60%, var(--k-tint)); }
.invitation-wedding-meadow .kit-card { padding-top: 22cqw; }

/* Wedding · Berry Garden (ticket, dark) */
.invitation-wedding-berry .kit-hero { padding-bottom: 12cqw; background: linear-gradient(160deg, var(--invite-rose-deep), var(--k-accent)); }
.invitation-wedding-berry .kit-art { top: -2cqw; right: -8cqw; width: 58cqw; height: 40cqw; }
.invitation-wedding-berry .kit-pattern { background: radial-gradient(circle at 0% 100%, var(--k-tint), transparent 45%); }

/* Kids · shared poster tweaks */
.invitation-category-baby_birthday.kit-poster .kit-hero { height: 66cqw; }
.invitation-category-baby_birthday.kit-poster .kit-scene::after { background: linear-gradient(180deg, transparent 62%, var(--k-paper) 100%); }
.invitation-category-baby_birthday .kit-frame { display: none; }
.invitation-category-baby_birthday .kit-names { color: var(--k-accent); }
.invitation-category-baby_birthday .kit-rsvp { border-width: 2px; }
.invitation-kids-unicorn .kit-pattern { background: radial-gradient(circle at 100% 90%, var(--k-tint), transparent 40%); }
.invitation-kids-dinosaur .kit-pattern { background: repeating-linear-gradient(135deg, transparent 0 6cqw, var(--k-tint) 6cqw 6.6cqw); opacity: .35; }
.invitation-kids-space .kit-card { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--k-accent) 20%, var(--k-paper)), var(--k-paper) 70%); }
.invitation-kids-space .kit-scene::after { background: linear-gradient(180deg, transparent 55%, var(--k-paper) 100%); }
.invitation-kids-space .kit-names { color: var(--k-gold); }
.invitation-kids-safari .kit-pattern { background: radial-gradient(circle at 0% 100%, var(--k-tint), transparent 45%); }
.invitation-kids-safari .kit-orn-top { color: var(--k-gold); }
/* Kids · ticket variants (bear, balloon) */
.invitation-kids-bear .kit-hero, .invitation-kids-balloon .kit-hero { padding-bottom: 6cqw; }
.invitation-kids-bear .kit-art, .invitation-kids-balloon .kit-art { top: auto; bottom: 0; right: -4cqw; width: 46cqw; height: 40cqw; opacity: 1; background-position: right bottom; z-index: 1; }
.invitation-kids-bear .kit-orn-top, .invitation-kids-balloon .kit-orn-top { position: absolute; left: 4cqw; top: 3cqw; width: 12cqw; }
.invitation-kids-bear .kit-ticket-number, .invitation-kids-balloon .kit-ticket-number { justify-self: start; margin-left: 2cqw; }
.invitation-kids-bear .kit-hero .kit-kind, .invitation-kids-balloon .kit-hero .kit-kind { justify-self: start; margin-left: 2cqw; margin-top: 6cqw; }
.invitation-kids-bear .kit-pattern { background: radial-gradient(circle at 80% 70%, var(--k-tint), transparent 40%); }
.invitation-kids-balloon .kit-pattern { background: radial-gradient(circle at 20% 70%, var(--k-tint), transparent 40%); }

/* Christening */
.invitation-baptism-garden .kit-arch-art { background-position: center 30%; }
.invitation-baptism-garden .kit-pattern { background: radial-gradient(circle at 50% 100%, var(--k-tint), transparent 50%); }
.invitation-baptism-arch .kit-hero { height: 70cqw; }
.invitation-baptism-arch .kit-scene { background-position: center 20%; }
.invitation-baptism-arch .kit-kind { margin-top: 2cqw; }
.invitation-baptism-olive .kit-orn-top { top: 2cqw; width: 30cqw; opacity: .85; transform: translateX(-50%) rotate(-12deg); left: 26%; }
.invitation-baptism-olive .kit-pattern { background: radial-gradient(circle at 50% 0%, var(--k-tint), transparent 45%); }
.invitation-baptism-olive .kit-medallion { background: linear-gradient(180deg, var(--k-paper), var(--k-tint)); }
.invitation-baptism-cloud .kit-orn-top { width: 46cqw; opacity: .8; }
.invitation-baptism-cloud .kit-frame { display: none; }
.invitation-baptism-cloud .kit-card { background: linear-gradient(180deg, color-mix(in srgb, var(--k-accent-soft) 18%, var(--k-paper)), var(--k-paper) 45%); }
.invitation-baptism-cloud .kit-names { color: var(--k-accent); }

/* Jubilee */
.invitation-jubilee-golden { --k-display: Prata, "Playfair Display", serif; }
.invitation-jubilee-golden .kit-hero { background: linear-gradient(160deg, var(--invite-rose-deep), var(--k-accent)); }
.invitation-jubilee-golden .kit-ticket-number b { color: var(--k-gold); text-shadow: 0 1px 0 rgba(255,255,255,.2); }
.invitation-jubilee-golden .kit-orn-top { color: var(--k-gold); width: 40cqw; }
.invitation-jubilee-golden .kit-pattern { background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--k-gold) 18%, transparent), transparent 55%); }
.invitation-jubilee-gentleman .kit-pattern { background: repeating-linear-gradient(45deg, transparent 0 4cqw, color-mix(in srgb, var(--k-gold) 8%, transparent) 4cqw 4.5cqw); opacity: .5; }
.invitation-jubilee-gentleman .kit-orn-top { top: 3cqw; width: 26cqw; color: var(--k-gold); opacity: .9; }
.invitation-jubilee-gentleman .kit-medallion { background: linear-gradient(180deg, color-mix(in srgb, var(--k-gold) 20%, var(--k-paper)), var(--k-paper)); }
.invitation-jubilee-gentleman .kit-initials { color: var(--k-gold); }
.invitation-jubilee-blush .kit-hero { background: linear-gradient(180deg, var(--k-accent-soft), var(--k-paper)); }
.invitation-jubilee-blush .kit-photo-fallback { color: var(--k-paper); opacity: .7; }
.invitation-jubilee-party .kit-hero { height: 46cqw; }
.invitation-jubilee-party .kit-scene { background: linear-gradient(160deg, var(--k-accent), var(--k-accent-soft)); }
.invitation-jubilee-party .kit-orn-scatter { color: var(--k-paper); opacity: .5; height: 46cqw; }
.invitation-jubilee-party .kit-orn-top { left: 50%; top: 18cqw; width: 18cqw; transform: translateX(-50%); }
.invitation-jubilee-party .kit-kind { color: var(--k-accent); }

/* Prom */
.invitation-prom-midnight .kit-hero { background: linear-gradient(180deg, #0f1226, var(--invite-rose-deep, #22283c)); padding-bottom: 12cqw; }
.invitation-prom-midnight .kit-ticket-number b { color: var(--k-gold); }
.invitation-prom-midnight .kit-orn-top { color: var(--k-gold); width: 14cqw; }
.invitation-prom-midnight .kit-orn-scatter { color: var(--k-gold); opacity: .4; }
.invitation-prom-garden .kit-art { left: auto; right: -3cqw; width: 60cqw; height: 40cqw; }
.invitation-prom-garden .kit-art::after { right: auto; left: -80cqw; }
.invitation-prom-garden .kit-pattern { background: radial-gradient(circle at 50% 100%, var(--k-tint), transparent 50%); }
.invitation-prom-neon .kit-hero { height: 50cqw; }
.invitation-prom-neon .kit-scene { background: linear-gradient(135deg, #2a1e4f, var(--k-accent) 55%, #ff9ac8); }
.invitation-prom-neon .kit-scene::after { background: linear-gradient(180deg, transparent 55%, var(--k-paper) 100%); }
.invitation-prom-neon .kit-orn-scatter { color: #fff; opacity: .5; height: 50cqw; }
.invitation-prom-neon .kit-badge { background: #fff; color: var(--k-accent); }
.invitation-prom-neon .kit-names { background: linear-gradient(90deg, var(--k-accent), #d9469b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.invitation-prom-neon .kit-orn-top { color: #fff; }

/* Grand openings — venue specific patterns */
.invitation-opening-restaurant .kit-hero { background: linear-gradient(160deg, var(--invite-rose-deep), var(--k-accent)); }
.invitation-opening-restaurant .kit-pattern { background: repeating-linear-gradient(90deg, transparent 0 5cqw, color-mix(in srgb, var(--k-gold) 10%, transparent) 5cqw calc(5cqw + 1px)); opacity: .5; }
.invitation-opening-bar .kit-hero { background: radial-gradient(circle at 80% 10%, #3b2f5e, #0f1226 70%); padding-bottom: 12cqw; }
.invitation-opening-bar .kit-pattern { background: radial-gradient(circle at 20% 20%, var(--k-tint) 0 1.2cqw, transparent 1.3cqw) 0 0 / 9cqw 9cqw; opacity: .5; }
.invitation-opening-bar .kit-orn-scatter { color: var(--k-gold); opacity: .35; }
.invitation-opening-cafe .kit-pattern { background: radial-gradient(ellipse 1.8cqw 2.6cqw at 50% 50%, var(--k-tint) 98%, transparent) 0 0 / 10cqw 12cqw; opacity: .6; }
.invitation-opening-cafe .kit-frame { display: none; }
.invitation-opening-cafe .kit-venue-icon { width: 14cqw; }
.invitation-opening-shop .kit-hero { height: 40cqw; }
.invitation-opening-shop .kit-scene { background: repeating-linear-gradient(90deg, var(--k-accent-soft) 0 6cqw, var(--k-paper) 6cqw 12cqw); }
.invitation-opening-shop .kit-scene::after { background: linear-gradient(180deg, transparent 30%, var(--k-paper) 100%); }
.invitation-opening-shop .kit-orn-top { position: absolute; left: 50%; top: 4cqw; width: 40cqw; transform: translateX(-50%); color: var(--k-accent); filter: none; }
.invitation-opening-shop .kit-kind { margin-top: 22cqw; }
.invitation-opening-salon .kit-pattern { background: repeating-radial-gradient(circle at 50% -20cqw, transparent 0 6cqw, var(--k-tint) 6cqw 6.4cqw); opacity: .45; }
.invitation-opening-salon .kit-medallion-icon { position: static; width: 13cqw; opacity: 1; }
.invitation-opening-salon .kit-initials { display: none; }
.invitation-opening-studio .kit-hero { height: 46cqw; }
.invitation-opening-studio .kit-scene { background: conic-gradient(from 20deg at 70% 40%, var(--k-accent), var(--k-accent-soft), #f4d35e, var(--k-accent)); }
.invitation-opening-studio .kit-orn-scatter { color: #fff; opacity: .4; height: 46cqw; }
.invitation-opening-studio .kit-frame { display: none; }
.invitation-opening-hotel .kit-pattern { background: repeating-linear-gradient(135deg, transparent 0 3cqw, color-mix(in srgb, var(--k-gold) 10%, transparent) 3cqw 3.4cqw), repeating-linear-gradient(45deg, transparent 0 3cqw, color-mix(in srgb, var(--k-gold) 10%, transparent) 3cqw 3.4cqw); opacity: .5; }
.invitation-opening-hotel .kit-orn-top { color: var(--k-gold); }
.invitation-opening-hotel .kit-medallion-icon { position: static; width: 16cqw; opacity: 1; color: var(--k-gold); }
.invitation-opening-hotel .kit-initials { display: none; }
.invitation-opening-clinic .kit-pattern { background: linear-gradient(var(--k-tint) 1px, transparent 1px) 0 0 / 8cqw 8cqw, linear-gradient(90deg, var(--k-tint) 1px, transparent 1px) 0 0 / 8cqw 8cqw; opacity: .5; }
.invitation-opening-clinic .kit-frame { display: none; }
.invitation-opening-clinic .kit-orn-top { width: 40cqw; opacity: .7; }

/* --------------------------------------------------------------------------
   5. Stage backgrounds (homepage tiles, editor preview, design picker)
   -------------------------------------------------------------------------- */
.stage-wedding-atelier, .studio-preview.stage-wedding-atelier, .design-choice-preview.stage-wedding-atelier { background: linear-gradient(145deg, #e9e2d6, #f5f0e8); }
.stage-wedding-monogram, .studio-preview.stage-wedding-monogram, .design-choice-preview.stage-wedding-monogram { background: linear-gradient(145deg, #dcd6cc, #efeae1); }
.stage-wedding-photo, .studio-preview.stage-wedding-photo, .design-choice-preview.stage-wedding-photo { background: linear-gradient(145deg, #e6c9b6, #f5e5d8); }
.stage-wedding-arch, .studio-preview.stage-wedding-arch, .design-choice-preview.stage-wedding-arch { background: linear-gradient(145deg, #d5ddd0, #eef0e6); }
.stage-wedding-azure, .studio-preview.stage-wedding-azure, .design-choice-preview.stage-wedding-azure { background: linear-gradient(145deg, #d7e5dc, #eef0df); }
.stage-wedding-rose, .studio-preview.stage-wedding-rose, .design-choice-preview.stage-wedding-rose { background: linear-gradient(145deg, #ead7dc, #f5e9ec); }
.stage-kids-unicorn, .studio-preview.stage-kids-unicorn, .design-choice-preview.stage-kids-unicorn { background: linear-gradient(145deg, #e6dcf3, #f7eef6); }
.stage-kids-dinosaur, .studio-preview.stage-kids-dinosaur, .design-choice-preview.stage-kids-dinosaur { background: linear-gradient(145deg, #d9e3c6, #eef2e2); }
.stage-kids-space, .studio-preview.stage-kids-space, .design-choice-preview.stage-kids-space { background: linear-gradient(145deg, #2a2f52, #4b4f7d); }
.stage-kids-safari, .studio-preview.stage-kids-safari, .design-choice-preview.stage-kids-safari { background: linear-gradient(145deg, #efe1b8, #f8f1dc); }
.stage-kids-bear, .studio-preview.stage-kids-bear, .design-choice-preview.stage-kids-bear { background: linear-gradient(145deg, #d3e4ee, #eef5f8); }
.stage-kids-balloon, .studio-preview.stage-kids-balloon, .design-choice-preview.stage-kids-balloon { background: linear-gradient(145deg, #f1d8de, #f9edf0); }
.stage-baptism-olive, .studio-preview.stage-baptism-olive, .design-choice-preview.stage-baptism-olive { background: linear-gradient(145deg, #e2e3d6, #f3f2ea); }
.stage-baptism-cloud, .studio-preview.stage-baptism-cloud, .design-choice-preview.stage-baptism-cloud { background: linear-gradient(145deg, #d8e8f2, #eef6fa); }
.stage-jubilee-golden, .studio-preview.stage-jubilee-golden, .design-choice-preview.stage-jubilee-golden { background: linear-gradient(145deg, #3d2327, #8a5a5f); }
.stage-jubilee-gentleman, .studio-preview.stage-jubilee-gentleman, .design-choice-preview.stage-jubilee-gentleman { background: linear-gradient(145deg, #1a1d2f, #3a3f5c); }
.stage-jubilee-blush, .studio-preview.stage-jubilee-blush, .design-choice-preview.stage-jubilee-blush { background: linear-gradient(145deg, #ead2d8, #f6eaee); }
.stage-jubilee-party, .studio-preview.stage-jubilee-party, .design-choice-preview.stage-jubilee-party { background: linear-gradient(145deg, #cfe4ee, #eaf3f7); }
.stage-prom-midnight, .studio-preview.stage-prom-midnight, .design-choice-preview.stage-prom-midnight { background: linear-gradient(145deg, #0f1226, #2d3255); }
.stage-prom-garden, .studio-preview.stage-prom-garden, .design-choice-preview.stage-prom-garden { background: linear-gradient(145deg, #3a2b3c, #8d6878); }
.stage-prom-neon, .studio-preview.stage-prom-neon, .design-choice-preview.stage-prom-neon { background: linear-gradient(145deg, #2a1e4f, #b46fd0); }
.stage-opening-restaurant, .studio-preview.stage-opening-restaurant, .design-choice-preview.stage-opening-restaurant { background: linear-gradient(145deg, #4a2c30, #9a6a6e); }
.stage-opening-bar, .studio-preview.stage-opening-bar, .design-choice-preview.stage-opening-bar { background: linear-gradient(145deg, #12162a, #3b2f5e); }
.stage-opening-cafe, .studio-preview.stage-opening-cafe, .design-choice-preview.stage-opening-cafe { background: linear-gradient(145deg, #e3c8b4, #f3e6da); }
.stage-opening-shop, .studio-preview.stage-opening-shop, .design-choice-preview.stage-opening-shop { background: linear-gradient(145deg, #efd6dc, #f9eef1); }
.stage-opening-salon, .studio-preview.stage-opening-salon, .design-choice-preview.stage-opening-salon { background: linear-gradient(145deg, #ecd5da, #f8ecef); }
.stage-opening-studio, .studio-preview.stage-opening-studio, .design-choice-preview.stage-opening-studio { background: linear-gradient(145deg, #cfe3f0, #e9f2f8); }
.stage-opening-hotel, .studio-preview.stage-opening-hotel, .design-choice-preview.stage-opening-hotel { background: linear-gradient(145deg, #1a1d2f, #4a4433); }
.stage-opening-clinic, .studio-preview.stage-opening-clinic, .design-choice-preview.stage-opening-clinic { background: linear-gradient(145deg, #d8e9ef, #eef6f9); }

/* Scene-specific tuning */
.invitation-kids-unicorn.kit-has-scene .kit-hero, .invitation-kids-dinosaur.kit-has-scene .kit-hero, .invitation-kids-space.kit-has-scene .kit-hero, .invitation-kids-safari.kit-has-scene .kit-hero { height: 60cqw; }
.invitation-kids-unicorn .kit-scene, .invitation-kids-dinosaur .kit-scene, .invitation-kids-space .kit-scene, .invitation-kids-safari .kit-scene { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.invitation-kids-space.kit-has-scene .kit-card { background: #0d1130; }
.invitation-kids-space.kit-has-scene .kit-main { background: color-mix(in srgb, #141a3f 88%, transparent); }
.invitation-kids-space.kit-has-scene, .invitation-kids-space.kit-has-scene .kit-names, .invitation-kids-space.kit-has-scene .kit-date, .invitation-kids-space.kit-has-scene .kit-countdown strong, .invitation-kids-space.kit-has-scene .kit-notes dd, .invitation-kids-space.kit-has-scene .kit-stop, .invitation-kids-space.kit-has-scene .kit-rsvp, .invitation-kids-space.kit-has-scene .kit-simple-agenda strong { color: #f3e7d1; }
.invitation-kids-space.kit-has-scene .kit-rsvp { border-color: #ffd166; color: #ffd166; }
.invitation-kids-safari.kit-has-scene .kit-main { background: color-mix(in srgb, #fff6e6 92%, transparent); }
.invitation-prom-midnight.kit-has-scene .kit-hero, .invitation-wedding-berry.kit-has-scene .kit-hero { background: transparent; backdrop-filter: none; }
.invitation-prom-midnight.kit-has-scene .kit-perforation, .invitation-wedding-berry.kit-has-scene .kit-perforation { display: none; }
.invitation-prom-midnight.kit-has-scene .kit-card, .invitation-prom-neon.kit-has-scene .kit-card, .invitation-opening-bar.kit-has-scene .kit-card, .invitation-opening-hotel.kit-has-scene .kit-card, .invitation-kids-space.kit-has-scene .kit-card { --k-paper: #1a1d3a; --k-ink: #f3e7d1; --k-soft: rgba(243,231,209,.72); --k-accent: var(--invite-gold, #e0bb70); --k-line: rgba(224,187,112,.5); }
.invitation-opening-restaurant.kit-has-scene .kit-hero { background: transparent; }
.invitation-opening-restaurant.kit-has-scene .kit-perforation { display: none; }
.invitation-opening-restaurant.kit-has-scene .kit-hero .kit-kind, .invitation-opening-restaurant.kit-has-scene .kit-ticket-date, .invitation-opening-restaurant.kit-has-scene .kit-venue-icon { color: var(--k-paper); }
.invitation-wedding-photo.kit-has-scene .kit-hero { background: transparent; }
.invitation-wedding-photo.kit-has-scene .kit-hero::after { background: none; }
.invitation-opening-shop.kit-has-scene .kit-scene { display: none; }
.invitation-opening-studio.kit-has-scene .kit-scene, .invitation-jubilee-party.kit-has-scene .kit-scene, .invitation-prom-neon.kit-has-scene .kit-scene { display: none; }
.invitation-opening-shop.kit-has-scene .kit-hero, .invitation-opening-studio.kit-has-scene .kit-hero, .invitation-jubilee-party.kit-has-scene .kit-hero, .invitation-prom-neon.kit-has-scene .kit-hero, .invitation-wedding-rose.kit-has-scene .kit-hero { height: 46cqw; }
.invitation-wedding-rose.kit-has-scene .kit-scene { display: none; }
.invitation-wedding-rose.kit-has-scene .kit-kind { margin-top: 0; }
.invitation-opening-shop.kit-has-scene .kit-kind { margin-top: 22cqw; }
.invitation-opening-shop.kit-has-scene .kit-orn-top { display: none; }
.invitation-baptism-arch.kit-has-scene .kit-scene { display: none; }
.invitation-baptism-arch.kit-has-scene .kit-hero { height: 44cqw; }
.invitation-baptism-arch.kit-has-scene .kit-kind { margin-top: 30cqw; }
.invitation-wedding-meadow.kit-has-scene .kit-art, .invitation-wedding-atelier.kit-has-scene .kit-art, .invitation-prom-garden.kit-has-scene .kit-art { display: none; }
.invitation-wedding-meadow.kit-has-scene .kit-card { padding-top: 12cqw; }
.invitation-wedding-atelier.kit-has-scene .kit-card { padding-top: 12cqw; }
.invitation-jubilee-golden.kit-has-scene .kit-hero { background: color-mix(in srgb, var(--k-accent) 88%, transparent); }

/* Scenes with a central motif: start the text below it */
.invitation-opening-cafe.kit-has-scene .kit-card, .invitation-opening-clinic.kit-has-scene .kit-card, .invitation-opening-salon.kit-has-scene .kit-card { padding-top: 50cqw; }
.invitation-opening-cafe.kit-has-scene .kit-venue-icon, .invitation-opening-clinic.kit-has-scene .kit-venue-icon { display: none; }
.invitation-opening-salon.kit-has-scene .kit-medallion { display: none; }
.invitation-opening-salon.kit-has-scene .kit-hero { margin-bottom: 2cqw; padding-top: 6cqw; }
.invitation-baptism-arch.kit-has-scene .kit-kind { margin-top: 38cqw; }
.invitation-opening-clinic.kit-has-scene .kit-orn-top { display: none; }
/* Palette-specific floral colours for the procedural scenes */
.kit.palette-ivory { --k-flower: #e6b3a6; --k-rose-light: #f4e4dd; --k-rose-deep: #7a5450; --k-leaf: #8ea394; }
.kit.palette-midnight { --k-flower: #d1a7dc; --k-rose-light: #e9d3ea; --k-rose-deep: #8b5e93; --k-leaf: #7f8fa0; }
.kit.palette-azure { --k-flower: #e8bfb3; --k-rose-deep: #33566a; }
.kit.palette-sky { --k-flower: #f0c9c0; --k-rose-deep: #5f8da6; }
.kit.palette-luminous { --k-flower: #eec3b4; --k-rose-deep: #315974; }

/* --------------------------------------------------------------------------
   6. Countdown tiles, rings, detail icons
   -------------------------------------------------------------------------- */
.kit .kit-count { display: grid; justify-items: center; gap: 1.6cqw; margin-top: 5cqw; }
.kit .kit-countdown { width: 82%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; padding: 0; background: none; border: 0; box-shadow: none; }
.kit .kit-countdown > span { display: grid; gap: .4cqw; padding: 2cqw .5cqw 1.6cqw; border-radius: 1.6cqw; background: color-mix(in srgb, var(--k-paper) 78%, transparent); border: 1px solid var(--k-line); box-shadow: 0 .6cqw 2cqw color-mix(in srgb, var(--invite-ink) 10%, transparent); text-align: center; }
.kit .kit-countdown strong { font: 500 5.2cqw/1 var(--k-display); color: var(--k-ink); font-variant-numeric: tabular-nums; }
.kit .kit-countdown small { font: 600 1.55cqw/1 var(--k-label); letter-spacing: .18em; text-transform: uppercase; color: var(--k-soft); font-style: normal; }
.kit.type-playful .kit-countdown strong { font-size: 6cqw; }
.kit.type-bold .kit-countdown strong { font-size: 5.6cqw; }
.kit.is-past .kit-countdown { display: none; }
.kit .kit-rings { display: block; width: 24cqw; height: auto; margin: 0 auto .6cqw; filter: drop-shadow(0 .8cqw 1.6cqw rgba(0,0,0,.15)); }
.kit-editorial .kit-rings, .kit-arch .kit-rings { width: 26cqw; }
.kit-ticket .kit-rings, .kit-poster .kit-rings { width: 20cqw; }
.kit-photo .kit-rings { width: 18cqw; position: relative; z-index: 2; }
.kit .kit-icon { display: inline-grid; place-items: center; width: 3.4cqw; height: 3.4cqw; color: var(--k-accent); vertical-align: middle; }
.kit .kit-icon svg { width: 100%; height: 100%; display: block; }
.kit .kit-venue .kit-icon { width: 2.8cqw; height: 2.8cqw; margin-right: 1cqw; }
.kit .kit-notes dt { display: grid; justify-items: center; gap: 1.2cqw; }
.kit .kit-notes dt .kit-icon { width: 5.2cqw; height: 5.2cqw; padding: 1.1cqw; border-radius: 50%; background: var(--k-tint); box-sizing: content-box; }
.kit .kit-simple-agenda { grid-template-columns: auto 1fr; column-gap: 2.4cqw; align-items: center; text-align: left; padding: 2cqw 5cqw 2cqw 3cqw; }
.kit .kit-simple-agenda .kit-icon { grid-row: 1 / span 2; width: 5cqw; height: 5cqw; }
.kit .kit-deadline .kit-icon { width: 3cqw; height: 3cqw; margin-right: 1cqw; }
.kit .kit-map .kit-icon, .kit .kit-rsvp .kit-icon { width: 3cqw; height: 3cqw; margin-right: 1.2cqw; color: inherit; }
.kit .kit-orn-divider-2 { width: 26cqw; margin: 6cqw auto 0; opacity: .8; }
.kit .kit-orn-divider-2 + .kit-notes { margin-top: 3cqw; border-top: 0; padding-top: 0; }
.kit.kit-has-scene .kit-art { display: none; }
.kit-arch .kit-arch-icon { width: 20cqw; }
.kit.palette-midnight .kit-countdown > span, .kit-has-scene.invitation-kids-space .kit-countdown > span { background: color-mix(in srgb, var(--k-paper) 60%, transparent); }

/* Kids tickets: let the scene be the hero */
.invitation-kids-bear.kit-has-scene .kit-hero, .invitation-kids-balloon.kit-has-scene .kit-hero { background: transparent; backdrop-filter: none; min-height: 56cqw; justify-items: start; align-content: start; padding: 5cqw 6cqw; }
.invitation-kids-bear.kit-has-scene .kit-perforation, .invitation-kids-balloon.kit-has-scene .kit-perforation, .invitation-kids-bear.kit-has-scene .kit-orn-top, .invitation-kids-balloon.kit-has-scene .kit-orn-top { display: none; }
.invitation-kids-bear.kit-has-scene .kit-hero .kit-kind, .invitation-kids-balloon.kit-has-scene .kit-hero .kit-kind { color: var(--k-accent); background: color-mix(in srgb, var(--k-paper) 80%, transparent); padding: 1.2cqw 3cqw; border-radius: 999px; margin: 0; }
.invitation-kids-bear.kit-has-scene .kit-ticket-number, .invitation-kids-balloon.kit-has-scene .kit-ticket-number { margin: 1cqw 0 0; }
.invitation-kids-bear.kit-has-scene .kit-ticket-number b, .invitation-kids-balloon.kit-has-scene .kit-ticket-number b { font-size: 22cqw; color: var(--k-accent); text-shadow: 0 .4cqw 0 var(--k-paper); }
.invitation-kids-bear.kit-has-scene .kit-hero .kit-photo, .invitation-kids-balloon.kit-has-scene .kit-hero .kit-photo { position: absolute; right: 6cqw; top: 22cqw; width: 30cqw; box-shadow: 0 0 0 1.4cqw var(--k-paper), 0 1cqw 3cqw rgba(0,0,0,.2); }
/* Openings: hero starts below the composition */
.invitation-opening-restaurant.kit-has-scene .kit-hero { padding-top: 3cqw; }
.invitation-opening-restaurant.kit-has-scene .kit-ticket-date { display: none; }
.invitation-opening-restaurant.kit-has-scene .kit-venue-icon { display: none; }
.invitation-opening-restaurant.kit-has-scene .kit-hero { min-height: 62cqw; align-content: start; }
.invitation-opening-bar.kit-has-scene .kit-hero { background: transparent; backdrop-filter: none; min-height: 82cqw; align-content: start; padding-top: 6cqw; }
.invitation-opening-bar.kit-has-scene .kit-perforation, .invitation-opening-bar.kit-has-scene .kit-venue-icon { display: none; }
.invitation-opening-bar.kit-has-scene .kit-ticket-date { position: absolute; left: 6cqw; bottom: 4cqw; }
.invitation-opening-bar.kit-has-scene .kit-ticket-date b { font-size: 14cqw; }
.invitation-opening-bar.kit-has-scene .kit-hero .kit-kind { color: #ff6ec7; text-shadow: 0 0 1.6cqw rgba(255,110,199,.7); margin-top: 1.5cqw; }
.invitation-opening-cafe.kit-has-scene .kit-card { padding-top: 72cqw; }
.invitation-opening-salon.kit-has-scene .kit-card { padding-top: 78cqw; }
.invitation-opening-studio.kit-has-scene .kit-hero { height: 76cqw; }
.invitation-opening-studio.kit-has-scene .kit-hero .kit-kind { margin-top: 68cqw; }
.invitation-opening-hotel.kit-has-scene .kit-medallion { display: none; }
.invitation-opening-hotel.kit-has-scene .kit-card { padding-top: 106cqw; }
.invitation-opening-hotel.kit-has-scene .kit-orn-top { display: none; }
.invitation-opening-clinic.kit-has-scene .kit-card { padding-top: 82cqw; }
.invitation-opening-shop.kit-has-scene .kit-hero { height: 80cqw; }
.invitation-opening-shop.kit-has-scene .kit-kind { margin-top: 22cqw; }

/* Ticket heroes that must show the scene (specificity above the generic .kit.kit-has-scene.kit-ticket rule) */
.kit.kit-has-scene.kit-ticket.invitation-kids-bear .kit-hero, .kit.kit-has-scene.kit-ticket.invitation-kids-balloon .kit-hero, .kit.kit-has-scene.kit-ticket.invitation-opening-restaurant .kit-hero, .kit.kit-has-scene.kit-ticket.invitation-opening-bar .kit-hero, .kit.kit-has-scene.kit-ticket.invitation-prom-midnight .kit-hero, .kit.kit-has-scene.kit-ticket.invitation-wedding-berry .kit-hero { background: transparent; backdrop-filter: none; }
.kit.kit-has-scene.kit-ticket.invitation-opening-restaurant .kit-hero { min-height: 64cqw; }
.kit.kit-has-scene.kit-ticket.invitation-opening-restaurant .kit-hero .kit-kind { margin-top: 1cqw; color: var(--k-paper); background: color-mix(in srgb, var(--invite-rose-deep) 70%, transparent); padding: 1.2cqw 3cqw; border-radius: 999px; }
.kit.kit-has-scene.kit-ticket.invitation-opening-bar .kit-hero .kit-kind { margin-top: 22cqw; }
.kit.kit-has-scene.kit-ticket.invitation-opening-bar .kit-ticket-date { position: static; margin-top: 44cqw; }
.kit.kit-has-scene.kit-ticket.invitation-opening-bar .kit-ticket-date b { font-size: 12cqw; }
.kit.kit-has-scene.kit-ticket.invitation-opening-bar .kit-hero { min-height: 90cqw; }
.invitation-opening-cafe.kit-has-scene .kit-card { padding-top: 82cqw; }
.invitation-opening-salon.kit-has-scene .kit-card { padding-top: 90cqw; }
.invitation-opening-clinic.kit-has-scene .kit-card { padding-top: 92cqw; }
.invitation-opening-studio.kit-has-scene .kit-hero { height: 72cqw; }
.invitation-opening-studio.kit-has-scene .kit-hero .kit-kind { margin-top: 62cqw; }

.kit.kit-has-scene.kit-ticket.invitation-kids-bear .kit-hero, .kit.kit-has-scene.kit-ticket.invitation-kids-balloon .kit-hero { min-height: 74cqw; }
.invitation-opening-clinic.kit-has-scene .kit-card { padding-top: 84cqw; }
.invitation-opening-clinic.kit-has-scene .kit-hero { margin-bottom: 3cqw; }

/* ==========================================================================
   7. Higgsfield artwork designs (.kit-hf) — full-card illustrations
   ========================================================================== */
.kit.kit-hf { --k-paper: var(--kit-hf-bg, #fffdf8); background: var(--kit-hf-bg); padding: 0; border-radius: 2.4cqw; box-shadow: 0 40px 80px -30px rgba(20, 20, 30, .45); }
.kit.kit-hf .kit-card { background: var(--kit-hf-bg); box-shadow: none; border-radius: 2.4cqw; padding-top: var(--kit-hf-top, 30cqw); padding-bottom: var(--kit-hf-bottom, 14cqw); }
.kit.kit-hf .kit-hf-top, .kit.kit-hf .kit-hf-bottom { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--kit-hf) no-repeat center top / 100% auto; }
.kit.kit-hf .kit-hf-top { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--kit-hf-top) + 40cqw), transparent calc(var(--kit-hf-top) + 80cqw)); mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--kit-hf-top) + 40cqw), transparent calc(var(--kit-hf-top) + 80cqw)); }
.kit.kit-hf .kit-hf-bottom { background-position: center bottom; -webkit-mask-image: linear-gradient(0deg, #000 0, #000 calc(var(--kit-hf-bottom) + 30cqw), transparent calc(var(--kit-hf-bottom) + 70cqw)); mask-image: linear-gradient(0deg, #000 0, #000 calc(var(--kit-hf-bottom) + 30cqw), transparent calc(var(--kit-hf-bottom) + 70cqw)); }
.kit.kit-hf.invitation-compact .kit-hf-top { -webkit-mask-image: none; mask-image: none; background-size: cover; background-position: center; }
.kit.kit-hf.invitation-compact .kit-hf-bottom { display: none; }
.kit.kit-hf .kit-pattern, .kit.kit-hf .kit-frame, .kit.kit-hf .kit-art, .kit.kit-hf .kit-scene, .kit.kit-hf .kit-scene-bg, .kit.kit-hf .kit-orn-scatter, .kit.kit-hf .kit-orn-top, .kit.kit-hf .kit-arch-art, .kit.kit-hf .kit-perforation, .kit.kit-hf .kit-venue-icon, .kit.kit-hf .kit-photo-fallback { display: none !important; }
.kit.kit-hf .kit-hero { background: none !important; backdrop-filter: none; padding: 0 7.5cqw; margin: 0 0 3cqw; min-height: 0; height: auto; display: grid; justify-items: center; gap: 2cqw; }
.kit.kit-hf .kit-hero::after { display: none; }
.kit.kit-hf .kit-hero .kit-kind { position: static; margin: 0; padding: 1.2cqw 3.4cqw; border-radius: 999px; background: color-mix(in srgb, var(--kit-hf-bg) 80%, transparent); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-gold) 45%, transparent); }
.kit.kit-hf .kit-ticket-date, .kit.kit-hf .kit-ticket-number { color: var(--k-ink); margin: 0; }
.kit.kit-hf .kit-ticket-date b { font-size: 16cqw; }
.kit.kit-hf .kit-ticket-number b { font-size: 20cqw; color: var(--k-accent); }
.kit.kit-hf .kit-ticket-date span { border-left-color: var(--k-line); }
.kit.kit-hf .kit-badge { position: static; transform: none; margin: 0 auto; }
.kit.kit-hf .kit-arch { width: 40cqw; aspect-ratio: 4 / 5; background: color-mix(in srgb, var(--k-paper) 70%, transparent); }
.kit.kit-hf .kit-arch:not(:has(.kit-photo:not([hidden]))) { display: none; }
.kit.kit-hf .kit-medallion { width: 26cqw; height: 26cqw; margin: 0; }
.kit.kit-hf .kit-medallion:not(:has(.kit-photo:not([hidden]))) { display: none; }
.kit.kit-hf.kit-photo .kit-hero .kit-photo { position: relative; inset: auto; width: 44cqw; height: auto; aspect-ratio: 4 / 5; border-radius: 50cqw 50cqw 1.2cqw 1.2cqw; box-shadow: 0 0 0 1.4cqw var(--k-paper), 0 0 0 calc(1.4cqw + 1px) var(--k-line); }
.kit.kit-hf .kit-hero .kit-photo { z-index: 2; }
.kit.kit-hf .kit-main { background: none; box-shadow: none; margin: 0; padding: 0; }
.kit.kit-hf .kit-body, .kit.kit-hf .kit-extended { padding-inline: var(--kit-hf-pad, 10cqw); }
.kit.kit-hf .kit-names { font-size: calc(var(--k-names-size) * .92); }
.kit.kit-hf .kit-countdown > span { background: color-mix(in srgb, var(--kit-hf-bg) 70%, #fff 0%); backdrop-filter: blur(4px); }
.kit.kit-hf .kit-notes dt .kit-icon { background: color-mix(in srgb, var(--k-accent) 14%, transparent); }
.kit.kit-hf .kit-footer { padding-bottom: 0; }
/* dark artwork: light ink */
.kit.kit-hf.kit-dark { --k-ink: #f6ecd8; --k-soft: rgba(246, 236, 216, .74); --k-accent: var(--invite-gold, #e0bb70); --k-accent-soft: color-mix(in srgb, var(--invite-gold, #e0bb70) 60%, #fff); --k-line: rgba(224, 187, 112, .5); --k-gold: #e6c887; --k-tint: rgba(230, 200, 135, .16); }
.kit.kit-hf.kit-dark .kit-names, .kit.kit-hf.kit-dark .kit-date, .kit.kit-hf.kit-dark .kit-countdown strong, .kit.kit-hf.kit-dark .kit-notes dd, .kit.kit-hf.kit-dark .kit-stop, .kit.kit-hf.kit-dark .kit-simple-agenda strong, .kit.kit-hf.kit-dark .kit-time, .kit.kit-hf.kit-dark .kit-recipient strong, .kit.kit-hf.kit-dark .kit-christening strong, .kit.kit-hf.kit-dark .kit-deadline strong { color: var(--k-ink); }
.kit.kit-hf.kit-dark .kit-rsvp { border-color: var(--k-gold); color: var(--k-gold); }
.kit.kit-hf.kit-dark a.kit-rsvp:hover { background: var(--k-gold); color: #1a1420; }
.kit.kit-hf.kit-dark .kit-countdown > span { background: rgba(255, 255, 255, .08); border-color: var(--k-line); }
.kit.kit-hf.kit-dark .kit-hero .kit-kind { background: rgba(0, 0, 0, .35); color: var(--k-gold); }
.kit.kit-hf.kit-dark .kit-dot { background: rgba(0, 0, 0, .4); }
.kit.kit-hf.kit-dark .kit-quote p, .kit.kit-hf.kit-dark .kit-intro, .kit.kit-hf.kit-dark .kit-reply { color: var(--k-soft); }
.kit.kit-hf.kit-dark .kit-ticket-number b { color: var(--k-gold); }
/* design specific */
.kit.kit-hf.invitation-wedding-monogram .kit-medallion { display: grid !important; position: absolute; left: 50%; top: calc(16cqw - var(--kit-hf-top)); width: 28cqw; height: 28cqw; transform: translateX(-50%); background: transparent; box-shadow: none; }
.kit.kit-hf.invitation-wedding-monogram .kit-initials { font-size: 9.5cqw; color: #1b1b1b; }
.kit.kit-hf.invitation-wedding-monogram .kit-hero { min-height: 0; }
.kit.kit-hf.invitation-wedding-monogram .kit-medallion-icon { display: none; }
.kit.kit-hf .kit-rings { width: 22cqw; }
.kit.kit-hf.kit-poster .kit-hero .kit-photo { position: relative; bottom: auto; left: auto; transform: none; width: 30cqw; }
.kit.kit-hf.kit-poster.invitation-has-photo .kit-hero { margin-bottom: 3cqw; }
.kit.kit-hf.kit-ticket .kit-hero .kit-photo { width: 26cqw; }

/* ==========================================================================
   8. Interactivity — particles, tilt, reveal, envelope
   ========================================================================== */
.kit .kit-fx { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; border-radius: inherit; }
.kit .kit-fx i { position: absolute; top: -6cqw; left: var(--x, 50%); width: var(--s, 2cqw); height: var(--s, 2cqw); opacity: 0; will-change: transform, opacity; animation: kit-fall var(--d, 12s) linear var(--delay, 0s) infinite; }
.kit .kit-fx-petals i { border-radius: 60% 0 60% 0; background: color-mix(in srgb, var(--k-flower, #e6b3a6) 85%, #fff); }
.kit .kit-fx-confetti i { border-radius: .3cqw; background: var(--c, var(--k-accent)); width: calc(var(--s) * .7); }
.kit .kit-fx-gold i { border-radius: 50%; background: radial-gradient(circle, #fff3c4, var(--k-gold, #e6c887) 60%, transparent 70%); box-shadow: 0 0 1.6cqw color-mix(in srgb, var(--k-gold, #e6c887) 60%, transparent); }
.kit .kit-fx-stars i { background: var(--k-gold, #e6c887); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.kit .kit-fx-sparkles i { background: #fff; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); box-shadow: 0 0 2cqw rgba(255, 255, 255, .8); animation-name: kit-twinkle; top: var(--y, 50%); }
@keyframes kit-fall { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 8% { opacity: .95; } 100% { transform: translate3d(var(--dx, 6cqw), 190cqw, 0) rotate(var(--r, 540deg)); opacity: 0; } }
@keyframes kit-twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: .95; transform: scale(1); } }
.kit.is-open .kit-names { background: linear-gradient(100deg, var(--k-ink) 40%, var(--k-gold) 50%, var(--k-ink) 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: kit-sheen 6s ease-in-out 1.2s infinite; }
@keyframes kit-sheen { 0%, 60% { background-position: 110% 0; } 100% { background-position: -110% 0; } }
/* scroll reveal */
.kit[data-reveal] .kit-body > *, .kit[data-reveal] .kit-extended > * { opacity: 0; transform: translateY(2.4cqw); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.kit[data-reveal].is-open .kit-body > *, .kit[data-reveal] .kit-extended > *.is-in { opacity: 1; transform: none; }
/* 3-D tilt */
.public-invitation-stage { perspective: 1600px; }
.public-invitation-stage .kit { transform-style: preserve-3d; transition: transform .35s ease; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.public-invitation-stage .kit.is-tilting { transition: transform .08s linear; }
.kit .kit-glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 45%); opacity: 0; transition: opacity .3s; }
.kit.is-tilting .kit-glare { opacity: 1; }
/* envelope */
.si-envelope[data-palette="midnight"], .si-envelope[data-palette="burgundy"] { background: radial-gradient(circle at 50% 30%, #2a2340, #120f1c 70%); }
.si-envelope[data-palette="midnight"] .si-envelope-cta strong, .si-envelope[data-palette="burgundy"] .si-envelope-cta strong { color: #f3e7d1; }
.public-invitation-stage[data-invitation-stage] { opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.public-invitation-stage[data-invitation-stage].is-open { opacity: 1; transform: none; }
.public-invitation-page.is-open .rsvp-panel { animation: kit-rise .8s ease .4s both; }
@keyframes kit-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .kit .kit-fx, .kit .kit-glare { display: none; }
    .kit.is-open .kit-names { animation: none; background: none; color: var(--k-ink); -webkit-text-fill-color: initial; }
    .kit[data-reveal] .kit-body > *, .kit[data-reveal] .kit-extended > * { opacity: 1; transform: none; transition: none; }
    .public-invitation-stage .kit { transform: none !important; }
}

/* compact hf tiles: only the essentials fit */
.kit.kit-hf.invitation-compact .kit-intro, .kit.kit-hf.invitation-compact .kit-reply, .kit.kit-hf.invitation-compact .kit-orn-divider, .kit.kit-hf.invitation-compact .kit-weekday, .kit.kit-hf.invitation-compact .kit-count .invitation-count-label, .kit.kit-hf.invitation-compact .kit-badge, .kit.kit-hf.invitation-compact .kit-recipient { display: none; }
.kit.kit-hf.invitation-compact .kit-age-line { display: block; }
.kit.kit-hf.invitation-compact .kit-hero { margin-bottom: 1.5cqw; }
.kit.kit-hf.invitation-compact .kit-when { margin-top: 3cqw; }
.kit.kit-hf.invitation-compact .kit-count { margin-top: 3cqw; }

/* ===== Contrast pass (2026-09-23) ===== */
.kit.kit-hf { --k-soft: color-mix(in srgb, var(--k-ink) 78%, transparent); }
.kit.kit-hf .kit-main::before { content: ""; position: absolute; inset: -4cqw 0 0; z-index: -1; background: radial-gradient(ellipse 62% 70% at 50% 42%, color-mix(in srgb, var(--kit-hf-bg) 88%, transparent), color-mix(in srgb, var(--kit-hf-bg) 55%, transparent) 60%, transparent 100%); pointer-events: none; }
.kit.kit-hf .kit-main { position: relative; z-index: 2; }
.kit.kit-hf .kit-countdown > span { background: color-mix(in srgb, var(--kit-hf-bg) 94%, #fff); border: 1px solid color-mix(in srgb, var(--k-accent) 55%, transparent); box-shadow: 0 .8cqw 2.4cqw color-mix(in srgb, var(--invite-ink) 18%, transparent); }
.kit.kit-hf .kit-countdown strong { color: var(--k-ink); }
.kit.kit-hf .kit-countdown small { color: var(--k-accent); }
.kit.kit-hf.kit-dark .kit-countdown > span { background: rgba(8, 8, 14, .55); border-color: color-mix(in srgb, var(--k-gold) 70%, transparent); backdrop-filter: blur(6px); }
.kit.kit-hf.kit-dark .kit-countdown strong { color: #fff6df; }
.kit.kit-hf.kit-dark .kit-countdown small { color: var(--k-gold); }
.kit.kit-hf.kit-dark { --k-soft: rgba(246, 236, 216, .86); }
.kit.kit-hf.kit-dark .kit-main::before { background: radial-gradient(ellipse 62% 70% at 50% 42%, rgba(0, 0, 0, .42), rgba(0, 0, 0, .2) 60%, transparent 100%); }
.kit.kit-hf .kit-count .invitation-count-label, .kit.kit-hf .kit-venue, .kit.kit-hf .kit-notes dt, .kit.kit-hf .kit-stop strong { color: var(--k-accent); }
.kit.kit-hf.kit-dark .kit-count .invitation-count-label, .kit.kit-hf.kit-dark .kit-venue, .kit.kit-hf.kit-dark .kit-notes dt, .kit.kit-hf.kit-dark .kit-stop strong, .kit.kit-hf.kit-dark .kit-weekday { color: var(--k-gold); }
.kit.kit-hf .kit-date { text-shadow: 0 0 1.4cqw color-mix(in srgb, var(--kit-hf-bg) 90%, transparent); }
.kit.kit-hf .kit-names { text-shadow: 0 0 2cqw color-mix(in srgb, var(--kit-hf-bg) 80%, transparent); }
.kit.kit-hf .kit-simple-agenda { background: color-mix(in srgb, var(--kit-hf-bg) 92%, #fff); border-color: color-mix(in srgb, var(--k-accent) 50%, transparent); }
.kit.kit-hf.kit-dark .kit-simple-agenda { background: rgba(8, 8, 14, .5); }
.kit.kit-hf .kit-rsvp { background: color-mix(in srgb, var(--kit-hf-bg) 88%, #fff); }
.kit.kit-hf.kit-dark .kit-rsvp { background: rgba(8, 8, 14, .5); }
.kit.kit-hf .kit-notes dt .kit-icon { background: color-mix(in srgb, var(--kit-hf-bg) 90%, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-accent) 40%, transparent); }
.kit.kit-hf.kit-dark .kit-notes dt .kit-icon { background: rgba(8, 8, 14, .5); }
.kit.kit-hf.invitation-baptism-olive .kit-medallion, .kit.kit-hf.invitation-baptism-olive .kit-orn-top { display: none !important; }

/* Contrast pass 2 — dark artwork needs a firmer plate under the text */
.kit.kit-hf.kit-dark .kit-main::before { background: radial-gradient(ellipse 66% 72% at 50% 44%, rgba(0, 0, 0, .58), rgba(0, 0, 0, .3) 62%, transparent 100%); }
.kit.kit-hf.kit-dark .kit-countdown > span { background: rgba(0, 0, 0, .62); border-color: color-mix(in srgb, var(--k-gold) 85%, transparent); }
.kit.kit-hf.kit-dark .kit-names, .kit.kit-hf.kit-dark .kit-date, .kit.kit-hf.kit-dark .kit-ticket-date b { text-shadow: 0 .2cqw 1.2cqw rgba(0, 0, 0, .75); }
.kit.kit-hf.kit-dark.is-open .kit-names { background: none; color: var(--k-ink); -webkit-text-fill-color: currentColor; animation: none; }
.kit.kit-hf.kit-dark .kit-intro, .kit.kit-hf.kit-dark .kit-reply, .kit.kit-hf.kit-dark .kit-quote p, .kit.kit-hf.kit-dark .kit-notes dd, .kit.kit-hf.kit-dark .kit-deadline { color: #f2e6d2; text-shadow: 0 .2cqw 1cqw rgba(0, 0, 0, .6); }
.kit.kit-hf.kit-dark .kit-stop p, .kit.kit-hf.kit-dark .kit-time { color: #efe2cd; }
.kit.kit-hf.kit-dark .kit-simple-agenda { background: rgba(0, 0, 0, .55); border-color: color-mix(in srgb, var(--k-gold) 70%, transparent); }
.kit.kit-hf.kit-dark .kit-rsvp { background: rgba(0, 0, 0, .55); }
.kit.kit-hf.kit-dark .kit-notes dt .kit-icon { background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-gold) 55%, transparent); }
.kit.kit-hf.kit-dark .kit-footer { color: rgba(242, 230, 210, .72); }
/* light artwork: make the tiles read on cream paper */
.kit.kit-hf:not(.kit-dark) .kit-countdown > span { background: color-mix(in srgb, var(--kit-hf-bg) 55%, #fff); }

/* Contrast pass 3 — guarantee the countdown and the names on busy dark artwork */
.kit.kit-hf.kit-dark .kit-countdown > span { background: rgba(0, 0, 0, .72); border: 1.5px solid color-mix(in srgb, var(--k-gold) 95%, transparent); box-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .45); }
.kit.kit-hf.kit-dark .kit-countdown strong { color: #fffaf0; }
.kit.kit-hf.kit-dark .kit-countdown small { color: #f0d9a4; }
.kit.kit-hf.kit-dark .kit-names { color: #fdf3e2; }
.kit.kit-hf.kit-dark .kit-count .invitation-count-label { color: #f0d9a4; text-shadow: 0 .2cqw 1cqw rgba(0, 0, 0, .7); }
.kit.kit-hf.kit-dark .kit-venue, .kit.kit-hf.kit-dark .kit-kind { text-shadow: 0 .2cqw 1cqw rgba(0, 0, 0, .7); }

/* Legacy app.css rules still win on some elements — pin the dark-artwork text explicitly */
.kit.kit-hf.kit-dark .kit-names { color: #fdf3e2 !important; -webkit-text-fill-color: #fdf3e2 !important; }
.kit.kit-hf.kit-dark .kit-countdown strong { color: #fffaf0 !important; }
.kit.kit-hf.kit-dark .kit-countdown small { color: #f0d9a4 !important; }
.kit.kit-hf.kit-dark .kit-date, .kit.kit-hf.kit-dark .kit-ticket-date b, .kit.kit-hf.kit-dark .kit-ticket-number b { color: #fdf3e2 !important; }
.kit.kit-hf.kit-dark .kit-intro, .kit.kit-hf.kit-dark .kit-reply, .kit.kit-hf.kit-dark .kit-quote p, .kit.kit-hf.kit-dark .kit-notes dd, .kit.kit-hf.kit-dark .kit-stop p, .kit.kit-hf.kit-dark .kit-deadline { color: #f2e6d2 !important; }
.kit.kit-hf.kit-dark .kit-simple-agenda strong, .kit.kit-hf.kit-dark .kit-time { color: #fdf3e2 !important; }
.kit.kit-hf.kit-dark .kit-venue, .kit.kit-hf.kit-dark .kit-notes dt, .kit.kit-hf.kit-dark .kit-stop strong, .kit.kit-hf.kit-dark .kit-count .invitation-count-label, .kit.kit-hf.kit-dark .kit-weekday, .kit.kit-hf.kit-dark .kit-kind { color: #f0d9a4 !important; }
.kit.kit-hf.kit-dark .kit-icon { color: #f0d9a4 !important; }
.kit.kit-hf.kit-dark .kit-rsvp { color: #fdf3e2 !important; border-color: #e6c887 !important; }
/* and the light ones: make sure the legacy gold never washes the names out */
.kit.kit-hf:not(.kit-dark) .kit-names { color: var(--k-ink) !important; }
.kit.kit-hf:not(.kit-dark).is-open .kit-names { color: transparent !important; }
.kit.kit-hf:not(.kit-dark) .kit-countdown strong { color: var(--k-ink) !important; }

/* --------------------------------------------------------------------------
   9. Colour choice, witnesses and the flowers / cause note
   -------------------------------------------------------------------------- */
/* The artwork designs carry their own background, so a palette has to do more
   than swap ink: it tints the paper, the accents and washes over the artwork. */
.kit.kit-hf {
    --k-accent: var(--invite-accent-strong);
    --k-gold: var(--invite-gold);
    --k-line: color-mix(in srgb, var(--invite-accent) 45%, transparent);
}
/* --kit-hf-bg is an inline variable on .kit-card, so the tint is mixed there and
   inherited by everything inside the card. */
.kit.kit-hf .kit-card {
    --kit-hf-mix: color-mix(in srgb, var(--kit-hf-bg) 82%, var(--invite-accent));
    background: var(--kit-hf-mix);
}
.kit.kit-hf .kit-main::before { background: radial-gradient(ellipse 62% 70% at 50% 42%, color-mix(in srgb, var(--kit-hf-mix) 90%, transparent), color-mix(in srgb, var(--kit-hf-mix) 58%, transparent) 60%, transparent 100%); }
.kit.kit-hf .kit-countdown > span { background: color-mix(in srgb, var(--kit-hf-mix) 94%, #fff); }
.kit.kit-hf .kit-hero .kit-kind { background: color-mix(in srgb, var(--kit-hf-mix) 82%, transparent); }
.kit.kit-hf .kit-hf-top::after, .kit.kit-hf .kit-hf-bottom::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--invite-accent);
    mix-blend-mode: soft-light;
    opacity: .58;
}
/* A light card keeps dark text whatever the palette: the ink only takes on the
   palette's hue, never its lightness. The selector has to outrank
   `.invitation.kit.palette-midnight`, which otherwise hands it cream ink. */
.invitation.kit.kit-hf:not(.kit-dark) {
    --k-ink: color-mix(in srgb, var(--invite-accent-strong) 62%, #251f1b);
    --k-soft: color-mix(in srgb, var(--invite-accent-strong) 58%, #4a423c);
    --k-paper: color-mix(in srgb, var(--invite-accent) 10%, #fffdf8);
    --k-tint: color-mix(in srgb, var(--invite-accent) 14%, transparent);
    --k-accent: var(--invite-accent-strong);
    --k-line: color-mix(in srgb, var(--invite-accent) 45%, transparent);
}
.kit.kit-hf.kit-dark {
    --k-accent: var(--invite-gold, #e0bb70);
    --k-line: color-mix(in srgb, var(--invite-gold, #e0bb70) 50%, transparent);
}
.kit.kit-hf.kit-dark .kit-card { --kit-hf-mix: color-mix(in srgb, var(--kit-hf-bg) 88%, var(--invite-accent)); }
.kit.kit-hf.kit-dark .kit-countdown > span { background: rgba(8, 8, 14, .55); }
.kit.kit-hf.kit-dark .kit-hero .kit-kind { background: rgba(0, 0, 0, .35); }

/* The guest the card was written for deserves to be read first. */
.kit .kit-recipient { display: grid; gap: .6cqw; margin-bottom: 1.6cqw; }
.kit .kit-recipient small { font: 600 1.7cqw/1 var(--k-label); letter-spacing: .22em; text-transform: uppercase; color: var(--k-accent); }
.kit .kit-recipient strong { font: 500 5.4cqw/1.12 var(--k-display); letter-spacing: -.01em; color: var(--k-ink); }
.kit.invitation-compact .kit-recipient strong { font-size: 4cqw; }

.kit .kit-witnesses { display: grid; justify-items: center; gap: .6cqw; margin: 3cqw auto 0; padding: 2.4cqw 3cqw; max-width: 84%; border: 1px solid var(--k-line); border-radius: 1.6cqw; background: color-mix(in srgb, var(--k-paper) 45%, transparent); }
.kit .kit-witnesses .kit-icon { width: 4.6cqw; height: 4.6cqw; color: var(--k-accent); }
.kit .kit-witnesses small { font: 600 1.7cqw/1 var(--k-label); letter-spacing: .2em; text-transform: uppercase; color: var(--k-soft); }
.kit .kit-witnesses strong { font: 500 4.4cqw/1.2 var(--k-display); color: var(--k-ink); }
.kit .kit-witnesses p { margin: 0; font: italic 400 2.7cqw/1.5 var(--k-body); color: var(--k-soft); }
.kit.invitation-compact .kit-witnesses { display: none; }

/* Four notes leave one on its own row — keep it centred under the others. */
.kit .kit-notes { justify-items: center; }
.kit .kit-notes > div { max-width: 34ch; }
.kit .kit-notes .kit-cause { grid-column: 1 / -1; }
.kit .kit-notes .kit-cause dt { color: var(--k-accent); }
.kit .kit-notes .kit-cause dd { font-style: italic; }

/* --------------------------------------------------------------------------
   10. Readability pass — text scale, artwork seam, hero alignment, photo size
   Reported by the owner: the age number sat half outside the card, a hard line
   ran across the middle of several cards, photos were too small, the
   SmartInvites credit was invisible and the body text was far too small.
   -------------------------------------------------------------------------- */

/* The soft light behind the text used to be an ellipse clipped by the top of
   .kit-main, which drew a hard horizontal line across the card. The box now
   extends past the artwork on every side so the glow fades out inside it. */
.kit.kit-hf .kit-main::before {
    inset: -30cqw -10cqw -12cqw;
    background: radial-gradient(ellipse 58% 54% at 50% 50%,
        color-mix(in srgb, var(--kit-hf-mix) 90%, transparent),
        color-mix(in srgb, var(--kit-hf-mix) 58%, transparent) 62%,
        transparent 92%);
}

/* Hero items: the old procedural artwork lived on the right, so a few designs
   pushed the age and the label to the left edge. With full-card artwork that
   just clipped them. */
.kit.kit-hf .kit-hero > * { justify-self: center; margin-left: 0; margin-right: 0; }
.kit.kit-hf .kit-hero .kit-ticket-number,
.kit.kit-hf .kit-hero .kit-kind { justify-self: center; margin-left: 0; text-align: center; }
.kit.kit-hf .kit-hero .kit-kind { margin-top: 0; color: var(--k-accent); font-size: 2.4cqw; letter-spacing: .24em; }
.kit.kit-hf.kit-dark .kit-hero .kit-kind { color: var(--k-gold); }
.kit.kit-hf .kit-ticket-number { display: grid; justify-items: center; gap: .4cqw; }
.kit.kit-hf .kit-ticket-number b { font-size: 20cqw; line-height: .92; }
.kit.kit-hf .kit-ticket-number small { font: 600 2.4cqw/1 var(--k-label); letter-spacing: .26em; text-transform: uppercase; color: var(--k-accent); }
.kit.kit-hf.kit-dark .kit-ticket-number small { color: var(--k-gold); }

/* Photos were shrunk to fit the old decorative frames. */
.kit.kit-hf .kit-arch { width: 54cqw; }
.kit.kit-hf .kit-medallion { width: 40cqw; height: 40cqw; }
.kit.kit-hf.invitation-wedding-monogram .kit-medallion { width: 36cqw; height: 36cqw; }
.kit.kit-hf.kit-photo .kit-hero .kit-photo { width: 56cqw; }
.kit.kit-hf.kit-poster .kit-hero .kit-photo { width: 44cqw; }
.kit.kit-hf.kit-ticket .kit-hero .kit-photo { width: 38cqw; }
.kit.kit-hf.kit-editorial .kit-hero .kit-photo { width: 54cqw; }

/* Type scale — every small label and body line moves up roughly a quarter. */
.kit .kit-kind { font-size: 2.4cqw; letter-spacing: .26em; }
.kit .kit-recipient small { font-size: 2.3cqw; letter-spacing: .2em; }
.kit .kit-intro { font-size: 3.5cqw; max-width: 86%; }
.kit.type-modern .kit-intro, .kit.type-bold .kit-intro, .kit.type-playful .kit-intro { font-size: 3.2cqw; }
.kit .kit-reply { font-size: 3.3cqw; max-width: 86%; }
.kit.type-modern .kit-reply, .kit.type-bold .kit-reply, .kit.type-playful .kit-reply { font-size: 3cqw; }
.kit .kit-age-line { font-size: 3cqw; }
.kit .kit-age-line b { font-size: 6cqw; }
.kit .kit-weekday { font-size: 2.9cqw; }
.kit.type-modern .kit-weekday, .kit.type-bold .kit-weekday, .kit.type-playful .kit-weekday { font-size: 2.4cqw; }
.kit .kit-venue { font-size: 2.7cqw; letter-spacing: .16em; }
.kit .kit-count .invitation-count-label { font-size: 2.3cqw; letter-spacing: .18em; }
.kit .kit-countdown small { font-size: 2.9cqw; }
.kit.type-modern .kit-countdown small, .kit.type-bold .kit-countdown small, .kit.type-playful .kit-countdown small { font-size: 2.5cqw; }
.kit .kit-quote p { font-size: 3.4cqw; }
.kit.type-modern .kit-quote p, .kit.type-bold .kit-quote p, .kit.type-playful .kit-quote p { font-size: 3cqw; }
.kit .kit-time { font-size: 2.9cqw; }
.kit .kit-stop strong { font-size: 2.7cqw; letter-spacing: .12em; }
.kit .kit-stop p { font-size: 3cqw; }
.kit.type-modern .kit-stop p, .kit.type-bold .kit-stop p, .kit.type-playful .kit-stop p { font-size: 2.7cqw; }
.kit .kit-simple-agenda small { font-size: 2.2cqw; letter-spacing: .18em; }
.kit .kit-simple-agenda strong { font-size: 4.4cqw; }
.kit .kit-christening small { font-size: 2.2cqw; letter-spacing: .16em; }
.kit .kit-christening strong { font-size: 3.1cqw; }
.kit .kit-witnesses small { font-size: 2.1cqw; }
.kit .kit-witnesses p { font-size: 3cqw; }
.kit .kit-notes dt { font-size: 2.2cqw; letter-spacing: .14em; }
.kit .kit-notes dd { font-size: 3cqw; }
.kit.type-modern .kit-notes dd, .kit.type-bold .kit-notes dd, .kit.type-playful .kit-notes dd { font-size: 2.7cqw; }
.kit .kit-deadline { font-size: 3cqw; }
.kit .kit-map { font-size: 2.5cqw; }
.kit .kit-rsvp { font-size: 2.5cqw; letter-spacing: .18em; padding: 2.4cqw 6.4cqw; }
.kit .kit-notes .kit-icon, .kit .kit-witnesses .kit-icon { width: 5.2cqw; height: 5.2cqw; }

/* The SmartInvites credit is the only link back to us — it has to be readable. */
.kit .kit-footer {
    margin-top: 7cqw;
    padding: 4.4cqw 7.5cqw 6cqw;
    flex-direction: column;
    align-items: center;
    gap: 2cqw;
    border-top: 1px solid color-mix(in srgb, var(--k-line) 70%, transparent);
    font-size: 2.5cqw;
    text-align: center;
}
.kit .kit-powered {
    padding: 1.6cqw 4cqw;
    border: 1px solid var(--k-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--k-paper) 72%, transparent);
    font: 600 2.4cqw/1 var(--k-label);
    letter-spacing: .14em;
    color: var(--k-accent);
}
.kit a.kit-powered:hover { border-color: var(--k-accent); background: color-mix(in srgb, var(--k-accent) 12%, transparent); }
.kit.kit-hf .kit-footer { padding-bottom: 6cqw; }
.kit.kit-hf.kit-dark .kit-powered { color: #f4e3b8; border-color: rgba(230, 200, 135, .5); background: rgba(0, 0, 0, .34); }
.kit.invitation-compact .kit-footer { display: none; }

/* Two columns read better now that the note text is bigger. */
.kit .kit-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.4cqw 5cqw; }
.kit .kit-notes > div { max-width: 40ch; }
.kit .kit-notes > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* The age badge is the point of a children's card — give it room. */
.kit.kit-hf.kit-poster .kit-badge-age { width: 21cqw; height: 21cqw; }
.kit.kit-hf.kit-poster .kit-badge-age b { font-size: 9cqw; }
.kit.kit-hf.kit-poster .kit-badge-age small { font-size: 2cqw; letter-spacing: .1em; }
.kit.kit-hf.kit-photo .kit-badge-age { width: 21cqw; height: 21cqw; }

/* --------------------------------------------------------------------------
   11. The colour choice has to be felt, not guessed
   A palette used to move only the ink. Now it repaints the illustration itself:
   a `hue` wash pulls the artwork into the chosen colour family while keeping its
   own light and shade, and the paper, frame and accents follow.
   -------------------------------------------------------------------------- */
.kit.kit-hf .kit-card { --kit-hf-mix: color-mix(in srgb, var(--kit-hf-bg) 68%, var(--invite-accent)); }
.kit.kit-hf.kit-dark .kit-card { --kit-hf-mix: color-mix(in srgb, var(--kit-hf-bg) 80%, var(--invite-accent)); }
.kit.kit-hf { --kit-wash: .72; --kit-veil: .5; }
.kit.kit-hf.palette-ivory { --kit-wash: .34; --kit-veil: .3; }
.kit.kit-hf.kit-dark { --kit-wash: .6; --kit-veil: .42; }

.kit.kit-hf .kit-hf-top::before, .kit.kit-hf .kit-hf-bottom::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--invite-accent);
    mix-blend-mode: hue;
    opacity: var(--kit-wash);
    pointer-events: none;
}
.kit.kit-hf .kit-hf-top::after, .kit.kit-hf .kit-hf-bottom::after { opacity: var(--kit-veil); }
.kit.kit-hf .kit-card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--invite-accent) 22%, transparent); }
.kit.kit-hf .kit-simple-agenda, .kit.kit-hf .kit-witnesses { border-color: color-mix(in srgb, var(--invite-accent) 55%, transparent); }

/* The palette the artwork was drawn for is the one that must not touch it. */
.kit.kit-hf.kit-native-palette { --kit-wash: 0; --kit-veil: .34; }
.kit.kit-hf.kit-native-palette .kit-card { --kit-hf-mix: var(--kit-hf-bg); }
.kit.kit-hf.kit-native-palette .kit-hf-top::before, .kit.kit-hf.kit-native-palette .kit-hf-bottom::before { display: none; }

/* --------------------------------------------------------------------------
   12. No seam, whatever the palette
   Two separate things used to draw a line across the card: the flat paper only
   matched the artwork at one height, and the palette tinted paper and artwork by
   different amounts. Now the paper follows the artwork from its top edge to its
   bottom edge, and the colour wash sits over the whole card at once.
   -------------------------------------------------------------------------- */
.kit.kit-hf .kit-card {
    --kit-hf-mix: var(--kit-hf-bg);
    background: linear-gradient(180deg,
        var(--kit-hf-bg) 0%,
        var(--kit-hf-bg) 24%,
        color-mix(in srgb, var(--kit-hf-bg) 50%, var(--kit-hf-bg2, var(--kit-hf-bg))) 52%,
        var(--kit-hf-bg2, var(--kit-hf-bg)) 80%,
        var(--kit-hf-bg2, var(--kit-hf-bg)) 100%);
}
.kit.kit-hf.kit-dark .kit-card { --kit-hf-mix: var(--kit-hf-bg); }
.kit.kit-hf .kit-main::before {
    background: radial-gradient(ellipse 58% 54% at 50% 50%,
        color-mix(in srgb, var(--kit-hf-bg) 88%, transparent),
        color-mix(in srgb, var(--kit-hf-bg) 55%, transparent) 62%,
        transparent 92%);
}
/* One wash over the finished card — artwork, paper and ink shift together. */
.kit.kit-hf .kit-hf-top::before, .kit.kit-hf .kit-hf-bottom::before { display: none; }
.kit.kit-hf .kit-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--invite-accent);
    mix-blend-mode: hue;
    opacity: var(--kit-wash);
    pointer-events: none;
}
.kit.kit-hf.kit-native-palette .kit-card::after { display: none; }
.kit.kit-hf .kit-photo { z-index: 4; }
.kit.kit-hf .kit-countdown > span { background: color-mix(in srgb, var(--kit-hf-bg) 92%, #fff); }
.kit.kit-hf.kit-dark .kit-countdown > span { background: rgba(8, 8, 14, .55); }
.kit.kit-hf .kit-hero .kit-kind { background: color-mix(in srgb, var(--kit-hf-bg) 82%, transparent); }
.kit.kit-hf.kit-dark .kit-hero .kit-kind { background: rgba(0, 0, 0, .35); }

/* The big ticket date was clipped by the hero's own overflow. */
.kit.kit-hf .kit-hero { overflow: visible; }
.kit.kit-hf .kit-ticket-date b, .kit.kit-hf .kit-ticket-number b { line-height: 1.02; }
.kit.kit-hf .kit-ticket-date { align-items: center; padding-bottom: .6cqw; }


/* --------------------------------------------------------------------------
   13. The veil behind the text
   The ellipse used for it drew a visible dark rectangle across the dark designs.
   A vertical fade has no edges to notice.
   -------------------------------------------------------------------------- */
.kit.kit-hf .kit-main::before {
    inset: -24cqw 0 -8cqw;
    background: linear-gradient(180deg,
        transparent 0,
        color-mix(in srgb, var(--kit-hf-bg) 62%, transparent) 14%,
        color-mix(in srgb, var(--kit-hf-bg) 86%, transparent) 34%,
        color-mix(in srgb, var(--kit-hf-bg) 86%, transparent) 70%,
        color-mix(in srgb, var(--kit-hf-bg) 55%, transparent) 90%,
        transparent 100%);
}
.kit.kit-hf.kit-dark .kit-main::before {
    background: linear-gradient(180deg,
        transparent 0,
        color-mix(in srgb, var(--kit-hf-bg) 34%, transparent) 16%,
        color-mix(in srgb, var(--kit-hf-bg) 60%, transparent) 38%,
        color-mix(in srgb, var(--kit-hf-bg) 60%, transparent) 70%,
        color-mix(in srgb, var(--kit-hf-bg) 30%, transparent) 90%,
        transparent 100%);
}


/* --------------------------------------------------------------------------
   14. The envelope
   A real illustrated envelope that the guest taps to open: the closed one fades
   away, the card slides out, and the page behind it is already the invitation.
   -------------------------------------------------------------------------- */
.si-envelope {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 26px;
    padding: 24px;
    background: radial-gradient(circle at 50% 34%, #fdf7ee, #e8ddd0 72%);
    transition: opacity .75s ease .55s, visibility 0s linear 1.35s;
}
.si-envelope[data-palette="midnight"], .si-envelope[data-palette="burgundy"], .si-envelope[data-palette="ivory"] { background: radial-gradient(circle at 50% 34%, #2f2a3c, #14111c 72%); }
.si-envelope.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.si-envelope-body {
    position: relative;
    width: min(430px, 86vw);
    aspect-ratio: 900 / 1071;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: translateY(0);
    transition: transform .5s ease;
}
.si-envelope-body:hover { transform: translateY(-7px); }
.si-envelope-body:focus-visible { outline: 3px solid var(--pine); outline-offset: 10px; border-radius: 12px; }
.si-env-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 34px 46px rgba(46, 34, 22, .34)); }
.si-env-closed { z-index: 3; transition: opacity .5s ease, transform .6s cubic-bezier(.3, .8, .3, 1); }
/* The open envelope hides behind the closed one until the tap, then its flap
   is revealed upward — that reveal is the opening movement. */
.si-env-open { z-index: 1; clip-path: inset(53% 0 0 0); transition: clip-path .55s cubic-bezier(.3, .85, .3, 1); }
.si-envelope.is-opening .si-env-open { clip-path: inset(0 0 0 0); }
.si-env-letter {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 4%;
    width: 74%;
    aspect-ratio: 5 / 7;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5%;
    padding: 8%;
    border-radius: 6px;
    background: linear-gradient(180deg, #fffdf8, #fbf3e6);
    box-shadow: 0 18px 34px rgba(46, 34, 22, .3), inset 0 0 0 1px rgba(196, 160, 96, .5);
    transform: translate(-50%, 6%) scale(.94);
    opacity: 0;
    transition: transform 1s cubic-bezier(.2, .85, .25, 1) .22s, opacity .35s ease .22s;
}
.si-env-letter i { width: 34%; height: 1px; background: linear-gradient(90deg, transparent, #c8a765, transparent); }
.si-env-letter b { font: 500 clamp(30px, 9vw, 52px)/1 "Playfair Display", Georgia, serif; color: #8a6a3c; }
.si-env-letter em { max-width: 90%; font: italic 400 clamp(11px, 3.2vw, 15px)/1.35 "Cormorant Garamond", Georgia, serif; color: #6d5a44; text-align: center; }
.si-env-sparks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.si-env-sparks i { position: absolute; left: 50%; top: 62%; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #fff3d0, rgba(226, 184, 110, 0)); opacity: 0; }
.si-envelope.is-opening .si-env-closed { opacity: 0; transform: translateY(10px) scale(1.03); }
.si-envelope.is-opening .si-env-letter { transform: translate(-50%, -46%) scale(1); opacity: 1; }
.si-envelope.is-opening .si-env-sparks i { animation: si-spark .85s ease-out forwards; }
.si-envelope.is-opening .si-env-sparks i:nth-child(1) { --sx: -70px; --sy: -54px; animation-delay: .02s; }
.si-envelope.is-opening .si-env-sparks i:nth-child(2) { --sx: 64px; --sy: -62px; animation-delay: .06s; }
.si-envelope.is-opening .si-env-sparks i:nth-child(3) { --sx: -36px; --sy: -96px; animation-delay: .1s; }
.si-envelope.is-opening .si-env-sparks i:nth-child(4) { --sx: 42px; --sy: -104px; animation-delay: .14s; }
.si-envelope.is-opening .si-env-sparks i:nth-child(5) { --sx: -96px; --sy: -18px; animation-delay: .18s; }
.si-envelope.is-opening .si-env-sparks i:nth-child(6) { --sx: 98px; --sy: -24px; animation-delay: .22s; }
@keyframes si-spark {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, -60px))) scale(1.5); }
}
.si-envelope-cta { margin: 0; display: grid; gap: 7px; text-align: center; }
.si-envelope-cta strong { font: 500 clamp(22px, 5vw, 30px)/1.1 "Playfair Display", Georgia, serif; color: #3d3226; }
.si-envelope-cta small { font: 600 10px/1 Inter, system-ui, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #8b7a63; }
.si-envelope[data-palette="midnight"] .si-envelope-cta strong, .si-envelope[data-palette="burgundy"] .si-envelope-cta strong, .si-envelope[data-palette="ivory"] .si-envelope-cta strong { color: #f6ecd8; }
.si-envelope[data-palette="midnight"] .si-envelope-cta small, .si-envelope[data-palette="burgundy"] .si-envelope-cta small, .si-envelope[data-palette="ivory"] .si-envelope-cta small { color: rgba(246, 236, 216, .7); }
@media (prefers-reduced-motion: reduce) {
    .si-envelope, .si-envelope-body, .si-env-art, .si-env-letter { transition: none !important; }
    .si-env-sparks { display: none; }
}

/* 15. Audit 2026-09-27 contrast fixes.
   Sky's accent is too pale for small labels on light artwork. */
.invitation.kit.kit-hf.palette-sky:not(.kit-dark) { --k-accent: color-mix(in srgb, var(--invite-accent-strong) 70%, #10222e); }
/* The poster badge on dark artwork is a gold disc: keep its number dark on every palette. */
.kit.kit-hf.kit-dark.kit-poster .kit-badge { color: #1b1d27; }

/* 16. Wedding rings keep their real gold and silver whatever the palette:
   the header of a wedding card sits above the palette wash. */
.kit.kit-hf.invitation-category-wedding .kit-hero { z-index: 4; }
.kit.kit-hf.invitation-category-wedding:not(.kit-dark):not(.kit-native-palette) .kit-hero .kit-kind { background: color-mix(in srgb, var(--k-paper) 88%, transparent); }

/* 17. Wedding programme as illustrated cards (content field schedule_style = cards).
   Cards wrap three to a row and the row is centred, so switching a stop off
   never leaves a hole. Paper, border and ink come from the palette; the
   illustrations sit under the same palette wash as the rest of the card. */
.kit .kit-stop-art { display: none; }
.kit .kit-timeline.kit-timeline-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 3cqw 2.4cqw; text-align: center; }
.kit .kit-timeline.kit-timeline-cards li { width: calc((100% - 4.8cqw) / 3); min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 2.6cqw 1.6cqw 3.2cqw; border: 1px solid var(--k-line); border-radius: 3.2cqw; background: color-mix(in srgb, var(--k-paper) 80%, transparent); box-shadow: 0 1.2cqw 3cqw -2cqw color-mix(in srgb, var(--k-ink) 30%, transparent); }
.kit .kit-timeline.kit-timeline-cards li[hidden] { display: none; }
.kit .kit-timeline.kit-timeline-cards li::before { display: none !important; }
.kit .kit-timeline.kit-timeline-cards .kit-dot { display: none; }
.kit .kit-timeline.kit-timeline-cards .kit-stop-art { display: block; order: -1; width: 17cqw; height: 17cqw; margin: 0 auto 1.4cqw; object-fit: contain; }
.kit .kit-timeline.kit-timeline-cards .kit-time { order: 0; display: block; margin: 0 0 .6cqw; font: 500 4.4cqw/1 var(--k-display); letter-spacing: .02em; color: var(--k-ink); }
.kit .kit-timeline.kit-timeline-cards .kit-stop { order: 1; display: block; text-align: center; text-decoration: none; }
.kit .kit-timeline.kit-timeline-cards .kit-stop strong { display: block; margin: 0 0 .5cqw; font: 700 1.9cqw/1.25 var(--k-label); letter-spacing: .14em; text-transform: uppercase; color: var(--k-accent); }
.kit .kit-timeline.kit-timeline-cards .kit-stop p { margin: 0; font: italic 400 2.5cqw/1.35 var(--k-body); color: var(--k-soft); overflow-wrap: anywhere; }
.kit .kit-timeline.kit-timeline-cards a.kit-stop p { text-decoration: underline; text-decoration-color: var(--k-line); text-underline-offset: .4cqw; }
/* Dark designs: no bright boxes — a faint frame and a soft glow behind the picture. */
.kit.kit-dark .kit-timeline.kit-timeline-cards li { background: rgba(255, 250, 240, .06); border-color: color-mix(in srgb, var(--k-gold, #e0bb70) 38%, transparent); box-shadow: none; }
.kit.kit-dark .kit-timeline.kit-timeline-cards .kit-stop-art { background: radial-gradient(circle, rgba(255, 246, 228, .2), rgba(255, 246, 228, 0) 68%); border-radius: 50%; }
.kit.kit-dark .kit-timeline.kit-timeline-cards .kit-time { color: #f6ecd8; }
/* Editor: two small pictures to choose the layout. */
.schedule-style-choice { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; padding: 0; border: 0; }
.schedule-style-choice legend { width: 100%; margin-bottom: 8px; color: var(--muted); font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.schedule-style-option { position: relative; flex: 1 1 140px; display: grid; justify-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; }
.schedule-style-option input { position: absolute; opacity: 0; pointer-events: none; }
.schedule-style-option:has(input:checked) { border-color: var(--pine); box-shadow: 0 0 0 2px var(--pine) inset; }
.schedule-style-option b { font: 600 13px/1.2 var(--sans); color: var(--ink); }
.schedule-style-sample { display: grid; gap: 4px; width: 84px; }
.schedule-style-sample-list { grid-template-columns: 1fr; }
.schedule-style-sample-list i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--pine) 0 18%, transparent 18% 24%, #e6dccd 24%); }
.schedule-style-sample-cards { grid-template-columns: repeat(3, 1fr); }
.schedule-style-sample-cards i { height: 20px; border-radius: 5px; border: 1px solid #e6dccd; background: radial-gradient(circle at 50% 38%, #e8c9b8 0 28%, transparent 30%), #fbf7f0; }
.kit .kit-timeline.kit-timeline-cards { gap: 2.6cqw 2cqw; }
.kit .kit-timeline.kit-timeline-cards li { width: calc((100% - 4cqw) / 3); padding: 2.4cqw 1.2cqw 3cqw; }
.kit .kit-timeline.kit-timeline-cards .kit-time { font-size: 5cqw; }
.kit .kit-timeline.kit-timeline-cards .kit-stop strong { font-size: 2.4cqw; letter-spacing: .1em; }
.kit .kit-timeline.kit-timeline-cards .kit-stop p { font-size: 3cqw; line-height: 1.3; }


/* --------------------------------------------------------------------------
   18. Dress-code colours (every design) and the banded Perla layout
   The colours a couple asks guests to wear must look exactly as chosen, so
   app.js draws them again on .kit-swatch-layer, above the palette wash.
   -------------------------------------------------------------------------- */
.kit .kit-notes dd[hidden], .kit .kit-swatches[hidden] { display: none; }
.kit .kit-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8cqw; margin: 1.8cqw 0 0; padding: 0; }
.kit .kit-swatches i { width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 .5cqw color-mix(in srgb, var(--k-paper) 80%, #fff), 0 0 0 calc(.5cqw + 1px) var(--k-line), 0 .8cqw 1.4cqw -.6cqw rgba(0, 0, 0, .4); }
.kit .kit-notes > div:has(> .kit-swatches:not([hidden])) { grid-column: 1 / -1; }
.kit .kit-swatch-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.kit .kit-swatch-layer[hidden] { display: none; }
.kit .kit-swatch-layer i { position: absolute; border-radius: 50%; background: var(--swatch); }

.kit.kit-sections .kit-card { --pearl: var(--kit-bead, url("/assets/images/perla/pearl.svg")); }
.kit.kit-sections { --k-names-transform: uppercase; --k-names-spacing: .06em; --k-names-weight: 500; }
.invitation.kit.kit-hf.invitation-wedding-perla.kit-native-palette { --k-ink: #2b2622; --k-soft: rgba(43, 38, 34, .74); --k-accent: #7a6958; --k-accent-soft: #a39382; --k-gold: #b29b7c; --k-line: color-mix(in srgb, #a39382 60%, transparent); --k-tint: rgba(163, 147, 130, .16); }
.kit.kit-sections .kit-names { font-size: calc(var(--k-names-size) * .84); line-height: 1.08; }

/* hero: the date in small capitals between two pearls */
.kit.kit-sections .kit-hero-date { display: flex; align-items: center; gap: 2.2cqw; font: 600 2.6cqw/1 var(--k-label); letter-spacing: .3em; text-transform: uppercase; color: var(--k-accent); }
.kit.kit-sections .kit-hero-date b { font-weight: 600; }
.kit.kit-sections .kit-hero-date i { width: 1.6cqw; height: 1.6cqw; background: var(--pearl) center / contain no-repeat; }

/* body order: names, then the letter */
.kit.kit-sections .kit-body { display: flex; flex-direction: column; align-items: center; }
.kit.kit-sections .kit-recipient { order: -3; }
.kit.kit-sections .kit-names { order: -2; }
.kit.kit-sections .kit-letter { order: -1; }
.kit.kit-sections .kit-body > * { max-width: 100%; }

/* the letter, with the envelope tucked under it */
.kit.kit-sections .kit-letter { position: relative; align-self: stretch; margin: 5cqw 0 21cqw; padding: 6cqw 7cqw 13cqw; border-radius: 1.6cqw; background: color-mix(in srgb, #fff 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-gold) 32%, transparent), 0 2.4cqw 5cqw -2.4cqw rgba(60, 45, 30, .3); }
.kit.kit-sections .kit-letter .kit-intro { margin: 0; }
.kit.kit-sections .kit-letter-art { position: absolute; left: 50%; bottom: -17cqw; width: 36cqw; height: auto; transform: translateX(-50%) rotate(-4deg); filter: drop-shadow(0 1.4cqw 1.6cqw rgba(60, 45, 30, .28)); }

/* the calendar replaces the written date; the frame replaces the venue line */
.kit.kit-sections:not(.invitation-compact) .kit-when > .kit-weekday,
.kit.kit-sections:not(.invitation-compact) .kit-when > .kit-date,
.kit.kit-sections:not(.invitation-compact) .kit-when > .kit-venue { display: none; }
.kit.kit-sections .kit-when { width: 100%; margin-top: 2cqw; }
.kit.kit-sections .kit-calendar { position: relative; width: 100%; padding: 5cqw 0 5.4cqw; text-align: center; }
.kit.kit-sections .kit-calendar::before, .kit.kit-sections .kit-calendar::after { content: ""; position: absolute; left: 6%; right: 6%; height: 1.7cqw; background: var(--pearl) 0 50% / 1.7cqw 1.7cqw repeat-x; }
.kit.kit-sections .kit-calendar::before { top: 0; }
.kit.kit-sections .kit-calendar::after { bottom: 0; }
.kit.kit-sections .kit-calendar-month { margin: 0 0 3.6cqw; font: 500 6.4cqw/1 var(--k-display); letter-spacing: .16em; text-transform: uppercase; color: var(--k-ink); }
.kit.kit-sections .kit-calendar-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.kit.kit-sections .kit-calendar-days li { display: grid; justify-items: center; gap: 1.8cqw; }
.kit.kit-sections .kit-calendar-days small { font: 600 1.8cqw/1 var(--k-label); letter-spacing: .1em; color: var(--k-soft); }
.kit.kit-sections .kit-calendar-days b { position: relative; display: grid; place-items: center; width: 8cqw; height: 8cqw; font: 400 4.4cqw/1 var(--k-display); color: var(--k-ink); }
.kit.kit-sections .kit-calendar-days .is-event small { color: var(--k-accent); }
.kit.kit-sections .kit-calendar-days .is-event b { font-weight: 600; color: var(--k-accent); }
.kit.kit-sections .kit-calendar-days .is-event b::before { content: ""; position: absolute; inset: -2.4cqw; background: var(--kit-ring, url("/assets/images/perla/ring.svg")) center / contain no-repeat; filter: drop-shadow(0 .3cqw .4cqw rgba(60, 45, 30, .3)); }

.kit.kit-sections .kit-framed { position: relative; display: grid; place-items: center; width: 60cqw; margin: 7cqw auto 0; }
.kit.kit-sections .kit-framed > * { grid-area: 1 / 1; }
.kit.kit-sections .kit-framed-art { width: 100%; height: auto; filter: drop-shadow(0 1.6cqw 2cqw rgba(50, 40, 30, .28)); }
.kit.kit-sections .kit-framed:not(:has(.kit-framed-art)) { min-height: 50cqw; }
.kit.kit-sections .kit-framed-in { position: relative; width: 64%; margin-top: var(--kit-frame-offset, 0); display: grid; justify-items: center; gap: 1.4cqw; text-align: center; }
.kit.kit-sections .kit-framed-in small { font: 600 1.8cqw/1 var(--k-label); letter-spacing: .32em; text-transform: uppercase; color: var(--k-accent); }
.kit.kit-sections .kit-framed-in strong { font: 500 5cqw/1.15 var(--k-display); color: var(--k-ink); overflow-wrap: anywhere; }
.kit.kit-sections .kit-framed-in > span { font: italic 400 3.4cqw/1.2 var(--k-body); color: var(--k-soft); }
.kit.kit-sections .kit-framed-in a { margin-top: 1.2cqw; font: 600 1.7cqw/1.2 var(--k-label); letter-spacing: .16em; text-transform: uppercase; color: var(--k-accent); text-underline-offset: .5cqw; }
.kit.kit-sections .kit-count { margin-top: 6cqw; }

/* programme: a band with a string of pearls for the line */
.kit.kit-sections .kit-timeline { margin-top: 7cqw; padding: 6cqw 5cqw 3cqw; border-radius: 2cqw; background: color-mix(in srgb, var(--k-gold) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-gold) 26%, transparent); }
.kit.kit-sections .kit-timeline:not(.kit-timeline-cards) li::before { width: 1.5cqw; left: calc(11cqw + 2.4cqw + 2.2cqw - .75cqw); background: var(--pearl) center top / 1.5cqw 1.5cqw repeat-y; }
.kit.kit-sections .kit-timeline.kit-timeline-cards li { background: color-mix(in srgb, #fff 60%, transparent); }

.kit.kit-sections .kit-swatches i { width: 6.6cqw; height: 6.6cqw; }
.kit.kit-sections .kit-rsvp { color: var(--k-ink); border-color: color-mix(in srgb, var(--k-ink) 70%, transparent); }
.kit.kit-sections a.kit-rsvp:hover { background: var(--k-ink); color: var(--k-paper); }

/* signature: two pearl hearts and the couple's names */
.kit.kit-sections .kit-closing { display: grid; justify-items: center; gap: 1.6cqw; margin: 9cqw 0 2cqw; }
.kit.kit-sections .kit-closing-art { width: 44cqw; height: auto; filter: drop-shadow(0 1cqw 1.4cqw rgba(60, 45, 30, .25)); }
.kit.kit-sections .kit-closing small { font: italic 400 3.6cqw/1 var(--k-body); color: var(--k-soft); }
.kit.kit-sections .kit-closing strong { font: 400 6.4cqw/1.15 "Marck Script", var(--k-display); color: var(--k-ink); text-transform: none; }

/* thumbnails keep the classic short form */
.kit.kit-sections.invitation-compact .kit-calendar, .kit.kit-sections.invitation-compact .kit-framed, .kit.kit-sections.invitation-compact .kit-letter-art, .kit.kit-sections.invitation-compact .kit-hero-date { display: none; }
.kit.kit-sections.invitation-compact .kit-letter { margin: 2cqw 0 0; padding: 0; background: none; box-shadow: none; }

/* Editor: colours to wear */
.dress-code-fields { display: grid; gap: 14px; }
.dress-code-fields[hidden] { display: none; }
.dress-colors { display: grid; gap: 8px; }
.dress-colors-label { font: 600 13px/1.3 var(--sans); color: var(--ink); }
.dress-colors-label small { font-weight: 400; color: var(--muted); }
.dress-colors-list { display: flex; flex-wrap: wrap; gap: 9px; }
.dress-color { position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); cursor: pointer; }
.dress-color[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pine); }
.dress-color[aria-pressed="true"]::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 15px/1 var(--sans); text-shadow: 0 0 3px rgba(0, 0, 0, .7); }
.dress-color-custom { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px dashed var(--line); border-radius: 50%; color: var(--muted); font: 600 18px/1 var(--sans); cursor: pointer; }
.dress-color-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Limoni: majolica and lemons — script names, cobalt and lemon accents */
.kit.invitation-wedding-limoni { --k-names-transform: none; --k-names-spacing: 0; --k-names-weight: 400; }
.kit.invitation-wedding-limoni .kit-names { font-size: calc(var(--k-names-size) * 1.02); line-height: 1.12; }
.invitation.kit.kit-hf.invitation-wedding-limoni.kit-native-palette { --k-ink: #18284a; --k-soft: rgba(24, 40, 74, .74); --k-accent: #1f4f9a; --k-accent-soft: #4f7fc4; --k-gold: #d9a520; --k-line: color-mix(in srgb, #1f4f9a 40%, transparent); --k-tint: rgba(31, 79, 154, .1); }
.kit.invitation-wedding-limoni .kit-letter { background: color-mix(in srgb, #fff 72%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-accent) 22%, transparent), 0 2.4cqw 5cqw -2.4cqw rgba(20, 40, 80, .25); }
.kit.invitation-wedding-limoni .kit-letter-art { width: 40cqw; transform: translateX(-50%) rotate(3deg); filter: drop-shadow(0 1cqw 1.2cqw rgba(20, 40, 80, .2)); }
.kit.invitation-wedding-limoni .kit-calendar-month { font-family: var(--k-body); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 7cqw; }
.kit.invitation-wedding-limoni .kit-framed { width: 54cqw; }
.kit.invitation-wedding-limoni .kit-framed-in { width: 60%; transform: translate(-7%, 6%); }
.kit.invitation-wedding-limoni .kit-framed-art { filter: drop-shadow(0 1.2cqw 1.6cqw rgba(20, 40, 80, .2)); }
.kit.invitation-wedding-limoni .kit-framed-in strong { font-family: "Marck Script", var(--k-display); font-size: 4.5cqw; font-weight: 400; overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
.kit.invitation-wedding-limoni .kit-timeline { background: color-mix(in srgb, var(--k-accent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-accent) 20%, transparent); }
.kit.invitation-wedding-limoni .kit-closing-art { width: 40cqw; filter: drop-shadow(0 1cqw 1.2cqw rgba(20, 40, 80, .2)); }

/* Linea: one fine gold line on ivory */
.kit.invitation-wedding-linea { --k-names-transform: uppercase; --k-names-spacing: .14em; --k-names-weight: 300; }
.invitation.kit.kit-hf.invitation-wedding-linea.kit-native-palette { --k-ink: #26231f; --k-soft: rgba(38, 35, 31, .7); --k-accent: #9a7a45; --k-accent-soft: #b08d57; --k-gold: #b08d57; --k-line: rgba(176, 141, 87, .55); --k-tint: rgba(176, 141, 87, .1); }
.kit.invitation-wedding-linea .kit-names { font-size: calc(var(--k-names-size) * .72); }
.kit.invitation-wedding-linea .kit-letter { background: none; border-radius: 0; box-shadow: inset 0 0 0 1px var(--k-line); }
.kit.invitation-wedding-linea .kit-letter-art { width: 30cqw; bottom: -12cqw; transform: translateX(-50%); filter: none; }
.kit.invitation-wedding-linea .kit-framed { width: 44cqw; }
.kit.invitation-wedding-linea .kit-framed-art, .kit.invitation-wedding-linea .kit-closing-art, .kit.invitation-wedding-linea .kit-calendar-days .is-event b::before { filter: none; }
.kit.invitation-wedding-linea .kit-framed-in { width: 72%; }
.kit.invitation-wedding-linea .kit-timeline { background: none; border-radius: 0; box-shadow: inset 0 0 0 1px var(--k-line); }
.kit.invitation-wedding-linea .kit-closing-art { width: 32cqw; }

/* Golden Hour: the couple under the arch, in watercolour */
.kit.invitation-wedding-golden-hour { --k-names-transform: none; --k-names-spacing: 0; --k-names-weight: 400; }
.invitation.kit.kit-hf.invitation-wedding-golden-hour.kit-native-palette { --k-ink: #2a3350; --k-soft: rgba(42, 51, 80, .74); --k-accent: #ad5f6a; --k-accent-soft: #d9939b; --k-gold: #c9a36a; --k-line: rgba(173, 95, 106, .38); --k-tint: rgba(227, 169, 174, .16); }
.kit.invitation-wedding-golden-hour .kit-names { line-height: 1.12; }
.kit.invitation-wedding-golden-hour .kit-letter { background: color-mix(in srgb, #fff 70%, transparent); }
.kit.invitation-wedding-golden-hour .kit-letter-art { width: 46cqw; bottom: -19cqw; transform: translateX(-50%) rotate(-5deg); filter: none; }
.kit.invitation-wedding-golden-hour .kit-framed { width: 62cqw; }
.kit.invitation-wedding-golden-hour .kit-framed-art, .kit.invitation-wedding-golden-hour .kit-closing-art { filter: none; }
.kit.invitation-wedding-golden-hour .kit-framed-in { width: 56%; }
.kit.invitation-wedding-golden-hour .kit-framed-in strong { font: 400 5.4cqw/1.15 "Marck Script", var(--k-display); overflow-wrap: normal; }
.kit.invitation-wedding-golden-hour .kit-calendar-month { font-family: var(--k-body); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 7cqw; }
.kit.invitation-wedding-golden-hour .kit-timeline { background: color-mix(in srgb, #e3a9ae 13%, transparent); box-shadow: inset 0 0 0 1px var(--k-line); }
.kit.invitation-wedding-golden-hour .kit-closing-art { width: 42cqw; }

/* Gatsby: emerald and gold, with a double gold rule down both sides */
.kit.invitation-wedding-gatsby { --k-names-transform: uppercase; --k-names-spacing: .08em; }
.invitation.kit.kit-hf.kit-dark.invitation-wedding-gatsby { --k-ink: #f4ead2; --k-soft: rgba(244, 234, 210, .78); --k-accent: #d8b45e; --k-accent-soft: #e8cc85; --k-gold: #d8b45e; --k-line: rgba(216, 180, 94, .55); --k-tint: rgba(216, 180, 94, .12); --k-paper: #013529; }
.kit.invitation-wedding-gatsby .kit-card { box-shadow: inset 0 0 0 2.4cqw var(--kit-hf-bg), inset 0 0 0 calc(2.4cqw + 1.5px) #d8b45e, inset 0 0 0 3.4cqw var(--kit-hf-bg), inset 0 0 0 calc(3.4cqw + 1px) rgba(216, 180, 94, .7); }
.kit.invitation-wedding-gatsby .kit-letter { background: rgba(0, 0, 0, .2); border-radius: 0; box-shadow: inset 0 0 0 1px var(--k-line); }
.kit.invitation-wedding-gatsby .kit-letter-art { width: 32cqw; bottom: -13cqw; transform: translateX(-50%); filter: none; }
.kit.invitation-wedding-gatsby .kit-framed { width: 54cqw; }
.kit.invitation-wedding-gatsby .kit-framed-art, .kit.invitation-wedding-gatsby .kit-closing-art, .kit.invitation-wedding-gatsby .kit-calendar-days .is-event b::before { filter: none; }
.kit.invitation-wedding-gatsby .kit-framed-in strong { font: 500 4.4cqw/1.2 var(--k-display); text-transform: uppercase; letter-spacing: .08em; }
.kit.invitation-wedding-gatsby .kit-timeline { background: rgba(0, 0, 0, .2); border-radius: 0; box-shadow: inset 0 0 0 1px var(--k-line); }
.kit.invitation-wedding-gatsby .kit-closing-art { width: 30cqw; }
.kit.invitation-wedding-gatsby .kit-closing strong { font: 500 5cqw/1.2 var(--k-display); text-transform: uppercase; letter-spacing: .1em; }
.kit.invitation-wedding-gatsby .kit-swatches i { box-shadow: 0 0 0 .5cqw var(--kit-hf-bg), 0 0 0 calc(.5cqw + 1px) var(--k-line); }
/* taller pictures under the letter need more room below the words */
.kit.invitation-wedding-golden-hour .kit-letter { padding-bottom: 22cqw; margin-bottom: 22cqw; }
.kit.invitation-wedding-golden-hour .kit-letter-art { bottom: -18cqw; }
.kit.invitation-wedding-gatsby .kit-letter { padding-bottom: 20cqw; margin-bottom: 16cqw; }
.kit.invitation-wedding-gatsby .kit-letter-art { bottom: -12cqw; }
/* christening day: two wider illustrated stops — the church, then the party */
.kit .kit-timeline.kit-timeline-cards.kit-day-two li { width: calc((100% - 6cqw) / 2.2); }
.kit .kit-timeline.kit-timeline-cards.kit-day-two .kit-stop-art { width: 22cqw; height: 22cqw; }

/* transport note, bank-account gift (2026-10-15, Spain round) */
.kit .kit-travel[hidden] { display: none; }
.kit .kit-travel { grid-column: 1 / -1; }
.kit .kit-travel dd { white-space: pre-line; }
.kit .kit-account { display: inline-block; margin-top: .6cqw; padding: .8cqw 1.8cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--k-paper) 70%, #fff); box-shadow: inset 0 0 0 1px var(--k-line); font: 600 2.4cqw/1.3 var(--k-label); letter-spacing: .06em; color: var(--k-ink); word-break: break-all; }

/* --------------------------------------------------------------------------
   19. Nothing smaller than a phone can show (2026-10-16)
   Sizes are in cqw, so on a 370px-wide card 1.75cqw is 6px. The full invitation
   now keeps every label at 10.5px or more and every sentence at 13px or more;
   gallery thumbnails are unaffected.
   -------------------------------------------------------------------------- */
.kit:not(.invitation-compact) .kit-recipient small, .kit:not(.invitation-compact) .kit-count .invitation-count-label, .kit:not(.invitation-compact) .kit-simple-agenda small,
.kit:not(.invitation-compact) .kit-christening small, .kit:not(.invitation-compact) .kit-notes dt, .kit:not(.invitation-compact) .kit-witnesses small,
.kit:not(.invitation-compact) .kit-badge small, .kit:not(.invitation-compact) .kit-ticket-date i, .kit:not(.invitation-compact) .kit-timeline-cards .kit-stop strong,
.kit:not(.invitation-compact) .kit-calendar-days small, .kit:not(.invitation-compact) .kit-framed-in small, .kit:not(.invitation-compact) .kit-framed-in a,
.kit:not(.invitation-compact) .kit-hero-date, .kit:not(.invitation-compact) .kit-kind, .kit:not(.invitation-compact) .kit-timeline:not(.kit-timeline-cards) .kit-stop strong,
.kit:not(.invitation-compact) .kit-weekday, .kit:not(.invitation-compact) .kit-ticket-number small, .kit:not(.invitation-compact) .kit-travel dt, .kit:not(.invitation-compact) .kit-cause dt { font-size: max(10.5px, 2cqw); }
.kit:not(.invitation-compact) .kit-countdown small { font-size: max(10px, 1.6cqw); }
.kit:not(.invitation-compact) .kit-countdown strong { font-size: max(16px, 4.4cqw); }
.kit:not(.invitation-compact) .kit-intro, .kit:not(.invitation-compact) .kit-reply, .kit:not(.invitation-compact) .kit-quote p, .kit:not(.invitation-compact) .kit-notes dd,
.kit:not(.invitation-compact) .kit-stop p, .kit:not(.invitation-compact) .kit-venue, .kit:not(.invitation-compact) .kit-deadline, .kit:not(.invitation-compact) .kit-christening strong,
.kit:not(.invitation-compact) .kit-framed-in > span, .kit:not(.invitation-compact) .kit-closing small, .kit:not(.invitation-compact) .kit-simple-agenda strong,
.kit:not(.invitation-compact) .kit-witnesses strong, .kit:not(.invitation-compact) .kit-witnesses p, .kit:not(.invitation-compact) .kit-travel dd, .kit:not(.invitation-compact) .kit-letter .kit-intro { font-size: max(13px, 2.6cqw); }
.kit:not(.invitation-compact) .kit-time { font-size: max(12px, 2.8cqw); }
.kit:not(.invitation-compact) .kit-date { font-size: max(15px, 4.2cqw); }
.kit:not(.invitation-compact) .kit-calendar-days b { font-size: max(14px, 4.4cqw); width: max(26px, 8cqw); height: max(26px, 8cqw); }
.kit:not(.invitation-compact) .kit-map, .kit:not(.invitation-compact) .kit-rsvp { font-size: max(11px, 2.1cqw); }
.kit:not(.invitation-compact) .kit-footer small, .kit:not(.invitation-compact) .kit-powered { font-size: max(10px, 1.7cqw); }
.kit:not(.invitation-compact) .kit-notes { grid-template-columns: repeat(auto-fit, minmax(max(120px, 28%), 1fr)); }