/* 正文长文排版 — 只作用于 .entry-content
   ============================================================ */

.reading { padding-block: var(--sp-8) var(--sp-9); }

.article-frame {
  max-width: var(--w-prose);
  margin-inline: auto;
}

.article-head {
  max-width: var(--w-prose);
  margin-inline: auto;
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--rule);
}
.article-frame .article-head { max-width: none; margin-inline: 0; }

/* 文章页：与首页同宽的分栏骨架 */
.article-split { align-items: start; }
.article-split .article-main { min-width: 0; }
.article-split .article-head { max-width: none; margin-inline: 0; }
.article-split .article-foot { max-width: none; margin-inline: 0; }
.side-toc .toc { margin-top: calc(var(--sp-2) * -1); }

.article-title {
  font-size: var(--fs-display);
  margin-block: var(--sp-4) var(--sp-5);
  text-wrap: balance;
}

.article-title::before {
  content: "H1"; content: "H1" / "";
  display: inline-block;
  margin-right: 0.4em;
  padding: 0.3em 0.55em 0.24em;
  vertical-align: 0.8em;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--paper-raised);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-xs);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  color: var(--ink-faint);
}
.article-meta .dot { color: var(--rule-strong); }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
  max-width: var(--w-prose);
  margin-inline: auto;
}
.article-frame .article-layout { max-width: none; margin-inline: 0; }

.toc { list-style: none; font-size: var(--fs-200); line-height: 1.6; }
.toc li { padding-block: 7px; }
.toc a {
  color: var(--ink-muted);
  text-decoration: none;
  display: block;
  padding-left: var(--sp-3);
  border-left: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--accent); border-left-color: var(--accent); }
.toc .toc-h3 a { padding-left: var(--sp-5); font-size: 0.78rem; }

.entry-content .hero-figure {
  width: min(100%, 45rem);
  margin: 0 auto var(--sp-6);
}
.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--paper-sunken);
}
.entry-content > .hero-figure + p,
.entry-content > #ftwp-postcontent > .hero-figure + p { margin-top: 0; }

.hero-figure figcaption,
.entry-content figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-200);
  line-height: 1.7;
  color: var(--ink-faint);
  text-align: center;
}

/* ---------- 正文 ---------- */

.entry-content {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  line-height: var(--lh-prose);
  color: var(--ink-body);
  overflow-wrap: break-word;
}

.entry-content > * + *,
.entry-content > #ftwp-postcontent > * + * { margin-top: 1.35em; }

.entry-content p { text-align: justify; text-justify: inter-ideograph; }

/* ---------- 标题层级：显式 H1–H6 标识 ---------- */
/* Fixed TOC 会把正文包进 #ftwp-postcontent，两种层级都要命中；
   目录插件自身的 UI 位于 #ftwp-container-outer，不受影响。 */

.entry-content > :is(h1, h2, h3, h4, h5, h6),
.entry-content > #ftwp-postcontent > :is(h1, h2, h3, h4, h5, h6) {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.entry-content > :is(h1, h2, h3, h4, h5, h6)::before,
.entry-content > #ftwp-postcontent > :is(h1, h2, h3, h4, h5, h6)::before {
  display: inline-block;
  margin-right: 0.65em;
  padding: 0.24em 0.48em 0.2em;
  vertical-align: 0.16em;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: var(--r-xs);
}

.entry-content > h1::before,
.entry-content > #ftwp-postcontent > h1::before { content: "H1"; content: "H1" / ""; }
.entry-content > h2::before,
.entry-content > #ftwp-postcontent > h2::before { content: "H2"; content: "H2" / ""; }
.entry-content > h3::before,
.entry-content > #ftwp-postcontent > h3::before { content: "H3"; content: "H3" / ""; }
.entry-content > h4::before,
.entry-content > #ftwp-postcontent > h4::before { content: "H4"; content: "H4" / ""; }
.entry-content > h5::before,
.entry-content > #ftwp-postcontent > h5::before { content: "H5"; content: "H5" / ""; }
.entry-content > h6::before,
.entry-content > #ftwp-postcontent > h6::before { content: "H6"; content: "H6" / ""; }

.entry-content > h1,
.entry-content > h2,
.entry-content > #ftwp-postcontent > h1,
.entry-content > #ftwp-postcontent > h2 {
  margin-top: 2.4em;
  padding-top: 1.1em;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-700);
  letter-spacing: var(--ls-title);
}
.entry-content > h1,
.entry-content > #ftwp-postcontent > h1 { font-size: var(--fs-800); }
.entry-content > :is(h1, h2)::before,
.entry-content > #ftwp-postcontent > :is(h1, h2)::before {
  color: var(--paper-raised);
  background: var(--accent);
  border-color: var(--accent);
}
.entry-content > h1::after,
.entry-content > h2::after,
.entry-content > #ftwp-postcontent > h1::after,
.entry-content > #ftwp-postcontent > h2::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--accent);
}

.entry-content > h3,
.entry-content > #ftwp-postcontent > h3 {
  margin-top: 2em;
  margin-left: var(--sp-3);
  font-size: var(--fs-600);
  font-weight: 600;
  line-height: 1.55;
}
.entry-content > h3::before,
.entry-content > #ftwp-postcontent > h3::before {
  color: var(--accent);
  background: var(--paper-raised);
  border-color: var(--accent);
}

.entry-content > h4,
.entry-content > #ftwp-postcontent > h4 {
  margin-top: 1.8em;
  margin-left: var(--sp-5);
  font-size: var(--fs-500);
  font-weight: 600;
  line-height: 1.6;
}
.entry-content > h4::before,
.entry-content > #ftwp-postcontent > h4::before {
  color: var(--ink-muted);
  background: var(--paper-sunken);
  border-color: var(--rule-strong);
}

.entry-content > h5,
.entry-content > #ftwp-postcontent > h5 {
  margin-top: 1.6em;
  margin-left: var(--sp-6);
  font-size: var(--fs-400);
  font-weight: 600;
  line-height: 1.65;
}
.entry-content > h5::before,
.entry-content > #ftwp-postcontent > h5::before {
  color: var(--ink-muted);
  border-color: var(--rule-strong);
}

.entry-content > h6,
.entry-content > #ftwp-postcontent > h6 {
  margin-top: 1.5em;
  margin-left: var(--sp-7);
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink-muted);
}
.entry-content > h6::before,
.entry-content > #ftwp-postcontent > h6::before {
  color: var(--ink-muted);
  border-color: var(--rule-strong);
}

.entry-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(158, 43, 37, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.entry-content a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

.entry-content strong { color: var(--ink); font-weight: 700; }
.entry-content em { font-style: italic; }

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: 0.55em; }
.entry-content ul li::marker { color: var(--rule-strong); }
.entry-content ol li::marker { color: var(--ink-muted); font-family: var(--font-mono); font-size: 0.85em; }

/* 首段：加大 + 首字下沉（有特色图时首段跟在图后） */
.entry-content > p:first-child,
.entry-content > #ftwp-postcontent > p:first-child,
.entry-content > .hero-figure + p,
.entry-content > #ftwp-postcontent > .hero-figure + p {
  font-size: 1.1875rem;
  line-height: 1.95;
  color: var(--ink);
}
.entry-content > p:first-child::first-letter,
.entry-content > #ftwp-postcontent > p:first-child::first-letter,
.entry-content > .hero-figure + p::first-letter,
.entry-content > #ftwp-postcontent > .hero-figure + p::first-letter {
  float: left;
  font-size: 3.6em;
  line-height: 0.86;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent);
  font-weight: 700;
}

.entry-content blockquote {
  position: relative;
  margin: 2em 0;
  padding: var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-7);
  background: var(--paper-sunken);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1.0625rem;
  line-height: 1.95;
  color: var(--ink-body);
}
.entry-content blockquote > * + * { margin-top: 0.8em; }
.entry-content blockquote p { text-align: left; }
.entry-content blockquote cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-style: normal;
  color: var(--ink-muted);
}

.entry-content hr {
  height: 1px;
  margin: 3em auto;
  width: 30%;
  border: 0;
  background: var(--rule-strong);
}

.entry-content code {
  font-family: var(--font-mono);
  font-size: 0.855em;
  padding: 0.15em 0.4em;
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  color: var(--accent-hover);
}

.entry-content pre {
  position: relative;
  overflow-x: auto;
  padding: var(--sp-5);
  background: var(--paper-dark);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: #e8e2d6;
  tab-size: 2;
}
.entry-content pre code {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font-size: inherit;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: 1.7;
}
.entry-content th,
.entry-content td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.entry-content thead th {
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--rule-strong);
}
.entry-content tbody tr:hover { background: rgba(242, 237, 227, 0.5); }

.entry-content img {
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
}
.entry-content figure { margin-block: 2em; }
.entry-content figure img { width: 100%; }

.entry-content .wp-caption-text,
.entry-content .wp-element-caption {
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-200);
  color: var(--ink-faint);
}

.entry-content .alignwide { width: 100%; }
.entry-content .alignfull { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
.entry-content .aligncenter { display: block; margin-inline: auto; }
.entry-content .alignleft { float: left; margin: 0.4em 1.5em 1em 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 0.4em 0 1em 1.5em; max-width: 50%; }

/* 目录插件兼容：已有 fixed-toc 时不让其破坏版式 */
.entry-content .toc-container,
.entry-content #toc_container { font-family: var(--font-body); font-size: var(--fs-300); }

/* 关键结论块（可选标记 .takeaway） */
.entry-content .takeaway {
  padding: var(--sp-5) var(--sp-6);
  background: var(--accent-tint);
  border: 1px solid rgba(158, 43, 37, 0.18);
  border-radius: var(--r-md);
  font-size: var(--fs-300);
  line-height: 1.9;
  color: var(--ink-body);
}

/* ---------- 文末 ---------- */

.article-foot {
  max-width: var(--w-prose);
  margin: var(--sp-9) auto 0;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.article-tags .label {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: var(--sp-2);
}
.article-tags a {
  padding: 5px 11px;
  font-size: var(--fs-200);
  color: var(--ink-muted);
  background: var(--paper-sunken);
  border-radius: var(--r-xs);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.article-tags a:hover { color: var(--accent); background: var(--accent-tint); }

.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.post-nav a {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.post-nav a:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.post-nav .dir {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.post-nav .t {
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
.post-nav .next { text-align: right; align-items: flex-end; }

.related { margin-top: var(--sp-8); }
.related-list { list-style: none; display: grid; gap: 0; }
.related-list li { border-bottom: 1px solid var(--rule); }
.related-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  text-decoration: none;
}
.related-list .t {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  transition: color var(--t-fast);
}
.related-list a:hover .t { color: var(--accent); }
.related-list time {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--ink-faint);
}

@media (max-width: 640px) {
  .entry-content { font-size: 1rem; line-height: 2; }
  .entry-content > p:first-child::first-letter,
  .entry-content > #ftwp-postcontent > p:first-child::first-letter,
  .entry-content > .hero-figure + p::first-letter,
  .entry-content > #ftwp-postcontent > .hero-figure + p::first-letter { font-size: 3.1em; }
  .entry-content > h3,
  .entry-content > #ftwp-postcontent > h3 { margin-left: var(--sp-2); }
  .entry-content > h4,
  .entry-content > #ftwp-postcontent > h4 { margin-left: var(--sp-4); }
  .entry-content > h5,
  .entry-content > #ftwp-postcontent > h5 { margin-left: var(--sp-5); }
  .entry-content > h6,
  .entry-content > #ftwp-postcontent > h6 { margin-left: var(--sp-6); }
  .entry-content blockquote { padding: var(--sp-4) var(--sp-5); margin-inline: 0; }
  .entry-content .alignleft,
  .entry-content .alignright { float: none; max-width: 100%; margin-inline: 0; }
  .post-nav { grid-template-columns: minmax(0, 1fr); }
  .post-nav .next { text-align: left; align-items: flex-start; }
}