/* BLOG */
.blog-layout{ display:grid; grid-template-columns:2.2fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.blog-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.blog-search{ display:flex; border:1px solid var(--line-strong); margin-bottom:2rem; }
.blog-search input{ flex:1; border:none; padding:0.85rem 1rem; font-size:0.9rem; }
.blog-search input:focus{ outline:none; }
.blog-search button{ background:var(--forest-900); color:var(--paper); border:none; padding:0 1.2rem; font-weight:700; }

.sidebar-block{ border:1px solid var(--line); padding:1.5rem; margin-bottom:1.5rem; }
.sidebar-block h4{ font-family:var(--font-mono); font-size:0.72rem; color:var(--green-700); text-transform:uppercase; margin-bottom:1rem; letter-spacing:0.03em; }
.cat-list li{ display:flex; justify-content:space-between; padding:0.55rem 0; border-bottom:1px solid var(--line); font-size:0.88rem; }
.cat-list li:last-child{ border-bottom:none; }
.cat-list a:hover{ color:var(--forest-900); }
.cat-list span{ color:var(--ink-soft); font-family:var(--font-mono); font-size:0.75rem; }

.article-body{ max-width:70ch; }
.article-body h2{ font-size:var(--step-2); margin:2rem 0 0.85rem; }
.article-body h3{ font-size:1.25rem; margin:1.5rem 0 0.6rem; }
.article-body p{ color:var(--ink); font-size:1rem; margin-bottom:1.1em; }
.article-body ul{ list-style:none; display:grid; gap:0.5rem; margin-bottom:1.2em; }
.article-body ul li{ padding-left:1.1em; position:relative; }
.article-body ul li::before{ content:""; position:absolute; left:0; top:0.65em; width:5px; height:5px; background:var(--green-700); }
.article-meta{ display:flex; gap:1.25rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-soft); margin:1.25rem 0 2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line); }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }

@media (max-width:900px){
  .blog-layout{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .blog-grid{ grid-template-columns:1fr; }
  .related-grid{ grid-template-columns:1fr; }
}