/*
 * Template "Vellum Linen" (Pernikahan): fine stationery, rich. Deep ink linen alternating with warm natural linen
 * (a real woven texture, img/linen-weave-soft.webp: transparent light-and-shade laid over the variant colors without blend modes, which iOS Safari mishandles), deckled cotton cards, translucent
 * vellum sheets over photos and color blocks (never over names), a brass satin ribbon, a glossy wax-seal monogram,
 * and painted anemones (img/anemone-*.webp, Redouté, public domain).
 * Colors from the variant (x-inv.head): --inv-primary (ink), --inv-deep (darkest ink: deep sections), --inv-accent
 * (brass), --inv-background (linen), --inv-text, --inv-paper (cotton card), --inv-vellum (vellum tint),
 * --inv-ribbon (satin ribbon), --inv-seal (wax), --inv-highlight (times, dates and buttons on linen).
 * SVG shapes live in sections/_defs.blade.php.
 */

:root {
    --inv-primary: #1f3358;
    --inv-accent: #b48a45;
    --inv-background: #eee3cd;
    --inv-text: #1b2234;
    --inv-paper: #fbf7ee;
    --inv-vellum: #f7f2e6;
    --inv-ribbon: #c3a062;
    --inv-seal: #8c1f24;
    --inv-deep: #101b33;
    --inv-highlight: #8c2a22;
    --inv-radius: 10px;

    --vl-col: min(100vw, 460px);
    --vl-script: 'Pinyon Script', 'Brush Script MT', cursive;
    --vl-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
    --vl-body: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
    --vl-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* brass for text: darkened on linen, lightened on ink (both ≥ 4.5:1) */
    --vl-brass-ink: color-mix(in srgb, var(--inv-accent) 52%, #000);
    --vl-brass-light: color-mix(in srgb, var(--inv-accent) 68%, #fff);
    --vl-soft: color-mix(in srgb, var(--inv-text) 86%, var(--inv-background));
    --vl-line: var(--inv-accent);
    --vl-ink-grad: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)), var(--inv-deep));
    /* the no-photo fill of photo frames: ink with a brass glow */
    --vl-ink-fill: radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--inv-accent) 38%, transparent), transparent 70%), linear-gradient(160deg, var(--inv-primary), var(--inv-deep));

    /* deckled paper: a 72px frame for cards (9-slice mask) and a torn strip for section edges */
    --vl-deckle-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M4 1.1L7.1 2.5L8.9 1.3L11.4 1.2L13.2 1.6L15.8 2.7L18.2 4.5L19.9 2.2L22 0.5L23.6 2.2L25.3 1.4L28.4 3.6L31.2 2.2L34.2 4.3L37.1 3.1L39.6 1.9L41.9 2.5L44.3 2.8L47 3.2L49.6 3.4L52.6 3.9L55.8 2.3L58.2 4.3L61.4 1.9L63.1 1.9L66.1 3.3L67.7 4L70.7 6.9L68.3 8.8L67.8 10.6L69 13.5L69.4 16.2L68 18.5L68 21L68.8 23.1L69.9 25.4L69.1 27.3L67.9 29.2L70.1 32.1L68 34.8L70.3 36.6L71.5 39.7L69.9 41.5L68.7 43.1L70.8 46.2L67.7 48.1L70.8 50.8L69 52.6L68.3 54.3L68.5 56.8L70.2 58.6L67.7 61.3L69.1 63.8L68.7 66.7L68 69.1L66.2 71.3L63.7 70.6L61.1 70.5L59.2 69L56.6 68.2L54.6 67.9L52.9 68.7L50.6 68.3L48 68.3L46.2 67.8L43.8 68.2L41.5 68L38.7 68.6L35.6 68.1L33.7 68.6L31.9 71L28.8 67.7L27.1 71.2L25 67.7L22.1 67.7L20 70.7L18.4 69.6L15.9 70.9L13.8 69.6L11.8 71.3L10.1 71.1L7.5 69.6L4.6 68.6L3.3 68L3 65.8L3.6 62.6L3.3 59.5L3.7 56.9L0.8 55.1L3.1 52.3L2.7 50L2.5 47.8L0.8 46L1.9 44.3L1.3 42.1L1 39.5L0.5 37.8L4 34.9L3.6 33.2L2.1 31.1L3.7 28L4.5 26.4L3.1 24.5L0.6 22.2L3.5 20.3L1.5 17.5L3.8 14.5L2.3 12.4L1.5 10.4L4 7.4L2.5 4.7Z'/%3E%3C/svg%3E");
    --vl-deckle-strip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12L0 6L1.5 3L3.2 4.1L5.2 4.6L7.6 5.7L9.8 7.1L11.6 6.5L12.9 6.4L15.6 9L17.6 7.6L19.9 5.9L22.5 4.9L25 4.7L26.7 5.1L29.4 5.8L32 3.3L34.1 5.5L35.6 9.5L37.4 4.7L40.1 5.6L41.9 4.4L43.8 4.7L46 4.2L47.9 7.3L50.2 5.6L52.5 7.7L54.8 4.3L56.5 4.7L59 9.4L61.5 3.4L63 3.4L64.5 8.2L66.5 8L69.1 7.4L71.8 7.5L73.4 3.1L74.7 3L76.3 6.7L78.6 4.2L80.2 4.9L81.5 7.4L84.2 6.2L85.4 7.5L88.2 5.8L89.8 4.1L91.9 3.3L94.2 6.6L95.5 3.6L96.9 6.4L98.2 7.4L101 7.8L102.8 4.2L105.4 5L107.3 7.4L109 6.1L110.8 6.6L112.3 4.6L115.1 6.2L117.8 4L119.2 5.5L121.6 7.7L123.1 5.2L125.4 5.6L127.4 6.8L129.8 3.1L131.8 4L133.5 4.2L135.4 3.4L137.9 7.6L140.2 9.8L142.6 6L145.3 5.2L146.6 5.5L147.8 6L149.3 3.7L151.6 4.2L154.4 5.1L156.8 5L158.1 4.2L160 6L160 12Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
p, h1, h2, h3, figure, blockquote, ol, ul { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

body.vl-body {
    min-height: 100vh;
    background-color: var(--inv-deep);
    background-image: var(--vl-weave-img);
    background-size: 210px 210px;
    color: var(--inv-text);
    font-family: var(--vl-body);
    font-size: 16px;
    line-height: 1.66;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.vl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.vl-preview {
    position: fixed; top: 0; left: 50%; z-index: 60; transform: translateX(-50%);
    padding: .3rem .9rem; border-radius: 0 0 10px 10px; white-space: nowrap;
    background: var(--inv-deep); color: #fff; font: 600 .7rem/1.4 system-ui, sans-serif;
}

/* ---------- materials ---------- */
/* natural linen: the woven texture softly blended over the linen color, a warm light from the top */
.vl-linen {
    background-color: var(--inv-background);
    background-image:
        var(--vl-weave-img),
        radial-gradient(120% 55% at 15% 0%, rgb(255 255 255 / .45), transparent 62%),
        radial-gradient(90% 50% at 100% 100%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 70%);
    background-size: 210px 210px, auto, auto;
}
/* ink linen: the same weave over the deep color, paper-colored type, brass labels */
.vl-ink {
    --vl-soft: color-mix(in srgb, var(--inv-paper) 86%, var(--inv-deep));
    --vl-dot: var(--inv-paper);
    background-color: var(--inv-deep);
    background-image:
        var(--vl-weave-img),
        radial-gradient(90% 50% at 50% 0%, color-mix(in srgb, var(--inv-primary) 75%, transparent), transparent 75%);
    background-size: 210px 210px, auto;
    color: var(--inv-paper);
}

/* cotton card stock */
.vl-card { position: relative; padding: 1.8rem 1.3rem; background: var(--inv-paper); color: var(--inv-text); }

/* deckled edges */
.vl-deckle { border-radius: 4px; }
@supports (-webkit-mask-box-image: none) {
    .vl-deckle { border-radius: 0; -webkit-mask-box-image: var(--vl-deckle-frame) 14 / 10px round; }
}

/* vellum: translucent and frosted, softly blurring what lies beneath (never text beneath it) */
.vl-vellum {
    color: var(--inv-text);
    background:
        linear-gradient(160deg, rgb(255 255 255 / .42), rgb(255 255 255 / .06) 45%, rgb(255 255 255 / .22)),
        color-mix(in srgb, var(--inv-vellum) 34%, transparent);
    -webkit-backdrop-filter: blur(3px) saturate(1.05) brightness(1.06);
    backdrop-filter: blur(3px) saturate(1.05) brightness(1.06);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 16px 30px -22px rgb(0 0 0 / .55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vl-vellum { background: color-mix(in srgb, var(--inv-vellum) 86%, transparent); }
}

/* ---------- type ---------- */
.vl-label { font: 600 .72rem/1.4 var(--vl-body); letter-spacing: .32em; text-transform: uppercase; color: var(--vl-brass-ink); }
.vl-ink .vl-label { color: var(--vl-brass-light); }
.vl-title { margin-top: .2rem; font: 500 clamp(2.1rem, 9vw, 2.55rem)/1.15 var(--vl-serif); color: var(--inv-primary); letter-spacing: -.005em; }
.vl-title em { font-style: italic; color: var(--vl-brass-ink); }
.vl-ink .vl-title { color: var(--inv-paper); }
.vl-ink .vl-title em { color: var(--vl-brass-light); }
.vl-amp { font-family: var(--vl-script); color: var(--vl-brass-ink); }
.vl-ink .vl-amp { color: var(--vl-brass-light); }
.vl-divider { display: block; width: 168px; height: 20px; margin: .45rem auto 0; overflow: visible; }
.vl-lead { max-width: 23rem; margin: 0 auto 1.5rem; color: var(--vl-soft); font-size: 1rem; }
.vl-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.8rem; line-height: 1.8; color: var(--vl-brass-light); margin-bottom: .5rem; }
/* a date between two brass rules */
.vl-rule-date {
    display: flex; align-items: center; justify-content: center; gap: .7rem;
    font: 600 .82rem/1.3 var(--vl-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-highlight);
}
.vl-rule-date::before, .vl-rule-date::after { content: ''; flex: 0 0 1.8rem; height: 1px; background: var(--inv-accent); }
.vl-ink .vl-rule-date { color: var(--vl-brass-light); }

/* ---------- ornaments ---------- */
/* painted anemones in a corner, swaying from their own corner */
.vl-flora { position: absolute; z-index: 0; display: block; height: auto; pointer-events: none; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .22)); }
.vl-flora--bouquet { width: clamp(130px, 38%, 175px); }
.vl-flora--bud { width: clamp(64px, 18%, 84px); }
.vl-flora--tl { transform-origin: 0 0; }
.vl-flora--tr { transform-origin: 100% 0; }
.vl-flora--bl { transform-origin: 0 100%; }
.vl-flora--br { transform-origin: 100% 100%; }
@keyframes vl-sway { from { rotate: -1.6deg; } to { rotate: 1.8deg; } }
html.inv-anim .vl-flora { animation: vl-sway 7s ease-in-out infinite alternate; }
html.inv-anim .vl-flora--tr { animation-duration: 7.8s; animation-delay: -2s; }
html.inv-anim .vl-flora--br { animation-duration: 8.4s; animation-delay: -1s; }

/* brass corner brackets on vellum sheets */
.vl-corner { position: absolute; width: 30px; height: 30px; pointer-events: none; }
.vl-corner--tl { top: 8px; left: 8px; }
.vl-corner--br { right: 8px; bottom: 8px; transform: rotate(180deg); }

/* the wax seal */
.vl-seal { position: relative; display: grid; place-items: center; width: 64px; height: 64px; flex: none; }
.vl-seal__wax { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .35)) drop-shadow(0 8px 14px rgb(0 0 0 / .25)); }
.vl-seal__letters {
    position: relative; display: flex; align-items: baseline; gap: .02rem;
    font: 700 1.12rem/1 var(--vl-serif); letter-spacing: .02em;
    color: color-mix(in srgb, var(--inv-seal) 62%, #000);
    text-shadow: 0 1px 0 rgb(255 255 255 / .3), 0 -1px 0 rgb(0 0 0 / .35);
}
.vl-seal__letters i { margin: 0 .06em; font: 400 .72em/1 var(--vl-script); }
.vl-seal--hero { width: 92px; height: 92px; margin: 0 auto 1rem; }
.vl-seal--hero .vl-seal__letters { font-size: 1.6rem; }
.vl-seal--closing { width: 64px; height: 64px; margin: 0 auto .6rem; }
.vl-seal--closing .vl-seal__letters { font-size: 1.15rem; }

/* the satin ribbon: a band with V-cut tails and the seal at its middle */
.vl-ribbon { position: absolute; z-index: 4; left: -18px; right: -18px; height: 16px; display: block; pointer-events: none; }
.vl-ribbon__band {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 38%, rgb(0 0 0 / .18)),
        repeating-linear-gradient(90deg, rgb(255 255 255 / .1) 0 2px, transparent 2px 5px),
        var(--inv-ribbon);
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / .25));
}
.vl-ribbon .vl-seal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* photo gradient backgrounds: a client photo under a strong ink gradient (light variant: faint under linen) */
.vl-bgphoto { position: absolute !important; inset: 0; z-index: 0 !important; overflow: hidden; pointer-events: none; }
.vl-bgphoto img {
    position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); max-width: none; object-fit: cover;
    opacity: .5; filter: sepia(.35) saturate(1.1);
}
.vl-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 70%, transparent), color-mix(in srgb, var(--inv-deep) 86%, transparent) 50%, color-mix(in srgb, var(--inv-deep) 95%, transparent)),
        radial-gradient(70% 40% at 50% 0%, color-mix(in srgb, var(--inv-primary) 60%, transparent), transparent 70%);
}
.vl-bgphoto--light img { opacity: .42; filter: sepia(.75) saturate(1.3) blur(1px); }
.vl-bgphoto--light::after {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 30%, transparent), color-mix(in srgb, var(--inv-background) 66%, transparent) 38%, var(--inv-background) 80%),
        color-mix(in srgb, var(--inv-accent) 14%, transparent);
}

/* ---------- backdrop (wide screens) ---------- */
.vl-backdrop { position: fixed; inset: 0; z-index: -1; display: none; pointer-events: none; background: radial-gradient(60% 70% at 50% 50%, transparent, rgb(0 0 0 / .35)); }

/* ---------- page column ---------- */
.vl-page { position: relative; width: var(--vl-col); min-height: 100vh; margin: 0 auto; overflow: hidden; background: var(--inv-background); }
@media (min-width: 520px) {
    .vl-backdrop { display: block; }
    .vl-page { box-shadow: 0 0 0 1px rgb(0 0 0 / .2), 0 30px 90px -24px rgb(0 0 0 / .6); }
}

/* ---------- cover ---------- */
.vl-cover {
    position: fixed; top: 0; bottom: 0; left: 50%; z-index: 30; width: var(--vl-col); transform: translateX(-50%);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.vl-cover__glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(75% 38% at 50% 30%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(60% 30% at 50% 100%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 70%);
}
.vl-cover--leave { transition: opacity .55s ease; }
html.inv-anim .vl-cover--leave { transition-delay: .9s; }
.vl-cover--gone { opacity: 0; }
.vl-cover__inner {
    position: relative; z-index: 1; min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: .55rem;
    padding: 1.8rem 1.4rem 2.4rem; text-align: center;
}

/* the stationery suite: a card beneath, the photo card, the vellum sheet over its foot, the ribbon and the seal */
/* sized in px steps per screen height (svh is the whole screen in Chrome on iOS) */
.vl-suite { position: relative; width: min(66vw, 262px); aspect-ratio: 4 / 5; margin: .6rem 0 .5rem; }
.vl-suite__under { position: absolute; inset: 0; background: color-mix(in srgb, var(--inv-paper) 88%, var(--inv-accent)); transform: rotate(6deg) translate(10px, 4px); }
.vl-suite__card { position: absolute; inset: 0; padding: 8px; background: var(--inv-paper); transform: rotate(-2.5deg); box-shadow: 0 20px 34px -18px rgb(0 0 0 / .7); }
.vl-suite__photo {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    background: var(--vl-photo, none) center 28% / cover no-repeat, var(--vl-ink-fill);
}
.vl-suite__mono { position: absolute; inset: 0; display: grid; place-items: center; font: 400 3.6rem/1 var(--vl-script); color: var(--vl-brass-light); }
.vl-suite__vellum { position: absolute; z-index: 3; left: -14px; right: -14px; bottom: -12px; height: 22%; transform: rotate(-2.5deg); }
.vl-ribbon--cover { top: calc(80% - 8px); transform: rotate(-2.5deg); }
.vl-cover__flora { left: -28%; bottom: -12%; width: 52%; z-index: 5; }
.vl-cover__bud { right: -14%; top: -6%; width: 26%; z-index: 5; rotate: 12deg; }
html.inv-anim .vl-cover__bud { animation: none; }
/* opening moment: the photo fades in with a slight zoom, the seal presses down once */
@keyframes vl-photo-in { from { opacity: 0; transform: scale(1.08); } }
@keyframes vl-press { 0% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(.94); opacity: 1; } }
html.inv-anim .vl-suite__photo { animation: vl-photo-in 1.4s cubic-bezier(.2, .7, .2, 1) .2s both; }
html.inv-anim .vl-ribbon--cover .vl-seal { animation: vl-press .7s cubic-bezier(.3, .7, .3, 1) 1.1s both; }

.vl-cover__names {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: .4rem;
    font: 400 clamp(2.3rem, 10.5vw, 2.75rem)/1.08 var(--vl-script); color: var(--inv-paper);
    text-shadow: 0 2px 16px rgb(0 0 0 / .35);
}
.vl-cover__names .vl-amp { font-size: .75em; }
.vl-cover__quote { max-width: 21rem; font: italic 500 .9rem/1.4 var(--vl-serif); color: color-mix(in srgb, var(--inv-paper) 88%, var(--inv-deep)); }

/* leaving: the ribbon slips away, the seal lifts, the vellum slides down */
@keyframes vl-ribbon-off { to { transform: scaleX(0); opacity: 0; } }
@keyframes vl-seal-off { to { transform: translate(-50%, -160%) scale(.6) rotate(-20deg); opacity: 0; } }
@keyframes vl-vellum-off { to { transform: translateY(60%) rotate(-2.5deg); opacity: 0; } }
@keyframes vl-fade-out { to { opacity: 0; transform: translateY(8px); } }
html.inv-anim .vl-cover--leave .vl-ribbon__band { animation: vl-ribbon-off .45s ease-in forwards; transform-origin: 50% 50%; }
html.inv-anim .vl-cover--leave .vl-ribbon .vl-seal { animation: vl-seal-off .45s ease-in .05s forwards; }
html.inv-anim .vl-cover--leave .vl-suite__vellum { animation: vl-vellum-off .6s cubic-bezier(.5, 0, .7, .4) .3s forwards; }
html.inv-anim .vl-cover--leave .vl-cover__guest,
html.inv-anim .vl-cover--leave .vl-open,
html.inv-anim .vl-cover--leave .vl-cover__quote { animation: vl-fade-out .35s ease forwards; }

/* the guest: a cream letterpress card with a double brass frame */
.vl-cover__date { white-space: nowrap; font-size: .76rem; letter-spacing: .14em; }
.vl-cover__guest { --vl-soft: color-mix(in srgb, var(--inv-text) 80%, var(--inv-paper)); position: relative; width: min(100%, 18.5rem); padding: .75rem 1.1rem .7rem; background: var(--inv-paper); color: var(--inv-text); box-shadow: 0 16px 30px -18px rgb(0 0 0 / .7); }
.vl-cover__guest::before { content: ''; position: absolute; inset: 5px; pointer-events: none; border: 1px solid var(--inv-accent); }
.vl-cover__guest::after { content: ''; position: absolute; inset: 9px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-accent) 45%, transparent); }
.vl-cover__to { font: 600 .66rem/1.4 var(--vl-body); letter-spacing: .26em; text-transform: uppercase; color: var(--vl-brass-ink); }
.vl-cover__guest-name { display: block; margin-top: .15rem; font: 700 1.3rem/1.22 var(--vl-serif); color: var(--inv-primary); overflow-wrap: anywhere; }
.vl-cover__note { margin-top: .2rem; font-size: .78rem; line-height: 1.4; color: var(--vl-soft); }
.vl-open.inv-button { margin-top: .3rem; padding: .85rem 1.9rem; font-size: .92rem; background: var(--inv-accent); color: var(--inv-deep); }

/* ---------- hero (top of the page) ---------- */
.vl-hero { position: relative; padding: 3.2rem 1.5rem 4rem; text-align: center; }
.vl-hero > :not(.vl-bgphoto) { position: relative; z-index: 1; }
.vl-hero__names {
    margin-top: .3rem; font: 400 clamp(3rem, 14vw, 3.7rem)/1.1 var(--vl-script); color: var(--inv-primary);
}
.vl-hero__names .vl-amp { font-size: .7em; }
.vl-hero .vl-rule-date { margin-top: .4rem; }
.vl-hero__card { position: relative; width: min(74vw, 290px); margin: 2.2rem auto 0; aspect-ratio: 4 / 5; }
.vl-hero__under { position: absolute; inset: 0; background: var(--inv-primary); transform: rotate(5deg) translate(12px, 6px); }
.vl-hero__photo {
    position: absolute; inset: 0; display: block; transform: rotate(-2deg);
    background: var(--vl-photo, none) center 28% / cover no-repeat, var(--vl-ink-fill);
    box-shadow: inset 0 0 0 9px var(--inv-paper);
}
.vl-hero__mono { position: absolute; inset: 0; display: grid; place-items: center; font: 400 4rem/1 var(--vl-script); color: var(--vl-brass-light); }
.vl-hero__vellum { position: absolute; left: -16px; right: -16px; bottom: -14px; height: 22%; transform: rotate(-2deg); border-top: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent); }
.vl-hero__flora { left: -22%; bottom: -16%; width: 58%; z-index: 2; }

/* ---------- sections ---------- */
.vl-main { position: relative; }
.vl-section { position: relative; padding: 3.8rem 1.35rem 4rem; text-align: center; scroll-margin-top: .5rem; }
.vl-section > :where(:not(.vl-bgphoto, .vl-flora, .vl-closing__photo)) { position: relative; z-index: 1; }
/* each linen section is a sheet laid over the previous one: a torn edge with a faint shadow */
.vl-section::before, .vl-section::after {
    content: ''; position: absolute; z-index: 2; left: 0; right: 0; height: 12px; pointer-events: none;
    -webkit-mask: var(--vl-deckle-strip) 0 0 / 160px 12px repeat-x; mask: var(--vl-deckle-strip) 0 0 / 160px 12px repeat-x;
}
.vl-section::before { top: -13px; background: #000; opacity: .25; -webkit-mask-position: 61px 0; mask-position: 61px 0; }
.vl-section::after { top: -10px; background: var(--inv-background); }
.vl-section.vl-ink::after { background: var(--inv-deep); }
.vl-section__flora { top: -3.4rem; right: -2.6rem; width: clamp(120px, 33%, 150px); transform-origin: 50% 50%; rotate: 200deg; }
.vl-section__bud { top: 6px; width: clamp(62px, 17%, 80px); }
.vl-section__bud.vl-flora--tl { left: 4px; rotate: -24deg; }
.vl-section__bud.vl-flora--tr { right: 4px; rotate: 18deg; }
.vl-heading { margin-bottom: 1.7rem; }

/* ---------- opening ---------- */
.vl-opening { padding-top: 4rem; }
.vl-opening__greeting { font: italic 600 1.35rem/1.4 var(--vl-serif); color: var(--inv-paper); }
.vl-opening .vl-divider { margin: .5rem auto 1rem; }
.vl-opening__message { margin-bottom: 0; }
.vl-opening__sheet { position: relative; max-width: 23rem; margin: 6.4rem auto 0; }
.vl-opening__flora { top: -8.6rem; right: -1.8rem; width: 34%; z-index: 2 !important; rotate: 16deg; }
.vl-quote { position: relative; padding: 2.1rem 1.5rem 1.7rem; color: var(--inv-text); }
.vl-quote.vl-vellum { background: linear-gradient(160deg, rgb(255 255 255 / .55), rgb(255 255 255 / .3)), color-mix(in srgb, var(--inv-vellum) 80%, transparent); }
.vl-quote__mark { display: block; height: 2rem; font: 600 4rem/1 var(--vl-serif); color: var(--inv-accent); }
.vl-quote blockquote { font: italic 500 1.16rem/1.55 var(--vl-serif); color: var(--inv-text); }
.vl-quote figcaption { margin-top: .7rem; font: 600 .72rem/1.4 var(--vl-body); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-highlight); }

/* ---------- couple ---------- */
.vl-couple { padding-top: 5rem; }
.vl-person { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 1.1rem; align-items: center; max-width: 24rem; margin: 0 auto; text-align: left; }
.vl-person--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); text-align: right; }
.vl-person--flip .vl-arch { order: 2; }
.vl-arch { position: relative; margin: 0; }
.vl-arch__block { position: absolute; inset: 14px -10px -10px 14px; border-radius: 999px 999px 6px 6px; background: var(--inv-primary); }
.vl-person--flip .vl-arch__block { inset: 14px 14px -10px -10px; background: var(--inv-highlight); }
.vl-arch__frame { position: relative; display: block; aspect-ratio: 3 / 4; padding: 6px; border-radius: 999px 999px 8px 8px; background: var(--inv-paper); box-shadow: 0 16px 26px -18px rgb(0 0 0 / .6); }
.vl-arch__frame::after { content: ''; position: absolute; inset: 11px; border-radius: 999px 999px 4px 4px; border: 1px solid color-mix(in srgb, var(--inv-paper) 70%, transparent); pointer-events: none; }
.vl-arch__frame img, .vl-arch__empty { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 4px 4px; }
.vl-arch__empty { display: grid; place-items: center; background: var(--vl-ink-fill); font: 400 3.4rem/1 var(--vl-script); color: var(--vl-brass-light); }
.vl-person__nick { margin-top: .1rem; font: 400 2.7rem/1.1 var(--vl-script); color: var(--inv-primary); overflow-wrap: anywhere; }
.vl-person__name { margin-top: .25rem; font: 700 1.2rem/1.25 var(--vl-serif); color: var(--inv-text); overflow-wrap: anywhere; }
.vl-person__parents { margin-top: .45rem; font-size: .9rem; line-height: 1.5; color: var(--vl-soft); }
.vl-person__parents strong { color: var(--inv-text); font-weight: 600; }
.vl-person__ig {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem; padding: .4rem .9rem;
    border-radius: 999px; color: var(--inv-primary); text-decoration: none; font-size: .84rem; font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 45%, transparent);
}
.vl-couple__amp { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.6rem auto; }
.vl-couple__amp::before, .vl-couple__amp::after { content: ''; width: 4.5rem; height: 1px; background: var(--inv-accent); }
.vl-couple__amp span { font: 400 3.2rem/1 var(--vl-script); color: var(--vl-brass-ink); }

/* ---------- countdown (x-inv.countdown) ---------- */
.vl-countdown__date { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.4rem; }
.vl-countdown__day { font: 500 4.6rem/.9 var(--vl-serif); color: var(--vl-brass-light); }
.vl-countdown__month { display: grid; gap: .15rem; padding-left: 1rem; border-left: 1px solid var(--inv-accent); text-align: left; }
.vl-countdown__month b { font: italic 600 1.45rem/1.15 var(--vl-serif); color: var(--inv-paper); }
.vl-countdown__month span { font: 600 .72rem/1.3 var(--vl-body); letter-spacing: .26em; text-transform: uppercase; color: var(--vl-brass-light); }
.vl-countdown .inv-countdown { gap: .5rem; }
.vl-countdown .inv-countdown__item {
    flex: 1; min-width: 0; max-width: 5rem; padding: .85rem .2rem .7rem; border-radius: 999px 999px 10px 10px;
    background: linear-gradient(170deg, rgb(255 255 255 / .16), rgb(255 255 255 / .05));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: var(--inv-paper);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 12px 22px -14px rgb(0 0 0 / .7);
}
.vl-countdown .inv-countdown__value { font: 600 2rem/1.1 var(--vl-serif); color: var(--vl-brass-light); }
.vl-countdown .inv-countdown__label { margin-top: .1rem; font: 600 .62rem/1.3 var(--vl-body); letter-spacing: .14em; text-transform: uppercase; }
.vl-countdown .inv-countdown__done { margin-top: 1rem; font: italic 500 1.1rem/1.5 var(--vl-serif); }
.vl-countdown .inv-countdown__actions { margin-top: 1.4rem; }
.vl-countdown .inv-countdown__actions .inv-button { padding: .6rem 1rem; font-size: .78rem; background: transparent; color: var(--inv-paper); box-shadow: inset 0 0 0 1px var(--inv-accent); }

/* ---------- events: rounded cotton cards with an ink header band ---------- */
.vl-events { padding-top: 4.6rem; }
.vl-event {
    max-width: 23rem; margin: 0 auto; overflow: hidden; border-radius: 26px 26px 10px 10px; background: var(--inv-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 45%, transparent), 0 24px 40px -26px rgb(0 0 0 / .55);
}
.vl-event + .vl-event { margin-top: 1.7rem; }
.vl-event__band { position: relative; isolation: isolate; padding: 1.3rem 1rem 1.2rem; color: var(--inv-paper); background: var(--inv-deep); }
.vl-event__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: sepia(.3); }
.vl-event__band::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 72%, transparent), color-mix(in srgb, var(--inv-deep) 92%, transparent));
}
.vl-event__no { font: 600 .66rem/1.4 var(--vl-body); letter-spacing: .3em; text-transform: uppercase; color: var(--vl-brass-light); }
.vl-event__name { margin-top: .1rem; font: italic 500 2.1rem/1.15 var(--vl-serif); }
.vl-event__band::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 4rem; height: 2px; transform: translateX(-50%); background: var(--inv-accent); }
.vl-event__body { padding: 1.25rem 1.1rem 1.4rem; }
.vl-event__date, .vl-event__time, .vl-event__dress { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.vl-event__time { font: 700 1.12rem/1.35 var(--vl-serif); letter-spacing: .02em; color: var(--inv-highlight); }
.vl-event__date { margin-top: .1rem; font-weight: 600; font-size: 1rem; color: var(--inv-primary); }
.vl-event__place { max-width: 20rem; margin: .9rem auto 0; }
.vl-event__place > svg { display: block; margin: 0 auto .25rem; }
.vl-event__venue { display: block; font: 700 1.18rem/1.3 var(--vl-serif); color: var(--inv-primary); }
.vl-event__address { display: block; margin-top: .15rem; font-size: .92rem; line-height: 1.5; color: var(--vl-soft); }
.vl-event__dress {
    width: fit-content; margin: .8rem auto 0; padding: .3rem .85rem; border-radius: 999px; font-size: .9rem; font-style: italic;
    background: color-mix(in srgb, var(--inv-accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 50%, transparent);
}
.vl-event svg { flex: none; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--inv-highlight); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vl-event__place > svg { width: 1.3rem; height: 1.3rem; }
.vl-event__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.2rem; }
.vl-event__actions .inv-button { gap: .35rem; padding: .62rem .5rem; font-size: .8rem; white-space: nowrap; }
.vl-event__actions .inv-button svg { stroke: currentColor; width: 1rem; height: 1rem; }

/* ---------- love story: compact zig-zag on a stitched brass line ---------- */
.vl-story__list { position: relative; padding: .2rem 0; list-style: none; }
.vl-story__list::before { content: ''; position: absolute; top: .4rem; bottom: .4rem; left: 50%; border-left: 1.5px dashed color-mix(in srgb, var(--inv-accent) 85%, transparent); }
.vl-moment { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1fr); column-gap: .7rem; align-items: start; }
.vl-moment > * { grid-row: 1; }
.vl-moment + .vl-moment { margin-top: 2rem; }
.vl-moment__dot { grid-column: 2; position: relative; z-index: 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; }
.vl-moment__dot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)); }
.vl-moment__dot b { position: relative; font: 700 1rem/1 var(--vl-serif); color: color-mix(in srgb, var(--inv-seal) 30%, #fff); }
html.inv-anim .vl-moment__dot { transform: scale(0) rotate(-40deg); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .45s; }
html.inv-anim .vl-moment.is-revealed .vl-moment__dot, html.inv-anim .vl-story__list.is-revealed .vl-moment__dot { transform: none; }
.vl-moment--left .vl-moment__text { grid-column: 1; text-align: right; }
.vl-moment--left .vl-moment__side { grid-column: 3; align-items: flex-start; text-align: left; }
.vl-moment--right .vl-moment__text { grid-column: 3; text-align: left; }
.vl-moment--right .vl-moment__side { grid-column: 1; align-items: flex-end; text-align: right; }
.vl-moment__title { padding-top: .2rem; font: 700 1.18rem/1.25 var(--vl-serif); color: var(--inv-paper); overflow-wrap: anywhere; }
.vl-moment__rule { display: block; width: 3.4rem; margin: .4rem 0; border-top: 2px dotted var(--inv-accent); }
.vl-moment--left .vl-moment__rule { margin-left: auto; }
.vl-moment__story { font-size: .88rem; line-height: 1.5; color: var(--vl-soft); overflow-wrap: anywhere; }
.vl-moment__side { display: flex; flex-direction: column; gap: .55rem; }
.vl-moment__date { padding-top: .1rem; font: italic 600 1.2rem/1.2 var(--vl-serif); color: var(--vl-brass-light); overflow-wrap: anywhere; }
.vl-moment__photo {
    display: block; width: min(100%, 6rem); aspect-ratio: 1; object-fit: cover; border-radius: 50%;
    padding: 4px; background: var(--inv-paper); box-shadow: 0 0 0 1px var(--inv-accent), 0 10px 18px -10px rgb(0 0 0 / .6);
}
.vl-moment__bud { display: block; width: 4.4rem; height: auto; }

/* ---------- gallery (x-inv.gallery) ---------- */
.vl-gallery .inv-gallery { gap: .6rem; }
.vl-gallery .inv-gallery__item { padding: 6px; background: var(--inv-paper); border-radius: 0; -webkit-mask-box-image: var(--vl-deckle-frame) 14 / 8px round; }
.vl-gallery .inv-gallery__item img { border-radius: 0; }
/* the first photo wide; with an even count the last one is wide too, so no tile sits alone */
.vl-gallery .inv-gallery__item:first-child,
.vl-gallery .inv-gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

/* ---------- live streaming ---------- */
.vl-live__wrap { max-width: 23rem; margin: 0 auto; }
.vl-live__card { position: relative; padding: 2rem 1.4rem 1.8rem; }
.vl-live__card.vl-vellum { background: linear-gradient(160deg, rgb(255 255 255 / .55), rgb(255 255 255 / .3)), color-mix(in srgb, var(--inv-vellum) 80%, transparent); }
.vl-live__badge {
    display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem; border-radius: 999px;
    background: var(--inv-seal); color: #fff; font: 600 .68rem/1.4 var(--vl-body); letter-spacing: .16em; text-transform: uppercase;
}
.vl-live__badge span { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
html.inv-anim .vl-live__badge span { animation: vl-blink 1.4s ease-in-out infinite; }
@keyframes vl-blink { 50% { opacity: .25; } }
.vl-live__title { margin: .55rem 0 .3rem; font: 500 2.1rem/1.2 var(--vl-serif); color: var(--inv-primary); }
.vl-live__text { font-size: .96rem; color: var(--inv-text); }
.vl-live__note { margin-top: .6rem; font: italic 600 1.05rem/1.5 var(--vl-serif); }
.vl-live .inv-button { margin-top: 1.1rem; }

/* ---------- gift (x-inv.gift): ink-linen bank cards with a brass chip, two per row ---------- */
.vl-gift { padding-top: 4.6rem; }
.vl-gift .inv-gift { display: grid; gap: 1.1rem; }
.vl-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.vl-gift .inv-gift__accounts > .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.vl-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.vl-gift .inv-gift__account:not(.inv-gift__address) {
    position: relative; isolation: isolate; overflow: hidden; min-width: 0; padding: .8rem .8rem .85rem; border-radius: 16px;
    display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--inv-paper);
    background:
        var(--vl-weave-img),
        radial-gradient(circle at 108% -10%, rgb(255 255 255 / .2), transparent 45%),
        linear-gradient(135deg, var(--inv-primary) 0%, color-mix(in srgb, var(--inv-primary) 50%, var(--inv-deep)) 55%, var(--inv-deep) 100%);
    background-size: 210px 210px, auto, auto;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 18px 30px -18px rgb(0 0 0 / .55);
}
.vl-gift .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; position: absolute; top: 2.75rem; left: .8rem; width: 2.2rem; height: 1.65rem; border-radius: .32rem;
    background:
        linear-gradient(90deg, transparent 31%, rgb(110 72 28 / .45) 31% 34%, transparent 34% 66%, rgb(110 72 28 / .45) 66% 69%, transparent 69%),
        linear-gradient(0deg, transparent 46%, rgb(110 72 28 / .45) 46% 54%, transparent 54%),
        linear-gradient(135deg, #f6e2b6, #d2a560 55%, #f1d59a);
    box-shadow: inset 0 0 0 1px rgb(110 72 28 / .35);
}
.vl-gift .inv-gift__account:not(.inv-gift__address)::after {
    content: ''; position: absolute; z-index: -1; right: -1.6rem; bottom: -1.6rem; width: 6rem; height: 6rem; transform: rotate(45deg);
    background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
}
.vl-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__bank { min-height: 1.5rem; max-width: 100%; margin: 0 0 2.55rem; font: 600 .8rem/1.3 var(--vl-body); letter-spacing: .05em; overflow-wrap: anywhere; }
.vl-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .35rem; max-width: 100%; }
.vl-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__logo img { max-width: 5rem; }
.vl-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__number { max-width: 100%; margin: 0 0 .2rem; font: 500 1rem/1.3 var(--vl-mono); letter-spacing: .06em; overflow-wrap: anywhere; }
.vl-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__holder { max-width: 100%; margin: 0 0 .65rem; font: 600 .62rem/1.35 var(--vl-body); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.vl-gift .inv-gift__account:not(.inv-gift__address) .inv-button {
    margin-top: auto; padding: .35rem .7rem; font-size: .68rem; letter-spacing: .02em;
    background: rgb(255 255 255 / .12); color: var(--inv-paper); box-shadow: inset 0 0 0 1px var(--inv-accent);
}
.vl-gift .inv-gift__address {
    padding: 1.5rem 1.3rem; border-radius: 0; background: var(--inv-paper); color: var(--inv-text);
    -webkit-mask-box-image: var(--vl-deckle-frame) 14 / 10px round;
}
.vl-gift .inv-gift__address .inv-gift__bank { font: italic 500 1.7rem/1.2 var(--vl-serif); color: var(--inv-primary); }
.vl-gift .inv-gift__address .inv-gift__holder { margin: .3rem 0 .2rem; font-weight: 600; }
.vl-gift .inv-gift__address p { font-size: .94rem; }
.vl-gift .inv-gift__address .inv-button { margin-top: .9rem; }

/* ---------- buttons (shared components) ---------- */
.inv-button {
    padding: .75rem 1.4rem; font-family: var(--vl-body); font-size: .9rem; font-weight: 700; letter-spacing: .03em;
    background: var(--inv-primary); color: var(--inv-paper);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 10px 20px -12px color-mix(in srgb, var(--inv-deep) 90%, transparent);
}
.inv-button--outline { background: transparent; color: var(--inv-primary); box-shadow: inset 0 0 0 1.5px var(--inv-primary); }

/* ---------- RSVP & wishes (x-inv.rsvp, x-inv.wishes) ---------- */
.vl-form-wrap { position: relative; max-width: 24rem; margin: 7.2rem auto 0; }
.vl-rsvp .vl-lead { margin-bottom: 0; }
.vl-form__flora { top: -8.6rem; right: -1.4rem; width: 34%; z-index: 2 !important; rotate: 12deg; }
.vl-form { text-align: left; }
.vl-form .inv-form { gap: .9rem; }
.vl-form .inv-form label { font-size: .9rem; font-weight: 600; color: var(--inv-text); }
.vl-form .inv-form input:not([type=radio]):not([type=checkbox]), .vl-form .inv-form select, .vl-form .inv-form textarea {
    padding: .7rem .85rem; border: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent); border-radius: 6px;
    background: #fff; color: var(--inv-text); font-family: var(--vl-body); font-size: 1rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.vl-form .inv-form input:focus, .vl-form .inv-form select:focus, .vl-form .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 16%, transparent);
}
.vl-form .inv-form__choices legend { font-weight: 600; color: var(--inv-text); }
.vl-form .inv-form__choices label {
    padding: .45rem .85rem; border-radius: 999px; background: #fff; font-weight: 600; cursor: pointer;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.vl-form .inv-form__choices label:has(input:checked) { background: color-mix(in srgb, var(--inv-accent) 20%, #fff); box-shadow: inset 0 0 0 1.5px var(--inv-primary); }
.vl-form .inv-form > .inv-button { width: 100%; }
.vl-form .inv-rsvp__deadline { margin-bottom: .8rem; font-size: .9rem; text-align: center; }
.vl-form .inv-form__notice { background: color-mix(in srgb, var(--inv-accent) 16%, #fff); color: var(--inv-text); }
.vl-rsvp .vl-card { padding-top: 2.2rem; }

.vl-wishes .vl-card { max-width: 24rem; margin: 0 auto; }
.vl-wishes .inv-wishes__list { gap: .55rem; margin-top: 1.4rem; }
.vl-wishes .inv-wish {
    position: relative; padding: .7rem .85rem .7rem 1rem; border-radius: 4px;
    background: linear-gradient(165deg, #fff, color-mix(in srgb, var(--inv-vellum) 60%, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent);
}
.vl-wishes .inv-wish::before { content: ''; position: absolute; left: 0; top: .7rem; bottom: .7rem; width: 2px; background: var(--inv-accent); }
.vl-wishes .inv-wish__name { font: 700 1.04rem/1.3 var(--vl-serif); color: var(--inv-primary); }
.vl-wishes .inv-wish__message { margin-top: .15rem; font-size: .93rem; line-height: 1.5; }
.vl-wishes .inv-wish__time { margin-top: .25rem; font-size: .74rem; color: var(--vl-soft); }
.vl-wishes .inv-wishes__pager { gap: .9rem; margin-top: 1rem; }
.vl-wishes .inv-wishes__page-button {
    display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0 0 .15rem; border: 0;
    font: 600 1.6rem/1 var(--vl-serif); color: var(--inv-paper); background: var(--inv-seal);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--inv-seal) 75%, #000), 0 5px 10px -5px rgb(0 0 0 / .5);
}
.vl-wishes .inv-wishes__page-button:disabled { opacity: .35; }
.vl-wishes .inv-wishes__page { min-width: 4rem; font: 700 .98rem/1 var(--vl-serif); letter-spacing: .12em; color: var(--inv-primary); opacity: 1; }
.vl-wishes .inv-wishes__empty { text-align: center; }

/* ---------- closing: the photo full-bleed, warm-toned, fading into deep ink; anemones frame the words ---------- */
.vl-closing { display: grid; align-items: end; min-height: 38rem; padding: 15rem 1.4rem 1.4rem; overflow: hidden; }
/* the photo sinks into the ink linen with a long soft mask: no edge where the texture begins */
.vl-closing__photo { position: absolute; inset: 0 0 auto; height: 70%; overflow: hidden; background: var(--vl-ink-grad); -webkit-mask: linear-gradient(180deg, #000 0, #000 50%, rgb(0 0 0 / .55) 72%, rgb(0 0 0 / .18) 88%, transparent 100%); mask: linear-gradient(180deg, #000 0, #000 50%, rgb(0 0 0 / .55) 72%, rgb(0 0 0 / .18) 88%, transparent 100%); }
.vl-closing__photo img {
    position: absolute; left: 0; top: -30px; width: 100%; height: calc(100% + 60px); max-width: none;
    object-fit: cover; object-position: center 30%; filter: sepia(.42) saturate(1.25) contrast(1.04);
}
.vl-closing__photo::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(160deg, var(--inv-accent), var(--inv-highlight)); mix-blend-mode: soft-light; opacity: .55;
}
.vl-closing__photo::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 15%, transparent) 0%, transparent 20%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 55%, var(--inv-deep) 97%);
}
.vl-closing__photo--empty { height: 100%; background: radial-gradient(70% 40% at 50% 22%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 70%), var(--vl-ink-grad); }
.vl-closing__photo--empty::before, .vl-closing__photo--empty::after { display: none; }
/* the bouquets stand in the lower corners, leaning in towards the names (they used to float beside the seal) */
.vl-closing__flora { top: auto; bottom: -1.2rem; width: 27%; max-width: 118px; z-index: 0 !important; transform-origin: 50% 100%; }
.vl-closing__flora.vl-flora--bl { left: -2.2rem; rotate: 14deg; }
.vl-closing__flora.vl-flora--br { right: -2.2rem; scale: -1 1; rotate: -14deg; }
.vl-closing__body {
    z-index: 2 !important; display: grid; justify-items: center; padding: 1.6rem 1.3rem 1rem; border-radius: 12rem 12rem 0 0;
    background: radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--inv-deep) 55%, transparent), transparent 75%);
}
.vl-closing__title { font-size: clamp(1.95rem, 8.5vw, 2.35rem); text-shadow: 0 2px 18px rgb(0 0 0 / .45); }
.vl-closing .vl-divider { margin: .2rem auto .7rem; }
.vl-closing__message { margin-bottom: .7rem; font-size: .93rem; line-height: 1.6; }
.vl-closing__sign { font: 600 .74rem/1.4 var(--vl-body); letter-spacing: .24em; text-transform: uppercase; color: var(--vl-brass-light); }
.vl-closing__names { margin-top: .25rem; font: 400 clamp(2.15rem, 9.5vw, 2.55rem)/1.2 var(--vl-script); color: var(--inv-paper); }

/* ---------- platform bits ---------- */
.vl-foot { padding: 1.2rem 1.2rem 0; background: var(--inv-deep); }
.vl-foot .inv-checkin { position: relative; z-index: 1; background: var(--inv-paper); }
.vl-branding { position: relative; z-index: 1; color: color-mix(in srgb, var(--inv-paper) 80%, var(--inv-deep)); opacity: 1; }
.inv-music { right: max(1rem, calc(50vw - 230px + 1rem)); }
.inv-music__button { background: var(--inv-seal); color: #fff; box-shadow: 0 0 0 2px var(--inv-paper), 0 8px 18px -6px rgb(0 0 0 / .45); }
.inv-autoscroll { background: var(--inv-paper); }
.inv-to-top.vl-to-top { left: max(1rem, calc(50vw - 230px + 1rem)); background: var(--inv-paper); color: var(--inv-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 6px 14px -4px rgb(0 0 0 / .3); }

/* bottom menu (x-inv.nav, labelled): a vellum strip */
.inv-nav.vl-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-vellum) 86%, transparent);
    --inv-nav-text: var(--inv-primary);
    --inv-nav-active: var(--inv-primary);
    max-width: min(calc(100vw - 1.5rem), 440px);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-color: color-mix(in srgb, var(--inv-accent) 60%, transparent);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6), 0 12px 30px -12px rgb(0 0 0 / .4);
    font-family: var(--vl-body); font-weight: 600;
}
.inv-nav.vl-nav .inv-nav__item.is-active { color: var(--inv-paper); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .vl-flora, .vl-live__badge span, .vl-suite__photo, .vl-ribbon .vl-seal { animation: none !important; }
    .vl-moment__dot { transform: none !important; }
}

/* ---------- fit: the whole cover (names, guest, button) on one phone screen ---------- */
@media (max-height: 760px) {
    .vl-cover__inner { gap: .4rem; padding: 1.3rem 1.3rem 2.2rem; }
    .vl-suite { width: min(62vw, 236px); margin: .4rem 0 .35rem; }
    .vl-cover__names { font-size: clamp(2.2rem, 10vw, 2.55rem); }
    .vl-cover__quote { font-size: .86rem; line-height: 1.36; }
    .vl-cover__note { display: none; }
    .vl-cover__guest { padding: .8rem 1.1rem; }
    .vl-cover__guest-name { font-size: 1.2rem; }
}
@media (max-height: 710px) {
    .vl-suite { width: min(56vw, 214px); }
}
@media (max-height: 660px) {
    .vl-cover__inner { gap: .3rem; padding: 1rem 1.2rem 2.1rem; }
    .vl-suite { width: min(50vw, 186px); margin: .5rem 0 .45rem; }
    .vl-cover__flora { bottom: -10%; width: 62%; }
    .vl-cover__bud { top: -3%; right: -15%; width: 28%; }
    .vl-cover__names { font-size: clamp(2.1rem, 10vw, 2.5rem); }
    .vl-cover__date { font-size: .72rem; }
    .vl-cover__quote { font-size: .85rem; line-height: 1.35; }
    .vl-cover__guest { padding: .65rem 1rem; }
    .vl-cover__note { font-size: .72rem; }
    .vl-open.inv-button { margin-top: .15rem; padding: .7rem 1.6rem; }
}

/* ---------- intro scene "Pita & Segel Lilin" (scene.json, sections/_scene) ---------- */
.vl-scene-linen { position: absolute; inset: 0; overflow: hidden; }
.vl-scene-linen i { position: absolute; inset: -14px; background: var(--vl-photo, none) center 30% / cover no-repeat; filter: blur(5px) sepia(.6) saturate(1.1); opacity: .2; mix-blend-mode: luminosity; }
.vl-scene-linen::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(55% 34% at 50% 25%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 72%),
        radial-gradient(120% 90% at 50% 50%, transparent 50%, rgb(0 0 0 / .45));
}
/* the satin sash tying the suite across a quarter of the screen, and the two V-cut tails hanging from the seal */
.vl-scene-ribbon { position: absolute; inset: 0; }
.vl-scene-ribbon .vl-ribbon__band { inset: auto; clip-path: none; }
.vl-scene-sash .vl-ribbon__band { left: -8vw; right: -8vw; top: 25%; height: 9vw; transform: translateY(-50%) rotate(-6deg); filter: drop-shadow(0 4px 5px rgb(0 0 0 / .4)); }
.vl-scene-tails .vl-ribbon__band {
    left: calc(50% - 3.5vw); top: 25%; width: 7vw; height: 40vw; transform-origin: 50% 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 3.5vw), 0 100%); filter: none;
    background:
        linear-gradient(90deg, rgb(255 255 255 / .5), rgb(255 255 255 / 0) 40%, rgb(0 0 0 / .2)),
        repeating-linear-gradient(0deg, rgb(255 255 255 / .1) 0 2px, transparent 2px 5px),
        var(--inv-ribbon);
}
.vl-scene-tails .vl-ribbon__band:first-child { rotate: 17deg; }
.vl-scene-tails .vl-ribbon__band:last-child { rotate: -13deg; }
.vl-scene-tails { filter: drop-shadow(0 5px 5px rgb(0 0 0 / .4)); }
.vl-scene-seal { position: absolute; left: 35vw; top: calc(25% - 15vw); width: 30vw; height: 30vw; }
.vl-scene-seal .vl-seal__letters { font-size: 8.5vw; }
.vl-scene-seal .vl-seal__wax { filter: drop-shadow(0 4px 4px rgb(0 0 0 / .4)) drop-shadow(0 12px 18px rgb(0 0 0 / .35)); }
.vl-scene-vellum { position: relative; width: 100%; height: 100%; }
.vl-scene-bouquet { width: 100%; aspect-ratio: 600 / 840; background: center / contain no-repeat; transform: scaleX(-1); filter: drop-shadow(0 10px 12px rgb(0 0 0 / .35)); }

/* the card: deckled cotton stock with a double brass frame, like the guest's letterpress card */
body.vl-body .inv-intro--scene .inv-scene__card {
    top: 60%; width: min(66vw, 17.5rem); aspect-ratio: 4 / 5; padding: 1.8rem 1.4rem;
    color: var(--inv-text); background: var(--inv-paper);
    -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask: none; mask: none;
    box-shadow: 0 26px 40px -18px rgb(0 0 0 / .7);
}
@supports (-webkit-mask-box-image: none) {
    body.vl-body .inv-intro--scene .inv-scene__card { -webkit-mask-box-image: var(--vl-deckle-frame) 14 / 10px round; box-shadow: none; }
}
body.vl-body .inv-intro--scene .inv-scene__card::before,
body.vl-body .inv-intro--scene .inv-scene__card::after { content: ''; position: absolute; pointer-events: none; }
body.vl-body .inv-intro--scene .inv-scene__card::before { inset: 14px; border: 1px solid var(--inv-accent); }
body.vl-body .inv-intro--scene .inv-scene__card::after { inset: 19px; border: 1px solid color-mix(in srgb, var(--inv-accent) 45%, transparent); }
body.vl-body .inv-intro--scene .inv-intro__label { margin-bottom: .5rem; font: 600 .66rem/1.4 var(--vl-body); letter-spacing: .3em; color: var(--vl-brass-ink); }
body.vl-body .inv-intro--scene .inv-intro__names { font: 400 clamp(2.2rem, 10.5vw, 2.9rem)/1.12 var(--vl-script); color: var(--inv-primary); }
body.vl-body .inv-intro--scene .inv-intro__rule { width: 4.5rem; margin: .8rem auto .7rem; background: var(--inv-accent); }
body.vl-body .inv-intro--scene .inv-intro__date { font: 600 .74rem/1.4 var(--vl-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-highlight); }
body.vl-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-deep) 70%, transparent); border-color: color-mix(in srgb, var(--inv-accent) 60%, transparent); color: var(--vl-brass-light); }
@media (max-height: 700px) {
    body.vl-body .inv-intro--scene .inv-scene__card { top: 61%; width: min(62vw, 16rem); padding: 1.5rem 1.2rem; }
    body.vl-body .inv-intro--scene .inv-intro__date { font-size: .68rem; letter-spacing: .12em; }
}