/* ---------------------------------------------------------------- tokens */
:root {
  /* the olive of the print design (Stencil.ai) — baked into the lace art,
     so the page around the front card must be exactly this */
  --olive: #3B422C;
  --bg: var(--olive);

  /* single source of truth for the paper color; every envelope tone
     below derives from it, so recoloring is a one-token change.
     Interior surfaces mix in a fixed share of ink — automatically a
     shade darker than the exterior, whatever the base color. */
  --env-color: #EEE4D5;              /* cream envelope on the olive page */
  --env-ink: #4A3D2C;
  --env-back: color-mix(in oklab, var(--env-color) 93%, var(--env-ink));
  --flap-inner: color-mix(in oklab, var(--env-color) 95%, var(--env-ink));
  --pocket-hi: color-mix(in oklab, var(--env-color) 86%, white);
  --pocket-lo: color-mix(in oklab, var(--env-color) 97%, var(--env-ink));
  --flap-hi: color-mix(in oklab, var(--env-color) 76%, white);
  --flap-lo: var(--env-color);

  --ivory: #EBE2D5;                  /* paper inside the lace (print design) */
  --lace: #ECE2D6;                   /* lace thread, for type on olive */
  --card: var(--ivory);
  --invite-ink: #3A2C1E;             /* body text, 10:1 on ivory */
  --brown: #7A5A2E;                  /* names + headings, 5:1 on ivory */
  --burgundy: #6E1F24;
  --invite-col: 520px;               /* invite content column on desktop */
  --ink-shadow: 22, 26, 14;          /* olive-black shadow ink, rgba() */

  /* lace-liner net, shared by the envelope interior and the flap underside */
  --tulle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10.4'%3E%3Cpath d='M3 0h6l3 5.2-3 5.2H3L0 5.2z' fill='none' stroke='%237A5A2E' stroke-opacity='.16' stroke-width='.7'/%3E%3C/svg%3E");

  --env-w: min(460px, 82vw);
  --env-h: calc(var(--env-w) * 0.7); /* 400 × 280 design ratio   */
  --card-r: 18px;

  /* semantic z scale */
  --z-ambient: 1;
  --z-back: 2;
  --z-interior: 3;
  --z-card: 4;
  --z-pocket: 5;
  --z-flap: 6;
  --z-flap-behind: 3;                /* once the hinge passes 90° */
  --z-invite: 10;
  --z-dev: 20;
  --z-audio: 30;
}

/* ---------------------------------------------------------------- page */
/* Subset of KFGQPC Uthmanic Script HAFS — only the tagline's glyphs
   (20KB woff2, from the 244KB original in assets-src/). Re-subset if the
   tagline text changes: see README / pyftsubset. */
@font-face {
  font-family: "Uthmanic Hafs";
  src: url("assets/fonts/uthmanic-hafs-tagline.woff2") format("woff2");
  font-display: swap;
}

* { box-sizing: border-box; }

/* one language at a time: <html lang> is set by the Worker per guest */
html:not([lang="ar"]) .t-ar,
html[lang="ar"] .t-en { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------- scene */
.scene {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform, opacity, filter;
}

/* invitation line beneath the envelope; rides the scene's open animation */
.scene-tagline {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--env-h) / 2 + clamp(26px, 6svh, 60px));
  margin: 0;
  text-align: center;
  font-family: "Uthmanic Hafs", "Geeza Pro", serif;
  font-size: clamp(24px, 5.4vw, 36px);
  line-height: 1.6;
  color: var(--lace);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.scene-tagline.t-en {
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(12px, 3.3vw, 15px);
  letter-spacing: .24em;
  text-indent: .24em;
  line-height: 2.1;
  text-transform: uppercase;
  color: rgba(236, 226, 214, .82);
}

.stage {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 24px;
  animation: arrive 900ms cubic-bezier(.22, 1, .36, 1) both;
}

.stage:disabled { cursor: default; }

.stage:focus { outline: none; }
.stage:focus-visible {
  outline: 1.5px solid rgba(var(--ink-shadow), .45);
  outline-offset: 22px;
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* idle wrappers — each transform lives on its own element so the
   breathing, wiggle and press never fight over one transform */
.float, .wiggle, .press { display: block; }

/* gentle hover lift, only while the envelope is still an object */
.press { transition: transform 450ms cubic-bezier(.22, 1, .36, 1); }
body:not(.is-opening):not(.is-open) .stage:hover .press { transform: scale(1.012); }

/* ---------------------------------------------------------------- envelope */
.envelope {
  position: relative;
  display: block;
  width: var(--env-w);
  height: var(--env-h);
  perspective: 1400px;
}

/* barely-visible paper grain across the whole object */
.envelope::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-flap);
  border-radius: calc(var(--env-w) * 0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.025;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* 1 · ambient shadow — diffused daylight from above */
.ambient {
  position: absolute;
  z-index: var(--z-ambient);
  left: 9%;
  right: 9%;
  bottom: -9%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(var(--ink-shadow), .16) 0%,
              rgba(var(--ink-shadow), 0) 68%);
  filter: blur(10px);
}

/* 2 · back body */
.back {
  position: absolute;
  z-index: var(--z-back);
  inset: 0;
  border-radius: calc(var(--env-w) * 0.04);
  background: var(--tulle) 0 0 / 12px 10.4px, var(--env-back);
}

/* 3 · interior shadow at the mouth, revealed while the flap opens */
.interior {
  position: absolute;
  z-index: var(--z-interior);
  left: 0;
  right: 0;
  top: 0;
  height: 34%;
  border-radius: calc(var(--env-w) * 0.04) calc(var(--env-w) * 0.04) 0 0;
  background: linear-gradient(to bottom,
              rgba(var(--ink-shadow), .22),
              rgba(var(--ink-shadow), 0));
  opacity: 0;
  pointer-events: none;
}

/* 4 · invitation card — independent layer */
.card {
  position: absolute;
  z-index: var(--z-card);
  left: 7.5%;
  top: 5%;
  transform-style: preserve-3d;      /* the folded panels live in 3D */
  perspective: 2200px;
  will-change: transform;
}

/* the letter: three panels, each a window onto a third of the hero clone.
   Sized by sizeCard() in script.js. */
.fold-face,
.fold-back,
.fold-hinge {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.fold-face,
.fold-back {
  top: 0;
  overflow: hidden;
  background: var(--olive);         /* the page around the lace card */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fold-top { border-radius: 12px 12px 0 0; }
.fold-low > .fold-face { border-radius: 0 0 12px 12px; }
.fold-back {
  transform: rotateX(180deg);
  background: #E6DCCB;              /* the back of the paper */
}
.fold-hinge {
  top: 100%;                        /* hangs from the panel above's bottom edge */
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.fold-clone {
  position: absolute;
  left: 0;
}

/* 5 · front pocket */
.pocket {
  position: absolute;
  z-index: var(--z-pocket);
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 -1px 2px rgba(var(--ink-shadow), .05));
}

.pocket-stop-hi { stop-color: var(--pocket-hi); }
.pocket-stop-lo { stop-color: var(--pocket-lo); }
.flap-stop-hi   { stop-color: var(--flap-hi); }
.flap-stop-lo   { stop-color: var(--flap-lo); }

/* fold seams — ink and light are translucent so they track any paper color */
.seam-soft  { stroke: rgba(84, 70, 50, .05);  stroke-width: 5; }
.seam-line  { stroke: rgba(84, 70, 50, .11);  stroke-width: 1.4; }
.seam-glint { stroke: rgba(255, 255, 255, .5); stroke-width: 1; }

/* 6 · flap — hinges on the envelope's top edge */
.flap {
  position: absolute;
  z-index: var(--z-flap);
  left: 0;
  top: 0;
  width: 100%;
  height: 67.9%;                       /* 190 / 280 */
  transform-origin: top center;
  transform-style: preserve-3d;
  will-change: transform;
}

.flap.behind { z-index: var(--z-flap-behind); }

.flap-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flap-front { filter: drop-shadow(0 2px 3px rgba(var(--ink-shadow), .10)); }
.flap-back  { transform: rotateX(180deg); }
.flap-back path { fill: var(--flap-inner); }
.flap-back .tulle-line { fill: none; stroke: rgba(122, 90, 46, .16); stroke-width: .7; }

/* 5b · postage + addressee, on the pocket below the flap's edge.
   Logical insets mirror them for Arabic (stamps on the left). */
.postage {
  position: absolute;
  z-index: var(--z-pocket);
  inset-inline-end: 4%;
  bottom: 9%;
  width: 34%;
  height: 46%;
  pointer-events: none;
}
.stamp {
  position: absolute;
  width: 58%;
  height: auto;
  filter: drop-shadow(0 2px 3px rgba(84, 70, 50, .25));
  user-select: none;
  -webkit-user-select: none;
}
.stamp-jordan { inset-inline-end: 44%; bottom: 2%;  transform: rotate(-8deg); }
.stamp-iraq   { inset-inline-end: 0;   bottom: 12%; transform: rotate(5deg); }
html[lang="ar"] .stamp-jordan { inset-inline-end: 0;   bottom: 12%; transform: rotate(-5deg); }
html[lang="ar"] .stamp-iraq   { inset-inline-end: 44%; bottom: 2%;  transform: rotate(8deg); }

.address {
  position: absolute;
  z-index: var(--z-pocket);
  inset-inline-start: 9%;
  bottom: 13%;
  max-width: 52%;
  display: grid;
  gap: 2px;
  text-align: start;
  color: var(--brown);
  pointer-events: none;
}
.address[hidden] { display: none; }
.address-to {
  font-family: "Montserrat", "Avenir Next", sans-serif;
  font-size: clamp(8px, 2vw, 10px);
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .7;
}
.address-name {
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(13px, 3.6vw, 18px);
  letter-spacing: .08em;
  line-height: 1.25;
  text-wrap: balance;
}
html[lang="ar"] .address-to { font-family: "Amiri", serif; font-size: clamp(12px, 3vw, 15px); letter-spacing: 0; }
html[lang="ar"] .address-name { font-family: "Amiri", serif; font-size: clamp(17px, 4.6vw, 23px); letter-spacing: 0; }

/* ---------------------------------------------------------------- invitation */
.invite-wrap {
  position: fixed;
  inset: 0;
  z-index: var(--z-invite);
  pointer-events: none;
}

.invite-wrap[hidden] { display: none; }

.invite {
  position: absolute;
  inset: 0;
  background: var(--olive);
  color: var(--invite-ink);
  outline: none;
  overflow: hidden;
  /* reserve symmetric scrollbar gutters so the scrollbar appearing never
     shifts the centered content */
  scrollbar-gutter: stable both-edges;
}

body.is-open .invite-wrap { pointer-events: auto; }
body.is-open .invite {
  overflow-y: auto;
  overflow-x: clip;   /* flower bleed must never cause horizontal scroll */
}

/* ------------------------------------------------------- invite content */
.invite-hero {
  position: relative;
  min-height: max(100svh, 760px);
  max-width: var(--invite-col);
  margin-inline: auto;
  display: grid;
  place-items: center;
  /* lace band + breathing room; the copy sits inside the ivory field */
  --margin: clamp(10px, 3vw, 18px);
  --band: clamp(44px, 12.5vw, 62px);
  padding: calc(var(--margin) + var(--band) + clamp(18px, 4svh, 34px))
           calc(var(--margin) + var(--band) + 6px);
  overflow-x: visible;
  overflow-y: clip;
}

/* the lace frame, 9-sliced from the print artwork (lace-card.webp, 829×1183,
   lace band 127.5px). Slices sit on whole pattern repeats — 3 across, 5 down —
   so `round` tiles the edges seamlessly at any card size. */
.lace-card {
  position: absolute;
  inset: var(--margin);
  border-style: solid;
  border-color: transparent;
  border-width: calc(var(--band) * 222.8 / 127.5) calc(var(--band) * 215.5 / 127.5);
  border-image: url("assets/art/lace-card.webp") 222.8 215.5 fill / 1 / 0 round;
  /* Solid ivory under the frame's inner field. The nine image pieces can
     leave hairline gaps when the card is drawn scaled down (in the envelope,
     mid-opening); this backing makes those gaps ivory instead of olive, so
     no grid lines show. It starts at the lace band's inner edge, which sits
     88 / 95.3 source px outside the slice lines. */
  --sx: calc(var(--band) * 88 / 127.5);
  --sy: calc(var(--band) * 95.3 / 127.5);
  background: linear-gradient(var(--ivory), var(--ivory)) no-repeat;
  background-origin: padding-box;
  background-clip: border-box;
  background-position: calc(var(--sx) * -1) calc(var(--sy) * -1);
  background-size: calc(100% + 2 * var(--sx)) calc(100% + 2 * var(--sy));
  pointer-events: none;
}

/* florals — bleed over the lace corners */
.fl {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 6px 10px rgba(var(--ink-shadow), .28));
}
.fl-calla   { top: -1%;    right: -4%;  width: 26%; transform: rotate(-14deg); }
.fl-rose-t  { top: 3.5%;   right: 13%;  width: 17%; transform: rotate(12deg); }
.fl-strand  { top: 1%;     left: 1%;    width: 13%; transform: rotate(-8deg); }
.fl-hydrangea { bottom: 1.5%; left: -3%; width: 25%; transform: rotate(-10deg); }

.invite-copy {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  width: 100%;
  font-family: "Montserrat", "Avenir Next", "Helvetica Neue", sans-serif;
  color: var(--invite-ink);
}

.basmala {
  width: min(70%, 230px);
  height: auto;
  margin-bottom: clamp(18px, 4svh, 34px);
  opacity: .9;
}

.pre {
  margin: 0 0 clamp(14px, 3svh, 22px);
  font-size: clamp(9.5px, 2.5vw, 11.5px);
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: rgba(58, 44, 30, .75);
}

.names {
  margin: 0;
  display: grid;
  gap: .12em;
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(30px, 8.6vw, 44px);
  letter-spacing: .08em;
  text-indent: .08em;
  line-height: 1.15;
  color: var(--brown);
}
.names .amp { font-size: .6em; line-height: 1.2; }

.announce {
  margin: clamp(18px, 4svh, 30px) 0 0;
  font-size: clamp(10.5px, 2.8vw, 13px);
  letter-spacing: .2em;
  text-indent: .2em;
  line-height: 2;
  text-transform: uppercase;
}

.when {
  margin-top: clamp(24px, 5svh, 44px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 3.4vw, 26px);
  width: 100%;
  max-width: 360px;
  text-transform: uppercase;
}

.when-date, .when-time {
  display: grid;
  gap: clamp(6px, 1.2svh, 12px);
  justify-items: center;
}

.wd-day {
  font-size: clamp(10px, 2.7vw, 12.5px);
  letter-spacing: .26em;
  text-indent: .26em;
}
.wd-num {
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(38px, 10vw, 50px);
  line-height: 1;
  color: var(--brown);
}
.wd-month, .wt-place {
  font-size: clamp(9.5px, 2.5vw, 12px);
  letter-spacing: .22em;
  text-indent: .22em;
  line-height: 1.9;
}
.wt-hour {
  font-size: clamp(15px, 4.2vw, 20px);
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--brown);
}

.when-rule {
  position: relative;
  width: 1px;
  height: clamp(90px, 15svh, 120px);
  background: rgba(58, 44, 30, .6);
}
.when-rule::before,
.when-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(58, 44, 30, .6);
}
.when-rule::before { top: -2px; }
.when-rule::after  { bottom: -2px; }

.venue-sketch {
  width: min(78%, 290px);
  height: auto;
  margin-top: clamp(20px, 4svh, 36px);
  mix-blend-mode: multiply;   /* ink on white → ink on the ivory paper */
  opacity: .92;
}

/* ---- Arabic front card: Amiri, no tracking (it would break the joins) ---- */
html[lang="ar"] .invite-copy { font-family: "Amiri", "Geeza Pro", serif; }
html[lang="ar"] .invite-copy *,
html[lang="ar"] .invite-section,
html[lang="ar"] .invite-section * { letter-spacing: 0 !important; text-indent: 0 !important; }
html[lang="ar"] .pre { font-size: clamp(15px, 4vw, 18px); }
html[lang="ar"] .names { font-family: "Amiri", serif; font-size: clamp(40px, 11vw, 56px); line-height: 1.35; gap: 0; }
html[lang="ar"] .names .amp { font-size: .55em; line-height: 1; }
html[lang="ar"] .announce { font-size: clamp(17px, 4.6vw, 21px); line-height: 1.8; }
html[lang="ar"] .wd-day, html[lang="ar"] .wd-month, html[lang="ar"] .wt-place { font-size: clamp(15px, 3.9vw, 18px); line-height: 1.6; }
html[lang="ar"] .wd-num { font-family: "Amiri", serif; font-size: clamp(44px, 12vw, 58px); }
html[lang="ar"] .wt-hour { font-size: clamp(19px, 5vw, 24px); }

/* ------------------------------------------------ venue maps popover */
.when-time { position: relative; }

.place-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 8px;
  margin: -4px -8px;
  /* neutralize only the UA button defaults; .wt-place supplies the rest */
  font-family: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted rgba(58, 44, 30, .55);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color .25s ease;
}
.place-btn:hover { text-decoration-color: rgba(58, 44, 30, .95); }
.place-btn:focus-visible {
  outline: 1.5px solid rgba(38, 35, 32, .5);
  outline-offset: 3px;
  border-radius: 4px;
}

.place-pop {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  z-index: 2;
  width: max-content;
  max-width: min(78vw, 300px);
  display: grid;
  border-radius: 14px;
  background: var(--olive);
  color: var(--lace);
  box-shadow: 0 14px 34px rgba(var(--ink-shadow), .35);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px) scale(.96);
  transform-origin: top center;
  transition: opacity .22s ease, visibility .22s ease,
              transform .22s cubic-bezier(.22, 1, .36, 1);
}
.place-pop.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* pointer up toward the venue name */
.place-pop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 12px;
  height: 12px;
  background: var(--olive);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}

.place-pop a {
  position: relative;
  z-index: 1;                       /* above the pointer diamond */
  padding: 15px 22px;
  color: inherit;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  border-radius: 14px;
}
.place-pop a + a { border-top: 1px solid rgba(253, 252, 248, .14); }
.place-pop a:hover { background: rgba(253, 252, 248, .08); }
.place-pop a:focus-visible {
  outline: 1.5px solid rgba(253, 252, 248, .7);
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .place-pop { transition: none; }
}

/* ---------------------------------------------------------------- audio toggle */
.audio-toggle {
  position: fixed;
  z-index: var(--z-audio);
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: calc(18px + env(safe-area-inset-right, 0px));
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(58, 52, 42, .35);
  color: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1),
              background .25s ease;
}

/* appears once the envelope is opened and music starts */
body.is-opening .audio-toggle:not([hidden]),
body.is-open .audio-toggle:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.audio-toggle[hidden] { display: none; }
.audio-toggle:hover { background: rgba(58, 52, 42, .5); }
.audio-toggle:focus-visible {
  outline: 1.5px solid rgba(255, 255, 255, .8);
  outline-offset: 2px;
}

.audio-toggle svg { width: 21px; height: 21px; }
.audio-toggle .icon-muted { display: none; }
.audio-toggle[aria-pressed="true"] .icon-sound { display: none; }
.audio-toggle[aria-pressed="true"] .icon-muted { display: block; }

@media (prefers-reduced-motion: reduce) {
  .audio-toggle { transition: none; transform: none; }
}

/* ---------------------------------------------------------------- language toggle */
/* EN / عربي preview switch, top-left (the music button owns top-right).
   Shown on localhost and with ?dev — see initLangToggle() in script.js. */
.lang-toggle {
  position: fixed;
  z-index: var(--z-audio);
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: calc(18px + env(safe-area-inset-left, 0px));
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(30, 34, 22, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  direction: ltr;
}
.lang-toggle[hidden] { display: none; }
.lang-toggle button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: none;
  color: rgba(236, 226, 214, .8);
  font: 500 12px/1 "Montserrat", sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}
.lang-toggle button[lang="ar"] { font: 700 14px/1 "Amiri", serif; letter-spacing: 0; padding-block: 6px; }
.lang-toggle button[aria-pressed="true"] { background: var(--lace); color: var(--olive); }
.lang-toggle button:focus-visible { outline: 1.5px solid var(--lace); outline-offset: 2px; }

/* ---------------------------------------------------------------- dev panel */
.dev-panel {
  position: fixed;
  z-index: var(--z-dev);
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(var(--ink-shadow), .12);
  box-shadow: 0 6px 20px rgba(var(--ink-shadow), .10);
  font: 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #4A4438;
}

.dev-panel[hidden] { display: none; }

.dev-panel label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.dev-panel input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(var(--ink-shadow), .18);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.dev-panel input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.dev-panel input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }

.dev-panel button {
  appearance: none;
  border: 0;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(var(--ink-shadow), .07);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.dev-panel button:hover { background: rgba(var(--ink-shadow), .12); }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stage { animation: none; }
  .press { transition: none; }
  body:not(.is-opening):not(.is-open) .stage:hover .press { transform: none; }
}

/* ======================================================================
   Per-guest content: greeting, scroll sections, and the RSVP form.
   Sections are ivory paper cards on the olive page, each with a keepsake
   object or two tucked over its edge. Titles: Cinzel / Amiri in brown.
   ====================================================================== */

/* personal greeting above the couple's names */
.greeting {
  margin: 0 0 clamp(10px, 2svh, 16px);
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(13px, 3.5vw, 16px);
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--invite-ink);
}
.greeting[hidden] { display: none; }
html[lang="ar"] .greeting { font-family: "Amiri", serif; font-size: clamp(18px, 4.8vw, 22px); }

/* ---- section scaffold ---- */
.invite-sections {
  max-width: var(--invite-col);
  margin-inline: auto;
  padding: 8px clamp(14px, 4vw, 22px) clamp(56px, 10svh, 96px);
  display: grid;
  gap: clamp(44px, 9svh, 72px);
}

.invite-section {
  position: relative;
  padding: clamp(40px, 8svh, 60px) clamp(22px, 7vw, 44px);
  display: grid;
  justify-items: center;
  text-align: center;
  background: var(--ivory);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset,
              0 18px 40px rgba(var(--ink-shadow), .32);
  font-family: "Montserrat", "Avenir Next", "Helvetica Neue", sans-serif;
  color: var(--invite-ink);
}
html[lang="ar"] .invite-section { font-family: "Amiri", "Geeza Pro", serif; }

/* keepsake objects tucked over a card's edge */
.deco {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 6px 10px rgba(var(--ink-shadow), .3));
}

.section-title {
  margin: 0 0 clamp(20px, 4svh, 32px);
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(19px, 5.2vw, 25px);
  letter-spacing: .12em;
  text-indent: .12em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--brown);
  text-wrap: balance;
}
html[lang="ar"] .section-title { font-family: "Amiri", serif; font-weight: 700; font-size: clamp(25px, 6.6vw, 31px); }

.section-intro {
  text-wrap: pretty;
  margin: 0 0 clamp(22px, 4svh, 30px);
  max-width: 40ch;
  font-size: clamp(13px, 3.3vw, 15px);
  line-height: 1.85;
  color: rgba(58, 44, 30, .88);
}
html[lang="ar"] .section-intro { font-size: clamp(17px, 4.4vw, 19px); }

.section-intro + .subhead { margin-top: 0; }
.subhead {
  margin: clamp(26px, 5svh, 38px) 0 clamp(12px, 2.4svh, 18px);
  font-size: clamp(10.5px, 2.7vw, 12px);
  font-weight: 500;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: var(--brown);
}
html[lang="ar"] .subhead { font-size: clamp(17px, 4.4vw, 19px); font-weight: 700; }

/* ---- story: the locket lies over the two stamps, franked from Ajman ---- */
.story-art {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: clamp(205px, 56vw, 255px);
  margin: 0 0 clamp(6px, 1.5svh, 12px);
}
.story-stamp {
  position: absolute;
  z-index: 1;
  top: 16%;
  width: 31%;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.story-stamp img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(var(--ink-shadow), .3));
}
/* Abdullah's stamp sits under his photo (the boy, left heart of the
   locket) in both languages — the locket image doesn't mirror, so neither
   does this row. */
.story-stamp.groom { left: -2%; }
.story-stamp.groom img { transform: rotate(-9deg); }
.story-stamp.bride { right: -2%; }
.story-stamp.bride img { transform: rotate(7deg); }
.story-stamp figcaption {
  font-family: "Cinzel", serif;
  font-size: clamp(11px, 2.9vw, 13px);
  letter-spacing: .12em;
  line-height: 1.4;
  color: var(--brown);
}
.story-stamp figcaption small {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: .78em;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(58, 44, 30, .7);
}
html[lang="ar"] .story-stamp figcaption { font-family: "Amiri", serif; font-size: clamp(16px, 4.2vw, 19px); }
html[lang="ar"] .story-stamp figcaption small { font-family: "Amiri", serif; font-size: .82em; }
.story-locket {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 2%;
  width: 66%;
  height: auto;
  transform: translateX(-50%) rotate(-4deg);
  filter: drop-shadow(0 10px 16px rgba(var(--ink-shadow), .38));
}
.postmark {
  position: absolute;
  z-index: 2;
  left: 12%;
  top: 42%;
  width: 58%;
  color: rgba(74, 44, 34, .5);
  transform: rotate(-12deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.postmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.postmark, .story-art { direction: ltr; }

/* ---- details list ---- */
.detail-list {
  margin: 0;
  display: grid;
  gap: clamp(16px, 3svh, 22px);
  width: 100%;
  max-width: 42ch;
}
.detail-label {
  margin: 0 0 5px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  color: var(--brown);
}
.detail-value {
  margin: 0;
  font-size: clamp(13px, 3.3vw, 15px);
  line-height: 1.75;
}
html[lang="ar"] .detail-label { font-size: 17px; font-weight: 700; }
html[lang="ar"] .detail-value { font-size: clamp(17px, 4.4vw, 19px); }

/* ---- bullet lists (menu, accommodation, things to do) ---- */
.bullet-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 44ch;
}
.bullet-list li {
  position: relative;
  padding-inline-start: 20px;
  font-size: clamp(13px, 3.2vw, 14.5px);
  line-height: 1.7;
  text-align: start;
  color: rgba(58, 44, 30, .9);
}
html[lang="ar"] .bullet-list li { font-size: clamp(16.5px, 4.3vw, 18.5px); }
.bullet-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brown);
  opacity: .6;
}

/* ---- FAQ (native disclosure) ---- */
.faq-item {
  width: 100%;
  max-width: 46ch;
  border-top: 1px solid rgba(122, 90, 46, .22);
  text-align: start;
}
.faq-item:last-of-type { border-bottom: 1px solid rgba(122, 90, 46, .22); }
.faq-q {
  list-style: none;
  cursor: pointer;
  padding-block: 16px;
  padding-inline: 2px 28px;
  position: relative;
  font-size: clamp(13px, 3.2vw, 14.5px);
  line-height: 1.5;
}
html[lang="ar"] .faq-q { font-size: clamp(17px, 4.4vw, 19px); font-weight: 700; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "+";
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: var(--brown);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
/* + turns into × as the answer opens */
.faq-item[open]:not(.is-closing) .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-body { overflow: hidden; }
.faq-a {
  margin: 0;
  padding: 0 2px 18px;
  font-size: clamp(13px, 3.1vw, 14.5px);
  line-height: 1.8;
  color: rgba(58, 44, 30, .82);
}
html[lang="ar"] .faq-a { font-size: clamp(16.5px, 4.3vw, 18.5px); }

/* ---- international ---- */

/* ---- RSVP ---- */
.rsvp .deco-rose { width: 16%; bottom: -24px; inset-inline-end: -2%; transform: rotate(14deg); }
.rsvp-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(20px, 4svh, 30px);
}
.rsvp-btn,
.dir-btn {
  appearance: none;
  background: none;
  cursor: pointer;
  padding: 12px 20px;
  border: 1px solid rgba(122, 90, 46, .45);
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--invite-ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
html[lang="ar"] .rsvp-btn { font-size: 17px; padding: 9px 22px; }
.dir-btn { font-family: "Montserrat", sans-serif !important; }
.rsvp-btn:hover, .dir-btn:hover { border-color: var(--brown); }
.rsvp-btn.is-selected {
  background: var(--olive);
  color: var(--lace);
  border-color: var(--olive);
}
.rsvp-btn:focus-visible, .dir-btn:focus-visible {
  outline: 1.5px solid rgba(58, 44, 30, .55);
  outline-offset: 3px;
}
.rsvp-btn:disabled { opacity: .45; cursor: default; }

.rsvp-fields {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 40ch;
  margin-bottom: clamp(18px, 3svh, 26px);
}
.rsvp-fields[hidden] { display: none; }

.field { display: grid; gap: 8px; text-align: start; }
.field-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brown);
}
html[lang="ar"] .field-label { font-size: 16.5px; font-weight: 700; }
.field-input {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(122, 90, 46, .4);
  border-radius: 0;
  padding: 8px 2px;
  font-family: inherit;
  font-size: 16px;            /* ≥16px: no iOS zoom-on-focus */
  color: var(--invite-ink);
  resize: vertical;
  transition: border-color .2s ease;
}
.field-input::placeholder { color: rgba(58, 44, 30, .4); }
.field-input:focus {
  outline: none;
  border-bottom-color: var(--brown);
}
html[lang="ar"] .field-input { font-size: 18px; }

.rsvp-send {
  appearance: none;
  cursor: pointer;
  padding: 13px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--olive);
  color: var(--lace);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  transition: opacity .2s ease, transform .2s ease;
}
html[lang="ar"] .rsvp-send { font-size: 17px; padding: 10px 32px; }
.rsvp-send[hidden] { display: none; }
.rsvp-send:hover { opacity: .9; }
.rsvp-send:active { transform: translateY(1px); }
.rsvp-send:disabled { opacity: .5; cursor: default; }
.rsvp-send:focus-visible {
  outline: 1.5px solid rgba(58, 44, 30, .55);
  outline-offset: 3px;
}

.rsvp-thanks {
  margin: clamp(20px, 4svh, 30px) 0 0;
  max-width: 36ch;
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(14px, 3.7vw, 17px);
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--brown);
}
html[lang="ar"] .rsvp-thanks { font-family: "Amiri", serif; font-size: clamp(19px, 5vw, 22px); }
.rsvp-thanks[hidden] { display: none; }

.rsvp-note {
  margin: clamp(20px, 4svh, 30px) 0 0;
  max-width: 40ch;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(58, 44, 30, .7);
}
html[lang="ar"] .rsvp-note { font-size: 15.5px; }

/* ---- closing: the verse, on the olive page ---- */
.closing-verse {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(10px, 3svh, 24px) 8px 0;
  text-align: center;
  color: var(--lace);
}
.closing-verse .verse {
  width: min(78%, 330px);
  height: auto;
  /* brown calligraphy → lace ivory on the olive page */
  filter: brightness(0) invert(.93) sepia(.18);
}
.closing-verse .verse-ref {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: clamp(11px, 2.9vw, 13px);
  letter-spacing: .08em;
  line-height: 1.7;
  opacity: .8;
}
.closing-verse .signoff {
  margin: clamp(20px, 4svh, 30px) 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .75;
}
.closing-verse .sign-names {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: clamp(20px, 5.4vw, 26px);
  letter-spacing: .1em;
}
html[lang="ar"] .closing-verse * { letter-spacing: 0 !important; }
html[lang="ar"] .closing-verse .verse-ref,
html[lang="ar"] .closing-verse .signoff { font-family: "Amiri", serif; font-size: 16px; text-transform: none; }
html[lang="ar"] .closing-verse .sign-names { font-family: "Amiri", serif; font-size: clamp(26px, 7vw, 32px); }

@media (prefers-reduced-motion: reduce) {
  .rsvp-btn, .dir-btn, .rsvp-send, .field-input { transition: none; }
}

/* ======================================================================
   Keepsake layout: everything stays centred, but every section is a
   different piece of paper — its own shape, stock, width and a gentle
   tilt — so the page reads like things laid on a table rather than a
   column of identical boxes.
   ====================================================================== */
.invite-section {
  --paper: var(--ivory);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--paper);
}
.invite-sections { justify-items: center; }
.invite-sections > * { width: 100%; }

/* left-aligned cards */

/* story — an arched cut-out, warmer stock, nudged left */
.paper-arch {
  --paper: #E6D8C1;
  width: 94% !important;
  transform: rotate(-.8deg);
  border-radius: 50% 50% 6px 6px / 150px 150px 6px 6px;
  padding-top: clamp(78px, 14svh, 96px);
}

/* countdown — a torn ticket stub, small and off to the right */
.paper-stub {
  --paper: #EEE6D8;
  width: 80% !important;
  transform: rotate(1.4deg);
  padding: clamp(26px, 5svh, 34px) clamp(18px, 5vw, 28px);
  border-radius: 3px;
  /* perforated tear on the start edge */
  -webkit-mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000) 0 0 / 100% 16px;
          mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000) 0 0 / 100% 16px;
  box-shadow: none;
  filter: drop-shadow(0 14px 20px rgba(var(--ink-shadow), .35));
}
html[lang="ar"] .paper-stub {
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  -webkit-mask-image: radial-gradient(circle 5px at 100% 50%, transparent 98%, #000);
          mask-image: radial-gradient(circle 5px at 100% 50%, transparent 98%, #000);
}
.paper-stub .section-title { margin-bottom: clamp(14px, 3svh, 20px); }
.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 6vw, 34px);
  margin: 0;
}
.countdown div { display: grid; gap: 6px; justify-items: center; }
.countdown dd {
  margin: 0;
  order: -1;
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(30px, 8.5vw, 42px);
  line-height: 1;
  color: var(--brown);
  font-variant-numeric: tabular-nums;
}
.countdown dt {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: rgba(58, 44, 30, .7);
}
html[lang="ar"] .countdown dd { font-family: "Amiri", serif; }
html[lang="ar"] .countdown dt { font-size: 16px; }

/* details — a tag taped down and pinned, nudged right */
.paper-tag {
  --paper: #EFE7DA;
  width: 94% !important;
  transform: rotate(.7deg);
  border-radius: 4px;
}
.details .deco-pin { width: 30%; top: -30px; inset-inline-end: -7%; transform: scaleX(-1) rotate(-14deg); }
.washi {
  position: absolute;
  width: 96px;
  height: 26px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px),
    rgba(171, 160, 120, .62);
  box-shadow: 0 1px 2px rgba(var(--ink-shadow), .18);
  clip-path: polygon(0 8%, 3% 0, 97% 6%, 100% 0, 98% 50%, 100% 100%, 96% 94%, 2% 100%, 0 92%, 2% 50%);
  pointer-events: none;
}
.washi-a { top: -12px; inset-inline-start: 10%; transform: rotate(-5deg); }

/* getting there — a polaroid dropped on the page, buttons beside it */
.directions-card {
  background: none;
  box-shadow: none;
  padding: 0;
  justify-items: center;
  color: var(--lace);
}
.polaroid {
  position: relative;
  width: min(70%, 300px);
  transform: rotate(-3deg);
  filter: drop-shadow(0 16px 24px rgba(var(--ink-shadow), .45));
}
/* the polaroid is drawn, not an image: white card, square-ish window */
.polaroid {
  padding: 5.5% 5.5% 0;
  background: #F7F4EE;
  border-radius: 2px;
}
.polaroid-photo {
  aspect-ratio: 1 / .9;
  display: grid;
  place-items: center;
  padding: 6%;
  background: #E9E1D2;
  box-shadow: inset 0 0 0 1px rgba(58, 44, 30, .1), inset 0 2px 8px rgba(58, 44, 30, .12);
}
.polaroid-photo img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;    /* sketch art is ink on white */
}
.polaroid-caption {
  margin: 0;
  padding: 7% 4% 9%;
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: clamp(11px, 3vw, 14px);
  line-height: 1.4;
  color: var(--invite-ink);
}
html[lang="ar"] .polaroid-caption { font-family: "Amiri", serif; font-size: clamp(16px, 4.3vw, 19px); }
/* the ballroom, a quieter second line under the venue */
.polaroid-sub {
  display: block;
  margin-top: 4px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(9px, 2.4vw, 11px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(58, 44, 30, .55);
}
html[lang="ar"] .polaroid-sub { font-family: "Amiri", serif; font-size: clamp(14px, 3.7vw, 16px); letter-spacing: 0; text-transform: none; }
.washi-b { top: -10px; left: 50%; margin-left: -48px; transform: rotate(3deg); }
.directions-side {
  margin-top: clamp(22px, 4svh, 30px);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
}
.directions-side .section-title { color: var(--lace); margin: 0 0 10px; text-indent: 0; }
.directions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.directions-card .dir-btn {
  color: var(--lace);
  border-color: rgba(236, 226, 214, .5);
  background: rgba(59, 66, 44, .55);
  backdrop-filter: blur(2px);
}
.directions-card .dir-btn:hover { border-color: var(--lace); }

/* FAQ — scalloped stationery, slightly left */
.paper-scallop {
  --paper: #EFE9DE;
  --s: 9px;
  width: 97% !important;
  transform: rotate(-.6deg);
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 16px 22px rgba(var(--ink-shadow), .32));
  margin-block: var(--s);
}
.paper-scallop::before,
.paper-scallop::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--s);
  background: radial-gradient(circle at 50% 100%, var(--paper) calc(var(--s) - .5px), transparent var(--s)) 0 0 / calc(var(--s) * 2) var(--s) repeat-x;
}
.paper-scallop::before { top: calc(var(--s) * -1); }
.paper-scallop::after { bottom: calc(var(--s) * -1); transform: scaleY(-1); }
.faq .deco-paper-flower { width: 30%; top: -40px; inset-inline-end: -6%; transform: rotate(12deg); }

/* coming from abroad — airmail envelope border, kraft stock, nudged right */
.paper-airmail {
  --paper: #E3D3B6;
  width: 93% !important;
  transform: rotate(.8deg);
  border: 9px solid transparent;
  border-radius: 3px;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(-45deg, var(--burgundy) 0 12px, var(--paper) 12px 20px, var(--olive) 20px 32px, var(--paper) 32px 40px) border-box;
}
.international .deco-compass { width: 74px; top: -34px; inset-inline-end: 8%; transform: rotate(14deg); }

/* RSVP — deckled card sealed with silver wax */
.paper-deckle {
  width: 97% !important;
  transform: rotate(-.4deg);
  border-radius: 6px 14px 8px 12px / 12px 6px 14px 8px;
  padding-top: clamp(62px, 11svh, 78px);
}
.rsvp .deco-seal { width: 84px; top: -44px; left: 50%; margin-left: -42px; transform: rotate(82deg); }

/* closing — smaller verse; names inside the lace heart */
.closing-verse .verse { width: min(55%, 230px); }
.closing-verse .verse-ref { font-size: clamp(9px, 2.3vw, 10px); }
.sign-heart {
  position: relative;
  width: min(66%, 250px);
  margin-top: clamp(14px, 3svh, 22px);
  display: grid;
  place-items: center;
}
.sign-heart-lace { width: 100%; height: auto; grid-area: 1 / 1; opacity: .95; }
/* the text sits in the heart's visual centre — between the lobes and the
   point, which is higher than the box's middle */
.sign-text {
  position: absolute;
  inset: 20% 20% 34%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.sign-heart .signoff { margin: 0; text-indent: .3em; }
.sign-heart .sign-names {
  margin: 0;
  font-size: clamp(15px, 4.2vw, 19px);
  line-height: 1.35;
  text-indent: .1em;
  text-wrap: balance;
}
html[lang="ar"] .sign-heart .sign-names { font-size: clamp(22px, 6vw, 26px); }

/* short paragraphs read as even lines — no single word left on its own */
.story .section-intro { text-wrap: balance; }
html[lang="ar"] .sign-heart .signoff,
html[lang="ar"] .sign-heart .sign-names { text-indent: 0; }