@font-face{font-family:Hanken;src:url('/fonts/hanken-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Hanken;src:url('/fonts/hanken-600.woff2') format('woff2');font-weight:600;font-display:swap}

/* Scene poses are written per text unit every frame. Non-inheriting
   registration keeps each write from restyling the unit's descendants. */
@property --layer-x{syntax:'<length>';inherits:false;initial-value:0px}
@property --layer-y{syntax:'<length>';inherits:false;initial-value:0px}
@property --layer-z{syntax:'<length>';inherits:false;initial-value:0px}
@property --layer-tilt{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --layer-opacity{syntax:'<number>';inherits:false;initial-value:0}
@property --layer-mask{syntax:'<percentage>';inherits:false;initial-value:100%}

:root{
  color-scheme:dark;
  /* Motion: strong ease-out for entering and leaving, ease-in-out for on-screen
     morphs, and the existing sideways slide curve. app.js reads the times. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-slide:cubic-bezier(.16,1,.3,1);
  --press-time:160ms;
  --slide-time:440ms;
  --reveal-time:280ms;
  --ground:#071321;
  --ink:#edf4fb;
  --muted:#cad8e3;
  --quiet:#b6c8da;
  --blue:#acd5fa;
  --amber:#f0be82;
  --line:#69819880;
  --gutter:clamp(26px,7vw,110px);
  font-family:Hanken,sans-serif;
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  background:var(--ground);
  accent-color:var(--amber);
}
*{box-sizing:border-box}
body{margin:0;overflow-x:clip;color:var(--ink);background:var(--ground);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:#bcd7ed;color:#071321}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:6px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:disabled{cursor:default;opacity:.55}
a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible{outline:2px solid var(--amber);outline-offset:8px}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
p,h1,h2,h3{margin:0}
p+p{margin-top:20px}
h1,h2,h3{text-wrap:balance}
h1,h2{font-weight:600;letter-spacing:-.035em;line-height:1.04}
h3{font-size:20px;font-weight:600;line-height:1.3}
p,li{text-wrap:pretty}
img{display:block;max-width:100%}
[hidden]{display:none!important}
html{scrollbar-color:#526b80 var(--ground);scrollbar-width:thin;scrollbar-gutter:stable}
html::-webkit-scrollbar{width:8px}
html::-webkit-scrollbar-track{background:var(--ground)}
html::-webkit-scrollbar-thumb{background:#526b80;border-radius:4px}
.skip-link{position:fixed;z-index:100;top:12px;left:20px;padding:12px 20px;background:var(--ink);color:var(--ground);transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.js-control{display:none}
.js-enhanced .js-control{display:inline-flex}

/* One continuous film plane, including static and reduced-motion states. */
/* app.js writes the camera transform directly on this element. */
.film-scene{position:fixed;inset:0;height:100lvh;min-height:100%;z-index:0;overflow:hidden;pointer-events:none;transform:translate3d(0,0,0)}
.film-poster,.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.film-video{opacity:0;transition:opacity 400ms var(--ease-out)}
.film-scene.has-frame .film-video{opacity:1}
.film-wash{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#071321df 0%,#071321d6 30%,#071321c7 53%,#07132170 76%,#07132130 100%)}

.site-header{position:fixed;z-index:20;inset:0 0 auto;display:flex;align-items:center;gap:38px;padding:24px var(--gutter);background:linear-gradient(#071321f2 0%,#071321d9 50%,#07132100 100%)}
.wordmark{font-size:19px;font-weight:600;letter-spacing:-.025em;text-decoration:none;display:flex;align-items:center;gap:9px;white-space:nowrap;min-height:44px}
.wordmark-dot{width:5px;height:5px;border-radius:50%;background:var(--blue)}
.main-nav{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:14px}
.main-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted);position:relative;transition:color 150ms ease}
.main-nav a:after{content:"";position:absolute;bottom:5px;height:1px;left:0;right:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--ease-out)}
.main-nav a[aria-current]{color:var(--ink)}
.main-nav a[aria-current]:after{transform:scaleX(1)}
.reading-toggle{justify-self:start;font-size:12px;min-height:44px;color:var(--muted);padding:0;grid-column:1/-1;transition:color 150ms ease}
.menu-toggle{width:44px;height:44px;align-items:center;justify-content:center;display:none!important}
/* While the menu is open, the icon's outer lines cross into a close mark. */
.menu-line{transform-box:fill-box;transform-origin:center;transition:transform 200ms var(--ease-in-out),opacity 200ms var(--ease-in-out)}
.menu-toggle[aria-expanded="true"] .menu-line-top{transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-line-middle{opacity:0}
.menu-toggle[aria-expanded="true"] .menu-line-bottom{transform:translateY(-5px) rotate(-45deg)}
/* The phone menu grows out of its button and leaves the same way, a little faster. */
.mobile-menu{position:fixed;z-index:19;inset:80px 18px auto;display:grid;padding:20px 24px;background:#0b1c2c;border:1px solid var(--line);border-radius:12px;transform-origin:top right;transition-property:opacity,scale,translate,display;transition-duration:200ms;transition-timing-function:var(--ease-out);transition-behavior:allow-discrete}
.mobile-menu[hidden]{opacity:0;scale:.96;translate:0 -6px;pointer-events:none;transition-duration:150ms}
@starting-style{.mobile-menu{opacity:0;scale:.96;translate:0 -6px}}
.mobile-menu a{min-height:48px;display:flex;align-items:center;text-decoration:none;color:var(--muted);font-size:17px;transition:color 150ms ease}
.mobile-menu a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}

main{position:relative;z-index:2}
.hero{min-height:100svh;position:relative}
.hero-stage{min-height:100svh;position:relative;display:flex;align-items:center;padding:140px var(--gutter) 120px}
.hero-copy{max-width:700px;perspective:1400px}
.hero h1{font-size:clamp(64px,6.7vw,96px)}
.hero-role{font-size:clamp(17px,1.6vw,22px);margin-top:22px;color:var(--muted);letter-spacing:.005em}
.hero-lead{font-size:clamp(25px,2.3vw,34px);line-height:1.4;letter-spacing:-.015em;max-width:460px;margin-top:36px}
.scroll-cue{position:absolute;bottom:7svh;left:var(--gutter);right:var(--gutter);display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;font-size:13px;color:var(--muted)}
.scroll-cue a{display:inline-flex;align-items:center;gap:18px;min-height:44px;text-decoration:none;white-space:nowrap;transition:color 150ms ease,background-color 150ms ease,border-color 150ms ease}
.scroll-cue svg{height:27px;width:20px;color:var(--blue);transition:transform 250ms ease}
.scroll-cue .hero-contact{padding:0 16px;border:1px solid var(--muted);color:var(--ink)}

.chapter{--entry:18svh;position:relative;min-height:100svh;padding:var(--entry) var(--gutter) 20svh;scroll-margin-top:calc(40px - var(--entry))}
.chapter-stage{position:relative}
.chapter-copy{position:relative;width:min(600px,51vw)}
.chapter h2{font-size:clamp(44px,4.25vw,64px);margin-bottom:30px}
.chapter h2 span{color:var(--muted)}
.chapter .lead{font-size:clamp(21px,1.75vw,25px);line-height:1.48;letter-spacing:-.015em;color:var(--ink);margin-bottom:30px}
.chapter-copy>p:not(.lead){font-size:17px;line-height:1.7;color:var(--muted)}
.role-line{margin:32px 0 28px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.role-line h3{font-size:22px;margin-bottom:7px}
.role-line p{font-size:15px;line-height:1.5;color:var(--muted)}
.role-line span{display:block;color:var(--quiet);font-size:13px;margin-top:5px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.dates{font-variant-numeric:tabular-nums;color:var(--quiet)}
details{margin-top:30px;border-bottom:1px solid var(--line)}
details+details{margin-top:0}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;padding:20px 0;font-size:15px;line-height:1.45;color:var(--muted);min-height:60px;transform-origin:left center;transition:color 150ms ease}
summary::-webkit-details-marker{display:none}
.plus{display:block;width:15px;height:15px;flex-shrink:0;position:relative;color:var(--quiet)}
.plus:before,.plus:after{content:"";position:absolute;background:currentColor;left:0;top:7px;width:15px;height:1px;transition:transform 250ms var(--ease-in-out)}
.plus:after{transform:rotate(90deg)}
details[open] .plus:after{transform:rotate(0)}
.detail-content{padding:0 0 24px;color:var(--muted);font-size:16px;line-height:1.7}
.detail-content ul{margin:0;padding-left:20px}
.detail-content li+li{margin-top:13px}
.detail-content li::marker{color:var(--blue)}
.patent-list p{display:flex;justify-content:space-between;gap:20px;font-size:15px;font-variant-numeric:tabular-nums}
.patent-list p+p{margin-top:10px}
.patent-list span{color:var(--quiet)}
.education-list{margin:36px 0 20px}
.education-list article{padding:18px 0;border-bottom:1px solid var(--line)}
.education-list h3{font-size:18px;margin-bottom:7px}
.education-list p{font-size:14px;color:var(--muted);display:flex;justify-content:space-between;gap:14px}
.education-list span{font-size:12px;white-space:nowrap;color:var(--quiet);font-variant-numeric:tabular-nums}
.career-list article+article{margin-top:26px}
.career-list h3{font-size:17px;color:var(--ink);margin-bottom:7px}
.career-list .dates{font-size:13px;margin-bottom:10px}
.career-list p+p{margin-top:10px}
.publications{font-size:14px}
.publications p+p{margin-top:14px}
.publications cite{font-style:normal}

.contact-chapter{min-height:100svh;padding-bottom:16svh}
.contact-chapter .lead{max-width:470px}
.email-link{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:clamp(23px,2.7vw,39px);letter-spacing:-.025em;line-height:1.3;text-decoration:none;border-bottom:1px solid #9eb8cc;padding:34px 0 16px;margin-top:10px;transform-origin:left center;transition:color 150ms ease}
.email-link svg{width:30px;height:30px;transition:transform 250ms ease}
.contact-secondary{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:22px;font-size:14px;color:var(--muted)}
.contact-secondary>a{min-height:44px;display:flex;align-items:center;text-decoration:none;transition:color 150ms ease}
.copy-email{align-items:center;gap:8px;font-size:13px;padding:5px 0;min-height:44px;transition:color 150ms ease}
.copy-email svg{width:17px;height:17px}
/* Copying swaps label and icon in place: the old pair blurs out as the new pair settles. */
.copy-label,.copy-icons{display:inline-grid;align-items:center}
.copy-label{justify-items:end}
.copy-label>span,.copy-icons>svg{grid-area:1/1;transition:opacity 200ms var(--ease-out),scale 200ms var(--ease-out),filter 200ms var(--ease-out)}
.copy-done,.icon-check,.copy-email[data-copied] .copy-idle,.copy-email[data-copied] .icon-copy{opacity:0;scale:.9;filter:blur(2px)}
.copy-email[data-copied]{color:var(--blue)}
.copy-email[data-copied] .copy-done,.copy-email[data-copied] .icon-check{opacity:1;scale:1;filter:none}
.copy-status{font-size:13px!important;min-height:22px;margin-top:10px}
.site-footer{position:relative;z-index:3;padding:30px var(--gutter) 40px;display:grid;grid-template-columns:minmax(0,380px) auto;justify-content:start;gap:20px 35px;font-size:14px;line-height:1.6;color:var(--muted)}
.site-footer span{display:block;font-size:12px;color:var(--quiet);margin-top:5px}
.site-footer>a{font-size:12px;text-decoration:none;display:flex;align-items:center;gap:14px;min-height:44px;transition:color 150ms ease}
.site-footer svg{width:17px;height:17px;transition:translate 250ms ease}
.film-credit{grid-column:1/-1;font-size:12px;color:var(--quiet);margin:0}

@media(min-width:1700px){
  :root{--gutter:max(110px,calc((100vw - 1460px)/2))}
  .chapter-copy{width:620px}
}
@media(min-width:761px) and (max-height:740px){
  .hero-stage{padding-top:125px;padding-bottom:115px}
  .hero h1{font-size:clamp(60px,10svh,76px)}
  .hero-role{font-size:18px;margin-top:18px}
  .hero-lead{font-size:27px;margin-top:25px;max-width:400px}
  .chapter h2{font-size:clamp(44px,4.25vw,60px)}
  .chapter .lead{font-size:22px}
}
@media(max-width:1100px) and (min-width:761px){
  :root{--gutter:5vw}
  .site-header{gap:24px}
  .main-nav{gap:18px}
  .chapter-copy{width:56vw}
  .film-wash{background:linear-gradient(90deg,#071321e0 0%,#071321d6 45%,#071321a8 70%,#07132155 100%)}
}
@media(max-width:760px){
  :root{--gutter:26px;scroll-padding-top:80px}
  body{font-size:17px}
  .film-wash{background:linear-gradient(90deg,#071321c7 0%,#071321c2 100%)}
  .site-header{padding:16px var(--gutter);gap:12px}
  .wordmark{font-size:17px;gap:7px}
  .wordmark-dot{width:4px;height:4px}
  .main-nav{gap:0;margin-left:auto}
  .main-nav a{display:none;font-size:12px}
  .main-nav .nav-contact{display:flex}
  .main-nav a:after{bottom:8px}
  .js-enhanced .menu-toggle{display:flex!important;flex-shrink:0;width:44px}
  .menu-toggle svg{width:21px}
  .hero-stage{align-items:flex-start;min-height:100svh;padding:27svh var(--gutter) 140px}
  .hero-copy{max-width:100%}
  .hero h1{font-size:clamp(44px,12.2vw,64px)}
  .hero-role{font-size:15px;margin-top:20px;letter-spacing:0}
  .hero-lead{font-size:25px;max-width:310px;margin-top:32px;line-height:1.45}
  .scroll-cue{bottom:8svh;font-size:12px;gap:10px 12px}
  .scroll-cue a{gap:8px}
  .scroll-cue svg{height:24px}
  .chapter{--entry:14svh;min-height:100svh;padding-bottom:17svh}
  .chapter-copy{width:100%;max-width:550px}
  .chapter h2{font-size:clamp(38px,10.6vw,54px);line-height:1.07;margin-bottom:24px}
  .chapter .lead{font-size:21px;line-height:1.5;margin-bottom:24px}
  .chapter-copy>p:not(.lead){font-size:16px;line-height:1.7}
  .role-line{margin:28px 0 24px}
  .role-line h3{font-size:21px}
  .role-line p{font-size:14px}
  .role-line span{font-size:12px}
  .detail-content{font-size:15px;line-height:1.7}
  summary{font-size:14px}
  .education-list{margin-top:28px}
  .education-list h3{font-size:17px}
  .education-list p{font-size:13px;display:block}
  .education-list span{display:block;font-size:12px;margin-top:5px}
  .education-list article{padding:16px 0}
  .email-link{font-size:clamp(22px,6.4vw,36px);padding-top:25px;gap:10px}
  .email-link svg{width:23px;height:23px}
  .contact-secondary{font-size:13px;gap:15px;margin-top:16px}
  .copy-email{font-size:12px}
  .site-footer{padding:24px var(--gutter) 34px;grid-template-columns:1fr auto;gap:20px;align-items:end}
  .site-footer>p{font-size:13px}
  .site-footer span{font-size:12px;max-width:180px}
  .site-footer>a{font-size:12px;max-width:100px;gap:7px}
  .site-footer svg{width:15px}
  .site-footer .film-credit{font-size:12px}
  .publications{font-size:13px}
}
@media(max-width:370px){
  :root{--gutter:20px}
  .site-header{gap:8px}
  .wordmark{font-size:16px}
  .main-nav .nav-contact{font-size:11px}
  .chapter h2{font-size:37px}
  .contact-secondary{gap:12px;font-size:12px}
}
.effects-off .chapter-copy,.effects-off .hero-copy{transform:none;opacity:1}

/* Short text beats live in the viewport; the document only supplies a timeline. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.parallax-on{scroll-snap-type:y mandatory;scroll-padding-top:0}
.parallax-on.story-measuring{scroll-snap-type:none}
.parallax-on.nav-travel{scroll-snap-type:none}
.story-snap-points{display:none;position:absolute;top:0;left:0;width:1px;height:0;pointer-events:none}
.parallax-on .story-snap-points{display:block}
.parallax-on.story-measuring .story-snap-points{display:none}
.story-snap-point{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always}
.parallax-on .hero{height:var(--hero-span,94svh);min-height:0}
.parallax-on .site-header:after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:6px;height:1px;background:var(--blue);opacity:.4;transform:scaleX(var(--journey-progress,0));transform-origin:left}
.parallax-on .hero-stage{position:fixed;inset:0;height:100svh;min-height:0}
.parallax-on .chapter{height:var(--scene-height,100svh);min-height:0;padding:0;scroll-margin-top:0}
.parallax-on .chapter-stage{position:fixed;inset:0;height:100svh;perspective:1400px;perspective-origin:var(--gutter) 45%;pointer-events:none}
.parallax-on .chapter-copy{height:100%;margin-left:var(--gutter);transform-style:preserve-3d}
.parallax-on .story-flow{display:contents}
.parallax-on .story-unit{position:absolute;top:var(--unit-top,120px);left:0;width:100%;margin:0;pointer-events:none;list-style:none}
.parallax-on .story-unit,.parallax-on .hero-copy>h1,.parallax-on .hero-copy>p{
  transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),var(--layer-z,0px)) rotateX(var(--layer-tilt,0deg));
  transform-origin:left 45%;opacity:var(--layer-opacity,0);clip-path:inset(0 0 var(--layer-mask,100%) 0);backface-visibility:hidden;
}
.parallax-on .story-unit[data-near="true"]{will-change:transform,opacity}
.parallax-on .story-unit[data-current="true"]{pointer-events:auto}
.parallax-on .story-unit[data-current="true"]:focus-within{clip-path:none}
.parallax-on .story-unit[tabindex="-1"]:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
.parallax-on[data-motion="active"] .film-scene{will-change:transform}
.parallax-on .story-unit:is(p,li),.parallax-on .story-fragment{font-size:clamp(22px,1.85vw,27px);line-height:1.48;letter-spacing:-.015em;color:var(--ink)}
.parallax-on .story-unit.lead{font-size:clamp(23px,2vw,29px);line-height:1.45}
.parallax-on .story-unit.role-line{padding-bottom:20px}
.parallax-on summary.story-unit{border-bottom:1px solid var(--line)}
.parallax-on .education-list article.story-unit{padding:0 0 18px}
.parallax-on .education-list .story-unit h3{font-size:22px}
.parallax-on .education-list .story-unit p{font-size:16px}
.parallax-on .career-list article.story-unit h3{font-size:22px}
.parallax-on .career-list article.story-unit p:not(.dates){font-size:21px;line-height:1.5}
.parallax-on .career-list .story-unit .dates,.parallax-on .story-unit.dates{font-size:14px;line-height:1.5}
.parallax-on .patent-list p.story-unit{display:flex;justify-content:space-between;font-size:23px}
.parallax-on .publications p.story-unit{font-size:21px;line-height:1.55}
.parallax-on .story-unit.email-link{font-size:clamp(23px,2.7vw,39px)}
.parallax-on .contact-actions .contact-secondary{margin-top:0;font-size:13px}
.parallax-on .contact-actions .copy-status{min-height:42px;line-height:1.45;margin-top:8px}
.parallax-on.story-measuring .story-unit{transform:none;clip-path:none;opacity:0}
.story-controls{position:fixed;z-index:10;left:var(--gutter);right:var(--gutter);bottom:max(25px,env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:20px;pointer-events:none}
.story-controls.is-intro,.effects-off .story-controls{display:none!important}
.parallax-on[data-ending="true"] .story-controls{display:none!important}
.nav-travel .story-unit,.nav-travel .hero-copy>*{opacity:0!important;pointer-events:none!important}
.nav-travel .story-controls,.nav-travel .site-footer{visibility:hidden}
.nav-arrival .story-unit[data-current="true"],.nav-arrival .hero-copy>*{animation:scene-arrival var(--reveal-time) var(--ease-out) both}
@keyframes scene-arrival{from{opacity:0;clip-path:inset(0 0 22% 0)}to{opacity:var(--layer-opacity,1);clip-path:inset(0 0 var(--layer-mask,0%) 0)}}
.story-next,.story-overview{display:flex;align-items:center;gap:13px;min-height:44px;color:var(--muted);font-size:13px;text-decoration:none;padding:0;pointer-events:auto;transition:color 150ms ease}
.story-next svg{width:19px;height:23px;color:var(--blue);transition:translate 250ms ease}
.scroll-cue:has(a:focus-visible){opacity:1!important}
.effects-off .story-fragment{font:inherit!important;letter-spacing:inherit!important;color:inherit!important}
@media(max-width:760px){
  .parallax-on .chapter-copy{width:calc(100% - var(--gutter)*2)}
  .parallax-on .story-unit:is(p,li),.parallax-on .story-fragment{font-size:21px;line-height:1.5}
  .parallax-on .story-unit.lead{font-size:22px;line-height:1.5}
  .parallax-on .education-list .story-unit h3,.parallax-on .career-list article.story-unit h3{font-size:20px}
  .parallax-on .education-list .story-unit p{font-size:15px}
  .parallax-on .career-list article.story-unit p:not(.dates){font-size:19px;line-height:1.5}
  .parallax-on .publications p.story-unit{font-size:18px}
  .parallax-on .patent-list p.story-unit{font-size:22px}
  .parallax-on .story-unit.email-link{font-size:clamp(22px,6.4vw,36px)}
  .story-next,.story-overview{font-size:12px}
}
@media(max-height:540px){
  .parallax-on .chapter h2{font-size:34px}
  .parallax-on .story-unit:is(p,li),.parallax-on .story-unit.lead{font-size:19px;line-height:1.45}
  .parallax-on .site-header{padding-top:10px;padding-bottom:10px}
  .story-controls{bottom:max(10px,env(safe-area-inset-bottom))}
}
/* Vertical overviews and their horizontal evidence share the same film stage. */
.story-breadcrumb{position:fixed;z-index:18;top:var(--breadcrumb-top,92px);left:var(--gutter);right:var(--gutter);min-height:44px;align-items:center;color:var(--muted);font-size:12px;line-height:1.35}
.story-breadcrumb ol{display:flex;align-items:center;flex-wrap:wrap;gap:0 9px;list-style:none;margin:0;padding:0}
.story-breadcrumb li{display:flex;align-items:center;gap:9px;min-height:32px}
.story-breadcrumb li+li:before{content:"/";color:var(--quiet)}
.story-breadcrumb a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;transition:color 150ms ease}
.story-breadcrumb [aria-current]{color:var(--ink)}
.effects-off .story-breadcrumb{display:none!important}
.parallax-on .chapter-copy{width:min(650px,55vw)}
.parallax-on .chapter h2{font-size:clamp(40px,4vw,60px)}
.parallax-on .story-unit:is(p,li),.parallax-on .story-fragment{font-size:clamp(20px,1.65vw,24px);line-height:1.48}
.parallax-on .story-unit.lead{font-size:clamp(21px,1.75vw,25px);line-height:1.48}
.parallax-on .story-unit.role-line{padding-bottom:14px}
.parallax-on .education-list article.story-unit{padding-bottom:14px}
.parallax-on summary .plus{width:22px;height:22px;color:var(--blue)}
.js-enhanced summary .plus:before,.js-enhanced summary .plus:after{display:none}
.parallax-on summary .plus svg{width:22px;height:22px}
.js-enhanced summary .plus svg{transition:translate 250ms ease,transform 250ms var(--ease-in-out)}
.effects-off summary .plus svg{width:18px;height:18px;transform:rotate(90deg)}
.effects-off details[open] summary .plus svg{transform:rotate(-90deg)}
.parallax-on .contact-chapter .email-link{padding-top:12px;padding-bottom:10px}
.site-footer .contact-note{grid-column:1/-1;max-width:600px;font-size:14px;margin:0}
.site-footer .contact-note+p{margin-top:0}
.parallax-on.axis-transition .story-unit{transition:transform var(--slide-time) var(--ease-slide),opacity var(--reveal-time) var(--ease-out),clip-path var(--reveal-time) var(--ease-out)}
.detail-open{overflow:hidden;overscroll-behavior:none;scroll-snap-type:none}
.detail-open body{touch-action:pan-y}
.detail-pager{display:flex;align-items:center;gap:6px;pointer-events:auto}
.detail-pager button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:var(--muted);transition:color 150ms ease}
.detail-pager button:disabled{opacity:.38}
.detail-pager svg{width:21px;height:21px;transition:translate 250ms ease}
.detail-position{min-width:35px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.story-overview{gap:8px}
.nav-travel .story-breadcrumb{visibility:hidden}
@media(max-width:760px){
  .story-breadcrumb{font-size:11px}
  .story-breadcrumb ol{gap:0 7px}
  .story-breadcrumb li{gap:7px}
  .parallax-on .chapter-copy{width:calc(100% - var(--gutter)*2)}
  .parallax-on .chapter h2{font-size:clamp(35px,9.8vw,46px)}
  .parallax-on .story-unit:is(p,li),.parallax-on .story-fragment{font-size:19px;line-height:1.48}
  .parallax-on .story-unit.lead{font-size:20px;line-height:1.48}
  .parallax-on .role-line h3{font-size:20px}
  .parallax-on .education-list .story-unit h3{font-size:18px}
  .parallax-on .education-list .story-unit p{font-size:14px}
  .parallax-on .patent-list p.story-unit{font-size:20px}
  .parallax-on .publications p.story-unit{font-size:18px}
  .parallax-on .career-list article.story-unit p:not(.dates){font-size:19px}
}
@media(max-height:540px){
  .parallax-on .chapter h2{font-size:32px}
  .parallax-on .story-unit:is(p,li),.parallax-on .story-unit.lead{font-size:18px;line-height:1.45}
  .parallax-on summary.story-unit{min-height:48px;padding:12px 0;font-size:13px}
  .story-breadcrumb{font-size:11px}
}
/* Employer and qualification headlines share a compact overview. */
.entry-copy{display:block;min-width:0}
.entry-title{display:block;color:var(--ink);font-size:22px;font-weight:600;line-height:1.25;transition:color 150ms ease}
.entry-role{display:block;margin-top:4px;color:var(--muted);font-size:15px;line-height:1.45}
.entry-dates{display:block;margin-top:4px;color:var(--quiet);font-size:13px;line-height:1.4;font-variant-numeric:tabular-nums}
.compact-entry .entry-title{font-size:20px}
.career-entry .entry-copy,.qualification-entry .entry-copy{flex:1}
.entry-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.entry-heading .entry-title{min-width:0}
.entry-heading .entry-dates{margin-top:0;flex-shrink:0;white-space:nowrap}
.parallax-on .overview-entry>summary.story-unit{padding:10px 0;min-height:44px}
.parallax-on .company-entry>summary.story-unit{padding:16px 0}
.parallax-on .qualification-entry>summary.story-unit{padding:6px 0}
.education-list .research-topic,.parallax-on .education-list p.research-topic{display:block;margin-top:16px;font-size:18px;line-height:1.5;color:var(--ink)}
.detail-content h2{font-size:28px;line-height:1.15;margin-bottom:20px}
.parallax-on .detail-content h2.story-unit{font-size:28px;line-height:1.15}
.story-breadcrumb li{min-width:0}
@media(max-width:760px){
  .entry-title{font-size:20px}
  .entry-role{font-size:14px}
  .entry-dates{font-size:12px}
  .compact-entry .entry-title{font-size:18px}
  .parallax-on .company-entry>summary.story-unit{padding:12px 0}
  .parallax-on .career-entry>summary.story-unit{padding:8px 0}
  .detail-content h2,.parallax-on .detail-content h2.story-unit{font-size:25px}
}
@media(max-height:540px){
  .parallax-on .company-entry>summary.story-unit{padding:10px 0}
}
/* First visit: the film develops and settles while the opening comes into focus
   from depth, one line after another. CSS starts it before any script runs, so
   nothing flashes. These properties stack with the scroll-driven transform and
   opacity, and app.js adds intro-done once the entrance has played. */
@keyframes intro-rise{from{translate:0 20px -160px;filter:opacity(0) blur(8px)}}
@keyframes intro-actions{from{translate:0 12px;filter:opacity(0)}}
@keyframes intro-film-fade{from{opacity:0}}
@keyframes intro-film-settle{from{scale:1.08}}
:root:not(.intro-done) .hero-copy>h1{animation:intro-rise 800ms var(--ease-out) 100ms both}
:root:not(.intro-done) .hero-role{animation:intro-rise 700ms var(--ease-out) 220ms both}
:root:not(.intro-done) .hero-lead{animation:intro-rise 700ms var(--ease-out) 320ms both}
:root:not(.intro-done) .hero-actions{animation:intro-actions 600ms var(--ease-out) 520ms both}
:root:not(.intro-done) .film-scene{animation:intro-film-fade 900ms var(--ease-out) both,intro-film-settle 1400ms var(--ease-out) both}

/* Hover styles need a mouse: a tap on a touch screen would leave them stuck on. */
@media(hover:hover) and (pointer:fine){
  .main-nav a:hover,.reading-toggle:hover,.mobile-menu a:hover,.scroll-cue a:hover,.story-next:hover,.story-overview:hover,.site-footer>a:hover{color:var(--ink)}
  summary:hover,.overview-entry>summary:hover .entry-title,.email-link:hover,.contact-secondary>a:hover,.copy-email:hover,.story-breadcrumb a:hover,.detail-pager button:hover:not(:disabled){color:var(--blue)}
  .scroll-cue .hero-contact:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}
  .scroll-cue a:hover svg{transform:translateY(4px)}
  .email-link:hover svg{transform:translate(3px,-3px)}
}
/* Arrows lean the way they lead: evidence to the right, the next scene down. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .parallax-on summary:hover .plus svg,.detail-next:hover:not(:disabled) svg{translate:3px 0}
  .detail-previous:hover:not(:disabled) svg{translate:-3px 0}
  .story-next:hover svg{translate:0 4px}
  .site-footer>a:hover svg{translate:0 -3px}
}
/* Press feedback. The individual scale property stacks with the scene pose
   transform; wide rows and the email line shrink less than compact buttons. */
@media(prefers-reduced-motion:no-preference){
  summary,.email-link{transition:color 150ms ease,scale var(--press-time) var(--ease-out)}
  .scroll-cue a,.story-next,.story-overview,.detail-pager button,.copy-email,.menu-toggle,.contact-secondary>a,.reading-toggle,.site-footer>a{transition:color 150ms ease,background-color 150ms ease,border-color 150ms ease,scale var(--press-time) var(--ease-out)}
  summary:active,.email-link:active{scale:.98}
  .scroll-cue a:active,.story-next:active,.story-overview:active,.detail-pager button:active:not(:disabled),.copy-email:active,.menu-toggle:active,.contact-secondary>a:active,.reading-toggle:active,.site-footer>a:active{scale:.97}
}
@media(prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:0s!important;transition-duration:0s!important;scroll-behavior:auto!important}
  .chapter-copy,.hero-copy{transform:none!important;opacity:1!important}
  /* A zero-length entrance would still wait out its delay hidden. */
  .hero-copy>*,.hero-actions,.film-scene{animation:none!important}
}
@media print{
  :root{color-scheme:light}
  .parallax-on{scroll-snap-type:none}
  .story-snap-points{display:none!important}
  body{background:white;color:#111;font-size:11pt}
  .film-scene,.film-wash,.site-header,.story-breadcrumb,.scroll-cue,.skip-link,.site-footer,.story-controls,.story-status,button{display:none!important}
  .hero,.parallax-on .hero{height:auto;min-height:0}
  .hero-stage,.parallax-on .hero-stage{position:static;min-height:0;height:auto;padding:0 0 30px}
  .hero-copy{opacity:1!important;transform:none!important}
  .hero h1{font-size:28pt}
  .hero-role,.hero-lead{color:#222}
  .hero-lead{font-size:14pt;margin-top:15px}
  .chapter,.parallax-on .chapter{height:auto;min-height:0;padding:20px 0}
  .chapter-stage,.parallax-on .chapter-stage{position:static;height:auto}
  .parallax-on .story-flow{display:revert}
  .parallax-on .story-unit{position:static;width:auto;pointer-events:auto;transform:none!important;opacity:1!important;clip-path:none!important}
  .story-fragment{font:inherit!important;letter-spacing:inherit!important;color:inherit!important}
  .depth-layer,.hero-copy>h1,.hero-copy>p{transform:none!important;opacity:1!important;clip-path:none!important}
  .chapter-copy{width:100%;height:auto!important;margin-left:0!important;max-width:none;transform:none!important}
  .chapter h2{font-size:22pt}
  .chapter h2 span,.chapter-copy>p,.chapter .lead,.dates,.role-line p,.education-list p,.education-list span,.detail-content{color:#222!important}
  .chapter-copy,.chapter-copy *{color:#222!important}
  .detail-content li::marker{color:#222}
  .chapter .lead{font-size:13pt}
  .chapter-copy>p:not(.lead){font-size:11pt}
  summary{color:#111}
  .email-link{font-size:16pt}
  .education-list{break-inside:avoid}
}