/*
 * Template "Amplop Terakota" (Pernikahan): a luxe letterpress invitation in a terracotta envelope.
 * Colors from the variant (x-inv.head): --inv-primary (terracotta: envelope, buttons, sections), --inv-accent
 * (copper foil), --inv-background (cream cotton page), --inv-text (ink), --inv-rust (deep terracotta), --inv-cream
 * (card stock), --inv-clay (soft peach), --inv-seal (ivory wax), --inv-deep (chocolate sections).
 * Every section (.at-sec--cream|terra|deep|rust) sets its own inks. Textures (img/, see img/CREDITS.md): a paper grain
 * and a marbled liner (both transparent light-and-shade, laid over the variant colors without blend modes, which iOS Safari mishandles), a pressed-leaf mask (tinted in CSS) and painted
 * lanterns. SVG shapes live in sections/_defs.blade.php.
 */

:root {
    --inv-primary: #b8461c;
    --inv-accent: #dba25a;
    --inv-background: #f6ecdc;
    --inv-text: #2d1910;
    --inv-rust: #7a2b12;
    --inv-cream: #fdf7ec;
    --inv-clay: #ecc6a2;
    --inv-seal: #f0e3c8;
    --inv-deep: #3a1c10;
    --inv-radius: 10px;

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

    /* copper foil */
    --at-foil: linear-gradient(100deg,
        color-mix(in srgb, var(--inv-accent) 70%, #5a2a10) 0%,
        color-mix(in srgb, var(--inv-accent) 55%, #fff) 30%,
        var(--inv-accent) 52%,
        color-mix(in srgb, var(--inv-accent) 65%, #5a2a10) 78%,
        color-mix(in srgb, var(--inv-accent) 60%, #fff) 100%);

    /* a clean, fine deckle for cotton cards (9-slice mask) */
    --at-deckle-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M3 1.2L6.8 .6L10.5 1.4L14.2.7L18 1.3L21.9.5L25.6 1.2L29.4.6L33.1 1.4L36.9.7L40.6 1.2L44.5.5L48.2 1.3L52 .7L55.8 1.2L59 1.6L59.4 5.4L58.8 9.2L59.5 13L58.7 16.9L59.3 20.6L58.6 24.4L59.4 28.2L58.8 32L59.5 35.8L58.7 39.6L59.3 43.4L58.6 47.2L59.4 51L58.8 54.8L58.6 58.6L54.9 59.4L51.1 58.7L47.3 59.5L43.5 58.8L39.7 59.3L35.9 58.6L32.1 59.4L28.3 58.7L24.5 59.5L20.7 58.8L16.9 59.3L13.1 58.6L9.3 59.4L5.5 58.7L1.4 58.8L.6 55L1.3 51.2L.5 47.4L1.2 43.6L.7 39.8L1.4 36L.6 32.2L1.3 28.4L.5 24.6L1.2 20.8L.7 17L1.4 13.2L.6 9.4L1.3 5.6Z'/%3E%3C/svg%3E");

    /* default section inks (cream) */
    --at-bg: var(--inv-background);
    --at-ink: var(--inv-text);
    --at-soft: color-mix(in srgb, var(--inv-text) 84%, var(--inv-background));
    --at-head: var(--inv-deep);
    --at-em: var(--inv-primary);
    --at-label: var(--inv-rust);
    --at-line: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-background));
    --at-wax: var(--inv-seal);
}

*, *::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-deep);
    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-rust); color: #fff; font: 600 .7rem/1.4 system-ui, sans-serif;
}

/* ---------- paper, letterpress, foil ---------- */
.at-deckle { border-radius: 3px; }
@supports (-webkit-mask-box-image: none) {
    .at-deckle { border-radius: 0; -webkit-mask-box-image: var(--at-deckle-frame) 12 / 8px round; }
}
/* letterpress: the ink sits in a deep impression (a light lip below, a shade above) */
.at-press { text-shadow: 0 1.5px 0 rgb(255 255 255 / .7), 0 -1px 0 rgb(0 0 0 / .22); }
.at-sec--deep .at-press, .at-sec--terra .at-press, .at-sec--rust .at-press { text-shadow: 0 1.5px 0 rgb(0 0 0 / .35), 0 -1px 0 rgb(255 255 255 / .12); }
.at-card .at-press, .at-letter .at-press, .at-postcard__card .at-press, .at-ecard__body .at-press { text-shadow: 0 1.5px 0 rgb(255 255 255 / .7), 0 -1px 0 rgb(0 0 0 / .22); }

.at-label {
    font: 600 .68rem/1.4 var(--at-body); letter-spacing: .3em; text-transform: uppercase; color: var(--at-label);
}
.at-amp { font-family: var(--at-script); color: var(--inv-accent); }
.at-rule { display: block; width: 150px; height: 12px; margin: .7rem auto 0; color: var(--at-line); transform-origin: 50% 50%; overflow: visible; }
.at-lead { max-width: 22rem; margin: 0 auto 1.6rem; color: var(--at-soft); font-size: .93rem; }
.at-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.8rem; line-height: 1.8; color: var(--inv-accent); margin-bottom: .5rem; }

/* painted dried lanterns: large accents that sway very gently from their stem */
.at-lantern { position: absolute; z-index: 0; display: block; height: auto; pointer-events: none; user-select: none; filter: saturate(1.15) drop-shadow(0 10px 14px rgb(0 0 0 / .25)); }
@keyframes at-sway { from { rotate: -1.8deg; } to { rotate: 1.6deg; } }
html.inv-anim .at-lantern { animation: at-sway 7s ease-in-out infinite alternate; }

/* the ivory wax seal: an svg blob with the monogram debossed into it */
.at-seal { position: relative; display: grid; place-items: center; width: 76px; height: 76px; }
.at-seal__wax { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 5px 6px rgb(0 0 0 / .32)); }
.at-seal__letters {
    position: relative; display: flex; align-items: baseline; gap: .04rem;
    font: 700 1.3rem/1 var(--at-serif); letter-spacing: .02em;
    color: color-mix(in srgb, var(--at-wax) 50%, var(--inv-rust));
    text-shadow: 0 1px 0 rgb(255 255 255 / .8), 0 -1px 0 rgb(0 0 0 / .3);
}
.at-seal__letters i { font: normal 400 1.05rem/1 var(--at-script); margin: 0 .06rem; }

/* postage stamps: a perforated edge cut with a mask (holes on every side), a cream margin */
.at-stamp {
    --perf: 10px;
    position: relative; display: block; padding: 8px; background: var(--inv-cream);
    -webkit-mask:
        radial-gradient(circle, #0000 3.1px, #000 3.6px) calc(var(--perf) / -2) calc(var(--perf) / -2) / var(--perf) var(--perf) round,
        linear-gradient(#000 0 0) center / calc(100% - var(--perf)) calc(100% - var(--perf)) no-repeat;
    mask:
        radial-gradient(circle, #0000 3.1px, #000 3.6px) calc(var(--perf) / -2) calc(var(--perf) / -2) / var(--perf) var(--perf) round,
        linear-gradient(#000 0 0) center / calc(100% - var(--perf)) calc(100% - var(--perf)) no-repeat;
}
.at-stamp--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* a printed frame line inside the margin */
.at-stamp--photo::after { content: ''; position: absolute; inset: 8px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55), inset 0 0 0 4px rgb(0 0 0 / .08); pointer-events: none; }
.at-stamp__empty {
    display: grid; place-items: center; width: 100%; height: 100%;
    background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-primary));
    font: 400 4rem/1 var(--at-script); color: var(--inv-cream);
}

/* postmark ink */
.at-postmark { display: block; overflow: visible; }
.at-postmark__ring { font: 600 9.5px var(--at-body); letter-spacing: 2.4px; fill: currentColor; }
.at-postmark__mid { font: 700 26px var(--at-serif); fill: currentColor; }
.at-postmark__sub { font: 600 8px var(--at-body); letter-spacing: 1.5px; fill: currentColor; }

/* a pressed botanical (nature print), tinted per section and debossed into the paper */
.at-leafghost {
    position: absolute; z-index: 0; width: min(52vw, 230px); aspect-ratio: 560 / 843; pointer-events: none;
    background: color-mix(in srgb, var(--at-bg) 72%, var(--inv-primary));
    -webkit-mask: var(--at-leaf-img) center / contain no-repeat; mask: var(--at-leaf-img) center / contain no-repeat;
    opacity: .5;
}
.at-leafghost--tr { top: -1.2rem; right: -3.4rem; rotate: 200deg; }
.at-leafghost--tl { top: -1rem; left: -3.6rem; rotate: 160deg; scale: -1 1; }
.at-leafghost--br { bottom: -1.6rem; right: -3.4rem; rotate: -18deg; }
.at-leafghost--letter { top: auto; bottom: -1.2rem; right: -2.6rem; width: 9.5rem; rotate: -24deg; opacity: .4; background: color-mix(in srgb, var(--inv-cream) 70%, var(--inv-primary)); }

/* no photo yet: a pressed botanical behind the monogram */
.at-photo-empty::before {
    content: ''; position: absolute; left: 50%; bottom: 0; width: 70%; aspect-ratio: 560 / 843; translate: -50% 0; rotate: -8deg;
    background: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-clay));
    -webkit-mask: var(--at-leaf-img) center / contain no-repeat; mask: var(--at-leaf-img) center / contain no-repeat;
    opacity: .45; pointer-events: none;
}
.at-photo-empty { overflow: hidden; }
.at-photo-empty > span { z-index: 1; }
.at-env__photo.at-photo-empty::before { top: 24%; bottom: auto; width: 54%; }

/* ---------- backdrop (wide screens): the marbled liner ---------- */
.at-backdrop {
    position: fixed; inset: 0; z-index: -1; display: none; pointer-events: none;
    background: var(--at-marble-img) center / 420px, linear-gradient(160deg, var(--inv-rust), var(--inv-deep));
}
.at-backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 50%, transparent, rgb(0 0 0 / .45)); }

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

/* ---------- sections: card stock in four colors, a fine paper grain ---------- */
.at-sec {
    position: relative; isolation: isolate; padding: 4rem 1.4rem 4.2rem; text-align: center; scroll-margin-top: .5rem;
    background-color: var(--at-bg); color: var(--at-ink);
    background-image: var(--at-grain-img); background-size: 300px;
}
.at-sec > * { position: relative; z-index: 1; }
.at-sec > .at-bgphoto, .at-sec > .at-leafghost, .at-sec > .at-lantern, .at-sec > .at-marbleband { position: absolute; }
.at-sec > .at-bgphoto { z-index: 0; }
.at-sec--cream { --at-bg: var(--inv-background); }
.at-sec--terra {
    --at-bg: var(--inv-primary);
    --at-ink: var(--inv-cream);
    --at-soft: color-mix(in srgb, var(--inv-cream) 92%, var(--inv-primary));
    --at-head: var(--inv-cream);
    --at-em: color-mix(in srgb, var(--inv-clay) 70%, var(--inv-cream));
    --at-label: color-mix(in srgb, var(--inv-cream) 90%, var(--inv-primary));
    --at-line: color-mix(in srgb, var(--inv-clay) 80%, var(--inv-primary));
}
.at-sec--deep {
    --at-bg: var(--inv-deep);
    --at-ink: var(--inv-cream);
    --at-soft: color-mix(in srgb, var(--inv-cream) 86%, var(--inv-deep));
    --at-head: var(--inv-cream);
    --at-em: var(--inv-accent);
    --at-label: var(--inv-accent);
    --at-line: color-mix(in srgb, var(--inv-accent) 85%, var(--inv-deep));
}
.at-sec--rust {
    --at-bg: var(--inv-rust);
    --at-ink: var(--inv-cream);
    --at-soft: color-mix(in srgb, var(--inv-cream) 90%, var(--inv-rust));
    --at-head: var(--inv-cream);
    --at-em: var(--inv-accent);
    --at-label: color-mix(in srgb, var(--inv-accent) 60%, var(--inv-cream));
    --at-line: color-mix(in srgb, var(--inv-accent) 85%, var(--inv-rust));
}

/* the envelope-flap point at the foot of a section, laid over the next one */
.at-vedge { z-index: 2; }
.at-vedge::after {
    content: ''; position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% - 1px); height: 30px; pointer-events: none;
    background-color: var(--at-bg); background-image: var(--at-grain-img); background-size: 300px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 4px 4px rgb(0 0 0 / .2));
}

/* a client photo behind a section: toned into the section's color (luminosity), faint, under a gradient */
.at-bgphoto { inset: 0; overflow: hidden; pointer-events: none; }
.at-bgphoto img {
    position: absolute; inset: -40px 0; width: 100%; height: calc(100% + 80px); object-fit: cover;
    mix-blend-mode: luminosity; opacity: .4;
}
.at-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--at-bg) 55%, transparent) 0%,
        color-mix(in srgb, var(--at-bg) 30%, transparent) 30%,
        color-mix(in srgb, var(--at-bg) 70%, transparent) 70%,
        var(--at-bg) 100%);
}
.at-sec--deep .at-bgphoto img { opacity: .3; }
.at-bgphoto--empty::after { background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%); }

/* headings */
.at-heading { margin-bottom: 1.7rem; }
.at-heading__kicker { margin-bottom: .45rem; }
.at-heading__title { font: 500 clamp(2rem, 9vw, 2.45rem)/1.15 var(--at-serif); color: var(--at-head); letter-spacing: -.005em; }
.at-heading__title em { font-style: italic; color: var(--at-em); }

/* a cream card inside any section */
.at-card { position: relative; padding: 1.8rem 1.35rem; background-color: var(--inv-cream); color: var(--inv-text); background-image: var(--at-grain-img); background-size: 300px; box-shadow: 0 22px 40px -26px 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; isolation: isolate;
    background-color: var(--inv-deep);
    background-image: var(--at-grain-img); background-size: 300px;
    --at-bg: var(--inv-deep);
    --env-w: min(90vw, 380px, 48svh);
}
.at-cover__glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(70% 34% at 50% 30%, color-mix(in srgb, var(--inv-primary) 55%, transparent), transparent 72%),
        radial-gradient(120% 50% at 50% 110%, color-mix(in srgb, var(--inv-rust) 70%, transparent), transparent 70%);
}
.at-cover--leave { transition: opacity .6s ease; }
html.inv-anim .at-cover--leave { transition-delay: .7s; }
.at-cover--gone { opacity: 0; }
.at-cover__lantern { z-index: 0; }
.at-cover__lantern--l { top: -2.4rem; left: -6px; width: min(23vw, 92px); transform-origin: 50% 0; }
.at-cover__lantern--r { top: -6px; right: -12px; width: min(44vw, 186px); transform-origin: 0 0; }
html.inv-anim .at-cover__lantern--r { animation-duration: 8s; animation-delay: -3s; }
.at-cover__inner {
    position: relative; z-index: 1; min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: .35rem;
    padding: clamp(1.1rem, 3svh, 2rem) 1.3rem clamp(1.2rem, 3.5svh, 2.2rem); text-align: center;
}
.at-cover__title { color: var(--inv-accent); font-size: .62rem; }
.at-cover__names {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: .45rem;
    font: 400 clamp(2.4rem, 11vw, 3rem)/1.05 var(--at-script);
    background: var(--at-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 rgb(0 0 0 / .4));
    padding: 0 .2em;
}
.at-cover__names .at-amp { font-size: .78em; }
.at-cover__date {
    display: flex; align-items: center; gap: .7rem;
    font: 600 clamp(.66rem, 3vw, .76rem)/1.3 var(--at-body); letter-spacing: .18em; text-transform: uppercase; color: var(--inv-cream); white-space: nowrap;
}
.at-cover__date::before, .at-cover__date::after { content: ''; flex: none; width: 1.3rem; height: 1px; background: var(--inv-accent); }
.at-cover__quote { max-width: 19rem; font: italic 400 .84rem/1.42 var(--at-body); color: color-mix(in srgb, var(--inv-cream) 86%, var(--inv-deep)); }

/* the envelope (10:7): inside, flap, card, flap shade, pocket, seal */
.at-env-wrap { position: relative; z-index: 1; width: var(--env-w); padding-top: calc(var(--env-w) * .42); margin-bottom: .1rem; }
.at-env { position: relative; width: 100%; aspect-ratio: 10 / 7; perspective: 1100px; filter: drop-shadow(0 22px 26px rgb(0 0 0 / .45)); }
.at-env > * { position: absolute; }
/* every envelope surface: the variant color, a soft light, the real paper grain */
.at-env__back, .at-env__face--out, .at-env__side, .at-env__bottom {
    background-image: var(--at-grain-img), var(--at-env-light, linear-gradient(transparent, transparent));
    background-size: 220px, cover;
}
.at-env__back { inset: 0; z-index: 1; border-radius: 6px; background-color: color-mix(in srgb, var(--inv-primary) 68%, var(--inv-deep)); }
.at-env__flap { z-index: 2; left: 0; top: 0; width: 100%; height: 64%; transform-origin: 50% 0; transform-style: preserve-3d; transform: rotateX(180deg); }
.at-env__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; clip-path: polygon(0 0, 100% 0, 50.6% 99%, 50% 100%, 49.4% 99%); }
/* the inner face is flipped on its own axis, so its triangle is drawn upside down */
.at-env__face--out {
    --at-env-light: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(0 0 0 / .08));
    background-color: color-mix(in srgb, var(--inv-primary) 94%, #fff); border-radius: 6px 6px 0 0;
}
/* inside of the flap: a cream band, then the marbled liner with a deckled edge */
.at-env__face--in { transform: rotateX(180deg); clip-path: polygon(0 100%, 100% 100%, 50.6% 1%, 50% 0, 49.4% 1%); background: color-mix(in srgb, var(--inv-cream) 88%, var(--inv-primary)); }
.at-env__liner {
    position: absolute; inset: 0;
    background: var(--at-marble-img) center / 130px, linear-gradient(200deg, var(--inv-rust), var(--inv-primary) 55%, var(--inv-deep));
}
.at-env__card {
    z-index: 3; left: 10%; right: 10%; top: 4%; height: 92%; padding: 7px;
    background: var(--inv-cream); transform: translateY(-58%);
}
.at-env__photo {
    position: relative; width: 100%; height: 100%;
    background: var(--at-photo, none) center 28% / cover no-repeat, radial-gradient(90% 90% at 50% 20%, color-mix(in srgb, var(--inv-clay) 70%, var(--inv-cream)), var(--inv-clay));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08);
}
.at-env__photo::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgb(255 255 255 / .6); pointer-events: none; }
.at-env__mono { position: absolute; left: 0; right: 0; top: 14%; font: 400 2.8rem/1 var(--at-script); color: var(--inv-rust); }
/* the closed flap's shadow on the pocket (fades as the flap lifts) */
.at-env__flapshade {
    z-index: 5; left: 0; right: 0; top: 0; height: 64%; opacity: 0;
    background: linear-gradient(rgb(0 0 0 / .3), rgb(0 0 0 / .3)); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: blur(4px);
}
.at-env__pocket { z-index: 4; inset: 0; filter: drop-shadow(0 -2px 2px rgb(0 0 0 / .22)); }
.at-env__side { position: absolute; inset: 0; border-radius: 6px; }
.at-env__side--l { --at-env-light: linear-gradient(100deg, rgb(255 255 255 / .1), transparent 60%); background-color: color-mix(in srgb, var(--inv-primary) 92%, #fff); clip-path: polygon(0 0, 53% 58%, 0 100%); }
.at-env__side--r { --at-env-light: linear-gradient(260deg, rgb(0 0 0 / .1), transparent 60%); background-color: color-mix(in srgb, var(--inv-primary) 88%, #000); clip-path: polygon(100% 0, 47% 58%, 100% 100%); }
.at-env__bottomwrap { position: absolute; inset: 0; filter: drop-shadow(0 -2px 3px rgb(0 0 0 / .28)); }
.at-env__bottom {
    position: absolute; inset: 0; border-radius: 0 0 6px 6px;
    --at-env-light: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(0 0 0 / .1));
    background-color: var(--inv-primary); clip-path: polygon(0 100%, 0 96%, 50% 54%, 100% 96%, 100% 100%);
}
.at-seal--cover { z-index: 6; left: 50%; top: 56%; width: calc(var(--env-w) * .25); height: calc(var(--env-w) * .25); translate: -50% -50%; }
.at-seal--cover .at-seal__letters { font-size: calc(var(--env-w) * .068); }
.at-seal--cover .at-seal__letters i { font-size: calc(var(--env-w) * .06); }

/* the opening moment (once): the seal presses, the flap swings up, the card rises */
@keyframes at-seal-press { 0% { opacity: 0; scale: 1.5; } 45% { opacity: 1; } 70% { scale: .93; } 100% { opacity: 1; scale: 1; } }
@keyframes at-flap-open {
    0% { transform: rotateX(0); z-index: 7; }
    49% { z-index: 7; }
    50% { z-index: 2; }
    100% { transform: rotateX(180deg); z-index: 2; }
}
@keyframes at-shade { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes at-card-rise { from { transform: translateY(0); } to { transform: translateY(-58%); } }
html.inv-anim .at-seal--cover { animation: at-seal-press .7s cubic-bezier(.3, .7, .3, 1) .2s both; }
html.inv-anim .at-env__flap { animation: at-flap-open .8s cubic-bezier(.5, 0, .3, 1) .85s both; }
html.inv-anim .at-env__flapshade { animation: at-shade .6s ease .85s both; }
html.inv-anim .at-env__card { animation: at-card-rise .85s cubic-bezier(.2, .7, .2, 1) 1.45s both; }

/* "Buka Undangan": the card lifts all the way out, the rest fades */
@keyframes at-card-out { from { transform: translateY(-58%); } to { transform: translateY(-80%) scale(1.06); } }
@keyframes at-fade-out { to { opacity: 0; transform: translateY(10px); } }
html.inv-anim .at-cover--leave .at-env__card { animation: at-card-out .7s cubic-bezier(.3, 0, .2, 1) 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 .4s ease forwards; }

/* the guest: a cream address label with a postage stamp */
.at-cover__guest {
    position: relative; width: min(100%, 17rem); padding: .6rem 3.8rem .6rem 1rem; text-align: left;
    background-color: var(--inv-cream); color: var(--inv-text);
    background-image: var(--at-grain-img); background-size: 300px;
    border-radius: 3px; box-shadow: 0 16px 26px -16px rgb(0 0 0 / .6);
}
.at-cover__guest::before { content: ''; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--inv-primary) 40%, transparent); pointer-events: none; }
.at-cover__to { font: 600 .58rem/1.4 var(--at-body); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-rust); }
.at-cover__guest-name { display: block; margin-top: .1rem; font: 600 1.02rem/1.25 var(--at-serif); color: var(--inv-text); overflow-wrap: anywhere; text-shadow: 0 1px 0 rgb(255 255 255 / .7); }
.at-cover__note { margin-top: .15rem; font-size: .64rem; line-height: 1.4; color: color-mix(in srgb, var(--inv-text) 80%, var(--inv-cream)); }
.at-cover__stamp {
    --perf: 8px;
    position: absolute; top: 9px; right: 10px; width: 40px; height: 47px; padding: 4px; rotate: 4deg;
    background: var(--inv-primary);
}
.at-cover__stamp span {
    display: grid; place-items: center; height: 100%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55);
    font: 600 .82rem/1 var(--at-serif); letter-spacing: .04em; color: var(--inv-cream);
}
.at-open.inv-button { margin-top: .2rem; padding: .72rem 1.6rem; font-size: .86rem; background: var(--inv-primary); color: var(--inv-cream); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), 0 12px 24px -12px rgb(0 0 0 / .7); }

/* ---------- hero (top of the page): the invitation card ---------- */
.at-hero { padding: 3.4rem 1.4rem 4.4rem; }
.at-hero__card {
    padding: 1.3rem 1.1rem 2.9rem;
    background-color: var(--inv-cream); color: var(--inv-text);
    background-image: var(--at-grain-img); background-size: 300px;
    box-shadow: 0 30px 50px -30px rgb(0 0 0 / .75);
}
.at-hero__kicker { color: var(--inv-rust); }
.at-hero__photo {
    position: relative; overflow: visible; margin: .8rem 0 1.1rem; aspect-ratio: 4 / 4.4;
    background: var(--at-photo, none) center 28% / cover no-repeat, radial-gradient(90% 80% at 50% 20%, color-mix(in srgb, var(--inv-clay) 60%, var(--inv-cream)), var(--inv-clay));
}
.at-hero__photo::after { content: ''; position: absolute; inset: -6px; border: 1px solid color-mix(in srgb, var(--inv-primary) 55%, transparent); pointer-events: none; }
.at-hero__mono { position: absolute; inset: 0; display: grid; place-items: center; font: 400 4.2rem/1 var(--at-script); color: var(--inv-rust); }
.at-hero__names { font: 400 clamp(2.8rem, 13vw, 3.4rem)/1.08 var(--at-script); color: var(--inv-rust); }
.at-hero__names .at-amp { color: var(--inv-primary); font-size: .8em; }
.at-hero__date { margin-top: .35rem; font: 600 .82rem/1.4 var(--at-body); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-deep); }
.at-seal--hero { position: absolute; z-index: 2; left: 50%; bottom: -38px; translate: -50% 0; }
.at-hero__suite { position: relative; width: min(84vw, 330px); margin: 0 auto; }
.at-hero__lantern { top: -4rem; right: -2.9rem; width: min(38vw, 160px); z-index: 2; transform-origin: 0 0; }

/* ---------- opening ---------- */
.at-opening { padding-top: 4.6rem; }
.at-opening__greeting { font: italic 500 1.35rem/1.4 var(--at-serif); color: var(--inv-cream); }
.at-opening__message { margin-top: .9rem; margin-bottom: 0; }
.at-opening__letter { position: relative; margin-top: 2.4rem; padding: 0 .4rem; }
.at-opening__lantern { position: absolute; z-index: 2; top: -3.6rem; right: -1.2rem; width: 9.5rem; transform-origin: 0 0; }
.at-letter {
    position: relative; overflow: hidden; padding: 2rem 1.4rem 1.7rem; rotate: -1deg;
    background-color: var(--inv-cream); color: var(--inv-text);
    background-image: linear-gradient(180deg, transparent 49%, rgb(0 0 0 / .07) 50%, rgb(255 255 255 / .4) 51%, transparent 56%), var(--at-grain-img);
    background-size: 100% 100%, 300px;
    box-shadow: 0 26px 40px -24px rgb(0 0 0 / .8);
}
.at-letter > :not(.at-leafghost) { position: relative; z-index: 1; }
.at-letter__mark { display: block; height: 2.2rem; font: 700 4.4rem/1 var(--at-serif); color: var(--inv-primary); }
.at-letter blockquote { font: italic 500 1.08rem/1.6 var(--at-serif); color: var(--inv-deep); }
.at-letter figcaption { margin-top: .8rem; font: 600 .68rem/1.4 var(--at-body); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-rust); }

/* ---------- couple: postage-stamp portraits ---------- */
.at-couple { overflow: hidden; }
.at-person {
    display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: center; column-gap: 1.1rem;
    max-width: 24rem; margin: 0 auto; text-align: left;
}
.at-person--bride { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); text-align: right; }
.at-person--bride .at-person__stamp { order: 2; }
.at-person__stamp { position: relative; filter: drop-shadow(0 14px 16px rgb(0 0 0 / .3)); }
.at-person__stamp .at-stamp { aspect-ratio: 4 / 5; rotate: -2.5deg; padding: 9px; }
.at-person--bride .at-person__stamp .at-stamp { rotate: 2.5deg; }
.at-person__pm { position: absolute; z-index: 2; width: 74px; right: -22px; bottom: -14px; rotate: -14deg; color: color-mix(in srgb, var(--inv-deep) 70%, transparent); }
.at-person--bride .at-person__pm { right: auto; left: -22px; rotate: 12deg; }
.at-person__label { font-size: .6rem; letter-spacing: .24em; }
.at-person__nick { font: 400 2.7rem/1.05 var(--at-script); color: var(--inv-primary); margin-top: .1rem; }
.at-person__name { margin-top: .15rem; font: 600 1.12rem/1.3 var(--at-serif); color: var(--inv-deep); overflow-wrap: anywhere; }
.at-person__parents { margin-top: .45rem; font-size: .82rem; line-height: 1.5; color: var(--at-soft); }
.at-person__parents strong { color: var(--inv-text); font-weight: 600; }
.at-person__ig {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; padding: .38rem .85rem;
    border-radius: 999px; color: var(--inv-rust); text-decoration: none; font-size: .76rem; font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 50%, transparent);
}
.at-couple__amp { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 2rem auto; max-width: 18rem; }
.at-couple__line { flex: 1; height: 1px; background: var(--at-line); }
.at-seal--amp { width: 58px; height: 58px; flex: none; }
.at-seal--amp .at-seal__letters i { font-size: 1.9rem; margin-top: .3rem; }
@media (max-width: 370px) {
    .at-person, .at-person--bride { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); column-gap: .85rem; }
    .at-person--bride { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); }
    .at-person__nick { font-size: 2.3rem; }
}

/* ---------- countdown: a postmark and stamps ---------- */
.at-countdown { padding-bottom: 4.6rem; }
.at-countdown__mark { display: flex; justify-content: center; margin: -.4rem auto .3rem; }
.at-countdown__pm { width: min(76vw, 290px); color: var(--inv-cream); margin-left: 18%; rotate: -6deg; opacity: .95; }
.at-countdown__pm .at-postmark__mid { font-size: 34px; }
.at-countdown__date { font: 600 .84rem/1.4 var(--at-body); letter-spacing: .18em; text-transform: uppercase; color: var(--at-soft); }
.at-countdown .inv-countdown { gap: .55rem; margin-top: 1.4rem; }
.at-countdown .inv-countdown__item {
    --perf: 9px;
    flex: 1; min-width: 0; max-width: 5.1rem; padding: .95rem .2rem .8rem; border-radius: 0;
    background-color: var(--inv-cream); color: var(--inv-text);
    background-image: var(--at-grain-img); background-size: 300px;
    -webkit-mask:
        radial-gradient(circle, #0000 2.8px, #000 3.3px) calc(var(--perf) / -2) calc(var(--perf) / -2) / var(--perf) var(--perf) round,
        linear-gradient(#000 0 0) center / calc(100% - var(--perf)) calc(100% - var(--perf)) no-repeat;
    mask:
        radial-gradient(circle, #0000 2.8px, #000 3.3px) calc(var(--perf) / -2) calc(var(--perf) / -2) / var(--perf) var(--perf) round,
        linear-gradient(#000 0 0) center / calc(100% - var(--perf)) calc(100% - var(--perf)) no-repeat;
}
.at-countdown .inv-countdown__item:nth-child(odd) { rotate: -2deg; }
.at-countdown .inv-countdown__item:nth-child(even) { rotate: 1.5deg; }
.at-countdown .inv-countdown__value { font: 700 1.95rem/1.1 var(--at-serif); color: var(--inv-primary); text-shadow: 0 1.5px 0 rgb(255 255 255 / .8), 0 -1px 0 rgb(0 0 0 / .2); }
.at-countdown .inv-countdown__label { margin-top: .15rem; font: 600 .58rem/1.3 var(--at-body); letter-spacing: .14em; text-transform: uppercase; color: var(--inv-rust); }
.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.5rem; }
.at-countdown .inv-countdown__actions .inv-button { padding: .6rem 1rem; font-size: .76rem; }

/* ---------- events: correspondence cards sealed like envelopes ---------- */
.at-events { overflow: hidden; padding-top: 4.6rem; }
.at-events__lead { color: var(--at-soft); }
.at-events__list { display: grid; gap: 2.2rem; }
.at-ecard {
    position: relative; text-align: left; color: var(--inv-text);
    background-color: var(--inv-cream); background-image: var(--at-grain-img); background-size: 300px;
    border-radius: 4px; box-shadow: 0 26px 40px -26px rgb(0 0 0 / .65), 0 0 0 1px color-mix(in srgb, var(--inv-primary) 14%, transparent);
}
.at-ecard__flap {
    padding: 1.3rem 1.2rem 2.7rem; border-radius: 4px 4px 0 0; color: var(--inv-cream);
    background-color: var(--inv-primary); background-image: var(--at-grain-img), linear-gradient(170deg, rgb(255 255 255 / .1), rgb(0 0 0 / .12));
    background-size: 300px, cover;
    clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.at-ecard__flap--photo { padding-right: 6.4rem; }
.at-ecard__no { color: color-mix(in srgb, var(--inv-cream) 88%, var(--inv-primary)); }
.at-ecard__name { margin-top: .1rem; font: italic 500 1.85rem/1.15 var(--at-serif); color: var(--inv-cream); overflow-wrap: anywhere; }
.at-seal--event { width: 52px; height: 52px; margin: -2.2rem auto 0; z-index: 2; }
.at-seal--event .at-seal__letters { font-size: 1.1rem; }
.at-ecard__stamp {
    --perf: 8px;
    position: absolute; z-index: 2; top: -12px; right: 14px; width: 78px; height: 94px; padding: 6px; rotate: 6deg;
    background: var(--at-photo) center 30% / cover no-repeat content-box, linear-gradient(var(--inv-cream), var(--inv-cream)) border-box;
}
.at-ecard__body { padding: .9rem 1.3rem 1.5rem; text-align: center; }
.at-event__date, .at-event__time, .at-event__dress { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.at-event__time { font: 600 1.25rem/1.35 var(--at-serif); color: var(--inv-primary); }
.at-event__date { margin-top: .15rem; font: 600 .98rem/1.35 var(--at-serif); color: var(--inv-deep); }
.at-event__place { max-width: 20rem; margin: .9rem auto 0; padding-top: .9rem; border-top: 1px solid color-mix(in srgb, var(--inv-primary) 28%, transparent); }
.at-event__place > svg { display: block; margin: 0 auto .25rem; }
.at-event__venue { display: block; font: 600 1.1rem/1.3 var(--at-serif); color: var(--inv-deep); }
.at-event__address { display: block; margin-top: .15rem; font-size: .86rem; line-height: 1.5; color: color-mix(in srgb, var(--inv-text) 84%, 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-ecard .at-seal__wax { width: 100%; height: 100%; stroke: none; }
.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 bundle of postcards ---------- */
.at-story__list { position: relative; display: grid; gap: 1.5rem; padding: 0; list-style: none; }
.at-story__list::before { content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; border-left: 1px dashed color-mix(in srgb, var(--inv-accent) 70%, transparent); }
.at-postcard { position: relative; z-index: 1; }
.at-postcard__card {
    position: relative; padding: 1.25rem 1.2rem 1.3rem; text-align: left; rotate: -1deg;
    background-color: var(--inv-cream); color: var(--inv-text);
    background-image: var(--at-grain-img); background-size: 300px;
    box-shadow: 0 22px 36px -22px rgb(0 0 0 / .85);
}
.at-postcard--flip .at-postcard__card { rotate: 1deg; }
.at-postcard__stamp { --perf: 8px; float: right; width: 6.2rem; aspect-ratio: 4 / 5; margin: 0 0 .5rem .9rem; padding: 6px; rotate: 3deg; }
.at-postcard--flip .at-postcard__stamp { float: left; margin: 0 .9rem .5rem 0; rotate: -3deg; }
.at-postcard__no { font-size: .6rem; color: var(--inv-rust); }
.at-postcard__date { font: 400 1.8rem/1.1 var(--at-script); color: var(--inv-primary); overflow-wrap: anywhere; }
.at-postcard__title { margin-top: .1rem; font: 600 1.15rem/1.3 var(--at-serif); color: var(--inv-deep); overflow-wrap: anywhere; }
.at-postcard__rule { display: block; width: 4rem; margin: .5rem 0 .55rem; border-top: 1px solid color-mix(in srgb, var(--inv-primary) 55%, transparent); }
.at-postcard__story { font-size: .86rem; line-height: 1.6; color: color-mix(in srgb, var(--inv-text) 88%, var(--inv-cream)); overflow-wrap: anywhere; }
.at-postcard__card::after { content: ''; display: block; clear: both; }

/* ---------- gallery (x-inv.gallery variant="slider") ---------- */
.at-gallery { padding-top: 4.4rem; padding-bottom: 4.6rem; }
.at-marbleband {
    top: 0; left: 0; right: 0; height: 1.4rem; z-index: 1;
    background: var(--at-marble-img) center / 150px, linear-gradient(90deg, var(--inv-rust), var(--inv-deep));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 6px 10px -6px rgb(0 0 0 / .5);
}
.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: 3px; opacity: .65; 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.7; padding: 9px; border-radius: 3px; background: var(--inv-cream); box-shadow: 0 26px 44px -22px rgb(0 0 0 / .75); }
@supports (-webkit-mask-box-image: none) {
    .at-gallery .inv-gallery-slider__stage { border-radius: 0; -webkit-mask-box-image: var(--at-deckle-frame) 12 / 8px 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-deep) 80%, transparent); }

/* ---------- live streaming ---------- */
.at-live { padding-top: 4.6rem; }
.at-live__card { max-width: 23rem; margin: 0 auto; }
.at-live__badge {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: -2.6rem; margin-bottom: 1rem; padding: .35rem .9rem;
    background: var(--inv-primary); color: var(--inv-cream); font: 600 .64rem/1.4 var(--at-body); letter-spacing: .18em; text-transform: uppercase;
    box-shadow: 0 8px 14px -8px rgb(0 0 0 / .6);
}
.at-live__badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--inv-cream); }
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 { --at-head: var(--inv-deep); --at-em: var(--inv-primary); font-size: clamp(1.8rem, 8vw, 2.2rem); }
.at-live__card .at-rule { color: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-cream)); margin-bottom: 1rem; }
.at-live__text { font-size: .92rem; color: color-mix(in srgb, var(--inv-text) 86%, var(--inv-cream)); }
.at-live__note { margin-top: .6rem; font: italic 500 1rem/1.5 var(--at-serif); color: var(--inv-deep); }
.at-live .inv-button { margin-top: 1.1rem; }

/* ---------- gift (x-inv.gift): small terracotta envelopes, two per row ---------- */
.at-gift { overflow: hidden; padding-top: 5rem; }
.at-gift__lantern { top: -1.8rem; right: -2.6rem; width: min(38vw, 160px); transform-origin: 0 0; }
.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: .65rem; }
.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: 5px;
    display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--inv-cream);
    background-color: var(--inv-primary);
    background-image: var(--at-grain-img), linear-gradient(160deg, rgb(255 255 255 / .1), rgb(0 0 0 / .14));
    background-size: 300px, cover;
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / .8);
}
/* the envelope flap's fold and its seal */
.at-gift .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 2.9rem;
    background: color-mix(in srgb, var(--inv-primary) 88%, #fff);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / .25));
}
.at-gift .inv-gift__account:not(.inv-gift__address)::after {
    content: ''; position: absolute; z-index: -1; left: 50%; top: 2.9rem; width: 1.15rem; height: 1.15rem; translate: -50% -50%; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--inv-seal) 30%, color-mix(in srgb, var(--inv-seal) 70%, #6a4a2a) 100%);
    box-shadow: 0 2px 3px rgb(0 0 0 / .35);
}
.at-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__bank {
    min-height: 1.5rem; max-width: 100%; margin: 0 0 2.4rem; 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: .3rem; 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 / .12); 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 {
    position: relative; padding: 1.6rem 1.3rem; border-radius: 0; color: var(--inv-text);
    background-color: var(--inv-cream); background-image: var(--at-grain-img); background-size: 300px;
    -webkit-mask-box-image: var(--at-deckle-frame) 12 / 8px round;
}
.at-gift .inv-gift__address .inv-gift__bank { font: italic 500 1.5rem/1.2 var(--at-serif); color: var(--inv-deep); }
.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-rust); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 60%, transparent); }
/* on terracotta, chocolate and rust the buttons turn cream */
.at-sec--terra .inv-button, .at-sec--deep .inv-button, .at-sec--rust .inv-button { background: var(--inv-cream); color: var(--inv-rust); box-shadow: 0 10px 20px -12px rgb(0 0 0 / .6); }
.at-sec--terra .inv-button--outline, .at-sec--deep .inv-button--outline, .at-sec--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-sec .at-card .inv-button:not(.inv-button--outline) { background: var(--inv-primary); color: var(--inv-cream); }
.at-sec .at-card .inv-button--outline { color: var(--inv-rust); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 60%, transparent); }

/* ---------- RSVP & wishes (x-inv.rsvp, x-inv.wishes) ---------- */
.at-reply { padding-top: 2.2rem; }
.at-reply::before { content: ''; position: absolute; inset: 9px; border: 1px solid color-mix(in srgb, var(--inv-primary) 45%, transparent); box-shadow: inset 0 0 0 3px var(--inv-cream), inset 0 0 0 4px color-mix(in srgb, var(--inv-primary) 25%, transparent); pointer-events: none; }
.at-reply__title { margin-bottom: 1.1rem; text-align: center; font: italic 600 1.6rem/1.2 var(--at-serif); letter-spacing: .12em; color: var(--inv-primary); }
.at-form { text-align: left; }
.at-form .inv-form { position: relative; 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: 4px;
    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: .6rem; margin-top: 1.4rem; }
.at-wishes .inv-wish {
    position: relative; padding: .75rem .85rem .7rem 1rem; border-radius: 2px; background: #fff;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 16%, transparent), 0 8px 14px -12px rgb(0 0 0 / .5);
}
.at-wishes .inv-wish::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: repeating-linear-gradient(180deg, var(--inv-primary) 0 8px, transparent 8px 12px); }
.at-wishes .inv-wish__name { font: 600 1rem/1.3 var(--at-serif); color: var(--inv-deep); }
.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; border-radius: 50%;
    font: 600 1.5rem/1 var(--at-serif); color: var(--inv-cream); background: var(--inv-primary); border: 0;
    box-shadow: 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: 600 .95rem/1 var(--at-serif); letter-spacing: .12em; color: var(--inv-rust); opacity: 1; }
.at-wishes .inv-wishes__empty { text-align: center; }

/* ---------- closing: full photo fading into deep terracotta ---------- */
.at-closing { padding: 0 0 2.4rem; overflow: hidden; }
.at-closing__photo { position: relative; z-index: 0; height: min(100vw, 440px); overflow: hidden; }
.at-closing__photo img { position: absolute; inset: -30px 0; width: 100%; height: calc(100% + 60px); object-fit: cover; object-position: center 30%; filter: saturate(1.05) contrast(1.02); }
.at-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    /* a long, eased fade into the section's terracotta, so the photo melts into the page instead of ending on a line */
    background: linear-gradient(180deg, transparent 0%, transparent 28%,
        color-mix(in srgb, var(--inv-rust) 12%, transparent) 42%, color-mix(in srgb, var(--inv-rust) 38%, transparent) 58%,
        color-mix(in srgb, var(--inv-rust) 72%, transparent) 76%, color-mix(in srgb, var(--inv-rust) 92%, transparent) 90%, var(--inv-rust) 100%);
}
.at-closing__photo--empty { height: 12rem; background: radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--inv-primary) 85%, var(--inv-accent)), var(--inv-rust) 75%); }
.at-closing__photo--empty::after { display: none; }
.at-closing__body { position: relative; z-index: 1; margin-top: -6rem; padding: 0 1.6rem; }
.at-closing__lantern { top: -12.5rem; width: min(20vw, 80px); transform-origin: 50% 0; }
.at-closing__lantern--l { left: -14px; }
.at-closing__lantern--r { right: -14px; scale: -1 1; }
html.inv-anim .at-closing__lantern--r { animation-delay: -3.5s; }
.at-seal--closing { width: 60px; height: 60px; margin: 0 auto .7rem; }
.at-seal--closing .at-seal__letters { font-size: 1.05rem; }
.at-closing__title { font-size: clamp(2rem, 9vw, 2.35rem); text-shadow: 0 2px 10px rgb(0 0 0 / .35); }
.at-closing__message { margin: .6rem auto 0; max-width: 19rem; font-size: .84rem; line-height: 1.55; }
.at-closing__sign { margin-top: .8rem; font: 600 .62rem/1.4 var(--at-body); letter-spacing: .26em; text-transform: uppercase; color: var(--at-label); }
.at-closing__names {
    margin-top: .15rem; font: 400 clamp(2.3rem, 10.5vw, 2.7rem)/1.15 var(--at-script);
    background: var(--at-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 rgb(0 0 0 / .35)); padding: 0 .2em;
}
.at-closing__names .at-amp { color: inherit; }

/* ---------- platform bits ---------- */
.at-foot { padding: 0 1.2rem; background: var(--inv-rust); color: var(--inv-cream); }
.at-foot .inv-checkin { position: relative; z-index: 1; margin-top: 0; }
.at-branding { position: relative; z-index: 1; color: color-mix(in srgb, var(--inv-cream) 85%, var(--inv-rust)); opacity: 1; }
.inv-music { right: max(1rem, calc(50vw - 230px + 1rem)); }
.inv-music__button { background: var(--inv-primary); color: var(--inv-cream); 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) 94%, 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-lantern, .at-live__badge span { animation: none !important; }
}

/* ---------- cover fit: everything up to "Buka Undangan" on one phone screen ---------- */
@media (max-height: 760px) {
    .at-cover { --env-w: min(86vw, 348px); }
    .at-cover__inner { gap: .3rem; }
    .at-cover__names { font-size: clamp(2.3rem, 10.5vw, 2.7rem); }
    .at-cover__quote { font-size: .8rem; line-height: 1.38; }
    .at-cover__guest { padding-top: .5rem; padding-bottom: .5rem; }
    .at-open.inv-button { margin-top: .1rem; padding: .66rem 1.5rem; }
}
@media (max-height: 660px) {
    .at-cover { --env-w: min(78vw, 300px); }
    .at-cover__names { font-size: clamp(2.2rem, 10vw, 2.5rem); }
    .at-cover__note { display: none; }
    .at-cover__quote { font-size: .78rem; }
}
@media (max-height: 600px) {
    .at-cover { --env-w: min(66vw, 250px); }
    .at-cover__inner { gap: .3rem; padding-top: .9rem; padding-bottom: 1.2rem; }
    .at-cover__names { font-size: clamp(2rem, 9.5vw, 2.3rem); }
    .at-cover__quote { font-size: .76rem; line-height: 1.36; }
    .at-cover__guest-name { font-size: .96rem; }
    .at-open.inv-button { padding: .62rem 1.4rem; }
}

/* ---------- page end: the names, then the nav's room ---------- */
/* 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-foot { padding-bottom: 4.5rem; }

/* ---------- intro scene (scene.json): the envelope on the chocolate desk, the invitation card ---------- */
.at-scene__desk {
    width: 100%; height: 100%;
    background-color: var(--inv-deep); background-image: var(--at-grain-img),
        radial-gradient(70% 36% at 50% 40%, color-mix(in srgb, var(--inv-primary) 58%, transparent), transparent 72%),
        radial-gradient(120% 46% at 50% 108%, color-mix(in srgb, var(--inv-rust) 75%, transparent), transparent 70%);
    background-size: 300px, 100% 100%, 100% 100%;
}
.at-scene__leaf {
    width: 100%; aspect-ratio: 560 / 843; opacity: .55;
    background: color-mix(in srgb, var(--inv-deep) 62%, var(--inv-primary));
    -webkit-mask: var(--at-leaf-img) center / contain no-repeat; mask: var(--at-leaf-img) center / contain no-repeat;
}
.at-scene__stamp {
    --perf: 9px; width: 100%; aspect-ratio: 5 / 6; padding: 7px; background: var(--inv-primary);
    filter: drop-shadow(0 8px 10px rgb(0 0 0 / .35));
}
.at-scene__stamp span {
    display: grid; place-items: center; height: 100%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55);
    background: radial-gradient(110% 80% at 30% 20%, rgb(255 255 255 / .16), transparent 60%);
    font: 600 clamp(1rem, 5.4vw, 1.4rem)/1 var(--at-serif); letter-spacing: .04em; color: var(--inv-cream);
}
.at-scene__pm { color: color-mix(in srgb, var(--inv-cream) 62%, transparent); }
.at-scene__pm .at-postmark { width: 100%; height: auto; }
.at-scene__env { container-type: inline-size; width: min(100%, 36svh); margin: 0 auto; padding-top: 44%; }
.at-scene__env .at-env { --env-w: 100cqw; }
.at-scene__liner { clip-path: polygon(4% 94%, 50% 13%, 96% 94%); }
/* the cover's opening moment, later: the envelope has slid in first */
html.inv-anim .at-scene__env .at-seal--cover { animation-delay: 1.4s; }
html.inv-anim .at-scene__env .at-env__flap, html.inv-anim .at-scene__env .at-env__flapshade { animation-delay: 1.95s; }
html.inv-anim .at-scene__env .at-env__card { animation-delay: 2.5s; }
/* the titles on a deckled cotton card instead of the frosted cloud */
body.at-body .inv-intro--scene .inv-scene__card {
    top: 41%; aspect-ratio: 4 / 5; padding: 2rem 1.4rem;
    background-color: var(--inv-cream); background-image: var(--at-grain-img); background-size: 300px;
    -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask: none; mask: none; border-radius: 3px;
    box-shadow: inset 0 0 0 7px var(--inv-cream), inset 0 0 0 8px color-mix(in srgb, var(--inv-primary) 45%, transparent);
}
@supports (-webkit-mask-box-image: none) {
    body.at-body .inv-intro--scene .inv-scene__card { border-radius: 0; -webkit-mask-box-image: var(--at-deckle-frame) 12 / 8px round; }
}
body.at-body .inv-scene__card .inv-intro__label { font-family: var(--at-body); color: var(--inv-rust); }
body.at-body .inv-scene__card .inv-intro__names { color: var(--inv-deep); text-shadow: 0 1.5px 0 rgb(255 255 255 / .7); }
body.at-body .inv-scene__card .inv-intro__date { font-family: var(--at-body); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--inv-text); }
/* short phones: a smaller card, so the photo rising from the envelope stays in view */
@media (min-aspect-ratio: 1 / 2) {
    body.at-body .inv-intro--scene .inv-scene__card { top: 39%; width: min(64vw, 21rem, 44svh); padding: 1.6rem 1.1rem; }
}