/* ==========================================================
   NIKAH: "Ivory & Champagne". Minimal, classy, stationery-inspired.
   Ivory paper, charcoal ink, champagne-gold hairlines. No red.
   ========================================================== */
.theme-nikah {
  --c-bg: #efe9df;
  --c-paper: #fbf8f2;
  --c-ink: #2b2b2b;
  --c-muted: #6b6359;           /* 5.6:1 on paper - AA */
  --c-gold: #b08d57;            /* decorative only */
  --c-gold-ink: #7d6237;        /* gold for text - 5.0:1 on paper */
  --c-accent: #2b2b2b;
  --c-accent-ink: #fbf8f2;
  --c-line: #d8cdb9;
  --c-field-bg: #fffdf9;
  --c-field-ink: #2b2b2b;
  --c-focus: #b08d57;
  --f-body: "Cormorant Garamond", Georgia, serif;
  --f-label: "Cormorant Garamond", Georgia, serif;
  --f-display: "Italiana", "Cormorant Garamond", serif;
  --f-script: "Pinyon Script", cursive;
  --r-field: 2px; --r-btn: 0;
  background:
    radial-gradient(ellipse at top, #f6f1e8, transparent 70%),
    var(--c-bg);
}

/* ---------- Cover (intro) ---------- */
.nk-intro { background: var(--c-paper); transition: opacity 1s ease, visibility 1s; place-items: stretch; }
.nk-intro.opening { opacity: 0; visibility: hidden; }
/* hairline frame around the whole screen */
.nk-intro::before { content: ""; position: fixed; inset: clamp(10px, 2.5vw, 22px); border: 1px solid var(--c-line); pointer-events: none; }
.nk-cover {
  min-height: 100svh; box-sizing: border-box; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vh, 2.5rem); padding: clamp(3rem, 10vh, 6rem) 1.5rem;
}
.nk-cover > * { animation: fade-up 1.1s ease both; }
.nk-cover > :nth-child(2) { animation-delay: .2s; }
.nk-cover > :nth-child(3) { animation-delay: 3.4s; }   /* after the calligraphy is inked */
.nk-cover > :nth-child(4) { animation-delay: 3.8s; }
.nk-cover-bism { font-size: clamp(1.3rem, 4vw, 1.7rem); color: var(--c-gold-ink); margin: 0; }

/* ---------- Calligraphy names ----------
   1) gold outline traces the letters  2) gold ink floods in  3) flourish draws out
   4) SMIL gradient sheen sweeps across every few seconds.
   Animation waits for .fonts-ready so we never trace the fallback font. */
.nk-calli { display: block; height: auto; overflow: visible; }
.nk-calli text { font-family: "Gulzar", "Amiri", serif; font-weight: 400; font-size: 112px; }
.nk-calli text.amp { font-family: "Playfair Display", serif; font-style: italic; font-size: 64px; }
.nk-calli .fl { fill: none; stroke: var(--c-gold); stroke-width: 1; }
.nk-calli .fl-dot { fill: none; stroke: var(--c-gold); stroke-width: 1; }
.nk-calli-lg { width: min(86vw, 560px); }
.nk-calli-sm { width: min(70vw, 260px); margin: 2rem auto .25rem; }

.nk-calli-anim text { stroke: var(--c-gold); stroke-width: 1.4; stroke-dasharray: 1400; stroke-dashoffset: 1400; fill-opacity: 0; }
.nk-calli-anim .fl { stroke-dasharray: 150; stroke-dashoffset: 150; }
.nk-calli-anim .fl-dot { opacity: 0; }
.fonts-ready .nk-calli-anim text { animation: nk-trace 2.6s ease-in-out .3s forwards, nk-ink 1.2s ease 2.4s forwards; }
.fonts-ready .nk-calli-anim .fl { animation: nk-trace 1.2s ease 2.9s forwards; }
.fonts-ready .nk-calli-anim .fl-dot { animation: fade-up .8s ease 3.3s forwards; }
@keyframes nk-trace { to { stroke-dashoffset: 0; } }
@keyframes nk-ink { to { fill-opacity: 1; stroke-width: 0; } }

/* Reduced motion: skip straight to the finished calligraphy (animations are disabled globally,
   so the start state above must not be left invisible). */
@media (prefers-reduced-motion: reduce) {
  .nk-calli-anim text { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; }
  .nk-calli-anim .fl { stroke-dashoffset: 0; }
  .nk-calli-anim .fl-dot { opacity: 1; }
}

.nk-cover-text { text-align: center; }
.nk-cover-names { font-family: "Great Vibes", cursive; font-weight: 400; font-size: clamp(2.6rem, 9vw, 4rem); margin: .25rem 0 .75rem; line-height: 1.25; }
.nk-cover-names span { font-family: "Playfair Display", serif; font-style: italic; font-size: .8em; color: var(--c-gold-ink); padding: 0 .2em; }
.nk-cover-date { font-family: var(--f-display); letter-spacing: .3em; font-size: clamp(.8rem, 2.4vw, .95rem); color: var(--c-muted); margin: 0; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.nk-cover-date span { width: 1px; height: 1rem; background: var(--c-gold); }
.nk-open { font-size: .72rem; padding: .85rem 2rem; }
@media (max-height: 600px) { .nk-cover { justify-content: center; } }

/* ---------- Page & card ---------- */
.nk-page { padding: clamp(1rem, 5vw, 4rem) clamp(.75rem, 4vw, 2rem); }
.nk-card {
  position: relative; max-width: 44rem; margin: 0 auto; text-align: center;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 6vw, 4.5rem);
  background: var(--c-paper);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 20px 60px rgba(60,45,20,.10);
  outline: 1px solid var(--c-line); outline-offset: -14px;   /* inner hairline frame */
}
.nk-corner { position: absolute; width: 38px; height: 38px; border-color: var(--c-gold); border-style: solid; border-width: 0; }
.nk-tl { top: 22px; left: 22px; border-top-width: 1px; border-left-width: 1px; }
.nk-tr { top: 22px; right: 22px; border-top-width: 1px; border-right-width: 1px; }
.nk-bl { bottom: 22px; left: 22px; border-bottom-width: 1px; border-left-width: 1px; }
.nk-br { bottom: 22px; right: 22px; border-bottom-width: 1px; border-right-width: 1px; }

.nk-section { padding: clamp(2rem, 6vw, 3.5rem) 0; }
.nk-head { padding-top: clamp(1rem, 3vw, 2rem); }
.nk-head .nk-translit { margin-bottom: 2rem; }
.nk-head .nk-lead { margin-top: 1.5rem; }
.nk-center { text-align: center; }

/* ---------- Type ---------- */
.nk-bismillah { font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--c-gold-ink); margin: 0; }
.nk-translit { font-style: italic; color: var(--c-muted); margin: .4rem 0 0; font-size: 1.05rem; }
.nk-eyebrow { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .28em; font-size: .72rem; color: var(--c-muted); margin: .5rem 0; }
.nk-lead { font-size: clamp(1.15rem, 3vw, 1.35rem); line-height: 1.7; font-weight: 300; max-width: 32rem; margin: 1rem auto 0; }
.nk-lead-sm { font-size: 1.15rem; margin: -.5rem auto 1.75rem; }
.nk-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 4.5vw, 2.1rem); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1.25rem; }


/* Divider: hairline - diamond - hairline */
.nk-rule { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0 auto 1.5rem; max-width: 220px; }
.nk-rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold), transparent); }
.nk-rule i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--c-gold); }

/* ---------- Couple ---------- */
.nk-couple { display: grid; gap: 1.25rem; }
.nk-name { font-family: var(--f-script); font-size: clamp(3rem, 11vw, 4.4rem); line-height: 1.1; margin: 0; color: var(--c-ink); }
.nk-nick { font-family: var(--f-display); letter-spacing: .3em; text-transform: uppercase; font-size: .85rem; color: var(--c-gold-ink); margin: .1rem 0 0; }
.nk-parent { font-style: italic; color: var(--c-muted); font-size: 1.1rem; margin: .35rem 0 0; }
.nk-with { font-family: var(--f-display); letter-spacing: .3em; text-transform: uppercase; font-size: .8rem; color: var(--c-gold-ink); margin: .75rem 0; }
.nk-with::before, .nk-with::after { content: ""; display: inline-block; width: 2.5rem; height: 1px; background: var(--c-gold); vertical-align: middle; margin: 0 .75rem; }

/* ---------- Date block ---------- */
.nk-date { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(.75rem, 3vw, 1.5rem); max-width: 26rem; margin: 0 auto; }
.nk-date-side { font-family: var(--f-display); letter-spacing: .2em; text-transform: uppercase; font-size: clamp(.7rem, 2.4vw, .85rem); padding: .6rem 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.nk-date-day { font-family: var(--f-display); font-size: clamp(3.5rem, 12vw, 4.75rem); line-height: 1; color: var(--c-gold-ink); }
.nk-time { font-style: italic; font-size: 1.2rem; color: var(--c-muted); margin: .75rem 0 1.75rem; }
.theme-nikah .cd-num { font-family: var(--f-display); font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--c-ink); }
.theme-nikah .cd-label { font-family: var(--f-label); color: var(--c-muted); }
.theme-nikah .cd-unit + .cd-unit { border-left: 1px solid var(--c-line); padding-left: clamp(.75rem, 3vw, 2rem); }

/* ---------- Ayah ---------- */
.nk-ayah figure { margin: 0 auto; max-width: 34rem; padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1rem, 4vw, 2rem); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.nk-ayah blockquote { margin: 0; }
.nk-ayah-ar { font-size: clamp(1.35rem, 4vw, 1.75rem); line-height: 2.1; margin: 0; }
.nk-ayah-en { font-style: italic; font-weight: 300; font-size: clamp(1.05rem, 2.8vw, 1.2rem); line-height: 1.65; color: var(--c-ink); margin: .9rem 0 .5rem; }

/* ---------- Venue ---------- */
.nk-venue { display: flex; flex-direction: column; gap: .25rem; font-style: normal; font-size: 1.15rem; color: var(--c-muted); }
.nk-venue-name { font-family: var(--f-display); font-size: clamp(1.25rem, 3.5vw, 1.5rem); letter-spacing: .08em; color: var(--c-ink); }
.nk-map { margin: 1.5rem 0; aspect-ratio: 16 / 9; padding: 6px; border: 1px solid var(--c-line); background: #fff; }
@media (max-width: 639px) { .nk-map { aspect-ratio: 4 / 5; } }
.nk-map .map-iframe { filter: grayscale(.85) contrast(1.05); transition: filter .6s ease; }
.nk-map:hover .map-iframe, .nk-map:focus-within .map-iframe { filter: none; }

/* ---------- RSVP ---------- */
.theme-nikah .rsvp { text-align: left; }
.theme-nikah .field-input { border-width: 0 0 1px; background: transparent; padding-left: .25rem; }
.theme-nikah .field-input:focus { box-shadow: 0 1px 0 0 var(--c-focus); }
.theme-nikah select.field-input { background: var(--c-field-bg); border-width: 1px; }
.theme-nikah textarea.field-input { border-width: 1px; background: var(--c-field-bg); padding-left: 1rem; }
.theme-nikah .choice { font-size: 1.1rem; }
.theme-nikah .btn-primary:hover { background: #000; }
.theme-nikah .thanks-title { font-family: var(--f-script); font-size: 2.6rem; color: var(--c-gold-ink); }

/* ---------- Closing ---------- */
.nk-dua { font-size: clamp(1.3rem, 4vw, 1.7rem); line-height: 2; color: var(--c-gold-ink); margin: 0; }
.nk-families { font-style: italic; color: var(--c-muted); font-size: 1.1rem; line-height: 1.6; margin: .5rem 0 0; }