/* Calligraphy enhancement: fuller, classic wedding lettering while preserving the existing palette and motion. */
.intro h1 {
  font-family: 'Pinyon Script', 'Great Vibes', cursive;
  font-size: clamp(76px, 12.5vw, 170px);
  line-height: .78;
  gap: 12px;
  letter-spacing: .01em;
}

.intro h1 em {
  margin: 2px 0;
}

/* The added inset lets the tall calligraphic flourishes render fully while the writing reveal plays. */
.hero { overflow: visible; }
.names {
  font-family: 'Pinyon Script', 'Great Vibes', cursive;
  font-size: clamp(98px, 15vw, 190px);
  line-height: .69;
  padding: .18em .06em .24em;
  margin: -.18em 0 -.24em;
  letter-spacing: .01em;
}

.names span {
  padding: .17em .2em .24em;
  margin: -.17em -.2em -.24em;
  clip-path: none;
  opacity: 0;
  transform: translateY(14px) scale(.94);
  transform-origin: center;
  animation: names-reveal 1.45s cubic-bezier(.2,.7,.2,1) forwards;
}

.names span:last-child {
  animation-delay: 1.35s;
}

.names i {
  margin: 20px 0;
}

.closing-names {
  font-family: 'Pinyon Script', 'Great Vibes', cursive;
  font-size: 75px;
  line-height: .8;
}

@keyframes names-reveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 650px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .intro-copy {
    position: absolute;
    inset: 0;
    padding: 0;
  }

  .intro-copy .eyebrow {
    position: absolute;
    top: calc(50% - 185px);
    left: 0;
    width: 100%;
  }

  .intro h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Keep the calligraphic flourishes inside the circular frame on narrow screens. */
    width: min(82vw, 325px);
    margin: 0;
    font-family: 'Pinyon Script', 'Great Vibes', cursive !important;
    font-size: clamp(48px, 14vw, 58px);
    line-height: .76;
    gap: 7px;
    letter-spacing: 0;
    transform: translate(-51.5%, -50%);
    text-align: center;
    text-transform: uppercase;
  }

  .intro h1 span { justify-self: center; }

  .intro h1 em { margin: 5px 0; }

  .intro h1 span:last-child {
    font-size: .84em;
  }

  .intro-copy .tap-copy {
    position: absolute;
    bottom: 13%;
    left: 0;
    width: 100%;
    margin: 0;
  }

  .names { font-size: 23vw; line-height: .72; }

  .closing-names {
    font-size: clamp(48px, 14vw, 54px);
    white-space: nowrap;
  }

  .closing-names i { font-size: .48em; }
}

/* Bilingual Quran verse: separate, responsive treatments preserve a calm reading rhythm on every screen. */
.verse blockquote { max-width: 830px; margin: 27px auto 25px; }
.verse-ar, .verse-en { display: block; }
.verse-ar { font: 400 clamp(28px, 3.2vw, 43px)/1.5 'Amiri', Tahoma, serif; direction: rtl; }
.verse-en { margin-top: 20px; font-size: clamp(21px, 2.7vw, 34px); line-height: 1.15; font-style: italic; }
.verse cite { letter-spacing: .18em; }

@media (max-width: 650px) {
  .verse-ar { font-size: clamp(26px, 7.6vw, 32px); line-height: 1.55; }
  .verse-en { margin-top: 17px; font-size: clamp(20px, 5.8vw, 25px); line-height: 1.18; }
  .verse cite { display: flex; flex-direction: column; gap: 7px; letter-spacing: .13em; }
  .verse cite [aria-hidden="true"] { display: none; }
}

/* Align the desktop opening with the centered mobile composition. */
@media (min-width: 651px) {
  .intro-copy { position: absolute; inset: 0; padding: 0; }
  .intro-copy .eyebrow { position: absolute; top: calc(50% - min(28vw, 230px)); left: 0; width: 100%; }
  .intro h1 { position: absolute; top: 50%; left: 50%; width: min(60vw, 550px); margin: 0; font-family: 'Pinyon Script', 'Great Vibes', cursive; font-size: clamp(72px, 8vw, 118px); line-height: .72; gap: 10px; letter-spacing: .01em; transform: translate(-50%, -50%); text-align: center; text-transform: uppercase; }
  .intro h1 span { justify-self: center; }
  .intro h1 span:last-child { font-size: .84em; }
  .intro h1 em { margin: 9px 0; }
  .intro-copy .tap-copy { position: absolute; bottom: 11%; left: 0; width: 100%; margin: 0; }
}

/* Let the second name follow the first sooner while preserving the calligraphic reveal. */
.names span:last-child, .names i { animation-delay: .6s; }

.tap-copy { font-size: clamp(14px, 1.35vw, 17px); }
.tap-copy span { width: clamp(30px, 3vw, 38px); }

.seal { width: 84px; height: 84px; font: 34px/1 'Great Vibes', cursive; }

@media (max-width: 650px) {
  .seal { width: 72px; height: 72px; font-size: 29px; }
}