@layer pages {
/* Articles: blog posts and guides (layouts/article.njk). Text styles come from .prose in main.css. */

.article-wrap { max-width: calc(1120px + 2 * var(--gutter)); }

/* Title block: centred on the reading column so long titles wrap evenly. */
.article-head { max-width: var(--w-prose); padding-block: var(--intro-top) var(--space-8); }
.article-head > * + * { margin-top: var(--head-gap); }
.article-head .breadcrumbs { margin-bottom: var(--space-6); }
.article-head h1 { font-size: var(--fs-h1); }
.article-head .lede { margin-top: var(--space-4); }
.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-5) !important;
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-muted);
}
/* Separators trail each item so a wrapped line never starts with one. */
.article-meta span:not(:last-child)::after { content: "·"; margin-left: var(--space-4); color: var(--border-strong); }
.article-status { margin-top: var(--space-6) !important; }
.evidence { max-width: 72ch; margin-top: var(--space-4) !important; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--surface); font-size: var(--fs-small); color: var(--text-muted); }
.evidence strong { color: var(--text); }

.article-cover { margin-bottom: var(--space-12); }
.article-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); background: var(--surface); }
.article-cover figcaption { margin-top: var(--space-3); max-width: var(--w-prose); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-muted); }

/* Reading column + sticky contents (≥ 1024 px); contents collapse above the text below that. */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (min-width: 1024px) {
  .article-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-16); }
  .article-grid .toc { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--space-6)); max-height: calc(100vh - var(--header-h) - var(--space-12)); overflow: auto; }
  .article-grid .article-body { grid-column: 1; grid-row: 1; }
}
.toc { font-size: var(--fs-small); line-height: var(--lh-small); }
.toc-title { margin-bottom: var(--space-3); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--text-muted); }
.toc ol { display: grid; gap: 0; padding: 0; list-style: none; border-left: 1px solid var(--border); }
.toc a { display: block; padding: var(--space-1) 0 var(--space-1) var(--space-3); margin-left: -1px; border-left: 2px solid transparent; color: var(--text-muted); }
.toc a:hover { color: var(--primary); border-left-color: var(--primary); }
@media (max-width: 1023px) {
  .toc:has(.toc-toggle):not(.is-open) > ol { display: none; }
  .toc { padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
  .toc .toc-title { display: none; }
  .toc.is-open ol { margin-block: var(--space-2) var(--space-3); }
}

/* Article body extras on top of .prose */
.article-body { max-width: var(--w-prose); }
.article-body > section > * + * { margin-top: 1.1em; }
.article-body pre { overflow-x: auto; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-small); line-height: 1.6; }
.article-body pre code { padding: 0; background: none; }
.article-body ul.bulleted { list-style: disc; padding-left: 1.4em; }
.article-body .list { list-style: disc; padding-left: 1.2em; font-size: var(--fs-ui); }
.article-body .list li + li { margin-top: var(--space-1); }
.article-body .cards-3 { --grid-min: 200px; margin-block: var(--space-8); }
.article-body .cards-3 h3 { margin-top: 0; font-size: var(--fs-title); line-height: var(--lh-title); }
.article-body .info-card { padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.article-body .info-card h3 { margin: 0 0 var(--space-3); font-size: var(--fs-title); }
.article-body .info-card ul { padding-left: 1.2em; font-size: var(--fs-ui); }
.article-body .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.article-body .callout { margin-block: var(--space-6); }
.article-body .callout > .icon { width: auto; height: auto; }
.article-body .post-faq { margin-top: var(--space-12); }
.article-body .post-faq > h2 { margin-bottom: var(--space-4); }
.article-body .post-faq details + details { margin-top: var(--space-3); }
.article-body .post-faq details p { margin: 0; font-size: var(--fs-body); }
.article-body #sources { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border); font-size: var(--fs-small); }
.article-body #sources h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.article-body #sources li { overflow-wrap: anywhere; }

.article-foot { max-width: var(--w-prose); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border); display: grid; gap: var(--space-6); }
.author-card p:not(.card-title) { font-size: var(--fs-small); }
.author-card a { color: var(--primary); text-decoration: underline; }

.related { margin-top: var(--space-12); background: var(--surface); padding-block: var(--section-y-tight); }
.related-title { margin-bottom: var(--space-6); font-size: var(--fs-h2); }
}