/* Blog – uses root styles.css as base */
:root{ color-scheme: dark; }

.blogWrap{ max-width: 980px; margin: 0 auto; padding: 16px; }

.blogHeader{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.blogHeader h1{ margin: 0 0 8px 0; font-size: clamp(20px, 2vw, 30px); letter-spacing: .2px; }
.blogHeader p{ margin: 0; color: var(--muted); line-height: 1.5; }

.postGrid{ margin-top: 12px; display:grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (max-width: 980px){ .postGrid{ grid-template-columns: 1fr; } }

.postCard{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.postCardInner{ padding: 16px; }
.postCard h2{ margin: 0 0 6px 0; font-size: 16px; }
.postCard p{ margin: 0; color: var(--muted); line-height: 1.5; }
.postMeta{ margin-top: 10px; display:flex; gap: 10px; flex-wrap:wrap; color: var(--muted); font-size: 12.5px; }

.article{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.prose{ line-height: 1.75; font-size: 15px; }
.prose h1{ margin: 0 0 10px 0; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.1; }
.prose h2{ margin: 18px 0 10px 0; font-size: 17px; }
.prose p{ margin: 10px 0; color: rgba(234,255,241,.86); }
.prose ul{ margin: 10px 0 10px 18px; color: rgba(234,255,241,.86); }
.prose li{ margin: 6px 0; }
.prose a{ color: var(--text); text-decoration: underline; text-decoration-color: rgba(14,167,90,.45); }
.prose a:hover{ text-decoration-color: rgba(14,167,90,.75); }

.callout{
  border: 1px solid rgba(14,167,90,.30);
  background: rgba(14,167,90,.10);
  border-radius: 16px;
  padding: 12px;
  margin: 14px 0;
}
.callout b{ display:block; margin-bottom: 6px; }
.callout p{ margin: 0; color: rgba(234,255,241,.90); }

.breadcrumbs{ margin: 12px 0 0 0; color: var(--muted); font-size: 12.5px; }
.breadcrumbs a{ color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover{ text-decoration: underline; }

.articleActions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 14px; }

:focus-visible{ outline: 3px solid rgba(14,167,90,.35); outline-offset: 2px; border-radius: 10px; }