/* Blog: poster covers, the post list and the article layout. Loaded after theme.css. */

/* ---------- cover: a poster in a flat brand colour, title top-left, line art, summary and mark at the foot ----------
   Scales with its own width (container units), so the same markup works as a card, a feature and an article hero.
   Always light: black ink on a bright colour, in either mode. */
.cover{container-type:inline-size;position:relative;display:grid;grid-template-rows:auto 1fr auto;aspect-ratio:1/1.414;overflow:hidden;padding:7%;border-radius:var(--radius-m);background:var(--cover,var(--color-1));color:var(--neutral-10)}
.cover-title{position:relative;z-index:1;max-width:11ch;font-family:var(--font-brand);font-weight:var(--weight-brand-heavy);font-size:13.5cqw;line-height:1;letter-spacing:var(--tracking-brand);color:var(--neutral-10);text-wrap:balance}
.cover-art{position:absolute;left:0;right:0;bottom:12cqw;width:100%;height:auto;pointer-events:none}
.cover-foot{position:relative;z-index:1;grid-row:3;display:flex;justify-content:space-between;align-items:flex-end;gap:6cqw;font-size:3.6cqw;line-height:1.3}
.cover-foot p{max-width:34ch;font:inherit;color:inherit}
.cover-mark{flex-shrink:0;width:8cqw;aspect-ratio:224/140;background:var(--neutral-10);-webkit-mask:url(qaba-mark.svg) center/contain no-repeat;mask:url(qaba-mark.svg) center/contain no-repeat}

/* ---------- post list ---------- */
.blog-head{padding:var(--space-xxl) 0 var(--space-l)}
.blog-head h1{margin-bottom:var(--space-l)}
.topics{overflow-x:auto;scrollbar-width:none}
.topics::-webkit-scrollbar{display:none}
.tab{white-space:nowrap}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xl) var(--space-l);padding:var(--space-xl) 0 calc(var(--space-xxl) * 2)}
.post{display:flex;flex-direction:column;gap:var(--space-s)}
.post[hidden]{display:none}
.post a{display:contents}
.post .cover{transition:transform var(--motion-duration) var(--motion-easing)}
.post a:hover .cover{transform:translateY(calc(-1 * var(--space-xxs)))}
.post h2{margin-top:var(--space-xxs)}
.post a:hover h2{text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:var(--border-l)}
.post-copy>p{color:var(--cte-text-muted)}
.post-meta{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center;color:var(--cte-text-muted)}
.post-meta .sep{width:3px;height:3px;border-radius:var(--radius-full);background:currentColor}
/* the newest post leads, cover beside its summary */
.post.lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--space-xxl);align-items:center}
.post.lead a{display:contents}
.post.lead .post-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-s);max-width:560px}
.post.lead .post-copy>p{font-size:var(--size-lead);line-height:var(--line-lead);letter-spacing:var(--letter-spacing-lead)}
.posts-empty{grid-column:1/-1;color:var(--cte-text-muted)}
@media(max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}.post.lead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-l)}}
@media(max-width:600px){.posts{grid-template-columns:1fr}.post.lead{grid-template-columns:1fr}.post.lead .post-copy>p{font-size:var(--size-m);line-height:var(--line-m);letter-spacing:var(--letter-spacing-m)}}

/* ---------- article ---------- */
.wrap.article-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:var(--space-xxl);align-items:center;padding-top:var(--space-xl);padding-bottom:calc(var(--space-xxl) * 1.5)}
.article-hero .back{margin-left:calc(-1 * var(--space-s));margin-bottom:var(--space-l)}
.article-hero .badge{margin-bottom:var(--space-s)}
.article-hero .dek{max-width:600px;margin:var(--space-m) 0 var(--space-l);color:var(--cte-text-muted)}
@media(max-width:560px){.article-hero h1{font-size:var(--size-xxl);line-height:var(--line-xxl)}}
@media(max-width:860px){.wrap.article-hero{grid-template-columns:1fr;gap:var(--space-xl)}.article-hero .cover{max-width:400px}}

.wrap.reading{display:grid;grid-template-columns:220px minmax(0,680px);justify-content:space-between;gap:var(--space-xxl);padding-bottom:calc(var(--space-xxl) * 2)}
.toc{position:sticky;top:calc(72px + var(--space-l));align-self:start;display:grid;gap:var(--space-xxs)}
.toc h2{font-family:var(--font-ui);font-weight:var(--weight-ui-medium);margin-bottom:var(--space-xs)}
.toc a{padding:var(--space-xxs) 0;color:var(--cte-text-muted);transition:color var(--motion-duration) var(--motion-easing)}
.toc a:hover,.toc a[aria-current=true]{color:var(--cte-text)}
.toc p{margin-top:var(--space-m);color:var(--cte-text-muted)}
@media(max-width:960px){.wrap.reading{grid-template-columns:minmax(0,680px);justify-content:start}.toc{display:none}}

.prose{font-size:var(--size-m);line-height:var(--line-m);letter-spacing:var(--letter-spacing-m)}
.prose>*+*{margin-top:var(--space-m)}
.prose .intro{font-size:var(--size-lead);line-height:var(--line-lead);letter-spacing:var(--letter-spacing-lead)}
.prose h2{margin-top:calc(var(--space-xxl) * 1.5);font-size:var(--size-xl);line-height:var(--line-xl);scroll-margin-top:calc(72px + var(--space-l))}
.prose h2 span{color:var(--cte-text-muted)}
.prose h3{margin-top:var(--space-xl);font-size:var(--size-l);line-height:var(--line-l)}
.prose ol li+li{margin-top:var(--space-s)}
.prose strong{font-weight:var(--weight-ui-medium)}
.pull{margin:var(--space-xl) 0;font-family:var(--font-brand);font-weight:var(--weight-brand-heavy);font-size:var(--size-xl);line-height:var(--line-xl);letter-spacing:var(--tracking-brand)}
.prose .pull{margin-top:var(--space-xl)}

.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-s)}
.stat{display:flex;flex-direction:column;gap:var(--space-xxs);padding:var(--space-m)}
.stat b{font-family:var(--font-data);font-weight:var(--weight-data-medium);font-size:var(--size-l);line-height:var(--line-l);font-variant-numeric:tabular-nums}
.stat small{margin-top:auto;padding-top:var(--space-xs);color:var(--cte-text-muted);font-size:var(--size-xs);line-height:var(--line-xs)}
@media(max-width:600px){.stat-grid{grid-template-columns:1fr}}

.figure{padding:var(--space-l)}
.prose .figure h3{margin:0;font-family:var(--font-ui);font-weight:var(--weight-ui-medium);font-size:var(--size-m);line-height:var(--line-m)}
.fig-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-s);margin-bottom:var(--space-l)}
.fig-head p,.fig-caption{color:var(--cte-text-muted)}
.fig-caption{margin-top:var(--space-m);font-size:var(--size-s);line-height:var(--line-s)}
.market-bar{display:flex;height:var(--space-l);border-radius:var(--radius-full);overflow:hidden;background:var(--neutral-4)}
.market-bar span:first-child{width:11%;background:var(--color-1)}
.legend{display:flex;justify-content:space-between;gap:var(--space-s);margin-top:var(--space-s);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted)}
.legend b{font-family:var(--font-data);font-weight:var(--weight-data-medium);color:var(--cte-text)}

.flow{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-s)}
.flow>div{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);padding:var(--space-l)}
.prose .flow h3{margin:0}
.flow p{color:var(--cte-text-muted)}
.flow .path{margin-top:auto;padding-top:var(--space-s);font-size:var(--size-s);line-height:var(--line-s);font-weight:var(--weight-ui-medium)}
@media(max-width:600px){.flow{grid-template-columns:1fr}}

.table-wrap{overflow-x:auto}
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--size-s);line-height:var(--line-s)}
.prose th{padding:var(--space-xs) var(--space-s);text-align:left;font-weight:var(--weight-ui-medium);color:var(--cte-text-muted)}
.prose td{padding:var(--space-s);vertical-align:top}
.prose tbody tr:nth-child(odd) td{background:var(--cte-surface)}
.prose tbody tr:nth-child(odd) td:first-child{border-radius:var(--radius-s) 0 0 var(--radius-s)}
.prose tbody tr:nth-child(odd) td:last-child{border-radius:0 var(--radius-s) var(--radius-s) 0}
.prose td:first-child{font-weight:var(--weight-ui-medium)}
.figure .prose-table,.figure table{margin:0}
.figure tbody tr:nth-child(odd) td{background:var(--neutral-1)}
.prose td,.prose th{font-variant-numeric:tabular-nums}

.callout{padding:var(--space-l)}
.callout b{display:block;margin-bottom:var(--space-xxs);font-weight:var(--weight-ui-medium)}
.callout p{color:var(--cte-text-muted)}

.bar-chart{display:grid;gap:var(--space-s)}
.bar-chart .row{display:grid;grid-template-columns:150px minmax(0,1fr) 110px;gap:var(--space-s);align-items:center;font-size:var(--size-s);line-height:var(--line-s)}
.bar-chart strong{text-align:right;font-family:var(--font-data);font-weight:var(--weight-data-medium)}
.track{height:var(--space-s);border-radius:var(--radius-full);background:var(--neutral-4);overflow:hidden}
.fill{height:100%;border-radius:var(--radius-full);background:var(--color-1)}
.fill.light{background:var(--color-3)}
@media(max-width:600px){.bar-chart .row{grid-template-columns:1fr auto}.bar-chart .track{grid-column:1/-1;grid-row:2}}

.diagram{display:flex;align-items:center;justify-content:center;gap:var(--space-s);flex-wrap:wrap;padding:var(--space-l)}
.diagram .node{padding:var(--space-s) var(--space-m);text-align:center;font-weight:var(--weight-ui-medium)}
.diagram .small{display:block;font-weight:var(--weight-ui-regular);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted)}
.diagram .arrow{color:var(--cte-text-muted)}

.compact-list{counter-reset:item;display:grid;gap:var(--space-s)}
.compact-list li{counter-increment:item;position:relative;padding-left:calc(var(--line-m) + var(--space-s))}
.compact-list li::before{content:counter(item);position:absolute;left:0;top:0;display:grid;place-items:center;width:var(--line-m);height:var(--line-m);border-radius:var(--radius-full);background:var(--color-1-transparent);font-family:var(--font-data);font-weight:var(--weight-data-medium);font-size:var(--size-xs)}
.prose .compact-list li+li{margin-top:0}

.timeline{display:grid;gap:var(--space-s)}
.stage{display:grid;grid-template-columns:120px 1fr;gap:var(--space-m);padding:var(--space-l)}
.stage b{font-family:var(--font-data);font-weight:var(--weight-data-medium);color:var(--cte-text-muted)}
.prose .stage h3{margin:0 0 var(--space-xxs)}
.stage p{color:var(--cte-text-muted)}
@media(max-width:600px){.stage{grid-template-columns:1fr;gap:var(--space-xs)}}

.checklist{display:grid;gap:var(--space-s);padding:var(--space-l)}
.score{padding:var(--space-m) var(--space-l)}
.score strong{font-weight:var(--weight-ui-medium)}

.editorial-note{margin-top:var(--space-xl);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted)}