/* ---------- letters ---------- */
.card.letter-card { width: min(560px, 100%); background: transparent; box-shadow: none; padding: 0; overflow: visible; text-align: left; }
.card.letter-card .close-x { top: 6px; right: 6px; z-index: 5; }
.mail-stage { position: relative; min-height: 360px; display: grid; place-items: center; }
.mail-stage > * { grid-area: 1 / 1; }
.mail-stage.open .envelope { visibility: hidden; transition: transform 0.55s cubic-bezier(.5,0,.3,1), opacity 0.45s, visibility 0s 0.55s; }

/* The envelope */
.envelope {
  position: relative; width: min(460px, 92vw); aspect-ratio: 1.6; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(160deg, #fbf1df, #f3e2c8); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(94, 70, 63, 0.35), inset 0 0 0 1px rgba(150, 110, 70, 0.15);
  transition: transform 0.55s cubic-bezier(.5,0,.3,1), opacity 0.45s;
  animation: env-in 0.55s cubic-bezier(.2,1.3,.4,1);
}
.env-flap {
  position: absolute; inset: 0 0 38% 0; background: linear-gradient(180deg, #f6e7cf, #ecd8b9);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform 0.45s;
  filter: drop-shadow(0 2px 2px rgba(120, 80, 40, 0.18));
}
.env-to { position: absolute; left: 9%; bottom: 7%; text-align: left; font: 700 22px/1.1 "Caveat", cursive; color: #5b4637; }
.env-to small { font-size: 17px; color: #8a6f66; }
.env-from { position: absolute; left: 6%; top: 8%; font: 700 15px "Caveat", cursive; color: #8a6f66; }
.seal {
  position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--tint) 70%, white), var(--tint) 55%, color-mix(in srgb, var(--tint) 70%, black));
  color: rgba(255, 255, 255, 0.92); font: 700 26px "Fraunces", serif; text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  box-shadow: 0 3px 6px rgba(0,0,0,.25), inset 0 0 0 4px rgba(255,255,255,.12);
  clip-path: polygon(50% 0%, 61% 5%, 72% 3%, 79% 12%, 90% 15%, 92% 27%, 99% 36%, 96% 48%, 100% 59%, 93% 68%, 92% 80%, 81% 84%, 74% 95%, 62% 94%, 50% 100%, 38% 94%, 26% 95%, 19% 84%, 8% 80%, 7% 68%, 0% 59%, 4% 48%, 1% 36%, 8% 27%, 10% 15%, 21% 12%, 28% 3%, 39% 5%);
}
.env-hint { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); white-space: nowrap; }

/* Stamp with the sender's portrait */
/* Perforated edge: a dotted paper frame with the portrait laid over its middle. */
.stamp {
  position: absolute; right: 6%; top: 9%; width: 70px; height: 84px; padding: 6px; transform: rotate(5deg);
  background: radial-gradient(circle at 4.5px 4.5px, transparent 3px, #fffdf8 3.6px) -4.5px -4.5px / 9px 9px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
.stamp > * { position: relative; width: 100%; height: 100%; display: block; object-fit: cover; background: color-mix(in srgb, var(--tint) 22%, #fff7ec); outline: 2px solid var(--tint); outline-offset: -2px; }
.stamp.small { position: relative; right: auto; top: auto; flex: none; width: 46px; height: 54px; padding: 4px; transform: rotate(-3deg); }

/* Opening: the envelope drops away, the letter unfolds */
.letter-paper {
  position: relative; width: min(500px, 94vw); max-height: calc(100dvh - 60px); overflow: auto; overscroll-behavior: contain;
  padding: 64px 48px 44px 58px; color: #4b3a35;
  background: #fbf3e4 url(img/stationery.webp) center / 100% 100% no-repeat;
  box-shadow: 0 20px 50px rgba(94, 70, 63, 0.35);
  opacity: 0; transform: translateY(40px) scaleY(0.35) rotate(-1deg); transform-origin: 50% 0;
  pointer-events: none; transition: transform 0.6s cubic-bezier(.2,1.2,.4,1) 0.15s, opacity 0.3s 0.15s;
}
.mail-stage.open .envelope { transform: translateY(120px) scale(0.85) rotate(4deg); opacity: 0; pointer-events: none; }
.mail-stage.open .env-flap { transform: rotateX(180deg); }
.mail-stage.open .letter-paper { opacity: 1; transform: none; pointer-events: auto; }
.lt-corner { position: relative; float: right; width: 110px; height: 96px; margin: -36px -20px 0 8px; }
.lt-corner .stamp { right: 4px; top: 0; }
.postmark { position: absolute; left: -26px; top: 26px; width: 84px; height: 84px; color: color-mix(in srgb, var(--tint) 75%, #3a2a30); opacity: 0.55; transform: rotate(-14deg); overflow: visible; }
.lt-subject { margin: 0 0 10px; font: 800 12px "Nunito", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #a08575; }
.lt-greet { margin: 0 0 6px; font: 700 31px/1.1 "Caveat", cursive; }
.lt-body p { margin: 0 0 10px; font: 600 23px/1.32 "Caveat", cursive; }
.lt-sign { clear: both; margin: 4px 0 6px; text-align: right; font: 700 26px/1.15 "Caveat", cursive; color: color-mix(in srgb, var(--tint) 55%, #4b3a35); }
.letter-paper .gift-box { position: relative; margin: 14px 0 4px; padding: 10px 14px 10px 18px; background: #fff6dc; border-radius: 6px 14px 14px 6px; box-shadow: 0 3px 8px rgba(0,0,0,.12); transform: rotate(-1deg); font-weight: 700; }
.letter-paper .gift-box::before { content: ""; position: absolute; left: -8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fbf3e4; box-shadow: inset 0 0 0 2px #d8c39a; }
.letter-paper .btn-row { margin-top: 6px; }

/* Letterbox list: little envelopes */
.mail-item { position: relative; background: linear-gradient(160deg, #fffaf0, #f7ead5); border-left: 6px solid var(--tint); }
.mail-item.unread { border-color: var(--tint); background: linear-gradient(160deg, #fffaf0, #fbe7e9); }
.seal.small { position: relative; left: auto; top: auto; transform: none; width: 30px; height: 30px; font-size: 14px; margin-left: auto; flex: none; }

@keyframes env-in { from { transform: translateY(-60px) rotate(-6deg); opacity: 0; } }
@media (max-width: 520px) {
  .letter-paper { padding: 54px 26px 36px 34px; }
  .lt-body p { font-size: 21px; }
  .env-to { font-size: 20px; }
}
.stamp .critter-img { border-radius: 0 !important; width: 100% !important; height: 100% !important; }