/* ==========================================================================
   THE GARDEN INVITATION

   Loaded after style.css, so everything here wins.

   The whole page sits on one short film of a garden that never moves with
   the scroll. The competitor puts its words straight onto a picture like
   that and you cannot read half of them; here every block of writing rides
   on a frosted card instead, so the garden is still there behind it and the
   words are still black on cream. That is the entire idea.
   ========================================================================== */

:root {
  --ink-g:      #2f3a26;   /* olive-black, for reading            */
  --ink-g-soft: #5d6a4e;
  --gold-g:     #9c7a34;
  --gold-pale:  #d9c187;
  --cream-g:    #fbf7ee;
  --card-g:     rgba(252, 249, 241, 0.90);
  --card-line:  rgba(156, 122, 52, 0.22);
  --rose-g:     #a2635c;

  --sans-g: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif-g: "Cormorant Garamond", "Times New Roman", serif;
  --arab-g: "Amiri", "Scheherazade New", "Times New Roman", serif;

  --pad: clamp(18px, 5.4vw, 34px);
  --maxw: 560px;
}

/* Nothing below the envelope is worth reading until it opens, and scrolling
   a closed envelope off the top of a blank screen reads as a broken page.
   garden.js lifts this at the handover. */
html.pinned, html.pinned body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

/* --------------------------------------------------------------- the page */

.invitation {
  background: #efe7d6;
  padding: 0;
  overflow: clip;
  isolation: isolate;
  font-family: var(--sans-g);
  color: var(--ink-g);
  -webkit-text-size-adjust: 100%;
}

/* On a desktop the whole thing lives in a phone-shaped column, because that
   is where an invitation is actually read. */
@media (min-width: 900px) {
  body.is-completed { background: #17170f; }
  .invitation {
    max-width: 430px;
    margin: 0 auto;
    box-shadow: 0 0 90px rgba(0, 0, 0, .55);
  }
}

/* ------------------------------------------------------------- the garden */

.garden {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
@media (min-width: 900px) {
  .garden { left: 50%; transform: translateX(-50%); width: 430px; right: auto; }
}

.garden-still,
.garden-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.garden-film { opacity: 0; transition: opacity 1.1s ease; }
.garden-film.on { opacity: 1; }

/* Just enough milk over the picture that black type holds anywhere on it. */
.garden-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,252,244,.34) 0%, rgba(255,252,244,0) 22%,
                            rgba(255,252,244,0) 74%, rgba(48,40,26,.20) 100%);
}

/* --------------------------------------------------------------- furniture */

.chrome {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  z-index: 40;
  right: 12px;
}
@media (min-width: 900px) {
  .chrome { right: calc(50% - 215px + 12px); }
}

.lang {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 11px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: rgba(252, 249, 241, .86);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  color: var(--ink-g);
  font: 500 13px/1 var(--sans-g);
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(60, 45, 20, .12);
}
.lang svg { width: 15px; height: 15px; opacity: .72; }
.lang:active { transform: scale(.96); }

.sound {
  position: fixed;
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
  right: 14px;
  z-index: 40;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(38, 44, 30, .82);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  color: #f2ead8;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(30, 26, 14, .3);
}
@media (min-width: 900px) { .sound { right: calc(50% - 215px + 14px); } }
.sound svg { width: 21px; height: 21px; fill: currentColor; }
.sound .on { display: none; }
.sound[aria-pressed="true"] .on  { display: block; }
.sound[aria-pressed="true"] .off { display: none; }

.to-rsvp {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px));
  z-index: 39;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(38, 44, 30, .8);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  color: #f4eddc;
  text-decoration: none;
  font: 500 12px/1 var(--sans-g);
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(30, 26, 14, .3);
  transition: opacity .45s ease, visibility .45s;
}
.to-rsvp svg { width: 14px; height: 14px; }
.to-rsvp.gone { opacity: 0; visibility: hidden; }

/* -------------------------------------------------------------- the words */

.g-sec {
  position: relative; z-index: 2;
  padding: clamp(58px, 15vw, 96px) var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}

.g-title {
  margin: 0 0 4px;
  font-family: var(--serif-g);
  font-weight: 400;
  font-size: clamp(30px, 8.4vw, 40px);
  line-height: 1.12;
  letter-spacing: .004em;
  text-align: center;
  color: #34412a;
  text-shadow: 0 1px 14px rgba(255, 252, 242, .9), 0 1px 3px rgba(255, 252, 242, .8);
}
/* inside a card the halo is not needed and only muddies the edges */
.card .g-title { text-shadow: none; }

.g-sub {
  margin: 0 0 22px;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-g-soft);
}

.g-body {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.72;
  color: #46503c;
  text-align: center;
}

.card {
  background: var(--card-g);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  padding: clamp(24px, 6.4vw, 34px) clamp(20px, 5.6vw, 30px);
  box-shadow: 0 18px 44px rgba(52, 42, 20, .13);
}

.hair {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 18px auto;
  max-width: 220px;
}
.hair i {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-g), transparent);
  opacity: .7;
}
.hair em { font-style: normal; color: var(--gold-g); font-size: 12px; }

/* ------------------------------------------------------------------- hero */

.g-hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 96px var(--pad) 116px;
}

/* The villa and the vineyard are the busiest part of the picture and the
   hero lands right on them. A pool of light under the words, feathered so
   there is no edge to see, is enough to hold them. */
.g-hero::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 150%; height: 86%;
  transform: translate(-50%, -48%);
  background: radial-gradient(54% 46% at 50% 48%,
    rgba(255, 251, 241, .88) 0%,
    rgba(255, 251, 241, .74) 34%,
    rgba(255, 251, 241, .42) 60%,
    rgba(255, 251, 241, .12) 82%,
    rgba(255, 251, 241, 0)   100%);
  pointer-events: none;
}
.g-hero > * { position: relative; }

.kicker {
  margin: 0 0 14px;
  font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase;
  color: #5f6b4f;
  text-shadow: 0 1px 10px rgba(255, 252, 242, .9);
}

.names {
  margin: 0;
  font-family: var(--serif-g);
  font-weight: 400;
  font-size: clamp(46px, 15vw, 68px);
  line-height: 1.04;
  color: #2e3a24;
  text-shadow: 0 2px 20px rgba(255, 252, 242, .92), 0 1px 3px rgba(255,252,242,.9);
}
.names .amp {
  display: block;
  font-style: italic;
  font-size: .52em;
  color: var(--gold-g);
  margin: 2px 0;
}

.invite-line {
  margin: 4px 0 0;
  font-size: 14px; line-height: 1.8;
  letter-spacing: .16em; text-transform: uppercase;
  color: #56624a;
  text-shadow: 0 1px 10px rgba(255, 252, 242, .95);
}

.the-date {
  margin: 22px 0 4px;
  font-family: var(--serif-g);
  font-size: clamp(21px, 6vw, 27px);
  letter-spacing: .06em;
  color: #303d26;
  text-shadow: 0 1px 16px rgba(255, 252, 242, 1), 0 0 4px rgba(255, 252, 242, .95);
}

.the-place {
  margin: 0;
  font-size: 13px; letter-spacing: .1em;
  color: #4f5a41;
  text-shadow: 0 1px 14px rgba(255, 252, 242, 1), 0 0 4px rgba(255, 252, 242, .9);
}

.scroll-cue {
  position: absolute; bottom: 88px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 34px;
  border: 1.4px solid rgba(72, 84, 60, .5);
  border-radius: 12px;
}
.scroll-cue i {
  position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: rgba(72, 84, 60, .8);
  animation: cue 1.9s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  60%      { transform: translateY(11px); opacity: 0; }
}

/* ------------------------------------------------------------------ story */

.wordwash {
  margin: 20px 0 0;
  font-family: var(--serif-g);
  font-size: clamp(19px, 5.2vw, 23px);
  line-height: 1.62;
  text-align: center;
  color: #3a462e;
}
.wordwash w {
  display: inline-block;
  opacity: .16;
  transition: opacity .5s ease, color .5s ease;
}
.wordwash w.lit { opacity: 1; }

.sig {
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--serif-g);
  font-style: italic;
  font-size: 17px;
  color: var(--gold-g);
}

/* -------------------------------------------------------------- countdown */

.clock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.unit {
  text-align: center;
  padding: 14px 4px 11px;
  border-radius: 13px;
  background: rgba(247, 241, 228, .8);
  border: 1px solid rgba(156, 122, 52, .16);
}
.unit b {
  display: block;
  font-family: var(--serif-g);
  font-weight: 500;
  font-size: clamp(26px, 8vw, 34px);
  line-height: 1;
  color: #34412a;
  font-variant-numeric: tabular-nums;
}
.unit span {
  display: block; margin-top: 6px;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #6b7659;
}
.clock-done {
  margin: 14px 0 0; text-align: center;
  font-family: var(--serif-g); font-size: 22px; color: var(--gold-g);
}

/* ------------------------------------------------------------------ venue */

.venue-card { text-align: center; }
.villa { width: min(280px, 84%); height: auto; margin: 4px auto 10px; display: block; }
.venue-name {
  margin: 0;
  font-family: var(--serif-g);
  font-size: 27px; color: #34412a;
}
.venue-addr {
  margin: 5px 0 0; font-size: 13.5px; letter-spacing: .05em; color: var(--ink-g-soft);
}
.venue-note {
  margin: 14px 0 18px; font-size: 14px; line-height: 1.6; color: #5c6650;
}

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #4b5a3c;
  color: #f6f1e2;
  text-decoration: none;
  font-size: 13.5px; font-weight: 500; letter-spacing: .04em;
  box-shadow: 0 8px 20px rgba(63, 76, 48, .26);
}
.pill svg { width: 16px; height: 16px; }
.pill:active { transform: scale(.98); }

/* --------------------------------------------------------------- timeline */

.tl {
  list-style: none;
  margin: 26px 0 0;
  position: relative;
  background: var(--card-g);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  padding: clamp(26px, 6.4vw, 34px) clamp(18px, 5vw, 26px) 8px;
  box-shadow: 0 18px 44px rgba(52, 42, 20, .13);
}
.tl::before {
  content: ""; position: absolute;
  left: calc(clamp(18px, 5vw, 26px) + 60px); top: 34px; bottom: 40px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-pale) 12%,
                                      var(--gold-pale) 88%, transparent);
}
.tl li {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 30px;
  padding-bottom: 26px;
}
.tl-dot {
  position: absolute; left: 55px; top: 5px;   /* relative to the row */
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--cream-g);
  border: 2px solid var(--gold-g);
}
.tl-time {
  grid-column: 1;
  font-family: var(--serif-g);
  font-weight: 500; font-size: 18px; line-height: 1.3;
  color: var(--gold-g);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tl-what {
  grid-column: 2;
  font-family: var(--serif-g);
  font-weight: 500; font-size: 20px; line-height: 1.25;
  color: #32402a;
}
.tl-note {
  grid-column: 2;
  margin-top: 3px;
  font-size: 13.5px; line-height: 1.55;
  color: #4f5a44;
}

/* ------------------------------------------------------------------- menu */

.menu-row { text-align: center; }
.menu-head {
  margin: 0; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-g);
}
.menu-dish {
  margin: 7px 0 5px;
  font-family: var(--serif-g); font-size: 21px; line-height: 1.25; color: #33402a;
}
.menu-desc { margin: 0; font-size: 13.5px; line-height: 1.62; color: #5a6450; }
.menu-rule {
  text-align: center; color: var(--gold-pale); font-size: 12px;
  margin: 20px 0;
}
.menu-foot {
  margin: 24px 0 0; padding-top: 18px;
  border-top: 1px solid rgba(156, 122, 52, .18);
  text-align: center; font-size: 12.5px; line-height: 1.6; color: #6d765f;
}

/* ---------------------------------------------------------------- gallery */

.frame { position: relative; width: min(300px, 88%); margin: 26px auto 0; }
.frame-art { position: absolute; inset: -13px -13px -13px -13px; pointer-events: none; }
.frame-art svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 16px rgba(60,46,20,.18)); }
.frame-win {
  position: relative;
  aspect-ratio: 300 / 380;
  border-radius: 50% / 50%;
  overflow: hidden;
  background: #ded4c0;
  box-shadow: inset 0 0 0 6px rgba(252, 249, 241, .9);
}
.frame-win img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s ease, transform 6s linear;
}
.frame-win img.on { opacity: 1; transform: scale(1); }

.frame-dots {
  display: flex; justify-content: center; gap: 7px; margin-top: 22px;
}
.frame-dots b {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(75, 90, 60, .3);
  transition: background .4s ease, width .4s ease;
}
.frame-dots b.on { width: 18px; border-radius: 3px; background: var(--gold-g); }

/* ------------------------------------------------------------- dress code */

.dress-name {
  margin: 2px 0 20px; text-align: center;
  font-family: var(--serif-g); font-style: italic;
  font-size: 23px; color: var(--gold-g);
}
.dress-two {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(156, 122, 52, .18);
}
.dress-who {
  margin: 0 0 5px; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-g);
}
.dress-what { margin: 0; font-size: 14px; line-height: 1.55; color: #4e5844; }

.dress-sw-h {
  margin: 20px 0 12px; text-align: center;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #6b7659;
}
.swatches { display: flex; justify-content: center; gap: 10px; }
.swatches i {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px rgba(255,255,255,.85) inset, 0 3px 8px rgba(60,46,20,.16);
}
.dress-no {
  margin: 18px 0 0; text-align: center;
  font-size: 12.5px; font-style: italic; color: #77806a;
}

/* ------------------------------------------------------------------ gifts */

.reveal {
  display: block; width: 100%;
  padding: 15px 20px;
  border: 1px dashed rgba(156, 122, 52, .5);
  border-radius: 14px;
  background: rgba(247, 241, 228, .7);
  color: var(--gold-g);
  font: 500 13.5px/1 var(--sans-g);
  letter-spacing: .06em;
  cursor: pointer;
}
.reveal:active { transform: scale(.99); }

.revealed {
  margin-top: 6px;
  animation: unfold .55s ease both;
  text-align: center;
}
@keyframes unfold {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.rev-l {
  margin: 18px 0 4px; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: #6b7659;
}
.rev-v { margin: 0; font-family: var(--serif-g); font-size: 22px; color: #33402a; }
.rev-v a { color: inherit; text-decoration: none; }
.rev-v .mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13.5px; letter-spacing: .04em; word-break: break-all;
  color: #3d4a33;
}
.copy {
  margin-top: 16px;
  padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--card-line);
  background: transparent; color: var(--gold-g);
  font: 500 12.5px/1 var(--sans-g); letter-spacing: .06em; cursor: pointer;
}

/* -------------------------------------------------------------------- faq */

.acc { margin-top: 22px; display: grid; gap: 10px; }
.acc details {
  background: var(--card-g);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--card-line);
  border-radius: 14px;
  overflow: hidden;
}
.acc summary {
  list-style: none; cursor: pointer;
  padding: 16px 44px 16px 18px;
  position: relative;
  font-family: var(--serif-g); font-size: 18px; color: #33402a;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.6px solid var(--gold-g);
  border-bottom: 1.6px solid var(--gold-g);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.acc details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.acc p {
  margin: 0; padding: 0 18px 17px;
  font-size: 14px; line-height: 1.65; color: #55604a;
}

/* ------------------------------------------------------------------- stay */

.stays { display: grid; gap: 12px; margin-top: 22px; }
.stay { text-align: center; padding: 22px 20px; }
.stay-name { margin: 0; font-family: var(--serif-g); font-size: 22px; color: #33402a; }
.stay-x { margin: 7px 0 12px; font-size: 13.5px; line-height: 1.55; color: #5a6450; }
.stay-p {
  margin: 0; font-family: var(--serif-g); font-size: 24px; color: var(--gold-g);
}
.stay-p small { font-family: var(--sans-g); font-size: 12px; color: #77806a; }

/* ------------------------------------------------------------------- rsvp */

.rsvp-card { padding-bottom: clamp(26px, 6vw, 34px); }

.fld { display: block; margin-bottom: 16px; border: 0; padding: 0; }
.fld > span, .fld legend {
  display: block; margin-bottom: 7px; padding: 0;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #6b7659;
}

.fld input[type="text"],
.fld input[type="tel"],
.fld textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(120, 110, 80, .26);
  border-radius: 12px;
  background: rgba(255, 253, 248, .92);
  color: var(--ink-g);
  font: 400 15px/1.4 var(--sans-g);
  -webkit-appearance: none; appearance: none;
}
.fld textarea { resize: vertical; min-height: 82px; }
.fld input:focus, .fld textarea:focus {
  outline: 0;
  border-color: var(--gold-g);
  box-shadow: 0 0 0 3px rgba(156, 122, 52, .14);
}

.choices { display: flex; gap: 9px; }
.choices.wrap { flex-wrap: wrap; }

.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid rgba(120, 110, 80, .26);
  border-radius: 999px;
  background: rgba(255, 253, 248, .8);
  font-size: 13px; color: #4e5844;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.chip input:checked + span {
  background: #4b5a3c; border-color: #4b5a3c; color: #f6f1e2;
}
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(156, 122, 52, .2); }

.stepper {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid rgba(120, 110, 80, .26);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 253, 248, .92);
}
.stepper button {
  width: 44px; height: 46px; border: 0; background: transparent;
  color: var(--gold-g); font-size: 20px; cursor: pointer;
}
.stepper input {
  width: 54px; height: 46px; border: 0; background: transparent;
  text-align: center; font: 500 16px var(--sans-g); color: var(--ink-g);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.send {
  width: 100%; margin-top: 8px;
  padding: 16px 20px;
  border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #55663f 0%, #3f4d2f 100%);
  color: #f7f2e3;
  font: 500 15px/1 var(--sans-g); letter-spacing: .1em;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(63, 77, 47, .3);
}
.send:active { transform: translateY(1px); }
.sent { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--gold-g); }

.fld.off { display: none; }

/* ---------------------------------------------------------------- closing */

.g-foot {
  position: relative; z-index: 2;
  text-align: center;
  padding: clamp(50px, 13vw, 80px) var(--pad) clamp(96px, 22vw, 130px);
}
.foot-line {
  margin: 0; font-family: var(--serif-g); font-style: italic;
  font-size: 20px; color: #3d4a33;
  text-shadow: 0 1px 10px rgba(255, 252, 242, .9);
}
.foot-names {
  margin: 8px 0 0; font-family: var(--serif-g);
  font-size: 30px; color: #2e3a24;
  text-shadow: 0 1px 12px rgba(255, 252, 242, .95);
}
.foot-brand { margin: 26px 0 0; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; }
.foot-brand a { color: #6b7659; text-decoration: none; }

/* ------------------------------------------------------- arriving on scroll */

.r {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1),
              transform .85s cubic-bezier(.22,.61,.36,1);
}
.r.in { opacity: 1; transform: none; }

/* the hero is already on screen when the envelope finishes, so it arrives
   on a timer instead of on a scroll position */
body.is-completed .g-hero .r { transition-delay: var(--d, 0s); }

/* ------------------------------------------------------------------ arabic */

.invitation[dir="rtl"] {
  font-family: var(--arab-g);
  letter-spacing: normal !important;
}
.invitation[dir="rtl"] .g-title,
.invitation[dir="rtl"] .names,
.invitation[dir="rtl"] .the-date,
.invitation[dir="rtl"] .wordwash,
.invitation[dir="rtl"] .menu-dish,
.invitation[dir="rtl"] .venue-name,
.invitation[dir="rtl"] .acc summary,
.invitation[dir="rtl"] .stay-name,
.invitation[dir="rtl"] .foot-line,
.invitation[dir="rtl"] .foot-names,
.invitation[dir="rtl"] .dress-name,
.invitation[dir="rtl"] .rev-v,
.invitation[dir="rtl"] .sig,
.invitation[dir="rtl"] .clock-done {
  font-family: var(--arab-g);
}
/* Arabic letters join. Any tracking at all breaks them apart. */
.invitation[dir="rtl"] .kicker,
.invitation[dir="rtl"] .invite-line,
.invitation[dir="rtl"] .the-place,
.invitation[dir="rtl"] .menu-head,
.invitation[dir="rtl"] .dress-who,
.invitation[dir="rtl"] .dress-sw-h,
.invitation[dir="rtl"] .rev-l,
.invitation[dir="rtl"] .unit span,
.invitation[dir="rtl"] .fld > span,
.invitation[dir="rtl"] .fld legend,
.invitation[dir="rtl"] .foot-brand,
.invitation[dir="rtl"] .to-rsvp,
.invitation[dir="rtl"] .send {
  letter-spacing: normal;
  text-transform: none;
  font-size: 13px;
}
.invitation[dir="rtl"] .names { font-size: clamp(40px, 13vw, 58px); }
.invitation[dir="rtl"] .tl li { grid-template-columns: 46px 1fr; }
.invitation[dir="rtl"] .tl::before {
  left: auto; right: calc(clamp(18px, 5vw, 26px) + 60px);
}
.invitation[dir="rtl"] .tl-dot { left: auto; right: 55px; }
.invitation[dir="rtl"] .tl-time { text-align: left; }
.invitation[dir="rtl"] .acc summary { padding: 16px 18px 16px 44px; }
.invitation[dir="rtl"] .acc summary::after { right: auto; left: 20px; }
.invitation[dir="rtl"] .acc p { padding: 0 18px 17px; }
.invitation[dir="rtl"] .rev-v .mono { direction: ltr; display: inline-block; }
.invitation[dir="rtl"] .unit b,
.invitation[dir="rtl"] .tl-time,
.invitation[dir="rtl"] .stay-p { direction: ltr; }

/* --------------------------------------------------------------- restraint */

@media (prefers-reduced-motion: reduce) {
  .r { opacity: 1; transform: none; transition: none; }
  .wordwash w { opacity: 1; }
  .scroll-cue i { animation: none; }
  .frame-win img { transition: opacity .3s ease; transform: none; }
}