:root {
  color-scheme:light;
  --paper:#f8f7f4;
  --text:#23334b;
  --body:#48556a;
  --muted:#66748a;
  --accent:#315d85;
  --line:#d7deea
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:36px
}

body {
  margin:0;
  background:#f8faf9;
  color:var(--text);
  font:16px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:var(--accent);
  text-decoration:none;
  text-underline-offset:4px
}
a:hover {
  text-decoration:underline
}
a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
  border-radius:2px
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:10;
  padding:8px 16px;
  background:#fff;
  transform:translateY(-160%)
}
.skip-link:focus {
  transform:none
}

.layout {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:76px;
  max-width:1120px;
  margin:auto;
  padding:0 40px
}

.sidebar {
  position:sticky;
  top:0;
  align-self:start;
  padding:66px 0 36px
}

.headshot {
  display:block;
  width:140px;
  height:140px;
  object-fit:cover;
  object-position:center 39%;
  border-radius:50%;
  margin:0 auto 24px;
  border:5px solid #fff;
  box-shadow:0 3px 18px #24352f0d
}

.name {
  font:600 1.7rem/1.25 Georgia,"Times New Roman",serif;
  letter-spacing:-.035em;
  margin:0 0 13px;
  text-align:center
}

.affiliation {
  font-size:.86rem;
  line-height:1.65;
  text-align:center;
  margin:0
}

.socials {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin:16px 0 26px
}
.socials a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid transparent;
  border-radius:50%;
  transition:background-color .2s ease,border-color .2s ease
}
.socials a:hover {
  background:#fff;
  border-color:var(--line);
  text-decoration:none
}
.socials svg {
  width:18px;
  height:18px;
  fill:currentColor
}

.sidebar nav {
  padding:20px 0 0;
  border-top:1px solid var(--line)
}
.sidebar nav a {
  display:block;
  padding:7px 14px;
  color:var(--body);
  font-size:.86rem;
  border-radius:4px
}
.sidebar nav a:hover {
  background:#e6edf7;
  color:var(--accent);
  text-decoration:none
}

main {
  min-width:0;
  padding:66px 0 36px
}
main:focus {
  outline:none
}
section {
  margin-bottom:48px;
  scroll-margin-top:32px
}

.eyebrow {
  font-size:.69rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 16px;
  font-weight:600
}

h2 {
  font:400 1.65rem/1.3 Georgia,"Times New Roman",serif;
  letter-spacing:-.025em;
  margin:0 0 20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line)
}
h3 {
  font-size:1rem;
  line-height:1.55;
  font-weight:600;
  margin:0 0 7px
}
p {
  margin:0 0 14px;
  color:var(--body)
}

.intro-section {
  margin-bottom:40px
}
.intro-section p:not(.eyebrow) {
  font-size:1rem;
  line-height:1.8
}
.intro-section strong {
  color:var(--text);
  font-weight:600
}

.interest-list {
  list-style:none;
  padding:0;
  margin:0
}
.interest-list li {
  display:grid;
  grid-template-columns:205px minmax(0,1fr);
  gap:18px;
  padding:15px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-left:3px solid #7d9fc2;
  border-radius:6px;
  box-shadow:0 4px 16px #243b3208
}
.interest-list li + li {
  margin-top:12px
}
.interest-list strong {
  font-size:.9rem;
  font-weight:600;
  line-height:1.65;
  color:var(--text)
}
.interest-list span {
  font-size:.89rem;
  color:var(--body);
  line-height:1.7
}

.entry {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:22px
}
.entry-date {
  font-size:.77rem;
  color:var(--muted);
  padding-top:3px;
  font-variant-numeric:tabular-nums
}
.entry-subtitle {
  font-size:.88rem;
  margin-bottom:3px
}
.entry p:last-child {
  margin-bottom:0
}

.publication {
  background:#f2f6fc;
  padding:23px 26px;
  border:1px solid var(--line);
  border:1px solid #bed8ed;
  border-radius:6px;
  box-shadow:0 5px 18px #243b3208
}
.publication h3 {
  font-size:1.03rem;
  line-height:1.6;
  margin-bottom:10px
}
.publication p {
  font-size:.87rem;
  margin-bottom:5px
}
.publication .publication-authors {
  color:var(--text)
}
.publication .publication-venue {
  color:var(--muted);
  font-size:.81rem;
  margin-bottom:0
}
.publication-venue span {
  padding:0 3px
}

.project-title {
  margin:16px 0 6px;
  font-size:.92rem;
  line-height:1.65;
  color:var(--text)
}
.project-team {
  color:var(--muted)
}
.entry article>p:not(.project-title) {
  font-size:.86rem
}
.award {
  margin-top:16px;
  line-height:1.9
}
.award-label {
  display:inline-block;
  font-size:.74rem;
  font-weight:600;
  color:#695525;
  background:#f0ebda;
  border-radius:4px;
  padding:4px 10px;
  border:1px solid #e6d9b5;
  margin-bottom:4px;
  transition:background-color .2s ease,border-color .2s ease
}
.award-label span {
  margin-left:5px
}
.award-label:hover {
  background:#e9dfc4;
  border-color:#d6c592;
  text-decoration:none
}

footer {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:52px;
  color:var(--muted);
  font-size:.75rem
}
footer span {
  margin-right:auto
}

@media(max-width:900px) {
  .layout {
  grid-template-columns:210px minmax(0,1fr);
  gap:40px;
  padding:0 28px
}
.interest-list li {
  grid-template-columns:1fr;
  gap:3px
}

}

@media(max-width:700px) {
  .layout {
  display:block;
  max-width:620px;
  padding:0 24px
}
.sidebar {
  position:static;
  padding:36px 0 0
}
.headshot {
  width:112px;
  height:112px;
  margin-bottom:18px
}
.name {
  font-size:1.65rem
}
.socials {
  margin:18px 0 24px
}
.sidebar nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  gap:2px 4px
}
.sidebar nav a {
  font-size:.78rem;
  padding:5px 8px
}
main {
  padding-top:34px
}
h2 {
  font-size:1.5rem
}
section {
  margin-bottom:35px
}
.entry {
  grid-template-columns:1fr;
  gap:6px
}
.publication {
  padding:18px 20px
}

}

@media(max-width:360px) {
  .layout {
  padding:0 18px
}
footer {
  gap:12px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
  .socials a,.award-label {
  transition:none
}

}

.news {
  padding:12px 16px;
  background:#fff;
  border:1px solid #bed8ed;
  border-radius:6px;
}
.interest-list li:nth-child(2) { border-left-color:#81b8ae; background:#f3faf8 }
.interest-list li:nth-child(3) { border-left-color:#80b9ac; background:#f2faf7 }

/* A consistent, understated surface for each content block. */
.news, .interest-list li, #education > div, .publication, #experience .entry {
  background:#fff;
  border:1px solid #d7e5ef;
  border-radius:8px;
  box-shadow:0 3px 14px rgba(35, 51, 75, .035);
}
.news { padding:14px 18px; margin-top:22px }
.interest-list li, .interest-list li:nth-child(2), .interest-list li:nth-child(3) {
  background:#fff;
  border:1px solid #d7e5ef;
  border-left:3px solid #a8cbdc;
  padding:16px 18px;
}
#education > div { padding:20px 22px }
.publication { padding:22px }
#experience .entry { padding:20px 22px }
.entry-date { color:#52748a }
.award-label { color:#315d75; background:#eff7fa; border-color:#d3e7ef }
.award-label:hover { background:#e4f2f6; border-color:#b8d8e4 }
h2 { border-bottom-color:#d7e5ef }
.sidebar nav a { border-radius:6px }
@media(max-width:700px) {
  #education > div, .publication, #experience .entry { padding:18px }
}
/* Profile-led layout inspired by the reference site. */
body { background:#fff; color:#243449; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif }
.topbar { border-bottom:1px solid #e3eaf0; background:#fff }
.topbar-inner { max-width:1120px; min-height:70px; margin:auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand { color:#243449; font-weight:700; font-size:1.15rem }
.topbar nav { display:flex; flex-wrap:wrap; gap:28px }
.topbar nav a { color:#344a60; font-size:.88rem; font-weight:600 }
.layout { max-width:1120px; grid-template-columns:240px minmax(0,1fr); gap:70px }
.sidebar { position:static; padding-top:76px }
.headshot { width:180px; height:180px; border:4px solid #e3eef3; box-shadow:none; margin-bottom:22px }
.name { font:700 1.75rem/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; letter-spacing:-.025em }
.affiliation { font-size:.95rem }
main { padding-top:76px; display:grid; grid-template-columns:1fr 1fr; column-gap:40px; align-items:start }
section { margin-bottom:48px }
#about, #publication, #experience, footer { grid-column:1 / -1 }
#research { grid-column:1 }
#education { grid-column:2 }
.eyebrow { color:#487c8a; margin-bottom:12px }
h2 { font:700 1.65rem/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; letter-spacing:-.025em; border:0; padding:0; margin-bottom:20px }
.intro-section { margin-bottom:36px }
.intro-section p:not(.eyebrow) { line-height:1.75 }
.news { background:#fff; border:1px solid #bed8ed; border-radius:6px; box-shadow:none; padding:12px 16px }
.interest-list li, .interest-list li:nth-child(2), .interest-list li:nth-child(3) { display:list-item; list-style:disc; background:transparent; border:0; border-radius:0; padding:0; margin:0 0 12px 19px; box-shadow:none }
.interest-list strong, .interest-list span { display:block }
.interest-list span { margin-top:2px }
#education > div { background:transparent; border:0; padding:0; box-shadow:none }
.publication, #experience .entry { background:#fff; border:1px solid #dce8ef; border-radius:8px; box-shadow:0 4px 20px rgba(35,51,75,.04); padding:22px }
footer { width:100% }
@media(max-width:900px) { .layout { grid-template-columns:200px minmax(0,1fr); gap:36px } .headshot { width:160px; height:160px } main { column-gap:25px } }
@media(max-width:700px) { .topbar-inner { padding:16px 24px; flex-wrap:wrap; gap:12px } .topbar nav { gap:12px 20px } .layout { display:block; padding:0 24px } .sidebar { padding:38px 0 0 } .headshot { width:140px; height:140px } main { padding-top:28px; display:block } section { margin-bottom:36px } .interest-list li, .interest-list li:nth-child(2), .interest-list li:nth-child(3) { display:list-item } }

/* Profile links and high-contrast, quiet blue palette. */
:root { --text:#172d42; --body:#33485b; --muted:#526778; --accent:#155878; --line:#c6d9e3 }
body { color:var(--text); background:#f9fbfc }
p { color:var(--body) }
.topbar { background:#fff; border-bottom-color:#cbdce5 }
.brand, .topbar nav a { color:#17374d }
.topbar nav a:hover, a:hover { color:#0b617d }
.socials { display:flex; flex-direction:column; align-items:stretch; gap:2px; width:max-content; max-width:100%; margin:22px auto 0 }
.socials a { width:auto; height:auto; justify-content:flex-start; gap:11px; padding:6px 10px; border-radius:6px; color:#155878; font-size:.88rem; font-weight:600 }
.socials a:hover { background:#eaf4f7; border-color:#c6dce5 }
.socials svg { flex:none; width:18px; height:18px }
.headshot { border-color:#c9e0e5 }
.news { border-color:#a8cce0; background:#fff }
.publication, #experience .entry { border-color:#cbdce5; background:#fff }
.publication .publication-venue, .entry-date, footer { color:#526778 }
.interest-list span { color:#33485b }
@media(max-width:700px) { .socials { margin:20px auto 0 } }

.headshot { filter:brightness(1.15) }

.headshot { width:195px; height:195px }
@media(max-width:900px) { .headshot { width:175px; height:175px } }
@media(max-width:700px) { .headshot { width:150px; height:150px } }

.paper-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px }
.paper-links a { display:inline-flex; align-items:center; padding:5px 14px; border:1px solid #aacbdc; border-radius:5px; background:#fff; color:#155878; font-size:.8rem; font-weight:600; line-height:1.6 }
.paper-links a:hover { background:#eaf4f7; border-color:#7caabc; text-decoration:none }

/* Education follows the profile links in the sidebar. */
.sidebar #education { margin:32px 0 0; padding-top:24px; border-top:1px solid var(--line) }
.sidebar #education h2 { font-size:1.15rem; margin-bottom:14px }
.sidebar #education h3 { font-size:.9rem; line-height:1.5 }
.sidebar #education .entry-subtitle { font-size:.8rem; line-height:1.65; margin-bottom:5px }
#research { grid-column:1 / -1 }
@media(max-width:700px) { .sidebar #education { max-width:360px; margin:28px auto 0; padding-top:22px } }

/* Compact profile links on portrait phones; stacked links in landscape. */
@media(max-width:700px) and (orientation:portrait) {
  .socials { flex-direction:row; justify-content:center; align-items:stretch; width:100%; max-width:360px; gap:4px; margin:22px auto 0 }
  .socials a { flex:1 1 0; min-width:0; flex-direction:column; justify-content:flex-start; gap:7px; padding:8px 2px; text-align:center; font-size:.72rem; line-height:1.4 }
  .socials svg { width:20px; height:20px }
}
@media(orientation:landscape) {
  .socials { flex-direction:column; width:max-content; align-items:stretch }
  .socials a { flex-direction:row; justify-content:flex-start; gap:11px }
}

@media(max-width:700px) and (orientation:portrait) { .sidebar #education { display:none } }