*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#132d37;background:#fff;font:18px/1.65 Arial,Helvetica,sans-serif}a{color:inherit}header,main,footer{padding-inline:max(6vw,calc((100vw - 1200px)/2))}header{min-height:112px;display:flex;justify-content:space-between;align-items:center;gap:30px;border-bottom:1px solid #dce4e5}.brand{text-decoration:none;font-weight:700;font-size:23px;letter-spacing:-1px}.brand span{display:block;font-size:13px;letter-spacing:2px;font-weight:400}nav{display:flex;gap:30px;flex-wrap:wrap}nav a{text-decoration:none;font-size:16px;padding:8px 0}nav a:hover{color:#00636b;text-decoration:underline;text-underline-offset:8px}main{min-height:65vh}.hero{padding:85px 0 75px;max-width:1000px}.eyebrow{text-transform:uppercase;letter-spacing:2px;color:#00717b;font-size:14px;font-weight:bold}h1{font-size:clamp(48px,7vw,88px);line-height:1.06;letter-spacing:-3px;margin:24px 0 32px;font-weight:500}h2{font-size:32px;line-height:1.2;font-weight:500;letter-spacing:-.8px}h3{font-size:25px;line-height:1.3;font-weight:500}.slogan{max-width:960px;font-size:clamp(22px,2.6vw,32px);line-height:1.5}.accent{color:#007e88}.themes{border-top:1px solid #b8cdd0;padding:40px 0 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:46px}.number{font-size:14px;color:#00717b;letter-spacing:2px}.themes p{color:#4d636c;font-size:17px}.placeholder{border-top:1px solid #b8cdd0;padding:32px 0 80px;color:#4d636c;max-width:850px}footer{padding-top:35px;padding-bottom:35px;background:#12343e;color:white;display:flex;justify-content:space-between;gap:24px;font-size:14px}.skip{position:absolute;top:-100px;background:white;padding:10px}.skip:focus{top:0}a:focus-visible{outline:3px solid #00a6ac;outline-offset:5px}@media(max-width:700px){header{padding-top:24px;padding-bottom:24px;align-items:flex-start;flex-direction:column;gap:16px}nav{gap:22px}.hero{padding:55px 0 40px}h1{letter-spacing:-2px}.themes{grid-template-columns:1fr;gap:24px;padding-bottom:50px}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

section[id]{scroll-margin-top:32px}.content-section{padding:64px 0 80px;border-top:1px solid #b8cdd0}.content-section h2{font-size:clamp(36px,4vw,52px);margin:0 0 24px}.section-intro{font-size:24px;max-width:850px}.pending{color:#4d636c}@media(max-width:700px){.content-section{padding:40px 0 50px}}

.person{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:48px;margin-top:40px;align-items:start}.person-photo{margin:0}.person-photo img{display:block;width:100%;height:auto;border-radius:3px}.person-photo figcaption{font-size:12px;line-height:1.5;color:#4d636c;margin-top:10px}.person-bio h3{font-size:30px;margin:0 0 12px}.person-role{color:#00717b;margin-top:0;font-size:16px}.person-links{display:flex;gap:24px;flex-wrap:wrap}.person-links a{color:#00636b;text-underline-offset:4px}@media(max-width:700px){.person{grid-template-columns:1fr;gap:26px}.person-photo{max-width:260px}}

.person + .person{padding-top:40px;border-top:1px solid #dce4e5}

.contact-profile{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);gap:48px;align-items:start;margin-top:36px}.contact-details h3{margin:0 0 24px;font-size:28px}.contact-details address{font-style:normal;margin-top:28px}.contact-details a{color:#00636b;text-underline-offset:4px;overflow-wrap:anywhere}@media(max-width:700px){.contact-profile{grid-template-columns:1fr;gap:28px}}

/* Circular portrait frames across People and Contact. */
.person-photo img{aspect-ratio:1 / 1;width:100%;height:auto;object-fit:cover;object-position:center;border-radius:50%;border:2px solid #dce4e5}

.people-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:36px}.person-card{position:relative;min-width:0}.person-card summary{list-style:none;cursor:pointer;text-align:center;border-radius:8px;padding:16px}.person-card summary::-webkit-details-marker{display:none}.person-card summary:focus-visible{outline:3px solid #007e88;outline-offset:4px}.person-card .person-photo{display:block;width:min(100%,170px);margin:0 auto 20px}.person-name{display:block;font-size:23px;line-height:1.3;margin-bottom:10px}.person-card .person-role{display:block;font-size:15px;line-height:1.5;margin:0}.bio-popup{position:absolute;top:100%;left:0;right:0;z-index:5;background:white;border:1px solid #b8cdd0;box-shadow:0 12px 30px #12343e26;border-radius:8px;padding:22px;font-size:16px;line-height:1.6;text-align:left}.bio-popup p:first-child{margin-top:0}.bio-popup p:last-child{margin-bottom:0}.photo-credit{font-size:12px;color:#4d636c}.person-card:not([open])>.bio-popup{display:none}.person-card:focus-within>.bio-popup{display:block}@media(hover:hover){.person-card:hover>.bio-popup{display:block}}@media(max-width:700px){.people-grid{grid-template-columns:1fr;gap:24px}.person-card .person-photo{width:140px}.bio-popup{position:relative;top:auto;margin-top:12px}}

.person-card::details-content{content-visibility:visible}.person-card::details-content{display:contents}

.person-card:not([open])>.bio-popup{display:none!important}

.people-grid{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1000px){.people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.people-grid{grid-template-columns:1fr}}


footer{align-items:center;flex-wrap:wrap}.footer-eth{display:block;background:#fff;line-height:0;border-radius:2px}.footer-eth img{display:block;width:155px;height:auto}@media(max-width:700px){footer{align-items:flex-start}}

.footer-copyright{display:block;flex-basis:100%;font-size:14px;line-height:1.5}

.contact-profile{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px}.location-map{margin:0;min-width:0}.map-surface{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:center;background:#f1f7f7;border-radius:28px 8px 28px 8px;overflow:hidden}.map-surface img{display:block;width:100%;height:auto}.map-label{padding:20px 16px}.map-label h3{font-size:26px;margin:12px 0;line-height:1.2}.map-label p{font-size:15px;line-height:1.6}.map-office{color:#00717b}.location-map figcaption{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:14px}.location-map a{color:#00636b;text-underline-offset:4px}@media(max-width:850px){.contact-profile{grid-template-columns:1fr}.map-label h3{font-size:24px}}@media(max-width:400px){.map-label{padding:12px 8px}.map-label h3{font-size:20px}.map-label .eyebrow{font-size:12px}}

footer{display:block}.footer-copyright{margin:0;font-size:14px;line-height:1.5}

.contact-profile{display:block}

.contact-profile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}.line-map{margin:-30px 0 0;min-width:0}.line-map img{display:block;width:100%;max-height:440px;height:auto;object-fit:contain}.line-map figcaption{font-size:12px;color:#4d636c;text-align:center}.line-map a{color:inherit}@media(max-width:700px){.contact-profile{grid-template-columns:1fr}.line-map{margin:0}.line-map img{max-height:360px}}

.footer-skyline{width:100%;line-height:0;background:#fff;overflow:hidden;margin-bottom:-1px}.footer-skyline img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover;object-position:bottom}.footer-skyline + footer{position:relative}@media(max-width:700px){.footer-skyline img{width:160%;max-width:none;margin-left:-30%;max-height:190px}}

/* Shallow panorama: crop unused white space, preserve skyline proportions. */
.footer-skyline{position:relative;aspect-ratio:9.6 / 1;overflow:hidden}.footer-skyline img{position:absolute;top:0;left:0;width:100%;height:auto;max-height:none;margin:0;object-fit:initial;transform:translateY(-38%)}@media(max-width:700px){.footer-skyline{aspect-ratio:9.6 / 1}.footer-skyline img{width:100%;max-width:100%;max-height:none;margin:0}}

/* Expanded mountains-to-hills panorama, keeping the complete skyline visible. */
.footer-skyline{aspect-ratio:12 / 1}.footer-skyline img{transform:translateY(-58.5%)}@media(max-width:700px){.footer-skyline{aspect-ratio:12 / 1}.footer-skyline img{transform:translateY(-58.5%)}}

/* Resolution-independent vector panorama, with no raster scaling or crop. */
.footer-skyline{aspect-ratio:auto}.footer-skyline img{position:static;display:block;width:100%;height:auto;max-height:none;transform:none;margin:0}@media(max-width:700px){.footer-skyline{aspect-ratio:auto}.footer-skyline img{transform:none;width:100%;margin:0}}

.header-eth-logo{display:block;line-height:0}.header-eth-logo img{display:block;width:190px;max-width:100%;height:auto}@media(max-width:700px){.header-eth-logo img{width:165px}}

.profile-link{display:block;text-align:center;padding:16px;border-radius:8px;text-decoration:none}.profile-link:hover .person-name{text-decoration:underline;text-underline-offset:4px}.profile-link:focus-visible{outline:3px solid #007e88;outline-offset:4px}.person-card>.photo-credit{text-align:center;margin:0 16px;font-size:12px}

.hero-illustrated{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}.hero-art{display:block;width:100%;height:auto}.hero-illustrated h1{font-size:clamp(44px,5.5vw,78px)}.hero-illustrated .slogan{font-size:clamp(22px,2vw,28px)}@media(max-width:850px){.hero-illustrated{grid-template-columns:1fr;gap:24px}.hero-art{max-width:580px;margin:auto}}

.research-illustration{display:flex;justify-content:flex-end;margin:-32px 0 48px}.research-illustration .hero-art{width:62%;max-width:720px;height:auto;margin:0}@media(max-width:700px){.research-illustration{margin:0 0 32px}.research-illustration .hero-art{width:100%;max-width:580px}}

@media(min-width:1200px){.people-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}}

/* Align the visible ETH mark, excluding the PNG's built-in white margins. */
.header-eth-logo {
  position: relative;
  width: 144px;
  aspect-ratio: 587 / 96;
  overflow: hidden;
  flex-shrink: 0;
}
.header-eth-logo img {
  position: absolute;
  width: 132.0273%;
  max-width: none;
  height: auto;
  left: -16.0136%;
  top: -97.9167%;
}
@media (max-width: 700px) {
  .header-eth-logo { width: 125px; }
  .header-eth-logo img { width: 132.0273%; }
}

/* Center Stefanie's headshot within the circular portrait. */
.portrait-stefanie {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #dce4e5;
}
.portrait-stefanie img {
  object-position: center 25%;
  transform: none;
  transform-origin: center top;
  border: 0;
  border-radius: 0;
}

.email-reveal {
  padding: 0;
  border: 0;
  background: none;
  color: #00636b;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.email-reveal:focus-visible {
  outline: 3px solid #007e88;
  outline-offset: 4px;
}
#email-contact { scroll-margin-top: 32px; }

/* Selected papers beneath each research description. */
.themes > article {
  display: flex;
  flex-direction: column;
}
.themes .research-papers {
  margin: auto 0 0;
  padding-top: 24px;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
}
.research-papers li + li {
  margin-top: 10px;
}
.research-papers a {
  color: #00636b;
  text-decoration: none;
}
.research-papers a:hover {
  color: #007e88;
  text-decoration: none;
}

/* Research keywords beneath each theme. */
.research-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}
.research-tags li {
  padding: 5px 11px;
  border: 1px solid #c8dfe0;
  border-radius: 16px;
  background: #f1f7f7;
  color: #00636b;
  font-size: 14px;
  line-height: 1.5;
}

/* Keep keyword rows flush with the research text. */
.themes .research-tags {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-inline-start: 0;
  justify-content: flex-start;
  align-self: flex-start;
  text-align: left;
}

/* Make the whole linked keyword pill clickable. */
.research-tags li:has(a) { padding: 0; }
.research-tags a {
  display: block;
  padding: 5px 11px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
.research-tags a:hover {
  background: #deeeee;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.research-tags a:focus-visible {
  outline: 2px solid #007e88;
  outline-offset: 3px;
}

/* Keep full names on one line within responsive profile cards. */
.person-card .profile-scholar {
  margin: 8px 0;
  font-size: 14px;
  text-align: center;
}
.profile-scholar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #00636b;
  text-decoration: none;
}
.profile-scholar a:hover {
  background: #deeeee;
}
.profile-scholar a:focus-visible {
  outline: 2px solid #007e88;
  outline-offset: 3px;
}

.person-card { container-type: inline-size; }
.person-card .profile-link { padding-inline: 4px; }
.person-card .person-name {
  font-size: clamp(14px, 7.4cqi, 23px);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

/* Editorial research overview for the text-based alternative. */
.research-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 64px;
  border-top: 1px solid #b8cdd0;
  padding: 48px 0 64px;
}
.research-affiliation h2 { margin: 0 0 24px; }
.research-affiliation p { margin: 0; font-size: 16px; line-height: 1.8; color: #4d636c; }
.research-statement p { margin: 0 0 24px; }
.research-statement { font-size: 18px; line-height: 1.65; }
.research-overview a { color: #00636b; text-decoration: none; }
.research-overview a:hover { text-decoration: underline; text-underline-offset: 4px; }
.research-statement .publications-note { margin: 32px 0 0; font-size: 15px; color: #4d636c; }
@media (max-width: 700px) {
  .research-overview { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 40px; }
}

/* Match Advising to the two-column research overview. */
#advising {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 64px;
  padding: 48px 0 64px;
}
#advising h2 {
  font-size: 32px;
  margin: 0;
}
#advising > p { margin: 0; }
#advising a { color: #00636b; text-decoration: none; }
#advising a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  #advising {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0 40px;
  }
}

/* Shared section layout: one heading column and one content column. */
:root {
  --section-columns: minmax(0, 1fr) minmax(0, 2fr);
  --section-gap: 64px;
  --section-rule: #b8cdd0;
}
.research-overview,
#people,
#advising,
#contact {
  display: grid;
  grid-template-columns: var(--section-columns);
  column-gap: var(--section-gap);
  row-gap: 32px;
  align-items: start;
  padding: 48px 0 64px;
  border-top: 1px solid var(--section-rule);
}
.research-affiliation h2,
.content-section > h2,
#advising h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.8px;
}
.research-affiliation p { margin-top: 24px; }
.research-statement > p:first-child,
#advising > p { margin: 0; }
#people .people-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
  margin: 0;
}
.person-card .profile-link { padding-top: 0; }
.person-card .person-photo { width: min(100%, 150px); }
#contact .contact-profile {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 0;
}
.contact-details h3 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 24px;
}
.contact-details p { margin: 0 0 24px; }
.contact-details address { margin: 0 0 24px; }
.line-map { margin: 0; }
.contact-details a,
.email-reveal { color: #00636b; text-decoration: none; }
.contact-details a:hover,
.email-reveal:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 701px) and (max-width: 1000px) {
  :root { --section-columns: minmax(0, 1fr) minmax(0, 2.5fr); --section-gap: 32px; }
  #people .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #contact .contact-profile { grid-template-columns: 1fr; }
  .line-map img { max-height: 320px; }
}
@media (max-width: 700px) {
  .research-overview,
  #people,
  #advising,
  #contact {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 0 40px;
  }
  #people .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  #contact .contact-profile { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 420px) {
  #people .people-grid { grid-template-columns: 1fr; }
}