/* Independent article reading: shared public-interest palette, quiet reading surface. */
.article-page { --text:#334a3b; --text-light:#61715e; --text-muted:#677260; --border:#cbd5c0; --border-light:#e1e6d9; --primary-light:#4d7159; --reading-offset:112px; }
.article-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; padding-block:24px; font-size:13px; color:#697461; }
.article-breadcrumb a:hover { text-decoration:underline; text-underline-offset:4px; }
.article-page-shell { max-width:1180px; width:calc(100% - 96px); margin:0 auto 64px; }
.article-page-header { position:relative; padding:22px 0 35px; max-width:970px; }
.article-eyebrow { margin:0 0 17px; font-size:12px; font-weight:600; letter-spacing:.14em; color:#96734f; }
.article-page-header h1 { font-size:clamp(28px,3.2vw,44px); line-height:1.5; letter-spacing:.035em; margin:14px 0 20px; overflow-wrap:anywhere; }
.article-summary { max-width:820px; font-size:17px; line-height:1.95; color:#60705d; margin-bottom:22px; overflow-wrap:anywhere; }
.article-meta { display:flex; flex-wrap:wrap; gap:7px 22px; font-size:13px; color:#687460; }
.article-badges { display:flex; flex-wrap:wrap; gap:8px; }
.article-badge { padding:3px 11px; font-size:12px; border:1px solid #d9e2ce; border-radius:20px; background:#eef2e6; color:#58714b; }
.article-featured-badge { background:#f5ead9; color:#8b653b; border-color:#e8dac0; }
.article-reading-grid { display:grid; grid-template-columns:minmax(0,1fr) 250px; align-items:start; gap:28px; }
.article-reading-main { grid-column:1; grid-row:1; min-width:0; }
.article-sidebar { grid-column:2; grid-row:1; position:sticky; top:var(--reading-offset); min-width:0; max-height:calc(100dvh - var(--reading-offset) - 20px); overflow:auto; scrollbar-width:thin; }
.article-toc { border:1px solid #dfe5d5; border-radius:16px; padding:20px 18px; background:#f4f5ec; }
.article-toc summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; font-size:16px; font-weight:650; min-height:30px; }
.article-toc summary::-webkit-details-marker { display:none; }
.article-toc summary:focus-visible { outline:3px solid #ad572d; outline-offset:5px; }
.article-toc-chevron { transition:transform .2s; }
.article-toc[open] .article-toc-chevron { transform:rotate(180deg); }
.article-toc ol { list-style:none; padding:15px 0 0; margin:0; }
.article-toc li + li { margin-top:4px; }
.article-toc a { display:flex; gap:10px; padding:10px 8px; border-radius:8px; font-size:13px; line-height:1.7; color:#63735c; overflow-wrap:anywhere; }
.article-toc a > span { color:#819371; font-size:11px; flex-shrink:0; padding-top:2px; }
.article-toc a:hover, .article-toc a[aria-current] { background:#e4ebda; color:#35583e; }
.article-side-note { margin:20px 0 0; padding:24px 20px; border-radius:16px; background:#edf1e4; }
.article-side-note svg { display:block; width:43px; height:43px; fill:none; stroke:#6f8960; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px; }
.article-page .article-side-note h2 { font-size:16px; letter-spacing:0; margin-bottom:10px; }
.article-side-note p { font-size:13px; line-height:1.9; color:#68775e; }
.article-side-note a { display:inline-block; margin-top:20px; font-size:13px; color:#486540; }
.article-paper { padding:0 40px 26px; background:#fffef9; border:1px solid #dfe5d5; border-radius:18px; }
.article-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; padding:17px 0; margin-bottom:22px; border-bottom:1px solid #e5e8dd; font-size:13px; }
.article-save { display:flex; align-items:center; gap:6px; }
.article-save svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.article-page .article-page-fav { position:static; min-height:44px; border:0; background:none; color:#486441; font:inherit; cursor:pointer; padding:0 4px; }
.article-page .article-page-fav.on { color:#946226; }
.article-comment-link { display:inline-flex; align-items:center; min-height:44px; }
.article-text-size { display:flex; align-items:center; margin-left:auto; background:#f1f3e9; border-radius:24px; padding:3px; }
.article-text-size button { width:42px; height:38px; border:0; border-radius:22px; background:none; color:#526447; font:inherit; cursor:pointer; }
.article-text-size button[aria-pressed="true"] { color:white; background:#4d7159; }
.article-cover { margin:0 0 22px; border-radius:12px; overflow:hidden; }
.article-cover img { width:100%; height:auto; max-height:520px; object-fit:contain; }
.article-body { padding-top:16px; font-size:17px; line-height:2; color:#344d3b; overflow-wrap:anywhere; }
.article-page[data-reading-size="large"] .article-body { font-size:20px; }
.article-body p { margin:0 0 22px; }
.article-page .article-body h2 { font-size:23px; line-height:1.6; letter-spacing:.025em; margin:34px 0 16px; padding-left:14px; border-left:3px solid #9aaf87; }
.article-body h2:first-child { margin-top:8px; }
.article-body strong { color:#294b35; }
.article-body ul, .article-body ol { padding-left:24px; margin:0 0 22px; }
.article-body ul { list-style:disc; }
.article-body li { margin-bottom:9px; }
.article-body blockquote { background:#eff3e7; border-left:3px solid #9aae86; border-radius:0 12px 12px 0; padding:18px 22px; margin:24px 0; color:#526b47; }
.article-body img { height:auto; max-width:100%; margin:22px auto; border-radius:10px; }
.article-note { color:#63755b; font-size:.9em; }
.article-empty, .article-state { padding:24px; color:#66765c; text-align:center; font-size:14px; }
.article-end { display:flex; justify-content:space-between; gap:16px; padding-top:22px; margin-top:28px; border-top:1px solid #e1e6d7; font-size:12px; color:#738268; }
.article-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:22px 0 34px; }
.article-nav > * { min-width:0; padding:20px 22px; border:1px solid #dfe5d5; border-radius:14px; background:#f5f6ed; }
.article-nav > :last-child { text-align:right; }
.article-nav span { font-size:12px; color:#6c7b61; }
.article-nav strong { display:block; font-size:15px; line-height:1.8; margin-top:8px; font-weight:550; overflow-wrap:anywhere; }
.article-nav a:hover { border-color:#a6b798; background:#edf2e5; }
.article-nav-disabled { opacity:.65; }
.article-related { margin:32px 0; }
.article-page .article-related > h2 { font-size:24px; letter-spacing:.03em; margin-bottom:18px; }
.article-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.article-related-card { display:flex; flex-direction:column; min-width:0; padding:20px; border:1px solid #dfe5d5; border-radius:14px; background:#fffef9; }
.article-related-card:hover { border-color:#9eb38d; }
.article-page .article-related-card h3 { font-size:16px; line-height:1.7; margin:8px 0; overflow-wrap:anywhere; }
.article-related-card p { color:#6a7762; font-size:12px; line-height:1.9; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.article-related-tag { color:#688259; font-size:11px; }
.article-related-more { display:block; margin-top:auto; padding-top:18px; font-size:12px; color:#527147; }
.player-bar { margin-bottom:12px; padding:14px 16px; border:1px solid #dfe6d4; border-radius:12px; background:#f1f5e9; }
.player-bar:empty { display:none; }
.player-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.player-btn { padding: 7px 16px; border: 0; border-radius: 6px; background: var(--primary); color: #fff; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; }
.player-time { color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
.player-seek { flex: 1; min-width: 120px; }
.player-rate { padding: 5px 7px; border: 1px solid #d5d8dc; border-radius: 6px; background: #fff; }
.tts-reading { padding: 2px 4px; border-radius: 4px; background: #ebf5fb !important; box-shadow: inset 3px 0 0 #2471a3; }
.comment-section { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--border-light); }
.comment-title { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 1.15rem; }
.comment-count { padding: 1px 8px; border-radius: 10px; background: var(--primary); color: #fff; font-size: .75rem; }
.comment-form { margin-bottom: 18px; }
.comment-form textarea, .reply-box textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; resize: vertical; font: inherit; line-height: 1.65; }
.comment-form textarea { min-height: 76px; }
.comment-submit-row, .reply-submit-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.comment-char, .reply-char { margin-left: auto; color: var(--text-muted); font-size: .78rem; }
.comment-login-tip { margin-bottom: 18px; padding: 12px 14px; border-radius: 8px; background: #f4f6f7; color: var(--text-muted); font-size: .88rem; }
.comment-item { padding: 15px 0; border-bottom: 1px solid var(--border-light); }
.comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.comment-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .85rem; font-weight: 600; }
.comment-author { font-size: .88rem; font-weight: 650; }
.comment-time { color: var(--text-muted); font-size: .78rem; }
.comment-content { word-break: break-word; white-space: pre-wrap; font-size: .92rem; line-height: 1.8; }
.comment-actions { display: flex; gap: 15px; margin-top: 7px; }
.like-btn, .reply-btn { padding: 2px 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.like-btn.liked { color: var(--danger); font-weight: 650; }
.comment-replies { margin-left: 42px; }
.reply-to { color: var(--accent); font-size: .82rem; font-weight: 650; }
.reply-box { display: none; margin-top: 10px; }
.reply-box.open { display: block; }
.comment-item.comment-highlight { border-radius: 8px; animation: articleCommentFlash 2.6s ease; }
@keyframes articleCommentFlash { 0%,55% { background:#fff9e6; box-shadow:0 0 0 2px #f1c40f; } 100% { background:transparent; box-shadow:none; } }


.article-page .player-btn { background:#52734b; border-radius:24px; min-height:40px; }
.article-page .player-rate { max-width:100%; min-width:0; min-height:40px; border-color:#ccd8bc; color:#4b6342; background:#fffef9; }
.article-page #tts-voice { max-width:240px; flex:1; }
.article-page .player-seek { accent-color:#52734b; }
.article-page .tts-reading { background:#e9f0dd !important; box-shadow:inset 3px 0 0 #829c6c; }
.article-page .comment-section { padding:28px 32px; border:1px solid #dfe5d5; border-radius:18px; background:#fffef9; }
.article-section-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; }
.article-section-heading .article-eyebrow { margin-bottom:5px; }
.article-page .comment-title { margin-bottom:0; font-size:24px; letter-spacing:.02em; }
.article-discussion-note { font-size:12px; color:#718065; }
.article-page .comment-login-tip { background:#f0f3e8; border-radius:10px; padding:18px; line-height:1.9; }
.article-page .comment-login-tip a { text-decoration:underline; text-underline-offset:4px; }
.article-page .comment-form textarea, .article-page .reply-box textarea { background:#fafbf5; font-size:16px; padding:15px; }
.article-page .comment-form textarea:focus-visible, .article-page .reply-box textarea:focus-visible { outline:2px solid #79936b; outline-offset:2px; }
.article-page .comment-submit-row .btn, .article-page .reply-submit-row .btn { border-radius:24px; color:white; min-height:44px; }
.article-page .like-btn, .article-page .reply-btn { min-height:40px; }
.article-page .comment-head { flex-wrap:wrap; }
.article-page .comment-item { scroll-margin-top:var(--reading-offset); }
.article-page :is(#article-top,#article-content,#comments,.article-body h2) { scroll-margin-top:var(--reading-offset); }
.article-page :is(#article-top,#article-content,#comments,.article-body h2):focus { outline:none; }
@media (max-width:1100px) {
 .article-reading-grid { grid-template-columns:minmax(0,1fr) 220px; gap:20px; }
 .article-paper { padding-inline:28px; }
 .article-related-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
 .article-page { --reading-offset:100px; }
 .article-page-shell { width:calc(100% - 40px); }
 .article-page-header { padding:10px 0 25px; }
 .article-reading-grid { display:flex; flex-direction:column; gap:18px; }
 .article-sidebar { width:100%; position:static; max-height:none; overflow:visible; }
 .article-side-note { display:none; }
 .article-toc { padding:13px 18px; }
 .article-toc nav { max-height:300px; overflow:auto; }
 .article-reading-main { width:100%; }
 .article-paper { padding:0 22px 24px; }
 .article-page .article-body h2 { font-size:21px; }
 .article-page .comment-section { padding:24px 22px; }
 .article-summary { font-size:16px; }
 .article-nav > * { padding:16px; }
 .article-nav strong { font-size:14px; }
 .comment-replies { margin-left:18px; }
}
@media (max-width:400px) {
 .article-page-shell { width:calc(100% - 28px); }
 .article-paper { padding-inline:17px; }
 .article-toolbar { gap:4px 10px; font-size:12px; }
 .article-text-size button { width:36px; }
 .article-nav { grid-template-columns:1fr; }
 .article-nav > :last-child { text-align:left; }
 .article-page .comment-section { padding-inline:18px; }
 .article-page .player-rate { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .article-page { scroll-behavior:auto; } .article-page *, .article-page *::before { animation:none !important; transition:none !important; } }
.article-input-label { display:block; margin-bottom:9px; font-size:14px; color:#54694a; } .article-retry { margin-top:14px; min-height:44px; padding:8px 20px; border:1px solid #b5c6a5; border-radius:24px; color:#46663b; background:#f5f7ed; font:inherit; cursor:pointer; }