/*************************************************
  ARTICLE CONTENT
  Reading System – Clean & Comfortable
*************************************************/

.com-content-article__body {
  max-width: var(--container-wide);
  margin-inline: auto;
}

/* ===============================
   Article Paper
   =============================== */
.article-content {
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  padding: 26px 30px;
  margin: 0 auto;

  font-family: var(--font-serif);
  font-size: var(--font-article);
  line-height: var(--line-article);
  color: var(--color-text);

  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.05),
    0 6px 16px rgba(0,0,0,0.06);
}

/* ===============================
   Paragraphs
   =============================== */
.article-content p {
  margin-bottom: 1.4em;
}

/* ===============================
   Headings
   =============================== */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text);
  margin: 1.6em 0 0.8em;
}

/* ===============================
   Links
   =============================== */
.article-content a {
  color: var(--color-link);
  font-weight: var(--weight-link);
  text-decoration: underline;
}

.article-content a:hover {
  color: var(--color-hover);
}

/* ===============================
   Lists
   =============================== */
.article-content ul,
.article-content ol {
  margin: 1em 1.5em;
}

/* ===============================
   Mobile
   =============================== */
@media (max-width: 600px) {
  .article-content {
    padding: 18px 20px;
    font-size: var(--font-article-mobile);
    line-height: var(--line-article-mobile);
  }
}