.article-content {
  color: var(--ink-900);
  font-family: var(--font-reading);
  font-size: 18px;
  line-height: 1.92;
  overflow-wrap: anywhere;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.45;
  scroll-margin-top: 110px;
}

.article-content h1 { margin: 0 0 0.9em; font-size: 1.92em; }
.article-content h2 { margin: 2.15em 0 0.72em; font-size: 1.62em; }
.article-content h3 { margin: 1.75em 0 0.66em; font-size: 1.3em; }
.article-content h4 { margin: 1.5em 0 0.6em; font-size: 1.1em; }

.article-content p,
.article-content ul,
.article-content ol {
  margin-top: 0;
  margin-bottom: 1.35em;
}

.article-content li + li { margin-top: 0.35em; }

.article-content a {
  color: var(--cyan-700);
  text-decoration: underline;
  text-decoration-color: rgba(47, 102, 105, 0.34);
  text-underline-offset: 4px;
}

.article-content blockquote {
  margin: 1.7em 0 1.85em;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-left: 3px solid var(--jade-400);
  border-radius: 0 15px 15px 0;
  color: var(--ink-700);
  background: rgba(231, 245, 243, 0.62);
  line-height: 1.88;
}

.article-content blockquote > :first-child { margin-top: 0; }
.article-content blockquote > :last-child { margin-bottom: 0; }

.article-content img {
  height: auto;
  margin: 1.8em auto;
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(40, 73, 78, 0.12);
}

.article-content code {
  padding: 0.12em 0.38em;
  border: 1px solid rgba(61, 102, 106, 0.1);
  border-radius: 7px;
  color: var(--cyan-700);
  background: rgba(222, 238, 238, 0.72);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.article-content pre {
  max-width: 100%;
  margin: 1.7em 0;
  padding: 18px 20px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 18px;
  background: rgba(231, 240, 241, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.article-content pre code,
.article-content pre code.hljs {
  padding: 0;
  border: 0;
  color: #23383e;
  background: transparent;
  font-size: 0.88em;
}

.article-content hr {
  height: 1px;
  margin: 2.2em 0;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(57, 120, 122, 0.28), transparent);
}

@media (max-width: 640px) {
  .article-content { font-size: 16.5px; line-height: 1.86; }
  .article-content pre { padding: 15px 16px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-content { scroll-behavior: auto; }
}

.post-page .article-content {
  font-size: var(--reading-size, 18px);
  font-family: var(--reading-font, var(--font-reading));
}
html[data-theme="dark"] .article-content pre, html[data-theme="dark"] .article-content blockquote {
  border-color: var(--line-cool); background: var(--sky-200); box-shadow: none; color: var(--ink-700);
}
html[data-theme="dark"] .article-content pre code,
html[data-theme="dark"] .article-content pre code.hljs { color: var(--ink-900); }
html[data-theme="dark"] .article-content :not(pre) > code { background: var(--sky-200); color: var(--cyan-700); }