:root {
  --blue: #0065BD; --dark-blue: #005293; --text: #1f2328; --muted: #5f6b76;
  --border: #dde3ea; --bg: #ffffff; --card: #f6f8fa; --chip: #e8f1fa;
}
@media (prefers-color-scheme: dark) {
  :root { --blue: #6cb4ff; --dark-blue: #9ccbff; --text: #e6e8eb; --muted: #9aa5b1;
    --border: #2f3740; --bg: #111418; --card: #181d23; --chip: #1c2a3a; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 1040px; margin: 0 auto; padding: 0 16px 64px; }

nav { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--border); z-index: 1; }
nav div { max-width: 1040px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.95rem; }
nav .name { font-weight: 700; color: var(--text); margin-right: auto; }

header.hero { display: grid; grid-template-columns: 150px 1fr; gap: 32px; align-items: center; padding: 48px 0 24px; }
.hero img { width: 150px; height: 193px; object-fit: cover; border-radius: 10px; }
.hero h1 { font-size: 2.1rem; margin: 0; line-height: 1.2; }
.hero .role { font-size: 1.15rem; color: var(--dark-blue); margin: 6px 0 2px; }
.hero .org { color: var(--muted); margin: 0 0 14px; }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links a, .chip { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--chip); font-size: 0.88rem; font-weight: 600; }

section { padding-top: 40px; }
h2 { font-size: 1.45rem; margin: 0 0 16px; padding-bottom: 6px; border-bottom: 2px solid var(--blue); display: inline-block; }
h3 { font-size: 1.1rem; margin: 28px 0 10px; color: var(--muted); }
p { max-width: 75ch; }

.focus { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.focus div { background: var(--card); border-radius: 10px; padding: 14px 18px; }
.focus ul { margin: 6px 0 0; padding-left: 20px; }
.focus strong { color: var(--dark-blue); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.card .img { background: #fff; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; padding: 10px; border-bottom: 1px solid var(--border); }
.card .img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .title { font-weight: 700; line-height: 1.35; }
.card .meta { color: var(--muted); font-size: 0.9rem; }
.card .chips { margin-top: auto; padding-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }

ol.pubs { list-style: none; padding: 0; margin: 0; }
ol.pubs li { padding: 10px 0; border-bottom: 1px solid var(--border); }
ol.pubs .title { font-weight: 600; }
ol.pubs .authors, ol.pubs .venue { color: var(--muted); font-size: 0.93rem; }
ol.pubs .chips { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 4px; }
ol.pubs .chips a { padding: 1px 9px; border-radius: 999px; background: var(--chip); font-size: 0.78rem; font-weight: 600; }
.me { color: var(--text); font-weight: 600; }

ul.theses { list-style: none; padding: 0; margin: 0; }
ul.theses li { padding: 10px 0; border-bottom: 1px solid var(--border); }
ul.theses .meta { color: var(--muted); font-size: 0.93rem; }

footer { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }

@media (max-width: 640px) {
  header.hero { grid-template-columns: 1fr; gap: 16px; padding-top: 28px; }
  .hero h1 { font-size: 1.7rem; }
  .cards { grid-template-columns: 1fr; }
}
.cards.small { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 8px; }
.cards.small .title { font-size: 0.95rem; }