/* ============================================================
   BLOG.CSS — Blog Section (based on ind6.png)
   ind6.png: 1599×393 — wide shallow strip, light bg,
   horizontal card row with featured large card on right,
   smaller cards on left, category chips, date + title + excerpt
   ============================================================ */

.blog-section {
  background: var(--surface-sunken);
  padding-block: var(--space-16);
}

/* ── Blog Layout ─────────────────────────────────────────── */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-6);
  align-items: start;
}

/* ── Secondary Cards (left column) ────────────────────────── */
.blog-secondary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.blog-card-sm {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  gap: 0;
  transition: box-shadow var(--transition-base), transform var(--transition-base),
              border-color var(--transition-base);
  text-decoration: none;
}
.blog-card-sm:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(-2px);
  border-color: var(--brand-200);
}

.blog-card-sm-thumb {
  width: 100px;
  min-height: 90px;
  background: linear-gradient(135deg, var(--brand-100), var(--brand-200));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.blog-card-sm-body {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.blog-card-sm-cat {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  background: var(--brand-50);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  display: inline-block;
  align-self: flex-start;
}
.blog-card-sm-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  line-height: var(--line-height-snug);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.blog-card-sm-meta {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* ── Featured Card (right column) ─────────────────────────── */
.blog-card-featured {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  text-decoration: none;
  height: 100%;
}
.blog-card-featured:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-3px);
}

.blog-card-featured-thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 50%, var(--accent-500) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  overflow: hidden;
  min-height: 180px;
}
.blog-card-featured-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%);
}
.blog-featured-cat {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: #fff;
  background: var(--brand-600);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.blog-card-featured-body {
  padding: var(--space-5) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.blog-card-featured-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text);
  line-height: var(--line-height-snug);
}
.blog-card-featured-excerpt {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--line-height-loose);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  flex: 1;
}
.blog-card-featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.blog-card-featured-date {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* ── Blog Nav Chips ─────────────────────────────────────── */
.blog-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* ── Testimonials — trust summary + refined quote cards ──── */
.testimonials-section {
  background: var(--surface-sunken);
  padding-block: var(--space-16);
}

.testimonials-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}
.testimonials-heading { max-width: 650px; }
.testimonials-heading .section-desc { margin-top: 8px; }
.testimonials-summary {
  flex: 0 0 auto;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: var(--space-5) var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.testimonials-summary-score {
  font-size: 2.15rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--neutral-900);
  font-variant-numeric: tabular-nums;
}
.testimonials-summary-score span {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
}
.testimonials-summary-stars,
.testimonial-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--accent-400);
}
.testimonials-summary-stars svg { width: 15px; height: 15px; }
.testimonials-summary-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
  text-align: center;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.testimonial-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--brand-200);
  transform: translateY(-2px);
}
.testimonial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.testimonial-quote {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-600);
  flex: none;
}
.testimonial-stars svg { width: 14px; height: 14px; }
.testimonial-text {
  font-size: var(--text-sm);
  color: var(--neutral-700);
  line-height: var(--line-height-loose);
  flex: 1;
  margin: 0;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}
.testimonial-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.testimonial-author-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}
.testimonial-verified {
  width: 15px;
  height: 15px;
  color: var(--brand-600);
  flex: none;
}
.testimonial-author-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .testimonials-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
  }
  .testimonials-summary {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
  }
  .testimonials-summary-stars { order: -1; }
  .testimonials-summary-meta { text-align: start; }
  .testimonials-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .testimonials-section { padding-block: var(--space-12); }
  .testimonials-summary {
    flex-wrap: wrap;
    gap: 6px var(--space-3);
  }
  .testimonials-summary-meta { flex-basis: 100%; text-align: center; }
}

/* ── Single post ───────────────────────────────────────── */
.blog-post-wrap { max-width: 760px; margin: 0 auto; }
.blog-post-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin: 8px 0 14px; }
.blog-post-body { line-height: 2; font-size: 15px; color: var(--text); }
.blog-post-body h3 { margin: 20px 0 8px; font-size: 16px; color: var(--text); }
.blog-post-body p { margin: 0 0 12px; color: var(--text-muted); line-height: 2; }
.blog-post-body ul { list-style: disc; padding-inline-start: 20px; margin: 12px 0; }

/* ── Polish additions — Phase 3: polished cards & article-single ── */
.blog-card-sm{color:inherit}
.blog-card-sm:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-color:var(--brand-300);box-shadow:var(--shadow-focus)}
.blog-card-sm:active{transform:translateX(-1px) scale(0.99)}
.blog-card-sm-thumb{aspect-ratio:1/1;position:relative;overflow:hidden}
.blog-card-sm-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.08), transparent 55%);pointer-events:none}
.blog-card-sm-cat{border:1px solid var(--brand-100);display:inline-flex;align-items:center;line-height:1.4}
.blog-card-sm-excerpt{font-size:var(--text-xs);color:var(--text-muted);line-height:var(--line-height-loose);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.blog-card-sm-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.blog-card-sm-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-faint);display:inline-block}
.blog-card-featured{color:inherit;transition:box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base)}
.blog-card-featured:hover{border-color:var(--brand-200)}
.blog-card-featured:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-color:var(--brand-300);box-shadow:var(--shadow-focus)}
.blog-card-featured:active{transform:translateY(-1px) scale(0.99)}
.blog-featured-cat{box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.blog-card-featured-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-featured-footer{gap:var(--space-2);flex-wrap:wrap}
.blog-card-featured-date{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.blog-card-featured-date .dot{width:3px;height:3px;border-radius:50%;background:var(--text-faint);display:inline-block}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-5);margin-top:var(--space-8)}
.article-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base)}
.article-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--brand-200)}
.article-card:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-color:var(--brand-300);box-shadow:var(--shadow-focus)}
.article-card:active{transform:translateY(0) scale(0.99)}
.article-card-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--brand-100),var(--accent-100));display:flex;align-items:center;justify-content:center;font-size:2.8rem;position:relative;overflow:hidden;flex-shrink:0}
.article-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.article-card-thumb--emoji{background:linear-gradient(135deg,var(--brand-50),var(--brand-100))}
.article-card-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.06), transparent 60%);pointer-events:none}
.article-card-cat-badge{position:absolute;top:10px;right:10px;z-index:1;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--brand-700);background:rgba(255,255,255,0.92);border:1px solid var(--brand-100);padding:3px 10px;border-radius:var(--radius-full)}
.article-card-body{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.article-card-title{font-size:var(--text-base);font-weight:var(--font-weight-bold);color:var(--text);line-height:var(--line-height-snug);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.article-card-excerpt{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--line-height-loose);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--text-faint);margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--border)}
.article-card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-faint);display:inline-block}
.article-card-meta .meta-read{display:inline-flex;align-items:center;gap:4px;background:var(--surface-sunken);border:1px solid var(--border);padding:2px 8px;border-radius:var(--radius-full);color:var(--text-muted)}
.article-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-4)}
.article-breadcrumb a{color:var(--text-muted);text-decoration:none}
.article-breadcrumb a:hover{color:var(--color-primary)}
.article-breadcrumb .sep{opacity:0.35}
.article-single-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--text-muted);margin:8px 0 14px}
.article-single-hero{aspect-ratio:16/9;min-height:220px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--brand-100),var(--accent-100));display:flex;align-items:center;justify-content:center;font-size:4rem;overflow:hidden;position:relative;border:1px solid var(--border)}
.article-single-hero img{width:100%;height:100%;object-fit:cover;display:block}
.article-single-summary{background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);color:var(--text-muted);line-height:var(--line-height-loose);font-size:var(--text-sm);margin:16px 0 20px}
.blog-post-body h2{margin:28px 0 10px;font-size:18px;color:var(--text);line-height:1.4}
.blog-post-body ol{list-style:decimal}
.blog-post-body li{margin-bottom:6px;color:var(--text-muted)}
.blog-post-body li::marker{color:var(--brand-600)}
.tip-box{background:var(--color-info-bg);border:1px solid rgba(26,111,168,0.18);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin:16px 0;position:relative}
.tip-box p{margin:0;color:var(--color-info);font-size:var(--text-sm);line-height:1.9}
.warning-box{background:var(--color-warning-bg);border:1px solid rgba(198,124,0,0.2);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin:16px 0}
.article-cta{background:linear-gradient(135deg,var(--brand-50),#fffdf8);border:1px solid var(--brand-200);border-radius:var(--radius-lg);padding:18px 20px;margin:18px 0}
.article-cta strong{display:block;font-size:15px;margin-bottom:5px;color:var(--brand-800)}
.article-cta p{margin:0 0 10px;color:var(--text-muted)}
.article-cta a{display:inline-flex;align-items:center;gap:6px;background:var(--brand-600);color:#fff;border-radius:10px;padding:8px 14px;font-size:12px;font-weight:800;text-decoration:none}
.article-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:18px 0}
.article-gallery img{width:100%;border-radius:12px;border:1px solid var(--border)}
.blog-post-body figure{margin:18px 0}
.blog-post-body figure img{width:100%;border-radius:14px;border:1px solid var(--border)}
.blog-post-body figcaption{font-size:11px;color:var(--text-muted);margin-top:6px;text-align:center}
.blog-post-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px}
.blog-post-body th,.blog-post-body td{border:1px solid var(--border);padding:8px 10px;text-align:start}
.blog-post-body th{background:var(--surface-sunken);color:var(--text)}
.blog-post-body details{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:10px 0;background:#fff}
.blog-post-body summary{cursor:pointer;font-weight:800;color:var(--text)}
.blog-post-body details p{margin:8px 0 0}
.article-note{background:var(--brand-50);border-inline-start:4px solid var(--brand-400);border-radius:10px;padding:12px 14px;margin:16px 0;color:var(--text)}
.article-quote{border-inline-start:4px solid var(--accent-400);padding:12px 16px;background:#fffaf0;border-radius:10px;margin:16px 0}
.share-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.share-btn{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:var(--font-weight-medium);padding:8px 14px;border-radius:var(--radius-full);border:1px solid var(--border-strong);background:var(--surface-raised);color:var(--text);cursor:pointer;transition:all var(--transition-fast)}
.share-btn:hover{border-color:var(--brand-300);background:var(--brand-50);color:var(--brand-700)}
.share-btn:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4);margin-top:var(--space-4)}
/* ── Article tags ────────────────────────────────────────── */
.article-tags-wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.article-tags-label{font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--font-weight-medium)}
.article-tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:var(--font-weight-medium);color:var(--text-muted);background:var(--surface-sunken);border:1px solid var(--border);padding:5px 10px;border-radius:var(--radius-full);text-decoration:none;transition:all var(--transition-fast)}
.article-tag:hover{border-color:var(--brand-200);color:var(--brand-700);background:var(--brand-50)}
/* ── Blog filter info ────────────────────────────────────── */
.blog-filter-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0;font-size:var(--text-xs);color:var(--text-muted)}
.blog-filter-meta .count-pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface-raised);border:1px solid var(--border);padding:4px 10px;border-radius:var(--radius-full);font-weight:var(--font-weight-semibold);color:var(--text)}
/* ── Comments ────────────────────────────────────────────── */
.comments-section{margin-top:40px;border-top:1px solid var(--border);padding-top:28px}
.comments-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.comments-header h2{font-size:var(--text-lg);display:flex;align-items:center;gap:10px}
.comments-list{display:flex;flex-direction:column;gap:14px}
.comment-item{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-xl);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.comment-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.comment-avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-100);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--brand-700);flex-shrink:0}
.comment-author{font-weight:700;font-size:var(--text-sm);color:var(--text)}
.comment-date{font-size:var(--text-xs);color:var(--text-faint);display:inline-flex;align-items:center;gap:6px}
.comment-text{font-size:var(--text-sm);color:var(--text-muted);line-height:1.9;white-space:pre-wrap;word-break:break-word}
.comment-form{margin-top:16px;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-xl);padding:16px;display:flex;flex-direction:column;gap:12px}
.comment-form-title{font-weight:700;font-size:var(--text-base);display:flex;align-items:center;gap:8px}
.comment-form .form-row{grid-template-columns:1fr}
.comment-form .form-error{font-size:11px}
.comment-empty{padding:22px;text-align:center;border:1px dashed var(--border);border-radius:var(--radius-xl);background:var(--surface-sunken)}
.comment-empty-icon{font-size:1.8rem;opacity:0.6}
@media(min-width:640px){.comment-form .form-row{grid-template-columns:1fr 1fr}}
/* ── Showcase enrichments — ENRICH-POST ───────────────────── */
.toc{margin:18px 0 22px;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-xl);padding:16px 16px 14px}
.toc-title{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.toc-list a{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);text-decoration:none;padding:6px 10px;border-radius:var(--radius-md);border:1px solid transparent;transition:all var(--transition-fast)}
.toc-list a:hover{background:var(--surface-sunken);color:var(--brand-700);border-color:var(--brand-100)}
.toc-list a::before{content:"›";opacity:0.4;font-weight:700}
.blog-post-body h2{margin:30px 0 10px;font-size:19px;color:var(--text);line-height:1.4;scroll-margin-top:96px}
.blog-post-body h3{margin:22px 0 8px;font-size:16px;color:var(--text);line-height:1.45;scroll-margin-top:96px}
.blog-post-body blockquote{margin:16px 0;padding:14px 16px;border-right:4px solid var(--brand-300);background:var(--brand-50);border-radius:var(--radius-lg);color:var(--text);font-size:14px;line-height:1.9}
.blog-post-body blockquote p{margin:0;color:var(--text)}
.blog-post-body code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:var(--surface-sunken);border:1px solid var(--border);padding:2px 6px;border-radius:6px;color:var(--brand-700);direction:ltr;display:inline-block}
.article-figure{margin:18px 0;border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-raised)}
.article-figure-placeholder{aspect-ratio:16/9;min-height:160px;background:linear-gradient(135deg,var(--brand-100),var(--accent-100));display:flex;align-items:center;justify-content:center;font-size:3.2rem;position:relative}
.article-figure-placeholder::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.06),transparent 60%)}
.article-figure figcaption{padding:10px 14px;font-size:12px;color:var(--text-muted);background:var(--surface-sunken);border-top:1px solid var(--border);text-align:center;line-height:1.7}
.author-bio{margin-top:28px;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-xl);padding:16px;display:flex;gap:14px;align-items:flex-start}
.author-bio-avatar{width:48px;height:48px;border-radius:50%;background:var(--brand-100);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;border:1px solid var(--border)}
.author-bio-name{font-weight:800;font-size:14px;color:var(--text)}
.author-bio-role{font-size:12px;color:var(--text-muted);margin-top:2px}
.author-bio-text{font-size:13px;color:var(--text-muted);line-height:1.9;margin-top:8px}
.comment-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.comment-like{font-size:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--surface-sunken);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}
.comment-like:hover{border-color:var(--brand-200);color:var(--brand-700);background:var(--brand-50)}
.comment-like.liked{border-color:var(--brand-300);color:var(--brand-700);background:var(--brand-50)}
.article-divider{height:1px;background:var(--border);border:none;margin:28px 0}
@media(max-width:640px){.author-bio{flex-direction:column}.toc{padding:14px}}