.invitation[hidden], .invitation [hidden] { display: none !important; }
.invitation {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr);
  gap: 2.5rem;
  margin-top: 7rem;
  margin-bottom: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid #d8c8f5;
  border-radius: 1rem;
  background: #f6f1ff;
  color: #242033;
  scroll-margin-top: 6rem;
}
.invitation h2 { font-family: var(--serif); font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.3; margin: .75rem 0 1rem; }
.invitation p, .invitation li { font-size: 1rem; line-height: 1.8; }
.invitation ol { padding-left: 1.3rem; margin: 1rem 0; }
.invitation p.invitation-note { font-size: .875rem; color: #655d74; }
.invitation-actions { display: flex; flex-direction: column; gap: .8rem; justify-content: center; min-width: 0; }
.invitation-actions label { font-size: .875rem; }
.invitation-actions input { width: 100%; min-width: 0; border: 1px solid #b9a8d5; border-radius: .5rem; background: #fff; padding: .8rem; color: #432878; font: 600 1.05rem ui-monospace, monospace; letter-spacing: .06em; }
.invitation-actions .btn { min-height: 44px; justify-content: center; }
.invitation-actions [role=status] { min-height: 2.8rem; font-size: .875rem; color: #514164; }
@media (max-width: 720px) { .invitation { grid-template-columns: 1fr; gap: 1rem; margin-top: 5.5rem; } }