/* ============================================================
   昊哥网站工坊 · 设计系统 base.css
   宪法 v2 第 5 条：纸感灰黑 + 工程精密感
   token 是唯一事实源，积木不许写死颜色。
   ============================================================ */
:root {
  --bg: #F6F5F2;          /* 纸感底 */
  --ink: #16171A;         /* 近黑正文 */
  --grey: #69696B;        /* 次级文字（对纸底 5.02:1、对灰底 4.77:1，两处都达标） */
  --faint: #9A968E;       /* ⚠️ 只用于装饰性线条和底纹，绝不用于文字（对纸底仅 2.45:1） */
  --line: #E4E2DD;        /* 1px 细线 */
  --line-2: #CFCBC4;
  --accent: #1A5E48;      /* 全站唯一彩色：仪表绿 */
  --dark: #141518;        /* 车牌横栏 */
  --bar: 118px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* 标签制：中文 (ENGLISH) —— 整站气质最大的来源 */
.tag { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; }
.tag .en { color: var(--grey); font-weight: 400; }
.blk { font-family: var(--mono); font-size: 10px; color: var(--grey); letter-spacing: .1em; text-transform: uppercase; }

/* ============================================================
   车牌横栏 —— 一进来「咔」一下，说清这站解决什么问题
   ============================================================ */
.plate {
  position: fixed; top: 0; left: 0; right: 0; height: var(--bar); z-index: 50;
  background: var(--dark); color: #fff;
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
}
.plate-l { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px rgba(26, 94, 72, .3); }
.plate-txt { min-width: 0; }
.plate h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate .sub { font-size: 12px; color: rgba(255, 255, 255, .66); margin-top: 6px; font-family: var(--mono); letter-spacing: .03em; }
.plate-r { text-align: right; font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, .72); letter-spacing: .09em; text-transform: uppercase; flex: none; padding-left: 24px; }
.plate-r b { display: block; color: #fff; font-weight: 500; }
.plate-r span { color: rgba(255, 255, 255, .45); }

/* ============================================================
   三栏骨架：左=事的目录  中=事的内容流  右=人
   ============================================================ */
.frame { display: flex; padding-top: var(--bar); height: 100vh; }
.col-l, .col-r { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); overflow-y: auto; padding: 26px 22px; }
.col-l { width: 20%; min-width: 236px; flex: none; border-right: 1px solid var(--line); }
.col-m { flex: 1; min-width: 0; height: calc(100vh - var(--bar)); overflow-y: auto; border-right: 1px solid var(--line); }
.col-r { width: 26%; min-width: 300px; flex: none; }

/* ---------------- 左栏：目录（事） ---------------- */
.nav { margin-top: 18px; }
.nav .grp { margin-bottom: 20px; }
.nav .grp > .blk { display: block; padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid var(--line); }
.nav a { display: block; text-decoration: none; color: var(--ink); font-size: 12.5px; padding: 6px 0 6px 11px; position: relative; line-height: 1.5; }
.nav a::before { content: ""; position: absolute; left: 0; top: 13px; width: 3px; height: 1px; background: var(--line-2); }
.nav a:hover::before { background: var(--accent); width: 7px; }
.nav a .n { font-family: var(--mono); font-size: 10px; color: var(--grey); float: right; letter-spacing: .04em; }
.latest { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.latest .blk { display: block; margin-bottom: 8px; }
.latest .it { padding: 7px 0; border-bottom: 1px solid var(--line); }
.latest .it p { font-size: 12px; line-height: 1.5; }
.latest .it span { font-family: var(--mono); font-size: 10px; color: var(--grey); }

/* 待写态：还没写的内容就显示成待写，不放假的 # 链接（宪法第 7 条第 1 款）
   注意：颜色必须过 4.5:1 —— 「待写」是有意义的文字，不能靠降低对比度来做层级。
   区分靠的是：可点的用近黑 + 悬停有下划线，待写的用灰 + 有 ○ 标记 + 无悬停反馈。 */
.nav .todo { display: block; font-size: 12.5px; padding: 6px 0 6px 11px; position: relative; color: var(--grey); line-height: 1.5; cursor: default; }
.nav .todo::before { content: ""; position: absolute; left: 0; top: 13px; width: 3px; height: 1px; background: var(--line); }
.nav .todo .n { font-family: var(--mono); font-size: 10px; color: var(--grey); float: right; letter-spacing: .04em; }
.nav a.cur { color: var(--accent); }
.nav a.cur::before { background: var(--accent); width: 7px; }
.legend { margin-top: 14px; font-family: var(--mono); font-size: 10px; color: var(--grey); letter-spacing: .06em; }

/* 微交互：精确的操作反馈，不是糖果动效（宪法第 1 条动效准入） */
.nav a { transition: color .18s ease; }
.nav a::after {
  content: ""; position: absolute; left: 11px; right: 0; bottom: 4px; height: 1px;
  background: currentColor; opacity: .28;
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.nav a:hover::after { transform: scaleX(1); }
.cta a { transition: transform .12s ease, border-color .18s ease; }
.cta a:active { transform: translateY(1px); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .rail .s::before { transform: scaleX(1); }
}

/* ---------------- 中栏（doc 型）：长文页 ---------------- */
.docwrap { padding: 0 28px 90px; max-width: 46em; }
.dintro {
  font-size: 15px; line-height: 1.75; padding: 14px 16px; margin-bottom: 34px;
  border-left: 2px solid var(--accent); background: rgba(26, 94, 72, .045); color: var(--ink);
}
.dsec { margin-bottom: 42px; }
.dsec .dh {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); font-weight: 500; padding-bottom: 9px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.docwrap p { font-size: 13.5px; line-height: 1.85; margin-bottom: 13px; }
.qa-item { padding: 15px 0; border-bottom: 1px solid var(--line); }
.qa-item:last-child { border-bottom: 0; }
.qa-item h3 { font-size: 15px; line-height: 1.5; font-weight: 600; letter-spacing: -.01em; margin-bottom: 7px; }
.qa-item h3::before { content: "Q  "; font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .06em; }
.qa-item p { font-size: 13px; color: #3A3C40; line-height: 1.8; margin: 0; }
.qa-item p::before { content: "A  "; font-family: var(--mono); font-size: 11px; color: var(--grey); letter-spacing: .06em; }
.qa-item.pend h3 { color: var(--grey); }
.qa-item.pend h3::before { color: var(--line-2); }
.qa-item .pendnote { color: var(--grey); font-size: 12.5px; font-style: normal; }
.qa-item .pendnote::before { content: ""; }
.dlist { margin: 0 0 16px; padding-left: 0; list-style: none; }
.dlist li { font-size: 13.5px; line-height: 1.85; padding-left: 16px; position: relative; }
.dlist li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 1px; background: var(--line-2); }

/* 链接列表：笔记索引 / 相关阅读 */
.dlinks { list-style: none; margin: 0 0 16px; padding: 0; }
.dlinks li { border-bottom: 1px solid var(--line); padding: 10px 0; }
.dlinks li:first-child { border-top: 1px solid var(--line); }
.dlinks a { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.dlinks a:hover { color: var(--accent); }
.dlinks span { display: block; font-size: 12px; color: var(--grey); margin-top: 3px; line-height: 1.6; }
.dnote { font-size: 12.5px; color: var(--grey); border-left: 2px solid var(--line-2); padding-left: 12px; }

/* ---------------- 中栏：内容流（事） ---------------- */
.m-head { display: flex; align-items: baseline; justify-content: space-between; padding: 26px 28px 16px; }
.m-head .more { font-family: var(--mono); font-size: 11px; color: var(--grey); letter-spacing: .06em; }
.m-head .more a { color: var(--grey); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 1px; }
.m-head .more a:hover { color: var(--accent); border-color: var(--accent); }
.stream { padding: 0 28px 90px; display: flex; flex-direction: column; gap: 46px; }

/* ---------------- 封面：抢点击的第一眼 ---------------- */
.cover { position: relative; overflow: hidden; background: #EDEBE6; }
.cover .txt {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 18px 15px;
  background: linear-gradient(to top, rgba(10, 11, 12, .84), rgba(10, 11, 12, .44) 46%, transparent);
  color: #fff;
}
.cover .txt .main { font-size: 23px; font-weight: 700; letter-spacing: -.01em; line-height: 1.28; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.cover .txt .sub { font-size: 11.5px; color: rgba(255, 255, 255, .8); margin-top: 5px; font-family: var(--mono); letter-spacing: .05em; }
.vid {
  position: absolute; top: 12px; right: 12px; background: rgba(10, 11, 12, .72); color: #fff;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding: 4px 8px;
  display: flex; align-items: center; gap: 5px;
}
.vid i { width: 0; height: 0; border: 4px solid transparent; border-left-color: #fff; border-right: 0; display: block; }

/* 拼图规则：图数不同 → 版式不同，绝不等分切格 */
.single { height: 236px; border: 1px solid var(--line); background: #F1EFEA; display: flex; align-items: flex-start; padding: 12px; }
.puz-2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 2px; height: 236px; }
.puz-3 { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 250px; }
.puz-3 .t:first-child { grid-row: span 2; }
.puz-4 { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 264px; }
.puz-4 .t:first-child { grid-row: span 2; }
.puz-6 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 2px; height: 250px; }
.puz-9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: 288px; }
.puz-2 .t, .puz-3 .t, .puz-4 .t, .puz-6 .t, .puz-9 .t { border: 1px solid var(--line); background: #F1EFEA; position: relative; }
.puz-2 .t::after, .puz-3 .t::after, .puz-4 .t::after, .puz-6 .t::after, .puz-9 .t::after {
  content: attr(data-l); position: absolute; left: 9px; top: 8px;
  font-family: var(--mono); font-size: 10px; color: #9A968E; letter-spacing: .08em;
}

/* 四步闭环：横向轨道 + 回环线
   签名动效：一条 2px 线依次扫过四格 —— 像仪表自检。
   没有 JS 时只有第一格亮（.on），内容照样完整可读。 */
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 172px; }
.rail .s { position: relative; border: 1px solid var(--line); background: #F1EFEA; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.rail .s::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.rail .s.on::before, .rail .s.lit::before { transform: scaleX(1); }
.rail .s.lit { background: #FFFFFF; }
.rail .s.lit .n { color: var(--accent); transition: color .4s ease; }
.rail .n { font-family: var(--mono); font-size: 10px; color: var(--grey); letter-spacing: .1em; }
.rail .lb { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.rail .sm { font-size: 11px; color: var(--grey); margin-top: 2px; font-family: var(--mono); }

/* 中栏阅读进度：1px 线（由 motion.js 注入） */
.hg-progress { position: sticky; top: 0; height: 1px; background: var(--line); z-index: 5; }
.hg-progress::after {
  content: ""; display: block; height: 1px; background: var(--accent);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}
.ret { position: relative; height: 40px; }
.ret .ln { position: absolute; left: 9px; right: 9px; top: 17px; height: 1px; background: var(--line); }
.ret .ar { position: absolute; left: 4px; top: 13px; width: 0; height: 0; border: 5px solid transparent; border-right-color: var(--line-2); }
.ret .tx {
  position: absolute; left: 50%; top: 17px; transform: translate(-50%, -50%);
  background: var(--bg); padding: 0 9px; font-family: var(--mono); font-size: 10px;
  color: var(--grey); letter-spacing: .06em; white-space: nowrap;
}

/* ---------------- 卡身：三段论 人群→问题→解决 ---------------- */
.cbody { padding-top: 13px; }
.crow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.who { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--accent); border: 1px solid rgba(26, 94, 72, .32); padding: 2px 7px; background: rgba(26, 94, 72, .05); }
.kind { font-family: var(--mono); font-size: 10px; color: var(--grey); letter-spacing: .08em; text-transform: uppercase; }
.cbody h3 { font-size: 17px; line-height: 1.45; letter-spacing: -.01em; font-weight: 600; }
.ans { font-size: 12.5px; color: var(--grey); margin-top: 7px; line-height: 1.72; }
.meta { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-family: var(--mono); font-size: 10.5px; color: var(--grey); letter-spacing: .06em; }
.meta .sep { color: var(--line); }

/* 空态卡：真实存在但素材未到 —— 绝不编造 */
.empty { border: 1px dashed #D5D2CB; padding: 30px 22px; text-align: center; }
.empty .k { font-family: var(--mono); font-size: 10px; color: var(--grey); letter-spacing: .1em; margin-bottom: 7px; }
.empty p { font-size: 13px; }
.empty small { display: block; font-size: 11.5px; color: var(--grey); margin-top: 5px; line-height: 1.7; }

/* ---------------- 右栏：人（全站唯一一处） ---------------- */
.portrait { margin: 16px 0 12px; aspect-ratio: 1/1; border: 1px solid var(--line); background: #EDEBE6; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.portrait span { font-family: var(--mono); font-size: 10.5px; color: var(--grey); letter-spacing: .06em; line-height: 1.9; }
.whoami { font-size: 13px; margin-bottom: 4px; }
.whoami b { font-weight: 600; }
.whoami span { font-family: var(--mono); font-size: 10.5px; color: var(--grey); letter-spacing: .05em; }

/* 05:00 仪表条：把「每天 5 点开工」画出来 —— 携带信息，不是装饰 */
.pulse { position: relative; height: 38px; margin: 14px 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pulse .tk { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 9px); opacity: .8; }
.pulse .mk { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent); }
.pulse .lb { position: absolute; left: 0; top: 5px; background: var(--bg); padding-right: 7px; font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: .06em; }
.pulse svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 问答式档案：按用户的疑问顺序排 */
.qa { border-top: 1px solid var(--line); }
.qa .r { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.qa .r > span { width: 74px; flex: none; font-size: 11.5px; color: var(--grey); padding-top: 1px; }
.qa .r p { font-size: 12.5px; line-height: 1.65; }

/* 我不做什么 —— 反差元素，右栏的王牌 */
.nope { margin-top: 22px; border: 1px solid var(--ink); padding: 14px 15px 16px; }
.nope .h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.nope .h b { font-size: 13.5px; font-weight: 600; }
.nope .h em { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--grey); letter-spacing: .09em; }
.nope .i { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 12.5px; }
.nope .i::before { content: "✕"; font-size: 11px; color: var(--accent); font-weight: 700; }

.cta { margin-top: 20px; display: flex; gap: 9px; }
.cta a { flex: 1; text-align: center; text-decoration: none; font-size: 12.5px; padding: 11px 0; border: 1px solid var(--ink); color: #fff; background: var(--ink); letter-spacing: .02em; }
.cta a.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.cta a.ghost:hover { border-color: var(--ink); }

/* ============================================================
   滚动入场 —— 纯 CSS，零 JS
   宪法第 7 条第 5 款：透明度下限 .55，绝不用 opacity:0。
   AI 爬虫不滚动 → 滚动驱动动画永不触发 → opacity:0 等于爬虫看到空白。
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card { animation: hg-rise linear both; animation-timeline: view(); animation-range: entry 8% cover 34%; }
    @keyframes hg-rise { from { opacity: .55; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  }
}

/* ============================================================
   手机：目录退化到顶部，人跟到最后
   ============================================================ */
@media (max-width: 1080px) {
  :root { --bar: auto; }
  .plate { position: static; height: auto; padding: 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .plate h1 { font-size: 22px; white-space: normal; line-height: 1.3; }
  .plate-r { text-align: left; padding-left: 0; }
  /* 手机上换成 flex 才能调顺序：内容 → 人 → 目录。
     目录有 15 项，放在最前面会把内容顶到很远——它是索引，不是主角。 */
  .frame { display: flex; flex-direction: column; height: auto; padding-top: 0; }
  .col-m { order: 1; }
  .col-r { order: 2; }
  .col-l { order: 3; }
  .col-l, .col-r { width: auto; min-width: 0; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 20px; }
  .col-m { height: auto; overflow: visible; border-right: 0; }
  .nav { margin-top: 14px; }
  .nav .grp { margin-bottom: 16px; }
  /* 手指不是鼠标：可点区域一律 ≥ 44px（宪法第 6 条移动端要求） */
  .nav a, .nav .todo { min-height: 44px; display: flex; align-items: center; padding-left: 15px; }
  .nav a::before, .nav .todo::before { top: 50%; transform: translateY(-50%); }
  .nav a .n, .nav .todo .n { float: none; margin-left: auto; padding-left: 10px; }
  .nav a::after { left: 15px; bottom: 12px; }
  .stream { padding: 0 20px 60px; gap: 40px; }
  .m-head { padding: 22px 20px 14px; }
  .puz-2, .puz-3, .puz-4, .puz-6 { grid-template-columns: 1fr 1fr; height: auto; min-height: 200px; }
  .puz-3 .t:first-child, .puz-4 .t:first-child { grid-row: span 1; grid-column: span 2; min-height: 130px; }
  .puz-9 { height: 320px; }
  .rail { grid-template-columns: 1fr 1fr; height: auto; }
  .rail .s { min-height: 100px; }
  .cover .txt .main { font-size: 19px; }
  .ret .tx { font-size: 9.5px; letter-spacing: .02em; }
  .portrait { max-width: 210px; }
}