<!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>
<meta name="author" content="{{作者}}">
<meta name="description" content="{{摘要}}">
<meta name="keywords" content="{{关键词}}">
<meta name="generator" content="Kami">
<style>
  /* Regular weight */
  @font-face {
    font-family: "TsangerJinKai02";
    src: url("../fonts/TsangerJinKai02-W04.ttf") format("truetype"),
       url("https://cdn.jsdelivr.net/gh/tw93/Kami@main/assets/fonts/TsangerJinKai02-W04.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
  }

  /* Bold weight - W05 for all bold variants */
  @font-face {
    font-family: "TsangerJinKai02";
    src: url("../fonts/TsangerJinKai02-W05.ttf") format("truetype"),
       url("https://cdn.jsdelivr.net/gh/tw93/Kami@main/assets/fonts/TsangerJinKai02-W05.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
  }

  @page {
    size: A4;
    margin: 15mm 18mm 15mm 18mm;
    background: #f5f4ed;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --parchment: #f5f4ed;
    --ivory:     #faf9f5;
    --near-black:#141413;
    --dark-warm: #3d3d3a;
    --olive:     #504e49;
    --stone:     #6b6a64;
    --brand:     #1B365D;
    --border:    #e8e6dc;
    --border-soft:#e5e3d8;
    --tag-bg:    #E4ECF5;
    --serif: "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", Georgia, serif;
    --sans: var(--serif);
  }

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

  @media screen {
    body { max-width: 210mm; margin: 0 auto; padding: 15mm 18mm; }
  }

  body {
    color: var(--near-black);
    font-family: var(--serif);
    font-size: 10pt;
    line-height: 1.45;
    letter-spacing: 0.3pt;
  }

  .serif {
    font-family: var(--serif);
  }

  /* ========== HEADER ========== */
  .header {
    margin-bottom: 16pt;
    padding-bottom: 12pt;
    border-bottom: 0.5pt solid var(--border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20pt;
  }
  .title-block {
    flex: 1;
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7pt;
    font-size: 9pt;
    color: var(--brand);
    letter-spacing: 1.5pt;
    text-transform: uppercase;
    margin-bottom: 7pt;
    font-weight: 500;
  }
  .eyebrow::before {
    content: "";
    width: 8pt;
    height: 1.5pt;
    border-radius: 0.75pt;
    background: var(--brand);
    flex-shrink: 0;
  }
  /* CN locale tuning: TsangerJinKai glyphs are wider per character, so H1 sits
     slightly smaller (24pt vs EN 26pt) with looser leading (1.15 vs EN 1.12)
     to keep optical density aligned across the two locales. */
  h1 {
    font-family: var(--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: 9pt;
    color: var(--stone);
    text-align: right;
    line-height: 1.45;
    white-space: nowrap;
  }
  /* 品牌 logo 槽(可选,来自 brand profile;默认无 logo,样式仅在取消注释后生效)。 */
  .brand-logo {
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    align-self: flex-start;
  }

  /* ========== 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: var(--serif);
    font-size: 20pt;
    font-weight: 500;
    color: var(--brand);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: -0.2pt;
  }
  .metric-label {
    font-size: 9pt;
    color: var(--olive);
    line-height: 1.3;
    white-space: nowrap;
  }

  /* ========== SECTIONS ========== */
  /* PRODUCT SHOT (optional) - one real screenshot as the page's visual anchor.
     Uncomment the <figure> in the body, point src at a local image, and tune
     .frame height to fill the page. object-fit trims dead margin, not the window. */
  .product-shot { margin-bottom: 16pt; break-inside: avoid; }
  .product-shot .frame {
    height: 110mm;
    overflow: hidden;
    border-radius: 5pt;
    box-shadow: 0 1.5pt 6pt rgba(20, 20, 19, 0.16);
  }
  .product-shot .frame img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
  }
  .product-shot figcaption {
    margin-top: 7pt; font-size: 8.5pt;
    color: var(--stone); line-height: 1.45; text-align: center;
  }
  .product-shot figcaption .hl { color: var(--brand); font-weight: 500; }

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

  h2 {
    font-family: var(--serif);
    font-size: 16pt;
    font-weight: 500;
    color: var(--near-black);
    margin-bottom: 6pt;
  }
  h2 .sub {
    font-size: 9pt;
    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 {
    margin: 0;
    padding-left: 16pt;
  }
  ul.dash li {
    margin-bottom: 5pt;
    line-height: 1.45;
  }
  ul.dash li:last-child { margin-bottom: 0; }
  ul.dash li::marker { color: var(--brand); }

  /* ========== Timeline (横向进度点) ========== */
  .timeline {
    display: flex;
    gap: 12pt;
    margin-top: 6pt;
  }
  .tl-step {
    flex: 1;
    break-inside: avoid;
  }
  .tl-year {
    font-family: var(--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: 9pt;
    color: var(--olive);
    line-height: 1.4;
  }

  /* ========== Tag ========== */
  .tag {
    display: inline-block;
    background: var(--tag-bg);    /* 实色！不要 rgba */
    color: var(--brand);
    font-size: 9pt;
    font-weight: 500;
    padding: 1pt 5pt;
    border-radius: 3pt;
    letter-spacing: 0.3pt;
    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); }

  /* ========== TABLE (kami-table) ========== */
  table, .kami-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
    margin: 8pt 0;
    break-inside: avoid;
  }
  table th, .kami-table th {
    text-align: left;
    font-weight: 500;
    color: var(--dark-warm);
    padding: 4pt 6pt;
    border-bottom: 1pt solid var(--border);
    background: transparent;
  }
  table td, .kami-table td {
    padding: 3pt 6pt;
    border-bottom: 0.3pt solid var(--border-soft);
    vertical-align: top;
  }
  table.compact th, .kami-table.compact th { padding: 2pt 5pt; font-size: 8pt; }
  table.compact td, .kami-table.compact td { padding: 1pt 5pt; font-size: 8pt; line-height: 1.4; }
  table.financial td:not(:first-child), .kami-table.financial td:not(:first-child) {
    text-align: right; font-variant-numeric: tabular-nums;
  }
  table.financial th:not(:first-child), .kami-table.financial th:not(:first-child) { text-align: right; }
  table.striped tbody tr:nth-child(even) td, .kami-table.striped tbody tr:nth-child(even) td {
    background: var(--ivory);
  }
  table .total td, .kami-table .total td {
    font-weight: 500; border-top: 1pt solid var(--brand); border-bottom: none; color: var(--near-black);
  }

  /* ========== FOOTER ========== */
  .footer {
    margin-top: 18pt;
    padding-top: 6pt;
    border-top: 0.3pt dotted var(--border);
    font-size: 9pt;
    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>
  <!-- 品牌 logo 槽(可选,来自 brand profile 的 logo 字段)。无 logo 时保持注释,勿插破图。
       有 logo 时取消注释,把 src 换成已展开的本地绝对路径:
  <img class="brand-logo" src="/absolute/path/to/logo.svg" alt=""> -->
</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>

<!-- ========== 核心内容（两栏） ========== -->
<!-- Optional hero product shot. Uncomment, point src at a local screenshot, and
     tune .frame height (in the CSS) so the page fills without overflowing.
<figure class="product-shot">
  <div class="frame"><img src="{{SCREENSHOT_PATH}}" alt="{{ALT_TEXT}}"></div>
  <figcaption>{{One-line caption that adds a fact, not a restatement.}}</figcaption>
</figure>
-->

<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>
