/* 文章版式（.article 一族，2026-09-26 UI v2）：一篇有标题、一段引言、更新日期、若干小节的长文，一种排法。
   用户：「about 页面、terms of service 页面、policy 页面都需要遵守这个 template，甚至包括之后 landing page 上
   展示的 articles、议题的 examples」。版面照用户给的 mockup（仿 OpenAI 帮助中心的文章页）：
     头部  大标题（两行以内）、下面一段浅墨的引言；更新日期靠右，压在一条横线上（引言、日期都可省）
     正文  一节一行：左栏是中标题，右栏是这一节的文字；窄屏上中标题叠在文字上面
   标题三级（用户 09-26）：
     大标题  .article-title  整篇一个
     中标题  .article-h      左栏；以后做成可折叠、并列进目录
     小标题  .article-sub    在正文栏里，紧贴它下面的段落，左边与正文对齐，粗体、比正文略大；
                             不折叠、不进目录。条款、隐私这类只有编号小节的稿件只用小标题，左栏空着
   文末小字 .article-note：标 * 的小字，放在整篇最后、正文栏里（条款、隐私开头那段适用范围的话就放这里）
   这是父类：公开站与 app 读同一份（公开站那一份由 scripts/sync_site_tokens.py 从 app 抄过去，勿手改那一份）。
   外观只读下面这几格与主题的格；页面只给内容，不另写样式。

   结构（每一篇都这样写）：
     <article class="article">
       <header class="article-head">
         <h1 class="article-title">…</h1>
         <p class="article-lede">…</p>          可省
         <p class="article-meta">…</p>          可省（更新日期）
       </header>
       <section class="article-sec">
         <h2 class="article-h">…</h2>            可省（没有中标题时正文仍在右栏）
         <div class="article-body">
           <h3 class="article-sub">…</h3>        可省
           <p> <ul> <ol> <a> <strong> <em>
         </div>
       </section> …
       <footer class="article-foot"><p class="article-note">…</p></footer>   可省
     </article> */

:root, .screen {
  --article-w: 980px;                      /* 整篇的宽（横线的长度），居中 */
  --article-col: 150px;                    /* 中标题那一栏＝正文往里缩的距离（用户 09-26：原来 285 缩得太多） */
  --article-text-w: 660px;                 /* 正文一行最长 */
  --article-title-fs: 36px;
  --article-h-fs: 28px;
  --article-sub-fs: var(--fs-title);       /* 小标题：比正文略大 */
  --article-lh: 1.55;                      /* 正文行高 */
  --article-para: 28px;                    /* 段与段之间（用户 09-26：行距收一点，段距放大） */
  --article-sub-gap: 44px;                 /* 小标题上面，与上一小节隔开 */
  --article-rule-w: 1px;                   /* 头部下面那条横线 */
  --article-top: 180px;                    /* 顶栏到标题（mockup 里标题上面留得很空） */
  --article-gap: 120px;                    /* 横线到第一节 */
  --article-sec-gap: 72px;                 /* 节与节之间 */
  --article-pad: 10px;                     /* 字比横线往里收一点（mockup 里标题与节标题都不贴着横线的两头） */
}
@media (max-width: 767px) {
  :root, .screen {
    --article-title-fs: 28px;
    --article-h-fs: 22px;
    --article-top: 40px;
    --article-gap: 48px;
    --article-sec-gap: 40px;
    --article-sub-gap: 32px;
    --article-pad: 0px;
  }
}

.article { max-width: var(--article-w); margin: 0 auto; padding: var(--article-top) 0 var(--article-gap); color: var(--ink); }

/* 头部 */
.article-head { padding: 0 var(--article-pad) 12px; border-bottom: var(--article-rule-w) solid var(--ink); }
.article-title {
  margin: 0; max-width: 600px;
  font: var(--fw-strong) var(--article-title-fs)/1.25 var(--ff-ui); letter-spacing: -0.01em;
  color: var(--ink);
}
.article-lede { margin: 16px 0 0; max-width: 570px; font: var(--fw-regular) var(--fs-body)/1.6 var(--ff-ui); color: var(--ink4); }
.article-lede a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.article-meta { margin: 40px 0 0; text-align: right; font: var(--fw-regular) var(--fs-note)/1.4 var(--ff-ui); color: var(--ink5); }

/* 小节：左栏中标题，右栏文字（小标题在文字里） */
.article-sec {
  display: grid; grid-template-columns: var(--article-col) minmax(0, 1fr);
  padding: 0 var(--article-pad); margin-top: var(--article-sec-gap);
}
.article-head + .article-sec { margin-top: var(--article-gap); }
.article-h { margin: 0; padding-right: 32px; font: var(--fw-strong) var(--article-h-fs)/1.25 var(--ff-ui); color: var(--ink); }
.article-body {
  grid-column: 2; max-width: var(--article-text-w);
  font: var(--fw-regular) var(--fs-body)/var(--article-lh) var(--ff-ui); color: var(--ink);
}
.article-body > * { margin: 0 0 var(--article-para); }
.article-body > :last-child { margin-bottom: 0; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li + li { margin-top: 8px; }
.article-sub { margin: var(--article-sub-gap) 0 6px; font: var(--fw-strong) var(--article-sub-fs)/1.35 var(--ff-ui); color: var(--ink); }
.article-body > .article-sub:first-child { margin-top: 0; }
.article-body strong { font-weight: var(--fw-strong); }
.article-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { text-decoration-thickness: 2px; }

/* 文末小字 */
.article-foot {
  display: grid; grid-template-columns: var(--article-col) minmax(0, 1fr);
  padding: 0 var(--article-pad); margin-top: var(--article-sec-gap);
}
.article-note {
  grid-column: 2; margin: 0; max-width: var(--article-text-w);
  font: var(--fw-regular) var(--fs-note)/1.6 var(--ff-ui); color: var(--ink4);
}
.article-note::before { content: "* "; }
.article-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .article-sec, .article-foot { grid-template-columns: minmax(0, 1fr); }
  .article-body, .article-note { grid-column: auto; }
  .article-h { padding-right: 0; margin-bottom: 12px; }
}