/* Page CSS for /blog/, lifted verbatim out of the design file so it loads in the
   same cascade position as the static page (after mma-core, before mma-footer /
   mma-blocks / mma-shell). Previously it sat inline in the page body, i.e. last. */

.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1000px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.bgrid{grid-template-columns:1fr}}
.bpost{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.bpost:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.bpost .im{aspect-ratio:16/10;overflow:hidden}
.bpost .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bpost:hover .im img{transform:scale(1.05)}
.bpost .bd{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.bpost .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--verdigris)}
.bpost h3{font-family:var(--disp);font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.3}
.bpost p{font-size:13.5px;color:var(--ink-60);line-height:1.55;flex:1}
.bpost .mt{font-family:var(--mono);font-size:10.5px;color:var(--ink-40)}