/*
 * 文章页排版。只作用于 main.article-v52，不碰全站样式。
 *
 * 数值**照交付包 article.css 抄**（那份才是设计定稿，我第一版自己拟了一套，
 * @amy-xiao 的评价是"非常 raw、字号差别很大、格式很乱"，原因就是没照设计走）：
 *   正文栏宽 730px · 正文 18px/1.95 · h1 46px · h2 30px(上间距 64px) · h3 23px
 *   手机 ≤600px：h1 31px · h2 25px · 正文 17px/1.9
 * 一处刻意偏离：**图片不满宽**。设计里图比正文栏宽，amy 要求"头图和配图都可以缩小"，
 * 所以图统一收到正文栏宽，整页就是干净的单栏。
 *
 * readability-v47.css 用 !important 锁死 body main 的 h1/h2/p 字号，
 * 所以这里的字号也必须带 !important，否则写了不生效。
 */
/* 标题里的英文与正文英文统一（@amy-xiao 2026-09-17，她拍了 03 段的 H2 为例）。
   站内 --serif 是 `Caslon, Songti SC, …`：拉丁字用 Caslon（衬线），而正文拉丁字是 DM（无衬线），
   所以标题里的 "03 FDE"、"AI" 和正文里的 "Palantir"、"Prompt" 看起来不是一套。
   做法：把正文那支拉丁字体 DM 放在栈首，CJK 仍然落到 Songti SC ——
   **只换英文，中文的衬线编辑感不动**（那是 @Amy-GTM 通过的设计基线）。 */
/* ARTICLE_HEADING_FONT */
main.article-v52 .article-body h1,
main.article-v52 .article-body h2,
main.article-v52 .article-body h3 {
  font-family: DM, 'Songti SC', 'Noto Serif SC', Georgia, serif;
}

main.article-v52 { padding: 24px 0 80px; }

main.article-v52 .article-body { max-width: 1000px; }

/* 正文、列表、标题都收在 730px 的栏宽里居中 */
main.article-v52 .article-body > p,
main.article-v52 .article-body > ul,
main.article-v52 .article-body > ol,
main.article-v52 .article-body > h2,
main.article-v52 .article-body > h3,
main.article-v52 .article-body > figure,
main.article-v52 .article-body > .article-meta { max-width: 730px; margin-inline: auto; }

main.article-v52 .article-body h1 {
  font-size: 46px !important;
  font-weight: 500;
  line-height: 1.35 !important;
  letter-spacing: -0.005em;
  margin: 16px 0 36px;
  overflow-wrap: anywhere;
}

main.article-v52 .article-body .article-meta { margin: 0 auto 8px; }
main.article-v52 .article-body .article-meta p {
  color: var(--muted);
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin: 0 0 10px !important;
  max-width: none;
}

main.article-v52 .article-body > p {
  font-size: 18px !important;
  line-height: 1.95 !important;
  margin: 22px auto !important;
}

main.article-v52 .article-body h2 {
  font-size: 30px !important;
  font-weight: 500;
  line-height: 1.55 !important;
  margin: 64px auto 26px;
}

main.article-v52 .article-body h3 {
  font-size: 23px !important;
  line-height: 1.5 !important;
  margin: 34px auto 20px;
}

main.article-v52 .article-body ul,
main.article-v52 .article-body ol {
  font-size: 18px !important;
  line-height: 1.95 !important;
  margin: 22px auto !important;
  padding-left: 26px;
}
main.article-v52 .article-body li { margin: 0 0 6px; }

/* 图：收到正文栏宽。图里已带毛玻璃质感，不要再加 CSS 模糊或阴影 */
main.article-v52 .article-body figure { margin: 38px auto; }
main.article-v52 .article-body figure img { display: block; width: 100%; height: auto; }
main.article-v52 .article-body figure.article-cover { margin: 8px auto 40px; }

main.article-v52 .article-back {
  display: block; max-width: 730px; margin: 0 auto 22px;
  font-size: 14px; color: var(--muted);
}
main.article-v52 .article-back:hover { color: var(--ink); }

@media (max-width: 600px) {
  main.article-v52 { padding: 16px 0 50px; }
  /* 交付基线是 31px，@amy-xiao 与 @Amy-GTM 2026-09-17 覆盖为 26px：31px 下英文标题六行，
     把封面和正文都挤出首屏。不靠压字距、也不缩内容栏，只降字号与行高。
     h2 跟着降到 22px，否则 26 对 25 层级就看不出来了（要求是"仍明显高于正文与后续 H2"）。 */
  main.article-v52 .article-body h1 { font-size: 26px !important; line-height: 1.28 !important; letter-spacing: normal; }
  main.article-v52 .article-body h2 { font-size: 22px !important; margin-top: 42px; }
  main.article-v52 .article-body h3 { font-size: 19px !important; }
  main.article-v52 .article-body > p,
  main.article-v52 .article-body ul,
  main.article-v52 .article-body ol { font-size: 17px !important; line-height: 1.9 !important; }
  main.article-v52 .article-body figure { margin: 28px auto; }
}

/* ---------------------------------------------------------------------------
 * 第二篇《公司会消亡》带来的新元素：副标题、引用块、图注、分隔线。
 * 数值取自交付包 article.css（那是设计定稿），颜色换成站内变量，
 * 免得文章页出现一套站外配色。第一篇没有这些元素，所以之前没写。
 * readability-v47 用 !important 锁了 body main 的 p 字号，图注要小字必须同样加 !important。
 */
main.article-v52 .article-body .article-subtitle {
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--muted);
  /* 2026-09-22：左右改 auto。原来是 0 且带 !important，导致摘要比正文左突 135px。 */
  margin: 0 auto 22px !important;
}

main.article-v52 .article-body blockquote {
  margin: 28px auto;
  max-width: 730px;
  padding: 18px 24px;
  background: #F1ECE3;
  border-left: 3px solid #AE825B;
}
main.article-v52 .article-body blockquote p { margin: 0 0 12px !important; }
main.article-v52 .article-body blockquote p:last-child { margin-bottom: 0 !important; }

main.article-v52 .article-body figcaption {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--muted);
  margin-top: 12px;
}

main.article-v52 .article-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px auto;
  max-width: 730px;
}

/* 正文图点开看原图：给个可点的提示，但不改变图片本身的完整显示 */
main.article-v52 .article-body figure a { display: block; }

@media (max-width: 600px) {
  main.article-v52 .article-body .article-subtitle { font-size: 16px !important; }
  main.article-v52 .article-body blockquote { padding: 14px 18px; margin: 22px auto; }
  main.article-v52 .article-body figcaption { font-size: 13px !important; }
}


/* ---------------------------------------------------------------------------
   图解放宽（第三篇 DSH 拆解，2026-09-21）

   交接文档：图解在宽屏下可放宽至 1120px，且必须完整按 16:9 显示、不裁切。
   11 张 2400x1350 的图里第 9、11 页很密集，塞进 730px 的正文栏看不清。
   正文栏宽本身不动 —— 只有带 id="figure-N" 的图解破栏。

   刻意不使用 100vw：它包含滚动条宽度，会造成横向溢出（横向溢出是发布硬门）。
   改成只在视口足够宽时放到固定 1120px。 */
@media (min-width: 1220px) {
  main.article-v52 .article-body > figure[id^="figure-"] {
    max-width: none;
    width: 1120px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* 图注跟随图宽，保持左对齐可读 */
main.article-v52 .article-body > figure[id^="figure-"] figcaption { max-width: 100%; }


/* ---------------------------------------------------------------------------
   2026-09-22 修排版错位（@amy-xiao 报「中英文排版都有 bug」）

   根因：上面那条把正文收在 730px 的规则是一份**白名单**（> p、> ul、> h2…）。
   凡是名单里没有的直接子元素，就会按 .article-body 的 1000px 铺开，于是：
     - h1 与 .article-subtitle 一直是 1000px / 未居中（三篇文章都有，属旧问题）；
     - 第三篇交付包用 <section class="callout"> / <section class="quote"> 包信息框，
       两者都不在名单里 → 整块左移，块内文字也跟着错位（截图里的 Wait/Work/Leave）。

   白名单这种写法的问题是：**每来一种新标签就会再漏一次**。所以改成反过来 ——
   默认所有直接子元素都收在栏宽里，只有确实要破栏的（图解）显式放宽。 */
main.article-v52 .article-body > * {
  max-width: 730px;
  margin-inline: auto;
}

/* 信息框与引用块：交付包用的是 .callout / .quote。
   底色与左边框沿用本站 blockquote 已有的一套（#F1ECE3 / #AE825B），
   而不是把交付预览页的第二套配色也搬进来 —— 站内只保留一种视觉语言。 */
main.article-v52 .article-body section.callout,
main.article-v52 .article-body section.quote {
  margin: 28px auto;
  padding: 18px 24px;
  background: #F1ECE3;
  border-radius: 3px;
}
main.article-v52 .article-body section.quote { border-left: 3px solid #AE825B; }
main.article-v52 .article-body section.callout > p,
main.article-v52 .article-body section.quote > p {
  max-width: none !important;
  margin: 0 0 12px !important;
}
main.article-v52 .article-body section.callout > p:last-child,
main.article-v52 .article-body section.quote > p:last-child { margin-bottom: 0 !important; }

main.article-v52 .article-body pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #F7F5F0;
  border: 1px solid #E3DED3;
  border-radius: 4px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 600px) {
  main.article-v52 .article-body section.callout,
  main.article-v52 .article-body section.quote { padding: 14px 18px; margin: 22px auto; }
}

/* h1 与 .article-subtitle 自己的 margin 简写（margin: 16px 0 36px）把左右边距写成了 0，
   特异性又高于上面的 `> *`，所以它们虽然被收到 730px 却仍然靠左、和正文差 135px。
   这是截图里标题比正文突出去一块的原因，三篇文章都有。 */
main.article-v52 .article-body > h1 { margin-inline: auto; }

/* 文章末尾回链到相关视频（2026-09-23） */
main.article-v52 .article-body > .article-related { margin: 34px auto 0; font-size: 16px; }