/* Blog cards (Blog design). Grid, featured first card, cover with illustration, title and read-more. */
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:20px}
.post{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:var(--text)}
.post:hover{color:var(--text)}
.post.feat{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr))}
.cover{position:relative;height:220px;overflow:hidden;background:color-mix(in oklch,var(--tint) 14%,var(--bg3));border-bottom:1px solid var(--line)}
.post.feat .cover{height:auto;min-height:380px;border-bottom:0;border-right:1px solid var(--line)}
.cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in oklch,var(--tint) 40%,transparent) 1px,transparent 1px);background-size:18px 18px;opacity:.55}
.glyph{position:absolute;inset:0;display:grid;place-items:center;color:var(--tint);transition:transform 500ms cubic-bezier(.2,.7,.2,1)}
.post:hover .glyph{transform:scale(1.04) rotate(-1.5deg)}
.post-body{padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.post-meta{margin:0;display:flex;gap:10px;flex-wrap:wrap;font-size:12px;letter-spacing:.04em;color:var(--muted)}
.ptitle{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.15;text-wrap:balance;transition:color 150ms ease;font-size:24px}
.post.feat .ptitle{font-size:clamp(28px,3.2vw,42px)}
.post:hover .ptitle{color:var(--hi)}
.post-excerpt{margin:0;color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:8px;color:var(--acc-fg);font-weight:600;font-size:15px;min-height:28px;margin-top:4px}
.more .arrow{transition:transform 150ms ease}
.post:hover .more .arrow{transform:translateX(3px)}
/* No empty grid cells: the container is the wrap content box. 2 columns from 740px, 3 from 1120px (min card 360px + 20px gap).
   data-m2/m3 = number of non-featured cards modulo the column count; the odd one(s) out widen to fill the row. */
@container (740px <= width < 1120px){.bgrid[data-m2="1"]>.post:last-child{grid-column:1/-1}}
@container (width >= 1120px){
.bgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
.bgrid>.post{grid-column:span 2}
.bgrid>.post.feat{grid-column:1/-1}
.bgrid[data-m3="1"]>.post:last-child{grid-column:1/-1}
.bgrid[data-m3="2"]>.post:last-child,.bgrid[data-m3="2"]>.post:nth-last-child(2){grid-column:span 3}
}
/* Real cover photo instead of the illustration. Dimensions come from the attachment (no layout shift), the frame crops. */
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover.has-img::before{display:none}
@media (prefers-reduced-motion:reduce){.glyph{transition:none}}