/*
 * Template "Amplop Terakota" (Pernikahan): a terracotta envelope with a wax seal, then
 * layered card stock with deckled edges.
 * Colors from the variant (x-inv.head): --inv-primary (terracotta stock, buttons), --inv-accent
 * (ochre lines, chip), --inv-background (cream page), --inv-text, --inv-rust (deep stock, liner),
 * --inv-cream (light card), --inv-clay (soft stock), --inv-seal (wax), --inv-leaf (dried leaves).
 * Every sheet (.at-sheet--cream|clay|terra|rust) sets its own ink and sprig colors.
 * SVG shapes live in sections/_defs.blade.php.
 */

:root {
    --inv-primary: #b0532d;
    --inv-accent: #c4904f;
    --inv-background: #f5ebdd;
    --inv-text: #3b2820;
    --inv-rust: #7f3520;
    --inv-cream: #fcf6ec;
    --inv-clay: #e6c3a6;
    --inv-seal: #73241a;
    --inv-leaf: #8a8a62;
    --inv-radius: 12px;

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

    /* envelope tones */
    --at-env-flap: color-mix(in srgb, var(--inv-primary) 92%, #fff);
    --at-env-side: var(--inv-primary);
    --at-env-front: color-mix(in srgb, var(--inv-primary) 94%, #fff);
    --at-env-dark: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-rust));

    /* deckled paper: a torn strip for sheet tops, a 72px frame for cards (9-slice mask) */
    --at-deckle-strip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14L0 6L2 2L4.2 3.7L7.1 4.6L10.4 6.3L13.5 8.5L16 7.7L17.6 7.5L21.4 11L24.2 9.4L27.3 6.6L31.1 5L34.7 4.7L36.9 5.4L40.8 6.5L44.4 2.5L47.3 6.1L49.3 11.8L51.7 4.8L55.6 6.1L58.1 4.3L60.6 4.7L63.7 3.9L66.3 8.9L69.4 6.1L72.6 9.5L75.9 4L78.3 4.6L81.8 11.5L85.3 2.6L87.2 2.6L89.2 9.6L91.9 9.2L95.7 9.1L99.4 9.3L101.6 2.1L103.3 2L105.4 7.9L108.6 3.9L110.7 5L112.5 8.4L116.2 7.1L117.8 9.2L121.7 6.5L123.9 3.8L126.8 2.4L130 7.7L131.6 2.9L133.4 7.5L135 9.1L139 9.6L141.6 4L145.3 5.2L147.8 9.1L150.2 7L152.5 7.8L154.5 4.5L158.5 7.1L160 6L160 14Z'/%3E%3C/svg%3E");
    --at-deckle-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M5 1.7L7.9 1.3L10.5 3.6L14 3.4L16.2 1.6L18.7 1.5L21.6 3.4L24.3 3.3L27.4 2.6L30.5 0.7L32.7 3.5L34.8 4.5L36.9 1.9L39.9 2.9L41.6 4.8L44.9 5.5L48.3 4.3L51.8 0.7L54.9 3.8L58 3.4L59.6 1.3L61.4 1.2L63.2 0.7L66 5.7L70.7 5L67.8 7L68.9 9.1L69.1 12.7L68.6 14L67.2 15.6L69.2 18L70.2 19.7L66.1 23L66.4 24.9L70.7 27.5L68.1 29.5L71 31.4L67.9 33.6L68.8 36.3L71 39.9L69.7 42.3L71.4 43.9L70.9 46.3L66.4 48.4L67.3 51.6L66.8 54L68.6 58L68.3 60.5L69.2 62.8L68.7 65.4L66.1 67.7L63.8 67L60.4 70.2L58 68.6L55.2 69.1L52.3 69.9L48.9 68.4L45.6 69L42.9 67.6L40 67.1L36.6 70.8L33.4 70.1L31.4 67.2L27.9 67.4L24.9 66.6L22.6 71L20.3 66.1L16.8 68.8L14 68.6L11 66.6L7.9 68L5 67.5L4.2 66.6L2.8 63.4L0.9 60.4L3.4 58L4 53.8L1.8 51L3.7 48.9L3.9 46.8L1.1 45.1L4.6 42.3L4.8 39.3L3.6 36.5L4.5 33L1.3 30.8L3.8 27.7L0.7 24.4L1.2 21.6L4.4 19.6L1.7 16.1L3.4 14L0.7 11.2L1.3 8.8L5.6 7.2L1.2 5Z'/%3E%3C/svg%3E");

    /* default sheet (cream) */
    --at-bg: var(--inv-background);
    --at-ink: var(--inv-text);
    --at-soft: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --at-head: var(--inv-primary);
    --at-line: var(--inv-accent);
    --at-s1: var(--inv-leaf);
    --at-s2: var(--inv-primary);
    --at-s3: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-clay));
}

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

body.at-body {
    min-height: 100vh;
    background: var(--inv-rust);
    color: var(--inv-text);
    font-family: var(--at-body);
    font-size: 15px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

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

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

/* a sheet of card stock: its own colors, a torn top edge over the sheet before it */
.at-sheet {
    position: relative; background-color: var(--at-bg); color: var(--at-ink);
    background-image:
        radial-gradient(120% 60% at 15% 0%, rgb(255 255 255 / .1), transparent 60%),
        radial-gradient(90% 50% at 100% 100%, rgb(0 0 0 / .05), transparent 70%);
}
.at-sheet::before, .at-sheet::after {
    content: ''; position: absolute; left: 0; right: 0; height: 14px; pointer-events: none;
    -webkit-mask: var(--at-deckle-strip) 0 0 / 160px 14px repeat-x; mask: var(--at-deckle-strip) 0 0 / 160px 14px repeat-x;
}
/* a darker paper edge peeking out, then the sheet's own torn edge */
.at-sheet::before { top: -15px; background: color-mix(in srgb, var(--at-bg) 70%, #000); opacity: .35; -webkit-mask-position: 53px 0; mask-position: 53px 0; }
.at-sheet::after { top: -12px; background: var(--at-bg); }
.at-hero::before, .at-hero::after { display: none; }

.at-sheet--cream { --at-bg: var(--inv-background); }
.at-sheet--clay {
    --at-bg: var(--inv-clay);
    --at-soft: color-mix(in srgb, var(--inv-text) 86%, var(--inv-clay));
    --at-head: var(--inv-rust);
    --at-line: color-mix(in srgb, var(--inv-rust) 55%, var(--inv-clay));
    --at-s3: var(--inv-cream);
}
.at-sheet--terra {
    --at-bg: var(--inv-primary);
    --at-ink: var(--inv-cream);
    --at-soft: color-mix(in srgb, var(--inv-cream) 88%, var(--inv-primary));
    --at-head: var(--inv-cream);
    --at-line: color-mix(in srgb, var(--inv-clay) 80%, var(--inv-primary));
    --at-s1: var(--inv-clay);
    --at-s2: var(--inv-cream);
    --at-s3: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-cream));
}
.at-sheet--rust {
    --at-bg: var(--inv-rust);
    --at-ink: var(--inv-cream);
    --at-soft: color-mix(in srgb, var(--inv-cream) 86%, var(--inv-rust));
    --at-head: var(--inv-clay);
    --at-line: color-mix(in srgb, var(--inv-accent) 85%, var(--inv-cream));
    --at-s1: color-mix(in srgb, var(--inv-clay) 85%, var(--inv-rust));
    --at-s2: var(--inv-accent);
    --at-s3: var(--inv-cream);
}

/* ---------- shared bits ---------- */
.at-amp { font-family: var(--at-script); color: var(--inv-accent); }
.at-sheet--terra .at-amp, .at-sheet--rust .at-amp { color: var(--inv-clay); }
.at-divider { display: block; width: 168px; height: 26px; margin: .35rem auto 0; overflow: visible; }
.at-lead { max-width: 22rem; margin: 0 auto 1.5rem; color: var(--at-soft); font-size: .92rem; }
.at-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.7rem; line-height: 1.8; color: var(--at-head); margin-bottom: .6rem; }

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

/* the wax seal: an svg blob with the monogram pressed into it */
.at-seal { position: relative; display: block; width: 74px; height: 74px; }
.at-seal__part { position: absolute; inset: 0; display: grid; place-items: center; }
.at-seal__wax { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 5px rgb(0 0 0 / .3)); }
.at-seal__letters {
    position: relative; display: flex; align-items: baseline; gap: .05rem;
    font: 700 1.3rem/1 var(--at-serif); letter-spacing: .02em;
    color: color-mix(in srgb, var(--inv-seal) 62%, #000);
    text-shadow: 0 1px 0 rgb(255 255 255 / .4), 0 -1px 0 rgb(0 0 0 / .4);
}
.at-seal__letters i { font: normal 400 1rem/1 var(--at-script); margin: 0 .05rem; }
/* the split seal: two halves along a jagged crack */
.at-seal__part--left { clip-path: polygon(0 0, 52% 0, 46% 22%, 55% 41%, 45% 60%, 54% 79%, 48% 100%, 0 100%); }
.at-seal__part--right { clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%, 54% 79%, 45% 60%, 55% 41%, 46% 22%); }

/* ---------- backdrop (wide screens) ---------- */
.at-backdrop { position: fixed; inset: 0; z-index: -1; display: none; pointer-events: none; }
.at-backdrop__liner { display: block; width: 100%; height: 100%; }
.at-backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 50%, transparent, rgb(0 0 0 / .35)); }

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

/* ---------- cover ---------- */
.at-cover {
    position: fixed; top: 0; bottom: 0; left: 50%; z-index: 30; width: var(--at-col); transform: translateX(-50%);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    background:
        radial-gradient(70% 40% at 50% 58%, rgb(255 255 255 / .55), transparent 75%),
        radial-gradient(120% 60% at 50% 110%, color-mix(in srgb, var(--inv-clay) 70%, transparent), transparent 70%),
        var(--inv-background);
    --at-s3: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-clay));
}
.at-cover--leave { transition: opacity .55s ease; }
html.inv-anim .at-cover--leave { transition-delay: 1.55s; }
.at-cover--gone { opacity: 0; }
.at-cover__sprig { width: clamp(130px, 40%, 185px); }
.at-cover .at-sprig--tl { top: -6px; left: -6px; }
.at-cover .at-sprig--br { bottom: -6px; right: -6px; }
.at-cover__inner {
    position: relative; z-index: 1; min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    padding: 2.6rem 1.4rem 2.4rem; text-align: center;
}
.at-cover__title { font: 600 .74rem/1.4 var(--at-body); letter-spacing: .34em; text-transform: uppercase; color: var(--inv-primary); }
.at-cover__names {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: .4rem;
    font: 400 clamp(2.9rem, 14vw, 3.7rem)/1.05 var(--at-script); color: var(--inv-rust);
}
.at-cover__names .at-amp { font-size: .8em; }
.at-cover__date {
    display: flex; align-items: center; gap: .7rem;
    font: 600 1rem/1.3 var(--at-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-text);
}
.at-cover__date::before, .at-cover__date::after { content: ''; width: 1.6rem; height: 1px; background: var(--inv-accent); }
.at-cover__quote { max-width: 19rem; font: italic 500 1rem/1.45 var(--at-serif); color: color-mix(in srgb, var(--inv-text) 82%, var(--inv-background)); }

/* the envelope (3:2): back + liner, card, pocket, flap, seal */
.at-env-wrap { width: min(80vw, 300px, 52vh); margin: 1.1rem 0 .6rem; }
.at-env { position: relative; aspect-ratio: 3 / 2; perspective: 900px; filter: drop-shadow(0 18px 22px rgb(70 30 15 / .28)); }
.at-env__back, .at-env__pocket { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.at-env__back { z-index: 1; }
.at-env__card {
    position: absolute; z-index: 2; left: 7%; right: 7%; top: 6%; height: 88%; padding: 7px;
    background: var(--inv-cream); display: grid; place-items: stretch;
}
.at-env__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.at-env__letters { display: grid; place-items: center; font: 400 3rem/1 var(--at-script); color: var(--inv-primary); }
.at-env__pocket { z-index: 3; }
.at-env__flap { position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 61%; transform-origin: 50% 0; transform-style: preserve-3d; }
.at-env__face { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.at-env__face--out { filter: drop-shadow(0 3px 3px rgb(0 0 0 / .18)); }
.at-env__face--in { transform: rotateX(180deg); }
.at-seal--cover { position: absolute; z-index: 6; left: 50%; top: 61%; width: 70px; height: 70px; margin: -38px 0 0 -35px; }
.at-seal--cover .at-seal__letters { font-size: 1.2rem; }

/* opening the envelope: the seal breaks, the flap swings up, the card slides out */
@keyframes at-seal-left { to { transform: translate(-26px, 26px) rotate(-28deg); opacity: 0; } }
@keyframes at-seal-right { to { transform: translate(26px, 30px) rotate(24deg); opacity: 0; } }
@keyframes at-flap {
    0% { transform: rotateX(0); z-index: 5; }
    49% { z-index: 5; }
    50% { z-index: 1; }
    100% { transform: rotateX(180deg); z-index: 1; }
}
@keyframes at-card-out { to { transform: translateY(-64%); } }
@keyframes at-fade-out { to { opacity: 0; transform: translateY(8px); } }
html.inv-anim .at-cover--leave .at-seal__part--left { animation: at-seal-left .5s cubic-bezier(.5, 0, .7, .4) forwards; }
html.inv-anim .at-cover--leave .at-seal__part--right { animation: at-seal-right .5s cubic-bezier(.5, 0, .7, .4) forwards; }
html.inv-anim .at-cover--leave .at-env__flap { animation: at-flap .7s cubic-bezier(.45, 0, .3, 1) .3s forwards; }
html.inv-anim .at-cover--leave .at-env__card { animation: at-card-out .75s cubic-bezier(.2, .7, .2, 1) .9s forwards; }
html.inv-anim .at-cover--leave .at-cover__guest,
html.inv-anim .at-cover--leave .at-open,
html.inv-anim .at-cover--leave .at-cover__quote { animation: at-fade-out .35s ease forwards; }

/* the guest: an address label */
.at-cover__guest {
    position: relative; width: min(100%, 17.5rem); padding: .85rem 1.2rem .9rem;
    background: var(--inv-cream); color: var(--inv-text);
}
.at-cover__guest::before {
    content: ''; position: absolute; inset: 9px; pointer-events: none;
    border: 1px dashed color-mix(in srgb, var(--inv-primary) 45%, transparent);
}
.at-cover__to { font: 600 .68rem/1.4 var(--at-body); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-primary); }
.at-cover__guest-name { display: block; margin-top: .15rem; font: 700 1.3rem/1.25 var(--at-serif); color: var(--inv-text); overflow-wrap: anywhere; }
.at-cover__note { margin-top: .25rem; font-size: .72rem; line-height: 1.45; color: color-mix(in srgb, var(--inv-text) 80%, var(--inv-cream)); }
.at-open.inv-button { margin-top: .5rem; padding: .85rem 1.7rem; font-size: .9rem; }

/* ---------- hero (top of the page) ---------- */
.at-hero { padding: 3.2rem 1.5rem 3.6rem; text-align: center; }
.at-hero .at-sprig { z-index: 0; }
.at-hero > :not(.at-sprig) { position: relative; z-index: 1; }
.at-hero__kicker { font: 600 .74rem/1.4 var(--at-body); letter-spacing: .34em; text-transform: uppercase; color: var(--inv-primary); }
.at-hero__stack { --inv-parallax: 18px; position: relative; width: min(66vw, 250px); margin: 1.8rem auto 2.4rem; aspect-ratio: 4 / 5; }
.at-hero__layer, .at-hero__card { position: absolute; inset: 0; }
.at-hero__layer { border-radius: 3px; box-shadow: 0 14px 26px -16px rgb(0 0 0 / .5); }
.at-hero__layer--terra { background: var(--inv-primary); transform: rotate(-6deg) translate(-6px, 6px); }
.at-hero__layer--clay { background: var(--inv-clay); transform: rotate(4deg) translate(6px, 2px); }
.at-hero__card { padding: 9px; background: var(--inv-cream); }
.at-hero__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-hero__letters { display: grid; place-items: center; height: 100%; font: 400 4rem/1 var(--at-script); color: var(--inv-primary); background: color-mix(in srgb, var(--inv-clay) 40%, var(--inv-cream)); }
.at-seal--hero { position: absolute; z-index: 2; left: 50%; bottom: -34px; margin-left: -37px; }
.at-hero__names { font: 400 clamp(3rem, 14vw, 3.8rem)/1.1 var(--at-script); color: var(--inv-rust); }
.at-hero__date { margin-top: .3rem; font: 600 1.02rem/1.3 var(--at-serif); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- sections ---------- */
.at-main { position: relative; }
.at-section { padding: 3.6rem 1.35rem 3.8rem; text-align: center; scroll-margin-top: .5rem; }
.at-section > :not(.at-sprig) { position: relative; z-index: 1; }
.at-section__sprig { width: clamp(104px, 30%, 140px); }
.at-section .at-sprig--tl { top: -2px; left: -4px; }
.at-section .at-sprig--tr { top: -2px; right: -4px; }
.at-section .at-sprig--bl { bottom: -4px; left: -4px; }
.at-section .at-sprig--br { bottom: -4px; right: -4px; }
.at-section:has(> .at-sprig--tl, > .at-sprig--tr) { padding-top: 5.4rem; }

.at-heading { margin-bottom: 1.6rem; }
.at-heading__kicker { font: 600 .68rem/1.4 var(--at-body); letter-spacing: .3em; text-transform: uppercase; color: var(--at-line); }
.at-sheet--clay .at-heading__kicker, .at-sheet--cream .at-heading__kicker { color: var(--inv-primary); }
.at-heading__title { margin-top: .1rem; font: 400 clamp(2.5rem, 11vw, 2.95rem)/1.15 var(--at-script); color: var(--at-head); }

/* a cream card inside any sheet */
.at-card { position: relative; padding: 1.8rem 1.35rem; background: var(--inv-cream); color: var(--inv-text); }

/* ---------- opening ---------- */
.at-opening__greeting { font: italic 600 1.3rem/1.4 var(--at-serif); color: var(--inv-clay); margin-bottom: .6rem; }
.at-opening__message { max-width: 23rem; margin: 0 auto; color: var(--at-soft); font-size: .93rem; }
.at-quote { margin-top: 2.2rem; padding: 1.6rem 1.4rem 1.5rem; background: var(--inv-cream); color: var(--inv-text); transform: rotate(-1.2deg); }
.at-quote__mark { display: block; width: 28px; height: 21px; margin: 0 auto .5rem; color: var(--inv-primary); opacity: .6; }
.at-quote blockquote { font: italic 500 1.12rem/1.55 var(--at-serif); }
.at-quote figcaption { margin-top: .6rem; font: 600 .7rem/1.4 var(--at-body); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); }

/* ---------- couple ---------- */
.at-person { position: relative; margin: 0 auto; max-width: 21rem; }
.at-person__stock {
    position: absolute; inset: 0; border-radius: 3px; background: var(--inv-clay);
    transform: rotate(-2.5deg) translate(-4px, 6px); box-shadow: 0 16px 26px -18px rgb(0 0 0 / .5);
}
.at-person--bride .at-person__stock { background: var(--inv-primary); opacity: .85; transform: rotate(2.5deg) translate(5px, 6px); }
.at-person__card { position: relative; padding: 1.8rem 1.3rem 1.7rem; background: var(--inv-cream); }
.at-oval { position: relative; width: min(48vw, 172px); aspect-ratio: 4 / 5; margin: 0 auto 1.2rem; }
.at-oval::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--inv-accent); }
.at-oval img, .at-oval__empty {
    display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 4px var(--inv-cream), 0 0 0 5px color-mix(in srgb, var(--inv-accent) 45%, transparent);
}
.at-oval__empty { display: grid; place-items: center; background: color-mix(in srgb, var(--inv-clay) 55%, var(--inv-cream)); font: 400 3.4rem/1 var(--at-script); color: var(--inv-primary); }
.at-person__label { font: 600 .66rem/1.4 var(--at-body); letter-spacing: .26em; text-transform: uppercase; color: var(--inv-primary); }
.at-person__nick { font: 400 2.9rem/1.1 var(--at-script); color: var(--inv-rust); }
.at-person__name { margin-top: .1rem; font: 700 1.32rem/1.3 var(--at-serif); color: var(--inv-text); }
.at-person__parents { margin-top: .5rem; font-size: .88rem; color: color-mix(in srgb, var(--inv-text) 80%, var(--inv-cream)); }
.at-person__parents strong { color: var(--inv-text); font-weight: 600; }
.at-person__ig {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; padding: .45rem 1rem;
    border-radius: 999px; color: var(--inv-primary); text-decoration: none; font-size: .82rem; font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 50%, transparent);
}
.at-couple__amp { display: grid; place-items: center; margin: 1.6rem auto 1.3rem; width: 64px; height: 64px; border-radius: 50%; background: var(--inv-seal); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--inv-seal) 80%, #000), 0 6px 12px -4px rgb(0 0 0 / .4); }
.at-couple__amp span { font: 400 2.5rem/1 var(--at-script); color: var(--inv-cream); margin-top: .3rem; }

/* ---------- countdown (x-inv.countdown) ---------- */
.at-countdown__day { font: 400 2.5rem/1.1 var(--at-script); color: var(--inv-clay); }
.at-countdown__date { margin-top: .15rem; font: 600 1.05rem/1.3 var(--at-serif); letter-spacing: .16em; text-transform: uppercase; }
.at-countdown .inv-countdown { gap: .5rem; margin-top: 1.4rem; }
.at-countdown .inv-countdown__item {
    flex: 1; min-width: 0; max-width: 5rem; padding: .85rem .2rem .7rem; border-radius: 0;
    background: var(--inv-cream); color: var(--inv-text);
    -webkit-mask-box-image: var(--at-deckle-frame) 14 / 8px round;
}
.at-countdown .inv-countdown__value { font: 700 2rem/1.1 var(--at-serif); color: var(--inv-primary); }
.at-countdown .inv-countdown__label { margin-top: .1rem; font: 600 .62rem/1.3 var(--at-body); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.at-countdown .inv-countdown__done { margin-top: 1rem; font: italic 500 1.1rem/1.5 var(--at-serif); }
.at-countdown .inv-countdown__actions { margin-top: 1.4rem; }
.at-countdown .inv-countdown__actions .inv-button { padding: .6rem 1rem; font-size: .76rem; }

/* ---------- events: rounded cards with a header band over the veiled cover photo ---------- */
.at-events {
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-clay) 95%, transparent) 0%, color-mix(in srgb, var(--inv-clay) 80%, transparent) 32%, color-mix(in srgb, var(--inv-clay) 86%, transparent) 100%),
        var(--at-photo, none);
    background-size: cover; background-position: center 30%; background-repeat: no-repeat;
}
.at-events__lead { color: var(--inv-text); }
/* two leaf-shaped photos above the title, tilted like a little collage */
.at-collage { position: relative; height: 9.5rem; margin: -1.4rem auto 1.6rem; max-width: 21rem; }
.at-collage__photo {
    position: absolute; width: 56%; height: 7.6rem; background: var(--at-photo) center 30% / cover no-repeat, var(--inv-clay);
    border: 5px solid var(--inv-cream); box-shadow: 0 16px 26px -16px rgb(0 0 0 / .55);
}
.at-collage__photo--1 { left: 0; bottom: 0; border-radius: 0 0 0 3.2rem; rotate: -3deg; z-index: 1; }
.at-collage__photo--2 { right: 0; top: 0; border-radius: 0 3.2rem 0 0; rotate: 3deg; }
.at-collage::before {
    content: ''; position: absolute; left: -1.35rem; right: 10%; top: 24%; bottom: 24%;
    border-radius: 0 999px 999px 0; background: color-mix(in srgb, var(--inv-primary) 28%, transparent);
}

.at-events__list { display: grid; gap: 1.6rem; }
.at-ecard {
    position: relative; overflow: hidden; border-radius: 2.2rem 2.2rem 1.6rem 1.6rem; color: var(--inv-text);
    background: color-mix(in srgb, var(--inv-cream) 93%, transparent);
    box-shadow: 0 22px 40px -24px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .55);
}
.at-ecard__band {
    padding: 1.1rem 1rem 1.7rem; color: var(--inv-cream); border-radius: 2.2rem 2.2rem 0 0;
    background: radial-gradient(120% 140% at 10% 0%, rgb(255 255 255 / .16), transparent 55%), var(--inv-primary);
}
.at-ecard__name { font: 400 2.6rem/1.1 var(--at-script); color: var(--inv-cream); overflow-wrap: anywhere; }
.at-ecard__photo {
    position: relative; width: 5.2rem; height: 5.2rem; margin: -1.4rem auto 0; border-radius: 50%;
    background: var(--at-photo) center 30% / cover no-repeat, var(--inv-clay);
    box-shadow: 0 0 0 4px var(--inv-cream), 0 0 0 5px var(--inv-accent), 0 10px 18px -8px rgb(0 0 0 / .45);
}
.at-ecard__body { padding: 1.4rem 1.2rem 1.5rem; }
.at-event__date, .at-event__time, .at-event__dress { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.at-event__time { font: 700 1.25rem/1.35 var(--at-serif); letter-spacing: .04em; color: var(--inv-primary); }
.at-event__date { margin-top: .1rem; font: 600 1.02rem/1.35 var(--at-serif); }
.at-event__place { max-width: 20rem; margin: .9rem auto 0; padding-top: .9rem; border-top: 1px dashed color-mix(in srgb, var(--inv-primary) 35%, transparent); }
.at-event__place > svg { display: block; margin: 0 auto .25rem; }
.at-event__venue { display: block; font: 700 1.15rem/1.3 var(--at-serif); }
.at-event__address { display: block; margin-top: .15rem; font-size: .86rem; line-height: 1.5; color: color-mix(in srgb, var(--inv-text) 82%, var(--inv-cream)); }
.at-event__dress {
    width: fit-content; max-width: 100%; margin: .8rem auto 0; padding: .3rem .9rem; border-radius: 999px; font-size: .84rem; font-style: italic;
    background: color-mix(in srgb, var(--inv-clay) 45%, var(--inv-cream));
}
.at-ecard svg { flex: none; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--inv-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.at-event__place > svg { width: 1.3rem; height: 1.3rem; }
.at-event__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.2rem; }
.at-event__actions .inv-button { gap: .35rem; padding: .62rem .5rem; font-size: .76rem; white-space: nowrap; }
.at-event__actions .inv-button svg { stroke: currentColor; width: 1rem; height: 1rem; }
@media (max-width: 360px) { .at-event__actions { grid-template-columns: 1fr; } }

/* ---------- love story: a compact zig-zag on a stitched centre line, wax seals as markers ---------- */
.at-story__list { position: relative; padding: 0; list-style: none; }
.at-story__list::before {
    content: ''; position: absolute; top: .6rem; bottom: .4rem; left: 50%; translate: -1px 0;
    border-left: 2px dashed color-mix(in srgb, var(--inv-primary) 45%, transparent);
}
.at-moment {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.3rem minmax(0, 1fr);
    grid-template-areas: "text dot side"; column-gap: .7rem; align-items: start;
}
.at-moment + .at-moment { margin-top: 1.8rem; }
.at-moment--flip { grid-template-areas: "side dot text"; }
.at-moment__dot { grid-area: dot; position: relative; width: 2.3rem; height: 2.3rem; }
.at-moment__dot svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .3)); }
.at-moment__dot b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1rem/1 var(--at-serif); color: var(--inv-cream); }
.at-moment__text { grid-area: text; min-width: 0; text-align: right; }
.at-moment__side { grid-area: side; min-width: 0; display: grid; justify-items: start; gap: .45rem; text-align: left; }
.at-moment--flip .at-moment__text { text-align: left; }
.at-moment--flip .at-moment__side { justify-items: end; text-align: right; }
.at-moment__title { padding-top: .1rem; font: 700 1.2rem/1.25 var(--at-serif); color: var(--inv-rust); overflow-wrap: anywhere; }
.at-moment__rule { display: block; width: 80%; margin: .35rem 0 .4rem auto; border-top: 2px dotted var(--inv-accent); }
.at-moment--flip .at-moment__rule { margin-inline: 0 auto; }
.at-moment__story { font-size: .84rem; line-height: 1.6; color: var(--at-soft); overflow-wrap: anywhere; }
.at-moment__date { font: 400 1.75rem/1.1 var(--at-script); color: var(--inv-primary); overflow-wrap: anywhere; }
.at-moment__photo {
    display: block; width: min(100%, 7.6rem); aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: center 30%;
    box-shadow: 0 0 0 4px var(--inv-cream), 0 0 0 5px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 12px 22px -10px rgb(0 0 0 / .45);
}
/* the seal is pressed in when its moment arrives */
html.inv-anim .at-moment__dot { transition: transform .55s cubic-bezier(.3, 1.5, .5, 1) .35s; }
html.inv-anim .at-moment:not(.is-revealed) .at-moment__dot { transform: scale(1.6) rotate(-25deg); }

/* ---------- gallery (x-inv.gallery variant="slider") ---------- */
.at-gallery .inv-gallery-slider { gap: .9rem; grid-template-columns: minmax(0, 1fr); }
.at-gallery .inv-gallery-slider__thumb { width: 4.6rem; border: 3px solid transparent; border-radius: 6px; opacity: .6; background: var(--inv-cream); }
.at-gallery .inv-gallery-slider__thumb.is-active { opacity: 1; border-color: var(--inv-cream); box-shadow: 0 0 0 2px var(--inv-accent); }
.at-gallery .inv-gallery-slider__arrow { background: var(--inv-cream); color: var(--inv-rust); box-shadow: 0 6px 14px -8px rgb(0 0 0 / .6); }
.at-gallery .inv-gallery-slider__stage { grid-template-columns: minmax(0, 1fr); aspect-ratio: 4 / 4.6; padding: 8px; border-radius: 4px; background: var(--inv-cream); box-shadow: 0 24px 40px -22px rgb(0 0 0 / .7); }
@supports (-webkit-mask-box-image: none) {
    .at-gallery .inv-gallery-slider__stage { border-radius: 0; -webkit-mask-box-image: var(--at-deckle-frame) 14 / 10px round; }
}
.at-gallery .inv-gallery-slider__slide { overflow: hidden; }
.at-gallery .inv-gallery-slider__count { right: 1rem; bottom: 1rem; background: color-mix(in srgb, var(--inv-rust) 80%, transparent); }

/* ---------- live streaming ---------- */
.at-live__badge {
    display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem;
    background: var(--inv-seal); color: #fff; font: 600 .66rem/1.4 var(--at-body); letter-spacing: .16em; text-transform: uppercase;
}
.at-live__badge span { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
html.inv-anim .at-live__badge span { animation: at-blink 1.4s ease-in-out infinite; }
@keyframes at-blink { 50% { opacity: .25; } }
.at-live__title { margin: .5rem 0 .3rem; font: 400 2.5rem/1.15 var(--at-script); color: var(--inv-rust); }
.at-live__text { font-size: .92rem; color: color-mix(in srgb, var(--inv-text) 82%, var(--inv-cream)); }
.at-live__note { margin-top: .6rem; font: italic 600 1.02rem/1.5 var(--at-serif); }
.at-live .inv-button { margin-top: 1.1rem; }

/* ---------- gift (x-inv.gift): rust bank cards with a gold chip, two per row ---------- */
.at-gift .inv-gift { display: grid; gap: 1.1rem; }
.at-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.at-gift .inv-gift__accounts > .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.at-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.at-gift .inv-gift__account:not(.inv-gift__address) {
    position: relative; isolation: isolate; overflow: hidden; min-width: 0; padding: .8rem .8rem .85rem; border-radius: 16px;
    display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--inv-cream);
    background:
        radial-gradient(circle at 108% -10%, rgb(255 255 255 / .22), transparent 45%),
        linear-gradient(135deg, var(--inv-rust) 0%, color-mix(in srgb, var(--inv-rust) 70%, var(--inv-seal)) 55%, color-mix(in srgb, var(--inv-seal) 80%, #000) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 55%, transparent), 0 18px 30px -18px rgb(0 0 0 / .6);
}
/* the chip */
.at-gift .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; position: absolute; top: 2.75rem; left: .8rem; width: 2.2rem; height: 1.65rem; border-radius: .32rem;
    background:
        linear-gradient(90deg, transparent 31%, rgb(110 72 28 / .45) 31% 34%, transparent 34% 66%, rgb(110 72 28 / .45) 66% 69%, transparent 69%),
        linear-gradient(0deg, transparent 46%, rgb(110 72 28 / .45) 46% 54%, transparent 54%),
        linear-gradient(135deg, #f6e2b6, #d2a560 55%, #f1d59a);
    box-shadow: inset 0 0 0 1px rgb(110 72 28 / .35);
}
/* a faint liner pattern in the corner, like printed card stock */
.at-gift .inv-gift__account:not(.inv-gift__address)::after {
    content: ''; position: absolute; z-index: -1; right: -2.4rem; bottom: -2.8rem; width: 7.5rem; height: 7.5rem; border-radius: 50%;
    border: 12px solid color-mix(in srgb, var(--inv-accent) 22%, transparent); box-shadow: 0 0 0 16px color-mix(in srgb, var(--inv-accent) 10%, transparent);
}
.at-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__bank {
    min-height: 1.5rem; max-width: 100%; margin: 0 0 2.55rem; font: 600 .78rem/1.3 var(--at-body); letter-spacing: .05em; overflow-wrap: anywhere;
}
.at-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .35rem; max-width: 100%; }
.at-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__logo img { max-width: 5rem; }
.at-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__number {
    max-width: 100%; margin: 0 0 .2rem; font: 500 1rem/1.3 var(--at-mono); letter-spacing: .06em; overflow-wrap: anywhere;
}
.at-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__holder {
    max-width: 100%; margin: 0 0 .65rem; font: 600 .6rem/1.35 var(--at-body); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere;
}
.at-gift .inv-gift__account:not(.inv-gift__address) .inv-button {
    margin-top: auto; padding: .35rem .7rem; font-size: .65rem; letter-spacing: .02em;
    background: rgb(255 255 255 / .1); color: var(--inv-cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-cream) 70%, transparent);
}
.at-gift .inv-gift__address {
    padding: 1.5rem 1.3rem; border-radius: 0; background: var(--inv-cream); color: var(--inv-text);
    -webkit-mask-box-image: var(--at-deckle-frame) 14 / 10px round;
}
.at-gift .inv-gift__address .inv-gift__bank { font: 400 2.1rem/1.2 var(--at-script); color: var(--inv-rust); }
.at-gift .inv-gift__address .inv-gift__holder { margin: .3rem 0 .2rem; font-weight: 600; }
.at-gift .inv-gift__address p { font-size: .9rem; }
.at-gift .inv-gift__address .inv-button { margin-top: .9rem; }

/* ---------- buttons (shared components) ---------- */
.inv-button {
    padding: .75rem 1.4rem; font-family: var(--at-body); font-size: .86rem; font-weight: 600; letter-spacing: .02em;
    background: var(--inv-primary); color: var(--inv-cream);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 10px 20px -12px color-mix(in srgb, var(--inv-rust) 90%, transparent);
}
.inv-button--outline { background: transparent; color: var(--inv-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 60%, transparent); }
/* on terracotta and rust stock the buttons turn cream */
.at-sheet--terra .inv-button, .at-sheet--rust .inv-button { background: var(--inv-cream); color: var(--inv-rust); box-shadow: 0 10px 20px -12px rgb(0 0 0 / .5); }
.at-sheet--terra .inv-button--outline, .at-sheet--rust .inv-button--outline { background: transparent; color: var(--inv-cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-cream) 75%, transparent); }
.at-sheet .at-card .inv-button:not(.inv-button--outline) { background: var(--inv-primary); color: var(--inv-cream); }

/* ---------- RSVP & wishes (x-inv.rsvp, x-inv.wishes) ---------- */
.at-form { text-align: left; }
.at-form .inv-form { gap: .9rem; }
.at-form .inv-form label { font-size: .84rem; font-weight: 600; color: var(--inv-text); }
.at-form .inv-form input:not([type=radio]):not([type=checkbox]), .at-form .inv-form select, .at-form .inv-form textarea {
    padding: .7rem .85rem; border: 1px solid color-mix(in srgb, var(--inv-primary) 35%, transparent); border-radius: 6px;
    background: #fff; color: var(--inv-text); font-family: var(--at-body); transition: border-color .2s ease, box-shadow .2s ease;
}
.at-form .inv-form input:focus, .at-form .inv-form select:focus, .at-form .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 16%, transparent);
}
.at-form .inv-form__choices legend { font-weight: 600; color: var(--inv-text); }
.at-form .inv-form__choices label {
    padding: .45rem .85rem; border-radius: 999px; background: #fff; font-weight: 600; cursor: pointer;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 35%, transparent);
}
.at-form .inv-form__choices label:has(input:checked) { background: color-mix(in srgb, var(--inv-clay) 45%, #fff); box-shadow: inset 0 0 0 1.5px var(--inv-primary); }
.at-form .inv-form > .inv-button { width: 100%; }
.at-form .inv-rsvp__deadline { margin-bottom: .8rem; font-size: .84rem; text-align: center; }
.at-form .inv-form__notice { background: color-mix(in srgb, var(--inv-clay) 40%, #fff); color: var(--inv-text); }

.at-wishes .inv-wishes__list { gap: .55rem; margin-top: 1.4rem; }
.at-wishes .inv-wish {
    padding: .65rem .8rem; border-radius: 4px; background: #fff; border-left: 3px solid var(--inv-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 14%, transparent);
}
.at-wishes .inv-wish__name { font: 700 1rem/1.3 var(--at-serif); color: var(--inv-rust); }
.at-wishes .inv-wish__message { margin-top: .15rem; font-size: .88rem; line-height: 1.5; }
.at-wishes .inv-wish__time { margin-top: .25rem; font-size: .7rem; opacity: .75; }
.at-wishes .inv-wishes__pager { gap: .9rem; margin-top: 1rem; }
.at-wishes .inv-wishes__page-button {
    display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0 0 .15rem;
    font: 600 1.6rem/1 var(--at-serif); color: var(--inv-cream); background: var(--inv-seal); border: 0;
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--inv-seal) 75%, #000), 0 5px 10px -5px rgb(0 0 0 / .5);
}
.at-wishes .inv-wishes__page-button:disabled { opacity: .35; }
.at-wishes .inv-wishes__page { min-width: 4rem; font: 700 .95rem/1 var(--at-serif); letter-spacing: .12em; color: var(--inv-rust); opacity: 1; }
.at-wishes .inv-wishes__empty { text-align: center; }

/* ---------- closing ---------- */
.at-closing { padding-bottom: 7rem; }
.at-arch { position: relative; width: min(56vw, 205px); aspect-ratio: 4 / 5; margin: 0 auto 2rem; }
.at-arch::before { content: ''; position: absolute; inset: -9px; border-radius: 999px 999px 8px 8px; border: 1px solid var(--at-line); }
.at-arch img, .at-arch__empty { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 4px 4px; box-shadow: 0 0 0 4px var(--inv-cream); }
.at-arch__empty { display: grid; place-items: center; background: var(--inv-clay); font: 400 3.2rem/1 var(--at-script); color: var(--inv-rust); }
.at-closing__kicker { font: 600 .7rem/1.4 var(--at-body); letter-spacing: .32em; text-transform: uppercase; color: var(--at-line); }
.at-closing__message { max-width: 22rem; margin: .7rem auto 0; color: var(--at-soft); font-size: .93rem; }
.at-closing__sign { margin-top: 1.1rem; font: italic 600 1.08rem/1.4 var(--at-serif); }
.at-closing__names { margin-top: .3rem; font: 400 clamp(2.8rem, 13vw, 3.3rem)/1.15 var(--at-script); color: var(--inv-clay); }
.at-seal--closing { margin: 1.3rem auto 0; width: 64px; height: 64px; }
.at-seal--closing .at-seal__letters { font-size: 1.1rem; }

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

/* bottom menu (x-inv.nav, labelled) */
.inv-nav.at-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-cream) 92%, transparent);
    --inv-nav-text: var(--inv-text);
    --inv-nav-active: var(--inv-primary);
    max-width: min(calc(100vw - 1.5rem), 440px);
    border-color: color-mix(in srgb, var(--inv-primary) 35%, transparent);
    box-shadow: 0 12px 30px -12px rgb(0 0 0 / .45);
    font-family: var(--at-body); font-weight: 600;
}
.inv-nav.at-nav .inv-nav__item.is-active { color: var(--inv-cream); }

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

/* the closing seal sits on rust: a thin ring so it does not sink into the stock */
.at-seal--closing::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--at-line); opacity: .7; }

/* ---------- cover fit: everything up to "Buka Undangan" on one phone screen ---------- */
.at-cover__inner { min-height: 100%; justify-content: space-evenly; padding: clamp(1.4rem, 4.5svh, 2.6rem) 1.4rem clamp(1.4rem, 4.5svh, 2.4rem); }
.at-env-wrap { width: min(80vw, 300px, 40svh); }
.at-cover__quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
@media (max-height: 760px) {
    .at-cover__inner { gap: .45rem; }
    .at-cover__names { font-size: clamp(2.6rem, 12.5vw, 3.2rem); }
    .at-cover__quote { font-size: .93rem; -webkit-line-clamp: 6; }
    .at-env-wrap { width: min(76vw, 37svh); margin: .7rem 0 .4rem; }
    .at-cover__guest { padding: .7rem 1.1rem .75rem; }
    .at-open.inv-button { margin-top: .25rem; }
}
@media (max-height: 660px) {
    .at-env-wrap { width: min(70vw, 34svh); margin: .4rem 0 .2rem; }
    .at-seal--cover { width: 58px; height: 58px; margin: -32px 0 0 -29px; }
    .at-cover__names { font-size: clamp(2.4rem, 11.5vw, 2.8rem); }
    .at-cover__note { display: none; }
}

/* ---------- page end: the seal right under the names, then the nav's room ---------- */
.at-closing { padding-bottom: 1.6rem; }
/* the music player leaves 4.5rem under the page for the nav; without it, the closing keeps that room itself */
body:not(:has(.inv-music__space)) .at-closing { padding-bottom: 6rem; }