:root{
  color-scheme: dark;
  /* fixed tone anchors used for the soft band-to-band blends */
  --charcoal:#201c17;
  --cream:#f7f1e6;
  /* base surface = warm charcoal (not pitch black); cream bands override via .surface-light */
  --paper:#201c17;
  --ink:#f1ebdf;
  --grey:#b3a994;
  --rule:#37302a;
  --well:#29231c;
  --land:#383025;
  --teal:#58cdbf;
  --magenta:#ff8cc6;
  --gold:#e4b86a;
  --accent:var(--teal);
  --serif:"Newsreader", Georgia, serif;
  --sans:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  /* monospace retired across the site to warm the tone */
  --mono:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --hand:"Caveat", "Segoe Script", cursive;
  --maxw:1120px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
/* warm cream bands — redefining the tokens makes everything inside adapt automatically */
.surface-light{
  color-scheme: light;
  --paper:var(--cream);
  --ink:#241d16;
  --grey:#6f6657;
  --rule:#e6ddcc;
  --well:#efe7d8;
  --land:#e7decd;
  --teal:#0a7a71;
  --magenta:#b2126f;
  --gold:#a8771a;
}
/* alternating charcoal / cream bands with a soft blend at each seam (Sena-style) */
.hero, section, footer{ background:var(--paper); color:var(--ink) }
.surface-light, .surface-dark{ position:relative }
.surface-light::before, .surface-dark::before{ content:""; position:absolute; inset:0 0 auto 0;
  height:150px; z-index:0; pointer-events:none }
.surface-light::before{ background:linear-gradient(to bottom, var(--charcoal), transparent); opacity:.8 }
.surface-dark::before{ background:linear-gradient(to bottom, var(--cream), transparent); opacity:.75 }
.surface-light > *, .surface-dark > *{ position:relative; z-index:1 }
.theme{ display:none }

*,*::before,*::after{ box-sizing:inherit }
html{ scroll-behavior:smooth; scroll-padding-top:calc(72px + env(safe-area-inset-top, 0px)); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px);
  background:var(--paper); z-index:60;
}
a{ color:inherit; text-decoration:none }
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-0.01em; margin:0 }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px }
.ext{ font-size:.72em; opacity:.55; vertical-align:super; margin-left:.18em }
.lnk{ border-bottom:1px solid transparent; transition:border-color .15s }
.lnk:hover{ border-color:var(--accent) }

/* header */
header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);
}
.bar{ display:flex; align-items:center; gap:18px; height:64px }
.sig{ font-family:var(--serif); font-size:19px; white-space:nowrap }
nav{ display:flex; gap:18px; margin-left:auto; font-size:14px; color:var(--grey) }
nav a:hover{ color:var(--ink) }
.theme{ border:1px solid var(--rule); background:none; color:var(--ink); border-radius:999px;
  width:34px; height:34px; cursor:pointer; font-size:14px; line-height:1 }
@media (max-width:860px){ nav{ display:none } }

/* hero */
.hero{ position:relative; padding:clamp(120px, 22vh, 230px) 0 26px; overflow:hidden;
  border-bottom:1px solid var(--rule) }
#cells{ position:absolute; inset:0; width:100%; height:100%; z-index:0 }
.hero .wrap{ z-index:1 }
.cellnav{ height:168px; position:relative; pointer-events:none }
.cellnav p{ margin:0; font-family:var(--hand); font-size:20px; color:var(--grey);
  position:absolute; top:0; left:0 }
.hero .wrap{ position:relative }
.hero h1{ font-size:clamp(40px,7vw,76px); line-height:1.02; max-width:14ch }
.tag{ margin-top:24px; font-family:var(--serif); font-weight:300; font-size:clamp(19px,2.3vw,25px);
  max-width:40ch; color:var(--ink); line-height:1.4 }
.hero .meta{ margin-top:34px; font-family:var(--mono); font-size:12.5px; color:var(--grey) }
.hero .intro{ padding-bottom:6px; max-width:40rem }
/* hero silhouette: a faint see-through figure with the cell/neuron matrix shining through */
.hero-figure{ position:absolute; right:4%; bottom:0; height:94%; max-width:42%; aspect-ratio:760/1268;
  pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(to bottom, #000 76%, transparent 98%);
          mask-image:linear-gradient(to bottom, #000 76%, transparent 98%) }
.hero-figure img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:bottom center; filter:brightness(0) invert(1); opacity:.17 }
.hero-figure .stetho{ position:absolute; inset:0; width:100%; height:100%; opacity:.5 }
@media (max-width:760px){ .hero-figure{ right:-8%; height:82%; max-width:58% } }
@media (prefers-reduced-motion: reduce){ .hero-figure img{ opacity:.14 } }

/* career chart */
.glance{ margin-top:46px; border-top:1px solid var(--rule); padding-top:26px }
.glance h3{ font-size:19px; margin-bottom:4px }
.glance .hint{ margin:0 0 16px; font-size:13.5px; color:var(--grey) }
svg.chart{ width:100%; height:auto; display:block; overflow:visible }
.chart .yr{ font-family:var(--mono); font-size:9px; fill:var(--grey) }
.chart .tick{ stroke:var(--rule); stroke-width:.5 }
.chart .lab{ font-size:9.5px; fill:var(--ink) }
.chart g.bar{ cursor:pointer }
.chart g.bar rect{ transition:opacity .15s }
.chart g.bar:hover rect, .chart g.bar:focus rect{ opacity:1 }
.chart g.bar rect{ opacity:.78 }
.chart .k-research{ fill:var(--teal) }
.chart .k-clinical{ fill:var(--gold) }
.chart .k-education{ fill:var(--grey) }
.chart .k-scholarships{ fill:var(--magenta) }

/* photographs */
.shots{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:10px; margin-top:48px }
@media (max-width:760px){ .shots{ grid-template-columns:1fr } }
.shots button{ padding:0; border:0; background:none; cursor:zoom-in; display:block; position:relative; overflow:hidden }
.shots img{ width:100%; height:260px; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.03); transition:filter .7s ease, transform 1.2s cubic-bezier(.2,.7,.2,1) }
.shots button:hover img, .shots button:focus-visible img{ filter:grayscale(0); transform:scale(1.07) }
#lightbox{ position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; padding:24px }
#lightbox img{ max-width:min(1100px,94vw); max-height:80vh; object-fit:contain }
#lightbox p{ color:#e8e8e8; font-size:13.5px; margin:0 }
#lightbox .x{ position:absolute; top:16px; right:20px; background:none; border:0; color:#fff;
  font-size:26px; cursor:pointer; line-height:1 }

/* sections */
section{ padding:72px 0; border-bottom:1px solid var(--rule) }
.sechead{ display:flex; align-items:baseline; gap:16px; margin-bottom:32px; flex-wrap:wrap }
.sechead h2{ font-size:clamp(26px,3.4vw,36px) }
.sechead p{ margin:0; color:var(--grey); font-size:15px; max-width:52ch }
.sechead-photo{ margin-left:auto; align-self:flex-start; width:clamp(120px,15vw,172px);
  aspect-ratio:3/5; object-fit:cover; object-position:center top;
  filter:grayscale(1) contrast(1.03); border:1px solid var(--rule) }
@media (max-width:640px){ .sechead-photo{ display:none } }
/* timeline */
.tabs{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:28px }
.tabs button{
  font:inherit; font-size:14px; cursor:pointer; background:none; color:var(--grey);
  border:0; border-bottom:2px solid transparent; padding:6px 2px; margin-right:18px;
}
.tabs button[aria-selected="true"]{ color:var(--ink); border-color:var(--accent) }
.rail{ position:relative; display:flex; gap:0; overflow-x:auto; padding-bottom:10px; scrollbar-width:thin }
.rail::before{ content:""; position:absolute; left:0; right:0; top:7px; height:1px; background:var(--rule) }
.stop{
  position:relative; flex:0 0 190px; padding:26px 18px 0 0; text-align:left;
  background:none; border:0; font:inherit; cursor:pointer; color:var(--grey);
}
.stop::before{
  content:""; position:absolute; left:0; top:3px; width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:1px solid var(--grey); transition:.15s;
}
.stop:hover::before{ border-color:var(--accent) }
.stop.hasflag::before{ opacity:0 }
.stop .fg{ position:absolute; left:-4px; top:-5px; font-size:18px; line-height:1;
  filter:grayscale(.45); transition:.15s }
.stop:hover .fg, .stop[aria-pressed="true"] .fg{ filter:none; transform:scale(1.14) }
.stop[aria-pressed="true"]::before{ background:var(--accent); border-color:var(--accent) }
.stop[aria-pressed="true"]{ color:var(--ink) }
.stop .yr{ font-family:var(--mono); font-size:12px; display:block; margin-bottom:4px }
.stop .rl{ font-size:14.5px; line-height:1.35; display:block }
.detail{ margin-top:26px; background:var(--well); padding:26px; border-left:2px solid var(--accent) }
.detail h3{ font-size:23px }
.detail .org{ margin:8px 0 0; color:var(--grey); font-size:15px }
.detail .org + .org{ margin-top:4px }
.detail .note{ margin:14px 0 0; max-width:56ch }

@media (max-width:640px){
  .rail{ flex-direction:column; overflow:visible }
  .rail::before{ left:4px; right:auto; top:0; bottom:0; width:1px; height:auto }
  .stop{ flex:none; padding:0 0 22px 26px }
  .stop::before{ top:5px }
  .stop .fg{ left:-5px; top:-2px }
}

/* publications */
.pubs{ list-style:none; margin:0; padding:0 }
.pubs li{ padding:22px 0; border-top:1px solid var(--rule) }
.pubs li:last-child{ border-bottom:1px solid var(--rule) }
.pubs .t{ font-family:var(--serif); font-size:20px; line-height:1.3; display:block; max-width:62ch }
.pubs .a{ color:var(--grey); font-size:14px; margin-top:8px; display:block; max-width:70ch }
.jr{ font-family:var(--mono); font-size:11.5px; padding:3px 8px; border:1px solid currentColor; margin-right:10px }
.jr.c1{ color:var(--teal) } .jr.c2{ color:var(--magenta) } .jr.c3{ color:var(--gold) }
.orcid{ display:inline-block; margin-bottom:22px; font-size:14px; color:var(--grey) }

/* impact */
.impact{ display:grid; gap:2px; background:var(--rule) }
.card{ background:var(--paper); padding:28px }
.card h3{ font-size:21px }
.card .who{ color:var(--grey); font-size:14px; margin:6px 0 18px }
.stats{ display:flex; flex-wrap:wrap; gap:28px; margin-bottom:16px }
.stat b{ font-family:var(--serif); font-weight:400; font-size:34px; color:var(--accent); display:block; line-height:1 }
.stat span{ font-size:13px; color:var(--grey); display:block; margin-top:6px; max-width:18ch }
.card ul{ margin:0; padding-left:18px; color:var(--ink); font-size:15px }
.card li{ margin:6px 0 }

/* map: soft silhouette with travel pins */
.mapbox{ position:relative; border:1px solid var(--rule); background:var(--well); overflow:hidden }
svg.map{ width:100%; height:auto; display:block }
.country{ fill:var(--land); stroke:var(--paper); stroke-width:.4; vector-effect:non-scaling-stroke }
.pin{ cursor:pointer; outline:none }
.pin-dot{ fill:var(--teal); stroke:var(--paper); stroke-width:1.5; vector-effect:non-scaling-stroke;
  transition:r .14s ease }
.pin.lived .pin-dot{ fill:var(--gold) }
.pin.been .pin-dot{ fill:var(--teal) }
.pin.wish .pin-dot{ fill:var(--magenta); fill-opacity:.85 }
.pin:hover .pin-dot, .pin.on .pin-dot, .pin:focus-visible .pin-dot{ r:8 }
.micro{ fill:var(--teal); fill-opacity:.9; cursor:pointer }
.legend{ display:flex; gap:22px; margin-top:14px; font-size:13px; color:var(--grey); flex-wrap:wrap }
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px }
#tip{ margin-top:12px; font-size:15px; min-height:1.6em }
#tip b{ font-weight:500 }

/* interests as photo tiles: grayscale by default, blooming into colour on hover */
#interestGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; background:none; margin-top:40px }
@media (max-width:820px){ #interestGrid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ #interestGrid{ grid-template-columns:1fr } }
.icard{ position:relative; overflow:hidden; min-height:270px; display:flex; align-items:flex-end;
  padding:22px; border:1px solid var(--rule); background:var(--well); isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease }
.icard:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.20) }
.icard-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:grayscale(1) contrast(1.03); transform:scale(1.02);
  transition:filter .7s ease, transform 1.4s cubic-bezier(.2,.7,.2,1) }
.icard.hasphoto::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(12,9,6,.88), rgba(12,9,6,.32) 55%, rgba(12,9,6,.06)) }
.icard.hasphoto:hover .icard-img, .icard.hasphoto:focus-within .icard-img{
  filter:grayscale(0) contrast(1.06); transform:scale(1.1) }
.icard-body h3{ font-size:21px; margin:0 0 6px }
.icard-body p{ font-size:14.5px; color:var(--grey); margin:0; max-width:36ch }
.icard.hasphoto .icard-body h3{ color:#fff }
.icard.hasphoto .icard-body p{ color:rgba(255,255,255,.84) }


/* footer */
footer{ padding:64px 0 80px }
.contact{ display:flex; gap:22px; flex-wrap:wrap; font-size:15px }
.contact a{ border-bottom:1px solid var(--rule); padding-bottom:2px }
.contact a:hover{ border-color:var(--accent) }
.langs{ margin-top:38px; font-family:var(--mono); font-size:12.5px; color:var(--grey) }
.colophon{ margin-top:28px; font-size:12.5px; color:var(--grey); max-width:46ch }
.credit{ margin-top:16px; font-family:var(--hand); font-size:23px; color:var(--accent); line-height:1 }

[hidden]{ display:none !important }

/* soft scroll reveal */
.reveal{ opacity:0; transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform:none }

/* scroll-progress accent line */
.scrollprog{ position:fixed; top:0; left:0; right:0; height:3px; z-index:70;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .08s linear; pointer-events:none }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  .reveal{ opacity:1 !important; transform:none !important }
}

/* at a glance: the numbers, stated once, not animated */
#highlights{ border-bottom:1px solid var(--rule); padding:0 }
.hl{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.hlitem{ padding:34px 28px 32px; border-left:1px solid var(--rule) }
.hlitem:first-child{ border-left:0; padding-left:0 }
.hl .n{ font-family:var(--serif); font-size:clamp(34px,4.4vw,52px); line-height:1;
  color:var(--accent); font-weight:400 }
.hl .l{ margin-top:12px; font-size:14.5px; color:var(--ink); line-height:1.3 }
.hl .sub{ margin-top:5px; font-family:var(--mono); font-size:11.5px; color:var(--grey);
  line-height:1.4 }
@media (max-width:860px){
  .hl{ grid-template-columns:repeat(2,1fr) }
  .hlitem{ padding:26px 20px; border-top:1px solid var(--rule) }
  .hlitem:nth-child(odd){ border-left:0; padding-left:0 }
  .hlitem:nth-child(-n+2){ border-top:0 }
}
@media (max-width:460px){
  .hl{ grid-template-columns:1fr }
  .hlitem{ border-left:0; padding-left:0 }
  .hlitem:first-child{ border-top:0 }
}

/* ============================================================
   PRERENDERED CONTENT
   ============================================================
   prerender.js writes the page text into index.html so crawlers
   that do not execute JS can read it. app.js removes these
   static-only blocks as soon as it runs and renders the
   interactive versions instead.

   Hidden with clip rather than display:none — Google treats
   display:none text as lower confidence, and clip keeps the text
   in the accessibility tree for the no-JS case. */
.pr-only{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
/* With JS off the blocks are never removed, so show them properly. */
html.no-js .pr-only{
  position:static;
  width:auto; height:auto;
  overflow:visible;
  clip-path:none;
  white-space:normal;
}
html.no-js .pr-track{ margin:2rem 0; }
html.no-js .pr-track ul{ list-style:none; padding:0; }
html.no-js .pr-track li{ margin:0 0 1.25rem; }
html.no-js .pr-yr{ font-size:.85rem; opacity:.7; margin:0; }
html.no-js .pr-place{ opacity:.7; }
.pr-publink{ margin:0 0 20px; font-size:15px }
.pr-publink a{ color:var(--accent) }