:root {
  --paper:#f5f3ed;
  --ink:#17342f;
  --muted:#61716b;
  --line:#d7dcd2;
  --copper:#a45437;
  --forest:#193b32;
  --white:#fffef9
}

* {
  box-sizing:border-box
}

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

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 Arial,Helvetica,sans-serif
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--copper);
  outline-offset:5px
}

::selection {
  background:#d6dcc0
}

h1,h2,h3,p {
  margin:0
}

h1,h2,.serif {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400
}

p {
  color:var(--muted)
}

.wrap {
  width:min(1220px,calc(100% - 96px));
  margin:auto
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:bold
}

.line-link {
  display:inline-flex;
  gap:22px;
  align-items:center;
  border-bottom:1px solid currentColor;
  padding-bottom:5px;
  font-size:13px
}

.line-link span {
  font-size:18px
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:36px;
  gap:30px
}

.section-head h2 {
  font-size:43px;
  line-height:1.15;
  letter-spacing:-1.3px
}

.section-head .eyebrow {
  margin-bottom:14px;
  color:var(--copper)
}

header {
  height:88px;
  border-bottom:1px solid var(--line)
}

.nav {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px
}

.brand {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:14px;
  font-weight:bold;
  letter-spacing:-.3px
}

.brand-mark {
  border:1px solid #a8b6a9;
  border-radius:50%;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  font:17px Georgia
}

.nav-links {
  display:flex;
  align-items:center;
  gap:29px;
  font-size:12px
}

.nav-links a:hover {
  color:var(--copper)
}

.nav-links .resume {
  border:1px solid #aebbb0;
  padding:8px 14px
}

.hero {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  align-items:center;
  gap:38px;
  min-height:650px;
  padding-top:62px;
  padding-bottom:65px
}

.hero .eyebrow {
  color:var(--copper);
  margin-bottom:23px
}

.hero h1 {
  font-size:clamp(60px,6.1vw,84px);
  letter-spacing:-3.8px;
  line-height:1.02;
  margin-left:-4px
}

.hero h1 em {
  color:#66805d;
  font-weight:normal
}

.hero .intro {
  max-width:420px;
  font-size:15px;
  line-height:1.8;
  margin-top:25px
}

.hero .actions {
  display:flex;
  gap:27px;
  align-items:center;
  margin-top:30px
}

.button {
  display:inline-flex;
  gap:26px;
  align-items:center;
  background:var(--forest);
  color:var(--white);
  padding:13px 19px;
  font-size:12px;
  border:0;
  cursor:pointer
}

.button:hover {
  background:#315449
}

.hero .current {
  margin-top:30px;
  font-size:10px;
  letter-spacing:.02em
}

.dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:#819565;
  border-radius:50%;
  margin-right:7px;
  vertical-align:middle
}

.hero-art {
  position:relative;
  height:480px
}

.plate {
  position:absolute;
  top:30px;
  right:0;
  width:91%;
  background:#080c0a;
  border-radius:2px;
  box-shadow:0 18px 45px #183b3010;
  overflow:hidden;
  cursor:zoom-in;
  border:0;
  padding:0;
  color:white
}

.plate svg {
  width:100%;
  display:block;
  aspect-ratio:601/422
}

.plate-label {
  background:#101d16;
  border-top:1px solid #344033;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px 15px;
  font:9px Arial;
  text-align:left;
  letter-spacing:.07em
}

.ring {
  position:absolute;
  left:0;
  bottom:32px;
  width:42%;
  background:#050705;
  border:7px solid var(--paper);
  padding:0;
  cursor:zoom-in;
  box-shadow:0 15px 30px #132c2910
}

.ring svg {
  display:block;
  width:100%;
  aspect-ratio:1
}

.ring-tag {
  padding:8px 9px;
  background:#132319;
  color:#d5dfce;
  font-size:9px;
  text-align:left;
  letter-spacing:.05em
}

.art-note {
  position:absolute;
  right:0;
  bottom:0;
  font-size:9px;
  color:var(--muted);
  max-width:55%;
  line-height:1.55;
  text-align:right
}

.hero-index {
  font:italic 16px Georgia;
  color:#7e8b7b;
  position:absolute;
  top:0;
  right:0
}

.affiliations {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.affiliations .eyebrow {
  font-size:8px;
  color:var(--muted);
  max-width:115px
}

.institutions {
  display:flex;
  gap:42px;
  align-items:center;
  font-family:Georgia,serif;
  font-size:17px;
  color:#657366
}

.institutions .small {
  font:11px Arial;
  letter-spacing:.03em
}

.research {
  padding-top:94px;
  padding-bottom:90px
}

.research .section-head>p {
  max-width:300px;
  font-size:13px
}

.research-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:31px
}

.research-item {
  border-top:1px solid #aebcab;
  padding-top:15px
}

.research-item .meta {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted)
}

.research-img {
  margin:17px 0 24px;
  height:230px;
  background:#fff;
  display:grid;
  place-items:center;
  width:100%;
  padding:8px;
  border:1px solid #e0e3d9;
  cursor:zoom-in;
  overflow:hidden
}

.research-img svg {
  width:100%;
  height:100%
}

.research-img img {
  max-width:100%;
  max-height:100%;
  object-fit:contain
}

.research-item h3 {
  font:25px/1.25 Georgia;
  letter-spacing:-.5px;
  margin-bottom:12px
}

.research-item p {
  font-size:12px;
  line-height:1.85;
  min-height:86px
}

.research-item .line-link {
  margin-top:18px;
  font-size:11px
}

.research-item .source {
  font-size:9px;
  color:#7c857a;
  margin-top:13px
}

.current-research {
  background:var(--forest);
  color:var(--paper);
  padding:68px 0
}

.current-grid {
  display:grid;
  grid-template-columns:.88fr 1.2fr;
  gap:95px
}

.current-research .eyebrow {
  color:#bdc9a6;
  margin-bottom:19px
}

.current-research h2 {
  font-size:46px;
  line-height:1.13;
  letter-spacing:-1.2px
}

.current-research .lede {
  font-size:13px;
  color:#c3cdbf;
  margin-top:23px;
  max-width:325px
}

.status {
  display:inline-flex;
  align-items:center;
  border:1px solid #617963;
  padding:4px 9px;
  margin-top:25px;
  font-size:9px;
  letter-spacing:.05em;
  color:#d9e4cd
}

.questions details {
  border-top:1px solid #50664e;
  padding:17px 0
}

.questions details:last-child {
  border-bottom:1px solid #50664e
}

.questions summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  gap:18px;
  align-items:baseline;
  font:19px/1.45 Georgia
}

.questions summary::-webkit-details-marker {
  display:none
}

.questions summary .n {
  font:10px Arial;
  color:#9eaf91
}

.questions summary .plus {
  margin-left:auto;
  font:20px Arial;
  font-weight:normal;
  color:#9eaf91
}

.questions details[open] .plus {
  transform:rotate(45deg)
}

.questions details p {
  font-size:12px;
  color:#c2cfba;
  padding:15px 18px 0 34px;
  line-height:1.9
}

.work {
  padding:87px 0
}

.work-layout {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:80px
}

.work h2 {
  font-size:41px;
  line-height:1.14;
  letter-spacing:-1px
}

.work .eyebrow {
  color:var(--copper);
  margin-bottom:17px
}

.work .work-intro {
  font-size:13px;
  margin-top:19px;
  max-width:290px
}

.work-row {
  display:grid;
  grid-template-columns:100px 1fr;
  gap:20px;
  padding:23px 0;
  border-top:1px solid var(--line)
}

.work-row:last-child {
  border-bottom:1px solid var(--line)
}

.work-date {
  font-size:10px;
  color:#788375;
  padding-top:3px
}

.work-row h3 {
  font-size:14px;
  margin-bottom:6px
}

.work-row .role {
  font-size:11px;
  color:var(--copper);
  margin-bottom:9px
}

.work-row p {
  font-size:12px;
  line-height:1.8
}

.work-tags {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px
}

.work-tags span {
  font-size:9px;
  color:#60755d;
  background:#e9ecdf;
  padding:2px 7px
}

.publications {
  padding:65px 0 75px;
  background:#eeeee5;
  border-top:1px solid var(--line)
}

.pub-row {
  display:grid;
  grid-template-columns:72px 1fr 35px;
  gap:18px;
  align-items:start;
  border-top:1px solid #cbd1c4;
  padding:21px 0
}

.pub-year {
  font-size:11px;
  color:var(--muted)
}

.pub-row h3 {
  font:19px/1.4 Georgia;
  max-width:840px
}

.pub-row small {
  display:block;
  font-size:10px;
  margin-top:8px;
  color:var(--muted)
}

.pub-arrow {
  font-size:21px;
  text-align:right
}

.pub-row:hover h3 {
  color:var(--copper)
}

.about {
  padding:85px 0 80px;
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:90px
}

.about h2 {
  font-size:44px;
  line-height:1.1
}

.about .eyebrow {
  color:var(--copper);
  margin-bottom:20px
}

.about-copy p {
  font-size:13px;
  line-height:1.95;
  margin-bottom:18px
}

.recognition {
  display:flex;
  flex-wrap:wrap;
  gap:13px 30px;
  padding-top:17px;
  border-top:1px solid var(--line);
  margin-top:27px
}

.recognition span {
  font-size:10px;
  color:#52694f
}

.contact {
  background:#dfe5d6;
  padding:48px 0
}

.contact-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px
}

.contact h2 {
  font-size:35px;
  letter-spacing:-.7px
}

.contact p {
  font-size:12px;
  margin-top:9px;
  max-width:500px
}

.contact a {
  white-space:nowrap
}

.bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:23px 0;
  font-size:9px;
  color:#77816f;
  gap:25px
}

.bottom a {
  border-bottom:1px solid #a4af9b
}

.draft-label {
  font-size:9px;
  border:1px solid #c5cdbd;
  padding:3px 8px;
  color:#7c8575
}

.skip {
  position:absolute;
  left:-9999px
}

.skip:focus {
  left:10px;
  top:10px;
  z-index:20;
  background:white;
  padding:15px
}

dialog {
  border:0;
  border-radius:4px;
  width:min(1100px,95vw);
  max-height:94vh;
  padding:24px;
  background:var(--paper);
  color:var(--ink)
}

dialog::backdrop {
  background:#071912d9
}

.modal-top {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:start
}

.modal-top h2 {
  font:23px/1.3 Georgia
}

.close {
  background:none;
  border:1px solid #aab6a3;
  padding:6px 12px;
  cursor:pointer
}

.modal-img {
  display:block;
  max-width:100%;
  max-height:67vh;
  object-fit:contain;
  margin:22px auto;
  background:white
}

.modal-caption {
  font-size:12px;
  color:var(--muted)
}

.modal-caption a {
  border-bottom:1px solid currentColor
}

.figure-note {
  font-size:10px;
  color:#89927e;
  margin-top:15px
}

.mobile-toggle {
  display:none
}

@media(min-width:1600px) {
  .wrap {
    max-width:1280px
  }

  .hero {
    min-height:710px
  }

  .hero h1 {
    font-size:94px
  }

  .hero-art {
    height:510px
  }

}

@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 56px)
  }

  .nav-links {
    gap:17px
  }

  .hero {
    gap:20px;
    min-height:580px
  }

  .hero h1 {
    font-size:65px
  }

  .hero-art {
    height:425px
  }

  .hero .intro {
    font-size:14px
  }

  .institutions {
    gap:22px;
    font-size:15px
  }

  .current-grid {
    gap:50px
  }

  .research-grid {
    gap:22px
  }

  .research-img {
    height:190px
  }

  .work-layout {
    gap:40px
  }

  .about {
    gap:50px
  }

}

@media(max-width:850px) {
  html {
    scroll-padding-top:20px
  }

  .wrap {
    width:calc(100% - 40px)
  }

  header {
    height:75px
  }

  .brand {
    font-size:12px
  }

  .nav-links {
    gap:16px
  }

  .nav-links .hide-small {
    display:none
  }

  .nav-links a {
    font-size:11px
  }

  .brand-mark {
    width:30px;
    height:30px
  }

  .hero {
    display:block;
    padding-top:42px;
    padding-bottom:32px;
    min-height:auto
  }

  .hero h1 {
    font-size:65px;
    letter-spacing:-3.4px;
    max-width:480px
  }

  .hero .intro {
    max-width:420px
  }

  .hero .current {
    margin-top:22px
  }

  .hero-art {
    height:390px;
    margin-top:28px;
    max-width:450px;
    margin-left:auto;
    margin-right:auto
  }

  .plate {
    width:89%;
    top:25px
  }

  .ring {
    bottom:28px;
    width:39%
  }

  .art-note {
    font-size:8px;
    bottom:0
  }

  .affiliations {
    align-items:start;
    gap:20px;
    padding:18px 0
  }

  .institutions {
    flex-wrap:wrap;
    gap:9px 21px;
    font-size:14px;
    max-width:280px
  }

  .affiliations .eyebrow {
    font-size:7px;
    max-width:82px
  }

  .research {
    padding:60px 0
  }

  .section-head {
    display:block;
    margin-bottom:28px
  }

  .section-head h2 {
    font-size:37px
  }

  .research .section-head>p {
    margin-top:18px;
    max-width:440px
  }

  .research-grid {
    grid-template-columns:1fr;
    gap:37px
  }

  .research-img {
    height:280px;
    margin-bottom:18px
  }

  .research-item p {
    min-height:0;
    max-width:450px
  }

  .research-item h3 {
    font-size:27px
  }

  .current-research {
    padding:50px 0
  }

  .current-grid {
    grid-template-columns:1fr;
    gap:35px
  }

  .current-research h2 {
    font-size:40px
  }

  .current-research .lede {
    max-width:450px
  }

  .questions summary {
    font-size:19px
  }

  .work {
    padding:60px 0
  }

  .work-layout {
    grid-template-columns:1fr;
    gap:25px
  }

  .work h2 {
    font-size:37px
  }

  .work .work-intro {
    max-width:450px
  }

  .work-row {
    grid-template-columns:76px 1fr;
    gap:15px
  }

  .publications {
    padding:50px 0
  }

  .pub-row {
    grid-template-columns:40px 1fr 18px;
    gap:12px
  }

  .pub-row h3 {
    font-size:17px
  }

  .about {
    padding:60px 0;
    grid-template-columns:1fr;
    gap:25px
  }

  .about h2 {
    font-size:39px
  }

  .contact-inner {
    display:block
  }

  .contact h2 {
    font-size:30px
  }

  .contact .line-link {
    margin-top:23px
  }

  .bottom {
    align-items:start;
    gap:15px
  }

  .bottom .draft-label {
    white-space:nowrap
  }

  dialog {
    padding:17px
  }

  .modal-top h2 {
    font-size:19px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  * {
    transition:none!important
  }

}

.ring-tag {
  display:block;
  font-size:8px;
  padding:7px 8px
}

.research-img {
  display:flex;
  align-items:center;
  justify-content:center
}

.research-img img {
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain
}

.source-extra {
  font:inherit;
  color:inherit;
  border:0;
  border-bottom:1px solid #a6b19f;
  background:none;
  padding:0;
  cursor:pointer
}

.lab-name {
  font:italic 23px Georgia;
  color:#bdc9a6;
  margin-top:13px
}

.lab-contact {
  display:flex;
  width:fit-content;
  margin-top:24px
}

.current-research {
  margin-top:38px
}

.current-research .lede {
  max-width:400px
}

.open-visuals {
  padding:20px 0 70px
}

.open-visuals .section-head>p {
  max-width:340px;
  font-size:12px
}

.open-grid {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:25px
}

.open-image {
  border:0;
  padding:0;
  background:#e7e8dd;
  text-align:left;
  cursor:zoom-in;
  color:var(--ink)
}

.open-image img {
  width:100%;
  height:290px;
  object-fit:cover;
  display:block
}

.open-image span {
  display:block;
  padding:10px 13px;
  font-size:10px
}

.institutions {
  font-size:15px;
  gap:22px
}

.modal-caption p {
  margin:0 0 15px
}

@media(max-width:850px) {
  .open-grid {
    grid-template-columns:1fr
  }

  .open-visuals .section-head>p {
    margin-top:18px
  }

  .open-image img {
    height:260px
  }

  .institutions {
    gap:8px 13px
  }

  .current-research {
    margin-top:24px
  }

}

.hero .intro strong {
  font-weight:600;
  color:var(--ink)
}

.current-research .lede strong {
  font-weight:600;
  color:#f5f3ed
}

/* Production refinements: responsive layout, touch targets and stable image sizes. */
img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.hero > *, .current-grid > *, .work-layout > *, .research-grid > *, .about > * {
  min-width: 0;
}

.plate > img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 601 / 422;
}

.ring > img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 422 / 423;
}

.hero h1 {
  font-size: clamp(54px, 6.1vw, 84px);
}

.nav-links {
  gap: 22px;
}

.nav-links a {
  white-space: nowrap;
}

.nav {
  position: relative;
}

.line-link, .button, .close, .mobile-toggle {
  min-height: 44px;
}

.research-item .line-link {
  display: inline-flex;
}

.research-item p, .work-row p, .about-copy p, .current-research .lede {
  font-size: 14px;
}

.research-item .source {
  font-size: 11px;
}

.source a, .modal-caption a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.current {
  line-height: 1.7;
}

.institutions {
  flex-wrap: wrap;
}

.questions summary {
  min-height: 44px;
}

.questions details p {
  font-size: 14px;
}

.bottom {
  flex-wrap: wrap;
  font-size: 11px;
}

.modal-img {
  width: auto;
  height: auto;
}

.modal-caption {
  overflow-wrap: anywhere;
}

body.dialog-open {
  overflow: hidden;
}

.contact-inner > div {
  min-width: 0;
}

@media (min-width: 1600px) {
  .hero h1 {
    font-size: 94px;
  }

}

@media (max-width: 1000px) {
  header {
    height: auto;
    min-height: 76px;
  }

  .nav {
    min-height: 76px;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .nav-links {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 8px;
  }

  .nav-links a {
    padding: 8px 0;
    font-size: 14px;
  }

  .js .mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    background: transparent;
    border: 1px solid #aebbb0;
    color: var(--ink);
    cursor: pointer;
    font-size: 13px;
  }

  .js .nav-links {
    display: none;
  }

  .js .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .nav-links.is-open a {
    min-height: 44px;
    border-top: 1px solid var(--line);
  }

  .js .nav-links.is-open .resume {
    margin-top: 8px;
    padding: 8px 12px;
    width: fit-content;
  }

}

@media (max-width: 850px) {
  .wrap {
    width: calc(100% - 40px);
  }

  .hero h1 {
    font-size: clamp(51px, 10vw, 72px);
    letter-spacing: -.045em;
  }

  .hero .eyebrow {
    font-size: 10px;
    letter-spacing: .11em;
  }

  .hero .intro {
    font-size: 16px;
  }

  .hero .actions {
    flex-wrap: wrap;
    gap: 15px 23px;
  }

  .hero .current {
    font-size: 12px;
  }

  .hero-art {
    height: auto;
    aspect-ratio: 450 / 390;
  }

  .art-note {
    font-size: 10px;
    max-width: 58%;
  }

  .hero-index {
    font-size: 14px;
  }

  .affiliations {
    flex-direction: column;
    gap: 12px;
  }

  .affiliations .eyebrow {
    max-width: none;
    font-size: 9px;
  }

  .institutions {
    max-width: none;
    gap: 6px 12px;
    font-size: 15px;
  }

  .current-research h2 {
    font-size: clamp(34px, 8.5vw, 44px);
  }

  .current-grid {
    gap: 28px;
  }

  .questions summary {
    font-size: 19px;
    gap: 12px;
  }

  .questions details p {
    padding-left: 25px;
  }

  .questions .plus {
    padding-left: 5px;
  }

  .status {
    font-size: 9px;
    letter-spacing: .02em;
  }

  .research-img {
    height: auto;
    aspect-ratio: 1.4;
  }

  .research-img img {
    object-fit: contain;
  }

  .research-item p {
    font-size: 15px;
  }

  .work-row {
    grid-template-columns: 73px minmax(0, 1fr);
    gap: 12px;
  }

  .work-row h3 {
    font-size: 16px;
    line-height: 1.45;
  }

  .work-row .role {
    font-size: 12px;
  }

  .work-date {
    font-size: 11px;
  }

  .about-copy p {
    font-size: 15px;
  }

  .contact .line-link {
    white-space: normal;
    font-size: 14px;
  }

  .bottom {
    gap: 13px;
  }

  .modal-img {
    max-height: 56vh;
  }

  dialog {
    max-height: calc(100dvh - 28px);
    width: calc(100vw - 24px);
  }

}

@media (max-width: 360px) {
  .wrap {
    width: calc(100% - 32px);
  }

  .brand {
    gap: 7px;
    font-size: 11px;
  }

  .brand-mark {
    width: 26px;
    height: 26px;
  }

  .js .mobile-toggle {
    padding: 7px 10px;
  }

  .hero h1 {
    font-size: 50px;
  }

  .work-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .work-date br {
    display: none;
  }

  .contact h2 {
    font-size: 28px;
  }

}


/* Reserve room for the microscopy caption beneath the mobile image stack. */
@media (max-width: 850px) {
  .hero-art { aspect-ratio: 450 / 500; }
  .hero-art .ring { bottom: 80px; }
  .hero-art .art-note { max-width: 62%; }
}