:root{--bg:#f3f3f3;--ink:#5d5d5d;--head:#6b6055;--band:#f3f3f3;--menu:#efefef;--on:#c9c5c0;--w:980px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 "Open Sans","Segoe UI",Arial,sans-serif}
a{color:#3a322a;text-decoration:none;font-weight:600}a:hover{text-decoration:underline}
.banner{height:330px;background:#000 url(images/c1fe2f_d622cd6be80642b4afdd407f34ca7640.jpg) center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.banner h1{margin:0;color:#fff;font:300 clamp(34px,6vw,70px)/1.1 "Open Sans",Arial,sans-serif;text-align:center;padding:0 16px}
.menu{display:flex;justify-content:center;flex-wrap:wrap;background:var(--menu);border-bottom:1px solid #ddd}
.menu a{display:block;padding:11px 28px;text-decoration:none;font-weight:400;color:#333;font-family:Arial,Helvetica,sans-serif;font-size:16px}
.menu a:hover,.menu a.on{background:var(--on)}
.dd{position:relative}.ddm{display:none;position:absolute;left:0;top:100%;min-width:340px;background:var(--menu);box-shadow:0 4px 10px rgba(0,0,0,.15);z-index:5}
.dd:hover .ddm{display:block}.ddm a{padding:9px 16px;font-size:14px}
main{max-width:var(--w);margin:0 auto;padding:24px 20px 10px}
h2,h3,h4{font-family:Arial,Helvetica,sans-serif;color:var(--head);font-weight:600;margin:1.6em 0 .5em}
h2{font-size:30px}h3{font-size:24px}h4{font-size:19px}
main>h2:first-child{margin-top:.4em}
p{margin:.6em 0}.cap{font-size:13px;color:#777;margin:.2em 0}
.intro p{text-align:justify}.hero{display:block;width:100%;max-width:925px;margin:22px auto 0}
.band{margin:0 -20px;padding:8px 20px}.join{text-align:center}.join h2{margin-top:.7em}
.btn{display:inline-block;padding:11px 26px;border:1px solid #333;background:#f7f7f7;color:#222;text-decoration:none;font:600 15px Arial,sans-serif;letter-spacing:.04em;box-shadow:2px 3px 6px rgba(0,0,0,.35)}
.btn:hover{background:#eaeaea}
.news{list-style:none;margin:0;padding:0;border-top:2px solid #ccc}
.news li{display:flex;gap:28px;padding:14px 8px}.news li[hidden]{display:none}
.news .d{flex:0 0 130px;font:600 14px Arial,sans-serif;color:var(--head)}
.news a{color:inherit;font-weight:600}
.morebtn{text-align:center;margin:10px 0 18px}
.morebtn button{background:none;border:0;color:#6b6055;font:14px Arial,sans-serif;text-decoration:underline;cursor:pointer;padding:6px 10px}
.morebtn button:hover{color:#000}
.figs{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin:12px 0}
.figs img{max-width:100%;height:auto;max-height:230px}.figs a img{display:block}
.pubs{padding-left:1.4em}.pubs li{margin:.7em 0}
.card{display:flex;gap:22px;align-items:flex-start;margin:18px 0}.card .ph{width:150px;height:auto;flex:0 0 150px}.card h4{margin:0 0 .3em}.card p{margin:.2em 0}
.alumni{margin:.35em 0}.crumb{margin:0}
footer{max-width:var(--w);margin:24px auto 0;padding:0 20px 40px;text-align:left}
footer hr{border:0;border-top:1px solid #333;width:280px;margin:0 auto 20px}
.inst{display:flex;gap:10px;align-items:center;justify-content:center;font:14px/1.3 Arial,sans-serif;color:#111}.inst img{width:130px}.inst p{margin:0}
.funders{display:flex;gap:44px;justify-content:center;align-items:center;margin-top:26px;flex-wrap:wrap}.funders img{height:70px;width:auto}
@media (max-width:700px){.menu a{padding:9px 14px}.news li{flex-direction:column;gap:2px}.card{flex-direction:column}.banner{height:200px}h2{font-size:26px}}

.inst a,.funders a,.btn,.menu a,.morebtn button{font-weight:inherit}


/* Research: one block per project; pictures float right on half the width, justified text wraps beside and below them */
.proj{display:flow-root;margin:0 0 8px}.proj h3{margin:1.4em 0 .4em}
.proj .ptxt p{margin:0 0 .6em;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pfig{float:right;width:calc(50% - 15px);margin:.35em 0 12px 30px}
@media (max-width:760px){.pfig{float:none;width:100%;margin:0 0 12px}}
/* Picture rows (laid out by build.ps1): --h = row height, --ar = picture aspect ratio, both relative to the column width */
.pfig{container-type:inline-size;display:flex;flex-direction:column;gap:1.6cqw}
.frow{display:flex;justify-content:center;align-items:center;gap:1.6cqw}
.pfig .frow>*{flex:none;display:block;width:calc(var(--ar) * var(--h) * 100cqw);height:auto;margin:0}
.pfig .frow>a>img{display:block;width:100%;height:auto;margin:0}.pfig:empty{display:none}
/* Wix videos (autoplay, muted, loop) */
.frow video{display:block;aspect-ratio:var(--r,var(--ar));object-fit:contain}
.figs video{display:block;max-width:100%;height:auto;max-height:230px}
/* Picture captions */
.pfig .frow>figure>img,.pfig .frow>figure>video,.pfig .frow>figure>a>img{display:block;width:100%;height:auto}
.frow figcaption{margin-top:4px;font:13px/1.3 Arial,Helvetica,sans-serif;color:#666;text-align:center}
/* Journal, year - Read more */
.proj .ptxt p.pref{text-align:left;hyphens:manual;margin-top:.3em;font-size:14px;color:#777}
main>.proj:first-child h3{margin-top:.4em}
/* Publications: justified, only the journal in bold */
.pubs li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pubs a{font-weight:400}.pubs a b{font-weight:700}
/* Team: PI card with contact line and short CV */
.card.pi .ph{width:170px;flex-basis:170px}
.card .contact{margin:.1em 0 .8em}
.cv{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0}
.cv dt{font:600 14px/1.6 Arial,Helvetica,sans-serif;color:var(--head)}
.cv dd{margin:0}
/* Team: same photo size for everyone below the PI (cropped to fill, no stretching) */
.card:not(.pi) .ph{width:150px;height:200px;flex:0 0 150px;object-fit:cover;object-position:50% 30%}
.card .ph[src*="52df875f"]{object-position:68% 30%}   /* Bhargav: face is right of centre in the original */
/* No page titles: first element of a page starts close to the menu */
main>:first-child{margin-top:.4em}
/* Lab life: zig-zag timeline */
.tl{position:relative;margin:6px 0 30px}
.tl::before{content:"";position:absolute;top:0;bottom:0;left:9px;width:2px;background:#d3ccc4}
.ev{position:relative;margin:0 0 22px 34px;padding:12px 14px 14px;background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.ev::before{content:"";position:absolute;top:16px;left:-34px;width:20px;height:20px;border-radius:50%;background:var(--head);border:4px solid var(--bg)}
.ev .date{margin:0;font:600 12px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#9a8f83}
.ev h3{margin:.1em 0 .55em;font-size:18px;line-height:1.3}
.ev h3 a{color:inherit}
.ev .logos{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:0 0 10px}
.ev .logos img{display:block;height:44px;width:auto;max-width:100%}
.ev p{margin:.5em 0 0;font-size:14px}
.efig{container-type:inline-size;display:flex;flex-direction:column;gap:1.6cqw}
.efig .frow>*{flex:none;display:block;width:calc(var(--ar) * var(--h) * 100cqw);margin:0}
.efig .frow img{display:block;height:auto;aspect-ratio:var(--r,var(--ar));object-fit:cover;border-radius:2px}
.efig .frow>a>img{width:100%}
.tl.packed::before{left:50%;margin-left:-1px}
.tl.packed .ev{position:absolute;width:calc(50% - 34px);margin:0}
.tl.packed .ev.l{left:0}.tl.packed .ev.r{right:0}
.tl.packed .ev.l::before{left:auto;right:-44px}.tl.packed .ev.r::before{left:-44px}
.ev .side{display:flex;gap:18px;align-items:center}
.ev .side .efig{flex:0 0 45%}
.ev .side .logos{flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:14px;margin:0}
/* Timeline: a short line from the central line to each card instead of a dot */
.ev::before{top:22px;left:-24px;width:24px;height:2px;border:0;border-radius:0;background:#b9afa4}
.tl.packed .ev.l::before{left:auto;right:-34px;width:34px}
.tl.packed .ev.r::before{left:-34px;width:34px}
/* small dot where each connector meets the central line */
.ev::after{content:"";position:absolute;top:19px;left:-28px;width:8px;height:8px;border-radius:50%;background:#8a7f73}
.tl.packed .ev.l::after{left:auto;right:-38px}
.tl.packed .ev.r::after{left:-38px}
/* Footer: logo and school text are one link */
.inst a{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none}
.inst a:hover p{text-decoration:underline}
/* Banner: show the whole picture (it is 4.2:1); on very wide screens it sits on black, which matches its background */
.banner{width:100%;height:auto;aspect-ratio:2200/518;max-height:360px;background-size:contain}
@media (max-width:700px){.banner{aspect-ratio:auto;height:200px;background-size:cover}}
/* ---------- Phones (up to 700px wide) ---------- */
@media (max-width:700px){
  .pubs li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  /* home intro and news stay justified; hyphenation keeps the word gaps small */
  .intro p,.news li>span:last-child{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  /* Research text stays justified; hyphenation keeps the word gaps small */
  .proj .ptxt p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  .proj .ptxt p.pref{text-align:left}
  /* menu: two tidy rows of three */
  .menu{display:grid;grid-template-columns:repeat(3,1fr)}
  .menu a{padding:10px 4px;text-align:center;font-size:15px}
  /* banner title on one line */
  .banner{height:150px}
  .banner h1{font-size:28px}
  /* news: date above the text, no gap */
  .news li{padding:10px 4px}
  .news .d{flex:none}
  /* headings */
  h3{font-size:20px}
  .proj h3{font-size:19px;margin-top:1.3em}
  main{padding:16px 16px 10px}
  .band{margin:0 -16px;padding:8px 16px}
  /* team: students and postdocs keep a smaller photo beside the text */
  .card:not(.pi){flex-direction:row;gap:14px}
  .card:not(.pi) .ph{width:100px;height:133px;flex:0 0 100px}
  .card h4{font-size:17px}
  /* footer: smaller logos, funders side by side */
  .inst{font-size:12px}.inst img{width:92px}
  .funders{gap:14px;margin-top:18px}
  .funders img{height:40px}
}
/* Contact: the open position description is justified (short address lines are unaffected) */
.contact p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.contact ul.dash{margin:.3em 0 .8em;padding-left:1.4em}.contact ul.dash li{margin:.2em 0}
/* Team: justified text (short lines are unaffected) */
.card .txt p,.cv dd,.alumni{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:700px){.cv{grid-template-columns:1fr;gap:0}.cv dt{margin-top:.7em}.cv dt:first-child{margin-top:0}}
/* Team: alumni with a small bullet, wrapped lines indented under the text */
.alumni{position:relative;padding-left:1.1em}
.alumni::before{content:"";position:absolute;left:.2em;top:.72em;width:5px;height:5px;border-radius:50%;background:#9a8f83}
/* Publications: bullets instead of numbers (same small dot as the alumni list) */
.pubs{list-style:none;padding-left:0}
.pubs li{position:relative;padding-left:1.1em}
.pubs li::before{content:"";position:absolute;left:.2em;top:.72em;width:5px;height:5px;border-radius:50%;background:#9a8f83}
#earlier h3{margin-top:1em}
/* Wider layout (980 -> 1180px) with slightly larger text (15 -> 16px); pictures scale with the width */
:root{--w:1180px}
body{font-size:16px}
.intro{max-width:980px;margin:0 auto}   /* home intro + diagram keep a comfortable reading width */