:root{
  --ink:#1b232f;--ink-soft:#3a4453;--muted:#8a93a0;--line:#e6e9ef;
  --accent:#b02a2a;--accent-soft:#d24b4b;--navy:#101b2c;--navy2:#1d3356;
  --paper:#fbfaf7;--card:#ffffff;--shadow:0 16px 44px -22px rgba(16,27,44,.55);--maxw:820px;
}
[data-theme="dark"]{
  --ink:#e8ecf4;--ink-soft:#c2cad8;--muted:#8792a4;--line:#26313f;
  --accent:#e0655f;--accent-soft:#f08a84;--navy:#0b1420;--navy2:#12203a;
  --paper:#0d131c;--card:#141c28;--shadow:0 16px 44px -18px rgba(0,0,0,.8);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;color:var(--ink);background:var(--paper);transition:background .4s,color .4s;
  font-family:"Noto Serif SC","Songti SC","STSong","SimSun",serif;-webkit-font-smoothing:antialiased;}
.sans{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;}
a{color:inherit;}
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;background:linear-gradient(90deg,var(--accent),#e0a24a);transition:width .08s linear;}

/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;gap:18px;
  padding:10px 22px;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--paper) 74%,transparent);
  border-bottom:1px solid var(--line);font-family:"Noto Sans SC",sans-serif;font-size:.85rem;}
.brand{font-weight:600;letter-spacing:.1em;color:var(--ink);text-decoration:none;white-space:nowrap;}
.brand b{color:var(--accent);}
.mainnav{display:flex;gap:4px;flex:1;overflow-x:auto;}
.mainnav a{color:var(--ink-soft);text-decoration:none;padding:7px 12px;border-radius:8px;white-space:nowrap;transition:.2s;}
.mainnav a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);}
.mainnav a.on{color:var(--accent);font-weight:600;background:color-mix(in srgb,var(--accent) 12%,transparent);}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  cursor:pointer;font-size:15px;display:grid;place-items:center;transition:.2s;flex:0 0 auto;}
.iconbtn:hover{border-color:var(--accent);color:var(--accent);}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:radial-gradient(1200px 600px at 50% -10%,#274672 0%,var(--navy2) 40%,var(--navy) 100%);}
.hero.home{padding:clamp(104px,16vw,180px) 22px clamp(120px,18vw,190px);}
.hero.page{padding:clamp(96px,14vw,140px) 22px clamp(70px,10vw,100px);}
.hero .tag{display:inline-block;font-size:.78rem;letter-spacing:.26em;color:#cdd7ea;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:.42em 1.1em;margin-bottom:1.5rem;}
.hero h1{font-size:clamp(2.2rem,7vw,3.9rem);line-height:1.16;margin:0;font-weight:700;letter-spacing:.06em;text-shadow:0 3px 24px rgba(0,0,0,.35);}
.hero h1 .dot{color:var(--accent-soft);}
.hero h1 span.w{display:inline-block;opacity:0;transform:translateY(24px);animation:up .8s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes up{to{opacity:1;transform:none;}}
.hero .sub{margin:1.3rem auto 0;max-width:680px;font-size:clamp(.96rem,2.6vw,1.14rem);line-height:1.9;color:#dbe3f1;}
.hero .meta{margin-top:1.7rem;font-size:.8rem;color:#9fb0cd;letter-spacing:.16em;}
.hero .roadline{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:80px;}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.stats{max-width:var(--maxw);margin:-52px auto 42px;padding:0 22px;position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 12px;text-align:center;box-shadow:var(--shadow);}
.stat .n{font-size:clamp(1.5rem,4.4vw,2rem);font-weight:700;color:var(--accent);font-family:"Noto Sans SC",sans-serif;}
.stat .n small{font-size:.55em;font-weight:600;margin-left:2px;}
.stat .l{margin-top:6px;font-size:.78rem;color:var(--muted);letter-spacing:.04em;}
@media(max-width:620px){.stats{grid-template-columns:repeat(2,1fr);margin-top:-38px;}}

.crumb{margin:26px 0 6px;font-size:.82rem;color:var(--muted);letter-spacing:.06em;}
.crumb a{text-decoration:none;color:var(--ink-soft);}
.crumb a:hover{color:var(--accent);}
.crumb span{color:var(--accent);}
.page-title{font-family:"Noto Sans SC",sans-serif;font-weight:700;font-size:clamp(1.5rem,4.4vw,2.1rem);line-height:1.4;margin:.2rem 0 1rem;}
.lead{font-size:1.1rem;line-height:2.05;color:var(--ink-soft);text-indent:2em;margin:0 0 1.3rem;}
h2.section{font-family:"Noto Sans SC",sans-serif;font-weight:700;font-size:clamp(1.28rem,3.6vw,1.55rem);
  margin:3rem 0 1rem;padding-left:.72rem;border-left:5px solid var(--accent);line-height:1.5;}
h2.section .num{color:var(--accent);font-size:.82em;margin-right:.35em;}
article p{font-size:1.06rem;line-height:2.05;text-indent:2em;margin:1.05rem 0;}
blockquote.pref{margin:1.6rem 0;padding:1.1rem 1.4rem;background:var(--card);border-left:4px solid #e0a24a;
  border-radius:0 10px 10px 0;color:var(--ink-soft);font-size:1.02rem;line-height:2;box-shadow:var(--shadow);}

/* module cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.4rem 0 1rem;}
.card{display:flex;gap:16px;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px;box-shadow:var(--shadow);transition:.28s;position:relative;overflow:hidden;}
.card:hover{transform:translateY(-4px);border-color:var(--accent);}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);opacity:0;transition:.28s;}
.card:hover::before{opacity:1;}
.card .c-num{font-family:"Noto Sans SC",sans-serif;font-size:1.7rem;font-weight:700;color:var(--accent);opacity:.32;line-height:1;}
.card h3{margin:0;font-family:"Noto Sans SC",sans-serif;font-size:1.16rem;font-weight:700;}
.card .c-sub{margin-top:4px;color:var(--accent);font-size:.86rem;font-family:"Noto Sans SC",sans-serif;letter-spacing:.04em;}
.card p{margin:.7rem 0 0;font-size:.9rem;line-height:1.8;color:var(--ink-soft);text-indent:0;}
.card .c-go{margin-top:12px;display:inline-block;font-family:"Noto Sans SC",sans-serif;font-size:.84rem;color:var(--accent);}
@media(max-width:640px){.cards{grid-template-columns:1fr;}}

/* figures */
figure{margin:1.9rem 0 2.1rem;}
figure img{display:block;width:100%;height:auto;border-radius:9px;box-shadow:var(--shadow);background:#e9ecef;cursor:zoom-in;transition:transform .4s;}
figure img:hover{transform:translateY(-3px);}
figure.portrait img{max-width:64%;margin:0 auto;}
figure figcaption{text-align:center;color:var(--muted);font-size:.85rem;line-height:1.7;margin-top:.7rem;font-family:"Noto Sans SC",sans-serif;}
.figrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:620px){.figrow{grid-template-columns:1fr;gap:0;}figure.portrait img{max-width:100%;}}

/* concept cards */
.concepts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:1.5rem 0 2rem;}
.concept{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;cursor:pointer;box-shadow:var(--shadow);transition:.3s;}
.concept:hover{transform:translateY(-3px);border-color:var(--accent);}
.concept .k{font-family:"Noto Sans SC",sans-serif;font-size:.72rem;letter-spacing:.24em;color:var(--muted);}
.concept .v{margin-top:10px;font-size:1.2rem;font-weight:700;letter-spacing:.14em;}
.concept .d{margin-top:12px;font-size:.86rem;color:var(--ink-soft);line-height:1.8;max-height:0;opacity:0;transition:.35s;overflow:hidden;}
.concept.open{border-color:var(--accent);}
.concept.open .d{max-height:170px;opacity:1;}
@media(max-width:560px){.concepts{grid-template-columns:1fr;}}

/* timeline */
.tl{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow);margin:1.5rem 0 2.2rem;}
.tl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.tl-head b{font-family:"Noto Sans SC",sans-serif;font-size:.9rem;letter-spacing:.1em;}
.tl-nav{display:flex;gap:8px;}
.tl-rail{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 14px;}
.tl-year{flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--ink-soft);
  font-family:"Noto Sans SC",sans-serif;font-size:.86rem;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.2s;}
.tl-year:hover{border-color:var(--accent);color:var(--accent);}
.tl-year.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}
.tl-detail{border-top:1px dashed var(--line);padding-top:16px;min-height:96px;}
.tl-detail .yr{font-family:"Noto Sans SC",sans-serif;color:var(--accent);font-weight:700;letter-spacing:.1em;}
.tl-detail .ttl{margin-top:6px;font-size:1.12rem;font-weight:700;}
.tl-detail .desc{margin-top:8px;color:var(--ink-soft);line-height:1.9;font-size:.98rem;}
.tl-progress{height:3px;background:var(--line);border-radius:3px;margin-top:14px;overflow:hidden;}
.tl-progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .35s;}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.4rem 0 2rem;}
.gallery .g{position:relative;overflow:hidden;border-radius:10px;cursor:zoom-in;box-shadow:var(--shadow);aspect-ratio:4/3;background:#e9ecef;}
.gallery .g img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.gallery .g:hover img{transform:scale(1.08);}
.gallery .g span{position:absolute;left:0;right:0;bottom:0;padding:16px 12px 8px;color:#fff;font-size:.76rem;font-family:"Noto Sans SC",sans-serif;
  background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:.3s;}
.gallery .g:hover span{opacity:1;}
@media(max-width:620px){.gallery{grid-template-columns:repeat(2,1fr);}}

/* pager */
.pager{display:flex;justify-content:space-between;gap:14px;margin:2.6rem 0 2.4rem;flex-wrap:wrap;}
.pager a{text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--card);
  box-shadow:var(--shadow);transition:.25s;min-width:210px;flex:1;}
.pager a:hover{border-color:var(--accent);transform:translateY(-2px);}
.pager .p-l{color:var(--muted);font-size:.78rem;letter-spacing:.08em;}
.pager .p-t{margin-top:5px;font-weight:700;font-size:1rem;}
.pager .next{text-align:right;}

/* lightbox */
.lb{position:fixed;inset:0;z-index:120;background:rgba(8,12,20,.93);display:none;align-items:center;justify-content:center;flex-direction:column;padding:30px;}
.lb.show{display:flex;animation:fade .25s;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb img{max-width:min(94vw,1100px);max-height:78vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.lb .cap{margin-top:16px;color:#dfe6f2;font-family:"Noto Sans SC",sans-serif;font-size:.9rem;text-align:center;max-width:800px;line-height:1.7;}
.lb .cnt{margin-top:6px;color:#8792a4;font-size:.78rem;font-family:"Noto Sans SC",sans-serif;}
.lb button{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;
  width:48px;height:48px;border-radius:50%;font-size:22px;cursor:pointer;display:grid;place-items:center;transition:.2s;}
.lb button:hover{background:rgba(255,255,255,.26);}
.lb .prev{left:18px;top:50%;transform:translateY(-50%);}
.lb .next{right:18px;top:50%;transform:translateY(-50%);}
.lb .close{top:18px;right:18px;width:42px;height:42px;font-size:18px;}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}
#top{position:fixed;right:20px;bottom:24px;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:var(--accent);
  color:#fff;font-size:1.1rem;box-shadow:0 10px 26px -8px rgba(176,42,42,.7);opacity:0;visibility:hidden;transition:.3s;z-index:70;}
#top.show{opacity:1;visibility:visible;}
.end{margin:2.6rem 0 1rem;padding:32px 26px;text-align:center;border-radius:16px;color:#eef2fa;background:radial-gradient(700px 300px at 50% -30%,#274672,var(--navy));}
.end .cn{font-size:clamp(1.15rem,4vw,1.5rem);font-weight:700;letter-spacing:.22em;}
.end .en{margin-top:.7rem;color:#9fb0cd;font-size:.78rem;letter-spacing:.3em;font-family:"Noto Sans SC",sans-serif;}
footer{padding:34px 22px 54px;text-align:center;color:var(--muted);font-size:.82rem;line-height:1.9;font-family:"Noto Sans SC",sans-serif;}
footer b{color:var(--ink-soft);font-weight:600;}