:root{
  --paper:#FDFBF7;
  --ink:#2B2B2B;
  --rose:#C94A58;
  --rose-soft:rgba(201,74,88,.12);
  --line:rgba(43,43,43,.12);
  --shadow:0 18px 45px -20px rgba(43,43,43,.35);
  --measure:34rem;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(120% 60% at 50% 0%, #fffdf9 0%, var(--paper) 55%, #f6f1e8 100%) fixed,
    var(--paper);
  color:var(--ink);
  font-family:"Lora",Georgia,serif;
  font-size:17px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{
  width:100%;
  max-width:var(--measure);
  margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 28px) 22px calc(env(safe-area-inset-bottom) + 64px);
}
h1,h2,.script{font-family:"Playfair Display",Georgia,serif;font-weight:700;letter-spacing:.2px}

.stage{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;text-align:center}
.kicker{font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--rose);opacity:.85}
.envelope{
  position:relative;width:min(300px,80vw);aspect-ratio:3/2;cursor:pointer;
  filter:drop-shadow(var(--shadow));transition:transform .5s cubic-bezier(.2,.8,.25,1);
  border:none;background:none;padding:0;
}
.envelope:active{transform:scale(.97)}
.env-body{position:absolute;inset:0;background:#f3ece0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.env-body::before,.env-body::after{
  content:"";position:absolute;top:0;width:60%;height:100%;background:#efe6d7;
}
.env-body::before{left:0;clip-path:polygon(0 0,100% 100%,0 100%)}
.env-body::after{right:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.flap{
  position:absolute;left:0;right:0;top:0;height:62%;
  background:#e9dfcd;border:1px solid var(--line);border-radius:10px 10px 0 0;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;transition:transform .8s cubic-bezier(.6,-.2,.3,1.3);
  z-index:3;
}
.seal{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:var(--rose);color:#FDFBF7;
  display:grid;place-items:center;font-family:"Playfair Display",serif;font-size:1.1rem;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 6px 14px rgba(201,74,88,.4);
  z-index:4;transition:opacity .4s ease,transform .4s ease;
}
.seal svg{display:block;width:24px;height:24px}
.opened .flap{transform:rotateX(180deg)}
.opened .seal{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.hint{font-size:.85rem;color:rgba(43,43,43,.55);font-style:italic}

.letter{
  display:none;background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:34px 22px 40px;margin-top:8px;
  background-image:linear-gradient(rgba(43,43,43,.025) 1px,transparent 1px);
  background-size:100% 2.2rem;background-position:0 1.1rem;
}
.letter.show{display:block;animation:rise .8s ease both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.letter h1{font-size:clamp(1.9rem,7.5vw,2.5rem);line-height:1.2;margin:0 0 6px;text-align:center}
.dateline{text-align:center;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(43,43,43,.5);margin-bottom:26px}
.rule{width:56px;height:1px;background:var(--rose);margin:0 auto 26px;opacity:.6}
section h2{font-size:1.25rem;margin:0 0 14px;color:var(--rose);font-style:italic;font-weight:500}
p{margin:0 0 1.15em}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

.secret{
  color:var(--ink);background:var(--rose-soft);border-bottom:1px dashed var(--rose);
  padding:0 3px;border-radius:3px;cursor:pointer;position:relative;
}
.tip{
  position:fixed;z-index:50;max-width:min(20rem,88vw);background:var(--ink);color:var(--paper);
  font-size:.85rem;line-height:1.55;padding:12px 14px;border-radius:10px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;
}
.tip.on{opacity:1;transform:none}
.tip::after{content:"";position:absolute;bottom:-6px;left:var(--ax,50%);margin-left:-6px;border:6px solid transparent;border-top-color:var(--ink);border-bottom:0}

.unfold{
  display:block;margin:8px auto 0;background:transparent;color:var(--rose);
  font-family:"Playfair Display",serif;font-size:1rem;font-style:italic;
  border:1px solid var(--rose);border-radius:999px;padding:12px 26px;cursor:pointer;
  transition:background .3s ease,color .3s ease,transform .2s ease;
}
.unfold:hover{background:var(--rose);color:var(--paper)}
.unfold:active{transform:scale(.97)}
section{display:none;padding-top:10px}
section.open{display:block}
.divider{display:flex;align-items:center;gap:12px;color:var(--rose);opacity:.55;margin:30px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:currentColor}

.signoff{text-align:right;font-family:"Playfair Display",serif;font-style:italic;font-size:1.2rem;margin-top:26px}

.holdwrap{text-align:center;margin-top:34px}
.hold{
  display:grid;place-items:center;width:58px;height:58px;position:relative;
  border:1px solid var(--rose);border-radius:50%;cursor:pointer;background:transparent;
  color:var(--rose);font-family:"Lora",serif;font-size:2.35rem;line-height:1;
  padding:0 0 4px;box-shadow:0 8px 20px -12px rgba(201,74,88,.9);
  transition:background .25s ease,color .25s ease,transform .2s ease;
  touch-action:manipulation;user-select:none;
}
.hold:hover,.hold:focus-visible{background:var(--rose);color:#fff}
.hold:active{transform:scale(.94)}
.hold:disabled{cursor:wait;opacity:.7}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hearts{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.heart{position:absolute;font-size:22px;animation:float 3.2s ease-out forwards;will-change:transform,opacity}
@keyframes float{
  0%{opacity:0;transform:translateY(0) scale(.5)}
  15%{opacity:1}
  100%{opacity:0;transform:translateY(-70vh) scale(1.15) rotate(var(--r,12deg))}
}
@media (min-width:640px){
  body{font-size:18px}
  .wrap{padding:56px 28px 90px}
  .letter{padding:52px 46px 56px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}