/* ============================================================
   Extra CSS for blog pages (blog index + article pages).
   Loaded after base.css.
   ============================================================ */
.article-meta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:.84rem; color:var(--text-tertiary); margin-bottom:8px;}
  .article-meta-row .dot{width:3px; height:3px; border-radius:50%; background:var(--text-tertiary);}

  .toc-card{padding:22px 26px; margin-bottom:8px;}
  .toc-card h2{font-size:.95rem; margin-bottom:12px;}
  .toc-card ol{margin:0; padding-left:20px; font-size:.9rem;}
  .toc-card li{margin-bottom:8px;}
  .toc-card a{color:var(--text-secondary); text-decoration:none;}
  .toc-card a:hover{color:var(--lean-dark); text-decoration:underline;}

  .article-body h2{margin-top:36px; font-size:1.4rem;}
  .article-body p{font-size:1.02rem; line-height:1.7;}

  .author-box{
    display:flex; gap:16px; align-items:center; padding:24px; margin-top:8px;
  }
  .author-avatar{
    width:52px; height:52px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, var(--lean), var(--fat)); color:#fff;
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  }
  .author-box h3{font-size:.95rem; margin-bottom:2px;}
  .author-box p{font-size:.85rem; margin-bottom:0;}

  .newsletter-card{
    padding:32px; text-align:center; background:linear-gradient(165deg, var(--surface-raised), var(--surface));
  }
  .newsletter-card h2{margin-bottom:8px;}
  .newsletter-card p{max-width:42ch; margin:0 auto 20px;}
  .newsletter-form{display:flex; gap:10px; max-width:420px; margin:0 auto; flex-wrap:wrap;}
  .newsletter-form input{flex:1; min-width:180px;}
  @media (max-width:480px){ .newsletter-form{flex-direction:column;} }
  .newsletter-success{display:none; color:var(--success); font-weight:600; font-size:.88rem; margin-top:12px;}
  .newsletter-success.is-visible{display:block;}

  .article-card{
    display:block; text-decoration:none; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-md); overflow:hidden; transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .article-card:hover{transform:translateY(-3px); border-color:var(--border-strong); box-shadow:0 20px 44px -26px hsl(var(--shadow-color)/0.4);}
  .article-card-thumb{
    height:140px; background:linear-gradient(135deg, var(--lean-soft), var(--carb-soft));
    display:flex; align-items:center; justify-content:center;
  }
  .article-card-thumb svg{width:34px; height:34px; color:var(--lean-dark); opacity:.7;}
  .article-card-body{padding:20px;}
  .article-card h3{font-size:1rem; margin-bottom:6px;}
  .article-card p{font-size:.87rem; margin-bottom:10px;}
  .article-card-meta{font-size:.76rem; color:var(--text-tertiary); font-family:var(--font-mono);}

  .featured-article{
    display:grid; grid-template-columns:1.1fr .9fr; gap:0; overflow:hidden;
  }
  @media (max-width:820px){ .featured-article{grid-template-columns:1fr;} }
  .featured-article-thumb{
    background:linear-gradient(135deg, var(--lean-soft), var(--fat-soft));
    display:flex; align-items:center; justify-content:center; min-height:220px;
  }
  .featured-article-thumb svg{width:56px; height:56px; color:var(--lean-dark); opacity:.7;}
  .featured-article-body{padding:36px;}