:root { --ink:#11100f; --ivory:#f4f0e8; --paper:#fffdf8; --champagne:#b9a278; --muted:#8e887e; }
*{box-sizing:border-box} html{background:var(--ink);scroll-behavior:smooth} body{margin:0;color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif} button,input{font:inherit}.experience{min-height:100svh;position:relative;overflow:hidden;background:var(--ivory)}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.17;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.screen{min-height:100svh;animation:reveal .9s cubic-bezier(.22,1,.36,1) both}.corner-mark{position:fixed;top:24px;left:28px;z-index:30;font:600 11px/1 serif;letter-spacing:.32em}.corner-mark span{color:var(--champagne);font-size:10px}.eyebrow{text-transform:uppercase;letter-spacing:.32em;font-size:10px;font-weight:600}.ornament{display:flex;align-items:center;gap:14px;color:var(--champagne);font-size:7px;margin:28px auto}.ornament span{width:48px;height:1px;background:var(--champagne)}
.entry{display:grid;place-content:center;text-align:center;padding:72px 24px 45px;background:radial-gradient(circle at 50% 30%,#fff 0,#f6f2ea 38%,#e9e3d9 100%)}.entry:before,.entry:after{content:"";position:absolute;width:clamp(160px,30vw,400px);height:clamp(160px,30vw,400px);border:1px solid rgba(185,162,120,.26);border-radius:50%}.entry:before{left:-16%;top:-10%}.entry:after{right:-18%;bottom:-15%}.entry h1,.letter-intro h1{font:italic 400 clamp(44px,8vw,88px)/.95 Georgia,serif;letter-spacing:-.045em;margin:0}.entry>p{font:400 14px/1.6 Georgia,serif;color:#6b665e;margin:22px 0 28px}.name-form{width:min(390px,88vw);margin:auto;text-align:left;position:relative;z-index:2}.name-form label{display:block;text-transform:uppercase;letter-spacing:.25em;font-size:9px;margin-bottom:9px}.name-form input{width:100%;border:0;border-bottom:1px solid #777067;background:transparent;padding:13px 2px;font:italic 22px Georgia,serif;outline:none;border-radius:0}.name-form input:focus{border-color:var(--champagne)}.name-form button,.yes-content button{width:100%;margin-top:24px;padding:16px 20px;border:1px solid var(--ink);background:var(--ink);color:white;text-transform:uppercase;letter-spacing:.19em;font-size:10px;cursor:pointer;transition:.3s}.name-form button:hover{background:transparent;color:var(--ink)}.name-form button span{float:right}.error{max-width:420px!important;margin:18px auto 0!important;color:#70594e!important;font:italic 12px/1.5 Georgia,serif!important}.edition{position:absolute;bottom:22px;left:0;right:0;font-size:8px;letter-spacing:.28em;color:#918b81}
.envelope-scene{background:radial-gradient(circle at 50% 50%,#2b2926 0,#121110 55%,#070707 100%);color:var(--ivory);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:85px 20px 35px}.stage-envelope .corner-mark{color:white}.envelope-copy{text-align:center;margin-bottom:42px}.envelope-copy span{font:italic 13px Georgia,serif;color:#c8b99f}.envelope-copy h1{font:italic 400 clamp(27px,5vw,48px)/1.1 Georgia,serif;margin:12px 0}.envelope-copy p,.tap-hint{color:#918c84;font-size:10px;letter-spacing:.2em;text-transform:uppercase}.envelope{width:min(430px,88vw);aspect-ratio:1.55;position:relative;border:0;background:none;padding:0;cursor:pointer;perspective:1200px;filter:drop-shadow(0 28px 34px rgba(0,0,0,.58))}.envelope-back{position:absolute;inset:0;background:#d9d0bf;border:1px solid #aa9d89}.envelope-front{position:absolute;inset:0;z-index:4;background:linear-gradient(145deg,transparent 49.5%,#e8dfcf 50%) left/50% 100% no-repeat,linear-gradient(215deg,transparent 49.5%,#ddd3c1 50%) right/50% 100% no-repeat,linear-gradient(35deg,#cfc4b0 49.5%,transparent 50%) left bottom/50% 100% no-repeat,linear-gradient(-35deg,#d8cebd 49.5%,transparent 50%) right bottom/50% 100% no-repeat}.flap{position:absolute;z-index:5;inset:0;clip-path:polygon(0 0,100% 0,50% 62%);background:linear-gradient(#eee7db,#cfc4b2);transform-origin:top;transition:transform 1s cubic-bezier(.16,.86,.3,1),z-index .1s .45s}.seal{position:absolute;z-index:8;left:50%;top:52%;transform:translate(-50%,-50%);width:57px;height:57px;border-radius:50%;display:grid;place-content:center;background:radial-gradient(circle at 35% 30%,#d9c39d,#8d7044 70%);border:3px double #e8d5ae;color:#28231c;font:700 14px Georgia,serif;box-shadow:0 5px 10px #0005;transition:.5s}.seal span{font-size:9px;margin:0 2px}.letter-preview{position:absolute;z-index:2;left:7%;right:7%;height:83%;top:7%;background:var(--paper);display:flex;justify-content:center;padding-top:28px;color:#4b453d;font:18px Georgia,serif;transition:transform 1.2s .45s cubic-bezier(.16,.85,.3,1)}.envelope.is-open .flap{transform:rotateX(180deg);z-index:1}.envelope.is-open .seal{opacity:0;transform:translate(-50%,-80%) scale(.65)}.envelope.is-open .letter-preview{transform:translateY(-68%)}.tap-hint{margin-top:24px;animation:pulse 2s infinite}
.letter-screen{background:#171615;color:var(--ivory);padding:110px 16px 80px;overflow:auto}.letter-intro{text-align:center;margin:0 auto 50px}.letter-intro h1{font-size:clamp(43px,7vw,76px);margin:15px 0}.letter-intro p{font:italic 15px Georgia,serif;color:#aaa39a}.paper{width:min(880px,100%);margin:auto;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px #0008}.photo-wrap{position:relative;padding:clamp(14px,3vw,28px);padding-bottom:0}.photo-wrap img{width:100%;height:min(62vh,610px);object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.02);display:block}.photo-caption{position:absolute;left:clamp(30px,6vw,70px);bottom:32px;color:white;font:italic 400 clamp(27px,5vw,55px) Georgia,serif;text-shadow:0 2px 18px #000}.letter-body{padding:clamp(36px,7vw,82px);max-width:720px;margin:auto}.letter-date{text-transform:uppercase;letter-spacing:.25em;font-size:9px;color:var(--muted)}.letter-body h2{font:italic 40px Georgia,serif;margin:30px 0 24px}.letter-body p{font:400 clamp(16px,2.1vw,19px)/1.9 Georgia,serif;color:#393531}.letter-body p:first-of-type:first-letter{float:left;font-size:66px;line-height:.72;margin:10px 8px 0 0}.signature{margin-top:40px;font:italic 15px Georgia,serif}.signature strong{display:block;font:italic 42px Georgia,serif;margin-top:6px}.question-block{text-align:center;border-top:1px solid #d9d1c4;padding:clamp(50px,8vw,100px) clamp(20px,8vw,90px);background:linear-gradient(#fffdf8,#f1ece3)}.question-block>span{font:italic 14px Georgia,serif;color:#756f66}.question-block h2{font:400 clamp(36px,7vw,72px)/1.02 Georgia,serif;margin:28px 0 38px}.question-block h2 em{font-weight:400}.choices{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.choices button{min-width:230px;padding:16px 22px;text-transform:uppercase;letter-spacing:.16em;font-size:9px;cursor:pointer;transition:.3s}.yes-button{background:var(--ink);color:white;border:1px solid var(--ink)}.yes-button:hover{transform:translateY(-3px);box-shadow:0 9px 25px #0003}.moment-button{background:transparent;color:var(--ink);border:1px solid #aaa197}.moment-note{font:italic 13px Georgia,serif!important;margin:20px auto 0;max-width:430px}
.yes-screen{background:#0b0b0a;color:white;display:grid;grid-template-columns:1.1fr .9fr;min-height:100svh;position:relative}.yes-photo{min-height:100svh;overflow:hidden;position:relative}.yes-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,#0b0b0a)}.yes-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.7)}.yes-content{display:flex;flex-direction:column;justify-content:center;text-align:center;padding:60px 7vw;position:relative;z-index:3}.yes-content h1{font:400 clamp(55px,9vw,110px)/.78 Georgia,serif;margin:25px 0}.yes-content h1 em{font-size:1.2em;color:#d8c39d}.yes-content>p{font:italic 16px Georgia,serif;color:#c8c1b7}.accepted{border-block:1px solid #49453f;margin:34px auto 10px;padding:22px 30px;min-width:min(340px,90vw)}.accepted span,.accepted small{display:block;text-transform:uppercase;letter-spacing:.25em;font-size:8px;color:#9e968b}.accepted strong{display:block;font:italic 34px Georgia,serif;margin:8px}.yes-content button{max-width:260px;margin:24px auto 0;border-color:#777;background:transparent}.petals{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}.petals i{--x:calc((var(--i) * 37) % 100);position:absolute;top:-8%;left:calc(var(--x) * 1%);width:10px;height:18px;border-radius:80% 10% 80% 10%;background:#fff;opacity:.65;animation:fall calc(6s + (var(--i) % 5) * 1s) calc((var(--i) % 7) * -1s) linear infinite}
@keyframes reveal{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}@keyframes pulse{50%{opacity:.45}}@keyframes fall{to{transform:translate(60px,115vh) rotate(540deg);opacity:0}}
@media(max-width:700px){.corner-mark{top:18px;left:19px}.entry h1{font-size:46px}.envelope-copy{margin-bottom:25px}.envelope-scene{justify-content:center}.letter-screen{padding-inline:0}.paper{width:100%}.photo-wrap img{height:58vh}.choices{display:grid}.yes-screen{display:block}.yes-photo{position:absolute;inset:0;min-height:100%}.yes-photo:after{background:linear-gradient(0deg,#0b0b0a 8%,rgba(11,11,10,.3) 75%,#0b0b0a)}.yes-content{min-height:100svh;padding:80px 24px 40px}.yes-content h1{font-size:70px}.accepted{min-width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}