/* Blog: article and index parts on top of styles.css. Every colour and face is a token from tokens.css. */
/* Hallmark · waive 58 · blog/*.html are articles with a Sources list · long-form reading is the job; the hero stays one headline and one lead */

.post-hero { padding-block: var(--space-2xl) var(--space-xl); border-bottom: 4px double var(--color-rule-2); }
.post-hero h1 { font-size: var(--text-display-s); max-width: 24ch; }
.post-hero .lead { max-width: 60ch; margin-top: var(--space-lg); }
.byline { margin-top: var(--space-md); font: 500 var(--text-sm)/1.4 var(--font-outlier); color: var(--color-muted); }

.article { padding-block: var(--space-2xl) var(--section-gap-s); }
.article .wrap > * { max-width: 46rem; }
.article h2 { font-size: var(--text-2xl); max-width: 30ch; margin: var(--space-2xl) 0 var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-ink); }
.article h3 { font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-sm); }
.article p, .article li { font-size: var(--text-lead); line-height: 1.55; }
.article p + p { margin-top: var(--space-md); }
.article ul, .article ol { margin: var(--space-md) 0; padding-left: 1.25em; display: grid; gap: var(--space-xs); }
.article strong { font-weight: 700; }

.fact { margin: var(--space-xl) 0; padding: var(--space-md) 0; border-block: 1px solid var(--color-rule); }
.fact b { display: block; font: 700 var(--text-3xl)/1 var(--font-display); color: var(--color-accent); letter-spacing: var(--tracking-display); }
.fact p { margin-top: var(--space-xs); font-size: var(--text-md); color: var(--color-ink-2); }

.takeaway { margin: var(--space-xl) 0; padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-top: 4px double var(--color-rule-2); }
.takeaway h2, .takeaway h3 { margin-top: 0; border: 0; padding: 0; font-size: var(--text-xl); }

.sources { margin-top: var(--space-3xl); padding-top: var(--space-md); border-top: 4px double var(--color-rule-2); }
.sources h2 { border: 0; margin-top: 0; padding: 0; font-size: var(--text-xl); }
.sources li { font-size: var(--text-sm); color: var(--color-ink-2); }

/* index */
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink); max-width: 64rem; }
.post-list li { border-bottom: 1px solid var(--color-rule); padding-block: var(--space-lg); display: grid; gap: var(--space-xs); }
.post-list h3 { font-size: var(--text-xl); max-width: 40ch; }
.post-list p { color: var(--color-ink-2); max-width: 60ch; }
.post-list .meta { font: 500 var(--text-sm)/1.4 var(--font-outlier); color: var(--color-muted); }
.cluster-h { font-size: var(--text-2xl); margin: var(--space-2xl) 0 var(--space-md); }
.soon { color: var(--color-muted); }

@media (max-width: 720px) {
  .post-hero { padding-block: var(--space-xl) var(--space-lg); }
  .article p, .article li { font-size: var(--text-md); }
}

/* tables inside a post: scroll inside their own box on a phone */
.table-scroll { overflow-x: auto; margin: var(--space-lg) 0; }
.article table { border-collapse: collapse; width: 100%; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.article th, .article td { text-align: left; vertical-align: top; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.article thead th { font: 500 var(--text-sm)/1.3 var(--font-outlier); color: var(--color-ink-2); border-bottom: 1px solid var(--color-ink); }
.article td p { font-size: var(--text-md); }

/* example texts and scripts inside a post */
.article blockquote { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border: 1px solid var(--color-rule); font-family: var(--font-body); }
.article blockquote p { font-size: var(--text-md); }

/* Post photo: one per post, credited under it (licenses in assets/blog/CREDITS.md) */
.post-photo { margin: 0 0 var(--space-xl); }
.post-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--color-ink); }
.post-photo figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.post-photo figcaption a { color: inherit; }