/*
 * Arch Modern — modern architecture, gallery-like. The identity is an arcade: arch windows with a travertine
 * reveal standing on a stone ledge, offset arch-shaped color blocks with depth, fluted columns, travertine stone
 * (img/travertine.webp, CC0). Deep sections (the wall) alternate with travertine/sand ones; client photos show
 * faintly under strong gradients. Instrument Serif set big and upright (one italic word), Outfit for the text.
 * Phone-first; on wide screens a centered 460px column on the deep wall.
 * Colors come from the variant: --inv-primary (wall), --inv-accent (terracotta), --inv-background (light ground),
 * --inv-text, --inv-stock (a lighter wall tone for blocks), --inv-sand (stone), --inv-clay (accent on the wall),
 * --inv-muted, --inv-line. All classes start with "am-".
 */

:root {
    --inv-primary: #1f3a2e;
    --inv-accent: #b4532f;
    --inv-background: #f6efe3;
    --inv-text: #1c2620;
    --inv-stock: #2f5646;
    --inv-sand: #e7d7bd;
    --inv-clay: #e0a27b;
    --inv-muted: #4a564e;
    --inv-line: #d3c2a4;
    --inv-radius: 14px;

    --am-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
    --am-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --am-col: 460px;
    /* left/right edge of the column on wide screens (0 on phones) */
    --am-edge: max(0px, calc((100vw - var(--am-col)) / 2));
    --am-arch: 999px 999px 0 0;
    /* small terracotta text on light grounds: a little darker for contrast */
    --am-accent-ink: color-mix(in srgb, var(--inv-accent) 82%, #000);
    --am-deep: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 86%, #000));
    --am-depth: 0 26px 36px -22px rgb(0 0 0 / .55), 0 6px 12px -8px rgb(0 0 0 / .3);
    /* the travertine stone: black-alpha travertine (exact multiply, no blend mode: iPhone) over sand */
    --am-stone-img: url('../img/travertine-mul.webp');
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.am-body {
    margin: 0; min-height: 100vh; background: var(--inv-primary); color: var(--inv-text);
    font: 400 15px/1.7 var(--am-sans); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
a { color: inherit; }

.am-label { font: 500 .68rem/1.4 var(--am-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--am-label, var(--am-accent-ink)); }
.am-muted { color: var(--am-muted, var(--inv-muted)); font-size: .9rem; }
.am-lead { font-size: .94rem; line-height: 1.75; }
.am-icon { flex: none; display: inline-block; vertical-align: -.2em; }
.am-title { font: 400 clamp(2.45rem, 10.5vw, 2.95rem)/1.02 var(--am-serif); letter-spacing: -.012em; color: var(--am-title, var(--inv-primary)); }
.am-title em { font-style: italic; color: var(--am-em, var(--inv-accent)); }

/* a stone surface (travertine) */
.am-stone, .am-tone-stone {
    background-color: var(--inv-sand);
    background-image: var(--am-stone-img);
    background-size: 900px auto;
   
}

/* ---------- wide screens: the deep wall with two big arch blocks ---------- */
.am-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--am-deep); }
.am-backdrop__arch { position: absolute; display: block; border-radius: var(--am-arch); }
.am-backdrop__arch--a { left: 4vw; bottom: 0; width: 22vw; height: 72vh; background: var(--inv-stock); }
.am-backdrop__arch--b { right: 6vw; bottom: 0; width: 16vw; height: 52vh; background: var(--inv-accent); opacity: .85; }

.am-preview {
    position: fixed; z-index: 60; top: 0; left: var(--am-edge); right: var(--am-edge); padding: .35rem .75rem;
    background: var(--inv-accent); color: #fff; font-size: .7rem; text-align: center; letter-spacing: .03em;
}

/* the page column */
.am-page {
    position: relative; z-index: 1; width: 100%; max-width: var(--am-col); min-height: 100vh; margin: 0 auto;
    background: var(--inv-primary); overflow-x: clip;
}
@media (min-width: 520px) { .am-page { box-shadow: 0 0 80px -20px rgb(0 0 0 / .6); } }

/* ---------- buttons ---------- */
.am-btn, .am-page .inv-button, .am-cover .inv-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.7rem; padding: .62rem 1.3rem; border: 0; border-radius: .35rem; cursor: pointer;
    background: var(--am-btn-bg, var(--inv-primary)); color: var(--am-btn-fg, var(--inv-background)); text-decoration: none;
    font: 500 .76rem/1.2 var(--am-sans); letter-spacing: .1em; text-transform: uppercase;
    box-shadow: 0 12px 20px -14px rgb(0 0 0 / .7);
    transition: transform .2s ease, filter .2s ease;
}
.am-btn:hover, .am-page .inv-button:hover { filter: brightness(1.1); }
.am-btn:active { transform: scale(.97); }
.am-btn:focus-visible, .am-page .inv-button:focus-visible, .am-cover .inv-button:focus-visible { outline: 2px solid var(--inv-clay); outline-offset: 3px; }
.am-btn--accent { --am-btn-bg: var(--inv-accent); --am-btn-fg: #fff; }
.am-btn--small { min-height: 2.2rem; padding: .4rem .9rem; font-size: .68rem; letter-spacing: .06em; text-transform: none; }
.am-btn--line, .am-btn--soft, .am-page .inv-button--outline {
    background: transparent; color: var(--am-line-fg, var(--inv-primary)); box-shadow: inset 0 0 0 1px currentColor;
}

/* ---------- arch windows: a photo in an arch with a travertine reveal and inner shadow ---------- */
.am-window {
    position: relative; display: block; padding: var(--am-reveal, 5px); border-radius: var(--am-arch);
    background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    box-shadow: var(--am-depth);
}
.am-window::after {
    content: ''; position: absolute; inset: var(--am-reveal, 5px); border-radius: var(--am-arch); pointer-events: none;
    box-shadow: inset 0 16px 20px -14px rgb(0 0 0 / .6), inset 10px 0 14px -12px rgb(0 0 0 / .4);
}
.am-window__photo, .am-window__img {
    display: block; width: 100%; height: 100%; border-radius: var(--am-arch); object-fit: cover;
    background: var(--am-photo, none) center 28% / cover no-repeat, linear-gradient(170deg, var(--inv-clay), var(--inv-accent));
}
/* an empty window looks into a deep room lit from above, a smaller arch receding inside */
.am-window__photo--empty {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--inv-clay) 45%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-stock), color-mix(in srgb, var(--inv-primary) 80%, #000));
}
.am-window__photo--empty::before, .am-window__photo--empty::after {
    content: ''; position: absolute; z-index: -1; left: 22%; right: 22%; top: 24%; bottom: 0; border-radius: var(--am-arch);
    border: 1px solid color-mix(in srgb, var(--inv-sand) 40%, transparent); border-bottom: 0;
}
.am-window__photo--empty::after { left: 36%; right: 36%; top: 46%; border-color: color-mix(in srgb, var(--inv-sand) 25%, transparent); }
.am-person--left .am-window__photo--empty, .am-event .am-window__photo--empty {
    background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, #fff 22%, transparent), transparent 75%), linear-gradient(175deg, var(--inv-clay), var(--inv-accent) 60%, color-mix(in srgb, var(--inv-accent) 80%, #000));
}

/* ---------- cover "Gerbang Senja": the photo in one tall arch over a living wall ---------- */
.am-cover {
    position: fixed; z-index: 50; top: 0; bottom: 0; left: var(--am-edge); right: var(--am-edge);
    display: flex; overflow-x: hidden; overflow-y: auto; isolation: isolate; color: var(--inv-background);
    background: var(--am-deep);
}
/* the wall: fine fluting and two soft lights drifting and breathing (transform/opacity only) */
.am-cover__sky {
    position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / .022) 0 1px, transparent 1px 18px);
}
.am-cover__light { position: absolute; display: block; border-radius: 50%; will-change: transform, opacity; }
.am-cover__light--a {
    left: -45%; bottom: -30%; width: 130%; aspect-ratio: 1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-accent) 70%, transparent), color-mix(in srgb, var(--inv-accent) 22%, transparent) 55%, transparent);
    animation: am-drift-a 13s ease-in-out infinite alternate;
}
.am-cover__light--b {
    right: -50%; top: 18%; width: 120%; aspect-ratio: 1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-stock) 95%, var(--inv-clay)), color-mix(in srgb, var(--inv-stock) 40%, transparent) 55%, transparent);
    animation: am-drift-b 17s ease-in-out infinite alternate;
}
@keyframes am-drift-a { from { transform: translate(0, 0) scale(1); opacity: .75; } to { transform: translate(28%, -14%) scale(1.18); opacity: 1; } }
@keyframes am-drift-b { from { transform: translate(0, 0) scale(1.1); opacity: .9; } to { transform: translate(-24%, 16%) scale(.95); opacity: .6; } }

/* the gate: an arch as wide as the screen, the photo inside, melting into the wall at the bottom */
.am-cover__gate {
    position: absolute; z-index: 1; top: 10px; left: 10px; right: 10px; bottom: 0; overflow: hidden;
    border-radius: 999px 999px 0 0; background: var(--inv-stock);
    -webkit-mask: linear-gradient(180deg, #000 0, #000 56%, rgb(0 0 0 / .7) 70%, rgb(0 0 0 / .25) 86%, transparent 98%);
    mask: linear-gradient(180deg, #000 0, #000 56%, rgb(0 0 0 / .7) 70%, rgb(0 0 0 / .25) 86%, transparent 98%);
}
/* shade: a little at the top for the keystone and the label, more at the bottom for the words */
.am-cover__gate::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 55%, transparent), transparent 22%),
        linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--inv-primary) 55%, transparent) 62%, color-mix(in srgb, var(--inv-primary) 85%, transparent) 85%);
}
.am-cover__img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 22%;
    transform-origin: 50% 30%; animation: am-kenburns 24s ease-in-out infinite alternate;
}
@keyframes am-kenburns { from { transform: scale(1.03); } to { transform: scale(1.13) translate(-1.5%, 1%); } }
.am-cover__gate--empty {
    background: radial-gradient(70% 45% at 50% 32%, color-mix(in srgb, var(--inv-clay) 45%, transparent), transparent 75%), linear-gradient(180deg, var(--inv-stock), var(--inv-primary));
}
.am-cover__sun {
    position: absolute; left: 50%; top: 24%; width: 46%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--inv-clay) 90%, #fff), var(--inv-accent) 60%, color-mix(in srgb, var(--inv-accent) 70%, #000));
    box-shadow: 0 0 80px color-mix(in srgb, var(--inv-clay) 50%, transparent);
}
/* a slow band of light crossing the photo now and then */
.am-cover__sheen {
    position: absolute; z-index: 1; inset: -10% -60%; pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .16) 50%, transparent 58%);
    transform: translateX(-70%); animation: am-sheen 9s ease-in-out 2.4s infinite;
}
@keyframes am-sheen { 0% { transform: translateX(-70%); } 35%, 100% { transform: translateX(70%); } }
/* the rim: a thin sand line and a clay line inside the arch */
.am-cover__rim {
    position: absolute; z-index: 2; inset: 9px 9px 0; border-radius: inherit; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-sand) 60%, transparent); border-bottom: 0;
}
.am-cover__rim::after {
    content: ''; position: absolute; inset: 6px 6px 0; border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--inv-clay) 45%, transparent); border-bottom: 0;
}
/* warm motes of light floating up */
.am-cover__motes { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.am-cover__motes span {
    position: absolute; bottom: -12px; left: calc(var(--m) * 6.9% + 2%); width: 4px; height: 4px; border-radius: 50%;
    background: color-mix(in srgb, var(--inv-clay) 70%, #fff); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--inv-clay) 80%, transparent);
    opacity: 0; animation: am-mote 11s linear infinite; animation-delay: calc(var(--m) * -.83s);
}
.am-cover__motes span:nth-child(3n) { width: 6px; height: 6px; animation-duration: 14s; }
.am-cover__motes span:nth-child(3n + 1) { width: 3px; height: 3px; animation-duration: 9s; background: color-mix(in srgb, var(--inv-sand) 85%, #fff); }
.am-cover__motes span:nth-child(4n) { animation-name: am-mote-r; }
@keyframes am-mote { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .85; } 70% { opacity: .5; } 100% { transform: translate(26px, -92vh); opacity: 0; } }
@keyframes am-mote-r { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .85; } 70% { opacity: .5; } 100% { transform: translate(-30px, -80vh); opacity: 0; } }

.am-cover__inner {
    position: relative; z-index: 3; width: 100%; min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; text-align: center;
    padding: 0 1.5rem clamp(1.4rem, 4svh, 2.2rem);
}
.am-cover__top { display: grid; justify-items: center; gap: .7rem; }
.am-cover__key {
    display: flex; align-items: center; justify-content: center; gap: .15rem; margin-top: 4px; padding: .7rem 1rem .4rem;
    border-radius: 999px 999px 4px 4px; background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    color: var(--inv-primary); font: italic 400 1.2rem/1 var(--am-serif);
    box-shadow: 0 10px 18px -8px rgb(0 0 0 / .6), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 35%, transparent);
}
.am-cover__key i { font-size: .78em; color: var(--am-accent-ink); }
.am-cover__label { --am-label: var(--inv-sand); text-shadow: 0 1px 8px rgb(0 0 0 / .45); }
.am-cover__words { display: grid; justify-items: center; gap: .55rem; width: 100%; }
.am-cover__names { font: 400 clamp(2.7rem, 12.4vw, 3.5rem)/1.02 var(--am-serif); letter-spacing: -.01em; color: var(--inv-background); text-shadow: 0 2px 18px rgb(0 0 0 / .35); }
.am-cover__names em, .am-hero__names em, .am-closing__names em { font-style: italic; color: var(--inv-clay); }
.am-cover__date { display: flex; align-items: center; gap: .65rem; font-weight: 200; font-size: 1.6rem; line-height: 1; letter-spacing: .08em; color: var(--inv-sand); }
.am-cover__date i, .am-bigdate i { display: block; width: .42rem; height: .62rem; border-radius: var(--am-arch); background: var(--inv-clay); }
.am-cover__quote { max-width: 20rem; font: italic 400 .98rem/1.42 var(--am-serif); color: color-mix(in srgb, var(--inv-background) 90%, var(--inv-primary)); }
.am-cover__guest {
    width: min(100%, 17.5rem); margin-top: .2rem; padding: .8rem 1.1rem .7rem;
    border-radius: 999px 999px .4rem .4rem / 2.4rem 2.4rem .4rem .4rem;
    background: color-mix(in srgb, var(--inv-primary) 45%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-sand) 32%, transparent);
}
.am-cover__guest p { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-clay); }
.am-cover__guest-name { display: block; margin-top: .15rem; font-weight: 500; font-size: 1.02rem; line-height: 1.35; color: var(--inv-background); overflow-wrap: anywhere; }
.am-open { margin-top: .3rem; padding: .85rem 1.6rem; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--inv-accent) 80%, #000), 0 0 0 6px color-mix(in srgb, var(--inv-accent) 18%, transparent); }
.am-cover--leave { transition: opacity .8s ease, transform .9s cubic-bezier(.65, 0, .35, 1); }
.am-cover--gone { opacity: 0; transform: translateY(-4%); }

/* the opening moment: the arch opens from its middle, the photo comes into focus, the rim and the keystone follow */
@keyframes am-gate-in { from { clip-path: inset(22% 18% 34% 18% round 999px 999px 0 0); } to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); } }
@keyframes am-focus { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: none; } }
@keyframes am-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.inv-anim .am-cover__gate { animation: am-gate-in 1.6s cubic-bezier(.7, 0, .2, 1) .1s both; }
html.inv-anim .am-cover__img { animation: am-focus 1.4s ease-out .2s both, am-kenburns 24s ease-in-out 1.6s infinite alternate; }
html.inv-anim .am-cover__rim { animation: am-fade-up 1s ease-out 1.2s both; }
/* ---------- photo-gradient backgrounds ---------- */
.am-bgphoto { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.am-bgphoto img { position: absolute; inset: -40px 0; width: 100%; height: calc(100% + 80px); object-fit: cover; opacity: .5; mix-blend-mode: luminosity; }
.am-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 62%, transparent), color-mix(in srgb, var(--inv-primary) 80%, transparent) 45%, var(--inv-primary) 96%);
}
.am-bgphoto--light img { opacity: .2; mix-blend-mode: multiply; filter: grayscale(1); }
.am-bgphoto--light::after { background: linear-gradient(180deg, color-mix(in srgb, var(--inv-sand) 60%, transparent), var(--inv-sand) 92%); }

/* ---------- hero: an arcade of three windows on the deep wall ---------- */
.am-hero { position: relative; overflow: hidden; padding: 3rem 1.5rem 3.4rem; text-align: center; }
body:has(.am-preview) .am-hero { padding-top: 4rem; }
.am-hero > :not(.am-bgphoto):not(.am-hero__block) { position: relative; z-index: 1; }
.am-hero__block {
    position: absolute; z-index: 0; left: -16%; top: 5.2rem; width: 66%; height: 26rem; border-radius: var(--am-arch);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-stock) 85%, transparent), transparent 92%);
}
.am-hero__label { --am-label: var(--inv-clay); margin-bottom: 1.6rem; }

.am-arcade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr) minmax(0, 1fr); align-items: end; column-gap: .65rem; padding: 0 .3rem; }
.am-arcade__win { --am-reveal: 4px; aspect-ratio: 3 / 4.6; }
.am-arcade__win--2 { --am-reveal: 5px; aspect-ratio: 3 / 4.5; }
.am-arcade__win--1 .am-window__photo--empty, .am-arcade__win--3 .am-window__photo--empty { background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, #fff 22%, transparent), transparent 75%), linear-gradient(175deg, var(--inv-clay), var(--inv-accent) 60%, color-mix(in srgb, var(--inv-accent) 80%, #000)); }
.am-arcade__mono {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
    font: italic 400 clamp(3.2rem, 15vw, 4.4rem)/.85 var(--am-serif); color: var(--inv-sand);
}
.am-arcade__mono i { font-size: .45em; line-height: 1.2; color: var(--inv-clay); }
.am-arcade__ledge {
    grid-column: 1 / -1; display: block; height: .95rem; margin: 0 -1.1rem;
    background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    box-shadow: 0 16px 20px -14px rgb(0 0 0 / .75), inset 0 -3px 0 color-mix(in srgb, var(--inv-primary) 16%, transparent);
}
.am-hero__names { margin-top: 1.8rem; font: 400 clamp(2.8rem, 12.6vw, 3.5rem)/1 var(--am-serif); letter-spacing: -.012em; color: var(--inv-background); }
.am-hero__date { display: grid; justify-items: center; gap: .5rem; margin-top: 1.2rem; }
.am-bigdate { display: flex; align-items: center; gap: .9rem; font-weight: 200; font-size: clamp(2.8rem, 13vw, 3.6rem); line-height: 1; letter-spacing: .02em; color: var(--inv-clay); }
.am-bigdate i { width: .5rem; height: .75rem; background: var(--inv-sand); opacity: .8; }
.am-hero__day { font-size: .72rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--inv-sand); }

/* after opening the arcade windows rise one by one */
@keyframes am-win-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
html.inv-anim.inv-opened .am-arcade__win { animation: am-win-up 1.1s cubic-bezier(.16, 1, .3, 1) both; }
html.inv-anim.inv-opened .am-arcade__win--1 { animation-delay: .25s; }
html.inv-anim.inv-opened .am-arcade__win--2 { animation-delay: .1s; }
html.inv-anim.inv-opened .am-arcade__win--3 { animation-delay: .4s; }

/* ---------- sections ---------- */
.am-main { position: relative; }
.am-section {
    --am-bg: var(--inv-background); --am-fg: var(--inv-text); --am-muted: var(--inv-muted);
    position: relative; isolation: isolate; overflow: hidden; padding: 4.2rem 1.5rem 4.4rem;
    background-color: var(--am-bg); color: var(--am-fg); text-align: center;
}
.am-section > :not(.am-bgphoto):not(.am-section__arch) { position: relative; z-index: 1; }
.am-tone-light { --am-bg: var(--inv-background); }
.am-tone-stone { --am-bg: var(--inv-sand); --am-muted: color-mix(in srgb, var(--inv-muted) 85%, var(--inv-text)); }
.am-tone-deep {
    --am-fg: var(--inv-background); --am-muted: color-mix(in srgb, var(--inv-background) 80%, var(--inv-primary));
    --am-title: var(--inv-background); --am-em: var(--inv-clay); --am-label: var(--inv-clay);
    --am-btn-bg: var(--inv-sand); --am-btn-fg: var(--inv-primary); --am-line-fg: var(--inv-sand);
    background: var(--am-deep);
}
.am-tone-accent {
    --am-bg: var(--inv-accent); --am-fg: #fff; --am-muted: color-mix(in srgb, #fff 88%, var(--inv-accent));
    --am-title: #fff; --am-em: color-mix(in srgb, var(--inv-sand) 90%, #fff); --am-label: var(--inv-sand);
    background: linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 92%, #fff), color-mix(in srgb, var(--inv-accent) 84%, #000));
}
/* deep sections start under a travertine lintel */
.am-tone-deep::before {
    content: ''; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 8px;
    background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    box-shadow: 0 6px 10px -4px rgb(0 0 0 / .45);
}
.am-closing.am-tone-deep::before { display: none; }

/* a big arch color block behind a deep section (asymmetric) */
.am-section__arch {
    position: absolute; z-index: 0; top: 3.2rem; width: 64%; height: min(78%, 30rem); border-radius: var(--am-arch);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-stock) 90%, transparent), transparent 94%);
}
.am-section__arch--right { right: -16%; }
.am-section__arch--left { left: -16%; }

.am-heading { display: grid; justify-items: center; gap: .55rem; margin-bottom: 1.8rem; }
.am-heading--left { justify-items: start; text-align: left; }
.am-heading__label { display: inline-flex; align-items: center; gap: .65rem; }
.am-heading__label::before, .am-heading:not(.am-heading--left) .am-heading__label::after { content: ''; width: 1.3rem; height: 2px; background: var(--inv-accent); }
.am-tone-deep .am-heading__label::before, .am-tone-deep .am-heading__label::after { background: var(--inv-clay); }
.am-tone-accent .am-heading__label::before, .am-tone-accent .am-heading__label::after { background: var(--inv-sand); }

.am-divider { display: block; margin: .15rem auto 0; color: var(--am-fg); overflow: visible; }
.am-heading--left .am-divider { margin-left: -2.6rem; }
.am-divider__line { stroke: currentColor; stroke-width: .8; opacity: .45; fill: none; }
.am-divider__arch { stroke: var(--am-title, var(--inv-primary)); stroke-width: 1.3; fill: none; }
.am-divider__key { fill: var(--inv-accent); }
.am-divider__ledge { stroke: var(--am-title, var(--inv-primary)); stroke-width: 1.4; }
.am-tone-deep .am-divider__key { fill: var(--inv-clay); }
.am-tone-accent .am-divider__key { fill: var(--inv-primary); }
.am-section > .am-muted { max-width: 22rem; margin: -.5rem auto 1.6rem; }

/* the divider's middle arch rises when its heading arrives */
html.inv-anim .am-heading .am-divider__key { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .8s cubic-bezier(.16, 1, .3, 1) .35s; }
html.inv-anim .is-revealed .am-heading .am-divider__key, html.inv-anim .am-heading.is-revealed .am-divider__key { transform: none; }

/* ---------- opening (travertine) ---------- */
.am-opening { display: grid; justify-items: center; gap: 1.05rem; padding-top: 3.6rem; }
.am-opening > .am-divider { margin-bottom: .2rem; }
.am-arabic { font-family: 'Amiri', serif; font-size: 1.7rem; line-height: 1.8; color: var(--inv-primary); }
.am-opening__greeting { font-weight: 600; font-size: .98rem; color: var(--inv-primary); }
.am-opening__message { max-width: 22rem; }
.am-quote { position: relative; width: 100%; margin-top: 1.4rem; padding: 0 1.3rem 1.3rem 0; text-align: left; }
.am-quote__block {
    position: absolute; right: 0; bottom: 0; top: 2.6rem; width: 70%; border-radius: var(--am-arch);
    background: linear-gradient(165deg, color-mix(in srgb, var(--inv-accent) 85%, #fff), var(--inv-accent) 50%, color-mix(in srgb, var(--inv-accent) 82%, #000));
    box-shadow: var(--am-depth);
}
.am-quote__panel {
    position: relative; overflow: hidden; padding: 3.4rem 1.5rem 1.7rem 2.2rem; color: var(--inv-background);
    border-radius: 999px 999px .25rem .25rem / 8.5rem 8.5rem .25rem .25rem; background: var(--am-deep); box-shadow: var(--am-depth);
}
.am-quote__flute {
    position: absolute; left: 0; top: 4.5rem; bottom: 0; width: .85rem;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-sand) 26%, transparent) 0 2px, transparent 2px 5px);
}
.am-quote__mark { display: block; height: 1.9rem; margin-bottom: .2rem; font: italic 400 4.6rem/.9 var(--am-serif); color: var(--inv-clay); }
.am-quote blockquote { font: italic 400 1.17rem/1.48 var(--am-serif); }
.am-quote figcaption { margin-top: .9rem; font-size: .66rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-clay); }

/* ---------- couple: asymmetric arch windows with offset blocks ---------- */
.am-couple__intro { max-width: 22rem; margin: -.5rem auto 2.2rem; font-size: .9rem; color: var(--am-muted); }
.am-person { display: grid; grid-template-columns: minmax(0, 54%) minmax(0, 1fr); align-items: end; gap: 1.5rem; text-align: left; }
.am-person--right { grid-template-columns: minmax(0, 1fr) minmax(0, 54%); text-align: right; }
.am-person--right .am-person__frame { order: 2; }
.am-person__frame { position: relative; margin-bottom: 1.1rem; }
.am-person__block {
    position: absolute; top: 2.6rem; bottom: -1.1rem; left: 1.3rem; right: -1.25rem; border-radius: var(--am-arch);
    background: var(--am-deep); box-shadow: var(--am-depth);
}
.am-person--right .am-person__block {
    left: -1.25rem; right: 1.3rem;
    background: linear-gradient(165deg, color-mix(in srgb, var(--inv-accent) 85%, #fff), var(--inv-accent) 50%, color-mix(in srgb, var(--inv-accent) 82%, #000));
}
/* a fluted pilaster on the outer side, with a stone capital */
.am-person__column {
    position: absolute; bottom: -1.1rem; left: -.85rem; width: .6rem; height: 62%;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 55%, transparent) 0 1px, transparent 1px 3.5px), var(--inv-sand);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 22%, transparent);
}
.am-person__column::before { content: ''; position: absolute; left: -.2rem; right: -.2rem; top: -.35rem; height: .35rem; background: var(--inv-sand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 22%, transparent); }
.am-person--right .am-person__column { left: auto; right: -.85rem; }
.am-person__window { --am-reveal: 5px; aspect-ratio: 3 / 4.25; }
.am-person__initial { display: grid; place-items: center; font: italic 400 4rem/1 var(--am-serif); color: var(--inv-background); }
.am-person__text { min-width: 0; display: grid; gap: .3rem; justify-items: start; padding-bottom: .4rem; }
.am-person--right .am-person__text { justify-items: end; }
.am-person__role { font-size: .6rem; letter-spacing: .26em; }
.am-person__nickname { font: 400 2.75rem/.95 var(--am-serif); letter-spacing: -.01em; color: var(--inv-primary); overflow-wrap: anywhere; }
.am-person__name { font-size: .9rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.am-person__parents { font-size: .8rem; line-height: 1.55; color: var(--am-muted); }
.am-person__parents strong { color: var(--am-fg); font-weight: 500; }
.am-person .am-btn { margin-top: .4rem; }
.am-couple__amp { position: relative; display: flex; justify-content: center; margin: 2.2rem 0 2.2rem; }
.am-couple__amp::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--inv-line); }
.am-couple__amp span {
    position: relative; display: grid; place-items: center; width: 3.4rem; height: 4.3rem; padding-top: .6rem; border-radius: var(--am-arch);
    background: var(--inv-accent); color: #fff; font: italic 400 2.3rem/1 var(--am-serif); box-shadow: var(--am-depth);
}
@media (max-width: 370px) {
    .am-person { gap: 1.2rem; }
    .am-person__nickname { font-size: 2.3rem; }
}

/* ---------- countdown: an arcade of travertine counters on the deep wall ---------- */
.am-countdown { text-align: left; }
.am-countdown__date { display: inline-flex; align-items: center; gap: .45rem; margin: -.6rem 0 1.8rem; font-size: .9rem; color: var(--inv-sand); }
.am-countdown__arcade { text-align: center; }
.am-countdown .inv-countdown { position: relative; gap: .5rem; align-items: end; padding: 0 .2rem .95rem; }
.am-countdown .inv-countdown::after {
    content: ''; position: absolute; left: -.6rem; right: -.6rem; bottom: 0; height: .95rem;
    background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    box-shadow: 0 14px 18px -12px rgb(0 0 0 / .75), inset 0 -3px 0 color-mix(in srgb, var(--inv-primary) 16%, transparent);
}
.am-countdown .inv-countdown__item {
    flex: 1; min-width: 0; max-width: 5.2rem; padding: 1.5rem .2rem .85rem; border-radius: var(--am-arch); color: var(--inv-primary);
    background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    box-shadow: var(--am-depth), inset 0 0 0 4px color-mix(in srgb, var(--inv-background) 45%, transparent);
}
.am-countdown .inv-countdown__item:nth-child(2) { color: #fff; background: linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 85%, #fff), var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 82%, #000)); }
.am-countdown .inv-countdown__value { font-size: 1.85rem; font-weight: 300; line-height: 1.1; }
.am-countdown .inv-countdown__label { margin-top: .2rem; font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.am-countdown .inv-countdown__actions { margin-top: 1.7rem; }
.am-countdown .inv-countdown__actions .inv-button { font-size: .68rem; }
.am-countdown .inv-countdown__done { font-size: .9rem; color: var(--inv-sand); }

/* ---------- events: cards with a wide arch window, deep and light in turn ---------- */
.am-events__intro { max-width: 22rem; margin: -.5rem auto 2rem; font-size: .9rem; color: var(--am-muted); }
.am-event {
    --am-ev-fg: var(--inv-text); --am-ev-muted: var(--inv-muted);
    position: relative; display: grid; justify-items: center; gap: .35rem; padding: .7rem .7rem 1.6rem;
    border-radius: 999px 999px .3rem .3rem / 10rem 10rem .3rem .3rem; color: var(--am-ev-fg);
    background: var(--inv-background); box-shadow: var(--am-depth);
}
.am-event--deep {
    --am-ev-fg: var(--inv-background); --am-ev-muted: color-mix(in srgb, var(--inv-background) 80%, var(--inv-primary));
    --am-btn-bg: var(--inv-sand); --am-btn-fg: var(--inv-primary); --am-line-fg: var(--inv-sand);
    background: var(--am-deep);
}
.am-event + .am-event { margin-top: 2rem; }
.am-event__top { position: relative; width: 100%; margin-bottom: 1.3rem; }
.am-event__window { --am-reveal: 5px; height: 12.5rem; border-radius: 999px 999px .2rem .2rem / 9.6rem 9.6rem .2rem .2rem; }
.am-event__window::after, .am-event__window .am-window__img, .am-event__window .am-window__photo { border-radius: 999px 999px .1rem .1rem / 9.2rem 9.2rem .1rem .1rem; }
.am-event__day {
    position: absolute; right: 1rem; bottom: -1.4rem; display: grid; place-items: center; align-content: center; width: 3.5rem; height: 4.5rem; padding-top: .45rem;
    border-radius: var(--am-arch); background: var(--inv-accent); color: #fff; box-shadow: var(--am-depth);
}
.am-event__day b { font-weight: 300; font-size: 1.7rem; line-height: 1; }
.am-event__day small { font-size: .56rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.am-event__name { margin-bottom: .3rem; font: 400 2.2rem/1.05 var(--am-serif); color: var(--am-ev-title, var(--inv-primary)); }
.am-event--deep .am-event__name { color: var(--inv-background); }
.am-event__line, .am-event__venue, .am-event__dress { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-size: .88rem; }
.am-event__time { font-weight: 600; color: var(--am-accent-ink); }
.am-event--deep .am-event__time { color: var(--inv-clay); }
.am-event__venue { margin-top: .45rem; font-weight: 600; font-size: .96rem; }
.am-event__address { max-width: 20rem; padding: 0 .6rem; font-size: .82rem; line-height: 1.6; color: var(--am-ev-muted); }
.am-event__dress { margin-top: .25rem; padding: .3rem .85rem; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); font-size: .76rem; }
.am-event__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; width: 100%; max-width: 22rem; margin-top: 1.1rem; padding: 0 .4rem; }
.am-event__actions .am-btn { padding-inline: .5rem; font-size: .66rem; letter-spacing: .06em; }
.am-event__actions .am-btn:only-child { grid-column: 1 / -1; }

/* ---------- love story: a fluted column down the deep wall ---------- */
.am-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.am-timeline::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 7px; transform: translateX(-50%);
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-sand) 55%, transparent) 0 1px, transparent 1px 3px);
    -webkit-mask: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
}
.am-moment {
    position: relative; display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) 1.9rem minmax(0, 1fr); grid-template-areas: "text dot meta"; column-gap: .7rem;
}
.am-moment--flip { grid-template-areas: "meta dot text"; }
.am-moment + .am-moment { margin-top: 2.1rem; }
.am-moment__dot {
    grid-area: dot; position: relative; z-index: 1; display: grid; place-items: center; width: 1.9rem; height: 2.4rem; padding-top: .3rem;
    border-radius: var(--am-arch); color: var(--inv-primary); font-size: .8rem; font-weight: 600;
    background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    box-shadow: 0 0 0 4px var(--inv-primary);
}
.am-moment__text { grid-area: text; min-width: 0; text-align: right; }
.am-moment--flip .am-moment__text { text-align: left; }
.am-moment__title { margin-top: .1rem; font: 400 1.5rem/1.08 var(--am-serif); color: var(--inv-background); overflow-wrap: anywhere; }
.am-moment__rule { display: block; width: 2.2rem; height: 2px; margin: .55rem 0 .6rem auto; background: var(--inv-clay); }
.am-moment--flip .am-moment__rule { margin-inline: 0 auto; }
.am-moment__story { font-size: .8rem; line-height: 1.62; color: var(--am-muted); overflow-wrap: anywhere; }
.am-moment__meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; text-align: left; }
.am-moment--flip .am-moment__meta { align-items: flex-end; text-align: right; }
.am-moment__date { font: italic 400 1.35rem/1.1 var(--am-serif); color: var(--inv-clay); overflow-wrap: anywhere; }
.am-moment__window { --am-reveal: 3px; width: min(5.6rem, 100%); aspect-ratio: 3 / 4; }
.am-moment__badge {
    display: grid; place-items: center; width: 3rem; height: 3.7rem; border-radius: var(--am-arch);
    background: var(--inv-accent); color: #fff;
}

/* ---------- gallery: an exhibition room ---------- */
.am-gallery__room { position: relative; padding: 0 .9rem .9rem 0; }
.am-gallery__block {
    position: absolute; right: 0; bottom: 0; top: 6rem; width: 78%; border-radius: var(--am-arch);
    background: var(--am-deep); box-shadow: var(--am-depth);
}
.am-gallery .inv-gallery-slider { position: relative; gap: .9rem; grid-template-columns: minmax(0, 1fr); }
.am-gallery .inv-gallery-slider__thumb { width: 3.4rem; aspect-ratio: 3 / 4.2; border: 0; border-radius: var(--am-arch); opacity: .55; box-shadow: inset 0 0 0 2px transparent; }
.am-gallery .inv-gallery-slider__thumb.is-active { opacity: 1; outline: 2px solid var(--inv-accent); outline-offset: 2px; }
.am-gallery .inv-gallery-slider__arrow {
    width: 2.1rem; height: 2.6rem; padding-top: .2rem; border: 0; border-radius: var(--am-arch);
    background: var(--inv-primary); color: var(--inv-background); font-size: 1.3rem; line-height: 1;
}
.am-gallery .inv-gallery-slider__stage {
    order: -1; border: 6px solid transparent; border-radius: 50% 50% .2rem .2rem / 40% 40% .2rem .2rem; box-shadow: var(--am-depth);
    background: var(--inv-sand) var(--am-stone-img) 0 0 / 420px auto padding-box border-box;
}
.am-gallery .inv-gallery-slider__slide { border-radius: 50% 50% 0 0 / 40% 40% 0 0; overflow: hidden; }
.am-gallery .inv-gallery-slider__count { background: color-mix(in srgb, var(--inv-primary) 88%, transparent); color: var(--inv-background); }

/* ---------- live streaming: a terracotta block with a deep window ---------- */
.am-stream__window {
    display: grid; justify-items: center; gap: .9rem; padding: 3rem 1.4rem 1.7rem; border-radius: 999px 999px .3rem .3rem / 7rem 7rem .3rem .3rem;
    background: var(--am-deep); color: var(--inv-background); box-shadow: var(--am-depth);
}
.am-stream__text { max-width: 20rem; font-size: .9rem; }
.am-stream__note { font-size: .84rem; font-weight: 600; color: var(--inv-clay); }

/* ---------- gift: travertine stone cards on the deep wall, two per row ---------- */
.am-gift .inv-gift { display: grid; gap: .8rem; }
.am-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.am-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.am-gift .inv-gift__account p { margin: 0; }
.am-gift .inv-gift__accounts .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    min-width: 0; margin: 0; padding: 1rem .85rem .9rem; overflow: hidden; text-align: left; color: var(--inv-text);
    border-radius: 3.2rem .3rem .3rem .3rem;
    background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    box-shadow: var(--am-depth);
}
/* the terracotta keystone in the corner */
.am-gift .inv-gift__accounts .inv-gift__account::before {
    content: ''; width: 1.3rem; height: 1.7rem; margin-left: .2rem; border-radius: var(--am-arch); background: var(--inv-accent);
}
.am-gift .inv-gift__accounts .inv-gift__bank {
    position: absolute; top: .85rem; right: .8rem; max-width: calc(100% - 3.4rem);
    font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: right; overflow-wrap: anywhere; color: var(--inv-primary);
}
.am-gift .inv-gift__accounts .inv-gift__logo { height: 1.5rem; padding: .2rem .4rem; border-radius: .3rem; }
.am-gift .inv-gift__accounts .inv-gift__logo img { max-width: 4rem; }
.am-gift .inv-gift__accounts .inv-gift__number {
    margin-top: .8rem; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 600; font-size: .96rem; line-height: 1.3; letter-spacing: .04em; color: var(--inv-primary); overflow-wrap: anywhere;
}
.am-gift .inv-gift__accounts .inv-gift__holder { font-size: .6rem; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-muted); overflow-wrap: anywhere; }
.am-gift .inv-gift__accounts .inv-button--outline {
    min-height: 0; margin-top: .6rem; padding: .35rem .8rem; border-radius: .3rem; font-size: .6rem; letter-spacing: .08em;
    background: var(--inv-primary); color: var(--inv-background); box-shadow: none;
}
.am-gift .inv-gift__address {
    margin: 0; padding: 2.2rem 1.2rem 1.5rem; border-radius: 999px 999px .3rem .3rem / 4rem 4rem .3rem .3rem; color: var(--inv-text);
    background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    display: grid; justify-items: center; gap: .3rem; font-size: .85rem; box-shadow: var(--am-depth);
}
.am-gift .inv-gift__address .inv-gift__bank { font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--am-accent-ink); }
.am-gift .inv-gift__address .inv-gift__holder { font-weight: 600; }
.am-gift .inv-gift__address .inv-button { margin-top: .5rem; --am-btn-bg: var(--inv-primary); --am-btn-fg: var(--inv-background); color: var(--inv-background); background: var(--inv-primary); box-shadow: none; }

/* ---------- rsvp & wishes: light cards ---------- */
.am-card {
    position: relative; padding: 1.6rem 1.15rem 1.3rem; border-radius: .35rem; text-align: left; color: var(--inv-text);
    background: color-mix(in srgb, var(--inv-background) 60%, #fff); box-shadow: var(--am-depth);
}
.am-card--arch { padding-top: 3rem; border-radius: 999px 999px .35rem .35rem / 5.5rem 5.5rem .35rem .35rem; }
.am-rsvp__frame { position: relative; padding: 0 .85rem .85rem 0; }
.am-rsvp__block {
    position: absolute; top: 4rem; right: 0; bottom: 0; width: 62%; border-radius: var(--am-arch);
    background: linear-gradient(165deg, color-mix(in srgb, var(--inv-accent) 85%, #fff), var(--inv-accent) 50%, color-mix(in srgb, var(--inv-accent) 82%, #000));
    box-shadow: var(--am-depth);
}
.am-card .inv-form { gap: .85rem; }
.am-card .inv-form label, .am-card .inv-form__choices legend { font-size: .8rem; font-weight: 500; }
.am-card .inv-form input:not([type=radio]):not([type=checkbox]), .am-card .inv-form select, .am-card .inv-form textarea {
    padding: .7rem .95rem; border: 1px solid var(--inv-line); border-radius: .35rem; background: var(--inv-background);
    color: var(--inv-text); font: 400 .9rem/1.5 var(--am-sans);
}
.am-card .inv-form input:focus, .am-card .inv-form select:focus, .am-card .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);
}
.am-card .inv-form__choices label { padding: .4rem .75rem; border: 1px solid var(--inv-line); border-radius: 999px; font-size: .78rem; }
.am-card .inv-form__choices label:has(input:checked) { border-color: var(--inv-primary); background: var(--inv-sand); }
.am-card .inv-button { --am-btn-bg: var(--inv-primary); --am-btn-fg: var(--inv-background); }
.am-card .inv-form button[type=submit] { width: 100%; }
.am-card .inv-rsvp__deadline { margin-bottom: .8rem; font-size: .78rem; color: var(--inv-muted); }
.am-card .inv-form__notice { background: var(--inv-sand); }
.am-wishes .am-card { --inv-wishes-height: 20rem; border-radius: .35rem .35rem 3rem 3rem; }
.am-wishes .inv-wishes__list { gap: .55rem; }
.am-wishes .inv-wish { padding: .7rem .9rem; border-radius: 1.6rem .3rem .3rem .3rem; background: var(--inv-sand); font-size: .82rem; }
.am-wishes .inv-wish:nth-child(even) { border-radius: .3rem 1.6rem .3rem .3rem; background: color-mix(in srgb, var(--inv-clay) 28%, var(--inv-background)); }
.am-wishes .inv-wish__name { font-size: .86rem; color: var(--inv-primary); }
.am-wishes .inv-wish__reply { background: var(--inv-background); }

/* ---------- closing: full photo fading into the wall, a portal of columns ---------- */
.am-closing { padding: 0 0 2.2rem; overflow: hidden; }
.am-closing__photo {
    position: relative; z-index: 0; height: min(56svh, 24rem); margin-bottom: -8.5rem; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%);
    mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%);
}
.am-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 8%; }
.am-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--inv-primary) 55%, transparent) 58%, var(--inv-primary) 96%);
}
.am-closing__photo--empty {
    height: 12rem; margin-bottom: -4.5rem;
    background:
        radial-gradient(60% 70% at 50% 100%, color-mix(in srgb, var(--inv-stock) 90%, transparent), transparent 70%),
        repeating-linear-gradient(90deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 18px), var(--inv-primary);
}
.am-closing__portal {
    position: relative; z-index: 1; display: grid; justify-items: center; gap: .45rem; margin: 0 1.2rem; padding: 2.4rem 1.6rem 0;
}
/* a warm light behind the keystone, under a soft double arch line that fades out towards the floor */
.am-closing__portal::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: -1.5rem; width: 17rem; height: 13rem; translate: -50% 0; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-clay) 30%, transparent), transparent);
}
.am-closing__arch {
    position: absolute; z-index: -1; inset: .9rem 0 1.6rem; border-radius: 999px 999px 0 0;
    border: 1px solid color-mix(in srgb, var(--inv-sand) 45%, transparent); border-bottom: 0;
    -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent);
}
.am-closing__arch::after {
    content: ''; position: absolute; inset: 7px 7px 0; border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--inv-clay) 40%, transparent); border-bottom: 0;
}
.am-closing__key {
    display: flex; align-items: center; justify-content: center; gap: .15rem; width: 3.4rem; height: 4.1rem; margin-bottom: .35rem; padding-top: .5rem;
    border-radius: var(--am-arch); background: linear-gradient(165deg, color-mix(in srgb, var(--inv-accent) 85%, #fff), var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 82%, #000));
    color: #fff; font: italic 400 1.2rem/1 var(--am-serif); box-shadow: var(--am-depth), 0 0 0 4px color-mix(in srgb, var(--inv-sand) 20%, transparent);
}
.am-closing__key i { font-size: .7em; opacity: .85; }
.am-closing__title { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
.am-closing .am-divider { margin-bottom: .35rem; }
.am-closing__message { max-width: 19rem; font-size: .93rem; line-height: 1.6; color: color-mix(in srgb, var(--inv-background) 92%, var(--inv-primary)); }
.am-closing__signature { margin-top: .6rem; font-size: .68rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-clay); }
.am-closing__names { margin-top: .1rem; font: 400 clamp(2.1rem, 9.5vw, 2.6rem)/1.05 var(--am-serif); color: var(--inv-background); }
.am-closing__date {
    display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: .7rem; padding: .65rem 1.6rem .55rem;
    background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    color: var(--inv-primary); font-weight: 300; font-size: 1.3rem; line-height: 1; letter-spacing: .14em;
    box-shadow: 0 16px 20px -12px rgb(0 0 0 / .7), inset 0 2px 0 color-mix(in srgb, #fff 40%, transparent), inset 0 -3px 0 color-mix(in srgb, var(--inv-primary) 14%, transparent);
}
.am-closing__date i { display: block; width: .4rem; height: .6rem; border-radius: var(--am-arch); background: var(--inv-accent); }

/* branding (must stay visible) on the deep page color */
.am-branding { color: color-mix(in srgb, var(--inv-background) 80%, var(--inv-primary)); opacity: 1; font-size: .72rem; }

/* ---------- floating UI kept inside the column ---------- */
body .am-nav.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-background) 95%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 75%, transparent);
    --inv-nav-active: var(--inv-primary);
    border-color: var(--inv-line); border-radius: 1.6rem 1.6rem .5rem .5rem;
}
.am-nav.inv-nav--icons .inv-nav__item { border-radius: 1.35rem 1.35rem .3rem .3rem; -webkit-tap-highlight-color: transparent; }
.am-nav.inv-nav--icons .inv-nav__item.is-active { color: var(--inv-background); }
.inv-music { right: calc(var(--am-edge) + 1rem); }
.inv-music__button { background: var(--inv-accent); color: #fff; box-shadow: 0 0 0 2px var(--inv-background), 0 6px 14px rgb(0 0 0 / .25); }
.inv-autoscroll { color: var(--inv-primary); font-family: var(--am-sans); }
.inv-autoscroll--running { background: var(--inv-primary); color: var(--inv-background); }
.inv-to-top { left: calc(var(--am-edge) + 1rem); border-radius: 999px 999px .3rem .3rem; background: var(--inv-sand); color: var(--inv-primary); box-shadow: 0 0 0 1px var(--inv-line), 0 6px 14px rgb(0 0 0 / .2); }
.inv-qr-tab { right: var(--am-edge); font-family: var(--am-sans); color: var(--inv-primary); border-color: var(--inv-line); background: color-mix(in srgb, var(--inv-background) 96%, transparent); border-radius: 1.2rem 0 0 .4rem; }
.inv-qr-sheet .inv-checkin { font-family: var(--am-sans); color: var(--inv-text); }
.inv-checkin__title { color: var(--inv-primary); }

/* reduced motion: nothing moves */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .am-cover__gate, .am-cover__img, .am-cover__rim, .am-cover__light, .am-cover__sheen, .am-arcade__win { animation: none !important; }
    .am-cover__motes, .am-cover__sheen { display: none; }
    .am-cover--leave { transition: opacity .3s ease; }
    .am-cover--gone { transform: none; }
}

/* ---------- cover fit: everything up to "Buka Undangan" on one phone screen (px steps: svh is unreliable in Chrome on iOS) ---------- */
@media (max-height: 760px) {
    .am-cover__words { gap: .45rem; }
    .am-cover__names { font-size: clamp(2.4rem, 11vw, 3rem); }
    .am-cover__date { font-size: 1.4rem; }
    .am-cover__quote { font-size: .9rem; line-height: 1.36; }
    .am-cover__guest { padding: .65rem 1rem .55rem; }
    .am-open { margin-top: .1rem; padding-block: .72rem; }
}
@media (max-height: 680px) {
    .am-cover__top { gap: .5rem; }
    .am-cover__words { gap: .38rem; }
    .am-cover__names { font-size: clamp(2.2rem, 10vw, 2.6rem); }
    .am-cover__date { font-size: 1.3rem; }
    .am-cover__quote { font-size: .84rem; line-height: 1.32; }
}
@media (max-height: 600px) {
    .am-cover__key { padding: .55rem .85rem .3rem; font-size: 1.05rem; }
    .am-cover__names { font-size: clamp(2rem, 9.4vw, 2.3rem); }
    .am-cover__quote { font-size: .8rem; line-height: 1.3; }
    .am-cover__inner { padding-bottom: 1.1rem; }
}

/* ---------- intro scene "Lorong Lengkung" (scene.json + sections/_scene): the camera walks through arch gates to the couple's window ---------- */
.am-scene { position: absolute; inset: 0; display: block; }
.am-scene__glow { border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-clay) 60%, transparent), color-mix(in srgb, var(--inv-clay) 20%, transparent) 55%, transparent); }
/* a gate: a thick arch rim (stone, terracotta or a lighter wall) with a thin inner line, standing on two bases */
.am-scene__gate { border-radius: 999px 999px 0 0; border: 14px solid var(--inv-sand); border-bottom: 0; background-image: none; }
.am-scene__gate--stone { border-color: var(--inv-sand); box-shadow: 0 0 0 1px color-mix(in srgb, #000 20%, transparent), inset 0 0 26px rgb(0 0 0 / .35); }
.am-scene__gate--clay { border-color: var(--inv-accent); box-shadow: inset 0 0 26px rgb(0 0 0 / .35); }
.am-scene__gate--wall { border-color: color-mix(in srgb, var(--inv-stock) 80%, var(--inv-sand)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-clay) 60%, transparent); }
.am-scene__gate span { position: absolute; inset: 10px 10px 0; border: 1.5px solid color-mix(in srgb, var(--inv-clay) 70%, transparent); border-bottom: 0; border-radius: inherit; }
.am-scene__gate--clay span { border-color: color-mix(in srgb, var(--inv-sand) 70%, transparent); }
/* the window at the end of the corridor */
.am-scene__portrait { display: block; }
.am-scene__frame {
    position: absolute; inset: 0 0 10px; overflow: hidden; border-radius: 999px 999px 0 0;
    border: 7px solid var(--inv-sand); border-bottom: 0; background: var(--inv-stock);
    box-shadow: 0 0 0 1px color-mix(in srgb, #000 25%, transparent), 0 30px 50px -20px rgb(0 0 0 / .7), 0 0 70px color-mix(in srgb, var(--inv-clay) 35%, transparent);
}
.am-scene__frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 20px 26px -16px rgb(0 0 0 / .6); }
.am-scene__photo { position: absolute; inset: 0; background: center 30% / cover no-repeat; }
.am-scene__empty { position: absolute; inset: 0; background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, #fff 22%, transparent), transparent 75%), linear-gradient(175deg, var(--inv-clay), var(--inv-accent) 60%, color-mix(in srgb, var(--inv-accent) 80%, #000)); }
.am-scene__sun { position: absolute; left: 50%; top: 34%; width: 34%; aspect-ratio: 1; margin-left: -17%; border-radius: 50%; background: color-mix(in srgb, var(--inv-background) 85%, var(--inv-clay)); box-shadow: 0 0 22px color-mix(in srgb, var(--inv-background) 60%, transparent); }
.am-scene__key {
    position: absolute; left: 50%; top: -6px; translate: -50% 0; display: flex; align-items: center; gap: .15rem; padding: .55rem .9rem .3rem;
    border-radius: 999px 999px 4px 4px; background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    color: var(--inv-primary); font: italic 400 1.15rem/1 var(--am-serif); box-shadow: 0 8px 14px -8px rgb(0 0 0 / .6);
}
.am-scene__key i { font-size: .78em; color: var(--am-accent-ink); }
.am-scene__sill {
    position: absolute; left: -9%; right: -9%; bottom: 0; height: 12px;
    background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    box-shadow: 0 14px 18px -10px rgb(0 0 0 / .7), inset 0 2px 0 color-mix(in srgb, #fff 40%, transparent);
}
.am-scene__column { display: flex; flex-direction: column; }
.am-scene__column::before, .am-scene__column::after { content: ''; flex: none; height: 4%; margin: 0 -14%; background: var(--inv-sand); box-shadow: 0 3px 4px -2px rgb(0 0 0 / .4); }
.am-scene__column span { flex: 1; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-sand) 92%, #fff) 0 22%, color-mix(in srgb, var(--inv-sand) 70%, var(--inv-primary)) 22% 28%), var(--inv-sand); }
/* the card becomes a travertine plaque on the floor below the window */
.inv-intro--scene:has(.am-scene) .inv-scene__card {
    top: 80%; aspect-ratio: auto; padding: 1.15rem 1.2rem 1.05rem; -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-radius: 4px; background-color: var(--inv-sand); background-image: var(--am-stone-img); background-size: 420px auto;
    box-shadow: var(--am-depth), inset 0 2px 0 color-mix(in srgb, #fff 40%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--inv-background) 40%, transparent);
}
.inv-intro--scene:has(.am-scene) .inv-scene__card::after {
    content: ''; position: absolute; inset: 11px; border: 1px solid color-mix(in srgb, var(--inv-accent) 45%, transparent); border-radius: 2px; pointer-events: none;
}
.inv-intro--scene:has(.am-scene) .inv-intro__label { font-family: var(--am-sans); font-weight: 500; letter-spacing: .3em; color: var(--am-accent-ink); }
.inv-intro--scene:has(.am-scene) .inv-intro__names { font-family: var(--am-serif); font-weight: 400; line-height: 1.02; font-size: clamp(1.9rem, 8.6vw, 2.6rem); color: var(--inv-primary); }
.inv-intro--scene:has(.am-scene) .inv-intro__date { font-family: var(--am-sans); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: .74rem; color: var(--inv-primary); }
.inv-intro--scene:has(.am-scene) .inv-intro__skip { background: color-mix(in srgb, var(--inv-sand) 85%, transparent); }