/* Open letters — extends legal-page.css */
.page { max-width: 860px; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }
.page-header { text-align: center; margin-bottom: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border-soft); }
.page-header-label { font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; display: block; }
.page-header-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-bottom: .4rem; }
.page-header-sub { font-size: .92rem; color: var(--text-soft); }
.page-header-year { display: inline-block; margin-top: 1rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); background: var(--bg-raised); border: 1px solid var(--border); padding: .25em .75em; border-radius: 20px; }
.preface { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--r); padding: 1.5rem 2rem; margin-bottom: 3rem; text-align: center; }
.preface p { font-size: .9rem; font-style: italic; color: var(--text-soft); line-height: 1.8; }
.letter { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 2.5rem 2.75rem; margin-bottom: 2.5rem; scroll-margin-top: 72px; }
.letter-meta { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.75rem; }
.letter-title { font-size: 1.45rem; font-weight: 700; color: var(--text); }
.letter-body { font-size: .97rem; }
.letter-body p { color: var(--text); margin-bottom: 1.1em; line-height: 1.8; }
.letter-body strong { font-weight: 600; color: var(--accent); }
.letter-body .section-heading { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 1.8em 0 .6em; display: block; }
.letter-divider { border: none; border-top: 1px solid var(--border-soft); margin: 1.4em 0; }
.letter-signature { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border-soft); }
.letter-signature p { font-size: .82rem; font-style: italic; color: var(--text-soft); }
body.lang-zh .letter[data-lang="en"], body.lang-en .letter[data-lang="zh"] { display: none !important; }
body.lang-zh .group-divider { display: none !important; }
.group-divider { display: flex; align-items: center; gap: 1rem; margin: 3rem 0; }
.group-divider::before, .group-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border-soft); }
.group-divider-label { font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.letter-lang-badge { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2em .6em; border-radius: 4px; }
.badge-zh { background: rgba(167,139,250,.12); color: #a78bfa; border: 1px solid rgba(167,139,250,.25); }
.badge-en { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(56,189,248,.22); }
.letter-body em { font-style: italic; color: var(--text-soft); }
.nav-anchors { display: flex; align-items: center; gap: .05rem; list-style: none; flex: 1; overflow: hidden; }
.nav-anchors a { font-size: .78rem; font-weight: 500; color: var(--text-soft); padding: .3rem .65rem; border-radius: var(--r-sm); white-space: nowrap; }
.nav-anchors a:hover { color: var(--accent); background: var(--accent-dim); text-decoration: none; }
.nav-sep { color: var(--border); flex-shrink: 0; }
@media (max-width: 600px) { .letter { padding: 1.75rem 1.5rem; } .page { padding: 2rem 1rem 4rem; } }