/*
 * Template "Vellum Linen" (Pernikahan): luxury stationery. Linen paper (CSS crosshatch),
 * deckled cotton cards, frosted vellum overlays held by a satin ribbon and a wax seal,
 * and a blind-embossed monogram.
 * Colors from the variant (x-inv.head): --inv-primary (ink, buttons), --inv-accent (fine lines),
 * --inv-background (linen), --inv-text, --inv-paper (cotton card), --inv-vellum (vellum tint),
 * --inv-ribbon (satin ribbon), --inv-seal (wax), --inv-deep (dark ink, bank cards),
 * --inv-highlight (the one clear accent: times, dates, countdown numbers, buttons, active menu).
 * SVG shapes live in sections/_defs.blade.php.
 */

:root {
    --inv-primary: #7a6246;
    --inv-accent: #b39a6b;
    --inv-background: #f2ece1;
    --inv-text: #3a332a;
    --inv-paper: #fcf9f3;
    --inv-vellum: #fffdf7;
    --inv-ribbon: #cdb88f;
    --inv-seal: #7d5a36;
    --inv-deep: #4a3e30;
    --inv-highlight: #a5482f;
    --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;

    /* linen: a fine crosshatch weave with a few slubs */
    --vl-weave:
        repeating-linear-gradient(0deg, rgb(255 255 255 / .2) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgb(255 255 255 / .16) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgb(0 0 0 / .022) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(90deg, rgb(0 0 0 / .03) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, transparent 0 37px, rgb(0 0 0 / .02) 37px 39px, transparent 39px 83px),
        repeating-linear-gradient(0deg, transparent 0 51px, rgb(255 255 255 / .22) 51px 52px, transparent 52px 97px);

    /* deckled paper: a torn strip for section tops, a 72px frame for cards (9-slice mask) */
    --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");
    --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");

    /* default ink on linen */
    --vl-bg: var(--inv-background);
    --vl-soft: color-mix(in srgb, var(--inv-text) 82%, var(--inv-background));
    --vl-ink-accent: color-mix(in srgb, var(--inv-accent) 45%, var(--inv-deep));
    --vl-line: var(--inv-accent);
    --vl-leaf: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-background));
    --vl-stem: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-background));
    --vl-petal: color-mix(in srgb, var(--inv-accent) 70%, #fff);
    --vl-vein: rgb(255 255 255 / .55);
}

*, *::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; }

body.vl-body {
    min-height: 100vh;
    background-color: color-mix(in srgb, var(--inv-background) 78%, var(--inv-deep));
    background-image: var(--vl-weave);
    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 ---------- */
/* linen paper */
.vl-linen {
    background-color: var(--vl-bg);
    background-image:
        var(--vl-weave),
        radial-gradient(110% 60% at 10% 0%, rgb(255 255 255 / .35), transparent 60%),
        radial-gradient(90% 50% at 100% 100%, rgb(0 0 0 / .035), transparent 70%);
}
.vl-linen--deep { --vl-bg: color-mix(in srgb, var(--inv-background) 80%, var(--inv-accent)); }
/* the dark band: deep ink linen, paper-coloured type */
.vl-linen--dark {
    --vl-bg: var(--inv-deep);
    --vl-soft: color-mix(in srgb, var(--inv-paper) 80%, var(--inv-deep));
    --vl-leaf: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-deep));
    --vl-stem: color-mix(in srgb, var(--inv-accent) 80%, var(--inv-deep));
    color: var(--inv-paper);
}
.vl-linen--dark .vl-heading__title { color: var(--inv-paper); }
.vl-linen--dark .vl-heading__kicker { color: color-mix(in srgb, var(--inv-highlight) 45%, #fff); }
.vl-linen--dark .vl-divider { --inv-deep: 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, frosted, softly blurring whatever lies beneath */
.vl-vellum {
    color: var(--inv-deep);
    background:
        linear-gradient(165deg, rgb(255 255 255 / .5), rgb(255 255 255 / .1) 45%, rgb(255 255 255 / .32)),
        color-mix(in srgb, var(--inv-vellum) 64%, transparent);
    -webkit-backdrop-filter: blur(7px) saturate(1.08);
    backdrop-filter: blur(7px) saturate(1.08);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .75), 0 14px 30px -22px rgb(0 0 0 / .45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vl-vellum { background: color-mix(in srgb, var(--inv-vellum) 88%, transparent); }
}

/* ---------- shared bits ---------- */
.vl-amp { font-family: var(--vl-script); color: var(--inv-accent); }
.vl-divider { display: block; width: 160px; height: 20px; margin: .4rem auto 0; overflow: visible; }
.vl-lead { max-width: 22rem; margin: 0 auto 1.5rem; color: var(--vl-soft); font-size: .98rem; }
.vl-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.7rem; line-height: 1.8; color: var(--inv-primary); margin-bottom: .6rem; }

/* pressed sprigs in the corners: drawn for the top-left corner, swaying from their own corner */
.vl-sprig { display: block; position: absolute; z-index: 0; overflow: visible; pointer-events: none; width: clamp(110px, 32%, 150px); opacity: .9; }
.vl-sprig--tl { top: 0; left: 0; transform-origin: 0 0; }
.vl-sprig--tr { top: 0; right: 0; transform-origin: 100% 0; }
.vl-sprig--bl { bottom: 0; left: 0; transform-origin: 0 100%; }
.vl-sprig--br { bottom: 0; right: 0; transform-origin: 100% 100%; }
@keyframes vl-sway {
    from { transform: rotate(-2deg); }
    to { transform: rotate(2.2deg) scale(1.02); }
}
html.inv-anim .vl-sprig { animation: vl-sway 7s ease-in-out infinite alternate; will-change: transform; }
html.inv-anim .vl-sprig--tr { animation-duration: 7.8s; animation-delay: -2s; }
html.inv-anim .vl-sprig--bl { animation-duration: 7.4s; animation-delay: -3.4s; }
html.inv-anim .vl-sprig--br { animation-duration: 8.4s; animation-delay: -1s; }

/* a pressed flower lying under vellum */
.vl-bloom {
    --vl-leaf: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-background));
    --vl-stem: color-mix(in srgb, var(--inv-primary) 80%, var(--inv-background));
    --vl-petal: color-mix(in srgb, var(--inv-accent) 85%, var(--inv-primary));
    display: block; overflow: visible; pointer-events: none;
}

/* the wax seal */
.vl-seal { position: relative; display: grid; place-items: center; width: 58px; height: 58px; }
.vl-seal__wax { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .32)); }
.vl-seal__letters {
    position: relative; display: flex; gap: .04rem;
    font: 700 1.05rem/1 var(--vl-serif); letter-spacing: .02em;
    color: color-mix(in srgb, var(--inv-seal) 60%, #000);
    text-shadow: 0 1px 0 rgb(255 255 255 / .35), 0 -1px 0 rgb(0 0 0 / .4);
}

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

/* the blind-embossed monogram: a debossed ring, letters raised in paper color */
.vl-emboss {
    display: grid; place-items: center; width: 104px; height: 104px; margin: 0 auto; border-radius: 50%;
    background: var(--vl-bg);
    box-shadow:
        inset 2px 2px 3px rgb(0 0 0 / .1), inset -2px -2px 3px rgb(255 255 255 / .85),
        0 0 0 7px var(--vl-bg), 0 0 0 8px color-mix(in srgb, var(--vl-bg) 86%, #000), 0 0 0 9px rgb(255 255 255 / .7);
}
.vl-emboss__letters {
    display: flex; align-items: baseline; gap: .1rem;
    font: 600 2.35rem/1 var(--vl-serif); letter-spacing: .02em;
    color: color-mix(in srgb, var(--vl-bg) 90%, var(--inv-deep));
    text-shadow: -1px -1px 0 rgb(255 255 255 / .95), 1px 1px 1px rgb(0 0 0 / .22), 2px 2px 3px rgb(0 0 0 / .06);
}
.vl-emboss__letters i { font: normal 400 1.5rem/1 var(--vl-script); margin: 0 .1rem; }
.vl-emboss--small { width: 78px; height: 78px; margin-bottom: 1.4rem; }
.vl-emboss--small .vl-emboss__letters { font-size: 1.7rem; }
.vl-emboss--small .vl-emboss__letters i { font-size: 1.1rem; }

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

/* ---------- 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 / .08), 0 30px 90px -24px rgb(0 0 0 / .45); }
}

/* ---------- 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--leave { transition: opacity .55s ease; }
html.inv-anim .vl-cover--leave { transition-delay: 1s; }
.vl-cover--gone { opacity: 0; }
.vl-cover__sprig { width: clamp(130px, 40%, 180px); }
.vl-cover .vl-sprig--tl { top: -6px; left: -6px; }
.vl-cover .vl-sprig--br { bottom: -6px; right: -6px; }
.vl-cover__inner {
    position: relative; z-index: 1; min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
    padding: 2.4rem 1.4rem 2.2rem; text-align: center;
}
.vl-cover__title { font: 600 .74rem/1.4 var(--vl-body); letter-spacing: .36em; text-transform: uppercase; color: var(--inv-primary); }

/* the stationery suite: a card beneath, the photo card, the vellum wrap, the ribbon */
.vl-suite { position: relative; width: min(68vw, 250px, 33vh); aspect-ratio: 4 / 5; margin: .9rem 0 1.1rem; }
.vl-suite__under { position: absolute; inset: 0; background: var(--inv-paper); transform: rotate(-5deg) translate(-8px, 6px); opacity: .9; }
.vl-suite__card { position: absolute; inset: 0; background: var(--inv-paper); padding: 9px; }
.vl-suite__photo { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--vl-photo, none) center 30% / cover no-repeat, color-mix(in srgb, var(--inv-accent) 25%, var(--inv-paper)); }
.vl-bloom--cover { position: absolute; left: 50%; top: 4%; height: 70%; transform: translateX(-50%); }
.vl-suite__vellum {
    position: absolute; z-index: 3; left: -8px; right: -8px; top: 50%; bottom: -10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    padding: 1.4rem .6rem .7rem;
}
.vl-cover__names {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: .35rem;
    font: 400 clamp(2.2rem, 10.5vw, 2.8rem)/1.1 var(--vl-script); color: var(--inv-deep);
}
.vl-cover__names .vl-amp { font-size: .8em; }
.vl-cover__date { font: 600 .8rem/1.3 var(--vl-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-highlight); }
.vl-ribbon--cover { top: calc(50% - 7px); }
.vl-cover__quote { max-width: 19rem; font: italic 500 1.02rem/1.45 var(--vl-serif); color: var(--vl-soft); }

/* opening: 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%, -140%) scale(.6) rotate(-20deg); opacity: 0; } }
@keyframes vl-vellum-off { to { transform: translateY(40%); 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) .35s 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 framed box */
.vl-cover__guest { position: relative; width: min(100%, 18rem); padding: 1rem 1.2rem 1rem; background: var(--inv-paper); color: var(--inv-text); }
.vl-cover__guest::before { content: ''; position: absolute; inset: 6px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-accent) 70%, transparent); }
.vl-cover__guest::after { content: ''; position: absolute; inset: 10px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-accent) 35%, transparent); }
.vl-cover__to { font: 600 .68rem/1.4 var(--vl-body); letter-spacing: .26em; text-transform: uppercase; color: var(--inv-primary); }
.vl-cover__guest-name { display: block; margin-top: .15rem; font: 700 1.3rem/1.25 var(--vl-serif); color: var(--inv-text); overflow-wrap: anywhere; }
.vl-cover__note { margin-top: .25rem; font-size: .78rem; line-height: 1.45; color: var(--vl-soft); }
.vl-open.inv-button { margin-top: .4rem; padding: .85rem 1.8rem; font-size: .92rem; }

/* ---------- hero (top of the page) ---------- */
.vl-hero { position: relative; padding: 3.4rem 1.5rem 3.6rem; text-align: center; }
.vl-hero > :not(.vl-sprig) { position: relative; z-index: 1; }
.vl-hero__seal { --inv-parallax: 22px; margin-bottom: 1.3rem; }
.vl-hero__kicker { font: 600 .74rem/1.4 var(--vl-body); letter-spacing: .36em; text-transform: uppercase; color: var(--inv-highlight); }
.vl-wrap { position: relative; width: min(76vw, 290px); margin: 1.5rem auto 0; }
.vl-wrap__photo {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden;
    background: var(--vl-photo, none) center 30% / cover no-repeat, color-mix(in srgb, var(--inv-accent) 25%, var(--inv-paper));
    box-shadow: inset 0 0 0 9px var(--inv-paper);
}
.vl-wrap__photo .vl-bloom { position: absolute; left: 50%; top: 6%; height: 64%; transform: translateX(-50%); }
.vl-wrap__band {
    position: absolute; left: -12px; right: -12px; bottom: 9%;
    display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .9rem .6rem .8rem;
}
.vl-wrap__names { font: 400 clamp(2.3rem, 11vw, 2.8rem)/1.1 var(--vl-script); color: var(--inv-deep); }
.vl-wrap__date { font: 600 .82rem/1.3 var(--vl-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-highlight); }

/* ---------- sections ---------- */
.vl-main { position: relative; }
.vl-section { position: relative; padding: 3.6rem 1.35rem 3.8rem; text-align: center; scroll-margin-top: .5rem; }
.vl-section > :not(.vl-sprig) { position: relative; z-index: 1; }
/* each section is a new sheet laid over the previous one: a torn edge with a faint shadow */
.vl-section.vl-linen::before, .vl-section.vl-linen::after {
    content: ''; position: absolute; 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.vl-linen::before { top: -13px; background: color-mix(in srgb, var(--vl-bg) 80%, #000); opacity: .25; -webkit-mask-position: 61px 0; mask-position: 61px 0; }
.vl-section.vl-linen::after { top: -10px; background: var(--vl-bg); }
.vl-section__sprig { width: clamp(100px, 30%, 136px); }
.vl-section .vl-sprig--tl { top: -2px; left: -4px; }
.vl-section .vl-sprig--tr { top: -2px; right: -4px; }
.vl-section .vl-sprig--bl { bottom: -4px; left: -4px; }
.vl-section .vl-sprig--br { bottom: -4px; right: -4px; }
.vl-section:has(> .vl-sprig--tl, > .vl-sprig--tr) { padding-top: 5.2rem; }

.vl-heading { margin-bottom: 1.6rem; }
.vl-heading__kicker { font: 600 .7rem/1.4 var(--vl-body); letter-spacing: .32em; text-transform: uppercase; color: var(--inv-highlight); }
.vl-heading__title { margin-top: .15rem; font: 400 clamp(2.05rem, 8.8vw, 2.45rem)/1.25 var(--vl-script); color: var(--inv-deep); }

/* ---------- opening ---------- */
.vl-opening__greeting { font: italic 600 1.3rem/1.4 var(--vl-serif); color: var(--inv-primary); margin-bottom: .6rem; }
.vl-opening__message { max-width: 23rem; margin: 0 auto; color: var(--vl-soft); }
.vl-pressed { position: relative; margin-top: 2.4rem; }
.vl-pressed .vl-bloom { position: absolute; z-index: 0; height: 170px; }
.vl-bloom--left { left: -1.6rem; top: -3.4rem; transform: rotate(-24deg); }
.vl-bloom--right { right: -1.4rem; bottom: -3.2rem; transform: rotate(156deg); }
.vl-quote { position: relative; z-index: 1; padding: 1.7rem 1.4rem 1.5rem; }
.vl-quote__mark { display: block; width: 26px; height: 20px; margin: 0 auto .5rem; color: var(--inv-primary); opacity: .55; }
.vl-quote blockquote { font: italic 500 1.14rem/1.55 var(--vl-serif); color: var(--inv-text); }
.vl-quote figcaption { margin-top: .6rem; font: 600 .72rem/1.4 var(--vl-body); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-highlight); }

/* ---------- couple ---------- */
.vl-person { max-width: 21rem; margin: 0 auto; padding: 2rem 1.3rem 1.8rem; }
.vl-arch { position: relative; width: min(50vw, 180px); margin: 0 auto 2.1rem; }
.vl-arch__frame { position: relative; display: block; aspect-ratio: 3 / 4; }
.vl-arch__frame::before { content: ''; position: absolute; inset: -8px; border-radius: 999px 999px 8px 8px; border: 1px solid var(--inv-accent); }
.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: color-mix(in srgb, var(--inv-accent) 22%, var(--inv-paper)); font: 400 3.4rem/1 var(--vl-script); color: var(--inv-primary); }
.vl-arch__tag {
    position: absolute; left: 50%; bottom: -1.2rem; transform: translateX(-50%); min-width: 78%; max-width: 116%;
    padding: .25rem 1rem .1rem; white-space: nowrap; font: 400 2.2rem/1.15 var(--vl-script); color: var(--inv-deep);
}
.vl-person__label { font: 600 .68rem/1.4 var(--vl-body); letter-spacing: .28em; text-transform: uppercase; color: var(--inv-primary); }
.vl-person__name { margin-top: .2rem; font: 700 1.38rem/1.3 var(--vl-serif); color: var(--inv-text); }
.vl-person__parents { margin-top: .5rem; font-size: .95rem; 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: .9rem; padding: .45rem 1rem;
    border-radius: 999px; color: var(--inv-primary); text-decoration: none; font-size: .86rem; font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 50%, transparent);
}
.vl-couple__amp {
    display: grid; place-items: center; width: 72px; height: 72px; margin: 1.5rem auto; border-radius: 50%;
    background: var(--vl-bg);
    box-shadow: inset 2px 2px 3px rgb(0 0 0 / .1), inset -2px -2px 3px rgb(255 255 255 / .85), 0 0 0 6px var(--vl-bg), 0 0 0 7px var(--inv-accent);
}
.vl-couple__amp span { margin-top: .35rem; font: 400 2.6rem/1 var(--vl-script); color: var(--inv-primary); }

/* ---------- countdown (x-inv.countdown) ---------- */
.vl-countdown {
    padding: 3.6rem 1.2rem;
    background:
        linear-gradient(180deg, rgb(0 0 0 / .1), rgb(0 0 0 / .25)),
        var(--vl-photo, none) center / cover no-repeat,
        color-mix(in srgb, var(--inv-primary) 55%, var(--inv-background));
}
.vl-countdown__sheet {
    padding: 2rem 1rem 1.6rem;
    background:
        linear-gradient(165deg, rgb(255 255 255 / .55), rgb(255 255 255 / .15) 45%, rgb(255 255 255 / .35)),
        color-mix(in srgb, var(--inv-vellum) 74%, transparent);
}
.vl-countdown .vl-heading { margin-bottom: 1rem; }
.vl-countdown__day { font: 400 2.3rem/1.1 var(--vl-script); color: var(--inv-highlight); }
.vl-countdown__date { margin-top: .15rem; font: 600 1.05rem/1.3 var(--vl-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--inv-deep); }
.vl-countdown .inv-countdown { gap: .45rem; margin-top: 1.3rem; }
.vl-countdown .inv-countdown__item {
    flex: 1; min-width: 0; max-width: 5rem; padding: .8rem .2rem .65rem; border-radius: 6px;
    background: rgb(255 255 255 / .6); color: var(--inv-deep);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent);
}
.vl-countdown .inv-countdown__value { font: 700 1.95rem/1.1 var(--vl-serif); color: var(--inv-highlight); }
.vl-countdown .inv-countdown__label { margin-top: .1rem; font: 600 .64rem/1.3 var(--vl-body); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.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.3rem; }
.vl-countdown .inv-countdown__actions .inv-button { padding: .6rem 1rem; font-size: .78rem; }

/* ---------- events (W): rounded cotton cards with a header band, over a veiled photo ---------- */
.vl-events { overflow: hidden; }
.vl-events > .vl-events__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.vl-events__bg img { position: absolute; inset: -40px 0; width: 100%; height: calc(100% + 80px); object-fit: cover; object-position: 50% 30%; opacity: .4; }
.vl-events__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--vl-bg) 0%, color-mix(in srgb, var(--vl-bg) 70%, transparent) 20%, color-mix(in srgb, var(--vl-bg) 55%, transparent) 65%, var(--vl-bg) 100%);
}
.vl-event {
    max-width: 23rem; margin: 0 auto; overflow: hidden; border-radius: 28px; background: var(--inv-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 45%, transparent), 0 22px 40px -26px rgb(0 0 0 / .55);
}
.vl-event + .vl-event { margin-top: 1.6rem; }
.vl-event__band { position: relative; isolation: isolate; padding: 1.1rem 1rem 1.15rem; 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%; }
.vl-event__band::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 80%, transparent), color-mix(in srgb, var(--inv-deep) 90%, transparent));
}
.vl-event__no { font: 600 .66rem/1.4 var(--vl-body); letter-spacing: .3em; text-transform: uppercase; opacity: .9; }
.vl-event__name { font: 400 2.5rem/1.15 var(--vl-script); text-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.vl-event__body { padding: 1.2rem 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-deep); }
.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.16rem/1.3 var(--vl-serif); color: var(--inv-deep); }
.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-highlight) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-highlight) 30%, 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 (L): compact zig-zag on a stitched 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.2rem minmax(0, 1fr); column-gap: .7rem; align-items: start; }
.vl-moment > * { grid-row: 1; }
.vl-moment + .vl-moment { margin-top: 1.9rem; }
.vl-moment__dot { grid-column: 2; position: relative; z-index: 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; }
.vl-moment__dot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .3)); }
.vl-moment__dot b { position: relative; font: 700 .95rem/1 var(--vl-serif); color: color-mix(in srgb, var(--inv-seal) 35%, #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: .15rem; font: 700 1.18rem/1.25 var(--vl-serif); color: var(--inv-deep); 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: .86rem; 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(--inv-highlight); 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 color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 10px 18px -10px rgb(0 0 0 / .45);
}
.vl-bloom--moment { height: 90px; }

/* ---------- 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__card { position: relative; z-index: 1; padding: 1.8rem 1.3rem; }
.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: .5rem 0 .3rem; font: 400 2.4rem/1.2 var(--vl-script); color: var(--inv-deep); }
.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): linen-textured bank cards with a gold chip, two per row ---------- */
.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:
        repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgb(0 0 0 / .05) 0 1px, transparent 1px 3px),
        radial-gradient(circle at 108% -10%, rgb(255 255 255 / .22), transparent 45%),
        linear-gradient(135deg, var(--inv-primary) 0%, color-mix(in srgb, var(--inv-primary) 55%, var(--inv-deep)) 55%, var(--inv-deep) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 55%, transparent), 0 18px 30px -18px rgb(0 0 0 / .55);
}
/* the chip */
.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);
}
/* a translucent vellum corner, like a card slipped into a sleeve */
.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 / .18);
}
.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 color-mix(in srgb, var(--inv-paper) 70%, transparent);
}
.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: 400 2.1rem/1.2 var(--vl-script); color: var(--inv-deep); }
.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-highlight); color: #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 10px 20px -12px color-mix(in srgb, var(--inv-deep) 90%, transparent);
}
.inv-button--outline { background: var(--inv-paper); color: var(--inv-deep); box-shadow: inset 0 0 0 1.5px var(--inv-deep); }

/* ---------- RSVP & wishes (x-inv.rsvp, x-inv.wishes) ---------- */
.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) 65%, 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) 65%, transparent);
}
.vl-form .inv-form__choices label:has(input:checked) { background: color-mix(in srgb, var(--inv-accent) 18%, #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-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-background) 50%, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 35%, 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-deep); }
.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; opacity: .75; }
.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-deep); opacity: 1; }
.vl-wishes .inv-wishes__empty { text-align: center; }

/* ---------- closing ---------- */
.vl-closing { padding-bottom: 6.5rem; }
.vl-closing__arch { position: relative; width: min(56vw, 205px); margin: 0 auto 2.2rem; }
.vl-arch__frame--closing { aspect-ratio: 4 / 5; }
.vl-arch__frame--closing .vl-arch__empty { font-size: 3rem; }
.vl-closing__band { position: absolute; left: -14px; right: -14px; bottom: 12%; height: 24%; }
.vl-ribbon--closing { top: calc(76% - 7.5px); }
.vl-closing__kicker { font: 600 .72rem/1.4 var(--vl-body); letter-spacing: .34em; text-transform: uppercase; color: var(--inv-primary); }
.vl-closing__message { max-width: 22rem; margin: .7rem auto 0; color: var(--vl-soft); }
.vl-closing__sign { margin-top: 1.1rem; font: italic 600 1.1rem/1.4 var(--vl-serif); }
.vl-closing__names { margin-top: .3rem; font: 400 clamp(2.6rem, 12vw, 3.1rem)/1.2 var(--vl-script); color: var(--inv-deep); }

/* ---------- platform bits ---------- */
.vl-foot { padding: 1.2rem 1.2rem 0; }
.vl-foot .inv-checkin { position: relative; z-index: 1; background: var(--inv-paper); }
.vl-branding { position: relative; z-index: 1; color: var(--vl-soft); opacity: 1; }
.inv-music { right: max(1rem, calc(50vw - 230px + 1rem)); }
.inv-music__button { background: var(--inv-highlight); 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-deep); 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) 84%, transparent);
    --inv-nav-text: var(--inv-deep);
    --inv-nav-active: var(--inv-highlight);
    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) 55%, 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: #fff; }

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

/* ---------- fit: the whole cover (names, guest, button) on one phone screen; a proportionate page end ---------- */

.vl-cover__inner { justify-content: space-evenly; gap: .5rem; padding: 1.8rem 1.4rem 1.7rem; }
.vl-suite { width: min(68vw, 250px, 32svh); margin: .5rem 0 .7rem; }
.vl-cover__quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }

@media (max-height: 760px) {
    .vl-cover__inner { gap: .4rem; padding: 1.3rem 1.3rem 1.6rem; }
    .vl-suite { width: min(64vw, 230px, 30svh); margin: .4rem 0 .5rem; }
    .vl-cover__quote { -webkit-line-clamp: 6; font-size: .95rem; }
    .vl-cover__guest { padding: .8rem 1.1rem; }
    .vl-cover__guest-name { font-size: 1.2rem; }
}
@media (max-height: 660px) {
    .vl-cover__inner { gap: .3rem; padding: 1rem 1.2rem 1.6rem; }
    .vl-suite { width: min(60vw, 28svh); margin: .3rem 0 .4rem; }
    .vl-cover__names { font-size: clamp(1.9rem, 9vw, 2.3rem); }
    .vl-cover__date { font-size: .72rem; }
    .vl-cover__quote { font-size: .88rem; line-height: 1.4; }
    .vl-cover__guest { padding: .7rem 1rem; }
    .vl-cover__note { font-size: .72rem; }
    .vl-open.inv-button { margin-top: .2rem; padding: .75rem 1.6rem; }
}

/* page end: the names and the divider close the page just above the bottom menu */
.vl-closing { padding-bottom: 1.4rem; }