/* assets/css/v2/pages-article.css — Article page of the news skin: reading width, 18px body, full editor-output styling, author card, previous/next
   keywords: article, prose, reading width 70ch, table scroll, code block scroll, blockquote, toc, author, no overflow
   Needs tokens-news, base, components-cards, chrome-home, pages-home. No ad slot on this page; nothing is sticky, fixed or animated. */

.ar { max-inline-size: 52rem; margin-inline: auto; padding-block-end: var(--sp-5); }
.ar-head { padding-block: var(--sp-5) var(--sp-4); }
.ar-head h1 { font-size: var(--fs-h1); line-height: 1.15; overflow-wrap: anywhere; }
.ar-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-block-start: var(--sp-3); color: var(--c-muted); font-size: 1rem; }
.ar-meta a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; text-decoration: none; }
.ar-hero { margin-block: var(--sp-2) var(--sp-5); }
.ar-hero-box { aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-brand-soft); border-radius: var(--radius); }
.ar-hero-box img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.ar-toc { margin-block-end: var(--sp-5); padding: var(--sp-4); background: var(--c-surface); border-inline-start: 4px solid var(--c-brand); }
.ar-toc ol { margin-block-start: var(--sp-2); padding-inline-start: var(--sp-5); list-style: decimal; }
.ar-toc li.lvl-3 { margin-inline-start: var(--sp-4); list-style: circle; }
.ar-toc a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; color: var(--c-text); text-decoration: none; overflow-wrap: anywhere; }
.ar-toc a:hover { color: var(--c-brand); text-decoration: underline; }

/* ---- body: 18px, about 70 characters per line ---- */
.ar-body { max-inline-size: 70ch; font-size: 1.125rem; line-height: 1.8; overflow-wrap: anywhere; }
.ar-body > * + * { margin-block-start: var(--sp-4); }
.ar-body h2 { margin-block-start: var(--sp-7); font-size: var(--fs-h2); scroll-margin-block-start: var(--sp-5); }
.ar-body h3 { margin-block-start: var(--sp-6); font-size: var(--fs-h3); scroll-margin-block-start: var(--sp-5); }
.ar-body h4 { margin-block-start: var(--sp-5); }
.ar-body a { text-decoration: underline; }
.ar-body ul, .ar-body ol { padding-inline-start: var(--sp-5); list-style-position: outside; }
.ar-body ul { list-style-type: disc; }
.ar-body li + li { margin-block-start: var(--sp-2); }
.ar-body blockquote { padding: var(--sp-2) var(--sp-5); border-inline-start: 4px solid var(--c-brand); background: var(--c-surface); font-weight: var(--fw-strong); }
.ar-body img, .ar-body video, .ar-body iframe { max-inline-size: 100%; block-size: auto; border-radius: var(--radius); }
.ar-body figure { margin-inline: 0; }
.ar-body figcaption { margin-block-start: var(--sp-2); color: var(--c-muted); font-size: var(--fs-sm); }
.ar-body hr { margin-block: var(--sp-6); }
.ar-body code { padding: 1px 6px; background: var(--c-brand-soft); border-radius: var(--radius); font-size: .9em; overflow-wrap: anywhere; }
.ar-body pre { max-inline-size: 100%; padding: var(--sp-4); overflow-x: auto; background: var(--c-inverse-bg); color: var(--c-inverse-text); border-radius: var(--radius); font-size: .9rem; line-height: 1.6; -webkit-overflow-scrolling: touch; }
.ar-body pre code { padding: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; }
/* editor tables as they are: the table itself scrolls sideways, columns keep at least 8.5rem and words are never cut mid-way */
.ar-body table { display: block; max-inline-size: 100%; overflow-x: auto; font-size: 1rem; -webkit-overflow-scrolling: touch; }
.ar-body th, .ar-body td { min-inline-size: 8.5rem; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); text-align: start; vertical-align: top; overflow-wrap: normal; word-break: normal; hyphens: none; }
.ar-body th { background: var(--c-surface); }

.ar-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-5); list-style: none; }
.ar-tags a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; padding-inline: var(--sp-3); border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-text); text-decoration: none; }
.ar-tags a:hover { border-color: var(--c-brand); color: var(--c-brand); }

.ar-author { display: flex; gap: var(--sp-4); align-items: flex-start; margin-block-start: var(--sp-6); padding: var(--sp-4); border-block: var(--rule); }
.ar-avatar { flex: 0 0 56px; inline-size: 56px; block-size: 56px; object-fit: cover; border-radius: 50%; }
.ar-author-name { font-weight: var(--fw-display); font-size: var(--fs-lg); }

.ar-share { margin-block-start: var(--sp-5); }
.ar-share h2 { font-size: 1rem; margin-block-end: var(--sp-2); }
.ar-share-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.ar-share-link { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 10px; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-surface); color: var(--c-text); text-decoration: none; cursor: pointer; }
.ar-share-link:hover { border-color: var(--c-brand); color: var(--c-brand); background: var(--c-brand-soft); }
.ar-share-link svg { inline-size: 22px; block-size: 22px; flex: none; fill: currentColor; }
.ar-share-list [hidden] { display: none !important; }
.ar-share-status { color: var(--c-muted); font-size: var(--fs-sm); }
.ar-share-status:empty { display: none; }

.ar-near { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-5); }
.ar-near a { display: flex; flex-direction: column; justify-content: center; min-block-size: 72px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--radius); color: var(--c-text); text-decoration: none; }
.ar-near a:hover { border-color: var(--c-brand); }
.ar-near small { color: var(--c-brand); font-weight: var(--fw-strong); }
.ar-near span { font-weight: var(--fw-strong); overflow-wrap: anywhere; }
.ar-near-next { text-align: end; }
@media (min-width: 768px) { .ar-near { grid-template-columns: 1fr 1fr; } .ar-near-next { grid-column: 2; } }