/* ===========================================================
 * 《让爱不消失》— 设计系统
 * -----------------------------------------------------------
 * 基调：冷静、克制、有分量的知识站。
 * 不做情侣站的粉色泛光，走「卡片 + 数字 + 引注」的杂志感。
 * 主色用深青（理性）+ 暖赭（人味），对比出「研究 + 情感」。
 * =========================================================== */

:root {
  /* 底色 */
  --bg:        #fbfbf9;
  --bg-soft:   #f3f4f1;
  --surface:   #ffffff;
  --surface-2: #eef0ed;

  /* 文字 */
  /* 2026-10-10 体检：原来 ink-3 #8a8a82 在底上只有 3.2 对比度，远低于正文要求的 4.5，
     而它承载的是页脚、副标题、出处、hint 这类大量小字——属于"看不清"，不是风格问题。
     现调到 4.7~5.4（在 bg / surface / surface-2 三种底上都达标）。 */
  --ink:   #1b1d1a;
  --ink-2: #4a4f48;
  --ink-3: #7d857c;

  /* 主色：深青（理性、可信） */
  --primary:      #0f766e;
  --primary-soft: #14b8a6;
  --primary-wash: #e6f4f1;

  /* 辅色：暖赭（情感、强调）
     原 #b06a3b 只有 3.9 对比度；调到 4.9，白字压在上面也从 4.2 提到 5.3。 */
  --warm:      #b45309;
  --warm-soft: #8a5a1e;
  --warm-wash: #faf1e6;

  /* 绛红：行动色（2026-10-15 江哥从截图指定 #ab3551）。
     分工：深青=知识与理性（导航/卡片/数字），绛红=行动与推进（全站主按钮）。
     白字压 #ab3551 对比 6.25:1（AA 达标）。 */
  --rose:      #ab3551;
  --rose-deep: #912d45;

  /* 危险：用于「末日四骑士」这类警示内容 */
  --danger:      #9c3b34;
  --danger-wash: #f6e8e6;

  /* 四色调：together / expand / scenarios 这些卡片密集页用它区分分组。
     原来散落在 components.css 里硬编码了 30 多处（还和变量对不上：赭色写成 #b0703c
     而 --warm 是 #b06a3b）。2026-10-10 收进变量，改一次全站生效。 */
  --tone-plain: #0f766e;
  --tone-cool:  #3f6f8f;
  --tone-warm:  #b45309;
  --tone-deep:  #2f7d6a;
  --tone-plain-wash: rgba(15,118,110,.10);
  --tone-cool-wash:  rgba(63,111,143,.10);
  --tone-warm-wash:  rgba(180,83,9,.10);
  --tone-deep-wash:  rgba(47,125,106,.10);

  /* 线 */
  --line:   #e5e6e1;
  --line-2: #d5d7d0;

  --shadow-sm: 0 1px 2px rgba(20,30,25,.04), 0 6px 20px -12px rgba(20,30,25,.10);
  --shadow-md: 0 2px 6px rgba(20,30,25,.06), 0 18px 40px -18px rgba(20,30,25,.18);
  --shadow-lg: 0 24px 60px rgba(20,30,25,.14);

  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 14px;
  --r-full: 999px;

  --font-serif: "Inter", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:  "Inter", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif-zh:   "Songti SC", "SimSun", "Noto Serif SC", Georgia, serif;

  --maxw: 1200px;
  --gap: 22px;

  /* 阅读宽度：用 em 写，字号变它会跟着变。
     ⚠️ 这个值对齐「知岁本源」的 prose 上限 720px（15px 下 48em ≈ 720px）。
     ⚠️ 2026-10-15：页面升到 1200px 后，白卡片已占满 874px 正文列；
        卡内正文原先被 --readw 收住、右侧空一大片（用户截图反馈），
        已改为卡内正文填满卡片（见 components.css 阅读层末尾放开 --readw 上限）。
        --readw 现在只作用于个别独立段落（如 .section__head），不再约束卡内正文。
     ⚠️ 这个值和 --maxw 是一对：--maxw(1200) − 容器padding(48) − 左栏(232) − gap(46) = 874
        正文列宽 874 − 卡片内边距(52) = 822，卡内正文现在填满这 822px（约 54 字/行）。 */
  --readw: 48em;
}

/* ---------- 重置 ---------- */
* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- 导航 ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(246,246,243,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 单行时就是 62px（--navh 的基线），用 min-height 而不是 height：
     万一哪项折到第二行，条子会跟着长高，而不是把第二行溢到正文上。
     2026-10-10 顶栏加到 8 项时踩过这个——固定 height 会把折行内容挤出去。 */
  min-height: 62px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  white-space: nowrap;
  text-decoration: none;
}

.nav__logo {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block;
}

.nav__logo svg { width: 100%; height: 100%; display: block; }

.nav__logo-a, .nav__logo-b { fill: none; stroke-width: 2.3; stroke-linecap: round; }
.nav__logo-a { stroke: var(--primary); }
.nav__logo-b { stroke: var(--primary-soft); }

.nav__word {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--brand-deep);
  line-height: 1;
  flex-shrink: 0;
}

.nav__sub {
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

.nav__links { display: flex; gap: 2px; flex-wrap: wrap; }

.nav__links a {
  padding: 7px 13px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-2);
  transition: background .18s, color .18s;
  white-space: nowrap;
}

.nav__links a:hover { background: var(--bg-soft); color: var(--ink); }
.nav__links a.is-active { background: var(--primary-wash); color: var(--primary); font-weight: 500; }

/* ---------- 区块 ---------- */
.section { padding: 60px 0; }
.section--tight { padding: 40px 0; }

.section__head { margin-bottom: 30px; max-width: var(--readw); }

.section__eyebrow {
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--primary);
  font-weight: 600;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.section__title {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
  margin: 0 0 12px;
}

.section__desc {
  font-size: 16px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.85;
}

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.card--hover { transition: box-shadow .2s, transform .2s, border-color .2s; }
.card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-2); }

/* ---------- 引用 / 出处 ---------- */
.src {
  display: inline-block;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .02em;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  width: 100%;
}

.src::before { content: "出处 · "; color: var(--primary-soft); font-weight: 600; }

/* ---------- 标签 ---------- */
.tag {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--primary-wash);
  color: var(--primary);
  font-weight: 600;
}

.tag--warm { background: var(--warm-wash); color: var(--warm); }
.tag--danger { background: var(--danger-wash); color: var(--danger); }

/* ---------- 数字 ---------- */
.num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  line-height: 1;
}

/* ---------- 页脚 ---------- */
.footer {
  border-top: 1px solid var(--line);
  margin-top: 70px;
  padding: 40px 0 52px;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.9;
}

/* 友情链接（跨站统一，自包含配色，不依赖主题变量） */
.sf-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:18px;margin-top:18px;border-top:1px solid var(--line);}
.sf-links-label{font-size:12.5px;color:var(--ink-3);white-space:nowrap;}
.sf-links-row{display:flex;gap:18px;flex-wrap:wrap;}
.sf-links-row a{font-size:13px;color:var(--ink-2);text-decoration:none;transition:color .15s;}
.sf-links-row a:hover{color:var(--primary, #9c3d3d);}

/* 触屏热区：这 6 个链接字高只有 25px，远低于 44px 的下限，
   而它出现在**每一页**的页脚，所以是全站性的小热区。
   用站里既有做法（.qgroup__from / .essay__go 同款）挂 ::after 向外撑，
   视觉一点不动，只是把可点区域撑到 44。 */
@media (max-width: 860px), (pointer: coarse) {
  .sf-links-row a { position: relative; }
  .sf-links-row a::after { content: ""; position: absolute; inset: -10px -6px; }
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.85fr);
  gap: 44px;
  margin-bottom: 30px;
}

.footer__brand { min-width: 0; }

.footer__quick {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
}

.footer__quick a { color: var(--ink-2); }
.footer__quick a:hover { color: var(--primary); }
.footer__quick a[aria-current="page"] { color: var(--primary); font-weight: 600; }

/* 页脚里的全站目录：四列，跟顶部导航同一套分组 */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 26px;
  min-width: 0;
}

.footer__col { min-width: 0; }

.footer__coltitle {
  margin: 0 0 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-2);
}

.footer__col a {
  display: block;
  padding: 2px 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-3);
}

.footer__col a:hover { color: var(--primary); }
.footer__col a[aria-current="page"] { color: var(--primary); font-weight: 600; }

.footer__title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}

.footer__quote {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 2;
  margin: 0;
}

.footer__base {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
}

.footer__meta { line-height: 1.7; }

/* ---------- 工具类 ---------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.serif { font-family: var(--font-serif); }
.center { text-align: center; }
.muted { color: var(--ink-3); }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .section { padding: 42px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .section__title { font-size: 24px; }
  .footer__nav { grid-template-columns: 1fr; }
}