@font-face{font-family:HuiyuanInk;src:url('fonts/lettering.woff2') format('woff2');font-display:swap;font-weight:400}*{box-sizing:border-box}:root{--paper:#f0f0e7;--ink:#253f40;--red:#a54835;--muted:#78857b;--line:#253f402a}html{scroll-behavior:smooth;scroll-padding-top:50px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Microsoft YaHei','PingFang SC',sans-serif;-webkit-font-smoothing:antialiased}body:before{content:'';position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:7px}header{height:100px;margin:0 5%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.masthead{font-family:SimSun,serif;font-size:16px;letter-spacing:4px;display:flex;align-items:center;gap:28px}.masthead span{font-family:inherit;font-size:10px;color:var(--muted);letter-spacing:2px;border-left:1px solid var(--line);padding-left:24px}#music{padding:10px 0;display:flex;align-items:center;gap:12px;background:none;border:0;color:var(--ink);font-size:11px;letter-spacing:1px}.sound{height:17px;display:flex;align-items:center;gap:3px}.sound i{width:1px;background:var(--ink);height:8px}.sound i:nth-child(2){height:16px}.sound i:nth-child(3){height:12px}.sound i:nth-child(4){height:5px}#music[aria-pressed=true] .sound i{animation:play 1s ease-in-out infinite alternate}#music[aria-pressed=true] .sound i:nth-child(2){animation-delay:.3s}main{overflow:hidden}.hero{position:relative;min-height:700px;height:calc(100svh - 100px);max-height:960px;display:grid;grid-template-columns:57% 43%;align-items:center;padding:25px 8% 100px}.folio{position:absolute;left:8%;top:46px;font-family:SimSun,serif;font-size:10px;letter-spacing:3px;color:var(--muted)}.folio span{margin-left:22px;color:var(--ink)}.name-art{position:relative;width:100%;max-width:770px;align-self:center;margin-left:-25px;margin-top:-30px;z-index:1}.name-art img{display:block;width:100%;height:auto}.seal{position:absolute;left:73%;top:82%;display:flex;gap:3px;flex-direction:row-reverse;color:var(--red);border:2px solid var(--red);border-radius:2px;padding:4px 3px;outline:1px solid var(--red);outline-offset:-5px;transform:rotate(-5deg);font:21px HuiyuanInk,serif;line-height:1.08}.seal span{writing-mode:vertical-rl}.hero-copy{position:relative;z-index:2;padding-left:10%;margin-top:30px}.pretitle{font:11px SimSun,serif;letter-spacing:4px;color:var(--muted);margin:0 0 25px}h1{font-size:clamp(33px,3.1vw,52px);font-weight:400;line-height:1.65;letter-spacing:3px;margin:0}h1>span{display:block}h1 .age{font-family:HuiyuanInk,serif;font-size:clamp(48px,4.4vw,73px);color:var(--red);letter-spacing:3px;margin-bottom:4px}.small-copy{font-size:13px;line-height:2.3;color:#68796e;letter-spacing:2px;margin:26px 0 32px}.read-on{font:11px SimSun,serif;letter-spacing:2px;display:inline-flex;align-items:center;gap:38px;border-bottom:1px solid var(--line);padding-bottom:12px}.read-on span{font:19px serif}.margin-note{position:absolute;right:3.4%;top:26%;writing-mode:vertical-rl;font:10px SimSun,serif;letter-spacing:5px;color:var(--muted)}.hero-bottom{position:absolute;bottom:35px;left:8%;right:8%;display:flex;justify-content:space-between;font:10px SimSun,serif;letter-spacing:2px;color:#697b70;z-index:2}.mountain{position:absolute;width:100%;height:22%;bottom:0;left:0;fill:none;stroke:#6d8e7c;stroke-width:.7;opacity:.3;pointer-events:none}.mountain path+path{stroke-width:.5;opacity:.6}.journey{background:#dce4dc;min-height:640px;padding:100px 8% 110px;position:relative;display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center}.section-side{position:absolute;top:33px;left:8%;font:10px SimSun,serif;letter-spacing:3px;color:#728174}.city{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px}.city-note{font:10px SimSun,serif;letter-spacing:3px;color:#6e8174}.city h2{font:clamp(68px,7.7vw,125px) HuiyuanInk,serif;font-weight:400;margin:15px 0;color:#4c6c5a;letter-spacing:-8px}.from{align-self:start;margin-top:45px;transform:rotate(-5deg)}.to{align-self:end;margin-bottom:12px;transform:rotate(3deg)}.to h2{color:#3c5b60}.roman{font:8px Arial,sans-serif;letter-spacing:4px;color:#728174}.journey-copy{text-align:center;position:relative;z-index:1;line-height:1.8}.little-word{font:10px SimSun,serif;letter-spacing:2px;color:#809080}.journey-copy>p:not(.journey-message){font-family:SimSun,serif;font-size:18px;letter-spacing:8px;margin:13px 0}.journey-rule{height:46px;width:1px;background:#60776755;margin:28px auto}.journey-copy .journey-message{font:17px/2.2 SimSun,serif;letter-spacing:2px;margin:0}.river{position:absolute;bottom:5px;left:0;width:100%;height:210px;fill:none;stroke:#52796f;stroke-width:.6;opacity:.16;pointer-events:none}.greeting{position:relative;padding:115px 12% 105px;display:grid;grid-template-columns:1fr 2fr;gap:50px;min-height:720px}.address{font:12px/2.3 SimSun,serif;letter-spacing:3px;color:var(--muted);padding-top:16px}.address span{font:33px/2 HuiyuanInk,serif;color:var(--ink);letter-spacing:3px}.greeting-content{z-index:1}.greeting-caption{font-size:10px;color:var(--muted);letter-spacing:3px;margin:0 0 24px}.greeting h2{font-size:38px;font-weight:400;line-height:1.7;letter-spacing:3px;margin:0}.greeting h2 span{font:78px/1.4 HuiyuanInk,serif;color:var(--red);margin-left:100px}.greeting-body{font:15px/2.5 SimSun,serif;letter-spacing:2px;margin:24px 0 34px}.receive{background:none;border:0;border-bottom:1px solid var(--red);color:var(--red);padding:0 0 12px;font:12px SimSun,serif;letter-spacing:2px}.receive span{margin-left:55px;font:20px serif}.receive:disabled{cursor:default}.reply{min-height:40px;font:21px/1.8 HuiyuanInk,serif;color:var(--red);margin-top:25px}.date-mark{position:absolute;right:10%;top:18%;font:130px/1 HuiyuanInk,serif;opacity:.055;transform:rotate(8deg);pointer-events:none}.greeting.accepted .reply{animation:appear 1s ease both}footer{border-top:1px solid var(--line);margin:0 5%;padding:30px 0 36px;display:flex;align-items:center;justify-content:space-between;gap:20px;font:10px SimSun,serif;color:var(--muted);letter-spacing:1px}.footer-mark{font:24px HuiyuanInk,serif;color:var(--ink)}.footer-mark span{display:block;font:9px SimSun,serif;letter-spacing:2px;margin-top:10px;color:var(--muted)}.footer-route i{font-style:normal;margin:0 10px}a:hover{color:var(--red)}@keyframes play{to{transform:scaleY(.4)}}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:760px){header{height:78px;margin:0 7%}.masthead{font-size:13px;letter-spacing:2px;gap:14px}.masthead span{padding-left:14px;font-size:8px;letter-spacing:1px}#music{font-size:9px;gap:8px}.sound{gap:2px}.hero{min-height:820px;height:auto;max-height:none;display:block;padding:65px 8% 100px}.folio{top:27px;font-size:9px}.name-art{width:90%;max-width:430px;margin:-20px 0 0 -6%}.hero-copy{padding:0 0 0 30%;margin:-4px 0 0}.pretitle{font-size:9px;margin-bottom:15px;letter-spacing:3px}h1{font-size:32px;line-height:1.6;letter-spacing:2px}h1 .age{font-size:47px;letter-spacing:3px}.small-copy{font-size:11px;letter-spacing:1px;margin:20px 0 24px}.read-on{font-size:10px;gap:30px}.seal{font-size:17px;padding:4px 3px;top:85%}.margin-note{right:7%;top:85px;font-size:9px;letter-spacing:4px}.hero-bottom{bottom:25px;left:8%;right:8%;font-size:8px;letter-spacing:0;gap:10px}.mountain{height:14%}.journey{min-height:670px;padding:75px 8%;display:grid;grid-template-columns:1fr 1fr}.city{gap:4px}.city h2{font-size:70px;margin:10px 0}.city-note{font-size:8px;letter-spacing:1px}.roman{font-size:7px;letter-spacing:2px}.from{grid-column:1;grid-row:1;margin:10px 0 0}.to{grid-column:2;grid-row:3;margin:0}.journey-copy{grid-column:1/3;grid-row:2;margin:20px 0}.journey-copy .little-word,.journey-copy>p:not(.journey-message){display:none}.journey-rule{height:35px;margin:0 auto 20px}.journey-copy .journey-message{font-size:18px;letter-spacing:2px}.section-side{font-size:9px;letter-spacing:2px}.river{height:170px;bottom:20px}.greeting{display:block;padding:65px 9% 50px;min-height:650px}.address{font-size:10px;line-height:1.7;padding:0;margin-bottom:40px}.address span{font-size:27px}.greeting-content{position:relative;padding-left:10%}.greeting-caption{font-size:9px;letter-spacing:2px}.greeting h2{font-size:28px;letter-spacing:2px}.greeting h2 span{font-size:65px;margin-left:50px}.greeting-body{font-size:13px;letter-spacing:1px;line-height:2.5;margin:20px 0 30px}.date-mark{font-size:100px;right:8%;top:30%}.reply{font-size:19px}.receive{font-size:11px}.receive span{margin-left:35px}footer{margin:0 7%;padding:25px 0;flex-wrap:wrap;gap:22px;font-size:9px}.footer-mark{font-size:22px}.footer-mark span{font-size:8px}.footer-route{width:100%;padding-top:5px;text-align:right}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}