/* ============================================================
   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);
}

/* ------------------------------------------------------------
   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. */

/* 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: 0.7cqw; }

.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: 7cqw;
}

.invite__amp svg {
  width: 100%;
  height: auto;
  color: var(--pom);
  opacity: 0.9;
  animation: spin-slow 50s linear infinite;
}

.invite .ornament--divider {
  width: 48%;
  margin-block: 2cqw;
}

.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;
}

.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;
}

html[lang="ar"] .section__title { font-size: calc(var(--text-title) * 1.18); }
html[lang="ar"] .section__eyebrow { font-size: calc(var(--text-small) * 1.2); }
html[lang="ar"] .section__lead { font-size: calc(var(--text-base) * 1.12); }
html[lang="ar"] .couple__name { font-size: clamp(1.9rem, 1.15rem + 3.9vw, 3.3rem); }
html[lang="ar"] .venue__name { font-size: clamp(1.45rem, 1.05rem + 2.2vw, 2.15rem); }
html[lang="ar"] .party__name { font-size: clamp(1.5rem, 1.05rem + 2.5vw, 2.3rem); }

.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.
   It crowns the groom's plate and closes the bride's, which mirrors the pair
   the way the crest and braid used to. */
.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__panel--above .couple__sign {
  margin-top: 0;
  margin-bottom: clamp(1rem, 2.6vw, 1.5rem);
}

.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);
}

.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;
}

.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,
  .venues {
    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);
}

.gift__note {
  max-width: 40ch;
  margin-inline: auto;
  color: var(--stone-soft);
  line-height: 1.75;
}

.gift__whish {
  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__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;
}

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