/*
 * Template "Syar'i Hijau Emas" (Pernikahan): deep emerald, gold and ivory with Moroccan zellige tiles.
 * Colors from the variant (x-inv.head): --inv-primary (emerald: titles, buttons, tile stars), --inv-accent (gold:
 * lines, inlays), --inv-background (ivory), --inv-text, --inv-deep (dark sections), --inv-soft (pale jade tint),
 * --inv-jade (tile accents), --inv-shine (bright gold: names and highlights on dark).
 * Fonts: the client's pair (--inv-font-heading titles, --inv-font-display names; default Cormorant Garamond +
 * Great Vibes), Lora for reading and labels, Amiri for the basmalah.
 * The tile mosaic, arabesque vine and gold gradients are SVG <defs> (sections/_defs) colored by the classes below.
 */

:root {
    --inv-primary: #0b5c44;
    --inv-accent: #c9a24e;
    --inv-background: #f8f3e6;
    --inv-text: #14261f;
    --inv-deep: #06362a;
    --inv-soft: #d9ebe0;
    --inv-jade: #2f8a6a;
    --inv-shine: #f2dc9c;
    --inv-radius: 14px;

    --sy-col: min(100vw, 460px);
    --sy-head: var(--inv-font-heading, 'Cormorant Garamond'), 'Times New Roman', serif;
    --sy-script: var(--inv-font-display, 'Great Vibes'), 'Brush Script MT', cursive;
    --sy-text: 'Lora', Georgia, serif;
    --sy-arabic: 'Amiri', 'Traditional Arabic', serif;

    --sy-cream: #fbf5e6;
    --sy-gold-ink: color-mix(in srgb, var(--inv-accent) 58%, #3b2a06);
    --sy-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --sy-line: color-mix(in srgb, var(--inv-accent) 62%, transparent);
    --sy-paper: color-mix(in srgb, #fff 60%, var(--inv-background));
    --sy-shadow: 0 20px 40px -26px color-mix(in srgb, var(--inv-deep) 75%, transparent);

    /* a fine eight-point star lattice (line art), used as a faint texture through mask */
    --sy-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none' stroke='black' stroke-width='.9'%3E%3Cg id='s'%3E%3Cpath d='M19.4 19.4h21.2v21.2H19.4Z'/%3E%3Cpath d='M30 15 45 30 30 45 15 30Z'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3Cuse href='%23s' x='-30' y='-30'/%3E%3Cuse href='%23s' x='30' y='-30'/%3E%3Cuse href='%23s' x='-30' y='30'/%3E%3Cuse href='%23s' x='30' y='30'/%3E%3Cpath d='M30 0v15M30 45v15M0 30h15M45 30h15M10.6 10.6l8.8 8.8M49.4 10.6l-8.8 8.8M10.6 49.4l8.8-8.8M49.4 49.4l-8.8-8.8'/%3E%3C/svg%3E");
    /* the horseshoe arch silhouette (same path as sections/_arch), stretched to any box */
    --sy-cap-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M8 60V58.1A44 44 0 1 1 92 58.1V60Z'/%3E%3C/svg%3E");
    --sy-arch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M8 130V58.1A44 44 0 1 1 92 58.1V130Z'/%3E%3C/svg%3E");
}

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

body.sy-body {
    min-height: 100vh;
    color: var(--inv-text);
    font-family: var(--sy-text);
    font-size: 15px;
    line-height: 1.7;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-primary) 60%, transparent), transparent 70%),
        var(--inv-deep);
    background-attachment: fixed;
}
/* the gold lattice backdrop on wide screens, behind the column */
body.sy-body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-accent); opacity: .14;
    -webkit-mask: var(--sy-lattice) center / 60px 60px repeat; mask: var(--sy-lattice) center / 60px 60px repeat;
}
.sy-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- SVG paint (tile mosaic, vine, gradients) ---------- */
.sy-g-shine { stop-color: var(--inv-shine); }
.sy-g-accent { stop-color: var(--inv-accent); }
.sy-g-dark { stop-color: color-mix(in srgb, var(--inv-accent) 70%, #4a3306); }
.sy-c-primary { stop-color: var(--inv-primary); }
.sy-c-deep { stop-color: var(--inv-deep); }

.sy-zl-cross { fill: color-mix(in srgb, var(--inv-soft) 60%, #fffdf6); }
.sy-zl-dot { fill: var(--inv-jade); }
.sy-zl-star { fill: var(--inv-primary); stroke: #fffaf0; stroke-width: 1.5; stroke-linejoin: round; }
.sy-zl-inlay { fill: var(--inv-accent); stroke: color-mix(in srgb, var(--inv-shine) 70%, #fff); stroke-width: 1.6; }
.sy-zl-pip { fill: var(--inv-deep); }
.sy-zd-cross { fill: color-mix(in srgb, var(--inv-deep) 88%, #000); }
.sy-zd-dot { fill: color-mix(in srgb, var(--inv-accent) 70%, transparent); }
.sy-zd-star { fill: color-mix(in srgb, var(--inv-primary) 82%, var(--inv-deep)); stroke: color-mix(in srgb, var(--inv-accent) 55%, transparent); stroke-width: 1.1; stroke-linejoin: round; }
.sy-zd-inlay { fill: color-mix(in srgb, var(--inv-accent) 22%, transparent); stroke: var(--inv-accent); stroke-width: 2.6; }
.sy-arab { fill: var(--inv-accent); stroke: var(--inv-accent); stroke-width: .4; }

.sy-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-accent); color: var(--inv-deep); font: 600 .7rem/1.4 var(--sy-text);
}

/* ---------- shared pieces ---------- */
.sy-kicker {
    font: 600 .7rem/1.5 var(--sy-text); letter-spacing: .26em; text-transform: uppercase;
    color: var(--sy-gold-ink);
}
.sy-script { font-family: var(--sy-script); font-weight: 400; line-height: 1.2; color: var(--inv-primary); }
.sy-star { display: block; color: var(--inv-accent); }
.sy-icon { display: block; width: 1.15rem; height: 1.15rem; flex: none; }
.sy-tiles { display: block; width: 100%; height: 100%; }

.sy-chip {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .85rem;
    padding: .42rem 1rem; border-radius: 999px; text-decoration: none;
    font: 600 .8rem/1.2 var(--sy-text); color: var(--inv-primary);
    background: var(--sy-paper);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 75%, transparent);
}
.sy-chip .sy-icon { width: 1rem; height: 1rem; }

.sy-card {
    position: relative; padding: 1.5rem 1.25rem; border-radius: 18px; text-align: left; color: var(--inv-text);
    background: var(--sy-paper);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 55%, transparent), inset 0 0 0 5px var(--sy-paper), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 25%, transparent), var(--sy-shadow);
}
.sy-card--tiled { overflow: hidden; padding-top: 2.6rem; }
.sy-card__tiles { position: absolute; top: 0; left: 0; right: 0; height: 1.15rem; border-bottom: 2px solid var(--inv-accent); }
.sy-lead { max-width: 31ch; margin: 0 auto 1.5rem; color: var(--sy-muted); font-size: .94rem; }

/* the horseshoe arch outline stretches over its frame; its outer line can draw itself once */
.sy-arch { position: absolute; inset: 0; z-index: -1; display: flex; flex-direction: column; pointer-events: none; color: var(--inv-accent); container-type: inline-size; }
.sy-arch svg { position: relative; display: block; width: 100%; overflow: visible; }
.sy-arch__cap { flex: none; aspect-ratio: 100 / 60; height: auto; }
.sy-arch__legs { flex: 1; min-height: 0; margin-top: -.5px; }
.sy-arch path { vector-effect: non-scaling-stroke; }
.sy-arch__out { stroke: currentColor; stroke-width: 1.7; }
.sy-arch__in { stroke: currentColor; stroke-width: .8; opacity: .6; }
/* the glass inside: the arch head shape + the rectangle between the jambs (one layer, no seam) */
.sy-arch__glass {
    --sy-glass: color-mix(in srgb, var(--inv-deep) 74%, transparent);
    position: absolute; inset: 0; background: var(--sy-glass);
    -webkit-mask: var(--sy-cap-mask) center top / 100% auto no-repeat, linear-gradient(#000 0 0) center bottom / 84% calc(100% - 59.6cqw) no-repeat;
    mask: var(--sy-cap-mask) center top / 100% auto no-repeat, linear-gradient(#000 0 0) center bottom / 84% calc(100% - 59.6cqw) no-repeat;
}

/* the arabesque border: two vine runs and a gold star gem */
.sy-arabline { display: flex; align-items: center; justify-content: center; gap: .35rem; width: 13.5rem; max-width: 100%; height: 24px; margin: .55rem auto 0; }
.sy-arabline__vine { flex: 1; height: 24px; min-width: 0; }
.sy-arabline__vine--flip { transform: scaleX(-1); }
.sy-arabline__gem { flex: none; width: 1.55rem; height: 1.55rem; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .25)); }
.sy-arabline__pip { fill: var(--inv-deep); }

/* the zellige medallion */
.sy-medal { position: relative; display: grid; place-items: center; width: 6.2rem; aspect-ratio: 1; flex: none; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .32)); }
.sy-medal__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sy-medal__rim { fill: none; stroke: url(#sy-gold); stroke-width: 2.6; }
.sy-medal__hair { fill: none; stroke: var(--inv-accent); stroke-width: .8; opacity: .75; }
.sy-medal__dots { fill: none; stroke: var(--inv-accent); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: .1 4.3; opacity: .85; }
.sy-medal__bead { fill: url(#sy-gold); stroke: var(--inv-deep); stroke-width: .6; }
.sy-medal__text {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .14em;
    font: 600 1.5rem/1 var(--sy-head); letter-spacing: .02em; color: var(--inv-shine);
    text-shadow: 0 1px 0 rgb(0 0 0 / .35);
}
.sy-medal__text i { font: 400 1.05em/1 var(--sy-script); font-style: normal; color: var(--inv-accent); }

/* zellige friezes at section edges: tiles between gold rules, optional arabesque strip on deep emerald */
.sy-band {
    display: flex; flex-direction: column; pointer-events: none;
    border-block: 1.5px solid var(--inv-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-deep) 30%, transparent);
}
.sy-band__tiles { height: 1.15rem; flex: none; }
.sy-band__arab { display: block; width: 100%; height: 24px; flex: none; background: var(--inv-deep); border-top: 1.5px solid var(--inv-accent); }
.sy-edge { position: absolute; left: 0; right: 0; z-index: 1; }
.sy-edge--top { top: 0; }
.sy-edge--bottom { bottom: 0; }

/* ---------- section tones ---------- */
.sy-section { position: relative; isolation: isolate; overflow: hidden; padding: 4.5rem 1.5rem; text-align: center; }

.sy-light {
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, var(--inv-accent) 12%, transparent), transparent 75%),
        var(--inv-background);
}
.sy-light::before, .sy-tint::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .05;
    -webkit-mask: var(--sy-lattice) center / 60px 60px repeat; mask: var(--sy-lattice) center / 60px 60px repeat;
}
.sy-tint { background: linear-gradient(180deg, color-mix(in srgb, var(--inv-soft) 92%, #fff), color-mix(in srgb, var(--inv-soft) 55%, var(--inv-background))); }
.sy-light .sy-title__text, .sy-tint .sy-title__text { color: var(--inv-primary); }

.sy-dark {
    --sy-ink: var(--sy-cream);
    --sy-ink-muted: color-mix(in srgb, var(--sy-cream) 88%, transparent);
    position: relative; isolation: isolate; color: var(--sy-ink);
    background:
        radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-deep), color-mix(in srgb, var(--inv-deep) 85%, #000));
}
.sy-dark::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-accent); opacity: .12;
    -webkit-mask: var(--sy-lattice) center top / 60px 60px repeat; mask: var(--sy-lattice) center top / 60px 60px repeat;
}
.sy-dark .sy-kicker { color: var(--inv-accent); }
.sy-dark .sy-script { color: var(--inv-shine); }
.sy-dark .sy-title__text { color: var(--sy-cream); }
.sy-dark .sy-title__text em { color: var(--inv-shine); }
.sy-dark .sy-lead { color: var(--sy-ink-muted); }

/* a client photo under a strong emerald gradient */
.sy-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.sy-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 40%; --inv-parallax: 40px; }
.sy-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(90% 50% at 50% 50%, color-mix(in srgb, var(--inv-primary) 35%, transparent), transparent),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 90%, transparent), color-mix(in srgb, var(--inv-deep) 74%, transparent) 45%, color-mix(in srgb, var(--inv-deep) 93%, transparent));
}

.sy-title { display: grid; justify-items: center; gap: .3rem; margin-bottom: 2rem; }
.sy-title__text { font: 600 2.35rem/1.12 var(--sy-head); color: var(--inv-primary); }
.sy-title__text em { font-style: italic; font-weight: 500; color: var(--sy-gold-ink); }
.sy-title__arab { margin-top: .35rem; width: 12rem; }

/* ---------- cover ---------- */
.sy-cover {
    position: fixed; top: 0; bottom: 0; left: 50%; z-index: 30; width: var(--sy-col); transform: translateX(-50%);
    overflow: hidden auto; overscroll-behavior: contain;
}
.sy-cover::after { opacity: .1; }
.sy-cover__photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.sy-cover__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.sy-cover__shade {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 40% at 50% 42%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 75%);
}
.sy-cover--photo .sy-cover__shade {
    background:
        radial-gradient(60% 40% at 50% 42%, color-mix(in srgb, var(--inv-accent) 12%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 62%, transparent) 0%, color-mix(in srgb, var(--inv-primary) 38%, transparent) 30%, color-mix(in srgb, var(--inv-deep) 70%, transparent) 60%, var(--inv-deep) 92%);
}
.sy-cover__arabtop {
    position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 24px;
    background: color-mix(in srgb, var(--inv-deep) 88%, transparent); border-bottom: 1.5px solid var(--inv-accent);
}
.sy-cover__band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; border-bottom: 0; }
.sy-cover__band .sy-band__tiles { height: 1.25rem; }

.sy-cover__inner {
    position: relative; z-index: 2; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
    padding: calc(clamp(2.4rem, 6.5svh, 3.6rem) + env(safe-area-inset-top)) 1.5rem calc(clamp(2.6rem, 6svh, 3.4rem) + env(safe-area-inset-bottom));
    text-align: center;
}
.sy-cover__frame {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(.15rem, .7svh, .4rem);
    width: 100%; max-width: 20rem; padding: clamp(3.4rem, 9svh, 4.8rem) 1.5rem clamp(1.2rem, 3svh, 2rem);
}
.sy-cover__arch { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--inv-accent) 45%, transparent)); }
.sy-cover__the { font: 600 .7rem/1.5 var(--sy-text); letter-spacing: .3em; text-transform: uppercase; color: var(--inv-accent); }
.sy-cover__medal { --enter-delay: .4s; width: clamp(4.6rem, 12.5svh, 6.4rem); margin: clamp(.1rem, .8svh, .5rem) 0 .15rem; }
.sy-cover__medal .sy-medal__text { font-size: clamp(1.1rem, 3svh, 1.45rem); }
.sy-cover__names { display: flex; flex-direction: column; align-items: center; font-size: min(clamp(2.8rem, 12.5vw, 3.5rem), 7.2svh); line-height: 1.1; color: var(--inv-shine); text-shadow: 0 2px 14px rgb(0 0 0 / .35); }
.sy-cover__amp { font-size: .6em; color: var(--inv-accent); margin: -.12em 0; }
.sy-cover__date { margin-top: .45rem; font: 600 .76rem/1.5 var(--sy-text); letter-spacing: .18em; text-transform: uppercase; color: var(--sy-cream); }
.sy-cover__quote { max-width: 28ch; margin-top: .35rem; font: italic 500 1.05rem/1.45 var(--sy-head); color: var(--sy-ink-muted); }

.sy-guest {
    position: relative; width: min(100%, 17rem); margin-top: clamp(.7rem, 2.4svh, 1.4rem); padding: .8rem 1.2rem .9rem;
    border: 1px solid var(--sy-line); border-radius: 6px;
    background: color-mix(in srgb, var(--inv-deep) 72%, transparent);
    outline: 1px solid color-mix(in srgb, var(--inv-accent) 32%, transparent); outline-offset: 3px;
}
.sy-guest__label { font: 600 .64rem/1.4 var(--sy-text); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-accent); }
.sy-guest__name { display: block; margin-top: .15rem; font: 600 1.35rem/1.3 var(--sy-head); color: var(--sy-cream); overflow-wrap: anywhere; }

.sy-open {
    margin-top: clamp(.8rem, 2.4svh, 1.3rem); padding: .85rem 1.8rem; gap: .55rem;
    font: 600 .8rem/1 var(--sy-text); letter-spacing: .16em; text-transform: uppercase;
    background: linear-gradient(135deg, var(--inv-shine), var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 72%, #000));
    color: var(--inv-deep);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-accent) 22%, transparent), 0 12px 26px -12px #000;
}
.sy-open__icon { width: 1.15rem; height: 1.15rem; }
.sy-open:hover { filter: brightness(1.06); }

.sy-cover--leave { transition: opacity .9s ease, transform 1s cubic-bezier(.6, 0, .3, 1); }
.sy-cover--gone { opacity: 0; transform: translateX(-50%) translateY(-5%); }

/* cover opening moment: the photo settles, the arch line draws once (≤ 2.5 s with the staggered text) */
@keyframes sy-settle { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes sy-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html.inv-anim .sy-cover__photo img { animation: sy-settle 2.2s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .sy-cover__arch .sy-draw { stroke-dasharray: 1; animation: sy-draw 1.8s .1s cubic-bezier(.45, 0, .2, 1) both; }
html.inv-anim .sy-cover__arch .sy-arch__in { animation: inv-enter 1s .9s both; }

/* ---------- page ---------- */
.sy-page {
    position: relative; display: flex; flex-direction: column; width: var(--sy-col); min-height: 100vh; margin: 0 auto; overflow: hidden;
    background: var(--inv-background);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 35%, transparent), 0 0 90px -10px rgb(0 0 0 / .55);
}
.sy-main { position: relative; }

/* ---------- opening (dark, faint photo) ---------- */
.sy-opening { padding-top: 4.2rem; padding-bottom: 4.8rem; }
.sy-basmalah { margin: 0 auto 1.4rem; }
.sy-arabic {
    font-family: var(--sy-arabic); font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.8; color: var(--inv-shine);
    text-shadow: 0 2px 16px color-mix(in srgb, var(--inv-accent) 40%, transparent);
}
.sy-basmalah__arab { width: 14rem; margin-top: 0; }
.sy-opening__greeting { font: italic 500 1.4rem/1.4 var(--sy-head); color: var(--sy-cream); }
.sy-opening__message { max-width: 33ch; margin: .9rem auto 0; color: var(--sy-ink-muted); }

.sy-verse {
    position: relative; overflow: hidden; margin: 2.6rem auto 0; padding: 3.6rem 1.5rem 1.8rem; max-width: 23rem;
    border-radius: 10px; background: var(--sy-paper); color: var(--inv-text);
    box-shadow: inset 0 0 0 1px var(--inv-accent), inset 0 0 0 6px var(--sy-paper), inset 0 0 0 7px color-mix(in srgb, var(--inv-accent) 45%, transparent), 0 24px 40px -22px #000;
}
.sy-verse__tiles { position: absolute; top: 0; left: 0; right: 0; height: 1.5rem; border-bottom: 2px solid var(--inv-accent); }
.sy-verse__seal {
    position: absolute; top: .55rem; left: 50%; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-left: -1.3rem;
    border-radius: 50%; background: var(--inv-deep); box-shadow: 0 0 0 1.5px var(--inv-accent), 0 0 0 4px var(--sy-paper);
}
.sy-verse__star { width: 1.7rem; height: 1.7rem; }
.sy-verse blockquote { font: italic 500 1.17rem/1.6 var(--sy-head); color: var(--inv-text); }
.sy-verse figcaption { margin-top: 1rem; font: 600 .7rem/1.4 var(--sy-text); letter-spacing: .22em; text-transform: uppercase; color: var(--sy-gold-ink); }

/* ---------- couple: tiled Moorish doors with the initials ---------- */
.sy-couple { padding-top: calc(4.2rem + 2.6rem); }
.sy-person {
    display: grid; grid-template-columns: 9.4rem minmax(0, 1fr); align-items: center; column-gap: 1rem;
    text-align: left;
}
.sy-person--flip { grid-template-columns: minmax(0, 1fr) 9.4rem; text-align: right; }
.sy-person--flip .sy-door { order: 2; }
.sy-door { position: relative; isolation: isolate; width: 9.4rem; aspect-ratio: 100 / 130; filter: drop-shadow(0 14px 16px color-mix(in srgb, var(--inv-deep) 40%, transparent)); }
.sy-door__inside {
    position: absolute; inset: 0;
    background: radial-gradient(80% 50% at 50% 38%, var(--inv-primary), var(--inv-deep));
    -webkit-mask: var(--sy-arch-mask) 0 0 / 100% 100% no-repeat; mask: var(--sy-arch-mask) 0 0 / 100% 100% no-repeat;
}
.sy-door__field { position: absolute; inset: 0; opacity: .5; }
.sy-door__dado { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; border-top: 2px solid var(--inv-accent); }
.sy-door__medal { position: absolute; top: 14%; left: 50%; width: 5.4rem; translate: -50% 0; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .4)); }
.sy-door__medal .sy-medal__text { font-size: 1.85rem; translate: 0 -.09em; }

.sy-person__label { font-size: .62rem; }
.sy-person__nick { font-size: 2.75rem; line-height: 1.15; overflow-wrap: anywhere; }
.sy-person__name { margin-top: .1rem; font: 600 1.28rem/1.25 var(--sy-head); color: var(--inv-text); overflow-wrap: anywhere; }
.sy-person__parents { margin-top: .5rem; font-size: .86rem; line-height: 1.5; color: var(--sy-muted); }
.sy-person__parents span { display: block; font-size: .76rem; font-style: italic; }

.sy-amp { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 2.2rem auto; }
.sy-amp__line { width: 6.2rem; margin: 0; }
.sy-amp__line .sy-arabline__gem { display: none; }
.sy-amp__line:last-child { transform: scaleX(-1); }
.sy-amp__badge {
    display: grid; place-items: center; width: 3.3rem; height: 3.3rem; flex: none; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--inv-primary), var(--inv-deep));
    box-shadow: 0 0 0 1.5px var(--inv-accent), 0 0 0 4px var(--inv-background), 0 0 0 5px var(--sy-line), var(--sy-shadow);
}
.sy-amp__badge .sy-script { font-size: 2rem; line-height: 1; color: var(--inv-shine); padding-top: .15rem; }

/* ---------- countdown (dark, faint photo, friezes at both edges) ---------- */
.sy-countdown { padding-top: calc(4.2rem + 1.2rem); padding-bottom: calc(4rem + 1.2rem); }
.sy-datecard { position: relative; display: grid; justify-items: center; width: 9.6rem; margin: 0 auto 2rem; padding: 3.2rem .5rem 2.9rem; }
.sy-datecard { isolation: isolate; }
.sy-datecard__arch .sy-arch__glass { --sy-glass: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 85%, transparent), color-mix(in srgb, var(--inv-deep) 92%, transparent)); }
.sy-datecard__dado { position: absolute; left: 8%; right: 8%; bottom: 0; z-index: -1; height: 1.9rem; border-top: 2px solid var(--inv-accent); }
.sy-datecard__day, .sy-datecard__month { position: relative; font: 600 .68rem/1.4 var(--sy-text); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-accent); }
.sy-datecard__num { position: relative; font: 600 3.4rem/1.05 var(--sy-head); color: var(--inv-shine); margin: .1rem 0; }

.inv-countdown { gap: .5rem; }
.inv-countdown__item {
    flex: 1; min-width: 0; max-width: 5.1rem; padding: 1.1rem .2rem .65rem;
    border-radius: 50% 50% 10px 10px / 30px 30px 10px 10px;
    background: color-mix(in srgb, var(--inv-deep) 55%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.inv-countdown__value { font: 600 1.7rem/1.2 var(--sy-head); color: var(--inv-shine); }
.inv-countdown__label { margin-top: .15rem; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sy-cream); }
.inv-countdown__actions { margin-top: 1.5rem; }
.inv-countdown__actions .inv-button { padding: .6rem 1.05rem; font-size: .78rem; }
.inv-countdown__done { font: italic 500 1.2rem var(--sy-head); }

/* ---------- buttons ---------- */
.inv-button {
    background: var(--inv-primary); color: #fff; font: 600 .86rem/1.2 var(--sy-text); letter-spacing: .02em;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 10px 20px -14px var(--inv-deep);
}
.inv-button--outline {
    background: var(--sy-paper); color: var(--inv-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 45%, transparent);
}
.sy-dark .inv-button { background: linear-gradient(135deg, var(--inv-shine), var(--inv-accent)); color: var(--inv-deep); box-shadow: 0 10px 20px -12px #000; }
.sy-dark .inv-button--outline { background: color-mix(in srgb, var(--inv-deep) 50%, transparent); color: var(--sy-cream); box-shadow: inset 0 0 0 1px var(--sy-line); }
.sy-dark .sy-card .inv-button { background: var(--inv-primary); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent); }
.sy-dark .sy-card .inv-button--outline { background: var(--sy-paper); color: var(--inv-primary); }

/* ---------- events: tile panel behind the title, cards with a photo or tile header ---------- */
.sy-events__panel {
    position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: 19rem; pointer-events: none;
    -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent);
}
.sy-events__tiles { opacity: .42; }
.sy-events .sy-title { position: relative; }
.sy-events .sy-title::before {
    content: ''; position: absolute; inset: -1.2rem -1rem; z-index: -1;
    background: radial-gradient(closest-side, var(--inv-background) 55%, transparent);
}

.sy-events__list { display: grid; gap: 1.8rem; }
.sy-wcard {
    position: relative; overflow: hidden; border-radius: 1.6rem; text-align: center;
    background: var(--sy-paper);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent), var(--sy-shadow);
}
.sy-wcard__band {
    position: relative; isolation: isolate; display: grid; align-content: end; justify-items: center; min-height: 11rem;
    padding: 1.4rem 1.2rem 2.2rem; overflow: hidden; border-bottom: 2px solid var(--inv-accent);
}
.sy-wcard__photo, .sy-wcard__tiles { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.sy-wcard__photo { object-fit: cover; object-position: center 45%; }
.sy-wcard__band--photo::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 15%, transparent) 15%, color-mix(in srgb, var(--inv-deep) 88%, transparent) 78%);
}
.sy-wcard__plaque { color: var(--sy-cream); }
.sy-wcard__band:not(.sy-wcard__band--photo) { align-content: center; }
.sy-wcard__band:not(.sy-wcard__band--photo) .sy-wcard__plaque {
    padding: 1.3rem 1.6rem .9rem; border-radius: 999px 999px 12px 12px;
    background: radial-gradient(90% 70% at 50% 25%, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 0 0 1px var(--inv-accent), inset 0 0 0 4px var(--inv-deep), inset 0 0 0 5px color-mix(in srgb, var(--inv-accent) 45%, transparent), 0 12px 20px -10px #000;
}
.sy-wcard__no { font-size: .62rem; color: var(--inv-shine); }
.sy-wcard__name { margin-top: .1rem; font: 600 2rem/1.15 var(--sy-head); color: var(--sy-cream); overflow-wrap: anywhere; text-shadow: 0 2px 10px rgb(0 0 0 / .35); }
.sy-wcard__seal {
    position: relative; z-index: 2; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: -1.6rem auto .7rem;
    border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--inv-primary), var(--inv-deep));
    box-shadow: 0 0 0 1.5px var(--inv-accent), 0 0 0 4px var(--sy-paper), var(--sy-shadow);
}
.sy-wcard__star { width: 2rem; height: 2rem; }
.sy-wcard__body { display: grid; justify-items: center; gap: .55rem; padding: 0 1.25rem 1.6rem; }
.sy-wcard__body .sy-icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--sy-gold-ink); }
.sy-wcard__time, .sy-wcard__date, .sy-wcard__dress { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; overflow-wrap: anywhere; }
.sy-wcard__time {
    padding: .32rem 1rem; border-radius: 999px; background: var(--inv-primary); color: #fff;
    font: 600 .98rem/1.3 var(--sy-text); letter-spacing: .02em;
}
.sy-wcard__body .sy-wcard__time .sy-icon { color: var(--inv-shine); }
.sy-wcard__date { font: 600 1.02rem/1.4 var(--sy-text); color: var(--inv-text); }
.sy-wcard__place {
    display: grid; justify-items: center; gap: .1rem; width: 100%; margin-top: .3rem; padding: .85rem .9rem;
    border-radius: 1.2rem; border: 1px dashed var(--sy-line);
    background: color-mix(in srgb, var(--inv-soft) 60%, transparent);
}
.sy-wcard__place .sy-icon { width: 1.25rem; height: 1.25rem; margin-bottom: .15rem; }
.sy-wcard__venue { font: 600 1.2rem/1.35 var(--sy-head); color: var(--inv-primary); overflow-wrap: anywhere; }
.sy-wcard__address { font-size: .88rem; line-height: 1.5; color: var(--sy-muted); overflow-wrap: anywhere; }
.sy-wcard__dress { padding: .25rem .85rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sy-line); font-size: .88rem; }
.sy-wcard__dress em { font-style: normal; font-weight: 600; color: var(--inv-primary); }
.sy-wcard .inv-maps { width: 100%; margin-top: .6rem; }
.inv-maps { margin-top: 1.3rem; text-align: center; }
.inv-maps .inv-button { padding: .7rem 1.4rem; }

/* ---------- love story: zig-zag timeline, line in the center ---------- */
.sy-story { padding: calc(4.2rem + 2.6rem) 1rem 4.5rem; }
.sy-timeline { position: relative; display: grid; gap: 1.6rem; padding: .4rem 0; list-style: none; }
.sy-timeline::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; margin-left: -.75px;
    background: linear-gradient(transparent, var(--inv-accent) 5%, var(--inv-accent) 95%, transparent);
}
/* text | ornament | date; the flipped moments swap the two sides */
.sy-moment { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.1rem minmax(0, 1fr); column-gap: .45rem; align-items: start; }
.sy-moment__text { grid-column: 1; grid-row: 1; text-align: right; }
.sy-moment__dot { grid-column: 2; grid-row: 1; }
.sy-moment__aside { grid-column: 3; grid-row: 1; display: grid; justify-items: start; gap: .3rem; padding-top: .2rem; text-align: left; }
.sy-moment--flip .sy-moment__text { grid-column: 3; text-align: left; }
.sy-moment--flip .sy-moment__aside { grid-column: 1; justify-items: end; text-align: right; }
.sy-moment__dot {
    justify-self: center; display: grid; place-items: center; margin-top: .2rem;
    width: 1.7rem; height: 1.7rem; rotate: 45deg; border-radius: 4px;
    background: radial-gradient(circle, var(--inv-primary), var(--inv-deep)); color: var(--inv-shine);
    box-shadow: 0 0 0 1.5px var(--inv-accent), 0 0 0 4px color-mix(in srgb, var(--inv-soft) 80%, #fff);
}
.sy-moment__dot .sy-icon { width: .85rem; height: .85rem; rotate: -45deg; }
.sy-moment__title { font: 700 1.25rem/1.2 var(--sy-head); color: var(--inv-primary); overflow-wrap: anywhere; }
.sy-moment__rule {
    display: block; width: 72%; height: 0; margin: .45rem 0 .45rem auto;
    border-top: 1.5px dotted var(--inv-accent);
}
.sy-moment--flip .sy-moment__rule { margin-left: 0; margin-right: auto; }
.sy-moment__story { font-size: .85rem; line-height: 1.5; color: var(--sy-muted); overflow-wrap: anywhere; }
.sy-moment__star { width: 1.35rem; height: 1.35rem; color: var(--sy-gold-ink); }
.sy-moment__date { font: 600 1.05rem/1.3 var(--sy-head); letter-spacing: .04em; overflow-wrap: anywhere; color: var(--sy-gold-ink); }

/* ---------- live (dark, faint photo) ---------- */
.sy-glass {
    position: relative; padding: 1.6rem 1.3rem; border-radius: 18px;
    background: color-mix(in srgb, var(--inv-deep) 62%, transparent);
    box-shadow: inset 0 0 0 1px var(--sy-line), inset 0 0 0 5px color-mix(in srgb, var(--inv-deep) 40%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 25%, transparent);
}
.sy-live__card { display: grid; justify-items: center; gap: .6rem; text-align: center; }
.sy-live__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg, var(--inv-shine), var(--inv-accent)); color: var(--inv-deep); }
.sy-live__icon .sy-icon { width: 1.5rem; height: 1.5rem; }
.sy-live__badge { display: inline-flex; align-items: center; gap: .45rem; font: 600 .7rem/1.4 var(--sy-text); letter-spacing: .18em; text-transform: uppercase; color: var(--inv-shine); }
.sy-live__badge span { width: .5rem; height: .5rem; border-radius: 50%; background: #e05252; box-shadow: 0 0 0 4px color-mix(in srgb, #e05252 25%, transparent); animation: sy-pulse 2s ease-in-out infinite; }
.sy-live__note { font-size: .86rem; color: var(--sy-ink-muted); }
@keyframes sy-pulse { 0%, 100% { opacity: .5; scale: 1; } 50% { opacity: .9; scale: 1.06; } }

/* ---------- gift: accounts as emerald bank cards ---------- */
.sy-gift { padding-top: calc(4.2rem + 2.6rem); }
.sy-giftbox { display: grid; gap: 1rem; }
.inv-gift__account + .inv-gift__account { margin-top: 0; }
/* the accounts: two compact cards per row; an odd last card spans the row */
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account:not(.inv-gift__address) {
    position: relative; isolation: isolate; overflow: hidden; min-width: 0; margin: 0;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: .8rem .8rem .85rem; border-radius: 12px; text-align: left; color: var(--sy-cream);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--inv-accent) 28%, transparent), transparent 55%),
        linear-gradient(135deg, var(--inv-primary), var(--inv-deep) 72%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 16px 28px -20px #000;
}
/* the chip */
.inv-gift__account:not(.inv-gift__address)::before {
    content: ''; display: block; order: 1; width: 1.7rem; height: 1.3rem; margin-top: .55rem; border-radius: 4px;
    background:
        linear-gradient(90deg, transparent 31%, rgb(0 0 0 / .22) 32% 34%, transparent 35% 65%, rgb(0 0 0 / .22) 66% 68%, transparent 69%),
        linear-gradient(transparent 46%, rgb(0 0 0 / .22) 47% 53%, transparent 54%),
        linear-gradient(135deg, var(--inv-shine), var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 70%, #000));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15);
}
/* a faint star lattice on the card */
.inv-gift__account:not(.inv-gift__address)::after {
    content: ''; position: absolute; right: -2rem; bottom: -2.5rem; z-index: -1; width: 8rem; height: 8rem;
    background: var(--inv-accent); opacity: .24;
    -webkit-mask: var(--sy-lattice) center / 36px 36px repeat, radial-gradient(closest-side, #000 40%, transparent);
    -webkit-mask-composite: source-in;
    mask: var(--sy-lattice) center / 36px 36px repeat intersect, radial-gradient(closest-side, #000 40%, transparent);
}
.inv-gift__account:not(.inv-gift__address) .inv-gift__bank {
    order: 0; margin: 0; min-height: 1.5rem; max-width: 100%; display: flex; align-items: center; overflow-wrap: anywhere;
    font: 600 .68rem/1.2 var(--sy-text); letter-spacing: .1em; text-transform: uppercase; color: var(--inv-shine);
}
.inv-gift__account:not(.inv-gift__address) .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .35rem; }
.inv-gift__account:not(.inv-gift__address) .inv-gift__logo img { max-width: 5.5rem; }
.inv-gift__account:not(.inv-gift__address) .inv-gift__number {
    order: 2; max-width: 100%; margin: .55rem 0 0; font: 600 .98rem/1.3 var(--sy-text); letter-spacing: .06em; color: var(--sy-cream);
    text-shadow: 0 1px 0 rgb(0 0 0 / .35); overflow-wrap: anywhere;
}
.inv-gift__account:not(.inv-gift__address) .inv-gift__holder {
    order: 3; max-width: 100%; margin: .2rem 0 0; font: 600 .6rem/1.35 var(--sy-text); letter-spacing: .1em; text-transform: uppercase;
    color: color-mix(in srgb, var(--sy-cream) 85%, transparent); overflow-wrap: anywhere;
}
.inv-gift__account:not(.inv-gift__address) .inv-button {
    order: 4; margin-top: .65rem; padding: .35rem .7rem; font-size: .65rem;
    background: color-mix(in srgb, #fff 12%, transparent); color: var(--sy-cream);
    box-shadow: inset 0 0 0 1px var(--sy-line);
}
.inv-gift__address {
    padding: 1.4rem 1.2rem; border-radius: 16px; text-align: center; background: var(--sy-paper);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 50%, transparent), var(--sy-shadow);
}
.inv-gift__address .inv-gift__bank { margin: 0 0 .4rem; font: 600 .72rem/1.4 var(--sy-text); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.inv-gift__address .inv-gift__holder { margin: 0 0 .2rem; font: 600 1.15rem/1.3 var(--sy-head); }
.inv-gift__address p { margin: 0 0 .9rem; font-size: .9rem; color: var(--sy-muted); }

/* ---------- forms & wishes ---------- */
.sy-form .inv-form label, .sy-form .inv-form__choices legend { font-weight: 600; font-size: .85rem; }
.sy-form .inv-form input:not([type=radio]):not([type=checkbox]), .sy-form .inv-form select, .sy-form .inv-form textarea {
    border: 1px solid color-mix(in srgb, var(--inv-accent) 55%, transparent); border-radius: 10px;
    background: #fff; color: var(--inv-text); padding: .7rem .85rem;
}
.sy-form .inv-form input:focus, .sy-form .inv-form select:focus, .sy-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);
}
.sy-form .inv-form .inv-button[type=submit] { width: 100%; padding: .85rem 1rem; }
.inv-rsvp__deadline { margin: 0 0 .9rem; font-size: .84rem; color: var(--sy-muted); text-align: center; }
.inv-form__notice { background: color-mix(in srgb, var(--inv-soft) 80%, transparent); }
/* about three wishes fit in the scroll box */
.inv-wishes { --inv-wishes-height: 20rem; }
.inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .5rem .45rem .5rem .35rem; border-radius: 12px;
    background: color-mix(in srgb, var(--inv-soft) 50%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 25%, transparent);
}
.inv-wish {
    padding: .65rem .8rem; background: #fff; border-radius: 4px 12px 12px 12px;
    box-shadow: inset 3px 0 0 var(--inv-accent), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 30%, transparent);
}
.inv-wish__name { font: 600 1.02rem/1.3 var(--sy-head); color: var(--inv-primary); }
.inv-wish__message { font-size: .88rem; line-height: 1.45; }
.inv-wish__time { font-size: .7rem; }

/* ---------- closing: the photo fades into emerald; a gold horseshoe arch frames the thanks ---------- */
.sy-closing { padding: 3.2rem 1.4rem .9rem; }
.sy-closing--photo { padding-top: 13rem; }
.sy-closing__bg { position: absolute; top: 0; left: 0; right: 0; z-index: -2; height: min(62svh, 28rem); overflow: hidden; }
.sy-closing__bg img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 28%; --inv-parallax: 30px; }
.sy-closing__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 22%, transparent) 0%, color-mix(in srgb, var(--inv-deep) 8%, transparent) 25%, color-mix(in srgb, var(--inv-deep) 62%, transparent) 55%, var(--inv-deep) 92%);
}
.sy-closing--photo::after {
    -webkit-mask-image: var(--sy-lattice), linear-gradient(180deg, transparent 22rem, #000 29rem);
    -webkit-mask-size: 60px 60px, 100% 100%; -webkit-mask-repeat: repeat, no-repeat; -webkit-mask-composite: source-in;
    mask: var(--sy-lattice) center top / 60px 60px repeat intersect, linear-gradient(180deg, transparent 22rem, #000 29rem);
}
.sy-closing__panel {
    position: absolute; top: 0; left: 0; right: 0; z-index: -2; height: 26rem; opacity: .75;
    -webkit-mask: linear-gradient(180deg, #000 10%, transparent); mask: linear-gradient(180deg, #000 10%, transparent);
}
.sy-closing__body {
    position: relative; display: grid; justify-items: center; gap: .3rem;
    width: min(100%, 21rem); margin: 0 auto; padding: 3.3rem 1.5rem 1.1rem;
}
.sy-closing__arch .sy-arch__glass { --sy-glass: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 35%, transparent), color-mix(in srgb, var(--inv-deep) 70%, transparent) 40%); }
.sy-closing__arch { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--inv-accent) 40%, transparent)); }
html.inv-anim .sy-closing__body.is-revealed .sy-draw { stroke-dasharray: 1; animation: sy-draw 1.8s .2s cubic-bezier(.45, 0, .2, 1) both; }
.sy-closing__medal { width: 4.3rem; margin-bottom: .45rem; }
.sy-closing__thanks { font: 600 clamp(1.9rem, 8.5vw, 2.4rem)/1.1 var(--sy-head); color: var(--sy-cream); }
.sy-closing__thanks em { font-style: italic; font-weight: 500; color: var(--inv-shine); }
.sy-closing__message { max-width: 30ch; margin: .45rem auto 0; font-size: .93rem; line-height: 1.6; color: var(--sy-ink-muted); }
.sy-closing__arab { margin: .7rem auto .4rem; }
.sy-closing__sign { margin-bottom: .1rem; }
.sy-closing__names { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
.sy-closing__names span { color: var(--inv-accent); }

/* ---------- footer, nav, music ---------- */
/* the dark footer fills the rest of a short page and keeps its content above the bottom menu */
.sy-foot { flex: 1; display: grid; align-content: start; justify-items: center; padding: 0 1rem calc(.5rem + env(safe-area-inset-bottom)); }
.sy-foot .sy-branding.inv-branding { padding-bottom: .5rem; }
.sy-foot::after { opacity: .08; }
.sy-foot__arab { width: 9rem; margin-top: 0; }
.sy-branding { color: var(--sy-ink-muted); opacity: 1; }
.inv-checkin { color: #1a1a1a; }

.sy-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-deep) 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--sy-cream) 80%, transparent);
    --inv-nav-active: var(--inv-accent);
    border-color: color-mix(in srgb, var(--inv-accent) 50%, transparent);
    font-family: var(--sy-text);
}
.sy-nav .inv-nav__item.is-active { color: var(--inv-deep); font-weight: 600; }

/* the music button stays inside the column */
.sy-body .inv-music { right: max(1rem, calc(50vw - 230px + 1rem)); }
.inv-music__button { background: var(--inv-deep); color: var(--inv-accent); box-shadow: 0 0 0 1px var(--inv-accent), 0 0 0 4px color-mix(in srgb, var(--inv-background) 70%, transparent), 0 8px 18px -8px #000; }

/* ---------- motion: sections fade up (data-reveal-sections="up"), the title vine opens, card seals turn in ---------- */
@keyframes sy-open { from { transform: scaleX(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sy-seal { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
html.inv-anim .sy-title.is-revealed .sy-title__arab { animation: sy-open 1.1s .35s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .sy-wcard.is-revealed .sy-wcard__seal { animation: sy-seal 1s .45s cubic-bezier(.34, 1.3, .64, 1) both; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sy-live__badge span, html.inv-anim .sy-cover__photo img, html.inv-anim .sy-cover__arch .sy-draw, html.inv-anim .sy-cover__arch .sy-arch__in,
    html.inv-anim .sy-closing__body.is-revealed .sy-draw, html.inv-anim .sy-title.is-revealed .sy-title__arab,
    html.inv-anim .sy-wcard.is-revealed .sy-wcard__seal { animation: none; }
    .sy-cover--leave { transition: opacity .3s ease; }
}

/* ---------- fit: the whole cover (names, date, guest, button) fits one phone screen ---------- */
.sy-cover__quote { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-height: 760px) {
    .sy-cover__quote { -webkit-line-clamp: 6; font-size: .97rem; }
    .sy-guest { padding: .6rem 1rem .7rem; }
    .sy-guest__name { font-size: 1.2rem; }
}
@media (max-height: 660px) {
    .sy-cover__quote { -webkit-line-clamp: 6; font-size: .9rem; margin-top: .15rem; line-height: 1.4; }
    .sy-cover__date { margin-top: .2rem; }
    .sy-open { padding: .75rem 1.5rem; }
    .sy-cover__inner { padding-top: calc(2.1rem + env(safe-area-inset-top)); }
}

/* arch stacking: behind the text in frames, above the tiles in the doors */
.sy-cover__frame, .sy-closing__body { isolation: isolate; }
.sy-door .sy-arch { z-index: 1; }
.sy-door .sy-door__medal { z-index: 2; }

/* very short screens (in-app browsers): start from the top (never centre an overflowing cover) and tighten */
@media (max-height: 600px) {
    .sy-cover__inner { justify-content: flex-start; gap: .55rem; padding-top: calc(2rem + env(safe-area-inset-top)); padding-bottom: calc(2.2rem + env(safe-area-inset-bottom)); }
    .sy-cover__frame { padding-top: 2.9rem; padding-bottom: .9rem; gap: .1rem; }
    .sy-cover__medal { width: 3.9rem; margin: 0; }
    .sy-cover__medal .sy-medal__text { font-size: 1rem; }
    .sy-cover__names { font-size: 2.35rem; }
    .sy-cover__quote { font-size: .86rem; line-height: 1.35; }
    .sy-guest, .sy-open { margin-top: .2rem; }
}

/* ---------- intro scene "Mozaik Tapal Kuda" (scene.json + sections/_scene; the intro lives in <body>, outside the page) ---------- */
body.sy-body .inv-intro--scene {
    --sy-sw: min(80vw, 21rem, 50vh); --sy-sh: max(calc(var(--sy-sw) * 1.5), min(66vh, calc(var(--sy-sw) * 1.9)));
    --sy-arch-top: calc(50% - var(--sy-sh) / 2); --sy-medal-y: calc(var(--sy-arch-top) + var(--sy-sw) * .45);
}
/* the dark tile wall, oversized so it can turn without showing its corners */
.sy-scene-wall { position: absolute; inset: -60%; }
.sy-scene-pillar { position: absolute; inset: 0; box-shadow: 0 0 18px rgb(0 0 0 / .45); }
.sy-scene-pillar--left { border-right: 2px solid var(--inv-accent); }
.sy-scene-pillar--right { border-left: 2px solid var(--inv-accent); }
.inv-scene__art > .sy-scene-frieze { height: auto; background: var(--inv-deep); box-shadow: 0 0 18px rgb(0 0 0 / .45); }
.sy-scene-frieze--top { border-top: 0; }
.sy-scene-frieze--bottom { flex-direction: column-reverse; border-bottom: 0; }
.sy-scene-frieze--bottom .sy-band__arab { border-top: 0; border-bottom: 1.5px solid var(--inv-accent); }
.inv-scene__art > .sy-scene-star { height: auto; aspect-ratio: 1; color: var(--inv-shine); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-accent) 55%, transparent)); }
/* the horseshoe arch and the medallion in its head, both measured from the same size so they always line up */
.sy-scene-arch {
    position: absolute; left: 50%; top: var(--sy-arch-top); width: var(--sy-sw); height: var(--sy-sh); transform: translateX(-50%);
    isolation: isolate; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--inv-accent) 50%, transparent));
}
.sy-scene-arch .sy-arch { z-index: 0; color: var(--inv-shine); }
.sy-scene-arch .sy-arch__out { stroke-width: 2.2; }
.sy-scene-arch .sy-arch__glass { --sy-glass: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 88%, var(--inv-deep)), color-mix(in srgb, var(--inv-deep) 96%, transparent)); }
.sy-scene-medal { position: absolute; left: 50%; top: var(--sy-medal-y); transform: translate(-50%, -50%); }
.sy-scene-medal .sy-medal { width: calc(var(--sy-sw) * .5); }
.sy-scene-medal .sy-medal__text { font-size: calc(var(--sy-sw) * .085); }
/* the card: the names written on the arch glass under the medallion */
body.sy-body .inv-intro--scene .inv-scene__card {
    top: calc(50% + var(--sy-sw) * .36); width: calc(var(--sy-sw) * .74); height: calc(var(--sy-sh) - var(--sy-sw) * .8); aspect-ratio: auto;
    padding: .4rem .6rem; align-content: center;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent;
}
body.sy-body .inv-scene__card .inv-intro__label { font-family: var(--sy-text); font-weight: 600; letter-spacing: .28em; color: var(--inv-accent); }
body.sy-body .inv-scene__card .inv-intro__names { font-family: var(--sy-script); font-size: calc(var(--sy-sw) * .15); line-height: 1.12; color: var(--inv-shine); text-shadow: 0 2px 12px rgb(0 0 0 / .45); }
body.sy-body .inv-scene__card .inv-intro__date { font-family: var(--sy-text); font-size: min(.82rem, calc(var(--sy-sw) * .046)); letter-spacing: .08em; text-transform: uppercase; color: var(--sy-cream); }
body.sy-body .inv-intro--scene .inv-intro__skip { background: rgb(0 0 0 / .35); color: var(--sy-cream); border-color: color-mix(in srgb, var(--inv-accent) 55%, transparent); }
.sy-scene-arch::after {
    content: ''; position: absolute; left: -5%; right: -5%; bottom: -4px; height: 5px; border-radius: 3px; z-index: 1;
    background: linear-gradient(90deg, transparent, var(--inv-shine) 12% 88%, transparent); box-shadow: 0 6px 14px rgb(0 0 0 / .4);
}

/* ---------- cover with a photo: the photo clear over the upper part of the screen, melting into emerald;
   the arch (shorter: the names on one line) stands below it, so no glass ever covers a face ---------- */
.sy-cover--photo .sy-cover__photo {
    bottom: auto; height: calc(var(--inv-screen, 100svh) * .62);
    -webkit-mask-image: linear-gradient(#000 0 55%, rgb(0 0 0 / .55) 78%, transparent 100%);
    mask-image: linear-gradient(#000 0 55%, rgb(0 0 0 / .55) 78%, transparent 100%);
}
.sy-cover--photo .sy-cover__photo img { object-position: center 34%; }
.sy-cover--photo .sy-cover__shade {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 35%, transparent) 0, transparent 9%, transparent 40%, color-mix(in srgb, var(--inv-deep) 70%, transparent) 62%, var(--inv-deep) 80%);
}
.sy-cover--photo .sy-cover__inner { min-height: var(--inv-screen, 100svh); justify-content: flex-end; gap: .6rem; padding-top: 2rem; padding-bottom: calc(2.4rem + env(safe-area-inset-bottom)); }
.sy-cover--photo .sy-cover__frame { max-width: 21rem; gap: .15rem; padding: 2.7rem 1.3rem 1rem; }
.sy-cover--photo .sy-cover__arch .sy-arch__glass { --sy-glass: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 45%, transparent), color-mix(in srgb, var(--inv-deep) 82%, transparent) 45%); }
.sy-cover--photo .sy-cover__medal { width: 4.3rem; margin: .1rem 0 0; }
.sy-cover--photo .sy-cover__medal .sy-medal__text { font-size: 1rem; }
.sy-cover--photo .sy-cover__names { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .35rem; font-size: clamp(2.3rem, 10.5vw, 2.8rem); }
.sy-cover--photo .sy-cover__amp { margin: 0; }
.sy-cover--photo .sy-cover__quote { max-width: 32ch; margin-top: .2rem; font-size: .9rem; line-height: 1.38; }
@media (max-height: 700px) {
    .sy-cover--photo .sy-cover__frame { padding-top: 2.4rem; }
    .sy-cover--photo .sy-cover__medal { width: 3.7rem; }
    .sy-cover--photo .sy-cover__names { font-size: 2.2rem; }
    .sy-cover--photo .sy-cover__quote { font-size: .84rem; line-height: 1.32; }
}
@media (max-height: 620px) {
    .sy-cover--photo .sy-cover__inner { gap: .4rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
    .sy-cover--photo .sy-cover__frame { padding: 2.1rem 1rem .7rem; }
    .sy-cover--photo .sy-cover__medal { width: 3.2rem; }
    .sy-cover--photo .sy-cover__names { font-size: 2rem; }
}

/* ---------- closing with a photo: one screen, the photo on top melting into emerald, the words below (no arch over it) ---------- */
.sy-closing--photo { display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--inv-screen, 100svh); padding-top: 15rem; padding-bottom: 1.6rem; }
.sy-closing--photo .sy-closing__bg { height: 64%; }
.sy-closing--photo .sy-closing__body { padding-top: .4rem; }