:root {
  --ink-olive: #4D523E;
  --olive-deep: #3B4232;
  --wax-wine: #642F31;
  --ivory: #F5EFE3;
  --cream: #EDE1CE;
  --warm-white: #FAF7F1;
  --antique-gold: #A98B61;
  --deep-brown: var(--ink-olive);
  --soft-brown: var(--ink-olive);
  --muted-text: #746A56;
  --olive-shadow: #72745B;
  --rose-white: var(--ivory);
  --lux-ivory: var(--ivory);
  --lux-cream: var(--cream);
  --lux-antique: var(--antique-gold);
  --lux-brown: var(--ink-olive);
  --paper-texture: none;
  --stationery-ivory: #F2EBDD;
  --stationery-grain: 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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%2385745d' opacity='.045' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

html.invitation-flow { scrollbar-gutter: stable; }
html.opening-screen-active .invite-shell { opacity: 0; pointer-events: none; }
html.opening-screen-entering .invite-shell {
  opacity: 1;
  transform: translate3d(0, calc(var(--opening-entry-y, 0svh) - var(--opening-entry-origin, 0px)), 0);
  will-change: transform;
}
html.opening-flow-locked,
html.opening-flow-locked body,
html.envelope-flow-opening,
html.envelope-flow-opening body { overflow: hidden; overscroll-behavior: none; }
html.envelope-flow-locked .progress-dot[aria-disabled="true"] { pointer-events: none; }
/* Disabled navigation must let taps reach the ribbon beneath it. */
html.envelope-flow-locked .progress { pointer-events: none; }
html.envelope-flow-locked .progress-dot:not([aria-disabled="true"]) { pointer-events: auto; }

html,
body,
.desktop-stage { background: #E5DED2; }

body { color: var(--ink-olive); }

.invite-shell,
:where(.section) { background: var(--ivory); color: var(--ink-olive); }
/* Matte ivory and painterly artwork replace the previous colored light pools. */
.section { background-image: var(--stationery-grain); }

.section::before {
  content: ""; position: absolute; inset: 18px; border: 1px solid rgba(169,139,97,.7);
  border-radius: 12px 3px; pointer-events: none; z-index: 1;
}
.frame-corner { position: absolute; width: 18px; height: 18px; z-index: 1; pointer-events: none; color: var(--antique-gold); }
.frame-corner svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(232,202,150,.14)); }
.frame-corner.tl { top: 18px; left: 18px; }
.frame-corner.tr { top: 18px; right: 18px; transform: rotate(90deg); }
.frame-corner.br { bottom: 18px; right: 18px; transform: rotate(180deg); }
.frame-corner.bl { bottom: 18px; left: 18px; transform: rotate(270deg); }
.section::after {
  content: ""; position: absolute; inset: 23px; border: 1px solid rgba(169,139,97,.35);
  border-radius: 3px 12px; pointer-events: none; z-index: 1;
}

/* Standalone wedding date, grouped like printed stationery. */
.date-section { padding: 90px 32px; }
.calendar-panel { width: 100%; position: relative; text-align: center; }
.calendar-panel h2 { font: 400 1.55rem/1.25 var(--english-display-font); }
.calendar-card { width: 100%; display: flex; flex-direction: column; align-items: center; margin: 24px auto 22px; background: transparent; }
.calendar-day { order: -1; padding: 0; color: var(--ink-olive); font: 400 clamp(5rem, 23vw, 7.2rem)/1.05 var(--english-display-font); }
.calendar-month { padding: 10px 0 3px; color: var(--ink-olive); background: transparent; font: 500 1.1rem/1.4 var(--english-font); text-transform: uppercase; letter-spacing: .19em; }
.calendar-year { padding: 0; font: 500 1rem/1.4 var(--english-font); letter-spacing: .12em; }
.date-copy { display: grid; gap: 14px; }
.date-copy div[lang="ar"] { font-family: var(--arabic-font); }
.date-copy p { margin: 0; font-size: 1.05rem; line-height: 1.65; }
.date-copy div[lang="en"] { font-family: var(--english-font); }
.date-copy div[lang="en"] p { font-size: .96rem; line-height: 1.5; }


/* Couple identity: one deliberate hierarchy, with natural Arabic shaping. */
.names-section { padding: 174px 40px 226px; }
.names-card { position: relative; z-index: 2; width: 100%; min-width: 0; text-align: center; }
.names-logo { display: block; width: 108px; height: auto; margin: 0 auto 24px; filter: brightness(0) saturate(100%) invert(94%) sepia(13%) saturate(319%); }
.family-invitation { font-family: var(--arabic-font); font-size: clamp(.98rem, 3.7vw, 1.13rem); line-height: 1.8; }
.family-invitation p { margin: 0; }
.arabic-names { position: relative; display: flex; justify-content: center; align-items: center; height: 1.55em; margin: 28px 0 12px; font: 700 clamp(2.7rem, 10vw, 3.7rem)/1.55 "Aref Ruqaa", "Amiri", "Noto Naskh Arabic", serif; letter-spacing: 0; }
/* Native-resolution, pre-rendered ink avoids SVG filter rasterization on phones. */
.arabic-names-artwork { position: relative; top: -4px; flex: none; display: block; width: auto; height: calc(100% + 20px); max-width: 95%; object-fit: contain; }
.english-names { position: relative; top: 10px; display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: .3em; font: 500 clamp(1.45rem, 5.9vw, 1.95rem)/1.35 var(--english-font); }
.english-names small { font-size: .64em; }
.names-card .gold-rule { box-shadow: 0 1px 3px rgba(224,192,141,.15); width: 126px; margin: 28px auto 0; }
@media (max-width: 340px) {
  .names-section { padding-inline: 34px; }
  .arabic-names { margin-top: 20px; }
}


/* Four separate cells keep every number and label legible at 375px. */
.countdown-section .paper-inner { width: 100%; padding: 50px 18px 88px; overflow: visible; }
.countdown-section h2 { font-size: clamp(1.75rem, 7vw, 2.2rem); }
.countdown-section .time-box { padding: 20px 2px 16px; }
.countdown-section .time-box strong { font-size: clamp(1.8rem, 6.8vw, 2.4rem); }
.countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 28px; min-width: 0; }
.time-box { min-width: 0; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 16px 2px 12px; border: 1px solid rgba(169,139,97,.65); border-radius: 4px; }
.time-box strong { display: block; min-width: 0; font: 500 clamp(1.55rem, 6vw, 2.1rem)/1.15 var(--english-font); font-variant-numeric: tabular-nums; }
.time-box span { margin-top: 4px; font-size: clamp(.65rem, 2.4vw, .8rem); line-height: 1.2; }
.time-box small { font-family: var(--arabic-font); font-size: .78rem; line-height: 1.35; }


/* Existing layered envelope; GSAP owns its animated transforms and visibility. */
.envelope-section { padding: 96px 38px 132px; }
.envelope-scene { width: 100%; max-width: 410px; position: relative; z-index: 2; text-align: center; perspective: 1900px; transform-style: preserve-3d; }
.envelope-scene h1 { display: grid; gap: 8px; margin: 0 0 clamp(136px,36vw,174px); color: var(--ivory); font: 400 1.18rem/1.45 var(--english-font); }
.envelope-scene h1 span[lang="ar"] { font: 400 clamp(1.6rem, 6vw, 2rem)/1.6 var(--arabic-font); }
.envelope-button { appearance: none; -webkit-appearance: none; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ivory); font: inherit; cursor: pointer; box-shadow: none; perspective: 1900px; transform-style: preserve-3d; }
.envelope-button:focus-visible { outline: 2px solid var(--antique-gold); outline-offset: 12px; }
.envelope { position: relative; display: block; width: min(100%, 380px); aspect-ratio: 1.38; margin: 0 auto; perspective: 1500px; transform-style: preserve-3d; filter: drop-shadow(0 7px 9px rgba(60,54,36,.22)); }
.envelope-back, .invitation-peek, .flap, .wax-seal { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
.envelope-back { inset: 0; z-index: 1; border: 1px solid #C8B99F; border-radius: 2px; background: var(--stationery-grain), #DFD1BA; }
.invitation-peek { z-index: 2; left: 9%; right: 9%; bottom: 8%; height: 80%; display: grid; place-items: start center; padding: 24px 12px; border: 1px solid #BBA789; border-radius: 2px; background: var(--stationery-grain), #F2EADB; color: var(--ink-olive); box-shadow: 0 2px 4px rgba(66,43,25,.12); }
.invitation-peek::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(143,118,82,.4); pointer-events: none; }
.peek-arabic { position: relative; font: 400 clamp(1.2rem,5vw,1.6rem)/1.8 var(--arabic-font); max-width: 100%; }
/* Shadows belong to the unclipped carrier; each paper face owns its triangle. */
.flap { inset: 0; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(73,49,29,.24)); }
.flap::before { content: ""; position: absolute; inset: 0; background: var(--stationery-grain), var(--fold-tone); clip-path: var(--fold-shape); }
.flap-left { z-index: 3; --fold-shape: polygon(0 0,54% 54%,0 100%); --fold-tone: #E4D7C2; }
.flap-right { z-index: 3; --fold-shape: polygon(100% 0,46% 54%,100% 100%); --fold-tone: #E9DDC9; }
.flap-bottom { z-index: 4; --fold-shape: polygon(0 100%,0 99%,50% 48%,100% 99%,100% 100%); --fold-tone: linear-gradient(0deg,#EEE4D2,#E9DDC8); filter: drop-shadow(0 -1px 1px rgba(73,49,29,.2)); }
.flap-top { z-index: 5; --fold-shape: polygon(0 0,100% 0,50% 58%); --fold-tone: linear-gradient(180deg,#F1E8D8,#E5D6BE); transform-origin: 50% 0; backface-visibility: visible; -webkit-backface-visibility: visible; filter: drop-shadow(0 2px 1px rgba(73,49,29,.28)); }
.wax-seal { left: 50%; top: 56%; z-index: 30; width: clamp(56px,15vw,68px); aspect-ratio: 1; display: grid; place-items: center; transform: translate(-50%,-50%); border-radius: 46% 54% 48% 52% / 53% 46% 54% 47%; background: var(--stationery-grain), radial-gradient(ellipse at 29% 18%, rgba(246,211,179,.21), transparent 43%), radial-gradient(ellipse at 70% 80%, rgba(34,7,16,.2), transparent 64%), #642D3B; color: #C7A994; box-shadow: inset 0 1px 1px rgba(245,239,227,.18),inset 0 -2px 3px rgba(30,5,12,.28),0 3px 4px rgba(30,5,12,.3); }
.wax-seal::before { content: "M&T"; font: italic 500 clamp(1.05rem,4vw,1.3rem)/1 var(--english-font); text-shadow: 0 1px 0 rgba(240,213,191,.14),0 -1px 1px rgba(30,5,12,.65); }
.wax-seal::after { content: ""; position: absolute; inset: 11%; border: 1px solid rgba(195,157,137,.4); border-radius: 48% 52% 49% 51%; box-shadow: 0 1px 0 rgba(240,213,191,.07); }
.tap-copy { display: grid; gap: 5px; margin-top: 38px; color: #F3E7D5; font: 400 1rem/1.6 var(--english-font); }
.envelope-button.opening .tap-copy { visibility: hidden; }
.tap-copy span[lang="ar"] { font-family: var(--arabic-font); font-size: 1.1rem; }


h1,
h2,
.overline,
.arabic-copy,
.english-copy,
address,
.celebration-started { color: inherit; }

span,
small,
strong,
p { -webkit-text-fill-color: currentColor; }
[lang="ar"] { letter-spacing: 0; }

/* Shared ivory stationery: content-sized, with a fine inset rule. */
.paper-inner, .calendar-panel, .venue-card { position: relative; z-index: 2; width: 100%; min-width: 0; padding: 38px 24px; color: var(--ink-olive); background: var(--stationery-grain), var(--stationery-ivory); border: 1px solid #C7B79B; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,249,232,.35), 0 2px 4px rgba(60,54,36,.16), 4px 12px 24px rgba(60,54,36,.23); text-align: center; }
.paper-inner::before, .calendar-panel::before, .venue-card::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(143,118,82,.42); border-radius: 2px; pointer-events: none; }
.quran-card { display: grid; gap: 24px; padding: 42px 26px; }
.invitation-card { padding: 42px 24px; overflow: visible; }
.invitation-card .poem-grid { gap: 24px; margin-top: 22px; }


/* Recognizable location mark and a compact, readable address hierarchy. */
.venue-section { padding: 80px 32px; }
.venue-card { width: 100%; text-align: center; }
.venue-card h2 { font: 400 1.55rem/1.3 var(--english-display-font); }
.location-mark { display: block; width: 28px; height: 34px; margin: 24px auto; color: var(--ink-olive); }
.venue-details { display: grid; gap: 18px; }
.venue-details address { display: grid; gap: 5px; margin: 0; font-style: normal; }
.venue-details address[lang="ar"] { font: 400 1.06rem/1.7 var(--arabic-font); }
.venue-details address[lang="ar"] .venue-line-medium { font-size: 1.45rem; }
.venue-details address[lang="ar"] .venue-line-large { font-size: 1.2rem; }
.venue-details address[lang="en"] { font: 400 .98rem/1.45 var(--english-font); }
.venue-line-small { font-size: .9em; }
.maps-button { display: grid; justify-items: center; gap: 2px; width: min(87%, 226px); min-height: 54px; margin: 26px auto 0; padding: 9px 12px; border: 1px solid var(--antique-gold); border-radius: 4px; background: var(--ink-olive); color: var(--ivory); text-decoration: none; }
.maps-button span[lang="ar"] { font: 400 1.05rem/1.5 var(--arabic-font); }
.maps-button span[lang="en"] { font: 400 .84rem/1.4 var(--english-font); }
.maps-button:hover { background: var(--olive-deep); }


.gold-rule,
.designer-divider { background: var(--antique-gold); }

/* Logos share one center; their visibility is controlled exclusively by GSAP. */
.intro-logo { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; margin: auto; width: min(65%, 280px); opacity: 0; }
.intro-logo img { display: block; max-width: 100%; height: auto; object-fit: contain; filter: brightness(0) saturate(100%) invert(94%) sepia(13%) saturate(319%); }
.intro-logo-arabic img { width: 125px; max-height: 32svh; }
.intro-logo-mt img { width: 260px; }
.intro-arabic-label { margin: 22px 0 0; font: 400 1.3rem/1.6 var(--arabic-font); opacity: 0; }


.invitation-monogram { filter: brightness(0) saturate(100%); }

/* Discreet controls remain outside the reading column. */
.music-toggle { position: fixed; right: max(8px, calc((100vw - var(--canvas-width)) / 2 + 8px)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--antique-gold); border-radius: 50%; background: var(--ink-olive); color: var(--ivory); cursor: pointer; }
.music-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.music-icon { display: block; width: 12px; height: 14px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.music-toggle[data-state="paused"] .music-icon, .music-toggle[data-state="unavailable"] .music-icon { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 0; margin-left: 2px; }
.music-toggle[data-state="unavailable"] { opacity: .65; }
.progress { position: fixed; left: max(0px, calc((100vw - var(--canvas-width)) / 2)); top: 50%; z-index: 30; display: grid; gap: 0; transform: translateY(-50%); }
.progress-dot { position: relative; display: grid; place-items: center; width: 24px; height: 26px; }
.progress-dot::before { content: ""; width: 5px; height: 5px; border: 1px solid var(--antique-gold); border-radius: 50%; }
.progress-dot.active::before { background: var(--ivory); border-color: var(--ivory); }


.intro-skip {
  color: var(--ivory); background: var(--ink-olive); border: 1px solid var(--antique-gold);
}

.intro-skip:hover { background: var(--olive-deep); }

/* Closing message and signature form a single quiet composition. */
.final-section { padding: 128px 42px 220px; }
.final-inner { position: relative; width: 100%; z-index: 2; text-align: center; }
.final-heading { margin: 0 0 22px; font: 400 clamp(2rem, 8vw, 2.65rem)/1.5 var(--arabic-font); }
.final-copy p { margin: 0; font: 400 clamp(1.15rem, 4.3vw, 1.4rem)/1.9 var(--arabic-font); }
.final-inner .gold-rule { width: 110px; margin: 30px auto 24px; }
.designer-credit { display: grid; gap: 5px; color: var(--cream); font: 400 .8rem/1.5 var(--english-font); opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.designer-credit.is-visible { opacity: 1; transform: none; }
.designer-credit > strong { font-size: .95rem; font-weight: 500; }
.designer-credit a { color: inherit; text-decoration: none; }
.designer-credit a:hover { text-decoration: underline; }
.designer-brand { display: grid; justify-items: center; gap: 5px; margin-top: 6px; }
.designer-brand-name { letter-spacing: .2em; font-size: .85rem; }
.designer-tagline { font-size: .72rem; }
.designer-social a { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; }
@media (prefers-reduced-motion: reduce) { .designer-credit { opacity: 1; transform: none; transition: none; } }


.designer-brand-name { color: var(--cream); }

/* Corner artwork keeps its natural proportions. */
.floral { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; z-index: 3; }
.floral-top-right { transform-origin: top right; }
.floral-bottom-left { transform-origin: bottom left; }
.intro-section > .floral-top-right { top: 22px; right: 22px; width: min(44%,220px); }
.intro-section > .floral-bottom-left { bottom: 22px; left: 22px; width: min(60%,300px); }
.names-section > .floral-top-right { top: 22px; right: 22px; width: min(43%,215px); }
.names-section > .floral-bottom-left { bottom: 22px; left: 22px; width: min(57%,285px); }
/* The Quran bouquet follows the paper edge; its central reading area stays clear. */
.welcome-section { padding-bottom: 144px; }
/* Both original bouquets follow the same long paper card, including its reveal. */
.invitation-section { padding-top: 144px; padding-bottom: 174px; }
/* Balanced space centers the larger card; its bouquet follows the paper edge. */
.countdown-section { padding: 72px clamp(26px,6%,32px); }
/* Card-mounted accents have a small edge overlap and unrestricted overflow. */
.calendar-panel, .venue-card { overflow: visible; }
.venue-section { padding-bottom: 144px; }
.final-section > .floral-bottom-left { bottom: 22px; left: 22px; width: min(56%,280px); }
.final-section > .floral-top-right { top: 22px; right: 22px; width: min(31%,155px); }



:root {
  --ui-font: "Playfair Display", Georgia, serif;
  --section-pad: clamp(26px, 7vw, 44px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--english-font);

}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--antique-gold);
  outline-offset: 5px;
}

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

[hidden] {
  display: none !important;
}

.desktop-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
}

.invite-shell {
  position: relative;
  width: var(--canvas-width);
  margin: 0 auto;

  scroll-snap-type: y proximity;
}

:where(.section) {
  position: relative;
  min-height: 100svh;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: visible;
  -webkit-transform-style: preserve-3d;
}

.overline {
  margin: 0 0 14px;
  letter-spacing: 0;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  display: grid;
  gap: 7px;
  font-size: clamp(2.1rem, 10vw, 3.4rem);
  line-height: 0.95;
}

h1 span[lang="ar"] {
  font-family: var(--arabic-font);
  font-size: 0.72em;
}

h2 {
  font-size: clamp(2rem, 9vw, 3.15rem);
  line-height: 1;
}

.gold-rule {
  height: 1px;
}

.final-logo {
  display: block;
  max-width: 100%;
  height: auto;
}

.final-logo.failed {
  display: none;
}

.fallback-logo {
  font-family: var(--arabic-font);
  font-size: clamp(2.1rem, 13vw, 4.5rem);
  font-weight: 700;
}

.peek-logo {
  font-family: var(--english-font);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 700;
}

.peek-line {
  width: 54%;
  height: 1px;
}

.peek-line.short {
  width: 34%;
}

.poem-grid {
  display: grid;
}

.arabic-copy p,
.english-copy p {
  margin: 0 0 18px;
}

.arabic-copy p:last-child,
.english-copy p:last-child {
  margin-bottom: 0;
}

.final-logo {
  margin: 0 auto 26px;
}

.celebration-started {
  display: grid;
  gap: 8px;
  margin: 32px 0 0;
  font-size: clamp(1.2rem, 5vw, 1.55rem);
}

.celebration-started span[lang="ar"] {
  font-family: var(--arabic-font);
}

address {
  font-style: normal;
  font-size: clamp(1.1rem, 4.8vw, 1.42rem);
}

address[lang="ar"] {
  font-family: var(--arabic-font);
}

.wait-copy span[lang="ar"] {
  font-family: var(--arabic-font);
}

.wait-copy {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: clamp(1.06rem, 4.6vw, 1.34rem);
}

@media (min-width: 760px) {
body {
    padding-block: 22px;
  }

.invite-shell {
    border-radius: 0;
    min-height: calc(100svh - 44px);
  }

:where(.section) {
    min-height: calc(100svh - 44px);
  }

.poem-grid {
    gap: 30px;
  }
}

@media (max-width: 430px) {
:root {
    --section-pad: 24px;
  }
}

@media (max-width: 340px) {
:root {
    --section-pad: 20px;
  }
}

html {
  scroll-padding-top: 0;
}

:where(.section) {
  transform-style: preserve-3d;
}

.invitation-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px 0 clamp(18px, 4.8vw, 28px);
}

.invitation-monogram {
  display: block;
  width: clamp(56px, 16vw, 74px);
  height: auto;
  object-fit: contain;
  opacity: 0.96;
}

.overline {
  margin-bottom: 18px;
  text-wrap: balance;
}

h1,
h2 {
  text-wrap: balance;
}

h2 {
  font-weight: 500;
}

.gold-rule {
  width: min(190px, 52vw);
  margin: 0 auto clamp(26px, 6vw, 36px);
}

.text-word { display: inline-block; white-space: nowrap; }

.text-fragment {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  will-change: auto;
}

.arabic-copy {
  font-weight: 500;
}

.arabic-copy p,
.english-copy p {
  margin-bottom: clamp(22px, 5vw, 30px);
}

.final-logo {
  width: min(138px, 35vw);
  margin-bottom: 30px;
}

address {
  line-height: 1.64;
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

.invite-shell {
    scroll-snap-type: none;
  }

.text-fragment {
    opacity: 1;
    transform: none !important;
  }
}

:root {
  --canvas-width: min(100vw, 520px);
  --arabic-font: "Amiri", "Noto Naskh Arabic", "Times New Roman", serif;
  --english-display-font: "Bodoni Moda", "Cormorant Garamond", Georgia, serif;
  --english-font: "Cormorant Garamond", Georgia, serif;
}

:where(.section) {
  padding: clamp(28px, 7vw, 52px);
  scroll-snap-align: none;
}

h1,
h2 {
  font-family: var(--english-display-font);
  font-weight: 500;
}

h1 span[lang="ar"],
h2[lang="ar"] {
  font-family: var(--arabic-display-font);
}

.overline {
  font-family: var(--arabic-display-font);
  font-size: clamp(1.02rem, 3.8vw, 1.28rem);
  font-weight: 400;
}

.final-logo,
.paper-signature {
  object-fit: contain;
}

.fallback-logo {
  display: none !important;
}

.paper-signature {
  display: block;
  width: min(82px, 22vw);
  max-height: 140px;
  margin: 0 auto 20px;
}

.arabic-copy {
  font-family: var(--arabic-font);
  font-size: clamp(1.22rem, 4.9vw, 1.58rem);
}

.english-copy {
  margin-inline: auto;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-style: italic;
}

.poem-grid {
  gap: clamp(36px, 9vw, 52px);
}

.final-logo {
  max-height: 210px;
}

@media (min-width: 760px) {
body {
    padding-block: 28px;
  }

.invite-shell {
    border-radius: 0;
    min-height: calc(100svh - 56px);
  }

:where(.section) {
    min-height: calc(100svh - 56px);
  }
}

@media (max-width: 430px) {
:where(.section) {
    padding-inline: 32px;
  }
}

.paper-section .overline {
  font-family: var(--arabic-font);
  font-weight: 700;
}

.arabic-copy {
  font-family: var(--arabic-font);
  font-weight: 700;
}

#countdown-title {
  opacity: 1;
}

.invite-shell {
  isolation: isolate;
}

.invite-shell::before,
.invite-shell::after {
  content: "";
  position: fixed;
  top: max(0px, env(safe-area-inset-top));
  bottom: max(0px, env(safe-area-inset-bottom));
  z-index: 30;
  width: clamp(18px, 5vw, 34px);
  pointer-events: none;
  opacity: 0.28;
}

.invite-shell::before {
  left: max(0px, calc(50% - min(50vw, 260px)));
  transform: translateX(-10%);
}

.invite-shell::after {
  right: max(0px, calc(50% - min(50vw, 260px)));
  transform: translateX(10%) scaleX(-1);
}

:where(.section) {
  border-inline: 1px solid var(--antique-gold);
}

.peek-logo {
  opacity: 0.66;
}

@media (max-width: 430px) {
.invite-shell::before,
.invite-shell::after {
    width: 20px;
    opacity: 0.2;
  }
}

.invite-shell::before,
.invite-shell::after {
  display: none !important;
}

.intro-skip {
  position: absolute;
  top: max(30px, env(safe-area-inset-top));
  left: max(30px, env(safe-area-inset-left));
  z-index: 40;
  padding: 12px 10px;
  border: 0;
  font-family: var(--english-font);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 220ms ease, transform 220ms ease;
}

.intro-skip:hover,
.intro-skip:focus-visible {
  transform: translateY(-1px);
}

.names-arabic-logo,
.final-logo {
  backface-visibility: hidden;
}

.paper-signature {
  opacity: 0.2;
}

.names-arabic-logo {
  width: min(132px, 34vw);
  max-height: 210px;
  margin: 0 auto clamp(14px, 4vw, 22px);
  object-fit: contain;
  opacity: 0.72;
}

#welcome-title {
  font-family: var(--arabic-font);
  font-size: clamp(1.95rem, 7.6vw, 2.82rem);
  font-weight: 700;
}

.arabic-copy,
.english-copy,
.wait-copy {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.english-copy,
.wait-copy span {
  line-break: auto;
  white-space: normal;
}

.arabic-copy {
  max-width: 27ch;
  margin-inline: auto;
  line-height: 2.18;
}

.english-copy {
  max-width: 30ch;
  line-height: 1.62;
}

.peek-logo,
.peek-line {
  display: none !important;
}

.quran-basmala,
.quran-basmala .text-fragment {
  letter-spacing: 0;
}

.quran-copy {
  width: min(100%, 780px);
  font-family: var(--arabic-font);
  font-size: clamp(1.52rem, 4.8vw, 2.55rem);
  line-height: 2.12;
  text-align: center;
}

.invitation-section .poem-grid {
  align-items: center;
  gap: 24px;
}

.main-arabic {
  max-width: 29ch;
  font-size: clamp(1.15rem, 4.5vw, 1.45rem);
  line-height: 2.16;
}

.final-logo {
  width: min(124px, 30vw);
  opacity: 0.2;
}

@media (max-width: 430px) {
.quran-copy {
    font-size: clamp(1.3rem, 5.8vw, 1.72rem);
    line-height: 2.22;
  }
}

.names-arabic-logo {
  display: none !important;
}

.family-intro {
  display: grid;
  gap: 4px;
}

.family-intro p,
.family-intro p .text-fragment {
  margin: 0;
}

.family-intro p[lang="ar"] {
  font-family: var(--arabic-font);
  font-size: clamp(1.02rem, 4.2vw, 1.38rem);
  line-height: 1.55;
}

.family-intro p[lang="en"] {
  font-family: var(--english-font);
  font-size: clamp(0.9rem, 3.3vw, 1.04rem);
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: none;
}

@media (max-width: 430px) {
.family-intro p[lang="ar"] {
    font-size: clamp(0.98rem, 4.8vw, 1.2rem);
  }

.family-intro p[lang="en"] {
    font-size: clamp(0.8rem, 3.5vw, 0.96rem);
  }
}

@media (max-width: 430px) {
.quran-copy {
    max-width: 20ch;
  }
}

.quran-basmala,
.quran-basmala .text-fragment {
  margin: 0;
  font-family: var(--arabic-font);
  font-size: clamp(1.26rem, 4.6vw, 1.72rem);
  font-weight: 700;
  line-height: 1.8;
}

.quran-section .gold-rule {
  width: min(116px, 36vw);
  margin: 0 auto;
  opacity: 0.72;
}

.quran-copy {
  max-width: min(100%, 25ch);
  margin: 0 auto;
}

.quran-copy p,
.quran-copy p .text-fragment {
  margin: 0;
  font-family: var(--arabic-font);
  font-size: clamp(1.42rem, 5.3vw, 2.3rem);
  font-weight: 700;
  line-height: 2.18;
}

/* Scale only the verse's typography and leading; retain its original layout
   footprint so the paper, ornaments, Bismillah and bouquet do not move. */
.quran-copy > p {
  transform: scale(.82);
  transform-origin: center;
}

.quran-closing,
.quran-closing .text-fragment {
  align-self: center;
  margin: clamp(2px, 0.8svh, 8px) 0 0;
  font-family: var(--arabic-font);
  font-size: clamp(0.9rem, 3.1vw, 1.08rem);
  font-weight: 400;
  line-height: 1.7;
}

@media (max-width: 430px) {
.quran-copy p,
.quran-copy p .text-fragment {
    font-size: clamp(1.18rem, 5vw, 1.5rem);
    line-height: 2.08;
  }
}

:root {
  --arabic-display-font: "Amiri", "Noto Naskh Arabic", serif;
}

@media (max-width: 767px), (pointer: coarse) {
:where(.section) {
    transform-style: flat !important;
    -webkit-transform-style: flat !important;
  }

.text-fragment {
    will-change: auto !important;
    transform: translateY(9px);
  }
}

.invitation-section .invitation-header {
  border: 0 !important;
  outline: 0 !important;
}

.invitation-section .invitation-header::before,
.invitation-section .invitation-header::after {
  content: none !important;
  display: none !important;
}

.invitation-section .invitation-monogram {
  width: clamp(48px, 13vw, 64px) !important;
  height: auto !important;
  display: block;
  object-fit: contain;
  opacity: 0.94;
  border: 0 !important;
  outline: 0 !important;
  transform: translateY(-10px);
}

/* Dedicated opening overlay, separate from the invitation's scrolling canvas. */
html:has(.swan-opening),
body:has(.swan-opening),
body:has(.swan-opening) .desktop-stage {
  background: #e5ded2;
}

.opening-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #e5ded2;
}
.opening-screen > .swan-opening {
  position: relative;
  width: var(--canvas-width);
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #d8cfc0;
}

.swan-opening::before,
.swan-opening::after {
  content: none;
}

.swan-opening > .floral,
.swan-opening > .frame-corner {
  display: none;
}

.swan-opening-artwork {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}

.swan-opening > .opening-video,
.swan-opening > .opening-final-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  visibility: hidden;
  pointer-events: none;
}
.swan-opening[data-opening-state="OPENING"][data-video-visible="true"] .opening-video { visibility: visible; }
.swan-opening:not([data-opening-state="CLOSED"])[data-frame-visible="true"] .opening-final-frame { visibility: visible; }
/* The original image stays underneath video/canvas through every media wait. */
.swan-opening:not([data-opening-state="CLOSED"]) .opening-knot,
.swan-opening:not([data-opening-state="CLOSED"]) .opening-hint { visibility: hidden; }
.swan-opening:not([data-opening-state="REVEALED"]):not([data-opening-state="ENTERING"]):not([data-opening-state="INVITATION_OPEN"]) .opening-identity,
.swan-opening:not([data-opening-state="REVEALED"]):not([data-opening-state="ENTERING"]):not([data-opening-state="INVITATION_OPEN"]) .opening-identity *,
.swan-opening:not([data-final-ready="true"]) .opening-identity,
.swan-opening:not([data-final-ready="true"]) .opening-identity * { visibility: hidden !important; }
.swan-opening > .opening-knot {
  position: absolute;
  z-index: 3;
  left: var(--knot-left, 47.2%);
  top: var(--knot-top, 33.6%);
  width: max(64px, 16%);
  height: max(56px, 8%);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.opening-knot:focus-visible { outline: 1px solid #F5EFE3; outline-offset: 4px; }
.opening-knot:disabled { pointer-events: none; }
.swan-opening > .opening-hint {
  position: absolute;
  z-index: 2;
  top: var(--hint-top, 62%);
  left: 0;
  width: 100%;
  margin: 0;
  color: #FFFFFF;
  font: 400 clamp(.95rem, 4vw, 1.1rem)/1.8 var(--arabic-font);
  text-align: center;
  pointer-events: none;
}
.swan-opening > .opening-identity {
  position: absolute;
  z-index: 2;
  top: calc(50% - 28px);
  left: 50%;
  width: min(55%, 230px);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 16px;
  pointer-events: none;
}
.opening-monogram-frame {
  position: relative;
  top: -12px;
  display: grid;
  justify-items: center;
  width: 100%;
  transform: scale(1.1);
}
.opening-monogram {
  position: relative;
  top: 8px;
  display: block;
  width: clamp(76px, 21vw, 104px);
  max-width: 100%;
  height: auto;
  max-height: 25svh;
  object-fit: contain;
  opacity: 0;
  transform: translateY(10px);
  filter: none;
  box-shadow: none;
}
.opening-title {
  position: relative;
  top: 47px;
  transform: translateY(15%);
  margin: 0;
  color: #F5EFE3;
  font: 400 clamp(1.15rem, 4.8vw, 1.4rem)/1.7 var(--arabic-font);
  text-align: center;
  opacity: 0;
  text-shadow: none;
}
.opening-couple {
  min-height: 1.4em;
  position: relative;
  top: 14px;
  margin: 0;
  color: #F5EFE3;
  font: 500 clamp(1.3rem, 5.2vw, 1.6rem)/1.4 var(--english-font);
  text-align: center;
  opacity: 0;
}

.swan-opening-visible .progress {
  visibility: hidden;
  pointer-events: none;
}

/* UTOPIA Swan Lake — the existing nine scenes, in one stationery palette. */
:root {
  --champagne: #DED2BC;
  --dusty-taupe: #B5AA95;
  --paper-edge: #BBA985;
  --lake-olive: #747A62;
  --antique-gold: #A18A60;
  --warm-white: #FBF7EE;
  --swan-paper: #F5EFE3;
  --swan-field: #E8E0D1;
  --swan-ink: #484F3C;
  --swan-olive-wash: #BEC1AA;
  --printed-landscape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='240' viewBox='0 0 600 240' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='edge' x='-5%25' y='-10%25' width='110%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='4.5'/%3E%3C/filter%3E%3ClinearGradient id='wash' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.15'/%3E%3Cstop offset='.13' stop-color='white'/%3E%3Cstop offset='.69' stop-color='white'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23wash)' filter='url(%23edge)' d='M25 12L75 10L120 15L175 8L230 13L284 9L340 15L400 10L455 14L520 9L575 15L589 35L584 70L591 110L586 151L592 195L577 222L525 227L470 221L416 231L355 225L298 232L240 225L180 230L120 224L65 229L20 219L13 185L18 145L11 108L17 66Z'/%3E%3C/svg%3E");
}

.section {
  border-inline: 0;
  color: var(--swan-ink);
}
.section::before {
  inset: 18px;
  border: 1px solid rgba(161,138,96,.42);
  border-radius: 2px;
}
.section::after { content: none; }
.frame-corner { color: #A18A60; }
.frame-corner svg { filter: none; }
.section-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}
.gold-rule, .designer-divider { background: var(--antique-gold); }
.gold-rule { opacity: .65; }
.paper-inner, .calendar-panel, .venue-card {
  background: var(--stationery-grain), var(--swan-paper);
  color: var(--swan-ink);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(65,58,39,.06), 0 12px 28px rgba(65,58,39,.09);
}
.paper-inner::before, .calendar-panel::before, .venue-card::before {
  inset: 8px;
  border-color: rgba(161,138,96,.38);
  border-radius: 1px;
}
.music-toggle {
  width: 38px;
  height: 38px;
  border-color: #A18A60;
  background: #F3EBDD;
  color: #4D523E;
}
@media (max-width: 759px) {
  body:has(> #nl-badge-frame) .music-toggle {
    right: auto;
    left: max(8px, calc((100vw - var(--canvas-width)) / 2 + 8px));
  }
}
.music-icon { width: 10px; height: 12px; border-width: 2px; }
.progress-dot.active::before { background: #596047; border-color: #596047; }
.progress-dot::before { border-color: #8D805F; }
.maps-button {
  background: #586047;
  color: #FBF7EE;
  border: 1px solid #777C61;
  border-radius: 2px;
}
.maps-button:hover { background: #414A35; }
.intro-skip { background: #F3EBDD; color: #4D523E; }
.intro-skip:hover { background: #E8DECB; }
.intro-logo img, .names-logo, .invitation-monogram {
  filter: none;
  opacity: 1;
}

/* Identity: open ivory stationery above a painted lakeside garden. */
.names-section { padding: 108px 38px 296px; }
.names-section > .floral { display: none; }
.names-card { max-width: 360px; }
.names-logo { width: 82px; margin-bottom: 24px; transform: none; }
.family-invitation { font-size: clamp(1.02rem,4.3vw,1.18rem); line-height: 1.85; }
.family-invitation p { white-space: nowrap; }
.arabic-names { height: auto; margin: 30px 0 22px; }
.arabic-names-artwork {
  top: 0;
  width: 100%;
  max-width: 360px;
  height: auto;
  transform: none;
}
.english-names {
  top: -14px;
  font-size: clamp(1.35rem,5.6vw,1.75rem);
  font-weight: 500;
  color: #5B5D47;
}
.names-card .gold-rule { width: 96px; margin-top: 22px; box-shadow: none; }

/* A live paper envelope rests in the terrace painting; its folds stay intact. */
.envelope-section { padding: 38px 26px 42px; }
.envelope-section::before, .envelope-section .frame-corner { display: none; }
.envelope-scene { height: calc(100svh - 80px); min-height: 0; }
.envelope-scene h1 {
  /* Keep the section heading accessible without competing with the envelope. */
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  background: none;
  transform: none;
}
.envelope-button { position: absolute; top: calc(35% - var(--envelope-mobile-lift, 0px)); color: #4D523E; }
.envelope { filter: drop-shadow(0 7px 7px rgba(57,52,36,.19)); }
.envelope-back { background: var(--stationery-grain), #E8DDC9; border-color: #C9B998; }
.invitation-peek {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 14px;
  background: var(--stationery-grain), #F2EBDD;
  color: #555A43;
  border-color: #BDAA83;
  box-shadow: 0 2px 4px rgba(65,58,39,.12);
}
.invitation-peek .envelope-paper-heading {
  position: relative;
  z-index: 1;
  flex: none;
  width: 100%;
  text-align: center;
  letter-spacing: 0;
}
.invitation-peek .envelope-paper-botanical {
  position: absolute;
  width: 35.8248%;
  max-width: 97.704px;
  height: auto;
  pointer-events: none;
}
.invitation-peek .envelope-paper-botanical-upper { top: 8px; left: 8px; }
.invitation-peek .envelope-paper-botanical-lower { bottom: 8px; right: 8px; width: 29.3112%; max-width: 84.6768px; transform: rotate(180deg); }
.flap-left { --fold-tone: #EDE3D1; }
.flap-right { --fold-tone: #F1E8D8; }
.flap-bottom { --fold-tone: linear-gradient(0deg,#F4EBDD,#EEE3D0); }
.flap-top { --fold-tone: linear-gradient(180deg,#F8F0E3,#EEE1CB); }
.organza-ribbon {
  position: absolute;
  left: -5%;
  top: 25%;
  width: 110%;
  height: auto;
  /* Include the overhanging ends; clicks bubble to the existing button. */
  pointer-events: auto;
  z-index: 9;
}
.envelope-button .wax-seal { pointer-events: none; }
.wax-seal {
  width: clamp(54px,14vw,64px);
  background: var(--stationery-grain), radial-gradient(ellipse at 30% 20%,rgba(239,199,157,.22),transparent 48%), #642F31;
  color: #D0B279;
  box-shadow: inset 0 1px 2px rgba(252,226,189,.24), inset 0 -3px 4px rgba(39,15,17,.35), 0 3px 5px rgba(47,31,25,.3);
}
.wax-seal::before {
  content: "U";
  font: 400 clamp(1.65rem,6.5vw,2rem)/1 var(--english-display-font);
  text-shadow: 0 1px 0 rgba(236,207,148,.2), 0 -1px 1px rgba(41,18,19,.5);
}
.wax-seal::after { inset: 9%; border-color: rgba(204,170,112,.6); }
/* The terrace already contains painted flowers; keep its envelope uncluttered. */
.envelope .envelope-floral { display: none; }
.tap-copy {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 12px;
  width: 184px;
  margin: 0;
  padding: 0 10px;
  gap: 2px;
  background: none;
  border: 0;
  transform: translateX(-50%);
  color: var(--swan-ink);
  font-size: .96rem;
  line-height: 1.35;
  z-index: 12;
  pointer-events: none;
}
.tap-copy span[lang="ar"] { font-size: 1rem; line-height: 1.4; }

/* One continuous parchment field; the transparent inner folio has only a frame. */
.welcome-section.quran-section {
  --quran-frame-inset: clamp(12px, 3vw, 16px);
  height: 100svh;
  min-height: max(700px, 100svh);
  padding: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background:
    var(--stationery-grain),
    radial-gradient(ellipse 76% 48% at 50% 49%, #F5EDDE 0%, rgba(245, 237, 222, .92) 22%, rgba(241, 232, 215, .64) 52%, rgba(234, 224, 206, 0) 100%),
    radial-gradient(ellipse at 12% 16%, rgba(150, 131, 107, .055), transparent 64%),
    radial-gradient(ellipse at 90% 85%, rgba(180, 150, 111, .07), transparent 68%),
    #EAE0CE;
}
.quran-section::before,
.quran-section::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: var(--quran-frame-inset);
  border: 1px solid rgba(159, 128, 78, .65);
  border-radius: 0;
  pointer-events: none;
}
.quran-section::after {
  inset: calc(var(--quran-frame-inset) + 3px);
  border-color: rgba(159, 128, 78, .45);
}
.quran-section .quran-card {
  position: absolute;
  top: 18.5%;
  left: 9%;
  width: 82%;
  height: 62%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #62573F;
}
.quran-section .quran-card::before,
.quran-section .quran-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(159, 128, 78, .75);
  border-radius: 0;
  background: none;
  pointer-events: none;
}
.quran-section .quran-card::after {
  inset: 3px;
  border-color: rgba(159, 128, 78, .4);
}
.quran-section .quran-corner-defs { position: absolute; pointer-events: none; }
.quran-section .quran-corner {
  position: absolute;
  z-index: 1;
  width: clamp(28px, 7.5vw, 38px);
  height: clamp(28px, 7.5vw, 38px);
  color: #9B7A49;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  pointer-events: none;
}
.quran-section > .quran-corner-tl { top: var(--quran-frame-inset); left: var(--quran-frame-inset); }
.quran-section > .quran-corner-tr { top: var(--quran-frame-inset); right: var(--quran-frame-inset); }
.quran-section > .quran-corner-bl { bottom: var(--quran-frame-inset); left: var(--quran-frame-inset); }
.quran-section > .quran-corner-br { bottom: var(--quran-frame-inset); right: var(--quran-frame-inset); }
.quran-card > .quran-corner-tl { top: 0; left: 0; }
.quran-card > .quran-corner-tr { top: 0; right: 0; }
.quran-card > .quran-corner-bl { bottom: 0; left: 0; }
.quran-card > .quran-corner-br { bottom: 0; right: 0; }
.quran-section .quran-corner-tr { transform: scaleX(-1); }
.quran-section .quran-corner-bl { transform: scaleY(-1); }
.quran-section .quran-corner-br { transform: scale(-1); }
.quran-section .quran-botanical {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  pointer-events: none;
}
.quran-section .quran-botanical-upper {
  top: -24px;
  left: -16px;
  width: 44.8%;
  max-width: 151.2px;
  transform: scaleY(-1);
}
.quran-section .quran-botanical-lower {
  right: -16px;
  bottom: -24px;
  width: 37.8%;
  max-width: 128.8px;
  transform: scaleX(-1);
}
.quran-section .quran-basmala,
.quran-section .quran-basmala .text-fragment {
  margin: 0;
  font: 400 clamp(1.2rem, 5.4vw, 1.5rem)/1.85 "Amiri", "Noto Naskh Arabic", serif;
  color: inherit;
  letter-spacing: 0;
  text-align: center;
}
.quran-section .quran-basmala { margin-bottom: 12px; }
.quran-section .quran-ornament {
  display: block;
  flex: none;
  width: 48%;
  max-width: 190px;
  height: auto;
  margin: 0 0 22px;
  color: #9B7A49;
}
.quran-section .quran-copy {
  width: 100%;
  max-width: none;
  margin: 0;
}
.quran-section .quran-copy p,
.quran-section .quran-copy p .text-fragment {
  margin: 0;
  font-family: "Amiri", "Noto Naskh Arabic", serif;
  font-size: clamp(1.45rem, 7.2vw, 2.15rem);
  font-weight: 400;
  line-height: 1.96;
  letter-spacing: 0;
  word-spacing: 0;
  text-align: center;
}
.quran-section .quran-copy > p { transform: none; }
.quran-section .quran-line { display: block; white-space: nowrap; }
.quran-section .quran-attribution {
  margin: 18px 0 0;
  font: 400 clamp(.95rem, 3.8vw, 1.1rem)/1.8 "Amiri", "Noto Naskh Arabic", serif;
  text-align: center;
}
.quran-section .quran-ornament-bottom { margin: 12px 0 0; }

/* Letter: a long, gently shadowed sheet with white roses at opposite corners. */
.invitation-section { padding: 32px 30px 36px; background-color: #E5DCCB; }
.invitation-card { padding: 42px 26px 48px; }
.invitation-card > .floral-top-right {
  top: -6px;
  right: 3px;
  width: min(39%, 140px);
  /* Mirror the L-shaped branch so its long stem follows the right border. */
  transform: scaleX(-1);
  transform-origin: center;
}
.invitation-card > .floral-bottom-left {
  bottom: -4px;
  left: -4px;
  width: min(33%, 116px);
  transform: scaleY(-1);
  transform-origin: center;
}
.invitation-section .invitation-monogram { width: 44px !important; filter: none; opacity: 1; }
.invitation-header { margin-bottom: 12px; }
.invitation-card .poem-grid { gap: 24px; margin-top: 20px; }
.main-arabic { font-size: clamp(1.22rem,4.9vw,1.4rem); font-weight: 400; line-height: 2.05; color: var(--swan-ink); }
.english-copy { font-size: 1.12rem; font-weight: 500; line-height: 1.65; color: #53523F; }
.invitation-section .main-arabic, .invitation-section .english-copy { color: #4D392C; }
.arabic-copy p, .english-copy p { margin-bottom: 22px; }

/* Ivory countdown stationery with the original transparent pocket watch. */
.countdown-section {
  padding: 18px 16px;
  background: var(--stationery-grain), var(--stationery-ivory);
  color: var(--swan-ink);
}
.countdown-section::before { content: none; }
.countdown-section .paper-inner {
  min-height: calc(100svh - 36px);
  padding: clamp(92px, 11svh, 110px) clamp(12px, 3.8vw, 22px) 60px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  isolation: isolate;
}
.countdown-section .paper-inner::before,
.countdown-section .paper-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--antique-gold);
  border-radius: 0;
  pointer-events: none;
  z-index: 3;
}
.countdown-section .paper-inner::after { inset: 4px; border-color: rgba(169, 139, 97, .55); }
.countdown-section .frame-corner { width: 25px; height: 25px; color: var(--antique-gold); z-index: 4; }
.countdown-section .frame-corner.tl { top: 0; left: 0; }
.countdown-section .frame-corner.tr { top: 0; right: 0; }
.countdown-section .frame-corner.bl { bottom: 0; left: 0; }
.countdown-section .frame-corner.br { bottom: 0; right: 0; }
.countdown-section .countdown-botanical { z-index: 0; height: auto; }
.countdown-section .countdown-botanical-upper {
  top: 0;
  right: 0;
  width: min(48%, 190px);
  transform-origin: top right;
  transform: translateY(150%) rotate(90deg);
}
.countdown-section .countdown-botanical-lower {
  bottom: 0;
  left: 0;
  width: min(42%, 158px);
  transform-origin: top left;
  transform: translateY(100%) rotate(-90deg);
}
.countdown-section .overline,
.countdown-section h2,
.countdown-section .countdown-pocket-watch,
.countdown-section .countdown-grid,
.countdown-section .countdown-closing,
.countdown-section .celebration-started { position: relative; z-index: 1; }
.countdown-section .overline { margin: 0; font-size: clamp(1.35rem, 6.2vw, 1.65rem); font-weight: 400; line-height: 1.6; color: inherit; }
.countdown-section .countdown-pocket-watch { display: block; width: min(100%, clamp(260px, 72vw, 320px)); height: auto; object-fit: contain; margin: 0; }
.countdown-section h2 { margin: 0; font-family: var(--english-font); font-size: clamp(2.2rem, 9.2vw, 2.7rem); font-weight: 400; line-height: 1.2; color: inherit; }
.countdown-section .gold-rule { position: relative; z-index: 1; width: 110px; height: 1px; margin: 0 auto; opacity: .85; background: var(--antique-gold); }
.countdown-section .gold-rule::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: -2px;
  left: calc(50% - 2px);
  border: 1px solid var(--antique-gold);
  background: var(--stationery-ivory);
  transform: rotate(45deg);
}
.countdown-section .countdown-grid { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.countdown-section .time-box {
  --countdown-arch-height: clamp(70px, 19vw, 82px);
  position: relative;
  padding: 0;
  gap: 0;
  grid-template-rows: var(--countdown-arch-height) auto auto;
  align-items: center;
  align-content: start;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.countdown-section .time-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--countdown-arch-height);
  border: 1px solid var(--antique-gold);
  border-radius: 999px 999px 2px 2px;
  pointer-events: none;
}
.countdown-section .time-box strong { width: 100%; font-size: clamp(1.95rem, 8.6vw, 2.6rem); font-weight: 400; line-height: 1; color: inherit; }
.countdown-section .time-box span { margin-top: 8px; font-size: clamp(.6rem, 2.65vw, .7rem); font-weight: 400; line-height: 1.4; letter-spacing: .065em; text-transform: uppercase; color: inherit; }
.countdown-section .time-box small { margin-top: 2px; font-size: .9rem; line-height: 1.5; color: inherit; }
.countdown-section .countdown-closing { display: grid; justify-items: center; gap: 12px; width: 100%; margin-top: 8px; }
.countdown-section .countdown-closing p { margin: 0; font: 400 clamp(1.1rem, 4.8vw, 1.3rem)/1.7 var(--arabic-font); color: inherit; }
.countdown-section .countdown-ornament { display: block; width: 90px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.1; color: var(--antique-gold); }
.countdown-section .celebration-started { margin: 0; color: inherit; }

/* The date section retains its existing divider and frame treatment. */
.date-section::before { content: none; }
.date-section .gold-rule { position: relative; width: 84px; margin: 21px auto 0; opacity: .85; background: #B49A63; }
.date-section .gold-rule::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: -2px;
  left: calc(50% - 2px);
  border: 1px solid #B49A63;
  background: #3D4231;
  transform: rotate(45deg);
}

/* Approved ivory folio: a satin bow, restrained date setting, and painted lower field. */
.date-section { padding: 18px; background-color: #E8E0D1; }
.date-section .calendar-panel {
  min-height: calc(100svh - 36px);
  padding: clamp(164px, 20svh, 188px) 22px calc(clamp(270px, 35svh, 335px) + 12px);
  background: var(--stationery-grain), #F4EDDF;
  border-color: #B5A17A;
  border-radius: 2px;
  box-shadow: 0 3px 8px rgba(72, 65, 45, .1);
  isolation: isolate;
}
.date-section .calendar-panel::before { inset: 8px; border-color: rgba(166, 141, 96, .55); z-index: 2; }
.date-section .frame-corner { width: 24px; height: 24px; color: #A58B5C; z-index: 3; }
.date-section .frame-corner.tl { top: 8px; left: 8px; }
.date-section .frame-corner.tr { top: 8px; right: 8px; }
.date-section .frame-corner.bl { bottom: 8px; left: 8px; }
.date-section .frame-corner.br { bottom: 8px; right: 8px; }
.date-bow-arrangement {
  --date-card-span: calc(var(--canvas-width) - 38px);
  --date-bow-span: min(calc(var(--date-card-span) * .68), 252px);
  position: absolute;
  top: 3px;
  left: 50%;
  width: min(68%, 252px);
  aspect-ratio: 3 / 2;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
/* Mirror only the outer satin-band slices (source rows 228–414) into the
   empty side margins. The original knot, loops and tails are untouched. */
.date-bow-arrangement::before,
.date-bow-arrangement::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 22.265625%;
  height: 18.1640625%;
  width: calc((var(--date-card-span) - 100%) / 2 + 1px);
  background-image: url("assets/images/swan-ivory-satin-bow.webp");
  background-size: var(--date-bow-span) auto;
  background-repeat: no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}
.date-bow-arrangement::before {
  right: calc(100% - 1px);
  background-position: left calc(var(--date-bow-span) * -.1484375);
}
.date-bow-arrangement::after {
  left: calc(100% - 1px);
  background-position: right calc(var(--date-bow-span) * -.1484375);
}
.date-bow-arrangement .date-ribbon {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 2;
}
.date-section .calendar-panel > .date-botanical {
  width: 138px;
  left: 10px;
  bottom: 10px;
  transform: scaleY(-1);
  transform-origin: center;
  opacity: .85;
  z-index: 4;
}
/* Horizontal sprigs grow from beneath the ribbon, rather than from the card corners. */
.date-section .date-bow-branch {
  position: absolute;
  width: 55%;
  height: 30%;
  overflow: hidden;
  opacity: .84;
  z-index: 1;
}
.date-bow-branch img {
  position: absolute;
  top: 0;
  left: -36%;
  width: 136%;
  max-width: none;
  height: auto;
}
.date-section .date-bow-branch-left {
  left: -14%;
  top: 4%;
  width: 52%;
  height: 48%;
  transform: scaleX(-1);
  transform-origin: center;
}
.date-section .date-bow-branch-right {
  top: 30%;
  right: -9%;
  width: 53%;
  /* The cut stem base is concealed beneath the bow's right loop and tail. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 28% 100%, 28% 65%, 0 65%);
}
.date-section .calendar-panel .overline { font-size: 1rem; line-height: 1.7; margin-bottom: 7px; }
.date-section .calendar-panel h2 { font-size: 1.3rem; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: #635235; }
.date-section .gold-rule { width: 65px; margin-top: 12px; }
.date-section .gold-rule::after { background: #F4EDDF; }
.date-vignette, .venue-vignette {
  border: 0;
  border-radius: 0;
  -webkit-mask-image: var(--printed-landscape-mask);
  mask-image: var(--printed-landscape-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.date-vignette {
  position: absolute;
  left: 9px;
  bottom: 9px;
  z-index: -1;
  display: block;
  width: calc(100% - 18px);
  height: clamp(270px, 35svh, 335px);
  margin: 0;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
  mask-image: linear-gradient(to bottom, transparent, #000 30%);
}
.date-section .calendar-card { flex-direction: row; justify-content: center; align-items: baseline; gap: 9px; margin: 14px auto 10px; }
.date-section .calendar-day { font-size: 1.75rem; line-height: 1.2; color: #594C32; }
.date-section .calendar-month { padding: 0; color: #594C32; font-size: 1rem; letter-spacing: .11em; }
.date-section .calendar-year { color: #594C32; font-size: 1.02rem; }
.date-section .date-copy { gap: 8px; }
.date-section .date-copy p { font-size: 1.075rem; line-height: 1.6; color: #50543F; }
.date-section .date-copy div[lang="en"] p { font-size: 1.025rem; font-weight: 500; line-height: 1.5; }
.date-section .date-copy p:nth-child(2) { color: #424A34; }

/* Venue: a symbolic estate painting integrated directly into the ivory folio. */
.venue-section {
  padding: clamp(64px, 8svh, 80px) 26px clamp(92px, 12svh, 116px);
  display: block;
  isolation: isolate;
  background:
    var(--stationery-grain),
    radial-gradient(ellipse at 50% 42%, #F3EBDC, rgba(234, 224, 206, 0) 78%),
    #EAE0CE;
}
.venue-section::before {
  inset: 14px;
  border: 1px solid rgba(159, 128, 78, .6);
  border-radius: 0;
}
.venue-section > .frame-corner {
  width: 28px;
  height: 28px;
  color: #9B7A49;
}
.venue-section > .frame-corner.tl { top: 14px; left: 14px; }
.venue-section > .frame-corner.tr { top: 14px; right: 14px; }
.venue-section > .frame-corner.bl { bottom: 14px; left: 14px; }
.venue-section > .frame-corner.br { bottom: 14px; right: 14px; }
.venue-section .venue-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.venue-section .venue-card::before { content: none; }
.venue-section .overline {
  margin: 0;
  font: 400 clamp(1.15rem, 4.8vw, 1.4rem)/1.7 var(--arabic-font);
}
.venue-section h2 {
  margin: 6px 0 0;
  font: 500 clamp(1.8rem, 7.6vw, 2.3rem)/1.2 var(--english-display-font);
  color: #575A43;
}
.venue-section .gold-rule { flex: none; background: #A18A60; }
.venue-section .gold-rule::after { background: #F1E7D6; }
.venue-section .venue-title-rule { width: 118px; margin: 14px auto 18px; }
.venue-section .venue-vignette {
  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;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 17%, #000 89%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 17%, #000 89%, transparent);
}
.venue-section .location-mark {
  flex: none;
  width: 22px;
  height: 28px;
  margin: 10px auto 8px;
  color: #9B7A49;
}
.venue-section .venue-details { width: 100%; gap: 10px; }
.venue-section .venue-details address { gap: 0; }
.venue-section .venue-details address[lang="ar"] { font-size: 1.2rem; line-height: 1.6; }
.venue-section .venue-details address[lang="ar"] .venue-line-medium { font-size: 1.55rem; }
.venue-section .venue-details address[lang="ar"] .venue-line-small { font-size: 1.05rem; }
.venue-section .venue-details address[lang="en"] { font-size: 1.15rem; font-weight: 500; line-height: 1.5; }
.venue-section .venue-details address[lang="en"] .venue-line-small { font-size: 1rem; }
.venue-section .venue-details-rule { width: 100px; margin: 16px auto 0; }
.venue-section .maps-button {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 10px;
  align-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: #4D523E;
  color: #F5EFE3;
}
.venue-section .maps-button::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(199, 174, 128, .6);
  pointer-events: none;
}
.venue-section .maps-button:hover { background: #414A35; }
.venue-section .venue-map-copy { display: grid; gap: 2px; }
.venue-section .maps-button span[lang="ar"] { font: 400 1rem/1.55 var(--arabic-font); }
.venue-section .maps-button span[lang="en"] { font: 500 .95rem/1.4 var(--english-font); }
.venue-section .venue-map-pin { width: 22px; height: 28px; }
.venue-section .venue-map-arrow { width: 10px; height: 18px; }
.venue-section .venue-map-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #C7AE80;
  stroke-width: 1.2;
  pointer-events: none;
}
.venue-section .venue-map-corner-tl { top: 3px; left: 3px; }
.venue-section .venue-map-corner-tr { top: 3px; right: 3px; transform: scaleX(-1); }
.venue-section .venue-map-corner-bl { bottom: 3px; left: 3px; transform: scaleY(-1); }
.venue-section .venue-map-corner-br { bottom: 3px; right: 3px; transform: scale(-1); }
.venue-section > .venue-floral-upper {
  z-index: 1;
  top: 0;
  right: 0;
  width: min(42%, 186px);
  transform: rotate(180deg);
}
.venue-section > .venue-floral-lower {
  z-index: 1;
  bottom: 0;
  left: 0;
  width: min(38%, 170px);
}

/* Closing: ivory writing space gives way to a second, distinct swan painting. */
.final-section { padding: 70px 42px 310px; }
.final-section > .floral { display: none; }
.final-inner { display: grid; gap: clamp(22px, 5.8vw, 26px); }
.final-heading { font-size: 26px; line-height: 1.5; margin-bottom: 0; }
.final-copy p { display: grid; justify-items: center; }
.final-copy .closing-message { gap: 8px; font-size: 24px; line-height: 1.65; }
.final-copy .final-message, .final-copy .final-story { width: 100%; max-width: 14em; margin-inline: auto; text-wrap: balance; }
.final-copy .guest-notes { gap: 20px; margin-top: 28px; font-size: 19px; font-weight: 400; line-height: 1.7; color: var(--olive-deep); }
.final-copy .final-emphasis, .final-copy .women-only { font: inherit; color: inherit; text-wrap: balance; }
.final-inner .gold-rule { width: 82px; margin: 0 auto; }
.final-inner .designer-credit { justify-items: center; gap: 4px; }
.final-inner .designer-brand { gap: 4px; margin-top: 8px; }
.final-inner .designer-divider { display: none; }
.designer-credit { color: #6D654F; font-size: .8rem; line-height: 1.4; gap: 4px; }
.designer-credit > strong { font-size: 1rem; color: #515840; }
.designer-brand { gap: 5px; margin-top: 5px; }
.designer-brand-name { color: #6D684F; font-size: .88rem; letter-spacing: .24em; }
.designer-tagline, .designer-social a { font-size: .74rem; }

@media (min-width: 760px) {
  .envelope-scene { height: calc(100svh - 136px); }
}
@media (max-width: 759px) {
  .envelope-button { --envelope-mobile-lift: 40px; }
}
@media (max-height: 760px) and (max-width: 759px) {
  .envelope-button { top: calc(39% - var(--envelope-mobile-lift, 0px)); }
}
@media (max-width: 359px) {
  .names-section { padding-inline: 30px; }
  .envelope-section { padding-inline: 29px; }
  .welcome-section { padding-inline: 28px; }
  .invitation-section { padding-inline: 26px; }
  .countdown-section { padding-inline: 26px; }
  .venue-section { padding-inline: 27px; }
  .final-section { padding-inline: 34px; }
}

/* This below-the-fold decoration must not compete with the opening artwork. */
html.opening-screen-active:not(.opening-screen-entering) .date-bow-arrangement::before,
html.opening-screen-active:not(.opening-screen-entering) .date-bow-arrangement::after { background-image: none; }