:root{
  color-scheme: light;
  --plaster:#cdc1af; --plaster-deep:#bfb29f; --ivory:#f3ede2;
  --ink:#6f5630; --ink-soft:#8a6e42; --foil:#a98a55;
  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --plaster:#cdc1af; --plaster-deep:#bfb29f; } }
:root[data-theme="dark"]{ --plaster:#cdc1af; --plaster-deep:#bfb29f; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px); background:var(--plaster-deep)}
body{margin:0; background:var(--plaster-deep); color:var(--ink); font-family:var(--serif); -webkit-font-smoothing:antialiased; overflow-x:hidden}
body.locked{overflow:hidden; height:100svh}
img{display:block; max-width:100%}
.col{width:min(100%,540px); margin:0 auto; container-type:inline-size; position:relative}
@media (min-width:600px){
  .col::before,.col::after{content:""; position:absolute; top:0; bottom:0; width:8%; z-index:5; pointer-events:none}
  .col::before{left:0; background:linear-gradient(90deg,var(--plaster-deep),rgba(191,178,159,0))}
  .col::after{right:0; background:linear-gradient(270deg,var(--plaster-deep),rgba(191,178,159,0))}
}
.hero{position:relative; aspect-ratio:752/1344; overflow:hidden; cursor:pointer; -webkit-tap-highlight-color:transparent}
.hero.s-done{cursor:auto}
.scene{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 91%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 91%,transparent 100%)}
.hero .layer{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.l-jacket{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,5.45% 13.47%,5.45% 86.54%,94.28% 86.54%,94.28% 13.47%,5.45% 13.47%)}
.cardshade{position:absolute; left:5.45%; top:13.47%; width:88.83%; height:73.07%; pointer-events:none; opacity:.55;
  background:linear-gradient(90deg,rgba(70,52,24,.05) 0,rgba(70,52,24,.5) 46%,rgba(70,52,24,.62) 50%,rgba(70,52,24,.5) 54%,rgba(70,52,24,.05) 100%)}
.doors{position:absolute; left:5.45%; top:13.47%; width:88.83%; height:73.07%; pointer-events:none}
.door{position:absolute; top:0; height:100%; will-change:transform}
.door-l{left:0; width:50.15%; transform-origin:100% 50%}
.door-r{right:0; width:49.85%; transform-origin:0 50%}
.face{position:absolute; inset:0; background-size:100% 100%}
.face::after{content:""; position:absolute; inset:0; opacity:var(--sh,0)}
.front::after{background:linear-gradient(90deg,rgba(60,44,20,.15),rgba(60,44,20,.5))}
.door-r .front::after{background:linear-gradient(270deg,rgba(60,44,20,.15),rgba(60,44,20,.5))}
.back{display:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.back::before{content:""; position:absolute; inset:5% 9%; border:1px solid rgba(169,138,85,.55)}
.back::after{background:rgba(60,44,20,.42)}
.door.flipped .front{display:none}
.door.flipped .back{display:block}
.tap{position:absolute; left:5.45%; top:13.47%; width:88.83%; height:73.07%; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.tap:focus-visible{outline:2px solid var(--ink); outline-offset:4px}
.hint{position:absolute; left:0; right:0; text-align:center; margin:0; font-size:2.9cqw; letter-spacing:.26em; text-transform:uppercase; color:var(--ink); text-shadow:0 1px 0 rgba(255,255,255,.55); transition:opacity .5s ease; pointer-events:none}
.hint-open{top:89.2%}
.hint-scroll{top:88.6%; opacity:0; text-transform:none; letter-spacing:0; font-family:var(--script); font-size:6.4cqw; color:var(--ink-soft)}
.hint-scroll::after{content:""; display:block; width:1px; height:5cqw; margin:.8cqw auto 0; background:linear-gradient(var(--foil),transparent); animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%,100%{transform:scaleY(.4); transform-origin:top; opacity:.4} 50%{transform:scaleY(1); transform-origin:top; opacity:1}}
.hero.s-open .hint-open{opacity:0}
.hero.s-open .tap{pointer-events:none}
.hero.s-done .hint-scroll{opacity:1}
.reply{position:absolute; left:50%; top:51.5%; width:48%; transform:translateX(-50%); text-align:center}
.reply .btn{background:rgba(255,253,248,.35); box-shadow:none; border-color:rgba(150,120,70,.75); padding:2.8cqw 1cqw; letter-spacing:.2em}
.reply .btn[aria-pressed="true"]{background:var(--ink); color:var(--ivory); border-color:var(--ink)}
.reply .thanks{font-size:3.4cqw; line-height:1.25; margin-top:1.8cqw; color:var(--ink)}
.scene.last{-webkit-mask-image:none; mask-image:none}
.love{position:absolute; left:0; right:0; top:71%; margin:0; text-align:center; font-family:var(--script); font-size:8cqw; line-height:1; color:#9a7a45; text-shadow:0 0 1.6cqw rgba(255,252,245,.95), 0 0 .5cqw rgba(255,252,245,.9)}
.scene.last .again{position:absolute; left:50%; top:79.5%; transform:translateX(-50%); margin:0; white-space:nowrap; text-shadow:0 0 1.5cqw rgba(255,252,245,.9), 0 0 .6cqw rgba(255,252,245,.9); color:var(--ink)}
.scene{position:relative; aspect-ratio:752/1344; margin-top:-16cqw}
.scene > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%); mask-image:linear-gradient(180deg,transparent 0,#000 9%)}
.scene.flip > img{transform:scaleX(-1)}
.note{position:absolute; top:50%; transform:translate(-50%,-50%); text-align:center; text-shadow:0 1px 0 rgba(255,255,255,.5)}
.note h2{font-family:var(--script); font-weight:400; font-size:11.5cqw; line-height:1; margin:0 0 5cqw; color:var(--ink-soft)}
.caps{font-size:3cqw; letter-spacing:.26em; text-transform:uppercase; font-weight:500; margin:0; line-height:1.7}
.big{font-size:5.6cqw; letter-spacing:.2em; text-transform:uppercase; font-weight:500; line-height:1.35; margin:0}
.it{font-style:italic; font-size:4.1cqw; line-height:1.4; margin:0}
.rule{width:9cqw; height:1px; margin:4.2cqw auto; background:linear-gradient(90deg,transparent,var(--foil),transparent)}
.n-day{left:47%; width:50%}
.day{list-style:none; margin:0; padding:0}
.day li{margin:0 0 4.4cqw}
.day li:last-child{margin-bottom:0}
.day .t{display:block; font-style:italic; font-size:4.2cqw; line-height:1.2; color:var(--ink-soft)}
.day .e{display:block; font-size:3cqw; letter-spacing:.24em; text-transform:uppercase; font-weight:500; line-height:1.6}
.n-place{left:50.5%; width:41%}
.n-place .big{font-size:4.5cqw; letter-spacing:.16em}
.n-reply{left:53%; width:50%}
.btn{display:block; width:100%; margin:0 0 2.6cqw; padding:2.9cqw 2cqw; font:500 2.9cqw/1.2 var(--serif); letter-spacing:.24em; text-transform:uppercase; color:var(--ink);
  background:rgba(243,237,226,.55); border:1px solid rgba(169,138,85,.8); border-radius:0; cursor:pointer; box-shadow:0 .6cqw 1.6cqw rgba(90,70,40,.12), inset 0 0 0 .7cqw rgba(243,237,226,.5); transition:background .25s ease, transform .15s ease; -webkit-tap-highlight-color:transparent}
.btn:hover{background:rgba(243,237,226,.85)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.btn[aria-pressed="true"]{background:var(--ink); color:var(--ivory); border-color:var(--ink); text-shadow:none}
.thanks{min-height:6cqw; margin-top:3cqw}
.mono{font-size:8.4cqw; letter-spacing:.14em; font-weight:400; margin:9cqw 0 1cqw; line-height:1}
.mono i{font-family:var(--script); font-style:normal; font-size:.8em; letter-spacing:0; padding:0 .12em; color:var(--ink-soft)}
.again{background:none; border:0; padding:2cqw; margin-top:5cqw; font:italic 400 3.6cqw var(--serif); color:var(--ink-soft); text-decoration:underline; text-underline-offset:.25em; cursor:pointer}
.again:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .hint-scroll::after{animation:none}
}