/* ---------- tokens ---------- */
:root{
  --bg:#fff;
  --text:#1b2230;
  --muted:#5a6478;
  --line:#e8edf4;
  --brand:#0a66c2;
  --chip:#f1f6fe;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c111a; --text:#eaf1ff; --muted:#98a3b8; --line:#182235;
    --brand:#7cc4ff; --chip:#0f1a2b;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: -apple-system, system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--text); line-height:1.7;
}

/* ---------- header/nav ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
}
.wrap{max-width:1100px; margin:0 auto; padding:0 20px}
.topbar .wrap{display:flex; align-items:center; gap:16px; height:56px}
.brand{font-weight:700; color:var(--text); text-decoration:none}
.nav{margin-left:auto; display:flex; gap:14px; flex-wrap:wrap}
.nav a{
  color:var(--text); text-decoration:none; padding:6px 10px; border-radius:8px;
}
.nav a:hover{background:var(--chip); color:var(--brand)}

/* ---------- layout ---------- */
.main{display:grid; grid-template-columns: 300px 1fr; gap:32px; padding:28px 20px}
@media (max-width: 820px){ .main{grid-template-columns:1fr} }

/* left column */
.left{position:sticky; top:72px; align-self:start}
.avatar{
  width:260px; height:260px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); background:#ddd;
}
.name{margin:.6rem 0 0}
.role{margin:.25rem 0 1rem; color:var(--muted)}
.facts{list-style:none; padding:0; margin:.6rem 0; color:var(--muted)}
.facts li{margin:.2rem 0}
.links{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 12px}
.chip{
  display:inline-block; padding:6px 10px; border-radius:999px; font-weight:600;
  background:var(--chip); color:var(--brand); text-decoration:none; border:1px solid var(--line);
}
.contact > div{display:flex; align-items:center; gap:8px; margin:6px 0}
.contact a{color:var(--brand); text-decoration:none}
.contact a:hover{text-decoration:underline}

/* right column */
.right h2{margin:.3rem 0 0}
.pubs{margin:.5rem 0 0 1.2rem}
.pubs li{margin:.4rem 0}
.mini{color:var(--muted); font-size:.95rem; margin-top:.6rem}

/* footer */
.footer{border-top:1px solid var(--line); padding:14px 0; color:var(--muted)}
.footer .wrap{display:flex; align-items:center}
.footer .push{flex:1}

/* style.css */


.social-icons {
  display: flex;
  gap: 12px; /* spacing between icons */
  margin-top: 10px;
}

.social-icons a {
  width: 42px;
  height: 42px;
  border-radius: 50%;   /* makes them circular */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;         /* icon color */
  text-decoration: none;
  font-size: 20px;
  transition: background 0.3s ease, transform 0.2s ease;
}

/* Different brand colors */
.social-icons a.email    { background: #0072c6; }  /* Outlook/Email blue */
.social-icons a.linkedin { background: #0077b5; }  /* LinkedIn blue */
.social-icons a.scholar  { background: #4285f4; }  /* Google Scholar blue */
.social-icons a.github   { background: #333;    }  /* GitHub dark gray */

/* Hover effect */
.social-icons a:hover {
  transform: scale(1.1);
  opacity: 0.85;
}
.social-icons a { width:46px; height:46px; }
.social-icons a i { font-size:22px; }

/* Education list */
.edu{ list-style:none; margin:.4rem 0 0; padding:0; line-height:1.45; } /* tighter */
.edu li{ margin:.7rem 0; }                  /* space between entries */

.edu .row{ display:flex; align-items:baseline; gap:12px; }
.edu .inst{ font-weight:700; }
.edu .dates{ margin-left:auto; color:var(--muted); white-space:nowrap; font-size:.95rem; }

.edu .degree{ margin:.15rem 0 0; }          /* small gap under institution */
.edu .meta{ margin:.1rem 0 0; color:var(--muted); }

@media (max-width:560px){
  .edu .row{ flex-direction:column; align-items:flex-start; }
  .edu .dates{ margin-left:0; }
}