:root{--paper:#f8f3eb;--ink:#493137;--muted:#806e6c;--line:#dfd2c5;--accent:#713e4d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 95% 12%,#eddbcf66,transparent 32%),var(--paper);color:var(--ink);font:16px/1.8 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:5px}header{margin:0 5%;padding:27px 0;border-bottom:1px solid var(--line);text-align:center}.brand{display:inline-flex;align-items:center;gap:12px;font:24px/1.4 Georgia,serif}.brand span{font-size:31px;color:var(--accent)}main{max-width:1260px;padding:0 65px;margin:auto}.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:55px;padding:65px 0 75px;min-height:570px}h1,h2,h3,p{margin:0;font-weight:normal}h1{font:normal clamp(42px,4.4vw,62px)/1.12 Georgia,serif;letter-spacing:-1.7px;margin-bottom:27px}.intro{max-width:490px;color:#7c6567;font-size:16px;line-height:1.9}.intro p+p{margin-top:18px}.art{height:420px;position:relative;isolation:isolate}.art:before{content:'';position:absolute;z-index:-1;inset:0 7% 0 10%;border-radius:50% 50% 3px 3px;background:#e9ddd0;transform:rotate(-5deg)}.art svg{height:100%;width:100%;filter:drop-shadow(3px 15px 12px #795a4e14);transform:rotate(-3deg)}.today{padding:0 0 65px;scroll-margin-top:30px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}h2{font:normal 34px/1.25 Georgia,serif;letter-spacing:-.5px}.date{font-size:12px;color:var(--muted)}.cards{display:grid;grid-template-columns:1fr 1fr;gap:27px;align-items:start}.mail{--mail-color:#d7dbc8;--mail-front:#e7e9dc;--mail-flap:#eceee2;--mail-edge:#c5cbb3;--card-bg:#ebece2;--label:#68715c;min-width:0}.mail.rose{--mail-color:#dcc2c4;--mail-front:#efdcdd;--mail-flap:#f3e4e4;--mail-edge:#d1afb5;--card-bg:#eedfe0;--label:#9a5a66}.mail-label{color:var(--label);font-size:13px;margin-bottom:17px}.envelope-stage{padding:47px 0 15px;display:flex;justify-content:center}.envelope-trigger{display:block;position:relative;isolation:isolate;width:230px;height:145px;border:0;border-radius:4px;background:var(--mail-color);box-shadow:0 12px 22px #65464414;padding:0;perspective:800px;transition:box-shadow .3s}.envelope-trigger:hover{box-shadow:0 15px 26px #65464424}.envelope-trigger:before{content:'';position:absolute;inset:0;border:1px solid var(--mail-edge);border-radius:4px}.envelope-flap{position:absolute;z-index:4;inset:0;clip-path:polygon(0 0,100% 0,50% 66%);background:var(--mail-flap);transform-origin:top;transition:transform .5s ease .2s, z-index 0s .4s;backface-visibility:visible}.envelope-front{position:absolute;inset:0;z-index:3;clip-path:polygon(0 0,50% 60%,100% 0,100% 100%,0 100%);background:var(--mail-front);border-radius:4px;border:1px solid var(--mail-edge)}.envelope-front:after{content:'';position:absolute;inset:0;background:var(--mail-edge);opacity:.55;clip-path:polygon(0 99%,35% 52%,36% 53%,1% 100%,99% 100%,64% 53%,65% 52%,100% 99%,100% 100%,0 100%)}.envelope-seal{position:absolute;z-index:5;top:64px;left:calc(50% - 17px);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--label);color:#fff7ed;font:22px/1 Georgia,serif;transition:opacity .2s,transform .3s}.envelope-paper{position:absolute;z-index:2;left:15px;right:15px;bottom:8px;height:120px;border-radius:2px;background:#fffcf5;border:1px solid #e8ddcf;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .3s;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px}.envelope-paper:before{content:'♡';font:25px Georgia,serif;color:var(--label)}.envelope-paper:after{content:'';width:65%;height:23px;background:repeating-linear-gradient(to bottom,transparent 0 10px,#e5d9cc 10px 11px)}.mail.open .envelope-flap{transform:rotateX(180deg);z-index:1;transition:transform .5s,z-index 0s .25s}.mail.open .envelope-seal{opacity:0;transform:scale(.8)}.mail.open .envelope-paper{transform:translateY(-65px);transition-delay:.3s}.envelope-hint{font-size:12px;color:var(--muted);text-align:center;margin:8px 0 20px}.paper-reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .7s ease,opacity .35s}.paper-clip{overflow:hidden}.card{padding:32px 35px 38px;border-radius:3px 3px 35px 3px;background:var(--card-bg);transform:translateY(-30px);transition:transform .7s ease}.rose .card{border-radius:3px 3px 3px 35px}.card h3{font:normal 29px/1.25 Georgia,serif;letter-spacing:-.5px;margin-bottom:18px}.card p{font-size:16px;line-height:1.9;color:#6d655e;white-space:pre-wrap}.rose .card p{color:#80646a}.mail.open .paper-reveal{grid-template-rows:1fr;opacity:1;transition-delay:.4s}.mail.open .card{transform:translateY(0);transition-delay:.4s}.archive{border-top:1px solid var(--line);padding:45px 0 25px;scroll-margin-top:30px}.entry{width:100%;border:0;border-top:1px solid var(--line);padding:24px 0;display:flex;align-items:center;gap:25px;text-align:left;background:none}.entry-date{color:var(--muted);font-size:12px;min-width:145px}.entry-title{flex:1;font:23px/1.4 Georgia,serif}.entry span:last-child{font:22px Georgia,serif;color:var(--accent)}.entry:hover .entry-title{color:var(--accent)}.empty{color:var(--muted);font-size:15px;padding:20px 0}footer{padding:25px 0 35px;margin-top:20px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}.signature{font:italic 23px Georgia,serif;color:var(--accent)}.text-button{font-size:12px;color:var(--muted);background:none;border:0;padding:8px 0}dialog{width:min(650px,calc(100% - 30px));max-height:90vh;overflow:auto;padding:35px;background:var(--paper);border:1px solid var(--line);border-radius:5px;color:var(--ink)}dialog::backdrop{background:#37282c77;backdrop-filter:blur(5px)}dialog h2{font-size:30px;margin-bottom:15px}.close{float:right;border:0;background:none;padding:0 0 10px 15px;font-size:27px;color:var(--muted);line-height:1}.hint,#status{font-size:13px;line-height:1.7;color:var(--muted)}label{display:block;font-size:13px;margin:18px 0 6px}input,textarea{width:100%;background:#fffcf7;border:1px solid #d7c7b7;padding:10px 12px;border-radius:3px;font-size:15px;line-height:1.6}textarea{min-height:100px;resize:vertical}.actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 15px}.actions button{padding:10px 15px;border:1px solid var(--line);background:none;border-radius:3px;font-size:13px}.actions .primary{background:var(--accent);border-color:var(--accent);color:#fff7ef}.reader-date{font-size:13px;color:var(--muted);margin-bottom:30px}.view-content .cards{display:block}.view-content .mail+.mail{margin-top:30px}.view-content .card h3{font-size:27px}
@media(max-width:800px){main{padding:0 30px}.hero{gap:20px;min-height:510px}h1{font-size:43px}.intro{font-size:15px}.art{height:330px}.card{padding:27px}.card h3{font-size:27px}}
@media(max-width:600px){header{margin:0 24px;padding:21px 0}.brand{font-size:22px;gap:10px}.brand span{font-size:29px}main{padding:0 24px}.hero{display:flex;flex-direction:column;gap:25px;align-items:stretch;padding:40px 0 45px;min-height:0}h1{font-size:43px;letter-spacing:-1.2px;margin-bottom:23px}.intro{font-size:15px;line-height:1.85;max-width:none}.intro p+p{margin-top:16px}.art{width:100%;max-width:340px;height:310px;margin:0 auto}.art:before{inset:3% 9%}.section-top{margin-bottom:27px;align-items:baseline;gap:15px}h2{font-size:28px}.date{font-size:11px}.cards{grid-template-columns:1fr;gap:34px}.mail-label{font-size:13px;text-align:center;margin-bottom:12px}.envelope-stage{padding-top:43px}.envelope-hint{margin-bottom:15px}.card{padding:28px}.card h3{font-size:28px}.card p{font-size:16px;line-height:1.85}.today{padding-bottom:40px}.archive{padding-top:32px}.entry{gap:12px;flex-wrap:wrap;padding:20px 0}.entry-date{min-width:100%;font-size:11px}.entry-title{font-size:22px}footer{margin-top:15px;padding:25px 0 30px}.signature{font-size:22px}dialog{padding:27px 23px}.reader-date{margin-bottom:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
/* Leave room for the raised flap without covering the letter label. */
.envelope-stage{transition:padding-top .5s ease}.mail.open .envelope-stage{padding-top:110px}
@media(max-width:600px){.mail.open .envelope-stage{padding-top:105px}}
/* A clear heading and a larger envelope form one composed letter block. */
.cards{gap:36px}.mail{padding:27px 26px 0;border:1px solid #d8d8c966;border-radius:7px;background:linear-gradient(180deg,#ebece250,transparent 85%);--label:#535e45}.mail.rose{border-color:#dfcbd077;background:linear-gradient(180deg,#eedfe060,transparent 85%);--label:#874b5b}.mail-label{text-align:center;font:normal 27px/1.3 Georgia,serif;letter-spacing:-.45px;color:var(--ink);margin:0 0 15px}.envelope-stage{padding:23px 0 12px;transition:padding-top .5s ease}.envelope-trigger{width:320px;max-width:100%;height:auto;aspect-ratio:1.586;box-shadow:0 14px 28px #65464414}.envelope-paper{left:7%;right:7%;bottom:6%;height:83%;gap:12px}.envelope-paper:before{font-size:33px}.envelope-paper:after{height:30px;background:repeating-linear-gradient(to bottom,transparent 0 13px,#e5d9cc 13px 14px)}.envelope-seal{top:44%;left:calc(50% - 21px);width:42px;height:42px;font-size:27px}.envelope-hint{font-size:13px;color:#7c686c;margin:12px 0 25px}.mail.open .envelope-stage{padding-top:140px}.mail.open .envelope-paper{transform:translateY(-40%)}.card{padding:28px 27px 32px;border-radius:3px 3px 28px 3px}.rose .card{border-radius:3px 3px 3px 28px}.paper-reveal{margin:0 -12px}.card h3{font-size:28px}.card p{font-size:16px;color:#615d53}.rose .card p{color:#755a61}.view-content .mail{padding-top:23px}.view-content .mail-label{font-size:26px}
@media(max-width:950px) and (min-width:601px){.cards{gap:22px}.mail{padding:25px 18px 0}.mail-label{font-size:24px}.envelope-trigger{width:280px}.mail.open .envelope-stage{padding-top:122px}.card{padding:25px}.card h3{font-size:26px}}
@media(max-width:600px){.cards{gap:28px}.mail{padding:25px 20px 0}.mail-label{font-size:26px;line-height:1.3;margin-bottom:18px}.envelope-trigger{width:290px}.envelope-stage{padding-top:20px}.mail.open .envelope-stage{padding-top:125px}.envelope-hint{font-size:12px;margin:12px 0 23px}.paper-reveal{margin:0 -10px}.card{padding:25px 23px 29px}.card h3{font-size:27px}.card p{font-size:16px}.envelope-seal{width:38px;height:38px;left:calc(50% - 19px);font-size:25px}}
.today > .section-top{padding-bottom:23px;border-bottom:1px solid var(--line)}
.archive > #entries > .entry:first-child{border-top:0}
/* Each chapter occupies one viewport; long letters remain scrollable. */
:root{--header-height:98px}
html{scroll-snap-type:y proximity;scroll-padding-top:0}
header{height:var(--header-height);padding:0;display:flex;align-items:center;justify-content:center}
.hero,.today,.archive{scroll-snap-align:start;scroll-margin-top:0;box-sizing:border-box}
.hero{height:calc(100svh - var(--header-height));min-height:0;padding:35px 0;overflow-y:auto;scroll-snap-align:end}
.hero .art{height:min(420px,60svh)}
.today{height:100svh;min-height:0;padding:36px 0;display:grid;grid-template-rows:auto minmax(0,1fr)}
.today>.section-top{margin-bottom:22px;padding-bottom:20px}
.today>.cards{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#cdbab4 transparent;padding:0 8px 20px 0;align-content:start}
.archive{height:100svh;min-height:0;margin-top:0;padding:36px 0 0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-top:1px solid var(--line)}
.archive>.section-top{margin-bottom:15px}
.archive>#entries{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#cdbab4 transparent}
.archive>footer{margin-top:20px;padding:22px 0 25px}
@media(min-width:601px) and (max-height:760px){.hero{gap:35px;padding:25px 0}.hero h1{font-size:44px;margin-bottom:20px}.hero .intro{font-size:15px;line-height:1.75}.hero .art{height:55svh;max-height:350px}.today{padding:25px 0}.today .mail{padding-top:18px}.today .mail-label{font-size:25px;margin-bottom:10px}.today .envelope-stage{padding-top:15px}.today .mail.open .envelope-stage{padding-top:130px}}
@media(max-width:600px){:root{--header-height:76px}.hero{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:24px 0 20px;align-content:center}.hero h1{font-size:clamp(32px,4.9svh,43px);margin-bottom:16px}.hero .intro{font-size:14px;line-height:1.75}.hero .intro p+p{margin-top:12px}.hero .art{height:100%;max-height:29svh;min-height:100px;align-self:center}.today{padding:23px 0}.today>.section-top{padding-bottom:17px;margin-bottom:20px}.today>.cards{padding-right:5px;gap:24px}.archive{padding-top:25px}.archive>footer{padding-bottom:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}}
/* Chapters settle into place, while their background follows the transition. */
html{scroll-snap-type:y mandatory}
body{background:var(--paper);isolation:isolate}
.chapter-background{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#f8f3eb}
.chapter-wash{position:absolute;inset:-10%;opacity:0;transform:translateY(9%) scale(1.05);transition:opacity 1s ease,transform 1.25s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.chapter-wash[data-scene="intro"]{background:radial-gradient(ellipse at 85% 24%,#e9d5c1aa,transparent 58%),linear-gradient(145deg,#faf6ef,#f4ede3)}
.chapter-wash[data-scene="letters"]{background:radial-gradient(ellipse at 10% 35%,#dfe5ce99,transparent 58%),radial-gradient(ellipse at 95% 70%,#ead1d888,transparent 60%),#f8f3eb}
.chapter-wash[data-scene="archive"]{background:radial-gradient(ellipse at 72% 80%,#e3d4c8aa,transparent 65%),linear-gradient(160deg,#f8f3eb,#f1e7dd)}
.chapter-wash.active{opacity:1;transform:translateY(0) scale(1)}
.hero,.today,.archive{scroll-snap-stop:always}
.hero-copy,.art,.today>.section-top,.today>.cards,.archive>.section-top,.archive>#entries{transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.chapter-entering .hero-copy,.chapter-entering .art,.chapter-entering>.section-top,.chapter-entering>.cards,.chapter-entering>#entries{opacity:.35;transform:translateY(22px)}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:y proximity}.chapter-wash,.hero-copy,.art,.today>.section-top,.today>.cards,.archive>.section-top,.archive>#entries{transition:none!important;transform:none!important}.chapter-entering .hero-copy,.chapter-entering .art,.chapter-entering>.section-top,.chapter-entering>.cards,.chapter-entering>#entries{opacity:1}}
.today>.cards,.archive>#entries{overscroll-behavior-y:auto}
/* Fluid dimensions follow the available space rather than a phone model. */
:root{--screen-height:100vh}
@supports(height:100svh){:root{--screen-height:100svh}}
@supports(height:100dvh){:root{--screen-height:100dvh}}
body{min-width:0}
main{padding-left:clamp(18px,5vw,65px);padding-right:clamp(18px,5vw,65px)}
header{height:calc(var(--header-height) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
.hero{height:calc(var(--screen-height) - var(--header-height) - env(safe-area-inset-top,0px))}
.today,.archive{height:var(--screen-height)}
.hero-copy,.art,.section-top,.section-top>*{min-width:0}
h1,h2,h3,.mail-label,.entry-title,p{overflow-wrap:anywhere}
.today,.archive{padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
.archive>footer{padding-bottom:max(20px,env(safe-area-inset-bottom,0px));flex-wrap:wrap}
.envelope-trigger{width:min(100%,320px);min-height:0;flex-shrink:1}
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.section-top{flex-wrap:wrap}
.mail-label{font-size:clamp(22px,2.3vw,27px)}
.text-button,.close{min-height:44px;min-width:44px}
input,textarea{font-size:16px}
dialog{max-height:calc(var(--screen-height) - 30px)}
@media(max-width:600px){
 .cards{grid-template-columns:minmax(0,1fr)}
 .hero{grid-template-rows:auto minmax(100px,1fr);overflow-y:auto}
 .hero h1{font-size:clamp(30px,7.8vw,43px)}
 .hero .intro{font-size:clamp(14px,3.6vw,16px)}
 .hero .art{max-height:29dvh;min-height:100px}
 .mail{padding-left:clamp(14px,5vw,20px);padding-right:clamp(14px,5vw,20px)}
 .mail-label{font-size:clamp(22px,6vw,26px)}
 .envelope-trigger{width:min(100%,290px)}
 .card{padding:clamp(20px,5.5vw,25px)}
 .card h3{font-size:clamp(24px,6.5vw,28px)}
 .date{font-size:12px}
 .section-top h2{font-size:clamp(25px,6.8vw,30px)}
}
@media(max-height:550px){
 :root{--header-height:66px}
 .hero{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:auto;gap:22px;padding:20px 0;align-items:center}
 .hero h1{font-size:clamp(28px,4.7vw,40px);margin-bottom:14px}
 .hero .intro{font-size:14px;line-height:1.65}
 .hero .art{height:100%;min-height:150px;max-height:65dvh}
 .today{padding-top:18px}
 .today>.section-top{margin-bottom:15px;padding-bottom:12px}
 .archive{padding-top:18px}
 .archive>footer{margin-top:10px;padding-top:10px}
}
@media(max-width:360px) and (max-height:650px){
 .hero{display:flex;flex-direction:column;align-items:stretch;gap:12px;overflow:auto}
 .hero .art{height:140px;min-height:140px;flex-shrink:0}
 .hero .intro{line-height:1.65}
}
.calendar{width:min(100%,610px);margin:10px auto 28px;padding:26px 30px 20px;background:#fffcf7bb;border:1px solid #e3d7cd;border-radius:12px;box-shadow:0 15px 45px #6a435608}
.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}.calendar-head h3{font:normal 27px/1.4 Georgia,serif;text-transform:capitalize;text-align:center}.month-arrow{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:transparent;font:28px/1 Georgia,serif;color:var(--accent);display:grid;place-items:center}.month-arrow:hover:not(:disabled){background:#f0e4df}.month-arrow:disabled{opacity:.25;cursor:default}.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.calendar-weekdays{font-size:12px;text-align:center;color:var(--muted);margin-bottom:12px}.calendar-weekdays span{padding:4px 0}.calendar-day{position:relative;min-height:55px;aspect-ratio:1;border:1px solid transparent;border-radius:10px;background:none;font:normal 21px/1 Georgia,serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:7px 0;color:var(--ink)}.calendar-day:disabled{cursor:default}.calendar-day.before-start{color:#c3b9b1}.calendar-day.future-day,.calendar-day.empty-day{color:#b1a39d}.calendar-day.has-letter{color:var(--accent);background:#eedfe1;transition:background .2s,transform .2s}.calendar-day.has-letter:hover{background:#e7ced4;transform:translateY(-2px)}.calendar-day.is-today{border-color:#a97685}.day-heart{font:17px/1 Georgia,serif}.calendar-note{text-align:center;font-size:12px;line-height:1.6;color:var(--muted);margin-top:22px}.archive>#entries{padding-right:5px}
@media(max-width:600px){.archive>.section-top{gap:10px}.archive>.section-top h2{font-size:27px}.calendar{padding:20px 14px 17px;margin-top:5px;border-radius:9px}.calendar-head{gap:10px;margin-bottom:20px}.calendar-head h3{font-size:23px}.calendar-weekdays,.calendar-days{gap:4px}.calendar-day{min-height:39px;font-size:18px;border-radius:7px;gap:3px}.day-heart{font-size:13px}.calendar-note{font-size:11px;margin-top:19px}.calendar-weekdays{font-size:11px;margin-bottom:8px}.month-arrow{width:40px;height:40px}}
@media(max-width:350px){.calendar{padding:15px 9px}.calendar-head h3{font-size:21px}.calendar-day{min-height:34px;font-size:17px}.calendar-weekdays,.calendar-days{gap:3px}}
/* After opening, the envelope makes room for the actual letter. */
.envelope-trigger{transition:width .65s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.mail.open .envelope-trigger{width:170px;transition-delay:.45s,0s}
.mail.open .envelope-stage{padding-top:73px;padding-bottom:7px;transition:padding-top .65s ease .45s,padding-bottom .65s ease .45s}
.mail.open .envelope-hint{font-size:12px;margin:5px 0 16px}
.mail.open .envelope-paper:before{font-size:22px}.mail.open .envelope-paper:after{height:16px;background:repeating-linear-gradient(to bottom,transparent 0 7px,#e5d9cc 7px 8px)}
.mail.open .card{padding:24px 27px 28px;min-height:265px}
.mail.open .card h3{margin-bottom:15px}.mail.open .card p{line-height:1.8}
.today>.cards{scroll-padding-top:8px}
@media(max-width:600px){
 .mail.open{padding-top:17px}
 .mail.open .mail-label{margin-bottom:7px;font-size:24px}
 .mail.open .envelope-trigger{width:100px}
 .mail.open .envelope-stage{padding-top:45px;padding-bottom:6px}
 .mail.open .envelope-hint{display:none}
 .mail.open .envelope-paper{gap:3px}
 .mail.open .envelope-paper:before{font-size:16px}
 .mail.open .envelope-paper:after{height:10px}
 .mail.open .paper-reveal{margin-top:12px}
 .mail.open .card{padding:20px;min-height:255px}
 .mail.open .card h3{font-size:25px;line-height:1.2;margin-bottom:12px}
 .mail.open .card p{font-size:16px;line-height:1.65}
 .view-content .mail.open{padding-top:17px}
}
/* Only the letter body scrolls; the close control stays outside that area. */
#reader{padding:0;overflow:hidden}
#reader[open]{display:flex;flex-direction:column}
.reader-toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:9px 14px;background:var(--paper);border-bottom:1px solid var(--line);z-index:2}
.reader-toolbar .close{float:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;color:var(--accent);background:#eee2dd;font-size:28px;line-height:1}
.reader-toolbar .close:hover{background:#e7d5d0}
#reader .view-content{overflow-y:auto;min-height:0;padding:25px 35px 35px;overscroll-behavior:contain;scrollbar-width:thin}
@media(max-width:600px){.reader-toolbar{padding:7px 12px}#reader .view-content{padding:22px 23px 27px}}
/* The calendar fits its chapter instead of becoming another scroll area. */
.archive>#entries{overflow:clip;padding:0;display:flex;align-items:center;justify-content:center;min-height:0;container-type:size}
.calendar{height:min(100%,620px);max-height:100%;width:min(100%,610px);margin:0;padding:20px 26px 16px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-height:0}
.calendar-head{margin-bottom:14px}.calendar-weekdays{margin-bottom:8px}.calendar-days{grid-template-rows:repeat(6,minmax(0,1fr));min-height:0}.calendar-day{aspect-ratio:auto;min-height:0;padding:3px 0}.calendar-note{margin-top:12px}.calendar-blank{min-height:0}
@media(max-width:600px){.calendar{height:min(100%,480px);padding:14px 12px 12px}.calendar-head{margin-bottom:10px}.calendar-weekdays{margin-bottom:6px}.calendar-day{min-height:0}.calendar-note{font-size:10px;margin-top:10px;line-height:1.4}}
@container(max-height:350px){.calendar{padding:10px 15px}.calendar-head{margin-bottom:4px}.calendar-head h3{font-size:21px}.month-arrow{height:32px;width:32px;min-height:32px}.calendar-weekdays{margin-bottom:3px;font-size:10px}.calendar-days{gap:3px}.calendar-day{font-size:16px;gap:1px;padding:1px 0}.day-heart{font-size:10px}.calendar-note{font-size:10px;margin-top:5px}}
@container(max-height:210px){.calendar-note,.day-heart{display:none}.calendar-head h3{font-size:18px}.calendar-head{margin-bottom:0}.calendar-weekdays span{padding:0}.calendar-day{font-size:14px}}
.art svg{transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .75s ease;transform-origin:50% 60%}
@media(hover:hover) and (pointer:fine){.art:hover svg{transform:rotate(0deg) translateY(-9px);filter:drop-shadow(5px 22px 16px #795a4e22)}}
@media(prefers-reduced-motion:reduce){.art svg{transition:none}.art:hover svg{transform:rotate(-3deg)}}