/* ==========================================================================
   Blog module - neutral starter styles.
   Everything is scoped under .blog and driven by the variables below, so the
   quickest way to match a site is to set them to that site's tokens
   (override in the site's own stylesheet: .blog { --blog-accent: ...; }).
   ========================================================================== */
.blog {
  --blog-text: #16181d;
  --blog-muted: #5d6470;
  --blog-bg: transparent;
  --blog-surface: #ffffff;
  --blog-border: #e3e6eb;
  --blog-accent: #1d4ed8;
  --blog-accent-contrast: #ffffff;
  --blog-radius: 14px;
  --blog-width: 1180px;
  --blog-gutter: clamp(16px, 4vw, 32px);
  color: var(--blog-text);
  background: var(--blog-bg);
}
.blog *, .blog *::before, .blog *::after { box-sizing: border-box; }
.blog img { max-width: 100%; height: auto; display: block; }
.blog a { color: var(--blog-accent); }
.blog-wrap { width: 100%; max-width: var(--blog-width); margin-inline: auto; padding-inline: var(--blog-gutter); }

/* listing header */
.blog-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.25rem, 3vw, 2rem); }
.blog-hero__title { margin: 0; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; }
.blog-hero__intro { max-width: 46rem; margin: 1rem 0 0; color: var(--blog-muted); font-size: 1.125rem; line-height: 1.6; }
.blog-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.blog-filter a {
  padding: .45rem 1rem; border: 1px solid var(--blog-border); border-radius: 999px;
  color: var(--blog-text); text-decoration: none; font-size: .9rem; line-height: 1.3;
}
.blog-filter a:hover { border-color: var(--blog-accent); }
.blog-filter a.is-active { background: var(--blog-accent); border-color: var(--blog-accent); color: var(--blog-accent-contrast); }
.blog-list { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem); }
.blog-empty { color: var(--blog-muted); }

/* cards */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.post-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blog-surface); border: 1px solid var(--blog-border); border-radius: var(--blog-radius);
}
.post-card__media { display: block; aspect-ratio: 3 / 2; background: var(--blog-border); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__body { display: flex; flex-direction: column; flex: 1; gap: .6rem; padding: 1.25rem 1.35rem 1.4rem; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0; color: var(--blog-muted); font-size: .8rem; }
.post-card__cat { font-weight: 600; text-decoration: none; }
.post-card__title { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { color: var(--blog-accent); }
.post-card__excerpt { margin: 0; color: var(--blog-muted); font-size: .95rem; line-height: 1.55; }
.post-card__more { margin-top: auto; padding-top: .4rem; font-weight: 600; font-size: .9rem; text-decoration: none; }
.post-card__more::after { content: " \2192"; }
.post-card--featured { grid-column: 1 / -1; flex-direction: row; }
.post-card--featured .post-card__media { flex: 0 0 55%; aspect-ratio: auto; min-height: 320px; }
.post-card--featured .post-card__body { justify-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
.post-card--featured .post-card__title { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.post-card--featured .post-card__more { margin-top: .4rem; }

/* pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.pager__pages { display: flex; gap: .35rem; }
.pager__btn, .pager__page {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .9rem;
  border: 1px solid var(--blog-border); border-radius: 999px; color: var(--blog-text); text-decoration: none; font-size: .9rem;
}
.pager__page.is-current { background: var(--blog-accent); border-color: var(--blog-accent); color: var(--blog-accent-contrast); }
.pager__btn.is-disabled { opacity: .4; }
.pager__gap { align-self: center; color: var(--blog-muted); }

/* article header */
.post-header { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--blog-muted); font-size: .85rem; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--blog-accent); }
.post-title { max-width: 22em; margin: 1rem 0 0; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.15; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 1.25rem 0 0; color: var(--blog-muted); font-size: .9rem; }
.post-meta__author { display: inline-flex; align-items: center; gap: .6rem; color: var(--blog-text); font-weight: 600; }
.post-meta__author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.post-meta__draft { padding: .2rem .7rem; border-radius: 999px; background: #dc2626; color: #fff; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.post-cover { margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; }
.post-cover img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--blog-radius); }
.post-cover figcaption, .post-figure figcaption { margin-top: .5rem; color: var(--blog-muted); font-size: .8rem; }

/* article layout: body + sticky side */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2rem, 4vw, 3.5rem); }
.post-side__sticky { position: sticky; top: 96px; display: grid; gap: 1.5rem; }
.post-toc { padding: 1.25rem 1.35rem; border: 1px solid var(--blog-border); border-radius: var(--blog-radius); background: var(--blog-surface); }
.post-toc__title { margin: 0 0 .75rem; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--blog-muted); }
.post-toc ol { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.post-toc a { color: var(--blog-muted); text-decoration: none; font-size: .9rem; line-height: 1.4; }
.post-toc a:hover, .post-toc a.is-active { color: var(--blog-accent); }

/* article typography */
.prose { font-size: 1.0625rem; line-height: 1.75; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.15em; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.25; scroll-margin-top: 96px; }
.prose h3 { margin-top: 1.8em; font-size: 1.25rem; line-height: 1.3; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin-inline: 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--blog-accent); color: var(--blog-muted); font-size: 1.1em; }
.prose pre { padding: 1rem 1.25rem; overflow-x: auto; border-radius: 10px; background: #0f172a; color: #e2e8f0; font-size: .9rem; line-height: 1.6; }
.prose code { font-size: .9em; }
.post-figure { margin-inline: 0; }
.post-figure img { width: 100%; border-radius: var(--blog-radius); }
.table-wrap { overflow-x: auto; border: 1px solid var(--blog-border); border-radius: 10px; }
.table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .95rem; }
.table-wrap th, .table-wrap td { padding: .7rem 1rem; border-bottom: 1px solid var(--blog-border); text-align: left; vertical-align: top; }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap th { background: rgba(0, 0, 0, .03); font-weight: 600; }
.table-wrap p { margin: 0; }

/* labelled points ("Label: text") - runs of them are rendered as a callout list */
.callout-list { display: grid; gap: .75rem; padding: 0 !important; list-style: none; }
.callout-list li { margin: 0 !important; padding: 1rem 1.25rem; border: 1px solid var(--blog-border); border-left: 3px solid var(--blog-accent); border-radius: 10px; background: var(--blog-surface); }
.callout-list strong { display: block; margin-bottom: .2rem; }

/* FAQ */
.post-faq { margin-top: 3rem; }
.faq-item { border-bottom: 1px solid var(--blog-border); }
.faq-item summary { padding: 1rem 0; cursor: pointer; font-weight: 600; }
.faq-item p { margin: 0; padding: 0 0 1.1rem; color: var(--blog-muted); }

/* tags + author */
.post-tags { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 2.5rem; font-size: .9rem; }
.post-tags a { text-decoration: none; }
.author-box { display: flex; gap: 1.25rem; margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--blog-border); border-radius: var(--blog-radius); background: var(--blog-surface); }
.author-box__avatar img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.author-box p { margin: 0; }
.author-box__label { color: var(--blog-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.author-box__name { font-weight: 700; font-size: 1.15rem; }
.author-box__role { color: var(--blog-muted); font-size: .9rem; }
.author-box__bio { margin-top: .6rem !important; font-size: .95rem; line-height: 1.6; }
.author-box__links { display: flex; gap: 1rem; margin-top: .6rem !important; font-size: .9rem; }

/* read next */
.read-next { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--blog-border); }
.read-next__title { margin: 0 0 1.75rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }

@media (max-width: 1000px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post-side { display: none; }
  .post-card--featured { flex-direction: column; }
  .post-card--featured .post-card__media { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .pager__pages { display: none; }
  .author-box { flex-direction: column; }
}

/* ── source credit ────────────────────────────────────────────────────
   Shown when an article is our write-up of somebody else's report. It is
   a statement about provenance, so it reads as a note rather than as part
   of the article. */
.post-source{
  margin:2.2rem 0 0;
  padding:.9rem 1.1rem;
  border-left:3px solid var(--blog-accent, currentColor);
  background:var(--blog-surface, rgba(127,127,127,.06));
  border-radius:0 var(--blog-radius, 6px) var(--blog-radius, 6px) 0;
}
.post-source p{
  margin:0;
  font-size:.86rem;
  line-height:1.6;
  color:var(--blog-muted, inherit);
}
.post-source a{ color:inherit; text-decoration:underline; }

/* ── "On this page" above the article ─────────────────────────────────
   The contents used to be a sticky rail in a 300px second column, which
   left the article at about two thirds of the page. It now sits above the
   piece and the body runs the full column width. Laid out in columns so a
   six-heading report does not push the first paragraph off the screen. */
.post-layout{grid-template-columns:minmax(0,1fr);gap:0}
.post-body{max-width:none}
.post-layout > .post-toc{
  margin:0 0 clamp(1.6rem,3vw,2.4rem);
  padding:1.1rem 1.35rem 1.2rem;
}
.post-layout > .post-toc ol{
  columns:2;
  column-gap:2.2rem;
  gap:.5rem;
  display:block;
  counter-reset:toc;
}
.post-layout > .post-toc li{
  break-inside:avoid;
  margin:0 0 .5rem;
  counter-increment:toc;
  display:flex;
  gap:.55rem;
  align-items:baseline;
}
.post-layout > .post-toc li::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--f-data,inherit);
  font-size:.72rem;
  font-variant-numeric:tabular-nums;
  color:var(--blog-accent);
  flex:none;
}
.post-layout > .post-toc a{font-size:.92rem}
@media (max-width:760px){
  .post-layout > .post-toc ol{columns:1}
}