/*
 * Template "Tropical Beach" (Pernikahan): a tropical island wedding at an elegant beach resort.
 * Deep ocean / lagoon teal + a coral sunset accent + warm sand and ivory. Real public-domain / CC0 botanicals (img/):
 * monstera, banana crown, areca palm, frangipani, bird-of-paradise, gathered into framing sprays (.tb-spray) that
 * sway gently. Deep teal sections with wavy shore edges alternate with sand / ivory ones; fine wave lines; sand grain.
 * Colors from the variant: --inv-primary, --inv-accent, --inv-background, --inv-text, --inv-deep, --inv-sea,
 * --inv-sand, --inv-leaf. Fonts: the client's pair (--inv-font-display script names, --inv-font-heading serif titles)
 * + Jost. All classes start with "tb-".
 */

:root {
    --inv-primary: #0b6f7c;
    --inv-accent: #e5603f;
    --inv-background: #f8f0e2;
    --inv-text: #12303a;
    --inv-deep: #05323d;
    --inv-sea: #3fb7b4;
    --inv-sand: #ecd9b6;
    --inv-leaf: #2f7a58;
    --inv-radius: 18px;

    --tb-serif: var(--inv-font-heading, "Cormorant Garamond", Georgia, serif);
    --tb-script: var(--inv-font-display, "Great Vibes", cursive);
    --tb-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tb-col: 100%;

    --tb-night: color-mix(in srgb, var(--inv-deep) 80%, #000);
    --tb-ivory: #fffaf1;
    --tb-foam: #fdf7ec;
    --tb-foam-soft: rgb(253 247 236 / .9);
    --tb-coral: var(--inv-accent);
    --tb-coral-soft: color-mix(in srgb, var(--inv-accent) 70%, #ffd9a8);
    --tb-muted: color-mix(in srgb, var(--inv-text) 86%, var(--inv-background));
    /* deep ocean: night at the top, the deep teal, lagoon light low */
    --tb-ocean: linear-gradient(180deg,
        var(--tb-night) 0%,
        var(--inv-deep) 30%,
        color-mix(in srgb, var(--inv-primary) 82%, var(--inv-deep)) 75%,
        color-mix(in srgb, var(--inv-primary) 80%, var(--inv-sea)) 100%);
    --tb-sun-grad: linear-gradient(135deg, var(--tb-coral-soft), var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 80%, #6b1d1d));
    --tb-shadow: 0 26px 50px -30px color-mix(in srgb, var(--inv-deep) 85%, transparent);
    --tb-shadow-sm: 0 14px 28px -18px color-mix(in srgb, var(--inv-deep) 75%, transparent);
    /* fine sand grain (SVG noise) */
    --tb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .42 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    /* the shore: a wavy edge (masks of the deep sections) */
    --tb-wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 15C100 3 200 3 300 13S500 27 600 17 800 3 900 11 1100 25 1200 15V30H0Z'/%3E%3C/svg%3E");
    --tb-wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 15C120 27 230 27 330 17S520 3 640 13 860 27 960 19 1120 5 1200 15V0H0Z'/%3E%3C/svg%3E");
    --tb-edge: 28px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.tb-body {
    margin: 0;
    min-height: 100vh;
    background: var(--inv-background);
    color: var(--inv-text);
    font: 400 1rem/1.7 var(--tb-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; }
p { margin: 0; }

/* ---------- page column and wide-screen lagoon ---------- */
.tb-backdrop { display: none; }

.tb-page {
    position: relative;
    max-width: var(--tb-col);
    margin: 0 auto;
    background: var(--inv-background);
    overflow: hidden;
}

@media (min-width: 560px) {
    :root { --tb-col: 440px; }
    .tb-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        background: radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, var(--inv-accent) 40%, transparent), transparent 70%), var(--tb-ocean);
    }
    .tb-backdrop__spray { --tb-w: min(30vw, 380px); bottom: -2%; }
    .tb-backdrop__spray--l { left: 2vw; }
    .tb-backdrop__spray--r { right: 2vw; }
    .tb-page { z-index: 1; box-shadow: 0 30px 90px -30px rgb(0 0 0 / .7); }
    .inv-music { right: calc(50% - var(--tb-col) / 2 + 1rem); }
    .inv-qr-tab { right: calc(50% - var(--tb-col) / 2); }
    .inv-to-top { left: calc(50% - var(--tb-col) / 2 + 1rem); }
}

.tb-preview {
    position: fixed; inset: 0 0 auto; z-index: 60;
    padding: .35rem .75rem; text-align: center;
    font: 500 .72rem/1.3 var(--tb-sans); letter-spacing: .03em;
    color: var(--tb-foam); background: color-mix(in srgb, var(--inv-deep) 94%, transparent);
}

/* ---------- tropical sprays (real cut-outs) ---------- */
.tb-spray {
    position: absolute;
    z-index: 2;
    width: var(--tb-w, 220px);
    aspect-ratio: 1;
    pointer-events: none;
}
.tb-spray img { position: absolute; display: block; height: auto; max-width: none; filter: drop-shadow(0 10px 12px rgb(0 0 0 / .28)); }
.tb-spray--flip { scale: -1 1; }

/* crown: hangs from the top-left corner (stems hidden beyond the corner) */
.tb-spray img { transform-origin: 50% 50%; }
.tb-spray__banana { width: 110%; left: -30%; top: -24%; rotate: 135deg; filter: saturate(1.3) brightness(.95) drop-shadow(0 10px 12px rgb(0 0 0 / .25)); }
.tb-spray--crown .tb-spray__strelitzia { width: 50%; left: -20%; top: 40%; scale: -1 1; rotate: -18deg; }
.tb-spray--crown .tb-spray__monstera { width: 80%; left: -12%; top: 0; rotate: 97deg; }
.tb-spray__plumeria { width: 60%; left: 30%; top: -6%; rotate: 150deg; }

/* rise: grows from the bottom-left corner */
.tb-spray--rise { aspect-ratio: .8; }
.tb-spray__areca { width: 66%; left: -10%; bottom: 0; rotate: -14deg; transform-origin: 50% 100%; }
.tb-spray--rise .tb-spray__monstera { width: 62%; left: -20%; bottom: 2%; rotate: -24deg; transform-origin: 0 100%; }
.tb-spray__strelitzia { width: 64%; left: 30%; bottom: 26%; rotate: 6deg; transform-origin: 90% 100%; }
.tb-spray__bloom { width: 56%; left: 26%; bottom: -6%; transform-origin: 50% 50%; }

/* sprig: one monstera with a frangipani cluster, from the bottom-left */
.tb-spray--sprig .tb-spray__monstera { width: 84%; left: -6%; bottom: 0; rotate: -28deg; transform-origin: 0 100%; }
.tb-spray--sprig .tb-spray__bloom { width: 62%; left: 40%; bottom: -10%; }

/* gentle sway (each layer its own rhythm) */
html.inv-anim .tb-spray__banana { animation: tb-sway-sm 9s -2s ease-in-out infinite alternate; }
html.inv-anim .tb-spray__monstera { animation: tb-sway 6.5s ease-in-out infinite alternate; }
html.inv-anim .tb-spray__areca { animation: tb-sway-sm 7.5s -3s ease-in-out infinite alternate; }
html.inv-anim .tb-spray__strelitzia { animation: tb-sway 5.8s -1s ease-in-out infinite alternate; }
html.inv-anim .tb-spray__plumeria, html.inv-anim .tb-spray__bloom { animation: tb-sway-sm 6s -4s ease-in-out infinite alternate; }
@keyframes tb-sway { from { transform: rotate(-2deg); } to { transform: rotate(2.2deg); } }
@keyframes tb-sway-sm { from { transform: rotate(-1deg); } to { transform: rotate(1.2deg); } }

/* ---------- shared type ---------- */
.tb-label {
    font: 500 .7rem/1.4 var(--tb-sans);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--inv-primary);
}
.tb-label--sun { color: var(--tb-coral-soft); }
.tb-label--small { font-size: .64rem; letter-spacing: .26em; }

.tb-names {
    margin: 0;
    font: 400 clamp(2.9rem, 13.5vw, 3.6rem)/1.08 var(--tb-script);
    color: var(--inv-primary);
}
.tb-names__amp { color: var(--inv-accent); font-size: .62em; padding: 0 .08em; }

.tb-title {
    margin: .35rem 0 0;
    font: 500 clamp(2.05rem, 9.4vw, 2.55rem)/1.1 var(--tb-serif);
    color: var(--inv-deep);
}
.tb-title em { font-style: italic; color: color-mix(in srgb, var(--inv-accent) 80%, var(--inv-deep)); }

.tb-text { max-width: 27rem; margin: 0 auto; color: var(--tb-muted); }

/* the wave rule under each heading, a coral sun in the middle */
.tb-rule { position: relative; display: block; width: 8rem; height: 12px; margin: .9rem auto 0; }
.tb-rule svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--inv-primary); stroke-width: 1.4; stroke-linecap: round; }
.tb-rule i { position: absolute; left: 50%; top: 50%; width: .62rem; height: .62rem; margin: -.31rem 0 0 -.31rem; border-radius: 50%; background: var(--tb-sun-grad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-accent) 18%, transparent); }

.tb-head { position: relative; z-index: 3; margin: 0 auto 2.1rem; max-width: 24rem; }
.tb-head--dark .tb-label { color: var(--tb-coral-soft); }
.tb-head--dark .tb-title { color: var(--tb-foam); }
.tb-head--dark .tb-title em { color: var(--tb-coral-soft); }
.tb-head--dark .tb-rule svg { stroke: var(--inv-sea); }

/* fine wave lines */
.tb-waves { display: block; width: 100%; height: 40px; fill: none; stroke-linecap: round; transform-origin: 0 50%; }
.tb-waves path { stroke: color-mix(in srgb, var(--inv-sea) 85%, #fff); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.tb-waves__b { opacity: .7; }
.tb-waves__c { opacity: .45; }

/* monogram: initials on a deep lagoon disc in a coral ring */
.tb-mono {
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    width: 4rem; height: 4rem; margin: 0;
    border-radius: 50%;
    font: 500 1.2rem/1 var(--tb-serif); letter-spacing: .04em;
    color: var(--tb-foam);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 85%, #fff), var(--inv-deep) 70%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tb-coral-soft) 85%, transparent), 0 0 0 6px color-mix(in srgb, var(--inv-deep) 35%, transparent), 0 10px 24px -10px rgb(0 0 0 / .55);
}
.tb-mono__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--tb-coral-soft); }

/* ---------- sections ---------- */
.tb-section {
    position: relative;
    isolation: isolate;
    padding: 4.6rem 1.5rem;
    text-align: center;
    overflow: hidden;
}
.tb-section--light { background: var(--tb-grain), var(--inv-background); }
.tb-section--ivory { background: var(--tb-grain), linear-gradient(180deg, var(--tb-ivory), color-mix(in srgb, var(--tb-ivory) 60%, var(--inv-background))); }
.tb-section--sand { background: var(--tb-grain), linear-gradient(180deg, color-mix(in srgb, var(--inv-sand) 70%, var(--inv-background)), var(--inv-sand) 60%, color-mix(in srgb, var(--inv-sand) 75%, var(--inv-background))); }
/* deep ocean with wavy shore edges overlapping the neighbours */
.tb-section--dark {
    z-index: 1;
    margin: calc(var(--tb-edge) * -1) 0;
    padding-top: calc(4.6rem + var(--tb-edge));
    padding-bottom: calc(4.6rem + var(--tb-edge));
    color: var(--tb-foam);
    background: var(--tb-grain), var(--tb-ocean);
    -webkit-mask: var(--tb-wave-top) top / 100% var(--tb-edge) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--tb-edge) - 1px) / 100% calc(100% - var(--tb-edge) * 2 + 2px) no-repeat, var(--tb-wave-bottom) bottom / 100% var(--tb-edge) no-repeat;
    mask: var(--tb-wave-top) top / 100% var(--tb-edge) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--tb-edge) - 1px) / 100% calc(100% - var(--tb-edge) * 2 + 2px) no-repeat, var(--tb-wave-bottom) bottom / 100% var(--tb-edge) no-repeat;
}
.tb-section--dark .tb-text { color: var(--tb-foam-soft); }
.tb-section--lagoon { background: var(--tb-grain), radial-gradient(70% 40% at 80% 0%, color-mix(in srgb, var(--inv-sea) 40%, transparent), transparent 70%), linear-gradient(170deg, var(--inv-primary), var(--inv-deep) 70%); }

/* photo backgrounds: faint under the sand wash, or deep under the ocean (a gradient without a photo) */
.tb-bg { position: absolute; inset: -40px 0; z-index: -1; pointer-events: none; }
.tb-bg--faint {
    inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 66%, transparent) 0%, color-mix(in srgb, var(--inv-background) 82%, transparent) 45%, var(--inv-background) 92%),
        var(--tb-photo, radial-gradient(70% 45% at 50% 0%, color-mix(in srgb, var(--inv-sea) 40%, transparent), transparent 70%)) center 30% / cover no-repeat,
        var(--inv-background);
}
.tb-bg--faint::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 70%); }
.tb-bg--deep {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 92%, transparent) 0%, color-mix(in srgb, var(--inv-primary) 82%, transparent) 50%, color-mix(in srgb, var(--inv-deep) 94%, transparent) 100%),
        var(--tb-photo, var(--tb-ocean)) center / cover no-repeat,
        var(--inv-deep);
}
.tb-sun {
    position: absolute; z-index: -1; left: 50%; width: 120%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 50%, transparent) 0%, color-mix(in srgb, var(--inv-accent) 18%, transparent) 40%, transparent 66%);
}

/* ---------- cover ---------- */
.tb-cover {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    background: var(--tb-night);
}
.tb-cover__panel {
    position: relative;
    width: 100%;
    max-width: var(--tb-col);
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
    color: var(--tb-foam);
    background: var(--inv-deep);
}
.tb-cover__photo {
    position: absolute; inset: 0; z-index: 0;
    background: var(--tb-photo) center 28% / cover no-repeat, var(--inv-deep);
}
.tb-cover__photo--empty {
    background:
        repeating-linear-gradient(180deg, transparent 0 11px, color-mix(in srgb, var(--tb-coral-soft) 22%, transparent) 11px 12px) 50% 52% / 70% 14% no-repeat,
        radial-gradient(9% 4.5% at 50% 46%, color-mix(in srgb, #fff 55%, var(--tb-coral-soft)), transparent 100%),
        radial-gradient(45% 22% at 50% 46%, color-mix(in srgb, var(--inv-accent) 85%, #ffd28a), transparent 72%),
        linear-gradient(180deg, var(--tb-night) 0%, var(--inv-deep) 18%, color-mix(in srgb, var(--inv-accent) 55%, var(--inv-primary)) 44%, var(--inv-primary) 50%, var(--inv-deep) 78%);
}
.tb-cover__shade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(70% 22% at 50% 44%, color-mix(in srgb, var(--inv-accent) 34%, transparent), transparent 75%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--inv-deep) 70%, transparent) 0%,
            transparent 20%,
            transparent 34%,
            color-mix(in srgb, var(--inv-accent) 16%, transparent) 42%,
            color-mix(in srgb, var(--inv-deep) 72%, transparent) 54%,
            color-mix(in srgb, var(--inv-deep) 94%, transparent) 66%,
            var(--tb-night) 100%);
}
.tb-cover__spray { z-index: 3; }
.tb-cover__spray--crown { --tb-w: min(50%, 210px); left: -6%; top: -2%; }
.tb-cover__spray--right { --tb-w: min(40%, 168px); right: -5%; top: -2%; }
.tb-cover__mono { position: absolute; z-index: 4; left: 50%; top: 1.4rem; translate: -50% 0; width: 3.2rem; height: 3.2rem; font-size: .95rem; }

.tb-cover__body {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem 2rem;
    text-align: center;
}
.tb-cover__waves { width: 7.5rem; height: 1rem; margin-bottom: .55rem; fill: none; stroke: var(--inv-sea); stroke-width: 1.5; stroke-linecap: round; }
.tb-names--cover { font-size: clamp(2.4rem, 11vw, 2.9rem); color: var(--tb-foam); margin-top: .15rem; text-shadow: 0 2px 22px rgb(0 0 0 / .45); }
.tb-names--cover .tb-names__amp { color: var(--tb-coral-soft); }
.tb-cover__date {
    display: flex; align-items: center; gap: .7rem;
    margin-top: .35rem;
    font: 500 .68rem/1.4 var(--tb-sans); letter-spacing: .22em; text-transform: uppercase;
}
.tb-cover__date i { width: 1.6rem; height: 1px; background: var(--tb-coral-soft); }
.tb-cover__quote {
    max-width: 21rem; margin: .45rem auto 0;
    font: italic 400 .84rem/1.42 var(--tb-serif);
    color: var(--tb-foam-soft);
}
.tb-guest {
    width: min(16.5rem, 100%);
    margin: .75rem auto .8rem;
    padding: .5rem 1rem .55rem;
    border-radius: 18px;
    background: linear-gradient(160deg, rgb(253 247 236 / .16), rgb(253 247 236 / .06));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--inv-sea) 55%, transparent);
}
.tb-guest__label { font: 500 .56rem/1.4 var(--tb-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--tb-coral-soft); }
.tb-guest__name { display: block; margin-top: .1rem; font: 500 .98rem/1.3 var(--tb-sans); color: var(--tb-foam); overflow-wrap: anywhere; }

.tb-open.inv-button {
    padding: .72rem 1.6rem; font-size: .88rem;
    background: var(--tb-sun-grad);
    color: #fff; font-weight: 600;
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .35);
}

/* the opening moment: the photo fades in with a slight zoom, the sprays unfold (≤ 2.3 s) */
html.inv-anim .tb-cover__photo { animation: tb-photo-in 1.8s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .tb-cover__spray--crown { animation: tb-unfold 1.6s .4s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 0 0; }
html.inv-anim .tb-cover__spray--right { animation: tb-unfold 1.6s .6s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 0; }
@keyframes tb-photo-in { from { opacity: 0; transform: scale(1.07); } }
@keyframes tb-unfold { from { opacity: 0; transform: rotate(-10deg) scale(.9); } }

.tb-cover--leave { transition: opacity .8s ease, transform .9s cubic-bezier(.65, 0, .35, 1); }
.tb-cover--gone { opacity: 0; transform: translateY(-5%); }

/* shorter phones: smaller names and sprays, tighter gaps (the quote is never cut) */
@media (max-height: 760px) {
    .tb-cover__spray--crown { --tb-w: min(46%, 190px); }
    .tb-cover__spray--right { --tb-w: min(36%, 150px); }
    .tb-names--cover { font-size: clamp(2.2rem, 10vw, 2.6rem); }
    .tb-cover__quote { font-size: .78rem; line-height: 1.38; margin-top: .4rem; }
    .tb-guest { margin: .6rem auto .65rem; padding: .45rem 1rem .5rem; }
    .tb-cover__body { padding-bottom: 1.7rem; }
}
@media (max-height: 660px) {
    .tb-cover__body { padding-bottom: 1.6rem; }
    .tb-names--cover { font-size: 2.1rem; }
    .tb-cover__waves { margin-bottom: .3rem; }
    .tb-cover__spray--crown { --tb-w: min(42%, 160px); }
    .tb-cover__spray--right { --tb-w: min(32%, 124px); }
    .tb-cover__date { margin-top: .35rem; }
    .tb-cover__quote { font-size: .74rem; line-height: 1.34; }
    .tb-guest { margin: .5rem auto .55rem; }
    .tb-open.inv-button { padding: .62rem 1.4rem; }
}
@media (max-height: 580px) {
    .tb-names--cover { font-size: 1.95rem; }
    .tb-cover__quote { font-size: .72rem; }
    .tb-cover__mono { width: 3rem; height: 3rem; font-size: .9rem; }
}

/* ---------- opening ---------- */
.tb-opening { padding-top: 5.2rem; }
.tb-opening__crown { --tb-w: 150px; right: -26px; top: -14px; }
.tb-opening__intro { position: relative; z-index: 3; }
.tb-arabic { font: 400 1.65rem/1.8 "Amiri", serif; color: var(--inv-primary); }
.tb-opening__greeting { margin: .7rem 0 1rem; font: 500 1.35rem/1.4 var(--tb-serif); color: var(--inv-deep); }
.tb-opening .tb-text { color: var(--inv-text); }
.tb-quote {
    position: relative; z-index: 3;
    max-width: 22rem;
    margin: 2.6rem auto 0;
    padding: 3rem 1.6rem 2.2rem;
    border-radius: 32px 32px 32px 110px;
    color: var(--tb-foam);
    background: var(--tb-grain), radial-gradient(70% 45% at 85% 0%, color-mix(in srgb, var(--inv-sea) 45%, transparent), transparent 75%), linear-gradient(170deg, var(--inv-primary), var(--inv-deep));
    box-shadow: var(--tb-shadow);
}
.tb-quote::before { content: ""; position: absolute; inset: 8px; border-radius: 26px 26px 26px 102px; border: 1px solid color-mix(in srgb, var(--inv-sea) 45%, transparent); pointer-events: none; }
.tb-quote__waves { position: absolute; left: 12%; right: 12%; top: .7rem; width: 76%; height: 26px; opacity: .8; }
.tb-quote__mark { display: block; height: 2rem; font: 400 4rem/1 var(--tb-serif); color: var(--tb-coral-soft); }
.tb-quote blockquote { margin: .4rem 0 0; font: italic 400 1.08rem/1.6 var(--tb-serif); }
.tb-quote figcaption { margin-top: 1rem; font: 500 .68rem/1.4 var(--tb-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--tb-coral-soft); }
.tb-quote__sprig { --tb-w: 120px; left: -2.4rem; bottom: -2.6rem; }

/* ---------- couple ---------- */
.tb-person { position: relative; display: grid; justify-items: start; gap: 1.2rem; text-align: left; }
.tb-person--bride { justify-items: end; text-align: right; }
.tb-person__frame { position: relative; width: min(66%, 15.5rem); aspect-ratio: .78; margin-left: 4%; }
.tb-person--bride .tb-person__frame { margin: 0 4% 0 0; }
.tb-person__back {
    position: absolute; inset: 0; translate: 16px 14px; overflow: hidden;
    border-radius: 120px 28px 120px 28px;
    background: var(--tb-grain), linear-gradient(160deg, var(--inv-sea), var(--inv-primary) 60%, var(--inv-deep));
}
.tb-person--bride .tb-person__back { translate: -16px 14px; border-radius: 28px 120px 28px 120px; background: var(--tb-grain), linear-gradient(200deg, var(--tb-coral-soft), var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 70%, #000)); }
.tb-person__waves { position: absolute; left: 0; bottom: 12%; height: 30px; opacity: .8; }
.tb-person--bride .tb-person__waves path { stroke: rgb(255 255 255 / .8); }
.tb-person__img {
    position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover;
    border-radius: 120px 28px 120px 28px; border: 4px solid var(--tb-ivory); box-shadow: var(--tb-shadow);
}
.tb-person--bride .tb-person__img { border-radius: 28px 120px 28px 120px; }
.tb-person__empty { display: grid; place-items: center; font: 400 4rem/1 var(--tb-script); color: var(--tb-foam); background: var(--tb-ocean); }
.tb-person__sprig { --tb-w: 58%; z-index: 3; right: -34%; bottom: -14%; }
.tb-person--bride .tb-person__sprig { right: auto; left: -34%; }
.tb-person__text { display: grid; justify-items: inherit; gap: .15rem; padding: 0 .3rem; max-width: 20rem; }
.tb-person__nick { margin: .1rem 0 0; font: 400 clamp(2.7rem, 12.5vw, 3.2rem)/1.15 var(--tb-script); color: var(--inv-primary); }
.tb-person__name { font: 500 1.2rem/1.35 var(--tb-serif); color: var(--inv-deep); }
.tb-person__parents { margin-top: .45rem; font-size: .92rem; line-height: 1.55; color: var(--tb-muted); }
.tb-person__parents strong { font-weight: 500; color: var(--inv-text); }
.tb-ig.inv-button { margin-top: .7rem; padding: .45rem 1rem; font-size: .82rem; color: var(--inv-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 55%, transparent); }
.tb-couple__amp { position: relative; margin: 2.4rem 0 2.2rem; }
.tb-couple__amp span {
    display: inline-grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%;
    font: 400 2.6rem/1 var(--tb-script); color: #fff;
    background: var(--tb-sun-grad);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--inv-accent) 18%, transparent), var(--tb-shadow-sm);
}
.tb-couple__amp::before, .tb-couple__amp::after { content: ""; position: absolute; top: 50%; width: calc(50% - 3.6rem); height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-primary) 60%, transparent)); }
.tb-couple__amp::before { left: 0; }
.tb-couple__amp::after { right: 0; transform: scaleX(-1); }

/* ---------- countdown ---------- */
.tb-countdown__sun { bottom: -42%; }
.tb-countdown { padding-top: calc(6rem + var(--tb-edge)); }
.tb-countdown__crown { --tb-w: 150px; left: 0; top: calc(var(--tb-edge) - 6px); }
.tb-countdown__crown--r { --tb-w: 124px; left: auto; right: 0; }
.tb-date { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: .9rem; margin: -.4rem 0 1.6rem; }
.tb-date__day { font: 500 4.9rem/1 var(--tb-serif); color: var(--tb-coral-soft); text-shadow: 0 6px 24px rgb(0 0 0 / .3); }
.tb-date__rest { display: grid; text-align: left; padding-left: .9rem; border-left: 1px solid color-mix(in srgb, var(--inv-sea) 70%, transparent); }
.tb-date__rest b { font: 500 1.65rem/1.15 var(--tb-serif); color: var(--tb-foam); }
.tb-date__rest small { font: 500 .66rem/1.6 var(--tb-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tb-foam-soft); }
.tb-countdown .inv-countdown { position: relative; z-index: 3; gap: .55rem; }
.tb-countdown .inv-countdown__item {
    min-width: 0; width: 4.3rem; padding: .9rem .3rem .65rem;
    border-radius: 20px 20px 20px 6px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-sea) 30%, transparent), rgb(253 247 236 / .06));
    border: 1px solid color-mix(in srgb, var(--inv-sea) 60%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tb-countdown .inv-countdown__value { font: 500 1.9rem/1.1 var(--tb-serif); color: var(--tb-foam); }
.tb-countdown .inv-countdown__label { margin-top: .2rem; font: 500 .6rem/1.3 var(--tb-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tb-coral-soft); opacity: 1; }
.tb-countdown .inv-countdown__actions { position: relative; z-index: 3; margin-top: 1.5rem; flex-direction: column; align-items: center; }
.tb-countdown .inv-countdown__actions .inv-button--outline { padding: .55rem 1.2rem; font-size: .8rem; color: var(--tb-foam); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tb-foam) 55%, transparent); background: rgb(0 0 0 / .14); }
.tb-countdown__waves { position: relative; z-index: 2; width: 80%; margin: 2rem auto 0; height: 30px; }

/* ---------- events ---------- */
.tb-events, .tb-gift { padding-top: 6.6rem; }
.tb-events__spray { --tb-w: 140px; right: 0; top: calc(var(--tb-edge) - 2px); z-index: 1; }
.tb-events__list { position: relative; z-index: 3; display: grid; gap: 1.8rem; max-width: 23rem; margin: 0 auto; }
.tb-event {
    position: relative;
    border-radius: 28px;
    background: var(--tb-ivory);
    box-shadow: var(--tb-shadow), 0 0 0 1px color-mix(in srgb, var(--inv-primary) 12%, transparent);
    text-align: left;
}
.tb-event__photo {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    aspect-ratio: 1 / .78;
    padding: 1.2rem 1.2rem 2rem;
    border-radius: 28px 28px 0 0;
    color: var(--tb-foam); text-align: center;
    background:
        linear-gradient(180deg, transparent 32%, color-mix(in srgb, var(--inv-deep) 84%, transparent) 90%),
        var(--tb-photo, radial-gradient(50% 40% at 50% 62%, var(--inv-accent), transparent 72%)) center 35% / cover no-repeat,
        var(--tb-ocean);
}
/* the wavy foot of the photo in the card color */
.tb-event__photo::after { content: ""; position: absolute; inset: auto 0 -1px; height: 22px; background: var(--tb-ivory); -webkit-mask: var(--tb-wave-top) center / 100% 100% no-repeat; mask: var(--tb-wave-top) center / 100% 100% no-repeat; }
.tb-event__sprig { --tb-w: 100px; right: -1.8rem; top: -1.6rem; scale: 1 -1; }
.tb-event__sprig.tb-spray--flip { right: auto; left: -1.8rem; scale: -1 -1; }
.tb-event__tab { position: relative; z-index: 3; padding: .2rem .8rem; border-radius: 999px; font: 500 .62rem/1.6 var(--tb-sans); letter-spacing: .24em; text-transform: uppercase; color: #fff; background: var(--inv-accent); }
.tb-event--alt .tb-event__tab { background: var(--inv-primary); }
.tb-event__name { position: relative; z-index: 3; margin: .5rem 0 0; font: 500 1.95rem/1.15 var(--tb-serif); color: var(--tb-foam); text-shadow: 0 2px 12px rgb(0 0 0 / .35); }
.tb-event__body { padding: 1rem 1.4rem 1.5rem; }
.tb-event__time { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .7rem; padding-bottom: .8rem; margin-bottom: .9rem; border-bottom: 1px dashed color-mix(in srgb, var(--inv-primary) 35%, transparent); }
.tb-event__clock { font: 500 2.5rem/1 var(--tb-serif); color: var(--inv-primary); }
.tb-event--alt .tb-event__clock { color: color-mix(in srgb, var(--inv-accent) 80%, #000); }
.tb-event__time small { display: inline-flex; align-items: center; gap: .3rem; font: 500 .74rem/1.4 var(--tb-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tb-muted); }
.tb-event__time svg, .tb-event__list svg { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: var(--inv-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tb-event__list { display: grid; gap: .65rem; margin: 0 0 1.1rem; padding: 0; list-style: none; font-size: .93rem; line-height: 1.5; color: var(--inv-text); }
.tb-event__list li { display: flex; gap: .6rem; }
.tb-event__list li svg { margin-top: .2rem; }
.tb-event__venue { display: block; font-weight: 600; color: var(--inv-deep); }
.tb-event__address { display: block; color: var(--tb-muted); }
.tb-event .inv-button { width: 100%; padding: .7rem 1rem; font-size: .88rem; font-weight: 500; background: var(--inv-primary); color: var(--tb-foam); }
.tb-event--alt .inv-button { background: color-mix(in srgb, var(--inv-accent) 88%, #000); }
.tb-event .inv-maps__frame { margin-top: .75rem; }

/* ---------- love story ---------- */
.tb-story__spray { --tb-w: 170px; left: -56px; bottom: calc(var(--tb-edge) - 30px); z-index: 0; opacity: .92; }
.tb-zz { position: relative; z-index: 2; display: grid; gap: 2rem; max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; }
.tb-zz::before { content: ""; position: absolute; left: calc(50% - 4px); top: .5rem; bottom: .5rem; width: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24'%3E%3Cpath d='M4 0c4 4 4 8 0 12s-4 8 0 12' fill='none' stroke='%2384d8d4' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 8px 24px repeat-y; opacity: .75; }
.tb-zz__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.4rem minmax(0, 1fr); align-items: start; gap: .7rem; }
.tb-zz__main { grid-column: 1; text-align: right; }
.tb-zz__node { grid-column: 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font: 500 1rem/1 var(--tb-serif); color: #fff; background: var(--tb-sun-grad); box-shadow: 0 0 0 5px color-mix(in srgb, var(--inv-accent) 24%, transparent); }
.tb-zz__side { grid-column: 3; display: grid; justify-items: start; gap: .5rem; }
.tb-zz__item--flip .tb-zz__main { grid-column: 3; grid-row: 1; text-align: left; }
.tb-zz__item--flip .tb-zz__side { grid-column: 1; grid-row: 1; justify-items: end; }
.tb-zz__item--flip .tb-zz__node { grid-row: 1; }
.tb-moment__title { margin: 0; font: 500 1.3rem/1.25 var(--tb-serif); color: var(--tb-foam); }
.tb-zz__rule { display: block; width: 2.2rem; height: 1px; margin: .5rem 0 .55rem auto; background: var(--tb-coral-soft); }
.tb-zz__item--flip .tb-zz__rule { margin-left: 0; }
.tb-moment__story { font-size: .9rem; line-height: 1.6; color: var(--tb-foam-soft); }
.tb-moment__date { font: 400 1.7rem/1.1 var(--tb-script); color: var(--tb-coral-soft); }
.tb-zz__photo { margin: 0; width: 6rem; aspect-ratio: .8; }
.tb-zz__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 48px 14px 48px 14px; border: 3px solid color-mix(in srgb, var(--tb-foam) 85%, transparent); box-shadow: 0 14px 24px -14px rgb(0 0 0 / .6); }
.tb-zz__emblem { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--inv-sea) 60%, transparent); }
.tb-zz__emblem svg { width: 1.6rem; height: 1.6rem; fill: var(--tb-foam); }

/* ---------- gallery ---------- */
.tb-gallery__frame { position: relative; max-width: 24rem; margin: 0 auto; }
.tb-gallery__sprig { --tb-w: 130px; left: -2.6rem; top: -3.6rem; z-index: 3; scale: 1 -1; }
.tb-album.inv-gallery { position: relative; z-index: 2; gap: .6rem; }
.tb-album .inv-gallery__item { border-radius: 22px; box-shadow: var(--tb-shadow-sm); }
.tb-album .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3.4; border-radius: 90px 28px 28px 28px; }
.tb-album .inv-gallery__item:nth-child(4n) { border-radius: 22px 22px 70px 22px; }

/* ---------- live streaming ---------- */
.tb-panel {
    position: relative; z-index: 3;
    max-width: 22rem; margin: 0 auto;
    padding: 1.8rem 1.4rem 1.7rem;
    border-radius: 28px 28px 28px 90px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-sea) 26%, transparent), rgb(253 247 236 / .06));
    border: 1px solid color-mix(in srgb, var(--inv-sea) 55%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tb-live__spray { --tb-w: 160px; right: -50px; bottom: calc(var(--tb-edge) - 34px); z-index: 1; }
.tb-live__badge { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .8rem; padding: .3rem .85rem; border-radius: 999px; font: 500 .66rem/1.4 var(--tb-sans); letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--tb-sun-grad); }
.tb-live__badge span { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / .3); }
.tb-live__note { margin-top: .8rem; font: italic 400 1.05rem/1.5 var(--tb-serif); color: var(--tb-foam); }
.tb-button--sun.inv-button { margin-top: 1.3rem; background: var(--tb-sun-grad); color: #fff; font-weight: 600; }

/* ---------- gift ---------- */
.tb-gift__crown { --tb-w: 140px; left: 0; top: calc(var(--tb-edge) - 2px); z-index: 1; }
.tb-gift .tb-text { position: relative; z-index: 3; margin-bottom: 1.8rem; }
.tb-gift .inv-gift { position: relative; z-index: 3; display: grid; gap: .9rem; max-width: 23rem; margin: 0 auto; text-align: left; }
.tb-gift .inv-gift__accounts { display: grid; gap: .9rem; }
.tb-gift .inv-gift__account { margin: 0; }
.tb-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.tb-gift .inv-gift__account:not(.inv-gift__address) {
    position: relative; overflow: hidden;
    display: grid; gap: .25rem;
    padding: 1.2rem 1.3rem 1.25rem;
    border-radius: 24px 24px 24px 8px;
    color: var(--tb-foam);
    background: var(--tb-grain), radial-gradient(50% 70% at 100% 0%, color-mix(in srgb, var(--inv-sea) 55%, transparent), transparent 70%), linear-gradient(150deg, var(--inv-primary), var(--inv-deep));
    box-shadow: var(--tb-shadow);
}
.tb-gift .inv-gift__account:not(.inv-gift__address)::after { content: ""; position: absolute; right: -10%; bottom: 10px; width: 70%; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'%3E%3Cpath d='M0 6c17-6 33-6 50 0s33 6 50 0 33-6 50 0 33 6 50 0M0 16c17-6 33-6 50 0s33 6 50 0 33-6 50 0 33 6 50 0' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
.tb-gift .inv-gift__account:not(.inv-gift__address):nth-child(even) { background: var(--tb-grain), radial-gradient(50% 70% at 100% 0%, color-mix(in srgb, var(--tb-coral-soft) 60%, transparent), transparent 70%), linear-gradient(150deg, color-mix(in srgb, var(--inv-accent) 82%, #000), color-mix(in srgb, var(--inv-accent) 55%, var(--inv-deep))); }
.tb-gift .inv-gift__bank { margin: 0; font: 500 .74rem/1.3 var(--tb-sans); letter-spacing: .14em; text-transform: uppercase; }
.tb-gift .inv-gift__logo { height: 1.9rem; }
.tb-gift .inv-gift__number { margin: .35rem 0 0; font: 500 1.5rem/1.2 var(--tb-serif); letter-spacing: .06em; overflow-wrap: anywhere; }
.tb-gift .inv-gift__holder { margin: 0 0 .7rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-foam-soft); overflow-wrap: anywhere; }
.tb-gift .inv-gift__account:not(.inv-gift__address) .inv-button--outline { position: relative; z-index: 1; justify-self: start; padding: .45rem 1rem; font-size: .8rem; color: var(--tb-foam); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tb-foam) 60%, transparent); background: rgb(0 0 0 / .14); }
/* the accounts two per row (an odd last one across), the address on its own below */
.tb-gift .inv-gift { max-width: 25rem; }
.tb-gift .inv-gift__accounts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.tb-gift .inv-gift__accounts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.tb-gift .inv-gift__account:not(.inv-gift__address) { align-content: start; gap: .2rem; min-height: 9.4rem; padding: .9rem .95rem 1rem; border-radius: 18px 18px 18px 6px; }
.tb-gift .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; order: 1; display: block; width: 1.9rem; height: 1.35rem; margin: .3rem 0 .1rem; border-radius: 5px;
    background:
        linear-gradient(90deg, transparent 32%, rgb(0 0 0 / .2) 32% 35%, transparent 35% 65%, rgb(0 0 0 / .2) 65% 68%, transparent 68%),
        linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .18) 45% 52%, transparent 52%),
        linear-gradient(135deg, #f6deae, #d9a95e 55%, #f1d29a);
}
.tb-gift .inv-gift__account:not(.inv-gift__address) > * { order: 2; }
.tb-gift .inv-gift__account:not(.inv-gift__address) > .inv-gift__bank { order: 0; }
.tb-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__bank { font-size: .66rem; }
.tb-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__logo { height: 1.6rem; }
.tb-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__number { margin-top: .2rem; font-size: 1.1rem; letter-spacing: .04em; }
.tb-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__holder { margin: 0 0 .5rem; font-size: .6rem; letter-spacing: .12em; }
.tb-gift .inv-gift__account:not(.inv-gift__address) .inv-button--outline { padding: .36rem .8rem; font-size: .68rem; }
.tb-gift .inv-gift__accounts > :last-child:nth-child(odd) .inv-gift__number { font-size: 1.28rem; }
.tb-gift .inv-gift__account:not(.inv-gift__address)::after { width: 60%; height: 16px; bottom: 8px; }
@media (max-width: 340px) { .tb-gift .inv-gift__accounts { grid-template-columns: minmax(0, 1fr); } }
.tb-gift .inv-gift__address {
    display: grid; gap: .3rem;
    padding: 1.2rem 1.3rem;
    border-radius: 24px;
    background: var(--tb-ivory);
    box-shadow: var(--tb-shadow-sm), 0 0 0 1px color-mix(in srgb, var(--inv-primary) 18%, transparent);
}
.tb-gift .inv-gift__address .inv-gift__bank { color: var(--inv-primary); letter-spacing: .24em; }
.tb-gift .inv-gift__address .inv-gift__holder { margin: 0; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--inv-text); }
.tb-gift .inv-gift__address .inv-button { justify-self: start; margin-top: .4rem; padding: .5rem 1rem; font-size: .82rem; color: var(--inv-primary); }

/* ---------- forms (rsvp, wishes) ---------- */
.tb-rsvp__crown { --tb-w: 140px; right: 0; top: calc(var(--tb-edge) - 6px); }
.tb-card {
    position: relative; z-index: 3;
    max-width: 23rem; margin: 1.6rem auto 0;
    padding: 1.5rem 1.3rem;
    border-radius: 26px;
    background: var(--tb-ivory);
    color: var(--inv-text);
    box-shadow: var(--tb-shadow), 0 0 0 1px color-mix(in srgb, var(--inv-primary) 14%, transparent);
    text-align: left;
}
.tb-card .inv-form label, .tb-card .inv-form__choices legend { font: 500 .82rem/1.4 var(--tb-sans); color: var(--inv-text); }
.tb-card .inv-form input:not([type=radio]):not([type=checkbox]), .tb-card .inv-form select, .tb-card .inv-form textarea {
    border-radius: 12px; border-color: color-mix(in srgb, var(--inv-primary) 30%, transparent); background: #fff; color: var(--inv-text);
}
.tb-card .inv-form .inv-button:not(.inv-button--outline) { background: var(--inv-primary); color: var(--tb-foam); font-weight: 500; }
.tb-card .inv-button--outline { color: var(--inv-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 55%, transparent); }
.tb-wishes .inv-wish { background: #fff; border-left: 3px solid var(--inv-sea); border-radius: 6px 16px 16px 6px; box-shadow: 0 6px 14px -12px rgb(0 0 0 / .4); }
.tb-wishes .inv-wish__name { color: var(--inv-deep); }
.tb-wishes .inv-wishes__page-button { color: var(--inv-primary); border-color: color-mix(in srgb, var(--inv-primary) 45%, transparent); }

/* ---------- closing ---------- */
.tb-closing {
    --tb-close: color-mix(in srgb, var(--inv-deep) 88%, var(--inv-primary));
    margin-bottom: 0;
    padding: 0 0 2rem;
    background: var(--tb-grain), linear-gradient(180deg, var(--tb-close) 55%, var(--tb-night));
    -webkit-mask: var(--tb-wave-top) top / 100% var(--tb-edge) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--tb-edge) - 1px) / 100% 100% no-repeat;
    mask: var(--tb-wave-top) top / 100% var(--tb-edge) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--tb-edge) - 1px) / 100% 100% no-repeat;
}
.tb-closing__photo { position: absolute; inset: 0 0 auto; z-index: 0; height: min(118vw, 490px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 99%); mask-image: linear-gradient(180deg, #000 55%, transparent 99%); }
.tb-closing__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.tb-closing__photo--empty { background: radial-gradient(55% 28% at 50% 50%, color-mix(in srgb, var(--inv-accent) 80%, #ffd28a), transparent 72%), linear-gradient(180deg, var(--inv-deep), color-mix(in srgb, var(--inv-accent) 50%, var(--inv-primary)) 48%, var(--tb-close)); }
.tb-closing__shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-deep) 35%, transparent) 0%,
        transparent 16%,
        color-mix(in srgb, var(--inv-accent) 14%, transparent) 34%,
        color-mix(in srgb, var(--tb-close) 70%, transparent) 56%,
        color-mix(in srgb, var(--tb-close) 94%, transparent) 74%,
        var(--tb-close) 100%);
}
.tb-closing__crown { --tb-w: 42%; left: -5%; top: 0; z-index: 1; }
.tb-closing__rise { --tb-w: 32%; right: -4%; top: 0; z-index: 1; }
.tb-closing__body { position: relative; z-index: 3; padding: calc(min(118vw, 490px) * .66) 1.6rem 0; text-shadow: 0 1px 14px color-mix(in srgb, var(--inv-deep) 70%, transparent); }
.tb-closing__title { margin-top: .3rem; color: var(--tb-foam); font-size: clamp(1.8rem, 8vw, 2.2rem); }
.tb-closing__title em { color: var(--tb-coral-soft); }
.tb-closing__waves { width: 7rem; height: 22px; margin: .5rem auto 0; }
.tb-closing__message { max-width: 22rem; margin: .6rem auto 0; font-size: .85rem; line-height: 1.55; color: var(--tb-foam-soft); }
.tb-closing__sign { margin-top: .8rem; font: 500 .62rem/1.4 var(--tb-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tb-coral-soft); }
.tb-names--closing { margin-top: .15rem; color: var(--tb-foam); font-size: clamp(2.1rem, 9.5vw, 2.5rem); }
.tb-closing__mono { width: 3rem; height: 3rem; margin: .8rem auto 0; font-size: .85rem; }

/* ---------- check-in QR tab, branding, bottom menu, music ---------- */
.inv-qr-tab {
    background: var(--inv-primary); color: var(--tb-foam); border-color: transparent;
    font-family: var(--tb-sans); font-weight: 500;
    box-shadow: -6px 8px 20px -10px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.tb-branding { position: relative; z-index: 3; margin: 0; padding: .4rem 1rem 7.4rem; font: 500 .74rem/1.4 var(--tb-sans); color: var(--tb-foam-soft); background: var(--tb-night); opacity: 1; }
.tb-branding a { color: var(--tb-coral-soft); }

body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--tb-ivory) 92%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-deep) 80%, var(--inv-text));
    --inv-nav-active: var(--inv-primary);
    font-family: var(--tb-sans);
    border-color: color-mix(in srgb, var(--inv-primary) 22%, transparent);
}
.inv-nav__item.is-active { color: var(--tb-foam); }
.inv-music__button { background: var(--inv-primary); color: var(--tb-foam); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--inv-deep) 60%, transparent); }
.inv-autoscroll { color: var(--inv-primary); border-color: color-mix(in srgb, var(--inv-primary) 40%, transparent); }
.inv-autoscroll--running { background: var(--inv-primary); color: var(--tb-foam); }
.inv-to-top { background: var(--tb-ivory); color: var(--inv-primary); }

@media (min-width: 400px) {
    .tb-section { padding-left: 1.8rem; padding-right: 1.8rem; }
    .tb-closing { padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tb-cover__photo, .tb-cover__spray, .tb-spray img { animation: none !important; }
}

/* ---------- intro scene "Senja di Laguna" (scene.json, sections/_scene): dusk over the lagoon ---------- */
.tb-scene-sky { position: absolute; inset: 0; background:
    radial-gradient(60% 16% at 50% 56%, color-mix(in srgb, var(--tb-coral-soft) 75%, transparent), transparent 75%),
    linear-gradient(180deg, var(--tb-night) 0%, var(--inv-deep) 24%, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-accent)) 44%, var(--tb-coral-soft) 56%); }
.tb-scene-sun { position: absolute; inset: 0; }
.tb-scene-sun i { position: absolute; left: 50%; bottom: 0; width: min(38vw, 10.5rem); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, #fff 60%, var(--tb-coral-soft)), var(--tb-coral-soft) 45%, var(--inv-accent));
    box-shadow: 0 0 40px 10px color-mix(in srgb, var(--inv-accent) 45%, transparent), 0 0 120px 50px color-mix(in srgb, var(--tb-coral-soft) 30%, transparent); }
.tb-scene-sea { position: absolute; inset: 0; overflow: hidden; background:
    radial-gradient(12% 70% at 50% 0%, color-mix(in srgb, var(--tb-coral-soft) 75%, transparent), transparent 80%),
    linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 45%, var(--inv-primary)) 0%, var(--inv-primary) 22%, var(--inv-deep) 85%); }
/* the sun path: short glittering streaks on the water */
.tb-scene-sea::before { content: ""; position: absolute; left: 30%; right: 30%; top: 0; bottom: 20%;
    background: repeating-linear-gradient(180deg, color-mix(in srgb, #fff 55%, var(--tb-coral-soft)) 0 2px, transparent 2px 11px);
    -webkit-mask: radial-gradient(50% 100% at 50% 0%, #000, transparent 90%); mask: radial-gradient(50% 100% at 50% 0%, #000, transparent 90%); opacity: .7; }
html.inv-anim .tb-scene-sea::before { animation: tb-scene-glint 1.6s ease-in-out infinite alternate; }
@keyframes tb-scene-glint { from { opacity: .45; translate: 0 0; } to { opacity: .85; translate: 0 3px; } }
.tb-scene-sea svg { position: absolute; left: -5%; width: 110%; top: 34%; height: 9%; fill: none; stroke: color-mix(in srgb, var(--inv-sea) 75%, #fff); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
.tb-scene-shore { position: absolute; inset: 0; background: var(--tb-grain), linear-gradient(180deg, color-mix(in srgb, var(--inv-sand) 85%, #fff), var(--inv-sand) 40%, color-mix(in srgb, var(--inv-sand) 80%, var(--inv-accent)));
    -webkit-mask: var(--tb-wave-top) top / 100% 22px no-repeat, linear-gradient(#000 0 0) 0 21px / 100% 100% no-repeat;
    mask: var(--tb-wave-top) top / 100% 22px no-repeat, linear-gradient(#000 0 0) 0 21px / 100% 100% no-repeat; }
.tb-scene-shore::before { content: ""; position: absolute; inset: 0 0 auto; height: 26px; background: linear-gradient(180deg, rgb(255 255 255 / .85), transparent); }
.inv-scene__layer img[src*="tropical-beach/img/"] { filter: drop-shadow(0 12px 14px rgb(0 0 0 / .35)); }
/* the card: a pane of deep sea glass with the shore's wavy edges */
body.tb-body .inv-intro--scene .inv-scene__card {
    aspect-ratio: 5 / 5.6; padding: 2.6rem 1.5rem; color: var(--tb-foam);
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 62%, transparent), color-mix(in srgb, var(--inv-deep) 82%, transparent));
    -webkit-mask: var(--tb-wave-top) top / 100% 26px no-repeat, linear-gradient(#000 0 0) 0 25px / 100% calc(100% - 50px) no-repeat, var(--tb-wave-bottom) bottom / 100% 26px no-repeat;
    mask: var(--tb-wave-top) top / 100% 26px no-repeat, linear-gradient(#000 0 0) 0 25px / 100% calc(100% - 50px) no-repeat, var(--tb-wave-bottom) bottom / 100% 26px no-repeat;
}
body.tb-body .inv-intro--scene .inv-scene__card::before { content: ""; position: absolute; inset: 34px 12px; z-index: -1; border-block: 1px solid color-mix(in srgb, var(--inv-sea) 60%, transparent); pointer-events: none; }
body.tb-body .inv-scene__card .inv-intro__label { font: 500 .66rem/1.4 var(--tb-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--tb-coral-soft); }
body.tb-body .inv-scene__card .inv-intro__names { color: var(--tb-foam); text-shadow: 0 2px 18px rgb(0 0 0 / .35); }
body.tb-body .inv-scene__card .inv-intro__rule { position: relative; width: 7.5rem; height: 12px; margin-inline: auto; overflow: visible; background: none; }
body.tb-body .inv-scene__card .inv-intro__rule::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--inv-sea) 70%, #fff);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 6c7-5 13-5 20 0s13 5 20 0M78 6c7-5 13-5 20 0s13 5 20 0' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 6c7-5 13-5 20 0s13 5 20 0M78 6c7-5 13-5 20 0s13 5 20 0' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
body.tb-body .inv-scene__card .inv-intro__rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: .62rem; height: .62rem; translate: -50% -50%; border-radius: 50%; background: var(--tb-sun-grad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-accent) 22%, transparent); }
body.tb-body .inv-scene__card .inv-intro__date { font: 500 .74rem/1.4 var(--tb-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tb-foam-soft); }