/* chalk.bar writing — the article layer. Sits on top of style.css and its tokens
   (see docs/design/design-system.md): same chalk on charcoal, same reserved colour,
   but a wider column and a reading-weight type scale for long-form prose. */

.app.article{max-width:640px}

/* head */
.article-head .kicker{font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--label);margin:16px 0 10px}
.article-head h1{font-family:var(--cond);font-weight:700;font-size:clamp(27px,5.4vw,38px);line-height:1.14;letter-spacing:-.01em;color:var(--chalk);margin:0 0 10px}
.article-head .byline{font-family:var(--mono);font-size:12.5px;color:var(--label);margin-bottom:4px}
.article-head .standfirst{font-size:16.5px;line-height:1.6;color:var(--chalk-dim);margin-top:12px}

/* body */
.prose p{font-size:16px;line-height:1.72;color:var(--chalk-dim);margin:0 0 18px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--chalk);font-weight:600}
.prose em{color:var(--chalk)}
.prose a{color:var(--chalk);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--go)}
.prose h2{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:700;color:var(--label);margin:34px 0 14px}
.prose ul,.prose ol{margin:0 0 18px 20px}
.prose li{font-size:16px;line-height:1.72;color:var(--chalk-dim);margin-bottom:6px}
.prose .pull{border-left:2px solid var(--go);padding:2px 0 2px 16px;margin:26px 0}
.prose .pull p{font-family:var(--mono);font-size:15px;line-height:1.6;color:var(--chalk);margin:0}

/* charts — inline SVG, tokens carry the theming */
.chart{display:block;width:100%;height:auto;margin:18px 0 6px}
.chart .ax{font-family:var(--mono);font-size:11px;fill:var(--label)}
.chart .lb{font-family:var(--mono);font-size:11.5px;font-weight:600;fill:var(--chalk-dim)}
figure.chartfig{margin:24px 0}
figure.chartfig figcaption{font-size:13px;line-height:1.55;color:var(--label);margin-top:4px}

/* footer */
.article-foot{font-size:14px;line-height:1.6;color:var(--label);padding:20px}
.article-foot a{color:var(--chalk-dim)}

/* index */
.post-link{display:block;text-decoration:none;padding:20px;border-bottom:1px solid var(--hair)}
.post-link:hover{background:var(--panel)}
.post-link .date{font-family:var(--mono);font-size:12px;color:var(--label);display:block;margin-bottom:6px}
.post-link .t{font-family:var(--cond);font-weight:700;font-size:21px;line-height:1.25;color:var(--chalk);display:block;margin-bottom:6px}
.post-link .s{font-size:14.5px;line-height:1.55;color:var(--chalk-dim);display:block}