.letters-grid>*{min-width:0}
.letter-wall{display:block;min-width:0}
.letter-wall>.small{margin:12px 0;line-height:1.8}
.letters-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:8px 2px 18px;scrollbar-color:#27764d #eaf0e4;position:relative;align-items:stretch}
.letters-rail .note,.letters-rail .note.blue{flex:0 0 min(320px,85%);box-sizing:border-box;margin:0;padding:24px;scroll-snap-align:start;min-width:0;display:flex;flex-direction:column}
.letters-rail .note p{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:0}
.letters-rail .note footer{margin-top:auto;overflow-wrap:anywhere}
.letters-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.letters-controls .more-button{margin:0;min-height:44px}
.letters-controls button:disabled{opacity:.4;cursor:default}
.letters-rail:focus-visible{outline:3px solid #27764d;outline-offset:3px}
.letters-controls[hidden],.letters-controls [hidden],.letters-rail[hidden]{display:none}
@media(max-width:760px){
 body>header nav{gap:12px 22px;flex-wrap:wrap}
 body>header nav a{white-space:nowrap}
 .intro .eyebrow{line-height:1.8;text-wrap:balance}
 h1,h2,h3{text-wrap:balance;word-break:normal;line-break:strict}
 .intro>p:not(.eyebrow),.section-top>div>p{text-wrap:pretty;line-break:strict}
 .button,.more-button{max-width:100%;box-sizing:border-box}
 .section-top{gap:16px;flex-wrap:wrap}
 .letters-grid{gap:32px}
 .letters-rail .note p{font-size:15px;line-height:1.9}
 .site-footer{flex-wrap:wrap;gap:14px}
 .profile-copy,.contact-grid>*{min-width:0;overflow-wrap:break-word}
}
@media(max-width:420px){
 .intro h1{font-size:clamp(23px,8vw,29px)}
 .intro h1 em{white-space:normal}
 .together{grid-template-columns:minmax(0,1fr) 92px;padding:22px 16px}
 .together h3{font-size:21px}
 .together p{font-size:14px}
 .together .small{font-size:12px}
 .letters-rail .note,.letters-rail .note.blue{flex-basis:88%;padding:20px}
}
@media(prefers-reduced-motion:reduce){.letters-rail{scroll-behavior:auto}}

.letter-wall>.pending-count{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0;font-size:12px;font-weight:400;color:#617264;line-height:1.7}
.letter-count-item{white-space:nowrap}
