@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500;600&display=swap";:root{font-family:DM Sans,sans-serif;color:#50473e;background:#f5f0e7;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid #985b48;outline-offset:8px}button{cursor:pointer}.page{min-height:100svh;position:relative;background:radial-gradient(ellipse at 50% 46%,#fffdf655,transparent 62%)}.page:before{content:"";pointer-events:none;position:fixed;inset:0;opacity:.035;z-index:10;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header{height:98px;margin:0 5.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dcd3c480}.wordmark{font:italic 34px Cormorant Garamond,Georgia,serif;text-decoration:none;color:#6d5f4e}.wordmark span{font:18px Georgia;margin-left:6px;color:#a46b55}.header-note,.eyebrow,footer,.letter-top{font-size:10px;letter-spacing:2.6px}.header-note{color:#8d8274}.little-cross{color:#a7977c;font-size:24px}.welcome{text-align:center;padding:54px 20px 35px}.eyebrow{display:flex;align-items:center;justify-content:center;gap:15px;color:#9b775b;font-size:9px;letter-spacing:2.8px}.eyebrow>span{height:1px;width:28px;background:#c2ac8c}h1{font-family:Cormorant Garamond,Georgia,serif;font-weight:400;font-size:clamp(48px,5vw,72px);line-height:1.04;margin:22px 0 16px;letter-spacing:-1.8px}h1 em{font-weight:400;color:#a16d56}.intro{font-size:13px;font-weight:400;color:#8a8073;margin:0}.envelope-scene{position:relative;width:min(510px,100%);height:290px;margin:30px auto 0;display:flex;justify-content:center;align-items:center}.envelope{position:relative;width:350px;height:218px;border:0;padding:0;background:none;isolation:isolate;filter:drop-shadow(0 22px 19px #66553d22);transition:transform .3s}.envelope:hover:not(:disabled){transform:translateY(-5px) rotate(-1deg)}.envelope-back{position:absolute;inset:0;background:#d3bba0;border-radius:4px;z-index:0}.inner-letter{position:absolute;inset:15px 18px;background:#fffaf0;display:flex;flex-direction:column;padding-top:20px;transition:transform .65s .7s;z-index:2;font-family:Cormorant Garamond,Georgia,serif;font-size:27px;color:#8d624e}.inner-letter i{font-size:17px;margin-top:8px}.envelope-front{position:absolute;z-index:3;inset:0;border-radius:3px;background:linear-gradient(150deg,#f0e0c8,#e6cfb0);clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%)}.envelope-front:after{content:"";position:absolute;inset:0;background:#efdfc7;clip-path:polygon(0 100%,50% 48%,100% 100%)}.flap{position:absolute;inset:0;background:linear-gradient(160deg,#f4e6d1,#e6d2b4);clip-path:polygon(0 0,100% 0,50% 59%);transform-origin:top;transform:perspective(1000px) rotateX(0);z-index:5}.seal{position:absolute;z-index:6;top:94px;left:calc(50% - 24px);width:48px;height:48px;border-radius:46% 51% 47% 49%;background:radial-gradient(circle at 35% 30%,#b77b61,#92563f);border:3px solid #ad7157;box-shadow:0 3px 5px #70432e38,inset 0 0 0 1px #c48e6d;display:grid;place-items:center;color:#edc4a4;font:italic 26px Cormorant Garamond,Georgia,serif;text-shadow:0 1px #623d29;transition:opacity .2s}.envelope-address{position:absolute;z-index:4;bottom:19px;left:0;right:0;font:italic 24px Cormorant Garamond,Georgia,serif;color:#85705a}.envelope-address span{display:block;font:8px DM Sans,sans-serif;letter-spacing:1.7px;margin-top:5px;color:#9e8870}.opened .flap{animation:open-flap .65s ease forwards}.opened .seal{opacity:0}.opened .inner-letter{transform:translateY(-95px)}.branch{position:absolute;stroke:#8e9574;stroke-width:1.2;width:125px;opacity:.55;bottom:26px}.branch path:not(:first-child){fill:#a7ad8722}.branch-left{left:0;transform:rotate(-35deg)}.branch-right{right:-4px;transform:rotate(35deg) scaleX(-1);bottom:10px}.open-hint{font-size:10px;letter-spacing:1px;color:#96816c;margin:1px 0 0}.open-hint>span{font-size:17px;display:inline-block;margin-right:8px}.bottom-note{margin-top:37px;color:#9b8b72}.bottom-note>span{font-size:21px}.bottom-note p{font:italic 17px/1.5 Cormorant Garamond,Georgia,serif;margin:10px 0 0}footer{margin:0 5.5%;padding:22px 0;border-top:1px solid #dcd3c480;display:flex;justify-content:space-between;align-items:center;color:#9c9182;font-size:8px;letter-spacing:1.6px}.footer-center{font-size:17px;color:#ae8b73}.reading{width:min(680px,100%);padding:30px 20px 45px;margin:auto;animation:appear .8s ease}.back-button{border:0;background:none;font-size:11px;letter-spacing:.5px;color:#8c7763;padding:8px 0;margin-bottom:24px}.letter{position:relative;padding:42px 54px 52px;background:#fffcf5;box-shadow:0 8px 50px #6f543512;border:1px solid #e8dfcf}.letter-top{display:flex;justify-content:space-between;color:#a18b71;font-size:8px}.letter-top>span:last-child{font-size:23px}.draft-label{display:inline-block;margin-top:20px;font-size:9px;color:#99846e;background:#f2ecdf;padding:5px 8px;border-radius:3px}.letter h1{font-size:43px;line-height:1.15;color:#98644f;letter-spacing:-.8px;margin:22px 0 28px}.letter h1:focus{outline:none}.letter>p{font:20px/1.75 Cormorant Garamond,Georgia,serif;margin:0 0 21px}.signature{margin-top:35px;position:relative;z-index:1}.signature p{font:italic 18px Cormorant Garamond,Georgia,serif}.signature>span{font:italic 31px Cormorant Garamond,Georgia,serif;color:#98644f}.signature i{display:block;margin-top:14px;color:#ae7d63}.letter-branch{position:absolute;right:25px;bottom:27px;width:100px;stroke:#a6a284;stroke-width:1;opacity:.4}.reading-note{text-align:center;font:italic 17px Cormorant Garamond,Georgia,serif;color:#9b8b72;margin-top:26px}@keyframes appear{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media(min-height:900px)and (min-width:700px){.welcome{padding-top:70px;padding-bottom:55px}.envelope-scene,.bottom-note{margin-top:45px}}@media(max-width:600px){header{height:77px}.header-note{font-size:7px;letter-spacing:1.5px}.wordmark{font-size:30px}.welcome{padding-top:40px}.eyebrow{font-size:7px;letter-spacing:2px;gap:10px}h1{font-size:53px}.intro{font-size:11px}.envelope-scene{height:260px;margin-top:24px;width:350px;max-width:100%}.envelope{width:290px;height:190px}.seal{top:79px}.envelope-address{font-size:22px;bottom:16px}.branch{width:85px;bottom:20px}.branch-left{left:8px}.branch-right{right:8px}.bottom-note{margin-top:30px}footer{font-size:6px;letter-spacing:1px;gap:10px}.letter{padding:28px 25px 35px}.letter h1{font-size:37px}.letter>p{font-size:20px}.letter-branch{width:80px}.reading{padding-left:15px;padding-right:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@keyframes open-flap{0%{transform:perspective(1000px) rotateX(0);z-index:5}49.9%{z-index:5}50%,to{z-index:1}to{transform:perspective(1000px) rotateX(-180deg)}}.envelope-scene{margin-top:95px}.envelope{max-width:100%;flex-shrink:0}@media(hover:none){.envelope:hover:not(:disabled){transform:none}}@media(max-width:600px){.envelope-scene{margin-top:100px}}@media(prefers-reduced-motion:reduce){.opened .flap{transform:rotateX(-180deg);z-index:1}}