:root{
  --bg:#f8f9fa;         /* page background */
  --card:#ffffff;       /* cards and main content */
  --text:#212529;       /* main text */
  --muted:#6c757d;      /* muted text */
  --brand:#006d77;      /* primary accent (teal) */
  --brand-2:#e29578;    /* secondary accent (coral) */
  --line:#dee2e6;       /* borders */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

.site-header{
  position:sticky;top:0;z-index:50;
  background:#ffffffee;backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--text);gap:12px}
.logo{width:36px;height:36px}
.brand-text span{display:block;color:var(--muted);font-size:.9rem}

.site-nav{display:flex;gap:18px}
.site-nav a{
  color:var(--muted);
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  transition:0.2s;
}
.site-nav a:hover,.site-nav a.active{
  color:var(--brand);
  background:var(--line);
}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);padding:6px 10px;border-radius:8px}

.main-content{padding:32px 0 60px}

.hero{
  display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:center;
  padding:30px;background:#ffffff;
  border:1px solid var(--line);border-radius:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.hero h1{font-size:2.4rem;margin:0 0 6px;color:var(--brand)}
.tagline{color:var(--brand-2);font-weight:600;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 14px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  border:1px solid var(--brand);
  transition:0.2s;
}
.btn:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--brand)}

.hero-illustration{width:100%;height:auto;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.card h3{margin-top:0;color:var(--brand)}

.grid{display:grid;gap:16px}
.people-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cards-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.person{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  transition:0.2s;
}
.person:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.person img{width:100%;max-width:160px;border-radius:12px;border:1px solid var(--line);background:#f1f3f5;margin:0 auto 10px;display:block}

.pub-list{padding-left:20px}
.news-item{border-left:3px solid var(--brand);padding-left:12px;margin:12px 0}

.site-footer{
  border-top:1px solid var(--line);
  padding:18px 0;
  background:#ffffff;
  color:var(--muted);
}
.footer-inner{display:flex;justify-content:center}

@media (max-width: 800px){
  .hero{grid-template-columns:1fr}
  .site-nav{display:none;position:absolute;right:20px;top:60px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
  .site-nav.open{display:flex;flex-direction:column;gap:10px}
  .nav-toggle{display:block}
  .cards{grid-template-columns:1fr}
}


/* Research page niceties */
.space-lg{ margin-top:28px }
.hero--soft{ background:#fff }

.topics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
}
.topic-card{
  display:flex; flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.topic-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.topic-img{
  width:100%; height:140px; object-fit:cover; background:#f1f3f5; display:block;
  border-bottom:1px solid var(--line);
}
.topic-body{ padding:14px }
.topic-body h3{ margin:0 0 6px; color:var(--brand) }
.topic-body p{ margin:0; color:var(--text) }