.story-invitations {
  margin: 0 0 58px;
  padding: clamp(24px, 4vw, 52px);
  color: #202019;
  border: 2px solid #202019;
  background: #f5dc65;
  box-shadow: 7px 7px 0 #202019;
}
.invitation-kicker { margin: 0 0 24px; font: 750 0.72rem/1.4 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.story-invitations h2 { max-width: 1050px; margin: 0; font-size: clamp(2rem, 4.2vw, 4rem); letter-spacing: -.055em; line-height: 1.03; text-wrap: pretty; }
.invitation-intro { max-width: 650px; margin: 24px 0 28px; font-size: 1rem; line-height: 1.5; }
.invitation-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.invitation-choice { display: grid; grid-template-columns: 1fr auto; gap: 22px 12px; align-content: space-between; min-height: 190px; padding: 20px; border: 1px solid #202019; border-radius: 0; color: inherit; background: #fffdf7; text-align: left; font-family: inherit; font-weight: 700; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.invitation-choice > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-family: inherit; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 750; line-height: 1.25; }
.invitation-number { font: 750 .8rem/1 ui-monospace, monospace; }
.invitation-arrow { grid-column: 2; grid-row: 1; font-size: 1.6rem; line-height: .7; }
.invitation-choice:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 #202019; }
.invitation-choice:disabled { opacity: .6; cursor: wait; }
.story-invitations :is(button, a):focus-visible { outline: 3px solid #a32723; outline-offset: 5px; }
.invitation-footer { display: flex; gap: 16px 28px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-top: 22px; }
.invitation-footer p { flex: 1 1 320px; margin: 0; font-size: .85rem; line-height: 1.5; }
.invitation-footer a, .invitation-receipt { font-size: .85rem; font-weight: 800; text-underline-offset: 4px; }
.invitation-selected { grid-column: 1 / -1; margin: 0; padding: 22px; border-left: 4px solid #202019; background: #fffdf7; font-size: 1.25rem; line-height: 1.4; }
.invitation-receipt { display: inline-block; margin-top: 22px; }
.invitation-receipt[hidden] { display: none; }
@media (max-width: 680px) {
  .story-invitations { padding: 24px 18px; margin-bottom: 38px; box-shadow: 4px 4px 0 #202019; }
  .invitation-choices { grid-template-columns: 1fr; }
  .invitation-choice { min-height: 124px; gap: 14px; padding: 17px; }
  .invitation-kicker { font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .invitation-choice { transition: none; } }