/* Shared by the Notes listing pages (blog index, category and tag pages): listing layout,
   post cards with thumbnails, and the category chips. Loaded after notes.css.
   Per page variants (.kicker, .hero h1, .hero p) stay in each page's own <style>. */

.wrap{max-width:960px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.hero{padding:clamp(56px,9vw,90px) clamp(20px,5vw,40px) clamp(24px,4vw,40px)}
.cats{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.cat-chip{
  font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;
  padding:10px 20px;border-radius:999px;border:1.5px solid rgba(47,51,39,.16);
  background:transparent;color:var(--ink);text-decoration:none;
  transition:transform .35s var(--spring),background .3s ease,border-color .3s ease,color .3s ease;
}
.cat-chip:hover{transform:translateY(-2px);border-color:var(--teal);color:var(--ink)}
.cat-chip.active{background:linear-gradient(120deg,var(--green),var(--teal));color:var(--cream);border-color:transparent;box-shadow:0 12px 26px -16px rgba(46,168,154,.9)}
/* top and bottom only: the side padding comes from .wrap, so cards keep the page gutter */
.posts{padding-top:clamp(24px,4vw,40px);padding-bottom:clamp(80px,11vw,120px)}
.post-card{display:flex;gap:clamp(18px,2.8vw,24px);padding:clamp(20px,3vw,26px);background:var(--bone);border-radius:16px;text-decoration:none;margin-bottom:24px;transition:transform .35s var(--spring),box-shadow .3s ease,background .3s ease}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);background:#f9f4e6}
.post-card__thumb{flex:none;width:160px;height:120px;border-radius:12px;object-fit:cover;box-shadow:0 4px 12px -6px rgba(47,51,39,.2)}
.post-card__content{flex:1;min-width:0}
.post-card__top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:12px}
@media (max-width:640px){.post-card{flex-direction:column}.post-card__thumb{width:100%;height:200px}}
.post-card__cat{font-size:.78rem;font-weight:700;color:var(--teal-dark);text-transform:uppercase;letter-spacing:.12em}
.post-card__meta{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:12px}
.post-card__draft{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:rgba(227,178,60,.14);padding:5px 11px;border-radius:999px}
.post-card h2{font-size:clamp(1.35rem,2.8vw,1.65rem);margin:0 0 12px;color:var(--head)}
.post-card__blurb{font-size:1rem;line-height:1.65;color:var(--muted);margin:0 0 14px}
.post-card__tags{display:flex;flex-wrap:wrap;gap:7px}
.post-card__tag{font-size:.78rem;font-weight:600;color:var(--muted);padding:3px 10px;background:rgba(47,51,39,.06);border-radius:4px}
.foot{border-top:1px solid rgba(47,51,39,.12);padding:clamp(56px,8vw,80px) 0 40px;font-size:.84rem;color:var(--muted)}