/* ==========================================================================
   Article pages (insights/<slug>/) — typography & layout on top of style.css
   ========================================================================== */

.article-wrap { max-width: 780px; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 7.5rem;
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.breadcrumb a { color: var(--color-ink-soft); font-weight: 600; }
.breadcrumb a:hover { color: var(--color-accent-deep); }
.breadcrumb span[aria-current] { color: var(--color-ink); font-weight: 700; }

.article-head { padding-top: var(--space-5); }
.article-title {
  margin-top: var(--space-5);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.04em;
}
.article-meta {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-muted);
  font-weight: 600;
}
.article-lead {
  margin-top: var(--space-5);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-5);
}

.article-body { margin-top: var(--space-8); }
.article-body p {
  margin-top: var(--space-5);
  color: var(--color-ink-soft);
  line-height: 1.75;
}
.article-body h2 {
  margin-top: var(--space-9);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--color-ink);
}
.article-body h3 {
  margin-top: var(--space-7);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.article-body ul,
.article-body ol {
  margin-top: var(--space-4);
  padding-left: 1.4rem;
  display: grid;
  gap: 0.5rem;
  color: var(--color-ink-soft);
}
.article-body ul { list-style: none; padding-left: 0; }
.article-body ul li {
  position: relative;
  padding-left: 1.6rem;
}
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}
.article-body ol { list-style: decimal; }
.article-body li::marker { color: var(--color-accent-deep); font-weight: 700; }
.article-body a {
  color: var(--color-accent-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-soft);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-spring);
}
.article-body a:hover { text-decoration-color: var(--color-accent); }
.article-body strong { color: var(--color-ink); }

.article-related { margin-top: var(--space-11); }
.article-related .related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--layout-gap);
  margin-top: var(--space-6);
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
  transition: transform var(--dur-mid) var(--ease-spring),
    box-shadow var(--dur-mid) var(--ease-spring);
}
.related-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift), var(--shadow-inset);
}
.related-name {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.4;
  color: var(--color-ink);
}

/* Markdown pipe tables rendered by gen_articles.py:md_to_html() */
.table-wrap {
  overflow-x: auto;
  margin-top: var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  min-width: 34rem;
}
.table-wrap th,
.table-wrap td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-hairline);
}
.table-wrap th {
  font-weight: 800;
  color: var(--color-ink);
  background: var(--color-surface-soft);
  white-space: nowrap;
}
.table-wrap td { color: var(--color-ink-soft); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 768px) {
  .breadcrumb { padding-top: 6rem; }
  .article-related .related-grid { grid-template-columns: 1fr; }
  .table-wrap table { min-width: 30rem; }
}

@media (prefers-reduced-motion: reduce) {
  .related-card { transition: none; }
}