:root {
  --text: #333;
  --muted: #666;
  --link: #1772d0;
  --link-hover: #f09228;
  --rule: #e8e8e8;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 15px/1.55 var(--sans);
}

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

.wrapper {
  display: block;
  max-width: 800px;
  margin: 0 auto;
  padding: 42px 22px 36px;
}

.profile-column {
  position: relative;
  min-height: 225px;
  padding: 4px 215px 0 16px;
  text-align: left;
}

.avatar {
  position: absolute;
  top: 0;
  right: 16px;
  width: 180px;
  height: 180px;
  object-fit: cover;
  border: 0;
  border-radius: 50%;
  padding: 0;
  margin: 0;
}

h1 {
  margin: 0 0 8px;
  color: #222;
  font: 36px/1.2 var(--serif);
  text-align: center;
}

.latin-name { display: none; }
.position { margin: 0 0 5px; text-align: center; }
.affiliation { display: block; line-height: 1.5; text-align: center; }
.email { margin: 13px 0 7px; color: var(--muted); text-align: center; }
.email i { color: var(--link); margin-right: 4px; }
.social-icons { display: flex; justify-content: center; gap: 18px; margin-top: 7px; }
.social-icons a { color: var(--link); font-size: 1.05rem; }

.content-column { min-width: 0; }
section {
  padding: 16px 16px 22px;
  margin: 0;
  border: 0;
}

section + section { border-top: 1px solid var(--rule); }

h2 {
  margin: 0 0 10px;
  color: #222;
  font: 22px/1.3 var(--serif);
}

p { margin: 0 0 12px; }
strong { color: #222; }
ul, ol { margin: 0; padding-left: 1.35rem; }
li { margin: 6px 0; }
.interest-list li::marker { color: var(--link); }

.skill-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px; }
.skill-groups p { display: grid; grid-template-columns: 76px 1fr; gap: 10px; margin: 0; }
.skill-groups span, .timeline-item p, .publication .authors, .publication .venue, .publication .summary { color: var(--muted); }
.item-heading { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-bottom: 4px; }
.item-heading span { color: var(--muted); font-size: .9rem; white-space: nowrap; }

.publication-list { display: grid; gap: 28px; padding: 0; }
.publication { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: center; margin: 0; padding: 18px; border: 1px solid var(--rule); box-shadow: 4px 4px 0 #e0e9f3; }
.publication.no-media { display: block; }
.publication-media { display: block; width: 100%; overflow: hidden; }
.publication-media img { display: block; width: 100%; height: auto; max-height: 210px; object-fit: contain; }
.publication-copy { padding: 0; }
.publication h3 { margin: 0 0 5px; font-size: 1.03rem; line-height: 1.45; }
.publication .authors, .publication .venue, .publication .paper-links, .publication .summary { margin: 0 0 6px; }
.publication .paper-links a { color: var(--link); }

footer { padding: 18px 16px 0; color: #888; font-size: .82rem; text-align: center; }

@media (max-width: 620px) {
  .wrapper { padding: 28px 14px; }
  .profile-column { min-height: 0; padding: 0 10px 25px; text-align: center; }
  .avatar { position: static; display: block; width: 145px; height: 145px; margin: 0 auto 18px; }
  h1 { font-size: 32px; }
  .skill-groups { grid-template-columns: 1fr; }
  .publication { grid-template-columns: 1fr; gap: 18px; padding: 14px; }
  .publication-media { max-width: 440px; margin: 0 auto; }
  .publication-media img { max-height: 270px; }
  .publication-copy { padding: 0; }
  .item-heading { display: block; }
  .item-heading span { display: block; margin-top: 2px; }
}