.article { max-width: var(--max-content); margin: 0 auto; }

.article__retraction {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-3);
  border-radius: 4px;
  margin-bottom: var(--space-4);
}
.article__update {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  background: rgba(200, 160, 66, 0.08);
}
.article__badges {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.article__section {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 2px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.875rem;
}
.article__topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.article__topics a,
.article__topics .article__topic--unlinked {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.article__topics a { text-decoration: none; }
.article__topics a::before,
.article__topics .article__topic--unlinked::before { content: "# "; }
/* Slug-only chips (no /topic/<slug>/ page yet) — readable but visibly not a link. */
.article__topics .article__topic--unlinked { opacity: 0.65; cursor: default; }

.article__headline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.3;
  margin: var(--space-2) 0 var(--space-3);
}
.article__dek { color: var(--color-text-muted); }

.article__body p { line-height: 1.9; }
.article__body p + p { margin-top: var(--space-3); }

.article__hero {
  margin: var(--space-3) 0 var(--space-4);
}
.article__hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-2);
}
.article__hero-credit {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: right;
  font-style: italic;
}

.article__sources {
  font-size: 0.9375rem;
  background: rgba(200, 160, 66, 0.05);
  padding: var(--space-3) var(--space-4);
  border-radius: 4px;
}
.article__sources h2 { font-family: var(--font-body); font-size: 1.125rem; margin-top: 0; }
.article__sources ol { padding-left: 1.25rem; }
.article__sources li { margin-bottom: var(--space-2); }

.article__footer {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.article__ai-disclosure { font-style: italic; }

/* Topic page */
.topic { max-width: var(--max-page); margin: 0 auto; }
.topic__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  margin: var(--space-2) 0 var(--space-4);
  color: var(--color-accent);
}
.topic__intro { max-width: var(--max-content); margin: 0 auto; }
.topic__articles { max-width: var(--max-content); margin: 0 auto; }
/* Inline images placed by the synthesizer after each ## section */
.topic__intro img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-2);
  margin: var(--space-3) auto var(--space-1);
}
.topic__intro p > img:only-child + em,
.topic__intro p > em {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin: 0 0 var(--space-3);
  text-align: right;
}
@media (min-width: 1024px) {
  /* Desktop: side-by-side intro / article list. The grid only sees two
     direct children (.topic__left and .topic__articles); dividers and
     header live inside .topic__left so they can't get auto-placed into
     the right column. */
  .topic {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
    align-items: start;
  }
  .topic__left { min-width: 0; }
  .topic__articles { margin: 0; }
}

/* 404 page */
.not-found { max-width: var(--max-content); margin: 0 auto; padding: var(--space-4) 0; }
.not-found__header { text-align: center; }
.not-found__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-accent);
}
.not-found__lede { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.not-found__topics, .not-found__recent { margin: var(--space-5) 0; }
.not-found__home { margin-top: var(--space-5); text-align: center; }

.topic-cloud {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.topic-cloud li { display: inline-block; }
.topic-cloud a {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.9375rem;
  transition: background 0.15s, border-color 0.15s;
}
.topic-cloud a:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.article-list { list-style: none; padding: 0; margin: 0; }
.article-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.article-list li:last-child { border-bottom: none; }
.article-list a { text-decoration: none; color: var(--color-text); }
.article-list a:hover { color: var(--color-accent); }
.article-list__meta { color: var(--color-text-muted); font-size: 0.875rem; margin-left: var(--space-2); }