@charset "UTF-8";

:root{--paper:#f8f3eb;--ink:#443c36;--muted:#7d7065;--rose:#a85144;--rose-dark:#883f35;--line:#dfd5c8;--serif:Georgia,'Times New Roman',serif;--sans:'Avenir Next',Avenir,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased}
body::before{position:fixed;inset:0;content:"";pointer-events:none;z-index:5;opacity:.16;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23987f60' opacity='.2' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--rose);outline-offset:6px}
.site-header{max-width:1320px;padding:30px 60px;margin:auto;display:flex;align-items:center;justify-content:space-between}
.brand{text-decoration:none;font-family:var(--serif);font-style:italic;font-size:18px;display:flex;gap:12px;align-items:center}
.brand>span{font-size:29px;color:var(--rose)}
.header-note{font-size:10px;letter-spacing:2.2px;color:var(--muted)}
main{max-width:1320px;margin:auto}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:55px;padding:45px 100px 87px;min-height:760px}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.6px;line-height:1.8;margin:0 0 21px;color:var(--rose)}
.hero .eyebrow{display:flex;gap:12px;align-items:center}
.eyebrow>span{width:23px;height:1px;background:var(--rose)}
h1,h2,p{margin-top:0}
h1{font-family:var(--serif);font-weight:400;line-height:1;margin-bottom:27px}
.age{display:block;font-size:180px;letter-spacing:-13px;color:var(--rose);line-height:.88;margin:0 0 17px -9px}
.years{font-size:47px;letter-spacing:-2.1px;font-style:italic;white-space:nowrap}
.intro{font-family:var(--serif);font-size:22px;line-height:1.55;margin-bottom:19px}
.hero-note{font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:27px}
.button{background:var(--rose);color:#fffaf4;display:inline-flex;align-items:center;justify-content:center;gap:29px;border:1px solid var(--rose);border-radius:3px;padding:17px 24px;min-height:52px;font-size:12px;font-weight:500;letter-spacing:.3px;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.button:hover{background:var(--rose-dark);transform:translateY(-2px);box-shadow:0 5px 15px #8c514320}
.button>span{font-size:20px;line-height:14px}
.button:disabled{opacity:.65;cursor:wait}
.handwritten{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--rose)}
.under-button{display:block;font-size:15px;margin:18px 0 0 8px;transform:rotate(-3deg)}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:550px;margin-top:24px}
.art-orbit{position:absolute;width:450px;height:490px;border-radius:50%;background:#efe6d9;opacity:.65;transform:rotate(25deg)}
.birthday-card{position:relative;width:355px;background:#fffdf6;transform:rotate(7deg);padding:29px 29px 24px;box-shadow:6px 18px 44px #6751431c,0 1px 3px #6751430c;border:1px solid #e9e0d1;z-index:1}
.card-top{text-align:center;font-size:7px;letter-spacing:2px;color:var(--muted)}
.flower-art{display:block;width:100%;height:284px;margin:9px auto -3px;object-fit:contain}
.card-title{font-family:var(--serif);font-size:34px;line-height:1.18;text-align:center;letter-spacing:-1px;margin-bottom:35px}
.card-title em{color:var(--rose);font-weight:normal}
.card-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;font-size:7px;letter-spacing:1.5px}
.love-stamp{position:absolute;right:-14px;bottom:52px;z-index:2;border-radius:50%;background:#eee1bf;border:1px solid #c9b887;outline:5px solid #eee1bf;width:113px;height:113px;text-align:center;padding-top:19px;font-size:8px;letter-spacing:.5px;line-height:1.2;transform:rotate(-12deg);color:#716138}
.love-stamp span{font-family:var(--serif);font-size:32px;line-height:1.35}
.art-caption{position:absolute;bottom:-32px;left:37px;font-size:17px;transform:rotate(-5deg)}
.little-star{position:absolute;color:#ad8e56;font-size:40px;z-index:2}
.star-one{top:4px;left:9px;transform:rotate(12deg)}
.star-two{bottom:54px;left:-21px;font-size:30px}
.chapter-divider{display:flex;align-items:center;justify-content:center;gap:24px;margin:0 100px}
.chapter-divider>span{height:1px;background:var(--line);flex:1}
.chapter-divider p{font-size:8px;letter-spacing:2.5px;color:var(--muted);margin:0;text-align:center}
.letter{display:grid;grid-template-columns:54px minmax(0,590px) 1fr;gap:26px;margin:88px 100px 90px}
.letter-number{font-family:var(--serif);font-style:italic;color:#998979;font-size:18px;padding-top:2px}
h2{font-family:var(--serif);font-size:43px;font-weight:400;letter-spacing:-1.5px;line-height:1.15}
.letter h2{margin-bottom:25px}
.letter .eyebrow{margin-bottom:14px}
.letter-text{font-size:14px;line-height:1.95;color:#6c6056;max-width:550px}
.letter-text p{margin-bottom:18px;white-space:pre-line;overflow-wrap:anywhere}
.signature{font-size:22px;margin:27px 0 0}
.margin-note{font-size:17px;line-height:1.6;align-self:center;justify-self:end;transform:rotate(9deg);padding-left:15px}
.margin-note span{display:block;font-size:39px;margin:9px 0 0 30px}
.surprise{position:relative;text-align:center;background:#f0e5dc;border:1px solid #e9dcd0;margin:0 60px;padding:57px 24px 35px;border-radius:180px 180px 5px 5px}
.surprise h2{margin-bottom:15px}
.surprise .eyebrow{margin-bottom:15px}
.section-intro{font-size:13px;line-height:1.8;color:var(--muted)}
.envelope{position:relative;width:260px;height:171px;margin:68px auto 30px;filter:drop-shadow(0 10px 9px #65463315);perspective:900px}
.envelope-back{position:absolute;inset:0;background:#c99b88;border-radius:4px}
.envelope-letter{position:absolute;left:20px;right:20px;top:-23px;bottom:15px;background:#fffaf0;font-family:var(--serif);font-style:italic;font-size:23px;padding:25px 0;color:var(--rose);transform:rotate(-4deg);z-index:1;transition:transform .6s .15s}
.envelope-letter span{display:block;margin-top:6px;font-size:25px}
.envelope-front{position:absolute;inset:0;background:#e4bbaa;clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);z-index:3;border-radius:4px}
.envelope-front::after{content:"";position:absolute;inset:0;background:#ecc5b3;clip-path:polygon(0 100%,50% 42%,100% 100%)}
.envelope-flap{position:absolute;inset:0;background:#dbad98;clip-path:polygon(0 0,100% 0,50% 55%);transform-origin:top;transition:transform .5s;z-index:4}
.wax-seal{position:absolute;left:calc(50% - 22px);top:69px;background:var(--rose);color:#eac3b0;width:44px;height:44px;border-radius:50%;border:3px double #c17b67;display:grid;place-items:center;font-family:var(--serif);font-size:27px;z-index:5;box-shadow:0 2px 4px #79564630;transition:opacity .2s}
.is-open .envelope-flap{transform:rotateX(180deg);z-index:0}
.is-open .envelope-letter{transform:translateY(-28px) rotate(-4deg)}
.is-open .wax-seal{opacity:0}
.small-note{font-size:10px;color:var(--muted);margin-top:17px;line-height:1.7}
footer{display:flex;align-items:center;justify-content:space-between;padding:37px 61px;font-size:10px;letter-spacing:.3px;color:var(--muted)}
.footer-heart{font-size:24px;color:var(--rose)}
.modal-open{overflow:hidden}
dialog{padding:24px;border:1px solid #e6d8c9;border-radius:6px;width:min(580px,calc(100% - 28px));max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--paper);color:var(--ink);box-shadow:0 25px 100px #2c201f40}
dialog::backdrop{background:#352b286b;backdrop-filter:blur(6px)}
.close-button{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--paper);color:var(--muted);font-size:27px;cursor:pointer;z-index:1}
.close-button:hover{background:#e9dfd2}
.gift-certificate{text-align:center;border:1px solid #d4bfa5;padding:40px 26px 28px;position:relative}
.gift-certificate::before{content:"";position:absolute;inset:5px;border:1px solid #e6d8c5;pointer-events:none}
.gift-certificate .eyebrow{font-size:9px;margin-bottom:12px}
.gift-heart{font-family:var(--serif);font-size:40px;color:var(--rose);display:block;margin-bottom:14px}
.gift-certificate h2{font-size:35px;margin-bottom:13px}
.gift-for{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.gift-amount{font-family:var(--serif);color:var(--rose);font-size:86px;letter-spacing:-5px;margin:18px 0 22px;line-height:1.1}
.gift-amount span{font-size:27px;letter-spacing:-1px}
.gift-rule{display:block;width:60px;height:1px;background:#c9aa88;margin:0 auto 21px}
#gift-description{font-size:13px;line-height:1.85;max-width:360px;margin:0 auto 24px;overflow-wrap:anywhere;white-space:pre-line}
.gift-signature{font-size:19px;overflow-wrap:anywhere}
.certificate-note{font-size:7px;letter-spacing:2px;margin:25px 0 0;color:var(--muted)}
.dialog-actions{text-align:center;padding-top:22px}
.dialog-actions .button{font-size:11px;padding:14px 21px}
.dialog-actions p{font-size:10px;color:var(--muted);margin:12px 0 0}
.confetti{position:fixed;inset:0;z-index:10;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;left:var(--x);top:-20px;width:8px;height:13px;animation:fall var(--duration) var(--delay) ease-in both}
@keyframes fall{from{transform:translate3d(0,-20px,0) rotate(0)}to{transform:translate3d(var(--drift),110vh,0) rotate(700deg)}}
@media(min-width:1400px){.hero{padding-top:65px;padding-bottom:110px}}
@media(max-width:1050px){.site-header{padding:25px 35px}.hero{padding:40px 55px 80px;gap:30px;min-height:700px}.age{font-size:155px}.years{font-size:39px}.birthday-card{width:295px;padding:25px}.flower-art{height:239px}.card-title{font-size:29px}.art-orbit{width:340px;height:410px}.love-stamp{right:-7px;bottom:61px;width:95px;height:95px;font-size:7px;padding-top:13px}.hero-art{min-height:480px}.art-caption{left:10px;font-size:15px;bottom:-15px}.letter{margin:70px 55px;grid-template-columns:35px minmax(0,1fr);gap:20px}.margin-note{display:none}.chapter-divider{margin:0 55px}.surprise{margin:0 35px}footer{padding:30px 35px}}
@media(max-width:850px){.site-header{padding:20px 23px}.brand{font-size:16px}.header-note{display:none}.hero{grid-template-columns:minmax(0,1fr);overflow:hidden;text-align:center;padding:37px 24px 64px;gap:40px}.hero .eyebrow{justify-content:center;font-size:9px;margin-bottom:25px}.age{font-size:155px;margin-left:-8px}.years{font-size:clamp(32px,5.7vw,40px);letter-spacing:-1.5px}.intro{font-size:20px}.hero-note{font-size:12px}.under-button{margin:19px 0 0}.hero-art{width:310px;max-width:100%;min-height:440px;margin:6px auto 20px}.birthday-card{width:268px;padding:25px 21px 20px;transform:rotate(6deg)}.card-top{font-size:6px;letter-spacing:1.7px}.flower-art{height:223px}.card-title{font-size:28px;margin-bottom:28px}.card-bottom{font-size:6px;letter-spacing:1px}.art-orbit{width:310px;max-width:100%;height:380px;transform:none}.love-stamp{right:-1px;bottom:37px;width:91px;height:91px}.art-caption{bottom:-26px;left:24px;font-size:15px}.star-one{left:1px;top:0;font-size:30px}.star-two{bottom:27px;left:0;font-size:25px}.chapter-divider{margin:10px 25px 0;gap:13px}.chapter-divider p{font-size:6px;letter-spacing:1.5px}.letter{margin:52px 29px 55px;grid-template-columns:1fr;gap:16px}.letter-number{font-size:15px}.letter h2{font-size:38px;margin-bottom:22px}.letter .eyebrow{font-size:8px;letter-spacing:2px}.letter-text{font-size:13px;line-height:1.9}.signature{font-size:21px}.surprise{margin:0 15px;padding:47px 18px 26px;border-radius:110px 110px 4px 4px}.surprise h2{font-size:33px;letter-spacing:-1.3px}.section-intro{font-size:12px;max-width:240px;margin:0 auto}.surprise .eyebrow{font-size:8px}.envelope{transform:scale(.9);margin-top:55px;margin-bottom:20px}footer{flex-direction:column;gap:12px;padding:30px 20px;font-size:9px}.footer-heart{order:-1}.gift-certificate{padding:30px 15px 25px}.gift-certificate h2{font-size:29px}.gift-amount{font-size:70px}.gift-certificate .eyebrow{font-size:8px;letter-spacing:2px}dialog{padding:17px}.gift-signature{font-size:17px}.certificate-note{font-size:6px;letter-spacing:1.5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.button:hover{transform:none}}
@media print{@page{size:A4 portrait;margin:25mm}body{background:white}body::before,.site-header,main,.confetti,.close-button,.dialog-actions{display:none!important}body.modal-open{overflow:visible}dialog[open]{position:static;display:block;width:100%;max-height:none;overflow:visible;border:none;padding:0;box-shadow:none;margin:20mm auto;background:white}dialog::backdrop{background:transparent}.gift-certificate{break-inside:avoid;padding:50px 35px}.gift-certificate::before{inset:7px}.gift-amount{font-size:86px}.gift-certificate h2{font-size:35px}}

/* The private invitation, shown before the birthday page is accessible. */
.login-body{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:28px 18px}
.login-card{width:min(100%,480px);margin:auto;text-align:center;padding:48px 32px 32px;background:#fffaf3;border:1px solid var(--line);border-radius:5px;box-shadow:0 18px 60px #67514310}
.login-card .gift-heart{font-size:48px;margin-bottom:24px}
.login-card h1{font-size:clamp(29px,6vw,39px);font-style:italic;line-height:1.2;letter-spacing:-1.4px;margin-bottom:20px}
.login-intro{font-size:13px;line-height:1.85;color:var(--muted);margin-bottom:28px}
.login-card label{display:block;font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:12px}
.login-card input{display:block;width:200px;max-width:100%;height:60px;margin:0 auto;padding:10px 12px 10px 22px;background:var(--paper);border:1px solid #cdbbaa;border-radius:3px;text-align:center;font-family:var(--sans);font-size:27px;letter-spacing:10px;color:var(--ink)}
.login-card input::placeholder{font-family:var(--serif);font-size:18px;letter-spacing:1px;color:#b48b7c;opacity:1}
.login-error{font-size:12px;line-height:1.6;color:var(--rose-dark);min-height:20px;margin:13px 0 16px}
.login-card .button{min-width:200px}
.login-signoff{font-size:17px;margin:30px 0 0}
@media(max-width:380px){.login-card{padding:35px 20px 28px}}