/* ============================================================
   Hero, couple, party, venues, footer, lang pill
   ============================================================ */

.invitation {
  position: relative;
  z-index: 3;
}

.invitation[hidden] { display: none; }

/* ------------------------------------------------------------
   Floating language switcher
   ------------------------------------------------------------ */

.lang-pill {
  position: fixed;
  z-index: 40;
  top: max(1rem, env(safe-area-inset-top));
  inset-inline-end: 1rem;
  display: flex;
  gap: 0.15rem;
  padding: 0.25rem;
  background: rgba(var(--ch-paper), 0.86);
  backdrop-filter: blur(16px) saturate(105%);
  -webkit-backdrop-filter: blur(16px) saturate(105%);
  border: 1px solid rgba(var(--ch-ink), 0.12);
  border-radius: 999px;
  box-shadow: var(--paper-shadow);
  animation: pill-in 900ms 400ms var(--ease-out-expo) both;
  transition:
    transform 480ms var(--ease-out-expo),
    opacity 380ms var(--ease-out-expo);
}

.lang-pill[hidden] { display: none; }

/* Slides away while reading down the page, returns on scroll up */
.lang-pill.is-tucked {
  opacity: 0;
  transform: translate3d(0, -180%, 0);
  pointer-events: none;
}

@keyframes pill-in {
  from { opacity: 0; transform: translate3d(0, -0.8rem, 0); }
  to   { opacity: 1; transform: none; }
}

.lang-pill__btn {
  padding: 0.36rem 0.66rem;
  font-family: var(--font-body);
  font-size: 0.6425rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--stone-soft);
  border-radius: 999px;
  transition:
    color var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

.lang-pill__btn[data-lang="hy"] { font-family: var(--font-hy); letter-spacing: 0.06em; }
.lang-pill__btn[data-lang="ar"] { font-family: var(--font-ar-display); font-size: 0.8625rem; }

.lang-pill__btn:hover { color: var(--pom); }

.lang-pill__btn.is-active {
  color: var(--off-white);
  background: var(--pom);
}

/* ------------------------------------------------------------
   Floating music toggle
   ------------------------------------------------------------ */

.music-toggle {
  position: fixed;
  z-index: 40;
  top: max(1rem, env(safe-area-inset-top));
  inset-inline-start: 1rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--pom);
  background: rgba(var(--ch-paper), 0.86);
  backdrop-filter: blur(16px) saturate(105%);
  -webkit-backdrop-filter: blur(16px) saturate(105%);
  border: 1px solid rgba(var(--ch-ink), 0.12);
  border-radius: 999px;
  box-shadow: var(--paper-shadow);
  animation: pill-in 900ms 400ms var(--ease-out-expo) both;
  transition: color var(--duration-fast) ease;
}

.music-toggle[hidden] { display: none; }

.music-toggle:hover { color: var(--pom-deep); }

.music-toggle__icon {
  width: 1.05rem;
  height: 1.05rem;
  grid-area: 1 / 1;
}

.music-toggle__icon--pause { display: none; }

.music-toggle.is-playing .music-toggle__icon--play { display: none; }
.music-toggle.is-playing .music-toggle__icon--pause { display: block; }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  transform: scale(1.06);
  animation: hero-drift 20s var(--ease-out-expo) forwards;
}

@keyframes hero-drift {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

.hero__veil {
  position: absolute;
  inset: 0;
  background: var(--grad-vignette), var(--grad-veil);
}


.hero__scroll {
  position: absolute;
  bottom: max(1.6rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: clamp(2.4rem, 6vh, 3.6rem);
  overflow: hidden;
  background: rgba(var(--ch-ink), 0.18);
}

.hero__scroll-line {
  display: block;
  width: 100%;
  height: 42%;
  background: var(--pom);
  animation: scroll-cue 2.6s var(--ease-out-expo) infinite;
}

@keyframes scroll-cue {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(240%); opacity: 0; }
}

/* ------------------------------------------------------------
   The invitation card — the piece the church opens onto
   ------------------------------------------------------------ */

/* Sits flush against the church — the invitation begins the moment it ends.
   Both classes are needed to outrank the base .section padding below. */
.section.section--invitation {
  padding-block: 0 var(--space-section);
}

/* Full bleed on phones — the photo becomes the section itself.
   Above that it settles into a centred card with the page margin restored. */
.section--invitation > .container {
  width: 100%;
}

@media (min-width: 34rem) {
  .section--invitation > .container {
    display: flex;
    justify-content: center;
    width: min(100% - 2.5rem, var(--content-max));
  }

  /* Size from the viewport height so the whole card is presented at once,
     with its width following the artwork's ratio. */
  .invite {
    height: min(86svh, 58rem);
    width: auto;
    max-width: 100%;
  }
}

/* A portrait card. The ratio is no longer pinned to a specific image file, so
   a replacement of any proportion can drop in. */
.invite {
  position: relative;
  display: grid;
  place-items: center;
  container-type: inline-size;
  aspect-ratio: 5 / 7;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding: 4% 8%;
  overflow: hidden;
  background-color: var(--parchment);
  /* Awaiting a light replacement for the old black-and-gold card art. Drop the
     file in here and the layout takes it unchanged. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--paper-border);
  box-shadow: var(--paper-shadow-lift);
}

/* Soft well in the clear middle band: keeps the type legible over the stone
   texture without flattening it or touching the foliage. */
.invite::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    62% 38% at 50% 50%,
    rgba(var(--ch-paper), 0.82) 0%,
    rgba(var(--ch-paper), 0.55) 55%,
    rgba(var(--ch-paper), 0) 100%
  );
}

.invite__body {
  position: relative;
  width: 100%;
  text-align: center;
}

/* Two carpet corners, echoing the diagonal the old gold foliage sat on.
   Held well back so they decorate the card rather than compete with the names. */
.invite__corner {
  position: absolute;
  width: 38%;
  height: auto;
  opacity: 0.42;
  pointer-events: none;
}

.invite__corner--tl {
  top: -3%;
  inset-inline-start: -6%;
  transform: rotate(-8deg);
}

.invite__corner--br {
  bottom: -3%;
  inset-inline-end: -6%;
  transform: rotate(172deg);
}

/* Everything inside the card is sized against the card, not the viewport, so
   the invitation keeps identical proportions on a phone and on a desktop. */

/* Sits above everything else on the card, pulled toward the top edge and
   given real room beneath it so it reads as its own line rather than
   crowding the hosts underneath. Checked against the card's fixed
   aspect-ratio (overflow:hidden) — the tightest case (Arabic, 320px wide)
   still clears with room to spare after this increase. */
/* transform, not margin: the card centers .invite__body with place-items,
   which was quietly absorbing about half of every negative margin-top —
   each increase barely moved it. transform sidesteps that entirely. */
.invite__verse {
  margin-bottom: 5.4cqw;
  transform: translateY(-9cqw);
}

.invite__verse-text {
  max-width: 28ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: max(0.86rem, calc(3.8cqw + 1.4px));
  font-style: italic;
  font-weight: 300;
  line-height: 1.48;
  color: var(--stone-soft);
}

.invite__verse-ref {
  margin-top: 0.8cqw;
  font-size: max(0.7rem, calc(3cqw + 1.2px));
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--clay);
}

/* Only present when the guest arrived through their own invite link */
.invite__greeting {
  margin-bottom: 2.6cqw;
  font-family: var(--font-display);
  font-size: max(1.0125rem, calc(4.6cqw + 1px));
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--clay);
}

.invite__greeting[hidden] { display: none; }

html[lang="ar"] .invite__greeting,
html[lang="hy"] .invite__greeting { font-style: normal; }

/* The invitation is issued by the parents, so their names open the card. */
.invite__hosts {
  font-size: max(0.9rem, calc(3.9cqw + 1px));
  font-weight: var(--weight-display-light);
  line-height: 1.35;
  color: var(--stone);
}

.invite__hosts + .invite__hosts { margin-top: 2.6cqw; }

.invite__eyebrow {
  display: block;
  margin-bottom: 3.4cqw;
  font-size: max(0.7625rem, calc(3.4cqw + 1px));
  letter-spacing: 0.24em;
}

.invite__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqw;
  font-size: calc(14.5cqw + 1px);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.invite__name {
  display: block;

}

.invite__amp {
  display: grid;
  place-items: center;
  width: auto;
}

/* All three languages now show the word "and" rather than the wheel icon */
.invite__amp-icon { display: none; }

.invite__amp-text {
  display: block;
  width: auto;
  font-size: max(0.85rem, calc(3.6cqw + 1px));
  color: var(--pom);
  opacity: 0.9;
}

html[lang="hy"] .invite__amp-text { font-family: var(--font-hy); }

/* Only shown in Armenian, in the spot the divider ornament used to occupy */
.invite__sacrament { display: none; }

html[lang="hy"] .invite__sacrament {
  display: block;
  margin-block: 2cqw;
  font-family: var(--font-hy);
  font-size: max(0.7rem, calc(3cqw + 1px));
  letter-spacing: 0.08em;
  color: var(--clay);
}

.invite__line {
  max-width: 30ch;
  margin-inline: auto;
  margin-block: 3.4cqw 1cqw;
  color: var(--stone-soft);
  font-size: max(0.86rem, calc(3.5cqw + 1px));
  font-weight: 200;
  line-height: 1.65;
}

/* Armenian invite line reads as a single short phrase, kept on one line */
html[lang="hy"] .invite__line {
  max-width: none;
  white-space: nowrap;
  font-size: max(0.7rem, calc(2.9cqw + 1px));
}

.invite__date {
  margin-top: 3cqw;
  font-size: calc(7.4cqw + 1px);
  letter-spacing: 0.06em;
}

.invite__place {
  margin-top: 1.6cqw;
  font-size: max(0.7225rem, calc(3.3cqw + 1px));
  letter-spacing: 0.22em;
}

html[lang="ar"] .invite__hosts { font-size: max(0.95rem, calc(4.2cqw + 1px)); line-height: 1.6; }
html[lang="hy"] .invite__hosts { font-size: max(0.86rem, calc(3.7cqw + 1px)); }

html[lang="ar"] .invite__eyebrow,
html[lang="ar"] .invite__place,
html[lang="hy"] .invite__eyebrow,
html[lang="hy"] .invite__place {
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   Shared section shell
   ------------------------------------------------------------ */

.section {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
  text-align: center;
}

/* Gold ornament crowning a section, above its eyebrow */
.section__icon {
  width: clamp(2.8rem, 8vw, 3.8rem);
  height: auto;
  margin: 0 auto clamp(1.1rem, 3vw, 1.6rem);
  opacity: 0.92;

}

.section__eyebrow {
  display: block;
  margin-bottom: 0.9rem;
}

/* section__title/eyebrow/lead need no override of their own any more — they
   read var(--text-title/--text-small/--text-base), which tokens.css already
   redefines larger for html[lang="ar"]. What's left here are the selectors
   with their own literal clamp() (not tied to a token), scaled up the same
   ~15-18% by hand since a token redefinition can't reach them. */
html[lang="ar"] .couple__name { font-size: clamp(2.05rem, 1.23rem + 4vw, 3.44rem); }
html[lang="ar"] .venue__name { font-size: clamp(1.58rem, 1.18rem + 2.2vw, 2.28rem); }
html[lang="ar"] .party__name { font-size: clamp(1.64rem, 1.18rem + 2.6vw, 2.45rem); }
html[lang="ar"] .footer__names { font-size: clamp(2.26rem, 1.45rem + 3.9vw, 3.75rem); }

.section__title {
  font-size: var(--text-title);
  font-weight: 300;
  margin-bottom: clamp(2.2rem, 6vw, 3.6rem);
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   Couple
   ------------------------------------------------------------ */

.couple {
  display: grid;
  gap: clamp(1.1rem, 3.5vw, 1.8rem);
  align-items: stretch;
}

.couple__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 1.4rem + 3.4vw, 3.2rem) clamp(1.2rem, 0.9rem + 2.4vw, 2.4rem);
  border-radius: 3px;
}

/* Tightens the paper rule in closer to the edge on these panels, the way an
   engraved plate is bordered inside its edge */
.couple__panel::before {
  inset: clamp(0.5rem, 1.4vw, 0.85rem);
  height: auto;
  background: none;
  border: 1px solid rgba(var(--ch-ink), 0.1);
  border-radius: 2px;
  pointer-events: none;
}

/* Both are Cancers, so the zodiac glyph replaces the old crest and braid,
   sitting under the name on both plates. */
.couple__sign {
  width: clamp(2.6rem, 8vw, 3.6rem);
  height: auto;
  margin-top: clamp(1rem, 2.6vw, 1.5rem);
  color: var(--pom);
  opacity: 0.85;
}

.couple__name {
  font-size: clamp(1.7625rem, 1.0625rem + 3.4vw, 2.9625rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

/* Medallion joining the two panels */
.couple__seal {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: clamp(3.6rem, 12vw, 5rem);
  aspect-ratio: 1;
}

.couple__ring,
.couple__wheel {
  grid-area: 1 / 1;
  height: auto;
}

.couple__ring {
  width: 100%;
  opacity: 0.65;
}

.couple__wheel {
  width: 58%;
  color: var(--stone);
  opacity: 0.95;

  animation: spin-slow 58s linear infinite;
}

/* Hairlines reaching from the medallion toward each panel */
.couple__seal::before,
.couple__seal::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: clamp(0.7rem, 2.4vw, 1.1rem);
  background: linear-gradient(to bottom, transparent, rgba(var(--ch-ink), 0.3));
}

.couple__seal::before { bottom: 100%; }
.couple__seal::after  { top: 100%; transform: rotate(180deg); }

/* ------------------------------------------------------------
   Wedding party
   ------------------------------------------------------------ */

.party,
.venues {
  display: grid;
  gap: clamp(1rem, 3vw, 1.8rem);
}

/* Only the ceremony card remains in this clone — keep it single-column
   and centered instead of leaving an empty slot in the 2-up grid below. */
.venues {
  max-width: 30rem;
  margin-inline: auto;
}

.party__card {
  padding: clamp(2rem, 5.5vw, 3rem) var(--space-card);
}

.party__role {
  display: block;
  margin-bottom: 0.8rem;
  opacity: 0.72;
}

.party__name {
  font-size: clamp(1.4125rem, 1.0125rem + 2.2vw, 2.1125rem);
  font-weight: 300;
}

/* ------------------------------------------------------------
   Venues
   ------------------------------------------------------------ */

.venue {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.2rem, 6vw, 3.2rem) var(--space-card) clamp(2rem, 5vw, 2.8rem);
}

/* The photograph now sits ABOVE the details rather than behind them.
   A night photo inside a light paper frame is natural; the same photo under a
   pale scrim is not — which is what forced the change when the palette went
   light. It also lets the venues actually be seen. */
.venue--photo {
  /* Less top padding than a text-only card, but not zero — the photograph is
     framed inside the card's rule rather than bleeding past it. */
  padding-top: var(--space-card);
}

.venue__photo {
  /* Stretch to the card's content column so it lines up with the icon and
     the type beneath it. The card centres its children, so this needs
     align-self rather than a width. */
  align-self: stretch;
  width: auto;
  margin: 0 0 clamp(1.5rem, 3.6vw, 2rem);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--paper-border);
  border-radius: 2px;
}

.venue__icon {
  width: clamp(3rem, 9vw, 4.2rem);
  height: auto;
  margin-bottom: clamp(1.1rem, 3vw, 1.7rem);
  opacity: 0.92;

}

.venue__role {
  display: block;
  margin-bottom: 0.7rem;
  opacity: 0.72;
}

/* Armenian keeps no role label under the church photo, but the reception
   card does carry one ("Հարսանեկան ընթրիք եւ ընդունելութիւն") */
html[lang="hy"] [data-i18n="venue.churchRole"] { display: none; }

.venue__name {
  font-size: clamp(1.3625rem, 1.0125rem + 1.9vw, 1.9625rem);
  font-weight: 300;
  max-width: 18ch;
  margin-inline: auto;
}

.venue__time {
  margin-top: clamp(1rem, 2.6vw, 1.5rem);
  font-size: clamp(1.6625rem, 1.1625rem + 2.4vw, 2.4625rem);
  font-weight: 300;
  color: var(--stone);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.venue__date {
  margin-top: 0.35rem;
  font-size: var(--text-small);
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--stone-soft);
  opacity: 0.66;
}

html[lang="ar"] .venue__date { letter-spacing: 0; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.footer {
  position: relative;
  padding-block: var(--space-section) clamp(3rem, 8vw, 4.5rem);
  text-align: center;
  border-top: 1px solid rgba(var(--ch-ink), 0.12);
}

.footer__mark {
  width: clamp(3rem, 10vw, 4.4rem);
  margin: 0 auto clamp(1.4rem, 4vw, 2rem);
  opacity: 0.8;
  animation: spin-slow 70s linear infinite;
}

.footer__blessing {
  max-width: 26ch;
  margin-inline: auto;
  font-size: var(--text-sub);
  font-weight: 300;
  color: var(--stone-soft);
  line-height: 1.6;
}

/* The names now carry the footer, so they take the display size the date
   used to have, and the date drops back to a quiet line beneath. */
.footer__names {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  font-size: clamp(1.9625rem, 1.2625rem + 3.4vw, 3.2625rem);
  font-weight: var(--weight-display);
  letter-spacing: 0.03em;
}

.footer__date {
  margin-top: clamp(0.7rem, 2vw, 1rem);
  font-family: var(--font-body);
  font-size: var(--text-small);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--stone-faint);
}

/* ------------------------------------------------------------
   Responsive — tablet and up
   ------------------------------------------------------------ */

@media (min-width: 46rem) {
  .couple {
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(1.6rem, 4vw, 3rem);
  }

  .couple__seal {
    align-self: center;
  }

  /* Panels now sit side by side, so the connectors run left and right */
  .couple__seal::before,
  .couple__seal::after {
    top: 50%;
    bottom: auto;
    left: auto;
    width: clamp(0.7rem, 2.4vw, 1.1rem);
    height: 1px;
    transform: none;
    background: linear-gradient(to right, transparent, rgba(var(--ch-ink), 0.3));
  }

  .couple__seal::before { right: 100%; }

  .couple__seal::after {
    left: 100%;
    background: linear-gradient(to left, transparent, rgba(var(--ch-ink), 0.3));
  }

  .party {
    grid-template-columns: 1fr 1fr;
  }

  .hero__media img { object-position: 50% 30%; }
}

@media (min-width: 64rem) {
  .hero__media img { object-position: 50% 34%; }
}

/* Very small phones */
@media (max-width: 22.5rem) {
  .container { width: calc(100% - 1.8rem); }
}


/* ------------------------------------------------------------
   Background washes — the motifs at large scale, very faint
   ------------------------------------------------------------ */

.wash--couple {
  width: min(38rem, 82vw);
  top: 4%;
  inset-inline-end: -14%;
  transform: rotate(-6deg);
}

.wash--party {
  width: min(30rem, 70vw);
  bottom: -6%;
  inset-inline-start: -12%;
  transform: rotate(5deg);
}

/* ------------------------------------------------------------
   Confirmation
   ------------------------------------------------------------ */

.section__lead {
  max-width: 34ch;
  margin: clamp(0.6rem, 2vw, 1rem) auto 0;
  color: var(--stone-soft);
  font-size: var(--text-base);
}

.rsvp {
  max-width: 32rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(1.6rem, 1.2rem + 2.6vw, 2.6rem);
  text-align: start;
}

.rsvp .field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 clamp(1.1rem, 2.6vw, 1.5rem);
  padding: 0;
  border: 0;
}

.rsvp .field:last-of-type { margin-bottom: clamp(1.4rem, 3vw, 1.9rem); }

.field__label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  padding: 0;
}

html[lang="ar"] .field__label,
html[lang="hy"] .field__label { letter-spacing: 0.04em; text-transform: none; }

.field__hint {
  margin-top: 0.4rem;
  font-size: var(--text-small);
  color: var(--stone-faint);
}

.field__hint[hidden] { display: none; }

.input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: var(--text-base);
  color: var(--stone);
  background: rgba(var(--ch-paper), 0.6);
  border: 1px solid rgba(var(--ch-ink), 0.14);
  border-radius: 2px;
  transition: border-color var(--duration-fast) ease;
}

.input:focus { border-color: var(--pom); outline: none; }
.input--area { resize: vertical; min-height: 5rem; }

/* Attending choice */

.rsvp__choice { border: 0; }

.choice { display: block; cursor: pointer; }
.choice + .choice { margin-top: 0.5rem; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }

.choice__face {
  display: block;
  padding: 0.8rem 1rem;
  font-size: var(--text-base);
  text-align: center;
  border: 1px solid rgba(var(--ch-ink), 0.14);
  border-radius: 2px;
  transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.choice input:checked + .choice__face--yes {
  color: var(--off-white);
  background: var(--pom);
  border-color: var(--pom);
}

.choice input:checked + .choice__face--no {
  color: var(--stone);
  background: var(--light);
  border-color: rgba(var(--ch-ink), 0.28);
}

.choice input:focus-visible + .choice__face {
  outline: 2px solid var(--pom);
  outline-offset: 3px;
}

/* Guest counter */

.rsvp__count[hidden] { display: none; }

.counter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: start;
}

.counter__btn {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2625rem;
  line-height: 1;
  color: var(--stone);
  border: 1px solid rgba(var(--ch-ink), 0.16);
  border-radius: 2px;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.counter__btn:hover { border-color: var(--pom); color: var(--pom); }

.counter__num {
  min-width: 2.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5625rem;
}

.rsvp__submit { width: 100%; margin-top: 0; }

.rsvp__error {
  margin-top: 0.8rem;
  font-size: var(--text-small);
  text-align: center;
  color: var(--pom-deep);
}

.rsvp__error[hidden] { display: none; }

/* Sent */

.rsvp__done {
  max-width: 32rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.rsvp__done[hidden] { display: none; }

.rsvp__tick {
  width: clamp(2.6rem, 8vw, 3.4rem);
  height: auto;
  margin: 0 auto clamp(1rem, 3vw, 1.4rem);
  color: var(--pom);
}

.rsvp__done-text {
  max-width: 26ch;
  margin-inline: auto;
  font-size: var(--text-sub);
  font-weight: var(--weight-display-light);
  line-height: 1.5;
  color: var(--stone);
}

/* ------------------------------------------------------------
   Gift
   ------------------------------------------------------------ */

.gift {
  max-width: 34rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(1.8rem, 1.2rem + 3vw, 3rem);
}

/* Each payment method is one block; only the ones after the first get the
   divider, so the panel never opens on a stray rule with nothing above it. */
.gift__method + .gift__method {
  margin-top: clamp(1.6rem, 4vw, 2.2rem);
  padding-top: clamp(1.4rem, 3.4vw, 1.9rem);
  border-top: 1px solid rgba(var(--ch-ink), 0.14);
}

.gift__pending {
  font-size: var(--text-small);
  font-style: italic;
  color: var(--stone-faint);
}

html[lang="ar"] .gift__pending,
html[lang="hy"] .gift__pending { font-style: normal; }

.gift__label { display: block; margin-bottom: 0.5rem; }

.gift__number {
  font-family: var(--font-display);
  font-size: clamp(1.4625rem, 1.0625rem + 2vw, 2.0625rem);
  letter-spacing: 0.06em;
  color: var(--stone);
  direction: ltr;
  unicode-bidi: isolate;
}

/* The digits themselves stay Latin/LTR either way (direction: ltr above),
   but the surrounding Arabic page still reads everything else larger. */
html[lang="ar"] .gift__number { font-size: clamp(1.64rem, 1.19rem + 2.24vw, 2.31rem); }

.gift__copy { margin-top: clamp(1rem, 2.4vw, 1.4rem); }