/* == Nur Arabesque - porcelain / slate / gold ==
   Prefix: nr-  Fonts: Cormorant Garamond + Plus Jakarta Sans */

:root {
  --nr-ivory: #F6F7FA;
  --nr-ivory-2: #EBEDF3;
  --nr-ink: #23252E;
  --nr-gold: #C9A227;
  --nr-bronze: #96793B;
  --nr-body: #565264;
  --nr-line: #DDE0E8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background-color: var(--nr-ivory-2);
  background-image:
    repeating-linear-gradient(45deg, rgba(201,162,39,.09) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(-45deg, rgba(201,162,39,.09) 0 1px, transparent 1px 28px);
  color: var(--nr-body); -webkit-font-smoothing: antialiased;
}
body:not(.is-open) { overflow: hidden; }

.nr-page {
  max-width: 480px; margin: 0 auto; position: relative;
  background: var(--nr-ivory);
  box-shadow: 0 0 70px rgba(35,37,46,.28);
  overflow-x: clip;
}

/* -- cover -- */
.nr-cover {
  position: fixed; inset: 0; z-index: 100; max-width: 480px; margin: 0 auto;
  background:
    radial-gradient(circle at 50% 34%, rgba(201,162,39,.14), transparent 42%),
    linear-gradient(180deg, var(--nr-ivory) 0%, var(--nr-ivory-2) 100%);
  display: flex; align-items: center; justify-content: center;
}
.nr-cover-inner { text-align: center; padding: 30px 26px; max-width: 360px; }
.nr-medal { width: 138px; height: 138px; overflow: visible; margin-bottom: 10px; }
.nr-ring, .nr-ring-2, .nr-core, .nr-ray { transform-box: view-box; transform-origin: center; }
.nr-ring { transition: transform 1s ease .12s, opacity 1s ease .12s; }
.nr-ring-2 { transition: transform 1.15s ease .2s, opacity 1.15s ease .2s; }
.nr-core { transition: transform .95s ease, opacity .95s ease; }
.nr-ray {
  transition: transform 1.05s cubic-bezier(.55,0,.2,1), opacity 1.05s ease;
  transition-delay: calc(var(--i) * 65ms);
}
.nr-cover-txt { transition: opacity .4s ease; }
.nr-cover-bismillah {
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--nr-bronze); margin-top: 6px;
}
.nr-cover-names {
  font-family: "Cormorant Garamond", serif; font-weight: 500;
  font-size: 46px; line-height: 1.08; color: var(--nr-ink); margin: 14px 0 8px;
}
.nr-cover-names span { display: block; font-size: 20px; color: var(--nr-gold); margin: 4px 0; }
.nr-cover-date { font-size: 13.5px; letter-spacing: .12em; color: var(--nr-bronze); }
.nr-cover-guest { margin: 26px 0 22px; font-size: 12.5px; color: var(--nr-body); }
.nr-guest-name {
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: 22px; color: var(--nr-ink); margin-top: 5px;
}
.nr-open-btn {
  appearance: none; cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--nr-ivory); background: var(--nr-ink);
  border: 1px solid var(--nr-ink); padding: 14px 36px;
  box-shadow: inset 0 0 0 3px var(--nr-ivory), inset 0 0 0 4px var(--nr-gold);
  transition: background .25s ease, border-color .25s ease;
}
.nr-open-btn:hover { background: var(--nr-bronze); border-color: var(--nr-bronze); }

/* signature exit: star segments bloom outward, cover fades + lifts away */
body.is-open [data-cover] {
  opacity: 0;
  transform: translateY(-44px);
  transition:
    opacity .65s ease .72s,
    transform .65s ease .72s,
    visibility 0s 1.45s;
  pointer-events: none;
  visibility: hidden;
}
body.is-open .nr-cover-txt { opacity: 0; }
body.is-open .nr-ray { transform: scale(2.05) rotate(9deg); opacity: 0; }
body.is-open .nr-core { transform: rotate(135deg) scale(.35); opacity: 0; }
body.is-open .nr-ring { transform: scale(1.35); opacity: 0; }
body.is-open .nr-ring-2 { transform: scale(1.55) rotate(24deg); opacity: 0; }

/* -- hero -- */
.nr-hero { position: relative; padding: 46px 22px 50px; background: var(--nr-ivory); }
.nr-hero-frame { position: absolute; inset: 14px; pointer-events: none; border: 1px solid var(--nr-line); }
.nr-hero-frame::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(201,162,39,.45); }
.nr-hero-frame::after {
  content: ""; position: absolute; width: 17px; height: 17px;
  top: -9px; left: 50%; transform: translateX(-50%) rotate(45deg);
  background: var(--nr-ivory); border: 1px solid var(--nr-gold);
}
.nr-hero-body { position: relative; text-align: center; padding: 22px 18px 0; }
.nr-hero-star { width: 26px; height: 26px; }
.nr-hero-salam { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--nr-bronze); margin-top: 12px; }
.nr-hero-intro { font-size: 13px; line-height: 1.75; max-width: 34ch; margin: 14px auto 18px; }
.nr-hero-names { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 33px; line-height: 1.15; color: var(--nr-ink); }
.nr-hero-amp { color: var(--nr-gold); font-size: 19px; margin: 6px 0; }
.nr-hero-date { margin-top: 12px; font-size: 13.5px; letter-spacing: .1em; color: var(--nr-bronze); }
.nr-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 330px; margin: 26px auto 0; }
.nr-cd-cell { background: #FCFCFE; border: 1px solid var(--nr-line); padding: 11px 4px 9px; text-align: center; position: relative; }
.nr-cd-cell::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px;
  border-top: 1.5px solid var(--nr-gold); border-left: 1.5px solid var(--nr-gold);
}
.nr-cd-cell b {
  display: block; font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: 25px; color: var(--nr-ink); font-variant-numeric: tabular-nums;
}
.nr-cd-cell span { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--nr-bronze); }

/* -- sections -- */
.nr-sec { padding: 54px 26px; }
.nr-events { background: linear-gradient(180deg, var(--nr-ivory-2), var(--nr-ivory)); }
.nr-sec-head { text-align: center; margin-bottom: 32px; }
.nr-divider { width: min(240px, 82%); height: 18px; }
.nr-sec-title { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 27px; color: var(--nr-ink); margin-top: 8px; }
.nr-sec-sub { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--nr-bronze); margin-top: 6px; }

/* -- couple -- */
.nr-person {
  background: #FCFCFE; border: 1px solid var(--nr-line); padding: 28px 22px 24px;
  text-align: center; position: relative; max-width: 340px;
}
.nr-person:nth-of-type(odd) { margin-right: auto; }
.nr-person:nth-of-type(even) { margin-left: auto; }
.nr-person::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201,162,39,.5); pointer-events: none; }
.nr-avatar {
  width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--nr-ink); color: var(--nr-gold);
  display: grid; place-items: center;
  font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 23px;
  box-shadow: 0 0 0 3px #FCFCFE, 0 0 0 4px var(--nr-gold);
}
.nr-person-name { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 23px; color: var(--nr-ink); }
.nr-person-parents { margin-top: 8px; font-size: 13px; line-height: 1.65; }
.nr-person-ig { margin-top: 6px; font-size: 12px; letter-spacing: .06em; color: var(--nr-bronze); }
.nr-between { text-align: center; margin: 16px 0; }
.nr-between-star { display: block; width: 22px; height: 22px; margin: 0 auto 6px; }
.nr-between span { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 16px; color: var(--nr-bronze); }

/* -- events -- */
.nr-event { background: #FCFCFE; border: 1px solid var(--nr-line); padding: 24px 20px; position: relative; margin-bottom: 18px; }
.nr-event::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201,162,39,.5); pointer-events: none; }
.nr-event-no { font-family: "Cormorant Garamond", serif; font-size: 14px; letter-spacing: .34em; color: var(--nr-gold); }
.nr-event-title { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 24px; color: var(--nr-ink); margin-top: 2px; }
.nr-event-time { font-size: 13px; font-weight: 700; color: var(--nr-bronze); margin-top: 5px; }
.nr-event-venue { font-size: 14.5px; font-weight: 600; color: var(--nr-ink); margin-top: 11px; }
.nr-event-addr { font-size: 12.5px; line-height: 1.6; margin-top: 2px; }
.nr-cal { margin-top: 13px; display: flex; gap: 14px; flex-wrap: wrap; }
.nr-cal a {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-decoration: none;
  color: var(--nr-ink); border-bottom: 1px solid var(--nr-gold); padding-bottom: 2px;
}
.nr-maps { margin-top: 26px; }
.nr-map-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.nr-map-tab {
  appearance: none; border: 1px solid var(--nr-ink); background: var(--nr-ivory); cursor: pointer;
  padding: 10px 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 11.5px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nr-ink);
}
.nr-map-tab:first-child { border-right: none; }
.nr-map-tab.is-active { background: var(--nr-ink); color: var(--nr-ivory); }
.nr-map { display: block; width: 100%; height: 220px; border: 1px solid var(--nr-ink); }
.nr-map-open {
  display: inline-block; margin-top: 9px; font-size: 12.5px; font-weight: 600;
  color: var(--nr-bronze); text-decoration: none; border-bottom: 1px solid var(--nr-gold);
}

/* -- story -- */
.nr-story { list-style: none; }
.nr-story-item { position: relative; padding: 14px 0 16px 64px; border-bottom: 1px solid var(--nr-line); }
.nr-story-item:last-child { border-bottom: none; }
.nr-story-item::before {
  content: ""; position: absolute; left: 21px; top: 21px; width: 9px; height: 9px;
  transform: rotate(45deg); background: var(--nr-ivory); border: 1.5px solid var(--nr-gold);
}
.nr-story-year { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 15px; color: var(--nr-bronze); letter-spacing: .04em; }
.nr-story-title { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 19px; color: var(--nr-ink); margin-top: 2px; }
.nr-story-text { font-size: 13.5px; line-height: 1.7; margin-top: 5px; }

/* -- gallery -- */
.nr-gal-sec { background: var(--nr-ivory-2); }
.nr-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nr-g-item {
  cursor: zoom-in; aspect-ratio: 4/3; overflow: hidden;
  border: 1px solid var(--nr-line); background: #FCFCFE;
  box-shadow: 0 8px 20px -12px rgba(35,37,46,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.nr-g-item:nth-child(even) { transform: translateY(10px); }
.nr-g-item:hover { transform: translateY(0) scale(1.02); box-shadow: 0 12px 26px -12px rgba(35,37,46,.45); }
.nr-g-item svg { display: block; width: 100%; height: auto; }
.nr-g-item { color: #96793B; }

/* -- forms -- */
.nr-form { display: grid; gap: 16px; }
.nr-field { display: grid; gap: 6px; border: none; }
.nr-field span, .nr-field legend {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nr-bronze);
}
.nr-field input, .nr-field select, .nr-field textarea {
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; color: var(--nr-ink);
  background: #FCFCFE; border: 1px solid var(--nr-line); padding: 11px 13px;
  outline: none; width: 100%; transition: border-color .2s ease;
}
.nr-field input:focus, .nr-field select:focus, .nr-field textarea:focus { border-color: var(--nr-gold); }
.nr-radios label { display: flex; gap: 9px; align-items: center; font-size: 14px; padding: 5px 0; }
.nr-radios input { accent-color: var(--nr-gold); width: 16px; height: 16px; }
.nr-submit {
  justify-self: center; appearance: none; cursor: pointer;
  background: var(--nr-ink); color: var(--nr-ivory); border: 1px solid var(--nr-ink);
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; padding: 13px 32px;
  transition: background .25s ease, border-color .25s ease;
}
.nr-submit:hover { background: var(--nr-bronze); border-color: var(--nr-bronze); }
.nr-thanks {
  text-align: center; font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 18px; color: var(--nr-bronze); padding: 24px 8px;
}

/* -- wishes -- */
.nr-wish-form { margin-bottom: 26px; }
.nr-wishes { display: grid; gap: 10px; margin-bottom: 16px; }
[data-wishes-list] .wish { background: #FCFCFE; border: 1px solid var(--nr-line); border-left: 3px solid var(--nr-gold); padding: 13px 16px 11px; }
[data-wishes-list] .wish h4 { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 16px; color: var(--nr-ink); }
[data-wishes-list] .wish p { font-size: 13px; line-height: 1.65; margin-top: 3px; }
[data-wishes-list] .wish time { display: block; font-size: 10.5px; color: #9A9AAE; margin-top: 6px; }
.nr-more {
  display: block; margin: 0 auto; appearance: none; cursor: pointer; background: none;
  border: 1px solid var(--nr-ink); color: var(--nr-ink);
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: 9px 22px;
}

/* -- amplop -- */
.nr-amplop { background: linear-gradient(180deg, var(--nr-ivory), var(--nr-ivory-2)); }
.nr-amplop-note { text-align: center; font-size: 13px; line-height: 1.7; max-width: 36ch; margin: -8px auto 22px; }
.nr-envs { display: grid; gap: 14px; }
.nr-env { background: #FCFCFE; border: 1px solid var(--nr-bronze); padding: 22px 18px 19px; text-align: center; position: relative; }
.nr-env::before { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(201,162,39,.55); pointer-events: none; }
.nr-env-name { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--nr-bronze); }
.nr-env-num { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 25px; letter-spacing: .06em; color: var(--nr-ink); margin-top: 7px; }
.nr-env-holder { font-size: 12px; color: var(--nr-body); margin-top: 3px; }
.nr-copy {
  margin-top: 13px; appearance: none; cursor: pointer; background: var(--nr-gold); color: var(--nr-ink);
  border: none; font-family: "Plus Jakarta Sans", sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 9px 18px;
  transition: background .25s ease;
}
.nr-copy:hover { background: var(--nr-bronze); color: var(--nr-ivory); }

/* -- closing -- */
.nr-closing { text-align: center; padding: 54px 26px 30px; border-top: 1px solid var(--nr-line); background: var(--nr-ivory); }
.nr-closing-text { font-size: 13px; line-height: 1.75; max-width: 36ch; margin: 18px auto 22px; }
.nr-closing-names { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 34px; color: var(--nr-ink); }
.nr-closing-family { margin-top: 6px; font-size: 12.5px; letter-spacing: .08em; color: var(--nr-bronze); }
.nr-closing-salam {
  margin-top: 18px; font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 16px; color: var(--nr-body);
}

/* -- music toggle -- */
.nr-music {
  position: fixed; right: 18px; bottom: 22px; z-index: 90; width: 44px; height: 44px;
  background: var(--nr-ivory); color: var(--nr-bronze);
  border: 1px solid var(--nr-gold); border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s;
}
body.is-open .nr-music { opacity: 1; visibility: visible; transition-delay: 1.2s, 1.2s; }
.nr-music svg { width: 20px; height: 20px; }
.nr-music.is-playing { animation: nr-pulse 2.6s ease infinite; }
@keyframes nr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,39,.45); }
  60% { box-shadow: 0 0 0 11px rgba(201,162,39,0); }
}

/* -- reveal (behavior-critical) -- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .85s ease, transform .85s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }

/* -- lightbox restyle -- */
.lb-overlay { background: rgba(246,247,250,.94) !important; backdrop-filter: blur(4px); }
.lb-stage { border: 1px solid var(--nr-gold) !important; box-shadow: 0 24px 70px -20px rgba(35,37,46,.5) !important; }
.lb-cap { font-family: "Plus Jakarta Sans", sans-serif !important; color: var(--nr-ink) !important; }
.lb-btn { color: var(--nr-bronze) !important; }

@media (min-width: 520px) {
  body { padding: 34px 0; }
  .nr-cover { inset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}