/* Garet Book (the Canva design's small-caps text face; free release by Type Forward / Spacetype).
   Relative url: this file sits next to the font in assets/ on Shopify and in the preview. */
@font-face {
  font-family: 'Garet';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font-garet-latin-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Maison — Fleur (the "Flower Invitation" Canva design). Loaded after invitation.css.

   One long scroll that follows the Canva pages top to bottom. Sizes are in design
   units: --u is how many CSS pixels one design pixel is worth.
     · wide screens:   the 1366-unit canvas fits the width (and roughly the height)
     · narrow screens: the middle 540 units fill the screen, so the left and right
                       edges crop away while the content stays centred
   Text never shrinks below a readable minimum; sections grow when they need room.

   The page follows the Canva top to bottom (cover, hero, countdown + venue, timeline, dress code
   + gifts, RSVP, footer): the hero is one screen (--sec-h: svh/dvh with vh fallback), the other
   sections are as tall as their content, with the Canva's spacing. Everything inside scales with the screen:
     --u    text and general design unit (see below; it follows the width AND the height)
     --ua   art, icons and spacing: 1.2 x --u on phones so a section fills its screen
     --hu   the hero's own unit (set on .fleur-hero): the largest wreath that fits with margins
   ========================================================================== */

.inv--fleur {
  --fleur-blush: #F8EDED;
  --fleur-cream: #FFFBF6;
  --fleur-cream-2: #FFFAF4;
  --fleur-ink: #32260E;
  --fleur-brown: #6B573B;
  --fleur-wine: #661414;
  --fleur-wine-dark: #4E0F0F;
  --fleur-rose: #D98C9A;
  --fleur-field: #968069;
  --inv-bg: var(--fleur-blush);
  --inv-ink: var(--fleur-ink);
  --inv-muted: rgba(50, 38, 14, 0.66);
  --inv-accent: var(--fleur-wine);
  --inv-soft: var(--fleur-blush);
  --inv-line: rgba(102, 20, 20, 0.28);
  /* The Canva design uses three fonts:
       Garet             small caps lines, labels, the form, buttons       -> --fleur-garet
       Playfair Display  the monogram letter, units, city, timeline, gifts -> --fleur-serif
       Amoresa (script)  titles and the monogram's script initial          -> --fleur-script / --fleur-swash
     Amoresa is a paid font we do not own yet, so its family name leads the script stacks and simply
     falls through to the stand-ins (Ephesis, Luxurious Script). To switch it on: buy it, put
     font-amoresa.woff2 in assets/ and add an @font-face { font-family: 'Amoresa'; ... url(font-amoresa.woff2) }
     above. Nothing else needs to change. */
  --fleur-serif: 'Playfair Display', 'Amiri', Georgia, serif;
  --fleur-garet: 'Garet', 'Playfair Display', Georgia, sans-serif;
  --inv-font-ui: var(--fleur-garet);
  --fleur-script: 'Amoresa', 'Ephesis', 'Noto Nastaliq Urdu', cursive;
  --fleur-swash: 'Amoresa', 'Luxurious Script', 'Ephesis', cursive;
  --fleur-script-scale: 1;
  --u: max(min(100vw / 1366, 100vh / 768), min(100vw / 540, 100vh / 1170));
  --s: var(--u);
  --ua: calc(var(--u) * 1.2);
  --pu: var(--u); /* the page unit, kept as is inside the hero (which redefines --u) */
  --sec-h: 100vh;
  --sec-s: 100vh;
  --sv: 1vh;
  background: var(--fleur-blush);
  color: var(--fleur-ink);
  font-family: var(--fleur-serif);
  font-size: 1rem;
  line-height: 1.4;
  overflow-x: clip;
}
@supports (height: 100svh) {
  .inv--fleur { --u: max(min(100vw / 1366, 100svh / 768), min(100vw / 540, 100svh / 1170)); --sec-h: 100svh; --sec-s: 100svh; --sv: 1svh; }
}
/* The section box follows the dynamic viewport (no sliver of the next section when the browser bar tucks away);
   sizes inside keep following the small viewport, so nothing rescales while scrolling. */
@supports (height: 100dvh) {
  .inv--fleur { --sec-h: 100dvh; }
}
@media (min-width: 900px) {
  .inv--fleur { --ua: var(--u); }
}
@media (min-width: 700px) {
  .inv.inv--fleur { background: var(--fleur-blush); }
}
body.inv-body--fleur { background: #F8EDED; }
.inv--fleur[lang='ar'] {
  --fleur-serif: 'Amiri', 'Playfair Display', Georgia, serif;
  /* Garet, Playfair and Amoresa have no Arabic: the Arabic page keeps its own faces. */
  --fleur-garet: var(--fleur-serif);
  --fleur-script: 'Noto Nastaliq Urdu', 'Amiri', serif;
  --fleur-swash: 'Noto Nastaliq Urdu', 'Amiri', serif;
  --inv-font-ui: var(--fleur-serif);
  --fleur-script-scale: 0.66;
  line-height: 1.7;
}
.inv--fleur :focus-visible { outline: 2px solid var(--fleur-wine); outline-offset: 3px; }
:where(.inv--fleur) :is(p, h1, h2, ul, ol, figure) { margin: 0; }
.inv--fleur .inv-controls { inset-inline-end: max(14px, env(safe-area-inset-right)); }

.fleur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ type */
.fleur-caps {
  font-family: var(--fleur-garet);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.3;
}
.fleur-serif { font-family: var(--fleur-serif); font-weight: 400; }
.fleur-script,
.fleur-title {
  font-family: var(--fleur-script);
  font-weight: 400;
  line-height: 1.2;
  color: var(--fleur-ink);
}
.fleur-title {
  margin: 0;
  font-size: max(calc(35 * var(--u) * var(--fleur-script-scale)), 28px);
  text-align: center;
  text-wrap: balance;
}
.inv--fleur[lang='ar'] .fleur-caps { letter-spacing: 0; text-transform: none; line-height: 1.6; }
.inv--fleur[lang='ar'] :is(.fleur-script, .fleur-title) { line-height: 2; font-weight: 400; }

/* ------------------------------------------------------------------ layout helpers */
.fleur-page { position: relative; }
.fleur-slide {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.fleur-hero { min-height: var(--sec-h); }
.fleur-canvas { position: relative; width: 100%; }
/* Decorations placed by their design coordinates: --x (left), --y (top), --w (width). */
.fleur-abs {
  position: absolute;
  z-index: -1;
  left: calc(50% + (var(--x) - 683) * var(--s));
  top: calc(var(--y) * var(--s));
  width: calc(var(--w) * var(--s));
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.inv--fleur img { -webkit-user-drag: none; }

/* ------------------------------------------------------------------ gate (the opening)
   Closed: the cover still with "Tap to open". On a tap invitation-fleur.js plays the gate video over the
   still, then the gate splits down the middle into two doors (canvases holding the video's frame) that
   swing open towards the viewer and reveal the hero. The doors use physical left/right on purpose:
   they are a picture of the video, which never mirrors, and they behave the same in RTL. */
.fleur-gate {
  /* The video's backdrop as browsers decode it (sampled from a decoded frame); the frame fades into it
     at its edges, so a one-step difference with the page colour never shows as a box. */
  --fleur-gate-bg: #F9EDEE;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--fleur-gate-bg);
  transition: opacity 0.5s ease, visibility 0.5s;
}
.inv-embed .fleur-gate,
.inv-skip-envelope .fleur-gate { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.js) .fleur-gate,
.fleur-gate[hidden] { display: none; }
/* If the script that runs the gate never loaded, the standard opening just fades it. */
.inv:not(.fleur-live).is-opening .fleur-gate,
.inv:not(.fleur-live).is-open .fleur-gate { opacity: 0; visibility: hidden; pointer-events: none; }
/* Reduced motion: no video, a quick cross-fade. */
.fleur-gate.is-fade { opacity: 0; visibility: hidden; pointer-events: none; }
.fleur-gate__open {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(14px, 3.4vh, 30px);
  padding: 24px 16px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* The stage is the size the still art has always had; the video frame is placed around it so the
   art inside the video lands exactly on the art in the still (numbers: where the bow sits in each
   poster, 826 of 1280 px wide landscape, 600 of 720 portrait). */
.fleur-gate__stage {
  position: relative;
  width: min(calc(760 * var(--u)), 94vw);
  aspect-ratio: 1302 / 509;
  animation: fleur-float 6s ease-in-out infinite;
}
.fleur-gate__frame,
.fleur-door__frame { position: absolute; }
.fleur-gate__frame { width: 154.96%; left: -27.48%; top: -61.3%; aspect-ratio: 16 / 9; }
@media (orientation: portrait) {
  .fleur-gate__frame { width: 120%; left: -10%; top: -222.5%; aspect-ratio: 9 / 16; }
}
/* Its edges fade into the backdrop, so the frame never reads as a box and the doves leave softly. */
.fleur-gate__frame::after,
.fleur-door__frame::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--fleur-gate-bg), rgba(249, 237, 238, 0) 9%, rgba(249, 237, 238, 0) 91%, var(--fleur-gate-bg)),
    linear-gradient(to bottom, var(--fleur-gate-bg), rgba(249, 237, 238, 0) 12%, rgba(249, 237, 238, 0) 88%, var(--fleur-gate-bg));
}
.fleur-gate__frame picture { display: contents; }
.fleur-gate__still,
.fleur-gate__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.fleur-gate__video { opacity: 0; }
.fleur-gate__frame.is-playing .fleur-gate__video { opacity: 1; }
/* "Tap to open": centred, no names above it and no pulsing dot; spaced capitals in Garet, like the medallion's
   "We're getting married". */
.fleur-gate__hint {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255, 251, 246, 0.85);
  font-family: var(--fleur-garet);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fleur-ink);
  text-align: center;
  text-indent: 0.18em; /* balances the letter-spacing trailing the last letter */
  white-space: nowrap;
  transition: opacity 0.4s;
}
.inv--fleur[lang='ar'] .fleur-gate__hint { font-size: 1.05rem; letter-spacing: 0; text-indent: 0; text-transform: none; }
.fleur-gate__open:focus-visible .fleur-gate__hint { outline: 2px solid var(--fleur-wine); outline-offset: 3px; }
.inv.is-opening .fleur-gate__hint { opacity: 0; }
@media (hover: hover) {
  .inv:not(.is-opening) .fleur-gate__open:hover .fleur-gate__stage { animation-duration: 3s; }
}
@keyframes fleur-float { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(6px); } }
@media (max-height: 460px) { .fleur-gate__stage { width: min(calc(560 * var(--u)), 60vh * 2.5, 80vw); } }

/* The doors. Each is half the screen holding the whole scene shifted so the two halves meet exactly. */
.fleur-doors {
  position: absolute;
  inset: 0;
  direction: ltr;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  visibility: hidden;
  pointer-events: none;
}
.fleur-door {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: var(--fleur-gate-bg);
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 0 0 0 rgba(60, 18, 18, 0);
  transition: transform 1.45s cubic-bezier(0.55, 0.05, 0.25, 1), box-shadow 1.45s ease-in;
}
/* The left door is a pixel wider so the two never leave a hairline at the seam. */
.fleur-door--l { left: 0; width: calc(50% + 1px); transform-origin: 0 50%; }
.fleur-door--r { left: 50%; right: 0; transform-origin: 100% 50%; }
.fleur-door__scene { position: absolute; top: 0; height: 100%; width: var(--gw, 100vw); }
.fleur-door--l .fleur-door__scene { left: 0; }
.fleur-door--r .fleur-door__scene { left: calc(var(--gw, 100vw) / -2); }
.fleur-door__frame { left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); }
.fleur-door__canvas { display: block; width: 100%; height: 100%; }
.fleur-door__shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.45s ease-in;
}
.fleur-door--l .fleur-door__shade { background: linear-gradient(to right, rgba(60, 18, 18, 0) 15%, rgba(60, 18, 18, 0.5)); }
.fleur-door--r .fleur-door__shade { background: linear-gradient(to left, rgba(60, 18, 18, 0) 15%, rgba(60, 18, 18, 0.5)); }
/* Split: the backdrop gives way to the page behind, the video steps aside and the doors take over. */
.fleur-gate.is-split { background: transparent; transition: none; }
.fleur-gate.is-split .fleur-gate__open { opacity: 0; pointer-events: none; }
.fleur-gate.is-split .fleur-doors { visibility: visible; }
/* Towards the viewer: the inner edges come forward and out to the sides. */
.fleur-gate.is-swing .fleur-door--l { transform: rotateY(-104deg); }
.fleur-gate.is-swing .fleur-door--r { transform: rotateY(104deg); }
.fleur-gate.is-swing .fleur-door { box-shadow: 0 0 70px 6px rgba(60, 18, 18, 0.3); }
.fleur-gate.is-swing .fleur-door__shade { opacity: 1; }

/* ------------------------------------------------------------------ cover (doves and bow) */
.fleur-cover {
  display: grid;
  place-items: center;
  min-height: calc(723 * var(--u));
  background: var(--fleur-blush);
}
.fleur-cover__bow {
  width: min(calc(407 * var(--ua)), 92vw);
  height: auto;
  animation: fleur-float 7s ease-in-out infinite;
}
/* Page one of the Canva design, a screen of its own. With the gate it is the gate's picture (the doves have
   already flown away), so it only shows when the gate is skipped (?open=1, embeds) or switched off; the wreath
   screen after it stays clean. */
.inv--fleur.fleur--gate .fleur-cover { display: none; }
.inv-skip-envelope .inv--fleur.fleur--gate .fleur-cover,
.inv-embed .inv--fleur.fleur--gate .fleur-cover { display: grid; }

/* ------------------------------------------------------------------ hero */
/* The hero: the wreath (a 1366 x 768 canvas of which the flowers fill x 325-1111, y 18-750), as large as fits the
   width (on phones the outermost leaves just reach the screen's edges) and the height minus a reserve for the
   bands above and below, where the doves fly. The group (wreath + date line) is centred vertically. --hu is that
   scale; the hero gives it to everything inside as --u/--s. Always exactly one screen tall, phones included, so the
   blush ends at the bottom of the screen and the next section never peeks in (owners, 2026-10-22). */
.fleur-hero {
  --hero-vh: 100vh;
  --hero-reserve: clamp(72px, 13 * var(--sv), 130px);
  --hu: max(0.36px, min(0.78 * var(--pu), 100vw / 772, (var(--hero-vh) - var(--hero-reserve)) / 768));
  --u: var(--hu);
  --s: var(--hu);
  background: var(--fleur-blush);
}
@supports (height: 100svh) {
  .fleur-hero { --hero-vh: 100svh; }
}
/* Wide screens: room above and below the wreath for the doves' bands (see invitation-fleur.js). */
@media (min-aspect-ratio: 5/4) {
  .fleur-hero { --hero-reserve: clamp(300px, 34 * var(--sv), 320px); }
}
/* Narrow screens: the flowers sit a little right of the canvas centre (x 718, the medallion 699), so the wreath
   and medallion move left a little so the flowers share the screen's margins evenly. */
@media (max-width: 899px) {
  .fleur-hero :is(.fleur-wreath, .fleur-oval) { translate: calc(-11.5 * var(--u)) 0; }
}
.fleur-canvas--hero { flex: none; height: calc(768 * var(--u)); }
/* As the doors swing open the hero settles forward a touch (only after the gate, never on a skip). */
.inv.fleur-live.is-open .fleur-hero { animation: fleur-hero-in 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; transform-origin: 50% 38%; }
@keyframes fleur-hero-in { from { transform: scale(0.975); } to { transform: none; } }

/* The wreath: 17 separate pieces stacked in design order (back to front), under the doves and the
   medallion. Each span is the piece's Canva box with its Canva rotation (about its centre); the image inside
   sways about its own pivot (--px/--py, where the stem would be) in its own frame, so the two never fight. */
.fleur-wreath { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fleur-fl { z-index: auto; height: calc(var(--h) * var(--s)); rotate: var(--r); }
.fleur-fl__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  transform-origin: var(--px, 50%) var(--py, 100%);
  animation: fleur-sway var(--dur, 7s) ease-in-out var(--sd, 0s) infinite alternate;
}
@keyframes fleur-sway {
  from { transform: rotate(calc(var(--amp, 1.5) * -1deg)); }
  to { transform: rotate(calc(var(--amp, 1.5) * 1deg)); }
}
/* The intro: once the page is open (the doors have begun to swing) and the medallion's fonts are in, the
   pieces and the medallion bloom together, one soft composition. Until then, with script running and motion
   allowed, they wait invisible; the 5 s animation is a safety net that shows them if the script never opens
   the page. Without script, or with reduced motion, nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  html.js .inv--fleur:not(.is-open.fleur-ready) :is(.fleur-fl__img, .fleur-oval, .fleur-hero__note) {
    opacity: 0;
    animation: fleur-unhide 0.01s linear 5s both;
  }
  .inv--fleur.is-open.fleur-ready .fleur-fl__img {
    animation:
      fleur-bloom 1.15s cubic-bezier(0.22, 0.7, 0.25, 1) var(--bd, 0s) both,
      fleur-sway var(--dur, 7s) ease-in-out var(--sd, 0s) infinite alternate;
  }
  .inv--fleur.is-open.fleur-ready .fleur-oval { animation: fleur-bloom-oval 1.5s cubic-bezier(0.22, 0.7, 0.25, 1) 0.15s both; }
  /* The line under the wreath (date note / Hijri date) follows once the medallion is mostly in. */
  .inv--fleur.is-open.fleur-ready .fleur-hero__note { animation: fleur-unhide-from 0.9s ease-out 0.8s both; }
}
/* Off-screen, the breeze stops (invitation-fleur.js toggles this) so a phone isn't animating what nobody sees.
   After the intro rules above on purpose: their animation shorthand would otherwise reset the play state. */
.inv--fleur .fleur-hero.is-away .fleur-fl__img { animation-play-state: paused; }
@keyframes fleur-unhide { to { opacity: 1; } }
@keyframes fleur-unhide-from { from { opacity: 0; } to { opacity: 1; } }
@keyframes fleur-bloom {
  from { opacity: 0; scale: 0.96; }
  55% { opacity: 1; }
  to { opacity: 1; scale: 1; }
}
@keyframes fleur-bloom-oval {
  from { opacity: 0; scale: 0.97; }
  60% { opacity: 1; }
  to { opacity: 1; scale: 1; }
}
/* The doves fly in front of the flowers. Four wing-flap frames are stacked in each; without JS (or with reduced
   motion) only the first shows, resting in the Canva pose. invitation-fleur.js flies them. */
.fleur-hero__dove { z-index: 1; aspect-ratio: 430 / 445; } /* over the flowers, under the medallion (it comes later) */
.fleur-hero__dove--b { transform: scaleX(-1); }
.fleur-dove__f { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.fleur-dove__f:not(:first-child) { display: none; }
.fleur-doves-live .fleur-dove__f { display: block; visibility: hidden; }
.fleur-doves-live .fleur-dove__f.is-on { visibility: visible; }
.fleur-doves-live .fleur-hero__dove { will-change: transform; }
/* Wide screens: the birds fly in the free space either side of the wreath, at the design's heights. Phones (the
   wreath nearly fills the width): they fly across the bands above and below it instead, smaller, at heights
   invitation-fleur.js sets (class fleur-doves-bands), and may cross the wreath's edges. Until the script
   has them flying, narrow screens show none. */
@media (max-width: 899px) {
  .fleur-hero__dove { display: none; }
  .fleur-doves-live .fleur-hero__dove { display: block; }
}
.fleur-doves-bands .fleur-hero__dove { left: 0; width: clamp(56px, 18vw, 76px); }

.fleur-oval {
  position: absolute;
  z-index: 1;
  left: calc(50% + (530 - 683) * var(--u));
  top: calc(173 * var(--u));
  width: calc(338 * var(--u));
  height: calc(461 * var(--u));
  border-radius: 50%;
  background: var(--fleur-cream);
  color: var(--fleur-ink);
}
.fleur-oval__arcs { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.fleur-arc {
  fill: currentColor;
  font-family: var(--fleur-garet);
  letter-spacing: 0.18em;
}
.inv--fleur[lang='ar'] .fleur-arc { letter-spacing: 0; font-size: 1.3em; }
/* The medallion is small on phones, so the arched lines take the larger size their arc still fits (--fs-m). */
@media (max-width: 699px) {
  .inv--fleur:not([lang='ar']) .fleur-arc { font-size: calc(var(--fs-m) * 1px); }
}
.fleur-oval__date {
  position: absolute;
  top: 50%;
  display: grid;
  margin-top: calc(-24 * var(--u));
  font-family: var(--fleur-garet);
  font-size: max(calc(21.2 * var(--u)), 13px);
  letter-spacing: 0.05em;
  line-height: 1.17;
  text-align: center;
}
.fleur-oval__date--start { inset-inline-start: calc(39 * var(--u)); }
.fleur-oval__date--end { inset-inline-end: calc(36 * var(--u)); }
.inv--fleur[lang='ar'] .fleur-oval__date { letter-spacing: 0; line-height: 1.3; }
.fleur-hero__note {
  position: relative;
  flex: none;
  margin-top: calc(-8 * var(--u));
  padding: 0 16px;
  font-family: var(--fleur-garet);
  font-size: max(calc(17 * var(--u)), 14px);
  letter-spacing: 0.1em;
  color: rgba(50, 38, 14, 0.78);
}
.inv--fleur[lang='ar'] .fleur-hero__note { letter-spacing: 0; font-size: max(calc(20 * var(--u)), 16px); }

/* The monogram: a serif letter with a script letter over its shoulder. Sized in em. */
.fleur-mono { position: absolute; left: 50%; margin: 0; line-height: 1; color: var(--fleur-ink); pointer-events: none; }
.fleur-mono__big, .fleur-mono__script { position: absolute; display: block; left: 0; white-space: nowrap; }
.fleur-mono__big { font-family: var(--fleur-serif); font-size: 1em; translate: -50% 0; }
.fleur-mono__script { font-family: var(--fleur-swash); font-size: 1.05em; translate: calc(-50% - 0.16em) 0; }
.fleur-mono--hero { top: calc(238 * var(--u)); font-size: calc(186.6 * var(--u)); }
/* Arabic letters merge into one shape if they overlap, so the two initials stand side by side, as large as the
   Latin pair: the first partner's in Nastaliq on the right (like the Latin swash letter), the second in Amiri. */
.inv--fleur[lang='ar'] .fleur-mono { display: flex; flex-direction: row-reverse; align-items: center; gap: 0.06em; translate: -50% -50%; }
.inv--fleur[lang='ar'] .fleur-mono__big,
.inv--fleur[lang='ar'] .fleur-mono__script { position: static; translate: none; }
.inv--fleur[lang='ar'] .fleur-mono__big { font-size: 0.6em; line-height: 1.3; }
.inv--fleur[lang='ar'] .fleur-mono__script { font-size: 0.56em; line-height: 1.8; }
.inv--fleur[lang='ar'] .fleur-mono--hero { top: calc(268 * var(--u)); }
.fleur-mono--hero .fleur-mono__big { top: -0.3em; }
.fleur-mono--hero .fleur-mono__script { top: -0.88em; }

/* ------------------------------------------------------------------ countdown + venue */
.fleur-venue { background: var(--fleur-cream); }
/* The countdown, then the venue, clear of the roses. */
.fleur-venue > .fleur-canvas {
  display: flex;
  flex-direction: column;
  gap: calc(64 * var(--ua));
  padding: calc(104 * var(--ua)) 16px calc(50 * var(--ua));
}
.fleur-venue__roses { z-index: 0; }
.fleur-venue__sprig { top: calc(-14 * var(--u)); }
.fleur-countdown { position: relative; z-index: 1; }
.fleur-countdown__title { font-size: max(calc(14.4 * var(--u)), 12px); color: var(--fleur-ink); }
.fleur-countdown__grid {
  display: flex;
  justify-content: center;
  gap: calc(25 * var(--ua));
  margin-top: calc(17 * var(--ua));
}
.fleur-countdown__cell {
  display: grid;
  justify-items: center;
  align-content: start;
  /* never wider than a third of the screen, whatever the size the height asks for */
  width: min(calc(91 * var(--ua)), calc((100vw - 32px - 2 * 25 * var(--ua)) / 3));
  min-width: 58px;
}
.fleur-countdown__box {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16%;
  background: var(--fleur-blush);
  font-family: var(--fleur-garet);
  font-size: max(calc(20.7 * var(--u)), 16px);
  letter-spacing: 0.05em;
  color: var(--fleur-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.inv--fleur[lang='ar'] .fleur-countdown__box { letter-spacing: 0; }
.fleur-countdown__unit {
  margin-top: calc(14 * var(--ua));
  font-family: var(--fleur-serif);
  font-size: max(calc(20.7 * var(--u)), 15px);
  letter-spacing: 0.05em;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--fleur-ink);
}
.fleur-countdown:has([data-countdown-done]:not([hidden])) .fleur-countdown__title { display: none; }
.fleur-countdown__done {
  margin-top: calc(24 * var(--u));
  font-family: var(--fleur-script);
  font-size: max(calc(58 * var(--u) * var(--fleur-script-scale)), 34px);
  color: var(--fleur-wine);
}
.fleur-venue__body { position: relative; z-index: 1; display: grid; justify-items: center; }
.fleur-venue__art { width: calc(180 * var(--ua)); min-width: 130px; height: auto; }
.fleur-venue__name {
  margin-top: calc(26 * var(--ua));
  max-width: min(100%, 640px);
  font-size: max(calc(15.3 * var(--u)), 12.5px);
  color: var(--fleur-ink);
}
.fleur-venue__place {
  margin-top: calc(4 * var(--u));
  max-width: min(100%, 640px);
  font-size: max(calc(16 * var(--u)), 15px);
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--fleur-ink);
}
.inv--fleur[lang='ar'] :is(.fleur-countdown__unit, .fleur-venue__place) { letter-spacing: 0; }
.fleur-link {
  margin-top: calc(14 * var(--ua));
  padding-block: 4px;
  font-family: var(--fleur-garet);
  font-size: max(calc(14.5 * var(--u)), 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: rgba(102, 20, 20, 0.4);
  text-underline-offset: 0.3em;
  color: var(--fleur-wine);
  transition: text-decoration-color 0.25s;
}
.fleur-link:hover { text-decoration-color: currentColor; }
.inv--fleur[lang='ar'] .fleur-link { letter-spacing: 0; text-transform: none; font-size: max(calc(17 * var(--u)), 14px); }
/* Arabic: the language pill sits at the top left, so the roses move to the top right and the sprig to the left
   (mirrored). !important because the positions are inline custom properties. */
[dir='rtl'] .fleur-venue__roses { --x: 722 !important; transform: scaleX(-1); }
[dir='rtl'] .fleur-venue__sprig { --x: 390 !important; transform: scaleX(-1); }

/* ------------------------------------------------------------------ timeline */
.fleur-timeline { background: var(--fleur-blush); }
.fleur-timeline > .fleur-canvas { padding: calc(54 * var(--ua)) 16px calc(46 * var(--ua)); }
.fleur-timeline .fleur-title { margin-bottom: calc(12 * var(--ua)); }
.fleur-tl {
  /* One moment's row, as the Canva spaces them; never below 54px (the icon needs room). */
  --row: max(54px, calc(98 * var(--ua)));
  --ico: calc(168 * var(--u));
  --gutter: calc(48 * var(--u));
  position: relative;
  width: min(calc(420 * var(--u)), 100%);
  min-width: min(300px, 100%);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: start;
}
/* the line and its dot run from the first moment to the last; as guests scroll, the dot travels
   down the line and the part behind it fills in (--tl-y / --tl-fill, set by invitation-fleur.js) */
.fleur-tl::before {
  content: '';
  position: absolute;
  inset-block: calc(var(--row) / 2);
  inset-inline-start: var(--ico);
  width: 1px;
  background: linear-gradient(var(--fleur-wine), var(--fleur-wine)) top / 100% var(--tl-fill, 0px) no-repeat, var(--fleur-ink);
}
.fleur-tl::after {
  content: '';
  position: absolute;
  inset-block-start: var(--tl-y, calc(var(--row) / 2));
  translate: 0 -50%;
  inset-inline-start: calc(var(--ico) - 9 * var(--u));
  width: calc(19 * var(--u));
  min-width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fleur-wine);
}
.fleur-tl__item {
  display: grid;
  grid-template-columns: var(--ico) 1fr;
  align-items: center;
  min-height: var(--row);
}
.fleur-tl__icon { display: grid; place-items: center; }
.fleur-tl__icon img {
  width: clamp(42px, calc(var(--row) * 0.7), calc(68 * var(--ua)));
  height: clamp(42px, calc(var(--row) * 0.7), calc(68 * var(--ua)));
  object-fit: contain;
}
.fleur-tl__text { display: grid; gap: 1px; padding-inline-start: var(--gutter); }
.fleur-tl__time,
.fleur-tl__label {
  font-family: var(--fleur-serif);
  font-size: max(calc(15.3 * var(--u)), 13.5px);
  letter-spacing: 0.15em;
  line-height: 1.35;
  color: #000;
}
.fleur-tl__time { text-transform: uppercase; }
.inv--fleur[lang='ar'] :is(.fleur-tl__time, .fleur-tl__label) { letter-spacing: 0; font-size: max(calc(21 * var(--u)), 16px); line-height: 1.6; }
@media (max-width: 699px) {
  .fleur-tl { --ico: 34%; --gutter: 18px; }
}

/* ------------------------------------------------------------------ dress code · gifts · bank details */
.fleur-extras { background: var(--fleur-cream-2); }
/* Dress code and gifts: a pink card each, one above the other (the Canva's two 341 px cards, 76 px apart). */
.fleur-extras > .fleur-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(76 * var(--u));
  padding: calc(40 * var(--ua)) 16px calc(64 * var(--ua));
}
.fleur-card {
  background: var(--fleur-blush);
  border-radius: max(calc(16 * var(--u)), 12px);
  color: var(--fleur-ink);
}
.fleur-panel {
  display: grid;
  justify-items: center;
  width: min(calc(341 * var(--ua)), 100%);
  min-width: min(280px, 100%);
  row-gap: calc(18 * var(--ua)); /* one even step between every block in a card */
  padding: calc(26 * var(--ua)) max(calc(28 * var(--ua)), 18px) calc(28 * var(--ua));
  text-align: center;
}
.fleur-panel__title { margin: 0; font-size: max(calc(35 * var(--u) * var(--fleur-script-scale)), 28px); line-height: 1.2; }
.fleur-panel__art { display: block; height: auto; }
.fleur-panel__art--dress { width: calc(164 * var(--ua)); }
.fleur-panel__art--gift { width: calc(155 * var(--ua)); }
.fleur-panel__caps {
  max-width: calc(290 * var(--ua));
  font-size: max(calc(15.3 * var(--u)), 12.5px);
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: var(--fleur-ink);
  text-wrap: balance;
}
.fleur-panel__caps--small { max-width: calc(220 * var(--ua)); font-size: max(calc(13.2 * var(--u)), 11.5px); }
.fleur-panel__text {
  max-width: calc(230 * var(--ua));
  font-size: max(calc(16 * var(--u)), 15px);
  letter-spacing: 0.03em;
  line-height: 1.38;
  text-wrap: pretty;
}
.inv--fleur[lang='ar'] .fleur-panel__caps { font-size: max(calc(19 * var(--u)), 16px); line-height: 1.7; }
.inv--fleur[lang='ar'] .fleur-panel__text { letter-spacing: 0; font-size: max(calc(19 * var(--u)), 16.5px); line-height: 1.75; }

.fleur-bank { display: grid; justify-items: center; width: 100%; margin-top: -10px; } /* the button's own padding makes up the step */
.fleur-bank__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: -10px;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: max(calc(15.3 * var(--u)), 12.5px);
  letter-spacing: 0.2em;
  color: var(--fleur-ink);
  cursor: pointer;
  transition: background-color 0.25s;
}
.fleur-bank__toggle:hover { background: #F1DFDF; }
.fleur-bank__chev { flex: none; transition: transform 0.3s; }
.fleur-bank__toggle[aria-expanded='true'] .fleur-bank__chev { transform: rotate(180deg); }
.fleur-bank__panel { width: 100%; margin-top: 8px; animation: fleur-panel 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fleur-bank__panel[hidden] { display: none; }
@keyframes fleur-panel { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.fleur-bank__list { display: grid; gap: 4px; padding: 8px 10px; border-radius: max(calc(12 * var(--u)), 10px); background: var(--fleur-cream-2); list-style: none; text-align: start; }
.fleur-bank__line { display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 8px; border-radius: 10px; }
.fleur-bank__line + .fleur-bank__line { border-block-start: 1px solid rgba(50, 38, 14, 0.12); }
.fleur-bank__text { display: grid; flex: 1; min-width: 0; gap: 2px; }
.fleur-bank__label { font-family: var(--fleur-garet); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(50, 38, 14, 0.72); }
.inv--fleur[lang='ar'] .fleur-bank__label { letter-spacing: 0; text-transform: none; font-size: 0.92rem; }
.fleur-bank__value { font-family: var(--fleur-garet); font-size: 0.95rem; letter-spacing: 0.12em; overflow-wrap: anywhere; color: var(--fleur-ink); }
.inv--fleur[lang='ar'] .fleur-bank__value { letter-spacing: 0; }
.fleur-bank__copy {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--fleur-wine);
  transition: background-color 0.2s;
}
.fleur-bank__copy:hover { background: rgba(102, 20, 20, 0.09); }
.fleur-bank__copy .fleur-bank__done { display: none; }
.fleur-bank__copy.is-copied .fleur-bank__done { display: block; }
.fleur-bank__copy.is-copied svg:first-child { display: none; }

/* ------------------------------------------------------------------ RSVP */
.fleur-rsvp { background: var(--fleur-blush); }
/* The form may be taller than a small phone's screen; the section then simply grows. */
.fleur-rsvp > .fleur-canvas { display: grid; justify-items: center; padding: calc(40 * var(--ua)) 16px calc(93 * var(--ua)); }
.fleur-rsvp__mailbox { width: calc(111 * var(--u)); min-width: 64px; height: auto; }
.fleur-rsvp .fleur-title { margin-top: calc(8 * var(--ua)); }
.fleur-rsvp__deadline { margin-top: calc(12 * var(--ua)); font-size: max(calc(16 * var(--u)), 13px); color: var(--fleur-ink); }
.inv--fleur[lang='ar'] .fleur-rsvp__deadline { margin-top: 0; } /* the Arabic title's taller line already leaves the room */
.fleur-rsvp__deadline sup { font-size: 0.6em; line-height: 0; vertical-align: 0.8em; letter-spacing: 0.1em; }
.fleur-rsvp__card {
  position: relative;
  width: min(calc(448 * var(--u)), 100%);
  min-width: min(330px, 100%);
  margin-top: calc(26 * var(--ua));
  padding: max(calc(26 * var(--u)), 20px) max(calc(26 * var(--u)), 18px) max(calc(24 * var(--u)), 22px);
  border-radius: max(calc(16 * var(--u)), 14px);
  background: var(--fleur-cream-2);
  text-align: start;
}
.fleur-rsvp__roses {
  position: absolute;
  z-index: 2;
  inset-inline-start: calc(-59 * var(--u));
  bottom: calc(-64 * var(--u));
  width: max(calc(172 * var(--u)), 96px);
  height: auto;
  pointer-events: none;
}
[dir='rtl'] .fleur-rsvp__roses { inset-inline-start: auto; left: calc(-59 * var(--u)); right: auto; }
.inv--fleur .fleur-form { display: grid; gap: 0; }
.fleur-field { margin: 0; margin-top: max(calc(14 * var(--u)), 12px); padding: 0; border: 0; min-width: 0; }
.fleur-form > input[type='hidden'] + .fleur-field { margin-top: 0; }
.fleur-field > label,
.fleur-field > legend {
  display: block;
  margin-bottom: max(calc(6 * var(--u)), 5px);
  padding: 0;
  font-family: var(--fleur-garet);
  font-size: max(calc(16 * var(--u)), 13.5px);
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--fleur-brown);
}
.inv--fleur[lang='ar'] :is(.fleur-field > label, .fleur-field > legend, .fleur-field input, .fleur-field textarea, .fleur-field select, .fleur-opt span) { letter-spacing: 0; }
.inv--fleur[lang='ar'] .fleur-field > label, .inv--fleur[lang='ar'] .fleur-field > legend { font-size: max(calc(20 * var(--u)), 16px); text-transform: none; }
.fleur-field :is(input[type='text'], input[type='email'], select, textarea) {
  display: block;
  width: 100%;
  min-height: max(calc(45 * var(--u)), 46px);
  padding: 0 max(calc(14 * var(--u)), 12px);
  border: 2px solid #B5A893;
  border-radius: max(calc(12 * var(--u)), 11px);
  background: #FDF7F4;
  font-family: var(--fleur-garet);
  font-size: max(calc(18 * var(--u)), 16px);
  letter-spacing: 0.02em;
  color: var(--fleur-ink);
  appearance: none;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.fleur-field textarea { min-height: max(calc(70 * var(--u)), 72px); padding-block: 12px; line-height: 1.45; resize: vertical; }
.fleur-field select {
  padding-inline-end: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
[dir='rtl'] .fleur-field select { background-position: 20px 50%, 15px 50%; }
.fleur-field ::placeholder { color: #7B7068; opacity: 1; }
.fleur-field :is(input, select, textarea):focus { outline: none; border-color: var(--fleur-wine); box-shadow: 0 0 0 1px var(--fleur-wine); background: #FFFFFF; }
.fleur-field input[type='email'] { text-align: start; }
.fleur-attend__opts { display: flex; flex-wrap: wrap; gap: max(calc(22 * var(--u)), 10px); }
.fleur-opt { position: relative; flex: 1 1 max(calc(150 * var(--u)), 122px); min-width: 0; cursor: pointer; }
.fleur-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fleur-opt span {
  display: grid;
  place-items: center;
  min-height: max(calc(45 * var(--u)), 46px);
  padding: 6px 12px;
  border: 2px solid #B5A893;
  border-radius: max(calc(12 * var(--u)), 11px);
  background: #FDF7F4;
  font-family: var(--fleur-garet);
  font-size: max(calc(16.5 * var(--u)), 14.5px);
  line-height: 1.25;
  text-align: center;
  color: #5E544D;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.fleur-opt:hover span { border-color: var(--fleur-brown); }
.fleur-opt input:checked + span { border-color: var(--fleur-wine); background: #F6E2E2; color: var(--fleur-wine-dark); box-shadow: 0 0 0 1px var(--fleur-wine); }
.fleur-opt input:focus-visible + span { outline: 2px solid var(--fleur-wine); outline-offset: 3px; }
.fleur-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(calc(191 * var(--u)), 100%);
  min-width: 170px;
  min-height: max(calc(51 * var(--u)), 48px);
  margin: max(calc(20 * var(--u)), 18px) auto 0;
  padding: 8px 20px;
  border: 2px solid #B5A893;
  border-radius: max(calc(12 * var(--u)), 11px);
  background: #E6D3D0;
  font-family: var(--fleur-garet);
  font-size: max(calc(18.7 * var(--u)), 16px);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--fleur-brown);
  cursor: pointer;
  transition: background-color 0.25s, transform 0.2s;
}
.inv--fleur .fleur-submit { color: var(--fleur-brown); }
.fleur-submit:hover { background: #DDC3BF; border-color: var(--fleur-brown); }
.fleur-submit:active { transform: translateY(1px); }
.fleur-submit:disabled { opacity: 0.6; cursor: progress; }
.inv--fleur[lang='ar'] .fleur-submit { letter-spacing: 0; }
.fleur-rsvp__thanks,
.fleur-rsvp__error {
  margin-top: 12px;
  font-family: var(--fleur-serif);
  font-size: max(calc(26 * var(--u)), 19px);
  line-height: 1.45;
  text-align: center;
  color: var(--fleur-wine);
}
.fleur-rsvp__error { font-family: var(--fleur-garet); font-size: 1rem; color: #9B3D2E; }

/* ------------------------------------------------------------------ footer */
.fleur-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--ua));
  padding: calc(56 * var(--ua)) 16px calc(50 * var(--ua));
  background: var(--fleur-cream-2);
  text-align: center;
}
.fleur-footer__mark { --mark: min(max(calc(185 * var(--ua)), 140px), 62vw); position: relative; width: var(--mark); }
.fleur-footer__frame { width: 100%; height: auto; }
.fleur-mono--footer { top: 50%; font-size: calc(var(--mark) * 0.429); }
.fleur-mono--footer .fleur-mono__big { top: -0.36em; }
.fleur-mono--footer .fleur-mono__script { top: -0.66em; }
.fleur-footer__names { margin-top: calc(6 * var(--ua)); font-size: max(calc(16.9 * var(--u)), 14px); color: var(--fleur-ink); }
.fleur-footer__closing { font-size: 1.25rem; font-style: italic; color: rgba(50, 38, 14, 0.85); }
.inv--fleur[lang='ar'] .fleur-footer__closing { font-style: normal; font-size: 1.4rem; }
.fleur-footer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.fleur-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--fleur-blush);
  font-family: var(--fleur-garet);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--fleur-ink);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.fleur-chip:hover { background: #F2DFDF; }
.inv--fleur[lang='ar'] :is(.fleur-chip, .inv-footer__credit) { letter-spacing: 0; }
.fleur-footer .inv-calendar__menu,
[dir='rtl'] .fleur-footer .inv-calendar__menu {
  inset-block-start: auto;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 0;
  translate: none;
  max-width: calc(100vw - 32px);
}
.inv--fleur .inv-footer__credit { font-family: var(--fleur-garet); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--fleur-ink); opacity: 0.85; }

/* ------------------------------------------------------------------ embed + motion */
.inv-embed .fleur-hero__dove { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fleur-cover__bow, .fleur-gate__stage { animation: none; }
  .inv.fleur-live.is-open .fleur-hero { animation: none; }
  .fleur-fl__img { animation: none; }
}