/*
 * Template "Nur Pastel" (Pernikahan): a gentle, Muslim-friendly wedding.
 * Colors from the variant (x-inv.head): --inv-primary (deep plum/rose: buttons, labels, the deep
 * sections), --inv-accent (warm gold: hairlines, arches, small marks), --inv-background (warm light
 * ground), --inv-text, --inv-soft (the tinted sections) and --inv-glow (a warm glow behind photos).
 * Gold is only used for lines and large glyphs on light grounds; text in gold only on the deep sections
 * (lightened), so body text stays above 4.5:1.
 */

:root {
    --inv-primary: #7b2d50;
    --inv-accent: #c39a4b;
    --inv-background: #fcf6f1;
    --inv-text: #3b2430;
    --inv-soft: #f3dde3;
    --inv-glow: #f6e8d4;
    --inv-radius: 14px;

    --nr-col: min(100vw, 440px);
    --nr-serif: 'Cormorant Garamond', 'Times New Roman', serif;
    --nr-script: 'Great Vibes', 'Brush Script MT', cursive;
    --nr-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nr-arabic: 'Amiri', 'Traditional Arabic', serif;

    --nr-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --nr-line: color-mix(in srgb, var(--inv-accent) 70%, transparent);
    --nr-gold-ink: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-text));
    --nr-paper: color-mix(in srgb, #fff 70%, var(--inv-background));
    --nr-tint: color-mix(in srgb, var(--inv-soft) 60%, var(--inv-background));
    --nr-deep: color-mix(in srgb, var(--inv-primary) 86%, #000);
    --nr-cream: color-mix(in srgb, var(--inv-background) 92%, #fff);
    --nr-gold-light: color-mix(in srgb, var(--inv-accent) 48%, #fff);
    --nr-shadow: 0 20px 40px -26px color-mix(in srgb, var(--inv-primary) 60%, transparent);

    /* a band of small eight-point stars with a hairline (section edges, used as a mask) */
    --nr-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cpath d='M12 2 12.8 5.1 15.5 3.5 13.9 6.2 17 7 13.9 7.8 15.5 10.5 12.8 8.9 12 12 11.2 8.9 8.5 10.5 10.1 7.8 7 7 10.1 6.2 8.5 3.5 11.2 5.1Z'/%3E%3Cpath d='M0 7h5M19 7h5' stroke='black' stroke-width='.8'/%3E%3Ccircle cx='0' cy='7' r='1.3'/%3E%3Ccircle cx='24' cy='7' r='1.3'/%3E%3C/svg%3E");
    /* a girih lattice tile: an eight-point star joined to its neighbours (used as a mask, tinted by CSS) */
    --nr-girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='.8'%3E%3Cpath d='M32 17 47 32 32 47 17 32Z'/%3E%3Cpath d='M21.4 21.4h21.2v21.2H21.4Z'/%3E%3Cpath d='M32 0v17M32 47v17M0 32h17M47 32h17'/%3E%3Cpath d='M0 0l21.4 21.4M64 0 42.6 21.4M0 64l21.4-21.4M64 64 42.6 42.6'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3C/svg%3E");
}

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

body.nr-body {
    font-variant-numeric: lining-nums;
    min-height: 100vh;
    color: var(--inv-text);
    font-family: var(--nr-sans);
    font-size: 15.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    background: color-mix(in srgb, var(--inv-soft) 40%, var(--inv-background));
}
/* the girih backdrop on wide screens, behind the column */
body.nr-body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .08;
    -webkit-mask: var(--nr-girih) 0 0 / 64px 64px repeat; mask: var(--nr-girih) 0 0 / 64px 64px repeat;
}

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

.nr-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-primary); color: #fff; font-size: .7rem; font-weight: 700;
}

/* ---------- shared pieces ---------- */
.nr-kicker {
    font-family: var(--nr-sans); font-weight: 800; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--inv-primary);
}
.nr-script { font-family: var(--nr-script); font-weight: 400; line-height: 1.1; color: var(--inv-primary); }

.nr-star { display: block; color: var(--inv-accent); }

.nr-divider { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 1.6rem auto; max-width: 13rem; color: var(--inv-accent); }
.nr-divider__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--nr-line), transparent); }
.nr-divider__star { flex: none; width: 1.3rem; height: 1.3rem; }

.nr-chip {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
    padding: .4rem .95rem; border-radius: 999px; text-decoration: none;
    font-size: .82rem; font-weight: 700; color: var(--inv-primary);
    background: color-mix(in srgb, #fff 70%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 35%, transparent);
}

.nr-card {
    padding: 1.4rem 1.2rem; border-radius: 18px; text-align: left;
    background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 35%, transparent), var(--nr-shadow);
}

.nr-lead { max-width: 32ch; margin: 0 auto 1.6rem; color: var(--nr-muted); font-size: .95rem; }

/* ---------- arch frame: the mihrab-clipped photo, a hairline arch offset behind it ---------- */
.nr-arch { position: relative; isolation: isolate; aspect-ratio: 3 / 4; color: var(--inv-accent); }
.nr-arch::before {
    content: ''; position: absolute; inset: 18% -14% -8%; z-index: -2; border-radius: 50%;
    background: radial-gradient(closest-side, var(--inv-glow), transparent);
}
.nr-arch__photo {
    display: block; width: 100%; height: 100%; object-fit: cover;
    clip-path: url(#nr-arch);
}
.nr-arch__photo--empty {
    display: grid; place-items: center;
    background: linear-gradient(170deg, var(--inv-soft), var(--inv-glow));
}
.nr-arch__lines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nr-arch--offset .nr-arch__lines { transform: translate(11px, 11px); }

/* ---------- cover ---------- */
.nr-cover {
    position: fixed; top: 0; bottom: 0; left: 50%; z-index: 30; width: var(--nr-col); transform: translateX(-50%);
    overflow: hidden auto; overscroll-behavior: contain;
    background: var(--inv-background);
}
.nr-cover__sky {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(110% 50% at 50% 0%, color-mix(in srgb, var(--inv-soft) 75%, transparent), transparent 70%),
        radial-gradient(90% 40% at 50% 100%, color-mix(in srgb, var(--inv-glow) 90%, transparent), transparent 75%),
        var(--inv-background);
}
/* a faint girih lattice (about 6%), fading out behind the photo and the names */
.nr-cover__sky::after {
    content: ''; position: absolute; inset: 0;
    background: var(--inv-primary); opacity: .065;
    -webkit-mask: var(--nr-girih) center / 64px 64px repeat, radial-gradient(70% 50% at 50% 48%, transparent 30%, #000 85%);
    -webkit-mask-composite: source-in;
    mask: var(--nr-girih) center / 64px 64px repeat intersect, radial-gradient(70% 50% at 50% 48%, transparent 30%, #000 85%);
}

.nr-cover__inner {
    position: relative; z-index: 1; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(.4rem, 1.5svh, .75rem);
    padding: calc(clamp(1.1rem, 4svh, 2.25rem) + env(safe-area-inset-top)) 1.5rem calc(clamp(1.6rem, 5svh, 2.6rem) + env(safe-area-inset-bottom));
    text-align: center;
}
.nr-cover__title { margin-bottom: .3rem; }
/* the photo is the first thing to give way on short screens */
.nr-cover__arch { flex: none; width: min(58vw, 14.5rem, 30svh); margin-bottom: 1.35rem; }
.nr-cover__monogram { z-index: 2; }

.nr-monogram {
    position: absolute; left: 50%; bottom: -1rem; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .38rem 1rem; border-radius: 999px; white-space: nowrap;
    background: var(--inv-primary); color: var(--nr-cream);
    box-shadow: 0 0 0 3px var(--inv-background), 0 8px 18px -10px var(--inv-primary);
    font: 500 1rem/1 var(--nr-serif); letter-spacing: .16em;
}
.nr-monogram i { font-style: normal; color: var(--nr-gold-light); }

.nr-cover__names { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .55rem; font-size: clamp(2.6rem, 11vw, 3.3rem); }
.nr-cover__amp { font-size: .7em; color: var(--nr-gold-ink); }
.nr-cover__date { font-weight: 700; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-text); }
.nr-cover__quote { max-width: 32ch; font: italic 500 1.02rem/1.42 var(--nr-serif); color: var(--nr-muted); text-wrap: balance; }
.nr-cover__guest {
    display: grid; gap: .1rem; width: min(100%, 19rem); margin-top: .3rem; padding: .55rem 0;
    font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nr-muted);
    border-block: 1px solid var(--nr-line);
}
.nr-cover__guest-name {
    display: block; font: 600 1.3rem/1.25 var(--nr-serif); letter-spacing: 0; text-transform: none; color: var(--inv-text);
    text-wrap: balance; overflow-wrap: anywhere;
}
.nr-open {
    flex: none; margin-top: .45rem; padding: .85rem 1.9rem; font-weight: 800; letter-spacing: .05em;
    background: var(--inv-primary); color: #fff;
    box-shadow: 0 12px 24px -12px var(--inv-primary);
}

/* the opening moment: the photo fades in with a slight zoom, its offset arch draws once */
html.inv-anim .nr-cover__arch { animation: nr-photo-in 1.5s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .nr-cover__arch .nr-arch__lines { animation: nr-wipe 1.6s .6s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes nr-photo-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes nr-wipe { from { clip-path: inset(100% -20px -20px -20px); } to { clip-path: inset(-20px -20px -20px -20px); } }

.nr-cover--leave { transition: opacity .9s ease, transform 1s cubic-bezier(.6, 0, .3, 1), filter .9s ease; }
.nr-cover--gone { opacity: 0; transform: translateX(-50%) translateY(-4%) scale(1.03); filter: blur(6px); }

/* ---------- fit: the whole cover fits one phone screen, down to short in-app browsers (~375×560) ---------- */
@media (max-height: 760px) {
    .nr-cover__arch { width: min(56vw, 13.5rem, 28svh); margin-bottom: 1.25rem; }
    .nr-cover__names { font-size: clamp(2.4rem, 10.5vw, 2.9rem); }
    .nr-cover__quote { font-size: .95rem; }
    .nr-cover__guest-name { font-size: 1.2rem; }
}
@media (max-height: 680px) {
    .nr-cover__arch { width: min(52vw, 12rem, 25svh); margin-bottom: 1.15rem; }
    .nr-cover__names { font-size: clamp(2.2rem, 9.5vw, 2.6rem); }
    .nr-cover__quote { font-size: .9rem; line-height: 1.36; }
    .nr-open { padding: .78rem 1.7rem; }
}
@media (max-height: 610px) {
    .nr-cover__title { margin-bottom: 0; }
    .nr-cover__inner { gap: .4rem; }
    .nr-cover__arch { width: min(46vw, 10rem, 19svh); margin-bottom: 1rem; }
    .nr-monogram { padding: .3rem .85rem; font-size: .9rem; }
    .nr-cover__names { font-size: clamp(2rem, 9vw, 2.35rem); }
    .nr-cover__date { font-size: .72rem; }
    .nr-cover__quote { font-size: .84rem; line-height: 1.32; max-width: 36ch; }
    .nr-cover__guest { margin-top: .1rem; padding: .4rem 0; font-size: .68rem; }
    .nr-cover__guest-name { font-size: 1.08rem; }
    .nr-open { margin-top: .25rem; padding: .7rem 1.6rem; }
}
@media (max-height: 540px) {
    .nr-cover__arch { width: min(40vw, 8.5rem, 17svh); }
}

/* ---------- page ---------- */
.nr-page {
    position: relative; width: var(--nr-col); min-height: 100vh; margin: 0 auto; overflow: hidden;
    background: var(--inv-background);
    box-shadow: 0 0 80px -20px color-mix(in srgb, var(--inv-primary) 35%, transparent);
}
.nr-page__glow { display: none; }

.nr-main { position: relative; }
.nr-section { position: relative; isolation: isolate; overflow-x: clip; padding: 4.5rem 1.5rem; text-align: center; }
/* a short gold hairline links two plain sections */
.nr-section:not(.nr-section--deep, .nr-section--tint) + .nr-section:not(.nr-section--deep, .nr-section--tint)::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 2.6rem;
    background: linear-gradient(var(--nr-line), transparent);
}
.nr-section--tint { background: var(--nr-tint); }
/* the deep sections: the primary color, cream text, lightened gold */
.nr-section--deep {
    --nr-line: color-mix(in srgb, var(--nr-gold-light) 55%, transparent);
    background: var(--nr-deep); color: var(--nr-cream);
}
.nr-section--deep::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--nr-deep) 95%, transparent) 0%,
        color-mix(in srgb, var(--nr-deep) 84%, transparent) 38%,
        color-mix(in srgb, var(--nr-deep) 84%, transparent) 62%,
        color-mix(in srgb, var(--nr-deep) 96%, transparent) 100%);
}
.nr-section--deep > * { position: relative; z-index: 1; }
.nr-section--deep .nr-kicker { color: var(--nr-gold-light); }
.nr-section--deep .nr-title__text { color: var(--nr-cream); }
.nr-section--deep .nr-title__text em { color: var(--nr-gold-light); }
.nr-section--deep .nr-title__rule i { background: var(--nr-gold-light); }
.nr-section--deep .nr-script { color: var(--nr-gold-light); }
.nr-section--deep .nr-divider { color: var(--nr-gold-light); }

.nr-title { position: relative; display: grid; justify-items: center; gap: .5rem; margin-bottom: 2.2rem; padding: 1.1rem 0 .4rem; }
.nr-title__text { font: 500 2.5rem/1.08 var(--nr-serif); color: var(--inv-text); letter-spacing: -.005em; }
.nr-title__text em { font-style: italic; color: var(--inv-primary); }
.nr-title__rule { position: relative; display: block; width: 6.5rem; height: 1px; margin-top: .35rem; background: linear-gradient(90deg, transparent, var(--inv-accent), transparent); transform-origin: 50% 50%; }
.nr-title__rule i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--inv-primary); transform: rotate(45deg); }
html.inv-anim .nr-title__rule { transform: scaleX(0); transition: transform 1s .35s cubic-bezier(.2, .8, .2, 1); }
html.inv-anim .nr-title.is-revealed .nr-title__rule, html.inv-anim .is-revealed .nr-title__rule { transform: none; }

/* ---------- opening ---------- */
.nr-opening { padding-top: 6.5rem; }
.nr-basmalah { position: relative; display: grid; place-items: center; min-height: 11rem; margin-bottom: 1.4rem; }
.nr-arabic { font-family: var(--nr-arabic); font-size: clamp(2.1rem, 9.5vw, 2.7rem); line-height: 1.9; color: var(--inv-primary); }
.nr-opening__greeting { font: italic 500 1.3rem/1.4 var(--nr-serif); color: var(--inv-text); }
.nr-opening__message { max-width: 32ch; margin: 0 auto; color: var(--nr-muted); }
/* without photos: a pastel gradient (blush at the top, the primary tint below) */
.nr-opening {
    background:
        radial-gradient(90% 38% at 85% 0%, color-mix(in srgb, var(--inv-soft) 55%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-background), color-mix(in srgb, var(--nr-tint) 85%, var(--inv-background)) 70%, var(--inv-background));
}
/* with a photo: it shows ~30% through a soft pastel veil, a little denser behind the text column */
.nr-opening--photo { background: var(--inv-background); }
.nr-opening--photo > .nr-bg { filter: saturate(.8) blur(1px); }
.nr-section--veil.nr-opening--photo::after {
    background:
        radial-gradient(70% 48% at 50% 42%, color-mix(in srgb, var(--inv-background) 86%, transparent), color-mix(in srgb, var(--inv-background) 62%, transparent)),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-background) 70%, transparent), transparent 18%, transparent 78%, color-mix(in srgb, var(--inv-background) 80%, transparent));
}
.nr-opening--photo .nr-opening__message { color: var(--inv-text); }
.nr-section.nr-opening--photo > .nr-rose { z-index: 2; }
.nr-opening--photo .nr-verse { background: color-mix(in srgb, var(--nr-tint) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* the verse: a tall arch panel in the primary tint, the quote in large italic serif */
.nr-verse {
    position: relative; margin: 2.6rem auto 0; padding: 3.6rem 1.6rem 1.8rem; max-width: 21rem;
    border-radius: 50% 50% 18px 18px / 150px 150px 18px 18px;
    background: var(--nr-tint);
}
.nr-verse::before {
    content: ''; position: absolute; inset: -9px 9px 9px -9px; border-radius: inherit; pointer-events: none;
    border: 1px solid var(--nr-line);
}
.nr-verse blockquote { font: italic 500 1.16rem/1.55 var(--nr-serif); color: var(--inv-text); }
.nr-verse figcaption { margin-top: 1rem; font-weight: 800; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-primary); }

/* ---------- couple: two arch portraits, zig-zag (groom left, bride right) ---------- */
.nr-couple { padding-bottom: 4rem; }
.nr-person { display: grid; justify-items: start; text-align: left; }
.nr-person--bride { justify-items: end; text-align: right; }
.nr-portrait { width: min(60%, 13.5rem); margin: 0 15px 1.5rem 2px; }
.nr-person--bride .nr-portrait { margin: 0 2px 1.5rem 15px; }
.nr-person--bride .nr-arch--offset .nr-arch__lines { transform: translate(-11px, 11px); }
.nr-person__initial { font: 400 4.5rem/1 var(--nr-script); color: var(--inv-primary); padding-top: 15%; }
.nr-person__nick { font-size: 3rem; line-height: 1; }
.nr-person__name { margin-top: .3rem; font: 600 1.35rem/1.25 var(--nr-serif); color: var(--inv-text); }
.nr-person__parents { max-width: 30ch; margin-top: .55rem; font-size: .92rem; color: var(--nr-muted); }
.nr-person__parents span { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.nr-couple__amp { display: flex; align-items: center; gap: 1rem; max-width: 12rem; margin: 2.2rem auto; color: var(--inv-accent); }
.nr-couple__amp .nr-script { font-size: 2.8rem; color: var(--nr-gold-ink); }

/* ---------- countdown (deep): the date as a large numeral, then the counter ---------- */
.nr-datecard {
    display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; column-gap: 1rem;
    margin: 0 auto 2rem;
}
.nr-datecard__num { grid-row: 1 / 3; grid-column: 1; font: 500 5rem/.9 var(--nr-serif); color: var(--nr-cream); padding-right: 1rem; border-right: 1px solid var(--nr-line); }
.nr-datecard__day, .nr-datecard__month { grid-column: 2; text-align: left; font-weight: 800; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--nr-gold-light); }
.nr-datecard__day { align-self: end; }
.nr-datecard__month { align-self: start; margin-top: .35rem; color: var(--nr-cream); }

.inv-countdown { gap: .5rem; }
.inv-countdown__item {
    flex: 1; min-width: 0; max-width: 5rem; padding: .9rem .2rem .6rem; border-radius: 12px;
    background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent);
}
.inv-countdown__value { font: 500 1.75rem/1.15 var(--nr-serif); color: var(--inv-primary); }
.inv-countdown__label { font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--nr-muted); }
.inv-countdown__actions { margin-top: 1.5rem; }
.inv-countdown__actions .inv-button { padding: .55rem 1rem; font-size: .8rem; }
.inv-countdown__done { font: italic 1.15rem var(--nr-serif); }
.nr-section--deep .inv-countdown__item { background: color-mix(in srgb, #fff 6%, transparent); box-shadow: inset 0 0 0 1px var(--nr-line); }
.nr-section--deep .inv-countdown__value { color: var(--nr-cream); }
.nr-section--deep .inv-countdown__label { color: var(--nr-gold-light); }
.nr-section--deep .inv-button--outline { background: transparent; color: var(--nr-cream); box-shadow: inset 0 0 0 1px var(--nr-line); }

/* ---------- events: an arched-corner photo, a white panel and a deep vertical name strip ---------- */
.nr-event { position: relative; text-align: center; border-radius: 9rem 0 0 0; box-shadow: 0 22px 40px -28px color-mix(in srgb, var(--inv-primary) 75%, transparent); }
.nr-event + .nr-event { margin-top: 2.4rem; }
.nr-event__photo {
    position: relative; aspect-ratio: 5 / 4.2; border-radius: 9rem 0 0 0;
    background: var(--nr-photo, none) center 35% / cover no-repeat, linear-gradient(160deg, var(--inv-soft), var(--inv-glow));
}
.nr-event__panel { display: grid; grid-template-columns: minmax(0, 1fr) 3.3rem; }
.nr-event__body { padding: 1.6rem 1rem 1.7rem; background: #fff; }
.nr-event__name {
    display: grid; place-items: center; padding: 1.2rem 0;
    writing-mode: vertical-rl; text-orientation: mixed;
    font: 800 .9rem/1 var(--nr-sans); letter-spacing: .36em; text-transform: uppercase;
    background: var(--nr-deep); color: var(--nr-gold-light);
}
.nr-event__date { font: 600 1.45rem/1.2 var(--nr-serif); color: var(--inv-text); }
.nr-event__time { margin-top: .35rem; font-weight: 800; font-size: .9rem; color: var(--inv-primary); }
.nr-event__pin { display: block; margin: 1rem auto .45rem; color: var(--inv-accent); }
.nr-event__venue { font-weight: 800; font-size: 1.02rem; line-height: 1.35; }
.nr-event__address { margin-top: .25rem; font-size: .88rem; color: var(--nr-muted); }
.nr-event__dress { display: inline-block; margin-top: .8rem; padding: .35rem .9rem; border-radius: 999px; font-size: .8rem; background: var(--nr-tint); }
.nr-event__dress span { font-weight: 800; color: var(--inv-primary); }
.inv-maps { margin-top: 1.1rem; }
.inv-maps .inv-button { padding: .7rem 1.3rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; }

/* ---------- love story (tinted): a zig-zag timeline on a centred hairline ---------- */
.nr-timeline { position: relative; display: grid; gap: 2.1rem; list-style: none; padding: .4rem 0; }
.nr-timeline::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px;
    background: linear-gradient(transparent, var(--nr-line) 6%, var(--nr-line) 94%, transparent);
}
/* three columns: the story | the number on the line | the date and photo (swapped on even moments) */
.nr-moment { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); column-gap: .5rem; align-items: start; }
.nr-moment__body { grid-column: 1; grid-row: 1; text-align: right; }
.nr-moment__dot { grid-column: 2; grid-row: 1; }
.nr-moment__side { grid-column: 3; grid-row: 1; display: grid; justify-items: start; gap: .5rem; text-align: left; }
.nr-moment--flip .nr-moment__body { grid-column: 3; text-align: left; }
.nr-moment--flip .nr-moment__side { grid-column: 1; justify-items: end; text-align: right; }

.nr-moment__dot {
    display: grid; place-items: center; justify-self: center;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--inv-primary); color: #fff;
    box-shadow: 0 0 0 4px var(--nr-tint);
    font: 800 .66rem/1 var(--nr-sans); letter-spacing: .04em;
}
.nr-moment__title { font: 600 1.25rem/1.2 var(--nr-serif); color: var(--inv-text); overflow-wrap: anywhere; }
.nr-moment__rule { display: block; width: 2.6rem; height: 1px; margin: .5rem 0 .55rem auto; background: var(--inv-accent); }
.nr-moment--flip .nr-moment__rule { margin-left: 0; margin-right: auto; }
.nr-moment__story { color: var(--nr-muted); font-size: .86rem; line-height: 1.55; overflow-wrap: anywhere; }
.nr-moment__date { margin-top: .05rem; font: italic 600 1.25rem/1.25 var(--nr-serif); color: var(--inv-primary); overflow-wrap: anywhere; }
.nr-moment__photo {
    display: block; width: min(calc(100% - 10px), 6.5rem); aspect-ratio: 3 / 4; object-fit: cover; margin: .2rem 5px 0;
    border-radius: 999px 999px 6px 6px / 40% 40% 6px 6px;
    box-shadow: var(--nr-shadow);
}
.nr-moment__star { width: 2rem; height: 2rem; margin-top: .1rem; opacity: .8; }

/* ---------- gallery (deep) ---------- */
.inv-gallery-slider { gap: .9rem; grid-template-columns: minmax(0, 1fr); }
.inv-gallery-slider__thumb { border-radius: 10px; border-width: 2px; }
.inv-gallery-slider__thumb.is-active { border-color: var(--nr-gold-light); }
.inv-gallery-slider__arrow { background: color-mix(in srgb, #fff 10%, transparent); color: var(--nr-cream); box-shadow: inset 0 0 0 1px var(--nr-line); }
.inv-gallery-slider__stage {
    aspect-ratio: 4 / 4.6; margin: 0 6px; border-radius: 50% 50% 8px 8px / 26% 26% 8px 8px;
    box-shadow: 0 0 0 6px color-mix(in srgb, #000 12%, transparent), 0 0 0 7px var(--nr-line), 0 26px 44px -24px #000;
}
.inv-gallery-slider__count { background: color-mix(in srgb, var(--nr-deep) 85%, transparent); color: #fff; }

/* ---------- live ---------- */
.nr-live__card { text-align: center; display: grid; gap: .6rem; justify-items: center; }
.nr-live__badge { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.nr-live__badge span { width: .5rem; height: .5rem; border-radius: 50%; background: #d4384e; box-shadow: 0 0 0 4px color-mix(in srgb, #d4384e 22%, transparent); }
.nr-live__note { font-size: .86rem; color: var(--nr-muted); }

/* ---------- buttons ---------- */
.inv-button { background: var(--inv-primary); color: #fff; font-family: var(--nr-sans); font-weight: 800; box-shadow: 0 8px 18px -12px var(--inv-primary); }
.inv-button--outline {
    background: #fff; color: var(--inv-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 45%, transparent);
}

/* ---------- gift: compact envelopes, two per row (an odd last one spans the row) ---------- */
.nr-gift .inv-gift { padding: .75rem; }
.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 {
    min-width: 0; padding: .8rem .7rem; border-radius: 14px; text-align: center;
    background: linear-gradient(160deg, var(--nr-tint), #fff 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 35%, transparent);
}
.inv-gift__accounts .inv-gift__account { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding-top: 2.2rem; }
/* a little gold card chip, drawn with gradients */
.inv-gift__accounts .inv-gift__account::before {
    content: ''; position: absolute; top: .75rem; left: .8rem; width: 1.65rem; height: 1.2rem; border-radius: 4px;
    background:
        linear-gradient(90deg, transparent 31%, rgb(0 0 0 / .18) 31% 35%, transparent 35% 65%, rgb(0 0 0 / .18) 65% 69%, transparent 69%),
        linear-gradient(0deg, transparent 45%, rgb(0 0 0 / .18) 45% 55%, transparent 55%),
        linear-gradient(135deg, #f3dca2, var(--inv-accent) 55%, #a8803f);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}
.inv-gift__account + .inv-gift__account { margin-top: 0; }
.inv-gift__accounts + .inv-gift__address { margin-top: .6rem; }
.inv-gift__bank { margin: 0 0 .4rem; font-weight: 800; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); overflow-wrap: anywhere; }
.inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .4rem; }
.inv-gift__logo img { max-width: 5rem; }
.inv-gift__number { margin: 0; font: 700 1rem/1.3 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .02em; color: var(--inv-text); overflow-wrap: anywhere; }
.inv-gift__holder { margin: .2rem 0 .65rem; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nr-muted); overflow-wrap: anywhere; }
.inv-gift__accounts .inv-button { margin-top: auto; padding: .35rem .7rem; font-size: .65rem; }
.inv-gift__address { padding: 1.1rem 1rem; }
.inv-gift__address .inv-gift__holder { font-size: .85rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.inv-gift__address p { margin: 0 0 .6rem; font-size: .92rem; }
.inv-gift__address .inv-button { padding: .5rem 1.1rem; font-size: .8rem; }

/* ---------- forms & wishes ---------- */
.nr-form .inv-form label, .nr-form .inv-form__choices legend { font-weight: 700; font-size: .86rem; }
.nr-form .inv-form input:not([type=radio]):not([type=checkbox]), .nr-form .inv-form select, .nr-form .inv-form textarea {
    border: 1px solid color-mix(in srgb, var(--inv-accent) 50%, transparent); border-radius: 12px;
    background: #fff; color: var(--inv-text); padding: .7rem .85rem;
}
.nr-form .inv-form input:focus, .nr-form .inv-form select:focus, .nr-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) 15%, transparent);
}
.nr-form .inv-form .inv-button[type=submit] { width: 100%; }
.inv-rsvp__deadline { margin: 0 0 .9rem; font-size: .84rem; color: var(--nr-muted); text-align: center; }
.inv-form__notice { background: var(--nr-tint); }
/* wishes: compact speech cards in a softly tinted scroll box of about three */
.inv-wishes { --inv-wishes-height: 21rem; }
.inv-wishes__list { padding: .5rem .4rem .5rem .5rem; border-radius: 14px; background: var(--nr-tint); scrollbar-color: color-mix(in srgb, var(--inv-primary) 40%, transparent) transparent; }
.inv-wish { padding: .65rem .8rem; background: #fff; border-radius: 16px 16px 16px 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 28%, transparent); }
.inv-wish__name { font: 700 1rem/1.3 var(--nr-serif); color: var(--inv-primary); }
.inv-wish__message { font-size: .88rem; line-height: 1.45; }
.inv-wish__time { font-size: .7rem; color: var(--nr-muted); }

/* ---------- closing (deep) ---------- */
.nr-closing { padding-bottom: 1.25rem; }
.nr-closing__arch { width: min(62%, 14rem); margin: 0 auto 2.2rem; }
.nr-closing__arch::before { display: none; }
.nr-closing__arch .nr-arch__lines { color: var(--nr-gold-light); opacity: .75; }
.nr-closing__message { max-width: 32ch; margin: 0 auto; color: var(--nr-cream); }
.nr-closing__sign { margin-bottom: .3rem; }
.nr-closing__names { font-size: clamp(2.6rem, 11vw, 3.2rem); }

/* ---------- hero: the first screen after opening, a full-bleed photo with names and countdown ---------- */
.nr-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; text-align: center; }
.nr-hero__frame { position: absolute; inset: -48px 0; z-index: -2; --inv-parallax: 40px; }
.nr-hero__frame--empty { display: grid; place-items: center; background: linear-gradient(170deg, var(--inv-soft), var(--inv-glow)); }
.nr-hero__empty-star { width: 50%; color: color-mix(in srgb, var(--inv-accent) 45%, transparent); }
.nr-hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
/* the warm ground rising from the bottom keeps the names readable */
.nr-hero__mist {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--inv-background) 55%, transparent) 56%, color-mix(in srgb, var(--inv-background) 93%, transparent) 72%, var(--inv-background) 100%);
}
.nr-hero__text { width: 100%; display: grid; justify-items: center; gap: .35rem; padding: 0 1.25rem 2rem; }
.nr-hero__kicker { color: var(--inv-primary); }
.nr-hero__names { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .5rem; font-size: clamp(2.9rem, 13vw, 3.6rem); }
.nr-hero__amp { font-size: .7em; color: var(--nr-gold-ink); }
.nr-hero__date { display: grid; font: 600 1.1rem/1.35 var(--nr-serif); color: var(--inv-text); }
.nr-hero__date span { font-family: var(--nr-sans); font-weight: 800; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-primary); }
.nr-hero__countdown { margin-top: .7rem; }
.nr-hero__countdown .inv-countdown { gap: .45rem; }
.nr-hero__countdown .inv-countdown__item {
    width: 3.9rem; flex: none; padding: .55rem .1rem .45rem; border-radius: 12px;
    background: var(--inv-primary); box-shadow: none;
}
.nr-hero__countdown .inv-countdown__value { font-size: 1.35rem; color: #fff; }
.nr-hero__countdown .inv-countdown__label { font-size: .58rem; color: color-mix(in srgb, #fff 85%, transparent); }
.nr-hero__scroll { margin-top: .8rem; color: var(--inv-primary); }
html.inv-anim .nr-hero__scroll { animation: nr-nudge 2.4s ease-in-out infinite; }
/* the text fades up once the cover is gone */
html.inv-anim .nr-hero__text > * { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
html.inv-anim .nr-hero.is-open .nr-hero__text > * { opacity: 1; transform: none; }
html.inv-anim .nr-hero.is-open .nr-hero__text > :nth-child(2) { transition-delay: .15s; }
html.inv-anim .nr-hero.is-open .nr-hero__text > :nth-child(3) { transition-delay: .3s; }
html.inv-anim .nr-hero.is-open .nr-hero__text > :nth-child(n+4) { transition-delay: .45s; }
@keyframes nr-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- round photo row under the verse ---------- */
.nr-rounds { display: flex; justify-content: center; gap: .5rem; margin: 2.4rem -.75rem .4rem; }
.nr-rounds__photo {
    flex: 0 1 4.4rem; min-width: 0; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4px var(--nr-line);
}
.nr-rounds__photo:nth-child(even) { margin-top: .8rem; }

/* ---------- menu & back to top ---------- */
.inv-nav.nr-nav {
    --inv-nav-bg: var(--nr-deep);
    --inv-nav-text: color-mix(in srgb, #fff 82%, transparent);
    --inv-nav-active: var(--inv-background);
    border-color: color-mix(in srgb, var(--nr-gold-light) 30%, transparent);
}
.inv-nav.nr-nav .inv-nav__item.is-active { color: var(--inv-primary); font-weight: 800; }
.inv-to-top.nr-to-top { left: max(1rem, calc(50vw - 220px + 1rem)); border-radius: 50% 50% 10px 10px; background: #fff; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--nr-line), 0 6px 14px -6px var(--inv-primary); }

/* ---------- footer (continues the deep closing) ---------- */
.nr-foot { display: grid; justify-items: center; padding: .25rem 1rem 0; background: var(--nr-deep); color: var(--nr-cream); }
.nr-foot__star { width: 2rem; height: 2rem; color: var(--nr-gold-light); opacity: .8; }
.nr-branding { color: color-mix(in srgb, var(--nr-cream) 85%, transparent); opacity: 1; }
.inv-checkin { color: #1a1a1a; }
/* the music player's bottom spacer continues the deep footer, inside the column */
.nr-body .inv-music__space { width: var(--nr-col); margin: 0 auto; background: var(--nr-deep); }

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

@media (prefers-reduced-motion: reduce) {
    .nr-cover__arch, .nr-hero__scroll { animation: none !important; }
    .nr-cover__arch .nr-arch__lines { animation: none !important; }
    .nr-cover--leave { transition: opacity .3s ease; }
}

/* ==========================================================================
   Round 2: graceful Islamic richness — lanterns, gold arabesque corners, girih
   panels behind headings, star bands on section edges, photo backgrounds, roses
   ========================================================================== */

/* the photo backgrounds: a client photo under the section's gradient (plum on deep, a light veil on --veil) */
.nr-section > .nr-bg {
    position: absolute; inset: -40px 0; z-index: 0; pointer-events: none;
    background: var(--nr-photo, none) center 30% / cover no-repeat;
}
.nr-section--deep > .nr-bg { filter: saturate(.85); }
.nr-section:has(> .nr-bg) { overflow: clip; }
.nr-section--veil::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-background) 97%, transparent) 0%,
        color-mix(in srgb, var(--inv-background) 84%, transparent) 30%,
        color-mix(in srgb, var(--nr-tint) 90%, transparent) 70%,
        color-mix(in srgb, var(--inv-background) 97%, transparent) 100%);
}
.nr-section--veil > * { position: relative; z-index: 1; }

/* star bands along the top edge of the tinted, veiled and deep sections */
.nr-section--tint::before, .nr-section--deep::before, .nr-section--veil::before {
    content: ''; position: absolute; top: 10px; left: 0; right: 0; height: 14px; z-index: 1; pointer-events: none;
    background: var(--inv-accent); opacity: .7;
    -webkit-mask: var(--nr-band) center / 24px 14px repeat-x; mask: var(--nr-band) center / 24px 14px repeat-x;
}
.nr-section--deep::before { background: var(--nr-gold-light); opacity: .55; }

/* a girih panel behind every heading, fading out at its edges */
.nr-title::before {
    content: ''; position: absolute; inset: -.6rem -1rem -.4rem; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .16;
    -webkit-mask: var(--nr-girih) center / 44px 44px repeat, radial-gradient(closest-side, #000 35%, transparent);
    -webkit-mask-composite: source-in;
    mask: var(--nr-girih) center / 44px 44px repeat intersect, radial-gradient(closest-side, #000 35%, transparent);
}
.nr-section--deep .nr-title::before { background: var(--nr-gold-light); opacity: .3; }

/* the basmalah on a round girih medallion */
.nr-basmalah::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 15rem; height: 15rem; margin: -7.5rem 0 0 -7.5rem; z-index: -1;
    background: var(--inv-primary); opacity: .2;
    -webkit-mask: var(--nr-girih) center / 40px 40px repeat, radial-gradient(closest-side, #000 55%, transparent);
    -webkit-mask-composite: source-in;
    mask: var(--nr-girih) center / 40px 40px repeat intersect, radial-gradient(closest-side, #000 55%, transparent);
}
.nr-basmalah { isolation: isolate; }
.nr-arabic { position: relative; text-shadow: 0 0 18px var(--inv-background), 0 0 4px var(--inv-background); }

/* hanging lanterns (fanous): drop in once, then sway very gently from the top */
.nr-lantern { position: absolute; top: 0; z-index: 2; height: auto; overflow: visible; pointer-events: none; transform-origin: 50% 0; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .14)); }
.nr-cover > .nr-lantern { --nr-lw: min(12.5vw, 3.4rem, 7.2svh); width: var(--nr-lw); }
.nr-cover > .nr-lantern--left { left: 7%; }
.nr-cover > .nr-lantern--right { right: 7%; top: calc(var(--nr-lw) * -.75); }
.nr-section > .nr-lantern--closing { width: 2.5rem; }
.nr-section > .nr-lantern--closing.nr-lantern--left { left: 6%; }
.nr-section > .nr-lantern--closing.nr-lantern--right { right: 6%; top: -1.9rem; }
.nr-person { position: relative; }
.nr-lantern--couple { left: 9%; top: -2.2rem; width: 2.6rem; }
html.inv-anim .nr-lantern { animation: nr-sway 6s ease-in-out infinite alternate; }
html.inv-anim .nr-lantern--right { animation-delay: -3s; }
html.inv-anim .nr-cover > .nr-lantern { animation: nr-drop 1.3s cubic-bezier(.2, .7, .2, 1) .15s both, nr-sway 6s ease-in-out 1.45s infinite alternate; }
html.inv-anim .nr-cover > .nr-lantern--right { animation-delay: .35s, -1.5s; }
@keyframes nr-sway { from { rotate: -2.2deg; } to { rotate: 2.2deg; } }
@keyframes nr-drop { from { opacity: 0; translate: 0 -30px; } to { opacity: 1; translate: 0 0; } }

/* gold arabesque corners */
.nr-corner { position: absolute; z-index: 1; height: auto; pointer-events: none; }
.nr-cover > .nr-corner { width: min(21vw, 6rem, 14svh); bottom: 6px; }
.nr-cover > .nr-corner--bl { left: 6px; transform: scaleY(-1); }
.nr-cover > .nr-corner--br { right: 6px; transform: scale(-1, -1); }
.nr-section > .nr-corner { width: min(22vw, 5.5rem); top: 30px; }
.nr-section > .nr-corner--tl { left: 10px; }
.nr-section > .nr-corner--tr { right: 10px; transform: scaleX(-1); }
html.inv-anim .nr-cover > .nr-corner { animation: inv-enter 1.1s cubic-bezier(.2, .7, .2, 1) .9s both; }

/* the Redouté rose (hand-colored engraving, public domain) as soft corner accents on light sections */
.nr-section > .nr-rose { position: absolute; z-index: 0; height: auto; pointer-events: none; filter: drop-shadow(0 10px 14px rgb(60 20 40 / .14)); }
.nr-rose--opening { top: -1.2rem; right: -2.6rem; width: 8.5rem; transform: rotate(-24deg); }
.nr-portrait > .nr-rose--couple { position: absolute; right: -42%; bottom: -14%; z-index: 2; width: 66%; height: auto; transform: rotate(-12deg); pointer-events: none; filter: drop-shadow(0 10px 14px rgb(60 20 40 / .16)); }
.nr-rose--gift { top: .6rem; left: -2.4rem; width: 7rem; transform: scaleX(-1) rotate(-22deg); }
.nr-section > .nr-title, .nr-opening > .nr-basmalah, .nr-section > .nr-person { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .nr-lantern, .nr-cover > .nr-lantern, .nr-cover > .nr-corner { animation: none !important; }
}