/* ==========================================================================
   时间简史 · 新版首页（V1.0 首页改版）
   首屏搜索 / 今日推荐 / 朝代色带 / 大家在问 / 战争精选 / 策展路径 / 全部功能
   依赖 style.css 的设计变量，自动适配深浅色
   ========================================================================== */

/* ---------- 1. 首屏 ---------- */
.home-hero{
  position:relative; overflow:hidden; border-radius:var(--r-l);
  border:1px solid var(--line);
  background:
    radial-gradient(760px 300px at 92% -8%, rgba(168,50,30,.14), transparent 64%),
    radial-gradient(520px 260px at 4% 108%, rgba(61,85,128,.13), transparent 66%),
    linear-gradient(158deg, var(--paper-2) 0%, var(--paper-3) 58%, var(--paper-2) 100%);
  padding:44px 34px 30px; margin-bottom:4px;
}
/* 右侧细网格纹理：只装饰，不干扰可读性 */
.home-hero::before{
  content:""; position:absolute; right:-40px; top:-30px; width:420px; height:300px; pointer-events:none;
  opacity:.5; -webkit-mask-image:radial-gradient(circle at 60% 30%, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 60% 30%, #000 0%, transparent 72%);
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:38px 38px;
}
.home-hero > *{ position:relative; z-index:2 }

.hh-eyebrow{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12px; letter-spacing:.16em; color:var(--ink-3); font-weight:600;
}
.hh-eyebrow .hh-nw{ white-space:nowrap }
.hh-eyebrow .hh-nw + .hh-nw::before{ content:"·"; margin-right:9px; color:var(--ink-4) }
.hh-eyebrow i{ width:5px; height:5px; border-radius:50%; background:var(--cinnabar); display:inline-block }
.hh-eyebrow em{ font-style:normal; color:var(--cinnabar); font-weight:700 }

.hh-title{
  font-family:var(--serif); font-size:clamp(28px,4.6vw,44px); line-height:1.26;
  margin:14px 0 0; letter-spacing:.01em; max-width:22ch;
}
.hh-title b{ color:var(--cinnabar); font-weight:700 }
.hh-sub{
  margin:14px 0 0; max-width:56ch; font-size:15.5px; line-height:1.85; color:var(--ink-2);
}

/* 搜索框（首屏核心） */
.hh-search{
  position:relative; z-index:6;
  display:flex; align-items:center; max-width:730px; margin:24px 0 0;
  background:var(--card); border:1.5px solid var(--line-strong); border-radius:14px;
  box-shadow:var(--shadow-2); transition:.18s;
}
.hh-search:focus-within{
  border-color:var(--cinnabar);
  box-shadow:0 0 0 4px var(--cinnabar-bg), var(--shadow-2);
}
.hh-search .hh-ico{ display:grid; place-items:center; padding:0 2px 0 16px; color:var(--ink-4); flex:0 0 auto }
.hh-search .h8-sugg{ position:relative; flex:1 1 auto; min-width:0 }
.hh-search input{
  width:100%; border:0; background:transparent; outline:none;
  padding:15px 10px; font-size:16px; font-family:var(--sans); color:var(--ink); min-width:0;
}
.hh-search input::placeholder{ color:var(--ink-4) }
.hh-search .btn{ flex:0 0 auto; margin:5px 5px 5px 0; padding:10px 22px; border-radius:10px }

.hh-hot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:13px 0 0 }
.hh-hot .hh-hot-lb{ font-size:12px; color:var(--ink-4); letter-spacing:.06em }
.hh-kbd{
  font-family:var(--mono); font-size:11px; color:var(--ink-4); border:1px solid var(--line-strong);
  border-bottom-width:2px; border-radius:5px; padding:1px 6px; background:var(--paper-3);
}
.hh-stats{
  display:flex; gap:12px 30px; flex-wrap:wrap; align-items:baseline;
  margin-top:24px; padding-top:18px; border-top:1px dashed var(--line-strong);
}
.hh-stats .hstat{ font-size:12.5px; color:var(--ink-3); display:flex; align-items:baseline; gap:6px }
.hh-stats .hstat b{ font-family:var(--serif); font-size:21px; color:var(--cinnabar); font-weight:700; letter-spacing:0 }

@media(max-width:640px){
  .home-hero{ padding:30px 18px 24px }
  .hh-title{ max-width:none }
  .hh-search{ flex-wrap:wrap; border-radius:12px }
  .hh-search .btn{ width:calc(100% - 10px); margin:0 5px 5px }
  .hh-stats{ gap:10px 18px }
}

/* ---------- 2. 今日推荐 ---------- */
.today-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)) }
.tcard{
  position:relative; display:flex; flex-direction:column; gap:8px; height:100%;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  padding:17px 18px 16px; box-shadow:var(--shadow-1); transition:.18s; overflow:hidden;
}
.tcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--line-strong); color:inherit }
.tcard .tc-kicker{
  display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.18em;
  color:var(--gold); font-weight:700;
}
.tcard .tc-kicker .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold) }
.tcard .tc-year{
  font-family:var(--serif); font-size:27px; font-weight:700; color:var(--cinnabar);
  line-height:1.1; letter-spacing:.01em;
}
.tcard .tc-title{ font-family:var(--serif); font-size:17px; font-weight:700; line-height:1.45 }
.tcard .tc-body{
  font-size:13.2px; line-height:1.78; color:var(--ink-3); margin:2px 0 0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.tcard .tc-foot{
  margin-top:auto; padding-top:10px; font-size:12px; color:var(--cinnabar); font-weight:600;
  display:flex; align-items:center; gap:6px;
}
.tcard .tc-foot .muted{ color:var(--ink-4); font-weight:400; margin-left:auto }
.tcard.tc-quote .tc-title{ font-size:19px }
.tcard.tc-plain .tc-kicker{ color:var(--indigo) }
.tcard.tc-plain .tc-kicker .dot{ background:var(--indigo) }
.tcard .tc-mark{
  position:absolute; right:-16px; bottom:-22px; font-family:var(--serif); font-size:96px;
  color:var(--ink); opacity:.045; pointer-events:none; line-height:1;
}

/* ---------- 3. 朝代色带 ---------- */
.era-wrap{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-1); padding:14px 14px 10px; overflow:hidden;
}
.era-ribbon{
  display:flex; align-items:stretch; gap:2px; height:96px; overflow-x:auto;
  padding-bottom:4px; scrollbar-width:thin;
}
.era-cell{
  flex:1 1 0; min-width:36px; border-radius:5px; position:relative; overflow:hidden;
  display:grid; place-items:center; text-decoration:none; transition:.16s;
  border:1px solid rgba(255,255,255,.22);
}
.era-cell span{
  writing-mode:vertical-rl; text-orientation:upright; font-family:var(--serif);
  font-size:12.5px; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4);
  letter-spacing:.08em; padding:6px 0;
}
.era-cell:hover{ filter:brightness(1.14); transform:translateY(-2px); box-shadow:var(--shadow-2) }
.era-cell.on{ outline:2px solid var(--ink); outline-offset:1px }
.era-axis{
  display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-4);
  padding:8px 2px 2px; letter-spacing:.06em; border-top:1px dashed var(--line); margin-top:6px;
}
.era-note{ font-size:12px; color:var(--ink-4); margin:8px 2px 0 }

/* ---------- 4. 大家在问 ---------- */
.qcard{
  display:flex; flex-direction:column; gap:8px; height:100%; padding:16px 18px 15px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-1); transition:.18s;
}
.qcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--line-strong); color:inherit }
.qcard .qc-q{
  font-family:var(--serif); font-size:16.5px; font-weight:700; line-height:1.5;
  display:flex; gap:8px; align-items:flex-start;
}
.qcard .qc-q i{ font-style:normal; color:var(--cinnabar); font-size:17px; line-height:1.4; flex:0 0 auto }
.qcard .qc-a{
  font-size:13.2px; line-height:1.78; color:var(--ink-3);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.qcard .qc-foot{ margin-top:auto; padding-top:8px; font-size:12px; color:var(--ink-4) }

/* ---------- 5. 为什么不一样（价值主张） ---------- */
.why-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)) }
.why-card{
  background:var(--paper-3); border:1px solid var(--line); border-radius:var(--r-m);
  padding:17px 18px; display:flex; gap:13px; align-items:flex-start;
}
.why-card .wi{
  flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--cinnabar-bg); color:var(--cinnabar); font-size:16px; font-weight:700;
  font-family:var(--serif);
}
.why-card h4{ margin:0 0 5px; font-size:14.5px; font-family:var(--sans); font-weight:700 }
.why-card p{ margin:0; font-size:13px; line-height:1.75; color:var(--ink-3) }

/* ---------- 6. 首页小节头 ---------- */
.home-sec{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:38px 0 15px;
}
.home-sec h2{ margin:0; font-size:19.5px; font-family:var(--serif); font-weight:700 }
.home-sec h2 small{
  font-family:var(--sans); font-size:12.5px; color:var(--ink-4); margin-left:9px;
  letter-spacing:.04em; font-weight:500;
}
.home-sec .hs-link{ font-size:13px; color:var(--cinnabar); font-weight:600; white-space:nowrap }

/* ---------- 7. 紧凑分类卡 ---------- */
.mini-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.mini-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:15px 16px }
.mini-card h3{ margin:0 0 11px; font-size:14px; font-family:var(--sans); font-weight:700 }
.mini-card h3 em{ font-style:normal; font-size:12px; color:var(--ink-4); font-weight:500; margin-left:6px }

/* ---------- 8. 全部功能（去重后的入口墙） ---------- */
.entry.tiny-entry{ padding:13px 14px }
.entry.tiny-entry .entry-t{ font-size:14.5px }
.entry.tiny-entry .entry-d{ font-size:12.5px }

/* ---------- 9. 首页底部引导条 ---------- */
.home-cta{
  margin:40px 0 6px; padding:26px 26px; border-radius:var(--r-l);
  border:1px solid var(--line-strong); background:var(--paper-3);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.home-cta .hc-t{ font-family:var(--serif); font-size:19px; font-weight:700; margin:0 0 6px }
.home-cta .hc-d{ margin:0; font-size:13.2px; color:var(--ink-3); max-width:52ch; line-height:1.75 }
.home-cta .hc-a{ display:flex; gap:10px; flex-wrap:wrap }
@media(max-width:640px){ .home-cta{ padding:20px 18px } }

/* ---------- 10. 朝代页首屏 ---------- */
.period-hero{
  position:relative; overflow:hidden; border-radius:var(--r-l); border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow-2); margin-bottom:14px;
}
/* 顶部朝代色条：宽度按存续年数，与首页色带同一视觉语言 */
.period-hero .ph-bar{ display:flex; height:7px; background:var(--paper-3) }
.period-hero .ph-bar i{ display:block; background:var(--pc); border-radius:0 4px 4px 0 }
.period-hero .ph-main{ padding:26px 28px 24px; position:relative }
/* 右侧淡色朝代名做水印，颜色取自朝代主题色 */
.period-hero .ph-main::after{
  content:attr(data-mark); position:absolute; right:6px; top:-18px;
  font-family:var(--serif); font-size:132px; line-height:1; color:var(--pc);
  opacity:.07; pointer-events:none; user-select:none;
}
.period-hero .ph-eyebrow{ font-size:12px; letter-spacing:.16em; color:var(--ink-3); font-weight:600 }
.period-hero .ph-name{
  font-family:var(--serif); font-size:clamp(30px,5vw,46px); margin:8px 0 10px; letter-spacing:.02em;
  color:var(--ink);
}
.period-hero .ph-sum{ margin:0 0 16px; font-size:15.5px; line-height:1.85; color:var(--ink-2); max-width:60ch }
.period-hero .ph-facts{
  display:flex; gap:10px 24px; flex-wrap:wrap; align-items:baseline;
  padding-top:14px; border-top:1px dashed var(--line);
}
.period-hero .ph-facts span{ font-size:12.5px; color:var(--ink-3); display:flex; align-items:baseline; gap:6px }
.period-hero .ph-facts b{ font-family:var(--serif); font-size:17px; color:var(--pc); font-weight:700; letter-spacing:0 }
.period-hero .ph-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px }
.period-hero .ph-note{
  margin:14px 0 0; font-size:12.5px; color:var(--ink-3);
  background:var(--paper-3); border-radius:var(--r-s); padding:9px 12px;
}
.period-hero .ph-note a{ color:var(--cinnabar); font-weight:600 }
@media(max-width:640px){
  .period-hero .ph-main{ padding:20px 17px 18px }
  .period-hero .ph-main::after{ font-size:96px; right:2px; top:-10px }
}

/* 深色模式下朝代主题色偏暗，水印与数字改用更亮的混色保证可读 */
[data-theme="dark"] .period-hero .ph-main::after{ opacity:.16 }
[data-theme="dark"] .period-hero .ph-facts b{ filter:brightness(1.45) saturate(.9) }

/* 朝代页的「在时间轴上的位置」复用首页色带，仅补充选中态加强 */
.era-wrap .era-cell.on{ outline:2px solid var(--ink); outline-offset:1px }

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .tcard:hover,.qcard:hover,.era-cell:hover,.entry:hover{ transform:none }
}