/*
 * Navy Gold — regal sapphire navy and luminous gold, alternating with warm ivory sections.
 * Colors from the variant: --inv-primary (gold), --inv-accent (light gold), --inv-background (navy),
 * --inv-text (ivory), --inv-deep (darkest navy, also the ink on ivory), --inv-panel (card navy), --inv-paper (ivory).
 * Engravings (img/*.webp) and the damask (img/damask.svg) are white-on-transparent masks painted with the gold foil
 * gradient, so they follow the variant. Their mask-image is set in index.blade.php (same origin as the page: a mask
 * image from another origin, e.g. the main domain on a subdomain invitation, would be blocked by CORS).
 * Every class of the template starts with "ng-"; shared components (inv-*) are restyled at the end.
 */

:root {
    --inv-primary: #d4a843;
    --inv-accent: #f6dc93;
    --inv-background: #0f2a63;
    --inv-text: #fbf6ea;
    --inv-deep: #081a42;
    --inv-panel: #1a3d82;
    --inv-paper: #f8f1e2;
    --inv-radius: 14px;

    --ng-column: 460px;
    --ng-title: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --ng-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --ng-script: 'Pinyon Script', 'Great Vibes', cursive;

    /* resolved here, so sections can swap --inv-text and still reach the originals */
    --ng-ivory: var(--inv-text);
    --ng-ink: var(--inv-deep);
    --ng-gold-ink: color-mix(in srgb, var(--inv-primary) 56%, #2a1c00);
    --ng-line: color-mix(in srgb, var(--inv-primary) 60%, transparent);
    --ng-line-soft: color-mix(in srgb, var(--inv-primary) 28%, transparent);
    --ng-gold: linear-gradient(135deg, var(--inv-accent) 0%, var(--inv-primary) 45%, var(--inv-accent) 72%, var(--inv-primary) 100%);
    --ng-foil: linear-gradient(160deg, var(--inv-accent) 0%, var(--inv-primary) 30%, color-mix(in srgb, var(--inv-primary) 66%, #3b2600) 52%, var(--inv-accent) 74%, var(--inv-primary) 100%);
    --ng-foil-deep: linear-gradient(160deg, var(--inv-primary) 0%, var(--ng-gold-ink) 40%, color-mix(in srgb, var(--inv-primary) 80%, #2a1c00) 70%, var(--ng-gold-ink) 100%);
}

/* ---------- page & backdrop ---------- */

html { background: var(--inv-deep); scroll-behavior: smooth; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.ng-body {
    margin: 0;
    color: var(--inv-text);
    font: 500 1.1rem/1.65 var(--ng-serif);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.ng-body img { max-width: 100%; }
.ng-body p { margin: 0; }

/* wide screens: blurred cover photo + the damask around the column */
.ng-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--inv-deep); }
.ng-backdrop::before {
    content: ""; position: absolute; inset: -40px;
    background: var(--ng-photo, none) center / cover no-repeat;
    filter: blur(18px) saturate(.7); opacity: .3;
}
.ng-backdrop::after {
    content: ""; position: absolute; inset: 0;
    background: color-mix(in srgb, var(--inv-primary) 10%, transparent);
    -webkit-mask-position: 0 0; mask-position: 0 0; -webkit-mask-size: 120px 160px; mask-size: 120px 160px;
}

.ng-page {
    position: relative;
    max-width: var(--ng-column);
    margin: 0 auto;
    overflow-x: clip;
    background-color: var(--inv-background);
    box-shadow: 0 0 80px rgb(0 0 0 / .55);
}
@media (min-width: 520px) {
    .ng-page { border-inline: 1px solid var(--ng-line-soft); }
}

.ng-preview {
    position: fixed; inset: 0 0 auto; z-index: 60; padding: .35rem 1rem;
    background: var(--inv-primary); color: var(--inv-deep);
    font: 600 .75rem/1.3 system-ui, sans-serif; text-align: center;
}

.ng-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- ornaments ---------- */

/* gold-foil engravings: a mask painted with the foil gradient */
.ng-engr {
    display: block; pointer-events: none;
    background: var(--ng-foil);
    -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ng-engr--roses { aspect-ratio: 480 / 583; }
.ng-engr--spray { aspect-ratio: 480 / 424; }
.ng-engr--oval { aspect-ratio: 520 / 647; }
.ng-engr--scroll { aspect-ratio: 600 / 198; }

/* the gentle sway of the roses (the rotate property, so it never fights an entrance transform) */
@keyframes ng-sway { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }

/* a thin gold double frame with curled corners */
.ng-frame { position: absolute; inset: 12px; z-index: 0; pointer-events: none; border: 1px solid var(--ng-line-soft); }
.ng-frame::before { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--inv-primary) 16%, transparent); }
.ng-corner { position: absolute; width: 58px; height: 58px; overflow: visible; }
.ng-corner--tl { top: -5px; left: -5px; }
.ng-corner--tr { top: -5px; right: -5px; transform: scaleX(-1); }
.ng-corner--bl { bottom: -5px; left: -5px; transform: scaleY(-1); }
.ng-corner--br { bottom: -5px; right: -5px; transform: scale(-1, -1); }

/* gold foil text (names, italic title words) */
.ng-foil, .ng-title em, .ng-closing__thanks em {
    background-image: var(--ng-foil);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* the heading flourish: its lines draw once when the heading appears (stroke-dashoffset is inherited into <use>) */
.ng-flourish { display: block; width: 210px; height: 26px; margin: .85rem auto 0; overflow: visible; stroke-dashoffset: 0; }
html.inv-anim [data-reveal] .ng-flourish, html.inv-anim .ng-flourish[data-reveal] { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s .25s cubic-bezier(.45, 0, .2, 1); }
html.inv-anim .is-revealed .ng-flourish, html.inv-anim .ng-flourish.is-revealed { stroke-dashoffset: 0; }

/* the laurel crest with the monogram */
.ng-crest { position: relative; width: 104px; aspect-ratio: 120 / 124; margin: 0 auto; }
.ng-crest svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .35)); }
.ng-crest__letters {
    position: absolute; left: 0; right: 0; top: 48.4%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    font: 500 1.35rem/1 var(--ng-title); color: var(--inv-accent); letter-spacing: .02em;
}
.ng-crest__sep { width: 1px; height: 1.2rem; background: var(--inv-primary); transform: rotate(18deg); }

/* ---------- typography ---------- */

.ng-label {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    margin: 0 0 .55rem;
    font: 700 .74rem/1.5 var(--ng-serif);
    letter-spacing: .32em; text-transform: uppercase;
    color: var(--inv-accent);
}
.ng-label__gem { flex: none; width: 5px; height: 5px; background: var(--ng-gold); transform: rotate(45deg); }
.ng-title {
    margin: 0;
    font: 400 clamp(2.05rem, 9.4vw, 2.5rem)/1.15 var(--ng-title);
    color: var(--inv-text); letter-spacing: -.005em;
}
.ng-title em { font-style: italic; font-weight: 500; padding-right: .06em; }
.ng-heading { position: relative; z-index: 1; margin-bottom: 2.3rem; text-align: center; }

.ng-names {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .26em;
    margin: .1rem 0; padding: .08em .35em .2em;
    font: 400 clamp(2.9rem, 13vw, 3.6rem)/1.12 var(--ng-script);
}
.ng-names__amp { font-size: .62em; }

.ng-lead { max-width: 34ch; margin: -1rem auto 1.75rem !important; font-size: 1.05rem; }

/* ---------- the cameo: a photo inside the engraved oval frame ---------- */

.ng-cameo { position: relative; margin: 0 auto; aspect-ratio: 520 / 647; }
.ng-cameo__window {
    position: absolute; left: 10.4%; right: 10.4%; top: 12.4%; bottom: 9.6%;
    overflow: hidden; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--inv-panel), var(--inv-deep));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 50%, transparent), 0 14px 34px -10px rgb(0 0 0 / .6);
}
.ng-cameo__window img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ng-cameo__frame { position: absolute; inset: 0; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35)); }
.ng-cameo__monogram {
    display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; height: 100%;
    font: 400 2.6rem/1 var(--ng-title); color: var(--inv-accent);
}
.ng-cameo__monogram i { width: 1px; height: 2.4rem; background: var(--inv-primary); transform: rotate(18deg); }

/* ---------- cover ---------- */

.ng-cover {
    position: fixed; inset: 0; z-index: 45;
    display: flex; justify-content: center;
    background: color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.ng-cover__panel {
    position: relative; width: 100%; max-width: var(--ng-column); height: 100%;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    background-color: var(--inv-background);
    box-shadow: 0 0 80px rgb(0 0 0 / .6);
}
/* the blurred cover photo under the navy gradient, the damask and a gold glow behind the portrait */
.ng-cover__bg { position: absolute; inset: 0; overflow: hidden; }
.ng-cover__bg::before {
    content: ""; position: absolute; inset: -24px;
    background: var(--ng-photo, none) center 30% / cover no-repeat;
    filter: blur(5px) saturate(.85);
}
.ng-cover__bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 38% at 50% 27%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 70%, transparent) 0%, color-mix(in srgb, var(--inv-background) 84%, transparent) 38%, color-mix(in srgb, var(--inv-deep) 96%, transparent) 70%, var(--inv-deep) 100%);
}
.ng-cover:not(.ng-cover--photo) .ng-cover__bg::after {
    background:
        radial-gradient(ellipse 80% 45% at 50% 28%, color-mix(in srgb, var(--inv-panel) 90%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-background), var(--inv-deep));
}
.ng-cover__panel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: color-mix(in srgb, var(--inv-primary) 8%, transparent);
    -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 120px 160px; mask-size: 120px 160px;
}
.ng-cover .ng-frame { z-index: 2; }

.ng-cover__inner {
    position: relative; z-index: 3; box-sizing: border-box; min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2.6rem 1.7rem 2.2rem; text-align: center;
}
.ng-cover .ng-cameo { height: min(262px, 32svh); margin-bottom: 1rem; }
.ng-cameo__rose { position: absolute; bottom: -5%; width: 64%; z-index: -1; animation: ng-sway 9s ease-in-out infinite alternate; }
.ng-cameo__rose--l { left: -46%; transform-origin: 50% 100%; }
.ng-cameo__rose--r { right: -46%; scale: -1 1; transform-origin: 50% 100%; animation-delay: -4.5s; }

.ng-names--cover {
    font-size: clamp(2.9rem, 13.4vw, 3.6rem);
    /* brighter foil on the cover: light highlights, a rich gold middle, a deeper edge; a dark halo behind */
    background-image: linear-gradient(175deg, color-mix(in srgb, var(--inv-accent) 75%, #ffffff) 0%, var(--inv-accent) 28%, var(--inv-primary) 58%, color-mix(in srgb, var(--inv-primary) 82%, #4a3000) 78%, var(--inv-accent) 100%);
    filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--inv-deep) 80%, transparent)) drop-shadow(0 3px 10px rgb(0 0 0 / .7));
}
.ng-names--cover .ng-names__amp { font-size: .7em; }
.ng-cover__date {
    display: flex; align-items: center; justify-content: center; gap: .8rem;
    margin-top: .3rem !important;
    font: 700 .8rem/1.5 var(--ng-serif); letter-spacing: .22em; text-transform: uppercase;
}
.ng-cover__date::before, .ng-cover__date::after { content: ""; flex: none; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--inv-primary)); }
.ng-cover__date::after { transform: scaleX(-1); }
.ng-cover__quote { max-width: 31ch; margin: .8rem auto 0 !important; font-style: italic; font-size: 1.04rem; line-height: 1.5; color: color-mix(in srgb, var(--inv-text) 92%, transparent); }

.ng-cover__bottom { display: flex; flex-direction: column; align-items: center; width: 100%; }
.ng-guest {
    position: relative; box-sizing: border-box; width: min(100%, 300px); margin: 1.3rem auto 1.2rem;
    padding: .7rem 1rem .8rem;
}
.ng-guest::before, .ng-guest::after {
    content: ""; position: absolute; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--inv-primary), transparent);
}
.ng-guest::before { top: 0; }
.ng-guest::after { bottom: 0; }
.ng-guest__label { font: 700 .7rem/1.4 var(--ng-serif); letter-spacing: .3em; text-transform: uppercase; color: var(--inv-accent); }
.ng-guest__name { display: block; margin: .25rem 0 .2rem; font: 500 1.32rem/1.25 var(--ng-title); color: var(--inv-text); overflow-wrap: anywhere; }
.ng-guest__note { font-size: .9rem; font-style: italic; line-height: 1.4; color: color-mix(in srgb, var(--inv-text) 85%, transparent); }

.ng-cover--leave { transition: opacity .9s ease, transform 1s cubic-bezier(.65, 0, .35, 1); }
.ng-cover--gone { opacity: 0; transform: translateY(-3%) scale(1.02); }

/* the opening moment: the frame opens from its centre, the photo settles from a slight zoom, the roses rise */
@keyframes ng-frame-open { from { clip-path: circle(0% at 50% 55%); } to { clip-path: circle(75% at 50% 55%); } }
@keyframes ng-photo-in { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: none; } }
@keyframes ng-rose-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
html.inv-anim .ng-cover .ng-cameo__frame { animation: ng-frame-open 1.3s .1s cubic-bezier(.5, 0, .2, 1) both; }
html.inv-anim .ng-cover .ng-cameo__window { animation: ng-photo-in 1.6s .2s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .ng-cover .ng-cameo__rose { animation: ng-rose-in 1.3s .55s cubic-bezier(.2, .7, .2, 1) both, ng-sway 9s 1.9s ease-in-out infinite alternate; }
html.inv-anim .ng-cover .ng-cameo__rose--r { animation-delay: .7s, -2.6s; }

/* ---------- hero (first screen after opening) ---------- */

.ng-hero {
    position: relative; box-sizing: border-box; min-height: min(86svh, 780px); overflow: hidden;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 5rem 1.6rem 3.6rem; text-align: center;
    background: radial-gradient(ellipse 90% 50% at 50% 30%, var(--inv-panel), transparent 75%), var(--inv-background);
}
.ng-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: color-mix(in srgb, var(--inv-primary) 5%, transparent);
    -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 120px 160px; mask-size: 120px 160px;
}
.ng-hero--photo { min-height: min(100svh, 860px); }
/* with a photo the damask sits under it, so it only shows below the photo */
.ng-hero--photo::before { z-index: 0; }
.ng-hero__photo { position: absolute; inset: 0 0 42% 0; overflow: hidden; }
.ng-hero__photo img { position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); max-width: none; object-fit: cover; object-position: center 35%; }
.ng-hero__photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 50%, transparent) 0%, transparent 20%, transparent 45%, color-mix(in srgb, var(--inv-background) 72%, transparent) 76%, var(--inv-background) 100%);
}
.ng-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.ng-hero__crest { width: 92px; margin-bottom: .9rem; }
.ng-hero .ng-names { flex-direction: column; align-items: center; font-size: clamp(3.1rem, 14.5vw, 3.9rem); line-height: 1.02; }
.ng-hero .ng-names__amp { margin: -.04em 0; }
.ng-hero__date { margin-top: .5rem !important; font: 700 .82rem/1.5 var(--ng-serif); letter-spacing: .2em; text-transform: uppercase; }
.ng-hero__scroll { width: 190px; margin-top: 1rem; }

/* ---------- sections: navy and ivory, alternating ---------- */

.ng-main { position: relative; }
.ng-section { position: relative; padding: 4.6rem 1.5rem; text-align: center; scroll-margin-top: .5rem; overflow: clip; }
.ng-section > * { position: relative; z-index: 1; }

/* navy: a soft glow at the top and the gold damask */
.ng-dark {
    background:
        radial-gradient(ellipse 100% 34% at 50% 0%, color-mix(in srgb, var(--inv-panel) 80%, transparent), transparent 75%),
        var(--inv-background);
}
.ng-dark::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: color-mix(in srgb, var(--inv-primary) 6%, transparent);
    -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 120px 160px; mask-size: 120px 160px;
}

/* ivory: navy ink, a faint gold damask; --inv-text becomes the ink for the shared components inside */
.ng-light {
    --inv-text: var(--ng-ink);
    color: var(--ng-ink);
    background:
        radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--inv-primary) 12%, transparent), transparent 75%),
        var(--inv-paper);
}
.ng-light::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: color-mix(in srgb, var(--inv-primary) 9%, transparent);
    -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 120px 160px; mask-size: 120px 160px;
}
/* a gold hairline band where an ivory section meets navy */
.ng-light::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 1;
    background: linear-gradient(90deg, var(--inv-primary), var(--inv-accent) 50%, var(--inv-primary));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 30%, transparent);
}
.ng-light .ng-label { color: var(--ng-gold-ink); }
.ng-light .ng-title { color: var(--ng-ink); }
.ng-light .ng-title em { background-image: var(--ng-foil-deep); }
.ng-light .ng-engr { background: var(--ng-foil-deep); }
.ng-light .ng-flourish { --ng-gem-core: var(--inv-paper); }

/* photo sections: a client photo under a strong navy gradient (text keeps ≥ 4.5:1) */
.ng-photo-section { background: linear-gradient(180deg, var(--inv-background), var(--inv-deep)); }
.ng-photo-section::before { display: none; }
.ng-bgphoto { position: absolute !important; inset: 0; z-index: 0 !important; overflow: hidden; }
.ng-bgphoto img { position: absolute; left: 0; top: -50px; width: 100%; height: calc(100% + 100px); max-width: none; object-fit: cover; filter: saturate(.8); }
.ng-bgphoto::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 92%, transparent) 0%, color-mix(in srgb, var(--inv-background) 76%, transparent) 40%, color-mix(in srgb, var(--inv-deep) 82%, transparent) 75%, color-mix(in srgb, var(--inv-deep) 96%, transparent) 100%);
}

/* opening (ivory) */
.ng-opening { padding-top: 4rem; }
/* the photo behind the opening: soft and slightly blurred under an ivory veil that is thickest behind the text and
   thins toward the bottom, where it lets the photo frame the navy quote panel; the damask stays on top of it */
.ng-opening::before { z-index: 1; }
.ng-opening__bg {
    position: absolute !important; inset: 0; z-index: 0 !important; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 80% 40% at 50% 100%, color-mix(in srgb, var(--inv-accent) 34%, transparent), transparent 75%),
        radial-gradient(ellipse 70% 30% at 0% 45%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 75%),
        var(--inv-paper);
}
.ng-opening__bg img {
    position: absolute; left: 0; top: -50px; width: 100%; height: calc(100% + 100px); max-width: none;
    object-fit: cover; object-position: 50% 35%; opacity: .62; filter: blur(1.5px) saturate(.75); --inv-parallax: 34px;
}
.ng-opening__bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 85% 34% at 50% 28%, color-mix(in srgb, var(--inv-paper) 70%, transparent), transparent 85%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-paper) 62%, transparent), color-mix(in srgb, var(--inv-paper) 40%, transparent) 45%, color-mix(in srgb, var(--inv-paper) 18%, transparent) 80%, color-mix(in srgb, var(--inv-paper) 50%, transparent));
}
.ng-opening__scroll { width: 200px; margin: 0 auto 1.3rem; }
.ng-arabic { margin-bottom: .9rem !important; font: 400 1.8rem/1.9 'Amiri', serif; color: var(--ng-ink); }
.ng-opening__greeting { margin-bottom: 1rem !important; font: italic 500 1.25rem/1.45 var(--ng-serif); color: var(--ng-gold-ink); }
.ng-opening__message { max-width: 34ch; margin: 0 auto !important; font-size: 1.1rem; }
.ng-quote {
    position: relative; margin: 2.8rem 0 0; padding: 3rem 1.8rem 2.1rem;
    color: var(--ng-ivory);
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, color-mix(in srgb, var(--inv-panel) 90%, transparent), transparent 80%),
        var(--inv-background);
    box-shadow: 0 26px 44px -26px color-mix(in srgb, var(--inv-deep) 85%, transparent);
}
.ng-quote > :not(.ng-frame):not(.ng-quote__rose) { position: relative; z-index: 1; }
.ng-quote .ng-frame { inset: 8px; }
.ng-quote__rose { position: absolute; z-index: 2; top: -46px; right: -26px; width: 128px; rotate: 12deg; background: var(--ng-foil) !important; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .25)); }
.ng-quote__mark { display: block; height: 2.3rem; margin-bottom: .2rem; font: 500 4.4rem/1 var(--ng-title); color: var(--inv-primary); }
.ng-quote blockquote { margin: 0; font-style: italic; font-size: 1.1rem; line-height: 1.6; }
.ng-quote figcaption { margin-top: 1rem; font: 700 .72rem/1.5 var(--ng-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-accent); }

/* couple (navy) */
.ng-person { display: flex; flex-direction: column; align-items: center; }
.ng-cameo--person { height: 286px; margin-bottom: 1.4rem; }
.ng-person__rose { position: absolute; z-index: 1; bottom: -8%; width: 70%; animation: ng-sway 10s ease-in-out infinite alternate; }
.ng-person--groom .ng-person__rose { left: -36%; transform-origin: 50% 100%; }
.ng-person--bride .ng-person__rose { right: -36%; scale: -1 1; transform-origin: 50% 100%; animation-delay: -5s; }
.ng-person__nick { margin: 0; padding: .05em .3em .14em; font: 400 3.3rem/1.1 var(--ng-script); }
.ng-person__name { margin-top: .2rem !important; font: 500 1.3rem/1.35 var(--ng-title); letter-spacing: .01em; }
.ng-person__parents { margin-top: .6rem !important; font-size: 1.05rem; color: color-mix(in srgb, var(--inv-text) 92%, transparent); }
.ng-person__parents strong { font-weight: 700; color: var(--inv-accent); }
.ng-chip {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem;
    padding: .45rem 1rem; border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--ng-line);
    color: var(--inv-accent); text-decoration: none; font: 700 .98rem/1.2 var(--ng-serif);
    transition: background-color .25s ease;
}
.ng-chip:hover { background: color-mix(in srgb, var(--inv-primary) 14%, transparent); }
.ng-amp { position: relative; width: 112px; aspect-ratio: 120 / 124; margin: 2.6rem auto; }
.ng-amp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ng-amp span { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: .5rem; font: 400 2.6rem/1 var(--ng-script); color: var(--inv-accent); }

/* countdown (photo) */
.ng-countdown__date { margin: -1.2rem 0 1.7rem !important; font: 700 .8rem/1.5 var(--ng-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-accent); }

/* cards: navy with a gold double line */
.ng-card {
    position: relative; box-sizing: border-box; padding: 1.6rem 1.3rem 1.7rem;
    border: 1px solid var(--ng-line); border-radius: 6px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-panel) 92%, transparent), color-mix(in srgb, var(--inv-deep) 88%, transparent));
    box-shadow: 0 22px 40px -24px rgb(0 0 0 / .75);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ng-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--ng-line-soft); border-radius: 3px; pointer-events: none; }
.ng-card > * { position: relative; }
.ng-card--light {
    background: color-mix(in srgb, var(--inv-paper) 35%, #ffffff);
    border-color: color-mix(in srgb, var(--inv-primary) 55%, transparent);
    box-shadow: 0 22px 40px -28px color-mix(in srgb, var(--inv-deep) 55%, transparent);
}

/* events (ivory): navy cards, photo on top, the name in a vertical gold strip */
.ng-event { position: relative; --inv-text: var(--ng-ivory); color: var(--ng-ivory); filter: drop-shadow(0 22px 24px color-mix(in srgb, var(--inv-deep) 35%, transparent)); }
.ng-event + .ng-event { margin-top: 2.6rem; }
.ng-event__photo {
    position: relative; height: 15.5rem; overflow: hidden;
    border: 1px solid var(--ng-line); border-bottom: 0; border-radius: 9rem 0 0 0;
}
.ng-event--flip .ng-event__photo { border-radius: 0 9rem 0 0; }
.ng-event__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.ng-event__photo::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(transparent, color-mix(in srgb, var(--inv-panel) 80%, transparent)); }
.ng-event__body { display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem; border: 1px solid var(--ng-line); }
.ng-event--flip .ng-event__body { grid-template-columns: 3.4rem minmax(0, 1fr); }
.ng-event--flip .ng-event__name { order: -1; border-left: 0; border-right: 1px solid var(--ng-line); }
.ng-event__panel {
    display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.5rem 1.1rem 1.7rem;
    background:
        radial-gradient(ellipse 100% 50% at 50% 0%, color-mix(in srgb, var(--inv-panel) 90%, transparent), transparent 80%),
        var(--inv-background);
}
.ng-event__date { font: 500 1.3rem/1.3 var(--ng-title); color: var(--ng-ivory); }
.ng-event__time { display: inline-flex; align-items: center; gap: .35rem; font: 700 1.08rem/1.4 var(--ng-serif); color: var(--inv-accent); }
.ng-icon.ng-icon--bare { width: 1.2rem; height: 1.2rem; padding: 0; border: 0; }
.ng-event__pin { margin: .9rem 0 .2rem; }
.ng-event__venue { font: 700 1.18rem/1.3 var(--ng-serif); letter-spacing: .01em; }
.ng-event__address { font-size: 1rem; line-height: 1.5; color: color-mix(in srgb, var(--ng-ivory) 88%, transparent); }
.ng-event__dress { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem !important; font-style: italic; font-size: 1rem; color: var(--inv-accent); }
.ng-event .inv-maps { margin-top: 1rem; }
.ng-event__name {
    display: grid; place-items: center; margin: 0; padding: 1.2rem 0;
    border-left: 1px solid var(--ng-line);
    background: linear-gradient(180deg, var(--inv-deep), color-mix(in srgb, var(--inv-deep) 70%, var(--inv-panel)));
}
.ng-event__name span {
    writing-mode: vertical-rl; text-orientation: mixed;
    font: 500 1.02rem/1 var(--ng-title); letter-spacing: .34em; text-transform: uppercase; color: var(--inv-accent);
    white-space: nowrap; max-height: 100%;
}
/* the vertical name slides down into place once the card is revealed */
html.inv-anim .ng-event .ng-event__name span { opacity: 0; transform: translateY(-1.2rem); transition: opacity .9s .5s ease, transform 1.1s .5s cubic-bezier(.2, .7, .2, 1); }
html.inv-anim .ng-event.is-revealed .ng-event__name span { opacity: 1; transform: none; }
.ng-icon {
    box-sizing: border-box; width: 34px; height: 34px; padding: 7px;
    border: 1px solid var(--ng-line); border-radius: 50%;
    fill: none; stroke: var(--inv-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* love story (navy): a zig-zag timeline, gold line in the center, moments alternate sides */
.ng-timeline { position: relative; margin: 0; padding: .4rem 0; list-style: none; }
.ng-timeline::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, var(--inv-primary) 6%, var(--inv-primary) 94%, transparent);
}
.ng-moment {
    position: relative; display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr); grid-template-areas: "text dot meta";
    column-gap: .55rem;
}
.ng-moment--flip { grid-template-areas: "meta dot text"; }
.ng-moment + .ng-moment { margin-top: 2.1rem; }
.ng-moment__dot {
    grid-area: dot; position: relative; z-index: 1; display: grid; place-items: center;
    width: 1.5rem; height: 1.5rem; margin-top: .15rem; border-radius: 50%; box-sizing: border-box;
    background: var(--inv-background); border: 1px solid var(--inv-primary);
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4px var(--ng-line-soft);
}
.ng-moment__dot svg { width: 11px; height: 11px; fill: var(--inv-primary); }
.ng-moment__text { grid-area: text; min-width: 0; text-align: right; }
.ng-moment--flip .ng-moment__text { text-align: left; }
.ng-moment__title { margin: 0; font: 500 1.12rem/1.25 var(--ng-title); color: var(--inv-accent); overflow-wrap: anywhere; }
.ng-moment__rule { display: block; width: 72%; height: 0; margin: .45rem 0 .5rem auto; border-top: 1px dotted var(--inv-primary); }
.ng-moment--flip .ng-moment__rule { margin-inline: 0 auto; }
.ng-moment__story { font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.ng-moment__meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; text-align: left; }
.ng-moment--flip .ng-moment__meta { align-items: flex-end; text-align: right; }
.ng-moment__date { padding-top: .05rem; font: 500 1.7rem/1.1 var(--ng-script); color: var(--inv-accent); overflow-wrap: anywhere; }
.ng-moment__photo {
    display: block; box-sizing: border-box; width: min(5.5rem, 100%); aspect-ratio: 1; object-fit: cover;
    padding: 3px; border-radius: 50%; border: 1px solid var(--ng-line);
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4px var(--ng-line-soft), 0 10px 20px -10px rgb(0 0 0 / .8);
}
.ng-moment__ornament { display: block; width: 9px; height: 9px; margin: .55rem .4rem 0; background: var(--ng-gold); transform: rotate(45deg); }

/* live streaming (navy) */
.ng-live__card { display: grid; justify-items: center; gap: .9rem; }
.ng-live__badge {
    display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem; border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--ng-line);
    font: 700 .7rem/1.4 var(--ng-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-accent);
}
.ng-live__badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--inv-accent); animation: ng-blink 1.6s ease-in-out infinite; }
@keyframes ng-blink { 50% { opacity: .25; } }
.ng-live__note { font-style: italic; font-size: 1rem; }

/* closing: a full-bleed photo melting into deep navy, crest, words and roses over the fade */
.ng-closing {
    padding: 4.6rem 1.8rem 2.6rem; overflow: hidden;
    background:
        radial-gradient(ellipse 80% 40% at 50% 30%, color-mix(in srgb, var(--inv-primary) 16%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-background), var(--inv-deep));
}
.ng-closing:not(.ng-closing--photo)::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: color-mix(in srgb, var(--inv-primary) 8%, transparent);
    -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 120px 160px; mask-size: 120px 160px;
}
.ng-closing--photo { display: grid; align-items: end; min-height: 44rem; padding-top: 14rem; background: var(--inv-deep); }
.ng-closing > .ng-closing__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ng-closing__bg img { position: absolute; left: 0; top: -48px; width: 100%; height: calc(100% + 96px); max-width: none; object-fit: cover; object-position: center 25%; }
.ng-closing__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--inv-background) 0%, transparent 9%, transparent 26%, color-mix(in srgb, var(--inv-background) 50%, transparent) 40%, color-mix(in srgb, var(--inv-background) 90%, transparent) 54%, var(--inv-deep) 74%);
}
/* a navy tint multiplied over the whole photo, so a bright sky never reads white */
.ng-closing__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--inv-panel) 70%, var(--inv-background)); mix-blend-mode: multiply; opacity: .6; }
.ng-closing__bg::after { z-index: 2; }
.ng-closing__rose { position: absolute; z-index: 1; bottom: 1.2rem; width: 132px; opacity: .72; animation: ng-sway 10s ease-in-out infinite alternate; }
.ng-closing__rose--l { left: -56px; transform-origin: 50% 100%; }
.ng-closing__rose--r { right: -56px; scale: -1 1; transform-origin: 50% 100%; animation-delay: -5s; }
.ng-closing__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.ng-closing__crest { width: 96px; margin-bottom: 1rem; }
.ng-closing__thanks { font: 400 2.5rem/1.15 var(--ng-title); color: var(--ng-ivory); text-shadow: 0 2px 14px rgb(0 0 0 / .45); }
.ng-closing__thanks em { font-style: italic; font-weight: 500; text-shadow: none; }
.ng-closing__flourish { margin-top: .7rem; }
.ng-names--closing { font-size: clamp(2.6rem, 12vw, 3.3rem); margin-top: .5rem; filter: drop-shadow(0 2px 10px rgb(0 0 0 / .55)); }
.ng-closing__message { max-width: 28ch; margin: .5rem auto 0 !important; font-size: 1.1rem; text-shadow: 0 1px 10px rgb(0 0 0 / .5); }
.ng-closing__sign { margin-top: 1.3rem !important; font: 700 .76rem/1.5 var(--ng-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--inv-accent); }

.ng-branding { color: var(--inv-text); opacity: .8; font-family: var(--ng-serif); font-size: .88rem; }
.ng-branding a { color: var(--inv-accent); }

/* ---------- shared components (inv-*) ---------- */

.ng-body .inv-button {
    padding: .85rem 1.55rem; border-radius: 999px;
    background: var(--ng-gold); background-size: 200% 200%; background-position: 0% 50%;
    color: var(--inv-deep);
    font: 700 .8rem/1.2 var(--ng-serif); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent);
    transition: background-position .5s ease, transform .2s ease;
}
.ng-body .inv-button:hover { background-position: 100% 50%; filter: none; }
.ng-body .inv-button--outline {
    background: transparent; color: var(--inv-accent);
    box-shadow: inset 0 0 0 1px var(--ng-line);
}
.ng-body .inv-button--outline:hover { background: color-mix(in srgb, var(--inv-primary) 14%, transparent); }
.ng-light .inv-button--outline { color: var(--ng-gold-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ng-gold-ink) 60%, transparent); }
.ng-light .ng-event .inv-button--outline, .ng-light .inv-gift__account .inv-button--outline { color: var(--inv-accent); box-shadow: inset 0 0 0 1px var(--ng-line); }
.ng-open { margin-top: .1rem; padding: .95rem 1.9rem !important; }

/* countdown: four gold-edged plaques */
.ng-body .inv-countdown { gap: .55rem; }
.ng-body .inv-countdown__item {
    flex: 1; min-width: 0; max-width: 84px; padding: 1rem .25rem .8rem;
    border: 1px solid var(--ng-line); border-radius: 6px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-panel) 70%, transparent), color-mix(in srgb, var(--inv-deep) 80%, transparent));
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--inv-deep) 50%, transparent), inset 0 0 0 4px var(--ng-line-soft), 0 14px 24px -14px rgb(0 0 0 / .7);
}
.ng-body .inv-countdown__value { font: 500 2rem/1.1 var(--ng-title); color: var(--inv-accent); }
.ng-body .inv-countdown__label { margin-top: .3rem; font: 700 .62rem/1.3 var(--ng-serif); letter-spacing: .16em; text-transform: uppercase; }
.ng-body .inv-countdown__actions { margin-top: 1.5rem; }
.ng-body .inv-countdown__actions .inv-button { padding: .7rem 1rem; font-size: .68rem; letter-spacing: .1em; }
.ng-body .inv-countdown__done { font-style: italic; color: var(--inv-accent); }

/* maps */
.ng-body .inv-maps { text-align: center; }

/* gallery (ivory): two columns, the first photo wide under an arch */
.ng-body .inv-gallery { gap: .6rem; }
.ng-body .inv-gallery__item { border-radius: 8px; box-shadow: 0 0 0 1px var(--ng-line), 0 14px 24px -16px color-mix(in srgb, var(--inv-deep) 60%, transparent); }
.ng-body .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 11; border-radius: 140px 140px 8px 8px; }

/* gift: the accounts as navy bank cards, two per row (an odd last one spans both), the address card below */
.ng-body .inv-gift { display: grid; gap: 1rem; }
.ng-body .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ng-body .inv-gift__accounts .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ng-body .inv-gift__account + .inv-gift__account { margin-top: 0; }
.ng-body .inv-gift__account { --inv-text: var(--ng-ivory); color: var(--ng-ivory); }
.ng-body .inv-gift__account:not(.inv-gift__address) {
    position: relative; overflow: hidden; display: grid; justify-items: start; min-width: 0; margin: 0;
    padding: .8rem .8rem .75rem; border-radius: 12px; text-align: left;
    background:
        radial-gradient(circle at 105% -15%, color-mix(in srgb, var(--inv-accent) 32%, transparent), transparent 45%),
        linear-gradient(135deg, var(--inv-panel), var(--inv-deep) 85%);
    border: 1px solid var(--ng-line);
    box-shadow: 0 18px 28px -16px color-mix(in srgb, var(--inv-deep) 85%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-accent) 35%, transparent);
}
/* the chip */
.ng-body .inv-gift__account:not(.inv-gift__address)::before {
    content: ""; position: absolute; top: .8rem; left: .8rem; width: 1.7rem; height: 1.3rem; border-radius: 4px;
    background:
        linear-gradient(90deg, transparent 31%, rgb(0 0 0 / .2) 31% 33%, transparent 33% 67%, rgb(0 0 0 / .2) 67% 69%, transparent 69%),
        linear-gradient(0deg, transparent 46%, rgb(0 0 0 / .2) 46% 54%, transparent 54%),
        linear-gradient(135deg, var(--inv-accent), var(--inv-primary) 55%, var(--inv-accent));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15);
}
/* gold rings in the corner */
.ng-body .inv-gift__account:not(.inv-gift__address)::after {
    content: ""; position: absolute; right: -60px; bottom: -80px; width: 150px; height: 150px; border-radius: 50%;
    border: 1px solid var(--ng-line-soft); pointer-events: none;
    box-shadow: 0 0 0 14px color-mix(in srgb, var(--inv-primary) 6%, transparent), 0 0 0 28px color-mix(in srgb, var(--inv-primary) 4%, transparent);
}
.ng-body .inv-gift__account > * { position: relative; z-index: 1; }
.ng-body .inv-gift__account:not(.inv-gift__address) .inv-gift__bank {
    justify-self: end; max-width: calc(100% - 2.2rem); min-height: 1.5rem; margin: 0;
    font: 700 .74rem/1.5rem var(--ng-serif); letter-spacing: .06em; color: var(--inv-accent);
    text-align: right; overflow-wrap: anywhere;
}
.ng-body .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .35rem; }
.ng-body .inv-gift__logo img { max-width: 4.6rem; }
.ng-body .inv-gift__number {
    max-width: 100%; margin: .8rem 0 .2rem; font: 500 1rem/1.3 var(--ng-title); letter-spacing: .06em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--ng-ivory); text-shadow: 0 1px 0 rgb(0 0 0 / .4); overflow-wrap: anywhere;
}
.ng-body .inv-gift__holder {
    max-width: 100%; margin: 0 0 .65rem; font: 700 .64rem/1.4 var(--ng-serif); letter-spacing: .1em;
    text-transform: uppercase; overflow-wrap: anywhere;
}
.ng-body .inv-gift__account .inv-button { padding: .35rem .7rem; font-size: .64rem; letter-spacing: .08em; box-shadow: inset 0 0 0 1px var(--ng-line); }
.ng-body .inv-gift__address {
    display: grid; justify-items: center; gap: .35rem; margin: 0; padding: 1.4rem 1.2rem; border-radius: 12px;
    border: 1px solid var(--ng-line);
    background: radial-gradient(ellipse 100% 60% at 50% 0%, var(--inv-panel), transparent 80%), var(--inv-background);
    box-shadow: 0 18px 28px -18px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.ng-body .inv-gift__address .inv-gift__bank { margin: 0; font: 700 .72rem/1.5 var(--ng-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--inv-accent); }
.ng-body .inv-gift__address .inv-gift__holder { margin: 0; font: 500 1.12rem/1.4 var(--ng-title); letter-spacing: 0; text-transform: none; }
.ng-body .inv-gift__address .inv-button { margin-top: .6rem; padding: .6rem 1rem; font-size: .64rem; }

/* forms (navy card) */
.ng-form { text-align: left; }
.ng-body .inv-rsvp__deadline { margin-bottom: 1rem !important; text-align: center; font-style: italic; color: var(--inv-accent); }
.ng-body .inv-form { gap: .9rem; }
.ng-body .inv-form label, .ng-body .inv-form__choices legend { font-size: 1.02rem; font-weight: 700; color: var(--inv-text); }
.ng-body .inv-form input:not([type=radio]):not([type=checkbox]), .ng-body .inv-form select, .ng-body .inv-form textarea {
    padding: .7rem .85rem; border: 1px solid color-mix(in srgb, var(--inv-primary) 45%, transparent); border-radius: 8px;
    background: color-mix(in srgb, var(--inv-deep) 60%, transparent); color: var(--inv-text);
    font: 500 1.04rem/1.4 var(--ng-serif);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ng-body .inv-form input:focus, .ng-body .inv-form select:focus, .ng-body .inv-form textarea:focus {
    outline: none; border-color: var(--inv-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 25%, transparent);
}
.ng-body .inv-form select option { background: var(--inv-deep); color: var(--ng-ivory); }
.ng-body .inv-form__choices label { font-weight: 600; }
.ng-body .inv-form input[type=radio] { accent-color: var(--inv-primary); }
.ng-body .inv-form > .inv-button { width: 100%; margin-top: .3rem; }
.ng-body .inv-form__notice { background: color-mix(in srgb, var(--inv-primary) 18%, transparent); color: var(--inv-text); }

/* forms on ivory: white fields with a gold edge, navy ink */
.ng-light .inv-form input:not([type=radio]):not([type=checkbox]), .ng-light .inv-form select, .ng-light .inv-form textarea {
    border-color: color-mix(in srgb, var(--ng-gold-ink) 45%, transparent); background: #ffffff; color: var(--ng-ink);
}
.ng-light .inv-form input:focus, .ng-light .inv-form select:focus, .ng-light .inv-form textarea:focus { border-color: var(--ng-gold-ink); }
.ng-light .inv-form input[type=radio] { accent-color: var(--ng-ink); }
.ng-light .inv-form > .inv-button { background: var(--inv-background); color: var(--ng-ivory); box-shadow: inset 0 0 0 1px var(--ng-line), 0 12px 22px -14px color-mix(in srgb, var(--inv-deep) 80%, transparent); }

/* wishes (ivory): compact cards in a quiet scroll box of about three */
.ng-body .inv-wishes { --inv-wishes-height: 20rem; }
.ng-body .inv-wishes__list {
    gap: .5rem; padding: .5rem .4rem .5rem .5rem; border-radius: 10px;
    border: 1px solid var(--ng-line-soft); background: color-mix(in srgb, var(--inv-paper) 60%, transparent);
    scrollbar-color: color-mix(in srgb, var(--inv-primary) 70%, transparent) transparent; scrollbar-width: thin;
}
.ng-body .inv-wishes__empty { text-align: center; font-style: italic; }
.ng-body .inv-wish {
    padding: .65rem .8rem; border-radius: 8px;
    border: 1px solid var(--ng-line-soft); border-left: 3px solid var(--inv-background);
    background: #ffffff;
}
.ng-body .inv-wish__name { font-weight: 700; font-size: .96rem; line-height: 1.3; color: var(--ng-ink); }
.ng-body .inv-wish__message { margin-top: .1rem !important; font-size: .95rem; line-height: 1.45; }
.ng-body .inv-wish__time { margin-top: .2rem !important; font-size: .74rem; color: var(--ng-gold-ink); }
.ng-body .inv-wish__reply { border-left-color: var(--inv-primary); background: color-mix(in srgb, var(--inv-primary) 10%, #ffffff); }

/* check-in QR */
.ng-body .inv-checkin { margin: 1rem 1.5rem 2rem; background: var(--inv-panel); color: var(--ng-ivory); border: 1px solid var(--ng-line); }
.ng-body .inv-checkin__title { color: var(--inv-accent); font-family: var(--ng-title); }
.ng-body .inv-checkin__code { background: #ffffff; }

/* bottom menu */
.ng-body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-deep) 92%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-accent) 85%, transparent);
    --inv-nav-active: var(--inv-primary);
    max-width: min(calc(100vw - 1.5rem), calc(var(--ng-column) - 1.5rem));
    border-color: var(--ng-line);
    box-shadow: 0 12px 30px -10px rgb(0 0 0 / .7), inset 0 0 0 3px color-mix(in srgb, var(--inv-deep) 50%, transparent);
}
.ng-body .inv-nav__label { font-family: var(--ng-serif); font-weight: 700; font-size: .68rem; }
.ng-body .inv-nav__item.is-active { background: var(--ng-gold); color: var(--inv-deep); }

/* music button: gold, inside the column */
.ng-body .inv-music { right: max(1rem, calc(50vw - var(--ng-column) / 2 + 1rem)); }
.ng-body .inv-music__button {
    background: var(--ng-gold); color: var(--inv-deep);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-deep) 70%, transparent), 0 0 0 4px var(--ng-line), 0 8px 18px rgb(0 0 0 / .45);
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    .ng-cameo__rose, .ng-person__rose, .ng-closing__rose, .ng-live__badge span { animation: none !important; }
    .ng-cover--leave { transition: opacity .3s ease; }
    .ng-cover--gone { transform: none; }
}

/* ---------- bottom room ---------- */

/* the page itself keeps room for the bottom menu and music button (the shared spacer would sit outside the column) */
.ng-page { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); background-color: var(--inv-deep); }
.ng-body .inv-music__space { display: none; }
body.ng-body:has(.inv-nav) .ng-branding { padding-bottom: 1.5rem; }

/* gallery: an odd last photo also spans the full width */
.ng-body .inv-gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

/* bottom menu: six items always fit, down to 360px */
.ng-body .inv-nav { box-sizing: border-box; width: min(calc(100vw - 1.5rem), calc(var(--ng-column) - 1.5rem)); justify-content: space-between; }
.ng-body .inv-nav__item { flex: 1 1 0; min-width: 0; padding: .42rem .2rem .32rem; }
.ng-body .inv-nav__label { font-size: .62rem; white-space: nowrap; }

@media (max-width: 380px) {
    .ng-cover__date { gap: .55rem; letter-spacing: .16em; }
    .ng-cover__date::before, .ng-cover__date::after { width: 22px; }
}

/* ---------- cover fit: the whole cover, button included, fits on one screen ---------- */

@media (max-height: 820px) {
    .ng-cover__inner { padding-block: 2.2rem 1.9rem; }
    .ng-cover .ng-cameo { height: min(232px, 30svh); margin-bottom: .7rem; }
    .ng-names--cover { font-size: clamp(2.5rem, 11.4vw, 3rem); }
    .ng-cover__quote { margin-top: .6rem !important; font-size: .98rem; line-height: 1.45; }
    .ng-guest { margin: .9rem auto 1rem; }
    .ng-guest__note { display: none; }
}
@media (max-height: 760px) {
    .ng-cover__inner { padding-block: 1.9rem 1.6rem; }
    .ng-cover .ng-cameo { height: min(210px, 28svh); }
}
@media (max-height: 660px) {
    .ng-cover__inner { padding-block: 1.5rem 1.3rem; }
    .ng-cover .ng-cameo { height: min(186px, 28svh); margin-bottom: .45rem; }
    .ng-names--cover { font-size: 2.35rem; }
    .ng-cover__date { margin-top: .1rem !important; }
    .ng-cover__quote { margin-top: .45rem !important; font-size: .92rem; line-height: 1.4; }
    .ng-guest { margin: .6rem auto .7rem; padding-block: .5rem .55rem; }
    .ng-guest__name { font-size: 1.18rem; margin-block: .15rem 0; }
    .ng-open { padding-block: .8rem !important; }
}
@media (max-height: 580px) {
    .ng-cover .ng-cameo { height: 21svh; }
    .ng-cover__quote { font-size: .88rem; }
}