.article-shell { max-width: 1000px; margin: auto; padding: 220px 40px 80px; }
.article-back { display: inline-block; color: var(--forest); font-size: 13px; margin-bottom: 48px; border-bottom: 1px solid var(--brass); padding-bottom: 6px; }
.article-header { max-width: 800px; margin: 0 auto 42px; }
.article-header h1 { font: 400 clamp(42px,5vw,72px)/1.06 var(--font-display); color: var(--forest); text-wrap: balance; margin: 14px 0 26px; }
.article-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.article-author { display: inline-flex; align-items: center; gap: 14px; color: var(--forest); text-decoration: none; }
.article-author-badge { display: block; flex: 0 0 64px; width: 64px; height: 64px; padding: 3px; border: 1px solid var(--brass); border-radius: 50%; background: var(--cream); }
.article-author-badge img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 22%; }
.article-author-copy { display: flex; flex-direction: column; gap: 1px; }
.article-author-label { color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.article-author-name { font-size: 15px; font-weight: 500; }
a.article-author .article-author-name { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; text-decoration-thickness: 1px; }
a.article-author:hover .article-author-name { text-decoration-color: var(--forest); }
.article-byline-details { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-left: 28px; border-left: 1px solid var(--border); }
@media(max-width:480px) { .article-byline { align-items: flex-start; gap: 14px; }.article-byline-details { width: 100%; padding-left: 0; border-left: 0; } }
.article-cover { margin: 0 0 48px; }
.article-cover img { width: 100%; max-height: 580px; object-fit: contain; background: var(--cream-warm); }
.article-content { max-width: 720px; margin: auto; font: 17px/1.85 var(--font-body); color: var(--forest); overflow-wrap: anywhere; }
.article-content :is(p,ul,ol,blockquote,figure,table) { margin: 0 0 24px; }
.article-content :is(h2,h3,h4,h5,h6) { margin: 40px 0 18px; font-family: var(--font-display); line-height: 1.15; font-weight: 500; }
.article-content h2 { font-size: 38px; }.article-content h3 { font-size: 30px; }
.article-content :is(ul,ol) { padding-left: 26px; }
.article-content li { margin-bottom: 10px; }
.article-content a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.article-content img { max-width: 100%; height: auto; margin: 24px auto; }
.article-table-wrap { max-width: 100%; overflow-x: auto; margin-bottom: 24px; }
.article-content table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: 14px; }
.article-content :is(th,td) { border: 1px solid var(--border); padding: 10px; min-width: 100px; }
.article-content blockquote { border-left: 2px solid var(--brass); padding-left: 24px; }
.article-video { margin-bottom: 40px; }.article-video iframe { width: 100%; aspect-ratio: 16/9; border: 0; background: var(--forest); }
.article-video a { display: inline-block; font-size: 13px; margin-top: 14px; border-bottom: 1px solid var(--brass); }
.article-source { max-width: 720px; margin: 48px auto; padding-top: 24px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.8; color: var(--muted); }.article-source a { color: var(--forest); text-decoration: underline; text-underline-offset: 4px; }
.article-related { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--border); }.article-related>div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }.article-related a { padding-top: 12px; }.article-related span { color: var(--muted); font-size: 12px; }.article-related h3 { font: 30px/1.15 var(--font-display); color: var(--forest); margin-top: 12px; }
.page-mor-article a:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
@media(max-width:720px) { .article-shell { padding: 155px 24px 60px; }.article-back { margin-bottom: 32px; }.article-header h1 { font-size: 44px; }.article-content { font-size: 16px; line-height: 1.8; }.article-related>div:last-child { grid-template-columns: 1fr; }.article-content h2 { font-size: 32px; } }
@media(max-width:720px) { .article-table-wrap::before { content: 'Swipe to view the full table →'; display: block; position: sticky; left: 0; width: fit-content; margin-bottom: 12px; color: var(--muted); font-size: 12px; } }