:root {
  color-scheme: light;
  --backdrop: #eadbd9;
  --paper: #fbf7f0;
  --ink: #443438;
  --muted: #96847f;
  --wine: #905565;
  --rose: #c28e96;
  --line: #e7dcd4;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --hand: "Caveat", "Brush Script MT", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  background-color: var(--backdrop);
  background-image: radial-gradient(ellipse at 8% 18%, rgba(255,255,255,.32), transparent 34%), radial-gradient(ellipse at 93% 76%, rgba(170,112,121,.1), transparent 33%);
}
a { color: inherit; text-decoration: none; }
.topbar {
  height: 80px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #785c60;
}
.monogram { display: flex; align-items: center; gap: 4px; font: 19px var(--serif); color: var(--wine); }
.monogram i { font: 13px var(--hand); color: var(--rose); }
.topbar p { margin: 0; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.topbar p span { color: var(--wine); font-weight: 600; }
.topbar p b { padding-left: 4px; color: var(--rose); font-size: 15px; }
.top-signoff { font: 19px var(--hand); color: var(--wine); transform: rotate(-5deg); }
main { padding: 0 22px 70px; }
.envelope-stage {
  position: relative;
  height: calc(100svh - 80px);
  min-height: calc(100svh - 80px);
  margin: 0 -22px 0;
  padding: 44px 20px 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(ellipse at 50% 74%, rgba(255,255,255,.48), transparent 48%);
  transition: height .75s ease, min-height .75s ease, padding .75s ease, opacity .35s ease;
}
.envelope-stage.is-cleared { height: 0; min-height: 0; padding: 0; opacity: 0; }
.envelope-intro { margin: 0 0 29px; }
.envelope-intro p { margin: 0 0 9px; color: #98777a; font-size: 9px; letter-spacing: .2em; }
.envelope-intro h2 { margin: 0; color: #68464d; font: 500 clamp(31px, 4vw, 43px)/1.15 var(--serif); letter-spacing: -.04em; }
.envelope {
  position: relative;
  display: block;
  width: min(76vw, 410px);
  aspect-ratio: 1.65;
  padding: 0;
  border: 0;
  background: transparent;
  perspective: 1100px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.envelope-shadow { position: absolute; inset: 13% 4% -12%; border-radius: 50%; background: rgba(101, 62, 70, .2); filter: blur(20px); transition: transform .6s ease, opacity .6s ease; }
.envelope-back { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background: #c98f97; box-shadow: 0 12px 30px rgba(104, 70, 77, .17); }
.envelope-back::before, .envelope-back::after { content: ""; position: absolute; inset: 0; }
.envelope-back::before { background: #d9a9aa; clip-path: polygon(0 0, 50% 60%, 100% 0); }
.envelope-back::after { background: #d2a0a2; clip-path: polygon(0 100%, 50% 42%, 100% 100%); }
.envelope-letter { position: absolute; z-index: 2; left: 9%; bottom: 4%; width: 82%; height: 90%; padding: 23px 20px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; background: #fffaf3; box-shadow: 0 1px 8px rgba(86, 58, 61, .14); color: var(--wine); text-align: left; transform: translateY(0) scaleY(.38); transform-origin: bottom center; transition: transform .65s cubic-bezier(.2,.78,.19,1); }
.envelope-letter::after { content: ""; position: absolute; top: 52%; left: 8%; right: 8%; height: 1px; background: rgba(144,85,101,.2); box-shadow: 0 2px 4px rgba(86,58,61,.08); transition: opacity .35s ease; }
.envelope.is-pulling .envelope-letter { transform: translateY(-96%) scaleY(.38); }
.envelope.is-unfolded .envelope-letter { transform: translateY(-72%) scaleY(1); }
.envelope.is-unfolded .envelope-letter::after { opacity: .18; }
.envelope.is-dissolving .envelope-letter { opacity: 0; filter: blur(5px); transform: translateY(-72%) scaleY(1.08) scaleX(.94); transition: opacity .5s ease, filter .7s ease, transform .6s ease; }
.heart-cloud { position: absolute; z-index: 7; inset: 0; overflow: visible; pointer-events: none; }
.heart-particle { position: absolute; top: calc(42% + var(--from-y)); left: calc(50% + var(--from-x)); color: var(--tone); font-size: var(--size); line-height: 1; opacity: 0; transform: translate(-50%, -50%) scale(.2); }
.envelope.is-dissolving .heart-particle { animation: heart-release .95s cubic-bezier(.2,.7,.3,1) var(--delay) both; }
.envelope.is-dissolving .envelope-back,
.envelope.is-dissolving .envelope-front,
.envelope.is-dissolving .envelope-flap,
.envelope.is-dissolving .envelope-seal,
.envelope.is-dissolving .envelope-shadow { opacity: 0; filter: blur(5px); transition: opacity .65s ease, filter .75s ease; }
@keyframes heart-release {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.2) rotate(var(--turn)); }
}
.envelope-letter > span { font: 600 clamp(17px, 2.6vw, 24px) var(--hand); }
.envelope-letter i { width: 76%; margin-top: 18px; padding-top: 10px; border-top: 1px solid #eadbd3; color: #a17f7c; font: 14px var(--hand); }
.envelope-letter b { margin: auto 0 0 auto; font: 600 23px var(--hand); }
.envelope-front { position: absolute; z-index: 4; inset: 0; border-radius: 6px; background: linear-gradient(145deg, #e7c5bf, #d5a2a1); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.envelope-flap { position: absolute; z-index: 5; inset: 0; border-radius: 6px; background: linear-gradient(155deg, #d7a5a4, #c58a94); clip-path: polygon(0 0, 100% 0, 50% 61%); transform-origin: 50% 0; transform: rotateX(0); transition: transform .7s cubic-bezier(.2,.72,.25,1), z-index 0s .35s; backface-visibility: hidden; }
.envelope-seal { position: absolute; z-index: 6; top: 38%; left: 50%; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; background: #a65f70; color: #fff1ec; font: 25px var(--hand); transform: translate(-50%, -50%); box-shadow: 0 3px 7px rgba(91, 54, 63, .16); transition: opacity .25s ease, transform .35s ease; }
.envelope:not(.is-open):hover { transform: translateY(-5px) rotate(-.5deg); }
.envelope, .envelope-shadow { transition: transform .4s ease; }
.envelope:focus-visible { outline: 2px solid var(--wine); outline-offset: 13px; border-radius: 7px; }
.envelope.is-open { cursor: default; }
.envelope.is-open .envelope-flap { z-index: 1; transform: rotateX(180deg); }
.envelope.is-open .envelope-seal { opacity: 0; transform: translate(-50%, -75%) scale(.45); }
.envelope.is-open .envelope-shadow { transform: scale(.84); opacity: .65; }
.open-hint { margin: 31px 0 0; color: #836b6b; font: 20px var(--hand); }
.open-hint span { display: inline-block; margin-left: 4px; color: var(--wine); transition: transform .2s ease; }
.envelope-stage:has(.envelope:hover) .open-hint span { transform: translate(2px, -2px); }
.envelope-stage:has(.envelope.is-open) .envelope-intro,
.envelope-stage:has(.envelope.is-open) .open-hint,
.envelope-stage:has(.envelope.is-open) .stage-note { opacity: 0; transition: opacity .35s ease; }
.stage-note { position: absolute; bottom: 24px; color: #aa8e8c; font-size: 8px; letter-spacing: .2em; }
.letter-area { opacity: 0; visibility: hidden; transform: translateY(22px); transition: opacity .6s ease, transform .7s ease, visibility 0s linear .65s; }
.letter-area.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.letter {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 53px clamp(34px, 7.1vw, 88px) 32px;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 31px, rgba(144,85,101,.026) 32px);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 22px 70px rgba(91, 57, 59, .13), 0 2px 7px rgba(91, 57, 59, .06);
}
.letter::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(194,142,150,.18); pointer-events: none; }
.letter-topline { height: 24px; margin-bottom: 26px; display: flex; justify-content: space-between; align-items: start; color: #ae9692; font-size: 9px; letter-spacing: .19em; }
.postmark { width: 43px; height: 43px; margin: -5px 6px 0 0; display: grid; place-items: center; border: 1px solid rgba(144,85,101,.42); border-radius: 50%; color: var(--wine); font: 22px var(--hand); transform: rotate(11deg); }
.letter-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(235px, .78fr); gap: clamp(36px, 6vw, 75px); align-items: center; }
.letter-copy { max-width: 490px; }
h1 { margin: 0 0 22px; color: var(--wine); font: 600 clamp(40px, 5vw, 58px)/1.03 var(--hand); letter-spacing: -.015em; }
.letter-copy p { margin: 0 0 16px; color: #57494a; font: 14px/1.95 var(--sans); }
.signoff { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; color: #57494a; font: 13px var(--sans); }
.signature { margin: -5px 0 0 15px; color: var(--wine); font: 600 37px/1.1 var(--hand); transform: rotate(-4deg); }
.letter-photo { position: relative; margin: 0; padding: 10px 10px 42px; background: #fffdfa; transform: rotate(2deg); box-shadow: 0 8px 23px rgba(66, 42, 44, .16); }
.letter-photo img { display: block; width: 100%; aspect-ratio: 4 / 4.55; object-fit: cover; object-position: center; }
.letter-photo figcaption { position: absolute; right: 10px; bottom: 14px; left: 10px; display: flex; justify-content: space-between; color: #8c7774; font: 11px var(--hand); }
.photo-tape { position: absolute; z-index: 1; width: 68px; height: 19px; top: -8px; left: calc(50% - 34px); background: rgba(211, 170, 164, .55); transform: rotate(-4deg); }
.photo-open { cursor: zoom-in; }
.postscript { margin: 27px 0 34px; padding: 0 0 0 2px; color: #776568; font: 17px var(--hand); }
.postscript span { color: var(--wine); font-weight: 600; }
.postscript b { padding-left: 3px; color: var(--rose); }
.memories { padding-top: 23px; border-top: 1px solid var(--line); }
.memories-heading { margin-bottom: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
h2 { margin: 0; color: #684b51; font: 500 25px/1.2 var(--serif); letter-spacing: -.035em; }
.memories-heading > span { color: var(--wine); font: 20px var(--hand); transform: rotate(-6deg); }
.gallery { display: grid; grid-template-columns: 1.1fr .9fr 1fr; gap: 16px; }
.memory { min-width: 0; margin: 0; }
.memory img { display: block; width: 100%; height: 175px; object-fit: cover; border: 5px solid #fffdfa; box-shadow: 0 2px 8px rgba(66, 42, 44, .09); transition: transform .2s ease, box-shadow .2s ease; }
.memory:hover img { transform: translateY(-3px) rotate(-.5deg); box-shadow: 0 7px 15px rgba(66, 42, 44, .15); }
.memory:nth-child(2) img { object-position: center 43%; }
.memory:nth-child(3) img { object-position: center 42%; }
.memory figcaption { padding: 7px 2px 0; color: #8b7774; font: 16px var(--hand); }
.letter-end { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 30px auto 0; color: #a98583; font: 12px var(--serif); }
.letter-end span { width: 33px; height: 1px; background: #ddc9c3; }
.footer { padding: 0 20px 30px; color: #9d7c7c; text-align: center; font-size: 9px; letter-spacing: .2em; }
.footer span { padding-left: 5px; color: var(--wine); font-size: 13px; }
.lightbox { width: min(92vw, 1050px); max-width: none; max-height: 92vh; padding: 54px 20px 18px; border: 0; background: var(--paper); color: var(--ink); }
.lightbox::backdrop { background: rgba(48, 31, 35, .84); backdrop-filter: blur(4px); }
.lightbox-image { display: block; max-width: 100%; max-height: 74vh; object-fit: contain; margin: 0 auto; }
.lightbox-caption { margin: 12px 0 0; color: var(--muted); text-align: center; font: 16px var(--hand); }
.lightbox-close { position: absolute; top: 14px; right: 17px; padding: 5px 0 5px 12px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 11px var(--sans); }
.lightbox-close span { margin-left: 7px; color: var(--wine); font-size: 18px; vertical-align: -2px; }
@media (max-width: 720px) {
  .topbar { height: 68px; padding: 0 23px; }
  .topbar p { font-size: 9px; }
  main { padding: 0 12px 48px; }
  .envelope-stage { height: calc(100svh - 68px); min-height: calc(100svh - 68px); margin: 0 -12px; padding: 34px 18px 55px; }
  .envelope-intro { margin-bottom: 26px; }
  .envelope { width: min(82vw, 370px); }
  .envelope-letter { padding: 18px 15px; }
  .open-hint { margin-top: 27px; font-size: 19px; }
  .stage-note { bottom: 18px; }
  .letter { padding: 39px 29px 25px; }
  .letter::before { inset: 7px; }
  .letter-topline { margin-bottom: 18px; font-size: 8px; }
  .letter-layout { grid-template-columns: 1fr; gap: 23px; }
  .letter-copy { max-width: none; }
  h1 { margin-bottom: 17px; font-size: 48px; }
  .letter-copy p { font-size: 13px; line-height: 1.85; }
  .signoff { margin-top: 18px; }
  .letter-photo { width: min(78%, 310px); justify-self: center; }
  .letter-photo img { aspect-ratio: 4 / 3.4; }
  .postscript { margin: 22px 0 27px; font-size: 16px; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 13px 10px; }
  .memory img { height: 150px; }
  .memory:last-child { grid-column: 1 / -1; }
  .memory:last-child img { height: 185px; object-position: center 36%; }
  h2 { font-size: 21px; }
  .memories-heading { align-items: center; }
}
@media (max-width: 390px) {
  .topbar { padding: 0 17px; }
  .top-signoff { font-size: 16px; }
  .letter { padding: 35px 23px 22px; }
  .letter-copy p { font-size: 12.5px; }
  .memory img { height: 125px; }
  .memory:last-child img { height: 160px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }