/* =====================================================================
 * 其一 · 首页（landing）
 * ---------------------------------------------------------------------
 * 作用域：body[data-page="home"]。本文件只被 index.html 加载。
 *
 * 设计出处：ui-design-runs/我要改首页你发挥你的创意-20260911-104644-c018
 *   —— 一屏一命题：晨雾山水满版，右侧浅雾区落文案，左侧竖排小字，
 *      底部干支书口。去掉旧版首页的模块墙（卡片入口改由顶栏导航与
 *      移动端底栏承担），首屏只做一件事：让人看懂这是干什么的。
 *
 * 落地时的三处工程化改写（与参考稿不同，均为站点既有约束所致）：
 *   1. 参考稿把 <header> 绝对定位压在图上；本站 header 是全站共用的
 *      sticky 组件（10 个页签 + 登录区，删不得）。这里不动布局，
 *      改让「媒体层向上延伸到 y=0」——头部保持 sticky 与既有 DOM 契约，
 *      视觉上仍是无缝压在山水上。头部高度由 home.js 实测写入 --land-head，
 *      换行/断点变化都不会露出纸色缝。
 *   2. 参考稿正文用绝对定位（短屏会压到书口）。这里改用 flex 纵列：
 *      正文 flex:1 居中、书口 flex:0 0 auto 贴底 —— 内容永远不会互相盖住。
 *   3. 参考稿自带 Google Fonts；本站离线优先且已有本地 --serif（霞鹜文楷）
 *      与 --sans，一律走站点令牌，不外链字体。
 *
 * 令牌口径：色彩沿用 styles.css 的 --ink / --cinnabar；
 *   仅「暖墨」一档在首页本地化（--land-ink #24211c）—— 画面是暖调晨雾，
 *   站点的冷墨 #18232a 压上去会发灰。这是首页专属取舍，不外溢到别的页。
 * ===================================================================== */

body[data-page="home"] {
  --land-ink: #24211c;        /* 暖墨：正文与实心按钮 */
  --land-ink-soft: #4a453c;
  --land-muted: #7a7468;
  --land-paper: #f2efe7;      /* 与 --bg(#efeee7) 同族，略暖，用作雾与兜底 */
  --land-cinnabar: var(--cinnabar, #a93a2e); /* 朱砂强调：站点令牌，不另立色号 */
  --land-gut: clamp(20px, 4.6vw, 80px);
  --land-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* 顶栏高度与页内常驻条（站内公告）的高度：默认给足，home.js 实测覆盖 */
  --land-head: var(--header-h, 68px);
  --land-chrome: 0px;
  /* 画面底部被固定层占掉的高度（移动端底栏 + 停靠态公告），书口据此让位。
     默认值给的是底栏的确定高度（enhance.css --qiyi-bar-h: 70px），
     home.js 量到实际值后覆盖，公告胶囊出现时也能跟着让。 */
  --land-dock: 0px;
  /* 桌面端左下角的「此刻时辰仪」（nowdial.js 注入，58px 圆片 @ left:18 bottom:18）。
     它压在书口的正上方，实测会把「五术 · 医易同源」糊掉，量到多宽就右移多少。 */
  --land-dial: 0px;
}

/* ============================ 顶栏 ============================ */

/* 首页头部融进画面：透明的是一条底，不是布局 —— sticky 与 DOM 契约全保留。
   滚动到页脚时头部下方是纸面，墨色页签照样可读，不需要额外的滚动态。 */
body[data-page="home"] .site-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* 顶部再压一层极淡的纸光，保证晴朗天空下页签也有足够对比 */
body[data-page="home"] .site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(242, 239, 231, 0.72) 0%,
    rgba(242, 239, 231, 0.34) 62%,
    rgba(242, 239, 231, 0) 100%
  );
}

/* 首屏右下已有「起一局」主 CTA（layout.js 会给桌面端插一个顶部「开始排盘」，
   一屏两个同义按钮是噪声，首页隐去；其余页面不受影响） */
body[data-page="home"] .header-cta {
  display: none;
}

/* 公告条：首页压在山水上，改成一层薄雾，别把画面切两半 */
body[data-page="home"] .site-notice {
  background: rgba(250, 249, 242, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(184, 134, 47, 0.24);
}

/* 菜单按钮：用全站统一的墨底米字胶囊（enhance v25 定稿）。
   旧稿「浅色天空上更实的底」覆盖已删——它只改底色不改字色，
   墨底定稿后米白字落回浅底上几乎不可见（2026-09-13 修复）。 */

/* PWA 安装卡（layout.js 运行时注入 <style>，故此处必须抬一级选择器才压得住）：
   两件事——
   ① 换锚点：它默认贴在右下角（desktop right:18 bottom:96 / 移动端 dock 之上），
      而首页的正文与「起一局」正好落在右下 —— 1024×768 实测直接压住主按钮，
      375×844 更狠，整块盖住 CTA。首页首屏只有一屏可让，改挂到顶栏之下：
      那里是空白天光，卡片压上去不伤任何人。
   ② 褪成薄雾玻璃：别在山水上贴一块白板。 */
body[data-page="home"] .qiyi-a2hs {
  top: calc(var(--land-head, 68px) + 16px);
  bottom: auto;
  background: rgba(255, 254, 251, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(90, 60, 20, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ============================ 主体 ============================ */

/* main 归零：首页要全出血，取消全站 main 的 1240px 栏宽与内边距 */
body[data-page="home"] main.land-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* 一屏高度 = 视口 − 顶栏 − 页内常驻条。
   max(360px, …) 兜住横屏手机这种"视口比内容还矮"的极端，不让它压扁 */
body[data-page="home"] .land-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: max(360px, calc(100vh - var(--land-head) - var(--land-chrome)));
  min-height: max(360px, calc(100svh - var(--land-head) - var(--land-chrome)));
  background: var(--land-paper);
}

/* ---- 媒体层：向上顶到 y=0，于是画面从顶栏底下就开始 ---- */
body[data-page="home"] .land-media {
  position: absolute;
  left: 0;
  right: 0;
  /* 多给 8px 冗余：实测值写入有 1px 取整误差时，宁可多探出一点（页面顶端之外
     本就不可见），也不要露出纸色缝 */
  top: calc(-1 * var(--land-head) - 8px);
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--land-paper);
}

/* 背景走 CSS url()：服务端 asset_versions 会给它与 <link rel="preload"> 注入
   同一个指纹地址，避免同图两 URL 下两次（见首页 head 里的预加载说明） */
body[data-page="home"] .land-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/backgrounds/hero-landscape.jpg?v=3fc8b13a") center / cover no-repeat;
  transform-origin: 50% 50%;
  animation: land-drift 30s var(--land-ease) infinite alternate;
}

/* 静场缓推：30 秒级、只走 2% 位移 —— 是画面在呼吸，不是动效在表演 */
@keyframes land-drift {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.1) translate3d(-1.6%, -0.8%, 0);
  }
}

/* 雾：右侧提亮给正文让位（参考稿的核心手法），上下各缓一口气 */
body[data-page="home"] .land-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(242, 239, 231, 0) 32%,
      rgba(242, 239, 231, 0.46) 64%,
      rgba(242, 239, 231, 0.7) 100%
    ),
    linear-gradient(
      180deg,
      rgba(242, 239, 231, 0.3) 0%,
      rgba(242, 239, 231, 0) 16%,
      rgba(242, 239, 231, 0) 84%,
      rgba(242, 239, 231, 0.38) 100%
    );
}

/* ---- 竖排小字：压在左侧山影上（站点两句主张，竖排是内容本身的意思） ---- */
body[data-page="home"] .land-side {
  position: absolute;
  left: var(--land-gut);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6em;
  color: rgba(36, 33, 28, 0.4);
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  user-select: none;
}

/* ---- 正文 ---- */
body[data-page="home"] .land-stage {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(28px, 5vh, 72px) var(--land-gut);
}

body[data-page="home"] .land-copy {
  /* 参考稿是 max-width:520px；min(520px,54vw) 只在 <963px 才生效，
     而 <860px 已进移动端分支（改 34em），故两条在各自生效区间的表现一致。
     保留本站写法：它多兜住 860~963px 这一段窄桌面（真站有 sticky 顶栏，比参考稿更挤）。 */
  max-width: min(520px, 54vw);
}

body[data-page="home"] .land-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.28;
  letter-spacing: 0.06em;
  color: var(--land-ink);
  margin: 0;
}

body[data-page="home"] .land-title .land-accent {
  color: var(--land-cinnabar);
}

body[data-page="home"] .land-cta-row {
  margin-top: clamp(28px, 4vh, 40px);
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* 实心墨块 + 疏排宋体：这套排印对着山水才立得住，不用站点默认的胶囊圆角 */
body[data-page="home"] .land-cta {
  display: inline-flex;
  align-items: center;
  padding: 15px 40px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--land-paper);
  background: var(--land-ink);
  border: 1px solid var(--land-ink);
  border-radius: 0;
  text-decoration: none; /* 实心墨块不是文本链接，浏览器默认下划线关掉（2026-09-13） */
  transition: background-color 0.35s var(--land-ease),
    color 0.35s var(--land-ease);
}

body[data-page="home"] .land-cta:hover,
body[data-page="home"] .land-cta:focus-visible {
  background: transparent;
  color: var(--land-ink);
}

/* ---- 书口：干支由 /api/today 现算填入（home.js），不是文案硬编码 ---- */
body[data-page="home"] .land-colophon {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  /* 左侧让开时辰仪圆片（--land-dial 由 home.js 实测），否则书口首字被圆片压住 */
  padding: 0 var(--land-gut) clamp(24px, 3.4vh, 34px)
    calc(var(--land-gut) + var(--land-dial, 0px));
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--land-muted);
}

body[data-page="home"] .land-colophon .land-rule {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(36, 33, 28, 0.16);
}

/* 无 JS 时也不露白：底注兜底文案写在 HTML 里 */
body[data-page="home"] #land-ganzhi {
  font-variant-numeric: tabular-nums;
}

/* ---- 屏读文本：视觉上不出现，给检索与辅助技术留一条正经描述 ---- */
body[data-page="home"] .land-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================ 入场 ============================ */

@keyframes land-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes land-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body[data-page="home"] .land-rise {
  animation: land-rise 0.95s var(--land-ease) both;
  animation-delay: var(--land-d, 0ms);
}

body[data-page="home"] .land-media {
  animation: land-fade 1.2s ease both;
}

/* ============================ 断点 ============================ */

@media (max-width: 860px) {
  body[data-page="home"] {
    --land-head: 56px;         /* styles.css 移动端 .site-header min-height（实测 40，JS 会覆盖） */
    --land-gut: clamp(18px, 5vw, 30px);
    --land-dock: 70px;         /* enhance.css --qiyi-bar-h 实测值；JS 量到实际值后覆盖 */
  }

  /* 参考稿的移动端取向：文案落底居中，雾改成自下而上 */
  body[data-page="home"] .land-media::after {
    background:
      linear-gradient(
        180deg,
        rgba(242, 239, 231, 0) 26%,
        rgba(242, 239, 231, 0.62) 62%,
        rgba(242, 239, 231, 0.86) 100%
      ),
      linear-gradient(180deg, rgba(242, 239, 231, 0.26) 0%, rgba(242, 239, 231, 0) 14%);
  }

  body[data-page="home"] .land-stage {
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
  }

  body[data-page="home"] .land-copy {
    max-width: 34em;
    text-align: center;
  }

  body[data-page="home"] .land-cta-row {
    justify-content: center;
  }

  body[data-page="home"] .land-side {
    display: none;             /* 窄屏没地方给竖排，别硬塞 */
  }

  /* 书口让开底部固定层（底栏 / 停靠态公告）+ 安全区，让画面一直铺到屏幕底 */
  body[data-page="home"] .land-colophon {
    padding-bottom: calc(
      clamp(20px, 3vh, 30px) + var(--land-dock, 70px) + env(safe-area-inset-bottom, 0px)
    );
  }

  body[data-page="home"] .land-cta {
    padding: 14px 34px;
  }
}

/* 矮屏（横屏手机、小笔记本）：收紧竖向节奏，别让正文顶着书口 */
@media (max-height: 620px) {
  body[data-page="home"] .land-title {
    font-size: clamp(28px, 4.6vw, 40px);
  }
}

/* ============================ 无障碍 / 打印 ============================ */

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .land-rise,
  body[data-page="home"] .land-media {
    animation: none;
    opacity: 1;
    transform: none;
  }

  body[data-page="home"] .land-media::before {
    animation: none;
  }
}

@media print {
  body[data-page="home"] .land-media {
    display: none;
  }

  body[data-page="home"] .land-hero {
    min-height: 0;
    color: #000;
  }
}

/* =====================================================================
 * 与参考稿对齐（2026-09-11）
 * ---------------------------------------------------------------------
 * 出处：用户给的首页参考稿（f44dddac…/index.html）。本区块只写「可移植的
 * 标量」——font-size 的 clamp 值、line-height、letter-spacing 的 em 值、
 * margin/padding/gap 的 px 或 clamp、颜色与透明度、max-width。
 *
 * 刻意不做的事（理由见文件头与下方逐条注释）：
 *   · 不照着参考稿的字形宽窄反推字号：参考稿外链 Noto Serif SC，离线截图时
 *     它根本没加载（回退系统衬线）；本站标题是霞鹜文楷（--serif 首项），
 *     字面更宽。拿它的视觉宽度当标尺会改坏设计值。
 *   · 不动顶栏 .tabs 的 gap/字号：参考稿 nav 是 6 个纯文本链，本站是 10 个
 *     min-width:72px 的胶囊，参考稿的 gap:32px 在这里等于「视觉间距」而
 *     不是「链接间距」，直接搬会让本来就满的 10 项头更挤（实测见下）。
 *   · 不改移动端断点：参考稿 900px，本站 860px，与全站底部栏折叠阈值一致。
 * ===================================================================== */

/* #1 hero 兜底高度：参考稿 .hero{height:100svh;min-height:640px}（body 另挂
   overflow:hidden）。本站 min-height 是「视口 − 顶栏 − 站内公告」，兜底值也
   跟着降到参考稿的 640px —— 兜底抬高会把短屏首页顶出纵向滚动，与「首屏即
   一屏、首页不滚」冲突（真实数值验证见报告）。 */
body[data-page="home"] .land-hero {
  min-height: max(640px, calc(100vh - var(--land-head) - var(--land-chrome)));
  min-height: max(640px, calc(100svh - var(--land-head) - var(--land-chrome)));
}

/* #1b 首页不滚（两处根因，都在本区块内修掉）

   根因①：layout.js 给每页注入 <footer class="site-footer">（桌面 198px / 移动
     397px），首屏 hero 已正好占满一屏，页脚只能挂在折叠线以下 —— 首屏下方永远
     多一条空滚。参考稿根本没有页脚（body 还挂了 overflow:hidden），视觉意图是
     「一屏一个命题」。首页隐去页脚。
     ⚠️ 合规代价：这个页脚不只是导航，它是 2026-09-06 为「投流合规」加的
     （styles.css:2390 注释登记），承载 AI 生成定性 / 18+ / 退费指引 /
     不替代专业判断，设计意图是「全站覆盖」。首页是全站流量最大的页面，
     隐掉它 = 在最大流量页面上撤掉这些声明。因此**不能只隐不补** ——
     index.html 的 .land-colophon 里已补一条常驻可见的合规短句把四要素留住，
     见下方 .land-compliance。这条属于「首屏一屏 vs 合规声明」的取舍，
     已作为待用户拍板项写进交付报告，不是已定论。
     其它 14 页照常显示页脚；不动 layout.js，不删 DOM（爬虫仍看得到）。
   根因②：enhance.css:942 的 body.has-bottom-tabs{padding-bottom:84px} 是给
     普通长页留底栏位置的。首页不需要：.land-hero 用的是 100svh，这 84px 不会
     被 hero 吸收，只会把文档顶到 928px（视口 844）→ 84px 空滚；而书口已经用
     --land-dock 自己让开了底栏。首页归零。 */
body[data-page="home"] .site-footer {
  display: none;
}

body[data-page="home"].has-bottom-tabs {
  padding-bottom: 0;
}

/* #1c 合规短句（配合 #1b）：等宽压在书口之上，不抢干支那一行。
   四要素在文案里，不在这里：不替代专业判断 / AI 生成 / 仅供研究与娱乐参考 / 18+。
   字号 9px 是实测定的：390px 下可用宽 351px，这句排 2 行；桌面 1440/1280 下
   同一句是 1 行。9px 与书口自身的 11px 同量级，不会在底部长出一个"第二段"。
   纵向压紧：line-height 1.5（13.5px）+ 与干支行 8px 间距，实测三档都没把
   正文挤出首屏（见交付报告几何表）。 */
body[data-page="home"] .land-compliance {
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: inherit;
}

body[data-page="home"] .land-compliance a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 书口由「一行三件」改成「合规句 + 干支行」两行：外层转纵列、原三件包成一行。
   两个坑，都在这里填掉：
     ① 外层原本 gap:22px 是「横向」三件的间距；换成纵列后它会变成两行之间的
        行距，把书口凭空撑高 22px。所以外层 gap 另设 8px，横向 22px 交回给
        .land-colophon-row（与原观感一致）。
     ② 桌面右下的「返回顶部」圆片是 fixed（enhance.css:2237，right:20 宽 40 /
        移动端 right:14 宽 36），落在书口最后一件 "qiyi.site" 上 —— 实测 1440
        下圆片覆盖它 40×15px、1280 下 1.1×15px，390 下 30.5×14.7px。
        首页现在不滚（#1b），回顶钮按 layout.js:721 的 1.4 倍阈值永远不会出现，
        但「把位置留出来」比「依赖它不出现」稳：右侧多留 78px（圆片 + 边距）。
        注意不能用 margin-inline 负值去抵消左侧 --land-dial：那会把盒子推宽到
        右边溢出（实测 1440 下 p 宽 1379.5、right 1445.8 → 5.8px 横向滚动）。
        改成只调书口自己的左右 padding，宽度仍在盒内。 */
body[data-page="home"] .land-colophon {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-right: calc(var(--land-gut) + 78px);
}

body[data-page="home"] .land-colophon-row {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* #2 标题：参考 h2{font-size:clamp(30px,3.4vw,48px);line-height:1.3}
   本站曾是 clamp(32px,4.2vw,56px)/1.28 —— 参考稿的正文块明显更收敛。 */
body[data-page="home"] .land-title {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.3;
}

/* #4 CTA 行：参考 .cta-row{margin-top:42px;gap:24px}
   本站原是 clamp(28px,4vh,40px)/22px。 */
body[data-page="home"] .land-cta-row {
  margin-top: 42px;
  gap: 24px;
}

/* #5 CTA 按钮：参考 .cta{padding:15px 44px;font-size:14px;letter-spacing:.3em}
   本站原是 15px 40px / 15px / .28em。 */
body[data-page="home"] .land-cta {
  padding: 15px 44px;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

/* #9 竖排小字：参考 .vertical{font-size:13px;letter-spacing:.6em;
   color:rgba(38,35,30,.35)}，无 font-weight（继承 body 的 300）。
   本站原是 600 字重 + rgba(36,33,28,.4)。字距/字号本就一致；这里对齐
   字重与透明度。text-shadow 有意保留（参考稿那张 assets/landscape.jpg
   在本机不存在、截图是空白的，它的 .35 透明度是在「没有图」的底上定的；
   真站是深色山影，实测去掉这层 14px 白色柔光后竖排字在山脊上读不出来）。 */
body[data-page="home"] .land-side {
  font-weight: 400;
  color: rgba(38, 35, 30, 0.35);
}

/* #10 书口：参考 footer{letter-spacing:.25em}（本站 .24em）。
   参考稿的 padding:28px var(--gut) 本站不照搬：本站让位量是算出来的
   （左让 .nowdial 圆片 --land-dial、底部让固定层 --land-dock），
   写死 28px 会把书口第一个字塞到时辰仪底下。 */
body[data-page="home"] .land-colophon {
  letter-spacing: 0.25em;
}

/* ===== 断点内需要跟着对齐的标量 ===== */

@media (max-width: 860px) {
  /* 参考稿移动端 .cta 没有单独缩水（仍是 15px 44px），本站原有一条
     14px 34px 的窄屏缩水。这里收到只留横向收紧，纵向与字号回到参考值，
     避免 390px 下按钮比参考稿矮一档。 */
  body[data-page="home"] .land-cta {
    padding: 15px 36px;
  }
}

/* 矮屏：参考稿没有这条，是本站为了横屏手机/小笔记本不把正文顶到书口而加的。
   标题字号跟着上面的标量对齐后，这里只把导语行距收回 1.9 的下一档。 */
@media (max-height: 620px) {
  body[data-page="home"] .land-title {
    font-size: clamp(28px, 4.6vw, 40px);
    line-height: 1.3;
  }

  body[data-page="home"] .land-cta-row {
    margin-top: 28px;
  }
}

/* =====================================================================
 * 视觉定稿（2026-09-11 第二轮）
 * ---------------------------------------------------------------------
 * 用户对第一轮成品的三条意见：导航栏难看、竖排那句没含金量又太淡、
 * 右侧那一整块（眉标／标题／三行导语／按钮旁碎话）堆砌。
 *
 * 处置原则：不是加装饰，而是让留下的每一样都承重。
 *   · 一屏一个命题：正文只留《易经·系辞》一行 + 一枚「起一局」；
 *     眉标、三行导语、按钮旁的「免费排盘 · 不吓人 · 不卖课」全部撤掉
 *     （对应 DOM 里的 .land-eyebrow / .land-lede / .land-note 已从
 *     index.html 移除。这几条死规则当时故意留在原地，避免同一轮既改结构
 *     又删样式、diff 难审；2026-09-16 死代码清理轮到它们，已随全站死 CSS
 *     一并删除）。
 *   · 竖排换成《烟波钓叟歌》开篇（奇门遁甲第一首歌诀，有出处），
 *     透明度 .35 → .62：原先实测约 2:1 对比度，等于没写。
 *   · 标题下压一行出处（《素问·三部九候论》），它同时是站名「其一」
 *     与「九宫」的来处，是这句诗唯一的凭借，不是装饰性副标题。
 *   · 按钮改印章式：朱砂细线 + 墨块实心。
 *   · 导航去胶囊、改宋体族、选中态用朱砂细下划线。
 *
 * 作用域：全部经 body[data-page="home"]，其余 13 页不受影响
 * （尤其导航——本页之外仍是 styles.css 的墨黑胶囊）。
 * ===================================================================== */

/* ---- 标题下的出处（新增元素 .land-source） ---- */
/* 实测（1440，15px/0.22em）：引文「天地之至数，始于一，终于九」本身 240px，
   书名 135px，两者同行约 385px —— 比 .land-copy 的 381px 还宽，必然会折行，
   且折点难看。所以让书名自成一行：max-width 定 17.5em（≈262px），
   引文一行放得下（240px），书名被自然推到第二行的左端。
   这既是排版上的层级（正文 / 出处），也顺手解决了「短行与标题同右边界
   读成被截断」的问题。 */
body[data-page="home"] .land-source {
  margin: 24px 0 0;
  max-width: 17.5em;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  line-height: 1.7;
  color: var(--land-ink-soft);
}

/* 出处书名：自成一行，小一号、降一档明度。 */
body[data-page="home"] .land-source-cite {
  display: block;
  margin: 2px 0 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-indent: 0;
  color: var(--land-muted);
}

/* ---- 导航：让顶栏真正融进画面、去胶囊、朱砂细下划线 ---- */
/* 关键：cinema-dark.css:709 给 [data-theme="light"] 的 .site-header 上了
   不透明纸底 + 底边线（!important），首页又是 light-lock（见 index.html
   head 的 data-theme），于是顶栏在山水上切出一条整幅横带 —— 参考稿的
   <header> 是绝对定位压在图上、没有这条带子。这里把它还原成「浮在雾上」。
   用 !important 是本站既有的对齐手段：home.css 早先的 .site-header
   background:transparent 就是被 cinema-dark.css 这条 !important 盖掉的，
   同一文件内已有先例，此处沿用，不改 cinema-dark.css 以免牵动其余 13 页。 */
body[data-page="home"] .site-header {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="home"] .site-header nav.tabs {
  gap: 2px;
  align-items: center;
  /* 曾有一条 margin-right: 26px：那是 .tabs 还带 flex:1 时的退让（它吃掉
     1178px，把「登录」推到离右边缘 28px，与满屏山水贴边）。2026-09-15 头部改
     三段式 grid（header-v2.css §5）后，导航的中间列恒等于自身宽度、两侧 1fr 等宽，
     右簇由列自己兜住，这条退让不但没用，还把导航中轴拉偏 −13px（实测），已删。 */
}

body[data-page="home"] .site-header .tab {
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  border-radius: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  /* cinema-dark.css:718 的 [data-theme="light"] .tab{color:#41504e} 比本选择器
     低一级，但为避免日后有人再抬权重，这里跟一条 !important 钉住口径。 */
  color: var(--land-ink-soft) !important;
  transition: color 0.25s var(--land-ease);
}

body[data-page="home"] .site-header .tab:hover {
  background: transparent;
  color: var(--land-cinnabar) !important;
}

/* 选中态：一根朱砂细线，不用色块 —— 色块会在山水上多出一块与画面无关的
   矩形。cinema-dark.css:725 的 [data-theme="light"] .tab.is-active 用
   background:#47716d !important 画青瓷胶囊，本选择器权重虽更高，但
   !important 无分权重，必须同样用 !important 才压得住（不用的话实测
   仍渲染成 rgb(71,113,109) 的绿胶囊，而不是这里的朱砂细线）。 */
body[data-page="home"] .site-header .tab.is-active {
  background: transparent !important;
  color: var(--land-ink) !important;
  font-weight: 600;
  border-color: transparent;
  box-shadow: inset 0 -2px 0 0 var(--land-cinnabar) !important;
}

/* 分隔线：styles.css:5129 的 .tab-sep 默认取 --color-border-strong（为深色
   主题定的浅色），在本页浅雾底上几乎看不见；换成暖墨的极淡一档。 */
body[data-page="home"] .site-header .tab-sep {
  height: 15px;
  margin: 0 10px;
  background: rgba(36, 33, 28, 0.2);
}

/* 品牌区与登录钮在透明顶栏上仍要可读（浅雾底上给一点纸光，不用整条底） */
body[data-page="home"] .site-header .brand h1,
body[data-page="home"] .site-header .brand .brand-name {
  color: var(--land-ink);
}

body[data-page="home"] .site-header .brand p {
  color: var(--land-muted);
}

/* 登录钮：cinema-dark.css:731 的 [data-theme="light"] .auth-button 用
   rgba(24,35,42,.32) 的 1px 深色描边 + 半透明白底，在浅雾底上是一枚很重的
   戒指，与整页的淡墨层次不搭。改成朱砂发丝线 + 透明底，并补上
   :focus-visible 焦点样式（无障碍底线，不依赖浏览器默认）。 */
body[data-page="home"] .site-header .auth-button {
  border-color: rgba(158, 59, 44, 0.38) !important;
  background: transparent !important;
  color: var(--land-ink-soft) !important;
  letter-spacing: 0.14em;
  transition: border-color 0.25s var(--land-ease), color 0.25s var(--land-ease);
}

body[data-page="home"] .site-header .auth-button:hover {
  border-color: var(--land-cinnabar) !important;
  color: var(--land-cinnabar) !important;
}

body[data-page="home"] .site-header .auth-button:focus-visible,
body[data-page="home"] .site-header .tab:focus-visible {
  outline: 2px solid var(--land-cinnabar);
  outline-offset: 3px;
}

/* ---- 竖排：提对比度 + 给两行之间留气 ---- */
/* .35 的透明度实测约 2:1，缩略图上几乎不可见。提到 .62 并加字重，配一层
   柔光保证压在山脊上仍读得出。
   字距 .42em → .58em：实测 .42em 时两列只隔约 28px（14px 字身 + 字距），
   两行糊成一块竖排色块；.58em 把列间距与列内节奏同时拉开，并使每列更长，
   单列本身才读得出「一句」。八个字总高约 174 → 约 200px，仍在安全范围内。 */
body[data-page="home"] .land-side {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.58em;
  line-height: 1.9;
  color: rgba(36, 33, 28, 0.62);
  text-shadow: 0 1px 16px rgba(255, 255, 255, 0.72);
}

/* ---- 按钮：印章式 ---- */
/* 实心墨块 + 朱砂细线，直角。细线用 box-shadow 画而不是 border：border 参与
   盒模型，hover 换色会让按钮尺寸跳一下；box-shadow 不占位，尺寸恒定。 */
body[data-page="home"] .land-cta {
  padding: 16px 52px;
  font-size: 15px;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  border: 0;
  border-radius: 0;
  color: var(--land-paper);
  background: var(--land-ink);
  box-shadow: inset 0 0 0 1px var(--land-cinnabar);
  transition: background-color 0.35s var(--land-ease),
    color 0.35s var(--land-ease), box-shadow 0.35s var(--land-ease);
}

body[data-page="home"] .land-cta:hover,
body[data-page="home"] .land-cta:focus-visible {
  background: transparent;
  color: var(--land-cinnabar);
  box-shadow: inset 0 0 0 1px var(--land-cinnabar);
}

body[data-page="home"] .land-cta-row {
  margin-top: 40px;
}

@media (max-width: 860px) {
  /* 窄屏导航收进汉堡抽屉，顶栏只剩品牌；这组只兜住 861px 附近
     （styles.css 的折叠阈值是 861），把字距收一档免得 10 项撑出横向滚动。 */
  body[data-page="home"] .site-header .tab {
    padding: 0 9px;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
  }

  body[data-page="home"] .site-header .tab-sep {
    margin: 0 6px;
  }

  body[data-page="home"] .land-source {
    margin-top: 20px;
    max-width: none;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }

  body[data-page="home"] .land-cta {
    padding: 15px 46px;
    font-size: 14px;
  }
}

@media (max-height: 620px) {
  body[data-page="home"] .land-source {
    margin-top: 16px;
  }

  body[data-page="home"] .land-cta-row {
    margin-top: 26px;
  }
}