/* ============ 基础：变量 / 页头 / 导航 / 面板 / 通用组件 ============ */
:root{
  --paper:#f4edde;
  --paper-deep:#ece2cc;
  --paper-dark:#e3d6ba;
  --ink:#2b2620;
  --ink-soft:#6b5f4e;
  --ink-faint:#9c8f7a;
  --vermilion:#a93226;
  --vermilion-deep:#8c2418;
  --gold:#a8862c;
  --line:#d8cbae;
  --c-cn:#a93226;
  --c-me:#a8862c;
  --c-eg:#8a6f4d;
  --c-in:#bf5b21;
  --c-eu:#39648a;
  --c-jp:#7b5a8c;
  --c-am:#4f7a51;
  --c-st:#6e7f5a;
  --serif:'Noto Serif SC','Songti SC','STSong','SimSun','Source Han Serif SC',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255,252,240,.65), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(196,176,134,.22), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(120,100,60,.018) 2px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(120,100,60,.014) 3px 6px);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(169,50,38,.18);}

/* ============ 页头 ============ */
.site-head{
  max-width:1280px;margin:0 auto;padding:34px 22px 0;
  position:relative;
}
.head-flex{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;}
.title-block h1{
  font-size:clamp(34px,5vw,52px);
  font-weight:900;letter-spacing:.14em;line-height:1.1;
  animation:fadeUp .7s ease both;
}
.title-block .sub{
  margin-top:10px;font-size:14px;letter-spacing:.32em;color:var(--ink-soft);
  animation:fadeUp .7s .12s ease both;
}
.title-block .sub b{color:var(--vermilion);font-weight:700;}
.seal{
  width:64px;height:64px;flex:none;
  background:var(--vermilion);color:#f6efe0;
  display:grid;place-items:center;
  font-size:20px;font-weight:900;line-height:1.15;letter-spacing:2px;
  writing-mode:vertical-rl;text-orientation:upright;
  border-radius:6px;transform:rotate(-4deg);
  box-shadow:2px 3px 0 rgba(140,36,24,.35), inset 0 0 0 2px rgba(246,239,224,.55), inset 0 0 0 5px var(--vermilion);
  animation:stamp .5s .35s cubic-bezier(.2,1.6,.4,1) both;
  user-select:none;
}
@keyframes stamp{from{opacity:0;transform:rotate(-4deg) scale(1.7);}to{opacity:1;transform:rotate(-4deg) scale(1);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.head-rule{max-width:1280px;margin:18px auto 0;padding:0 22px;}
.head-rule i{display:block;height:3px;background:linear-gradient(90deg,var(--vermilion) 0 120px, var(--line) 120px);}

/* ============ 导航 ============ */
.tabs{
  max-width:1280px;margin:0 auto;padding:14px 22px 0;
  display:flex;gap:8px;flex-wrap:wrap;
  animation:fadeUp .7s .2s ease both;
}
.tab{
  font-family:var(--serif);font-size:15px;letter-spacing:.12em;
  padding:9px 18px 10px;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-bottom:none;
  border-radius:8px 8px 0 0;color:var(--ink-soft);
  position:relative;transition:all .22s;
}
.tab:hover{color:var(--ink);background:rgba(255,252,242,.5);}
.tab.active{
  background:rgba(255,252,242,.85);color:var(--vermilion);font-weight:700;
  border-color:var(--ink-faint);
  box-shadow:0 -2px 0 var(--vermilion) inset;
}
.tab .no{font-size:11px;color:var(--ink-faint);margin-right:6px;letter-spacing:0;}
.tab.active .no{color:var(--vermilion);}
.tabs-rule{max-width:1280px;margin:0 auto;padding:0 22px;}
.tabs-rule i{display:block;height:1px;background:var(--ink-faint);opacity:.5;}

/* ============ 主体 ============ */
main{max-width:1280px;margin:0 auto;padding:22px 22px 80px;}
.view{display:none;animation:fadeUp .45s ease both;}
.view.active{display:block;}
.view-intro{
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  margin:4px 0 18px;
}
.view-intro h2{font-size:22px;letter-spacing:.1em;font-weight:900;}
.view-intro p{font-size:13.5px;color:var(--ink-soft);line-height:1.7;}

/* 三步指引 */
.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 20px;}
.guide .g{
  background:rgba(255,252,242,.7);border:1px solid var(--line);
  border-radius:10px;padding:13px 15px;font-size:13px;line-height:1.75;color:var(--ink-soft);
  position:relative;overflow:hidden;
}
.guide .g b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px;letter-spacing:.06em;}
.guide .g em{
  position:absolute;right:6px;top:-8px;font-style:normal;
  font-size:54px;font-weight:900;color:rgba(169,50,38,.09);font-family:Georgia,serif;
}

/* ============ 通用 chip / 按钮 ============ */
.jump-chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  font-family:var(--serif);font-size:12.5px;padding:5px 12px;cursor:pointer;
  border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--ink-soft);
  transition:all .18s;letter-spacing:.05em;
}
.chip:hover{border-color:var(--vermilion);color:var(--vermilion);background:rgba(169,50,38,.05);}
.chip.on{background:var(--vermilion);color:#f6efe0;border-color:var(--vermilion);font-weight:700;}
.btn-main{
  font-family:var(--serif);font-size:14.5px;letter-spacing:.2em;font-weight:700;
  padding:10px 28px;cursor:pointer;border:none;border-radius:8px;
  background:var(--vermilion);color:#f6efe0;transition:all .2s;
  box-shadow:0 2px 8px rgba(140,36,24,.3);
}
.btn-main:hover{background:var(--vermilion-deep);transform:translateY(-1px);}
.btn-ghost{
  font-family:var(--serif);font-size:13px;letter-spacing:.08em;
  padding:7px 16px;cursor:pointer;border:1px solid var(--vermilion);border-radius:8px;
  background:rgba(169,50,38,.06);color:var(--vermilion);transition:all .18s;
}
.btn-ghost:hover{background:var(--vermilion);color:#f6efe0;}

/* ============ 详情面板 ============ */
.panel-mask{
  position:fixed;inset:0;background:rgba(43,38,32,.35);backdrop-filter:blur(2px);
  /* 必须压过 sticky 时间锚条（z-index:60），否则面板打开时锚条浮在遮罩上 */
  z-index:64;opacity:0;pointer-events:none;transition:opacity .25s;
}
.panel-mask.open{opacity:1;pointer-events:auto;}
.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,94vw);z-index:65;
  background:var(--paper);border-left:2px solid var(--vermilion);
  box-shadow:-8px 0 30px rgba(60,45,20,.25);
  transform:translateX(105%);transition:transform .3s cubic-bezier(.25,.9,.3,1);
  display:flex;flex-direction:column;
}
.panel.open{transform:none;}
.panel-head{
  padding:20px 22px 14px;border-bottom:1px solid var(--line);position:relative;
  background:radial-gradient(ellipse at 100% 0%, rgba(169,50,38,.07), transparent 60%);
}
.panel-head .pp-civ{font-size:12px;letter-spacing:.3em;color:var(--ink-faint);margin-bottom:5px;}
.panel-head h3{font-size:24px;font-weight:900;letter-spacing:.08em;line-height:1.25;}
.panel-head .pp-years{
  margin-top:6px;font-size:13.5px;color:var(--vermilion);font-weight:700;letter-spacing:.06em;
  font-family:Georgia,var(--serif);
}
.panel-close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);
  font-size:16px;cursor:pointer;line-height:1;transition:all .18s;font-family:var(--serif);
}
.panel-close:hover{border-color:var(--vermilion);color:var(--vermilion);transform:rotate(90deg);}
.panel-body{padding:18px 22px 30px;overflow-y:auto;flex:1;}
.panel-body::-webkit-scrollbar{width:8px;}
.panel-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
.pp-desc{font-size:14.5px;line-height:1.95;color:var(--ink);text-align:justify;}
.pp-sec{margin-top:20px;}
.pp-sec h4{
  font-size:13px;letter-spacing:.25em;color:var(--vermilion);font-weight:700;
  padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.pp-sec h4::before{content:'';width:5px;height:14px;background:var(--vermilion);border-radius:1px;}
.ev{display:flex;gap:10px;padding:6px 0;font-size:13.5px;line-height:1.7;}
.ev .y{flex:none;min-width:74px;color:var(--ink-soft);font-weight:700;font-family:Georgia,var(--serif);font-size:12.5px;padding-top:2px;}
.fig-chips{display:flex;flex-wrap:wrap;gap:7px;}
.fig-chip{
  font-size:12.5px;padding:4px 11px;border:1px solid var(--line);border-radius:99px;
  background:rgba(255,252,242,.7);color:var(--ink-soft);letter-spacing:.03em;
}
.sync-item{
  display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px dashed var(--line);
  font-size:13px;line-height:1.65;
}
.sync-item:last-child{border-bottom:none;}
.sync-item .sn{
  flex:none;width:66px;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;gap:5px;font-size:12.5px;
}
.sync-item .sn i{width:7px;height:7px;border-radius:2px;transform:rotate(45deg);flex:none;}
.sync-item .sv{color:var(--ink-soft);}
.sync-item .sv a, .sync-item .sv .lk{color:var(--vermilion);cursor:pointer;text-decoration:none;border-bottom:1px dashed rgba(169,50,38,.4);}
.pp-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;}

footer{
  max-width:1280px;margin:0 auto;padding:0 22px 40px;
  font-size:12px;color:var(--ink-faint);letter-spacing:.08em;line-height:1.9;text-align:center;
}
footer i{font-style:normal;color:var(--vermilion);}

/* ============ 响应式（通用部分） ============ */
@media (max-width:880px){
  .guide{grid-template-columns:1fr;}
  .panel{
    top:auto;left:0;right:0;bottom:0;width:100%;height:78vh;
    border-left:none;border-top:2px solid var(--vermilion);border-radius:16px 16px 0 0;
    transform:translateY(105%);
  }
  .panel.open{transform:none;}
  main{padding:18px 14px 60px;}
  .site-head{padding:24px 14px 0;}
  .tabs{padding:12px 14px 0;}
  .tab{font-size:13.5px;padding:8px 12px 9px;letter-spacing:.05em;}
}

/* ============ 全局时间锚条 ============ */
.anchor-bar{
  max-width:1280px;margin:0 auto;padding:9px 22px 7px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  position:sticky;top:0;z-index:60;
  background:linear-gradient(rgba(244,237,222,.97),rgba(244,237,222,.93));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(3px);
}
.anchor-bar .ab-label{font-size:11.5px;color:var(--ink-faint);letter-spacing:.2em;flex:none;}
.ab-slider{flex:1 1 220px;min-width:160px;height:22px;position:relative;cursor:pointer;touch-action:none;}
.ab-rail{position:absolute;left:8px;right:8px;top:10px;height:3px;background:var(--paper-dark);border-radius:2px;}
.ab-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--vermilion));border-radius:2px;}
.ab-knob{
  position:absolute;top:4px;left:8px;width:14px;height:14px;border-radius:50%;
  background:var(--vermilion);border:2px solid #f6efe0;
  box-shadow:0 1px 3px rgba(60,40,20,.4);pointer-events:none;transition:left .08s linear;
}
.ab-yearbox{display:flex;align-items:center;gap:0;flex:none;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:rgba(255,252,242,.8);}
.ab-yearbox button{
  font-family:var(--serif);font-size:14px;width:26px;height:28px;cursor:pointer;
  background:transparent;border:none;color:var(--ink-soft);
}
.ab-yearbox button:hover{background:rgba(169,50,38,.08);color:var(--vermilion);}
.ab-yearbox input{
  width:64px;height:28px;text-align:center;font-family:var(--serif);font-size:13.5px;font-weight:700;
  border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:transparent;color:var(--vermilion);outline:none;
}
.ab-cal{
  font-family:var(--serif);font-size:12px;color:var(--ink-soft);letter-spacing:.02em;
  background:transparent;border:1px dashed var(--line);border-radius:7px;
  padding:5px 10px;cursor:pointer;flex:none;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ab-cal:hover{border-color:var(--gold);color:var(--ink);}
.ab-act{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.06em;
  padding:5px 12px;cursor:pointer;flex:none;
  background:rgba(255,252,242,.85);border:1px solid var(--line);border-radius:7px;color:var(--ink-soft);
  transition:all .2s;
}
.ab-act:hover{border-color:var(--vermilion);color:var(--vermilion);}
#abTour{border-color:rgba(169,50,38,.5);color:var(--vermilion);font-weight:700;}
#abTour:hover{background:var(--vermilion);color:#f6efe0;}

/* 小型动作按钮（⚖ 争议 / 📜 史料 等，多视图共用） */
.mini-act{
  font-family:var(--serif);font-size:11.5px;padding:3px 9px;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--ink-soft);
  transition:all .2s;
}
.mini-act:hover{border-color:var(--gold);color:var(--gold);}

@media (max-width:760px){
  .anchor-bar{gap:7px;padding:8px 12px 6px;}
  .ab-cal{display:none;}
  .tab{font-size:12.5px;padding:7px 9px 8px;}
  .tab .no{display:none;}
}