:root{
  --max-width: 700px;
  --bg: #ffffff;
  --text: #111217;
  --muted: #55585f;
  --link-color: #1a4d8f;
}
*{box-sizing: border-box}
a{color: var(--link-color)}
body{
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: var(--text);
  background: var(--bg);
  margin: 0;
  padding: 24px;
  display: flex;
  justify-content: center;
}
.container{
  width: 100%;
  max-width: var(--max-width);
}
.profile{
  /* grid layout: left and right in the first row, bottom spans two columns below */
  display: grid;
  grid-template-columns: 1fr 160px;
  grid-template-areas:
    "left right"
    "bottom bottom";
  gap: 20px;
  align-items: start;
}
.profile-left{grid-area: left;min-width:0}
.profile-right{grid-area: right;width:160px}
.profile-img{width:160px;height:160px;object-fit:cover;border-radius:6px}
.profile-bottom{grid-area: bottom;margin-top:20px}
h1{margin:0 0 6px 0;font-size:28px}
.role{font-weight:600;color:var(--muted);margin-bottom:6px}
.affil{color:var(--muted);margin-bottom:12px}
.bio{margin-top:8px;line-height:1.45;color:var(--text)}
.contacts{margin-top:12px;display:flex;gap:12px;flex-wrap:wrap}
.contacts a{color:inherit;text-decoration:underline;font-size:14px}

.publications{margin-top:28px}
.publications h2{margin:0 0 8px 0}
ol{margin:0;padding-left:1.2em}

@media (max-width:600px){
  /* Single-column layout on small screens; image will appear after header (below) */
  .profile{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "bottom";
  }
  .profile-left{text-align: center}
  .profile-right{width:120px;justify-self:center}
  .profile-img{width:120px;height:120px}
  .profile-bottom{text-align:left}
  .contacts{justify-content:center}
}