/*
 * Garden Tea Party (Ulang Tahun): a tea party in a garden. Sage and rose, white porcelain painted in the theme
 * color, lace doilies, gingham tablecloths and wildflowers.
 * Ornaments: inline SVG symbols in sections/_defs (rose, daisy, forget-me-not, leaf, sprig, cup, teapot, icons);
 * lace, gingham, scallops, tags and sachets are CSS.
 * Colors from the variant: --inv-primary (porcelain paint / sage), --inv-accent (rose), --inv-background (cream),
 * --inv-text, --inv-shade (deep leaf), --inv-blush, --inv-leaf, --inv-paper, --inv-petal (rose shadow).
 * All classes start with "garden-tea-party-".
 */

:root {
    --inv-primary: #56744f;
    --inv-accent: #e8a3b3;
    --inv-background: #fbf6ee;
    --inv-text: #33402f;
    --inv-shade: #3c5537;
    --inv-blush: #f8e1e6;
    --inv-leaf: #9db592;
    --inv-paper: #fffdf8;
    --inv-petal: #c8607c;
    --inv-radius: 14px;

    --gtp-w: 460px;
    /* distance from the viewport edge to the column (0 on phones) */
    --gtp-edge: max(0px, calc((100vw - var(--gtp-w)) / 2));

    --gtp-script: var(--inv-font-display, 'Parisienne', cursive);
    --gtp-head: 'Marcellus', var(--inv-font-heading, Georgia), serif;
    --gtp-body: 'Lora', Georgia, serif;

    /* the ornament symbols */
    --gtp-rose-1: color-mix(in srgb, var(--inv-accent) 55%, #fff);
    --gtp-rose-2: var(--inv-accent);
    --gtp-rose-3: var(--inv-petal);
    --gtp-daisy: #fff;
    --gtp-honey: #f0c46c;
    --gtp-tiny: color-mix(in srgb, var(--inv-primary) 25%, #b4c3ef);
    --gtp-leaf: var(--inv-leaf);
    --gtp-stem: color-mix(in srgb, var(--inv-leaf) 60%, var(--inv-shade));
    --gtp-porcelain: #fff;
    --gtp-paint: var(--inv-primary);
    --gtp-band: var(--inv-accent);
    --gtp-tea: #c8925e;
    --gtp-twine: #b89a72;

    --gtp-muted: color-mix(in srgb, var(--inv-text) 82%, var(--inv-background));
    --gtp-line: color-mix(in srgb, var(--inv-primary) 26%, transparent);
    --gtp-gingham:
        linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 13%, transparent) 50%, transparent 0) 0 0 / 22px 22px,
        linear-gradient(color-mix(in srgb, var(--inv-primary) 13%, transparent) 50%, transparent 0) 0 0 / 22px 22px;
    --gtp-lace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23fff'%3E%3Crect x='5' y='5' width='50' height='50'/%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3Ccircle cx='5' cy='55' r='5'/%3E%3Ccircle cx='15' cy='5' r='5'/%3E%3Ccircle cx='15' cy='55' r='5'/%3E%3Ccircle cx='25' cy='5' r='5'/%3E%3Ccircle cx='25' cy='55' r='5'/%3E%3Ccircle cx='35' cy='5' r='5'/%3E%3Ccircle cx='35' cy='55' r='5'/%3E%3Ccircle cx='45' cy='5' r='5'/%3E%3Ccircle cx='45' cy='55' r='5'/%3E%3Ccircle cx='55' cy='5' r='5'/%3E%3Ccircle cx='55' cy='55' r='5'/%3E%3Ccircle cx='5' cy='15' r='5'/%3E%3Ccircle cx='55' cy='15' r='5'/%3E%3Ccircle cx='5' cy='25' r='5'/%3E%3Ccircle cx='55' cy='25' r='5'/%3E%3Ccircle cx='5' cy='35' r='5'/%3E%3Ccircle cx='55' cy='35' r='5'/%3E%3Ccircle cx='5' cy='45' r='5'/%3E%3Ccircle cx='55' cy='45' r='5'/%3E%3C/g%3E%3Cg fill='%23ead9cf'%3E%3Ccircle cx='15' cy='11.5' r='1.6'/%3E%3Ccircle cx='15' cy='48.5' r='1.6'/%3E%3Ccircle cx='11.5' cy='15' r='1.6'/%3E%3Ccircle cx='48.5' cy='15' r='1.6'/%3E%3Ccircle cx='25' cy='11.5' r='1.6'/%3E%3Ccircle cx='25' cy='48.5' r='1.6'/%3E%3Ccircle cx='11.5' cy='25' r='1.6'/%3E%3Ccircle cx='48.5' cy='25' r='1.6'/%3E%3Ccircle cx='35' cy='11.5' r='1.6'/%3E%3Ccircle cx='35' cy='48.5' r='1.6'/%3E%3Ccircle cx='11.5' cy='35' r='1.6'/%3E%3Ccircle cx='48.5' cy='35' r='1.6'/%3E%3Ccircle cx='45' cy='11.5' r='1.6'/%3E%3Ccircle cx='45' cy='48.5' r='1.6'/%3E%3Ccircle cx='11.5' cy='45' r='1.6'/%3E%3Ccircle cx='48.5' cy='45' r='1.6'/%3E%3C/g%3E%3Crect x='16.5' y='16.5' width='27' height='27' fill='none' stroke='%23e3d3c6' stroke-dasharray='2 2.5'/%3E%3C/svg%3E");
    /* a teacup silhouette with steam, used as a mask (attendance cards) */
    --gtp-cup-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M5 15h33c0 10-7 18-16.5 18S5 25 5 15Z'/%3E%3Cpath d='M37.5 17c7-1.5 9.5 6 3 10-1.9 1.2-4.2 1.8-6.3 2' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3Cellipse cx='21.5' cy='36' rx='19' ry='3.6'/%3E%3Cpath d='M15 11c-2.4-2.6 2.4-4.2 0-7M22 11c-2.4-2.6 2.4-4.2 0-7M29 11c-2.4-2.6 2.4-4.2 0-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    /* a five-petal flower, used as a mask (wishes) */
    --gtp-flower-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg%3E%3Ccircle cx='10' cy='5' r='3.8'/%3E%3Ccircle cx='14.8' cy='8.5' r='3.8'/%3E%3Ccircle cx='13' cy='14.1' r='3.8'/%3E%3Ccircle cx='7' cy='14.1' r='3.8'/%3E%3Ccircle cx='5.2' cy='8.5' r='3.8'/%3E%3C/g%3E%3C/svg%3E");
    /* two leaves on the vine (story), used as a mask */
    --gtp-vine-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 56'%3E%3Cpath d='M15 10C8 4 2 6 1 12c6 2 11 1 14-2ZM15 38c7-6 13-4 14 2-6 2-11 1-14-2Z'/%3E%3C/svg%3E");
}

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

html { background: var(--inv-background); scroll-behavior: smooth; }

body.garden-tea-party-body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font: 400 1.04rem/1.7 var(--gtp-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
p, figure, blockquote { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.garden-tea-party-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.garden-tea-party-icon { width: 1.15em; height: 1.15em; flex: none; }
.garden-tea-party-amp { padding: 0 .2em; font: 400 1.35em/1 var(--gtp-script); color: var(--inv-petal); }

/* ---------- backdrop (wide screens) and the column ---------- */

.garden-tea-party-backdrop {
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse at center, transparent 30%, color-mix(in srgb, var(--inv-shade) 30%, transparent) 100%),
        var(--gtp-gingham),
        color-mix(in srgb, var(--inv-leaf) 22%, var(--inv-paper));
}
@media (max-width: 519px) { .garden-tea-party-backdrop { display: none; } }

.garden-tea-party-page {
    position: relative; z-index: 1;
    width: min(100%, var(--gtp-w)); min-height: 100vh; margin: 0 auto;
    overflow-x: clip;
    background:
        radial-gradient(ellipse 120% 30% at 50% 0, color-mix(in srgb, var(--inv-blush) 70%, transparent), transparent 70%),
        var(--inv-background);
}
@media (min-width: 520px) {
    .garden-tea-party-page { box-shadow: 0 0 0 1px var(--gtp-line), 0 30px 80px -20px color-mix(in srgb, var(--inv-shade) 55%, transparent); }
}

.garden-tea-party-preview {
    position: fixed; z-index: 60; top: 0; left: 0; right: 0;
    width: min(100%, var(--gtp-w)); margin: 0 auto; padding: .35rem .75rem;
    background: var(--inv-shade); color: #fff;
    font: 600 .7rem/1.3 var(--gtp-body); text-align: center; letter-spacing: .03em;
}

/* ---------- shared pieces: buttons, lace, ribbon, chips, bands ---------- */

.inv-button {
    min-height: 2.9rem; padding: .75rem 1.45rem;
    background: var(--inv-primary); color: #fff;
    font: 400 .8rem/1.2 var(--gtp-head); letter-spacing: .14em; text-transform: uppercase;
    box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--inv-shade) 80%, transparent), inset 0 0 0 1px rgb(255 255 255 / .25);
}
.inv-button--outline {
    background: var(--inv-paper); color: var(--inv-primary);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 55%, transparent);
}
.inv-button:focus-visible { outline: 2px solid var(--inv-petal); outline-offset: 3px; }
.inv-button .garden-tea-party-icon { width: 1.15rem; height: 1.15rem; }

/* a white lace doily border (the scallops and eyelets come from an SVG tile) */
.garden-tea-party-lace {
    border: 14px solid transparent;
    border-image: var(--gtp-lace) 20 fill / 14px / 0 round;
    filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--inv-shade) 16%, transparent));
}

.garden-tea-party-ribbon {
    display: inline-block; max-width: 100%; margin: 0 auto; padding: .45rem 1.7rem .42rem;
    background: var(--inv-primary); color: #fff;
    font: 400 .78rem/1.35 var(--gtp-head); letter-spacing: .18em; text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, calc(100% - .7rem) 50%, 100% 100%, 0 100%, .7rem 50%);
    overflow-wrap: anywhere;
}
.garden-tea-party-ribbon--small { margin-top: 1.4rem; letter-spacing: .08em; text-transform: none; font-size: .95rem; }

.garden-tea-party-chip {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .35rem 1rem;
    border-radius: 999px; background: var(--inv-paper); color: var(--inv-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 35%, transparent);
    font: 500 .95rem/1.2 var(--gtp-body); text-decoration: none;
}
.garden-tea-party-chip:focus-visible { outline: 2px solid var(--inv-petal); outline-offset: 2px; }

.garden-tea-party-lead { max-width: 23rem; margin: -.6rem auto 1.6rem; color: var(--gtp-muted); font-style: italic; }

/* ---------- cover: tea pours, the steam becomes the name ---------- */

.garden-tea-party-cover {
    position: fixed; inset: 0; z-index: 30;
    width: min(100%, var(--gtp-w)); margin: 0 auto;
    overflow-x: hidden; overflow-y: auto;
    background:
        radial-gradient(ellipse 85% 45% at 50% 52%, color-mix(in srgb, var(--inv-blush) 85%, transparent), transparent 75%),
        var(--inv-background);
}

/* a gingham valance with scalloped edge along the top */
.garden-tea-party-cover__valance, .garden-tea-party-awning__stripes {
    position: absolute; top: 0; left: 0; right: 0; height: 2.1rem;
    background: var(--gtp-gingham), color-mix(in srgb, var(--inv-leaf) 30%, var(--inv-paper));
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% 1.35rem no-repeat,
        radial-gradient(.75rem at 50% 0, #000 97%, #0000) 50% 1.35rem / 1.5rem .75rem repeat-x;
    mask:
        linear-gradient(#000 0 0) top / 100% 1.35rem no-repeat,
        radial-gradient(.75rem at 50% 0, #000 97%, #0000) 50% 1.35rem / 1.5rem .75rem repeat-x;
}

.garden-tea-party-cover__corner {
    position: absolute; z-index: 0; bottom: -.4rem; width: min(30vw, 8.4rem); height: auto; aspect-ratio: 120 / 64;
    pointer-events: none;
}
.garden-tea-party-cover__corner--left { left: -1.8rem; rotate: -28deg; }
.garden-tea-party-cover__corner--right { right: -1.8rem; scale: -1 1; rotate: 28deg; }

.garden-tea-party-cover__inner {
    position: relative; z-index: 1;
    min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; padding: 3rem 1.4rem 2.6rem; text-align: center;
}

.garden-tea-party-cover__title {
    font: 400 .76rem/1.4 var(--gtp-head); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-primary);
    text-wrap: balance;
}
.garden-tea-party-cover__kicker { font: italic 400 1rem/1.3 var(--gtp-body); color: var(--gtp-muted); }
.garden-tea-party-cover__name {
    max-width: 100%; padding: 0 .25em; margin: -.1rem 0 -.6rem;
    font: 400 clamp(3.3rem, 17vw, 4.5rem)/1.12 var(--gtp-script); color: var(--inv-shade);
    overflow-wrap: anywhere; text-wrap: balance;
}

/* the tea scene: sized by the screen height, the age painted on the cup */
.garden-tea-party-scene {
    position: relative; container-type: inline-size;
    width: min(100%, calc(32svh * 1.391)); aspect-ratio: 320 / 230;
}
.garden-tea-party-scene__art { display: block; width: 100%; height: 100%; overflow: visible; }
.garden-tea-party-scene__doily circle, .garden-tea-party-scene__doily ellipse { fill: #fff; }
.garden-tea-party-scene__doily .garden-tea-party-scene__eyelet { fill: color-mix(in srgb, var(--inv-accent) 45%, #fff); }
.garden-tea-party-scene__doily { filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--inv-shade) 14%, transparent)); }
.garden-tea-party-scene__porcelain { fill: #fff; stroke: var(--gtp-paint); stroke-width: 1.7; }
.garden-tea-party-scene__ring { fill: none; stroke: color-mix(in srgb, var(--gtp-paint) 35%, transparent); stroke-width: 1.2; }
.garden-tea-party-scene__handle-out, .garden-tea-party-scene__handle-in { fill: none; stroke-linecap: round; }
.garden-tea-party-scene__handle-out { stroke: var(--gtp-paint); stroke-width: 11; }
.garden-tea-party-scene__handle-in { stroke: #fff; stroke-width: 7.4; }
.garden-tea-party-scene__band { fill: none; stroke: var(--gtp-band); stroke-width: 5; }
.garden-tea-party-scene__band--thin { stroke-width: 2; stroke: color-mix(in srgb, var(--gtp-paint) 55%, transparent); stroke-dasharray: 2 4; stroke-linecap: round; }
.garden-tea-party-scene__medal { fill: var(--inv-paper); stroke: var(--gtp-band); stroke-width: 2.4; }
.garden-tea-party-scene__medal-ring { fill: none; stroke: var(--gtp-paint); stroke-width: .9; stroke-dasharray: 2 2.4; }
.garden-tea-party-scene__tea { fill: var(--gtp-tea); transform-box: fill-box; transform-origin: center; }
.garden-tea-party-scene__shine { fill: #fff; opacity: .4; }
.garden-tea-party-scene__stream { fill: none; stroke: var(--gtp-tea); stroke-width: 4.4; stroke-linecap: round; opacity: 0; }
.garden-tea-party-scene__steam path {
    fill: none; stroke: color-mix(in srgb, var(--gtp-paint) 38%, transparent); stroke-width: 3; stroke-linecap: round; opacity: .55;
}
.garden-tea-party-scene__pot { transform-box: fill-box; transform-origin: 50% 72%; transform: translate(-8px, 77px); }

.garden-tea-party-scene__decal {
    position: absolute; left: 59.375%; top: 66.1%; width: 13.2%; aspect-ratio: 1; translate: -50% -50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--inv-primary); pointer-events: none;
}
.garden-tea-party-scene__decal-ke { font: 400 2.6cqi/1 var(--gtp-head); letter-spacing: .12em; text-transform: uppercase; }
.garden-tea-party-scene__decal-age { font: 400 7.2cqi/1 var(--gtp-head); }
.garden-tea-party-scene__decal-initial { font: 400 9.5cqi/1 var(--gtp-script); color: var(--inv-petal); translate: 0 .06em; }

.garden-tea-party-scene__cameo {
    position: absolute; z-index: 1; right: -1%; top: 1%; width: 23%; aspect-ratio: 4 / 5; border-radius: 50%;
    background: var(--garden-tea-party-photo) center 25% / cover no-repeat, var(--inv-blush);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--inv-accent), 0 10px 16px -8px color-mix(in srgb, var(--inv-shade) 60%, transparent);
    rotate: 7deg;
}

.garden-tea-party-cover__date {
    display: inline-flex; align-items: center; gap: .6rem;
    font: 400 .95rem/1.35 var(--gtp-head); letter-spacing: .06em; color: var(--inv-shade);
}
.garden-tea-party-cover__date::before, .garden-tea-party-cover__date::after {
    content: ''; width: 1.4rem; height: 1px; background: color-mix(in srgb, var(--inv-primary) 55%, transparent);
}
.garden-tea-party-cover__quote { max-width: 19rem; font: italic 400 .98rem/1.45 var(--gtp-body); color: var(--gtp-muted); text-wrap: pretty; }

.garden-tea-party-cover__guest {
    min-width: min(100%, 15rem); margin-top: .2rem; padding: .55rem 1.4rem .6rem; border-radius: 1rem;
    background: var(--inv-paper);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 25%, transparent), inset 0 0 0 4px var(--inv-paper), inset 0 0 0 5px color-mix(in srgb, var(--inv-accent) 55%, transparent);
}
.garden-tea-party-cover__to { font: 400 .68rem/1.4 var(--gtp-head); letter-spacing: .26em; text-transform: uppercase; color: var(--inv-primary); }
.garden-tea-party-cover__guest-name { display: block; font: 600 1.14rem/1.3 var(--gtp-body); color: var(--inv-text); overflow-wrap: anywhere; }

.garden-tea-party-open { margin-top: .35rem; padding-inline: 1.5rem 1.7rem; }
.garden-tea-party-open__cup { width: 1.7rem; height: 1.4rem; --gtp-paint: #fff; --gtp-porcelain: var(--inv-primary); --gtp-band: var(--inv-accent); --gtp-tea: #fff; }

/* load: the pot tips and pours, the cup fills, the steam rises and condenses into the name */
html.inv-anim .garden-tea-party-scene__pot { animation: garden-tea-party-pour 1.75s cubic-bezier(.5, 0, .3, 1) .05s both; }
html.inv-anim .garden-tea-party-scene__stream { stroke-dasharray: 1 1; animation: garden-tea-party-stream 1.75s linear .05s both; }
html.inv-anim .garden-tea-party-scene__tea { animation: garden-tea-party-fill 1s cubic-bezier(.3, .7, .3, 1) .55s both; }
html.inv-anim .garden-tea-party-scene__steam path {
    stroke-dasharray: 1 1;
    animation: garden-tea-party-steam-draw 1s ease-out .85s both, garden-tea-party-steam 4.5s ease-in-out 1.9s infinite;
}
html.inv-anim .garden-tea-party-scene__steam path:nth-child(2) { animation-delay: .75s, 2.6s; }
html.inv-anim .garden-tea-party-scene__steam path:nth-child(3) { animation-delay: .95s, 3.3s; }
html.inv-anim .garden-tea-party-cover__name { animation: garden-tea-party-condense 1.15s cubic-bezier(.2, .7, .2, 1) .7s both; }
html.inv-anim .garden-tea-party-scene__cameo { animation: garden-tea-party-pop .8s cubic-bezier(.3, 1.4, .5, 1) .5s both; }
html.inv-anim .garden-tea-party-scene__decal { animation: garden-tea-party-fade-in .6s ease 1s both; }

@keyframes garden-tea-party-pour {
    0% { transform: translate(-8px, 77px); rotate: 0deg; }
    30%, 66% { transform: none; rotate: 28deg; }
    100% { transform: translate(-8px, 77px); rotate: 0deg; }
}
@keyframes garden-tea-party-stream {
    0%, 26% { stroke-dashoffset: 1; opacity: 1; }
    38% { stroke-dashoffset: 0; opacity: 1; }
    64% { stroke-dashoffset: 0; opacity: 1; }
    74%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes garden-tea-party-fill { from { transform: scale(.22); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes garden-tea-party-steam-draw { from { stroke-dashoffset: 1; opacity: 0; } 30% { opacity: .7; } to { stroke-dashoffset: 0; opacity: .55; } }
@keyframes garden-tea-party-steam {
    0%, 100% { opacity: .55; transform: none; }
    50% { opacity: .2; transform: translateY(-6px); }
}
@keyframes garden-tea-party-condense {
    from { opacity: 0; filter: blur(10px); transform: translateY(22px) scale(.92); letter-spacing: .14em; }
    to { opacity: 1; filter: none; transform: none; letter-spacing: normal; }
}
@keyframes garden-tea-party-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes garden-tea-party-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes garden-tea-party-fade-out { to { opacity: 0; transform: translateY(-10px); } }

/* opening: the text fades, the floral curtain closes over the cover and parts again */
html.inv-anim.inv-opened .garden-tea-party-cover__inner { animation: garden-tea-party-fade-out .3s ease forwards; }
.garden-tea-party-cover--leave { transition: opacity .35s ease; }
html.inv-anim .garden-tea-party-cover--leave { transition: opacity .12s linear .42s; }
.garden-tea-party-cover--gone { opacity: 0; }

.garden-tea-party-curtain {
    position: fixed; inset: 0; z-index: 31; width: min(100%, var(--gtp-w)); margin: 0 auto;
    overflow: hidden; pointer-events: none; visibility: hidden;
}
.garden-tea-party-curtain__half {
    position: absolute; top: 0; bottom: 0; width: 60%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-blush) 80%, var(--inv-background)) 0 78%, transparent 96%);
}
.garden-tea-party-curtain__half svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.garden-tea-party-curtain__half--left { left: 0; }
.garden-tea-party-curtain__half--right { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--inv-blush) 80%, var(--inv-background)) 0 78%, transparent 96%); }
html.inv-anim .garden-tea-party-curtain.is-open { animation: garden-tea-party-curtain 1.3s linear forwards; }
html.inv-anim .garden-tea-party-curtain.is-open .garden-tea-party-curtain__half--left { animation: garden-tea-party-part-left 1.3s cubic-bezier(.55, 0, .3, 1) both; transform-origin: 0 0; }
html.inv-anim .garden-tea-party-curtain.is-open .garden-tea-party-curtain__half--right { animation: garden-tea-party-part-right 1.3s cubic-bezier(.55, 0, .3, 1) both; transform-origin: 100% 0; }
@keyframes garden-tea-party-curtain { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes garden-tea-party-part-left {
    0% { transform: translateX(-102%); }
    32%, 44% { transform: none; }
    100% { transform: translateX(-104%) rotate(-5deg); }
}
@keyframes garden-tea-party-part-right {
    0% { transform: translateX(102%); }
    32%, 44% { transform: none; }
    100% { transform: translateX(104%) rotate(5deg); }
}

/* short screens: the scene and type tighten so the guest box and button stay above the fold */
@media (max-height: 760px) {
    .garden-tea-party-cover__inner { gap: .4rem; padding: 2.7rem 1.3rem 2.4rem; }
    .garden-tea-party-scene { width: min(100%, calc(31svh * 1.391)); }
    .garden-tea-party-cover__name { font-size: clamp(3rem, 15.5vw, 4rem); }
    .garden-tea-party-cover__quote { font-size: .92rem; line-height: 1.4; }
    .garden-tea-party-cover__guest { padding: .45rem 1.2rem .5rem; }
}
@media (max-height: 660px) {
    .garden-tea-party-cover__inner { gap: .32rem; padding: 2.4rem 1.2rem 2.2rem; }
    .garden-tea-party-scene { width: min(100%, calc(29svh * 1.391)); }
    .garden-tea-party-cover__kicker { font-size: .9rem; }
    .garden-tea-party-cover__name { font-size: clamp(2.7rem, 14vw, 3.4rem); margin-bottom: -.5rem; }
    .garden-tea-party-cover__date { font-size: .86rem; }
    .garden-tea-party-cover__quote { font-size: .86rem; line-height: 1.36; }
    .garden-tea-party-cover__guest-name { font-size: 1.04rem; }
    .garden-tea-party-open { min-height: 2.75rem; padding-block: .62rem; }
    .garden-tea-party-cover__corner { width: min(24vw, 6.4rem); }
}

/* ---------- top of the page: the tent valance and a garland ---------- */

.garden-tea-party-awning { position: relative; height: 4.2rem; }
.garden-tea-party-awning__stripes {
    height: 2.6rem;
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 75%, var(--inv-paper)) 0 1.5rem, var(--inv-paper) 1.5rem 3rem);
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% 1.85rem no-repeat,
        radial-gradient(.75rem at 50% 0, #000 97%, #0000) 0 1.85rem / 1.5rem .75rem repeat-x;
    mask:
        linear-gradient(#000 0 0) top / 100% 1.85rem no-repeat,
        radial-gradient(.75rem at 50% 0, #000 97%, #0000) 0 1.85rem / 1.5rem .75rem repeat-x;
}
.garden-tea-party-awning__garland { position: absolute; left: 0; right: 0; top: 1.7rem; width: 100%; height: 2.6rem; }

/* ---------- sections ---------- */

.garden-tea-party-main { position: relative; }
.garden-tea-party-section { position: relative; padding: 2.9rem 1.4rem; text-align: center; }

/* blush bands with lace scallops and a row of eyelets top and bottom */
.garden-tea-party-band {
    --s: 9px;
    margin-block: .4rem;
    padding-block: 3.8rem 3.6rem;
    background:
        radial-gradient(circle, var(--inv-background) 1.7px, transparent 2.3px) 0 calc(var(--s) * 2) / calc(var(--s) * 2) calc(var(--s) * 2) repeat-x,
        radial-gradient(circle, var(--inv-background) 1.7px, transparent 2.3px) 0 calc(100% - var(--s) * 2) / calc(var(--s) * 2) calc(var(--s) * 2) repeat-x,
        var(--inv-blush);
    -webkit-mask:
        radial-gradient(var(--s) at 50% var(--s), #000 97%, #0000) 0 0 / calc(var(--s) * 2) calc(var(--s) * 2) repeat-x,
        linear-gradient(#000 0 0) 0 var(--s) / 100% calc(100% - var(--s) * 2) no-repeat,
        radial-gradient(var(--s) at 50% var(--s), #000 97%, #0000) 0 100% / calc(var(--s) * 2) calc(var(--s) * 2) repeat-x;
    mask:
        radial-gradient(var(--s) at 50% var(--s), #000 97%, #0000) 0 0 / calc(var(--s) * 2) calc(var(--s) * 2) repeat-x,
        linear-gradient(#000 0 0) 0 var(--s) / 100% calc(100% - var(--s) * 2) no-repeat,
        radial-gradient(var(--s) at 50% var(--s), #000 97%, #0000) 0 100% / calc(var(--s) * 2) calc(var(--s) * 2) repeat-x;
}
.garden-tea-party-band--gingham {
    background:
        radial-gradient(circle, var(--inv-background) 1.7px, transparent 2.3px) 0 calc(var(--s) * 2) / calc(var(--s) * 2) calc(var(--s) * 2) repeat-x,
        radial-gradient(circle, var(--inv-background) 1.7px, transparent 2.3px) 0 calc(100% - var(--s) * 2) / calc(var(--s) * 2) calc(var(--s) * 2) repeat-x,
        var(--gtp-gingham),
        color-mix(in srgb, var(--inv-leaf) 18%, var(--inv-paper));
}

/* heading: label + title between two sprigs that sway apart when it comes into view */
.garden-tea-party-heading {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "l label r" "title title title";
    align-items: end; column-gap: .8rem; max-width: 25rem; margin: 0 auto 1.8rem;
}
.garden-tea-party-heading__sprig { grid-area: l; width: min(100%, 4.6rem); height: auto; aspect-ratio: 120 / 64; margin-bottom: -.25rem; }
.garden-tea-party-heading__sprig--left { justify-self: end; transform-origin: 50% 80%; }
.garden-tea-party-heading__sprig--right { grid-area: r; justify-self: start; scale: -1 1; transform-origin: 50% 80%; }
.garden-tea-party-heading__label { grid-area: label; font: 400 .7rem/1.4 var(--gtp-head); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-primary); }
.garden-tea-party-heading__title {
    grid-area: title; margin-top: .25rem; padding: 0 .15em;
    font: 400 clamp(2rem, 9vw, 2.45rem)/1.15 var(--gtp-script); color: var(--inv-shade); text-wrap: balance;
}
html.inv-anim .garden-tea-party-heading .garden-tea-party-heading__sprig {
    transform: translateX(60%) rotate(18deg) scale(1.2);
    transition: transform 1.25s cubic-bezier(.3, 1.35, .45, 1) .15s;
}
html.inv-anim .garden-tea-party-heading.is-revealed .garden-tea-party-heading__sprig {
    transform: none;
    animation: garden-tea-party-sway 5.5s ease-in-out 1.4s infinite;
}
html.inv-anim .garden-tea-party-heading.is-revealed .garden-tea-party-heading__sprig--right { animation-delay: 2.2s; }
@keyframes garden-tea-party-sway { 0%, 100% { rotate: 0deg; } 50% { rotate: -5deg; } }

/* ---------- opening: tea set on a doily ---------- */

.garden-tea-party-opening { padding-top: 1.4rem; }
.garden-tea-party-teaset { display: flex; align-items: flex-end; justify-content: center; gap: .3rem; margin-bottom: -.5rem; position: relative; z-index: 1; }
.garden-tea-party-teaset__pot { width: 6.2rem; height: auto; aspect-ratio: 120 / 100; }
.garden-tea-party-teaset__cup { width: 3.3rem; height: auto; aspect-ratio: 48 / 40; }
.garden-tea-party-teaset__cup--right { scale: -1 1; }
html.inv-anim .garden-tea-party-teaset__pot { animation: garden-tea-party-bob 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes garden-tea-party-bob { 0%, 100% { rotate: 0deg; } 50% { rotate: 4deg; } }
.garden-tea-party-opening__card { max-width: 23rem; margin: 0 auto; padding: 1.4rem 1rem 1.2rem; }
.garden-tea-party-opening__greeting { font: 400 2.1rem/1.2 var(--gtp-script); color: var(--inv-petal); }
.garden-tea-party-opening__message { margin-top: .5rem; color: var(--inv-text); }

/* ---------- celebrant: the porcelain plate ---------- */

.garden-tea-party-plate { position: relative; width: min(15rem, 68vw); margin: .2rem auto 1.6rem; }
.garden-tea-party-plate__dish {
    position: relative; aspect-ratio: 1; padding: 12%; border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 66%, color-mix(in srgb, var(--inv-primary) 45%, transparent) 66.5% 67.4%, transparent 68%),
        radial-gradient(circle, #fff 0 69%, transparent 69.5%),
        repeating-conic-gradient(color-mix(in srgb, var(--inv-accent) 70%, #fff) 0 4deg, #fff 4deg 10deg);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 40%, transparent), 0 22px 36px -18px color-mix(in srgb, var(--inv-shade) 60%, transparent);
}
.garden-tea-party-plate__photo, .garden-tea-party-plate__monogram {
    display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px color-mix(in srgb, var(--inv-accent) 85%, var(--inv-petal));
}
.garden-tea-party-plate__monogram {
    position: relative; display: grid; place-items: center; container-type: inline-size;
    background: radial-gradient(circle at 50% 40%, #fff, var(--inv-blush) 75%);
}
.garden-tea-party-plate__monogram span { font: 400 46cqi/1 var(--gtp-script); color: var(--inv-shade); translate: 0 .08em; }
.garden-tea-party-plate__monogram svg { position: absolute; top: 10%; left: 50%; width: 22%; translate: -50% 0; }
.garden-tea-party-plate__monogram--teapot svg { position: static; width: 64%; translate: none; }
.garden-tea-party-plate__sprig { position: absolute; z-index: 1; bottom: -4%; width: 52%; height: auto; aspect-ratio: 120 / 64; pointer-events: none; }
.garden-tea-party-plate__sprig--left { left: -16%; rotate: -14deg; }
.garden-tea-party-plate__sprig--right { right: -16%; scale: -1 1; rotate: 14deg; }
.garden-tea-party-plate__age {
    position: absolute; z-index: 2; top: 0; right: -4%; width: 4.2rem; aspect-ratio: 1; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--inv-paper); color: var(--inv-primary);
    font: 400 1.9rem/1 var(--gtp-head);
    box-shadow: inset 0 0 0 3px var(--inv-paper), inset 0 0 0 4.5px var(--inv-accent), 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 45%, transparent), 0 12px 20px -10px color-mix(in srgb, var(--inv-shade) 60%, transparent);
    rotate: 10deg;
}
.garden-tea-party-plate__age span { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .1rem; }

.garden-tea-party-celebrant .garden-tea-party-ribbon { margin-top: -.4rem; }
.garden-tea-party-celebrant__nickname { margin-top: .7rem; font: 400 clamp(2.8rem, 13vw, 3.4rem)/1.1 var(--gtp-script); color: var(--inv-shade); padding: 0 .2em; overflow-wrap: anywhere; }
.garden-tea-party-celebrant__name { font: 400 1.32rem/1.35 var(--gtp-head); letter-spacing: .03em; overflow-wrap: anywhere; }
.garden-tea-party-celebrant__age { margin-top: .2rem; font-style: italic; color: var(--gtp-muted); }
.garden-tea-party-celebrant__born { display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem; color: var(--inv-primary); font-weight: 500; }
.garden-tea-party-celebrant__parents { max-width: 22rem; margin: 1.2rem auto 0; padding-top: 1rem; border-top: 1px dashed var(--gtp-line); }
.garden-tea-party-celebrant__order { font-style: italic; color: var(--gtp-muted); }
.garden-tea-party-celebrant__names { margin-top: .15rem; font: 600 1.08rem/1.5 var(--gtp-body); }
.garden-tea-party-celebrant__names span:not(.garden-tea-party-amp) { display: block; }
.garden-tea-party-celebrant__names .garden-tea-party-amp { display: block; line-height: 1.1; }
.garden-tea-party-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.2rem; }

/* ---------- message: lined notepaper ---------- */

.garden-tea-party-note {
    position: relative; max-width: 22rem; margin: 0 auto; padding: 2.2rem 1.4rem 1.5rem 2.4rem; text-align: left;
    background:
        linear-gradient(90deg, transparent 1.55rem, color-mix(in srgb, var(--inv-accent) 70%, transparent) 1.55rem 1.65rem, transparent 1.65rem),
        linear-gradient(transparent calc(1.85rem - 1px), color-mix(in srgb, var(--inv-primary) 16%, transparent) 0) 0 2.2rem / 100% 1.85rem,
        var(--inv-paper);
    box-shadow: 0 18px 32px -20px color-mix(in srgb, var(--inv-shade) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--inv-primary) 10%, transparent);
    rotate: -1.2deg;
}
.garden-tea-party-note__tape {
    position: absolute; top: -.75rem; left: 50%; width: 6.6rem; height: 1.6rem; translate: -50% 0; rotate: 4deg;
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--inv-accent) 60%, transparent) 0 6px, color-mix(in srgb, var(--inv-accent) 40%, transparent) 6px 12px);
    box-shadow: 0 2px 4px rgb(0 0 0 / .06);
}
.garden-tea-party-note__ring {
    position: absolute; right: -.9rem; bottom: -1rem; width: 4.6rem; aspect-ratio: 1; border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--gtp-tea) 26%, transparent); border-right-color: transparent; rotate: 30deg;
}
.garden-tea-party-note__text { font: italic 400 1.08rem/1.85rem var(--gtp-body); color: var(--inv-text); }
.garden-tea-party-note__from { margin-top: .5rem; text-align: right; font: 400 2rem/1.2 var(--gtp-script); color: var(--inv-petal); }

/* ---------- events: place cards ---------- */

.garden-tea-party-events__list { display: grid; gap: 1.8rem; max-width: 23.5rem; margin: 0 auto; }
.garden-tea-party-place {
    position: relative; padding: 0 1.25rem 1.4rem; border-radius: 1.1rem; text-align: left;
    background: var(--inv-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 18%, transparent), 0 20px 36px -24px color-mix(in srgb, var(--inv-shade) 70%, transparent);
}
.garden-tea-party-place__band {
    height: 2.7rem; margin: 0 -1.25rem; border-radius: 1.1rem 1.1rem 0 0;
    background: var(--gtp-gingham), color-mix(in srgb, var(--inv-leaf) 28%, var(--inv-paper));
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% 2.2rem no-repeat,
        radial-gradient(.5rem at 50% 0, #000 97%, #0000) 50% 2.2rem / 1rem .5rem repeat-x;
    mask:
        linear-gradient(#000 0 0) top / 100% 2.2rem no-repeat,
        radial-gradient(.5rem at 50% 0, #000 97%, #0000) 50% 2.2rem / 1rem .5rem repeat-x;
}
.garden-tea-party-place__name {
    width: fit-content; max-width: 100%; margin: -1.45rem auto 1rem; padding: .3rem 1.8rem .42rem;
    background: var(--inv-primary); color: #fff; text-align: center;
    font: 400 1.75rem/1.2 var(--gtp-script);
    clip-path: polygon(0 0, 100% 0, calc(100% - .8rem) 50%, 100% 100%, 0 100%, .8rem 50%);
    overflow-wrap: anywhere;
}
.garden-tea-party-place__photo { margin: 0 0 .9rem; }
.garden-tea-party-place__photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.garden-tea-party-place__facts li { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem 0; border-bottom: 1px dashed var(--gtp-line); }
.garden-tea-party-place__facts li:last-child { border-bottom: 0; }
.garden-tea-party-place__facts .garden-tea-party-icon {
    width: 2.2rem; height: 2.2rem; padding: .45rem; border-radius: 50%;
    background: var(--inv-blush); color: var(--inv-primary);
}
.garden-tea-party-place__facts li > span { padding-top: .3rem; line-height: 1.5; }
.garden-tea-party-place__venue { display: block; font: 400 1.08rem/1.4 var(--gtp-head); color: var(--inv-shade); }
.garden-tea-party-place__address { display: block; margin-top: .15rem; color: var(--gtp-muted); font-size: .96rem; }
.garden-tea-party-place .inv-maps { margin-top: 1rem; text-align: center; }
.garden-tea-party-place .inv-maps__frame { height: 200px; margin-top: .9rem; border-radius: .8rem; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--gtp-line); }

/* ---------- countdown: porcelain saucers ---------- */

.garden-tea-party-saucers .inv-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 4.7rem)); justify-content: center; gap: .55rem; }
.garden-tea-party-saucers .inv-countdown__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 0; aspect-ratio: 1; padding: 0; border-radius: 50%;
    background: radial-gradient(circle, #fff 0 54%, color-mix(in srgb, var(--inv-primary) 30%, transparent) 55% 56.5%, #fff 57.5%);
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--inv-accent) 75%, #fff), 0 0 0 4.5px #fff, 0 0 0 5.5px color-mix(in srgb, var(--inv-primary) 35%, transparent), 0 12px 18px -10px color-mix(in srgb, var(--inv-shade) 60%, transparent);
}
.garden-tea-party-saucers .inv-countdown__value { font: 400 clamp(1.2rem, 5.6vw, 1.55rem)/1 var(--gtp-head); color: var(--inv-shade); }
.garden-tea-party-saucers .inv-countdown__label { margin-top: .2rem; font: 400 .58rem/1 var(--gtp-head); letter-spacing: .12em; text-transform: uppercase; color: var(--inv-primary); opacity: 1; }
.garden-tea-party-saucers .inv-countdown__done { max-width: 20rem; margin: 0 auto; font-style: italic; }
.garden-tea-party-saucers .inv-countdown__actions { margin-top: 1.5rem; gap: .6rem; }
.garden-tea-party-saucers .inv-countdown__actions .inv-button { font-size: .7rem; padding-inline: 1.1rem; }
.garden-tea-party-calendar.inv-cal {
    --inv-cal-bg: #fff; --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--inv-petal);
    margin-top: 2rem; border: 14px solid transparent; border-radius: 0; border-image: var(--gtp-lace) 20 fill / 14px / 0 round;
    box-shadow: none; filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--inv-shade) 16%, transparent));
}
.garden-tea-party-calendar .inv-cal__month { font-family: var(--gtp-script); font-size: 2rem; color: var(--inv-shade); }
.garden-tea-party-calendar .inv-cal__year { font-family: var(--gtp-head); color: var(--inv-primary); }

/* ---------- party: the sign, the macaron stand ---------- */

.garden-tea-party-sign {
    width: min(17rem, 84%); margin: 0 auto 2.2rem; padding: 1.7rem 1.4rem 1.6rem; border-radius: 50%;
    background: var(--inv-paper);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--inv-accent), 0 0 0 9px #fff, 0 0 0 10px color-mix(in srgb, var(--inv-primary) 40%, transparent), 0 20px 34px -18px color-mix(in srgb, var(--inv-shade) 60%, transparent);
}
.garden-tea-party-sign__label { font: 400 .68rem/1.4 var(--gtp-head); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-primary); }
.garden-tea-party-sign__theme { margin-top: .15rem; font: 400 2.2rem/1.15 var(--gtp-script); color: var(--inv-petal); overflow-wrap: anywhere; }
.garden-tea-party-dress__label { display: inline-flex; align-items: center; gap: .45rem; font: 400 .72rem/1.4 var(--gtp-head); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.garden-tea-party-dress__label .garden-tea-party-icon { width: 1.4rem; height: 1.4rem; }
.garden-tea-party-dress__code { margin-top: .2rem; font: 400 1.3rem/1.35 var(--gtp-head); color: var(--inv-shade); }
.garden-tea-party-stand { width: fit-content; max-width: 100%; margin: 1.1rem auto 0; }
.garden-tea-party-macarons { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; padding: 0 1rem; }
.garden-tea-party-macaron {
    position: relative; width: 2.8rem; height: 2.1rem; border-radius: 50% / 46%;
    background:
        linear-gradient(transparent 40%, #fff8ea 40% 47%, color-mix(in srgb, var(--garden-tea-party-swatch) 80%, #000) 47% 53%, #fff8ea 53% 60%, transparent 60%),
        radial-gradient(ellipse at 35% 20%, rgb(255 255 255 / .55), transparent 45%),
        var(--garden-tea-party-swatch);
    box-shadow: inset 0 -3px 0 rgb(0 0 0 / .08), 0 0 0 1px rgb(0 0 0 / .08), 0 6px 8px -5px rgb(0 0 0 / .35);
}
html.inv-anim .garden-tea-party-dress.is-revealed .garden-tea-party-macaron { animation: garden-tea-party-hop .6s cubic-bezier(.3, 1.5, .5, 1) both; }
html.inv-anim .garden-tea-party-dress.is-revealed .garden-tea-party-macaron:nth-child(2) { animation-delay: .12s; }
html.inv-anim .garden-tea-party-dress.is-revealed .garden-tea-party-macaron:nth-child(3) { animation-delay: .24s; }
html.inv-anim .garden-tea-party-dress.is-revealed .garden-tea-party-macaron:nth-child(n + 4) { animation-delay: .36s; }
@keyframes garden-tea-party-hop { 0% { transform: translateY(-14px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.garden-tea-party-stand__plate {
    position: relative; display: block; height: .7rem; margin-top: .15rem; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 45%, transparent);
}
.garden-tea-party-stand__plate::after {
    content: ''; position: absolute; top: 100%; left: 50%; width: 3.4rem; height: 1rem; translate: -50% 0;
    background:
        linear-gradient(90deg, transparent calc(50% - .2rem), color-mix(in srgb, var(--inv-primary) 45%, transparent) 0 calc(50% + .2rem), transparent 0) top / 100% .7rem no-repeat,
        radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--inv-primary) 45%, transparent) 0 60%, transparent 62%) bottom / 100% .45rem no-repeat;
}
.garden-tea-party-party__note {
    max-width: 21rem; margin: 2.2rem auto 0; padding: .9rem 1.2rem; border-radius: .6rem;
    background: var(--inv-paper); border: 1.5px dashed color-mix(in srgb, var(--inv-accent) 85%, var(--inv-petal));
    font-style: italic; color: var(--inv-text);
}

/* ---------- rundown: the menu card ---------- */

.garden-tea-party-rundown { padding-top: 4.6rem; }
.garden-tea-party-menu {
    position: relative; max-width: 22.5rem; margin: 0 auto; padding: 3rem 1.5rem 1.8rem;
    background: var(--inv-paper); border-radius: 4px;
    box-shadow:
        inset 0 0 0 7px var(--inv-paper), inset 0 0 0 8px color-mix(in srgb, var(--inv-primary) 50%, transparent),
        inset 0 0 0 11px var(--inv-paper), inset 0 0 0 12px color-mix(in srgb, var(--inv-accent) 70%, transparent),
        0 24px 40px -22px color-mix(in srgb, var(--inv-shade) 70%, transparent);
}
.garden-tea-party-menu__teapot { position: absolute; top: -2.6rem; left: 50%; width: 5.4rem; height: auto; aspect-ratio: 120 / 100; translate: -50% 0; }
.garden-tea-party-menu__kicker { font: 400 .68rem/1.4 var(--gtp-head); letter-spacing: .26em; text-transform: uppercase; color: var(--inv-primary); }
.garden-tea-party-menu__title { margin-top: .05rem; font: 400 2.5rem/1.15 var(--gtp-script); color: var(--inv-shade); }
.garden-tea-party-menu__rule { display: flex; align-items: center; gap: .5rem; width: 9rem; margin: .4rem auto 1rem; }
.garden-tea-party-menu__rule::before, .garden-tea-party-menu__rule::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--inv-primary) 45%, transparent); }
.garden-tea-party-menu__rule svg { width: 1.1rem; height: 1.1rem; }
.garden-tea-party-menu__item { padding: .55rem 0; text-align: left; }
.garden-tea-party-menu__line { display: flex; align-items: baseline; gap: .45rem; }
.garden-tea-party-menu__what { font: 400 1.06rem/1.4 var(--gtp-head); color: var(--inv-text); overflow-wrap: anywhere; }
.garden-tea-party-menu__dots { flex: 1; min-width: 1.2rem; border-bottom: 2.5px dotted color-mix(in srgb, var(--inv-primary) 55%, transparent); translate: 0 -.3rem; }
.garden-tea-party-menu__time { flex: none; font: italic 600 1rem/1.4 var(--gtp-body); color: var(--inv-primary); font-variant-numeric: tabular-nums; }
.garden-tea-party-menu__desc { margin-top: .05rem; font-style: italic; font-size: .94rem; line-height: 1.45; color: var(--gtp-muted); }

/* ---------- story: the vine ---------- */

.garden-tea-party-vine { position: relative; max-width: 24rem; margin: 0 auto; padding-left: 3.3rem; text-align: left; }
.garden-tea-party-vine::before {
    content: ''; position: absolute; left: 1.3rem; top: .8rem; bottom: 1.4rem; width: 3px; border-radius: 3px;
    background: var(--gtp-stem);
}
.garden-tea-party-vine::after {
    content: ''; position: absolute; left: .45rem; top: 1.6rem; bottom: 2rem; width: 1.9rem;
    background: var(--gtp-leaf);
    -webkit-mask: var(--gtp-vine-mask) 0 0 / 1.9rem 3.5rem repeat-y; mask: var(--gtp-vine-mask) 0 0 / 1.9rem 3.5rem repeat-y;
}
.garden-tea-party-vine__item { position: relative; z-index: 1; padding-bottom: 2rem; }
.garden-tea-party-vine__item:last-child { padding-bottom: 0; }
.garden-tea-party-vine__flower {
    position: absolute; left: -3.25rem; top: -.35rem; width: 2.6rem; height: 2.6rem;
    filter: drop-shadow(0 4px 4px color-mix(in srgb, var(--inv-shade) 25%, transparent));
}
.garden-tea-party-vine__date {
    display: inline-block; padding: .15rem .75rem; border-radius: 999px;
    background: var(--inv-blush); color: var(--inv-shade); font: 400 .78rem/1.5 var(--gtp-head); letter-spacing: .12em;
}
.garden-tea-party-vine__title { margin-top: .3rem; font: 400 1.25rem/1.35 var(--gtp-head); color: var(--inv-shade); }
.garden-tea-party-vine__photo { max-width: 15rem; margin: .7rem 0 .4rem; rotate: -1.4deg; }
.garden-tea-party-vine__item:nth-child(even) .garden-tea-party-vine__photo { rotate: 1.4deg; }
.garden-tea-party-vine__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.garden-tea-party-vine__text { margin-top: .35rem; color: var(--gtp-muted); }
html.inv-anim .garden-tea-party-vine__item .garden-tea-party-vine__flower { scale: .2; rotate: -120deg; transition: scale .9s cubic-bezier(.3, 1.5, .5, 1) .3s, rotate .9s ease .3s; }
html.inv-anim .garden-tea-party-vine__item.is-revealed .garden-tea-party-vine__flower { scale: 1; rotate: 0deg; }

/* ---------- gallery: lace frames ---------- */

.garden-tea-party-frames .inv-gallery { gap: .9rem; max-width: 24rem; margin: 0 auto; }
.garden-tea-party-frames .inv-gallery__item {
    aspect-ratio: 4 / 5; border-radius: 0; border: 11px solid transparent;
    border-image: var(--gtp-lace) 20 fill / 11px / 0 round;
    filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--inv-shade) 22%, transparent));
    rotate: -1.6deg;
}
.garden-tea-party-frames .inv-gallery__item:nth-child(even) { rotate: 1.8deg; }
.garden-tea-party-frames .inv-gallery__item:nth-child(3n) { rotate: -.8deg; }
.garden-tea-party-frames .inv-gallery__item:focus-visible { outline: 2px solid var(--inv-petal); outline-offset: 2px; }

/* ---------- live streaming ---------- */

.garden-tea-party-stream__card {
    max-width: 22rem; margin: 0 auto; padding: 1.6rem 1.3rem 1.5rem; border-radius: 1.2rem;
    background: var(--inv-paper); border: 1.5px dashed color-mix(in srgb, var(--inv-primary) 40%, transparent);
}
.garden-tea-party-stream__badge {
    display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .8rem; border-radius: 999px;
    background: var(--inv-blush); color: var(--inv-shade); font: 400 .72rem/1.5 var(--gtp-head); letter-spacing: .16em; text-transform: uppercase;
}
.garden-tea-party-stream__title { margin-top: .5rem; font: 400 2rem/1.2 var(--gtp-script); color: var(--inv-shade); }
.garden-tea-party-stream__text { margin-top: .3rem; color: var(--gtp-muted); }
.garden-tea-party-stream__note { margin-top: .3rem; font-weight: 600; color: var(--inv-primary); }
.garden-tea-party-stream__card .inv-button { margin-top: 1.1rem; }

/* ---------- RSVP: the swinging tea tag ---------- */

.garden-tea-party-tag { position: relative; max-width: 23rem; margin: 0 auto; padding-top: 2.6rem; transform-origin: 50% 0; }
.garden-tea-party-tag__string {
    position: absolute; z-index: 2; top: -.9rem; left: 50%; width: 2px; height: calc(2.6rem + .9rem + 1.45rem); translate: -50% 0;
    background: repeating-linear-gradient(var(--gtp-twine) 0 5px, color-mix(in srgb, var(--gtp-twine) 70%, #fff) 5px 7px);
}
.garden-tea-party-tag__string::before {
    content: ''; position: absolute; top: -.35rem; left: 50%; width: .7rem; height: .7rem; translate: -50% 0; border-radius: 50%;
    background: var(--gtp-twine);
}
.garden-tea-party-tag__card {
    position: relative; isolation: isolate; padding: 2.9rem 1.3rem 1.6rem;
    filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--inv-shade) 30%, transparent));
}
.garden-tea-party-tag__card::before, .garden-tea-party-teatag__card::before {
    content: ''; position: absolute; z-index: -1; inset: 0; background: var(--inv-paper);
    clip-path: polygon(2.2rem 0, calc(100% - 2.2rem) 0, 100% 2.2rem, 100% 100%, 0 100%, 0 2.2rem);
}
/* a printed gingham strip along the foot of the tag */
.garden-tea-party-tag__card::after {
    content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: .9rem;
    background: var(--gtp-gingham), color-mix(in srgb, var(--inv-accent) 30%, var(--inv-paper));
    background-size: 11px 11px, 11px 11px, auto;
}
.garden-tea-party-tag__hole, .garden-tea-party-teatag__hole {
    position: absolute; top: 1.05rem; left: 50%; width: .95rem; height: .95rem; translate: -50% 0; border-radius: 50%;
    background: color-mix(in srgb, var(--inv-leaf) 25%, var(--inv-background));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent) 80%, var(--inv-petal)), inset 0 1px 2px rgb(0 0 0 / .25);
}
.garden-tea-party-tag__hint { margin-bottom: 1rem; font: 400 .66rem/1.4 var(--gtp-head); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); }
.garden-tea-party-tag.is-sent .garden-tea-party-tag__hint { display: none; }
html.inv-anim .garden-tea-party-tag.is-revealed { animation: garden-tea-party-swing 2.8s ease-out .2s both; }
html.inv-anim .garden-tea-party-tag.is-revealed.is-sent { animation-name: garden-tea-party-swing-again; animation-delay: 0s; }
@keyframes garden-tea-party-swing {
    0% { rotate: 7deg; } 18% { rotate: -5deg; } 36% { rotate: 3deg; } 54% { rotate: -1.8deg; } 72% { rotate: .8deg; } 100% { rotate: 0deg; }
}
@keyframes garden-tea-party-swing-again {
    0% { rotate: 0deg; } 14% { rotate: -4deg; } 34% { rotate: 3deg; } 54% { rotate: -1.6deg; } 74% { rotate: .7deg; } 100% { rotate: 0deg; }
}

/* after sending: two cups clink, a flower blooms */
.garden-tea-party-cheers { display: grid; justify-items: center; gap: .3rem; margin-bottom: .9rem; }
.garden-tea-party-cheers__art { position: relative; width: 11rem; height: 6.6rem; }
.garden-tea-party-cheers__flower { position: absolute; top: 0; left: 50%; width: 3.6rem; height: 3.6rem; translate: -50% 0; overflow: visible; }
.garden-tea-party-cheers__petal { fill: var(--inv-accent); stroke: var(--inv-petal); stroke-width: 1; transform-origin: 30px 30px; }
.garden-tea-party-cheers__heart { fill: var(--gtp-honey); }
.garden-tea-party-cheers__cup { position: absolute; bottom: 0; width: 4.4rem; height: auto; aspect-ratio: 48 / 40; overflow: visible; }
.garden-tea-party-cheers__cup--left { left: .4rem; transform-origin: 60% 90%; }
.garden-tea-party-cheers__cup--right { right: .4rem; transform-origin: 40% 90%; }
.garden-tea-party-cheers__ting { position: absolute; top: 2.9rem; left: 50%; width: 2px; height: .75rem; border-radius: 2px; background: var(--inv-petal); opacity: 0; transform-origin: 50% 2.2rem; }
.garden-tea-party-cheers__ting--1 { rotate: -40deg; }
.garden-tea-party-cheers__ting--3 { rotate: 40deg; }
.garden-tea-party-cheers__title { font: 400 1.9rem/1.2 var(--gtp-script); color: var(--inv-shade); }
html.inv-anim .garden-tea-party-cheers__cup--left { animation: garden-tea-party-clink-left 1.1s cubic-bezier(.4, 0, .2, 1) .1s both; }
html.inv-anim .garden-tea-party-cheers__cup--right { animation: garden-tea-party-clink-right 1.1s cubic-bezier(.4, 0, .2, 1) .1s both; }
html.inv-anim .garden-tea-party-cheers__ting { animation: garden-tea-party-ting .7s ease-out .5s both; }
html.inv-anim .garden-tea-party-cheers__petal { animation: garden-tea-party-bloom .8s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(.55s + var(--i) * .07s); }
html.inv-anim .garden-tea-party-cheers__heart { animation: garden-tea-party-pop .5s ease .5s both; transform-origin: 30px 30px; }
html.inv-anim .garden-tea-party-cheers__title { animation: garden-tea-party-fade-in .6s ease .7s both; }
@keyframes garden-tea-party-clink-left {
    0% { transform: translateX(-1rem); opacity: 0; } 30% { opacity: 1; }
    48% { transform: translateX(1rem) rotate(16deg); }
    62% { transform: translateX(.5rem) rotate(9deg); }
    100% { transform: translateX(.7rem) rotate(11deg); }
}
@keyframes garden-tea-party-clink-right {
    0% { transform: translateX(1rem); opacity: 0; } 30% { opacity: 1; }
    48% { transform: translateX(-1rem) rotate(-16deg); }
    62% { transform: translateX(-.5rem) rotate(-9deg); }
    100% { transform: translateX(-.7rem) rotate(-11deg); }
}
@keyframes garden-tea-party-ting { 0% { opacity: 0; scale: .3; } 40% { opacity: 1; scale: 1.2; } 100% { opacity: 0; scale: 1; } }
@keyframes garden-tea-party-bloom { from { scale: 0; } to { scale: 1; } }
/* without motion everything simply rests in its final pose */
html:not(.inv-anim) .garden-tea-party-cheers__cup--left { transform: translateX(.7rem) rotate(11deg); }
html:not(.inv-anim) .garden-tea-party-cheers__cup--right { transform: translateX(-.7rem) rotate(-11deg); }

/* ---------- the shared forms (RSVP, wishes) ---------- */

.garden-tea-party-form .inv-form { gap: 1.05rem; color: var(--inv-text); }
.garden-tea-party-form .inv-form label, .garden-tea-party-form .inv-form__choices legend {
    gap: .35rem; font: 400 .74rem/1.4 var(--gtp-head); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary);
}
.garden-tea-party-form .inv-form input:not([type=radio]):not([type=checkbox]), .garden-tea-party-form .inv-form select, .garden-tea-party-form .inv-form textarea {
    min-height: 3rem; padding: .65rem .9rem; border-radius: .75rem;
    border: 1.5px solid color-mix(in srgb, var(--inv-primary) 30%, transparent);
    background: #fff; color: var(--inv-text);
    font: 400 1.05rem/1.4 var(--gtp-body); letter-spacing: 0; text-transform: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.garden-tea-party-form .inv-form textarea { min-height: 6.2rem; resize: vertical; }
.garden-tea-party-form .inv-form input:focus, .garden-tea-party-form .inv-form select:focus, .garden-tea-party-form .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent) 55%, transparent);
}
.garden-tea-party-form .inv-form .inv-button { justify-self: stretch; margin-top: .2rem; }
.garden-tea-party-form .inv-form__notice {
    padding: .85rem 1rem; border-radius: .75rem; text-align: center; font-style: italic; font-size: .98rem; color: var(--inv-text);
    background: var(--inv-blush); border: 1px dashed color-mix(in srgb, var(--inv-accent) 90%, var(--inv-petal));
}
.garden-tea-party-form .inv-form__error { font-size: .98rem; }
.garden-tea-party-form .inv-rsvp__deadline { margin-bottom: .9rem; font-style: italic; color: var(--inv-primary); }
.garden-tea-party-form .inv-rsvp__done { gap: .9rem; }
.garden-tea-party-form .inv-rsvp__done .inv-button { justify-self: center; }

/* attendance: three teacup cards; the chosen one fills with rose */
.garden-tea-party-form .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.garden-tea-party-form .inv-form__choices legend { width: 100%; margin-bottom: .55rem; text-align: center; }
.garden-tea-party-form .inv-form .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    min-height: 5.6rem; padding: .75rem .3rem .65rem; border-radius: .95rem; cursor: pointer; text-align: center;
    border: 1.5px solid color-mix(in srgb, var(--inv-primary) 28%, transparent); background: #fff;
    font: 600 .9rem/1.2 var(--gtp-body); letter-spacing: 0; text-transform: none; color: var(--inv-text);
    transition: transform .2s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.garden-tea-party-form .inv-form .inv-form__choices label::before {
    content: ''; width: 2.5rem; height: 2.1rem; background: color-mix(in srgb, var(--inv-primary) 45%, #fff);
    -webkit-mask: var(--gtp-cup-mask) center / contain no-repeat; mask: var(--gtp-cup-mask) center / contain no-repeat;
    transition: background-color .3s ease, rotate .4s ease;
}
.garden-tea-party-form .inv-form .inv-form__choices label:nth-of-type(2)::before { rotate: -28deg; }
.garden-tea-party-form .inv-form .inv-form__choices label:nth-of-type(3)::before { opacity: .75; }
.garden-tea-party-form .inv-form__choices input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.garden-tea-party-form .inv-form .inv-form__choices label:hover { transform: translateY(-2px); }
.garden-tea-party-form .inv-form .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-petal); outline-offset: 3px; }
.garden-tea-party-form .inv-form .inv-form__choices label:has(input:checked) {
    border-color: var(--inv-primary); background: var(--inv-blush); color: var(--inv-shade);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent) 55%, transparent);
}
.garden-tea-party-form .inv-form .inv-form__choices label:has(input:checked)::before { background: var(--inv-petal); }
html.inv-anim .garden-tea-party-form .inv-form .inv-form__choices label:has(input:checked)::before { animation: garden-tea-party-hop .5s cubic-bezier(.3, 1.5, .5, 1) both; }

/* the guest count: a tower of stacked teacups + − / + (js) */
.garden-tea-party-pax { display: flex; align-items: flex-end; gap: .9rem; }
.garden-tea-party-pax__tower {
    --step: clamp(.55rem, calc(5rem / var(--count, 1)), .95rem);
    position: relative; flex: none; width: 3rem; height: calc(2rem + (var(--count, 1) - 1) * var(--step));
    transition: height .3s ease;
    --gtp-tea: color-mix(in srgb, var(--inv-accent) 60%, #fff);
}
.garden-tea-party-pax__cup { position: absolute; left: 50%; bottom: calc(var(--n) * var(--step)); width: 2.5rem; height: 2.1rem; translate: -50% 0; }
.garden-tea-party-pax__cup:nth-child(even) { margin-left: 3px; rotate: 3deg; }
.garden-tea-party-pax__cup:nth-child(odd):not(:first-child) { margin-left: -3px; rotate: -2deg; }
.garden-tea-party-pax__cup svg { display: block; width: 100%; height: 100%; overflow: visible; }
html.inv-anim .garden-tea-party-pax__cup.is-new { animation: garden-tea-party-drop .45s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes garden-tea-party-drop { from { transform: translateY(-1.4rem); opacity: 0; } to { transform: none; opacity: 1; } }
.garden-tea-party-stepper { display: flex; align-items: center; gap: .45rem; flex: 1; min-width: 0; }
.garden-tea-party-stepper select { order: 1; flex: 1; min-width: 0; text-align: center; text-align-last: center; -webkit-appearance: none; appearance: none; cursor: pointer; }
.garden-tea-party-stepper__button--minus { order: 0; }
.garden-tea-party-stepper__button--plus { order: 2; }
.garden-tea-party-stepper__button {
    flex: none; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--inv-paper); color: var(--inv-primary); font: 500 1.45rem/1 var(--gtp-body);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 45%, transparent);
    transition: transform .15s ease, background-color .2s ease;
}
.garden-tea-party-stepper__button:hover:not(:disabled) { background: var(--inv-blush); }
.garden-tea-party-stepper__button:active:not(:disabled) { transform: scale(.92); }
.garden-tea-party-stepper__button:disabled { opacity: .35; cursor: default; }
.garden-tea-party-stepper__button:focus-visible { outline: 2px solid var(--inv-petal); outline-offset: 2px; }

/* ---------- wishes: the guestbook ---------- */

.garden-tea-party-guestbook { max-width: 23.5rem; margin: 0 auto; padding: 1.2rem 1rem 1rem; text-align: left; }
html.inv-anim .garden-tea-party-guestbook.is-sent { animation: garden-tea-party-glow 1.4s ease-out both; }
@keyframes garden-tea-party-glow {
    0% { filter: drop-shadow(0 0 0 color-mix(in srgb, var(--inv-accent) 0%, transparent)); }
    35% { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--inv-accent) 85%, transparent)); }
    100% { filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--inv-shade) 16%, transparent)); }
}
.garden-tea-party-guestbook .inv-wishes { --inv-wishes-height: 21rem; }
.garden-tea-party-guestbook .inv-wishes__list { gap: .65rem; margin-top: 1.4rem; }
.garden-tea-party-guestbook .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .5rem; border-radius: .8rem; background: color-mix(in srgb, var(--inv-blush) 55%, #fff);
    scrollbar-color: color-mix(in srgb, var(--inv-primary) 45%, transparent) transparent;
}
.garden-tea-party-guestbook .inv-wishes__empty { text-align: center; font-style: italic; color: var(--gtp-muted); opacity: 1; padding: .6rem; }
.garden-tea-party-guestbook .inv-wish {
    position: relative; padding: .75rem .9rem .7rem 2.6rem; border-radius: .7rem;
    background: #fff; color: var(--inv-text);
    border: 1px dashed color-mix(in srgb, var(--inv-accent) 85%, var(--inv-petal));
}
.garden-tea-party-guestbook .inv-wish::before {
    content: ''; position: absolute; left: .75rem; top: .85rem; width: 1.2rem; height: 1.2rem; background: var(--inv-accent);
    -webkit-mask: var(--gtp-flower-mask) center / contain no-repeat; mask: var(--gtp-flower-mask) center / contain no-repeat;
}
.garden-tea-party-guestbook .inv-wish:nth-child(3n + 2)::before { background: var(--gtp-tiny); }
.garden-tea-party-guestbook .inv-wish:nth-child(3n)::before { background: var(--inv-leaf); }
.garden-tea-party-guestbook .inv-wish__name { font: 400 1rem/1.35 var(--gtp-head); color: var(--inv-shade); }
.garden-tea-party-guestbook .inv-wish__message { font-size: 1rem; line-height: 1.55; }
.garden-tea-party-guestbook .inv-wish__time { font-size: .8rem; color: var(--gtp-muted); opacity: 1; }
.garden-tea-party-guestbook .inv-wish__reply { background: var(--inv-blush); border-left-color: var(--inv-accent); }
.garden-tea-party-guestbook .inv-wishes__page-button { color: var(--inv-primary); width: 2.75rem; height: 2.75rem; }

/* ---------- gift: tea sachets ---------- */

.garden-tea-party-sachets { max-width: 24rem; margin: 0 auto; }
.garden-tea-party-sachets .inv-gift__accounts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(9.4rem, 1fr)); gap: .9rem;
    filter: drop-shadow(0 12px 14px color-mix(in srgb, var(--inv-shade) 22%, transparent));
}
.garden-tea-party-sachets .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem;
    margin: 0; padding: 2.2rem .8rem 1.4rem; border-radius: 0; text-align: center;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 16%, transparent) 50%, transparent 0) 0 0 / 14px 1.5rem repeat-x,
        linear-gradient(color-mix(in srgb, var(--inv-primary) 16%, transparent) 50%, transparent 0) 0 0 / 14px 14px repeat-x,
        linear-gradient(color-mix(in srgb, var(--inv-leaf) 30%, var(--inv-paper)), color-mix(in srgb, var(--inv-leaf) 30%, var(--inv-paper))) 0 0 / 100% 1.5rem no-repeat,
        var(--inv-paper);
    -webkit-mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 51% repeat-x;
    mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 51% repeat-x;
}
.garden-tea-party-sachets .inv-gift__account + .inv-gift__account { margin-top: 0; }
.garden-tea-party-sachets .inv-gift__bank { min-height: 2.25rem; display: grid; place-items: center; font: 400 .9rem/1.3 var(--gtp-head); letter-spacing: .1em; color: var(--inv-shade); }
.garden-tea-party-sachets .inv-gift__number { font: 600 1.14rem/1.3 var(--gtp-body); letter-spacing: .04em; color: var(--inv-text); overflow-wrap: anywhere; }
.garden-tea-party-sachets .inv-gift__holder { font-size: .92rem; line-height: 1.35; color: var(--gtp-muted); overflow-wrap: anywhere; }
.garden-tea-party-sachets .inv-gift__account .inv-button { margin-top: .5rem; min-height: 2.75rem; padding: .5rem .95rem; font-size: .68rem; }
.garden-tea-party-sachets .inv-gift__address {
    margin-top: 1.1rem; padding: 2.4rem 1.2rem 1.4rem; border-radius: .9rem;
    background:
        linear-gradient(var(--inv-accent), var(--inv-accent)) 0 1.05rem / 100% .55rem no-repeat,
        linear-gradient(90deg, transparent calc(50% - .28rem), var(--inv-accent) 0 calc(50% + .28rem), transparent 0) 0 0 / 100% 1.6rem no-repeat,
        color-mix(in srgb, var(--gtp-twine) 22%, var(--inv-paper));
    -webkit-mask: none; mask: none;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gtp-twine) 40%, transparent), 0 14px 22px -16px color-mix(in srgb, var(--inv-shade) 60%, transparent);
}
.garden-tea-party-sachets .inv-gift__address .inv-gift__bank { min-height: 0; }
.garden-tea-party-sachets .inv-gift__address p:not(.inv-gift__bank):not(.inv-gift__holder) { font-size: .98rem; line-height: 1.5; }

/* ---------- wishlist: tea tags on twine ---------- */

.garden-tea-party-twine { max-width: 24rem; margin: 0 auto; }
.garden-tea-party-twine__tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .9rem; }
.garden-tea-party-teatag { position: relative; padding-top: 1.9rem; }
.garden-tea-party-teatag:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .45rem); }
.garden-tea-party-teatag::before {
    content: ''; position: absolute; top: .35rem; left: -.5rem; right: -.5rem; height: 2px; border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--gtp-twine) 0 6px, color-mix(in srgb, var(--gtp-twine) 70%, #fff) 6px 8px);
}
.garden-tea-party-teatag::after {
    content: ''; position: absolute; top: .4rem; left: 50%; width: 1.5px; height: 2.15rem; translate: -50% 0; background: var(--gtp-twine);
}
.garden-tea-party-teatag__card {
    position: relative; isolation: isolate; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: 2.1rem .75rem 1rem; transform-origin: 50% -1.5rem;
    filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--inv-shade) 24%, transparent));
}
.garden-tea-party-teatag__card::before { clip-path: polygon(1.4rem 0, calc(100% - 1.4rem) 0, 100% 1.4rem, 100% 100%, 0 100%, 0 1.4rem); }
.garden-tea-party-teatag__hole { top: .7rem; width: .75rem; height: .75rem; box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--inv-accent) 80%, var(--inv-petal)), inset 0 1px 2px rgb(0 0 0 / .25); }
.garden-tea-party-teatag__photo { width: 4.4rem; height: 4.4rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--inv-accent); }
.garden-tea-party-teatag__icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--inv-blush); color: var(--inv-petal); }
.garden-tea-party-teatag__icon .garden-tea-party-icon { width: 1.6rem; height: 1.6rem; }
.garden-tea-party-teatag__name { margin-top: .2rem; font: 400 1.02rem/1.3 var(--gtp-head); color: var(--inv-shade); overflow-wrap: anywhere; }
.garden-tea-party-teatag__note { font-size: .88rem; line-height: 1.4; font-style: italic; color: var(--gtp-muted); }
.garden-tea-party-teatag__link {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; margin-top: auto; padding: .3rem .95rem;
    border-radius: 999px; color: var(--inv-primary); text-decoration: none; font: 400 .74rem/1 var(--gtp-head); letter-spacing: .14em; text-transform: uppercase;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 45%, transparent);
}
.garden-tea-party-teatag__link:focus-visible { outline: 2px solid var(--inv-petal); outline-offset: 2px; }
html.inv-anim .garden-tea-party-teatag__card { animation: garden-tea-party-tag-sway 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
@keyframes garden-tea-party-tag-sway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }

/* ---------- co-hosts: place cards ---------- */

.garden-tea-party-placecards { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.garden-tea-party-placecard {
    display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 8.6rem; max-width: 100%; padding: .85rem 1rem .8rem;
    border-radius: .45rem;
    background: linear-gradient(color-mix(in srgb, var(--inv-leaf) 14%, var(--inv-paper)) 0 38%, var(--inv-paper) 38%);
    box-shadow: inset 0 calc(38% * 0) 0 0 transparent, 0 1px 0 color-mix(in srgb, var(--inv-primary) 25%, transparent), 0 12px 18px -12px color-mix(in srgb, var(--inv-shade) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 14%, transparent);
}
.garden-tea-party-placecard svg { width: 1.3rem; height: 1.3rem; }
.garden-tea-party-placecard span { font: 400 1.02rem/1.35 var(--gtp-head); color: var(--inv-text); overflow-wrap: anywhere; }

/* ---------- contacts: calling cards ---------- */

.garden-tea-party-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; max-width: 24rem; margin: 0 auto; }
.garden-tea-party-calling {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1.6rem 1.2rem 1.4rem; border-radius: .5rem;
    background: var(--inv-paper);
    box-shadow: inset 0 0 0 6px var(--inv-paper), inset 0 0 0 7px color-mix(in srgb, var(--inv-primary) 35%, transparent), 0 16px 28px -18px color-mix(in srgb, var(--inv-shade) 60%, transparent);
}
.garden-tea-party-calling__stamp { position: absolute; top: -.9rem; right: -.4rem; width: 2.6rem; height: 2.6rem; rotate: 14deg; }
.garden-tea-party-calling__name { font: 400 1.28rem/1.3 var(--gtp-head); color: var(--inv-shade); }
.garden-tea-party-calling__role { font-style: italic; color: var(--gtp-muted); }
.garden-tea-party-calling .inv-button { margin-top: .8rem; }
.garden-tea-party-calling__phone { margin-top: .5rem; font-weight: 600; }

/* ---------- health protocol ---------- */

.garden-tea-party-protocol__card { max-width: 22rem; margin: 0 auto; padding: 1rem; }
.garden-tea-party-protocol__list { display: grid; gap: .6rem; text-align: left; }
.garden-tea-party-protocol__list li { display: flex; align-items: center; gap: .7rem; }
.garden-tea-party-protocol__list .garden-tea-party-icon { width: 2.1rem; height: 2.1rem; padding: .42rem; border-radius: 50%; background: var(--inv-blush); color: var(--inv-primary); }
.garden-tea-party-protocol__note { margin-top: .8rem; font-style: italic; color: var(--gtp-muted); }

/* ---------- vendors: jam-jar labels ---------- */

.garden-tea-party-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; max-width: 24rem; margin: 0 auto; }
.garden-tea-party-label {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: 1rem .7rem .8rem;
    border-radius: 1.6rem / 1.1rem; background: var(--inv-paper);
    box-shadow: inset 0 0 0 4px var(--inv-paper), inset 0 0 0 5.5px color-mix(in srgb, var(--inv-accent) 85%, var(--inv-petal)), 0 12px 20px -14px color-mix(in srgb, var(--inv-shade) 55%, transparent);
}
.garden-tea-party-label__role { font: 400 .64rem/1.4 var(--gtp-head); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.garden-tea-party-label__name { font: 400 1.04rem/1.3 var(--gtp-head); color: var(--inv-shade); overflow-wrap: anywhere; }
.garden-tea-party-label__link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .4rem; color: var(--inv-petal); font-size: .9rem; text-decoration: none; overflow-wrap: anywhere; }
.garden-tea-party-label__link:focus-visible { outline: 2px solid var(--inv-petal); outline-offset: 1px; }
.garden-tea-party-label:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); }

/* ---------- closing ---------- */

.garden-tea-party-closing { padding-bottom: 3.4rem; }
.garden-tea-party-plate--closing { width: min(13rem, 60vw); }
.garden-tea-party-plate__monogram--teapot { --gtp-band: var(--inv-accent); }
.garden-tea-party-closing__thanks { font: 400 clamp(2.6rem, 12vw, 3.1rem)/1.15 var(--gtp-script); color: var(--inv-shade); }
.garden-tea-party-closing__message { max-width: 23rem; margin: .6rem auto 0; color: var(--inv-text); }
.garden-tea-party-closing__with { margin-top: 1.4rem; font-style: italic; color: var(--gtp-muted); }
.garden-tea-party-closing__signature { margin-top: .1rem; padding: 0 .2em; font: 400 2.1rem/1.25 var(--gtp-script); color: var(--inv-petal); overflow-wrap: anywhere; }

/* ---------- shared components: nav, music, QR, branding, ambient ---------- */

.garden-tea-party-nav.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-paper) 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 78%, transparent);
    --inv-nav-active: var(--inv-primary);
    border-color: color-mix(in srgb, var(--inv-accent) 70%, transparent);
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--inv-shade) 70%, transparent), inset 0 0 0 3px color-mix(in srgb, var(--inv-paper) 90%, transparent);
    font-family: var(--gtp-body); font-weight: 500;
}
.garden-tea-party-nav .inv-nav__item:focus-visible { outline: 2px solid var(--inv-petal); outline-offset: 1px; }

.inv-music { right: calc(var(--gtp-edge) + 1rem); }
.inv-music__button { background: var(--inv-primary); color: #fff; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--inv-shade) 80%, transparent), 0 0 0 2px var(--inv-paper), 0 0 0 3.5px var(--inv-accent); }
.inv-autoscroll { color: var(--inv-primary); background: color-mix(in srgb, var(--inv-paper) 94%, transparent); border-color: color-mix(in srgb, var(--inv-accent) 70%, transparent); }
.inv-autoscroll--running { background: var(--inv-primary); color: #fff; }
.inv-checkin { position: relative; z-index: 1; margin: 1rem auto 0; font-family: var(--gtp-body); }
.inv-checkin__title { color: var(--inv-primary); font-family: var(--gtp-head); }

.garden-tea-party-branding { position: relative; z-index: 1; padding-top: 1.2rem; color: var(--gtp-muted); font-size: .85rem; opacity: 1; }
.garden-tea-party-branding a { color: var(--inv-primary); }
/* the music player already leaves room for the menu: the page ends 110–150px under the last line */
body.garden-tea-party-body:has(.inv-music__space) .garden-tea-party-branding { padding-bottom: 3rem; }
.inv-ambient { --inv-ambient-1: var(--inv-accent); --inv-ambient-2: color-mix(in srgb, var(--inv-accent) 35%, #fff); }

/* ---------- scroll-drawn details (the default state is the finished drawing) ---------- */

@supports (animation-timeline: view()) {
    html.inv-anim .garden-tea-party-menu__dots { animation: garden-tea-party-draw-x linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    html.inv-anim .garden-tea-party-vine::before, html.inv-anim .garden-tea-party-vine::after { animation: garden-tea-party-draw-y linear both; animation-timeline: view(); animation-range: entry 5% cover 65%; }
    html.inv-anim .garden-tea-party-plate__sprig { animation: garden-tea-party-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes garden-tea-party-draw-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes garden-tea-party-draw-y { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes garden-tea-party-grow { from { opacity: 0; transform: scale(.5) rotate(20deg); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}