/* ==========================================================================
   BLOG — listing page + article template
   ========================================================================== */

/* ---------- Listing ---------- */
.blog-hero{ padding-top:140px; padding-bottom:64px; }
.blog-list{ border-top:1px solid var(--line); }
.blog-row{
  display:grid;
  grid-template-columns:140px 1fr 120px;
  gap:32px;
  align-items:baseline;
  padding:32px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left var(--dur-reveal) var(--ease-premium);
}
.blog-row .blog-row-meta{ display:flex; flex-direction:column; gap:6px; }
.blog-row .read-count{ color:var(--muted-on-ink); }
.blog-row:hover{ padding-left:16px; }
.blog-row h3{
  text-transform:none;
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(1.15rem, 2.2vw, 1.75rem);
  letter-spacing:0;
  line-height:1.25;
}
@media (max-width:768px){
  .blog-row{ grid-template-columns:1fr; gap:12px; }
}

/* ---------- Article template ---------- */
.article-hero{ padding-top:140px; padding-bottom:56px; max-width:900px; }
.article-hero h1{ font-size:clamp(2.25rem,6vw,4.5rem); }
.article-meta{
  display:flex; align-items:center; gap:16px;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.gift-banner{
  margin-top:28px;
  padding:16px 20px;
  background:rgba(0,230,160,.08);
  border:1px solid rgba(0,230,160,.3);
  font-family:var(--font-mono);
  font-size:.8125rem;
  color:var(--paper);
  max-width:900px;
}

.article-body{ max-width:720px; padding-bottom:96px; }
.article-body p{
  font-size:1.0625rem;
  line-height:1.7;
  color:#C7C7C7;
  margin-bottom:24px;
  max-width:70ch;
}
.article-body p.lede{ font-size:1.25rem; color:var(--paper); }
.article-body h2{
  font-size:clamp(1.5rem,3vw,2.25rem);
  margin:64px 0 20px;
  text-transform:none;
  letter-spacing:-0.005em;
}
.article-answer{
  border-left:2px solid var(--accent);
  padding:18px 24px;
  margin-bottom:24px;
  background:var(--ink-raise);
  font-size:1.0625rem;
  color:var(--paper);
}
.article-cta{
  margin-top:56px;
  padding:40px;
  border:1px solid var(--line);
}
.article-cta p{ color:#C7C7C7; margin-bottom:24px; }