/* zhanglin.com 设计契约 v2「读物版」· 公开页共享组件 —— 单一来源。
 *
 * 全站视觉语言（2026-07-04 定稿，原型 v7）：
 *   暖纸亮底 + 经典衬线正文 + 沉墨绿点缀 + 大留白；干净、耐读、不炫技。
 *   形态跟内容走：离散情报 = 独立块；深度内容 = 读物长文。
 *
 * 给所有（人类或 AI 员工）改公开页的规则：
 * 1) 全站 tokens 与顶栏样式的唯一来源在本文件；各页不再自定义 :root 配色、不再内联 header 样式。
 * 2) 只有一套亮色系，不做暗/明主题切换（已下线 theme-toggle）。
 * 3) 复用共享组件：三级卡片、诚实徽章、生命线、情报块（.zl-item）。要发新组件先走 CPO 立项。 */

/* —— 设计 tokens（全站唯一来源，各页继承）—————————————— */
:root{
  --paper:#f8f7f3;        /* 暖纸亮底 */
  --card:#fffdf8;         /* 卡片/分区，微高于底 */
  --ink:#26251f;          /* 近黑暖：标题/正文 */
  --slate:#5f5e56;        /* 次要文字 */
  --mist:#9b998f;         /* 更弱：元信息/占位 */
  --rule:#e7e3d9;         /* 分隔线 */
  --rule-soft:#efece3;
  --accent:#1e7a58;       /* 沉墨绿：链接/正向/强调 */
  --accent-deep:#155f44;  /* hover */
  --accent-soft:#eaf1ec;  /* 浅绿底 */
  --hl:#10b981;           /* 鲜翠绿：仅 logo 的 a/i 等品牌高亮点 */
  --warn:#a33a30;         /* 低饱和砖红：翻车/受阻语义 */
  --warn-soft:#f4e9e6;
  --serif:Georgia,'Songti SC','Times New Roman',serif;
  --sans:-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* 兼容旧变量名：老页/共享组件里引用的 --text/--line/--muted 自动取 v7 值，
     减少逐页替换量（迁移期过渡桥）。 */
  --text:var(--ink);
  --line:var(--rule);
  --muted:var(--slate);
  --faint:var(--mist);
  --bg:var(--paper);
  --panel:var(--card);
}

/* —— 全站基底：暖纸底 + 衬线正文 —————————————————— */
/* 全站盒模型与外边距 reset（单一来源）。各页曾各自在内联 <style> 里写 *{margin:0}，
   漏写的页面（film/lab）就带着浏览器默认的 body 8px margin，页面间切换顶部会跳 8px。
   收进这里后所有页面一致，新页也不必再自写。 */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.55;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
body ::selection{background:var(--accent-soft)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.015em}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* —— 全站内容容器（单一来源：header 与正文同宽同边距，务必对齐；各页勿再自写 .wrap 宽度）—— */
.wrap{position:relative;width:min(100%,1120px);margin:0 auto;padding:0 26px}
@media(max-width:660px){.wrap{padding:0 20px}}

/* —— 共享顶栏（集中样式，各页只留 <header> 结构）——————— */
body header{border-bottom:1px solid var(--rule);background:var(--paper)}
body header .nav,body header .wrap.nav{
  width:min(100%,var(--nav-w,1120px));margin:0 auto;
  height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 26px;
}
.brand{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--ink);flex:none}
.brand .hl,.brand .ai{color:var(--hl);font-weight:800}
.brand .dot{color:inherit}        /* 点不再高亮 */
.nav-right{display:flex;align-items:center;gap:18px}
.nav-right .link{font-family:var(--sans);font-size:13.5px;color:var(--slate);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.nav-right .link:hover{color:var(--ink)}
.nav-right .link.active{color:var(--ink);border-bottom-color:var(--accent)}
.lang-sel{font-family:var(--sans);font-size:13px;color:var(--slate);background:transparent;border:1px solid var(--rule);border-radius:7px;padding:5px 9px;cursor:pointer}
.lang-sel:hover{border-color:var(--accent);color:var(--ink)}
.footer-privacy-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(30,122,88,.28)}
.footer-privacy-link:hover{color:var(--accent)}

/* —— 页头 hero（全站统一：eyebrow + 衬线巨标 + 副标；各页 hero 一律用这套，勿再自定义）—— */
/* 用法：<main class="wrap"><div class="eyebrow">…</div><h1 class="hero-h">…</h1><p class="hero-sub">…</p></main>
   顶部留白由 .page-hero 或 main 的 padding-top 统一取 clamp(40px,5.5vh,72px)。 */
.page-hero{padding-top:clamp(40px,5.5vh,72px)}   /* 定义在 .wrap 之后，同优先级靠源序压过 .wrap 的 padding 简写；适配任意容器元素 */
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.hero-h{font-family:var(--serif);font-size:clamp(38px,6.4vw,80px);line-height:1.05;letter-spacing:-.03em;font-weight:700;max-width:15ch;text-wrap:balance}
.hero-sub{font-family:var(--sans);color:var(--slate);font-size:clamp(15px,1.4vw,18px);line-height:1.72;max-width:60ch;margin-top:24px;text-wrap:pretty}

/* —— 三级卡片（v7 皮：暖白 + 细边 + 圆角）————————————— */
.zl-card-1{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:10px;padding:18px 20px}
.zl-card-2{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:14px 16px}
.zl-drawer{border:1px dashed var(--rule);border-radius:10px;padding:0}
.zl-drawer>summary{cursor:pointer;list-style:none;padding:12px 16px;font-family:var(--sans);font-size:12.5px;color:var(--mist);user-select:none}
.zl-drawer>summary::-webkit-details-marker{display:none}
.zl-drawer>summary::before{content:'▸ ';opacity:.6}
.zl-drawer[open]>summary::before{content:'▾ '}
.zl-drawer>summary:hover{color:var(--ink)}
.zl-drawer>.zl-drawer-body{padding:4px 16px 16px}

/* —— 独立情报块（离散信息 = 块，非文章行）—————————————— */
.zl-item{background:var(--card);border:1px solid var(--rule);border-radius:7px;overflow:hidden;transition:border-color .15s,box-shadow .18s}
.zl-item:hover{border-color:#d7d1c2;box-shadow:0 2px 12px rgba(38,37,31,.05)}
.zl-item+.zl-item{margin-top:13px}
.zl-item .zl-item-lead{padding:20px 22px;display:flex;align-items:stretch;gap:22px;justify-content:space-between}
.zl-item .zl-item-src{font-family:var(--sans);font-size:11.5px;letter-spacing:.05em;color:var(--mist);margin-bottom:10px}

/* —— 诚实徽章（v7 皮：小圆胶囊，语义色低饱和）—————————— */
.zl-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:11px;font-weight:600;line-height:1;letter-spacing:.02em;padding:4px 10px;border-radius:999px;border:1px solid var(--rule);color:var(--slate)}
.zl-badge--good{border-color:rgba(30,122,88,.4);color:var(--accent);background:var(--accent-soft)}
.zl-badge--live{border-color:rgba(30,122,88,.3);color:var(--accent-deep)}
.zl-badge--warn{border-color:rgba(163,58,48,.4);color:var(--warn);background:var(--warn-soft)}

/* —— 想法生命线 —————————————————————————— */
.zl-lifeline{display:flex;align-items:center;gap:0;margin-top:8px}
.zl-lifeline i{flex:none;width:7px;height:7px;border-radius:50%;background:transparent;border:1px solid var(--rule)}
.zl-lifeline i.on{background:var(--accent);border-color:var(--accent)}
.zl-lifeline i.now{background:var(--hl);border-color:var(--hl);box-shadow:0 0 6px -1px var(--hl)}
.zl-lifeline b{flex:1 1 12px;max-width:26px;height:1px;background:var(--rule)}
.zl-lifeline b.on{background:var(--accent);opacity:.6}
.zl-lifeline .zl-lifeline-label{margin-left:8px;font-family:var(--sans);font-size:10.5px;color:var(--mist)}

/* —— 共享顶部导航 · 手机版（≤660px）—————————————— */
@media (max-width:660px){
  body header{position:static}
  body header .nav,body header .wrap.nav{flex-wrap:wrap;height:auto;min-height:0;padding:10px 20px;gap:8px 6px}
  body header .nav-right{display:contents}
  body header .nav .lang-sel{order:1;margin-left:auto;padding:10px}
  body header .nav::after{content:'';order:3;width:100%;height:0}
  body header .nav .link{order:4;padding:10px 12px}
}