/* Blog posts (/blog/<slug>/): the article column, a numbered source list, the closing band.
   ops/publish_post.py emits this markup for new posts. Layout only; colors and sizes are ka.css tokens. */
.article{max-width:740px}
/* the hero gets the same soft wash as every inner page, faded out at its lower edge */
.article-hero.wash{overflow:clip}
.article-hero.wash::before{-webkit-mask-image:linear-gradient(#000 calc(100% - 140px),transparent);mask-image:linear-gradient(#000 calc(100% - 140px),transparent)}
.article-hero>.article{position:relative}
/* .article p sets body size on every paragraph; the kicker keeps the site's kicker size */
.article-hero .kicker{font-size:var(--fs-xs);margin-bottom:4px}
.article-hero .kicker a{text-decoration:none}
.article-hero .kicker a:hover{text-decoration:underline}
.article p{max-width:none}
.article h2{max-width:30ch}

/* sources: one per line, numbered, readable on a phone */
.article .src{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--body)}
.article .src h2{max-width:none;font-size:var(--fs-xs);font-family:var(--sans);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 12px}
.article .src ol{margin:0 0 0 20px;padding:0}
.article .src li{font-size:var(--fs-sm);line-height:1.55;margin-bottom:10px;padding-left:4px;overflow-wrap:anywhere}
.article .src li::marker{color:var(--mut);font-variant-numeric:tabular-nums}
.article .src p{font-size:var(--fs-sm);margin:12px 0 0;color:var(--mut)}

/* closing band inside the article column */
.article .band.compact{margin-top:40px}
.article .band.compact p{max-width:none}
.article .band.compact .band-acts{gap:12px 22px}
/* a.more is inline-flex; when the label wraps, keep the arrow after the last word */
.article .band.compact a.more{display:block;min-height:0;padding:10px 0}
/* the arrow rides with the last word (a no-break space before it), never alone on a line */
.article .band.compact a.more::after{display:inline;margin-left:0;content:"\00a0\2192";content:"\00a0\2192" / ""}
.meta .meta-d{white-space:nowrap}

/* figures (ops/build_charts.py figure_html, placed from {{chart: slug}} lines): the article column
   closes around each one (div.post-fig), so ka.css's .article p, h3, ol and li rules never reach the
   figure's or the chart's own text. Same column width and gutter as the article. */
.post-fig{max-width:740px;margin:30px auto 34px;padding:0 var(--gutter)}
.post-fig .datafig-foot{margin-top:4px}

/* the share row (ka-share.js): under the byline, and again after the sources, before the band */
.article-hero .post-share{margin-top:16px}
.article .post-share-end{margin-top:32px}