:root{--paper:#fbf7f1;--ink:#513d37;--rose:#a35364;--muted:#877269;--line:#dfd1c3;--serif:'Songti SC','STSong','Noto Serif CJK SC',Georgia,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(--serif);font-size:16px;line-height:1.8}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
button,a,input{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--rose);outline-offset:5px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.15;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='%238b7361' filter='url(%23n)' opacity='.2' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.masthead{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;position:relative;z-index:2;border-bottom:1px solid #a17b5520}
.wordmark{font:26px Georgia,serif;letter-spacing:3px}
.wordmark span{font-size:22px;color:var(--rose)}
.masthead>span,.eyebrow,.gate-footer,.hero-bottom,.gift-top,.moment-tag,.site-footer>span{font-family:Arial,sans-serif;letter-spacing:2.5px;font-size:10px}
.masthead>span{color:var(--muted)}
.masthead nav{display:flex;gap:34px;font-size:13px;letter-spacing:2px}
.music{background:transparent;border:1px solid var(--line);border-radius:30px;padding:7px 15px;color:var(--ink);font-size:15px}
.music span{font-size:11px;margin-left:5px}
.eyebrow{color:var(--rose);margin:0 0 28px;line-height:1.8}
.entrance{min-height:100svh;background:linear-gradient(#fbf7f13b,#fbf7f126),url('/garden.webp') center/cover fixed}
.gate{text-align:center;max-width:600px;margin:60px auto 30px;padding:0 24px}
.small-line{height:35px;width:1px;background:#ad8576;margin:0 auto 24px}
h1,h2,h3,p{margin-top:0}
h1{font-weight:400;font-size:clamp(38px,4.8vw,68px);line-height:1.45;letter-spacing:4px;margin-bottom:26px}
h1 span,h2 span{color:var(--rose)}
.intro{font-size:14px;line-height:2;color:#70584e}
#unlock-form{max-width:320px;margin:32px auto 0}
#unlock-form label{font-size:12px;letter-spacing:2px;display:block;margin-bottom:14px}
#password{width:100%;height:56px;border:1px solid #cdb2a0;background:#fffaf5cc;text-align:center;font:25px Georgia;letter-spacing:12px;padding-left:12px;color:var(--rose);border-radius:3px}
.primary{display:inline-flex;justify-content:space-between;align-items:center;gap:38px;background:var(--rose);color:white;border:1px solid var(--rose);padding:15px 26px;font-size:13px;letter-spacing:2px;transition:background .2s,transform .2s}
.primary:hover{background:#894253;transform:translateY(-2px)}
#unlock-form .primary{width:100%;margin-top:14px}
.error{font-size:12px;line-height:1.6;color:#8b324a;min-height:24px;margin:10px 0 0}
.handwritten{font:italic 28px Georgia,serif;color:#a27666;line-height:1.6}
.gate>.handwritten{margin:16px 0}
.gate-footer{display:flex;justify-content:space-between;padding:30px 5.5%;font-size:9px;letter-spacing:2px;color:var(--muted)}
.hero{text-align:center;min-height:760px;height:calc(100svh - 100px);max-height:1080px;position:relative;padding:70px 24px 100px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#fcf7ef15,#fff8ef08),url('/garden.webp') center/cover}
.hero .eyebrow{margin-bottom:18px}
.script-title{font:italic clamp(24px,3vw,39px) Georgia,serif;color:#a77762;margin-bottom:22px}
.hero h1{font-size:clamp(40px,5vw,72px);margin:0 0 24px}
.hero-copy{font-size:14px;line-height:2.1;margin-bottom:34px}
.hero-bottom{position:absolute;bottom:28px;left:5.5%;right:5.5%;display:flex;align-items:center;justify-content:space-between;gap:20px;letter-spacing:1.4px;font-size:9px}
.hero-bottom i{color:var(--rose);margin:0 10px;font-size:14px;font-style:normal}
.hero-bottom a{font-family:var(--serif);font-size:11px}
.section{padding:110px 7%;max-width:1600px;margin:auto}
h2{font-size:clamp(29px,3vw,44px);line-height:1.6;font-weight:400;letter-spacing:2px}
.letter{display:grid;grid-template-columns:1fr 1.25fr;gap:8%;align-items:start}
.section-intro{padding-top:55px;position:sticky;top:40px}
.section-intro .handwritten{font-size:22px;margin-top:35px}
.letter-paper{background:#fffdf8;box-shadow:0 16px 70px #6e422808;border:1px solid #e8ded1;padding:45px 50px;position:relative;transform:rotate(-.5deg)}
.letter-date{font-size:10px;letter-spacing:2px;color:#a48c7e;display:block;margin-bottom:32px}
.letter-paper h3{font-weight:400;font-size:20px}
.letter-paper p{font-size:14px;line-height:2.2;margin-bottom:19px;color:#735e53}
.letter-paper .letter-emphasis{color:var(--rose)}
.signature{text-align:right}
.signature span,.signature small{display:block;font-size:11px;color:var(--muted)}
.signature strong{font:italic 32px Georgia;color:var(--rose)}
.moments{border-top:1px solid var(--line);text-align:center}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;text-align:left;margin-top:65px}
.timeline article{border-top:1px solid #c5a590;padding-top:25px;position:relative}
.moment-number{position:absolute;right:0;top:28px;font:italic 15px Georgia;color:#b3937d}
.date{font:40px Georgia;color:#a5745f;margin-bottom:25px}
.date span{font-size:18px}
.timeline h3{font-weight:400;font-size:19px}
.timeline article>p:not(.date){font-size:13px;line-height:2.1;color:var(--muted)}
.moment-tag{font-size:8px;letter-spacing:1.7px;display:block;margin-top:28px;color:#a08573}
.surprises{text-align:center;background:#f4ece5;max-width:none}
.section-copy{font-size:14px;color:var(--muted);line-height:2}
.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:50px auto 30px}
.gift{padding:27px 30px 25px;display:flex;flex-direction:column;align-items:center;min-height:355px;border:1px solid #cfb9a7;background:#fbf6ef;color:var(--ink);transition:transform .3s,box-shadow .3s}
.gift:not(:disabled):hover{transform:translateY(-7px);box-shadow:0 16px 35px #8b604c15}
.gift:disabled{opacity:.62}
.gift-top{font-size:8px;letter-spacing:1.2px;width:100%;display:flex;justify-content:space-between}
.gift-top i{font-style:normal}
.gift strong{font:italic 91px Georgia;color:#a87961;margin:22px 0 0}
.gift-title{font-size:23px;letter-spacing:5px;margin:0 0 8px}
.gift-caption{font-size:11px;color:var(--muted)}
.gift-action{border-top:1px solid var(--line);margin-top:30px;padding-top:15px;font-size:11px;letter-spacing:2px;width:100%;color:var(--rose)}
.ending{padding:110px 24px 95px;text-align:center;background:linear-gradient(#fbf7f1c9,#fbf7f1ab),url('/garden.webp') center bottom/cover}
.ending h2{font-size:clamp(32px,4vw,50px)}
.ending>p:not(.eyebrow):not(.handwritten){font-size:14px}
.ending .handwritten{font-size:30px;margin-top:32px}
.family{font-size:11px;letter-spacing:3px}
.site-footer{padding:30px 5.5%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}
.site-footer p{margin:0;font-size:11px;letter-spacing:2px}
.site-footer>span{font-size:8px;color:var(--muted)}
dialog{border:1px solid #d5bba7;background:#fffaf3;color:var(--ink);padding:50px 40px 35px;text-align:center;width:min(460px,calc(100% - 32px));max-height:90svh;overflow:auto;box-shadow:0 30px 120px #43222130}
dialog::backdrop{background:#39292bd0;backdrop-filter:blur(7px)}
dialog>button.close-dialog:first-child{position:absolute;right:14px;top:8px;font-size:28px;background:none;border:0;color:var(--muted)}
dialog .eyebrow{margin-bottom:10px}
dialog h2{font-size:33px;margin-bottom:15px}
dialog p{font-size:13px;line-height:2}
#qr-slot img{display:block;width:min(100%,250px);height:auto;margin:20px auto;background:white;padding:12px}
#qr-slot .pending{margin:24px 0;padding:23px 16px;border:1px dashed #d1b6a3;background:#f6ece4;font-size:13px;color:#967366}
.modal-sign{font-style:italic;color:var(--rose)}
dialog .primary{width:100%}
.hero,.gate{animation:arrive 1.1s ease both}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:translateY(0)}
}

@media(min-width:1500px){.hero{background-position:center 58%}
}
@media(max-width:760px){.masthead{height:77px;padding:0 23px}
.masthead>span{font-size:7px;letter-spacing:1.2px}
.masthead .edition{display:none}
.wordmark{font-size:23px}
.masthead nav{gap:18px;font-size:11px;letter-spacing:0}
.music{padding:5px 10px}
.music span{display:none}
.gate{margin:50px auto 15px}
.gate h1{font-size:41px}
.gate-footer{flex-direction:column;align-items:center;gap:12px;padding:20px}
.entrance{background-attachment:scroll;background-position:47% center}
.hero{min-height:690px;height:calc(100svh - 77px);padding:55px 22px 105px;background-position:49% center}
.hero h1{font-size:41px;letter-spacing:2px}
.hero .eyebrow{font-size:8px;letter-spacing:1.7px}
.script-title{font-size:25px}
.hero-copy{font-size:12px;max-width:325px;text-wrap:pretty}
.hero-copy br{display:none}
.hero-bottom{flex-direction:column;gap:13px;bottom:24px}
.hero-bottom>span:last-child{display:none}
.section{padding:68px 24px}
.letter{grid-template-columns:1fr;gap:27px}
.section-intro{position:static;text-align:center;padding-top:0}
.section-intro .handwritten{margin-top:18px;font-size:21px}
.letter-paper{padding:30px 25px}
.letter-paper p{font-size:13px}
.letter-date{font-size:9px;letter-spacing:1px}
.timeline{grid-template-columns:1fr;gap:36px;margin-top:35px}
.timeline article{padding-top:22px}
.date{margin-bottom:20px}
.moment-tag{margin-top:20px}
.gift-grid{grid-template-columns:1fr;gap:18px;margin-top:32px}
.gift{min-height:300px;padding:24px 30px}
.gift strong{font-size:78px;margin-top:12px}
.gift-action{margin-top:23px}
.ending{padding:75px 25px}
.ending .eyebrow{font-size:8px;letter-spacing:1.6px}
.site-footer{flex-direction:column;gap:13px;padding:25px}
.eyebrow{font-size:9px;margin-bottom:20px}
dialog{padding:44px 25px 25px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}

.hero h1 span{white-space:nowrap}

@media(max-height:780px) and (min-width:761px){.gate{margin-top:25px}
.gate h1{font-size:48px;margin-bottom:15px}
.gate .small-line{height:20px;margin-bottom:15px}
.gate .eyebrow{margin-bottom:15px}
#unlock-form{margin-top:20px}
.gate-footer{padding-top:12px}
}