@font-face{font-family:'Human Hand Fallback';src:url('/assets/handwriting-fallback.ttf') format('truetype');font-display:swap;font-weight:400;font-style:normal}
*{box-sizing:border-box}body{margin:0;color:#272721;background:#f2eee4;font:17px/1.5 Georgia,serif}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bd442c;outline-offset:5px}header{padding:24px 5%;display:flex;justify-content:space-between;align-items:center;gap:20px}header a{text-decoration:none}header nav{display:flex;gap:24px;font:14px system-ui} .brand{font-size:28px;letter-spacing:-1px}h1,h2,p{margin-top:0}h1{font-weight:400;line-height:1.03;letter-spacing:-3px}h2{font-weight:400;font-size:34px;line-height:1.1}p{max-width:600px}.small{font:13px/1.5 system-ui}.action{display:inline-block;margin-top:15px;padding:10px 0;border-bottom:1px solid;text-decoration:none}footer{padding:35px 5%;font:13px system-ui}dialog{border:0;padding:35px;background:#f7f0de;max-width:540px;width:90vw}dialog::backdrop{background:#111a}dialog button{float:right;border:0;background:none;font:24px system-ui} @media(max-width:600px){header{padding:18px 5%}header nav{gap:12px;font-size:12px}.brand{font-size:23px}h1{letter-spacing:-2px}h2{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#e6e4dc}header{border-bottom:1px solid #c4c2b7}.desk{min-height:75vh;padding:50px 20px;display:grid;place-items:center}.envelope{width:min(770px,92vw);min-height:410px;background:#ede0bf;border:1px solid #c7b797;box-shadow:3px 8px 20px #51452b20;position:relative;text-align:left;padding:100px 12%;transform:rotate(-2deg)}.envelope::before{content:'';position:absolute;inset:0;background:linear-gradient(155deg,transparent 49.8%,#b6a686 50%,transparent 50.4%);pointer-events:none}.envelope .stamp{position:absolute;right:30px;top:25px;border:2px dotted #9c4a32;padding:12px;color:#9c4a32;font-size:27px}.address{font:italic 32px/1.5 Georgia;display:block;position:relative}.open-note{display:block;font:16px system-ui;margin-top:35px}.letter{display:none;background:#fffdf3;max-width:740px;padding:60px 70px;box-shadow:1px 8px 20px #51452b15;transform:rotate(.4deg)}.letter h1{font-size:58px}.letter p{font-size:23px}.signature{font:italic 30px Georgia;margin:30px 0}.enclosures{border-top:1px solid #b5ad97;padding-top:25px;display:grid;gap:20px}.enclosures a{display:block;font-size:22px}.enclosures small{display:block;font:14px/1.6 system-ui;margin-top:8px}.opened .envelope{display:none}.opened .letter{display:block;animation:arrive .5s ease-out}@keyframes arrive{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:rotate(.4deg)}}@media(max-width:600px){.desk{padding:35px 15px}.letter{padding:35px 28px}.letter h1{font-size:43px}.letter p{font-size:20px}.envelope{padding:110px 35px 50px}.address{font-size:27px}}.envelope{background:#ede0bf url('/assets/letter-envelope.jpg') center/100% 100%;border:0}.envelope::before,.envelope .stamp{display:none}.address{font-family:'Noteworthy','Bradley Hand','Human Hand Fallback',cursive;font-style:normal;font-weight:400}.letter p,.signature{font-family:'Noteworthy','Bradley Hand','Human Hand Fallback',Georgia,serif}.letter p{line-height:1.75}
.skip{position:absolute;left:15px;top:-100px;background:#fff;padding:10px;z-index:5}.skip:focus{top:10px}header nav{flex-wrap:wrap}header nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}header a:focus-visible{outline-offset:3px}.letter:focus{outline:none}.letter:focus-visible{outline:2px solid #9c4a32}.subpage{display:block;padding:45px 20px}.subpage .letter{display:block;margin:0 auto;transform:rotate(-.3deg)}.letter h2{margin:38px 0 15px;font-size:32px}.letter .typed{font:16px/1.7 system-ui,sans-serif}.letter ul{padding-left:23px;font:18px/1.8 Georgia,serif}.letter details{border-top:1px solid #c6bdac;padding:16px 0;font:16px/1.6 system-ui}.letter details p{font:16px/1.7 system-ui}.letter summary{cursor:pointer}.enclosures a{font-family:Georgia,serif}.postscript{border-top:1px solid #c6bdac;margin-top:35px;padding-top:15px}footer{max-width:1100px;margin:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#555}footer a{padding:5px 0}.home .letter{scroll-margin-top:20px}.letter .close-letter{font:13px system-ui;float:right;border:0;border-bottom:1px solid #aaa;background:none;padding:4px;margin-bottom:20px}.letter .close-letter+h1{clear:both}.envelope{max-width:770px}.directory a{display:block;padding:18px 0;border-bottom:1px solid #c6bdac;text-decoration:none}.directory a span{display:block;font:14px/1.7 system-ui;color:#555;margin-top:6px}@media(max-width:600px){header{align-items:flex-start;gap:14px;flex-wrap:wrap}header nav{width:100%;gap:20px;font-size:14px}header nav a{padding:5px 0}.desk{min-height:0;padding:40px 15px}.envelope{min-height:340px;padding:95px 28px 35px}.address{font-size:25px}.subpage{padding:25px 15px}.letter p{font-size:20px}.letter .typed{font-size:15px}.letter h2{font-size:29px}.open-note{margin-top:25px}.letter{transform:none}footer{font-size:12px;padding:25px}}
.letter{background:linear-gradient(90deg,#faf6e9 0,#fffdf3 19px,#eee8d8 21px,#fffdf3 25px);border-radius:2px 7px 3px 1px;box-shadow:1px 9px 20px #51452b16}.subpage .letter>p:not(.typed):not(.signature){font-family:Georgia,serif;font-size:21px;line-height:1.65}.subpage .letter>p:first-of-type{font-family:'Noteworthy','Bradley Hand','Human Hand Fallback',Georgia,serif}.subpage .letter h1{font-size:clamp(42px,6vw,58px);margin-bottom:24px}.subpage .letter>p{margin-bottom:22px}@media(max-width:600px){.subpage .letter>p:not(.typed):not(.signature){font-size:19px}.subpage .letter h1{font-size:42px}}

/* Selected direction: preserve handwritten voice throughout the letters. */
.subpage .letter>p:not(.typed):not(.signature){font-family:'Noteworthy','Bradley Hand','Human Hand Fallback',Georgia,serif;line-height:1.75}
.subpage .letter .typed,.subpage .letter ul,.subpage .letter details,.subpage .letter details p{font-family:'Noteworthy','Bradley Hand','Human Hand Fallback',Georgia,serif;font-size:20px;line-height:1.75}
@media(max-width:600px){.subpage .letter .typed,.subpage .letter ul,.subpage .letter details,.subpage .letter details p{font-size:19px}}

/* Keep the fold within the empty margin, including narrow screens. */
@media(max-width:600px){.letter{background:linear-gradient(90deg,#faf6e9 0,#fffdf3 8px,#eee8d8 10px,#fffdf3 13px)}}

/* Keep the small-screen envelope recognizably landscape. */
@media(max-width:600px){.envelope{min-height:260px;padding:65px 27px 25px}.address{font-size:23px;line-height:1.45}.open-note{font-size:14px;margin-top:22px}.letter summary{min-height:44px}.letter .close-letter{min-height:44px}}

/* Final reading refinement: clean link hierarchy, room between ideas, unfolded paper grain. */
.enclosures a{text-decoration:none}.enclosures a>span{text-decoration:underline;text-underline-offset:5px}.enclosures small{text-decoration:none}.letter li+li{margin-top:16px}.letter ul{margin-bottom:30px}
.letter{background:linear-gradient(90deg,#fffdf3e0 0,#fffdf3a0 18px,#eee8d890 21px,#fffdf350 26px),url('/assets/letter-paper.jpg');background-size:auto,740px auto}
@media(max-width:600px){.letter{background:linear-gradient(90deg,#fffdf3e0 0,#fffdf3a0 7px,#eee8d890 10px,#fffdf350 14px),url('/assets/letter-paper.jpg');background-size:auto,740px auto}}

/* Worn portrait stamp artwork, matched to the envelope's sun stamp. */
.human-wordmark{display:flex;align-items:center;gap:10px;white-space:nowrap}
.human-symbol{display:block;width:42px;height:50px;flex-shrink:0;transform:rotate(-4deg)}
.human-symbol img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:600px){.human-symbol{width:38px;height:46px}.human-wordmark{gap:8px}}