@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,500&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#12161d;
  --ink-soft:#3a4048;
  --muted:#666d74;
  --paper:#f4f5f2;
  --surface:#e7e9e4;
  --surface-2:#dde0da;
  --line:#c9cdc5;
  --teal:#237a86;
  --teal-deep:#175660;
  --coral:#d85a34;
  --card:#fbfbf9;
  --shadow: 0 1px 2px rgba(18,22,29,.05), 0 8px 24px -12px rgba(18,22,29,.18);
  --focus:#237a86;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eef0ee;
    --ink-soft:#c7ccc9;
    --muted:#9aa19b;
    --paper:#12151a;
    --surface:#191d23;
    --surface-2:#20252c;
    --line:#2b3138;
    --teal:#5fb6bf;
    --teal-deep:#8fd0d6;
    --coral:#e8825d;
    --card:#171b21;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.6);
    --focus:#5fb6bf;
  }
}
:root[data-theme="dark"]{
  --ink:#eef0ee;
  --ink-soft:#c7ccc9;
  --muted:#9aa19b;
  --paper:#12151a;
  --surface:#191d23;
  --surface-2:#20252c;
  --line:#2b3138;
  --teal:#5fb6bf;
  --teal-deep:#8fd0d6;
  --coral:#e8825d;
  --card:#171b21;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.6);
  --focus:#5fb6bf;
}

*{box-sizing:border-box;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo', system-ui, sans-serif;
  padding-inline:0;
  line-height:1.5;
  margin:0;
}
a{color:inherit;}
a:focus-visible, button:focus-visible{outline:2px solid var(--focus); outline-offset:3px;}
h1,h2,h3{font-family:'Literata', Georgia, serif; text-wrap:balance; margin:0; font-weight:600; color:var(--ink);}
.mono{font-family:'JetBrains Mono', monospace;}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:24px;}
@media (max-width:640px){ .wrap{padding-inline:18px;} }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding-block:14px;}
.brand{display:flex; align-items:baseline; gap:10px; font-family:'Literata',serif; font-weight:600; font-size:1.05rem; letter-spacing:.01em; text-decoration:none;}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--teal); display:inline-block; transform:translateY(-1px);}
.navlinks{display:flex; gap:28px; font-size:.86rem; letter-spacing:.02em;}
.navlinks a{text-decoration:none; color:var(--ink-soft); padding-block:4px; border-bottom:1px solid transparent;}
.navlinks a:hover{color:var(--ink); border-color:var(--teal);}
@media (max-width:720px){ .navlinks{display:none;} }

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.hero-inner{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:center;
  padding-block:76px 56px;
}
@media (max-width:880px){ .hero-inner{grid-template-columns:1fr; padding-block:44px 32px;} }
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-deep); margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--teal-deep);}
.hero h1{font-size:clamp(2.1rem, 4.4vw, 3.3rem); line-height:1.08; letter-spacing:-.01em;}
.hero h1 em{font-style:italic; color:var(--teal-deep);}
.hero p.lede{margin-top:20px; font-size:1.08rem; color:var(--ink-soft); max-width:52ch; line-height:1.6;}
.hero-cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap;}
.btn{
  font-family:'Archivo',sans-serif; font-weight:600; font-size:.92rem;
  padding:12px 20px; border-radius:3px; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--teal-deep);}
.btn-ghost{border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}

.ot-canvas-wrap{position:relative; aspect-ratio:1/1; max-width:440px; margin-inline:auto; width:100%;}
canvas#ot{width:100%; height:100%; display:block;}
.ot-caption{
  font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--muted); text-align:center; margin-top:10px;
  letter-spacing:.03em;
}

/* ---------- Stat strip ---------- */
.stats{border-bottom:1px solid var(--line); background:var(--surface);}
.stats-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
@media (max-width:720px){ .stats-inner{grid-template-columns:repeat(2,1fr);} }
.stat{
  padding:26px 20px; border-right:1px solid var(--line); text-align:left;
}
.stat:last-child{border-right:none;}
@media (max-width:720px){ .stat:nth-child(2n){border-right:none;} .stat{border-bottom:1px solid var(--line);} .stat:nth-last-child(-n+2){border-bottom:none;} }
.stat .num{font-family:'JetBrains Mono',monospace; font-size:1.8rem; font-variant-numeric:tabular-nums; color:var(--teal-deep); font-weight:500;}
.stat .label{font-size:.8rem; color:var(--muted); margin-top:4px;}

/* ---------- Section shell ---------- */
section{padding-block:64px;}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:34px; flex-wrap:wrap;}
.section-head h2{font-size:1.7rem;}
.section-head .sub{color:var(--muted); font-size:.95rem; max-width:46ch;}
.see-all{font-size:.85rem; font-weight:600; text-decoration:none; color:var(--teal-deep); white-space:nowrap; border-bottom:1px solid currentColor; padding-bottom:1px;}

/* ---------- Research grid ---------- */
.research-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:900px){ .research-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .research-grid{grid-template-columns:1fr;} }
.rcard{background:var(--card); padding:26px 24px 24px; display:flex; flex-direction:column; gap:14px; min-height:230px;}
.rcard .glyph{width:38px; height:38px;}
.rcard h3{font-size:1.08rem; line-height:1.3;}
.rcard p{margin:0; color:var(--ink-soft); font-size:.88rem; line-height:1.55; flex:1;}
.rcard .tag{font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase;}

/* ---------- Publications ---------- */
.pub-list{border-top:1px solid var(--line);}
.pub{
  display:grid; grid-template-columns: 84px 1fr auto; gap:20px; align-items:baseline;
  padding-block:18px; border-bottom:1px solid var(--line);
}
@media (max-width:640px){ .pub{grid-template-columns:1fr; gap:6px;} }
.pub .year{font-family:'JetBrains Mono',monospace; color:var(--muted); font-size:.85rem;}
.pub .title{font-weight:600; font-size:.98rem;}
.pub .meta{color:var(--muted); font-size:.85rem; margin-top:3px;}
.pub .venue{font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--teal-deep); white-space:nowrap; align-self:start; padding-top:3px;}
.pub-note{
  margin-top:20px; padding:14px 16px; background:var(--surface); border-left:3px solid var(--coral);
  font-size:.85rem; color:var(--ink-soft); border-radius:0 3px 3px 0;
}

/* ---------- People ---------- */
.people{display:grid; grid-template-columns:1.15fr .85fr; gap:40px;}
@media (max-width:880px){ .people{grid-template-columns:1fr;} }
.roster h3{font-size:.98rem; margin-bottom:14px;}
.roster-group{margin-bottom:22px;}
.roster-group .kicker{font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:9px; display:block;}
.person{display:flex; justify-content:space-between; gap:12px; padding-block:7px; border-bottom:1px dashed var(--line); font-size:.92rem;}
.person:last-child{border-bottom:none;}
.person .role{color:var(--muted); font-size:.8rem; white-space:nowrap;}
.alumni-card{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:26px; display:flex; flex-direction:column; gap:16px;}
.alumni-card .big{font-family:'JetBrains Mono',monospace; font-size:2.6rem; color:var(--coral); font-variant-numeric:tabular-nums; line-height:1;}
.alumni-card p{margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.55;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.chip{font-family:'JetBrains Mono',monospace; font-size:.7rem; padding:4px 9px; border:1px solid var(--line); border-radius:20px; color:var(--muted);}

/* ---------- News ---------- */
.news{border-top:1px solid var(--line);}
.news-item{display:flex; gap:18px; padding-block:16px; border-bottom:1px solid var(--line);}
.news-item .date{font-family:'JetBrains Mono',monospace; font-size:.76rem; color:var(--muted); white-space:nowrap; padding-top:2px; width:78px; flex-shrink:0;}
.news-item p{margin:0; font-size:.94rem; color:var(--ink-soft);}
.news-item strong{color:var(--ink);}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); background:var(--surface);}
.foot-inner{display:flex; justify-content:space-between; align-items:center; padding-block:28px; flex-wrap:wrap; gap:14px;}
.foot-inner .mono{font-size:.76rem; color:var(--muted);}
.foot-links{display:flex; gap:18px; font-size:.82rem;}
.foot-links a{text-decoration:none; color:var(--muted);}
.foot-links a:hover{color:var(--ink);}

@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Featured-member cards (people/mentors) ---------- */
.member-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:28px;}
@media (max-width:820px){ .member-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .member-grid{grid-template-columns:1fr;} }
.member-card{background:var(--card); padding:22px 20px; display:flex; flex-direction:column; gap:10px;}
.avatar{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Literata',serif; font-weight:600; font-size:1.05rem; color:var(--card);
  background:var(--teal-deep);
}
.member-card:nth-child(3n-1) .avatar{background:var(--coral);}
.member-card:nth-child(3n) .avatar{background:var(--ink-soft);}
.member-card .mname{font-weight:600; font-size:.98rem;}
.member-card .mrole{font-size:.8rem; color:var(--muted);}
.member-card .mloc{font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--teal-deep); letter-spacing:.03em;}

/* ---------- Join / talent section ---------- */
.join-hero{
  border:1px solid var(--line); border-radius:4px; padding:44px 40px; background:var(--surface);
  display:flex; flex-direction:column; gap:10px; margin-bottom:40px;
}
.join-hero h2{font-size:1.9rem; max-width:34ch;}
.join-hero p{color:var(--ink-soft); max-width:58ch; font-size:1rem; line-height:1.6;}

.benefit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:40px;}
@media (max-width:820px){ .benefit-grid{grid-template-columns:1fr;} }
.benefit-card{background:var(--card); padding:26px 24px; display:flex; flex-direction:column; gap:10px;}
.benefit-card .num{font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--coral); letter-spacing:.06em;}
.benefit-card h3{font-size:1.02rem; line-height:1.3;}
.benefit-card p{margin:0; font-size:.86rem; color:var(--ink-soft); line-height:1.55;}

.positions{border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:40px;}
.position{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding-block:18px; border-bottom:1px dashed var(--line);}
.position:last-child{border-bottom:none;}
.position .ptitle{font-weight:600; font-size:.98rem;}
.position .pmeta{font-size:.82rem; color:var(--muted); margin-top:3px;}
.position .papply{font-size:.84rem; font-weight:600; color:var(--teal-deep); text-decoration:none; white-space:nowrap; border-bottom:1px solid currentColor; padding-bottom:1px;}
.positions-note{font-size:.78rem; color:var(--muted); padding-top:14px; font-style:italic;}

.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:8px;}
@media (max-width:820px){ .quote-grid{grid-template-columns:1fr;} }
.quote-card{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:22px 20px; display:flex; flex-direction:column; gap:12px;}
.quote-card blockquote{margin:0; font-family:'Literata',serif; font-size:.98rem; line-height:1.5; color:var(--ink); font-style:italic;}
.quote-card cite{font-style:normal; font-size:.78rem; color:var(--muted); font-family:'JetBrains Mono',monospace;}
.quotes-note{font-size:.78rem; color:var(--muted); margin-top:16px; font-style:italic;}

.empty-note{color:var(--muted); font-size:.9rem; font-style:italic; padding-block:20px;}