:root{
  --font-sans: ui-sans-serif, system-ui, 
  -apple-system, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-heading: ui-rounded, "SF Pro Display", "Segoe UI Variable Display", var(--font-sans);
  --accent: #1a56db;
  --accent-2:#0ea5e9;
  --bg: #ffffff; 
  --card: #fafafa; 
  --text: hsl(0, 0%, 30%); 
  --muted: #6b7280; 
  --border:#e5e7eb; 
  --radius: 14px;
}
html,body{ font:16px/1.65 var(--font-sans); color: var(--text) }
h1,h2,h3,.site-title{ font-family: var(--font-heading); }

a{color:var(--accent);text-decoration:none} 
a:hover{text-decoration:underline} 

/* :root{ --bg: #ffffff; --card: #fafafa; --text: #11131a; --muted: #6b7280; --accent: #1a56db; --accent-2:#0ea5e9; --border:#e5e7eb; --radius: 14px; } *{box-sizing:border-box} 
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif} 
a{color:var(--accent);text-decoration:none} 
a:hover{text-decoration:underline} 
img{max-width:100%;display:block} */

.container{max-width:980px;margin-inline:auto;padding:0 20px}
.section{padding:56px 0;background:#fff}
.section + .section{border-top:1px solid var(--border)}

.hero{padding-top:56px}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:32px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.site-header{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid var(--border);
}
.site-header .container{padding:16px 20px; display:flex; justify-content:center}
.site-title{font-weight:600; font-size:30px; letter-spacing:.2px; color:var(--text)}

.btn{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:.6rem 1rem}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none}
.cta{display:flex;gap:12px;margin-top:16px}

.quick-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;list-style:none;margin:12px 0 0;padding:0}
.quick-links a{display:inline-block;padding:.4rem .8rem;border:1px solid var(--border);border-radius:999px}

h1{font-size:26px;line-height:1.15;margin:0 0 12px}
h2{font-size:24px;margin:0 0 16px}
.lead{font-size:18px;color:var(--text)}

.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{background:#f3f4f6;border:1px solid var(--border);padding:.35rem .6rem;border-radius:999px;color:#374151}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.card h3{margin-top:0;margin-bottom:8px}

.timeline .t-item{padding:16px;border-left:3px solid var(--border);margin-left:8px;margin-bottom:16px}
.t-meta{color:var(--muted)}
.t-item a{color:var(--muted); text-decoration: underline}
.t-role{font-weight:600}
.t-time{font-size:14px;color:var(--muted);margin-bottom:8px}

.pub-list{padding-left:18px}
.pub{padding:12px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px}
.pub-title{font-weight:600}
.pub-authors,.pub-venue{color:var(--muted);font-size:14px}
.pub-links a{margin-right:8px}

.edu{list-style:disc;padding-left:20px}

.site-footer{border-top:1px solid var(--border);padding:24px 0;color:#6b7280;text-align:center}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:8px;background:#000;color:#fff;border-radius:6px}

.center-text{text-align:center}

/* Center items inside the hero card */
.hero-card{
  display:flex;
  flex-direction:column;
  align-items:center; /* centers the icon row under the image */
}

.hero-card img{
  border-radius:999px;
  width:300px; height:300px;
  object-fit:cover;
  border:4px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

/* Icon buttons row */
.icon-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;  /* center the row */
  margin-top:12px;
}

/* Icon button appearance (keep your existing ones or use these) */
.icon-btn{
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  border-radius:999px; background:#fff; color:var(--text);
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 2px 10px rgba(0,0,0,.06) }
.icon-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.icon-btn svg{ width:20px; height:20px; display:block }

/* Optional brand tints */
.icon-btn--email{ color:var(--accent) }
.icon-btn--github{ color:var(--accent) }
.icon-btn--linkedin{ color:var(--accent) }

/* Screen-reader-only text */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}