/* The first page is a kept postcard, with a little beach stamp and loose flowers. */
.letter-wrap {
  position: relative;
  width: min(620px, calc(100% - 40px));
}
.letter-wrap .envelope-card {
  width: 100%;
  padding-top: clamp(124px, 12vw, 145px);
  padding-bottom: clamp(44px, 6vw, 64px);
}
.letter-wrap .envelope-card h1,
.letter-wrap .envelope-card .card-name,
.letter-wrap .envelope-card .button { position: relative; z-index: 2; }
.letter-wrap .envelope-card h1 { margin-top: 0; font-size: clamp(3.2rem, 7vw, 5.6rem); }
.letter-stamp {
  position: absolute;
  top: 24px;
  right: 31px;
  width: 100px;
  height: 104px;
  padding: 5px;
  border: 2px dashed #d4b693;
  background: #f8ecd7;
  box-shadow: 1px 2px 0 rgba(81, 66, 47, .16);
  transform: rotate(8deg);
}
.letter-stamp img { width: 100%; height: 100%; object-fit: cover; object-position: 8% 45%; }
.letter-postmark {
  position: absolute;
  z-index: 1;
  top: 58px;
  right: 105px;
  width: 79px;
  height: 79px;
  border: 2px solid rgba(85, 94, 83, .34);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.letter-postmark::after {
  content: "";
  position: absolute;
  top: 25px;
  left: -36px;
  width: 55px;
  height: 25px;
  border-top: 2px solid rgba(85, 94, 83, .32);
  border-bottom: 2px solid rgba(85, 94, 83, .32);
}
.letter-flower {
  position: absolute;
  z-index: 3;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 12px 10px rgba(1, 38, 35, .2));
}
.letter-flower-bottom { width: 295px; right: -105px; bottom: -97px; transform: rotate(13deg); }
.letter-flower-top { width: 195px; left: -98px; top: -79px; clip-path: inset(13% 49% 18% 0); transform: rotate(129deg); }
@media (max-width: 760px) {
  .letter-wrap .envelope-card { padding-top: 124px; padding-bottom: 48px; }
  .letter-stamp { width: 84px; height: 91px; right: 26px; top: 23px; }
  .letter-postmark { width: 67px; height: 67px; right: 85px; top: 58px; }
  .letter-flower-bottom { width: 215px; right: -65px; bottom: -69px; }
  .letter-flower-top { width: 145px; left: -73px; top: -56px; }
}
@media (max-width: 360px) {
  .letter-wrap .envelope-card h1 { font-size: 2.65rem; }
}

/* Readability for Dad (colorblind: reds, blues and purples are hard). Text on the cream cards
   is dark teal, and nothing depends on hue alone. Contrast: teal on cream 10:1, white on the
   deeper coral 5.5:1 (the old pale-yellow eyebrows were 1.2:1). */
.envelope-card .tiny, .personal-card .tiny, .complete .tiny { color: #16454a; font-size: .95rem; letter-spacing: .08em; }
.card-name { color: #16454a; }
.button-coral { background: #b8412f; border-color: #b8412f; color: #ffffff; }
.envelope-wink { margin: -1.2rem 0 1.6rem; color: #16454a; font-size: .95rem; font-style: italic; opacity: .85; }
/* The top flower was a rotated rectangular crop of the bloom cluster, which sliced petals off
   along straight lines. Use the whole cluster, tucked into the corner. */
.letter-flower-top { clip-path: none; width: 190px; left: -70px; top: -84px; transform: rotate(-24deg); }
@media (max-width: 760px) { .letter-flower-top { clip-path: none; width: 150px; left: -52px; top: -66px; transform: rotate(-24deg); } }