/* Direction only. Typography and page composition await visual instructions. */
:root {
  color-scheme: dark;
  --burgundy: #421522;
  --burgundy-deep: #301019;
  --maroon: #632535;
  --ivory: #f5efe3;
  --warm-neutral: #c6b6a5;
  --font-arabic: "Times New Roman", serif;
  --font-latin: Georgia, serif;
}

* { box-sizing: border-box; }

html {
  background: var(--burgundy-deep);
  color: var(--ivory);
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-block-size: 100vh;
  min-block-size: 100svh;
  font-family: var(--font-arabic);
  line-height: 1.7;
}

[lang="en"] { font-family: var(--font-latin); }
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 4px;
}

.invitation-shell { inline-size: 100%; }
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* One global safe-area-aware control, enabled only for an approved track. */
.audio-control {
  position: fixed;
  inset-inline-end: max(0px, env(safe-area-inset-left), env(safe-area-inset-right));
  inset-block-start: max(16px, calc(env(safe-area-inset-top) + 10px));
  z-index: 10;
  min-inline-size: 44px;
  min-block-size: 44px;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
}
/* Keep the full 44px touch target. Paint only inside the empty page gutter. */
.audio-control::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 28px; height: 28px; box-sizing: border-box;
  border: 1px solid rgb(245 239 227 / .4); border-radius: 50%;
  background: rgb(48 16 25 / .78);
}
.audio-control__icon { inline-size: 20px; block-size: 20px; position: absolute; left: 4px; top: 12px; }
.audio-control__muted { display: none; }
.audio-control[data-state="paused"] .audio-control__muted { display: block; }

[data-copy] { white-space: pre-line; overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@font-face {
  font-family: "UTOPIA Amiri";
  src: url("../assets/fonts/Amiri-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* A proportional 9:16 artboard shared by every layer. Portrait phones use
   the smallest cover scale; wider screens retain the full composition. */
html.opening-active, .opening-active body { overflow: hidden; overscroll-behavior: none; }
.opening {
  position: fixed;
  inset: 0;
  z-index: 5;
  inline-size: 100%;
  block-size: 100vh;
  block-size: 100svh;
  block-size: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #301019;
  opacity: 1;
}
.opening__media {
  /* Approved 1080px final frame: inner jambs x=308 and x=788, center x=548.
     Artwork-relative alignment also applies when this portrait artboard sits
     inside a wider editor preview; it must never depend on viewport width. */
  --arch-content-left: 28.518518519%;
  --arch-content-right: 72.962962963%;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, 56.25vh);
  width: min(100vw, 56.25svh);
  width: min(100vw, 56.25dvh);
  aspect-ratio: 9 / 16;
  transform: translate(-50%, -50%);
}
@media (max-width: 600px) and (orientation: portrait) {
  .opening__media {
    width: max(100vw, 56.25vh);
    width: max(100vw, 56.25svh);
    width: max(100vw, 56.25dvh);
  }
}
.opening__media > img, .opening__media > video, .opening__media > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
[data-curtain-video] {
  opacity: 0;
  transition: opacity var(--opening-dissolve-duration, 300ms) cubic-bezier(.22,.61,.36,1);
}
.opening[data-frame-ready="true"] [data-curtain-video] { opacity: 1; }
[data-curtain-final] { z-index: 1; }
[data-curtain-trigger] {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #eee2cf;
  cursor: pointer;
  touch-action: manipulation;
}
[data-curtain-trigger]:focus-visible { outline-offset: -6px; }
[data-curtain-trigger]:disabled { cursor: default; }
.opening__instruction {
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  right: max(20px, env(safe-area-inset-right));
  bottom: max(6%, calc(env(safe-area-inset-bottom) + 22px));
  font-family: "UTOPIA Amiri", var(--font-arabic);
  font-synthesis: none;
  font-weight: 400;
  font-size: clamp(19px, 5vw, 23px);
  line-height: 1.8;
  text-align: center;
  animation: invitation-breathe 3.6s ease-in-out infinite;
}
.opening__identity {
  position: absolute;
  z-index: 2;
  left: calc((var(--arch-content-left) + var(--arch-content-right)) / 2);
  top: 34%;
  width: 42%;
  transform: translateX(-50%);
  text-align: center;
  color: #581B27;
}
.opening__monogram-frame {
  display: flow-root;
  /* The supplied slender mark has large transparent canvas margins. Reserve
     the previous visible height without trimming or altering its PNG pixels. */
  width: 74.807326% ;
  margin-inline: auto;
}
[data-monogram] {
  display: block;
  position: relative;
  /* Exact source alpha centroid, including the pixel-center half offset. */
  left: -.61322782%;
  width: 100%;
  height: auto;
  margin-block-start: -58.14771395%;
  margin-block-end: -56.27198124%;
}
[data-opening-title] {
  margin: 12% 0 0;
  font-family: "UTOPIA Amiri", var(--font-arabic);
  font-synthesis: none;
  font-size: clamp(25px, 6.5vw, 34px);
  font-weight: 400;
  line-height: 1.8;
  white-space: nowrap;
}
[data-monogram], [data-opening-title] { opacity: 0; transform: translateY(7px); }
.opening[data-state="revealing"] [data-monogram],
.opening[data-state="complete"] [data-monogram],
.opening[data-state="transitioning"] [data-monogram] {
  animation: invitation-reveal 800ms cubic-bezier(.22,.61,.36,1) both;
}
.opening[data-state="revealing"] [data-opening-title],
.opening[data-state="complete"] [data-opening-title],
.opening[data-state="transitioning"] [data-opening-title] {
  animation: invitation-reveal 800ms 250ms cubic-bezier(.22,.61,.36,1) both;
}
.opening[data-state="transitioning"] { pointer-events: none; }
/* Swan Lake's incoming-scene variable; both scenes remain fully opaque. */
[data-opening-entry="true"] {
  transform: translate3d(0, var(--opening-entry-y, 100%), 0);
  will-change: transform;
  pointer-events: none;
}
@keyframes invitation-breathe { 0%, 100% { opacity: .72; } 50% { opacity: .94; } }
@keyframes invitation-reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .opening { transition: none; }
  .opening [data-curtain-video] { transition: none; }
  .opening__instruction { animation: none; }
  .opening [data-monogram], .opening [data-opening-title] { animation: none !important; opacity: 1; transform: none; }
}

/* Section 2: supplied original PNGs. No color grading or invented paper faces. */
.envelope {
  position: fixed; inset: 0; z-index: 1; width: 100%;
  height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate;
  overscroll-behavior: none; background: #3f221b; color: #581b27;
}
/* Scene handoff focuses this container; Safari must not outline its boundary. */
.envelope:focus { outline: none; }
.envelope .envelope__backdrop {
  /* Reuse Venue's parchment, frame and botanical styles, without its content layout. */
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; min-height: 0; padding: 0; pointer-events: none;
}
.envelope__filter-defs { position: absolute; pointer-events: none; }
.envelope__scene { position: absolute; inset: 0; z-index: 1; }
.envelope__assembly {
  position: absolute; left: 50%; bottom: calc(25.8% + clamp(25px, 7.6vw, 33px));
  width: min(90vw,380px,52vh); width: min(90vw,380px,52dvh);
  aspect-ratio: 1312 / 850; transform: translateX(-50%);
  container-type: inline-size;
}
.envelope__open, .envelope__pocket, .envelope__closed,
.envelope__fastening, .envelope__card-art {
  position: absolute; display: block; width: 100%; height: auto;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.envelope__open, .envelope__pocket {
  bottom: 0; left: 0; overflow: visible; opacity: 0;
}
.envelope__open { z-index: 1; }
.envelope__card-viewport {
  position: absolute; inset: -190% 2% 2%; z-index: 2;
  overflow: hidden; isolation: isolate; contain: paint; pointer-events: none;
}
.envelope__card-slot {
  /* Restore native sleeve coordinates inside the enlarged rectangular clip.
     Keep the bottom clip safely inside the PNG's anti-aliased paper edge. */
  position: absolute; left: -2cqw; top: calc(100cqw * 850 / 1312 * 1.9);
  width: 100cqw; height: calc(100cqw * 850 / 1312); pointer-events: none;
}
.envelope__card {
  position: absolute; left: 3%; top: 46%; width: 94%;
  aspect-ratio: 1336 / 804; visibility: hidden;
}
.envelope__card-art { inset: 0; width: 100%; height: 100%; overflow: hidden; }
.envelope__poem {
  position: absolute; left: 17%; top: 19%; width: 66%; height: 62%;
  margin: 0; display: flex; flex-direction: column; justify-content: center;
  color: #581b27; font-family: "UTOPIA Amiri",serif; font-weight: 400;
  font-synthesis: none; font-size: clamp(16px,4.8cqw,19px);
  line-height: 1.75; text-align: center; letter-spacing: normal;
}
.envelope__poem span { display: block; white-space: nowrap; }
.envelope__pocket { z-index: 3; }
.envelope__closed { inset: 0; z-index: 4; height: 100%; overflow: hidden; }
.envelope__fastening {
  z-index: 5; left: 0; top: 42.1%; width: 100%;
  overflow: visible;
}
.envelope__trigger {
  position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 0; background: transparent;
  cursor: pointer; touch-action: manipulation;
}
.envelope__trigger:disabled { cursor: default; }
.envelope__trigger:focus-visible { outline-color: #581b27; outline-offset: 7px; }
.envelope__instruction {
  position: absolute; left: 20%; width: 60%; top: 78%; margin: 0;
  text-align: center; color: inherit; font-family: "UTOPIA Amiri",serif;
  font-size: clamp(19px,5vw,23px); font-weight: 400; font-synthesis: none;
  line-height: 1.6; pointer-events: none;
  transition: opacity 200ms ease;
}
.envelope[data-state="opening"] .envelope__instruction,
.envelope[data-state="open"] .envelope__instruction { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .envelope__instruction { transition: none; } }

/* Romantic heritage: a continuous paper leaf, followed by the original scene. */
.formal {
  --formal-ivory: #ebd3bc;
  --formal-ink: #581b27;
  --formal-rule: #9b8061;
  position: relative;
  isolation: isolate;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  inline-size: 100%;
  overflow: hidden;
  color-scheme: light;
  background:
    radial-gradient(ellipse at 0% 8%, rgb(137 105 69 / .045), transparent 55%),
    radial-gradient(ellipse at 88% 96%, rgb(255 244 224 / .08), transparent 58%),
    var(--formal-ivory);
  color: var(--formal-ink);
  font-family: "UTOPIA Amiri", serif;
  font-weight: 400;
  font-synthesis: none;
}
.formal__paper {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  /* Original handmade-paper texture, including its reference-matched pigment. */
  opacity: .6; pointer-events: none;
}
.formal::before {
  content: ""; position: absolute; inset: 55% 0 0;
  background: linear-gradient(to bottom, transparent, #e9dfce);
  pointer-events: none;
}
.formal__frame {
  position: absolute; z-index: 2;
  inset: max(20px, env(safe-area-inset-top)) max(13px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(13px, env(safe-area-inset-left));
  pointer-events: none;
}
.formal__frame-lines { display: block; width: 100%; height: 100%; fill: none; stroke: var(--formal-rule); stroke-width: .65; stroke-opacity: .66; }
.formal__frame-inner { stroke-width: .4; stroke-opacity: .42; }
.formal__ornament { position: absolute; width: clamp(42px, 12vw, 52px); height: auto; aspect-ratio: 1; fill: none; stroke: var(--formal-rule); stroke-width: .65; stroke-linecap: round; stroke-linejoin: round; }
.formal__ornament--tl { top: 0; left: 0; }
.formal__ornament--tr { top: 0; right: 0; transform: rotate(90deg); }
.formal__ornament--br { bottom: 0; right: 0; transform: rotate(180deg); }
.formal__ornament--bl { bottom: 0; left: 0; transform: rotate(270deg); }
.formal__botanical {
  position: absolute; z-index: 3; display: block;
  block-size: auto; overflow: hidden; pointer-events: none;
}
.formal__botanical--upper {
  top: max(4px, env(safe-area-inset-top));
  left: max(3px, env(safe-area-inset-left));
  inline-size: clamp(164px, 44vw, 194px);
  aspect-ratio: 1140 / 880;
}
.formal__botanical--lower {
  bottom: max(10px, env(safe-area-inset-bottom)); right: 9px;
  inline-size: clamp(126px, 36vw, 158px);
  aspect-ratio: 1116 / 724;
}
.formal__page {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  inline-size: min(100%, 520px);
  margin-inline: auto;
  padding-block-end: max(24px, calc(env(safe-area-inset-bottom) + 12px));
}
.formal__letter {
  position: relative; z-index: 1;
  inline-size: min(100%, 470px);
  /* Swan's stationery spacing, tightened around the existing type/scene. */
  padding: max(clamp(100px, 25vw, 112px), calc(env(safe-area-inset-top) + 96px)) max(30px, calc(env(safe-area-inset-right) + 18px)) 10px max(30px, calc(env(safe-area-inset-left) + 18px));
  text-align: center;
}
.formal__copy {
  margin: 0 auto;
  /* Keep the introduction clear of the upper floral on wider phones; a
     single long Arabic line otherwise reaches into its left-hand leaves. */
  max-inline-size: 330px;
  font-size: clamp(19px, 4.85vw, 21px);
  line-height: 1.95;
}
.formal__copy span { display: block; text-wrap: balance; }
.formal__names {
  margin: 12px auto 0;
  inline-size: min(100%, 148.8px);
  /* Reserve the previous 248 × 1024 / 1536 names height so the couple,
     scene and surrounding paper decorations retain their positions. */
  min-block-size: 165.333333px;
  display: grid;
  align-items: center;
}
.formal__names img {
  display: block; inline-size: 100%; block-size: auto;
  /* The approved embracing composition has equal cropped canvas margins.
     Original stroke pixels and natural proportions are retained. */
  position: relative; top: -15px; object-fit: contain;
}
.formal__scene {
  position: relative; isolation: isolate; flex: none;
  inline-size: 100%; aspect-ratio: 25 / 23;
  margin-block-start: 0;
}
/* Keep the scene in its reserved flow box so it clears the names by the
   letter's existing 10px bottom padding, including on short phone screens. */
.formal__scene::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 44% 2% at 50% 90%, rgb(71 64 52 / .045), transparent 76%),
    radial-gradient(ellipse 24% 1.5% at 49% 97%, rgb(71 64 52 / .035), transparent 76%);
  pointer-events: none;
}
.formal__setting, .formal__couple {
  position: absolute; display: block; block-size: auto;
  object-fit: contain; pointer-events: none;
}
.formal__setting { z-index: 1; bottom: 5%; left: 3%; inline-size: 94%; }
.formal__couple { z-index: 2; bottom: 3.5%; left: 16%; inline-size: 58%; }
/* Reveal each editorial group at its scroll position. The complete scene
   moves together; the couple has no separate animation or distortion. */
.formal[data-motion="armed"] [data-formal-reveal] {
  opacity: 0; transform: translateY(6px);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1);
}
.formal[data-motion="armed"] .formal__names { transition-duration: 800ms; }
.formal[data-motion="armed"] .formal__scene { transition-duration: 850ms; }
.formal[data-motion="armed"] [data-formal-reveal].is-visible { opacity: 1; transform: translateY(0); }
/* Keep the relocated corner in the original scene's 850ms reveal, while its
   position follows the paper border. Older engines retain the visible artwork. */
@supports selector(:has(*)) {
  .formal[data-motion="armed"] > .formal__botanical--lower { opacity: 0; transform: translateY(6px); transition: opacity 850ms cubic-bezier(.22,.61,.36,1), transform 850ms cubic-bezier(.22,.61,.36,1); }
  .formal[data-motion="armed"]:has(.formal__scene.is-visible) > .formal__botanical--lower { opacity: 1; transform: translateY(0); }
}

/* Enter native document flow only after the existing envelope motion finishes.
   The fixed opening/slide and the envelope timeline remain unchanged. */
.invitation-shell[data-formal-flow="ready"] > .envelope { position: relative; inset: auto; }

@media (prefers-reduced-motion: reduce) {
  .formal [data-formal-reveal], .formal > .formal__botanical--lower { transition: none !important; transform: none !important; opacity: 1 !important; }
}

@font-face {
  font-family: "UTOPIA Date Cormorant";
  src: url("../assets/fonts/CormorantGaramond-Latin.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "UTOPIA Date Bodoni";
  src: url("../assets/fonts/BodoniModa-Latin.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
/* Sizing baseline: Swan Lake styles.css:1594–1609,1694–1729.
   Actual measurements: 18px outer inset, 22px inner inset, 100svh folio,
   20svh top reserve and 35svh lower reserve. No section aspect ratio. */
.save-date {
  --date-safe-top: env(safe-area-inset-top, 0px);
  --date-safe-right: env(safe-area-inset-right, 0px);
  --date-safe-bottom: env(safe-area-inset-bottom, 0px);
  --date-safe-left: env(safe-area-inset-left, 0px);
  --date-top: max(18px, var(--date-safe-top));
  --date-bottom: max(18px, var(--date-safe-bottom));
  --date-art-height: clamp(270px, 35svh, 335px);
  --date-ink: #581b27;
  --date-rule: #a0907a;
  --date-paper: #ebd3bc;
  --date-frame-rule: #9b8061;
  position: relative; isolation: isolate;
  width: 100%; max-width: 100%; min-width: 0;
  min-height: 100svh; box-sizing: border-box;
  padding: var(--date-top) max(18px, var(--date-safe-right)) var(--date-bottom) max(18px, var(--date-safe-left));
  background:
    radial-gradient(ellipse at 0% 8%, rgb(137 105 69 / .045), transparent 55%),
    radial-gradient(ellipse at 88% 96%, rgb(255 244 224 / .08), transparent 58%), var(--date-paper);
  color: var(--date-ink); color-scheme: light;
  font-family: "UTOPIA Amiri", serif; font-weight: 400; font-synthesis: none;
}
.save-date *, .save-date *::before, .save-date *::after { box-sizing: border-box; }
.save-date__paper {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 100%; min-width: 0;
  min-height: calc(100svh - var(--date-top) - var(--date-bottom));
  padding: clamp(164px, 20svh, 188px) 22px calc(var(--date-art-height) + 12px);
  /* Keep the original 1px box-model inset; the SVG paints the frame. */
  border: 1px solid transparent; border-radius: 2px;
  background: transparent; text-align: center;
}
.save-date__texture {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; opacity: .6;
  pointer-events: none;
}
.save-date__frame { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.save-date__frame-lines { display: block; width: 100%; height: 100%; fill: none; stroke: var(--date-frame-rule); stroke-width: .65; stroke-opacity: .66; }
.save-date__frame-inner { stroke-width: .4; stroke-opacity: .42; }
/* Interlaced geometric corner bands stay within the existing artwork gutter. */
.save-date__corner { position: absolute; width: clamp(26px, 7vw, 30px); height: auto; aspect-ratio: 1; fill: none; stroke: var(--date-frame-rule); stroke-width: .65; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.save-date__corner--tl { top: 0; left: 0; }
.save-date__corner--tr { top: 0; right: 0; transform: rotate(90deg); }
.save-date__corner--br { bottom: 0; right: 0; transform: rotate(180deg); }
.save-date__corner--bl { bottom: 0; left: 0; transform: rotate(270deg); }
.save-date__ribbon {
  position: absolute; top: 3px; left: 0; z-index: 2;
  display: block; width: 100%; max-width: 100%; height: auto;
  object-fit: contain; pointer-events: none;
}
.save-date__heading { position: relative; z-index: 1; }
.save-date__intro { margin: 0 0 7px; font-size: 1rem; line-height: 1.7; }
.save-date__heading h2 {
  margin: 0; font-family: "UTOPIA Date Bodoni", Georgia, serif;
  font-size: 1.3rem; font-weight: 500; line-height: 1.5;
  letter-spacing: .12em; text-indent: .12em;
}
.save-date__rule { position: relative; width: 65px; height: 1px; margin: 12px auto 0; background: var(--date-rule); opacity: .8; }
.save-date__rule::after { content: ""; position: absolute; top: -2px; left: calc(50% - 2.5px); width: 5px; height: 5px; border: .65px solid var(--date-rule); background: var(--date-paper); transform: rotate(45deg); }
.save-date__calendar { display: flex; justify-content: center; align-items: baseline; width: 100%; max-width: 100%; gap: 9px; margin: 14px auto 10px; white-space: nowrap; }
.save-date__day { font-family: "UTOPIA Date Bodoni", Georgia, serif; font-size: 1.75rem; font-weight: 400; line-height: 1.2; }
.save-date__month { font-family: "UTOPIA Date Cormorant", Georgia, serif; font-size: 1rem; font-weight: 500; line-height: 1.4; letter-spacing: .11em; text-indent: .11em; }
.save-date__year { font-family: "UTOPIA Date Cormorant", Georgia, serif; font-size: 1.02rem; font-weight: 500; line-height: 1.4; letter-spacing: .12em; }
.save-date__details { position: relative; z-index: 1; display: grid; gap: 8px; }
.save-date__arabic p { margin: 0; font-size: 1.075rem; line-height: 1.6; }
.save-date__english p { margin: 0; font-family: "UTOPIA Date Cormorant", Georgia, serif; font-size: 1.025rem; font-weight: 500; line-height: 1.5; }
.save-date__art {
  position: absolute; left: 9px; bottom: 9px; z-index: 0;
  width: calc(100% - 18px); max-width: 100%; height: var(--date-art-height);
  pointer-events: none;
}
.save-date__art img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.save-date[data-motion="armed"] [data-date-reveal] { opacity: 0; transform: translateY(5px); transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1); }
.save-date[data-motion="armed"] .save-date__ribbon { transform: translateY(-5px); }
.save-date[data-motion="armed"] [data-date-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .save-date [data-date-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Measured Swan Lake baseline: styles.css 1475–1575. Wud artwork/colors only. */
.henna-countdown {
  --countdown-paper: #ebd3bc; --countdown-ink: #581b27; --countdown-rule: #9b8061;
  --formal-rule: var(--countdown-rule);
  --countdown-safe-top: env(safe-area-inset-top, 0px);
  --countdown-safe-bottom: env(safe-area-inset-bottom, 0px);
  --countdown-safe-left: env(safe-area-inset-left, 0px);
  --countdown-safe-right: env(safe-area-inset-right, 0px);
  --countdown-top: max(18px, var(--countdown-safe-top));
  --countdown-bottom: max(18px, var(--countdown-safe-bottom));
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  width: 100%; max-width: 100%; min-width: 0; min-height: 100svh;
  box-sizing: border-box;
  padding: var(--countdown-top) max(16px, var(--countdown-safe-right)) var(--countdown-bottom) max(16px, var(--countdown-safe-left));
  background:
    radial-gradient(ellipse at 0% 8%, rgb(137 105 69 / .045), transparent 55%),
    radial-gradient(ellipse at 88% 96%, rgb(255 244 224 / .08), transparent 58%), var(--countdown-paper);
  color: var(--countdown-ink); color-scheme: light;
  font-family: "UTOPIA Amiri", serif; font-weight: 400; font-synthesis: none;
}
.henna-countdown *, .henna-countdown *::before, .henna-countdown *::after { box-sizing: border-box; }
.henna-countdown__panel {
  position: relative; isolation: isolate; width: 100%; max-width: 100%; min-width: 0;
  min-height: calc(100svh - var(--countdown-top) - var(--countdown-bottom));
  padding: clamp(92px, 11svh, 110px) clamp(12px, 3.8vw, 22px) 60px;
  display: grid; justify-items: center; align-content: start; gap: 12px;
  text-align: center;
}
.henna-countdown__texture { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .6; pointer-events: none; }
.henna-countdown .formal__frame { inset: 0; z-index: 1; }
/* Restore the exact pre-refinement widths recorded in the countdown backup. */
.henna-countdown__botanical { position: absolute; z-index: 2; height: auto; overflow: hidden; pointer-events: none; }
.henna-countdown__botanical--upper { top: clamp(-18px, -4vw, -14px); right: 2px; width: min(33%, 130px); aspect-ratio: 880 / 1140; }
.henna-countdown__botanical--lower { bottom: clamp(-14px, -3vw, -10px); left: -2px; width: min(31%, 122px); aspect-ratio: 724 / 1116; }
.henna-countdown__intro, .henna-countdown h2, .henna-countdown__art,
.henna-countdown__timer, .henna-countdown__closing { position: relative; z-index: 3; }
.henna-countdown__intro { margin: 0; font-size: clamp(1.35rem, 6.2vw, 1.65rem); font-weight: 400; line-height: 1.6; }
.henna-countdown__art { display: block; width: min(100%, clamp(260px, 72vw, 320px)); max-width: 100%; height: auto; object-fit: contain; margin: 0; }
.henna-countdown h2 { margin: 0; font: 400 clamp(2.2rem, 9.2vw, 2.7rem)/1.2 "UTOPIA Date Cormorant", Georgia, serif; }
.henna-countdown__rule { position: relative; z-index: 3; width: 110px; height: 1px; margin: 0 auto; background: var(--countdown-rule); opacity: .85; }
.henna-countdown__rule::after { content: ""; position: absolute; left: calc(50% - 2.5px); top: -2px; width: 5px; height: 5px; border: .7px solid var(--countdown-rule); background: var(--countdown-paper); transform: rotate(45deg); }
.henna-countdown__timer { width: 100%; min-width: 0; }
.henna-countdown__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; min-width: 0; gap: 8px; margin: 0; }
.henna-countdown__unit {
  --countdown-arch-height: clamp(70px, 19vw, 82px);
  position: relative; min-width: 0; display: grid; justify-items: center;
  grid-template-rows: var(--countdown-arch-height) auto auto;
  align-items: center; align-content: start; gap: 0;
}
.henna-countdown__unit::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--countdown-arch-height); border: 1px solid var(--countdown-rule); border-radius: 999px 999px 2px 2px; pointer-events: none; }
.henna-countdown__unit strong { display: block; width: 100%; min-width: 0; font: 400 clamp(1.95rem, 8.6vw, 2.6rem)/1 "UTOPIA Date Cormorant", Georgia, serif; font-variant-numeric: tabular-nums; }
.henna-countdown__unit span { margin-top: 8px; font: 400 clamp(.6rem, 2.65vw, .7rem)/1.4 "UTOPIA Date Cormorant", Georgia, serif; letter-spacing: .065em; }
.henna-countdown__unit small { margin-top: 2px; font-size: .9rem; line-height: 1.5; }
.henna-countdown__closing { display: grid; justify-items: center; gap: 12px; width: 100%; margin-top: 8px; }
.henna-countdown__closing p { margin: 0; font-size: clamp(1.1rem, 4.8vw, 1.3rem); line-height: 1.7; }
.henna-countdown__ornament { display: block; width: 90px; height: 24px; stroke: var(--countdown-rule); stroke-width: .8; }
.henna-countdown__complete { margin: 0; padding: 24px 0; font-size: 1.3rem; line-height: 1.7; }
.henna-countdown[data-motion="armed"] [data-countdown-reveal] { opacity: 0; transform: translateY(6px); transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1); }
.henna-countdown[data-motion="armed"] [data-countdown-reveal].is-visible { opacity: 1; transform: translateY(0); }
.henna-countdown__unit:nth-child(2) { transition-delay: 70ms !important; }
.henna-countdown__unit:nth-child(3) { transition-delay: 140ms !important; }
.henna-countdown__unit:nth-child(4) { transition-delay: 210ms !important; }
@media (prefers-reduced-motion: reduce) {
  .henna-countdown [data-countdown-reveal] { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* Exact layout baseline: Swan Lake styles.css:1731–1858. Wud identity only. */
.wud-venue {
  --venue-paper: #ebd3bc; --venue-ink: #581b27; --venue-brass: #9b8061;
  --formal-rule: var(--venue-brass);
  --venue-safe-top: env(safe-area-inset-top, 0px); --venue-safe-bottom: env(safe-area-inset-bottom, 0px);
  --venue-safe-left: env(safe-area-inset-left, 0px); --venue-safe-right: env(safe-area-inset-right, 0px);
  position: relative; isolation: isolate; display: block; overflow: hidden; overflow: clip;
  width: 100%; max-width: 100%; min-width: 0; min-height: 100svh; box-sizing: border-box;
  /* Flowers shift by the safe inset; move the text reservation equally so
     their original clearance survives a notched phone's top safe area. */
  padding: calc(clamp(64px, 8svh, 80px) + var(--venue-safe-top)) max(26px, var(--venue-safe-right)) max(clamp(92px, 12svh, 116px), var(--venue-safe-bottom)) max(26px, var(--venue-safe-left));
  background: radial-gradient(ellipse at 0% 8%, rgb(137 105 69 / .045), transparent 55%), radial-gradient(ellipse at 88% 96%, rgb(255 244 224 / .08), transparent 58%), var(--venue-paper);
  color: var(--venue-ink); color-scheme: light;
  font-family: "UTOPIA Amiri", serif; font-weight: 400; font-synthesis: none;
}
.wud-venue *, .wud-venue *::before, .wud-venue *::after { box-sizing: border-box; }
.wud-venue__texture { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .6; pointer-events: none; }
.wud-venue .formal__frame { inset: max(14px, var(--venue-safe-top)) max(14px, var(--venue-safe-right)) max(14px, var(--venue-safe-bottom)) max(14px, var(--venue-safe-left)); }
.wud-venue__floral { position: absolute; z-index: 3; height: auto; pointer-events: none; overflow: hidden; }
.wud-venue__floral--upper { top: calc(var(--venue-safe-top) - clamp(4px, 1.5vw, 8px)); right: calc(var(--venue-safe-right) + 6px); width: min(42%, 186px); aspect-ratio: 880 / 1140; }
.wud-venue__floral--lower { bottom: calc(var(--venue-safe-bottom) - clamp(4px, 1.5vw, 8px)); left: calc(var(--venue-safe-left) + 2px); width: min(38%, 170px); aspect-ratio: 724 / 1116; }
.wud-venue__card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; min-width: 0; text-align: center; }
.wud-venue__intro { margin: 0; font: 400 clamp(1.15rem, 4.8vw, 1.4rem)/1.7 "UTOPIA Amiri", serif; }
.wud-venue h2 { margin: 6px 0 0; font: 500 clamp(1.8rem, 7.6vw, 2.3rem)/1.2 "UTOPIA Date Bodoni", Georgia, serif; }
.wud-venue__rule { position: relative; flex: none; height: 1px; background: var(--venue-brass); }
.wud-venue__rule::after { content: ""; position: absolute; top: -2px; left: calc(50% - 2.5px); width: 5px; height: 5px; border: .7px solid var(--venue-brass); background: var(--venue-paper); transform: rotate(45deg); }
.wud-venue__rule--title { width: 118px; margin: 14px auto 18px; }
.wud-venue__art { display: block; flex: none; width: calc(100% + 32px); max-width: none; height: clamp(300px, 40svh, 370px); object-fit: contain; object-position: center; margin: -20px -16px -6px; }
.wud-venue__location { display: block; flex: none; width: 22px; height: 28px; margin: 10px auto 8px; color: var(--venue-brass); }
.wud-venue__details { display: grid; width: 100%; gap: 10px; }
.wud-venue__details address { display: grid; gap: 0; margin: 0; font-style: normal; }
.wud-venue__details address[lang="ar"] { font: 400 1.2rem/1.6 "UTOPIA Amiri", serif; }
.wud-venue__details address[lang="ar"] .wud-venue__line--medium { font-size: 1.55rem; }
.wud-venue__details address[lang="ar"] .wud-venue__line--small { font-size: 1.05rem; }
.wud-venue__details address[lang="en"] { font: 500 1.15rem/1.5 "UTOPIA Date Cormorant", Georgia, serif; }
.wud-venue__details address[lang="en"] .wud-venue__line--small { font-size: 1rem; }
.wud-venue__rule--details { width: 100px; margin: 16px auto 0; }
.wud-venue__map {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 10px;
  align-items: center; justify-items: center; gap: 10px;
  width: min(78%, 300px); min-height: 64px; margin: 20px auto 0; padding: 11px 16px;
  border: 1px solid #b39a6d; border-radius: 0; background: var(--venue-ink); color: #f5efe3; text-decoration: none;
}
.wud-venue__map::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgb(199 174 128 / .6); pointer-events: none; }
.wud-venue__map:hover { background: #49151f; }
.wud-venue__map-copy { display: grid; gap: 2px; }
.wud-venue__map span[lang="ar"] { font: 400 1rem/1.55 "UTOPIA Amiri", serif; }
.wud-venue__map span[lang="en"] { font: 500 .95rem/1.4 "UTOPIA Date Cormorant", Georgia, serif; }
.wud-venue__map-pin { width: 22px; height: 28px; }
.wud-venue__map-arrow { width: 10px; height: 18px; }
.wud-venue__map-corner { position: absolute; width: 14px; height: 14px; fill: none; stroke: #c7ae80; stroke-width: 1.2; pointer-events: none; }
.wud-venue__map-corner--tl { top: 3px; left: 3px; }
.wud-venue__map-corner--tr { top: 3px; right: 3px; transform: scaleX(-1); }
.wud-venue__map-corner--bl { bottom: 3px; left: 3px; transform: scaleY(-1); }
.wud-venue__map-corner--br { bottom: 3px; right: 3px; transform: scale(-1); }
.wud-venue[data-motion="armed"] [data-venue-reveal] { opacity: 0; transform: translateY(6px); transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1); }
.wud-venue[data-motion="armed"] [data-venue-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .wud-venue [data-venue-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Approved complete backdrop; the signature follows Swan Lake's final footer. */
.closing {
  position: relative; isolation: isolate; display: grid;
  width: 100%; max-width: 100%; min-width: 0;
  /* Follow the other sections' viewport floor, with a small framing allowance
     that keeps the complete corner ornaments inside the original backdrop. */
  min-height: max(100svh, calc(100vw * 1843 / 853 - clamp(24px, 7vw, 30px)));
  background: #ebd3bc; color: #581b27; color-scheme: light;
  font-family: "UTOPIA Amiri", serif; font-weight: 400; font-synthesis: none;
}
.closing__background {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none;
}
.closing .final-inner {
  grid-area: 1 / 1; position: relative; z-index: 1; min-width: 0; min-height: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(clamp(140px, 19svh, 174px), env(safe-area-inset-top, 0px)) 0 max(7vw, env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.closing__copy { display: grid; gap: clamp(8px, 2.4vw, 10px); width: 64%; }
.closing__copy p { margin: 0; text-wrap: balance; }
.closing__message { font-size: clamp(17px, calc(100vw * 18 / 393), 18px); line-height: 1.5; }
.closing__story { font-size: clamp(19px, calc(100vw * 21 / 393), 21px); line-height: 1.5; }
.closing__children { font-size: clamp(22px, calc(100vw * 24 / 393), 24px); line-height: 1.5; }
.closing__welcome { font-size: clamp(25px, calc(100vw * 28 / 393), 28px); line-height: 1.5; }
.closing__rule { flex: none; width: 82px; height: 1px; margin: clamp(12px, 3.6vw, 16px) auto 0; background: #9b8061; opacity: .8; }
.closing .designer-credit {
  display: grid; justify-items: center; gap: 4px; width: 66%;
  margin-top: clamp(16px, 4.6vw, 20px); color: #7a6c5c;
  font: 400 .8rem/1.4 "UTOPIA Date Cormorant", Georgia, serif;
}
.closing .designer-credit > strong { font-size: 1.08rem; font-weight: 500; color: #6d5140; }
.closing .designer-brand { display: grid; justify-items: center; gap: 4px; margin-top: 8px; }
.closing .designer-divider { display: none; }
.closing .designer-brand-name { font-size: .88rem; letter-spacing: .24em; color: #786552; }
.closing .designer-tagline { font-size: .74rem; color: #807160; }
.closing .designer-social a { font-size: .72rem; color: #807160; }
.closing .designer-social a { display: inline-flex; align-items: center; gap: 5px; }
.closing .designer-credit a { color: inherit; text-decoration: none; }
.closing .designer-credit a:hover { text-decoration: underline; }
.closing .designer-credit a:focus-visible { outline-color: currentColor; }
.closing__arrangement {
  display: block; width: min(72%, 330px); height: auto; object-fit: contain;
  margin: clamp(12px, 3.6vw, 18px) auto 0; pointer-events: none;
}
.closing[data-motion="armed"] [data-closing-reveal] {
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
}
.closing[data-motion="armed"] [data-closing-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .closing [data-closing-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}