@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/dm-sans-400.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/dm-sans-500.ttf") format("truetype");
}
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/montserrat-400.ttf") format("truetype");
}
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/montserrat-500.ttf") format("truetype");
}

:root {
  --background: #111c29;
  --text: #edf2f9;
  --body-text: #bdcada;
  --muted: #9eafc5;
  --link: #c4dafa;
  --line: rgba(194, 215, 243, .16);
  --display: Montserrat, sans-serif;
  --body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/grain.svg");
  opacity: .035;
  pointer-events: none;
}
.atmosphere {
  position: absolute;
  inset: 0 0 auto;
  height: 1100px;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 13% 7%, #839bbf25, transparent 46%),
    radial-gradient(ellipse at 80% 3%, #4e729e50, transparent 47%),
    linear-gradient(180deg, #22354c 0%, #19283a 46%, var(--background) 100%);
}
::selection { background: #b4cff2; color: #142238; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid #c4dafa; outline-offset: 5px; border-radius: 2px; }
strong { font-weight: 500; color: #e1e9f5; }
.wrap { width: min(1060px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 16px; padding: 8px 16px; background: white; color: #16283e; z-index: 10; }
.skip-link:focus { top: 12px; }

/* A quiet header, followed by a personal profile and a reading column. */
.site-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.wordmark { font-size: 22px; font-weight: 500; letter-spacing: -.7px; }
.wordmark span { color: #a8c3e6; }
.site-header nav { display: flex; gap: 30px; font-size: 12px; color: var(--body-text); }
.site-header nav a { padding-block: 9px; transition: color .2s; }
.site-header nav a:hover { color: white; }
.page-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  padding-top: 54px;
  padding-bottom: 65px;
}

/* Keep the person and contact details visible beside the work. */
.profile { position: sticky; top: 32px; }
.portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 14px;
  border: 1px solid #d1e0f329;
  box-shadow: 0 12px 32px #060c1726;
}
.profile h1 { font-family: var(--display); font-size: 31px; font-weight: 400; letter-spacing: -1px; line-height: 1.3; margin-top: 25px; }
.profile-role { margin-top: 12px; font-size: 12px; color: #d5e0ed; }
.profile-affiliation { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.location { display: flex; align-items: center; gap: 7px; margin-top: 15px; font-size: 11px; color: var(--muted); }
.location svg, .email-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; flex-shrink: 0; }
.profile-contact { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.email-link { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: #d3e1f4; }
.email-link:hover { color: white; }
.social-links { display: flex; gap: 21px; margin-top: 15px; font-size: 11px; color: var(--muted); }
.social-links a { padding-block: 4px; transition: color .2s; }
.social-links a:hover { color: var(--text); }
.social-links span { color: #bcd0eb; margin-left: 3px; font-size: 10px; }

/* Research and experience read as entries, rather than promotional cards. */
main { min-width: 0; }
main section + section { margin-top: 40px; }
.section-title {
  display: flex;
  gap: 20px;
  align-items: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -.4px;
  line-height: 1.5;
  margin-bottom: 19px;
}
.section-title::after { content: ""; height: 1px; background: var(--line); flex: 1; }
main p { color: var(--body-text); font-size: 14px; }
.about .intro { font-size: 20px; line-height: 1.65; color: #e3ebf6; letter-spacing: -.2px; }
.about p + p { margin-top: 15px; }
main a { color: var(--link); text-decoration-line: underline; text-decoration-color: #a9c5e940; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
main a:hover { color: white; text-decoration-color: #cadcf5b3; }
.entry-meta { display: flex; gap: 13px; align-items: center; color: var(--muted); font-size: 10px; letter-spacing: .3px; }
.entry-meta > span { color: #cadaee; }
.entry-meta time::before { content: "·"; margin-right: 13px; color: #879fbe; }
.publication h3 { margin-top: 9px; font-size: 19px; line-height: 1.55; font-weight: 500; letter-spacing: -.1px; }
.publication h3 a { text-decoration: none; }
.external-arrow { font-size: .8em; color: #a5bddc; display: inline-block; margin-left: 3px; }
.publication .authors { margin-top: 9px; font-size: 11px; line-height: 1.7; color: var(--muted); }
.publication > p:last-child { margin-top: 11px; font-size: 13px; line-height: 1.8; }
.entry-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.entry-heading h3 { font-size: 15px; line-height: 1.6; font-weight: 500; color: #e3ebf6; }
.team { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 5px; }
.date, .entry-note { flex-shrink: 0; font-size: 10px; color: var(--muted); white-space: nowrap; }
.role { font-size: 12px; color: #cbd9eb; margin-top: 2px; }
.experience-entry > p:last-child { font-size: 13px; margin-top: 7px; line-height: 1.8; }
.experience-entry + .experience-entry { margin-top: 24px; }
.site-footer { display: flex; justify-content: space-between; gap: 18px; padding-block: 21px 26px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.site-footer a:hover { color: white; }
.site-footer a span { margin-left: 7px; }

@media (max-width: 1000px) {
  .wrap { width: calc(100% - 64px); }
  .page-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 45px; }
  .entry-heading { flex-wrap: wrap; gap: 2px 16px; }
  .desktop-break { display: none; }
}
@media (max-width: 700px) {
  .wrap { width: calc(100% - 44px); }
  .site-header { min-height: 76px; }
  .wordmark { font-size: 20px; }
  .site-header nav { gap: 20px; font-size: 11px; }
  .site-header nav a:first-child { display: none; }
  .page-layout { grid-template-columns: 1fr; gap: 38px; padding-top: 32px; padding-bottom: 43px; }
  .profile { position: static; }
  .profile-inner { display: grid; grid-template-columns: 118px minmax(0, 1fr); column-gap: 23px; align-items: center; }
  .portrait { aspect-ratio: 4 / 5; border-radius: 10px; }
  .profile h1 { margin-top: 0; font-size: 28px; letter-spacing: -.8px; }
  .profile-role { font-size: 10px; line-height: 1.6; margin-top: 9px; }
  .profile-affiliation { font-size: 11px; margin-top: 6px; }
  .location { font-size: 10px; gap: 5px; margin-top: 8px; }
  .location svg { width: 12px; height: 12px; }
  .profile-contact { grid-column: 1 / -1; margin-top: 21px; padding-top: 17px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 9px 20px; }
  .email-link { font-size: 12px; }
  .social-links { margin: 0; gap: 18px; }
  .about .intro { font-size: 18px; line-height: 1.65; }
  main p { font-size: 14px; }
  .section-title { font-size: 18px; gap: 18px; margin-bottom: 17px; }
  main section + section { margin-top: 33px; }
  .publication h3 { font-size: 18px; }
  .publication .authors { font-size: 11px; }
  .entry-heading { gap: 3px 12px; }
  .entry-heading h3 { font-size: 14px; }
  .date, .entry-note { font-size: 10px; }
  .experience-entry > p:last-child { font-size: 13px; }
  .site-footer { flex-wrap: wrap; gap: 5px 18px; font-size: 9px; }
}
@media (max-width: 370px) {
  .wrap { width: calc(100% - 36px); }
  .profile-inner { grid-template-columns: 100px minmax(0, 1fr); column-gap: 18px; }
  .profile h1 { font-size: 25px; }
  .profile-role { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}