/* Keep the stationery artwork, with readable type and touch targets on phones. */
.families p .parent-name { display: block; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.parent-break { display: none; }
@media (max-width: 760px) {
  .invitation { margin-inline: 12px; padding: 54px 24px 26px; }
  .bismillah { width: 245px; min-height: 0; margin: 0 auto 6px; }
  .prayer-art { width: 100%; max-width: 420px; }
  .prayer-art img { aspect-ratio: 2086 / 754; height: auto; object-fit: contain; }
  .invitation .ornament { margin: 10px auto 2px; }
  .monogram.monogram-art { width: 240px; margin: 0 auto 8px; }
  .invitation-content, .location-copy, .form-card, fieldset { min-width: 0; }
  /* Couple and parents use identical column centers, including the ampersand. */
  h1, .families { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); column-gap: 6px; width: 100%; max-width: 580px; margin-inline: auto; }
  h1 { font-size: clamp(26px, 7.5vw, 34px); letter-spacing: .07em; }
  h1 > * { justify-self: center; min-width: 0; }
  .families { letter-spacing: .01em; line-height: 1.8; margin-top: 10px; margin-bottom: 16px; align-items: start; }
  .families > span { align-self: center; }
  .families p { font-size: clamp(11px, 2.85vw, 13px); }
  .invitation-copy { font-size: clamp(23px, 6vw, 28px); line-height: 1.4; margin: 16px 0 18px; }
  .date { padding: 16px 0; margin: 18px auto; gap: 8px; }
  .date strong { font-size: clamp(28px, 7.8vw, 36px); }
  .date span { font-size: 10px; letter-spacing: .12em; }
  .discover { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; font-size: 12px; margin-top: 12px; }
  .location { padding: 24px 24px 40px; gap: 36px; }
  .location-photo img { height: auto; aspect-ratio: 4 / 5; }
  .location-photo > span { padding-inline: 5px; font-size: 22px; line-height: 1.3; }
  .location-copy { padding: 0; }
  .location-copy h2 { font-size: clamp(33px, 8.8vw, 42px); line-height: 1.15; }
  .eyebrow { font-size: 11px; letter-spacing: .15em; }
  .location-copy > p:not(.eyebrow), .venue p, .clothing > p:not(.eyebrow) { font-size: 15px; line-height: 1.85; }
  .clothing { padding: 20px 28px 60px; }
  .clothing h2 { font-size: clamp(32px, 8.5vw, 39px); line-height: 1.15; }
  .rsvp { margin: 0 12px 48px; padding: 32px 14px 22px; gap: 24px; }
  .rsvp h2 { font-size: clamp(42px, 11vw, 52px); }
  .form-card { padding: 24px 20px; width: 100%; }
  .preview-note { font-size: 12px; line-height: 1.6; align-items: flex-start; gap: 8px; margin-bottom: 22px; }
  .preview-note > span { flex: 0 0 5px; margin-top: 7px; }
  form > label, #count-group > label, legend { font-size: 14px; line-height: 1.55; }
  input[type=text], .stepper input { font-size: 16px; }
  input[type=text] { min-height: 50px; }
  .choices { grid-template-columns: 1fr; gap: 10px; }
  .choice { min-height: 52px; padding: 12px 14px; font-size: 14px; gap: 10px; }
  input[type=radio] { width: 18px; height: 18px; flex: 0 0 18px; }
  .field-help, .form-note { font-size: 12px; line-height: 1.7; }
  .stepper { height: 50px; }
  .stepper button { width: 50px; font-size: 24px; touch-action: manipulation; }
  .stepper input { width: 62px; }
  .button, .text-link { font-size: 13px; min-height: 54px; padding: 14px 10px; gap: 5px; letter-spacing: .01em; }
  .location .text-link { min-width: 220px; }
  #confirmation h3 { font-size: 32px; }
  #confirmation p { overflow-wrap: anywhere; }
  footer { margin-top: 50px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  footer > span { font-size: 10px; letter-spacing: .12em; }
  footer small { margin-top: 18px; font-size: 12px; }
  footer small a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 480px) {
  .families p { font-size: 12px; line-height: 1.5; letter-spacing: .025em; }
  .families p .parent-name + .parent-name { margin-top: 9px; }
  .parent-break { display: initial; }
}
@media (max-width: 360px) {
  .invitation { margin-inline: 8px; padding-inline: 22px; }
  h1, .families { grid-template-columns: minmax(0, 1fr) 21px minmax(0, 1fr); column-gap: 4px; }
  .families p { font-size: 12px; }
  .families span { font-size: 15px; }
  .invitation-copy br { display: none; }
  .rsvp { margin-inline: 8px; padding-inline: 12px; }
  .form-card { padding-inline: 16px; }
  .button, .text-link { font-size: 12px; }
  .clothing { padding-inline: 24px; }
}