feat: IMAP mail sync with thread-to-contact matching (PRD §6.1)

Real IMAP connection via imapflow library:
- Connects to IMAP server (IMAPFlow, TLS on port 993)
- Fetches recent messages (configurable limit, default 20)
- Extracts: from, fromEmail, subject, date, snippet (200 chars)
- Thread-to-contact matching (PRD §6.1):
  1. Match sender email against persons table
  2. If no person match, extract domain and match against company.website
  3. Returns matchedCompany + matchedPerson for each email
- Audit-logged (action: crm.mailsync:imap)
- Zod validated (host, port, user, password, folder, limit)
- 502 on IMAP connection failure with detail
- 400 on validation failure

Tested: invalid creds → 502 'IMAP connection failed', missing host → 400

skills/design/design-templates/html-ppt-xhs-post/SKILL.md

@@ -0,0 +1,85 @@
+---
+name: html-ppt-xhs-post
+description: 小红书 (XHS) 3:4 vertical cover template — two voices: spring/lifestyle soft watercolor cover with Songti + ink-green accents, and bold editorial typography cover with cobalt-blue bands + folded-paper interior. Despite the "ppt" prefix in the path, these are fixed-image XHS covers, not slide decks.
+visibility: public
+mode: template
+carrier: fixed-image
+scenario: social-content
+pattern_source: xhs-cover-spring.html, xhs-cover-typography.html
+source_priority: skill-first
+triggers:
+  - "做个小红书竖封面"
+  - "xhs 3:4 封面"
+  - "春日水彩封面"
+  - "钴蓝编辑感封面"
+  - "宋体 + 水墨封面"
+---
+
+# XHS Cover Template
+
+Use this template for **小红书 / RED 信息流封面图** at the standard 3:4 (1242×1660) portrait canvas. This is a fixed-image surface delivered as HTML-to-image, not a slide deck and not a WeChat cover.
+
+This template ships two voices. Pick before building.
+
+## Variants
+
+### `xhs-cover-spring.html` — Soft seasonal lifestyle
+
+- Voice: meditative, slow-living, watercolor-paper, bilingual.
+- Use for: 春日 / 慢生活 / 治愈 / 旅行 / 食物 / 居家 / 冥想 / 节气 content.
+- Distinctive moves: mint→cream vertical gradient, Songti SC Chinese headline + Times New Roman italic English lead, ink-green (#2d4a3e) accents, hand-drawn SVG clouds / grass tufts, soft-glow photography.
+
+### `xhs-cover-typography.html` — Bold editorial design
+
+- Voice: design-led, hashtag-as-mark, magazine-issue energy.
+- Use for: 设计 / 排版 / 创作工具 / 课程预告 / 沙龙活动 / 设计周刊 content.
+- Distinctive moves: cobalt-blue (#1652f0) top/bottom bands, cream "folded paper" interior with shadow fold, # prefix + chunky PingFang headline + Helvetica Neue Black numerics, rotated issue tag, angled photo strip.
+
+## Use When
+
+- The artifact is an **XHS cover** at 3:4 portrait, optimized for the feed thumbnail context.
+- The user explicitly says 小红书 / XHS / RED / 封面.
+- The headline carries the card — photography supports, not dominates.
+
+## Avoid When
+
+- The platform is WeChat 公众号 → use `wechat-cover-pair/` (different aspect, different reading distance).
+- The platform is Xiaohongshu but the content is a method / KPI / comparison card → use `social-card-swiss/`.
+- The content needs to be a reflective long-quote literary card → use `social-card-editorial/`.
+- The output is a deck or scrolling article — wrong carrier entirely.
+
+## Required Reading
+
+Read this `SKILL.md` first. Do **not** read either `pattern.html` by default.
+
+Read the chosen variant only when you need exact title-breaking, decorative-element placement, or the folded-paper / soft-cloud SVG geometry. Extract patterns; do not copy DOM, placeholder copy, Pexels photo URLs, or class names wholesale.
+
+## Design Strategy
+
+Pick the variant from voice:
+
+- Slow + warm + bilingual lyrical → **spring**
+- Loud + editorial + design-savvy → **typography**
+
+Then write the headline first. XHS covers live or die by how readable the headline is at thumbnail scale. Compose it to break in 2–3 lines with intentional line-break points.
+
+## Layout Bias
+
+Prefer:
+
+- one dominant headline, one supporting sub or keyword chain
+- a single visual anchor (photo, mark, or geometric block) — not three
+- credible photo credit if a stock image is used
+- breathing room at top and bottom safe areas (XHS UI overlay)
+- bilingual stacking (English lead + Chinese headline) only when both have meaning
+
+Avoid:
+
+- 塑料 stickers, emoji-pile decorations, 3D plastic badges (AI-slop)
+- 黑金 "premium" gradients (forbidden — see design aesthetic memory)
+- crowding the canvas with 4+ decorative elements
+- shrinking the headline to fit a long sentence — rewrite the sentence
+
+## Platform / Size
+
+Fixed 3:4 portrait. Use `canvas-and-device.md` for current XHS dimensions and safe areas. Do not hard-code other ratios; if the user wants 1:1 or 16:9 they want a different template.

skills/design/design-templates/html-ppt-xhs-post/xhs-cover-spring.html

@@ -0,0 +1,440 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>春日松弛感生活提案 · 小红书封面</title>
+<style>
+  :root {
+    --mint: #cfe1cd;          /* 顶部薄荷 */
+    --mint-soft: #e3edd9;     /* 中部柔薄荷 */
+    --cream: #f1ebd9;         /* 底部奶油 */
+    --grass: #8ab28a;         /* 草绿 */
+    --ink: #2d4a3e;           /* 深墨绿 */
+    --ink-soft: #557565;      /* 灰墨绿 */
+    --line: #b8cdb5;
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  html, body {
+    background: #2a2a2a;
+    font-family: 'Songti SC', 'STSong', 'Source Han Serif SC', 'Noto Serif SC', 'Heiti SC', serif;
+    -webkit-font-smoothing: antialiased;
+    color: var(--ink);
+  }
+
+  body {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 40px 0;
+  }
+
+  /* ===== 画布 1242×1660 ===== */
+  .cover {
+    width: 1242px;
+    height: 1660px;
+    position: relative;
+    background: var(--cream);
+    overflow: hidden;
+    box-shadow: 0 30px 80px rgba(0,0,0,.4);
+  }
+
+  /* 顶部薄荷绿渐变天空 */
+  .sky {
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 900px;
+    background: linear-gradient(180deg,
+      var(--mint) 0%,
+      var(--mint-soft) 55%,
+      var(--cream) 100%);
+    z-index: 0;
+  }
+
+  /* 顶部条:左上日期 + 右上品牌 */
+  .top-bar {
+    position: absolute;
+    top: 60px;
+    left: 60px;
+    right: 60px;
+    z-index: 5;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  .date-eng {
+    font-family: 'Times New Roman', 'Songti SC', serif;
+    font-style: italic;
+    font-weight: 400;
+    font-size: 32px;
+    color: var(--ink);
+    letter-spacing: 0.04em;
+  }
+  .brand-cn {
+    text-align: right;
+    color: var(--ink);
+  }
+  .brand-cn .line {
+    font-family: 'Songti SC', 'Source Han Serif SC', serif;
+    font-weight: 500;
+    font-size: 34px;
+    letter-spacing: 0.1em;
+    border-bottom: 1.5px solid var(--ink);
+    padding-bottom: 4px;
+    display: inline-block;
+  }
+  .brand-cn .sub {
+    font-size: 20px;
+    margin-top: 8px;
+    letter-spacing: 0.15em;
+    color: var(--ink-soft);
+  }
+
+  /* 英文大标题 */
+  .eng-title {
+    position: absolute;
+    top: 130px;
+    left: 60px;
+    z-index: 5;
+    font-family: 'Times New Roman', 'Georgia', serif;
+    font-weight: 400;
+    font-style: italic;
+    font-size: 92px;
+    line-height: 1.0;
+    letter-spacing: -0.01em;
+    color: var(--ink);
+  }
+  .eng-title .spaced {
+    letter-spacing: 0.18em;
+  }
+  .eng-title .l2 { display: block; margin-top: 6px; }
+
+  /* 中文大标题 */
+  .cn-title {
+    position: absolute;
+    top: 340px;
+    left: 60px;
+    right: 60px;
+    z-index: 5;
+    font-family: 'Songti SC', 'STSong', 'Source Han Serif SC', 'Noto Serif SC', serif;
+    font-weight: 700;
+    font-size: 108px;
+    line-height: 1.05;
+    letter-spacing: 0.04em;
+    color: var(--ink);
+  }
+
+  /* ===== 中部:云朵 + 主图 ===== */
+  .scene {
+    position: absolute;
+    top: 590px;
+    left: 0; right: 0;
+    height: 640px;
+    z-index: 1;
+    overflow: hidden;
+  }
+
+  /* SVG 云朵层(在主图之上,做"插画式"遮罩) */
+  .clouds {
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 360px;
+    z-index: 3;
+    pointer-events: none;
+  }
+  .clouds svg { display: block; width: 100%; height: 100%; }
+
+  /* 主图:Pexels 春日草甸,带柔光滤镜 */
+  .hero-img {
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 520px;
+    overflow: hidden;
+    z-index: 2;
+    /* 顶部柔化:用 mask 让上沿和云朵区融合 */
+    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 18%, #000 35%, #000 100%);
+            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 18%, #000 35%, #000 100%);
+  }
+  .hero-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center 55%;
+    filter: saturate(0.85) brightness(1.05) contrast(0.95);
+    display: block;
+  }
+
+  /* 主图上的薄荷绿色彩叠加,让照片更接近插画调 */
+  .hero-tint {
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 520px;
+    background: linear-gradient(180deg,
+      rgba(207, 225, 205, 0.35) 0%,
+      rgba(180, 210, 175, 0.18) 40%,
+      rgba(241, 235, 217, 0.0) 100%);
+    z-index: 4;
+    pointer-events: none;
+  }
+
+  /* 草地装饰:底部一条小草丛剪影 */
+  .grass-deco {
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 80px;
+    z-index: 5;
+    pointer-events: none;
+  }
+  .grass-deco svg { display: block; width: 100%; height: 100%; }
+
+  /* Pexels 标注 */
+  .photo-credit {
+    position: absolute;
+    right: 24px;
+    bottom: 18px;
+    z-index: 6;
+    font-family: 'Helvetica Neue', sans-serif;
+    font-size: 14px;
+    color: rgba(255,255,255,0.85);
+    letter-spacing: 0.12em;
+    text-shadow: 0 1px 3px rgba(0,0,0,.5);
+  }
+
+  /* ===== 底部:提案块 ===== */
+  .proposals {
+    position: absolute;
+    top: 1255px;
+    left: 60px;
+    right: 60px;
+    z-index: 6;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 56px;
+    row-gap: 22px;
+  }
+  .prop h4 {
+    font-family: 'Songti SC', 'STSong', 'Source Han Serif SC', serif;
+    font-weight: 700;
+    font-size: 28px;
+    color: var(--ink);
+    margin-bottom: 6px;
+    letter-spacing: 0.02em;
+  }
+  .prop h4 .num {
+    font-family: 'Times New Roman', serif;
+    font-style: italic;
+    font-weight: 400;
+    color: var(--grass);
+    margin-right: 8px;
+    font-size: 26px;
+  }
+  .prop p {
+    font-family: 'Songti SC', 'Source Han Serif SC', serif;
+    font-size: 17px;
+    line-height: 1.55;
+    color: var(--ink-soft);
+    letter-spacing: 0.02em;
+    max-height: 53px;
+    overflow: hidden;
+  }
+
+  /* ===== 最底栏:日期 / 地点 / 品牌 ===== */
+  .footer {
+    position: absolute;
+    bottom: 50px;
+    left: 60px;
+    right: 60px;
+    z-index: 10;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    border-top: 1px solid var(--line);
+    padding-top: 18px;
+    background: var(--cream);
+  }
+  .footer-left {
+    color: var(--ink);
+  }
+  .footer-left .date {
+    font-family: 'Times New Roman', serif;
+    font-style: italic;
+    font-weight: 400;
+    font-size: 40px;
+    color: var(--grass);
+    line-height: 1;
+  }
+  .footer-left .loc {
+    font-family: 'Songti SC', serif;
+    font-size: 19px;
+    margin-top: 8px;
+    letter-spacing: 0.06em;
+    color: var(--ink);
+  }
+  .footer-left .loc b {
+    font-family: 'Helvetica Neue', sans-serif;
+    font-weight: 600;
+    margin-right: 6px;
+    color: var(--ink-soft);
+    font-size: 17px;
+    letter-spacing: 0.1em;
+  }
+  .footer-right {
+    text-align: right;
+    color: var(--ink);
+  }
+  .footer-right .brand {
+    font-family: 'Songti SC', 'Source Han Serif SC', serif;
+    font-weight: 700;
+    font-size: 22px;
+    letter-spacing: 0.18em;
+  }
+  .footer-right .brand .sep {
+    margin: 0 10px;
+    color: var(--grass);
+  }
+  .footer-right .tag {
+    font-family: 'Helvetica Neue', sans-serif;
+    font-size: 14px;
+    margin-top: 6px;
+    letter-spacing: 0.18em;
+    color: var(--ink-soft);
+  }
+</style>
+</head>
+<body>
+
+<div class="cover">
+
+  <!-- 天空背景 -->
+  <div class="sky"></div>
+
+  <!-- 顶部条 -->
+  <div class="top-bar">
+    <div class="date-eng">Apr. 2026</div>
+    <div class="brand-cn">
+      <span class="line">春和景明</span>
+      <div class="sub">春日生活提案</div>
+    </div>
+  </div>
+
+  <!-- 英文标题 -->
+  <div class="eng-title">
+    <span>Soft</span> <span class="spaced">S p r i n g</span>
+    <span class="l2">&amp; Slow Days</span>
+  </div>
+
+  <!-- 中文标题 -->
+  <div class="cn-title">春日松弛感<br>生活提案</div>
+
+  <!-- 中部场景 -->
+  <div class="scene">
+    <!-- 云朵 -->
+    <div class="clouds">
+      <svg viewBox="0 0 1242 360" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <!-- 三朵云 -->
+        <g fill="#f1ebd9">
+          <path d="M -40,200
+                   C 60,120 180,110 240,160
+                   C 290,90 410,80 470,150
+                   C 540,100 660,120 700,180
+                   C 760,130 870,140 900,210
+                   C 980,180 1100,200 1160,260
+                   C 1220,240 1300,280 1320,360
+                   L 1320,400 L -40,400 Z" opacity="0.92"/>
+          <path d="M 100,100
+                   C 180,40 320,40 380,100
+                   C 440,60 560,80 600,140
+                   C 660,100 780,110 830,170
+                   C 920,140 1020,160 1080,220
+                   L 1080,260 L 100,260 Z" opacity="0.5"/>
+        </g>
+        <!-- 远山轮廓线 -->
+        <path d="M 0,340 L 200,280 L 380,310 L 560,260 L 780,300 L 980,270 L 1242,320"
+              stroke="#8ab28a" stroke-width="1.5" fill="none" opacity="0.55"/>
+      </svg>
+    </div>
+
+    <!-- 主图 -->
+    <div class="hero-img">
+      <img src="https://images.pexels.com/photos/32893151/pexels-photo-32893151.jpeg?auto=compress&cs=tinysrgb&w=1600"
+           alt="dreamy meadow with spring wildflowers from Pexels">
+    </div>
+    <div class="hero-tint"></div>
+
+    <!-- 草地装饰 -->
+    <div class="grass-deco">
+      <svg viewBox="0 0 1242 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <g stroke="#557565" stroke-width="1.6" fill="none" opacity="0.55" stroke-linecap="round">
+          <path d="M 30 80 Q 28 50 32 30"/>
+          <path d="M 38 80 Q 42 55 36 38"/>
+          <path d="M 90 80 Q 92 52 88 30"/>
+          <path d="M 96 80 Q 94 55 102 35"/>
+          <path d="M 180 80 Q 178 50 184 28"/>
+          <path d="M 188 80 Q 192 52 186 32"/>
+          <path d="M 260 80 Q 258 50 264 30"/>
+          <path d="M 270 80 Q 274 56 268 36"/>
+          <path d="M 340 80 Q 336 48 342 26"/>
+          <path d="M 348 80 Q 352 55 346 32"/>
+          <path d="M 420 80 Q 418 50 424 28"/>
+          <path d="M 430 80 Q 434 55 428 32"/>
+          <path d="M 510 80 Q 506 48 512 26"/>
+          <path d="M 518 80 Q 522 55 516 32"/>
+          <path d="M 600 80 Q 598 50 604 28"/>
+          <path d="M 608 80 Q 612 55 606 32"/>
+          <path d="M 690 80 Q 688 48 694 26"/>
+          <path d="M 700 80 Q 704 55 698 32"/>
+          <path d="M 780 80 Q 776 50 782 28"/>
+          <path d="M 788 80 Q 792 55 786 32"/>
+          <path d="M 870 80 Q 866 50 872 28"/>
+          <path d="M 878 80 Q 882 55 876 32"/>
+          <path d="M 960 80 Q 958 50 964 28"/>
+          <path d="M 968 80 Q 972 55 966 32"/>
+          <path d="M 1050 80 Q 1046 50 1052 28"/>
+          <path d="M 1058 80 Q 1062 55 1056 32"/>
+          <path d="M 1140 80 Q 1138 50 1144 28"/>
+          <path d="M 1150 80 Q 1154 56 1148 32"/>
+          <path d="M 1200 80 Q 1196 50 1202 28"/>
+        </g>
+      </svg>
+    </div>
+
+    <div class="photo-credit">PHOTO · PEXELS / FARHAAN PARIMOO</div>
+  </div>
+
+  <!-- 提案列表 -->
+  <div class="proposals">
+    <div class="prop">
+      <h4><span class="num">01</span>城市公园野餐</h4>
+      <p>带一块格子布、半盒草莓,<br>坐到云挪了又挪。</p>
+    </div>
+    <div class="prop">
+      <h4><span class="num">02</span>周末山野徒步</h4>
+      <p>8 公里以内的小路,不打卡,<br>把节奏交还给身体。</p>
+    </div>
+    <div class="prop">
+      <h4><span class="num">03</span>阳台花园种植</h4>
+      <p>从一盆薄荷开始,把"等待"<br>重新放回每一天。</p>
+    </div>
+    <div class="prop">
+      <h4><span class="num">04</span>樱花树下夜读</h4>
+      <p>一本薄薄的随笔,<br>读到天色变蓝,读到困。</p>
+    </div>
+  </div>
+
+  <!-- 底栏 -->
+  <div class="footer">
+    <div class="footer-left">
+      <div class="date">4.04 — 5.20</div>
+      <div class="loc"><b>WHERE</b>城市 · 山野 · 阳台 · 任何有春风的地方</div>
+    </div>
+    <div class="footer-right">
+      <div class="brand">慢 <span class="sep">·</span> 生 <span class="sep">·</span> 活</div>
+      <div class="tag">SLOW LIVING JOURNAL &nbsp;/&nbsp; VOL.04</div>
+    </div>
+  </div>
+
+</div>
+
+</body>
+</html>

skills/design/design-templates/html-ppt-xhs-post/xhs-cover-typography.html

@@ -0,0 +1,411 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>中文排版的呼吸感 · 小红书封面</title>
+<style>
+  :root {
+    --blue: #1652f0;
+    --paper: #e9e6dd;
+    --fold: #cfccc0;
+    --ink: #0a1628;
+    --ink-soft: #2c3849;
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  html, body {
+    background: #2a2a2a;
+    font-family: 'PingFang SC', 'Helvetica Neue', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    color: var(--ink);
+  }
+
+  body {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 40px 0;
+  }
+
+  /* ===== 画布 1242×1660 (3:4) ===== */
+  .cover {
+    width: 1242px;
+    height: 1660px;
+    position: relative;
+    background: var(--blue);
+    overflow: hidden;
+    box-shadow: 0 30px 80px rgba(0,0,0,.4);
+  }
+
+  /* ===== 顶部蓝色区:日期与时段 ===== */
+  .top-bar {
+    position: absolute;
+    top: 60px;
+    left: 60px;
+    right: 60px;
+    color: #fff;
+    z-index: 5;
+  }
+  .date-row {
+    font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
+    font-weight: 900;
+    font-size: 108px;
+    line-height: .95;
+    letter-spacing: -0.025em;
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 18px;
+  }
+  .date-row .sep {
+    font-weight: 300;
+    font-size: 100px;
+    transform: translateY(-6px);
+  }
+  .date-row .week {
+    font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
+    font-weight: 700;
+    font-size: 60px;
+    letter-spacing: 0.02em;
+  }
+  .top-sub {
+    margin-top: 22px;
+    font-size: 24px;
+    letter-spacing: 0.05em;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+  }
+  .top-sub .dot {
+    width: 12px; height: 12px;
+    background: #fff;
+    border-radius: 50%;
+  }
+
+  /* ===== 米白折纸主体 ===== */
+  .paper {
+    position: absolute;
+    top: 250px;
+    left: 40px;
+    right: 40px;
+    bottom: 150px;
+    background: var(--paper);
+    clip-path: polygon(
+      0% 6%,
+      70% 0%,
+      100% 10%,
+      100% 92%,
+      30% 100%,
+      0% 94%
+    );
+    z-index: 2;
+  }
+
+  /* 右上"被折起的角":一个略深的三角,贴在 paper 右上 */
+  .fold-corner-tr {
+    position: absolute;
+    top: 250px;
+    right: 40px;
+    width: 360px;
+    height: 196px;
+    background: var(--fold);
+    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
+    z-index: 3;
+  }
+
+  /* 右上折角的 N°007 编号(顺着折角倾斜) */
+  .issue-tag {
+    position: absolute;
+    top: 296px;
+    right: 86px;
+    transform: rotate(28deg);
+    transform-origin: center;
+    z-index: 4;
+    font-family: 'Helvetica Neue', sans-serif;
+    font-weight: 700;
+    font-size: 70px;
+    letter-spacing: -0.01em;
+    color: var(--ink);
+  }
+  .issue-tag sup {
+    font-size: 0.5em;
+    vertical-align: super;
+    font-weight: 600;
+    margin-right: 2px;
+  }
+
+  /* ===== 折纸内文字主体 ===== */
+  .content {
+    position: absolute;
+    top: 320px;
+    left: 90px;
+    right: 90px;
+    bottom: 220px;
+    z-index: 6;
+    color: var(--ink);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .eng-title {
+    font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
+    font-weight: 900;
+    font-size: 128px;
+    line-height: .9;
+    letter-spacing: -0.035em;
+    color: var(--ink);
+  }
+
+  .cn-title-wrap {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    margin-top: 20px;
+  }
+  .hashtag {
+    font-family: 'Helvetica Neue', sans-serif;
+    font-weight: 700;
+    font-size: 120px;
+    line-height: .9;
+    color: var(--ink);
+  }
+  .cn-title {
+    font-family: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
+    font-weight: 900;
+    font-size: 120px;
+    line-height: 1.02;
+    letter-spacing: 0.005em;
+    color: var(--ink);
+  }
+
+  .subtitle {
+    margin-top: 26px;
+    font-size: 34px;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    color: var(--ink-soft);
+  }
+  .subtitle .pipe {
+    margin: 0 12px;
+    color: var(--ink-soft);
+    opacity: .45;
+  }
+
+  /* ===== Pexels 字体特写图条 ===== */
+  .photo-strip {
+    margin-top: 40px;
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    position: relative;
+    clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0% 100%);
+  }
+  .photo-strip img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center 45%;
+    filter: contrast(1.05) saturate(0.85);
+    display: block;
+  }
+  .photo-caption {
+    position: absolute;
+    bottom: 16px;
+    right: 18px;
+    font-family: 'Helvetica Neue', sans-serif;
+    font-size: 16px;
+    color: #fff;
+    letter-spacing: 0.1em;
+    text-shadow: 0 1px 4px rgba(0,0,0,.7);
+    z-index: 2;
+  }
+
+  /* ===== 内容点列(2 列) ===== */
+  .points {
+    margin-top: 36px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 50px;
+    row-gap: 18px;
+  }
+  .point {
+    display: flex;
+    align-items: baseline;
+    gap: 14px;
+    font-size: 28px;
+    line-height: 1.3;
+    color: var(--ink);
+  }
+  .point .num {
+    font-family: 'Helvetica Neue', sans-serif;
+    font-weight: 700;
+    font-size: 22px;
+    color: var(--blue);
+    flex-shrink: 0;
+    min-width: 48px;
+  }
+  .point .txt {
+    font-weight: 600;
+  }
+
+  /* ===== 折纸内左下的 logo 区 ===== */
+  .logos {
+    margin-top: 32px;
+    display: flex;
+    gap: 24px;
+    align-items: center;
+  }
+  .logo-chip {
+    width: 60px; height: 60px;
+    border-radius: 50%;
+    border: 2px solid var(--ink);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Helvetica Neue', sans-serif;
+    font-weight: 700;
+    font-size: 11px;
+    color: var(--ink);
+    line-height: 1.05;
+    text-align: center;
+    letter-spacing: 0.04em;
+  }
+  .logo-text {
+    font-family: 'PingFang SC', sans-serif;
+    font-weight: 700;
+    font-size: 20px;
+    color: var(--ink);
+    line-height: 1.2;
+  }
+  .logo-text small {
+    display: block;
+    font-family: 'Helvetica Neue', sans-serif;
+    font-weight: 500;
+    font-size: 11px;
+    letter-spacing: 0.12em;
+    opacity: .65;
+    margin-top: 3px;
+  }
+
+  /* ===== 底部蓝色区 footer ===== */
+  .bottom-bar {
+    position: absolute;
+    left: 60px;
+    right: 60px;
+    bottom: 50px;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    z-index: 5;
+  }
+  .brand {
+    font-family: 'Helvetica Neue', sans-serif;
+    font-weight: 700;
+    letter-spacing: 0.16em;
+    font-size: 22px;
+  }
+  .brand .cn {
+    display: block;
+    font-family: 'PingFang SC', sans-serif;
+    font-weight: 600;
+    font-size: 26px;
+    letter-spacing: 0.24em;
+    margin-top: 8px;
+  }
+  .meta {
+    text-align: right;
+    font-size: 18px;
+    letter-spacing: 0.08em;
+    line-height: 1.6;
+    font-family: 'Helvetica Neue', 'PingFang SC', sans-serif;
+    font-weight: 500;
+  }
+  .meta .big {
+    display: block;
+    font-weight: 700;
+    font-size: 28px;
+    letter-spacing: 0.04em;
+    margin-bottom: 4px;
+  }
+</style>
+</head>
+<body>
+
+<div class="cover">
+
+  <!-- 顶部日期 -->
+  <div class="top-bar">
+    <div class="date-row">
+      <span>06.01</span>
+      <span class="sep">|</span>
+      <span>20:00&ndash;22:00</span>
+      <span class="week">(周一)</span>
+    </div>
+    <div class="top-sub">
+      <span class="dot"></span>
+      <span>「设计夜读」第 07 期 &nbsp;·&nbsp; Field Notes on Type</span>
+    </div>
+  </div>
+
+  <!-- 折纸主体 -->
+  <div class="paper"></div>
+  <div class="fold-corner-tr"></div>
+
+  <!-- 右上折角的期号 -->
+  <div class="issue-tag">N<sup>o</sup>007</div>
+
+  <!-- 折纸内的内容 -->
+  <div class="content">
+    <div class="eng-title">Breath of<br>Chinese Type</div>
+
+    <div class="cn-title-wrap">
+      <span class="hashtag">#</span>
+      <div class="cn-title">中文排版的<br>呼吸感</div>
+    </div>
+
+    <div class="subtitle">
+      格律 <span class="pipe">/</span> 留白 <span class="pipe">/</span> 节奏 <span class="pipe">/</span> 灰度
+    </div>
+
+    <!-- Pexels 字体特写图条 -->
+    <div class="photo-strip">
+      <img src="https://images.pexels.com/photos/698327/pexels-photo-698327.jpeg?auto=compress&cs=tinysrgb&w=1600"
+           alt="typewriter close-up by Matej from Pexels">
+      <div class="photo-caption">PHOTO · PEXELS / MATEJ</div>
+    </div>
+
+    <!-- 4 条要点 -->
+    <div class="points">
+      <div class="point"><span class="num">#01</span><span class="txt">模数决定一切节奏</span></div>
+      <div class="point"><span class="num">#02</span><span class="txt">标题按词,不按字数</span></div>
+      <div class="point"><span class="num">#03</span><span class="txt">行长是字号的整数倍</span></div>
+      <div class="point"><span class="num">#04</span><span class="txt">留白本身就是设计</span></div>
+    </div>
+
+    <!-- 折纸左下角的 logo 区 -->
+    <div class="logos">
+      <div class="logo-chip">TYPE<br>NOTES</div>
+      <div class="logo-chip">EST.<br>2026</div>
+      <div class="logo-text">设计夜读<small>DESIGN&nbsp;·&nbsp;READING</small></div>
+    </div>
+  </div>
+
+  <!-- 底部 footer -->
+  <div class="bottom-bar">
+    <div class="brand">
+      DESIGN NOTES
+      <span class="cn">设 计 夜 读</span>
+    </div>
+    <div class="meta">
+      <span class="big">VOL.&nbsp;07&nbsp;/&nbsp;2026</span>
+      ISSN 2026&ndash;007 &nbsp;·&nbsp; SUMMER ISSUE
+    </div>
+  </div>
+
+</div>
+
+</body>
+</html>