/* ============================================================
   庙街小巷 · 商业技术书  —  设计系统
   ============================================================
   气质参考：
   · Glencoe Introduction to Business — 摄影图主体，严谨教科书排版
   · DK The Business Book — 深色底，信息密度，金句与图标点缀
   配色为：墨蓝 (主) + 朱砂 (强调) + 米白 (纸面) + 烟灰 (辅助)
   ============================================================ */

:root{
  /* —— 颜色 —— */
  --ink:        #0E1A2B;   /* 墨蓝 - 正文 / 深色底 */
  --ink-2:      #1B2A40;   /* 第二层墨蓝 */
  --paper:      #FFFFFF;   /* 纯白纸面 */
  --paper-2:    #F4F4F1;   /* 略浅辅助色块 */
  --ash:        #F8F6F0;   /* 浅灰底色块 */
  --vermilion:  #B8351F;   /* 朱砂 - 强调 */
  --vermilion-d:#8A2715;
  --gold:       #A07A35;   /* 烫金感 */
  --smoke:      #3A4250;   /* 烟灰 */
  --smoke-2:    #6B7280;
  --rule:       #D8D2C2;   /* 淡色分隔线 */
  --rule-d:     #2A3447;   /* 深底分隔线 */

  /* —— 字体 —— */
  --serif-zh: "Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  --sans-zh:  "Noto Sans SC","PingFang SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --serif-en: "Source Serif 4","Source Serif Pro","Times New Roman",serif;
  --sans-en:  "Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:     "JetBrains Mono","Courier New",monospace;

  /* —— 度量 —— */
  --page-w: 680px;     /* 16开等比, 170×240 ≈ 0.708, 屏上 680×960 */
  --page-h: 960px;
  --gutter: 56px;
  --baseline: 24px;
}

/* ============ 基础 ============ */
html,body{margin:0;padding:0;background:#1a1a1a;color:var(--ink);font-family:var(--serif-zh);}
*{box-sizing:border-box;}

/* ============ 书页 ============ */
.page{
  position:relative;
  width:var(--page-w);
  height:var(--page-h);
  background:var(--paper);
  color:var(--ink);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  page-break-after:always;
}
.page.dark{background:var(--ink);color:var(--paper);}
.page.dark .rule{background:var(--rule-d);}

/* 页面安全区 */
.page-body{
  position:absolute;
  inset:72px var(--gutter) 88px var(--gutter);
}

/* 页眉 */
.runhead{
  position:absolute;
  top:32px; left:var(--gutter); right:var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--sans-zh);
  font-size:10px; letter-spacing:.18em;
  color:var(--smoke-2); text-transform:uppercase;
}
.dark .runhead{color:#8B96A8;}
.runhead .dot{width:4px;height:4px;border-radius:50%;background:var(--vermilion);}

/* 页脚 */
.runfoot{
  position:absolute;
  bottom:36px; left:var(--gutter); right:var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--sans-en);
  font-size:11px; letter-spacing:.06em;
  color:var(--smoke-2);
}
.dark .runfoot{color:#8B96A8;}
.runfoot .folio{
  font-family:var(--serif-en); 
  font-weight:300; 
  font-size:15px;
  color:var(--ink);
  font-feature-settings: 'lnum' 1;
  letter-spacing: .02em;
}
.dark .runfoot .folio{color:var(--paper);}

/* ============ 文字层级 ============ */
.eyebrow{
  font-family:var(--sans-zh);
  font-size:10px; letter-spacing:.32em;
  color:var(--vermilion);
  text-transform:uppercase;
  font-weight:600;
}
.eyebrow-en{font-family:var(--sans-en);}

h1.book-title{
  font-family:var(--serif-zh);
  font-weight:900;
  font-size:62px;
  line-height:1.05;
  letter-spacing:.02em;
  margin:0;
}
h2.chapter-title{
  font-family:var(--serif-zh);
  font-weight:800;
  font-size:42px;
  line-height:1.18;
  letter-spacing:.01em;
  margin:0;
}
h3.section-title{
  font-family:var(--serif-zh);
  font-weight:700;
  font-size:24px;
  line-height:1.3;
  margin:0 0 12px 0;
}
h4.sub-title{
  font-family:var(--sans-zh);
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em;
  margin:0 0 8px 0;
  color:var(--ink);
}
.dark h4.sub-title{color:var(--paper);}

p.body{
  font-family:var(--serif-zh);
  font-size:14.5px;
  line-height:1.85;
  margin:0 0 12px 0;
  text-align:justify;
  text-justify:inter-ideograph;
  color:var(--ink);
}
.dark p.body{color:#E6DDC8;}

.caption{
  font-family:var(--sans-zh);
  font-size:11px;
  line-height:1.55;
  letter-spacing:.02em;
  color:var(--smoke);
}
.dark .caption{color:#A8B0BD;}

.lead{
  font-family:var(--serif-zh);
  font-style:italic;
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
}
.dark .lead{color:#E6DDC8;}

/* 数字 / 英文 */
.num{font-family:var(--serif-en);font-feature-settings:"lnum","tnum";}
.en{font-family:var(--sans-en);}

/* ============ 装饰元素 ============ */
.rule{height:1px;background:var(--rule);width:100%;}
.rule-thick{height:3px;background:var(--ink);width:100%;}
.dark .rule-thick{background:var(--paper);}
.tick{display:inline-block;width:24px;height:1px;background:var(--vermilion);vertical-align:middle;margin:0 8px;}

.chapter-num{
  font-family:var(--serif-en);
  font-size:120px;
  line-height:1;
  font-weight:300;
  color:var(--vermilion);
  letter-spacing:-.02em;
}

/* 章节标记 / 角标 */
.chapter-tag{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  font-family:var(--sans-en);
  font-size:10px;
  letter-spacing:.32em;
  color:var(--smoke-2);
  text-transform:uppercase;
}
.chapter-tag .num-big{
  font-family:var(--serif-en);
  font-size:14px;
  color:var(--vermilion);
  font-weight:600;
  letter-spacing:0;
}

/* 引文 */
blockquote.pull{
  border-left:3px solid var(--vermilion);
  padding:6px 0 6px 18px;
  margin:0;
  font-family:var(--serif-zh);
  font-style:italic;
  font-size:16px;
  line-height:1.6;
  color:var(--ink-2);
}
.dark blockquote.pull{color:#E6DDC8;border-left-color:var(--vermilion);}

/* 数字摘要 — DK 风 */
.stat{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.stat .v{
  font-family:var(--serif-en);
  font-size:42px;
  line-height:1;
  font-weight:600;
  color:var(--vermilion);
  font-feature-settings:"lnum","tnum";
}
.stat .l{
  font-family:var(--sans-zh);
  font-size:11px;
  color:var(--smoke);
  line-height:1.5;
}
.dark .stat .l{color:#A8B0BD;}

/* 图位 / 图说 */
.figure{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.figbox{
  background:var(--paper-2);
  border:1px solid var(--rule);
  position:relative;
  overflow:hidden;
}
.dark .figbox{background:var(--ink-2);border-color:var(--rule-d);}
.figbox.photo{
  background-size:cover;
  background-position:center;
}
.figcap{
  display:flex;
  gap:10px;
  font-family:var(--sans-zh);
  font-size:10.5px;
  color:var(--smoke);
  line-height:1.55;
}
.figcap .figno{
  font-family:var(--serif-en);
  font-weight:600;
  color:var(--vermilion);
  white-space:nowrap;
  font-feature-settings:"lnum","tnum";
}

/* 案例研究框 */
.case{
  background:var(--paper-2);
  border-top:3px solid var(--ink);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.dark .case{background:var(--ink-2);border-top-color:var(--vermilion);}
.case .case-tag{
  font-family:var(--sans-zh);
  font-size:9.5px;
  letter-spacing:.28em;
  color:var(--vermilion);
  font-weight:700;
  text-transform:uppercase;
}
.case h5{
  font-family:var(--serif-zh);
  font-weight:700;
  font-size:16px;
  margin:0;
  line-height:1.4;
}

/* 标签 */
.tag{
  display:inline-block;
  font-family:var(--sans-zh);
  font-size:10px;
  letter-spacing:.06em;
  padding:3px 8px;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  margin:2px 4px 2px 0;
}
.dark .tag{border-color:var(--paper);color:var(--paper);}
.tag.solid{background:var(--ink);color:var(--paper);}
.dark .tag.solid{background:var(--paper);color:var(--ink);}
.tag.v{border-color:var(--vermilion);color:var(--vermilion);}

/* 流程箭头 */
.arrow-h{position:relative;width:100%;height:1px;background:var(--ink);}
.arrow-h::after{content:"";position:absolute;right:0;top:-4px;width:0;height:0;
  border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:8px solid var(--ink);}
.dark .arrow-h{background:var(--paper);}
.dark .arrow-h::after{border-left-color:var(--paper);}

/* 网格背景（用于内页装饰） */
.gridbg{
  background-image:
    linear-gradient(to right, rgba(14,26,43,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,26,43,.05) 1px, transparent 1px);
  background-size:24px 24px;
}
.dark.gridbg, .gridbg.dark{
  background-image:
    linear-gradient(to right, rgba(244,239,230,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,239,230,.04) 1px, transparent 1px);
}

/* 页面边角图章 */
.stamp{
  position:absolute;
  font-family:var(--sans-en);
  font-size:9px;
  letter-spacing:.32em;
  color:var(--smoke-2);
  text-transform:uppercase;
}