:root{
  --ink:#202124; --muted:#5f6368; --line:#e3e4e8; --link:#1a3f73;
  --bg:#ffffff; --maxw:1100px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
a{color:var(--link)}

/* ---------- hero banner with overlaid nav ---------- */
.hero{
  position:relative; min-height:330px; width:100%;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(170deg,#24456f 0%,#2f5680 26%,#1f3b57 56%,#16222f 100%);
  background-size:cover; background-position:center 50%;
  overflow:hidden;
}
.hero.has-img{background-image:url("banner.jpg")}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.34) 100%);
}
.hero h1{
  position:relative; z-index:2; margin:0; color:#fff; padding:64px 20px 30px;
  font-family:"Times New Roman",Times,Georgia,serif;
  font-size:68px; font-weight:400; letter-spacing:.3px; line-height:1.1; text-align:center;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}

/* overlaid top bar */
.topbar{
  position:absolute; top:0; left:0; right:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 30px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand .inst{
  color:#fff; font-size:11px; line-height:1.25; letter-spacing:.06em;
  text-transform:uppercase; opacity:.92; border-right:1px solid rgba(255,255,255,.4);
  padding-right:14px;
}
.brand .who{
  color:#fff; font-size:17px; font-weight:600; letter-spacing:.2px; white-space:nowrap;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.brand .who .cn{font-weight:500; opacity:.95; margin-left:2px}
.navlinks{display:flex; gap:26px; align-items:center}
.navlinks a{
  color:#fff; text-decoration:none; font-size:15.5px; opacity:.88;
  padding-bottom:2px; border-bottom:2px solid transparent;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.navlinks a:hover{opacity:1}
.navlinks a[aria-current="page"]{opacity:1; border-bottom-color:rgba(255,255,255,.85)}

/* ---------- homepage two-column ---------- */
.lead{display:flex; gap:62px; align-items:flex-start; padding:46px 0 10px}
.lead .col-photo{flex:0 0 266px}
.lead img.portrait{
  width:266px; height:340px; object-fit:cover; display:block;
  border:1px solid var(--line);
}
.lead .col-text{flex:1 1 auto; max-width:660px}
.lead .col-text p{margin:0 0 16px}
.meta{margin-top:26px}
.meta p{margin:0 0 9px}
.meta b{font-weight:600}

/* ---------- research page ---------- */
h2{
  font-size:15px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:600; margin:40px 0 18px;
  padding-bottom:7px; border-bottom:1px solid var(--line);
}
ol.papers{list-style:none; counter-reset:p; padding:0; margin:0; max-width:820px}
ol.papers > li{counter-increment:p; position:relative; padding-left:32px; margin:0 0 26px}
ol.papers > li::before{
  content:counter(p) "."; position:absolute; left:0; top:0; color:var(--muted); font-size:15px;
}
ol.papers .t{font-weight:600; display:block; margin-bottom:3px}
ol.papers .w{color:var(--muted); font-size:14.5px; margin:0 0 6px}
ol.papers .s{margin:0; font-size:15.3px; color:#3a3d42}
ol.papers .lk{margin-top:7px; font-size:14px}
ol.papers .lk a{text-decoration:none; margin-right:15px}
ol.papers .lk a:hover{text-decoration:underline}

.note{
  background:#fafafa; border:1px dashed #d4d6db; border-radius:4px;
  padding:13px 16px; font-size:14px; color:var(--muted); margin:28px 0; max-width:820px;
}
footer{
  border-top:1px solid var(--line); margin-top:56px; padding:18px 0 40px;
  color:var(--muted); font-size:13.5px;
}

@media (max-width:820px){
  .hero{min-height:240px}
  .hero h1{font-size:36px; padding-top:78px}
  .topbar{padding:12px 18px; gap:10px}
  .brand .inst{font-size:10px; padding-right:10px}
  .brand .who{font-size:15px}
  .navlinks{gap:18px}
  .navlinks a{font-size:14px}
  .lead{flex-direction:column; gap:28px; padding-top:32px}
  .lead .col-photo{flex-basis:auto}
  .lead img.portrait{width:230px; height:294px}
}

/* ---------- research page, reference layout ---------- */
.hero.light{
  background:linear-gradient(180deg,#cfd8ee 0%,#dde4f2 45%,#e9edf5 100%);
  min-height:270px;
}
.hero.light::after{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.48))}
.hero.light h1{color:#14181e; text-shadow:0 1px 10px rgba(255,255,255,.65); font-size:72px}
.hero.light .brand .inst,
.hero.light .brand .who,
.hero.light .navlinks a{color:#14181e; text-shadow:0 1px 8px rgba(255,255,255,.7)}
.hero.light .brand .inst{border-right-color:rgba(0,0,0,.25)}
.hero.light .navlinks a[aria-current="page"]{border-bottom-color:rgba(0,0,0,.6)}

h2.sec{
  text-align:center; font-size:21px; font-weight:500; letter-spacing:0;
  text-transform:none; color:#2d4a7c; border:0; margin:46px 0 30px; padding:0;
}
ul.ref{list-style:none; padding:0; margin:0}
ul.ref > li{
  position:relative; padding:4px 56px 26px 24px; margin:0 0 26px;
  border-bottom:1px solid #c9ccd1;
}
ul.ref > li:last-child{border-bottom:1px solid #c9ccd1}
ul.ref > li::before{
  content:""; position:absolute; left:2px; top:12px;
  width:6px; height:6px; background:#4a4a4a;
}
ul.ref .t{
  display:inline; font-weight:400; font-size:16.5px;
  text-decoration:underline; text-underline-offset:3px; color:var(--ink);
}
a.t:hover{color:var(--link)}
ul.ref .st{margin:8px 0 0; font-size:15.5px; color:#2b2b2b}
ul.ref .st em{font-style:italic; font-weight:700}
ul.ref .st .wi{color:#2b2b2b}

/* expand control */
ul.ref details summary{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  cursor:pointer; list-style:none; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease;
}
ul.ref details summary::-webkit-details-marker{display:none}
ul.ref details summary svg{width:26px; height:26px; stroke:#9aa0a6; stroke-width:1.7;
  fill:none; stroke-linecap:round; stroke-linejoin:round}
ul.ref details summary:hover svg{stroke:#5f6368}
ul.ref details[open] summary{transform:translateY(-50%) rotate(180deg)}
ul.ref details .ab{margin:14px 0 0; font-size:15px; line-height:1.62; color:#45484d}

@media (max-width:820px){
  .hero.light{min-height:200px}
  .hero.light h1{font-size:40px}
}
ul.ref .pres{margin:10px 0 0; font-size:13.5px; color:#8a4b4b}
ul.ref .pres em{font-style:italic}
ul.ref .pd{
  display:inline-block; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:#5f6368; border:1px solid var(--line); border-radius:3px; padding:1px 7px;
  margin-right:6px; vertical-align:1px;
}