.blog-layout{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start}
.blog-sidebar{position:sticky;top:24px;align-self:start;border:1px solid var(--line);background:#fff;border-radius:16px;padding:22px;max-height:calc(100vh - 48px);overflow-y:auto}
.blog-sidebar__section{margin:0 0 22px}
.blog-sidebar__section:last-child{margin-bottom:0}
.blog-sidebar__heading{margin:0 0 10px;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.blog-search{position:relative;margin:0 0 22px}
.blog-search__icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);opacity:.55;pointer-events:none}
.blog-search input[type="search"]{width:100%;padding:.7rem 3rem .7rem 2.5rem;border-radius:999px;border:1px solid var(--line);font-size:.95rem;background:var(--paper);color:var(--ink)}
.blog-search input[type="search"]::placeholder{color:var(--muted)}
.blog-search button{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:2.15rem;height:2.15rem;border:0;border-radius:999px;background:var(--brand);color:#fff;cursor:pointer}
.blog-search button:hover{background:var(--brand-dark)}
.blog-pills{display:flex;flex-direction:column;gap:.4rem}
.blog-pill{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:10px;padding:.55rem .85rem;font-size:.9rem;text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.blog-pill:hover{border-color:var(--brand)}
.blog-pill.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
.blog-pill__count{opacity:.75;font-size:.8em}
.blog-sort{display:flex;flex-direction:column;gap:.5rem}
.blog-sort label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;cursor:pointer}
.blog-readtime{display:flex;flex-wrap:wrap;gap:.4rem}
.blog-readtime__chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:.4rem .85rem;font-size:.82rem;cursor:pointer;color:var(--ink)}
.blog-readtime__chip.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
.blog-sidebar__counts{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted)}
.blog-sidebar__counts b{color:var(--ink)}
.blog-toolbar__clear{display:inline-block;margin:0 0 22px;font-size:.85rem;color:var(--muted);text-decoration:underline}
.blog-filter-toggle{display:none;align-items:center;gap:.5rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.65rem 1.1rem;font-size:.9rem;font-weight:700;margin:0 0 20px;cursor:pointer}
.blog-filter-toggle svg{opacity:.75}
.blog-sidebar__close{display:none}
@media(max-width:900px){
    .blog-layout{display:block}
    .blog-filter-toggle{display:inline-flex}
    .blog-sidebar{position:fixed;inset:0;z-index:200;display:none;border-radius:0;overflow-y:auto;padding:20px 20px 32px;max-height:none}
    .blog-sidebar.is-open{display:block}
    .blog-sidebar__close{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:999px;border:1px solid var(--line);background:#fff;margin:0 0 18px auto;cursor:pointer}
    .blog-sidebar-backdrop{position:fixed;inset:0;background:rgba(10,20,16,.45);z-index:199;display:none}
    .blog-sidebar-backdrop.is-open{display:block}
    body.blog-modal-open{overflow:hidden}
}
.shell.shell--wide{width:min(1500px, calc(100% - 48px))}
@media(max-width:1300px){
    .blog-layout{grid-template-columns:260px 1fr;gap:24px}
}