/* Nikah (v5) · ivory and blush, rose-gold script, hand-drawn florals, petals throughout.
   Layout: one centred column; florals frame the opening; two pinned scenes (vines, sunset) carry the motion. */
body.t-nikah {
  --paper: #fdf9f6;
  --blush: #f7e4e3;
  --rose: #b97f88;
  --ink: #2f3a35;
  --ink-soft: #5e6763;
  --gold: #a68650;
  --gold-soft: rgba(166, 134, 80, .45);
  --sage: #7f9a7c;
  --rosegold: linear-gradient(105deg, #74443c 0%, #a5695c 20%, #cb917f 38%, #e6b3a1 47%, #b67a6b 60%, #7e4f45 80%, #9d685a 100%);
  --btn-ink: #2f3a35; --btn-line: rgba(166, 134, 80, .55);
  --cd-line: rgba(166, 134, 80, .35); --cd-bg: transparent; --cd-ink: #2f3a35; --cd-lab: #7b817e;
  --map-bg: #f3ece6;
  background: var(--paper); color: var(--ink);
  font-size: 20px; font-weight: 500;
}
.t-nikah::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(247, 210, 214, .5), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(247, 222, 222, .45), transparent 70%),
    radial-gradient(45% 35% at 100% 70%, rgba(240, 230, 214, .5), transparent 70%); }
.t-nikah::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--noise); opacity: .28; mix-blend-mode: multiply; }
.t-nikah ::selection { background: var(--blush); color: var(--ink); }
.petals { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.petals.back { z-index: 1; } .petals.front { z-index: 5; }
main { position: relative; z-index: 2; }
.progress { background: linear-gradient(90deg, transparent, var(--rose), var(--gold)); height: 1.5px; }

.caps { font-family: var(--f-caps); font-weight: 600; font-size: 10.5px; letter-spacing: .32em; padding-left: .32em; color: var(--gold); }
.wrap { width: 100%; max-width: 620px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); text-align: center; }
.wrap.narrow { max-width: 580px; }
.sec { position: relative; padding-block: 78px; }
.label { margin-bottom: 22px; }
.rule { width: 74px; height: 1px; margin: 54px auto; background: var(--gold-soft); position: relative; }
.rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; transform: rotate(45deg); background: var(--gold); }
.rg { background: var(--rosegold); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ---------- opening ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 64px 0 80px; overflow: hidden; }
.bouquet { position: absolute; width: min(74vw, 500px); height: auto; aspect-ratio: 1; pointer-events: none; overflow: visible; }
.bouquet.tl { left: -4vw; top: -4vw; }
.bouquet.br { right: -4vw; bottom: -4vw; transform: rotate(180deg); }
.bouquet .stem { fill: none; stroke: var(--sage); stroke-width: 1.3; stroke-linecap: round; }
.bouquet .leaf, .vine .leaf { fill: rgba(150, 175, 146, .32); stroke: var(--sage); stroke-width: .9; }
.bouquet .vein, .vine .vein { fill: none; stroke: var(--sage); stroke-width: .5; opacity: .7; }
.bouquet .petal, .vine .petal { fill: url(#roseWash); stroke: #c48f95; stroke-width: .9; }
.bouquet .swirl, .vine .swirl { fill: none; stroke: #c48f95; stroke-width: .9; }
.bouquet .jas, .vine .jas { fill: #fffdfb; stroke: #d6bfb6; stroke-width: .7; }
.bouquet .eye, .vine .eye { fill: #c9a25c; }
.bouquet .berry, .vine .berry { fill: #c9a25c; }
.bouquet .bud, .vine .bud { fill: #fbe9ea; stroke: #c48f95; stroke-width: .7; }
.hero-in { position: relative; display: grid; justify-items: center; text-align: center; padding: 0 28px; }
.bism { font-family: var(--f-quran); font-size: clamp(20px, 5.6vw, 28px); line-height: 1.6; color: var(--ink); }
.hero-ur { font-family: var(--f-ur); font-weight: 500; font-size: clamp(24px, 6.6vw, 32px); line-height: 2.1; color: var(--gold); margin-top: 4px; }
.names { margin: 8px 0 0; display: grid; justify-items: center; font-weight: 400; }
.names .nm { font-family: var(--f-script); font-weight: 400; font-size: clamp(76px, 22vw, 128px); line-height: 1.02; padding: 0 .2em; }
.names .sur { font-size: 11px; letter-spacing: .6em; padding-left: .6em; margin-top: -6px; color: var(--ink-soft); }
.names .amp { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 7.4vw, 38px); color: var(--rose); line-height: 1.5; margin: 6px 0 -2px; }
.hero-date { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.hero-date i { display: block; width: 34px; height: 1px; background: var(--gold-soft); }
.hero-date .caps { color: var(--ink); letter-spacing: .22em; padding-left: .22em; font-size: 10.5px; }
.hero-time { font-style: italic; color: var(--ink-soft); margin-top: 8px; font-size: 19px; }
.cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; }
.cue i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent); transform-origin: 50% 0; }

/* ---------- ayah with vines (pinned) ---------- */
.ink-pin { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 80px 0; overflow: hidden; }
.vine { position: absolute; top: 0; bottom: 0; width: 120px; height: 100%; pointer-events: none; overflow: visible; }
.vine.vl { left: 0; } .vine.vr { right: 0; }
.vine .stem { fill: none; stroke: var(--sage); stroke-width: 1.3; stroke-linecap: round; }
.ink-verse .ar { font-family: var(--f-quran); direction: rtl; font-size: clamp(31px, 8.6vw, 50px); line-height: 2.15; color: var(--ink); }
.ink-verse .ar .w.mk { color: var(--gold); }
.ink-verse .tr { font-style: italic; font-size: clamp(20px, 5.4vw, 24px); line-height: 1.55; color: var(--ink-soft); margin: 24px auto 0; max-width: 22em; }
.ink-verse .ref { margin-top: 20px; }

/* ---------- verses ---------- */
[data-verse] .ar { font-family: var(--f-quran); direction: rtl; font-size: clamp(28px, 7.6vw, 40px); line-height: 2.15; color: var(--ink); }
[data-verse] .ar .w.mk { color: var(--gold); }
[data-verse] .tr { font-style: italic; font-size: clamp(19px, 5vw, 22px); line-height: 1.6; color: var(--ink-soft); margin-top: 22px; }
[data-verse] .ref { margin-top: 20px; }
.dua .ar { font-family: var(--f-ar); font-size: clamp(26px, 7vw, 34px); line-height: 2; color: var(--ink); }
.dua .src { font-size: 15.5px; color: var(--ink-soft); margin-top: 14px; }
.dua .src .pbuh { font-family: var(--f-ar); }
.ameen { font-family: var(--f-script); font-size: 64px; line-height: 1.2; margin-top: 18px; color: var(--rose); }

/* ---------- invitation + families ---------- */
.invite .hosts { font-family: var(--f-serif); font-weight: 600; font-size: clamp(26px, 7vw, 32px); line-height: 1.25; margin: 4px 0 12px; text-wrap: balance; }
.compl { font-size: clamp(22px, 5.8vw, 26px); margin-top: 6px; }
.foot .label { margin-top: 0; }
.mg-time .mg-k, .mg-dinner .mg-k { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .3em; opacity: .8; margin-bottom: 2px; }
.mg-dinner { font-style: italic; font-size: clamp(23px, 6.4vw, 30px); margin-top: 10px; color: #fff8ea; }
.lead { font-size: clamp(22px, 5.8vw, 26px); line-height: 1.5; max-width: 19em; margin: 0 auto; text-wrap: balance; }
.families { display: grid; gap: 30px; margin-top: 54px; }
.fam-role { font-size: 9.5px; }
.fam-name { font-family: var(--f-serif); font-weight: 500; font-size: clamp(32px, 8.6vw, 40px); line-height: 1.15; margin-top: 10px; }
.fam-ur { font-family: var(--f-ur); font-size: 22px; line-height: 2.2; color: var(--rose); }
.fam-lines { margin-top: 4px; display: grid; gap: 3px; }
.fam-lines .of { font-size: 17.5px; line-height: 1.45; color: var(--ink-soft); font-style: italic; text-wrap: balance; }
.fam-lines .of:first-child { font-style: normal; color: var(--ink); font-weight: 600; }
.fam-and { font-family: var(--f-script); font-size: 54px; line-height: 1; color: var(--rose); }
.close { font-style: italic; color: var(--ink-soft); margin-top: 52px; }
@media (min-width: 860px) {
  .invite .wrap { max-width: 1000px; }
  .families { grid-template-columns: 1fr auto 1fr; align-items: start; gap: 44px; }
  .fam-and { padding-top: 52px; }
}

/* ---------- sunset to Maghrib (pinned) ---------- */
.mg-pin { min-height: 100svh; display: grid; place-items: center; padding: 3svh 0; }
.mg-window { position: relative; width: min(90vw, 500px); height: min(88svh, 780px); border-radius: 50% 50% 16px 16px / 26% 26% 16px 16px; overflow: hidden;
  box-shadow: 0 50px 80px -46px rgba(60, 40, 20, .5), 0 0 0 1px rgba(166, 134, 80, .65); }
.mg-window::after { content: ""; position: absolute; inset: 9px; border-radius: inherit; border: 1px solid rgba(255, 246, 225, .75); pointer-events: none; }
.mg-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-text { position: absolute; left: 0; right: 0; top: 9%; text-align: center; color: var(--ink); }
.mg-label { color: inherit; opacity: .85; }
.mg-day { font-family: var(--f-caps); font-weight: 600; font-size: clamp(14px, 4vw, 18px); letter-spacing: .32em; padding-left: .32em; margin-top: 12px; }
.mg-num { font-family: var(--f-serif); font-weight: 500; font-size: clamp(92px, 27vw, 140px); line-height: .95; font-variant-numeric: lining-nums; }
.mg-month { font-size: clamp(24px, 6.6vw, 30px); font-weight: 500; }
.mg-hijri { color: inherit; opacity: .8; margin-top: 10px; font-size: 10px; letter-spacing: .22em; }
.mg-time { font-style: italic; font-size: clamp(23px, 6.4vw, 30px); margin-top: 12px; }

/* ---------- countdown ---------- */
.countdown { gap: 0; max-width: 400px; }
.cd-cell { border: 0; border-radius: 0; background: none; padding: 4px 0; }
.cd-cell + .cd-cell { border-left: 1px solid var(--cd-line); }
.cd-cell::before { display: none; }
.cd-num { font-weight: 400; font-size: clamp(36px, 10vw, 48px); }
.cd-lab { font-family: var(--f-caps); font-weight: 600; font-size: 8.5px; letter-spacing: .24em; }
.count .btns { margin-top: 40px; }

/* ---------- buttons ---------- */
.btn { min-height: 46px; padding: 0 20px; font-weight: 600; font-size: 10.5px; letter-spacing: .18em; border-color: var(--btn-line); color: var(--btn-ink); background: rgba(253, 249, 246, .6); }
.btn::before { background: var(--blush); }
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--rose); }
.btn.solid { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.btn.solid::before { display: none; }
.btn.solid:hover, .btn.solid:focus-visible { color: var(--paper); background: #232c28; }

/* ---------- venue ---------- */
.v-name { font-family: var(--f-serif); font-weight: 600; font-size: clamp(28px, 7.4vw, 36px); line-height: 1.2; text-wrap: balance; }
.v-addr { color: var(--ink-soft); margin-top: 10px; text-wrap: balance; }
.venue .map-frame { margin: 26px auto 30px; max-width: 400px; border-color: var(--gold-soft); box-shadow: 0 30px 50px -36px rgba(60, 40, 30, .4); }
.venue .map-frame::after { border-color: rgba(166, 134, 80, .45); }
.venue .map-frame iframe { filter: grayscale(.85) sepia(.15) contrast(.95) brightness(1.03); }
.venue .btns { margin-top: 28px; }

/* ---------- footer ---------- */
.foot { padding-bottom: 120px; }
.other { display: grid; gap: 6px; justify-items: center; padding: 30px 0; border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); transition: opacity .4s; }
.other:hover { opacity: .75; }
.other-t { font-family: var(--f-serif); font-weight: 500; font-size: 30px; }
.other-d { font-style: italic; color: var(--ink-soft); }
.foot .btns { margin-top: 40px; }
.sign { font-family: var(--f-script); font-size: 60px; line-height: 1.3; margin-top: 52px; color: var(--rose); }

@media (min-width: 760px) { .sec { padding-block: 140px; } }

/* rose-gold foil on the script lettering */
.names .nm, .fam-and, .ameen, .sign { background-image: var(--rosegold); background-size: 220% 100%; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ameen, .sign, .fam-and { padding: 0 .2em; display: inline-block; }

/* v6: a soft blush glow behind the names, and floral sprigs between sections */
.names { position: relative; }
.names::before { content: ""; position: absolute; left: -18%; right: -18%; top: 4%; bottom: 4%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(245, 205, 211, .62), rgba(245, 205, 211, 0)); }
.sprig { display: block; width: 190px; height: 40px; margin: 0 auto 30px; overflow: visible; }
.sprig .stem { fill: none; stroke: var(--sage); stroke-width: 1.2; stroke-linecap: round; }
.sprig .leaf { fill: rgba(150, 175, 146, .32); stroke: var(--sage); stroke-width: .8; }
.sprig .vein { fill: none; stroke: var(--sage); stroke-width: .45; opacity: .7; }
.sprig .petal { fill: url(#roseWash); stroke: #c48f95; stroke-width: .8; }
.sprig .swirl { fill: none; stroke: #c48f95; stroke-width: .8; }
.sprig .jas { fill: #fffdfb; stroke: #d6bfb6; stroke-width: .6; }
.sprig .eye, .sprig .berry { fill: #c9a25c; }
.fam-name .ch { display: inline-block; }
.cd-num span { will-change: transform; }