@font-face {
  font-family:Inter;
  src:url('assets/fonts/inter-variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root {
  --ink:#17212b;
  --muted:#64717c;
  --accent:#16768a;
  --line:#e4e9ed;
  --navy:#080f1a;
  --width:1120px;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  font:400 16px/1.7 Inter,Arial,sans-serif;
  color:var(--ink);
  color-scheme:light;
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,p,ul,figure {
  margin:0;
}

a {
  color:var(--accent);
  text-decoration:none;
  text-underline-offset:4px;
}

a:hover {
  text-decoration:underline;
}

button {
  font:inherit;
}

a:focus-visible,button:focus-visible {
  outline:2px solid #48b9ce;
  outline-offset:5px;
}

::selection {
  background:#ccecf0;
}

strong {
  font-weight:600;
}

.icon {
  width:18px;
  height:18px;
  flex:none;
  vertical-align:middle;
}

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

.skip-link:focus {
  transform:translateY(0);
}

.site-header {
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(8,15,26,.97);
  border-bottom:1px solid #ffffff14;
  backdrop-filter:blur(12px);
}

.header-inner {
  max-width:var(--width);
  margin:auto;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

.site-name {
  color:#f4f7fa;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.6px;
  white-space:nowrap;
}

.site-name:hover {
  text-decoration:none;
}

.name-dot {
  color:#61c5d4;
}

nav {
  display:flex;
  gap:25px;
  overflow-x:auto;
  scrollbar-width:none;
}

nav::-webkit-scrollbar {
  display:none;
}

nav a {
  font-size:12px;
  font-weight:500;
  color:#b8c1ca;
  padding:21px 0 19px;
  white-space:nowrap;
  position:relative;
}

nav a:hover,nav a[aria-current] {
  color:#fff;
  text-decoration:none;
}

nav a::after {
  content:'';
  position:absolute;
  bottom:12px;
  left:0;
  right:0;
  height:1px;
  background:#78d2df;
  transform:scaleX(0);
  transition:transform .2s;
}

nav a[aria-current]::after,nav a:hover::after {
  transform:scaleX(1);
}

.hero {
  position:relative;
  isolation:isolate;
  background:#060e19;
  color:#f4f7fa;
  overflow:hidden;
}

.hero-art {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

.hero-picture,.hero-picture img,.hero-digital {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-digital {
  opacity:0;
  transition:opacity .9s ease;
  visibility:hidden;
}

.hero[data-ready=true] .hero-digital {
  visibility:visible;
}

.hero.digital-active .hero-digital {
  opacity:1;
}

.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,14,25,.95),rgba(6,14,25,.72) 32%,rgba(6,14,25,.16) 62%,rgba(6,14,25,.04)),linear-gradient(0deg,rgba(6,14,25,.65),transparent 25%);
}

.hero-inner {
  max-width:var(--width);
  min-height:460px;
  position:relative;
  margin:auto;
  display:flex;
  align-items:center;
  padding:42px 0 55px;
}

.hero-copy {
  width:570px;
  max-width:100%;
}

.hero-eyebrow {
  font-family:var(--mono);
  text-transform:uppercase;
  font-size:10px;
  font-weight:500;
  letter-spacing:.13em;
  color:#9cbcc9;
  margin-bottom:24px;
}

.hero-eyebrow span {
  color:#507180;
  padding:0 8px;
}

.hero-identity {
  display:flex;
  align-items:center;
  gap:23px;
}

.avatar-toggle {
  padding:0;
  border:1px solid #a6c9d549;
  background:#102034;
  border-radius:50%;
  width:94px;
  height:94px;
  flex:none;
  overflow:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .35s,transform .35s,border-color .35s;
}

.avatar-toggle:disabled {
  cursor:default;
}

.portrait {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 34%;
}

.avatar-toggle:focus-visible,.hero.digital-active .avatar-toggle {
  box-shadow:0 0 0 5px #72d6ef15,0 0 28px #5ad8f13d;
  border-color:#8fdef4;
  transform:translateY(-2px);
}

@media (hover:hover) and (pointer:fine) {
  .avatar-toggle:not(:disabled):hover {
    box-shadow:0 0 0 5px #72d6ef15,0 0 28px #5ad8f13d;
    border-color:#8fdef4;
    transform:translateY(-2px);
  }
}

h1 {
  font-size:44px;
  letter-spacing:-1.8px;
  line-height:1.15;
  font-weight:650;
}

h1 span {
  display:inline-block;
  font-family:Inter,"PingFang SC",sans-serif;
  font-weight:400;
  font-size:17px;
  letter-spacing:1px;
  color:#bdd0db;
  margin-left:7px;
  vertical-align:middle;
}

.hero-role {
  font-size:14px;
  line-height:1.65;
  color:#e0e8ed;
  margin-top:12px;
}

.hero-role>span {
  padding:0 5px;
  color:#677c8a;
}

.hero-role a {
  color:inherit;
}

.hero-location {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  color:#9cb2c1;
  margin-top:6px;
}

.hero-location .icon {
  width:13px;
  height:13px;
}

.hero-hint {
  visibility:hidden;
  margin:13px 0 0;
  font-size:10px;
  letter-spacing:.015em;
  color:#9ebbc9;
}

.hero[data-ready=true] .hero-hint {
  visibility:visible;
}

.hero-hint span {
  color:#6ecbdf;
  margin-left:5px;
}

.hero-statement {
  font-size:29px;
  font-weight:450;
  line-height:1.32;
  letter-spacing:-.8px;
  max-width:410px;
  margin:24px 0 23px;
}

.profile-links {
  list-style:none;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:22px;
}

.profile-links a {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:500;
  color:#d2e2ea;
  padding:4px 0;
}

.profile-links .icon {
  width:16px;
  height:16px;
  color:#84bdcb;
}

.profile-links a:hover {
  color:#fff;
}

.hero-caption {
  position:absolute;
  right:0;
  bottom:23px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:var(--mono);
  color:#99b6c8;
}

.scene-indicator {
  width:5px;
  height:5px;
  background:#72c9dc;
  border-radius:50%;
  box-shadow:0 0 10px #77bff3;
}

.caption-rule {
  width:22px;
  height:1px;
  background:#526778;
  margin:0 3px;
}

.caption-digital {
  display:none;
}

.digital-active .caption-biology {
  display:none;
}

.digital-active .caption-digital {
  display:inline;
}

.hero-scan {
  position:absolute;
  top:0;
  bottom:0;
  left:30%;
  width:15%;
  background:linear-gradient(90deg,transparent,#8adeff12,transparent);
  opacity:0;
  transform:skewX(-12deg);
}

.hero.scanning .hero-scan {
  animation:scan .9s ease-out;
}

@keyframes scan {
  0% {
    opacity:0;
    transform:translateX(0) skewX(-12deg);
  }
  30% {
    opacity:1;
  }
  100% {
    opacity:0;
    transform:translateX(500%) skewX(-12deg);
  }
}

.main-content {
  max-width:1040px;
  margin:54px auto 60px;
}

.main-content>section+section {
  margin-top:48px;
}

.main-content>section {
  scroll-margin-top:24px;
}

h2 {
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:24px;
  line-height:1.3;
  letter-spacing:-.7px;
  font-weight:600;
  margin-bottom:24px;
}

.section-index {
  font-family:var(--mono);
  font-weight:400;
  font-size:10px;
  letter-spacing:.03em;
  color:#8a97a2;
  align-self:center;
  line-height:1;
  border:1px solid var(--line);
  border-radius:3px;
  padding:4px 5px;
}

.bio {
  max-width:940px;
  color:#465461;
  line-height:1.85;
}

.bio+.bio {
  margin-top:14px;
}

.bio a {
  font-weight:500;
}

.research-list {
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.research-list li {
  padding:20px 0 23px;
}

.research-list h3 {
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  margin-bottom:7px;
}

.research-list p {
  color:var(--muted);
  font-size:13px;
  line-height:1.75;
}

.research-list li+li {
  position:relative;
}

.research-list li+li::before {
  content:'';
  position:absolute;
  left:-16px;
  top:24px;
  bottom:24px;
  width:1px;
  background:var(--line);
}

.publication-group+.publication-group {
  margin-top:30px;
}

.publication-group-title {
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:#71818d;
  margin-bottom:21px;
}

.publication {
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:28px;
  padding-bottom:25px;
  margin-bottom:25px;
  border-bottom:1px solid var(--line);
  align-items:start;
}

.publication:last-child {
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:0;
}

.pub-preview {
  margin:0;
  min-width:0;
}

.preview-link {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:164px;
  padding:10px;
  background:#fcfdfd;
  border:1px solid #e6ebee;
  border-radius:5px;
  transition:border-color .2s;
}

.preview-link:hover {
  border-color:#7eb6c2;
}

.pub-preview img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.pub-content {
  min-width:0;
}

.publication h4 {
  font-size:16px;
  line-height:1.55;
  font-weight:600;
  letter-spacing:-.15px;
  margin-bottom:7px;
}

.publication h4 a {
  color:var(--ink);
}

.publication h4 a:hover {
  color:var(--accent);
}

.authors {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:6px;
}

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

.venue {
  font-size:12px;
  color:#51616d;
  font-style:italic;
  line-height:1.8;
}

.journal-metrics {
  display:inline-flex;
  flex-wrap:wrap;
  gap:5px;
  font-size:10px;
  font-style:normal;
  margin-left:8px;
}

.journal-metrics a {
  white-space:nowrap;
}

.metric-year {
  color:var(--muted);
}

.doi {
  font-size:11px;
  margin-top:5px;
  overflow-wrap:anywhere;
}

.paper-links {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:10px;
}

.paper-links a {
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid #dce5e9;
  border-radius:3px;
  padding:3px 9px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.025em;
}

.paper-links .icon {
  width:12px;
  height:12px;
}

.paper-links a:hover {
  background:#edf6f8;
  text-decoration:none;
}

.selected-awards {
  list-style:none;
  padding:0;
  display:grid;
  gap:10px;
}

.selected-awards li {
  position:relative;
  padding-left:16px;
  font-size:14px;
  line-height:1.75;
}

.selected-awards li::before {
  content:'';
  position:absolute;
  left:0;
  top:11px;
  width:4px;
  height:4px;
  background:#91a6af;
  border-radius:50%;
}

.selected-award-detail {
  font-size:13px;
  color:var(--muted);
}

.selected-award-source {
  display:inline-block;
  font-size:11px;
  margin-left:7px;
  white-space:nowrap;
  text-decoration:underline;
  text-decoration-color:#bbd3d9;
}

.patent-status {
  font-family:var(--mono);
  font-size:10px;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.patent h3 {
  font-size:16px;
  line-height:1.6;
  font-weight:500;
  margin-bottom:7px;
}

.patent h3 a {
  color:var(--ink);
}

.patent-meta {
  font-size:12px;
  color:var(--muted);
}

.patent-meta>span {
  padding:0 5px;
}

.patent+.patent {
  margin-top:24px;
}

#contact {
  border-top:1px solid var(--line);
  padding-top:34px;
}

#contact p {
  color:#465461;
  font-size:15px;
}

.contact-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:500;
  margin-top:14px;
}

.contact-link .icon {
  width:15px;
  height:15px;
}

.visitor-section {
  border-top:1px solid var(--line);
  max-width:1040px;
  margin:0 auto 34px;
  padding-top:30px;
  text-align:center;
}

.visitor-section h2 {
  display:block;
  font-size:15px;
  font-weight:500;
  letter-spacing:-.2px;
  margin-bottom:18px;
  color:#5b6a74;
}

.visitor-map {
  width:270px;
  max-width:100%;
  min-height:165px;
  margin:0 auto 10px;
}

.visitor-map img,.visitor-map canvas,.visitor-map iframe {
  max-width:100%;
}

.visitor-map img {
  height:auto;
  display:block;
}

.visitor-note {
  font-size:11px;
  color:var(--muted);
  margin:0 0 7px;
}

.visitor-links {
  font-size:10px;
  color:var(--muted);
}

.visitor-links a {
  color:inherit;
}

footer {
  border-top:1px solid var(--line);
  font-size:11px;
  color:#74828c;
}

footer>div {
  max-width:1040px;
  margin:auto;
  padding:20px 0;
  display:flex;
  justify-content:space-between;
  gap:15px;
}

footer a {
  color:inherit;
}

.back-to-top {
  display:flex;
  align-items:center;
  gap:9px;
}

@media(min-width:1800px) {
  .hero-picture img,.hero-digital {
    object-position:center 44%;
  }
}

@media(max-width:1200px) {
  .header-inner,.hero-inner {
    margin-left:40px;
    margin-right:40px;
  }
  .main-content,.visitor-section,footer>div {
    margin-left:60px;
    margin-right:60px;
  }
}

@media(max-width:900px) {
  .header-inner {
    gap:24px;
  }
  nav {
    gap:20px;
  }
  .hero-inner {
    min-height:450px;
  }
  .hero-shade {
    background:linear-gradient(90deg,#060e19e8,#060e19b3 45%,#060e1940);
  }
  .hero-copy {
    width:550px;
  }
  .hero-caption {
    font-size:8px;
  }
  .main-content,.visitor-section,footer>div {
    margin-left:32px;
    margin-right:32px;
  }
  .publication {
    grid-template-columns:190px minmax(0,1fr);
    gap:22px;
  }
  .preview-link {
    height:160px;
  }
  .research-list {
    gap:26px;
  }
  .research-list li+li::before {
    left:-13px;
  }
  .journal-metrics {
    display:flex;
    margin:3px 0 0;
  }
}

@media(max-width:680px) {
  :root {
    scroll-padding-top:82px;
  }
  .header-inner {
    margin:0 20px;
    min-height:58px;
    gap:22px;
  }
  .site-name {
    font-size:15px;
    flex:none;
  }
  nav {
    gap:20px;
    min-width:0;
  }
  nav a {
    padding:19px 0 17px;
    font-size:11px;
  }
  nav a::after {
    bottom:10px;
  }
  .hero-inner {
    margin:0 24px;
    min-height:550px;
    padding:160px 0 45px;
    align-items:flex-end;
  }
  .hero-art {
    bottom:auto;
    height:100%;
  }
  .hero-picture,.hero-digital {
    height:300px;
    object-position:center top;
  }
  .hero-picture img {
    object-position:center top;
  }
  .hero-shade {
    background:linear-gradient(0deg,#060e19 18%,#060e19ed 45%,#060e1950 82%,#060e1910);
  }
  .hero-copy {
    width:100%;
  }
  .hero-eyebrow {
    font-size:9px;
    margin-bottom:20px;
    letter-spacing:.06em;
  }
  .hero-eyebrow span {
    padding:0 4px;
  }
  .hero-identity {
    gap:16px;
  }
  .avatar-toggle {
    width:76px;
    height:76px;
  }
  h1 {
    font-size:33px;
    letter-spacing:-1.1px;
  }
  h1 span {
    display:block;
    font-size:13px;
    margin:7px 0 0;
    letter-spacing:2px;
  }
  .hero-role {
    font-size:12px;
    margin-top:10px;
  }
  .hero-role>span {
    padding:0 2px;
  }
  .hero-location {
    font-size:11px;
  }
  .hero-hint {
    margin-top:10px;
    font-size:9px;
  }
  .hero-statement {
    font-size:27px;
    margin-top:20px;
    margin-bottom:16px;
    max-width:320px;
  }
  .profile-links {
    gap:19px;
  }
  .profile-links a {
    font-size:11px;
    gap:6px;
  }
  .profile-links .icon {
    width:15px;
    height:15px;
  }
  .hero-caption {
    bottom:16px;
    right:0;
    font-size:7px;
    gap:6px;
  }
  .hero-caption .caption-rule {
    width:13px;
  }
  .hero-scan {
    height:300px;
  }
  .main-content {
    margin:34px 24px 40px;
  }
  .main-content>section+section {
    margin-top:36px;
  }
  h2 {
    font-size:22px;
    gap:9px;
    margin-bottom:20px;
  }
  .section-index {
    font-size:9px;
    padding:3px 4px;
  }
  .bio {
    font-size:16px;
    line-height:1.8;
  }
  .research-list {
    grid-template-columns:1fr;
    gap:0;
  }
  .research-list li {
    padding:16px 0;
  }
  .research-list li+li {
    border-top:1px solid var(--line);
  }
  .research-list li+li::before {
    display:none;
  }
  .research-list h3 {
    margin-bottom:4px;
  }
  .publication {
    grid-template-columns:1fr;
    gap:16px;
  }
  .preview-link {
    height:185px;
    padding:13px;
  }
  .publication h4 {
    font-size:15px;
  }
  .authors {
    font-size:12px;
  }
  .publication-group-title {
    font-size:9px;
  }
  .selected-awards li {
    font-size:13px;
  }
  .selected-award-detail {
    font-size:12px;
  }
  .patent h3 {
    font-size:15px;
  }
  #contact p {
    font-size:14px;
  }
  .visitor-section {
    margin:0 24px 28px;
  }
  footer>div {
    margin:0 24px;
    font-size:10px;
  }
}

@media(max-width:360px) {
  .header-inner {
    margin:0 16px;
    gap:18px;
  }
  .site-name {
    font-size:14px;
  }
  .hero-inner {
    margin:0 20px;
    padding-top:150px;
  }
  .hero-identity {
    gap:12px;
  }
  .avatar-toggle {
    width:62px;
    height:62px;
  }
  h1 {
    font-size:29px;
  }
  .hero-role {
    font-size:11px;
  }
  .hero-eyebrow {
    font-size:8px;
  }
  .profile-links {
    gap:14px;
  }
  .main-content {
    margin-left:20px;
    margin-right:20px;
  }
  h2 {
    font-size:20px;
  }
  .hero-statement {
    font-size:26px;
  }
  .selected-award-source {
    margin-left:0;
  }
  .hero-caption {
    font-size:6px;
  }
}

@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .avatar-toggle:not(:disabled):hover,.avatar-toggle:focus-visible,.hero.digital-active .avatar-toggle {
    transform:none;
  }
}