:root{
  --ink:#1C2A3A;
  --paper:#EDEAE0;
  --paper-warm:#F5F3EC;
  --card:#FFFFFF;
  --teal:#2F7864;
  --amber:#B8722E;
  --slate:#5B6472;
  --line:#D8D3C4;
  --line-soft:#E4E0D3;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono', monospace;}
.wrap{max-width:980px; margin:0 auto; padding:0 28px;}

/* ---- Nav ---- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(237,234,224,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem;
  letter-spacing:-0.01em;
}
.navlinks{display:flex; gap:28px; list-style:none;}
.navlinks a{
  font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--slate); text-decoration:none; font-weight:600;
  transition:color .15s;
}
.navlinks a:hover, .navlinks a:focus-visible{color:var(--teal);}
.navtoggle{display:none; background:none; border:none; font-size:1.5rem; color:var(--ink); cursor:pointer;}

/* ---- Hero ---- */
.hero{padding:76px 0 56px;}
.hero-grid{
  display:grid; grid-template-columns:1.35fr 1fr; gap:48px; align-items:center;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem; color:var(--teal); text-transform:uppercase;
  letter-spacing:0.12em; margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--teal); display:inline-block;}
h1.name{
  font-family:'Fraunces', serif; font-weight:600; font-size:clamp(2.2rem, 4.4vw, 3.2rem);
  line-height:1.05; letter-spacing:-0.02em;
}
.thesis{
  margin-top:22px; font-size:1.1rem; color:var(--slate); max-width:52ch;
  line-height:1.6;
}
.thesis strong{color:var(--ink); font-weight:600;}
.affil{
  margin-top:26px; font-size:1.1rem; color:var(--slate); max-width:56ch;
  padding-top:20px; border-top:1px solid var(--line);
}
.affil a{text-decoration:underline; text-decoration-color:var(--line);}

/* ---- Hero portrait / node diagram ---- */
.hero-portrait{display:flex; flex-direction:column; align-items:center;}
.node-diagram{
  position:relative; width:230px; height:230px;
}
.node-lines{position:absolute; inset:0; width:100%; height:100%;}
.nl{stroke:var(--line); stroke-width:1.4; stroke-dasharray:3 4;}
.avatar-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:148px; height:160px; border-radius:50%;
  border:2px solid var(--teal); background:var(--card);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; z-index:2;
  box-shadow:0 2px 14px rgba(28,42,58,0.08);
}
.avatar-ring img{width:100%; height:100%; object-fit:cover;}
.node{
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px;
  z-index:2;
}
.node-top{top:0; left:50%; transform:translate(-50%,-50%);}
.node-right{top:50%; right:0; transform:translate(50%,-50%); flex-direction:row-reverse;}
.node-bottom{bottom:0; left:50%; transform:translate(-50%,50%);}
.node-left{top:50%; left:0; transform:translate(-50%,-50%); flex-direction:row;}
.node-dot{
  width:11px; height:11px; border-radius:50%; border:2px solid var(--teal);
  background:var(--paper); flex-shrink:0;
}
.node-dot.dot-filled{background:var(--teal);}
.node-label{
  font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.06em;
  color:var(--slate); font-weight:600; white-space:nowrap;
}

.social-row{display:flex; gap:12px; margin-top:26px;}
.social-icon{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:all .15s; flex-shrink:0;
}
.social-icon svg{width:17px; height:17px;}
.social-icon:hover{border-color:var(--teal); color:var(--teal); background:#EAF4F0;}

/* ---- Section shell ---- */
section{padding:64px 0;}
section + section{border-top:1px solid var(--line);}
.sec-head{margin-bottom:36px;}
.sec-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--amber);
  text-transform:uppercase; letter-spacing:0.1em; margin-bottom:10px;
}
h2{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.9rem; letter-spacing:-0.01em;
}
.sec-sub{color:var(--slate); margin-top:10px; max-width:62ch; font-size:1rem;}

/* ---- Signature widget: cross-source agreement ---- */
.ledger{
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  padding:28px; margin-top:8px;
}
.ledger-top{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px;
  margin-bottom:22px;
}
.ledger-title{font-weight:600; font-size:0.95rem;}
.ledger-hint{font-size:0.82rem; color:var(--slate);}
.sources{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;}
.source-btn{
  background:var(--paper-warm); border:1px solid var(--line); border-radius:4px;
  padding:16px 12px; cursor:pointer; text-align:center;
  font-family:'IBM Plex Mono', monospace; font-size:0.8rem;
  transition:all .15s; color:var(--ink);
}
.source-btn:hover{border-color:var(--teal);}
.source-btn.state-indexed{border-color:var(--teal); background:#EAF4F0; color:var(--teal); font-weight:600;}
.source-btn.state-missing{border-color:var(--amber); background:#FBF0E4; color:var(--amber); font-weight:600;}
.source-status{display:block; font-size:0.7rem; margin-top:6px; opacity:0.85;}
.ledger-readout{
  margin-top:20px; padding-top:18px; border-top:1px dashed var(--line);
  font-size:0.9rem; color:var(--slate); min-height:1.4em;
}
.ledger-readout strong{color:var(--ink);}

/* ---- Pillars ---- */
.pillars{display:grid; gap:14px;}
.pillar{
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  padding:22px 24px; cursor:pointer; transition:border-color .15s;
}
.pillar:hover{border-color:var(--teal);}
.pillar-head{display:flex; justify-content:space-between; align-items:center; gap:16px;}
.pillar-num{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--amber);}
.pillar-title{font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem; flex:1;}
.pillar-arrow{color:var(--slate); transition:transform .2s; font-size:0.9rem;}
.pillar.open .pillar-arrow{transform:rotate(180deg);}
.pillar-body{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
}
.pillar.open .pillar-body{max-height:220px;}
.pillar-body-inner{padding-top:14px; font-size:0.94rem; color:var(--slate); line-height:1.6;}
.pillar-tags{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap;}
.tag{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--teal);
  background:#EAF4F0; padding:3px 8px; border-radius:3px;
}
.thesis-strip{
  margin-top:30px; font-family:'Fraunces', serif; font-size:1.05rem; font-style:italic;
  color:var(--ink); border-left:2px solid var(--amber); padding-left:18px;
}

/* ---- Publications & News (two-column, Yilin-style) ---- */
.pubnews-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:start;}

.col-head{display:flex; align-items:center; gap:10px; margin-bottom:26px;}
.col-dot{
  width:13px; height:13px; border-radius:50%; border:2px solid var(--teal);
  position:relative; flex-shrink:0;
}
.col-dot::after{
  content:""; position:absolute; top:50%; left:50%; width:5px; height:5px;
  background:var(--teal); border-radius:50%; transform:translate(-50%,-50%);
}
.col-head h2{font-size:1.35rem;}

.pub-list{display:flex; flex-direction:column;}
.pub{
  display:grid; grid-template-columns:60px 1fr; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line-soft);
}
.pub:first-child{padding-top:0;}
.pub-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:60px; height:70px; border-radius:6px; flex-shrink:0;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(28,42,58,0.06);
}
.pub-logo{width:38px; height:auto; margin-bottom:4px;}
.pub-year{
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem; font-weight:600;
  color:var(--amber); text-align:center;
}
.pub-venue{
  font-family:'IBM Plex Mono', monospace; font-size:0.8rem; font-weight:600;
  color:var(--teal); text-transform:uppercase; letter-spacing:0.02em;
}
.pub-title{font-weight:600; font-size:0.94rem; line-height:1.4; margin-top:5px;}
.pub-meta{font-size:0.82rem; color:var(--slate); margin-top:5px;}
.pub-badges{margin-top:8px; display:flex; gap:8px; flex-wrap:wrap;}
.badge{
  font-size:0.7rem; font-family:'IBM Plex Mono', monospace;
  padding:2px 8px; border-radius:3px; border:1px solid var(--line);
  color:var(--slate);
}
.badge.award{border-color:var(--amber); color:var(--amber);}
.pub-title a{text-decoration:none; border-bottom:1px solid transparent;}
.pub-title a:hover{border-bottom-color:var(--ink);}

/* ---- Experience timeline ---- */
.timeline{border-left:1px solid var(--line); margin-left:6px;}
.tl-item{position:relative; padding:0 0 32px 28px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:""; position:absolute; left:-5px; top:4px;
  width:9px; height:9px; border-radius:50%; background:var(--teal);
}
.tl-role{font-weight:600; font-size:1rem;}
.tl-org{font-size:0.9rem; color:var(--slate); margin-top:2px;}
.tl-date{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--amber); margin-top:4px; display:block;}
.tl-desc{margin-top:10px; font-size:0.92rem; color:var(--slate); max-width:64ch;}

/* ---- Funding / partners ---- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.flist{list-style:none;}
.flist li{
  padding:14px 0; border-bottom:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:12px; font-size:0.92rem;
}
.flist li:first-child{padding-top:0;}
.flist .f-name{font-weight:600;}
.flist .f-note{color:var(--slate); font-size:0.85rem;}

/* ---- News ---- */
.news-list{display:flex; flex-direction:column;}
.news-item{
  padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:0.88rem;
}
.news-item:first-child{padding-top:0;}
.news-date{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--amber);
  text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:5px; font-weight:600;
}
.news-body a{text-decoration:underline; text-decoration-color:var(--line); color:var(--teal); font-weight:500;}

/* ---- Footer ---- */
footer{padding:48px 0 60px; text-align:center;}
.footer-links{display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-bottom:18px;}
.footer-links a{font-size:0.9rem; text-decoration:none; border-bottom:1px solid var(--line);}
.footer-note{font-size:0.8rem; color:var(--slate);}

@media (max-width: 720px){
  .navlinks{
    position:absolute; top:64px; left:0; right:0; background:var(--paper);
    flex-direction:column; padding:18px 28px; border-bottom:1px solid var(--line);
    display:none; gap:16px;
  }
  .navlinks.show{display:flex;}
  .navtoggle{display:block;}
  .grid-2{grid-template-columns:1fr;}
  .sources{grid-template-columns:repeat(2, 1fr);}
  .pubnews-grid{grid-template-columns:1fr; gap:40px;}
  .pub{grid-template-columns:52px 1fr; gap:12px;}
  .pub-badge{width:52px; height:62px;}
  .pub-logo{width:32px;}
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-portrait{order:-1;}
  .node-diagram{width:190px; height:190px;}
  .avatar-ring{width:120px; height:120px;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

.badge.award.no-underline {
  text-decoration: none;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:var(--teal);
  background:#EAF4F0;
  padding:3px 8px;
  border-radius:3px;
}

a.badge.award.no-underline:hover {
  background-color: #fff8f0;
}