/* blog-post.html — page-specific styles (page designer) */

.post-main{min-width:0}
.post .wbm-c-blog-post__body h2{scroll-margin-top:calc(var(--header-h) + 24px)}
.post .wbm-c-blog-post__body > :first-child{margin-top:0}
.post .post-intro{font:500 clamp(20px,1.8vw,24px)/1.45 var(--f-head);color:var(--forest)}

.post .wbm-c-blog-post__body blockquote{margin:1.8em 0;font:500 clamp(21px,2vw,27px)/1.35 var(--f-head)}

/* 10 skills: numbered rows with the speech-bubble counter */
.post .wbm-c-blog-post__body ol.post-skills{list-style:none;margin:1.4em 0 0;padding:0;counter-reset:skill;border-top:2px solid var(--forest)}
.post-skills li{position:relative;counter-increment:skill;margin:0;padding:18px 0 18px 58px;border-bottom:1px solid var(--line)}
.post-skills li::before{content:counter(skill,decimal-leading-zero);position:absolute;left:0;top:18px;width:40px;height:40px;border-radius:var(--bubble-sm);background:var(--mint);color:var(--forest);font:700 15px/40px var(--f-head);text-align:center;font-variant-numeric:tabular-nums}
.post-skills li:nth-child(3n+2)::before{background:var(--rose)}
.post-skills strong{display:block;margin-bottom:2px;font:600 clamp(19px,1.6vw,21px)/1.3 var(--f-head);color:var(--forest)}

/* aside */
.post-toc ol{list-style:none;margin:0;padding:0}
.post-group__kicker{margin:0 0 6px !important;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rose) !important}

@media (max-width:959px){
  .post-toc{display:none}
}
@media (max-width:480px){
  .post-skills li{padding-left:50px}
  .post-skills li::before{width:36px;height:36px;line-height:36px}
}