/* ================= blog listing ================= */
.bl{padding-top:128px;padding-bottom:var(--sec)}
.bl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 48px;flex-wrap:wrap}
.bl-head .crumbs{display:flex;gap:8px;font-size:14px;color:var(--soft)}
.bl-head .crumbs a{text-decoration:none;color:var(--ink)}
.bl-head h1{font-size:clamp(36px,4.4vw,60px);font-weight:600;letter-spacing:-.04em;line-height:1.02;margin-top:10px}
.bl-head p{color:var(--soft);max-width:440px;margin-top:12px}
.bl-search{display:flex;align-items:center;gap:10px;width:min(360px,100%);border:1px solid #e3e1ee;border-radius:14px;padding:0 14px;background:var(--white)}
.bl-search svg{width:18px;height:18px;fill:none;stroke:var(--soft);stroke-width:2;stroke-linecap:round;flex:none}
.bl-search input{flex:1;min-width:0;border:0;background:transparent;padding:13px 0;font:15px var(--f);color:var(--ink)}
.bl-search input:focus{outline:none}
.bl-search:focus-within{border-color:var(--dark-2)}
.bl-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.bl-cats button{border:1px solid #e3e1ee;background:var(--white);border-radius:999px;padding:8px 16px;font:600 14px var(--f);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.bl-cats button:hover{border-color:var(--dark-2)}
.bl-cats button.on{background:#14171b;border-color:#14171b;color:var(--white)}
.bl-feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:36px;text-decoration:none;color:inherit}
.bl-feat .ph{border-radius:28px;aspect-ratio:16/10;overflow:hidden;position:relative}
.bl-feat .ph i{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.bl-feat:hover .ph i{transform:scale(1.04)}
.bl-feat .tag{display:inline-block;font-size:12.5px;font-weight:700;color:var(--acc)}
.bl-feat h2{font-size:clamp(28px,3vw,42px);margin-top:10px;transition:color .25s}
.bl-feat:hover h2{color:var(--acc)}
.bl-feat p{color:var(--soft);font-size:16.5px;margin-top:14px}
.bl-by{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:14px;color:var(--soft)}
.bl-by .av{width:40px;height:40px;border-radius:50%;background-size:cover;background-position:center top;flex:none}
.bl-by b{display:block;color:var(--ink);font-size:15px}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,40px) clamp(16px,2vw,24px);margin-top:clamp(40px,5vw,64px)}
.bl-grid .post p{color:var(--soft);font-size:15px;margin-top:-4px}
.bl-empty{grid-column:1/-1;text-align:center;padding:48px 16px;border:1px dashed #d8d5e6;border-radius:24px;color:var(--soft)}
.bl-empty b{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}
.bl-more{display:flex;justify-content:center;margin-top:40px}
.bl-more button{border:1px solid var(--line);background:var(--white);border-radius:12px;padding:13px 26px;font:600 15px var(--f);color:var(--ink);cursor:pointer}
.bl-more button:hover{border-color:var(--dark-2)}
.bl-count{text-align:center;font-size:13.5px;color:var(--soft);margin-top:12px}

@media (max-width:1000px){
  .bl-feat{grid-template-columns:minmax(0,1fr)}
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .bl{padding-top:100px}
  .bl-cats{flex-wrap:nowrap;overflow-x:auto;padding-bottom:20px;scrollbar-width:none}
  .bl-cats button{flex:none}
  .bl-grid{grid-template-columns:minmax(0,1fr)}
}