:root{
  --bg:#0a0a0b;
  --ink:#f4f2ee;
  --ink-2:#9f9b94;
  --line:rgba(255,255,255,.12);
  /* 主色是黑。每个栏目一个副色，只在自己那一栏里出现 */
  --c-feature:#e0713f;   /* 新作 · 砖橙，接作品本身的暖色 */
  --c-people:#5b8dd6;    /* 研究人员 · 靛蓝 */
  --c-output:#e2a04a;    /* 成果 · 琥珀，取自首屏那盏煤油灯 */
  --c-project:#3fae92;   /* 在研项目 · 青绿，未完成的颜色 */
  --c-about:#a684dd;     /* 关于 · 淡紫 */
  --c-constitution:#d4a24c; /* 立宪 · 旧金 */
  --sans:"Inter","Noto Sans SC","PingFang SC",-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding:0 40px}

/* 每一栏自带 --c，栏内一切亮点都用它 */
section{--c:var(--ink)}
.sec-feature{--c:var(--c-feature)}
.sec-people {--c:var(--c-people); background:#0a1018}
.sec-output {--c:var(--c-output); background:#130e06}
.sec-project{--c:var(--c-project); background:#061310}
.sec-about  {--c:var(--c-about);  background:#100a1a}

/* 顶栏：每一项预置自己栏目的颜色 */
.nav{position:absolute;top:0;left:0;right:0;z-index:5}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:32px}
.logo{display:flex;align-items:center;gap:12px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.logo svg{width:26px;height:26px}
.nav nav{display:flex;gap:30px;font-size:14px;color:rgba(255,255,255,.8)}
.nav nav a{position:relative;padding-bottom:4px}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--c);transition:right .3s ease}
.nav nav a:hover{color:var(--c)}
.nav nav a:hover::after{right:0}
.nav .right{display:flex;align-items:center;gap:18px;font-size:13px;color:rgba(255,255,255,.5)}
.nav .right a.on{color:var(--ink)}

/* 首屏：不带栏目色，留给影像 */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000}
.hero video,.hero img.poster{width:100%;height:100%;object-fit:cover;filter:contrast(1.08) brightness(.9)}
/* 黑白片源调成双色：高光偏琥珀，暗部偏青蓝 */
.hero .grade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(150deg,#f0b45e 0%,#c98a3e 34%,#2a4a63 74%,#16344a 100%);
  mix-blend-mode:color;opacity:.62}
.hero .grade2{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 42% 46%,rgba(255,186,105,.26) 0%,rgba(255,186,105,0) 58%);
  mix-blend-mode:screen}
.hero::after{content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 30%,rgba(4,4,5,.22) 52%,rgba(6,6,7,.88) 100%)}
.hero .copy{position:absolute;left:0;right:0;bottom:0;z-index:4;padding-bottom:clamp(48px,7vh,90px)}
.hero h1{font-size:clamp(34px,5.4vw,78px);line-height:1.04;letter-spacing:-.025em;font-weight:600;margin:0 0 20px;max-width:17ch}
.hero .zh{font-size:clamp(15px,1.5vw,19px);color:rgba(255,255,255,.76);margin:0 0 34px;max-width:40ch;font-weight:300}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;
  font-size:14.5px;font-weight:500;transition:.2s;border:1px solid transparent}
.btn.solid{background:var(--c,#fff);color:#0d0b08}
.btn.solid:hover{filter:brightness(1.12)}
.btn.ghost{border-color:rgba(255,255,255,.36);color:#fff}
.btn.ghost:hover{border-color:var(--c);color:var(--c)}
.hero .btn.solid{background:#fff;color:#0a0a0b}
.hero .btn.solid:hover{background:#e7e4de}
.scroll{position:absolute;right:40px;bottom:46px;z-index:4;font-size:11px;letter-spacing:.2em;
  color:rgba(255,255,255,.4);writing-mode:vertical-rl}

/* 栏目标题：一条栏目色的短线 + 小字 */
.sechead{display:flex;align-items:center;justify-content:space-between;
  padding:56px 40px 20px;max-width:1360px;margin:0 auto}
.sechead h2{margin:0;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;font-weight:600;
  color:var(--c);display:flex;align-items:center;gap:14px}
.sechead h2 .sq{width:14px;height:14px;background:var(--c);flex:0 0 auto}
.sechead .more{font-size:13.5px;font-weight:500;color:var(--c);border:1.5px solid var(--c);
  border-radius:999px;padding:9px 18px;transition:.2s}
.sechead .more:hover{background:var(--c);color:#0a0a0b}
/* 栏目之间用一整条副色隔开 */
.bar{height:5px;background:var(--c)}

/* 关于本社 */
.sec-about{border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.sec-about::before{content:"";position:absolute;inset:0;
  background:radial-gradient(110% 80% at 50% 0%,rgba(166,132,221,.20) 0%,rgba(166,132,221,0) 62%)}
.sec-about .wrap{position:relative;z-index:2;padding:96px 40px 100px;max-width:1080px;text-align:center}
.sec-about .k{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--c);
  display:inline-flex;align-items:center;gap:12px;margin-bottom:34px}
.sec-about .k::before,.sec-about .k::after{content:"";width:34px;height:1.5px;background:var(--c)}
.sec-about .q{margin:0;font-size:clamp(26px,3.6vw,50px);line-height:1.34;font-weight:500;letter-spacing:-.022em}
.sec-about em{font-style:normal;color:var(--c)}
.sec-about .sub{margin:30px 0 0;font-size:clamp(15px,1.7vw,21px);color:var(--c);font-weight:400;letter-spacing:.01em}
.sec-about .sub::before{content:"";display:block;width:60px;height:2px;background:var(--c);margin:0 auto 26px}

/* 新作：满幅彩色 */
.sec-feature{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.slides{position:relative;height:clamp(380px,60vh,640px);cursor:pointer}
.sec-feature:focus-visible{outline:2px solid var(--c);outline-offset:-2px}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.slide.on{opacity:1;visibility:visible}
.slide .img{position:absolute;inset:0;overflow:hidden}
.slide .img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);
  transition:transform 8s linear}
.slide.on .img img{transform:scale(1)}
/* 照片那几屏用与首屏同一套调色，画作那一屏保留原色 */
.slide.tone .img::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(150deg,#f0b45e 0%,#c98a3e 34%,#2a4a63 74%,#16344a 100%);
  mix-blend-mode:color;opacity:.6}
.slide .img::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to right,rgba(9,6,4,.93) 0%,rgba(9,6,4,.52) 46%,rgba(9,6,4,.08) 100%)}
.slide .copy{position:absolute;inset:0;display:flex;align-items:center;z-index:3}
.slide .copy .wrap{width:100%}
.sec-feature h2{margin:0 0 14px;font-size:clamp(28px,4.2vw,56px);font-weight:600;letter-spacing:-.025em;line-height:1.08}
.sec-feature p{margin:0 0 22px;max-width:44ch;font-size:clamp(15px,1.5vw,18px);color:rgba(255,255,255,.84);font-weight:300}
.sec-feature .by{font-size:13.5px;color:var(--ink-2);margin-bottom:20px}
/* 小圆点 */
.dots{position:absolute;left:0;right:0;bottom:26px;z-index:6}
.dots .wrap{display:flex;gap:10px;align-items:center}
.dot{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.3);border:0;padding:0;
  cursor:pointer;transition:.3s;position:relative}
.dot:hover{background:rgba(255,255,255,.6)}
.dot.on{width:30px;background:var(--c)}
.dots .count{margin-left:14px;font-size:12px;color:rgba(255,255,255,.45);letter-spacing:.08em}

/* 研究人员 */
.strip{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--line)}
.p{position:relative;background:#000;overflow:hidden;aspect-ratio:3/4.4}
.p img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.66) contrast(1.05);
  transition:filter .55s ease, transform .9s cubic-bezier(.2,.7,.3,1)}
.p:hover img{filter:grayscale(0) brightness(1);transform:scale(1.05)}
.p .t{position:absolute;left:0;right:0;bottom:0;padding:20px 18px 18px;
  background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,0))}
.p .t b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.p .t span{display:block;margin-top:3px;font-size:11.5px;color:rgba(255,255,255,.72);
  opacity:0;transform:translateY(5px);transition:.35s}
.p:hover .t span{opacity:1;transform:none}
.p::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.p:hover::after{transform:scaleX(1)}
.sec-people{border-bottom:1px solid var(--line)}
.strip{border-bottom:4px solid var(--c)}

/* 成果 */
.rows{max-width:1360px;margin:0 auto;padding:0 40px 64px}
.row{display:grid;grid-template-columns:104px minmax(0,1fr) 210px;gap:28px;align-items:center;
  padding:26px 0;border-top:1px solid var(--line);position:relative;transition:.28s}
.row::before{content:"";position:absolute;left:-40px;top:0;bottom:0;width:3px;background:var(--c);
  transform:scaleY(0);transition:transform .3s ease}
.row:hover::before{transform:scaleY(1)}
.row:hover{padding-left:12px}
.row .n{font-size:12.5px;color:var(--c);letter-spacing:.05em;font-weight:500}
.row h3{margin:0;font-size:clamp(19px,2vw,27px);font-weight:500;letter-spacing:-.02em;line-height:1.25;transition:.2s}
.row:hover h3{color:var(--c)}
.row .m{margin:6px 0 0;font-size:13.5px;color:var(--ink-2)}
.row .by{font-size:13px;color:var(--ink-2);text-align:right}
.sec-output{border-bottom:1px solid var(--line)}

/* 在研项目 */
.cards{max-width:1360px;margin:0 auto;padding:0 40px 66px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cards{padding:0;margin-bottom:66px;max-width:calc(1360px - 80px)}
.cd{background:#061310;padding:28px 26px 30px;position:relative;transition:background .3s;border-top:4px solid var(--c)}
.cd:hover{background:#08201a}
.cd .st{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c);margin-bottom:14px}
.cd .st i{width:6px;height:6px;border-radius:999px;background:var(--c);font-style:normal}
.cd .st.idea{color:#8d8a84}
.cd .st.idea i{background:#8d8a84}
.cd h3{margin:0 0 10px;font-size:19.5px;font-weight:500;line-height:1.32;letter-spacing:-.015em}
.cd p{margin:0 0 14px;font-size:14px;color:var(--ink-2);line-height:1.62}
.cd .step{font-size:12.5px;color:var(--c);opacity:.9}
.sec-project{border-bottom:1px solid var(--line)}

footer{padding:60px 0 74px;color:var(--ink-2);font-size:13.5px;background:var(--bg)}
footer .wrap{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer b{display:block;color:var(--ink);font-size:15px;font-weight:600;margin-bottom:10px}
footer a:hover{color:var(--ink)}

@media (max-width:1080px){
  .strip{grid-template-columns:repeat(4,1fr)}
  .sec-about .wrap{grid-template-columns:1fr;gap:18px}
  .cards{grid-template-columns:1fr}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  .nav nav{display:none}
  .sechead{padding:44px 20px 20px}
  .rows{padding:0 20px 44px}
  .cards{max-width:calc(100% - 40px);margin:0 20px 46px}
  .strip{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:1fr;gap:6px}
  .row .by{text-align:left}
  .row::before{left:-20px}
  .sec-feature .img::after{background:linear-gradient(to top,rgba(9,6,4,.95) 32%,rgba(9,6,4,.2) 100%)}
  .sec-feature .copy{align-items:flex-end;padding-bottom:34px}
}

/* ── 内页 ─────────────────────────────── */
/* 内页的顶栏不压在影像上，改成实底 */
body.inner .nav{position:static;background:#0a0a0b;border-bottom:1px solid var(--line)}
body.inner .nav nav a{color:rgba(255,255,255,.8)}

/* 内页页头：一条副色带 + 大标题 */
.pagehead{--c:var(--ink);border-bottom:1px solid var(--line)}
.pagehead .bar{height:5px;background:var(--c)}
.pagehead .wrap{padding:54px 40px 46px}
.pagehead .k{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--c);
  display:inline-flex;align-items:center;gap:12px;margin-bottom:16px}
.pagehead .k::before{content:"";width:14px;height:14px;background:var(--c)}
.pagehead h1{margin:0;font-size:clamp(30px,4vw,54px);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.pagehead .lead{margin:16px 0 0;max-width:56ch;font-size:clamp(15px,1.6vw,18px);color:var(--ink-2);font-weight:300}

/* 研究人员总表 */
.grid8{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:4px solid var(--c)}
.g{position:relative;background:#000;overflow:hidden;display:block}
.g img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) brightness(.66) contrast(1.05);
  transition:filter .55s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.g:hover img{filter:grayscale(0) brightness(1);transform:scale(1.04)}
.g .t{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 20px;
  background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,0))}
.g .t b{display:block;font-size:19px;font-weight:600;letter-spacing:-.015em}
.g .t i{display:block;font-style:normal;margin-top:4px;font-size:12.5px;color:var(--c)}
.g .t p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.78);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .3s ease}
.g:hover .t p{max-height:8em;opacity:1}

/* 个人页 */
.profile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;
  border-bottom:1px solid var(--line)}
.profile .pic img{width:100%;height:100%;object-fit:cover;display:block;min-height:420px}
.profile .side{padding:56px 40px 56px 48px;display:flex;flex-direction:column;justify-content:center}
.profile .field{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--c);
  display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.profile .field::before{content:"";width:14px;height:14px;background:var(--c)}
.profile h1{margin:0 0 18px;font-size:clamp(34px,4.6vw,62px);font-weight:600;letter-spacing:-.03em;line-height:1}
.profile p{margin:0;font-size:clamp(16px,1.8vw,20px);line-height:1.7;color:rgba(255,255,255,.86);font-weight:300;max-width:46ch}

/* 空栏提示 */
.empty{max-width:1360px;margin:0 auto;padding:0 40px 56px}
.empty div{border:1px dashed var(--line);padding:26px 24px;color:var(--ink-2);font-size:14.5px}

/* 关于页正文 */
.prose{max-width:820px;margin:0 auto;padding:16px 40px 76px}
.prose h2{margin:44px 0 12px;font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;
  color:var(--c);display:flex;align-items:center;gap:12px}
.prose h2::before{content:"";width:12px;height:12px;background:var(--c)}
.prose p{margin:0 0 15px;font-size:17px;line-height:1.85;color:rgba(255,255,255,.82);font-weight:300}

@media (max-width:1080px){ .grid8{grid-template-columns:repeat(2,1fr)} }
@media (max-width:780px){
  .profile{grid-template-columns:1fr}
  .profile .side{padding:34px 20px 40px}
  .pagehead .wrap{padding:36px 20px 32px}
  .grid8{grid-template-columns:1fr}
  .g .t p{max-height:none;opacity:1}
  .prose{padding:12px 20px 54px}
  .empty{padding:0 20px 40px}
}

/* 还没做好的成果：不给链接，标明在做 */
.row.is-soon h3{color:var(--ink-2);font-weight:400}
.row.is-soon:hover h3{color:var(--ink-2)}
.row.is-soon:hover{padding-left:0}
.row.is-soon::before{display:none}
.row .soon{display:inline-block;margin-left:10px;font-size:11.5px;font-weight:500;
  letter-spacing:.1em;color:var(--c);border:1px solid var(--c);border-radius:999px;
  padding:2px 9px;vertical-align:middle;opacity:.85}

/* 立宪页与文章页（09-23 加） */
.sec-constitution{--c:var(--c-constitution);background:#14100a}
.qcard{border:1px solid var(--line);border-left:3px solid var(--c);padding:22px 26px;margin:0 0 22px;background:rgba(255,255,255,.02)}
.qcard .st{font-size:12px;letter-spacing:.14em;color:var(--c);text-transform:uppercase}
.qcard h3{margin:.4em 0 .5em;font-size:22px;font-weight:600}
.qcard p{margin:.4em 0;line-height:1.85;opacity:.9}
.qcard a.read{display:inline-block;margin-top:.6em;color:var(--c)}
.article .wrap{max-width:760px}
.article h2{font-size:21px;margin:2.2em 0 .8em;font-weight:600;color:var(--c)}
.article p{line-height:1.95;margin:0 0 1.1em;font-size:16.5px}
.article .byline{opacity:.75;font-size:14px;margin-bottom:2em}
.article ol{padding-left:1.4em;opacity:.85;font-size:14.5px;line-height:1.8}
.article ol li{margin-bottom:.7em}

/* 09-24：避免中文单字成行；成果页按作者分组 */
p,h1,h2,h3,.m,.by,.lead,.step{text-wrap:pretty}
.nw{white-space:nowrap}
/* 每位研究员一个颜色，只用在成果列表上区分作者（09-24 主人：去掉头像，只靠颜色主题区别作者） */
:root{--a-sigma:#6fa8dc;--a-leimma:#e0906f;--a-vox:#b99cf0;--a-nullroute:#4fc3a1;--a-qianxing:#e8c65a;--a-pharma:#ec7d95;--a-memoria:#a8c86a;--a-runo:#d6d6d6}
