/* Article styles extend the game's existing palette and typography. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: 8px; left: 16px; z-index: 10; padding: 12px 16px; background: var(--cream); color: var(--ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.news-page { max-width: 800px; padding-block: var(--section-space); overflow-wrap: anywhere; }
.news-page:focus { outline: none; }
.news-page h1 { max-width: 20ch; }
.news-page .lead { margin-top: 24px; color: var(--muted); }
.news-date { display: block; margin-bottom: 16px; color: var(--muted); font-size: 14px; }
.news-hero { width: 100%; margin-block: 32px; border: 1px solid var(--line); }
.article-body { max-width: 65ch; }
.article-body > * + * { margin-top: 24px; }
.article-body h2, .article-body h3 { margin-top: 40px; }
.article-body h2 { font-size: clamp(26px, 3vw, 32px); }
.article-body a, .news-footer p a { text-decoration: underline; text-underline-offset: 4px; }
.article-body blockquote { margin-inline: 0; padding-left: 24px; border-left: 3px solid var(--focus); }
.article-body pre { overflow-x: auto; padding: 16px; background: var(--surface); }
.article-body img { height: auto; }
.news-list { margin-top: 32px; padding: 0; list-style: none; }
.news-list li { padding-block: 24px; border-top: 1px solid var(--line); }
.news-list h2 { font-size: clamp(26px, 3vw, 32px); }
.news-list p { margin-top: 12px; color: var(--muted); }
.news-list .text-link { gap: 4px; margin-top: 12px; }
.news-footer { padding-block: 24px 40px; border-top: 1px solid var(--line); }
.news-footer p { margin-top: 16px; color: var(--muted); }
.recent-news { padding-block: var(--section-space); border-top: 1px solid var(--line); }
.recent-news .news-list { max-width: 65ch; margin-top: 24px; }
.recent-news .news-list li { border-top: 0; padding-top: 0; }