/* The guides under /blog/: static pages that reuse the site's tokens, header, footer and prose type.
   This file adds only the article grammar: byline, answer-first lede, takeaways panel, contents, captioned figures,
   the route list, FAQ, tables and the index. Every colour comes from tokens.css, so light and dark themes follow the site.
   No gradients, glows, badge pills or eyebrow labels. Columns: the body measure is about 66 characters (720px). */

.blog-page { padding-block: var(--sp-4) var(--sp-8); }
.blog-page .crumbs { padding-top: var(--sp-2); }

.article { max-width: 720px; margin-inline: auto; }
.article h1 { font-size: clamp(2rem, 1.45rem + 2.4vw, 3.1rem); max-width: 20ch; margin: var(--sp-3) 0 var(--sp-4); }
.article h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin: var(--sp-7) 0 var(--sp-3); scroll-margin-top: var(--sp-5); }
.article h3 { font-size: 1.15rem; margin: var(--sp-5) 0 var(--sp-2); }

.byline { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-5); font: 500 .9rem/1.4 var(--font-ui); color: var(--text-3); }
.byline a { color: var(--text-2); }

.article p, .article li { font-family: var(--font-read); font-size: 1.0625rem; line-height: 1.72; color: var(--text-2); }
.article .lede { font-size: 1.2rem; line-height: 1.65; color: var(--text); }
.article ul, .article ol { margin: 0 0 var(--sp-4); }
.article li + li { margin-top: var(--sp-2); }

/* Key takeaways: a tonal panel, the only box on the page. */
.takeaways { margin: var(--sp-5) 0 var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--surface); border-radius: var(--r-lg); }
.takeaways h2 { font: 600 1rem/1.3 var(--font-ui); margin: 0 0 var(--sp-2); color: var(--text); }
.takeaways ul { margin: 0; padding-left: 1.15rem; }
.takeaways li { font-size: 1rem; line-height: 1.6; }

/* Contents: native details, so it works without script; open by default. */
.toc { margin: 0 0 var(--sp-6); font: 500 .95rem/1.4 var(--font-ui); }
.toc summary { cursor: pointer; color: var(--text); font-weight: 600; padding: var(--sp-2) 0; }
.toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.toc li { margin: 0; border-bottom: 1px solid var(--line); }
.toc li + li { margin-top: 0; }
.toc a { display: block; padding: var(--sp-2) 0; color: var(--text-2); text-decoration: none; }
.toc a:hover, .toc a:focus-visible { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* Figures: images keep their own size up to the column width; captions carry the credit. */
.article figure { margin: var(--sp-6) 0; }
.article figure img { max-width: 100%; height: auto; border-radius: var(--r-lg); }
.article figure.hero { margin: var(--sp-5) 0 var(--sp-6); }
.article figcaption { margin-top: var(--sp-2); font: 400 .875rem/1.55 var(--font-ui); color: var(--text-3); }
.article figcaption a { color: var(--text-2); }

.table-scroll { overflow-x: auto; margin: var(--sp-5) 0; }
.article table { font: 400 .95rem/1.5 var(--font-ui); min-width: 460px; }
.article th, .article td { text-align: left; vertical-align: top; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-top: 1px solid var(--line); color: var(--text-2); }
.article th { color: var(--text); font-weight: 600; }
.article thead th { border-top: 0; border-bottom: 1px solid var(--line-strong); }

/* The route to a topic, in order: the rail is the chain of prerequisites, the numbers are their order. */
.route-list { list-style: none; margin: var(--sp-5) 0 var(--sp-6); padding: 0 0 0 var(--sp-6); border-left: 1px solid var(--line-strong); counter-reset: route; }
.route-list li { position: relative; counter-increment: route; margin: 0; padding: var(--sp-1) 0; font: 500 1rem/1.4 var(--font-ui); }
.route-list li + li { margin-top: 0; }
.route-list li::before { content: counter(route); position: absolute; left: calc(-1 * var(--sp-6) - 15px); top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text-2); font: 600 .8rem/1 var(--font-mono); }
.route-list li.is-goal::before { background: var(--accent); color: var(--accent-ink); }
.route-list a { color: var(--text); text-decoration: none; }
.route-list a:hover, .route-list a:focus-visible { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.route-list li.is-goal a { font-weight: 600; }

/* FAQ: each question is a heading, each answer is plain prose. */
.faq h3 { margin-top: var(--sp-5); }

/* Related reading and the blog index: hairline rows, no cards. */
.related { margin-top: var(--sp-7); }
.related h2 { font-size: 1.35rem; margin-top: 0; }
.related ul, .post-list { list-style: none; margin: 0; padding: 0; }
.related li, .post-list li { margin: 0; border-top: 1px solid var(--line); padding: var(--sp-3) 0; }
.related li + li, .post-list li + li { margin-top: 0; }
.related a, .post-list a { color: var(--text); font: 600 1rem/1.4 var(--font-ui); text-decoration: none; }
.related a:hover, .post-list a:hover { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.related p, .post-list p { margin: var(--sp-1) 0 0; font: 400 .95rem/1.55 var(--font-ui); color: var(--text-3); }
.post-list li { padding: var(--sp-5) 0; }
.post-list h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin: 0 0 var(--sp-2); }
.post-list h2 a { font: inherit; }
.post-list p { font: 400 1.0625rem/1.6 var(--font-read); color: var(--text-2); margin: 0 0 var(--sp-2); }
.post-list time { font: 500 .9rem/1.4 var(--font-ui); color: var(--text-3); }

@media (max-width: 640px) {
  .blog-page { padding-block: var(--sp-3) var(--sp-7); }
  .article p, .article li { font-size: 1rem; }
  .article .lede { font-size: 1.1rem; }
  .takeaways { padding: var(--sp-4); }
  .article figure { margin: var(--sp-5) 0; }
  /* Narrow screens: each table row becomes a stacked block; the header text stays for screen readers. */
  .article table, .article tbody { display: block; min-width: 0; }
  .article thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .article tbody tr { display: block; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
  .article th, .article td { display: block; border-top: 0; padding: 0; }
  .article th[scope="row"] { margin-bottom: var(--sp-1); font: 600 1.02rem/1.35 var(--font-ui); color: var(--text); }
  .article td + td { margin-top: var(--sp-2); }
  .article td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 .8rem/1.3 var(--font-ui); color: var(--text-3); }
}