/* Blog posts: one header bar (breadcrumbs, preheader, title, subheader, author), then straight into the article,
   with a reading progress bar at the top of the window. */
main.wrap > section.hero.bh, .hero.bh { display: block; grid-template-columns: none; min-height: 0; height: auto; margin-bottom: 0; padding-bottom: 0; }   /* class hero kept: the sky script anchors to it */
.bh-p { display: flex; flex-direction: column; align-items: flex-start; padding: 48px var(--px, 48px); }
.bh-p .crumbs { margin: 0 0 32px; }
.bh-p .sec-k { margin: 0 0 16px; }
.bh-p h1 { margin: 0; max-width: 960px; font-size: clamp(40px, 4.2vw, 56px); line-height: 1.08; text-wrap: balance; }
.bh-p .sub { margin: 16px 0 0; max-width: 720px; }
.bh-p .byl { margin-top: 32px; }
/* reading progress: sits at the top of the article text column and sticks under the header while you read */
.rp { position: sticky; top: var(--hdr, 72px); z-index: 5; display: flex; align-items: center; gap: 16px; margin: 0 0 32px; padding: 16px 0; background: #0b0b0b; pointer-events: none; }
.rp-t { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rp-t i { position: absolute; inset: 0; background: #a3e635; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.rp-n { flex: none; min-width: 40px; text-align: right; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 900px) { .bh-p { padding: 32px var(--gutter, 24px); } .bh-p .crumbs { margin-bottom: 24px; } .bh-p .byl { margin-top: 24px; } }
@media (max-width: 639.98px) { .bh-p h1 { font-size: 32px; line-height: 40px; } }