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

   The Canva design is nine stacked pages 1366 units wide on a linen texture. Sizes are in design
   units: --u is how many CSS pixels one design unit is worth.
     · wide screens:   the whole 1366-unit page fits the width (and roughly the height)
     · narrow screens: the middle 520 units fill the screen; text never shrinks below a readable size
   The opening scene plays in a window the shape of a phone screen (--ds-win: the whole screen on a
   phone, a centred column on wider screens, plain linen either side) and has its own scale (--hs):
   the 1366 × 768 picture always fills the window's height, so the window shows one part of it and the
   view pans as the bird flies, the same on every screen. The scene
   never mirrors in Arabic (direction: ltr).
   ========================================================================== */

.inv--desert {
  --inv-bg: #F0ECE5;
  --inv-ink: #7A1A00;
  --inv-muted: rgba(122, 26, 0, 0.72);
  --inv-accent: #7A1A00;
  --inv-soft: #E9E2D6;
  --inv-line: rgba(122, 26, 0, 0.3);
  --inv-font-ui: 'Marcellus', 'Amiri', Georgia, serif;
  --ds-ink: #7A1A00; /* the design's brick red, for titles and text (9.8:1 on the linen) */
  --ds-label: #6B573B; /* the RSVP form's brown labels */
  --ds-orange: #CC4E00; /* buttons and arrows */
  --ds-field: rgba(107, 87, 59, 0.55);
  --ds-display: 'Italiana', 'Amiri', Georgia, serif;
  --ds-text: 'Marcellus', 'Amiri', Georgia, serif;
  --ds-names: 'Italiana', 'Amiri', Georgia, serif;
  --ds-amp: 'Playfair Display', 'Amiri', Georgia, serif;
  --ds-numbers: 'Bellefair', 'Italiana', Georgia, serif; /* Italiana's figures are too ornate to read at a glance */
  --ds-paper: drop-shadow(0 calc(2 * var(--s, 1px)) calc(2.5 * var(--s, 1px)) rgba(92, 46, 12, 0.2));
  --u: max(min(100vw / 1366, 100vh / 768), min(100vw / 520, 0.8px));
  --ds-win: min(100vw, max(50vh, 320px));
  --hs: max(var(--ds-win) / 1366, 100vh / 768);
  --ds-top: calc((100vh - 768 * var(--hs)) * 0.55);
  background: var(--inv-bg) url('desert-linen.jpg') repeat 0 0 / calc(320 * var(--u)) auto;
  color: var(--ds-ink);
  font-family: var(--ds-text);
  font-size: 1rem;
  line-height: 1.4;
}
@supports (height: 100svh) {
  .inv--desert {
    --u: max(min(100vw / 1366, 100svh / 768), min(100vw / 520, 0.8px));
    --ds-win: min(100vw, max(50svh, 320px));
    --hs: max(var(--ds-win) / 1366, 100svh / 768);
    --ds-top: calc((100svh - 768 * var(--hs)) * 0.55);
  }
}
.inv--desert[lang='ar'] {
  --ds-display: 'Amiri', 'Italiana', Georgia, serif;
  --ds-text: 'Amiri', 'Marcellus', Georgia, serif;
  --ds-names: 'Amiri', 'Italiana', Georgia, serif;
  --ds-amp: 'Amiri', Georgia, serif;
  line-height: 1.75;
}
@media (min-width: 700px) {
  .inv.inv--desert { background: var(--inv-bg) url('desert-linen.jpg') repeat 0 0 / calc(320 * var(--u)) auto; }
}
body.inv-body--desert { background: #F0ECE5; }
.inv--desert :focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 3px; }
:where(.inv--desert) p { margin: 0; }
.inv--desert [hidden] { display: none !important; }
.inv--desert .inv-controls { inset-inline-end: max(14px, env(safe-area-inset-right)); }
.inv--desert .inv-pill { background: rgba(240, 236, 229, 0.88); color: var(--ds-ink); border-color: rgba(122, 26, 0, 0.32); }
.ds-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ type */
.ds-title {
  margin: 0;
  font-family: var(--ds-display);
  font-size: max(calc(45.9 * var(--u)), 34px);
  font-weight: 400;
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--ds-ink);
}
[lang='ar'] .ds-title { font-size: max(calc(40 * var(--u)), 30px); line-height: 1.4; text-transform: none; }
.ds-caps {
  font-family: var(--ds-text);
  font-size: max(calc(13.6 * var(--u)), 14px);
  line-height: 1.12;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}
[lang='ar'] .ds-caps { font-size: max(calc(16 * var(--u)), 17px); line-height: 1.6; letter-spacing: 0; text-transform: none; }
.ds-text { max-width: max(calc(383 * var(--u)), 300px); margin-inline: auto; }
.ds-link {
  display: inline-block;
  padding-block: 4px;
  color: var(--ds-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: max(calc(184.5 * var(--u)), 170px);
  min-height: max(calc(47.7 * var(--u)), 44px);
  padding: 8px 22px;
  border: 0;
  border-radius: max(calc(12 * var(--u)), 10px);
  background: var(--ds-orange);
  color: #FFFFFF; /* 4.5:1 on the orange */
  letter-spacing: 0.18em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
[lang='ar'] .ds-button { letter-spacing: 0; }
.ds-button:hover { background: #B84500; }
.ds-button:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ layout */
.ds-page { position: relative; }
.ds-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 20px;
  text-align: center;
  overflow: hidden;
}

/* ------------------------------------------------------------------ the scene (page one) */
/* --s: the scene's scale. The gate covers the screen; on the page the whole picture fits the width. */
.ds-scene {
  --s: calc(100vw / 1366);
  position: relative;
  width: calc(1366 * var(--s));
  height: calc(768 * var(--s));
  direction: ltr;
}
.ds-opening { padding: 0; }
.ds-piece {
  position: absolute;
  left: calc(var(--x) * var(--s));
  top: calc(var(--y) * var(--s));
  width: calc(var(--w) * var(--s));
  max-width: none;
  height: auto;
  filter: var(--ds-paper);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}
.ds-piece--down { transform-origin: 50% 0; }
.ds-third { position: absolute; inset: 0; }
/* The bird and the envelope: --bx/--by move them (in units) from where the Canva design puts them. */
.ds-bird,
.ds-letter {
  position: absolute;
  transform: translate(calc(var(--bx, 0) * var(--s)), calc(var(--by, 0) * var(--s)));
  will-change: transform;
}
.ds-bird { left: calc(1281.7 * var(--s)); top: calc(185 * var(--s)); width: calc(84.3 * var(--s)); z-index: 2; }
.ds-bird__img { width: 100%; height: auto; transform-origin: 40% 60%; animation: ds-hover 2.4s ease-in-out infinite alternate; }
.ds-letter { left: calc(1235 * var(--s)); top: calc(242 * var(--s)); width: calc(45.7 * var(--s)); z-index: 1; }
.ds-letter > img { width: 100%; height: auto; transform: rotate(var(--lr, 7deg)); filter: var(--ds-paper); }
@keyframes ds-hover { from { transform: translateY(calc(-3 * var(--s))) rotate(-1deg); } to { transform: translateY(calc(3 * var(--s))) rotate(1.5deg); } }
/* In flight the wings beat: four held poses, like a paper puppet on a stick. */
.is-flying .ds-bird__img { animation: ds-flap 0.44s steps(1, end) infinite; }
@keyframes ds-flap {
  0% { transform: translateY(0) rotate(-2deg) scale(1, 1); }
  25% { transform: translateY(calc(-4 * var(--s))) rotate(-6deg) scale(1.02, 0.84); }
  50% { transform: translateY(calc(-1 * var(--s))) rotate(-3deg) scale(1, 0.94); }
  75% { transform: translateY(calc(3 * var(--s))) rotate(2deg) scale(0.98, 1.1); }
}
/* The landing puff: sand kicked up when the envelope lands. */
.ds-letter__puff { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; pointer-events: none; }
.ds-letter__puff i {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(6 * var(--s));
  height: calc(6 * var(--s));
  margin: calc(-3 * var(--s));
  border-radius: 50%;
  background: #D9B48A;
  opacity: 0;
}
.is-landed .ds-letter__puff i { animation: ds-puff 0.9s ease-out forwards; }
.ds-letter__puff i:nth-child(1) { --px: -26; --py: -14; }
.ds-letter__puff i:nth-child(2) { --px: -16; --py: -24; background: #E6C9A4; }
.ds-letter__puff i:nth-child(3) { --px: -5; --py: -30; }
.ds-letter__puff i:nth-child(4) { --px: 7; --py: -27; background: #C99C6E; }
.ds-letter__puff i:nth-child(5) { --px: 18; --py: -20; }
.ds-letter__puff i:nth-child(6) { --px: 28; --py: -10; background: #E6C9A4; }
@keyframes ds-puff {
  0% { opacity: 0.9; transform: translate(0, 0) scale(0.6); }
  100% { opacity: 0; transform: translate(calc(var(--px) * var(--s)), calc(var(--py) * var(--s))) scale(1.4); }
}
/* Idle life once the scene stands: palms rock on their roots, clouds drift, both in held poses. */
.ds-scene .ds-sway { animation: ds-sway 3.2s steps(4, end) var(--sd, 0s) infinite alternate; }
.ds-scene .ds-drift { animation: ds-drift 9s ease-in-out var(--sd, 0s) infinite alternate; }
@keyframes ds-sway { from { rotate: -1.2deg; } to { rotate: 1.4deg; } }
@keyframes ds-drift { from { translate: calc(-6 * var(--s)) 0; } to { translate: calc(6 * var(--s)) 0; } }

/* ------------------------------------------------------------------ the gate */
.ds-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: inherit;
  background-color: var(--inv-bg);
  transition: opacity 1s ease, visibility 0s linear 1s;
}
.ds-gate.is-armed { transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.1s ease-in 0.2s, visibility 0s linear 1.3s; }
.ds-gate__open { position: absolute; inset: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ds-gate__open:focus-visible { outline-offset: -6px; }
/* The window: the full screen on phones; on wider screens a phone shaped column in the middle, its
   edges fading into the linen so the sides stay empty. */
.ds-gate__cam {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  width: var(--ds-win);
  margin-inline: auto;
  overflow: hidden;
}
@media (min-width: 700px) {
  .ds-gate__cam {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
}
/* The camera: --cx is the scene unit at the middle of the window (JS moves it; it starts at the right
   edge, where the bird waits). The clamp keeps the picture filling the window. */
.ds-scene--gate {
  --s: var(--hs);
  --cx: 1366;
  position: absolute;
  top: var(--ds-top);
  left: 0;
  transform: translateX(clamp(calc(var(--ds-win) - 1366 * var(--hs)), calc(var(--ds-win) / 2 - var(--cx) * var(--hs)), 0px));
}
.ds-gate__hint {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  font-family: var(--ds-text);
  font-size: max(calc(13.6 * var(--u)), 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ds-ink);
  animation: ds-breathe 2.4s ease-in-out infinite;
  pointer-events: none;
}
[lang='ar'] .ds-gate__hint { font-size: 18px; letter-spacing: 0; text-transform: none; }
@keyframes ds-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.ds-gate__skip {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom));
  inset-inline-end: 18px;
  z-index: 2;
  padding: 10px 14px;
  font-family: var(--ds-text);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-ink);
  opacity: 0.75;
}
[lang='ar'] .ds-gate__skip { font-size: 16px; letter-spacing: 0; }

/* Folded: once invitation-desert.js has the gate (.is-armed) the left and middle thirds lie flat until
   the bird reaches them; each piece then springs up (or swings down) like a pop-up page. */
.ds-gate.is-armed .ds-piece {
  transition: transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s), opacity 0.25s linear var(--d, 0s);
}
.ds-gate.is-armed .ds-third:not(.is-up) .ds-piece--up { transform: perspective(calc(700 * var(--s))) rotateX(-88deg); opacity: 0; }
.ds-gate.is-armed .ds-third:not(.is-up) .ds-piece--down { transform: perspective(calc(700 * var(--s))) rotateX(88deg); opacity: 0; }
.ds-gate.is-armed .ds-third:not(.is-up) .ds-sway,
.ds-gate.is-armed .ds-third:not(.is-up) .ds-drift { animation-play-state: paused; }
.ds-gate.is-flying .ds-gate__hint, .ds-gate.is-flying .ds-gate__open { cursor: default; }
.ds-gate:is(.is-flying, .is-leaving) .ds-gate__hint { opacity: 0 !important; animation: none; transition: opacity 0.3s; }
/* From where the envelope landed, the scene slides up off the screen and the names fade in underneath. */
.ds-gate.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.ds-gate.is-armed.is-leaving { transform: translateY(-100%); }
/* The standard timed opening (if invitation-desert.js never runs) and the skip links. */
.inv--desert.is-opening .ds-gate:not(.is-armed) { opacity: 0; visibility: hidden; transition-delay: 0.4s, 1.4s; }
.inv-embed .ds-gate, .inv-skip-envelope .ds-gate { display: none; }

/* ------------------------------------------------------------------ 2 · names and date */
.ds-hero {
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(70 * var(--u)) calc(80 * var(--u));
}
.ds-hero__star { width: calc(144.7 * var(--u)); min-width: 96px; height: auto; margin-block-end: calc(32 * var(--u)); }
.ds-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: var(--ds-names);
  font-size: max(calc(45.9 * var(--u)), 40px);
  font-weight: 400;
  line-height: 1.04;
  text-transform: uppercase;
}
.ds-names__amp {
  margin-block: -0.05em -0.02em;
  font-family: var(--ds-amp);
  font-style: italic;
  font-size: 0.6em;
  line-height: 1.2;
  text-transform: none;
}
[lang='ar'] .ds-names { font-size: max(calc(46 * var(--u)), 40px); line-height: 1.5; text-transform: none; }
[lang='ar'] .ds-names__amp { font-style: normal; font-size: 0.7em; margin: 0; }
.ds-hero__intro { max-width: max(calc(383 * var(--u)), 280px); margin-block-start: calc(22 * var(--u)); }
.ds-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: calc(34 * var(--u));
  line-height: 1.14;
}
.ds-date__month,
.ds-date__year { font-size: max(calc(15 * var(--u)), 15px); }
.ds-date__year { font-family: var(--ds-text); letter-spacing: 0.045em; }
.ds-date__row {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  column-gap: max(calc(9 * var(--u)), 7px);
  width: max(calc(330 * var(--u)), 280px);
}
.ds-date__side { font-size: max(calc(13.6 * var(--u)), 14px); white-space: nowrap; }
.ds-date__side--start { text-align: end; }
.ds-date__side--end { text-align: start; font-family: var(--ds-text); letter-spacing: 0.045em; }
.ds-date__bar { width: 1px; height: max(calc(17 * var(--u)), 15px); background: currentColor; opacity: 0.75; }
.ds-date__day {
  font-family: var(--ds-numbers);
  font-size: max(calc(40.4 * var(--u)), 38px);
  line-height: 1.14;
  min-width: 1.4em;
}
[lang='ar'] .ds-date__day { font-family: 'Amiri', serif; font-size: max(calc(36 * var(--u)), 34px); line-height: 1.4; }
[lang='ar'] :is(.ds-date__month, .ds-date__year, .ds-date__side) { font-size: max(calc(17 * var(--u)), 17px); letter-spacing: 0; line-height: 1.6; }
.ds-hero__note { margin-block-start: 10px; font-size: max(calc(13.6 * var(--u)), 15px); opacity: 0.85; }
.ds-hero__venue { margin-block-start: calc(40 * var(--u)); font-size: max(calc(11.6 * var(--u)), 13px); }
[lang='ar'] .ds-hero__venue { font-size: max(calc(15 * var(--u)), 16px); }

/* ------------------------------------------------------------------ 3 · countdown */
.ds-countdown { padding-block: calc(62 * var(--u)) calc(40 * var(--u)); }
.ds-countdown__tiles { width: calc(345.7 * var(--u)); min-width: 250px; height: auto; margin-block-end: calc(38 * var(--u)); }
.ds-countdown__grid {
  display: grid;
  grid-template-columns: repeat(3, max(calc(114 * var(--u)), 84px));
  margin-block-start: calc(40 * var(--u));
}
.ds-countdown__cell { display: flex; flex-direction: column; align-items: center; }
.ds-countdown__num { font-family: var(--ds-numbers); font-size: max(calc(40.4 * var(--u)), 38px); line-height: 1.14; }
[lang='ar'] .ds-countdown__num { font-family: 'Amiri', serif; font-size: max(calc(36 * var(--u)), 34px); line-height: 1.4; }
.ds-countdown__unit { margin-block-start: 2px; }
.ds-countdown__done { margin-block-start: calc(30 * var(--u)); font-size: max(calc(32 * var(--u)), 26px); }

/* ------------------------------------------------------------------ 4 · location */
.ds-location { padding-block: calc(73 * var(--u)) calc(66 * var(--u)); }
.ds-oasis {
  position: relative;
  width: calc(568.7 * var(--u));
  max-width: calc(100vw - 24px);
  aspect-ratio: 1422 / 728;
  margin-block: calc(46 * var(--u)) calc(56 * var(--u));
  margin-inline: -20px;
}
.ds-oasis__paint,
.ds-oasis__draw { position: absolute; inset: 0; width: 100%; height: 100%; }
.ds-oasis__draw { pointer-events: none; }
/* Set by invitation-desert.js: the painting is drawn in on the canvas, then the image takes over again. */
.ds-oasis.is-drawing .ds-oasis__paint { opacity: 0; }
.ds-oasis.is-drawn .ds-oasis__paint { opacity: 1; }
.ds-location__venue { margin-block-end: 6px; }
.ds-location__place { margin-block-end: 6px; font-size: max(calc(11.6 * var(--u)), 13px); opacity: 0.85; }
[lang='ar'] .ds-location__place { font-size: max(calc(15 * var(--u)), 16px); }
.ds-location__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(calc(4 * var(--u)), 4px);
  margin-block-start: calc(18 * var(--u));
}
.ds-calendar .inv-calendar__menu { border-radius: max(calc(12 * var(--u)), 10px); background: #F6F2EB; }

/* ------------------------------------------------------------------ 5 · schedule */
.ds-schedule { padding-block: calc(52 * var(--u)) calc(60 * var(--u)); }
/* Two columns either side of the middle; each moment sits in the next column, a little lower than the
   last, with an arrow at its label pointing on to the next one. */
.ds-steps {
  --col: max(calc(246 * var(--u)), 160px);
  --icon-h: max(calc(88 * var(--u)), 64px);
  --step-overlap: calc(22 * var(--u));
  --arrow-w: max(calc(80 * var(--u)), 54px);
  width: calc(2 * var(--col));
  margin: calc(70 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.ds-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--col);
}
.ds-step:nth-child(even) { margin-inline-start: var(--col); }
.ds-step + .ds-step { margin-block-start: calc(-1 * var(--step-overlap)); }
.ds-step__icon { width: auto; max-width: calc(110 * var(--u)); height: var(--icon-h); object-fit: contain; margin-block-end: 6px; }
.ds-step--house .ds-step__icon { height: max(calc(72 * var(--u)), 52px); max-width: calc(118 * var(--u)); }
.ds-step__label { font-size: max(calc(13 * var(--u)), 13px); }
/* A long label ("Wedding ceremony") wraps rather than run into the arrow beside it on narrow screens. */
.ds-step__label, .ds-step__time { max-inline-size: calc(var(--col) - var(--arrow-w) - 20px); text-align: center; text-wrap: balance; }
.ds-step__time { margin-block-start: 3px; font-size: max(calc(11.6 * var(--u)), 13px); letter-spacing: 0.04em; opacity: 0.8; }
[lang='ar'] .ds-step__label { font-size: max(calc(16 * var(--u)), 16px); }
[lang='ar'] .ds-step__time { font-size: max(calc(14 * var(--u)), 15px); letter-spacing: 0; }
/* Every arrow is the same length and sits on the page's centre line (where the two columns meet), halfway down
   between the picture it leaves and the next one (this icon's middle and the next icon's middle, one step
   height minus the overlap further down). */
.ds-step__arrow {
  position: absolute;
  top: calc((100% - var(--step-overlap) + var(--icon-h)) / 2);
  inset-inline-end: calc(var(--arrow-w) / -2);
  width: var(--arrow-w);
  height: auto;
  translate: 0 -50%;
}
.ds-step:nth-child(even) .ds-step__arrow { inset-inline-end: auto; inset-inline-start: calc(var(--arrow-w) / -2); transform: scaleX(-1); }
[dir='rtl'] .ds-step:nth-child(odd) .ds-step__arrow { transform: scaleX(-1); }
[dir='rtl'] .ds-step:nth-child(even) .ds-step__arrow { transform: none; }

/* ------------------------------------------------------------------ 6 · transport, 7 · gifts */
.ds-transport { padding-block: calc(86 * var(--u)) calc(80 * var(--u)); }
.ds-transport__art { width: calc(141.7 * var(--u)); min-width: 110px; height: auto; margin-block: calc(18 * var(--u)) calc(24 * var(--u)); }
.ds-gifts { padding-block: calc(58 * var(--u)) calc(60 * var(--u)); }
.ds-gifts__art { width: calc(87 * var(--u)); min-width: 66px; height: auto; margin-block-end: calc(22 * var(--u)); }
.ds-gifts .ds-text { margin-block-start: calc(30 * var(--u)); }
.ds-bank { display: flex; flex-direction: column; align-items: center; margin-block-start: calc(30 * var(--u)); }
.ds-bank__title { margin-block-end: calc(16 * var(--u)); letter-spacing: 0.18em; }
[lang='ar'] .ds-bank__title { letter-spacing: 0; }
.ds-bank__panel { margin-block-start: 18px; width: min(100%, max(calc(383 * var(--u)), 300px)); }
.ds-bank__list { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--inv-line); }
.ds-bank__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-block-end: 1px solid var(--inv-line);
  text-align: start;
}
.ds-bank__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-bank__label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
[lang='ar'] .ds-bank__label { font-size: 14px; letter-spacing: 0; }
.ds-bank__value { font-size: 15px; overflow-wrap: anywhere; }
.ds-bank__copy { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--ds-ink); }
.ds-bank__copy:hover { background: rgba(122, 26, 0, 0.07); }
.ds-bank__copy > svg { grid-area: 1 / 1; }
.ds-bank__done { opacity: 0; }
.ds-bank__copy.is-copied > svg:first-child { opacity: 0; }
.ds-bank__copy.is-copied .ds-bank__done { opacity: 1; }

/* ------------------------------------------------------------------ 8 · RSVP */
.ds-rsvp { padding-block: 0 calc(60 * var(--u)); }
.ds-rsvp__umbrella { width: calc(434.3 * var(--u)); min-width: 300px; height: auto; margin-block: calc(7 * var(--u)) calc(16 * var(--u)); }
.ds-rsvp__deadline { margin-block-start: 10px; }
.ds-rsvp__body { position: relative; z-index: 1; width: min(100%, max(calc(421 * var(--u)), 300px)); margin-block-start: calc(20 * var(--u)); text-align: start; }
.ds-form { display: flex; flex-direction: column; gap: max(calc(18 * var(--u)), 16px); }
.ds-field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ds-field > label,
.ds-field > legend,
.ds-field__label {
  padding: 0;
  font-family: var(--ds-text);
  font-size: max(calc(13.6 * var(--u)), 15px);
  color: var(--ds-label);
}
[lang='ar'] :is(.ds-field > label, .ds-field > legend, .ds-field__label) { font-size: 17px; }
.ds-field > legend { margin-block-end: 8px; }
.ds-field__hint { font-size: 13px; color: var(--ds-label); opacity: 0.8; }
.ds-form input[type='text'],
.ds-form input[type='email'] {
  width: 100%;
  min-height: max(calc(50 * var(--u)), 46px);
  padding: 10px 14px;
  border: 1.5px solid var(--ds-field);
  border-radius: max(calc(12 * var(--u)), 10px);
  background: rgba(255, 255, 255, 0.28);
  color: #4E3E28;
  font: 16px/1.3 var(--ds-text);
}
.ds-form input::placeholder { color: rgba(107, 87, 59, 0.6); }
.ds-form input:focus { outline: none; border-color: var(--ds-ink); box-shadow: 0 0 0 3px rgba(122, 26, 0, 0.12); }
.ds-choice label { display: flex; align-items: center; gap: 12px; padding-block: 3px; font-size: max(calc(13.6 * var(--u)), 15px); color: var(--ds-label); cursor: pointer; }
[lang='ar'] .ds-choice label { font-size: 17px; }
.ds-choice input {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--ds-label);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.ds-choice input::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-label); transform: scale(0); transition: transform 0.15s; }
.ds-choice input:checked::after { transform: scale(1); }
.ds-companions__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ds-companion {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.ds-companion__label { grid-column: 1 / -1; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-label); }
[lang='ar'] .ds-companion__label { letter-spacing: 0; font-size: 15px; }
.ds-companion__remove { width: 36px; height: 36px; border-radius: 50%; font-size: 20px; color: var(--ds-label); }
.ds-companions__add { display: flex; gap: max(calc(16 * var(--u)), 12px); }
.ds-chip {
  min-width: max(calc(121 * var(--u)), 104px);
  min-height: max(calc(50 * var(--u)), 46px);
  padding: 8px 14px;
  border: 1.5px solid var(--ds-field);
  border-radius: max(calc(12 * var(--u)), 10px);
  font: 15px var(--ds-text);
  color: var(--ds-label);
  text-align: start;
  transition: border-color 0.2s, background-color 0.2s;
}
.ds-chip:hover { border-color: var(--ds-label); background: rgba(255, 255, 255, 0.3); }
.ds-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.ds-submit { align-self: center; margin-block-start: 8px; }
.ds-rsvp__thanks, .ds-rsvp__error { padding: 16px; text-align: center; font-size: 17px; }
/* The two cacti stand either side of the form on wide screens, under it on phones. */
.ds-rsvp__cactus { position: absolute; bottom: 0; width: calc(106.7 * var(--u)); height: auto; filter: var(--ds-paper); }
.ds-rsvp__cactus--start { inset-inline-start: calc(50% - 364.7 * var(--u)); }
.ds-rsvp__cactus--end { inset-inline-start: calc(50% + 219.7 * var(--u)); }
@media (max-width: 900px) {
  .ds-rsvp { padding-block-end: 150px; }
  .ds-rsvp__cactus { width: 64px; }
  .ds-rsvp__cactus--start { inset-inline-start: calc(50% - 120px); }
  .ds-rsvp__cactus--end { inset-inline-start: calc(50% + 56px); }
}

/* ------------------------------------------------------------------ 9 · footer */
.ds-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: calc(70 * var(--u)) 20px calc(56 * var(--u));
  text-align: center;
}
.ds-footer__names {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: max(calc(30 * var(--u)), 14px);
  width: 100%;
  max-width: 820px;
  font-family: var(--ds-names);
  font-size: max(calc(45.9 * var(--u)), 32px);
  line-height: 1.1;
  text-transform: uppercase;
}
[lang='ar'] .ds-footer__names { text-transform: none; line-height: 1.6; }
.ds-footer__name:first-child { text-align: end; }
.ds-footer__name:last-child { text-align: start; }
.ds-footer__flower { width: calc(83.7 * var(--u)); min-width: 56px; height: auto; }
.ds-footer__closing { margin-block-start: 6px; }
.ds-footer__share { margin-block-start: 6px; }
.inv--desert .inv-footer__credit { color: var(--inv-muted); }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  .ds-scene .ds-sway, .ds-scene .ds-drift, .ds-bird__img, .ds-gate__hint { animation: none !important; }
}