/* Blog pages (/blog/). Extends styles.css + visa.css. */
.post-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 2.5rem); border-bottom: 1px solid var(--rule); }
.post-head h1 { font-size: clamp(2.125rem, 1.35rem + 2.9vw, 3.5rem); line-height: 1.06; max-width: 21ch; }
.post-head.plain { border-bottom: 0; padding-bottom: 0; }
.kicker { font: 500 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--vermilion-ink); margin: 0 0 1rem; }
.post-head .lede { margin: 1.25rem 0 0; max-width: 54ch; }
.byline { font-size: 0.875rem; color: var(--ink-2); margin: 1.25rem 0 0; }
.byline .mono { font-size: 0.8125rem; }

.prose { max-width: 48rem; padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 6vw, 4.5rem); }
.prose > * { min-width: 0; }
.prose p, .prose li { text-wrap: pretty; }
.prose p { margin: 0 0 1.125rem; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); margin: 2.75rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.prose ul { margin: 0 0 1.25rem; padding-left: 1.125rem; }
.prose li + li { margin-top: 0.5rem; }
.prose li::marker { color: var(--vermilion-ink); }
.prose code { font: 400 0.875em var(--mono); overflow-wrap: anywhere; }
.prose a { text-decoration-color: var(--vermilion); }

.findings { list-style: none; margin: 1.5rem 0 2rem !important; padding: 1.25rem 1.5rem 1.375rem !important; background: var(--surface); border: 1px solid var(--ink); counter-reset: f; }
.findings li { counter-increment: f; position: relative; padding-left: 2.25rem; }
.findings li + li { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--rule); }
.findings li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 0; font: 500 0.8125rem/1.9 var(--mono); color: var(--vermilion-ink); }
.findings li + li::before { top: 0.875rem; }

.prose .table-scroll { margin: 1.5rem 0 0.375rem; border-top: 1px solid var(--ink); }
.prose .data-table { font-size: 0.875rem; min-width: 34rem; }
.prose .data-table thead th { font-size: 0.75rem; padding-top: 0.625rem; border-bottom-color: var(--ink); }
.prose .data-table tbody th, .prose .data-table tbody td { padding: 0.5rem 0.875rem 0.5rem 0; }
.prose .data-table tbody th { font: 500 0.875rem/1.4 var(--sans); }
.prose .data-table td.rank { width: 2rem; }
.nowrap { white-space: nowrap; }
.prose .table-scroll + p { margin-top: 1.25rem; }
.prose .data-table tbody th { min-width: 8.5rem; }
.prose .data-table tbody td.rank + th { min-width: 10rem; }
.prose .table-note { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); margin: 0.5rem 0 1.75rem; }
.prose .table-note em { font-style: normal; }
.prose hr { border: 0; border-top: 2px solid var(--ink); margin: 3rem 0 1.5rem; }
.prose .source { font-size: 0.875rem; color: var(--ink-2); }
.prose .advice { font-size: 0.9375rem; padding: 0.875rem 1rem; background: var(--vermilion-wash); border-left: 3px solid var(--vermilion); }

.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); max-width: 52rem; }
.post-list li { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.post-list time { font: 500 0.8125rem/1 var(--mono); color: var(--ink-2); }
.post-list h2 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.2; margin: 0.5rem 0 0.5rem; }
.post-list h2 a { text-decoration-color: var(--vermilion); }
.post-list p { margin: 0; color: var(--ink-2); max-width: 62ch; }

@media (max-width: 30rem) {
    .findings { padding: 1rem 1.125rem 1.125rem !important; }
    .findings li { padding-left: 1.875rem; }
}
.prose .data-table.fit { min-width: 0; }