/* ---------- blog article page ----------
   Loaded only on /blog/:slug, after core.css, so nothing here can reach any
   other page. Reuses the existing tokens, type scale and .post-* card styles;
   only the reading column and byline are new. */

.post-hero .container{max-width:760px;}
.post-crumbs{
  display:flex;align-items:center;gap:9px;
  font:500 12px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:20px;
}
.post-crumbs a{transition:color .25s var(--ease-out);}
.post-crumbs a:hover{color:var(--ink);}
.post-crumbs span{opacity:.5;}

.post-byline{
  display:flex;align-items:center;gap:14px;margin-top:30px;
  padding-top:24px;border-top:1px solid var(--muted);
}
.post-byline b{display:block;font-size:14.5px;font-weight:600;}
.post-byline span{font-size:13px;color:var(--text-muted);}
.post-thumb--sm{
  width:44px;height:44px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:14px;
}

/* ---------- the reading column ---------- */
.post-body-section{padding-top:0;}
.post-body-section .container{max-width:760px;}

.post-article{font-size:clamp(16.5px,1.25vw,18px);line-height:1.75;}
.post-article > *:first-child{margin-top:0;}
.post-article p{margin:0 0 1.15em;color:var(--text);}
/* the opening paragraph carries the article, so it gets a little more air */
.post-article > p:first-of-type{
  font-size:1.1em;line-height:1.65;color:var(--text);
}
.post-article h2{
  font:400 clamp(23px,2.4vw,29px)/1.25 var(--font-display);
  letter-spacing:-.015em;margin:2em 0 .6em;
}
.post-article h3{
  font:600 clamp(17px,1.6vw,19px)/1.35 var(--font-ui);
  margin:1.7em 0 .5em;
}
.post-article ul,.post-article ol{margin:0 0 1.3em;padding-left:0;list-style:none;}
.post-article ol{counter-reset:pl;}
.post-article li{position:relative;padding-left:26px;margin-bottom:.6em;}
.post-article ul li::before{
  content:'';position:absolute;left:4px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.post-article ol li{counter-increment:pl;}
.post-article ol li::before{
  content:counter(pl);position:absolute;left:0;top:.1em;
  font:600 12px/1.6 var(--font-ui);color:var(--accent);
}
.post-article strong{font-weight:600;}
.post-article a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.post-article a:hover{color:var(--accent-2);}
.post-article blockquote{
  margin:1.6em 0;padding:2px 0 2px 22px;
  border-left:2px solid var(--accent);
  font:400 1.12em/1.55 var(--font-display);
}
.post-article code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--surface-2);padding:2px 6px;border-radius:5px;
}
.post-article img{border-radius:var(--r-media);margin:1.6em 0;}
.post-article hr{border:0;border-top:1px solid var(--muted);margin:2.4em 0;}

/* ---------- end-of-article CTA ---------- */
.post-cta{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-top:56px;padding:28px 30px;
  background:var(--surface-2);border-radius:var(--r-block);
}
.post-cta h3{margin:0 0 4px;font:400 22px/1.25 var(--font-display);letter-spacing:-.01em;}
.post-cta p{margin:0;color:var(--text-muted);font-size:14.5px;}

/* ---------- related ---------- */
.post-related{border-top:1px solid var(--muted);}
.post-related__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:26px;flex-wrap:wrap;
}
.post-related__head .eyebrow{margin:0;}

@media(max-width:690px){
  .post-cta{padding:22px;flex-direction:column;align-items:flex-start;}
  .post-cta .btn{width:100%;justify-content:center;}
  .post-byline{margin-top:24px;padding-top:20px;}
}

/* ---------- reading progress ----------
   A long article gives no sense of how much is left. The bar is fixed above
   everything and driven by scroll; it is decorative, so it is aria-hidden and
   carries no interactive role. */
.readbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2500;
  background: transparent;
  pointer-events: none;
}
.readbar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transform-origin: left center;
  transition: width .12s linear;
}

/* the category, as a pill rather than a rule — it reads as a label, not a
   section heading, and sits better under the breadcrumb */
.post-cat {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--muted);
  font: 600 11px/1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* the related block jumps from the 760px reading column to the full 1360px,
   which reads as a different page; meeting in the middle keeps it one article */
.post-related .container { max-width: 1100px; }