/* Form thank-you — the message arrives as a postcard (rebuilt 2026-09-29).
   An airmail-edged card slides in and settles on the hills; its stamp (the village mailbox) lands
   and the postmark inks over it, which is the "saved" moment. What happens next is written on the
   card itself. No sponsor block or community grid here by design. Scoped to body.p-thanks. */

.p-thanks main { overflow-x: clip; }
.p-thanks .th-open h1 { font-size: clamp(34px, 4.4vw, 56px); max-width: 15em; }
.p-thanks .th-open .lede { color: var(--navy); font-size: clamp(18px, 1.6vw, 20.5px); max-width: 32em; }
.p-thanks .th-note-band { position: relative; z-index: 2; margin-top: clamp(-120px, -8vw, -48px); padding-bottom: clamp(56px, 8vw, 110px); }

.p-thanks .th-card { position: relative; max-width: 760px; margin: 0 auto; padding: clamp(30px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(26px, 3.4vw, 40px); border-radius: 10px; rotate: -.8deg;
  background: var(--paper);
  box-shadow: 0 1px 1px rgba(60, 40, 10, .08), 0 34px 54px -30px rgba(60, 40, 10, .6); }
.p-thanks .th-card::before { /* airmail edge */ content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; padding: 9px;
  background: repeating-linear-gradient(-45deg, var(--brick) 0 14px, var(--paper) 14px 22px, var(--blue-ink) 22px 36px, var(--paper) 36px 44px);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .85; }
.p-thanks .th-card-copy { padding-right: clamp(96px, 16vw, 150px); }
.p-thanks .th-card h2 { margin: 0 0 10px; font-size: clamp(28px, 3vw, 38px); }
.p-thanks .th-card p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--text); max-width: 28em; }
.p-thanks .th-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1.5px dashed rgba(122, 91, 19, .3); }
.p-thanks .th-actions .btn { min-height: 50px; }
.p-thanks .th-urgent { border-color: var(--brick-ink); color: var(--brick-ink); }
.p-thanks .th-urgent:hover { color: var(--brick-ink); background: var(--brick-soft); }

/* the stamp and its postmark */
.p-thanks .th-stamp { position: absolute; top: clamp(24px, 3vw, 34px); right: clamp(22px, 3vw, 40px); display: grid; place-items: center; width: clamp(82px, 12vw, 108px); aspect-ratio: 4 / 5; padding: 8px; rotate: 4deg;
  background: radial-gradient(circle, transparent 0 4px, var(--gold-soft) 4.5px) -7px -7px / 14px 14px; filter: drop-shadow(0 4px 5px rgba(60, 40, 10, .25)); }
.p-thanks .th-stamp::before { content: ""; position: absolute; inset: 7px; background: #fbf7ea; border: 1.5px solid rgba(122, 91, 19, .35); }
.p-thanks .th-stamp img { position: relative; width: 100%; height: auto; mix-blend-mode: multiply; }
.p-thanks .th-postmark { position: absolute; top: clamp(38px, 4.4vw, 52px); right: clamp(80px, 12vw, 108px); width: 86px; height: 86px; z-index: 1; border-radius: 50%; pointer-events: none; rotate: -14deg;
  border: 2.5px solid rgba(60, 83, 120, .6); box-shadow: inset 0 0 0 7px transparent, inset 0 0 0 9px rgba(60, 83, 120, .45); }
.p-thanks .th-postmark::after { /* cancellation waves */ content: ""; position: absolute; left: 70px; top: 26px; width: 90px; height: 34px;
  background: radial-gradient(12px 6px at 50% 0, transparent 9px, rgba(60, 83, 120, .5) 9.5px 11.5px, transparent 12px) 0 0 / 22px 11px repeat-x;
  -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent); }
@media (max-width: 520px) {
  .p-thanks .th-card-copy { padding-right: 0; padding-top: 92px; }
  .p-thanks .th-stamp { left: 22px; right: auto; }
  .p-thanks .th-postmark { left: 64px; right: auto; top: 44px; }
  .p-thanks .th-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- meaningful movement ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* the card arrives, the stamp lands on it, then the postmark says it's in */
  @keyframes th-arrive { 0% { opacity: 0; transform: translate(60px, -30px) rotate(6deg); } 70% { opacity: 1; transform: translate(-4px, 2px) rotate(-1deg); } 100% { opacity: 1; transform: none; } }
  @keyframes th-stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-12deg); } 60% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
  @keyframes th-ink { 0% { opacity: 0; transform: scale(1.15); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  .p-thanks .th-card { animation: th-arrive .9s .15s var(--ease) both; }
  .p-thanks .th-stamp { animation: th-stamp .5s .95s var(--spring) both; }
  .p-thanks .th-postmark { animation: th-ink .35s 1.4s ease-out both; }
}
@media print { .p-thanks .th-card::before, .p-thanks .th-postmark { display: none; } }