/* Editorial reading layout */
.article-page { background: radial-gradient(ellipse at 80% 0, #123341 0, transparent 38rem), var(--bg-0); }
.article-header { max-width: 1120px; margin: auto; padding: 88px 24px 58px; border-bottom: 1px solid var(--line); }
.article-header h1 { font-size: clamp(2rem, 4.7vw, 3.8rem); line-height: 1.16; max-width: 25ch; letter-spacing: -.035em; text-wrap: balance; }
.article-meta { display: flex; gap: 14px; align-items: center; margin-top: 32px; color: var(--text-1); font-size: .9rem; }
.article-meta strong { color: var(--text-0); }
.author-avatar { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); }
.article-layout { max-width: 1120px; padding: 56px 24px 96px; margin: auto; display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 64px; align-items: start; }
.article-toc { position: sticky; top: 100px; display: grid; gap: 15px; font-size: .88rem; border-left: 1px solid var(--line); padding-left: 20px; }
.article-toc p { font-size: .72rem; letter-spacing: .14em; color: var(--accent); margin: 0 0 4px; }
.article-toc a { text-decoration: none; color: var(--text-1); }
.article-toc a:hover, .article-back:hover { color: var(--accent); }
.article-body { min-width: 0; font-size: 1.1rem; line-height: 1.85; overflow-wrap: break-word; }
.article-body > p:first-child { font-size: 1.3rem; color: var(--text-0); line-height: 1.7; margin-top: 0; }
.article-body h2 { max-width: none; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 2em 0 .8em; scroll-margin-top: 100px; }
.article-body p { margin: 0 0 1.4em; }
.article-body li { margin-bottom: .9em; color: var(--text-1); }
.article-body ul { padding-left: 1.3em; }
.article-body strong { color: var(--text-0); }
.article-tags { color: var(--accent); font-size: .9rem; word-spacing: .35em; }
.article-sources { border-top: 1px solid var(--line); margin-top: 48px; font-size: .9rem; }
.article-sources a { text-underline-offset: 4px; }
.article-author { margin-top: 48px; border: 1px solid var(--line); border-radius: 16px; padding: 28px; background: rgba(47,212,200,.04); }
.article-author h2 { margin: 0 0 12px; }
.article-author p { font-size: 1rem; }
.article-back { font-size: .88rem; text-decoration: none; white-space: nowrap; }
.article-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 200; padding: 12px; background: var(--bg-0); }
.skip-link:focus { top: 10px; }
.article-preview { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-top: 32px; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(120deg,rgba(47,212,200,.07),rgba(91,140,255,.03)); }
.article-preview h3 { max-width: 36ch; font-size: clamp(1.3rem,2.5vw,1.9rem); }
.article-preview p { max-width: 64ch; }
.article-preview__meta { color: var(--accent); font-size: .8rem; }
@media (max-width: 1000px) { .article-layout { grid-template-columns: 170px minmax(0,1fr); gap: 32px; } .nav__links { gap: 16px; } }
@media (max-width: 900px) { .nav__links, .nav__cta { display: none; } .nav__toggle { display: flex; } }
@media (max-width: 760px) {
 .article-header { padding: 48px 20px 32px; }
 .article-layout { display: block; padding: 28px 20px 64px; }
 .article-toc { position: static; margin-bottom: 36px; gap: 12px; }
 .article-body { font-size: 1.03rem; }
 .article-body > p:first-child { font-size: 1.15rem; }
 .article-preview { grid-template-columns: 1fr; padding: 24px; gap: 12px; }
 .article-preview .btn { justify-self: start; }
 .article-page .nav__inner { gap: 12px; padding: 14px 20px; flex-wrap: wrap; }
 .article-page .nav__brand { font-size: .9rem; }
}
@media print { .nav,.article-toc,.article-author,.footer,.skip-link { display: none; } .article-page { background: white; color: black; } .article-layout { display: block; padding: 0; } .article-header { padding: 20px 0; } .article-body p,.article-body li,.article-body strong,.article-meta { color: black; } }
