/*
  BLOG / READ — heading + buttons and a CSS-columns masonry of article cards.
  Scoped under .hc-blog. Reveal state is `.in` (added by blog.js / revealOnScroll).
*/
.hc-blog{background:var(--cream);color:var(--ink);padding:clamp(4rem,9vw,8rem) clamp(5vw,7vw,9rem)}
.hc-blog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.hc-blog-head h2{font-family:var(--serif);font-weight:800;font-size:var(--h2);line-height:1.05;max-width:16ch}
.hc-blog-head .hc-btns{display:flex;gap:.8rem}
.hc-btn-ghost{border:2px solid var(--ink);color:var(--ink);padding:.85rem 1.6rem;border-radius:6px;font-weight:700;font-size:.95rem;transition:.25s}
.hc-btn-ghost:hover{background:var(--ink);color:var(--cream)}
.hc-masonry{columns:3 300px;column-gap:1.5rem}
.hc-post{break-inside:avoid;margin-bottom:1.5rem;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:10px}
.hc-post .hc-thumb{overflow:hidden}
.hc-post .hc-thumb img{width:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hc-post:hover .hc-thumb img{transform:scale(1.06)}
.hc-post .hc-meta{padding:1.2rem}
.hc-post .hc-cat{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}
.hc-post h3{font-family:var(--serif);font-weight:700;font-size:1.4rem;line-height:1.2;margin:.5rem 0}
.hc-post h3 a{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0 2px;background-position:0 100%;transition:background-size .3s}
.hc-post:hover h3 a{background-size:100% 2px}
.hc-post p{color:var(--muted);font-size:.95rem}
.hc-post{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease}
.hc-post.in{opacity:1;transform:none}