@font-face{font-family:Literata;src:url(assets/Literata0-92f8552245.woff2) format("woff2");font-display:swap;font-weight:100 900}@font-face{font-family:Literata;src:url(assets/Literata1-98e5d5bc5c.woff2) format("woff2");font-display:swap;font-style:italic;font-weight:100 900}@font-face{font-family:Fira;src:url(assets/Fira-84e0981eaf.woff2) format("woff2");font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#f2ead7;color:#4d302c;font-family:Literata,Georgia,serif}.en{display:none}html[lang=en] .en{display:inline}html[lang=en] .el{display:none}header{padding:24px 6vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #cbbba3;background:#f2ead7;position:sticky;top:0;z-index:5}.brand{font-size:25px;text-decoration:none}.brand span{display:block;font:9px Fira,Arial,sans-serif;letter-spacing:3px;margin-top:8px}.controls{display:flex;gap:25px;align-items:center;font:12px Fira,Arial,sans-serif}.controls a{max-width:140px}a{color:inherit}button{border:0;background:none;color:inherit;cursor:pointer;font:inherit;min-height:44px}a:focus-visible,button:focus-visible{outline:2px solid #8a5652;outline-offset:5px}.hero{min-height:75vh;display:grid;grid-template-columns:1.5fr 1fr;align-items:center;padding:80px 10vw 70px;background:radial-gradient(ellipse at 80% 60%,#dfc7a36b,transparent 60%)}.eyebrow{font:11px Arial;letter-spacing:3px;color:#8c5553}h1{font-size:clamp(52px,6.8vw,104px);font-weight:400;line-height:1.12;letter-spacing:-3px;margin:28px 0}.dedication{font-size:19px;line-height:1.85;max-width:470px}.author{font-size:14px;margin-top:35px}.read{display:inline-block;text-decoration:none;border-bottom:1px solid #a47b6d;padding:16px 0;font:13px Arial}.thread{position:relative;height:480px;max-width:340px;margin:auto}.thread svg{width:100%;height:100%;overflow:visible}.thread path{fill:none;stroke:#9c6657;stroke-width:1.3}.thread circle{fill:#b48460}.thread>span{position:absolute;bottom:12%;right:3%;font-size:21px;letter-spacing:8px;color:#97735f}.letter{max-width:820px;padding:55px 32px 90px;margin:auto}.opening{font-size:24px;line-height:1.9;margin:0 0 25px}.source-note{font:12px/1.8 Arial;color:#8a6f61;max-width:560px}.chapter{display:grid;grid-template-columns:45px 1fr;gap:24px;padding:55px 0;border-top:1px solid #cab9a1;margin-top:35px;scroll-margin-top:120px}.chapter-number{font:12px Arial;color:#a27668;padding-top:12px}h2{font-weight:400;font-size:clamp(27px,3vw,36px);line-height:1.35;margin:0 0 25px}.chapter p{font-size:18px;line-height:2;margin:0 0 20px}.closing{background:#5c3630;color:#f2ead7;padding:55px;margin-top:45px}.closing>p{font-size:22px;line-height:1.9}.closing .signature{font-size:26px;margin-top:45px}.progress{height:2px;position:fixed;top:0;left:0;width:100%;transform:scaleX(0);transform-origin:left;background:#8b5754;z-index:10}footer{text-align:center;padding:28px;font:11px Arial;letter-spacing:2px;border-top:1px solid #cab9a1}.motion-on .trace{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 3.5s ease forwards}.motion-on .chapter{transition:opacity .7s,transform .7s}.motion-on .chapter.awaiting{opacity:.2;transform:translateY(15px)}@keyframes draw{to{stroke-dashoffset:0}}@media(max-width:650px){header{padding:12px 5vw;gap:12px;flex-wrap:wrap}.brand{font-size:21px}.controls{gap:15px;flex-wrap:wrap}.controls>a{display:none}.hero{min-height:0;padding:55px 7vw;grid-template-columns:1fr}.hero h1{letter-spacing:-2px}.thread{height:160px;width:150px;margin:30px 0 0 auto}.thread>span{font-size:15px}.letter{padding:25px 7vw 50px}.opening{font-size:21px}.chapter{gap:12px;grid-template-columns:25px 1fr;padding:35px 0;margin-top:20px}.chapter p{font-size:17px}.closing{padding:30px 24px}.closing>p{font-size:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-on .trace{animation:none;stroke-dashoffset:0}.motion-on .chapter{transition:none;opacity:1;transform:none}}body.motion-off .chapter{opacity:1;transform:none}body.motion-off .trace{animation:none;stroke-dashoffset:0}
/* One continuous letter: no numbers or headings, only a breath between parts. */
.chapter.letter-part{display:block;padding:0;border-top:0;margin-top:34px}
.chapter.letter-part p{font-size:18px;line-height:2;margin:0 0 20px}
@media(max-width:650px){.chapter.letter-part{margin-top:24px;padding:0}.chapter.letter-part p{font-size:17px}}
.letter-subhead{font-weight:400;font-style:italic;font-size:22px;line-height:1.5;margin:38px 0 14px;color:#7a4a40}
@media(max-width:650px){.letter-subhead{font-size:20px;margin-top:30px}}
.note-link{color:inherit;text-decoration:underline;text-decoration-color:#a2766888;text-underline-offset:4px}

/* Site footer, shared with the other archive pages */
html[lang=en] div.site-footer-lang.en{display:block}.site-footer{--cream:#eee5ce;--ink:#482d2a;--peach:#ecbca8;--line:rgba(238,229,206,.2);--serif:Literata,Georgia,serif;--sans:Fira,Arial,sans-serif;background:var(--ink);color:var(--cream);text-align:left;font:15px/1.6 var(--sans);letter-spacing:normal;border-top:0}.site-footer a{color:inherit;text-decoration:none}.site-footer h3{margin:0 0 6px}.site-footer p{margin:0}
footer.site-footer{display:block;padding:70px 4.5vw 30px}
.site-footer .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:5vw;align-items:start}
.site-footer .footer-logo{width:120px;opacity:1;mix-blend-mode:normal;margin-bottom:22px}
.site-footer .footer-title{font:30px var(--serif);margin-bottom:14px}
.site-footer .footer-brand p{font-size:13px;line-height:1.85;max-width:380px;opacity:.85}
.site-footer .footer-motto{font:italic 17px/1.6 var(--serif)!important;color:var(--peach);margin-top:18px;opacity:1!important}
.site-footer .footer-col{display:flex;flex-direction:column;gap:11px}
.site-footer .footer-col h3{font:400 11px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--peach);margin:8px 0 10px}
.site-footer .footer-col a{font-size:14px;opacity:.9;transition:opacity .3s,transform .3s}
.site-footer .footer-col a:hover{opacity:1;transform:translateX(4px)}
.site-footer .footer-years{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:13px!important}
.site-footer .footer-years strong{font:400 26px var(--serif)}
.site-footer .footer-years span{color:var(--peach)}
.site-footer .footer-bottom{margin-top:55px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #eee5ce30;padding-top:20px;font-size:10px;letter-spacing:.7px;opacity:.8}
.motion-off .site-footer .footer-col a{transition:none}
@media(max-width:900px){.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:40px 30px}.site-footer .footer-brand{grid-column:1/-1}}
@media(max-width:520px){footer.site-footer{padding:45px 6vw 25px}.site-footer .footer-grid{grid-template-columns:1fr}.site-footer .footer-bottom{flex-direction:column;gap:8px}}
.site-footer nav.footer-col{align-items:flex-start;gap:11px;margin:0;text-align:left}
.site-footer .footer-logo{height:auto;max-width:120px}

/* The note as a handwritten letter: one sheet of paper; the ink appears word by word as a pen writes */
.letter{position:relative;max-width:860px;margin:20px auto 90px;padding:70px 72px 90px 104px;background:#f8f2e3;border-radius:3px;box-shadow:0 1px 0 #e2d4b8,0 22px 60px rgba(72,45,42,.13)}
.letter::before{content:"";position:absolute;top:0;bottom:0;left:70px;width:1px;background:rgba(117,61,72,.22)}
.letter .chapter{border-top:0}
.motion-on .letter .chapter.awaiting{opacity:1;transform:none}
.motion-on .letter .ink .w{opacity:0;filter:blur(1.5px);transition:opacity .3s ease,filter .3s ease}
.motion-on .letter .ink .w.on{opacity:1;filter:none}
.pen{position:absolute;left:0;top:0;width:44px;height:44px;pointer-events:none;z-index:3;opacity:0;transition:transform .12s linear,opacity .5s}
.pen.writing{opacity:1}
.motion-off .pen{display:none}
.signature{font:italic 30px/1.4 Literata,Georgia,serif}
.motion-on .signature:not(.signed){clip-path:inset(0 100% 0 0)}
.motion-on .signature{transition:clip-path 1.2s cubic-bezier(.4,0,.3,1)}
.motion-on .signature.signed{clip-path:inset(0 0 0 0)}
@media(max-width:700px){.letter{margin:0 0 50px;padding:40px 22px 60px 34px;border-radius:0}.letter::before{left:20px}}

/* Readable letter body (5 Oct 2026): the archive's sans (Fira) for secondary text instead of Arial, comfortable sizes on phones */
.eyebrow{font:400 13px Fira,Arial,sans-serif;letter-spacing:3px}
.author{font-size:17px}
.read{font:400 16px/1.4 Fira,Arial,sans-serif;letter-spacing:.3px}
.source-note{font:400 16px/1.7 Fira,Arial,sans-serif;color:#765747}
@media(max-width:650px){
 .hero{padding:44px 7vw 36px}
 .eyebrow{font-size:15px;letter-spacing:2px}
 .dedication{font-size:20px;line-height:1.7}
 .author{font-size:17px;margin-top:26px}
 .read{font-size:17px;padding:14px 0 10px;margin-top:6px}
 .source-note{font-size:16px}
 .chapter.letter-part p{font-size:18px;line-height:1.85}
}

/* Hero motif: one family thread drawn down to the initials of Miranda and Ioanna, sealed in a ring (desktop/tablet only) */
.thread .knot{fill:#b48460}
.thread .seal{fill:none;stroke:#9c6657;stroke-width:1.2;transform-box:fill-box;transform-origin:center;transform:rotate(-90deg)}
.thread .initials{font:400 30px Literata,Georgia,serif;fill:#7a4a40;letter-spacing:1px}
.motion-on .thread .knot{opacity:0;animation:thread-knot .6s ease forwards}
.motion-on .thread .knot:nth-of-type(2){animation-delay:1.7s}
.motion-on .thread .seal{stroke-dasharray:352;stroke-dashoffset:352;animation:draw 1.4s 3s cubic-bezier(.5,0,.3,1) forwards}
.motion-on .thread .initials{opacity:0;animation:thread-ink 1.3s 3.9s ease forwards}
@keyframes thread-knot{to{opacity:1}}
@keyframes thread-ink{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:none}}
body.motion-off .thread .knot,body.motion-off .thread .initials{animation:none;opacity:1;filter:none}
body.motion-off .thread .seal{animation:none;stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.thread .knot,.thread .seal,.thread .initials{animation:none!important;opacity:1!important;stroke-dashoffset:0!important;filter:none!important}}
@media(max-width:650px){.thread{display:none}}
/* Tablets: no tall empty band above the opening; phones: the moving pen never widens the page */
@media(min-width:651px) and (max-width:1000px){.hero{min-height:0;padding:72px 8vw 64px}}
@media(max-width:700px){.letter{overflow:hidden}}