:root{color-scheme:light;--wine:#542b3a;--deep:#321823;--rose:#a15d70;--paper:#fff9ed;--ink:#563342;--muted:#8a6c72;--line:#d9c6bd;--serif:Georgia,'Times New Roman',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box} [hidden]{display:none!important} html{scroll-behavior:smooth} body{margin:0;color:var(--ink);background:#f0dfd8;font-family:var(--sans);font-size:15px;line-height:1.6} button,input{font:inherit} button,a,input{-webkit-tap-highlight-color:transparent} button{cursor:pointer} button:disabled{cursor:wait;opacity:.65} button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b57251;outline-offset:5px} h1,h2,h3,p{margin:0} h1,h2,h3{font-weight:400} button{touch-action:manipulation} .background-mark{position:fixed;z-index:-1;right:-100px;top:8vh;font:600px/.8 var(--serif);color:#e2c4c0;opacity:.25;transform:rotate(14deg);pointer-events:none}.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:.23em;font-weight:600;color:var(--rose)}
.gate{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:grid;place-items:center;padding:48px 24px;background:radial-gradient(ellipse at 12% 10%,#f5cad180,transparent 55%),radial-gradient(ellipse at 88% 90%,#e8bcc980,transparent 55%),linear-gradient(135deg,#fff5e9,#f1dcda)}.gate-frame{position:relative;z-index:1;max-width:490px;width:100%;padding:47px 45px 32px;text-align:center;background:#fff8ec;border:1px solid #f4e5d8;box-shadow:0 24px 80px #8b4b6226;outline:1px solid #dfc4bc;outline-offset:-12px}.love-envelope{position:relative;width:90px;height:60px;margin:0 auto 25px;border:1px solid #d4a4a8;background:#efcfc7;box-shadow:0 8px 18px #97516617;transform:rotate(-7deg)}.love-envelope::before{content:"";position:absolute;inset:0;background:#f9e2d4;clip-path:polygon(0 0,100% 0,50% 66%)}.love-envelope::after{content:"";position:absolute;inset:0;background:linear-gradient(148deg,transparent 49%,#e8bfc1 50%) top left/50% 100% no-repeat,linear-gradient(212deg,transparent 49%,#e8bfc1 50%) top right/50% 100% no-repeat}.love-seal{position:absolute;z-index:1;left:calc(50% - 13px);top:27px;width:26px;height:26px;border:2px double #c48799;border-radius:50%;display:grid;place-items:center;color:#fff2e9;background:#ad617d;font:18px var(--serif)}.gate-hearts{position:absolute;inset:0;pointer-events:none;z-index:0}.gate-hearts span{position:absolute;color:#c78698;opacity:.22;font:72px/1 var(--serif);animation:love-drift 8s ease-in-out infinite alternate}.gate-hearts span:nth-child(1){left:9%;top:16%;transform:rotate(-15deg)}.gate-hearts span:nth-child(2){right:11%;top:11%;font-size:46px;animation-delay:-3s}.gate-hearts span:nth-child(3){left:16%;bottom:14%;font-size:48px;animation-delay:-5s}.gate-hearts span:nth-child(4){right:8%;bottom:19%;font-size:85px;animation-delay:-2s}.gate-hearts span:nth-child(5){right:24%;top:47%;font-size:28px;animation-delay:-6s}@keyframes love-drift{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-10px) rotate(5deg)}}.gate h1{font-family:var(--serif);font-size:42px;line-height:1.13;letter-spacing:-.045em;margin-top:16px}.gate h1 em{font-weight:400;color:#9a5c6a}.gate-intro{font-size:13px;color:var(--muted);margin-top:19px}.gate form{text-align:left;margin-top:34px}.gate label{display:block;font-size:11px;letter-spacing:.04em;margin-bottom:8px}.password-field{display:flex;align-items:center;border:1px solid #cbb3a8;background:#fffcf6;border-radius:2px}.password-field:focus-within{outline:2px solid #9b5f70;outline-offset:2px}.password-field input{min-width:0;flex:1;width:100%;padding:13px 12px;border:0;background:transparent;color:var(--ink);outline:none}.password-field input:focus-visible{outline:none}.visibility-toggle{background:none;border:0;color:var(--muted);font-size:11px;padding:14px}.hint{margin:13px 0 23px;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.45;color:#8a6670}.hint span{display:block;font:9px var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#9d8687;margin-bottom:5px}.primary{display:flex;justify-content:space-between;align-items:center;gap:26px;width:100%;border:1px solid var(--wine);border-radius:2px;color:#fff7ee;background:var(--wine);padding:15px 20px;font-size:12px;letter-spacing:.04em;transition:background .2s,transform .2s}.primary:hover{background:#6c3a4b;transform:translateY(-2px)}.primary span{font-size:20px;line-height:1}.status{font-size:12px;min-height:20px;line-height:1.5;margin-top:12px;color:#9b3e4d}.gate-footer{display:flex;align-items:center;gap:15px;justify-content:center;margin-top:17px;color:#947b7d;font-size:9px;text-transform:uppercase;letter-spacing:.15em}.fine-rule{height:1px;background:#dfcfc3;width:38px}
.experience{max-width:1120px;margin:auto;padding:0 64px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #c9aaa85c;padding:24px 0;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#856570}.text-button{padding:5px 0;background:none;border:0;border-bottom:1px solid #b79291;color:inherit;font-size:11px}.masthead .text-button{text-transform:uppercase;font-size:9px;letter-spacing:.1em}.preamble{padding:77px 0 0;position:relative}.preamble h1{position:relative;display:inline-block;font:normal 88px/1.02 var(--serif);letter-spacing:-.055em;margin-top:19px}.preamble h1 em{color:#99596b;font-weight:400}.title-star{position:absolute;right:-80px;top:73px;font-size:64px;font-weight:400;color:#a56c70}.preamble-copy{max-width:460px;margin:30px 0 0 3px}.copy-label{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#976f77}.personal-copy{font:italic 19px/1.65 var(--serif);color:#96717c;margin-top:12px}.letter-introduction{display:flex;align-items:center;flex-direction:column;position:relative;padding:42px 0 12px}.envelope{width:352px;height:210px;position:relative;filter:drop-shadow(0 19px 20px #582c3622);transform:rotate(-5deg);transition:transform .7s}.envelope-back{position:absolute;inset:0;background:#dcb8ac;border:1px solid #ca9f91}.envelope-note{position:absolute;inset:12px 20px;background:#fff8eb;border:1px solid #eadbca;transition:transform .7s .15s}.envelope-front{position:absolute;inset:0;background:linear-gradient(148deg,transparent 49.7%,#e7c6b7 50%) top left/50.1% 100% no-repeat,linear-gradient(212deg,transparent 49.7%,#e5c2b1 50%) top right/50.1% 100% no-repeat;z-index:3}.envelope-flap{position:absolute;inset:0;background:#efd3c2;clip-path:polygon(0 0,100% 0,50% 65%);transform-origin:top;transition:transform .7s;z-index:4}.wax-seal{position:absolute;left:calc(50% - 23px);top:106px;background:#9b5265;border:3px double #ad7280;color:#efc5be;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;font:25px var(--serif);z-index:5;box-shadow:0 2px 2px #592c3d44;transition:opacity .2s}.envelope-address{position:absolute;z-index:6;left:24px;bottom:15px;display:flex;flex-direction:column;color:#895861}.envelope-address span{font:italic 10px var(--serif)}.envelope-address strong{font:italic 26px var(--serif)}.envelope-address small{font:7px var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-top:3px}.envelope.opening{transform:rotate(0) translateY(-7px)}.envelope.opening .envelope-flap{transform:rotateX(180deg);z-index:1}.envelope.opening .envelope-note{transform:translateY(-45px)}.envelope.opening .wax-seal{opacity:0}.open-button{width:245px;margin-top:39px;position:relative}.quiet-note{font:italic 13px var(--serif);color:#94737b;margin-top:13px}
.letter{margin:57px auto 0;position:relative;padding:31px 52px 27px;background:linear-gradient(0deg,#e3d0b51c 1px,transparent 1px) 0 0/100% 5px,var(--paper);box-shadow:0 15px 50px #5d394017,0 1px 2px #6d45401c;border:1px solid #e9dcca;animation:unfold .8s both;transform-origin:top}.letter-fold{position:absolute;top:0;left:0;width:100%;height:49%;pointer-events:none;background:linear-gradient(180deg,transparent 96%,#bca18f08 99%,#bca18f20);border-bottom:1px solid #ba9b8c13}.letter-topline{display:flex;justify-content:space-between;align-items:center;font-size:8px;text-transform:uppercase;letter-spacing:.17em;color:#a18a7f}.letter-topline>span:nth-child(2){font:20px var(--serif);color:#b5797b}.letter h2{font:italic 41px var(--serif);letter-spacing:-.04em;margin-top:43px;color:#70404d}.letter-copy{max-width:580px;margin-top:17px}.letter-copy .personal-copy{font-size:18px;color:#9a807d}.film{margin-top:38px}.film-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px;border-top:1px solid #d9cbb8;padding-top:20px}.film h3{font:20px var(--serif);color:#704652}.film-heading>span{font-size:10px;letter-spacing:.12em;color:#a0847d}.film-frame{position:relative;background:#34202a;border:5px solid #fffdf7;box-shadow:0 3px 18px #5a3a3a15;aspect-ratio:16/9}.film video{display:block;width:100%;height:100%;object-fit:contain;background:#34202a}.film-footnote{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:11px;font-size:10px;color:#9b817b}.film-footnote .text-button{font-size:10px}.film .status{margin-top:3px;min-height:0}.signature{position:relative;font:italic 36px var(--serif);color:#8e5662;margin-top:35px;display:inline-block}.signature>span:first-child{display:block;font:italic 13px var(--serif);margin-bottom:5px;color:#a48680}.signature-heart{position:absolute;right:-39px;bottom:1px;font-size:29px}.letter-bottomline{display:flex;justify-content:space-between;border-top:1px solid #e6d9c8;margin-top:35px;padding-top:17px;font-size:8px;text-transform:uppercase;letter-spacing:.15em;color:#b29b90}.page-footer{padding:56px 0 42px;text-align:center;color:#a58087;font-size:10px}.page-footer>span{font:27px var(--serif);display:block;margin-bottom:9px}.page-footer em{font:italic 14px var(--serif)}.noscript{position:fixed;left:20px;bottom:20px;background:#fff8ec;padding:15px;color:#5b3542} @keyframes unfold{from{opacity:0;transform:translateY(20px) scaleY(.97)}to{opacity:1;transform:none}}
@media(min-width:900px){.preamble-copy{max-width:430px}.letter-introduction{position:absolute;right:0;top:136px;width:395px}.envelope{width:340px;height:210px}.preamble{min-height:555px}.letter{margin-top:28px}.experience{padding:0 70px}}
@media(min-width:641px) and (max-width:899px){.preamble h1{font-size:clamp(64px,10vw,88px)}.title-star{right:0;top:110px}}
@media(max-width:640px){.experience{padding:0 23px}.masthead{padding:20px 0;font-size:8px;gap:10px}.masthead-center{display:none}.preamble{padding-top:49px}.preamble h1{font-size:clamp(42px,12.6vw,64px);line-height:1.04;letter-spacing:-.06em;width:100%}.title-star{right:15px;top:62px;font-size:43px}.preamble-copy{margin-top:24px}.personal-copy{font-size:17px}.copy-label{font-size:8px}.letter-introduction{padding-top:43px}.envelope{width:min(300px,calc(90vw - 40px));height:184px}.wax-seal{top:91px;width:42px;height:42px;left:calc(50% - 21px)}.envelope-address strong{font-size:24px}.open-button{margin-top:31px}.letter{margin-top:39px;padding:23px 20px 22px}.letter h2{font-size:34px;margin-top:31px}.letter-copy .personal-copy{font-size:16px}.film{margin-top:28px}.film h3{font-size:18px}.film-frame{margin-left:-8px;margin-right:-8px;border-width:3px}.film-footnote{font-size:9px;align-items:flex-start}.film-footnote .text-button{font-size:9px;max-width:130px;text-align:right;line-height:1.5;padding:0}.signature{font-size:32px;margin-top:29px}.letter-bottomline{font-size:7px}.gate{padding:27px 18px}.gate-frame{padding:37px 30px 27px}.gate h1{font-size:37px}.gate-intro{font-size:12px}.gate form{margin-top:27px}.hint{font-size:14px}.primary{padding:14px 16px}.gate-footer{font-size:8px;gap:12px}.fine-rule{width:25px}}
@media(max-width:350px){.experience{padding:0 17px}.preamble h1{font-size:42px}.title-star{right:8px;top:53px;font-size:35px}.gate-frame{padding-left:24px;padding-right:24px}.gate h1{font-size:32px}.envelope{width:260px}.letter{padding-left:15px;padding-right:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.envelope.opening .envelope-flap{transform:none;opacity:0}.envelope.opening .envelope-note{transform:translateY(-20px)}}