/* ============================================================
   BLOG — index cards
   ============================================================ */
.blog-card {
  display:flex; flex-direction:column; height:100%; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:22px; overflow:hidden;
  transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.blog-card:hover { transform:translateY(-5px); box-shadow:0 26px 54px rgba(28,36,25,0.12); border-color:rgba(28,36,25,0.16); }

.blog-thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:#eef0ea; }
.blog-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.blog-card:hover .blog-thumb img { transform:scale(1.06); }

.blog-body { display:flex; flex-direction:column; flex:1; padding:clamp(22px,2vw,28px); }
.blog-meta { font-size:11.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
.blog-body h3 { font-size:1.3rem; font-weight:500; letter-spacing:-0.02em; line-height:1.18; color:var(--ink); margin:0 0 10px; }
.blog-body p { font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0 0 16px; flex:1; }
.blog-body .tag {
  align-self:flex-start; background:transparent; border:none; padding:0;
  color:var(--sage-deep); letter-spacing:0.04em; font-size:12.5px;
  transition:gap 0.3s; display:inline-flex; gap:6px;
}
.blog-card:hover .blog-body .tag { color:var(--ink); }

/* ============================================================
   BLOG ARTICLE (view.php)
   ============================================================ */
.blog-article-back { font-size:13px; color:var(--ink-faint); transition:color 0.25s; }
.blog-article-back:hover { color:var(--ink); }
/* Article view: tame the global h1 size on the narrow column */
.section .container h1 { font-size:clamp(2rem,4vw,3.2rem); font-weight:500; letter-spacing:-0.03em; color:var(--ink); line-height:1.1; }
.section .container .blog-thumb { border-radius:22px; }
/* Article body prose */
.section .container > .reveal > div:last-child { color:var(--ink-soft); }
.section .container > .reveal > div:last-child h2,
.section .container > .reveal > div:last-child h3 { font-family:var(--serif); font-weight:400; color:var(--ink); margin:1.5em 0 0.5em; }
.section .container > .reveal > div:last-child p { margin-bottom:1.1em; }
.section .container > .reveal > div:last-child img { border-radius:16px; margin:1.4em 0; }