/* More expressive wedding typography and a denser event-card rhythm. */
.invitation .hero .personal {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
  margin: 1px auto 20px !important;
  padding: 5px 19px 7px;
  border-top: 1px solid rgb(178 130 61 / .42);
  border-bottom: 1px solid rgb(178 130 61 / .42);
  color: #8a6232 !important;
  font: 500 clamp(1.5rem, 4.6vw, 2.25rem) / 1.1 'Cormorant Garamond', serif !important;
  letter-spacing: .015em;
  text-shadow: 0 1px rgb(255 254 246 / .9);
  animation: greeting-rise .9s cubic-bezier(.16,.84,.2,1) .22s both, greeting-glow 5.5s ease-in-out 1.2s infinite;
}

.invitation .hero .personal::before,
.invitation .hero .personal::after {
  content: '❦';
  position: absolute;
  top: 50%;
  color: #b68643;
  font: 1.12rem 'Cormorant Garamond', serif;
  transform: translateY(-51%);
}

.invitation .hero .personal::before { left: -5px; }
.invitation .hero .personal::after { right: -5px; transform: translateY(-51%) rotate(180deg); }

.invitation .hero .personal strong {
  display: inline-block;
  color: #8d5928;
  font: 400 clamp(2.45rem, 8.2vw, 3.9rem) / .72 'Allura', 'Great Vibes', cursive;
  letter-spacing: .01em;
  text-shadow: 0 1px #fffaf0, 0 6px 18px rgb(132 90 36 / .20);
  animation: guest-name-shimmer 6s ease-in-out 1.1s infinite;
}

/* The first card becomes the formal cover of the invitation. */
.royal-message h1 {
  display: grid;
  justify-items: center;
  margin: 4px 0 3px !important;
  color: #3d271e !important;
  font: 400 clamp(4.75rem, 14vw, 8.1rem) / .60 'Allura', 'Great Vibes', cursive !important;
  letter-spacing: .01em;
  text-shadow: 0 1px rgb(255 253 243 / .94), 0 7px 21px rgb(98 61 28 / .16) !important;
  animation: couple-name-arrive 1.2s cubic-bezier(.16,.85,.2,1) .14s both;
}

.royal-message h1 span { display: block; }
.royal-message h1 span:first-child { transform: translateX(-.045em); }
.royal-message h1 span:last-child { transform: translateX(.045em); }
.royal-message h1 i { display: block; margin: .18em 0 .03em !important; color: #ad7738 !important; -webkit-text-fill-color: #ad7738 !important; font: italic 500 .29em / .7 'Cormorant Garamond', serif !important; letter-spacing: .11em; text-shadow: none !important; }
.royal-message .opening-tagline { margin: 23px auto 7px !important; color: #634730 !important; font: italic clamp(1rem, 2.5vw, 1.17rem) / 1.35 'Cormorant Garamond', serif !important; }
.royal-message .opening-date { margin: 10px auto 20px !important; }

/* Login repeats the invitation-cover typography without competing with the code form. */
.auth-card h1 { display: flex; align-items: center; justify-content: center; gap: .12em; margin: 3px 0 8px !important; color: #3e281e !important; font: 400 clamp(3.65rem, 10vw, 5.8rem) / .72 'Allura', 'Great Vibes', cursive !important; letter-spacing: .01em; text-shadow: 0 1px rgb(255 253 244 / .92), 0 6px 20px rgb(96 62 29 / .15) !important; animation: couple-name-arrive 1.1s cubic-bezier(.16,.85,.2,1) .18s both; }
.auth-card h1 span { display: inline-block; }
.auth-card h1 i { color: #ad7738 !important; -webkit-text-fill-color: #ad7738 !important; font: italic 500 .40em / 1 'Cormorant Garamond', serif !important; text-shadow: none !important; }

.invitation .hero h1 {
  margin: 19px 0 18px !important;
  color: #3d271e !important;
  font: 400 clamp(5.25rem, 18.4vw, 9.7rem) / .63 'Allura', 'Great Vibes', cursive !important;
  letter-spacing: .012em;
  text-shadow: 0 1px rgb(255 253 244 / .96), 0 8px 25px rgb(91 59 29 / .16) !important;
  animation: couple-name-arrive 1.2s cubic-bezier(.16,.85,.2,1) .26s both;
}

.invitation .hero h1 span {
  display: block;
  transform-origin: center;
}

.invitation .hero h1 span:first-child { transform: translateX(-.045em); }
.invitation .hero h1 span:last-child { transform: translateX(.045em); }

.invitation .hero h1 i {
  display: block;
  margin: .17em 0 .06em !important;
  color: #ac7738 !important;
  -webkit-text-fill-color: #ac7738 !important;
  font: italic 500 .30em / .7 'Cormorant Garamond', serif !important;
  letter-spacing: .08em;
  text-shadow: none !important;
}

.invitation .hero .request { margin-top: 2px !important; }
.invitation .hero .date { margin-top: 22px !important; }
.invitation .hero .hero-note { margin-top: 21px !important; }

@keyframes greeting-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes greeting-glow {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50% { box-shadow: 0 6px 20px rgb(219 181 111 / .20); }
}

@keyframes guest-name-shimmer {
  0%, 100% { color: #8d5928; transform: translateY(0); }
  50% { color: #b37834; transform: translateY(-1px); }
}

@keyframes couple-name-arrive {
  from { opacity: 0; transform: translateY(20px) scale(.96); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 620px) {
  .royal-message h1 { font-size: clamp(4.3rem, 18vw, 6.2rem) !important; }
  .royal-message .opening-tagline { margin-top: 19px !important; }
  .auth-card h1 { font-size: clamp(3.2rem, 14vw, 4.25rem) !important; }
  .invitation .hero .personal { margin-bottom: 17px !important; padding: 5px 15px 7px; }
  .invitation .hero .personal strong { font-size: clamp(2.25rem, 10vw, 3rem); }
  .invitation .hero h1 { font-size: clamp(5rem, 21vw, 6.5rem) !important; }
  .invitation .hero h1 i { margin-top: .18em !important; }
}

@media (prefers-reduced-motion: reduce) {
  .invitation .hero .personal,
  .invitation .hero .personal strong,
  .invitation .hero h1,
  .royal-message h1,
  .auth-card h1 { animation: none !important; }
}

/* Layout safety: names must remain elegant without ever colliding. */
.invitation .hero .personal {
  display: block;
  width: fit-content;
  max-width: calc(100% - 28px);
  margin: 2px auto 20px !important;
  padding: 5px 14px 8px;
  text-align: center;
  font: 500 clamp(1.3rem, 3.7vw, 1.72rem) / 1.3 'Cormorant Garamond', serif !important;
}

.invitation .hero .personal::before,
.invitation .hero .personal::after {
  content: none !important;
}

.invitation .hero .personal strong {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  font: 400 clamp(1.9rem, 5.8vw, 2.5rem) / 1.08 'Allura', 'Great Vibes', cursive !important;
}

.royal-message h1,
.invitation .hero h1 {
  display: grid;
  grid-template-rows: max-content max-content max-content;
  justify-items: center;
  row-gap: 8px;
  line-height: .84 !important;
}

.royal-message h1 {
  margin: 9px 0 8px !important;
  font-size: clamp(4.2rem, 12.2vw, 6.5rem) !important;
}

.invitation .hero h1 {
  margin: 20px 0 20px !important;
  font-size: clamp(4.65rem, 15.4vw, 7.7rem) !important;
}

.royal-message h1 span,
.invitation .hero h1 span {
  display: block;
  transform: none !important;
  line-height: .84;
}

.royal-message h1 i,
.invitation .hero h1 i {
  display: block;
  margin: 0 !important;
  font: italic 500 .25em / 1 'Cormorant Garamond', serif !important;
  transform: none !important;
}

.auth-card h1 {
  gap: .18em;
  font-size: clamp(3.2rem, 8.7vw, 4.9rem) !important;
  line-height: .92 !important;
}

/* Keep meal choices clean and flat, including their selected state. */
.meal-options label,
.meal-options input:checked + label {
  box-shadow: none !important;
}

@media (max-width: 620px) {
  .royal-message h1 {
    row-gap: 7px;
    font-size: clamp(3.85rem, 14vw, 5rem) !important;
  }

  .invitation .hero .personal {
    max-width: calc(100% - 34px);
    margin-bottom: 17px !important;
    padding: 5px 12px 8px;
  }

  .invitation .hero .personal strong {
    font-size: clamp(1.78rem, 7.3vw, 2.32rem) !important;
  }

  .invitation .hero h1 {
    row-gap: 7px;
    font-size: clamp(4.15rem, 15.8vw, 5.25rem) !important;
  }
}