/*
 * Postcards — the picker at /postcards/ and the card a friend opens at /p/<token>.
 *
 * Both surfaces borrow the storefront's tokens rather than defining colours, so
 * the pages stay in step with the rest of the site. The one deliberate
 * departure is the note itself: a handwritten-feeling serif at a size nobody
 * uses for UI, because the message is the product here and everything around it
 * is packaging.
 */

.tt-postcards,
.tt-postcard-view {
  width: min(100% - 40px, 1080px);
  margin: 0 auto;
  padding: 48px 0 80px;
}

/* ---------------------------------------------------------------- picker */

.tt-postcards__intro { max-width: 620px; margin-bottom: 40px; }
.tt-postcards__kicker {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tt-muted, #6B6A63);
}
.tt-postcards__intro h1 {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
  margin: 0 0 12px;
  color: var(--tt-pine);
}
.tt-postcards__lede { margin: 0; font-size: 16px; line-height: 1.6; }

.tt-postcards__designs { border: 0; padding: 0; margin: 0 0 36px; }
.tt-postcards__designs legend {
  padding: 0;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tt-muted, #6B6A63);
}

/* auto-fill rather than a fixed count: ten tiles reflow from five across to two
   without a media query per breakpoint. */
.tt-postcards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.tt-postcard-tile {
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 14px;
}
/* The radio stays in the accessibility tree and keeps keyboard selection; only
   its box is hidden. */
.tt-postcard-tile input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tt-postcard-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--tt-line);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tt-postcard-tile__name {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--tt-muted, #6B6A63);
}
.tt-postcard-tile:hover img { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .45); }
.tt-postcard-tile.is-selected img { outline: 3px solid var(--tt-clay); outline-offset: 2px; }
.tt-postcard-tile.is-selected .tt-postcard-tile__name { color: var(--tt-ink); font-weight: 600; }
.tt-postcard-tile input:focus-visible + img { outline: 3px solid var(--tt-pine); outline-offset: 2px; }

.tt-postcards__compose { max-width: 620px; }
.tt-field { display: block; margin-bottom: 18px; }
.tt-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tt-ink);
}
.tt-field > span em { font-weight: 400; font-style: normal; color: var(--tt-muted, #6B6A63); }
.tt-field input,
.tt-field textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--tt-ink);
  background: #fff;
  border: 1px solid var(--tt-line);
  border-radius: 10px;
}
.tt-field textarea { resize: vertical; min-height: 84px; }
.tt-field input:focus,
.tt-field textarea:focus { outline: 2px solid var(--tt-pine); outline-offset: 1px; border-color: transparent; }
.tt-field__count { display: block; margin-top: 5px; font-size: 12px; color: var(--tt-muted, #6B6A63); }

.tt-postcards__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .tt-postcards__row { grid-template-columns: 1fr; } }

.tt-postcards__submit {
  display: inline-block;
  padding: 13px 30px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--tt-cream);
  background: var(--tt-pine);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.tt-postcards__submit:hover { background: #23331f; color: var(--tt-cream); }
.tt-postcards__submit[disabled] { opacity: .55; cursor: default; }

.tt-postcards__status { margin: 12px 0 0; font-size: 14px; color: var(--tt-muted, #6B6A63); min-height: 1.4em; }
.tt-postcards__status.is-error { color: var(--tt-clay-dark); }

.tt-postcards__result {
  margin-top: 22px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--tt-line);
  border-radius: 14px;
}
.tt-postcards__result-title { margin: 0 0 12px; font-weight: 600; }
.tt-postcards__link { display: flex; gap: 8px; }
.tt-postcards__link input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--tt-line);
  border-radius: 10px;
  background: var(--tt-cream);
}
.tt-postcards__link button {
  flex: 0 0 auto;
  padding: 10px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tt-cream);
  background: var(--tt-clay);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.tt-postcards__link button:hover { background: var(--tt-clay-dark); }
.tt-postcards__alt { margin: 12px 0 0; font-size: 14px; color: var(--tt-muted, #6B6A63); }
.tt-postcards__alt a { color: var(--tt-clay); }
.tt-postcards__alt span { margin: 0 6px; }
.tt-postcards__preview { color: var(--tt-clay); }

/* --------------------------------------------------------------- landing */

.tt-postcard-view { max-width: 720px; }
.tt-postcard-view__art { margin: 0 0 -46px; }
.tt-postcard-view__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* The note overlaps the photograph the way a card tucks into its envelope. */
.tt-postcard-view__note {
  position: relative;
  width: min(100% - 40px, 560px);
  margin: 0 auto;
  padding: 30px 32px;
  background: #fff;
  border: 1px solid var(--tt-line);
  border-radius: 16px;
  box-shadow: 0 26px 50px -34px rgba(0, 0, 0, .5);
}
.tt-postcard-view__to,
.tt-postcard-view__message,
.tt-postcard-view__from {
  font-family: var(--font-display, Georgia, serif);
  color: var(--tt-ink);
}
.tt-postcard-view__to { margin: 0 0 8px; font-size: 18px; }
.tt-postcard-view__message {
  margin: 0;
  font-size: clamp(20px, 3.4vw, 26px);
  line-height: 1.42;
  font-style: italic;
  /* A handwritten line breaks where the writer breathed, not where the box
     ends — but it must never spill out of the card on a narrow phone. */
  overflow-wrap: break-word;
}
.tt-postcard-view__trip {
  margin: 16px 0 0;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tt-muted, #6B6A63);
}
.tt-postcard-view__from { margin: 18px 0 0; font-size: 16px; color: var(--tt-clay-dark); }

.tt-postcard-view__actions { margin: 32px auto 0; text-align: center; }
/*
 * This is the loudest thing on the page, deliberately. Saying yes is the whole
 * point of a postcard; the discount below it is preparation for a trip that has
 * already been agreed to. Given equal weight the two read as a choice between
 * an emotion and a coupon, and the coupon wins — which turns the invitation
 * into an advert with a nice photograph.
 */
.tt-postcard-view__rsvp {
  min-width: 240px;
  padding: 18px 44px;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tt-cream);
  background: var(--tt-clay);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 14px 28px -16px rgba(169, 93, 56, .9);
}
.tt-postcard-view__rsvp:hover { background: var(--tt-clay-dark); }
.tt-postcard-view__rsvp.is-done,
.tt-postcard-view__rsvp[disabled] {
  background: var(--tt-sand);
  color: var(--tt-ink);
  cursor: default;
  box-shadow: none;
}
.tt-postcard-view__status { margin: 10px 0 0; font-size: 14px; color: var(--tt-muted, #6B6A63); min-height: 1.4em; }
.tt-postcard-view__status.is-error { color: var(--tt-clay-dark); }

/* The offer sits after the answer, and reads as preparation for the trip
   rather than the reason the card was sent. */
.tt-postcard-view__offer {
  margin-top: 44px;
  padding: 28px 30px;
  text-align: center;
  background: var(--tt-sand);
  border-radius: 16px;
}
.tt-postcard-view__offer h2 {
  margin: 0 0 8px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 24px;
  color: var(--tt-pine);
}
.tt-postcard-view__offer p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; }

.tt-postcard-view--gone { text-align: center; padding-top: 80px; }
.tt-postcard-view--gone h1 {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(26px, 4vw, 34px);
  color: var(--tt-pine);
  margin: 0 0 10px;
}
.tt-postcard-view--gone p { margin: 0 0 22px; color: var(--tt-muted, #6B6A63); }