/* ═══════════════════════════════════════════════════
   三千年流亡 · 犹太人的历史 · 统一设计系统 v2
   羊皮纸底 · 朱砂红 · 金黄 · 墨绿 · 文献质感
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400;1,400&display=swap');

:root{
  /* Parchment palette */
  --p:#F4EDD4; --pd:#EAE0C0; --pdd:#DDD0A8; --pe:#CFC090;
  /* Crimson */
  --cr:#8B1A1A; --crl:#A52020; --crd:#5C0F0F; --crx:#2E0808;
  /* Gold */
  --go:#C9922C; --gl:#E0B050; --gd:#9A6E1A; --gx:#5C3E08;
  /* Forest green */
  --gn:#2D4A2D; --gnl:#3D6A3D; --gnd:#1A2E1A;
  /* Ink */
  --ink:#1A0E08; --inks:#0D0704; --ink2:#2C1810;
  /* Text */
  --tm:#2C1810; --ts:#5A3010; --tl:#9A6E40; --tll:#C4A070; --tla:#E0C090;
  /* Borders */
  --bd:rgba(139,26,26,.13); --bds:rgba(139,26,26,.28); --bdg:rgba(201,146,44,.18);
  /* Shadows */
  --sh:0 2px 20px rgba(44,24,16,.07); --sh2:0 6px 40px rgba(44,24,16,.13);
  /* Layout */
  --sbw:260px; --nav-h:54px; --max:1140px;
  /* Per-volume colors (overridden per page) */
  --vc:#C9922C;
}

/* ── RESET & BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{background:var(--p);color:var(--tm);font-family:'Noto Serif SC',Georgia,serif;overflow-x:hidden;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--pd)}
::-webkit-scrollbar-thumb{background:var(--gd);border-radius:3px}

/* ── PROGRESS BAR ── */
#pb{position:fixed;top:0;left:0;height:2px;background:linear-gradient(to right,var(--cr),var(--go),var(--cr));width:0%;z-index:3000;transition:width .06s;box-shadow:0 0 8px rgba(139,26,26,.4)}

/* ─────────────────────────────────────────────────
   GLOBAL NAV
───────────────────────────────────────────────── */
.gnav{position:fixed;top:0;left:0;right:0;z-index:1500;height:var(--nav-h);background:rgba(244,237,212,.96);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 28px;gap:12px;box-shadow:0 1px 16px rgba(44,24,16,.06)}
.gnav-logo{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--cr);white-space:nowrap;transition:opacity .2s;letter-spacing:.02em}
.gnav-logo:hover{opacity:.75}
.gnav-sep{width:1px;height:18px;background:var(--bd);flex-shrink:0}
.gnav-cur{font-size:12px;color:var(--ts);opacity:.7;font-family:'EB Garamond',serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gnav-links{margin-left:auto;display:flex;gap:2px;align-items:center}
.gnav-a{padding:5px 11px;font-size:11px;color:var(--tl);letter-spacing:.12em;font-family:'EB Garamond',serif;border:1px solid transparent;transition:all .2s;white-space:nowrap}
.gnav-a:hover,.gnav-a.on{color:var(--cr);border-color:var(--bd);background:rgba(139,26,26,.05)}
.gnav-a.badge{position:relative}
.gnav-a.badge::after{content:'NEW';position:absolute;top:-3px;right:-4px;font-size:7px;background:var(--cr);color:var(--p);padding:1px 3px;letter-spacing:.05em}
@media(max-width:800px){.gnav-links{display:none}.gnav-cur{display:none}}

/* ─────────────────────────────────────────────────
   SIDEBAR LAYOUT
───────────────────────────────────────────────── */
.layout{display:flex;margin-top:var(--nav-h);min-height:calc(100vh - var(--nav-h))}

.sidebar{width:var(--sbw);flex-shrink:0;position:fixed;top:var(--nav-h);left:0;bottom:0;overflow-y:auto;background:var(--pd);border-right:1px solid var(--bd);z-index:100;display:flex;flex-direction:column;transition:transform .3s ease;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:var(--bd)}
@media(max-width:920px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(44,24,16,.15)}}

.sb-hd{padding:24px 20px 16px;border-bottom:1px solid var(--bd)}
.sb-vol{font-family:'EB Garamond',serif;font-size:10px;letter-spacing:.45em;color:var(--vc,var(--cr));text-transform:uppercase;margin-bottom:5px}
.sb-title{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.sb-period{font-size:11px;color:var(--tl);font-family:'EB Garamond',serif;margin-top:4px}
.sb-nav{padding:10px 0;flex:1}
.sb-item{display:block;padding:8px 18px;color:var(--ts);font-size:12px;line-height:1.45;transition:all .18s;border-left:3px solid transparent}
.sb-item:hover{background:rgba(139,26,26,.05);color:var(--vc,var(--cr));border-left-color:rgba(139,26,26,.2)}
.sb-item.active{background:rgba(139,26,26,.08);color:var(--vc,var(--cr));border-left-color:var(--vc,var(--cr));font-weight:500}
.sb-no{font-family:'EB Garamond',serif;font-size:10px;color:var(--tl);letter-spacing:.2em;display:block;margin-bottom:2px}
.sb-item.active .sb-no{color:var(--vc,var(--cr))}
.sb-ft{padding:14px 18px;border-top:1px solid var(--bd)}
.sb-back{font-family:'EB Garamond',serif;font-size:12px;color:var(--tl);letter-spacing:.1em;transition:color .2s;display:block}
.sb-back:hover{color:var(--cr)}

.main{flex:1;margin-left:var(--sbw);min-width:0}
@media(max-width:920px){.main{margin-left:0}}

/* Mobile toggle */
.mob-tog{display:none;position:fixed;bottom:24px;left:24px;z-index:900;width:42px;height:42px;background:var(--cr);color:var(--p);align-items:center;justify-content:center;font-size:18px;box-shadow:0 3px 16px rgba(139,26,26,.35)}
@media(max-width:920px){.mob-tog{display:flex}}
.overlay{display:none;position:fixed;inset:0;background:rgba(26,14,8,.45);z-index:90}
@media(max-width:920px){.overlay.show{display:block}}

/* ─────────────────────────────────────────────────
   VOLUME HEADER
───────────────────────────────────────────────── */
.vol-hdr{background:var(--ink);padding:72px 40px 60px;text-align:center;position:relative;overflow:hidden}
.vol-hdr::before{content:attr(data-num);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Playfair Display',serif;font-size:min(300px,30vw);color:rgba(201,146,44,.05);font-weight:700;line-height:1;pointer-events:none;user-select:none;letter-spacing:-.02em}
.vol-hdr-noise{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");pointer-events:none;mix-blend-mode:overlay}
.vh-ey{font-size:10px;letter-spacing:.5em;color:rgba(201,146,44,.7);text-transform:uppercase;font-family:'EB Garamond',serif;margin-bottom:18px;position:relative;z-index:1}
.vh-ti{font-family:'Playfair Display',serif;font-size:clamp(26px,5vw,56px);font-weight:700;color:var(--p);line-height:1.15;margin-bottom:14px;position:relative;z-index:1}
.vh-sb{font-size:13px;color:rgba(244,237,212,.42);letter-spacing:.1em;margin-bottom:28px;position:relative;z-index:1}
.vh-mt{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;position:relative;z-index:1}
.vh-st{text-align:center}
.vh-sn{font-family:'Playfair Display',serif;font-size:26px;color:rgba(201,146,44,.9)}
.vh-sl{font-size:10px;color:rgba(244,237,212,.3);letter-spacing:.22em;text-transform:uppercase;font-family:'EB Garamond',serif}
.vh-cq{max-width:600px;margin:32px auto 0;padding:20px 26px;border:1px solid rgba(201,146,44,.15);background:rgba(201,146,44,.04);font-style:italic;font-family:'Playfair Display',serif;font-size:15px;color:rgba(244,237,212,.58);text-align:center;line-height:1.65;position:relative;z-index:1}

/* ─────────────────────────────────────────────────
   TABLE OF CONTENTS
───────────────────────────────────────────────── */
.toc-s{background:var(--pd);border-bottom:1px solid var(--bd);padding:36px 40px}
.toc-l{font-size:10px;letter-spacing:.5em;color:var(--cr);text-transform:uppercase;font-family:'EB Garamond',serif;margin-bottom:18px}
.toc-g{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bd);border:1px solid var(--bd)}
@media(max-width:640px){.toc-g{grid-template-columns:1fr}}
.toc-i{background:var(--p);padding:12px 16px;display:flex;align-items:baseline;gap:10px;transition:background .18s}
.toc-i:hover{background:rgba(244,237,212,.6)}
.toc-in{font-family:'EB Garamond',serif;font-size:10px;color:var(--vc,var(--cr));flex-shrink:0;width:40px;letter-spacing:.05em}
.toc-t{font-size:12.5px;color:var(--ts);line-height:1.4}
.toc-y{margin-left:auto;font-size:10px;color:var(--tl);font-family:'EB Garamond',serif;flex-shrink:0;padding-left:6px}
@media(max-width:480px){.toc-y{display:none}}

/* ─────────────────────────────────────────────────
   ARTICLE COMPONENTS
───────────────────────────────────────────────── */
.art-wrap{border-bottom:1px solid var(--bd)}
.article{max-width:700px;margin:0 auto;padding:68px 36px}
@media(max-width:640px){.article{padding:44px 20px}}

.art-hd{margin-bottom:40px;padding-bottom:26px;border-bottom:1px solid var(--bd)}
.art-ch{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.art-no{font-family:'EB Garamond',serif;font-size:10px;letter-spacing:.4em;color:var(--vc,var(--cr));text-transform:uppercase}
.art-ln{flex:1;height:1px;background:var(--bd)}
.art-yr{padding:2px 10px;border:1px solid rgba(139,26,26,.2);font-family:'EB Garamond',serif;font-size:11px;color:var(--vc,var(--cr));letter-spacing:.08em;opacity:.8}
.art-ti{font-family:'Playfair Display',serif;font-size:clamp(20px,3.5vw,36px);font-weight:700;color:var(--ink);line-height:1.2;margin-bottom:12px}
.art-ld{font-size:15px;color:var(--tl);line-height:1.8;font-style:italic;font-family:'Playfair Display',serif}

.art-bd h3{font-family:'Playfair Display',serif;font-size:17.5px;color:var(--vc,var(--cr));font-weight:700;margin:34px 0 12px;padding-left:12px;border-left:3px solid var(--gd);line-height:1.3}
.art-bd p{font-size:15px;color:var(--ts);line-height:2.05;margin-bottom:16px}
.art-bd p.sc{font-style:italic;color:var(--tl);border-left:2px solid rgba(201,146,44,.3);padding-left:16px;margin:24px 0;font-family:'Playfair Display',serif;font-size:14.5px;line-height:1.9}
.art-bd blockquote{margin:26px 0;padding:16px 22px;background:rgba(139,26,26,.03);border:1px solid rgba(139,26,26,.1);border-left:3px solid var(--vc,var(--cr))}
.art-bd blockquote p{font-size:14px;color:var(--tl);font-style:italic;margin-bottom:0;line-height:1.85}
.art-bd blockquote cite{display:block;font-family:'EB Garamond',serif;font-size:11px;color:var(--tll);letter-spacing:.1em;margin-top:8px;font-style:normal}
.hl{color:var(--vc,var(--cr));font-weight:500}
.kc{display:inline;padding:1px 5px;background:rgba(201,146,44,.1);border:1px solid rgba(201,146,44,.22);font-size:13.5px;color:var(--gd)}

.think{margin-top:40px;padding:22px 26px;background:rgba(45,74,45,.05);border:1px solid rgba(45,74,45,.18);position:relative}
.think::before{content:'✦ 独立思考';position:absolute;top:-9px;left:16px;background:var(--p);padding:0 8px;font-size:10px;letter-spacing:.3em;color:var(--gn);font-family:'EB Garamond',serif}
.think p{font-size:14px;color:var(--ts);line-height:1.85;margin-bottom:0;font-style:italic}

.art-ft{margin-top:40px;padding-top:18px;border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.art-src{font-size:11px;color:var(--tl);font-family:'EB Garamond',serif;letter-spacing:.1em}
.art-nv{display:flex;gap:8px}
.art-btn{padding:6px 16px;border:1px solid var(--bd);color:var(--gd);font-size:12px;font-family:'EB Garamond',serif;letter-spacing:.1em;transition:all .18s}
.art-btn:hover{border-color:var(--vc,var(--cr));color:var(--vc,var(--cr))}

.sdiv{text-align:center;padding:18px 0;color:var(--gd);font-family:'EB Garamond',serif;font-size:15px;letter-spacing:.3em;background:var(--pd);border-bottom:1px solid var(--bd)}

/* ─────────────────────────────────────────────────
   VOLUME END SECTION
───────────────────────────────────────────────── */
.ve{padding:52px 36px;background:var(--pd);border-top:1px solid var(--bd);text-align:center}
.ve-no{font-family:'EB Garamond',serif;font-size:10px;letter-spacing:.4em;color:var(--vc,var(--cr));text-transform:uppercase;margin-bottom:14px}
.ve-ti{font-family:'Playfair Display',serif;font-size:24px;color:var(--gd);margin-bottom:12px}
.ve-tx{font-size:14px;color:var(--ts);max-width:520px;margin:0 auto 24px;line-height:1.9}
.ve-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.ve-btn{padding:10px 24px;border:1px solid var(--bd);color:var(--gd);font-family:'EB Garamond',serif;font-size:13px;letter-spacing:.1em;transition:all .18s}
.ve-btn:hover{border-color:var(--vc,var(--cr));color:var(--vc,var(--cr))}
.ve-btn.dm{border-color:var(--bd);color:var(--tl);opacity:.4;cursor:default;pointer-events:none}

/* ─────────────────────────────────────────────────
   FOOTER & UTILITY
───────────────────────────────────────────────── */
footer{background:var(--inks);border-top:2px solid var(--cr);padding:40px 20px;text-align:center}
.fl{font-family:'Playfair Display',serif;font-size:17px;color:var(--go);margin-bottom:10px}
.ft{font-size:12px;color:rgba(244,237,212,.3);line-height:2}
.fa{color:var(--gd);transition:color .2s}
.fa:hover{color:var(--go)}

#bt{position:fixed;bottom:28px;right:28px;width:40px;height:40px;background:var(--cr);color:var(--p);border:none;display:flex;align-items:center;justify-content:center;font-size:16px;opacity:0;transform:translateY(8px);transition:all .28s;z-index:800;box-shadow:0 3px 14px rgba(139,26,26,.3)}
#bt.vis{opacity:1;transform:translateY(0)}
#bt:hover{background:var(--crl)}

/* ─────────────────────────────────────────────────
   HOMEPAGE: HERO
───────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 40% 35%,rgba(58,26,8,.9) 0%,var(--ink) 65%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(201,146,44,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(201,146,44,.025) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.hero-heb{position:absolute;font-family:'Playfair Display',serif;font-size:min(320px,35vw);color:rgba(201,146,44,.04);font-weight:700;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;white-space:nowrap;letter-spacing:-.02em}
.hero-c{position:relative;z-index:1;text-align:center;padding:0 24px;max-width:860px}
.hero-tag{font-family:'EB Garamond',serif;font-size:11px;letter-spacing:.55em;color:rgba(201,146,44,.65);text-transform:uppercase;margin-bottom:24px;opacity:0;animation:aFU .8s .3s forwards}
.hero-h1{font-family:'Playfair Display',serif;font-size:clamp(40px,7.5vw,96px);font-weight:700;color:var(--p);line-height:1.06;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.3);opacity:0;animation:aFU .8s .5s forwards}
.hero-h1 em{color:var(--gl);font-style:normal}
.hero-rule{width:80px;height:1px;background:linear-gradient(to right,transparent,var(--cr),transparent);margin:28px auto;opacity:0;animation:aFI .8s .7s forwards}
.hero-sub{font-size:clamp(13px,1.8vw,17px);color:rgba(244,237,212,.5);letter-spacing:.06em;line-height:2.1;opacity:0;animation:aFU .8s .9s forwards}
.hero-cta{margin-top:36px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;opacity:0;animation:aFU .8s 1.1s forwards}
.hero-btns-p{padding:13px 30px;background:var(--cr);color:var(--p);font-family:'Noto Serif SC',serif;font-size:13px;font-weight:600;letter-spacing:.12em;transition:all .28s;border:1px solid var(--cr);display:inline-block}
.hero-btns-p:hover{background:var(--crl);transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,26,26,.3)}
.hero-btns-s{padding:13px 30px;background:transparent;color:rgba(224,176,80,.85);font-family:'Noto Serif SC',serif;font-size:13px;font-weight:500;letter-spacing:.12em;border:1px solid rgba(224,176,80,.35);transition:all .28s;display:inline-block}
.hero-btns-s:hover{border-color:var(--gl);background:rgba(224,176,80,.07);transform:translateY(-2px)}
.hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(201,146,44,.3);font-family:'EB Garamond',serif;font-size:9px;letter-spacing:.35em;text-transform:uppercase;animation:aBN 2.5s infinite}
.hero-scroll::before{content:'';width:1px;height:32px;background:linear-gradient(to bottom,rgba(201,146,44,.3),transparent)}

/* ─────────────────────────────────────────────────
   HOMEPAGE: SECTIONS
───────────────────────────────────────────────── */
.hp-strip{background:var(--cr);padding:11px 24px;text-align:center;font-size:11px;color:rgba(244,237,212,.78);letter-spacing:.2em;font-family:'EB Garamond',serif}
.hp-sec{padding:72px 24px}
.hp-inner{max-width:var(--max);margin:0 auto}
.hp-ey{font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--cr);font-family:'EB Garamond',serif;margin-bottom:10px}
.hp-ti{font-family:'Playfair Display',serif;font-size:clamp(22px,3.5vw,38px);font-weight:700;color:var(--ink);line-height:1.2;margin-bottom:16px}
.hp-tx{font-size:14.5px;color:var(--ts);line-height:1.95;max-width:560px}

/* stats bar */
.hp-stats{background:var(--crx);display:flex;gap:0;justify-content:center;flex-wrap:wrap}
.hp-stat{padding:28px 40px;text-align:center;border-right:1px solid rgba(244,237,212,.08)}
.hp-stat:last-child{border-right:none}
.hp-sn{font-family:'Playfair Display',serif;font-size:36px;color:var(--gl);line-height:1}
.hp-sl{font-size:9px;color:rgba(244,237,212,.35);letter-spacing:.28em;text-transform:uppercase;font-family:'EB Garamond',serif;margin-top:4px}

/* volume cards */
.hp-vols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd)}
@media(max-width:900px){.hp-vols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hp-vols{grid-template-columns:1fr}}
.hp-vc{background:var(--p);padding:32px 26px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:background .22s}
.hp-vc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--vc,var(--go));transform:scaleX(0);transition:transform .28s;transform-origin:left}
.hp-vc:hover{background:var(--pd)}
.hp-vc:hover::after{transform:scaleX(1)}
.hp-vn{font-family:'EB Garamond',serif;font-size:10px;letter-spacing:.4em;color:var(--vc,var(--go));text-transform:uppercase}
.hp-vp{font-size:11px;color:var(--tl);letter-spacing:.08em;font-family:'EB Garamond',serif}
.hp-vti{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--ink);line-height:1.25}
.hp-vst{font-size:12.5px;color:var(--ts);line-height:1.7}
.hp-vm{display:flex;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--bd);align-items:center}
.hp-vs{font-size:10px;color:var(--tl);font-family:'EB Garamond',serif}
.hp-vs span{color:var(--vc,var(--go));display:block;font-size:16px;font-family:'Playfair Display',serif}
.hp-vb{margin-left:auto;padding:2px 9px;font-size:9px;letter-spacing:.2em;font-family:'EB Garamond',serif;border:1px solid var(--vc,var(--go));color:var(--vc,var(--go))}
.hp-vb.nw{background:var(--vc,var(--go));color:var(--p)}
.hp-vb.sn{border-color:var(--tl);color:var(--tl)}

/* reading path */
.hp-path{display:flex;gap:0;overflow-x:auto;scrollbar-width:thin;padding:0}
.hp-pi{flex:1;min-width:130px;display:flex;flex-direction:column;gap:7px;padding:28px 20px;position:relative;border-right:1px solid var(--bd)}
.hp-pi:last-child{border-right:none}
.hp-pn{font-family:'EB Garamond',serif;font-size:10px;letter-spacing:.3em;color:var(--cr);text-transform:uppercase}
.hp-ptit{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;color:var(--ink);line-height:1.3}
.hp-pper{font-size:10px;color:var(--tl);font-family:'EB Garamond',serif}
.hp-pst{font-size:9px;letter-spacing:.2em;font-family:'EB Garamond',serif;margin-top:3px}
.hp-pst.done{color:var(--cr)}.hp-pst.new{color:var(--go)}.hp-pst.soon{color:var(--tl)}

/* chapter preview grid */
.hp-cg{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd)}
@media(max-width:900px){.hp-cg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.hp-cg{grid-template-columns:1fr}}
.hp-cc{background:var(--p);padding:18px 16px;display:flex;flex-direction:column;gap:6px;transition:background .18s}
.hp-cc:hover{background:var(--pd)}
.hp-cno{font-family:'EB Garamond',serif;font-size:10px;letter-spacing:.3em;color:var(--gd)}
.hp-ct{font-size:12px;color:var(--tm);line-height:1.45}
.hp-cy{font-size:10px;color:var(--tl);font-family:'EB Garamond',serif;margin-top:auto}

/* about grid */
.hp-about{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center}
@media(max-width:760px){.hp-about{grid-template-columns:1fr;gap:36px}}
.hp-q{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(18px,2.2vw,25px);color:var(--crd);line-height:1.65;border-left:3px solid var(--go);padding-left:26px}
.hp-q cite{display:block;font-family:'EB Garamond',serif;font-style:normal;font-size:12px;color:var(--tl);letter-spacing:.1em;margin-top:12px}
.hp-at{font-size:14.5px;color:var(--ts);line-height:2.05}
.hp-at p+p{margin-top:14px}

/* method grid */
.hp-mg{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
@media(max-width:720px){.hp-mg{grid-template-columns:1fr}}
.hp-mi{display:flex;flex-direction:column;gap:12px}
.hp-mic{width:36px;height:36px;border:1.5px solid var(--gd);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:16px;color:var(--cr)}
.hp-mtt{font-family:'Playfair Display',serif;font-size:16px;color:var(--ink);font-weight:700}
.hp-mtx{font-size:13.5px;color:var(--ts);line-height:1.9}

/* timeline strip */
.hp-tl{overflow-x:auto;padding:48px 24px;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.hp-tl-inner{min-width:840px;position:relative;padding:48px 24px}
.hp-tl-line{position:absolute;top:50%;left:24px;right:24px;height:1px;background:linear-gradient(to right,transparent,var(--gd),var(--cr),var(--gd),transparent);transform:translateY(-50%)}
.hp-tl-items{display:flex;justify-content:space-between;position:relative}
.hp-ti{display:flex;flex-direction:column;align-items:center;gap:9px;flex:1}
.hp-ti:nth-child(odd){flex-direction:column}
.hp-ti:nth-child(even){flex-direction:column-reverse}
.hp-td{width:9px;height:9px;border-radius:50%;background:var(--go);border:2px solid var(--p);box-shadow:0 0 0 1px var(--gd);z-index:1;flex-shrink:0}
.hp-td.r{background:var(--cr);box-shadow:0 0 0 1px var(--crd)}
.hp-td.g{background:var(--gn);box-shadow:0 0 0 1px var(--gnl)}
.hp-ty{font-family:'EB Garamond',serif;font-size:11px;color:var(--gd);letter-spacing:.05em;text-align:center;white-space:nowrap}
.hp-tla{font-size:10px;color:var(--tl);text-align:center;line-height:1.4;max-width:64px}

/* ─────────────────────────────────────────────────
   VOL 6 REFERENCE TOOL STYLES
───────────────────────────────────────────────── */
.ref-tabs{display:flex;gap:0;border-bottom:1px solid var(--bd);background:var(--pd);position:sticky;top:var(--nav-h);z-index:50;overflow-x:auto;scrollbar-width:none}
.ref-tabs::-webkit-scrollbar{display:none}
.ref-tab{padding:14px 22px;font-family:'EB Garamond',serif;font-size:12px;letter-spacing:.15em;color:var(--ts);border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s;cursor:pointer;text-transform:uppercase}
.ref-tab:hover{color:var(--cr);background:rgba(139,26,26,.04)}
.ref-tab.on{color:var(--cr);border-bottom-color:var(--cr);background:var(--p)}

.ref-sec{display:none;padding:40px 36px;max-width:980px;margin:0 auto}
.ref-sec.on{display:block}
@media(max-width:640px){.ref-sec{padding:28px 20px}}

.ref-h2{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--ink);margin-bottom:6px}
.ref-sub{font-size:13px;color:var(--tl);font-family:'EB Garamond',serif;letter-spacing:.1em;margin-bottom:28px}

/* Timeline table */
.tl-table{width:100%;border-collapse:collapse;border:1px solid var(--bd)}
.tl-table th{background:var(--ink);color:var(--tla);font-family:'EB Garamond',serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;padding:10px 14px;text-align:left;font-weight:400;border-right:1px solid rgba(244,237,212,.08)}
.tl-table th:last-child{border-right:none}
.tl-table tr{border-bottom:1px solid var(--bd);transition:background .15s}
.tl-table tr:hover{background:rgba(244,237,212,.5)}
.tl-table td{padding:11px 14px;font-size:13px;color:var(--ts);vertical-align:top;border-right:1px solid var(--bd)}
.tl-table td:last-child{border-right:none}
.tl-period{font-family:'EB Garamond',serif;font-size:12px;color:var(--gd);white-space:nowrap}
.tl-event{font-weight:500;color:var(--tm);font-family:'Noto Serif SC',serif;font-size:13px}
.tl-key{font-size:12px;color:var(--ts);margin-top:3px;line-height:1.5}
.tl-cn{color:var(--gn);font-size:12px}
.tl-row-head{background:var(--pd)}
.tl-row-head td{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;color:var(--cr);padding:8px 14px;letter-spacing:.05em}

/* Glossary */
.glos-search{width:100%;padding:11px 16px;border:1px solid var(--bd);background:var(--p);font-family:'Noto Serif SC',serif;font-size:14px;color:var(--tm);outline:none;transition:border-color .2s;margin-bottom:20px}
.glos-search:focus{border-color:var(--cr)}
.glos-search::placeholder{color:var(--tl);font-style:italic;font-family:'EB Garamond',serif}
.glos-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.glos-cat{padding:4px 12px;border:1px solid var(--bd);font-family:'EB Garamond',serif;font-size:11px;letter-spacing:.15em;color:var(--tl);cursor:pointer;transition:all .18s}
.glos-cat:hover,.glos-cat.on{border-color:var(--cr);color:var(--cr);background:rgba(139,26,26,.05)}
.glos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd)}
@media(max-width:640px){.glos-grid{grid-template-columns:1fr}}
.glos-item{background:var(--p);padding:14px 16px;transition:background .15s}
.glos-item:hover{background:var(--pd)}
.glos-item[hidden]{display:none}
.glos-term{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.glos-orig{font-size:12px;color:var(--go);font-family:'EB Garamond',serif;font-style:italic;margin-bottom:6px}
.glos-def{font-size:12.5px;color:var(--ts);line-height:1.65}
.glos-cat-tag{display:inline-block;margin-top:6px;padding:1px 7px;border:1px solid var(--bdg);font-family:'EB Garamond',serif;font-size:10px;color:var(--gd);letter-spacing:.1em}

/* Figure cards */
.fig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.fig-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.fig-grid{grid-template-columns:1fr}}
.fig-card{border:1px solid var(--bd);padding:18px;background:var(--p);transition:all .2s;position:relative}
.fig-card:hover{background:var(--pd);border-color:var(--bds)}
.fig-era{font-family:'EB Garamond',serif;font-size:10px;letter-spacing:.3em;color:var(--go);margin-bottom:8px;text-transform:uppercase}
.fig-name{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px;line-height:1.3}
.fig-dates{font-family:'EB Garamond',serif;font-size:11px;color:var(--tl);margin-bottom:8px}
.fig-desc{font-size:12.5px;color:var(--ts);line-height:1.65}
.fig-vol{position:absolute;top:12px;right:12px;width:6px;height:6px;border-radius:50%;background:var(--fvc,var(--go))}

/* Reading list */
.read-cats{display:flex;flex-direction:column;gap:24px}
.read-cat-h{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--cr);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--bd)}
.read-items{display:flex;flex-direction:column;gap:12px}
.read-item{display:flex;gap:14px;align-items:flex-start;padding:14px;background:var(--p);border:1px solid var(--bd);transition:all .18s}
.read-item:hover{background:var(--pd);border-color:var(--bds)}
.read-num{font-family:'Playfair Display',serif;font-size:20px;color:var(--go);opacity:.6;line-height:1;flex-shrink:0;width:28px;text-align:center}
.read-info{flex:1}
.read-title{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:3px}
.read-author{font-family:'EB Garamond',serif;font-size:12px;color:var(--go);font-style:italic;margin-bottom:5px}
.read-desc{font-size:12.5px;color:var(--ts);line-height:1.65}
.read-tag{display:inline-block;margin-top:5px;padding:1px 7px;border:1px solid var(--bdg);font-family:'EB Garamond',serif;font-size:10px;color:var(--gd);letter-spacing:.1em}

/* ─────────────────────────────────────────────────
   FADE ANIMATIONS
───────────────────────────────────────────────── */
.fi{opacity:0;transform:translateY(16px);transition:opacity .62s ease,transform .62s ease}
.fi.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s}

@keyframes aFU{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes aFI{from{opacity:0}to{opacity:1}}
@keyframes aBN{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ─────────────────────────────────────────────────
   BG ALTERNATION
───────────────────────────────────────────────── */
.bg-pd{background:var(--pd)}
.bg-ink{background:var(--ink)}
.bb{border-bottom:1px solid var(--bd)}
.bt{border-top:1px solid var(--bd)}
.bt2{border-top:2px solid var(--cr)}

/* ── BACKWARD COMPATIBILITY: tnav aliases ── */
.tnav{position:fixed;top:0;left:0;right:0;z-index:1500;height:var(--nav-h);background:rgba(244,237,212,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 28px;gap:12px;box-shadow:0 1px 16px rgba(44,24,16,.06)}
.tnl{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--cr);transition:opacity .2s;letter-spacing:.02em}
.tnl:hover{opacity:.75}
.tnsp{width:1px;height:18px;background:var(--bd);flex-shrink:0}
.tnc{font-size:12px;color:var(--ts);opacity:.7;font-family:'EB Garamond',serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tnlinks{margin-left:auto;display:flex;gap:2px;align-items:center}
.tna{padding:5px 11px;font-size:11px;color:var(--tl);letter-spacing:.12em;font-family:'EB Garamond',serif;border:1px solid transparent;transition:all .2s;white-space:nowrap}
.tna:hover,.tna.on{color:var(--cr);border-color:var(--bd);background:rgba(139,26,26,.05)}
@media(max-width:800px){.tnlinks{display:none}.tnc{display:none}}
/* Ensure google fonts imported even if linked externally */

/* ═══════════════════════════════════════════════════
   DASHANG (打赏) SECTION + AD SLOTS — SOP additions
═══════════════════════════════════════════════════ */
.ds-sec{background:var(--pd,#EAE0C0);border-top:1px solid var(--bd,rgba(139,26,26,.13));border-bottom:1px solid var(--bd,rgba(139,26,26,.13));padding:48px 24px}
.ds-inner{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:36px}
.ds-text{flex:1}
.ds-title{font-family:'Playfair Display','Noto Serif SC',serif;font-size:20px;font-weight:700;color:var(--cr,#8B1A1A);margin-bottom:10px}
.ds-desc{font-size:14px;color:var(--ts,#5A3010);line-height:1.85;opacity:.8}
.ds-qr{flex-shrink:0;width:180px}
.ds-img{width:180px;height:auto;border-radius:6px;box-shadow:0 3px 16px rgba(44,24,16,.12)}
@media(max-width:640px){.ds-inner{flex-direction:column;text-align:center}.ds-qr{width:160px}.ds-img{width:160px}}

.ad-slot{background:var(--pd,#EAE0C0);border:1px dashed var(--bd,rgba(139,26,26,.13));padding:20px;text-align:center;font-family:'EB Garamond','Noto Sans SC',sans-serif;font-size:12px;color:var(--tl,#9A6E40);margin:0;min-height:90px;display:flex;align-items:center;justify-content:center;letter-spacing:.1em}