/* Articles: the list of articles, the article's lead paragraph and the closing call to action.
   The hero, the article column and the rendered Markdown come from docs.css; every colour from tokens.css. */

/* ---------- List ---------- */
.article-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--white); }
.article-list li + li { border-top: 1px solid var(--line); }
.article-list a { display: grid; gap: 0.3rem; padding: 1.25rem; text-decoration: none; }
.article-list a:hover { background: var(--surface); }
.article-list time { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--accent-deep); }
.article-list b { font-size: 1.15rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.article-list span { font-size: 0.93rem; line-height: 1.55; color: var(--muted); }

/* ---------- Article ---------- */
.article .eyebrow a { color: inherit; text-decoration: none; }
.article .eyebrow a:hover { color: var(--accent-deep); }
.article .prose > p:first-child { font-size: 1.1rem; line-height: 1.6; color: var(--muted); }

.article-cta {
  margin-top: 3.5rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.article-cta p { margin-top: 0.5rem; color: var(--muted); }
.article-cta .actions { justify-content: flex-start; margin-top: 1.25rem; }