/* ==========================================================================
   Niel & Karla — Digital Wedding Invitation
   ========================================================================== */

/* "Exact" faces were subset directly from the source .pdf — pixel-identical
   to the original artwork for every phrase already in the design. The two
   Arabic/caps "Exact" files are NOT loaded: they were re-subset without a
   cmap (HSNGolden-exact.ttf has no cmap table at all) / without post+GSUB
   (Kiona-exact.ttf), which most desktop engines silently reject and fall
   back from — but iOS Safari accepts the malformed file and maps its
   glyphs incorrectly, which is what was splitting Arabic letters from
   their joined forms and eating diacritics/letters on iPhone. The "Full"
   faces are the same design, properly built, and are what actually
   rendered on desktop already (the browser was silently falling back to
   them there). Using them directly keeps the exact same look everywhere. */
@font-face {
  font-family: 'KunstlerScriptFull';
  src: url('../assets/fonts/KunstlerScript-full.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'HSNGoldenFull';
  src: url('../assets/fonts/HSNGolden-full.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'KionaFull';
  src: url('../assets/fonts/Kiona-Regular-full.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* palette — pixel-sampled directly from the source .ai/.pdf artwork.
     Only two greens exist in the original design: the envelope's moss
     green (#86813f) and the sage green of the photo/details section
     (#abbc84). No derived tints — every green below traces to one of
     the two exact source values. */
  --olive-deep:   #86813f;
  --olive:        #86813f;
  --olive-soft:   #86813f;
  --sage:         #abbc84;
  --sage-deep:    #abbc84;
  --sage-text:    #f4f7ec;
  --cream:        #f6f4e9;
  --cream-deep:   #efedde;
  --blush:        #e7b9b0;
  --blush-soft:   #f3d9d3;
  --ink:          #4a4a2e;
  --ink-soft:     #6b6b47;
  --white-lace:   #fdfcf7;

  --font-script:  'KunstlerScriptFull', 'Alex Brush', cursive;
  --font-arabic:  'HSNGoldenFull', 'Amiri', serif;
  --font-caps:    'Jost', sans-serif;
  --font-caps-orig: 'KionaFull', 'Jost', sans-serif;
  --font-body:    'Cormorant Garamond', 'Amiri', serif;
  --font-date:    'Antic Didone', serif;

  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 0.8, 0.28, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.locked { overflow: hidden; height: 100%; }

img { -webkit-user-drag: none; user-select: none; }

/* ==========================================================================
   SCREEN 1 — ENVELOPE
   ========================================================================== */

.envelope-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 1.1s var(--ease-lux), visibility 1.1s;
}

.envelope-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/tulip-painting.jpg');
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.08);
  filter: saturate(0.96) brightness(1.03);
}

/* Scene 0 — the real opening film, full-screen portrait, plays once.
   Dissolves into the envelope scene beneath it when it ends. */
.intro-video {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
  opacity: 1;
  filter: blur(0);
  transition: opacity 2.2s ease-in-out, filter 2.2s ease-in-out;
}
.intro-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "Tap for Sound" — reuses the same ring+caps-text language as the
   envelope's own tap cue, so it reads as one visual system. Hidden the
   moment the guest taps (audio unlocks) or the film ends. */
.video-sound-cue {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.video-sound-cue.is-hidden { opacity: 0; }

/* Whitelisted (not :not()) so the video stays fully visible before the
   sequence script has even run its first tick — no flash on load. */
.envelope-screen[data-stage="envelope"] .intro-video,
.envelope-screen[data-stage="text"] .intro-video,
.envelope-screen[data-stage="opening"] .intro-video,
.envelope-screen[data-stage="swans"] .intro-video,
.envelope-screen[data-stage="card"] .intro-video,
.envelope-screen[data-stage="ready"] .intro-video {
  opacity: 0;
  filter: blur(20px);
  pointer-events: none;
}

.envelope-scene {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  padding: 0 24px;
  transform: translateY(-2vh);
}

/* "Niel & Karla" — present from the start, in the same connected script
   used for the couple's names throughout the invitation. */
.envelope-title {
  font-family: var(--font-script);
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1.35;
  color: var(--white-lace);
  text-shadow: 0 2px 16px rgba(40,38,15,0.4);
  margin: 0 0 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.3s var(--ease-soft), transform 1.3s var(--ease-soft);
}
.envelope-title .amp { font-size: 0.72em; opacity: 0.85; margin: 0 4px; }
.envelope-screen[data-stage="envelope"] .envelope-title,
.envelope-screen[data-stage="text"] .envelope-title,
.envelope-screen[data-stage="opening"] .envelope-title,
.envelope-screen[data-stage="swans"] .envelope-title,
.envelope-screen[data-stage="card"] .envelope-title,
.envelope-screen[data-stage="ready"] .envelope-title {
  opacity: 1;
  transform: translateY(0);
}

.envelope-stage {
  position: relative;
  width: min(72vw, 300px);
  aspect-ratio: 1 / 1.3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.3s var(--ease-soft), transform 1.3s var(--ease-soft);
}
.envelope-screen[data-stage="envelope"] .envelope-stage,
.envelope-screen[data-stage="text"] .envelope-stage,
.envelope-screen[data-stage="opening"] .envelope-stage,
.envelope-screen[data-stage="swans"] .envelope-stage,
.envelope-screen[data-stage="card"] .envelope-stage,
.envelope-screen[data-stage="ready"] .envelope-stage {
  opacity: 1;
  transform: translateY(0);
}

/* card group: heart + swans, hidden until the envelope has opened */
.card-group {
  position: absolute;
  bottom: 30%;
  left: 50%;
  width: 74%;
  transform: translateX(-50%) translateY(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.lace-wrap {
  position: relative;
  width: 68%;
  filter: drop-shadow(0 10px 18px rgba(40,35,10,0.28));
  opacity: 0;
  transform: scale(0.85) translateY(10px);
  transition: opacity 1s var(--ease-lux), transform 1s var(--ease-lux);
}
.lace-heart { width: 100%; display: block; }
/* Only the Ar-Rum verse fragment lives on the heart now -- no monogram. */
.heart-verse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74%;
  direction: rtl;
  unicode-bidi: isolate;
  font-family: var(--font-arabic);
  font-size: clamp(11px, 3.1vw, 14px);
  line-height: 1.6;
  color: var(--ink);
  text-align: center;
  white-space: normal;
}

/* swans: split in half from the real artwork, enter from left & right */
.swans-wrap {
  position: relative;
  width: 100%;
  margin-top: -8%;
  display: flex;
  filter: drop-shadow(0 8px 14px rgba(40,35,10,0.22));
}
.swan-half { width: 50%; display: block; }
.swan-half--left {
  opacity: 0;
  transform: translateX(-115%);
  transition: opacity 0.7s ease, transform 1.7s var(--ease-lux);
}
.swan-half--right {
  opacity: 0;
  transform: translateX(115%);
  transition: opacity 0.7s ease, transform 1.7s var(--ease-lux);
}
.swan-names {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin-top: 4px;
  font-family: var(--font-script);
  line-height: 1.3;
  font-size: clamp(33px, 3.8vw, 36px);
  color: var(--white-lace);
  text-shadow: 0 1px 6px rgba(30,28,10,0.4);
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* stage: swans have entered and met at centre */
.envelope-screen[data-stage="swans"] .swan-half,
.envelope-screen[data-stage="card"] .swan-half,
.envelope-screen[data-stage="ready"] .swan-half {
  opacity: 1;
  transform: translateX(0);
}
.envelope-screen[data-stage="swans"] .swan-names,
.envelope-screen[data-stage="card"] .swan-names,
.envelope-screen[data-stage="ready"] .swan-names { opacity: 1; }

/* stage: the heart/card emerges from behind the swans */
.envelope-screen[data-stage="card"] .lace-wrap,
.envelope-screen[data-stage="ready"] .lace-wrap {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.envelope-img {
  position: relative;
  width: 100%;
  display: block;
  filter: drop-shadow(0 22px 30px rgba(30,28,10,0.35));
}
.envelope-open { position: absolute; z-index: 1; opacity: 0; transition: opacity 1.3s ease 0.25s; }
.envelope-closed {
  position: relative;
  z-index: 3;
  transform-origin: 50% 8%;
  transition: transform 1.9s var(--ease-lux), opacity 1.1s ease 0.5s;
  backface-visibility: hidden;
}

.envelope-caption {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  direction: rtl;
  unicode-bidi: isolate;
  font-family: var(--font-arabic);
  font-size: clamp(15px, 4.6vw, 19px);
  color: var(--white-lace);
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(30,28,10,0.4);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-soft);
}
.envelope-screen[data-stage="text"] .envelope-caption {
  opacity: 1;
  transform: translateY(0);
}

/* stage: envelope opens — flap lifts back slowly, pocket fades in beneath */
.envelope-screen[data-stage="opening"] .envelope-closed,
.envelope-screen[data-stage="swans"] .envelope-closed,
.envelope-screen[data-stage="card"] .envelope-closed,
.envelope-screen[data-stage="ready"] .envelope-closed {
  transform: rotateX(-112deg) translateY(-3%);
  opacity: 0;
}
.envelope-screen[data-stage="opening"] .envelope-open,
.envelope-screen[data-stage="swans"] .envelope-open,
.envelope-screen[data-stage="card"] .envelope-open,
.envelope-screen[data-stage="ready"] .envelope-open { opacity: 1; }
.envelope-screen[data-stage="opening"] .envelope-caption,
.envelope-screen[data-stage="swans"] .envelope-caption,
.envelope-screen[data-stage="card"] .envelope-caption,
.envelope-screen[data-stage="ready"] .envelope-caption { opacity: 0; }

/* stage: ready — whole composition breathes with one elegant shake + tap cue */
.envelope-screen[data-stage="ready"] .envelope-scene {
  animation: composeShake 1.8s ease-in-out 0.1s 1;
}

.tap-cue {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 1s ease 1.1s;
  pointer-events: none;
}
.envelope-screen[data-stage="ready"] .tap-cue { opacity: 1; }
.tap-ring {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white-lace);
  box-shadow: 0 0 0 0 rgba(253,252,247,0.5);
  animation: ringPulse 2.2s ease-out infinite;
}
.tap-text {
  font-family: var(--font-caps);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--white-lace);
  text-shadow: 0 1px 8px rgba(30,28,10,0.4);
}

.envelope-screen.opening-out .envelope-scene { transform: translateY(-58%) scale(1.05); transition: transform 1.1s var(--ease-lux); }
.envelope-screen.opening-out .tap-cue { opacity: 0; transition: opacity 0.4s ease; }

.envelope-screen.leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.1s var(--ease-lux), visibility 1.1s;
}

.envelope-screen.done { display: none; }

@keyframes composeShake {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(-1.6deg); }
  24% { transform: rotate(1.4deg); }
  36% { transform: rotate(-1deg); }
  48% { transform: rotate(0.8deg); }
  60%, 100% { transform: rotate(0deg); }
}
@keyframes ringPulse {
  0% { box-shadow: 0 0 0 0 rgba(253,252,247,0.55); }
  70% { box-shadow: 0 0 0 14px rgba(253,252,247,0); }
  100% { box-shadow: 0 0 0 0 rgba(253,252,247,0); }
}

/* ==========================================================================
   SCREEN 2 — INVITATION
   ========================================================================== */

.invitation { position: relative; z-index: 1; }
.invitation[aria-hidden="true"] { visibility: hidden; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

.section {
  position: relative;
  padding: 96px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Not overflow:hidden — a section's height is auto/content-driven, so
     this never clips normal text, but it was clipping Arabic diacritics
     that render slightly outside the font's tight line box on iOS. Body
     already clips horizontal overflow (below), so nothing bleeds sideways. */
  overflow: visible;
}

.kicker {
  font-family: var(--font-caps);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--ink-soft);
  margin: 0;
  overflow-wrap: break-word;
  max-width: 100%;
}
.kicker--light { color: var(--sage-text); }

.eyebrow {
  display: block;
  font-family: var(--font-caps);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--olive-soft);
  margin-bottom: 10px;
}

/* ---------- reveal-on-scroll base ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal-scale] {
  opacity: 0;
  transform: scale(0.86) translateY(16px);
  transition: opacity 1.1s var(--ease-soft), transform 1.1s var(--ease-soft);
}
[data-reveal-scale].is-visible { opacity: 1; transform: scale(1) translateY(0); }

/* ---------- hero / necklace ---------- */
.section--hero {
  background: var(--cream);
  padding-top: 64px;
  gap: 6px;
}

.necklace-wrap { width: min(84%, 340px); margin-bottom: 46px; }
.necklace-img { width: 100%; display: block; filter: drop-shadow(0 18px 20px rgba(90,70,50,0.18)); }

.bismillah { margin: 12px 0 18px; }
.arabic-lg {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: var(--font-arabic);
  font-size: clamp(30px, 9vw, 42px);
  color: var(--sage-deep);
  margin: 0;
  line-height: 1.5;
}

.intro-lines { margin-bottom: 30px; }
.intro-lines .kicker { color: var(--ink-soft); font-family: var(--font-caps-orig); }

.welcome-block { margin-bottom: 6px; }
.welcome-title {
  font-family: var(--font-caps-orig);
  font-weight: 400;
  font-size: clamp(24px, 6vw, 30px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin: 0 0 6px;
}
.welcome-sub {
  font-family: var(--font-caps-orig);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.names-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18px;
  min-height: 190px;
  width: 100%;
}
.name-script {
  font-family: var(--font-script);
  font-size: clamp(40px, 12vw, 76px);
  color: var(--sage-deep);
  line-height: 1.3;
  max-width: 80%;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--ease-soft), transform 1.1s var(--ease-soft);
}
.name-a { align-self: flex-start; margin-left: 10%; }
.name-b { align-self: flex-end; margin-right: 10%; margin-top: -4px; }
.name-amp {
  font-family: var(--font-script);
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1.3;
  color: var(--olive-soft);
  align-self: center;
  margin: -6px 0;
  opacity: 0;
  transition: opacity 1s ease 0.4s;
}
.names-block.is-visible .name-a { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.names-block.is-visible .name-amp { opacity: 1; transition-delay: 0.35s; }
.names-block.is-visible .name-b { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }

/* ---------- verse / date ---------- */
.section--verse { background: var(--cream-deep); padding: 72px 24px; gap: 26px; }
.verse-block { width: 92%; max-width: 440px; }
.arabic-verse {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: var(--font-arabic);
  font-size: clamp(15px, 4vw, 20px);
  color: var(--olive-deep);
  line-height: 2.3;
  margin: 0;
}
.verse-ref {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 14px 0 0;
  opacity: 0.7;
}
.date-block { display: flex; align-items: center; gap: 16px; }
.date-line { width: 34px; height: 1px; background: var(--olive-soft); opacity: 0.6; }
.date-text {
  font-family: var(--font-date);
  font-size: clamp(20px, 5vw, 26px);
  letter-spacing: 0.08em;
  color: var(--olive-deep);
  margin: 0;
}

/* ---------- sage / childhood photo ---------- */
.section--sage {
  background: var(--sage);
  padding: 110px 24px;
  gap: 46px;
}
/* the complete pre-composited heart + lace + photograph artwork, used
   exactly as designed — no CSS clip-path, no separately-layered frame. */
.heart-photo-wrap {
  position: relative;
  width: min(92%, 420px);
}
.heart-photo-img {
  /* No drop-shadow here: the crop's own background matches the section's
     exact sage green, so the artwork sits on the page with no visible
     seam — a shadow would draw a rectangle around it and break that. */
  width: 100%;
  display: block;
}

/* FRAME3 (Details heading photo) has no .heart-photo-wrap ancestor to set
   its width, so it is sized directly here using the exact same rule
   FRAME2 gets from that wrapper -- same rendered width, and since both
   share FRAME2's 4:5 ratio, the same rendered height too. Auto height
   keeps FRAME3's own intrinsic ratio; nothing is stretched or cropped. */
img[src$="FRAME3.png"] {
  width: min(92%, 420px);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.story-caption .kicker { letter-spacing: 0.32em; }

/* ---------- poem ---------- */
.section--poem {
  background: var(--sage-deep);
  padding: 100px 24px 56px;
  gap: 30px;
}
.poem-line {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: var(--font-arabic);
  font-size: clamp(19px, 5.4vw, 25px);
  color: var(--sage-text);
  margin: 0;
  line-height: 1.9;
  max-width: 480px;
}
.poem-line--b { margin-top: 6px; }
.ornament-svg { width: 96px; height: 20px; color: var(--sage-text); opacity: 0.7; }

/* ---------- event details ---------- */
/* Sits on the exact sage green sampled from the source artwork — the
   same flat colour that fills the childhood-photo section and the
   otherwise-empty lower panel of the original design. No card, no
   icons: quiet, typography-only, framed by a single thin line. */
.section--details {
  background: var(--sage);
  padding: 56px 24px 84px;
  gap: 30px;
}
.details-heading { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.details-heading .eyebrow { color: var(--sage-text); opacity: 0.85; }
.details-names {
  font-family: var(--font-script);
  font-size: clamp(32px, 8vw, 48px);
  line-height: 1.3;
  color: var(--white-lace);
  max-width: 92%;
  /* normal, not nowrap: stays on one line at every real screen size, but
     won't silently crop past the viewport edge on an extreme narrow
     device or with iOS Dynamic Type bumping the font size up. */
  white-space: normal;
  opacity: 1;
  transform: none;
  transition: none;
}

.details-frame {
  width: 100%;
  max-width: 380px;
  border-top: 1px solid rgba(244,247,236,0.4);
  border-bottom: 1px solid rgba(244,247,236,0.4);
  padding: 44px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.detail-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 0;
  text-align: center;
}
.detail-arabic {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: var(--font-arabic);
  color: var(--sage-text);
  margin: 0;
}
.detail-arabic--label {
  font-size: clamp(12px, 3.2vw, 14px);
  opacity: 0.68;
}
.detail-arabic--main {
  font-size: clamp(20px, 5.6vw, 25px);
  line-height: 1.5;
}
.detail-en {
  font-family: var(--font-caps);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sage-text);
  opacity: 0.8;
}
.detail-sep {
  display: block;
  width: 26px;
  height: 1px;
  background: rgba(244,247,236,0.35);
}


/* ---------- countdown ---------- */
/* Same exact sage green as the details section — one continuous panel. */
.section--countdown {
  background: var(--sage);
  padding: 0 24px 130px;
  gap: 34px;
}
.countdown-arabic {
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1.6;
  font-family: var(--font-arabic);
  font-size: clamp(22px, 6vw, 28px);
  color: var(--white-lace);
  margin: 0;
}
.countdown-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(18px, 6vw, 34px);
}
.countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 56px;
}
.countdown-num {
  font-family: var(--font-date);
  font-weight: 400;
  font-size: clamp(34px, 10vw, 52px);
  line-height: 1;
  color: var(--white-lace);
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-text);
  opacity: 0.75;
}

/* ---------- closing ---------- */
/* Final section — the original cream/off-white, not green. The fan-seal
   artwork below keeps its own authentic green; only the page ground
   around it changes. */
.section--closing {
  background: var(--cream);
  padding: 110px 24px 60px;
  gap: 8px;
}
.closing-script {
  font-family: var(--font-script);
  font-size: clamp(36px, 10vw, 62px);
  line-height: 1.3;
  color: var(--olive-deep);
  max-width: 92%;
  /* normal, not nowrap — see .details-names above */
  white-space: normal;
  opacity: 1;
  transform: none;
  transition: none;
}
.closing-arabic { margin-top: 6px; margin-bottom: 20px; }
.arabic-md { direction: rtl; unicode-bidi: isolate; font-family: var(--font-arabic); font-size: clamp(24px, 6.5vw, 30px); color: var(--olive-deep); margin: 0; }
.closing-date { font-family: var(--font-date); font-size: 15px; letter-spacing: 0.08em; color: var(--ink-soft); opacity: 0.85; margin: 6px 0 0; }
.closing-seal { width: min(46%, 200px); margin: 14px 0 40px; }
.seal-img { width: 100%; display: block; filter: drop-shadow(0 14px 18px rgba(30,30,10,0.28)); }

.closing-footer { position: relative; z-index: 1; margin-top: 20px; }
.closing-footer p {
  font-family: var(--font-caps-orig);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.75;
  margin: 3px 0;
}
.footer-sub { opacity: 0.55 !important; }

/* ==========================================================================
   Responsive — tablet & desktop
   ========================================================================== */
@media (min-width: 720px) {
  .section { padding: 130px 24px; }
  .section--hero { padding-top: 90px; }
  .necklace-wrap { width: min(50%, 380px); }
  .heart-photo-wrap { width: min(42%, 380px); }
  img[src$="FRAME3.png"] { width: min(42%, 380px); }
  .names-block { min-height: 230px; }
}

@media (min-width: 1080px) {
  .envelope-stage { width: min(30vw, 340px); }
  .section { padding: 160px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}