.blog-cards{--blog-bg:#f7f8fb;--blog-surface:#fff;--blog-border:#e6e9f2;--blog-border-hi:#d3d9e8;--blog-ink:#17223b;--blog-soft:#58637b;--blog-accent:#3b5bdb;--blog-navy:#0f1a33;--blog-mono:"IBM Plex Mono", ui-monospace, monospace;--blog-display:"Bricolage Grotesque", system-ui, sans-serif;--blog-body:"Inter", system-ui, sans-serif;--blog-shadow-sm:0 2px 10px -2px #17223b0f;--blog-shadow-md:0 18px 44px -18px #17223b2e;color:var(--blog-ink);font-family:var(--blog-body)}.blog-cards.grid{grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none;display:grid}.blog-cards.grid--2{grid-template-columns:repeat(2,1fr)}.blog-cards .card{background:var(--blog-surface);border:1px solid var(--blog-border);box-shadow:var(--blog-shadow-sm);height:100%;color:inherit;border-radius:18px;flex-direction:column;text-decoration:none;transition:all .15s;display:flex;overflow:hidden}.blog-cards .card:hover{border-color:var(--blog-accent);box-shadow:var(--blog-shadow-md);transform:translateY(-3px)}.blog-cards .card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#e9edfb,#d8e0f8);position:relative;overflow:hidden}.blog-cards .card .thumb img{object-fit:cover;width:100%;height:100%;transition:transform .3s;display:block}.blog-cards .card:hover .thumb img{transform:scale(1.04)}.blog-cards .card .thumb-mark{font-family:var(--blog-display);letter-spacing:-.04em;color:#17223b2e;pointer-events:none;place-items:center;font-size:1.4rem;font-weight:800;display:grid;position:absolute;inset:0}.blog-cards .card .body{flex-direction:column;flex:1;padding:20px 22px 22px;display:flex}.blog-cards .card .cl{font-family:var(--blog-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blog-accent);font-size:.64rem;font-weight:600}.blog-cards .card h3{font-family:var(--blog-display);color:var(--blog-ink);margin:8px 0 6px;font-size:1.08rem;line-height:1.35}.blog-cards .card p{color:var(--blog-soft);-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;margin:0;font-size:.88rem;display:-webkit-box;overflow:hidden}.blog-cards .card .meta{color:var(--blog-soft);align-items:center;gap:.8rem;margin-top:14px;font-size:.76rem;display:flex}.blog-cards .card .meta .dot{background:var(--blog-border-hi);border-radius:50%;width:3px;height:3px}@media (max-width:960px){.blog-cards.grid,.blog-cards.grid--2{grid-template-columns:repeat(2,1fr)}}@media (max-width:620px){.blog-cards.grid,.blog-cards.grid--2{grid-template-columns:1fr}}