.letters-page { background:var(--cream); }
.letters-page .letters-wrap { width:min(calc(100% - 2.5rem),46rem); margin-inline:auto; }
.letters-intro { padding-block:2.5rem 1.7rem; }
.letters-intro h1 { max-width:23ch; font-family:var(--display); font-size:2.7rem; line-height:1.13; letter-spacing:-.025em; }
.letters-intro p { max-width:65ch; margin-top:1rem; line-height:1.65; }
.letters-intro .section-kicker { margin:0 0 .65rem; color:var(--green); }
.letters-intro .letters-experience-note { font-size:.9rem; color:var(--muted); }
.letters-actions { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:.9rem; }
.letters-actions a { display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.advice-share-link { display:inline-flex; align-items:center; justify-content:center; gap:.8rem; min-height:44px; padding:.65rem 1rem; border:1px solid var(--green); border-radius:.45rem; background:var(--green); color:var(--paper); font-weight:600; text-decoration:none; line-height:1.4; }
.advice-share-link:hover { background:var(--ink); color:var(--paper); }
.advice-invitation { margin-block:1rem 3rem; padding:1.6rem; border:1px solid var(--line); border-radius:.7rem; background:var(--paper); }
.advice-invitation h2 { margin:0 0 .65rem; font-family:var(--display); font-size:1.7rem; line-height:1.25; }
.advice-invitation p { max-width:60ch; margin-bottom:1.1rem; }
.advice-share-intro { padding-bottom:1.4rem; }
.advice-share-intro h1 { max-width:none; }
.advice-share-intro + .write-letter { padding-top:1.5rem; }
.advice-back { margin:0 0 2.5rem; }
.letters-draft { padding:1rem 1.2rem; border:1px solid var(--line); border-radius:.6rem; background:var(--paper); margin-bottom:1.5rem; }
.letters-draft p { margin:.35rem 0 0; }
.letters-list { padding-block:.5rem 1rem; }
.letters-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin-bottom:1.7rem; }
.letters-example-note { margin:0 0 1rem; color:var(--muted); font-size:.9rem; }
.letters-example-note p { margin-top:.25rem; }
.letter { position:relative; border:1px solid var(--line); border-top:3px solid var(--green); border-radius:.7rem; background:var(--paper); scroll-margin-top:6rem; overflow-wrap:anywhere; box-shadow:0 4px 14px rgba(19,44,56,.04); }
.letter-open { display:flex; flex-direction:column; height:100%; padding:1.6rem; border-radius:.6rem; text-decoration:none; }
.letter-open:hover { background:#f1f5ef; }
.letter .letter-quote { margin:0 0 1.4rem; color:var(--green); font-family:var(--display); font-size:1.55rem; font-weight:600; line-height:1.35; letter-spacing:-.015em; }
.letter-label { margin-top:auto; font-size:.86rem; color:var(--muted); line-height:1.55; }
.letter-read { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:1rem; margin-top:1rem; border-top:1px solid var(--line); color:var(--green); font-size:.9rem; font-weight:700; }
.letter-read span { font-size:1.25rem; }
.letter-full { padding:0 1.6rem 1.6rem; scroll-margin-top:6rem; }
.letters-enhanced .letter-full { display:none; }
body.letter-reader-open { overflow:hidden; }
.letter-reader { position:fixed; inset:0; margin:auto; width:min(calc(100% - 2rem),43rem); max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem); padding:0; border:1px solid var(--line); border-radius:.85rem; background:var(--paper); color:var(--ink); box-shadow:var(--shadow); overflow:auto; overscroll-behavior:contain; }
.letter-reader::backdrop { background:rgba(16,34,45,.7); }
.letter-reader-toolbar { position:sticky; top:0; display:flex; justify-content:flex-end; padding:.65rem 1rem; background:var(--paper); border-bottom:1px solid var(--line); }
.letter-reader-close { display:inline-flex; align-items:center; gap:.7rem; min-height:44px; padding:.35rem .65rem; border:1px solid var(--line); border-radius:.4rem; background:var(--paper); color:var(--ink); font-size:.9rem; font-weight:600; }
.letter-reader-close:hover { background:var(--green-soft); }
.letter-reader-close span { font-size:1.5rem; line-height:1; }
.letter-reader-content { padding:1.5rem 2rem 2rem; }
.letter-reader-label { margin:0 0 .85rem; color:var(--muted); font-size:.9rem; }
.letter-reader h2 { margin:0 0 1.5rem; color:var(--green); font-family:var(--display); font-size:1.9rem; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.letter-reader-text { overflow-wrap:anywhere; }
.letter-body p { margin:0 0 1rem; font-size:1.08rem; line-height:1.75; }
.letter-foot { padding-top:.9rem; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted); }
.letter-foot a { display:inline-block; margin-left:.35rem; }
.letter-content-note { font-size:.9rem; margin-bottom:1rem; color:var(--muted); }
.letters-categories { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 1.5rem; }
.letters-categories a { display:inline-flex; align-items:center; min-height:44px; padding:.5rem .8rem; border:1px solid var(--line); border-radius:.5rem; background:var(--paper); }
.letters-pagination { display:flex; flex-wrap:wrap; gap:1rem; padding:1rem 0 2rem; }
.write-letter { padding-block:2rem; border-top:1px solid var(--line); scroll-margin-top:5rem; }
.write-letter h2,.letter-removal h2 { margin:0 0 1rem; font-family:var(--display); font-size:2rem; line-height:1.2; }
.write-letter>p { margin:1rem 0; }
.letter-prompts { margin:1rem 0 1.4rem; padding:.6rem 1.2rem .6rem 2.4rem; background:var(--green-soft); border-left:3px solid var(--green); border-radius:0 .4rem .4rem 0; }
.letter-prompts li { padding-left:.25rem; margin:.5rem 0; }
#letters-form { margin-top:1.7rem; }
#letters-form fieldset { min-width:0; border:0; padding:0; margin:0; }
#letters-form fieldset:disabled { opacity:.72; }
#letters-form .form-field { margin-bottom:1.6rem; }
#letters-form .form-field label { font-size:1rem; }
#letters-form .form-field label span { display:inline; font-size:.85rem; margin-left:.4rem; }
#letters-form textarea { min-height:17rem; line-height:1.65; }
.letter-hint { margin:.4rem 0 .7rem; color:var(--muted); font-size:.9rem; line-height:1.55; }
.letter-count { margin-top:.45rem; text-align:right; font-size:.85rem; font-variant-numeric:tabular-nums; }
.letter-error,.letter-count.is-over { color:#9f3526; font-weight:600; }
.letter-consent { display:flex; align-items:flex-start; gap:.8rem; font-size:.96rem; line-height:1.6; }
.letter-consent input { flex:0 0 auto; width:1.3rem; height:1.3rem; margin-top:.2rem; accent-color:var(--green); }
.letter-code { margin:1.5rem 0; padding:1rem; border:1px solid var(--line); border-radius:.5rem; background:var(--paper); }
.letter-code code { display:block; margin:.7rem 0; font-size:1rem; overflow-wrap:anywhere; user-select:all; }
.letter-code p { font-size:.87rem; line-height:1.5; }
#letter-submit { margin-top:1rem; }
#letter-send-status:not(:empty) { padding:1rem; margin:1rem 0; border:1px solid var(--line); border-radius:.5rem; background:var(--paper); }
.letter-rules { margin-top:1.5rem; font-size:.9rem; line-height:1.65; }
.letter-rules h3 { margin-bottom:.5rem; font-size:1rem; }
.letter-rules p { margin:.6rem 0; }
.letter-removal { border-top:1px solid var(--line); padding-block:2rem 3rem; scroll-margin-top:5rem; }
.letter-removal h2 { font-size:1.5rem; }
.letter-removal p { margin:.7rem 0; line-height:1.6; font-size:.92rem; }
.letters-page [hidden] { display:none!important; }
@media(max-width:820px) {
  .letters-intro { padding-top:1.5rem; }
  .letters-intro h1 { font-size:2rem; }
  .write-letter h2 { font-size:1.8rem; }
  .letter-body p { font-size:1rem; }
}
@media(max-width:620px) {
  .letters-grid { grid-template-columns:1fr; }
  .letter-open { padding:1.3rem; }
  .letter .letter-quote { font-size:1.4rem; }
  .letter-reader-content { padding:1.2rem 1.3rem 1.5rem; }
  .letter-reader h2 { font-size:1.5rem; }
}
@media print { .write-letter,.letter-removal,.letters-actions,.letter-reader { display:none; } .letter { break-inside:avoid; } .letters-enhanced .letter-full { display:block; } .letter-open { height:auto; } .letters-grid { display:block; } }

.letter-reader:not([open]){display:none}
.advice-moderation{border-top:1px solid var(--line);padding-top:1.5rem;margin-top:2rem}