.story-letter-v2 {
  --brown: #352e28;
  --paper: #f3eadc;
  --paper-light: #f7f0e5;
  --paper-shadow: #cdbda9;
  --ink: #3d342d;
  --gold: #bd9651;
  --serif: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --typewriter: "Courier Prime", "Courier New", Courier, monospace;
  --sans: Avenir, "Avenir Next", Arial, sans-serif;
}

.story-letter-v2,
.story-letter-v2 * { box-sizing: border-box; }

.story-letter-v2 {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  padding: 3.8rem 1.5rem 5rem;
  color: var(--paper-light);
  background:
    linear-gradient(rgba(53,46,40,.42), rgba(53,46,40,.42)),
    url("assets/optimized/loom-linen-texture.webp") center / cover;
  transition: min-height .7s ease;
}

.letter-intro {
  position: absolute;
  z-index: 10;
  inset: 5rem 0 auto;
  display: grid;
  justify-items: center;
  transition: opacity .35s ease, transform .5s ease;
}

.letter-intro p {
  margin: 0;
  color: var(--gold);
  font: 700 .72rem/1 var(--sans);
  letter-spacing: .23em;
}

.letter-trigger {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 43%;
  width: min(42rem, 84vw);
  aspect-ratio: 1.48;
  transform: translate(-50%, -43%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity .35s ease, transform .5s ease;
}

.letter-trigger:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: .65rem;
  border-radius: .2rem;
}

.letter-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1300px;
  transform-style: preserve-3d;
}

.envelope {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 43%;
  width: min(39rem, 78vw);
  aspect-ratio: 1.55;
  transform: translate(-50%, -43%);
  filter: drop-shadow(0 2.2rem 2.6rem rgba(10,7,5,.28));
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}

.story-letter-v2:not(.is-opening):has(.letter-trigger:hover) .envelope,
.story-letter-v2:not(.is-opening):has(.letter-trigger:focus-visible) .envelope {
  transform: translate(-50%, -43%) scale(1.012);
  filter: drop-shadow(0 2.5rem 3rem rgba(10,7,5,.34));
}

.envelope__back {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(160deg, var(--paper-light), #d9cab8);
  border: 1px solid rgba(91,74,59,.18);
}

.envelope__flap {
  position: absolute;
  z-index: 7;
  inset: 0 0 auto;
  height: 71%;
  display: grid;
  place-items: center;
  padding-bottom: 17%;
  color: rgba(75,61,49,.58);
  background:
    linear-gradient(155deg, rgba(255,255,255,.2), transparent 40%),
    linear-gradient(165deg, var(--paper-light), #d9c9b5);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  backface-visibility: visible;
  transform-style: preserve-3d;
}

.envelope__logo {
  position: absolute;
  left: 50%;
  top: 36%;
  width: auto;
  height: clamp(3.8rem, 7vw, 5.3rem);
  opacity: .72;
  backface-visibility: hidden;
}
.envelope__logo--front {
  transform: translate(-50%, -50%);
}
.envelope__logo--back {
  transform: translate(-50%, -50%) rotateX(180deg);
}

.envelope__front {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
}

.envelope__left,
.envelope__right,
.envelope__bottom {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(91,74,59,.12);
}

.envelope__left {
  background: linear-gradient(130deg, #eadfce, #cfbea9);
  clip-path: polygon(0 0, 57% 56%, 0 100%);
}
.envelope__right {
  background: linear-gradient(230deg, #eee4d5, #d1c0ac);
  clip-path: polygon(100% 0, 43% 56%, 100% 100%);
}
.envelope__bottom {
  background: linear-gradient(0deg, #d5c5b1, #eee3d3);
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}

.live-letter {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 7rem;
  width: min(52rem, calc(100vw - 3rem));
  padding: clamp(3.8rem, 7vw, 5.8rem) clamp(2.8rem, 7vw, 6rem) clamp(4.5rem, 8vw, 6.8rem);
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 9%, rgba(255,255,255,.5), transparent 30%),
    repeating-linear-gradient(0deg, rgba(74,57,43,.018) 0 1px, transparent 1px 4px),
    linear-gradient(110deg, #f8f2e8, #f2e9dc 62%, #eee3d4);
  border: 1px solid rgba(91,74,59,.13);
  border-radius: .15rem 1.15rem 1.35rem .1rem;
  clip-path: polygon(
    1.2% 0, 100% .25%, 100% 98.6%, 99.1% 100%,
    1.1% 99.8%, .75% 96.5%, 1.15% 93%, .55% 89%,
    1.05% 85%, .7% 80.5%, 1.2% 76%, .55% 71.5%,
    1.05% 67%, .65% 62%, 1.15% 57.5%, .5% 53%,
    1.05% 48%, .7% 43.5%, 1.2% 39%, .55% 34.5%,
    1.05% 29.5%, .7% 25%, 1.15% 20.5%, .55% 16%,
    1.05% 11.5%, .7% 7%, 1.2% 3.5%
  );
  filter: drop-shadow(0 2.8rem 3.2rem rgba(10,7,5,.32));
  font: 400 clamp(.98rem, 1.15vw, 1.08rem)/1.82 var(--typewriter);
  letter-spacing: -.018em;
  opacity: 0;
  transform: translate3d(-50%, 2rem, 0) scale(.985);
  transform-origin: 50% 0;
}

.live-letter p { margin: 0 0 1.85em; }
.live-letter:focus { outline: none; }
.live-letter__salutation {
  font-size: 1.04em;
  font-style: normal;
  letter-spacing: .01em;
}
.live-letter__closing {
  display: grid;
  width: 100%;
  gap: 1.1rem;
  margin-top: clamp(2.8rem, 6vw, 4.8rem);
}
.live-letter__signoff {
  justify-self: start;
  margin: 0 !important;
  font: inherit;
  letter-spacing: inherit;
}
.live-letter__closing-art {
  display: block;
  justify-self: end;
  width: clamp(13rem, 48%, 19rem);
  height: auto;
  margin: -.4rem -1.3rem -1.25rem 0;
  transform: rotate(-1.25deg);
}

.story-letter-v2.is-opening .letter-intro {
  opacity: 0;
  transform: translateY(-1rem);
  pointer-events: none;
}

.story-letter-v2.is-opening .letter-trigger {
  opacity: 0;
  transform: translate(-50%, -40%);
  pointer-events: none;
}

.story-letter-v2.is-opening .envelope__flap {
  animation: open-flap .68s cubic-bezier(.45,.05,.18,1) forwards;
}

.story-letter-v2.is-opening .envelope {
  animation: fade-envelope .38s .68s ease forwards;
}

.story-letter-v2.is-opening .live-letter {
  animation: reveal-letter .62s 1.07s cubic-bezier(.2,.75,.2,1) forwards;
}

.story-letter-v2.is-reading {
  min-height: 122rem;
  overflow: visible;
}

@keyframes open-flap {
  0% { z-index: 7; transform: rotateX(0deg); filter: brightness(1); }
  49% { z-index: 7; }
  50% { z-index: 3; }
  100% { z-index: 3; transform: rotateX(180deg); filter: brightness(.9); }
}

@keyframes fade-envelope {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes reveal-letter {
  from { opacity: 0; transform: translate3d(-50%, 2rem, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
}

@media (max-width: 640px) {
  .story-letter-v2 { padding-inline: 1rem; }
  .letter-intro { padding-top: .5rem; }
  .letter-intro { top: 3rem; }
  .letter-trigger { width: 94vw; }
  .envelope { width: 90vw; }
  .live-letter {
    top: 1rem;
    width: calc(100vw - 2rem);
    padding: 3.4rem 2rem 4.2rem 2.25rem;
    border-radius: .1rem .8rem 1rem .1rem;
    font-size: .93rem;
    line-height: 1.75;
    letter-spacing: -.025em;
  }
  .live-letter__closing-art {
    width: min(15rem, 70%);
    margin-right: -.55rem;
  }
  .story-letter-v2.is-reading { min-height: 170rem; }
}

@media (prefers-reduced-motion: reduce) {
  .story-letter-v2.is-opening { min-height: 105rem; overflow: visible; }
  .story-letter-v2.is-opening .letter-intro,
  .story-letter-v2.is-opening .letter-trigger,
  .story-letter-v2.is-opening .envelope { display: none; }
  .story-letter-v2.is-opening .live-letter {
    animation: none;
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}