/* Revive 80 Signature (Tom Chalky), the Canva design's signature script for the venue's city line.
   Supplied by the owners, converted to woff2 (Latin only; Arabic falls through to Noto Nastaliq Urdu).
   Relative url: this file sits next to the font in assets/ on Shopify and in the preview. */
@font-face {
  font-family: 'Revive 80 Signature';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font-revive80-signature-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 · Pearl (the "Pearl" Canva design). Loaded after invitation.css.

   One continuous 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 page 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, and sections grow when it needs room.
   ========================================================================== */

.inv--pearl {
  --inv-bg: #F6EEE1;
  --inv-ink: #3D3B3A;
  --inv-muted: rgba(61, 59, 58, 0.7);
  --inv-accent: #6B573B;
  --inv-soft: #EFE5D5;
  --inv-line: rgba(61, 59, 58, 0.3);
  /* The Canva design's fonts: The Seasons (nearly all the text), Symphony Pro Bold (the names, "days to go"),
     Revive 80 Signature (the venue's city, self-hosted above) and Arapey (the form's placeholders). The Seasons and
     Symphony Pro are paid fonts not licensed for the web yet: each stack names the real font first and falls through
     to its stand in (Bellefair, Pinyon Script). To switch one on, add its woff2 to assets/ and an @font-face here. */
  --pearl-serif: 'The Seasons', 'Bellefair', 'Amiri', Georgia, serif;
  --pearl-script: 'Symphony Pro', 'Pinyon Script', 'Noto Nastaliq Urdu', cursive;
  --pearl-sign: 'Revive 80 Signature', 'Noto Nastaliq Urdu', cursive;
  --pearl-placeholder: 'Arapey', 'Amiri', Georgia, serif;
  --inv-font-ui: var(--pearl-serif);
  --pearl-ink: #3D3B3A;
  --pearl-brown: #6B573B;
  --pearl-green: #646C5A; /* the design's #152611 at 65% over the page */
  --pearl-cream: #F6EEE2;
  --pearl-field: #CDBCA3;
  --u: max(min(100vw / 1366, 100vh / 768), min(100vw / 540, 0.85px, 100vh / 768));
  background: var(--inv-bg);
  color: var(--pearl-ink);
  font-family: var(--pearl-serif);
  font-size: 1rem;
  line-height: 1.4;
}
@supports (height: 100svh) {
  .inv--pearl { --u: max(min(100vw / 1366, 100svh / 768), min(100vw / 540, 0.85px, 100svh / 768)); }
}
@media (min-width: 700px) {
  .inv.inv--pearl { background: var(--inv-bg); }
}
body.inv-body--pearl { background: #F6EEE1; }
.inv--pearl[lang='ar'] { line-height: 1.7; }
.inv--pearl :focus-visible { outline: 2px solid var(--pearl-brown); outline-offset: 3px; }
:where(.inv--pearl) p { margin: 0; }
/* Full-width design: the language and music pills sit at the screen edge. */
.inv--pearl .inv-controls { inset-inline-end: max(14px, env(safe-area-inset-right)); }

/* ------------------------------------------------------------------ type */
.pearl-title {
  margin: 0;
  font-family: var(--pearl-serif);
  font-size: max(calc(26.7 * var(--u)), 19px);
  font-weight: 400;
  line-height: 1.13;
}
.pearl-caps {
  font-family: var(--pearl-serif);
  font-weight: 400;
  letter-spacing: 0.218em;
  text-transform: uppercase;
  line-height: 1.14;
}
.pearl-script { font-family: var(--pearl-script); font-weight: 700; font-synthesis: none; }
.pearl-sign { font-family: var(--pearl-sign); font-weight: 400; }
.inv--pearl[lang='ar'] :is(.pearl-title, .pearl-caps, .pearl-kicker, .pearl-button, .pearl-venue__date, .pearl-timeline__time, .pearl-timeline__label) {
  letter-spacing: 0;
  text-transform: none;
}

/* ------------------------------------------------------------------ layout helpers */
.pearl-page { position: relative; }
.pearl-section {
  position: relative;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.pearl-stage { position: relative; width: 100%; padding-inline: 16px; }
/* Artwork placed by its Canva coordinates: --x (left), --y (top), --w (width), in design units. */
.pearl-abs {
  position: absolute;
  z-index: -1;
  left: calc(50% + (var(--x) - 683) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: translateX(var(--dx, 0px)) rotate(var(--r, 0deg)) scaleX(var(--flip, 1));
}
.pearl-flip { --flip: -1; }

/* ------------------------------------------------------------------ 1 · envelope */
.pearl-envelope {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  transition: opacity 0.9s ease, visibility 0.9s;
}
.inv-embed .pearl-envelope,
.inv-skip-envelope .pearl-envelope,
.inv.is-open .pearl-envelope { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.js) .pearl-envelope { display: none; }
.pearl-envelope__open {
  position: absolute;
  inset: 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* The envelope always covers the screen; its middle (the pearl on the flap's tip) stays in view. */
.pearl-envelope__stage {
  --stage-w: max(100vw, 100vh * 1366 / 768);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-w);
  aspect-ratio: 1366 / 768;
  transform: translate(-50%, -50%);
  perspective: calc(var(--stage-w) * 1.4);
  perspective-origin: 50% 0;
}
/* Behind the flap, the inside of the envelope (until the flap has swung up past it). */
.pearl-envelope__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #DAD5CF;
  clip-path: polygon(0% 0%, 100% 0%, 69% 48.8%, 30.6% 48.9%);
  transition: opacity 0.6s ease 0.9s;
}
.pearl-envelope__pocket {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  /* The pocket, below the edges of its side folds: everything above is the opening. */
  clip-path: polygon(0% 0%, 30.6% 48.9%, 69% 48.8%, 100% 0%, 100% 100%, 0% 100%);
  transition: transform 2s cubic-bezier(0.6, 0, 0.25, 1) 1.5s;
}
.pearl-envelope__flap {
  position: absolute;
  left: 0.27%;
  top: 0;
  width: 99.51%;
  height: 77.9%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  animation: pearl-flap-peek 5s ease-in-out 1.2s infinite;
  transition: transform 0.5s ease;
}
.pearl-envelope__flap-front,
.pearl-envelope__flap-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* The flap's lining, seen once it has swung past upright. */
.pearl-envelope__flap-back {
  transform: rotateX(180deg);
  background: linear-gradient(180deg, #E9E5DF, #F3F0EB 70%);
  -webkit-mask: var(--flap) center / 100% 100% no-repeat;
  mask: var(--flap) center / 100% 100% no-repeat;
}
.pearl-envelope__hint {
  position: absolute;
  left: 50%;
  bottom: max(26px, 7vh);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(246, 238, 225, 0.85);
  font-family: var(--pearl-serif);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--pearl-ink);
  white-space: nowrap;
  transition: opacity 0.6s ease;
}
.inv--pearl[lang='ar'] .pearl-envelope__hint { letter-spacing: 0; }
.pearl-envelope__open:focus-visible .pearl-envelope__hint { outline: 2px solid var(--pearl-brown); outline-offset: 2px; }
.pearl-envelope__hint-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pearl-brown); animation: inv-pulse 2s ease-in-out infinite; }
@media (min-aspect-ratio: 19 / 10) {
  .pearl-envelope__hint { bottom: max(8px, env(safe-area-inset-bottom)); padding-block: 5px; }
}
@keyframes pearl-flap-peek {
  0%, 72%, 100% { transform: rotateX(0deg); }
  82% { transform: rotateX(7deg); }
  90% { transform: rotateX(1deg); }
}
@media (hover: hover) {
  .inv:not(.is-opening) .pearl-envelope__open:hover .pearl-envelope__flap { animation: none; transform: rotateX(6deg); transition-duration: 0.5s; }
}
/* Tap: the lid lifts slowly open like a real envelope, then the envelope glides down off the page while the
   landing frame behind it settles from a touch closer. invitation-pearl.js keeps the envelope up until this has
   played (about 3.5s). */
/* The lift is its own animation, not a transition: the resting peek is an animation too, and on touch screens
   (no hover to stop it first) swapping it for a transition made browsers skip the lift, so the lid vanished. */
.inv.is-opening .pearl-envelope__flap {
  transform: rotateX(180deg);
  opacity: 0;
  animation: pearl-flap-lift 2.2s cubic-bezier(0.55, 0, 0.3, 1) both, pearl-flap-fade 0.7s ease 1.55s both;
}
@keyframes pearl-flap-lift {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(180deg); }
}
@keyframes pearl-flap-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}
.inv.is-opening .pearl-envelope__stage::before { opacity: 0; }
.inv.is-opening .pearl-envelope__pocket { transform: translateY(105%); }
.inv.is-opening .pearl-envelope__hint { opacity: 0; }
html.js:not(.inv-skip-envelope):not(.inv-embed) .inv--pearl:has(> .pearl-envelope):not(.is-opening):not(.is-open) .pearl-hero > .pearl-stage { transform: scale(1.04); }
.pearl-hero > .pearl-stage { transform-origin: 50% 100%; transition: transform 3.2s cubic-bezier(0.3, 0, 0.2, 1) 0.4s; }

/* ------------------------------------------------------------------ 2 · hero (the landing frame)
   It always fills the screen. Its own unit lets the garden grow on narrow screens until it spans the width
   (the garden is about 440 units wide), capped so tablets don't get oversized. The clouds and names keep to the
   top and the garden to the bottom, so the foot of the table always sits on the bottom edge of the screen. */
.pearl-hero {
  --u: max(min(100vw / 1366, 100vh / 768), min(100vw / 440, 1.1px, 100vh / 768));
  /* On a screen taller than the design, half the spare height goes above the clouds, half under the names. */
  --pearl-lift: calc((100vh - 768 * var(--u)) / 2);
}
@supports (height: 100svh) {
  .pearl-hero {
    --u: max(min(100vw / 1366, 100svh / 768), min(100vw / 440, 1.1px, 100svh / 768));
    --pearl-lift: calc((100svh - 768 * var(--u)) / 2);
  }
}
.pearl-hero > .pearl-stage { min-height: max(calc(768 * var(--u)), 100vh); }
@supports (height: 100svh) {
  .pearl-hero > .pearl-stage { min-height: max(calc(768 * var(--u)), 100svh); }
}
.pearl-hero__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pearl-hero__sky,
.pearl-hero__ground { position: absolute; inset-inline: 0; height: calc(768 * var(--u)); }
.pearl-hero__sky { top: var(--pearl-lift); }
.pearl-hero__ground { bottom: 0; }
.pearl-hero__text {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  padding-top: calc(187.5 * var(--u) + var(--pearl-lift));
}
.pearl-kicker {
  font-family: var(--pearl-serif);
  font-size: max(calc(16 * var(--u)), 11.5px);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pearl-names {
  margin: 0;
  font-family: var(--pearl-script);
  font-size: max(calc(53.3 * var(--u)), 32px);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.22;
}
.pearl-hero__date { font-size: max(calc(16 * var(--u)), 12px); }
.pearl-hero__note { margin-top: calc(6 * var(--u)); font-size: max(calc(15 * var(--u)), 13px); color: var(--pearl-brown); }
.inv--pearl[lang='ar'] .pearl-names { line-height: 1.6; }
.inv--pearl[lang='ar'] .pearl-kicker { font-size: max(calc(18 * var(--u)), 15px); line-height: 1.5; }
/* Trees sway about the foot of their trunk; clouds drift. */
.pearl-hero [data-sway='tree'] { transform-origin: 50% 97%; will-change: transform; }
.pearl-hero [data-sway='cloud'] { will-change: transform; }

/* ------------------------------------------------------------------ 3 · countdown */
.pearl-countdown > .pearl-stage { min-height: calc(742 * var(--u)); }
.pearl-countdown__num {
  position: relative;
  padding-top: calc(105 * var(--u));
  font-size: max(calc(46.7 * var(--u)), 28px);
  line-height: 1.06;
  font-variant-numeric: lining-nums;
}
.pearl-countdown__label {
  position: relative;
  margin-top: calc(-2 * var(--u));
  font-size: max(calc(60 * var(--u)), 34px);
  line-height: 1.1;
}
.inv--pearl[lang='ar'] .pearl-countdown__label { margin-top: calc(10 * var(--u)); font-size: max(calc(48 * var(--u)), 28px); line-height: 2.1; }

/* ------------------------------------------------------------------ 4 · scratch to reveal, directions */
.pearl-venue > .pearl-stage { padding-block: calc(44.3 * var(--u)) calc(40 * var(--u)); }
.pearl-scratch {
  position: relative;
  width: max(calc(338 * var(--u)), min(64vw, 250px));
  aspect-ratio: 338 / 450.7;
  margin: calc(10 * var(--u)) auto 0;
  overflow: hidden;
}
/* The lace frame stays on top the whole time; only what shows through its opening (14.8% to 85.8% across, 10.2%
   to 90.3% down the card) is scratched. The photo and the linen cover share one box: that opening plus a little
   margin tucked under the lace. */
.pearl-scratch__photo,
.pearl-scratch__cover { position: absolute; left: 12.3%; top: 7.7%; width: 76%; height: 85%; }
.pearl-scratch__photo { overflow: hidden; background: #EDE6DC; }
.pearl-scratch__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pearl-scratch__frame { position: absolute; z-index: 2; left: 0.3%; top: 1.84%; width: 97.3%; height: 96.3%; pointer-events: none; user-select: none; }
.pearl-scratch__cover {
  z-index: 1;
  transition: opacity 0.9s ease;
}
.pearl-scratch.is-ready:not(.is-revealed) { touch-action: none; cursor: grab; }
.pearl-scratch.is-ready:not(.is-revealed):active { cursor: grabbing; }
.pearl-scratch.is-revealed .pearl-scratch__cover { opacity: 0; pointer-events: none; }
/* A sheen sweeps across the linen until the first scratch, so it reads as something to rub away. */
.pearl-scratch::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 10.2% 14.2% 9.7% 14.8%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 48%, transparent 66%);
  transform: translateX(-130%);
  animation: pearl-shine 4.2s ease-in-out 1.5s infinite;
}
.pearl-scratch:not(.is-ready)::after,
.pearl-scratch.is-touched::after,
.pearl-scratch.is-revealed::after { display: none; }
@keyframes pearl-shine { 0% { transform: translateX(-130%); opacity: 0; } 10% { opacity: 1; } 45%, 100% { transform: translateX(130%); opacity: 0; } }
.pearl-scratch__reveal {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--inv-bg);
  font-family: var(--pearl-serif);
  font-size: 1rem;
  color: var(--pearl-ink);
  opacity: 0;
  pointer-events: none;
}
.pearl-scratch__reveal:focus-visible { opacity: 1; pointer-events: auto; }
.pearl-scratch.is-revealed .pearl-scratch__reveal, .pearl-scratch:not(.is-ready) .pearl-scratch__reveal { display: none; }
.pearl-venue__name {
  margin-top: calc(10 * var(--u));
  font-size: max(calc(21.3 * var(--u)), 15px);
  line-height: 1.13;
}
.pearl-venue__place { margin-top: calc(6 * var(--u)); font-size: max(calc(33.3 * var(--u)), 22px); line-height: 1.13; }
.inv--pearl[lang='ar'] .pearl-venue__place { font-size: max(calc(22 * var(--u)), 16px); line-height: 2; }
.pearl-venue__date {
  margin-top: calc(6 * var(--u));
  font-size: max(calc(16 * var(--u)), 12px);
  line-height: 1.13;
  text-transform: uppercase;
  color: var(--pearl-brown);
}
.pearl-venue__date sup { font-size: 0.55em; line-height: 0; }
.pearl-venue__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: max(calc(13.2 * var(--u)), 10px);
  margin-top: calc(23 * var(--u));
}
.pearl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: max(calc(124.5 * var(--u)), 112px);
  min-height: max(calc(35.5 * var(--u)), 36px);
  padding: 4px 14px;
  border: 1px solid #424B2E;
  background: var(--pearl-green);
  font-family: var(--pearl-serif);
  font-size: max(calc(16 * var(--u)), 14px);
  line-height: 1.13;
  text-decoration: none;
  color: var(--pearl-cream);
  transition: background-color 0.25s;
}
.inv--pearl .pearl-button { color: var(--pearl-cream); }
.pearl-button:hover { background: #4F5746; }
.pearl-calendar { position: relative; }
.pearl-calendar .inv-calendar__menu { inset-block-start: calc(100% + 8px); }

/* ------------------------------------------------------------------ 5 · timeline + fan */
.pearl-timeline > .pearl-stage { min-height: calc(618 * var(--u)); padding-top: calc(49.2 * var(--u)); padding-bottom: calc(30 * var(--u)); }
.pearl-timeline__list {
  position: relative;
  z-index: 1;
  inset-inline-start: calc(39 * var(--u));
  display: grid;
  width: calc(461.5 * var(--u));
  margin: calc(36 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
}
.pearl-timeline__item { display: grid; grid-template-columns: calc(169.6 * var(--u)) calc(291.9 * var(--u)); }
.pearl-timeline__time,
.pearl-timeline__label {
  padding-block: calc(22.2 * var(--u));
  font-size: max(calc(15.56 * var(--u)), 13px);
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.pearl-timeline__time { padding-inline-end: calc(36.2 * var(--u)); text-align: end; font-weight: 700; font-synthesis: none; align-self: stretch; }
.pearl-timeline__label { padding-inline-start: calc(36.2 * var(--u)); border-inline-start: 1px solid var(--pearl-ink); text-align: start; }
.pearl-timeline__item:first-child > * { padding-block-start: calc(18 * var(--u)); }
.pearl-timeline__item:last-child > * { padding-block-end: calc(19 * var(--u)); }
.pearl-fan {
  position: absolute;
  z-index: 0;
  left: calc(50% + (994.7 - 683) * var(--u));
  top: calc(44.3 * var(--u));
  width: calc(371.3 * var(--u));
  aspect-ratio: 960 / 1361;
  pointer-events: none;
  user-select: none;
}
.pearl-fan__img, .pearl-fan__piece, .pearl-fan__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pearl-fan__piece {
  transform-origin: 75.65% 51.89%;
  transform: rotate(calc(var(--k, 0) * (1 - var(--p, 1)) * 1deg));
}
.pearl-fan.is-animated .pearl-fan__img { visibility: hidden; }
.pearl-fan.is-animated.is-open .pearl-fan__img { visibility: visible; }
.pearl-fan.is-animated.is-open .pearl-fan__piece { visibility: hidden; }
.pearl-fan.has-frames .pearl-fan__img, .pearl-fan.has-frames .pearl-fan__piece { display: none; }
[dir='rtl'] .pearl-fan { left: auto; right: calc(50% + (994.7 - 683) * var(--u)); transform: scaleX(-1); }
/* Below 900px the fan opens beside the timeline, at the screen's edge and behind the text: the list and the fan
   share one grid cell. The fan is washed lighter and the text gets a little weight and a soft white halo, so it
   stays easy to read where it crosses the fan. */
@media (max-width: 899px) {
  .pearl-timeline > .pearl-stage { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pearl-timeline__list,
  .pearl-fan { grid-row: 2; grid-column: 1; }
  .pearl-timeline__list {
    inset-inline-start: 0;
    width: min(100%, 420px);
    grid-template-columns: 1fr;
  }
  .pearl-timeline__item { grid-template-columns: 40% 60%; }
  .pearl-timeline__time { padding-inline-end: 18px; }
  .pearl-timeline__label { padding-inline-start: 18px; }
  .pearl-timeline__time,
  .pearl-timeline__label {
    -webkit-text-stroke: 0.4px currentColor;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.8);
  }
  .pearl-fan,
  [dir='rtl'] .pearl-fan {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    justify-self: end;
    align-self: center;
    width: min(62vw, 300px);
    margin-top: calc(36 * var(--u));
    margin-inline-end: -16px;
    opacity: 0.68;
  }
}

/* ------------------------------------------------------------------ 6 · dress code */
/* Clip sideways only, so the swag's rising end isn't cut off at the top as it rocks. */
.pearl-section.pearl-dress { overflow-x: clip; overflow-y: visible; }
.pearl-dress > .pearl-stage { min-height: calc(426 * var(--u)); padding-top: calc(132.6 * var(--u)); }
.pearl-dress__code { margin-top: calc(13 * var(--u)); font-size: max(calc(15.6 * var(--u)), 12px); }
/* The swag rocks about its midpoint like a seesaw: one end rises as the other dips, and back. */
.pearl-dress__swag { transform-origin: 50% 50%; animation: pearl-seesaw 2.6s ease-in-out infinite alternate; }
@keyframes pearl-seesaw {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}
/* The suit and the gown sway together like a slow dance: a little side to side with a slight turn, one smooth
   swing each way (alternate + ease-in-out, so it never stops and starts again mid swing). */
.pearl-dance { transform-origin: 50% 100%; animation: pearl-dance 2.8s ease-in-out infinite alternate; }
.pearl-dance--gown { animation-delay: -0.2s; }
@keyframes pearl-dance {
  from { transform: perspective(calc(600 * var(--u))) translateX(calc(-2 * var(--u))) rotate(-1.2deg) rotateY(-9deg); }
  to { transform: perspective(calc(600 * var(--u))) translateX(calc(2 * var(--u))) rotate(1.2deg) rotateY(9deg); }
}

/* ------------------------------------------------------------------ 7 · gifts */
.pearl-gifts > .pearl-stage { padding-block: calc(49 * var(--u)) calc(56 * var(--u)); }
.pearl-gifts__clutch { display: block; width: max(calc(152.7 * var(--u)), 104px); height: auto; margin: calc(4 * var(--u)) auto 0; }
.pearl-gifts__note {
  width: min(100%, max(calc(397.4 * var(--u)), 300px));
  margin: calc(11 * var(--u)) auto 0;
  padding: max(calc(8 * var(--u)), 8px) max(calc(19 * var(--u)), 16px) max(calc(14 * var(--u)), 12px);
  border: 1px solid var(--pearl-ink);
  background: var(--pearl-green);
  font-size: max(calc(21.3 * var(--u)), 15px);
  line-height: 1.4;
  color: var(--pearl-cream);
}

/* ------------------------------------------------------------------ 8 · RSVP */
.pearl-section.pearl-rsvp { overflow: visible; }
.pearl-rsvp > .pearl-stage { padding-block: calc(79 * var(--u)) calc(40 * var(--u)); }
.pearl-rsvp__swag { z-index: 0; }
.pearl-rsvp .pearl-title { position: relative; }
.pearl-rsvp__deadline { margin-top: calc(6 * var(--u)); font-size: max(calc(16 * var(--u)), 13px); color: var(--pearl-brown); }
.pearl-rsvp__body {
  position: relative;
  z-index: 1;
  width: min(100%, max(calc(428 * var(--u)), 300px));
  margin: calc(30 * var(--u)) auto 0;
  text-align: start;
}
.inv--pearl .pearl-form { display: grid; gap: 0; }
.pearl-field { margin: 0; margin-top: max(calc(14 * var(--u)), 12px); padding: 0; border: 0; min-width: 0; }
.pearl-field.pearl-choice { margin-top: 0; }
.pearl-field > label,
.pearl-field > legend,
.pearl-field__label {
  display: block;
  margin-bottom: max(calc(12 * var(--u)), 6px);
  padding: 0;
  font-size: max(calc(21.3 * var(--u)), 16px);
  line-height: 1.4;
}
.pearl-field__hint { margin-top: calc(-6 * var(--u)); font-size: max(calc(14.7 * var(--u)), 14px); line-height: 1.4; color: rgba(61, 59, 58, 0.75); }
.pearl-choice > label {
  display: flex;
  align-items: center;
  gap: max(calc(13 * var(--u)), 10px);
  width: fit-content;
  min-height: max(calc(24 * var(--u)), 28px);
  font-size: max(calc(21.3 * var(--u)), 16px);
  line-height: 1.2;
  cursor: pointer;
}
.pearl-choice input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: max(calc(16.7 * var(--u)), 16px);
  height: max(calc(16.7 * var(--u)), 16px);
  margin: 0;
  border: 1.5px solid var(--pearl-brown);
  border-radius: 50%;
  background: #F1EFEB;
  cursor: pointer;
}
.pearl-choice input:checked { background: radial-gradient(circle, var(--pearl-brown) 0 38%, #F1EFEB 44%); }
.pearl-form input[type='text'],
.pearl-form input[type='email'] {
  display: block;
  width: 100%;
  height: max(calc(50 * var(--u)), 44px);
  padding: 0 max(calc(12 * var(--u)), 12px);
  border: 1.5px solid var(--pearl-field);
  border-radius: max(calc(8 * var(--u)), 8px);
  background: #FAF6EF;
  font: inherit;
  font-size: max(calc(18 * var(--u)), 16px);
  color: var(--pearl-ink);
  transition: border-color 0.2s, background-color 0.2s;
}
.pearl-form input::placeholder { font-family: var(--pearl-placeholder); color: rgba(61, 59, 58, 0.6); opacity: 1; }
.pearl-form input[type='text']:focus,
.pearl-form input[type='email']:focus { outline: none; border-color: var(--pearl-brown); box-shadow: 0 0 0 1px var(--pearl-brown); background: #FFFDF9; }
.pearl-form input[type='email'] { text-align: start; }
.pearl-rsvp__attending { display: grid; }
.pearl-companions__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pearl-companions__list:not(:empty) { margin-top: 10px; }
.pearl-companion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: end;
}
.pearl-companion__label { grid-column: 1 / -1; font-size: max(calc(17 * var(--u)), 15px); color: var(--pearl-brown); }
.inv--pearl .pearl-companion input[type='text'] { width: 100%; }
.pearl-companion__remove {
  display: grid;
  place-items: center;
  width: 44px;
  height: max(calc(50 * var(--u)), 44px);
  border: 1.5px solid var(--pearl-field);
  border-radius: max(calc(8 * var(--u)), 8px);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--pearl-brown);
}
.pearl-companion__remove:hover { border-color: var(--pearl-brown); }
@media (max-width: 520px) {
  .pearl-companion { grid-template-columns: minmax(0, 1fr) auto; }
  .pearl-companion input[data-field='allergies'] { grid-column: 1; grid-row: 3; }
  .pearl-companion__remove { grid-row: 2 / 4; grid-column: 2; height: auto; align-self: stretch; }
}
.pearl-companions__add { display: flex; flex-wrap: wrap; gap: max(calc(15.6 * var(--u)), 10px); margin-top: 10px; }
.pearl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: max(calc(121 * var(--u)), 104px);
  height: max(calc(50 * var(--u)), 44px);
  padding: 0 max(calc(12 * var(--u)), 12px);
  border: 1.5px solid var(--pearl-field);
  border-radius: max(calc(8 * var(--u)), 8px);
  background: #FAF6EF;
  font-family: var(--pearl-placeholder);
  font-size: max(calc(18 * var(--u)), 16px);
  color: var(--pearl-ink);
  transition: border-color 0.2s, background-color 0.2s;
}
.pearl-chip:hover:not(:disabled) { border-color: var(--pearl-brown); background: #FFFDF9; }
.pearl-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.pearl-companions__max { margin-top: 8px; }
.pearl-submit {
  width: 100%;
  min-height: max(calc(50 * var(--u)), 46px);
  margin-top: max(calc(22 * var(--u)), 18px);
  border-radius: max(calc(8 * var(--u)), 8px);
  font-size: max(calc(19 * var(--u)), 16px);
  letter-spacing: 0.04em;
}
.pearl-submit:disabled { opacity: 0.6; cursor: progress; }
.inv--pearl[lang='ar'] .pearl-submit { letter-spacing: 0; }
.pearl-rsvp__thanks,
.pearl-rsvp__error {
  margin-top: 18px;
  font-size: max(calc(22 * var(--u)), 18px);
  line-height: 1.4;
  text-align: center;
  color: var(--pearl-brown);
}
.pearl-rsvp__error { font-size: 1rem; color: #9B3D2E; }

/* ------------------------------------------------------------------ footer */
.pearl-footer { display: grid; justify-items: center; gap: 16px; padding: 16px 16px 56px; text-align: center; }
.pearl-footer__closing { font-size: 1.15rem; color: var(--pearl-brown); }
.pearl-footer .pearl-chip { font-family: var(--pearl-serif); }
.inv--pearl .inv-footer__credit { font-family: var(--pearl-serif); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--pearl-ink); opacity: 1; }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  .pearl-abs[data-sway] { --r: 0deg; --dx: 0px; }
  .pearl-dance, .pearl-dress__swag { animation: none; }
  .pearl-hero > .pearl-stage { transform: none !important; transition: none; }
}