/* ============================================================
   home.css · 网站首页「门面」重装 覆盖层 v3 —— 水墨山河 · 通页墨色
   ------------------------------------------------------------
   只作用于 .home-tab（首页），不改 style.css / theme.css；
   摘掉 index.html 里这一行 <link> 即可完整回退。
   设计：整页深色水墨 —— Hero（居中题名 + 朱砂印章 + 立绘衬景 + 数据带）
        正文各区块均为墨色卡片，金色/暖字提亮；页面背景与顶部导航
        仅在首页可见时转为墨色（body:has 限定，切走自动还原）。
   断点沿用：≤480 手机 · 481-767 大手机 · 768-1023 平板 · ≥1024 桌面
   ============================================================ */

/* ---------- 0. 墨色模式：全局由 ink.css 负责，此处仅保留首屏裁切 ---------- */
body:has(.home-tab:not([hidden])){ overflow-x:clip }

.home-tab{ gap:clamp(20px,3.2vw,30px) }

/* 全出血 Hero：横向撑满视口（wrap 有 max-width，用 50% - 50vw 抵消） */
.home-hero{
  margin:0 calc(50% - 50vw);
  padding:0; border:0; border-radius:0;
  background:none; box-shadow:none; position:relative;
}
.home-hero::before,.home-hero::after{ display:none }

/* ---------- 1. 水墨场景：墨色底 + 暖金光晕 ---------- */
.home-hero .menu-scene{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  min-height:clamp(400px,66vh,620px);
  overflow:hidden; border-radius:0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 18%, rgba(140,110,70,.28), transparent 60%),
    radial-gradient(ellipse 60% 50% at 18% 88%, rgba(60,80,70,.30), transparent 60%),
    linear-gradient(180deg,#14161b 0%,#0e0f12 100%);
}
.home-hero .menu-bg{
  background-position:center 30%;
  filter:saturate(.72) brightness(.9);
}
.home-hero .menu-veil{
  background:
    linear-gradient(180deg, rgba(14,15,18,.50) 0%, rgba(14,15,18,.30) 38%, rgba(14,15,18,.66) 82%, rgba(14,15,18,.86) 100%);
}
.home-hero .menu-scene::after{
  content:""; position:absolute; inset:auto 0 0 0; height:36vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 100% at 12% 100%, rgba(190,180,160,.13), transparent 70%),
    radial-gradient(ellipse 70% 130% at 58% 115%, rgba(190,180,160,.10), transparent 70%),
    radial-gradient(ellipse 45% 90% at 96% 105%, rgba(190,180,160,.09), transparent 70%);
}

/* ---------- 2. 题名区：居中大气 ---------- */
.home-hero .menu-inner{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:clamp(52px,9vh,92px) 24px clamp(46px,7vh,70px);
}
.home-hero .home-seal{
  width:52px; height:52px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif-cn); font-size:24px; font-weight:900;
  color:#d8604a; border:2px solid #b3452f; border-radius:8px;
  background:rgba(179,69,47,.10);
  box-shadow:0 0 30px rgba(179,69,47,.22);
}
.home-hero .menu-h1{
  font-family:var(--serif-cn); font-weight:900;
  font-size:clamp(31px,5.2vw,54px);
  line-height:1.28; letter-spacing:.1em;
  color:#f6efe2; margin:0;
}
.home-hero .menu-h1 em{
  font-style:normal; color:#e8b968;
  text-shadow:0 2px 30px rgba(232,185,104,.25);
}
.home-hero .menu-sub{
  margin:16px 0 0;
  font-size:clamp(13px,1.9vw,15.5px);
  font-weight:300; letter-spacing:.05em; line-height:2;
  max-width:42ch; margin-inline:auto;
  color:rgba(226,216,192,.92);
}
.home-hero .menu-dao{
  margin-top:22px;
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 14px; border-radius:999px;
  border:1px solid rgba(232,185,104,.45);
  background:rgba(14,15,18,.35);
  color:#e8b968; font-size:12.5px; letter-spacing:.1em;
}
.home-hero .menu-dao .seal-mini{
  width:18px; height:18px; margin:0; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; color:#d8604a;
  border:1px solid rgba(216,96,74,.55); border-radius:4px;
  background:rgba(179,69,47,.10);
}
.home-hero .menu-dao b{
  font-family:var(--serif-cn); font-size:13px; color:#f3d9a0;
}
.home-hero .menu-dao small{ color:rgba(214,203,178,.75) }

/* 双 CTA：矩形金边 */
.home-hero .menu-cta{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px; margin-top:clamp(22px,3.4vw,36px);
}
.home-hero .cta-btn{
  font-family:var(--serif-cn); font-weight:600;
  letter-spacing:.12em; text-indent:.12em; font-size:14px;
  min-height:42px; padding:0 clamp(16px,2.4vw,28px);
  border-radius:2px; cursor:pointer;
  transition:transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.home-hero .cta-btn:focus-visible{ outline:2px solid #e8b968; outline-offset:2px }
.home-hero .cta-main{
  background:#e8b968; color:#241a08;
  border:1px solid #f3d9a0;
  box-shadow:0 12px 30px -10px rgba(232,185,104,.55);
}
.home-hero .cta-main:hover,.home-hero .cta-main:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 18px 38px -12px rgba(232,185,104,.7);
}
.home-hero .cta-ghost{
  background:rgba(14,15,18,.20);
  color:#e8b968; border:1px solid rgba(232,185,104,.6);
}
.home-hero .cta-ghost:hover,.home-hero .cta-ghost:focus-visible{
  transform:translateY(-2px);
  background:rgba(232,185,104,.12); border-color:#e8b968;
}

/* 立绘：宽屏衬景立于右侧，窄屏隐去保题名干净 */
.home-hero .menu-master{ display:none }
@media (min-width:1100px){
  .home-hero .menu-master{
    display:block; position:absolute; right:clamp(24px,5vw,76px); bottom:0;
    width:min(20vw,258px); z-index:1; pointer-events:none;
    filter:drop-shadow(0 24px 40px rgba(0,0,0,.5));
    /* 2026-09-19 同 home2.css：立绘下缘渐隐（78% 版）已删，理由见 home2.css 那段注释。
       旧版首页若回退启用，立绘同样走硬边、不再渐隐。 */
  }
}

/* ---------- 3. 数据带：墨底玻璃 · 金字 · 竖分隔 ---------- */
.home-hero .home-hero-grid{
  position:relative; z-index:3; margin:0;
  padding:clamp(12px,2.2vw,18px) clamp(10px,3vw,28px);
  list-style:none;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:rgba(10,11,14,.55);
  border-top:1px solid rgba(232,185,104,.35);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
@media (max-width:767px){
  .home-hero .home-hero-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:10px }
}
.home-hero .home-hero-grid li{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 10px; text-align:center;
  background:none; border:0; box-shadow:none; border-radius:0;
  border-right:1px solid rgba(246,239,226,.14);
}
.home-hero .home-hero-grid li:last-child{ border-right:0 }
.home-hero .home-hero-grid li::before{ display:none }
.home-hero .home-hero-grid b{
  font-family:var(--serif-cn); font-weight:700;
  font-size:clamp(19px,2.3vw,26px); line-height:1.15;
  color:#e8b968; letter-spacing:.02em;
}
.home-hero .home-hero-grid span{
  font-size:clamp(10px,1.8vw,11.5px); line-height:1.6;
  color:rgba(246,239,226,.78);
}
.home-hero .home-scrollhint{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:3;
  margin:0; font-size:11px; letter-spacing:.4em; text-indent:.4em;
  color:rgba(214,203,178,.6);
  animation:home-hint 2.2s ease-in-out infinite;
}
@keyframes home-hint{
  0%,100%{ transform:translate(-50%,0) }
  50%{ transform:translate(-50%,7px) }
}

/* ---------- 4. 正文共用：墨色卡片区块 ---------- */
.home-tab .home-path,
.home-tab .home-books,
.home-tab .home-routes,
.home-tab .home-quote{
  width:100%; max-width:1080px; margin-inline:auto;
}
.home-tab .home-sec-head,
.home-tab .home-path-head{
  text-align:center; margin:0 0 clamp(20px,3vw,32px);
}
.home-tab .home-sec-head h2,
.home-tab .home-path-head h2{
  font-family:var(--serif-cn); font-weight:700;
  font-size:clamp(20px,2.8vw,27px); letter-spacing:.14em;
  color:#f6efe2; margin:0;
}
.home-tab .home-sec-head p{
  margin:10px 0 0; color:rgba(214,203,178,.62); font-size:13.5px; letter-spacing:.12em;
}
.home-tab .home-path-head p{
  margin:10px 0 0; color:#d8a05a;
  font-size:13px; letter-spacing:.3em; text-indent:.3em;
}


/* 学习顺序：墨底药丸节点 + 箭头 */
.home-tab .home-path-steps{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px 6px;
}
.home-tab .home-step{ display:flex; align-items:center; gap:6px }
.home-tab .hs-node{
  min-width:68px; height:58px; padding:0 14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(255,253,247,.04);
  border:1px solid rgba(232,185,104,.28); border-radius:999px;
  white-space:nowrap; text-align:center;
  transition:transform .22s, border-color .22s, box-shadow .22s, background .22s;
}
.home-tab .hs-node:hover{
  transform:translateY(-4px); border-color:#e8b968;
  background:rgba(232,185,104,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.home-tab .hs-node i{
  font-style:normal; font-size:10px; letter-spacing:.14em; color:#a08a5c;
}
.home-tab .hs-node b{
  font-family:var(--serif-cn); font-size:14px; color:#f6efe2; margin-top:2px;
}
.home-tab .hs-arrow{ color:#8f7f57; font-size:17px; padding:0 2px }
@media (max-width:560px){
  .home-tab .hs-node{ min-width:60px; height:60px; padding:0 12px }
  .home-tab .hs-node b{ font-size:13px }
  .home-tab .hs-arrow{ font-size:13px }
}

/* 四部讲稿：墨色书卡 */
.home-tab .home-books-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(14px,2.4vw,24px);
}
.home-tab .hb-card{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(20px,2.6vw,26px) clamp(16px,2.2vw,22px);
  background:linear-gradient(160deg, rgba(255,253,247,.05), rgba(255,253,247,.015));
  border:1px solid rgba(232,185,104,.16); border-radius:4px;
  text-align:left; cursor:pointer; font:inherit; color:inherit;
  transition:transform .26s, box-shadow .26s, border-color .26s;
}
.home-tab .hb-card:hover,.home-tab .hb-card:focus-visible{
  transform:translateY(-6px); border-color:rgba(232,185,104,.5);
  box-shadow:0 18px 40px rgba(0,0,0,.5); outline:none;
}
.home-tab .hb-tag{
  font-size:12px; color:#e8b968; letter-spacing:.2em;
  border:1px solid currentColor; border-radius:2px;
  padding:2px 10px; margin-bottom:14px;
}
.home-tab .hb-card h3{
  font-family:var(--serif-cn); font-size:19px; letter-spacing:.06em;
  color:#f6efe2; margin:0 0 10px;
}
.home-tab .hb-card p{ margin:0; font-size:13px; line-height:1.85; color:#a99e86 }
.home-tab .hb-go{ margin-top:16px; color:#e8b968; font-size:14px; letter-spacing:.1em }

/* ---------- 5. 修行六艺：墨色排位卡 ---------- */
.home-tab .home-routes{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.8vw,14px);
}
@media (max-width:620px){
  .home-tab .home-routes{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
.home-tab .route-row{
  align-items:center; text-align:center;
  padding:clamp(18px,3vw,26px) 12px clamp(16px,2.6vw,22px);
  border-radius:6px;
  background:linear-gradient(180deg, rgba(255,253,247,.05), rgba(255,253,247,.02));
  border-color:rgba(232,185,104,.16);
  box-shadow:none;
}
.home-tab .route-row:hover,.home-tab .route-row:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(232,185,104,.5);
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}
.home-tab .route-no{
  font-size:11px; letter-spacing:.18em;
  color:#e8b968; border:0; background:none; box-shadow:none;
  padding:0 0 6px; border-radius:0; align-self:center; margin:0;
}
.home-tab .route-ico{ margin:0 auto }
.home-tab .route-row strong{ color:#f6efe2; letter-spacing:.08em }
.home-tab .route-row small{ color:rgba(214,203,178,.55) }

/* ---------- 6. 子午流注：墨色卡 + 文字提亮 ---------- */
.home-tab .home-ziwu{
  max-width:1080px; width:100%; margin-inline:auto;
  border-radius:10px;
  background:
    radial-gradient(ellipse 60% 60% at 50% 40%, rgba(255,253,247,.045), transparent 70%),
    linear-gradient(180deg,#14161b,#101116);
  border:1px solid rgba(232,185,104,.16);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.6);
}
/* 轮盘略收，配小一号的扇区文字 */
.home-tab .ziwu-wheel-frame{ width:min(100%,560px) }
.home-tab .ziwu-head h2{ color:#f3d9a0 }
.home-tab .home-time{ color:rgba(214,203,178,.62) }
.home-tab .ziwu-phase{ color:#f6efe2 }
.home-tab .ziwu-summary{ color:rgba(214,203,178,.68) }
.home-tab .ziwu-reset{
  background:rgba(232,185,104,.08);
  border-color:rgba(232,185,104,.45);
  color:#e8b968;
  box-shadow:none;
}
.home-tab .ziwu-reset:hover,.home-tab .ziwu-reset:focus-visible{
  border-color:#e8b968;
  box-shadow:0 0 0 3px rgba(232,185,104,.14);
}
.home-tab .wheel-note{ color:rgba(214,203,178,.55) }
.home-tab .current-detail strong{ color:#f6efe2 }
.home-tab .current-detail span:not(.detail-label){ color:rgba(214,203,178,.68) }
.home-tab .detail-label{ color:#e8b968 }
/* 地支牌：墨底金字小牌 */
.home-tab .ziwu-branch{
  background:#14161b;
  border:1px solid rgba(232,185,104,.4);
  color:#f3d9a0;
}

/* ---------- 7. 结语：墨卡金字引言 ---------- */
.home-tab .home-quote{
  background:linear-gradient(180deg,#14161b,#0e0f12);
  border:1px solid rgba(232,185,104,.14);
  border-radius:4px;
  padding:clamp(38px,6vw,54px) 24px;
  text-align:center;
}
.home-tab .home-quote p{
  margin:0;
  font-family:var(--serif-cn);
  font-size:clamp(13.5px,2vw,17px);
  letter-spacing:.18em; line-height:2.2;
  color:#b7ad99;
}
.home-tab .home-quote em{ font-style:normal; color:#e8b968 }

/* ---------- 8. 动效尊重系统设置 ---------- */
@media (prefers-reduced-motion:reduce){
  .home-hero .home-scrollhint{ animation:none }
  .home-tab *{ transition:none !important }
}
