.letter-home{background:#eef3f5;background-image:radial-gradient(ellipse at 5% 2%,#dbe7ec 0,transparent 36%),radial-gradient(ellipse at 96% 28%,#eee6d7 0,transparent 30%);color:#283f4c}
.letter-home .archive-site-header{background:#f9f7f0}
.letter-home .letter-intro{position:relative;width:min(1220px,calc(100% - 56px));min-height:500px;margin:36px auto 0;padding:65px 84px 80px;border:0;grid-template-columns:1fr 300px;gap:65px;background:#f5f0e3 url('/static/anniversary/letter-art-v2.webp') center/cover no-repeat;box-shadow:0 18px 45px #273f5012;border-radius:3px}
.letter-home .letter-intro h1{font-size:48px;letter-spacing:.045em;line-height:1.6;margin:20px 0 15px;color:#203e55}
.letter-home .letter-intro .kicker{display:inline-block;padding:7px 13px;border:1px solid #9eacaf99;color:#4c697c;font-size:11px;letter-spacing:.16em;background:#fffdf34d}
.letter-home .intro-annotation{color:#557180;font-size:14px;line-height:2}
.letter-home .read-start{border-bottom:1px solid #758f9d;padding:0 0 7px;margin-top:25px}
.letter-home .intro-photo{position:relative;transform:rotate(2deg);background:#fffdf6;padding:11px 11px 15px;box-shadow:5px 12px 28px #253e5528}
.letter-home .intro-photo:before{content:"";position:absolute;z-index:1;width:90px;height:27px;background:#ccb58275;left:50%;top:-13px;transform:translateX(-50%) rotate(-8deg);border-left:2px solid #ffffff55;border-right:2px solid #ffffff55}
.letter-home .intro-photo img{height:330px;object-position:50% 30%;border-radius:0}
.letter-home .intro-photo figcaption{text-align:center;font-size:9px;letter-spacing:.17em;margin:13px 0 0;color:#78868c}
.letter-home .letter-wrap{position:relative;width:min(930px,calc(100% - 64px));margin:75px auto 0;padding:60px 75px 65px;background:#fffdf7;box-shadow:0 8px 32px #2943530e;border:1px solid #e1ddd0;border-top:4px solid #728da0}
.letter-home .letter-wrap:before{content:"";position:absolute;inset:13px;border:1px solid #e7e1d4;pointer-events:none}
.letter-home .letter-topline{position:relative;border-bottom:1px solid #d8dfde;padding-bottom:25px;margin-bottom:38px;gap:18px;min-height:45px}
.letter-home .letter-topline>.kicker{color:#657b87;font-size:10px;letter-spacing:.16em}
.letter-seal{display:grid;place-items:center;width:42px;height:42px;border:1px solid #7d97a3;border-radius:50%;outline:1px solid #bac7cb;outline-offset:4px;font:21px/1 var(--a-serif);color:#577c91;flex-shrink:0;margin-right:5px;background:#edf2ef}
.letter-home .letter-body{position:relative;font-size:17px;line-height:2.2;color:#344954;letter-spacing:.025em}
.letter-home .letter-body p{margin-bottom:1.85em}
.letter-home .letter-body p:first-child{color:#2c5673;font-size:27px;margin-bottom:1.6em}
.letter-home .letter-body p:nth-child(7n + 2):not(:nth-child(2)){padding-top:33px;border-top:1px solid #e2e6df}
.letter-home .letter-end{margin-top:45px;color:#6d8899}.letter-home .letter-end:before,.letter-home .letter-end:after{background:#c9d7dd}
.letter-home .home-section{width:min(1160px,calc(100% - 64px));margin:100px auto}
.letter-home .section-head{margin-bottom:30px}.letter-home .section-head h2{color:#284f67;font-size:34px}.letter-home .section-head .kicker{color:#748d9c;letter-spacing:.16em}
.gallery-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:flex-end;font-size:13px}
.gallery-actions button{padding:10px 16px;color:#476c83;background:#f8faf5;border:1px solid #b7c9d0;border-radius:2px}.gallery-actions button:disabled{opacity:.55}
.gallery-actions a{text-decoration:none}
.letter-home .home-gallery-grid{gap:28px;align-items:start}
.letter-home .home-gallery-grid a{position:relative;aspect-ratio:4/5;background:#fffcf3;padding:10px 10px 32px;box-shadow:0 8px 17px #29415016;transform:rotate(-1deg);border:1px solid #dadfda}
.letter-home .home-gallery-grid a:nth-child(3n + 2){transform:rotate(1deg)}
.letter-home .home-gallery-grid a:after{content:"JIAJIAZI · PHOTO ALBUM";position:absolute;bottom:12px;left:0;right:0;text-align:center;font:8px/1 Georgia,serif;letter-spacing:.12em;color:#7a8e99}
.letter-home .home-gallery-grid img{object-position:50% 25%;width:100%;height:100%;object-fit:cover}
.letter-home .home-gallery-grid a:hover img{transform:scale(1.02)}
.letter-home .gallery-note{margin-top:25px;min-height:23px}
.letter-home #home-quotes{position:relative;padding:45px 38px;background:#e1ebee;border-top:1px solid #c5d6db;border-bottom:1px solid #c5d6db}
.letter-home .quote-preview-grid{gap:22px;align-items:stretch}
.letter-home .quote-preview{position:relative;display:flex;flex-direction:column;padding:29px 25px 24px;background:#fffdf5;border:1px solid #dddccc;border-top:3px solid #7c9baa;box-shadow:2px 5px 12px #3452610b}
.letter-home .quote-preview blockquote{font:400 21px/1.95 var(--a-serif);color:#34576d;flex:1;margin:20px 0 25px}
.quote-preview-number{font:12px/1.5 Georgia,serif;letter-spacing:.12em;color:#a59368}
.letter-home .quote-preview p{font-size:11px;line-height:1.9;color:#7c8789;margin:0;padding-top:14px;border-top:1px solid #e5e5d9;overflow-wrap:anywhere}
.letter-home .quiet-entries{margin-top:55px;gap:28px}
.letter-home .quiet-entry{padding:24px 25px;border:1px solid #b9ccd3;background:#f2f6f3}
.letter-home .quiet-entry h3{font-size:25px;color:#34576d}.letter-home .latest-note{border-color:#c2d3d7}
.letter-home .site-footer{border-color:#c2d1d8}
.letter-home .reading-tools{border-color:#bfd0d9;background:#f8faf6f2;box-shadow:0 3px 16px #284c6010}
.letter-home .letter-intro>div{padding-left:50px}.letter-home .intro-annotation{display:inline-block;background:#fffaf0bf;padding:3px 7px;margin-left:-7px}.letter-home .read-start{width:fit-content;display:flex;position:relative;padding:10px 15px;border:1px solid #bdcbd0;background:#fffdf4ed;box-shadow:0 3px 10px #324f6010}
.home-image-dialog{padding:0;width:min(1000px,calc(100vw - 30px));height:calc(100dvh - 36px);max-width:none;max-height:none;border:1px solid #d8dfdf;background:#f8f7f0;color:#294a60;border-radius:3px;overflow:hidden}
.home-image-dialog::backdrop{background:#16374ce0}.home-image-bar{height:55px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d2dce0;font-size:12px}.home-image-bar button{border:0;background:none;min-height:42px;min-width:42px;color:#34566c;font-size:26px}.home-image-stage{height:calc(100% - 112px);padding:13px;display:flex;align-items:center;justify-content:center}.home-image-stage img{display:block;max-width:100%;max-height:100%;object-fit:contain}.home-image-links{display:flex;justify-content:center;gap:30px;padding:18px;font-size:12px;border-top:1px solid #d2dce0}.home-image-links a{text-decoration:none}
@media(max-width:900px){.letter-home .letter-intro{padding:45px 45px 65px;grid-template-columns:1fr 240px;gap:35px}.letter-home .letter-intro h1{font-size:37px}.letter-home .intro-photo img{height:280px}.letter-home .letter-wrap{padding:50px 52px}.letter-home .quote-preview{padding:24px 20px}.letter-home .quote-preview blockquote{font-size:20px}}
@media(max-width:620px){.letter-home .letter-intro{width:calc(100% - 24px);margin-top:18px;min-height:305px;padding:30px 24px 45px;grid-template-columns:minmax(0,1fr) 100px;gap:18px;background-position:47% center}.letter-home .letter-intro h1{font-size:clamp(20px,6.1vw,25px);line-height:1.7;letter-spacing:0;margin:16px 0 13px}.letter-home .letter-intro .kicker{font-size:9px;padding:5px 8px;letter-spacing:.07em}.letter-home .intro-annotation{font-size:11px;line-height:1.9}.letter-home .intro-photo{padding:5px 5px 8px;margin-top:22px}.letter-home .intro-photo img{height:160px}.letter-home .intro-photo:before{width:45px;height:15px;top:-8px}.letter-home .intro-photo figcaption{display:none}.letter-home .read-start{font-size:11px;margin-top:18px;padding-bottom:5px}.letter-home .letter-wrap{width:calc(100% - 24px);margin-top:30px;padding:32px 23px 40px}.letter-home .letter-wrap:before{inset:8px}.letter-home .letter-topline{margin-bottom:30px;padding-bottom:21px;gap:13px}.letter-home .letter-topline>.kicker{font-size:9px;letter-spacing:.05em}.letter-home .resume-button{font-size:10px}.letter-seal{width:30px;height:30px;font-size:16px;outline-offset:3px;margin-right:4px}.letter-home .letter-body{font-size:17px;line-height:2.08;letter-spacing:.015em}.letter-home .letter-body p{margin-bottom:1.8em}.letter-home .letter-body p:first-child{font-size:23px}.letter-home .letter-body p:nth-child(7n + 2):not(:nth-child(2)){padding-top:25px}.letter-home .home-section{width:calc(100% - 36px);margin:65px auto}.letter-home .section-head{align-items:flex-start;gap:18px;flex-direction:column;margin-bottom:24px}.letter-home .section-head h2{font-size:28px}.gallery-actions{justify-content:flex-start;gap:18px;font-size:11px}.gallery-actions button{font-size:11px;padding:8px 12px}.letter-home .home-gallery-grid{gap:18px 14px}.letter-home .home-gallery-grid a{padding:6px 6px 24px}.letter-home .home-gallery-grid a:after{font-size:6px;bottom:9px;letter-spacing:.08em}.letter-home #home-quotes{width:100%;padding:35px 20px}.letter-home .quote-preview-grid{gap:16px}.letter-home .quote-preview{padding:24px}.letter-home .quote-preview blockquote{font-size:21px;margin:13px 0 20px}.letter-home .quote-preview p{font-size:11px}.letter-home .quiet-entries{gap:16px;margin-top:35px}.letter-home .quiet-entry{padding:22px}.letter-home .quiet-entry h3{font-size:23px}.home-image-dialog{width:100vw;height:100dvh;border-radius:0}.home-image-links{font-size:11px;gap:23px}}
@media(prefers-reduced-motion:reduce){.letter-home .home-gallery-grid img{transition:none}}
@media(max-width:900px){.letter-home .letter-intro>div{padding-left:0}}
@media(max-width:350px){.letter-home .letter-intro{grid-template-columns:minmax(0,1fr) 84px}.letter-home .intro-photo img{height:145px}}