<!DOCTYPE html>
<!-- ==================================================================
     ONE-PAGER TEMPLATE · parchment design system
     单页 A4 方案/报告/执行摘要
     改完跑：python3 -c "from weasyprint import HTML; HTML('one-pager.html').write_pdf('out.pdf')"
     目标：页数必须 == 1
     ================================================================== -->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{文档标题}}</title>
<style>
    @page {
    size: A4;
    margin: 15mm 18mm 15mm 18mm;
    background: #f5f4ed;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --parchment: #f5f4ed;
    --ivory:     #faf9f5;
    --sand:      #e8e6dc;
    --near-black:#141413;
    --dark-warm: #3d3d3a;
    --charcoal:  #4d4c48;
    --olive:     #5e5d59;
    --stone:     #87867f;
    --brand:     #1B365D;
    --border:    #e8e6dc;
    --border-soft:#e5e3d8;
    --tag-bg:    #E4ECF5;
  }

  html, body { background: var(--parchment); }

  body {
    color: var(--near-black);
    font-family: "Source Han Serif SC",
                 "Noto Serif CJK SC", "Songti SC", Georgia, serif;
    font-size: 10pt;
    line-height: 1.45;
  }

  .serif {
    font-family: "Source Han Serif SC",
                 "Noto Serif CJK SC", "Songti SC", Georgia, serif;
  }

  /* ========== HEADER ========== */
  .header {
    border-left: 2.5pt solid var(--brand);
    border-radius: 1.5pt;
    padding-left: 8pt;
    margin-bottom: 14pt;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20pt;
  }
  .title-block {
    flex: 1;
  }
  .eyebrow {
    font-size: 8.5pt;
    color: var(--brand);
    letter-spacing: 0.5pt;
    text-transform: uppercase;
    margin-bottom: 4pt;
  }
  h1 {
    font-family: "Source Han Serif SC",
                 "Noto Serif CJK SC", Georgia, serif;
    font-size: 24pt;
    font-weight: 500;
    color: var(--near-black);
    line-height: 1.15;
    margin-bottom: 5pt;
  }
  .subtitle {
    font-size: 11pt;
    color: var(--olive);
    line-height: 1.4;
  }
  .meta {
    font-size: 8.5pt;
    color: var(--stone);
    text-align: right;
    line-height: 1.45;
    white-space: nowrap;
  }

  /* ========== METRICS ========== */
  /* 横向 baseline 布局 —— 和 resume.html 一致的 kami native 姿态。
     背景透明、无边框，用 typography 本身承担层次，不加容器。 */
  .metrics {
    display: flex;
    gap: 14pt;
    margin-bottom: 18pt;
    padding: 4pt 0 6pt 0;
    border-bottom: 0.3pt dotted var(--border);
  }
  .metric {
    flex: 1;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 4pt;
    break-inside: avoid;
  }
  .metric-value {
    font-family: "Source Han Serif SC", Georgia, serif;
    font-size: 20pt;
    font-weight: 500;
    color: var(--brand);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2pt;
  }
  .metric-label {
    font-size: 8.5pt;
    color: var(--olive);
    line-height: 1.3;
  }

  /* ========== SECTIONS ========== */
  section { margin-bottom: 18pt; break-inside: avoid; }
  section:last-of-type { margin-bottom: 0; }

  h2 {
    font-family: "Source Han Serif SC", Georgia, serif;
    font-size: 13pt;
    font-weight: 500;
    color: var(--near-black);
    margin-bottom: 6pt;
    border-left: 2.5pt solid var(--brand);
    border-radius: 1.5pt;
    padding-left: 8pt;
  }
  h2 .sub {
    font-size: 8.5pt;
    color: var(--stone);
    font-weight: 400;
    margin-left: 6pt;
  }

  p { margin-bottom: 6pt; line-height: 1.45; }
  p:last-child { margin-bottom: 0; }

  .lead {
    font-size: 12pt;
    line-height: 1.5;
    color: var(--dark-warm);
    margin-bottom: 14pt;
  }

  .hl { color: var(--brand); font-weight: 500; }

  /* ========== 2-column grid ========== */
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18pt;
  }

  /* ========== 短横线 list（代替默认 bullet） ========== */
  ul.dash {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  ul.dash li {
    position: relative;
    padding-left: 14pt;
    margin-bottom: 4pt;
    line-height: 1.45;
  }
  ul.dash li::before {
    content: "\2013";
    position: absolute;
    left: 0;
    color: var(--brand);
  }

  /* ========== Timeline (横向进度点) ========== */
  .timeline {
    display: flex;
    gap: 12pt;
    margin-top: 6pt;
  }
  .tl-step {
    flex: 1;
    break-inside: avoid;
  }
  .tl-year {
    font-family: "Source Han Serif SC", Georgia, serif;
    font-size: 11pt;
    font-weight: 500;
    color: var(--brand);
    margin-bottom: 2pt;
  }
  .tl-head {
    font-size: 10pt;
    font-weight: 500;
    color: var(--near-black);
    margin-bottom: 2pt;
  }
  .tl-body {
    font-size: 8.5pt;
    color: var(--olive);
    line-height: 1.4;
  }

  /* ========== Tag ========== */
  .tag {
    display: inline-block;
    background: var(--tag-bg);    /* 实色！不要 rgba */
    color: var(--brand);
    font-size: 7.5pt;
    font-weight: 500;
    padding: 1pt 5pt;
    border-radius: 3pt;
    letter-spacing: 0.1pt;
    margin-right: 3pt;
  }

  /* ========== Callout / 高亮块 ========== */
  /* 参考 resume.html .team-culture：透明底 + 单左侧 brand 竖条。
     不做容器也不做圆角，气质是"一条旁注"而不是"一个卡片"。 */
  .callout {
    background: transparent;
    border-left: 1.8pt solid var(--brand);
    padding: 4pt 0 4pt 14pt;
    margin: 10pt 0;
    font-size: 10pt;
    line-height: 1.5;
    color: var(--olive);
    break-inside: avoid;
  }
  .callout .hl, .callout .em-brand { color: var(--brand); }

  /* ========== FOOTER ========== */
  .footer {
    margin-top: 18pt;
    padding-top: 6pt;
    border-top: 0.3pt dotted var(--border);
    font-size: 8pt;
    color: var(--stone);
    display: flex;
    justify-content: space-between;
    letter-spacing: 0.3pt;
  }
</style>
</head>
<body>

<!-- ========== HEADER ========== -->
<div class="header">
  <div class="title-block">
    <div class="eyebrow">{{EYEBROW · 如 "产品方案" / "项目提案" / "执行摘要"}}</div>
    <h1>{{文档主标题（serif，2 行内，动词+名词结构最好）}}</h1>
    <div class="subtitle">{{一行副标题 / 一句核心论点}}</div>
  </div>
  <div class="meta">
    {{作者名}}<br>
    {{日期 YYYY.MM.DD}}<br>
    {{版本号 / 状态}}
  </div>
</div>

<!-- ========== METRICS（可选，3-4 卡最佳） ========== -->
<div class="metrics">
  <div class="metric">
    <div class="metric-value">{{数字}}</div>
    <div class="metric-label">{{标签描述}}</div>
  </div>
  <div class="metric">
    <div class="metric-value">{{数字}}</div>
    <div class="metric-label">{{标签描述}}</div>
  </div>
  <div class="metric">
    <div class="metric-value">{{数字}}</div>
    <div class="metric-label">{{标签描述}}</div>
  </div>
  <div class="metric">
    <div class="metric-value">{{数字}}</div>
    <div class="metric-label">{{标签描述}}</div>
  </div>
</div>

<!-- ========== LEAD（导语，一段） ========== -->
<p class="lead">
  {{一段 40-60 字的核心论点导语。用「<span class="hl">关键词</span>」高亮重点。这段定调整个文档。}}
</p>

<!-- ========== 核心内容（两栏） ========== -->
<div class="two-col">
  <section>
    <h2>{{section 标题 1}}</h2>
    <p>{{这里写 1-2 句段落，展开论点。}}</p>
    <ul class="dash">
      <li>{{短 bullet：数据/观察/判断}}</li>
      <li>{{短 bullet：带 <span class="hl">关键数字</span> 的论据}}</li>
      <li>{{短 bullet}}</li>
    </ul>
  </section>

  <section>
    <h2>{{section 标题 2}}</h2>
    <p>{{1-2 句段落。}}</p>
    <ul class="dash">
      <li>{{短 bullet}}</li>
      <li>{{短 bullet}}</li>
      <li>{{短 bullet}}</li>
    </ul>
  </section>
</div>

<!-- ========== Timeline / Roadmap（可选） ========== -->
<section>
  <h2>时间线 / 路线图<span class="sub">（适用于方案类文档）</span></h2>
  <div class="timeline">
    <div class="tl-step">
      <div class="tl-year">阶段 1</div>
      <div class="tl-head">{{阶段标题}}</div>
      <div class="tl-body">{{一句解释}}</div>
    </div>
    <div class="tl-step">
      <div class="tl-year">阶段 2</div>
      <div class="tl-head">{{阶段标题}}</div>
      <div class="tl-body">{{一句解释}}</div>
    </div>
    <div class="tl-step">
      <div class="tl-year">阶段 3</div>
      <div class="tl-head">{{阶段标题}}</div>
      <div class="tl-body">{{一句解释}}</div>
    </div>
  </div>
</section>

<!-- ========== CALLOUT（可选）========== -->
<div class="callout">
  {{关键引用 / 重要提示 / 核心 takeaway。比正文更需要引起注意的内容放这里。}}
</div>

<!-- ========== FOOTER ========== -->
<div class="footer">
  <span>{{机密级别 / 内部 / 公开 等}}</span>
  <span>{{页码 / 联系方式}}</span>
</div>

</body>
</html>
