:root {
  --text:#222;
  --muted:#666;
  --link:#1d6ce2;
  --bg:#f8f9fa;
  --card:#fff;
  --border:#e6e6e6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;line-height:1.6;background:var(--bg);color:var(--text)}
.container{max-width:900px;margin:0 auto;padding:24px}
header{text-align:center;margin:8px 0 12px 0}
.site-title{margin:0 0 8px 0;font-size:28px}
nav a{margin:0 10px;text-decoration:none;color:var(--link);padding:4px 6px;border-radius:8px}
nav a[aria-current="page"]{outline:1px solid var(--border);background:var(--card)}
nav a:hover{text-decoration:underline}
.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;background:#fff;padding:8px;border:1px solid var(--border)}
.intro {
  display: grid;
  grid-template-columns: 160px 1fr; /* wider column for the photo */
  gap: 24px;                        /* adds breathing room */
  align-items: start;
  margin-top: 24px;                 /* extra space from header */
}

img.profile-pic {
  width: 180px;                /* adjust size to your liking */
  height: 180px;               /* must match width for a perfect circle */
  border-radius: 50%;          /* makes it circular */
  object-fit: cover;           /* fills the circle nicely */
  object-position: center 55%; /* shifts visible area down */
  border: 2px solid var(--border);
  background-color: #fff;
  padding: 4px;                /* small white ring around photo */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-right: 20px;          /* space between photo and text */
  float: left;                 /* photo beside About Me text */
}









.highlights{margin-top:20px;background:var(--card);padding:16px 20px;border:1px solid var(--border);border-radius:12px}
.pub-list, .course-list{padding-left:18px}
footer{text-align:center;color:var(--muted);margin-top:32px}

/* Ensure all links are the same color, visited or not */
a:link,
a:visited {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}