@font-face {
  font-family: "La Belle Aurore";
  src: url("/assets/stationery/la-belle-aurore.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.letter-scene {
  --letter-ink: #4f413c;
  --hand: "La Belle Aurore", "Snell Roundhand", cursive;
  color: var(--letter-ink);
  background: radial-gradient(ellipse at 39% 32%, #faf6ee 0%, #f4ede2 56%, #e9dfd1 100%);
}
body:not(.opened) .site-header { color: #594943; }
.letter-heading .eyebrow, .letter-subtitle, .letter-instructions > p { color: #766351; }
.couple-lettering {
  display: block;
  width: min(84vw, clamp(320px, 34vw, 470px));
  height: auto;
  margin-inline: auto;
}
.letter-date {
  margin-top: 17px;
  font: 500 9px/1.6 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #766351;
}
.letter-scene .sound-preference, .letter-bottom { color: #75685c; }
.letter-bottom .tiny-star { color: #a48a67; }

.stationery-stage {
  container-type: inline-size;
  position: relative;
  width: min(550px, 82vw);
  aspect-ratio: 996 / 597;
  flex: none;
  margin: clamp(26px, 4.8svh, 48px) 0 clamp(22px, 3.8svh, 38px);
}
.stationery {
  --flap-art: url("/assets/stationery/sage-flap.webp");
  /* Both pieces share the photograph's top edge; the point sits 491/597 down the body. */
  --flap-depth: 82.245%;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #37392a;
  transform: rotate(-3deg);
  transition: transform .45s ease;
  isolation: isolate;
  text-align: center;
}
.stationery:disabled { opacity: 1; }
@media (hover: hover) {
  .stationery:hover:enabled { transform: translateY(-3px) rotate(-2.6deg); }
}
.stationery:focus-visible { outline: 2px solid #55623f; outline-offset: 9px; }
.mail-back, .mail-pocket, .mail-flap, .flap-front, .flap-lining, .flap-paper {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mail-back {
  z-index: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #536044b8 0%, #6b775773 9%, #9ba48021 49%),
              #a8af8c url("/assets/stationery/sage-paper.webp") center / cover;
  box-shadow: inset 0 1px 1px #d0d1ae, 0 0 0 .65px #878a6e,
              1px 4px 4px -2px #44462f62, 3px 12px 17px -9px #49482f68, 8px 23px 34px -16px #534b3566;
}
.mail-pocket {
  z-index: 3;
  border-radius: 2px;
  clip-path: polygon(0 0, 2% 2.4%, 45% 41%, 48% 43.4%, 50% 44%, 52% 43.4%, 55% 41%, 98% 2.4%, 100% 0, 100% 100%, 0 100%);
  background: #a6ad88 url("/assets/stationery/sage-pocket.webp") center / 100% 100% no-repeat;
}
.mail-flap { z-index: 5; transform-origin: 50% 0; transform-style: preserve-3d; }
.flap-front, .flap-lining { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-front { transform: translateZ(.45px); }
.flap-paper {
  bottom: auto;
  height: var(--flap-depth);
  background: var(--flap-art) top center / 100% 100% no-repeat;
  filter: drop-shadow(.2px 1.2px .65px #565a4070) drop-shadow(.2px 2.7px 1.8px #53593938);
}
.flap-lining { transform: rotateY(180deg); }
.flap-lining::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--flap-depth);
  /* Use the face's actual silhouette, so its reverse meets the same fold. */
  -webkit-mask: var(--flap-art) center / 100% 100% no-repeat;
  mask: var(--flap-art) center / 100% 100% no-repeat;
  background: linear-gradient(180deg, #69725791 0%, #d0cfad40 15%, #f1efd05c 72%),
              #b6bb98 url("/assets/stationery/sage-paper.webp") center / cover;
}
.mail-address {
  position: absolute;
  inset: 4.5% 22% auto;
  height: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  pointer-events: none;
}
.mail-address .eyebrow { font: 600 clamp(6px, 1.38cqw, 9px)/1.3 var(--sans); letter-spacing: .22em; color: #404730; }
.recipient-line {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 64%;
}
.recipient-ink { width: 100%; height: 100%; object-fit: contain; }
.mail-name {
  max-width: 100%;
  font: 400 7.5cqw/1.04 "Blackadder ITC", "BlackadderITC-Regular", var(--hand);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.mail-name.long-name { font-size: 4.8cqw; }
.mail-name.very-long-name { font-size: 3.1cqw; }

.mail-card {
  position: absolute;
  z-index: 2;
  inset: 4.5% 3.4% 5%;
  display: grid;
  grid-template-columns: 60% 40%;
  padding: 2.2%;
  border-radius: 1px;
  background: #faf3e4;
  box-shadow: 0 0 0 .7px #a18a7599, 1px 2px 3px #6c463545;
  pointer-events: none;
  transform-origin: 43% 70%;
}
.postcard-landscape {
  position: relative;
  overflow: hidden;
}
.postcard-landscape svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.postcard-writing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5%;
  margin: 14% 0 14% 7%;
  border-left: 1px solid #c1a98e85;
  color: #58453e;
  font: 4.6cqw/1.25 var(--hand);
  transform: rotate(-1.2deg);
}
.postcard-signature { display: block; margin-top: 12%; font-size: .76em; }

/* One piece of stationery. The flap rotates around the fold; the card stays
   behind the front pocket all the way past its lip. */
body.opening { overflow: hidden; }
.opening .letter-scene { position: fixed; inset: 0; z-index: 10; }
.opening .stationery { animation: lower-envelope 2.85s both; }
.opening .mail-flap { animation: lift-flap 1.32s both, flip-stack 1.32s step-end both; }
.opening .mail-card { animation: draw-postcard 1.94s .69s both; }
.opening .letter-heading, .opening .letter-instructions, .opening .letter-bottom {
  opacity: 0; transition: opacity .5s ease;
}
.letter-scene.leaving { opacity: 0; transition: opacity .81s ease-in-out; pointer-events: none; }
.postcard-arrival .painted-world { animation: none; }
@keyframes lift-flap {
  0%, 10% { transform: perspective(1000px) rotateX(0); }
  63% { transform: perspective(1000px) rotateX(106deg); }
  100% { transform: perspective(1000px) rotateX(169deg); }
}
@keyframes flip-stack {
  0% { z-index: 5; }
  58%, 100% { z-index: 1; }
}
@keyframes lower-envelope {
  0% { transform: translateY(0) rotate(-3deg); }
  8% { transform: translateY(2px) rotate(-3deg); }
  35% { transform: translateY(4%) rotate(-2.6deg); }
  78% { transform: translateY(39%) rotate(-1.5deg); }
  100% { transform: translateY(47%) rotate(-1deg); }
}
@keyframes draw-postcard {
  0%, 8% { transform: translate(0, 0) rotate(0); }
  29% { transform: translate(.2%, -12%) rotate(.35deg); }
  78% { transform: translate(1.5%, -99%) rotate(2.1deg); }
  100% { transform: translate(1.7%, -113%) rotate(1.7deg); }
}
@media (min-width: 701px) and (max-height: 790px) {
  .stationery-stage { width: min(510px, 72svh, 82vw); margin: 30px 0 23px; }
}
@media (max-width: 700px) {
  .stationery-stage { width: min(86vw, 470px); margin: 48px 0 35px; }
}
@media (max-height: 690px) and (max-width: 700px) {
  .stationery-stage { margin: 32px 0 26px; }
}