/* ============================================================
   Wedding invitation styles
   Customize the palette and typography here
   ============================================================ */
:root {
  /* Warm paper + terracotta palette — the whole site feels like one piece of paper */
  --cream:       #f7efe1;     /* main paper */
  --cream-soft:  #fbf5e8;     /* slightly lighter, for raised insets */
  --paper:       #ebe1cd;     /* darker tone for subtle accents */
  --paper-warm:  #ddd1b9;     /* warmer paper for borders */
  --gold:        #c5a878;     /* warm tan border accent */
  --gold-deep:   #7c4a35;     /* terracotta for accents + labels (darkened for legibility) */
  --gold-darker: #6b3a2c;     /* deeper terracotta */
  --ink:         #43230f;     /* deep terracotta-brown for body text (slightly darker) */
  --ink-soft:    #6b4230;     /* deeper terracotta for secondary text (darkened for legibility) */
  --serif:       'Cormorant Garamond', 'Garamond', serif;
  --sans:        'Inter', system-ui, sans-serif;
}

/* Farsi: swap both serif and sans to Noto Nastaliq Urdu — the flowing, slanted
   Nastaliq calligraphy used for Persian/Dari poetry. Far more expressive than a
   plain sans. Vazirmatn stays as the fallback for any glyphs Nastaliq lacks. */
html.lang-fa {
  --serif: 'Noto Nastaliq Urdu', 'Gulzar', 'Vazirmatn', serif;
  --sans:  'Noto Nastaliq Urdu', 'Vazirmatn', serif;
}

/* Nastaliq is a tall, steeply-slanted script whose letters hang well below the
   baseline and stack diagonally. It needs much more vertical room than a sans,
   and it BREAKS if you track it (letter-spacing severs the cursive joins). So in
   Farsi mode: open up the leading everywhere and kill all letter-spacing. */
html.lang-fa body { line-height: 2.2; }
html.lang-fa * { letter-spacing: 0 !important; }
/* Latin runs inside Farsi mode (English venue names, dates, the EN toggle) keep
   a Latin face — Nastaliq's Latin glyphs are an afterthought. */
html.lang-fa .lang-btn,
html.lang-fa .poem-english { font-family: 'Cormorant Garamond', 'Inter', serif; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: var(--sans);
  background-color: var(--cream);
  /* High-end paper card — four stacked layers, top to bottom:
       1. soft top highlight, like light catching a pressed sheet
       2. warm shadow pooling toward the lower edge, for card depth
       3. COARSE cotton fibres — low, anisotropic turbulence stretched into
          strands, the tactile "rag paper" feel
       4. fine grain — the original close-up tooth of the surface
     The two SVG tiles are URL-encoded turbulence; the gradients give the
     flat cream a gentle convex, hand-held quality. */
  background-image:
    radial-gradient(135% 85% at 50% -10%, rgba(255, 252, 245, 0.65) 0%, rgba(255, 252, 245, 0) 48%),
    radial-gradient(150% 120% at 50% 115%, rgba(120, 82, 52, 0.12) 0%, rgba(120, 82, 52, 0) 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.05' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.40  0 0 0 0 0.26  0 0 0 0 0.16  0 0 0 0.06 0'/></filter><rect width='340' height='340' filter='url(%23c)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.28  0 0 0 0 0.18  0 0 0 0.10 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: 100% 100%, 100% 100%, 340px 340px, 220px 220px;
  background-attachment: fixed, fixed, scroll, scroll;
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hidden { display: none !important; }

/* ============================================================
   STAGE 1 — Intro video (full-bleed)
   The video covers the entire viewport regardless of aspect ratio.
   UI elements (play btn / greeting / skip) overlay on top.
   ============================================================ */
.intro-stage {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  background: #1a1410;
  overflow: hidden;
  z-index: 30;
  transition: opacity 0.7s ease;     /* JS overrides this to 4000ms for the natural cross-fade */
}
.intro-stage.fade-out { opacity: 0; pointer-events: none; }

/* The video itself — fills the entire stage, cropping rather than letterboxing */
.intro-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  /* The footage has empty margin around the subject, so on wide screens it looks
     small. Zoom in past that margin so the subject fills the frame. Tunable:
     raise --intro-zoom to crop tighter, lower it to show more of the footage. */
  --intro-zoom: 1.4;
  transform: scale(var(--intro-zoom));
  transform-origin: center center;
  background: #1a1410;
  display: block;
}

/* Overlay layer — sits on top of the video, holds the play button + greeting.
   Subtle dark gradient at the bottom keeps the greeting text legible against
   any video content. */
.intro-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background:
    radial-gradient(circle at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 40%, transparent 70%),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 30%);
  transition: opacity 0.6s ease;
}

.intro-play-btn {
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255, 253, 248, 0.94); color: var(--gold-deep);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s, background 0.2s, opacity 0.3s;
}
.intro-play-btn:hover { transform: scale(1.06); background: var(--cream-soft); }
.intro-play-btn svg { margin-inline-start: 4px; }                 /* tiny optical nudge for the triangle */

/* Once playing, fade the overlay so only the video shows. Clicks still pass
   through to the overlay so tapping the video pauses/resumes. */
.intro-overlay.playing { opacity: 0; }
.intro-overlay.playing .intro-play-btn { pointer-events: none; }

/* Greeting + hint stacked at the bottom, white-on-dark with text-shadow for legibility. */
.intro-bottom {
  position: absolute; left: 0; right: 0; bottom: 40px;
  text-align: center; padding: 0 24px;
}
.intro-greeting {
  position: static; transform: none;
  margin: 0 auto 8px; opacity: 0;
  font-family: var(--serif); font-style: italic; font-size: 22px;
  color: #fffdf8; max-width: 80%;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  transition: opacity 1s 0.4s;
}
.env-greeting.show { opacity: 1; }
.intro-hint {
  margin: 0;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255, 253, 248, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Skip button — always visible, sits above the video with a subtle dark backdrop */
.intro-skip-btn {
  position: absolute; top: 18px;
  inset-inline-end: 18px;                                         /* auto-flips in RTL */
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255, 253, 248, 0.4);
  color: #fffdf8;
  font-family: var(--serif); font-size: 12px; letter-spacing: 2px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  z-index: 70; transition: background 0.2s;
}
.intro-skip-btn:hover { background: rgba(0, 0, 0, 0.55); }

/* If the video file is missing, dim the stage and morph the play button into a
   "Continue" CTA so the page still works. */
.intro-overlay.video-missing { background: var(--paper); }
.intro-overlay.video-missing ~ .intro-video,
.intro-stage.video-missing .intro-video { display: none; }
.intro-overlay.video-missing .intro-play-btn { background: var(--gold-deep); color: var(--cream-soft); width: auto; height: auto; padding: 14px 28px; border-radius: 999px; }
.intro-overlay.video-missing .intro-play-btn svg { display: none; }
.intro-overlay.video-missing .intro-play-btn::after {
  content: attr(aria-label);
  font-family: var(--serif); font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
}

@media (max-width: 600px) {
  .intro-play-btn { width: 76px; height: 76px; }
  .intro-greeting { font-size: 18px; }
  .intro-bottom { bottom: 32px; }
  .intro-skip-btn { font-size: 11px; padding: 6px 12px; top: 14px; }
  /* Portrait phones already crop the sides hard via object-fit:cover, so they
     need far less extra zoom than wide laptops. */
  .intro-video { --intro-zoom: 1.12; }
}

/* ============================================================
   STAGE 2 — Invitation
   ============================================================ */
#invitation { opacity: 0; transition: opacity 1s ease; }
#invitation.show { opacity: 1; }

/* ============================================================
   FLOWERS — botanical decorations scattered across sections.
   Idle float (gentle bob) + mouse parallax via CSS vars set by JS.
   ============================================================ */
.flower {
  position: absolute;
  pointer-events: none;
  user-select: none; -webkit-user-drag: none;
  z-index: 4;
  opacity: 0.92;
  transform: var(--base-transform, none) translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  animation: flower-drift 10s ease-in-out infinite;
}
.flower-behind { z-index: 0; opacity: 0.78; }
@keyframes flower-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(var(--drift-amp, 4px) * -1); }
}

@media (prefers-reduced-motion: reduce) {
  .flower { animation: none; }
}

section { padding: 4rem 1.5rem; max-width: 760px; margin: 0 auto; }
/* Extra top space so the floral branch can sit higher (over the photos) without overlapping the title */
.events-section { padding-top: 7rem; }

.section-title {
  font-family: var(--serif); font-size: 36px; font-weight: 400;
  text-align: center; margin: 0 0 6px;
}
.section-sub {
  text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--gold-deep); margin: 0 0 2.5rem;
}
.pretitle { font-size: 12.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 12px; }
.pretitle.small { font-size: 11.5px; margin-top: 18px; }
.overline { font-size: 12.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 12px; }

/* ============================================================
   HERO — wildflowers on continuous paper. No card boundary — the whole
   page is the paper, the hero is the first "scene" on it.
   ============================================================ */
/* Hero fills the entire viewport — on phone this is the only thing on screen.
   Everything inside is vertically centered, leaving negative space above and below. */
.hero {
  min-height: 100vh;
  padding: 2rem 1rem;
  display: flex; align-items: center; justify-content: center;
  max-width: none; margin: 0;
  overflow: hidden;   /* keep the tall hero flower from bleeding into the next section */
}

.hero-card {
  /* 3-column grid: [flower] [text] [empty mirror of the flower column].
     The two 1fr side columns are equal, so the centre (text) column is centred
     on the PAGE — independent of the flower's width — while the flower hugs the
     right edge of the left column, sitting immediately to the left of the text.
     (Phones override this back to a simple flex row — see the 760px block.) */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  width: 100%; max-width: 1180px;
  margin: 0 auto;
  column-gap: clamp(1rem, 2.5vw, 2.5rem);  /* equal gaps keep the text centred */
}

/* Flower is height-driven so it always covers near-top to near-bottom.
   Container width scales with viewport; image is taller than wide and gets
   cropped to a vertical strip via overflow:hidden when the column is narrower
   than the image's natural aspect at this height. */
/* Flower container reserves a tall column; image can overflow horizontally
   into the text column rather than being cropped vertically — full bouquet
   from daisies at top to trailing stems at bottom is always visible. */
.hero-card-flowers {
  grid-column: 1;
  justify-self: end;                /* hug the right edge of the left column, beside the text */
  flex: 0 0 auto;
  width: clamp(150px, 32vw, 420px);
  height: 88vh;
  max-height: 920px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
  /* NO overflow:hidden — let the image breathe horizontally if it needs to. */
}
.hero-card-flowers img {
  height: 100%;
  width: auto;
  display: block;
  max-width: none;
  user-select: none; -webkit-user-drag: none;
  object-position: center;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: hero-flower-float 12s ease-in-out infinite;
  will-change: transform;
}
@keyframes hero-flower-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card-flowers img { animation: none; }
}

.hero-card-content {
  /* Centre column of the hero grid. Capped so the column sizes to the text and
     the paragraph (Afghan card) wraps rather than stretching the column wide. */
  grid-column: 2;
  flex: 0 1 460px;
  max-width: 460px;
  min-width: 0;
  text-align: center;
  color: var(--ink);
  font-family: var(--serif);
  display: flex; flex-direction: column; justify-content: center;
  padding: 1rem 0;
  position: relative;
  z-index: 2;                       /* sits above the flower so any overlap reads cleanly */
}

.hero-bismillah {
  font-family: 'Amiri', 'Vazirmatn', serif;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--gold-deep);
  margin: 0 0 1.5rem;
  letter-spacing: 0;
  line-height: 1.6;
  /* Bismillah is always Arabic, regardless of language toggle */
  direction: rtl;
}

/* Nikkah page — gold calligraphy du'a image in place of the bismillah line.
   Sized larger than the bismillah text so it reads as the page's crown. */
.hero-dua {
  display: block;
  width: clamp(260px, 92%, 440px);
  max-width: 100%;
  height: auto;
  margin: 0 auto 2rem;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-intro {
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 2rem;
  color: var(--ink);
  max-width: 380px;
  margin-inline: auto;
}

.hero-names {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0 0 2.25rem;
  display: flex; flex-direction: column; align-items: center;
  line-height: 1.05;
}
.hero-name {
  font-size: clamp(28px, 5vw, 60px);
  letter-spacing: 0.1em;
  color: var(--ink);
}
.hero-amp {
  font-style: italic;
  font-size: clamp(18px, 3vw, 34px);
  letter-spacing: 0;
  margin: 0.35em 0;
  color: var(--ink);
}

.hero-date {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: clamp(12.5px, 1.5vw, 16px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--serif);
  margin: 0 0 2.25rem;
  color: var(--ink);
}

/* Small breath between the date block and the venue/address lines below it. */
.hero-date-gap { margin-top: 1.25rem; }

/* ============================================================
   Decorative date block — weekday / DD MONTH YYYY / time.
   Used in the hero, the Nikkah page, and event cards. Always Latin
   (dates render in English in both languages), so the date parts pin a
   Latin serif rather than inheriting the Farsi Nastaliq face.
   ============================================================ */
.date-orn {
  display: block;
  width: 86px; height: 12px;
  margin: 0 auto 0.7rem;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='12' viewBox='0 0 86 12'%3E%3Cg stroke='%23c5a878' stroke-width='1' fill='none'%3E%3Cline x1='2' y1='6' x2='33' y2='6'/%3E%3Cline x1='53' y1='6' x2='84' y2='6'/%3E%3C/g%3E%3Crect x='39' y='2' width='8' height='8' transform='rotate(45 43 6)' fill='%237c4a35'/%3E%3C/svg%3E");
}
.date-weekday,
.date-main,
.date-time {
  font-family: 'Cormorant Garamond', 'Inter', serif;
  color: var(--ink);
  text-transform: uppercase;
}
.date-weekday {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;               /* recentre text whose trailing letter-spacing pushes left */
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--gold);
}
.date-main {
  display: flex; align-items: center; justify-content: center; gap: 0.55em;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
  margin: 0.55rem 0 0.45rem;
}
.date-main::before,
.date-main::after {
  content: "\2740";                 /* ❀ floral ornament flanking the date */
  font-size: 0.5em;
  line-height: 1;
  letter-spacing: 0;
  color: var(--gold-deep);
}
.date-time {
  display: flex; align-items: center; justify-content: center; gap: 0.65em;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.date-time::before,
.date-time::after {
  content: "";
  width: clamp(16px, 3vw, 34px); height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* Hero scales the date block up; event cards keep the compact base sizes. */
.hero-date .date-weekday { font-size: clamp(13px, 1.6vw, 17px); letter-spacing: 0.34em; text-indent: 0.34em; padding-bottom: 0.55rem; }
.hero-date .date-main    { font-size: clamp(20px, 3vw, 32px); margin: 0.7rem 0 0.5rem; }
.hero-date .date-time    { font-size: clamp(13px, 1.6vw, 17px); }

/* Event card date block — compact, sits under the event name. */
.event-date-block {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 6px 0 2px;
}

.hero-reception {
  font-style: italic;
  font-size: clamp(13px, 1.6vw, 17px);
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Farsi: keep the layout in LTR so the flower stays on the left and text on the
   right — same positions as the English version. Individual Farsi text strings
   still render right-to-left within their boxes thanks to bidi handling. */
html.lang-fa .hero-card { direction: ltr; }
html.lang-fa .hero-name { letter-spacing: 0.04em; }
html.lang-fa .hero-amp  { font-style: normal; }
/* The FA hero-date holds Latin text (the English date + English venue names),
   so render the venue/address lines in a Latin face rather than Nastaliq.
   (The .date-* parts already pin their own Latin serif.) */
html.lang-fa .hero-date { font-family: 'Cormorant Garamond', 'Inter', serif; }

/* ---- Hero language swap: EN card by default, Afghan ceremony card in FA mode ---- */
.hero-card--fa { display: none; }
html.lang-fa .hero-card--en { display: none; }
html.lang-fa .hero-card--fa { display: grid; }

/* ---- Afghan details section (between hero and poem) ----
   Hidden everywhere by default. Only on phones, in FA mode, it appears and takes
   the date/venue, welcome line, and hosts that are too cramped inside the hero. */
.afghan-details { display: none; }
.afghan-details-inner {
  max-width: 460px; margin: 0 auto; padding: 0 28px;
  text-align: center; color: var(--ink);
}
.afghan-details .hero-date     { margin: 0 0 1.6rem; }
.afghan-details .afghan-welcome { margin: 0 0 1.6rem; }
.afghan-details .afghan-hosts   { margin: 0; }

@media (max-width: 760px) {
  html.lang-fa .afghan-details { display: block; padding: 2.25rem 0 1.5rem; }
  /* moved out of the hero on phones — show them only in the section above */
  html.lang-fa .hero-card--fa .hero-date,
  html.lang-fa .hero-card--fa .afghan-welcome,
  html.lang-fa .hero-card--fa .afghan-hosts { display: none; }
}

/* Afghan ceremony hero — the content column always reads RTL even though the
   card row stays LTR (flower left, text right) like the English version. */
.afghan-content { direction: rtl; font-family: 'Noto Nastaliq Urdu', 'Gulzar', serif; }

.afghan-invite {
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 2.4;
  margin: 0 0 1.75rem;
  color: var(--ink);
  max-width: 420px; margin-inline: auto;
}

/* The couple's names lifted out as their own larger, expressive Nastaliq line —
   the centrepiece of the invitation sentence. */
.afghan-names {
  display: block;
  margin: 0.45rem 0;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.85;
  font-weight: 500;
  color: var(--gold-deep);
}

.afghan-couplet {
  display: flex; flex-direction: column; gap: 14px;
  font-family: 'Noto Nastaliq Urdu', 'Gulzar', serif;
  font-size: clamp(16px, 1.9vw, 22px);
  line-height: 2.4;
  color: var(--gold-deep);
  margin: 0 0 2rem;
}

.afghan-welcome {
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 2;
  color: var(--ink);
  margin: 0 0 1.75rem;
  max-width: 420px; margin-inline: auto;
}

.afghan-hosts {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin: 0 0 1.75rem;
}
.afghan-hosts-label {
  font-size: 13px; letter-spacing: 0.06em;
  color: var(--gold-deep);
}
.afghan-hosts-names {
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.9;
  color: var(--ink-soft);
}

/* ── Blessing poem (section 2) — bilingual, on the shared paper ─────────────── */
.poem-section {
  position: relative;
  /* less bottom padding so the divider spray can sit low and straddle the next section */
  padding: clamp(72px, 12vw, 160px) 24px clamp(24px, 4vw, 40px);
  display: flex; justify-content: center;
  /* no overflow clip — the divider is allowed to bleed down into the next section */
}
/* Narrower than the flowers' inner reach so the text keeps a clear center channel */
.poem-inner { position: relative; z-index: 2; width: 100%; max-width: 600px; text-align: center; }

.poem-ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 0 auto; width: min(260px, 65%); color: var(--gold);
}
.poem-ornament--bottom { margin-top: 40px; }
.poem-ornament .line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 55%, currentColor 100%);
  opacity: 0.55;
}
.poem-ornament .line.r { transform: scaleX(-1); }
.poem-ornament .diamond { width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; opacity: 0.8; flex: none; }
.poem-ornament .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; flex: none; }

.poem-eyebrow {
  margin: 22px 0 0; font-size: clamp(12px, 1.4vw, 14px); font-weight: 400;
  letter-spacing: 0.35em; color: var(--gold-deep);
  font-family: var(--serif); text-transform: uppercase;
}
/* Persian eyebrow: drop the wide tracking/uppercase that breaks Arabic-script shaping */
html.lang-fa .poem-eyebrow { letter-spacing: 0.06em; text-transform: none; }

.poem { margin: 36px auto 0; max-width: 660px; }
.poem-beyt { margin-top: 28px; }
.poem-beyt:first-child { margin-top: 0; }
.poem-farsi {
  margin: 0;
  font-family: 'Noto Nastaliq Urdu', 'Gulzar', 'Amiri', serif; font-weight: 400; line-height: 2.1;
  font-size: clamp(22px, 3.6vw, 34px); color: var(--ink);
}
.poem-english {
  direction: ltr; margin: 6px 0 0;
  /* keep the serif italic even in FA mode (Vazirmatn has no italic) */
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: clamp(15px, 2vw, 20px); line-height: 1.5;
  color: var(--ink-soft); letter-spacing: 0.01em;
}

/* Horizontal floral spray acting as a section breaker. Sits centered just under
   the poem, then a negative bottom margin lets it straddle the boundary and overlap
   a little into the section below. */
.poem-divider {
  display: block;
  width: min(88vw, 600px);
  height: auto;
  /* pulled up tight under the text, and a stronger negative below to bring the
     next section up and kill the white gap */
  margin: clamp(-28px, -3vw, -16px) auto clamp(-84px, -7.5vw, -48px);
  position: relative; z-index: 2;
  pointer-events: none;
  transform: scaleX(-1);   /* flip horizontally to balance the visual weight */
  filter: contrast(1.08) saturate(1.06);
}
@media (max-width: 560px) {
  /* phone: keep the divider comfortably wide but a touch less overlap */
  .poem-divider { width: 92vw; margin-bottom: clamp(-72px, -13.5vw, -42px); }
}

/* Mobile — unchanged from before: simple flex row, flower left + text beside it
   (text NOT page-centred here, by request). Tighter spacing; flower stays tall
   via the overflow crop. Reverts the desktop 3-column grid back to a flex row. */
@media (max-width: 760px) {
  .hero { padding: 1rem 0.5rem; }
  .hero-card {
    display: flex; align-items: stretch; justify-content: center;
    grid-template-columns: none; column-gap: 0; gap: 0.5rem;
  }
  /* Re-assert the language swap. The .hero-card{display:flex} rule above has the
     same specificity as .hero-card--fa{display:none} but comes later in the
     source, so without this it would un-hide the inactive card (showing BOTH the
     English and Afghan cards at once). These rules come after it and win. */
  .hero-card--fa            { display: none; }
  html.lang-fa .hero-card--en { display: none; }
  html.lang-fa .hero-card--fa { display: flex; }
  .hero-card-flowers  { grid-column: auto; justify-self: auto; height: 92vh; }
  .hero-card-content  { grid-column: auto; max-width: none; padding: 0.5rem 0.5rem 0.5rem 0; }
  .hero-intro    { margin-bottom: 1.25rem; max-width: none; line-height: 1.4; }
  .hero-names    { margin-bottom: 1.25rem; }
  .hero-date     { margin-bottom: 1.25rem; }
}

/* NIKKAH landing video — simple centered player, hidden until a file exists. */
.nikkah-video-section { padding-top: 0; padding-bottom: 5rem; text-align: center; }
.nikkah-video-section[hidden] { display: none; }
.nikkah-video {
  width: 100%; max-width: 640px; border-radius: 8px; background: #000;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.3);
}

/* VIDEO */
.video-section { padding-top: 2rem; }
.video-shell { max-width: 640px; margin: 0 auto; }
.video-frame {
  position: relative; background: #000; border-radius: 8px;
  aspect-ratio: 16/9; overflow: hidden;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.3);
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25); cursor: pointer;
  transition: opacity 0.3s;
}
.video-overlay.hidden { opacity: 0; pointer-events: none; }
.play-btn {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.95); border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-deep); cursor: pointer;
  transition: transform 0.2s;
}
.play-btn:hover { transform: scale(1.08); }
.video-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: rgba(255,255,255,0.15);
}
.video-progress-fill {
  height: 100%; background: var(--gold);
  width: 0%; transition: width 0.2s ease;
}
.segment-pips {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.pip { width: 24px; height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; transition: background 0.3s; }
.pip.done { background: var(--gold); }
.pip.active { background: var(--cream); }
.video-caption {
  text-align: center; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold-deep); margin-top: 16px;
}

/* PERSONAL MESSAGE */
.personal { padding: 4rem 1.5rem; }
.personal-inner {
  background: var(--cream-soft); border: 0.5px solid var(--gold);
  padding: 2.5rem 2rem; text-align: center; max-width: 560px; margin: 0 auto;
  border-radius: 4px;
}
.personal-msg {
  font-family: var(--serif); font-style: italic; font-size: 20px;
  line-height: 1.7; color: var(--ink); margin: 0;
}

/* STORY */
.story-text {
  font-family: var(--serif); font-size: 17px; line-height: 1.9;
  text-align: center; max-width: 540px; margin: 0 auto;
}
.story-text::first-letter {
  font-size: 42px; color: var(--gold-deep); font-style: italic; padding-right: 6px;
}
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 2.5rem;
}
.gallery-img {
  aspect-ratio: 3/4; background: var(--paper); border-radius: 4px;
  overflow: hidden; position: relative;
}
.gallery-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-img { cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease; }
.gallery-img:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(74, 40, 24, .18); }

/* Photo lightbox */
.photo-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 4vw; background: rgba(40, 22, 12, .82);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
  cursor: zoom-out;
}
.photo-lightbox.open { opacity: 1; visibility: visible; }
.photo-lightbox-img {
  max-width: 92vw; max-height: 88vh; object-fit: contain;
  border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  transform: scale(.96); transition: transform .3s ease; cursor: default;
}
.photo-lightbox.open .photo-lightbox-img { transform: scale(1); }
.photo-lightbox-close {
  position: absolute; top: 18px; right: 22px;
  background: transparent; border: none; color: #fff;
  font-size: 38px; line-height: 1; cursor: pointer; padding: 4px 10px;
  opacity: .85; transition: opacity .15s;
}
.photo-lightbox-close:hover { opacity: 1; }
.gallery-img.placeholder::after {
  content: "Photo"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-deep); font-family: var(--serif); font-style: italic; font-size: 13px;
}

/* SCHEDULE */
.schedule { list-style: none; padding: 0; margin: 0 auto; max-width: 480px; }
.schedule li {
  display: grid; grid-template-columns: 100px 1fr; gap: 20px;
  padding: 16px 0; border-bottom: 0.5px dashed var(--gold);
  align-items: baseline;
}
.schedule li:last-child { border-bottom: none; }
.schedule .time { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--gold-deep); }
.schedule .event { display: flex; flex-direction: column; gap: 2px; }
.schedule .event strong { font-weight: 500; font-size: 15px; }
.schedule .event em { font-style: normal; font-size: 13px; color: var(--ink-soft); }

/* VENUE */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.info-card {
  background: var(--cream-soft); border: 0.5px solid var(--gold);
  padding: 1.25rem 1.5rem; border-radius: 4px;
}
.info-card h3 { font-family: var(--serif); font-size: 19px; margin: 0 0 10px; font-weight: 500; color: var(--gold-deep); }
.info-card p { font-size: 15px; margin: 4px 0; color: var(--ink-soft); }
.info-card p strong { color: var(--ink); font-weight: 500; }

/* HOW TO GET THERE — one Google-map card per location */
.maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 2.5rem;
}
/* a guest invited to a single location gets one centered, not-stretched map */
.maps-grid--single { max-width: 460px; margin-inline: auto; }
.map-card {
  background: var(--cream-soft); border: 0.5px solid var(--gold);
  border-radius: 6px; padding: 1.25rem 1.25rem 1rem;
  text-align: center; display: flex; flex-direction: column;
}
.map-venue {
  font-family: var(--serif); font-size: 19px; font-weight: 400;
  color: var(--gold-deep); margin: 0 0 4px;
}
.map-address { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; }
.map-frame {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 4px; overflow: hidden;
  border: 0.5px solid var(--paper-warm); background: var(--paper);
}
.map-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  /* warm + mute Google's bright colours so the map sits in the parchment palette */
  filter: sepia(0.34) saturate(0.82) hue-rotate(-8deg) brightness(1.03) contrast(0.95);
  transition: filter 0.5s ease;
}
/* a soft cream wash, multiplied over the map for a hand-tinted, paper feel.
   pointer-events:none keeps the map fully interactive underneath. */
.map-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--cream); mix-blend-mode: multiply; opacity: 0.22;
  transition: opacity 0.5s ease;
}
/* reveal the true map colours when the guest actually engages with it */
.map-frame:hover iframe { filter: none; }
.map-frame:hover::after { opacity: 0; }
.map-link {
  align-self: center; margin-top: 14px;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 0.5px solid var(--gold); padding-bottom: 2px;
}
.map-link:hover { color: var(--gold-darker); }

/* ============================================================
   RSVP — paper-stationery feel. No boxy borders, just soft
   bottom underlines, italic serif labels, pill buttons.
   ============================================================ */
.rsvp-form { max-width: 540px; margin: 0 auto; }
.form-row { margin-bottom: 1.75rem; }
.form-row label {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  color: var(--gold-deep);
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row textarea {
  width: 100%;
  padding: 9px 2px;
  font-family: var(--serif);
  font-size: 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--paper-warm);
  border-radius: 0;
  color: var(--ink);
  transition: border-color 0.2s;
  outline: none;
}
.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--ink-soft); opacity: 0.45; font-style: italic;
}
.form-row input:focus,
.form-row textarea:focus {
  border-bottom-color: var(--gold-deep);
}
.form-row textarea {
  resize: vertical;
  min-height: 60px;
  padding: 10px 2px;
  line-height: 1.5;
}

.attend-choice {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 10px;
}
.attend-btn {
  padding: 14px 20px;
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  cursor: pointer;
  background: transparent;
  border: 0.5px solid var(--paper-warm);
  border-radius: 999px;
  color: var(--ink);
  transition: all 0.25s ease;
}
.attend-btn:hover {
  background: var(--paper);
  border-color: var(--gold-deep);
}
.attend-btn.selected {
  background: var(--gold-deep);
  color: var(--cream-soft);
  border-color: var(--gold-deep);
  box-shadow: 0 6px 18px -10px rgba(107, 58, 44, 0.45);
}

.submit-btn {
  width: 100%;
  padding: 17px 32px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: var(--gold-deep);
  color: var(--cream-soft);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 2rem;
  transition: background 0.25s, transform 0.25s;
  box-shadow: 0 10px 26px -14px rgba(107, 58, 44, 0.5);
}
.submit-btn:hover {
  background: var(--gold-darker);
  transform: translateY(-1px);
}

.thanks { display: none; text-align: center; padding: 3rem 1rem; }
.thanks.show { display: block; animation: fadeUp 0.8s ease; }
.thanks-line { font-family: var(--serif); font-size: 38px; color: var(--gold-deep); margin: 0 0 12px; }
.thanks-sub { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-soft); margin: 0; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* FOOTER */
.footer { text-align: center; padding: 3rem 1rem 2.5rem; border-top: 0.5px solid var(--paper-warm); margin-top: 2rem; position: relative; }
.monogram-small { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--gold-deep); margin: 0 0 10px; }
.footer-line { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; }
.footer-credit {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  opacity: 0.92;
  margin: 0;
  letter-spacing: 0.02em;
}

/* ============================================================
   Scroll reveal — GSAP handles the animation; this is the start state
   ============================================================ */
.reveal { opacity: 0; transform: translateY(40px); }

/* ============================================================
   EVENTS — per-guest event cards (Nikkah / Reception / ...)
   ============================================================ */
.events-list {
  display: grid; gap: 18px;
  max-width: 580px; margin: 0 auto;
}
.event-card {
  background: var(--cream-soft); border: 0.5px solid var(--gold);
  border-radius: 4px; padding: 1.75rem 1.75rem 1.5rem;
  text-align: center; position: relative;
}
.event-card::before {
  content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 0.5px; background: var(--gold);
}
.event-card-header { margin-bottom: 14px; }
.event-name {
  font-family: var(--serif); font-size: 26px; font-weight: 400;
  margin: 8px 0 6px; color: var(--ink);
}
.event-date, .event-time {
  font-family: var(--serif); font-style: italic; color: var(--ink-soft);
  font-size: 15px; margin: 2px 0;
}
.event-time { color: var(--gold-deep); font-size: 14px; }
.event-body p { margin: 6px 0; font-size: 15px; color: var(--ink-soft); }
.event-venue { font-size: 15px !important; color: var(--ink) !important; margin-top: 12px !important; }
.event-description { font-style: italic; max-width: 420px; margin: 10px auto !important; }
.event-dress {
  margin-top: 14px !important; font-size: 13px !important; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.dress-label { color: var(--gold-deep); margin-right: 6px; }

.empty-events { text-align: center; color: var(--ink-soft); font-style: italic; }

/* ============================================================
   RSVP per-event blocks — blend into the paper, separated only
   by a dashed rule and breathing room.
   ============================================================ */
.event-rsvp-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2rem 0 1.5rem;
  margin-bottom: 0;
  border-bottom: 0.5px dashed var(--paper-warm);
}
.event-rsvp-block:last-child {
  border-bottom: none;
}
.rsvp-event-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 26px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--paper-warm);
  color: var(--gold-deep);
  text-align: center;
  letter-spacing: 0.04em;
}

.attendees-label { margin-bottom: 14px !important; }
.attendees-label .hint {
  text-transform: none; letter-spacing: 0;
  font-size: 13px; color: var(--ink-soft); margin-left: 6px;
  font-style: italic;
}
.attendees-list { display: flex; flex-direction: column; gap: 16px; }

.attendee-row {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 14px;
  align-items: end;
}
.attendee-row input,
.attendee-row select {
  padding: 9px 2px;
  font-family: var(--serif);
  font-size: 15px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--paper-warm);
  border-radius: 0;
  color: var(--ink);
  transition: border-color 0.2s;
  width: 100%;
  outline: none;
}
.attendee-row input::placeholder {
  color: var(--ink-soft); opacity: 0.4; font-style: italic;
}
.attendee-row input:focus,
.attendee-row select:focus {
  border-bottom-color: var(--gold-deep);
}
.attendee-row select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%238e5a44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px;
  padding-right: 22px;
  cursor: pointer;
}

.att-remove {
  background: transparent;
  border: 0.5px solid var(--paper-warm);
  border-radius: 50%;
  width: 30px; height: 30px;
  color: var(--gold-deep);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
  margin-bottom: 2px;
}
.att-remove:hover {
  background: var(--gold-deep);
  color: var(--cream-soft);
  border-color: var(--gold-deep);
}

.add-attendee {
  background: transparent;
  border: 0.5px dashed var(--paper-warm);
  color: var(--gold-deep);
  padding: 12px 22px;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 18px;
  transition: all 0.25s;
  width: 100%;
  letter-spacing: 0.04em;
}
.add-attendee:hover {
  background: var(--paper);
  border-style: solid;
  border-color: var(--gold-deep);
}

/* ============================================================
   FLOATING RSVP button — pill, bottom-right, appears once invitation opens
   ============================================================ */
.floating-rsvp {
  position: fixed; bottom: 24px;
  inset-inline-end: 24px;                       /* auto-flips in RTL */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: var(--gold-deep); color: var(--cream-soft);
  font-family: var(--serif); font-size: 13px; letter-spacing: 3px;
  text-transform: uppercase;
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity 0.4s, transform 0.4s, background 0.2s;
  z-index: 50;
}
html.lang-fa .floating-rsvp { letter-spacing: 1px; }
html.lang-fa .floating-rsvp svg { transform: scaleX(-1); }

/* ============================================================
   LANGUAGE TOGGLE — top-end pill, EN | فا
   ============================================================ */
.lang-toggle {
  position: fixed; top: 16px;
  right: 16px;                                  /* physical right — stays put in both EN and FA (no RTL flip) */
  display: inline-flex; gap: 2px;
  background: var(--cream-soft); border: 0.5px solid var(--gold);
  border-radius: 999px; padding: 3px;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.15);
  z-index: 60;
}
.lang-btn {
  appearance: none; border: none; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
  letter-spacing: 0.5px; min-width: 36px;
  transition: background 0.2s, color 0.2s;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.active {
  background: var(--gold-deep); color: var(--cream-soft);
}
html.lang-fa .lang-btn[data-lang="fa"] { font-size: 13px; }
.floating-rsvp.visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.floating-rsvp.faded {
  opacity: 0.0; pointer-events: none; transform: translateY(8px);
}
.floating-rsvp:hover { background: var(--gold-darker); }
.floating-rsvp svg { color: var(--cream-soft); }
.floating-rsvp-label { line-height: 1; }

@media (max-width: 480px) {
  .floating-rsvp {
    bottom: 16px; right: 16px;
    padding: 12px 18px; font-size: 12px;
  }
}

/* Mobile tuning */
@media (max-width: 600px) {
  section { padding: 3rem 1.25rem; }
  .section-title { font-size: 28px; }
  /* Phone: show just two photos side by side in a single row (hide the 3rd). */
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery-img:nth-child(n+3) { display: none; }
  .attendee-row {
    grid-template-columns: 1fr 32px;
    row-gap: 6px;
  }
  .attendee-row .att-remove  { justify-self: end; }
  .event-name { font-size: 22px; }
}