/* v2: make the article hero card the real reading card. Do not touch typography. */
.yiyu-article-reading-card {
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(221, 226, 236, 0.72) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 24px 80px -54px rgba(15, 23, 42, 0.46) !important;
}

.yiyu-article-reading-card .yiyu-article-card-separator {
  display: block;
  height: 1px;
  margin: 0 clamp(1rem, 4.6vw, 2rem);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(148, 163, 184, 0.30),
    rgba(78, 91, 196, 0.24),
    rgba(148, 163, 184, 0.30),
    transparent
  );
}

.yiyu-article-reading-card .yiyu-article-card-body {
  padding: clamp(1.5rem, 4.6vw, 2.6rem) clamp(1.15rem, 5.1vw, 2.45rem) clamp(2rem, 5vw, 3rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.78));
}

.yiyu-article-reading-card .yiyu-article-card-body > :first-child {
  margin-top: 0 !important;
}

.yiyu-article-reading-card .yiyu-article-card-body > :last-child {
  margin-bottom: 0 !important;
}

.yiyu-article-reading-card .yiyu-ai-illustration-section {
  margin-bottom: clamp(2rem, 5vw, 3rem) !important;
}

.yiyu-article-reading-card article.prose {
  max-width: none !important;
}

#article-content.yiyu-article-content-moved {
  padding-top: clamp(1.75rem, 5vw, 3rem) !important;
}

@media (max-width: 640px) {
  .yiyu-article-reading-card {
    border-radius: 24px !important;
  }

  .yiyu-article-reading-card .yiyu-article-card-separator {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .yiyu-article-reading-card .yiyu-article-card-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}