/* =========================================================
   Heijman Consultancy — BLOG INDEX
   Link AFTER styles.css. Palette: white / taupe / ink / muted only.
   Individual posts bring their own stylesheet.
   ========================================================= */

/* ---------- Page hero ---------- */
.page-hero{padding:128px 0 clamp(1.6rem,4vh,2.6rem);text-align:center}
.page-hero .inner{max-width:780px;margin-inline:auto}
.page-hero h1{font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);margin-top:1rem;letter-spacing:-.02em}
.page-hero .lead{margin:1.2rem auto 0;color:var(--muted);font-size:clamp(1.02rem,1rem + .4vw,1.18rem);max-width:62ch}

/* ---------- Post list ---------- */
.posts{padding:clamp(1rem,3vh,2rem) 0 clamp(4rem,9vh,7rem)}
.post-card{
  display:block;max-width:760px;margin:0 auto;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:clamp(1.8rem,4vw,2.6rem);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.post-card + .post-card{margin-top:1.4rem}
.post-card:hover{transform:translateY(-3px);box-shadow:0 22px 46px -30px rgba(33,37,41,.4);border-color:rgba(33,37,41,.28)}

.pc-meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.post-card h2{margin-top:.8rem;font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem);font-weight:500;letter-spacing:-.01em;line-height:1.25}
.post-card p{margin-top:.9rem;color:#333;font-size:1rem;line-height:1.7}
.pc-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
.post-card:hover .pc-link{color:var(--muted);border-color:var(--muted)}