/* Distill Works design system, BLOG POST template (112 posts). With ds-core. Scoped to body.page-post. */

body.page-post .blog-hero{padding:46px 0 6px;}
body.page-post .blog-hero .container{max-width:760px; margin:0 auto;}
body.page-post .blog-meta{display:flex; gap:16px; align-items:center; margin-bottom:18px; font-size:13px;}
body.page-post .blog-pillar{text-transform:uppercase; letter-spacing:.1em; color:var(--green); font-weight:600;}
body.page-post .blog-reading-time{color:var(--muted);}
body.page-post .blog-hero h1{font-size:clamp(30px,3.9vw,44px); line-height:1.12; margin:0 0 24px;}
body.page-post .blog-author{display:flex; align-items:center; gap:12px; margin-bottom:28px;}
body.page-post .blog-author-avatar{width:42px; height:42px; border-radius:50%; background:var(--green); color:#f3f1e8; display:flex; align-items:center; justify-content:center; font-family:'Spectral',serif; font-size:15px; flex:0 0 auto;}
body.page-post .blog-author-name{display:block; font-weight:600; font-size:14.5px; color:var(--ink);}
body.page-post .blog-author-detail{display:block; font-size:13px; color:var(--muted);}
body.page-post .blog-hero-image{max-width:860px; margin:8px auto 0; border:1px solid var(--hair); border-radius:8px; overflow:hidden;}
body.page-post .blog-hero-image img{display:block; width:100%; height:auto;}

/* article body */
body.page-post .blog-article{padding:34px 0 50px;}
body.page-post .blog-content{max-width:720px; margin:0 auto; font-size:17px; line-height:1.7; color:var(--ink-soft);}
body.page-post .blog-content > h2{font-family:'Spectral',serif; font-weight:500; font-size:clamp(24px,2.6vw,30px); color:var(--ink); line-height:1.25; margin:42px 0 16px;}
body.page-post .blog-content > h3{font-family:'Spectral',serif; font-weight:500; font-size:21px; color:var(--ink); margin:30px 0 12px;}
body.page-post .blog-content p{margin:0 0 20px;}
body.page-post .blog-content a{color:var(--green); text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:2px;}
body.page-post .blog-content a:hover{text-decoration-color:var(--green);}
body.page-post .blog-content ul,
body.page-post .blog-content ol{margin:0 0 22px; padding-left:24px;}
body.page-post .blog-content li{margin-bottom:10px;}
body.page-post .blog-content strong{color:var(--ink);}
body.page-post .blog-content blockquote{border-left:1px solid var(--hair); padding-left:24px; font-family:'Spectral',serif; font-style:italic; font-size:20px; line-height:1.5; color:var(--ink); margin:28px 0;}
body.page-post .blog-content img{max-width:100%; height:auto; border-radius:6px; margin:24px 0; border:1px solid var(--hair);}
body.page-post .blog-content table{width:100%; border-collapse:collapse; font-size:15px; margin:24px 0;}
body.page-post .blog-content th,
body.page-post .blog-content td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--hair);}
body.page-post .blog-content th{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600;}
/* inline FAQ accordion if present */
body.page-post .blog-content .faq-item{border-top:1px solid var(--hair);}
body.page-post .blog-content .faq-item h3{cursor:pointer; padding:18px 0; margin:0;}
body.page-post .blog-content .faq-item p{display:none;}
body.page-post .blog-content .faq-item.active p{display:block;}

/* end-of-post CTA */
body.page-post .blog-cta{border-top:1px solid var(--hair); padding:56px 0;}
body.page-post .blog-cta-card{max-width:720px; margin:0 auto; border:1px solid var(--hair); border-radius:10px; padding:38px 36px; background:var(--card); text-align:center;}
body.page-post .blog-cta-card h2{font-size:clamp(22px,2.5vw,28px); margin:0 0 12px;}
body.page-post .blog-cta-card p{font-size:16px; color:var(--ink-soft); max-width:52ch; margin:0 auto 24px;}
body.page-post .blog-cta-buttons{display:flex; gap:20px; justify-content:center; align-items:center; flex-wrap:wrap;}
body.page-post .blog-cta-primary{display:inline-block; background:var(--green); color:#f3f1e8; padding:14px 26px; border-radius:3px; font-size:15px; font-weight:600; text-decoration:none;}
body.page-post .blog-cta-primary:hover{background:var(--green-d);}
body.page-post .blog-cta-secondary{display:inline-block; color:var(--ink); font-size:15px; font-weight:600; border-bottom:1.5px solid var(--green); padding-bottom:2px; text-decoration:none;}