.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;font-size:14px;font-weight:800;color:var(--text-mid)}
.breadcrumb a{color:var(--terracotta)}
.blog-hero{padding:88px 0;background:linear-gradient(rgba(44,44,44,.64),rgba(44,44,44,.64)),url('https://images.unsplash.com/photo-1562259949-e8e7689d7828?w=1600&auto=format&fit=crop') center/cover;color:white}
.blog-hero h1,.blog-hero p{color:white}
.blog-hero p{font-size:20px;max-width:760px}
.blog-tools{display:grid;gap:16px;margin:30px 0}
.blog-search{width:100%;border:1px solid var(--border);border-radius:8px;padding:15px 16px;font:inherit;background:#fff}
.blog-filters{display:flex;gap:10px;flex-wrap:wrap}
.blog-filters button,.pagination a{border:1px solid var(--border);background:white;border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer;transition:.2s}
.blog-filters button.active,.pagination a.active{background:var(--terracotta);border-color:var(--terracotta);color:white}
.featured-article{display:grid;gap:24px;align-items:center;background:white;border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 14px 30px rgba(44,44,44,.04);margin-top:28px}
.featured-article img,.blog-card img,.article-hero img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.featured-article img{min-height:300px}
.blog-card-grid{display:grid;gap:18px;margin-top:28px}
.blog-card{display:flex;flex-direction:column;background:white;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 14px 30px rgba(44,44,44,.04);transition:.25s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(44,44,44,.09)}
.blog-card img{height:220px;border-radius:0}
.blog-card-body{display:flex;flex-direction:column;gap:12px;padding:24px;flex:1}
.blog-card-body p{margin-bottom:0}
.blog-card-body .btn{align-self:flex-start;margin-top:auto;padding:11px 18px}
.category-label{font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--terracotta);font-size:12px}
.read-time{font-weight:800;color:var(--text-mid);font-size:14px}
.blog-cta-banner,.newsletter{background:var(--cream);border:1px solid var(--border);border-radius:14px;padding:28px;margin-top:28px;text-align:center}
.newsletter form{display:grid;gap:12px;max-width:560px;margin:18px auto 0}
.newsletter input{border:1px solid var(--border);border-radius:8px;padding:15px;font:inherit}
.pagination{display:flex;gap:10px;justify-content:center;margin-top:34px}
.reading-progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--terracotta);z-index:120}
.article-hero{padding:58px 0 40px;background:var(--cream)}
.article-hero img{max-height:520px;margin-top:28px}
.article-meta{display:flex;gap:12px;flex-wrap:wrap;font-weight:800;color:var(--text-mid);margin-bottom:18px}
.article-layout{display:grid;gap:28px}
.toc{background:white;border:1px solid var(--border);border-radius:14px;padding:22px;align-self:start}
.toc strong{display:block;margin-bottom:10px}
.toc a{display:block;color:var(--terracotta);font-weight:800;margin:8px 0}
.article-content{font-size:18px;line-height:1.75}
.article-content h2{font-size:clamp(28px,4vw,42px);margin-top:42px}
.article-content h3{font-size:25px;margin-top:28px}
.article-content p{font-size:18px;color:var(--text-mid)}
.article-content ul{padding-left:22px;color:var(--text-mid)}
.article-content blockquote{margin:34px 0;padding:24px;border-left:5px solid var(--terracotta);background:var(--terra-light);font-family:'Libre Baskerville',serif;font-size:24px;line-height:1.35}
.article-faq .faq-item p{font-size:17px}
.related-grid{display:grid;gap:18px;margin-top:28px}
@media(min-width:768px){
  .blog-tools{grid-template-columns:minmax(260px,360px) 1fr;align-items:center}
  .blog-filters{justify-content:flex-end}
  .featured-article{grid-template-columns:1.1fr .9fr;padding:26px}
  .blog-card-grid{grid-template-columns:repeat(3,1fr)}
  .newsletter form{grid-template-columns:1fr auto}
  .article-layout{grid-template-columns:280px minmax(0,1fr)}
  .toc{position:sticky;top:100px}
  .related-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
  .blog-card img{height:190px}
  .article-content{font-size:17px}
  .article-content p{font-size:17px}
  .toc{order:-1}
}