:root{--paper:#f9f4ea;--ink:#30271e;--soft:#827263;--gold:#a67c00;--rule:#dbcfb9;--ease:cubic-bezier(.22,.8,.24,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Newsreader,Georgia,serif;-webkit-font-smoothing:antialiased;background-image:radial-gradient(#66513c0b .8px,transparent .8px);background-size:19px 19px}
::selection{background:#ddc68b66}
a{color:inherit;text-underline-offset:5px}
:is(a,button,summary):focus-visible{outline:2px solid var(--gold);outline-offset:7px}
.diary-nav{max-width:1180px;margin:auto;padding:27px 36px;display:flex;justify-content:space-between;gap:24px;align-items:center;border-bottom:1px solid var(--rule)}
.diary-nav a{font-family:Caveat,cursive;text-decoration:none;font-size:1.2rem;color:#8b691c}
.diary-nav .wordmark{font-family:Newsreader,Georgia,serif;letter-spacing:.2em;font-size:.68rem;text-transform:uppercase;color:var(--soft)}
main{max-width:1120px;margin:auto;padding:0 40px}
.diary-hero{padding:86px 0 64px;position:relative}
.eyebrow{font-size:.72rem;letter-spacing:.23em;text-transform:uppercase;color:var(--soft);line-height:1.7;margin:0 0 25px}
h1{font-family:Fraunces,Georgia,serif;font-weight:380;letter-spacing:-.055em;font-size:clamp(3rem,6.1vw,5.75rem);line-height:1.03;max-width:920px;margin:0}
h1 em{font-weight:340;color:var(--gold)}
.hero-tail{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-top:34px}
.dedication{font-family:Caveat,cursive;color:#927032;font-size:1.45rem;transform:rotate(-3deg);margin:0}
.page-mark{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.notebook{display:grid;grid-template-columns:165px minmax(0,1fr);gap:35px;border-top:1px solid var(--rule);padding:52px 0 30px}
.margin-note{padding-top:14px}
.margin-note .number{font-family:Fraunces,Georgia,serif;font-size:2.8rem;font-weight:300;color:#b7a98e;line-height:1}
.margin-note p{font-family:Caveat,cursive;line-height:1.25;font-size:1.2rem;color:#968674;max-width:120px;margin:15px 0}
.sheet{position:relative;padding:38px 44px 42px 64px;background:#fffdf6;box-shadow:0 14px 45px -25px #6e502a45;border:1px solid #e6decc;transform:rotate(-.65deg);background-image:linear-gradient(to right,transparent 41px,#c1847033 41px,#c1847033 42px,transparent 42px),repeating-linear-gradient(to bottom,transparent 0,transparent 31px,#b6ac9629 31px,#b6ac9629 32px);background-position:0 0,0 12px}
.sheet::before{content:"";position:absolute;width:100px;height:25px;left:calc(50% - 50px);top:-13px;background:#d8c6a775;transform:rotate(-3deg);border-inline:1px solid #cdbb9722}
.sheet .salutation{font-family:Caveat,cursive;font-size:1.7rem;color:#8c6d29;margin:0 0 20px}
.sheet .opening{font-family:Newsreader,Georgia,serif;font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.6;margin:0;max-width:29ch}
.sheet .signature{font-family:Caveat,cursive;font-size:1.55rem;color:#8c6d29;text-align:right;margin:26px 0 0}
.diary-entry{border-top:1px solid var(--rule);padding:54px 0;margin-top:24px}
.diary-entry time{font-size:.76rem;color:var(--soft);letter-spacing:.12em}
.diary-entry h2{font-family:Fraunces,Georgia,serif;font-size:clamp(1.9rem,4vw,2.8rem);font-weight:380;line-height:1.15;margin:16px 0 24px}
.diary-entry p{font-size:1.25rem;line-height:1.85;max-width:62ch;white-space:pre-wrap}
.diary-entry figure{margin:32px 0;max-width:420px;background:white;padding:12px 12px 6px;box-shadow:0 12px 40px -22px #49392266;transform:rotate(1deg)}
.diary-entry img{width:100%;height:auto;display:block}
.diary-entry figcaption{font-family:Caveat,cursive;font-size:1.2rem;text-align:center;color:var(--soft);padding:12px 0 5px}
.fold{border-top:1px solid var(--rule);margin-top:32px;padding-top:20px}
.fold summary{font-family:Caveat,cursive;color:#8b691c;font-size:1.3rem;cursor:pointer;width:fit-content}
.fold p{margin-bottom:0}
.diary-footer{margin:72px 0 0;border-top:1px solid var(--rule);padding:32px 0 40px;display:flex;justify-content:space-between;gap:24px;align-items:center}
.diary-footer a{font-family:Caveat,cursive;font-size:1.25rem;color:#8b691c;text-decoration:none}
.diary-footer .animals{font-size:1.2rem;letter-spacing:.3em}
[hidden]{display:none!important}
@media(max-width:640px){.diary-nav{padding:22px 22px;gap:12px}.diary-nav .wordmark{font-size:.58rem;letter-spacing:.12em}.diary-nav a{font-size:1.1rem}main{padding:0 25px}.diary-hero{padding:58px 0 38px}h1{font-size:clamp(2.8rem,11.5vw,4rem);letter-spacing:-.04em}.eyebrow{font-size:.64rem;letter-spacing:.16em}.hero-tail{margin-top:28px;align-items:center}.dedication{font-size:1.2rem}.page-mark{font-size:.57rem;letter-spacing:.1em}.notebook{grid-template-columns:1fr;gap:25px;padding-top:25px}.margin-note{display:flex;gap:18px;align-items:center;padding:0}.margin-note .number{font-size:2rem}.margin-note p{max-width:none;margin:0;font-size:1.1rem}.sheet{padding:30px 23px 30px 37px;background-image:linear-gradient(to right,transparent 22px,#c1847033 22px,#c1847033 23px,transparent 23px),repeating-linear-gradient(to bottom,transparent 0,transparent 31px,#b6ac9629 31px,#b6ac9629 32px)}.sheet .opening{font-size:1.45rem}.diary-footer{margin-top:50px;flex-wrap:wrap}.diary-footer .animals{order:3;width:100%;text-align:center;margin-top:10px}.diary-entry p{font-size:1.15rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dated excerpts, with the context kept outside the quotation. */
.diary-months{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:27px 0 16px;margin-top:25px;border-top:1px solid var(--rule)}
.diary-months span{font-family:Caveat,cursive;color:var(--soft);font-size:1.2rem;margin-right:auto}
.diary-months a{font-size:.85rem;text-decoration:none;border-bottom:1px solid #b29357;padding:4px}
.reading-note{font-size:.9rem;color:var(--soft);line-height:1.6;max-width:52ch;margin:10px 0 40px}
.diary-entry{display:grid;grid-template-columns:165px minmax(0,1fr);gap:35px;margin-top:0;padding:54px 0;scroll-margin-top:25px}
.entry-margin{display:flex;flex-direction:column;gap:15px;padding-top:7px}
.entry-number{font:300 3.6rem/1 Fraunces,Georgia,serif;color:#bbab90}
.entry-label{font-family:Caveat,cursive;color:#a28d6c;font-size:1.05rem}
.diary-entry time{line-height:1.7;letter-spacing:.02em;font-size:.87rem}
.diary-entry h2{margin:0 0 16px;font-size:clamp(1.8rem,3.8vw,2.65rem);letter-spacing:-.03em}
.diary-entry .entry-context{font-size:1rem;line-height:1.65;color:var(--soft);max-width:52ch;margin:0 0 27px;white-space:normal}
.diary-quote{margin:0;padding-left:24px;border-left:2px solid #baa06b80}
.diary-entry .diary-quote p{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.75;max-width:48ch;margin:0;white-space:pre-line}
.diary-entry .diary-quote p+p{margin-top:20px}
.excerpt-break{display:block;margin:16px 0 16px 26px;color:#b19b72;letter-spacing:.45em}
.diary-entry .entry-postscript{font:1.4rem/1.35 Caveat,cursive;color:#927032;transform:rotate(-1.2deg);margin:27px 0 0 25px;max-width:35ch}
.next-note{text-align:center;padding:65px 24px;background:#eee3cb66;border:1px solid #deceb2;margin:30px 0 60px}
.next-note h2{font:380 clamp(2rem,5vw,3.5rem)/1.1 Fraunces,serif;margin:12px}
.next-note p{font-size:1.15rem;line-height:1.6}.next-note .eyebrow{font-size:.7rem}
.next-note a{display:inline-block;font:1.5rem Caveat,cursive;margin-top:16px;color:#8b691c}
@media(max-width:640px){.diary-entry{grid-template-columns:1fr;gap:22px;padding:38px 0}.entry-margin{display:grid;grid-template-columns:auto 1fr;gap:8px 17px;align-items:center}.entry-number{grid-row:span 2;font-size:2.5rem}.entry-label{font-size:.95rem}.diary-entry time{font-size:.8rem;line-height:1}.diary-quote{padding-left:17px}.diary-entry .entry-context{font-size:.96rem}.diary-months{gap:14px}.diary-months span{width:100%}.diary-entry .entry-postscript{font-size:1.3rem}}
