@charset "UTF-8";
:root{--paper:#f7f6ef;--ink:#3b4b48;--muted:#727f78;--line:#dce2d9;--blue:#7cabb7;--green:#79977e;--orange:#d29867;--serif:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong",serif;--sans:"PingFang SC","Microsoft YaHei",system-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:15px/1.8 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #557f86;outline-offset:6px}::selection{background:#d4e6dd}h1,h2,h3,p,figure{margin:0}button{cursor:pointer}.wrap{width:min(1160px,calc(100% - 100px));margin-inline:auto}.skip-link{position:fixed;top:-90px;left:20px;background:var(--paper);padding:10px;z-index:10}.skip-link:focus{top:10px}.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:32px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;font:30px/1 var(--serif);letter-spacing:2px}.brand-seal{font:35px/1.1 var(--serif);border:1px solid #97a89a;border-radius:4px;padding:6px 7px 8px;color:#64866b;transform:rotate(-4deg)}.brand small{display:block;font:8px/1.7 var(--sans);letter-spacing:1.6px;margin-top:8px}.site-header nav{display:flex;gap:36px;font-size:12px;letter-spacing:1.5px}.site-header nav a:hover{color:#64866b}.hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;padding-block:72px 84px}.eyebrow{font-size:10px;letter-spacing:2.1px;color:#708e7a}.little-sun{font-size:21px;color:var(--orange);vertical-align:middle;margin-right:10px}.hero h1{font:clamp(48px,5vw,70px)/1.38 var(--serif);font-weight:500;letter-spacing:4px;margin:24px 0 23px}.cat-word{position:relative;display:inline-block}.cat-word svg{position:absolute;bottom:-1px;left:-3px;width:100%;height:15px;fill:none;stroke:#dfb585;stroke-width:5;stroke-linecap:round}.hero-description{line-height:2.1;color:#6d7c75;font-size:14px;letter-spacing:1.1px}.text-link{display:inline-flex;align-items:center;gap:28px;font-size:13px;border-bottom:1px solid #9eb3a5;margin-top:29px;padding-bottom:8px}.text-link span{font-size:20px;transition:transform .2s}.text-link:hover span{transform:translate(2px,-2px)}.weather-note{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:#748178;font-size:10px;letter-spacing:.5px;margin-top:48px}.status-dot{width:5px;height:5px;display:inline-block;background:#8fac86;border-radius:50%}.note-rule{width:20px;height:1px;background:#bbc9bc}.hero-picture{position:relative;padding:12px 12px 0;background:#fffdf7;box-shadow:0 6px 32px #5e766112;transform:rotate(1.6deg);margin:15px 0 0 5px}.hero-picture>img{display:block;width:100%;height:auto;aspect-ratio:720/650;object-fit:cover;border:1px solid #d6e4df}.hero-picture figcaption{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;padding:14px 4px 15px;color:#7d8b7f}.photo-corner{position:absolute;z-index:1;left:38%;top:-10px;width:100px;height:27px;background:#e1e6d6bd;transform:rotate(-6deg)}.floating-note{position:absolute;right:-18px;bottom:63px;font:15px/1.8 var(--serif);letter-spacing:1px;background:#f4e7c9;padding:16px 20px;transform:rotate(-7deg);box-shadow:2px 3px 0 #9d987b12}.moments{border-top:1px solid var(--line);padding:62px 0 76px}.section-intro{text-align:center}.section-intro h2,.letter-heading h2{font:30px/1.65 var(--serif);letter-spacing:2px;margin:12px 0 10px}.section-intro>p:last-child{color:var(--muted);font-size:13px}.moment-list{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:42px}.moment{position:relative;text-align:center;padding:0 20px}.moment+.moment{border-left:1px solid var(--line)}.moment-number{position:absolute;top:5px;left:24px;font:12px var(--serif);color:#98a99c}.moment h3{font:19px var(--serif);letter-spacing:1px;margin:22px 0 15px}.moment p{font-size:12px;line-height:2;color:var(--muted)}.tiny-caption{display:block;color:#8f9b90;font:italic 12px var(--serif);margin-top:18px}.mini-art{height:95px;width:132px;margin:auto;position:relative}.cup{position:absolute;left:36px;top:31px;width:57px;height:48px;background:#c2d5c2;border-radius:3px 3px 21px 21px;border:2px solid #91b199}.cup:after{content:"";position:absolute;right:-18px;top:3px;width:17px;height:24px;border:4px solid #91b199;border-left:0;border-radius:0 15px 15px 0}.saucer{position:absolute;left:27px;bottom:8px;width:80px;height:9px;background:#d6dfcb;border-radius:50%}.steam{position:absolute;left:53px;top:-8px;font-size:26px;color:#c6c6af;transform:rotate(90deg)}.sea-sun{position:absolute;left:70px;top:9px;width:27px;height:27px;background:#e4c98d;border-radius:50%}.sea i{position:absolute;left:18px;top:42px;width:97px;height:16px;border-top:3px solid #92bfca;border-radius:50%;transform:rotate(-3deg)}.sea i:nth-of-type(2){top:56px;width:112px;left:10px}.sea i:nth-of-type(3){top:71px;width:82px;left:26px}.paw b{position:absolute;left:39px;bottom:7px;width:55px;height:42px;border-radius:50% 50% 42% 42%;background:#e0b58e;transform:rotate(-10deg)}.paw i{position:absolute;background:#e0b58e;width:19px;height:24px;border-radius:50%;left:22px;top:37px;transform:rotate(-28deg)}.paw i:nth-child(2){left:43px;top:16px;transform:rotate(-12deg)}.paw i:nth-child(3){left:69px;top:13px;transform:rotate(12deg)}.paw i:nth-child(4){left:91px;top:31px;transform:rotate(30deg)}.letter-section{background:#edf1e9;border-top:1px solid #e2e8dd;border-bottom:1px solid #e2e8dd}.letter-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:center;padding-block:72px}.letter-heading p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:2}.little-wave{display:block;color:#8fb3b1;font-size:25px;letter-spacing:7px;margin-top:23px}.letter-paper{position:relative;background:#fffdf6;padding:42px 44px 31px;transform:rotate(-1deg);box-shadow:2px 8px 24px #738a7410;background-image:repeating-linear-gradient(transparent,transparent 31px,#dfe5d847 32px);background-position:0 14px}.postage{position:absolute;right:26px;top:24px;color:#95a58d;border:1px dashed #abb99e;text-align:center;font:24px/1.2 var(--serif);padding:8px 9px;transform:rotate(7deg)}.postage small{font:7px var(--sans);letter-spacing:1px}.letter-salutation{font:16px/2 var(--serif);margin-bottom:20px}#letter-message{font:16px/2 var(--serif);letter-spacing:1.3px;min-height:128px}.letter-bottom{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-top:22px;font:12px/2 var(--serif);color:#748472}.letter-bottom em{font-size:16px}.letter-bottom button{border:0;border-bottom:1px solid #a5b39e;background:transparent;color:#59785e;padding:5px 0;font-size:11px;white-space:nowrap}.letter-bottom button:hover{color:#314c37}.letter-paper.breezy{animation:breeze .65s ease-in-out}.about{display:flex;gap:30px;align-items:center;padding-block:60px}.about-seal{font:45px var(--serif);color:#97ae97}.about h2{font:20px/1.5 var(--serif);margin-bottom:10px}.about p{font-size:12px;color:#7c897d;line-height:2}.back-top{margin-left:auto;border:1px solid #ced8cb;width:40px;height:40px;flex-shrink:0;text-align:center;line-height:36px;border-radius:50%;color:#7c9583}.site-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-block:24px;color:#8a968c;font-size:10px;letter-spacing:.5px}.footer-cat{font:14px monospace;letter-spacing:0}@keyframes breeze{0%,100%{transform:rotate(-1deg)}40%{transform:rotate(.5deg) translateY(-4px)}}
@media(min-width:1450px){.hero{padding-block:84px 100px}.hero-picture{margin-left:25px}}
@media(max-width:900px){.wrap{width:calc(100% - 56px)}.site-header nav{gap:20px}.hero{gap:24px;padding-block:50px 65px}.hero h1{font-size:49px}.hero-description{font-size:13px}.floating-note{font-size:12px;right:-10px;padding:10px 14px;bottom:48px}.weather-note{margin-top:30px}.letter-layout{gap:34px}.letter-paper{padding:34px 28px 26px}.letter-bottom{align-items:start;flex-direction:column;gap:10px}.moment-list{gap:18px}.moment{padding:0 10px}.hero-picture figcaption span:last-child{font-size:8px;letter-spacing:.3px}}
@media(max-width:640px){.wrap{width:calc(100% - 40px)}.site-header{padding-block:22px}.brand{font-size:25px;gap:9px}.brand-seal{font-size:28px;padding:4px 6px}.brand small{font-size:6px;letter-spacing:1px}.site-header nav{gap:16px;font-size:11px;letter-spacing:0}.site-header nav a:last-child{display:none}.hero{grid-template-columns:1fr;gap:36px;padding-block:37px 57px}.hero h1{font-size:clamp(40px,12vw,52px);letter-spacing:2px;line-height:1.3;margin-top:17px}.hero-copy{padding-left:9px}.hero-description{line-height:1.9}.text-link{margin-top:20px}.weather-note{margin-top:26px}.hero-picture{margin:0 6px;padding:9px 9px 0;transform:rotate(1deg)}.hero-picture figcaption{font-size:8px;padding-block:11px}.floating-note{right:-8px;bottom:49px}.moments{padding-block:42px}.section-intro h2{font-size:25px;letter-spacing:1px}.moment-list{grid-template-columns:1fr;gap:28px;margin-top:30px}.moment{display:grid;grid-template-columns:108px 1fr;text-align:left;padding:10px 8px 26px;column-gap:20px}.moment+.moment{border-left:0;border-top:1px solid var(--line);padding-top:28px}.moment-number{position:static;grid-column:2;font-size:10px}.mini-art{grid-column:1;grid-row:1/5;align-self:center;width:110px}.moment h3{margin:7px 0 9px;font-size:18px;grid-column:2}.moment p{grid-column:2}.tiny-caption{grid-column:2;margin-top:10px}.letter-layout{grid-template-columns:1fr;gap:32px;padding-block:42px 49px}.letter-heading h2{font-size:29px}.letter-heading .little-wave{display:none}.letter-paper{padding:34px 24px 24px;margin-inline:4px}.postage{right:17px;top:20px;font-size:20px}.letter-salutation{font-size:14px}#letter-message{font-size:15px;min-height:120px;letter-spacing:.5px}.letter-bottom{flex-direction:row;gap:8px;font-size:11px}.letter-bottom button{font-size:10px}.about{padding-block:42px;gap:17px}.about-seal{font-size:33px}.about h2{font-size:18px}.about p{font-size:11px}.back-top{width:32px;height:32px;line-height:28px}.site-footer{font-size:8px;gap:8px;letter-spacing:0}.footer-cat{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.little-wave svg{display:block;width:105px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}