/* Navigation shares the typography, paper and accent colors of the page. */
html{scroll-padding-top:108px}
.site-header{position:sticky;top:0;z-index:40;height:82px;background:rgba(247,249,250,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:box-shadow .3s,background .3s}
.site-header.is-scrolled{background:rgba(247,249,250,.98);box-shadow:0 9px 20px -17px #29485d66}
.wordmark{font:500 23px/1.3 Arial,Helvetica,sans-serif;letter-spacing:-.6px;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;transition:color .25s}
.wordmark:hover{color:var(--ink)}
.site-header nav{gap:25px;color:#465e6b}
.site-header nav>a:not(.cv-link){position:relative;padding:12px 0}
.site-header nav>a:not(.cv-link):after{content:'';position:absolute;left:0;right:0;bottom:5px;height:2px;background:#71948f;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.site-header nav>a:not(.cv-link):hover:after,.site-header nav>a[aria-current=location]:after{transform:scaleX(1)}
.site-header nav>a[aria-current=location]{color:#315651}
.site-header .cv-link{padding:10px 18px;border-color:#bacfc9;background:#edf4f0;color:#315651;transition:background .25s,border-color .25s}
.site-header .cv-link:hover{background:var(--green);border-color:#a8c6bd}
.motion-toggle{border-color:#c5d6d9;background:transparent;color:#506b78;transition:background .25s}
.motion-toggle:hover{background:#e8f0f0}
.motion-toggle:disabled{cursor:default;opacity:.6}
.reading-progress{z-index:45}
.skip-link{z-index:60}
.project,.research-section,.teaching-section,.journey,.hero,.timeline-entry{scroll-margin-top:0}
.journey-aside{top:106px}
.product-view{top:106px}

/* One entrance sequence; ongoing movement is confined to the background. */
.hero h1.identity-title{animation:none}
.js .hero-name,.js .identity-title>span,.js .identity-title>em,.js .hero-intro,.js .identity-line,.js .hero-actions,.js .hero-composition{animation:hero-arrive .75s cubic-bezier(.2,.75,.25,1) both}
.js .hero-name{animation-delay:.04s}
.js .identity-title>span{animation-delay:.12s}
.js .identity-title>em{animation-delay:.22s}
.js .hero-intro{animation-delay:.32s}
.js .identity-line{animation-delay:.40s}
.js .hero-actions{animation-delay:.48s}
.js .hero-composition{animation-name:portrait-arrive;animation-duration:1s;animation-delay:.16s}
.hero:before{animation:hero-light 14s ease-in-out infinite alternate}
.orbit-drawing{transform-origin:50% 50%;animation:orbit-turn 75s linear infinite}
.hero-portrait,.hero-portrait:hover{transform:perspective(1000px) rotateZ(2deg) rotateX(var(--portrait-rx,0deg)) rotateY(var(--portrait-ry,0deg));transition:transform .45s ease,box-shadow .45s ease}
.hero-portrait:hover{box-shadow:0 23px 55px #36537224}
.hero-portrait.hero-lifestyle,.hero-portrait.hero-lifestyle:hover{transform:perspective(1000px) rotateX(var(--portrait-rx,0deg)) rotateY(var(--portrait-ry,0deg))}
.hero-actions a>span{display:inline-block;transition:transform .25s ease}
.hero-actions a:hover>span{transform:translate(2px,-2px)}
.hero-actions a[href^="#"]:hover>span{transform:translate(2px,2px)}
.paused .hero-name,.paused .identity-title>span,.paused .identity-title>em,.paused .hero-intro,.paused .identity-line,.paused .hero-actions,.paused .hero-composition{animation:none!important;opacity:1;transform:none}
.paused .hero-portrait{transform:rotate(2deg);transition:none}
.paused .hero-portrait.hero-lifestyle{transform:none}
.paused .hero-actions a>span{transition:none;transform:none}
@keyframes hero-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes portrait-arrive{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
@keyframes hero-light{from{opacity:.7;transform:translateX(-10px) scale(.98)}to{opacity:1;transform:translateX(10px) scale(1.025)}}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@media(max-width:1100px){.site-header nav{gap:18px}}
@media(max-width:760px){
  html{scroll-padding-top:90px}
  .site-header{height:70px}
  .wordmark{font-size:21px;letter-spacing:-.5px}
  .site-header nav{gap:12px}
  .site-header .cv-link{padding:8px 12px}
  .journey-aside{position:static}
  .product-view{position:static}
}
@media(max-width:350px){.site-header nav{gap:9px}.site-header .cv-link{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero-name,.js .identity-title>span,.js .identity-title>em,.js .hero-intro,.js .identity-line,.js .hero-actions,.js .hero-composition{animation:none;opacity:1;transform:none}
  .hero:before,.orbit-drawing{animation:none}
  .hero-portrait,.hero-portrait:hover{transform:rotate(2deg);transition:none}
  .hero-portrait.hero-lifestyle,.hero-portrait.hero-lifestyle:hover{transform:none}
  .site-header,.site-header *,.hero-actions a>span{transition:none}
  .hero-actions a:hover>span{transform:none}
}

/* The four identities are both the introduction and the chapter navigation. */
.site-header{gap:24px}
.wordmark{margin-right:auto;flex-shrink:0}
.header-tools{display:flex;align-items:center;gap:16px}
.linkedin-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;font-size:13px;color:#365b67;white-space:nowrap}
.linkedin-link:hover{color:#244e60;text-decoration:underline;text-underline-offset:5px}
.linkedin-symbol{display:none}
.hero h1.identity-title{margin-bottom:10px}
.js .identity-title>span,.js .identity-title>em{animation:none}
.identity-link{display:inline-block;position:relative;color:inherit;white-space:nowrap;text-decoration:none}
.identity-link:after{content:'';position:absolute;left:2px;right:3px;bottom:-3px;height:2px;background:currentColor;opacity:.6;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.identity-link:hover:after,.identity-link:focus-visible:after{transform:scaleX(1)}
.identity-link:focus-visible{outline-offset:7px;border-radius:2px}
.identity-hint{display:flex;align-items:center;gap:12px;min-height:42px;margin-bottom:14px;font:13px/1.6 Arial,Helvetica,sans-serif;color:#506b78;letter-spacing:0}
.identity-hint>span{color:#527780}
.identity-hint.is-specific{color:#315651}
.js .identity-link{animation:hero-arrive .65s cubic-bezier(.2,.75,.25,1) both}
.js .identity-link[href="#journey"]{animation-delay:.06s}
.js .identity-link[href="#teaching"]{animation-delay:.15s}
.js .identity-link[href="#experience"]{animation-delay:.24s}
.js .identity-link[href="#research"]{animation-delay:.33s}
.chapter-highlight h2,.chapter-highlight h2 em{animation:chapter-emphasis 1.3s ease-out}
@keyframes chapter-emphasis{0%,25%{color:#2e786d}}
.paused .identity-link{animation:none!important;opacity:1;transform:none}
.paused .identity-link:after{transition:none}
.paused .chapter-highlight h2,.paused .chapter-highlight h2 em{animation:none!important}
@media(max-width:1100px){.site-header{gap:18px}.header-tools{gap:12px}}
@media(max-width:760px){
  html{scroll-padding-top:132px}
  .site-header{display:grid;grid-template-columns:1fr auto;gap:0 16px;height:112px;padding-top:8px;padding-bottom:4px}
  .site-header .wordmark{grid-row:1;grid-column:1}
  .header-tools{grid-row:1;grid-column:2;gap:14px}
  .header-tools .linkedin-label{display:none}
  .header-tools .linkedin-symbol{display:block;font:bold 17px/1 Arial,sans-serif}
  .header-tools .linkedin-link{width:32px;height:32px;min-height:32px;border:1px solid #c5d6d9;border-radius:50%}
  .header-tools{gap:8px}
  .site-header nav{grid-row:2;grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;font-size:14px;width:100%}
  .site-header nav>a[href]{display:block;padding:10px 0;min-height:40px}
  .site-header nav>a:not(.cv-link):after{bottom:5px}
  .identity-hint{font-size:12px;min-height:40px;margin-bottom:12px;gap:8px}
}
@media(max-width:350px){.site-header nav{font-size:13px}}
@media(max-width:1000px){
  .header-tools .linkedin-label{display:none}
  .header-tools .linkedin-symbol{display:block;font:bold 17px/1 Arial,sans-serif}
  .header-tools .linkedin-link{width:32px;height:32px;min-height:32px;border:1px solid #c5d6d9;border-radius:50%}
  .site-header{gap:14px}
  .site-header nav{gap:14px}
  .wordmark{font-size:20px}
}
@media(max-width:760px){
  .site-header{grid-template-columns:minmax(0,1fr) auto;gap:0 10px}
  .site-header .wordmark{min-width:0;font-size:18px;line-height:1.2;justify-content:flex-start}
  .site-header nav{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .js .identity-link{animation:none;opacity:1;transform:none}
  .identity-link:after{transition:none}
  .chapter-highlight h2,.chapter-highlight h2 em{animation:none}
}