/*
 * Template "Cincin & Mawar" (Lamaran & Tunangan) — romantic classic. Deep velvet wine + rose red + gold on
 * warm cream. Signature pieces: the velvet ring box that opens once on the cover (sections/_ringbox, the ring
 * in sections/_ring), big red Redouté roses (sections/_rose, img/CREDITS.md) at the corners of the photo
 * frames, between the two families, on the wedding plan card and around the closing, and photos in tall gold
 * arches (sections/_arch). Mobile-first, one column (~460px) on a velvet backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (velvet: wine / emerald / navy / black)   --inv-deep (the darker velvet)
 *   --inv-rose (rose red: italic words, dots, small accents on cream)
 *   --inv-accent (gold: lines, rings, buttons on velvet)    --inv-shine (light gold: text on velvet)
 *   --inv-background (warm cream)   --inv-text
 * Everything else is mixed from those, so a new variant only needs these seven colours.
 *
 * Section tones (set on each section in its partial): .cm-tone--cream, --paper (a deeper cream), --velvet,
 * --rose (a rose-red velvet band). Cream and velvet alternate.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished.
 *
 * Contents: 1 base · 2 section tones & photo backgrounds · 3 shared pieces (heading, roses, arch, ring,
 *           ring box, pill) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Merah Anggur" variant (the variant's colours override these) */
    --inv-primary: #4a0d1a;
    --inv-deep: #2b0610;
    --inv-rose: #c8102e;
    --inv-accent: #e6c27a;
    --inv-shine: #f6e0aa;
    --inv-background: #f7efe4;
    --inv-text: #2b0b13;
    --inv-radius: 16px;

    --cm-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --cm-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cm-col: 460px;
    --cm-paper: color-mix(in srgb, #fff 60%, var(--inv-background));
    --cm-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --cm-cream-muted: color-mix(in srgb, var(--inv-background) 84%, transparent);
    --cm-gold-dark: color-mix(in srgb, var(--inv-accent) 58%, var(--inv-deep));
    --cm-line: color-mix(in srgb, var(--inv-accent) 60%, transparent);
    --cm-drop: 0 24px 44px -24px color-mix(in srgb, var(--inv-deep) 80%, transparent);
    --cm-gold: linear-gradient(180deg, var(--inv-shine), var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 82%, var(--inv-deep)));
    /* the velvet: a soft sheen at the upper left, a darker fall to the lower right */
    --cm-velvet:
        radial-gradient(110% 60% at 15% 0%, color-mix(in srgb, var(--inv-primary) 82%, #fff 10%), transparent 70%),
        radial-gradient(90% 55% at 100% 100%, color-mix(in srgb, var(--inv-deep) 90%, #000 10%), transparent 75%),
        linear-gradient(170deg, var(--inv-primary), var(--inv-deep));
    /* a fine grain (velvet pile on the dark bands, paper tooth on the cream ones) */
    --cm-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    --cm-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5c.8 6.2 2.3 7.7 8.5 8.5-6.2.8-7.7 2.3-8.5 8.5-.8-6.2-2.3-7.7-8.5-8.5 6.2-.8 7.7-2.3 8.5-8.5Z'/%3E%3C/svg%3E");

    /* colours of the shared components */
    --inv-ambient-1: var(--inv-accent);
    --inv-ambient-2: var(--inv-rose);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--cm-sans);
    font-size: 14.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--inv-primary); }

.cm-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-size: .8125rem;
}

/* the one column of the page; every section paints its own full-width background */
.cm-main { max-width: var(--cm-col); margin: 0 auto; }
.cm-branding { max-width: var(--cm-col); margin: 0 auto; }

.cm-section { position: relative; isolation: isolate; overflow: hidden; padding: 4.6rem 1.4rem; text-align: center; }
.cm-section > p { margin: 0 auto 1rem; max-width: 34ch; }

.cm-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--inv-primary); }
.cm-amp { font-family: var(--cm-serif); font-style: italic; font-weight: 500; color: var(--inv-rose); }

/* ---------- 2. section tones & photo backgrounds ---------- */

/* cream: warm cream with a faint rose glow at the top and a gold one at the bottom, plus paper grain */
.cm-tone--cream {
    background:
        radial-gradient(80% 32% at 50% 0%, color-mix(in srgb, var(--inv-rose) 7%, transparent), transparent 75%),
        radial-gradient(70% 30% at 100% 100%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 75%),
        var(--inv-background);
}
/* paper: a slightly deeper cream, used where two light sections could meet */
.cm-tone--paper {
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, #fff 45%, transparent), transparent 75%),
        color-mix(in srgb, var(--inv-accent) 16%, var(--inv-background));
}
.cm-tone--cream::before, .cm-tone--paper::before, .cm-tone--velvet::before, .cm-tone--rose::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--cm-grain); opacity: .09; mix-blend-mode: multiply;
}

/* velvet: the deep band */
.cm-tone--velvet { color: var(--inv-background); background: var(--cm-velvet); }
.cm-tone--velvet::before { opacity: .22; mix-blend-mode: soft-light; }
.cm-tone--velvet a:not(.inv-button) { color: var(--inv-shine); }
.cm-tone--velvet .cm-arabic { color: var(--inv-shine); }

/* rose: a rose-red velvet band (co-hosts) */
.cm-tone--rose {
    color: #fff;
    background:
        radial-gradient(90% 60% at 20% 0%, color-mix(in srgb, var(--inv-rose) 80%, #fff 14%), transparent 70%),
        linear-gradient(165deg, var(--inv-rose), color-mix(in srgb, var(--inv-rose) 55%, var(--inv-deep)));
}
.cm-tone--rose::before { opacity: .2; mix-blend-mode: soft-light; }

/* a client photo behind a section, under a strong gradient of the section's own tone */
.cm-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.cm-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 35%; --inv-parallax: 40px; }
.cm-bgphoto::after { content: ''; position: absolute; inset: 0; }
.cm-tone--cream .cm-bgphoto::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-background) 90%, transparent),
        color-mix(in srgb, var(--inv-background) 80%, transparent) 45%,
        color-mix(in srgb, var(--inv-background) 94%, transparent));
}
.cm-tone--velvet .cm-bgphoto::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-deep) 86%, transparent),
        color-mix(in srgb, var(--inv-primary) 74%, transparent) 45%,
        color-mix(in srgb, var(--inv-deep) 93%, transparent));
}

/* ---------- 3. shared pieces ---------- */

/* section heading: a letter-spaced eyebrow, a serif title with the last word italic, a gold line + sparkle */
.cm-heading { position: relative; margin: 0 0 2.2rem; }
.cm-heading--left { text-align: left; }
.cm-heading__eyebrow {
    margin: 0 0 .5rem; font-size: .66rem; font-weight: 600; line-height: 1.3; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-rose);
}
.cm-heading__title {
    margin: 0; font-family: var(--cm-serif); font-size: 2.45rem; font-weight: 500; line-height: 1.08; letter-spacing: -.01em; color: var(--inv-primary);
}
.cm-heading__title em { font-style: italic; font-weight: 400; color: var(--inv-rose); }
.cm-heading__line { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .85rem; }
.cm-heading__line::before, .cm-heading__line::after { content: ''; width: 2.6rem; height: 1px; background: var(--cm-line); }
.cm-heading__line svg { width: .8rem; height: .8rem; fill: var(--inv-accent); }
.cm-heading--left .cm-heading__line { justify-content: flex-start; }
.cm-heading--left .cm-heading__line::before { display: none; }
.cm-heading--left .cm-heading__line svg { order: -1; }

.cm-tone--velvet .cm-heading__eyebrow, .cm-tone--rose .cm-heading__eyebrow { color: var(--inv-shine); }
.cm-tone--velvet .cm-heading__title, .cm-tone--rose .cm-heading__title { color: #fff; }
.cm-tone--velvet .cm-heading__title em, .cm-tone--rose .cm-heading__title em { color: var(--inv-shine); }
.cm-tone--rose .cm-heading__line svg { fill: var(--inv-shine); }

/* icons */
.cm-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* the rose engravings: a soft shadow lifts them off the page */
.cm-rose { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; filter: drop-shadow(0 12px 14px rgb(0 0 0 / .22)); }
.cm-tone--velvet .cm-rose { filter: drop-shadow(0 14px 18px rgb(0 0 0 / .45)); }

/* the arch (sections/_arch): a tall photo window with a rounded top, a gold line on it and a finer one around;
   --arch-w sets the size, --arch-pos the crop */
.cm-arch {
    --arch-w: 12rem; --arch-pos: center 30%; --arch-ratio: 1.32;
    position: relative; width: var(--arch-w); height: calc(var(--arch-w) * var(--arch-ratio)); margin: 0; flex: none;
}
.cm-arch::before {
    content: ''; position: absolute; inset: -8px; pointer-events: none;
    border: 1px solid var(--cm-line); border-radius: calc(var(--arch-w) / 2 + 8px) calc(var(--arch-w) / 2 + 8px) 16px 16px;
}
.cm-arch__window {
    position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--arch-w) / 2) calc(var(--arch-w) / 2) 10px 10px;
    background: var(--cm-velvet);
    box-shadow: 0 0 0 2px var(--inv-accent), 0 28px 44px -22px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.cm-arch__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--arch-pos); }
.cm-arch__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; }
.cm-arch__ring { width: 26%; }
.cm-arch__initials {
    font-family: var(--cm-serif); font-style: italic; font-weight: 400; line-height: 1; white-space: nowrap;
    font-size: calc(var(--arch-w) * .17); color: var(--inv-shine);
}
.cm-arch__initials--one { font-size: calc(var(--arch-w) * .34); }
.cm-arch__rose { z-index: 2; }
.cm-arch__rose--low { left: -25%; bottom: -10%; width: 48%; transform: rotate(-6deg); transform-origin: 50% 100%; }
.cm-arch__rose--high { right: -23%; top: -5%; width: 34%; transform: scaleX(-1) rotate(-16deg); transform-origin: 50% 100%; }

/* the ring (sections/_ring) */
.cm-ring { display: block; overflow: visible; }
.cm-ring__stop-shine { stop-color: var(--inv-shine); }
.cm-ring__stop-gold { stop-color: var(--inv-accent); }
.cm-ring__stop-dark { stop-color: var(--cm-gold-dark); }
.cm-ring__inner { stroke: var(--inv-shine); opacity: .7; }
.cm-ring__blush { fill: var(--inv-rose); opacity: .22; }
.cm-ring__spark path { transform-box: fill-box; transform-origin: center; }

/* the velvet ring box (sections/_ringbox): lid (velvet + satin), cushion with the ring, base with the date */
.cm-box {
    --box-w: 9.4rem;
    position: relative; display: flex; flex-direction: column; align-items: center; width: var(--box-w); perspective: 520px;
    filter: drop-shadow(0 16px 18px rgb(0 0 0 / .45));
}
.cm-box__lid {
    position: relative; width: 100%; height: calc(var(--box-w) * .5); padding: calc(var(--box-w) * .045) calc(var(--box-w) * .05) 0;
    border-radius: calc(var(--box-w) * .17) calc(var(--box-w) * .17) 3px 3px; transform-origin: 50% 100%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 85%, #fff 12%), var(--inv-primary) 40%, var(--inv-deep));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 45%, transparent), inset 0 1.5px 0 rgb(255 255 255 / .16);
}
.cm-box__satin {
    position: relative; display: flex; justify-content: center; width: 100%; height: 100%; overflow: hidden;
    border-radius: calc(var(--box-w) * .13) calc(var(--box-w) * .13) 0 0;
    background: radial-gradient(120% 90% at 50% 105%, #fff, color-mix(in srgb, #fff 55%, var(--inv-background)) 45%, color-mix(in srgb, var(--inv-accent) 30%, var(--inv-background)));
    box-shadow: inset 0 4px 8px -2px rgb(0 0 0 / .3), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 55%, transparent);
}
/* soft pleats fanning out from the bottom of the satin */
.cm-box__satin::before {
    content: ''; position: absolute; inset: 0; opacity: .5;
    background: repeating-conic-gradient(from -60deg at 50% 120%, rgb(120 90 60 / .09) 0 3deg, transparent 3deg 7deg);
}
.cm-box__initials {
    position: relative; margin-top: calc(var(--box-w) * .025); font-family: var(--cm-serif); font-style: italic; font-weight: 500;
    font-size: calc(var(--box-w) * .085); line-height: 1.2; letter-spacing: .08em; white-space: nowrap; color: var(--cm-gold-dark);
}
.cm-box__cushion {
    position: relative; z-index: 1; width: 100%; height: calc(var(--box-w) * .2); margin-top: -1px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 70%, #000), var(--inv-deep));
}
.cm-box__ring { position: absolute; left: 50%; bottom: 0; width: calc(var(--box-w) * .37); filter: drop-shadow(0 3px 4px rgb(0 0 0 / .35)); transform: translateX(-50%); }
/* the front lip of the cushion: two velvet pillows with a slit between, over the ring's lower half */
.cm-box__lip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; height: 64%; }
.cm-box__lip::before, .cm-box__lip::after {
    content: ""; flex: 1; border-radius: 46% 46% 3px 3px / 90% 90% 3px 3px;
    background: radial-gradient(70% 100% at 50% 12%, color-mix(in srgb, var(--inv-primary) 70%, #fff 24%), var(--inv-primary) 58%, var(--inv-deep));
    box-shadow: inset 0 -2px 3px rgb(0 0 0 / .3);
}
.cm-box__base {
    position: relative; width: 100%; padding: .55rem .5rem .5rem; text-align: center;
    border-radius: 2px 2px calc(var(--box-w) * .09) calc(var(--box-w) * .09);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 90%, #fff 6%), var(--inv-deep));
    box-shadow: inset 0 1.5px 0 var(--inv-accent), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 35%, transparent);
}
.cm-box__clasp { position: absolute; left: 50%; top: 0; width: .9rem; height: .42rem; margin-left: -.45rem; border-radius: 0 0 4px 4px; background: var(--cm-gold); }
.cm-box__date { display: flex; flex-direction: column; align-items: center; margin: .15rem 0 0; line-height: 1.2; }
.cm-box__weekday { font-size: .56rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-shine) 88%, transparent); }
.cm-box__digits { font-family: var(--cm-serif); font-size: 1.22rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: lining-nums; color: var(--inv-shine); white-space: nowrap; }
.cm-box__digits i { padding: 0 .22em; font-style: normal; color: var(--inv-accent); }

/* a small pill link (Instagram) */
.cm-pill {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.2rem; padding: .3rem .85rem; border-radius: 999px;
    font-size: .78rem; font-weight: 500; text-decoration: none; color: var(--inv-primary); background: #fff;
    box-shadow: inset 0 0 0 1px var(--cm-line);
}
.cm-pill .cm-icon { width: 1rem; height: 1rem; color: var(--inv-rose); }
.cm-tone--velvet .cm-pill { color: var(--inv-shine) !important; background: rgb(255 255 255 / .06); }
.cm-tone--velvet .cm-pill .cm-icon { color: var(--inv-accent); }

/* ---------- 4. cover ---------- */
.cm-cover {
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 1.7rem 1.4rem 1.6rem;
    isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(60% 34% at 50% 30%, color-mix(in srgb, var(--inv-primary) 70%, #fff 12%), transparent 72%),
        var(--cm-velvet);
    transition: opacity .9s ease;
}
.cm-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--cm-grain); opacity: .22; mix-blend-mode: soft-light;
}
.cm-cover__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; text-align: center; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }

.cm-cover__title {
    display: inline-flex; align-items: center; gap: .75rem; margin: 0 0 1.35rem;
    font-size: .7rem; font-weight: 600; line-height: 1.2; letter-spacing: .36em; text-transform: uppercase; color: var(--inv-shine);
}
.cm-cover__title::before, .cm-cover__title::after { content: ''; width: 1.8rem; height: 1px; background: var(--inv-accent); }

.cm-arch--cover { --arch-w: min(60vw, 15.5rem, 26.5svh); --arch-pos: center 26%; }

.cm-cover__names {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .28em; margin: 1.35rem 0 0;
    font-family: var(--cm-serif); font-style: italic; font-weight: 400; font-size: 2.7rem; line-height: 1.05; letter-spacing: -.005em;
    color: #fff; overflow-wrap: anywhere;
}
.cm-cover__amp { font-size: .78em; color: var(--inv-accent); }
.cm-box--cover { margin-top: .95rem; }
.cm-cover__quote {
    max-width: 30ch; margin: .8rem 0 0; font-family: var(--cm-serif); font-style: italic; font-weight: 400;
    font-size: 1rem; line-height: 1.4; color: var(--cm-cream-muted);
}
.cm-cover__guest {
    width: min(100%, 19rem); margin: .9rem 0 0; padding: .45rem 1rem .55rem; border-radius: 12px;
    background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px var(--cm-line);
}
.cm-cover__guest p { margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.cm-cover__guest-name { display: block; font-family: var(--cm-serif); font-size: 1.25rem; font-weight: 500; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.cm-cover__open {
    margin-top: .95rem; min-height: 3rem; padding: .7rem 2.1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .76rem;
    background: var(--cm-gold); color: var(--inv-deep);
    box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4px var(--inv-accent), 0 14px 26px -12px rgb(0 0 0 / .7);
}

/* opening: the cover fades and lifts away (never blocks: .9s) */
.cm-cover--leave { transition: opacity .9s ease .1s; }
.cm-cover--gone { opacity: 0; }
.cm-cover--gone .cm-cover__inner { transform: translateY(-2.5rem); }

/* ---------- 5. sections ---------- */

/* opening: a crown of roses at the top corners, basmalah, greeting, message; the verse on a velvet card */
.cm-opening { padding: 11rem 1.6rem 4.8rem; }
.cm-opening__rose { top: 1rem; right: -10%; width: 50%; max-width: 14rem; transform: rotate(-6deg); }
.cm-opening__rose-left { top: 1rem; left: -12%; width: 34%; max-width: 9.5rem; transform: scaleX(-1) rotate(-14deg); }
.cm-opening__basmalah { margin: 0 auto .4rem !important; font-size: 1.8rem; }
.cm-opening__greeting { max-width: 22ch !important; font-family: var(--cm-serif); font-size: 1.55rem; font-weight: 400; font-style: italic; line-height: 1.3; color: var(--inv-primary); }
.cm-opening__message { max-width: 31ch !important; color: var(--cm-muted); }
.cm-opening__quote {
    position: relative; max-width: 23rem; margin: 3.4rem auto 0; padding: 3rem 1.4rem 1.6rem; border-radius: 18px;
    color: var(--inv-background); background: var(--cm-velvet);
    box-shadow: inset 0 0 0 7px var(--inv-deep), inset 0 0 0 8px var(--cm-line), var(--cm-drop);
}
.cm-opening__quote-rose { right: -1.2rem; top: -3.5rem; width: 5rem; transform: rotate(14deg); }
.cm-opening__mark { position: absolute; left: 1.1rem; top: -.4rem; font-family: var(--cm-serif); font-size: 4.6rem; line-height: 1; color: var(--inv-accent); }
.cm-opening__quote p { margin: 0; font-family: var(--cm-serif); font-style: italic; font-size: 1.06rem; font-weight: 400; line-height: 1.6; color: #fff; }
.cm-opening__quote cite {
    display: inline-block; margin-top: 1rem; padding: .25rem .9rem; border-radius: 999px; font-style: normal; font-size: .64rem; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--inv-deep); background: var(--cm-gold);
}

/* couple: two asymmetric rows (arch left / right) with a rose at each arch's outer foot, a big "&" between */
.cm-person { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem; text-align: left; }
.cm-person--flip { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.cm-person--flip .cm-person__media { order: 2; }
.cm-person__media { position: relative; padding: 8px; }
.cm-arch--person { --arch-w: min(8.6rem, 37vw); --arch-pos: center 22%; }
.cm-person__rose { left: -1.7rem; bottom: -1.2rem; width: 4.4rem; z-index: 2; transform: rotate(-12deg); }
.cm-person--flip .cm-person__rose { left: auto; right: -1.7rem; transform: scaleX(-1) rotate(-12deg); }
.cm-person__label { margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-accent); }
.cm-person__nickname { margin: .1rem 0 0; font-family: var(--cm-serif); font-style: italic; font-weight: 400; font-size: 2.55rem; line-height: 1.05; color: #fff; overflow-wrap: anywhere; }
.cm-person__name { margin: .35rem 0 0; font-size: .92rem; font-weight: 600; line-height: 1.35; color: var(--inv-shine); overflow-wrap: anywhere; }
.cm-person__parents { margin: .5rem 0 .8rem; font-size: .8rem; line-height: 1.5; color: var(--cm-cream-muted); }
.cm-person__parents span, .cm-person__parents strong { display: block; }
.cm-person__parents strong { font-weight: 500; color: var(--inv-background); }
.cm-person__parents .cm-amp { display: inline; color: var(--inv-accent); }
.cm-couple__join { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.6rem 0; }
.cm-couple__join::before, .cm-couple__join::after { content: ''; flex: 1; max-width: 6rem; height: 1px; background: var(--cm-line); }
.cm-couple__amp { font-family: var(--cm-serif); font-style: italic; font-size: 3.4rem; line-height: 1; color: var(--inv-accent); }

/* families: the intent, then two cards with a deep rose standing between them */
.cm-families__intent {
    max-width: 31ch !important; margin-bottom: 2.4rem !important; font-family: var(--cm-serif); font-style: italic; font-size: 1.14rem; line-height: 1.6; color: var(--inv-primary);
}
.cm-families__pair { display: flex; flex-direction: column; align-items: center; }
.cm-family { position: relative; width: 100%; max-width: 22rem; padding: 1.5rem 1.4rem 1.4rem; border-radius: 18px; text-align: left; }
.cm-family:not(.cm-family--host) {
    margin-right: 1.6rem; padding-bottom: 2.6rem; color: var(--inv-background); background: var(--cm-velvet);
    box-shadow: inset 0 0 0 6px var(--inv-deep), inset 0 0 0 7px var(--cm-line), var(--cm-drop);
}
.cm-family--host {
    margin-left: 1.6rem; padding-top: 2.8rem; text-align: right; background: var(--cm-paper);
    box-shadow: inset 0 0 0 1.5px var(--inv-primary), inset 0 0 0 6px var(--cm-paper), inset 0 0 0 7px var(--cm-line), var(--cm-drop);
}
.cm-families__pair--one .cm-family { margin: 0; padding: 1.5rem 1.4rem; text-align: center; }
.cm-family__label { margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-accent); }
.cm-family--host .cm-family__label { color: var(--inv-rose); }
.cm-family__who { margin: .2rem 0 0; font-family: var(--cm-serif); font-style: italic; font-size: 1rem; color: var(--cm-cream-muted); }
.cm-family--host .cm-family__who { color: var(--cm-muted); }
.cm-family__name { margin: .25rem 0 0; font-family: var(--cm-serif); font-size: 1.4rem; font-weight: 600; line-height: 1.2; color: #fff; }
.cm-family--host .cm-family__name { color: var(--inv-primary); }
.cm-family__detail { display: flex; align-items: flex-start; gap: .45rem; margin: .7rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--cm-cream-muted); }
.cm-family__detail .cm-icon { width: 1rem; height: 1rem; margin-top: .15rem; color: var(--inv-accent); }
.cm-family--host .cm-family__detail { flex-direction: row-reverse; color: var(--cm-muted); }
.cm-family--host .cm-family__detail .cm-icon { color: var(--inv-rose); }
.cm-families__pair--one .cm-family__detail { justify-content: center; }
.cm-families__rose { position: relative; z-index: 2; width: 6.4rem; height: 5.2rem; margin: -1.9rem 0 -2.3rem; }
.cm-families__rose-img { left: 0; top: -2.7rem; width: 100%; transform: rotate(-6deg); }

/* events: an ivory card with a gold inner line, the photo under an arched top, the date set big */
.cm-event + .cm-event { margin-top: 2.4rem; }
.cm-event {
    padding: .6rem .6rem 1.4rem; border-radius: 22px; color: var(--inv-text); background: var(--cm-paper); text-align: left;
    box-shadow: inset 0 0 0 1px var(--cm-line), 0 26px 44px -26px rgb(0 0 0 / .7);
}
.cm-event__photo { display: block; width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; object-position: center 40%; border-radius: 170px 170px 14px 14px; box-shadow: 0 0 0 2px var(--inv-accent); }
.cm-event__body { padding: 1.15rem .8rem 0; }
.cm-event__date { display: flex; align-items: center; gap: .8rem; margin: 0; }
.cm-event__day { font-family: var(--cm-serif); font-size: 3.4rem; font-weight: 500; line-height: .9; color: var(--inv-primary); font-variant-numeric: lining-nums; }
.cm-event__stack { display: flex; flex-direction: column; padding-left: .8rem; border-left: 2px solid var(--inv-rose); line-height: 1.25; }
.cm-event__weekday { font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-rose); }
.cm-event__month { font-family: var(--cm-serif); font-style: italic; font-size: 1.08rem; color: var(--inv-text); }
.cm-event--flip .cm-event__date { flex-direction: row-reverse; justify-content: flex-end; }
.cm-event--flip .cm-event__stack { padding: 0 .8rem 0 0; border-left: 0; border-right: 2px solid var(--inv-rose); text-align: right; }
.cm-event__name { margin: .75rem 0 0; font-family: var(--cm-serif); font-size: 1.6rem; font-weight: 600; line-height: 1.15; color: var(--inv-primary); }
.cm-event__rows { display: grid; gap: .75rem; margin: 1rem 0 0; padding: 1rem 0 0; list-style: none; font-size: .88rem; border-top: 1px solid var(--cm-line); }
.cm-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.cm-event__rows .cm-icon { width: 2.1rem; height: 2.1rem; padding: .48rem; border-radius: 50%; color: var(--inv-rose); background: color-mix(in srgb, var(--inv-rose) 9%, #fff); }
.cm-event__rows li > span { padding-top: .3rem; }
.cm-event__venue { display: block; font-weight: 600; }
.cm-event__address { display: block; font-size: .84rem; color: var(--cm-muted); }
.cm-event .inv-maps { margin: 1.15rem 0 0; text-align: center; }
.cm-event .inv-maps .inv-button { width: 100%; font-weight: 500; background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep)); }
.cm-event .inv-maps__frame { height: 190px; border-radius: 14px; }

/* countdown: velvet discs ringed in gold, a rose spray behind the calendar card */
.cm-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .8rem); }
.cm-countdown .inv-countdown__item {
    display: grid; place-content: center; width: clamp(4rem, 18.5vw, 4.7rem); min-width: 0; aspect-ratio: 1; padding: 0;
    border-radius: 50%; color: var(--inv-background); background: var(--cm-velvet);
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4.5px var(--inv-accent), 0 18px 26px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.cm-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--cm-serif); font-size: 1.8rem; font-weight: 600; line-height: 1; color: #fff; }
.cm-countdown .inv-countdown__label { margin-top: .15rem; font-size: .52rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-shine); }
.cm-countdown .inv-countdown__done { font-family: var(--cm-serif); font-size: 1.3rem; font-style: italic; color: var(--inv-primary); }
.cm-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2.1rem; }
.cm-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .82rem; font-weight: 500;
    color: var(--inv-primary); background: color-mix(in srgb, #fff 70%, transparent); box-shadow: inset 0 0 0 1px var(--inv-primary);
}
.cm-countdown .inv-countdown__actions .inv-button:first-child { color: #fff; background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep)); box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent); }
.cm-countdown .inv-cal {
    --inv-cal-bg: #fff; --inv-cal-mark: var(--inv-rose);
    position: relative; max-width: 19rem; margin: 2.8rem auto 0; border-radius: 12px;
    box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px var(--cm-line), 0 22px 40px -24px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.cm-countdown .inv-cal__month { font-family: var(--cm-serif); font-size: 1.5rem; font-weight: 500; font-style: italic; color: var(--inv-primary); }
.cm-countdown__rose { right: -16%; bottom: 1.4rem; width: 50%; max-width: 14rem; transform: rotate(-10deg); }

/* wedding plan: one ivory card under an arched top with a gold double line, a single rose rising from the arch */
.cm-plan { padding-top: 6.4rem; }
.cm-plan__card {
    position: relative; max-width: 21.5rem; margin: 0 auto; padding: 5.6rem 1.6rem 1.7rem; color: var(--inv-text);
    border-radius: 11rem 11rem 20px 20px; background: var(--cm-paper);
    box-shadow: inset 0 0 0 7px var(--cm-paper), inset 0 0 0 8px var(--cm-line), 0 30px 50px -24px rgb(0 0 0 / .7);
}
.cm-plan__card::before {
    content: ''; position: absolute; inset: 12px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-accent) 40%, transparent);
    border-radius: 10.4rem 10.4rem 14px 14px;
}
.cm-plan__rose { left: 50%; top: -5.4rem; width: 7.6rem; transform: translateX(-48%) rotate(-4deg); }
.cm-plan__label { position: relative; margin: 0; font-size: .64rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--inv-rose); }
.cm-plan__date { margin: .3rem 0 0; font-family: var(--cm-serif); font-style: italic; font-weight: 400; font-size: 2.6rem; line-height: 1.1; color: var(--inv-primary); }
.cm-plan__city {
    display: inline-flex; align-items: center; gap: .35rem; margin: .7rem 0 0; padding: .3rem .85rem; border-radius: 999px;
    font-size: .76rem; font-weight: 600; letter-spacing: .06em; color: var(--inv-primary); background: color-mix(in srgb, var(--inv-rose) 8%, #fff);
    box-shadow: inset 0 0 0 1px var(--cm-line);
}
.cm-plan__city .cm-icon { width: .95rem; height: .95rem; color: var(--inv-rose); }
.cm-plan__note {
    max-width: 26ch; margin: 1.1rem auto 0; padding: .9rem 0; font-family: var(--cm-serif); font-style: italic; font-size: 1rem; line-height: 1.55; color: var(--cm-muted);
    border-top: 1px solid var(--cm-line); border-bottom: 1px solid var(--cm-line);
}
.cm-plan__steps { position: relative; display: flex; justify-content: space-between; max-width: 15rem; margin: 1.3rem auto 0; padding: 0; list-style: none; }
.cm-plan__steps::before { content: ''; position: absolute; left: 2.6rem; right: 2.6rem; top: .45rem; border-top: 1.5px dotted var(--inv-accent); }
.cm-plan__step { position: relative; display: flex; flex-direction: column; align-items: center; width: 5.2rem; font-size: .76rem; font-weight: 600; line-height: 1.3; color: var(--inv-primary); }
.cm-plan__step small { font-size: .66rem; font-weight: 500; color: var(--cm-muted); }
.cm-plan__dot { width: .95rem; height: .95rem; margin-bottom: .35rem; border-radius: 50%; background: var(--cm-paper); box-shadow: inset 0 0 0 2px var(--inv-accent); }
.cm-plan__step--done .cm-plan__dot { background: var(--inv-rose); box-shadow: 0 0 0 2px var(--cm-paper), 0 0 0 3.5px var(--inv-accent); }

/* rundown: the times in serif numerals, a gold line with rose dots, a rose spray at the top right */
.cm-rundown__rose { right: -15%; top: .9rem; width: 54%; max-width: 15rem; transform: rotate(6deg); }
.cm-rundown .cm-heading { max-width: 62%; }
.cm-rundown__list { position: relative; display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.cm-rundown__list::before { content: ''; position: absolute; left: 4.35rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--inv-accent); transform-origin: top; }
.cm-rundown__item { display: grid; grid-template-columns: 3.6rem 1.5rem minmax(0, 1fr); align-items: start; }
.cm-rundown__time { font-family: var(--cm-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: var(--inv-primary); font-variant-numeric: lining-nums; }
.cm-rundown__dot { position: relative; justify-self: center; width: .8rem; height: .8rem; margin-top: .45rem; border-radius: 50%; background: var(--inv-rose); box-shadow: 0 0 0 2px var(--inv-background), 0 0 0 3.5px var(--inv-accent); }
.cm-rundown__body h3 { margin: 0; padding-left: .3rem; font-size: .92rem; font-weight: 600; line-height: 1.4; color: var(--inv-text); }
.cm-rundown__body p { margin: .15rem 0 0; padding-left: .3rem; font-size: .8rem; color: var(--cm-muted); }

/* love story: arched photos beside the text, alternating; text-only chapters as translucent velvet cards */
.cm-story__list { display: grid; gap: 2.2rem; margin: 0; padding: 0; list-style: none; }
.cm-story__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.3rem; text-align: left; }
.cm-story__item > .cm-arch { margin: 8px; }
.cm-story__item--flip { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.cm-story__item--flip > .cm-arch { order: 2; }
.cm-arch--story { --arch-w: min(7.4rem, 32vw); --arch-pos: center 30%; }
.cm-story__item--text {
    grid-template-columns: auto minmax(0, 1fr); padding: 1.3rem 1.2rem; border-radius: 16px; text-align: left;
    background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--cm-line);
}
.cm-story__number { font-family: var(--cm-serif); font-style: italic; font-size: 3.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--inv-accent); }
.cm-story__when {
    display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--inv-deep); background: var(--cm-gold);
}
.cm-story__body h3 { margin: .4rem 0 .25rem; font-family: var(--cm-serif); font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: #fff; }
.cm-story__body p { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--cm-cream-muted); }

/* gallery: the first photo wide with an arched top, the others rounded with a fine gold ring */
.cm-gallery__rose { right: -11%; top: .5rem; width: 44%; max-width: 12rem; transform: rotate(10deg); }
.cm-gallery .cm-heading { max-width: 64%; }
.cm-gallery .inv-gallery { gap: .6rem; }
.cm-gallery .inv-gallery__item { border-radius: 12px; box-shadow: 0 0 0 1.5px var(--inv-accent), 0 16px 28px -18px color-mix(in srgb, var(--inv-deep) 70%, transparent); }
.cm-gallery .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3.4; border-radius: 200px 200px 12px 12px; }

/* live streaming: an ivory card with a gold double line on the velvet */
.cm-stream__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; max-width: 24rem; margin: 0 auto; padding: 1.5rem;
    border-radius: 18px; color: var(--inv-text); text-align: left; background: var(--cm-paper);
    box-shadow: inset 0 0 0 6px var(--cm-paper), inset 0 0 0 7px var(--cm-line), 0 26px 44px -24px rgb(0 0 0 / .7);
}
.cm-stream__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: #fff; background: var(--inv-rose); box-shadow: 0 0 0 3px var(--cm-paper), 0 0 0 4.5px var(--inv-accent); }
.cm-stream__icon .cm-icon { width: 1.7rem; height: 1.7rem; }
.cm-stream__title { margin: 0 0 .15rem; font-family: var(--cm-serif); font-size: 1.7rem; font-weight: 500; line-height: 1.05; color: var(--inv-primary); }
.cm-stream__title em { font-weight: 400; color: var(--inv-rose); }
.cm-stream__text p { margin: 0; font-size: .84rem; color: var(--cm-muted); }
.cm-stream__text .cm-stream__note { margin-top: .3rem; font-weight: 600; color: var(--inv-primary); }
.cm-stream__button { grid-column: 1 / -1; min-height: 2.75rem; font-weight: 500; background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep)) !important; }

/* RSVP card: white with a velvet top band and a gold inner line */
.cm-rsvp__card {
    position: relative; overflow: hidden; padding: 2.3rem 1.15rem 1.4rem; border-radius: 18px; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px var(--cm-line), 0 26px 44px -24px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.cm-rsvp__card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .55rem; background: var(--cm-velvet); box-shadow: 0 1.5px 0 var(--inv-accent); }
.cm-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .88rem; color: var(--cm-muted); }
.cm-rsvp__sent { margin-bottom: 1rem; }
.cm-rsvp__check { display: block; width: 4.4rem; height: 4.4rem; margin: 0 auto .5rem; overflow: visible; }
.cm-rsvp__check-ring { fill: none; stroke: var(--inv-accent); stroke-width: 3; }
.cm-rsvp__check-disc { fill: var(--inv-primary); }
.cm-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .cm-rsvp__sent .cm-rsvp__check { animation: cm-pop .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .cm-rsvp__sent .cm-rsvp__check path { animation: cm-draw .45s ease-out .35s both; }
.cm-rsvp__thanks { margin: 0; font-family: var(--cm-serif); font-style: italic; font-size: 1.85rem; font-weight: 400; color: var(--inv-primary); }
.cm-rsvp__line { margin: .1rem 0 0; font-size: .88rem; color: var(--cm-muted); }
.cm-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .82rem; font-weight: 600; color: var(--inv-rose); }

/* gift: velvet account cards with a gold clasp, two per row; the address on an ivory card */
.cm-gift__intro { color: var(--cm-muted); }
.cm-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.cm-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cm-gift .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 1.6rem .75rem 1.05rem; border-radius: 14px; color: var(--inv-background); background: var(--cm-velvet);
    box-shadow: inset 0 0 0 5px var(--inv-deep), inset 0 0 0 6px var(--cm-line), 0 18px 30px -20px rgb(0 0 0 / .6);
}
.cm-gift .inv-gift__account:not(.inv-gift__address)::after {
    content: ''; position: absolute; left: 50%; top: 0; width: 1rem; height: .5rem; margin-left: -.5rem; border-radius: 0 0 4px 4px; background: var(--cm-gold);
}
.cm-gift .inv-gift__account p { margin: 0; }
.cm-gift .inv-gift__bank { font-weight: 600; font-size: .84rem; color: var(--inv-shine); }
.cm-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.cm-gift .inv-gift__logo img { max-width: 5rem; }
.cm-gift .inv-gift__number {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .98rem; font-weight: 700;
    letter-spacing: .03em; line-height: 1.3; overflow-wrap: anywhere; color: #fff;
}
.cm-gift .inv-gift__holder { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-cream-muted); overflow-wrap: anywhere; }
.cm-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .95rem; font-size: .72rem; font-weight: 600; color: var(--inv-deep); background: var(--cm-gold); box-shadow: none; }
.cm-gift .inv-gift__address {
    margin-top: .75rem; padding-top: 1.2rem; font-size: .86rem; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px var(--cm-line), 0 18px 30px -22px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.cm-gift .inv-gift__address .inv-gift__bank { color: var(--inv-rose); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; }
.cm-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; color: var(--inv-primary); font-weight: 600; }
.cm-gift .inv-gift__address .inv-button { color: #fff; background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep)); }

/* co-hosts: the names in the serif, one per line, split by small gold sparkles, on the rose band */
.cm-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.cm-cohosts__list li { max-width: 26ch; font-family: var(--cm-serif); font-size: 1.28rem; font-weight: 500; line-height: 1.3; color: #fff; }
.cm-cohosts__list li + li::before {
    content: ''; display: block; width: .8rem; height: .8rem; margin: 0 auto .55rem; background: var(--inv-shine);
    -webkit-mask: var(--cm-spark) center / contain no-repeat; mask: var(--cm-spark) center / contain no-repeat;
}

/* contacts: rows with the initial on a velvet disc ringed in gold, and a WhatsApp button */
.cm-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.cm-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .65rem .7rem; border-radius: 14px;
    background: #fff; text-align: left; box-shadow: inset 0 0 0 1px var(--cm-line), 0 14px 26px -22px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.cm-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
    font-family: var(--cm-serif); font-style: italic; font-size: 1.4rem; color: var(--inv-shine); background: var(--cm-velvet);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--inv-accent);
}
.cm-contact p { margin: 0; }
.cm-contact__name { font-weight: 600; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.cm-contact__role { font-size: .76rem; color: var(--cm-muted); }
.cm-contact__phone { font-size: .84rem; }
.cm-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .78rem; font-weight: 500; background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep)); }
.cm-contact__button .cm-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol: white chips */
.cm-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.cm-protocol__list li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 500;
    background: #fff; box-shadow: inset 0 0 0 1px var(--cm-line);
}
.cm-protocol__list .cm-icon { width: 1rem; height: 1rem; color: var(--inv-rose); }
.cm-protocol__note { font-size: .86rem; color: var(--cm-muted); }

/* vendors: a white card of rows split by fine gold lines */
.cm-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--cm-line), var(--cm-drop); }
.cm-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 1px solid var(--cm-line); }
.cm-vendor:last-child { border-bottom: 0; }
.cm-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.cm-vendor__role { font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-rose); }
.cm-vendor__name { font-family: var(--cm-serif); font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: var(--inv-primary); overflow-wrap: anywhere; }
.cm-vendor__link {
    display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.2rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: .72rem; font-weight: 500; text-decoration: none; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--cm-line);
}
.cm-vendor__link .cm-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the velvet, roses rising where it fades, the thanks and the names */
.cm-closing { padding: 4rem 1.6rem 2.8rem; }
.cm-closing--photo { padding-top: 0; }
.cm-closing__photo { position: relative; z-index: -1; height: min(128vw, 36rem); margin: 0 -1.6rem; overflow: hidden; }
.cm-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 45%; --inv-parallax: 30px; }
.cm-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 20%, transparent), transparent 18%, transparent 40%, color-mix(in srgb, var(--inv-primary) 70%, transparent) 66%, var(--inv-deep) 92%);
}
.cm-closing__body { position: relative; }
.cm-closing--photo .cm-closing__body { margin-top: -7.4rem; }
.cm-closing__roses { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 8.4rem; margin: 0 auto .6rem; }
.cm-closing__rose { position: relative; }
.cm-closing__rose--left { width: 7rem; margin-right: -1.2rem; transform: rotate(-10deg); transform-origin: 50% 100%; }
.cm-closing__rose--right { width: 4.8rem; margin-left: -.6rem; transform: scaleX(-1) rotate(-12deg); transform-origin: 50% 100%; }
.cm-closing__ring { position: relative; z-index: 1; width: 2.6rem; margin-bottom: .2rem; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .4)); }
.cm-closing__eyebrow { margin: 0 0 .3rem; font-size: .66rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--inv-shine); }
.cm-closing__title { margin: 0 0 1rem; font-family: var(--cm-serif); font-size: 3rem; font-weight: 500; line-height: 1.05; color: #fff; }
.cm-closing__title em { font-style: italic; font-weight: 400; color: var(--inv-shine); }
.cm-closing__message { margin: 0 auto; max-width: 30ch; color: var(--cm-cream-muted); }
.cm-closing__salam { margin: 1.1rem auto 0; max-width: 24ch; font-family: var(--cm-serif); font-size: 1.15rem; font-style: italic; line-height: 1.35; color: var(--inv-shine); }
.cm-closing__signature { margin: 1.1rem auto 0; max-width: 30ch; font-size: .84rem; color: var(--cm-cream-muted); }
.cm-closing__names { margin: 1.5rem 0 0; font-family: var(--cm-serif); font-style: italic; font-size: 2.5rem; font-weight: 400; line-height: 1.1; color: #fff; }
.cm-closing__names .cm-amp { font-size: .8em; color: var(--inv-accent); }
.cm-closing__monogram {
    display: inline-flex; align-items: center; gap: .45rem; margin: .9rem 0 0; padding: .35rem 1rem; border-radius: 999px;
    font-family: var(--cm-serif); font-size: 1rem; font-weight: 600; letter-spacing: .14em; color: var(--inv-shine);
    box-shadow: inset 0 0 0 1px var(--cm-line);
}
.cm-closing__monogram i { font-style: normal; color: var(--inv-accent); }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.cm-main .inv-form { gap: 1rem; text-align: left; }
.cm-main .inv-form label, .cm-main .inv-form__choices legend { font-size: .8rem; font-weight: 500; color: var(--inv-text); }
.cm-main .inv-form input:not([type=radio]):not([type=checkbox]),
.cm-main .inv-form select,
.cm-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 10px;
    font: 400 .92rem/1.4 var(--cm-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 26%, transparent);
    transition: box-shadow .2s ease;
}
.cm-main .inv-form select {
    appearance: none; padding-right: 2.4rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.cm-main .inv-form input:not([type=radio]):focus-visible,
.cm-main .inv-form select:focus-visible,
.cm-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2px var(--inv-primary), 0 0 0 4px color-mix(in srgb, var(--inv-accent) 40%, transparent);
}
.cm-main .inv-form button[type=submit] { width: 100%; min-height: 3rem; font-weight: 600; letter-spacing: .04em; background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep)); box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent); }
.cm-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; }
.cm-main .inv-form__notice { text-align: center; }

/* the three answers as cards with icons (the radio dot is hidden but still focusable) */
.cm-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.cm-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.cm-rsvp .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .45rem;
    min-height: 5.4rem; padding: .85rem .3rem .75rem; border-radius: 12px; cursor: pointer; text-align: center;
    font-size: .82rem; font-weight: 500; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 22%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.cm-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a gold ring (::before) with a check, a cross or a question mark in it (::after, a mask in the text colour) */
.cm-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--inv-rose) 7%, #fff);
    box-shadow: inset 0 0 0 2px var(--inv-accent);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.cm-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.3rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem;
    background: currentColor; color: var(--inv-rose); pointer-events: none;
    -webkit-mask: var(--cm-choice-icon) center / contain no-repeat; mask: var(--cm-choice-icon) center / contain no-repeat;
}
.cm-rsvp .inv-form__choices label:nth-of-type(1) {
    --cm-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.cm-rsvp .inv-form__choices label:nth-of-type(2) {
    --cm-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
.cm-rsvp .inv-form__choices label:nth-of-type(3) {
    --cm-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8.5 8.8a3.5 3.5 0 1 1 4.9 3.2c-.9.4-1.4 1.1-1.4 2v.5M12 19h.01'/%3E%3C/svg%3E");
}
.cm-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--cm-velvet); transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--inv-accent), 0 12px 24px -12px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.cm-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .14); transform: scale(1.1); }
.cm-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.cm-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* wishes: the form on an ivory card with a rose-red offset block, the wishes in a scroll box of about three */
.cm-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.cm-wishes .inv-form {
    margin-right: 8px; padding: 1.3rem 1.1rem; border-radius: 14px; background: var(--cm-paper);
    box-shadow: inset 0 0 0 1px var(--cm-line), 8px 8px 0 0 var(--inv-rose);
}
.cm-wishes .inv-wishes__list { margin-top: 1.6rem; }
.cm-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 14px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px var(--cm-line);
}
.cm-wishes .inv-wish { padding: .75rem .9rem; border-radius: 10px; color: var(--inv-text); background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .1); border-left: 3px solid var(--inv-accent); }
.cm-wishes .inv-wish__name { font-weight: 600; color: var(--inv-primary); }
.cm-wishes .inv-wish__message { font-size: .86rem; line-height: 1.5; }
.cm-wishes .inv-wish__time { font-size: .7rem; color: var(--cm-muted); }
.cm-wishes .inv-wishes__empty, .cm-wishes .inv-wishes__pager { color: var(--cm-cream-muted); }

/* ---------- 7. shared components ---------- */
.cm-main .inv-button { font-weight: 500; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, #fff 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 74%, transparent);
    --inv-nav-active: var(--inv-primary);
    font-family: var(--cm-sans);
}

/* ---------- 8. screen sizes ---------- */

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .cm-cover { padding-top: 1.4rem; padding-bottom: 1.4rem; }
    .cm-arch--cover { --arch-w: min(58vw, 15rem, 25svh); }
    .cm-cover__title { margin-bottom: 1.15rem; }
    .cm-cover__names { margin-top: 1.15rem; font-size: 2.5rem; }
    .cm-box--cover { --box-w: 7.8rem; margin-top: .8rem; }
    .cm-cover__quote { margin-top: .65rem; font-size: .95rem; }
    .cm-cover__guest { margin-top: .75rem; }
    .cm-cover__open { margin-top: .8rem; }
}
@media (max-height: 660px) {
    .cm-cover { padding-top: 1.1rem; padding-bottom: 1.1rem; }
    .cm-arch--cover { --arch-w: min(52vw, 23svh); }
    .cm-cover__title { margin-bottom: .95rem; font-size: .64rem; }
    .cm-cover__names { margin-top: 1rem; font-size: 2.2rem; }
    .cm-box--cover { --box-w: 7rem; margin-top: .65rem; }
    .cm-box--cover .cm-box__initials { display: none; }
    .cm-box--cover .cm-box__base { padding: .4rem .4rem .38rem; }
    .cm-box--cover .cm-box__digits { font-size: 1.05rem; }
    .cm-cover__quote { margin-top: .55rem; font-size: .88rem; line-height: 1.3; }
    .cm-cover__guest { margin-top: .6rem; padding: .35rem .85rem .45rem; }
    .cm-cover__guest-name { font-size: 1.12rem; }
    .cm-cover__open { margin-top: .7rem; min-height: 2.75rem; padding: .6rem 1.8rem; }
}
/* very short screens (in-app browsers): a smaller arch and box, so everything fits */
@media (max-height: 600px) {
    .cm-cover { padding-top: .8rem; padding-bottom: .8rem; }
    .cm-cover__title { margin-bottom: .75rem; }
    .cm-arch--cover { --arch-w: min(44vw, 20svh); }
    .cm-cover__names { margin-top: .75rem; font-size: 1.95rem; }
    .cm-box--cover { --box-w: 6.2rem; margin-top: .5rem; }
    .cm-cover__guest { margin-top: .5rem; }
    .cm-cover__open { margin-top: .6rem; }
    .cm-box--cover .cm-box__weekday { font-size: .5rem; }
    .cm-box--cover .cm-box__digits { font-size: .98rem; }
    .cm-cover__quote { font-size: .84rem; }
}

/* wide screens: the phone-width column on the velvet backdrop */
@media (min-width: 560px) {
    body.cm-body { background: var(--cm-velvet); background-attachment: fixed; }
    .cm-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes cm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cm-pop { 0% { transform: scale(0); } 55% { transform: scale(1.12); } 75% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes cm-arch-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cm-zoom-out { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-bloom-low { from { opacity: 0; transform: rotate(-20deg) scale(.8); } to { opacity: 1; transform: rotate(-6deg); } }
@keyframes cm-bloom-high { from { opacity: 0; transform: scaleX(-1) rotate(-34deg) scale(.8); } to { opacity: 1; transform: scaleX(-1) rotate(-16deg); } }
@keyframes cm-lid-open { 0% { transform: rotateX(84deg); filter: brightness(.65); } 100% { transform: rotateX(0); filter: none; } }
@keyframes cm-ring-rise { from { opacity: 0; transform: translate(-50%, 55%); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cm-spark { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 55% { opacity: 1; transform: scale(1.35) rotate(10deg); } 100% { opacity: .95; transform: scale(1) rotate(0); } }
@keyframes cm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* cover (≤ 2.5 s, once): the arch fades up and its photo settles from a slight zoom (0–1.2 s), the roses unfold
   (0.3–1.4 s), the ring box appears closed and its lid lifts open (0.35–1.45 s), the ring rises from the cushion
   (1.1–1.8 s) and its stone glints (1.75–2.4 s); the text follows through its inv-enter delays */
html.inv-anim .cm-arch--cover { animation: cm-arch-in .9s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .cm-arch--cover .cm-arch__photo { animation: cm-zoom-out 1.2s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .cm-arch--cover .cm-arch__rose--low { animation: cm-bloom-low 1.1s cubic-bezier(.2, .7, .2, 1) .3s both; }
html.inv-anim .cm-arch--cover .cm-arch__rose--high { animation: cm-bloom-high 1.1s cubic-bezier(.2, .7, .2, 1) .45s both; }
html.inv-anim .cm-box--cover { animation: cm-fade .4s ease .35s both; }
html.inv-anim .cm-box--cover .cm-box__lid { animation: cm-lid-open .95s cubic-bezier(.3, .6, .2, 1) .5s both; }
html.inv-anim .cm-box--cover .cm-box__ring { animation: cm-ring-rise .7s cubic-bezier(.2, .7, .2, 1) 1.1s both; }
html.inv-anim .cm-box--cover .cm-ring__spark path { animation: cm-spark .65s cubic-bezier(.3, .8, .3, 1) 1.75s both; }

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    html.inv-anim .cm-rundown__list::before { animation: cm-grow linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-cover, .cm-cover--leave, .cm-cover__inner { transition: none; }
}