/* ============================================================================
   SWACHH LAB: STYLES  (you rarely need to touch this file)
   To change the main colours, edit the values under :root below.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#0e2a3b; --muted:#5c7688; --accent:#0c6d8b; --line:#dde8ef; --soft:#f3f8fb;
  --air:#2b8ac6; --chem:#159f76; --fuel:#c26a1f; --water:#1470b6; --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6;}
a{color:var(--accent);text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px;}
h1,h2,h3,h4,h5{font-family:'Manrope';letter-spacing:-.3px;line-height:1.2;}
.eyebrow{font-family:'Manrope';font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;gap:20px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;font-family:'Manrope';font-weight:800;font-size:17px;color:var(--ink);}
.brand .mark,.fmark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--air),var(--chem));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;font-family:'Manrope';flex:none;}
.brand img.mark,img.fmark{width:38px;height:38px;background:#fff;border-radius:9px;padding:5px;box-sizing:border-box;object-fit:contain;flex:none;box-shadow:0 1px 3px rgba(14,42,59,.12);}
.navlinks{margin-left:auto;display:flex;gap:20px;}
.navlinks a{font-size:13.5px;color:var(--muted);font-weight:600;padding-bottom:4px;border-bottom:2px solid transparent;}
.navlinks a:hover{color:var(--ink);}
.navlinks a.active{color:var(--ink);border-bottom-color:var(--accent);}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;position:relative;width:40px;height:40px;border-radius:10px;flex:none;padding:0;transition:background .15s;}
.nav-toggle:hover{background:var(--soft);}
.nav-toggle .bar{position:absolute;left:9px;right:9px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease,top .25s ease;}
.nav-toggle .bar:nth-child(1){top:14px;}
.nav-toggle .bar:nth-child(2){top:20px;}
.nav-toggle .bar:nth-child(3){top:26px;}
.nav-toggle.open .bar:nth-child(1){top:20px;transform:rotate(45deg);}
.nav-toggle.open .bar:nth-child(2){opacity:0;}
.nav-toggle.open .bar:nth-child(3){top:20px;transform:rotate(-45deg);}
.nav-backdrop{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(9,30,43,.32);backdrop-filter:blur(2px);z-index:45;opacity:0;transition:opacity .22s ease;}
.nav-backdrop.open{display:block;opacity:1;}

/* HERO */
.hero{position:relative;min-height:780px;display:flex;align-items:flex-end;color:#fff;padding:70px 0 46px;
  background:linear-gradient(150deg,#0e2a3b,#0c6d8b);background-size:cover;background-position:center 55%;}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,30,43,0) 0%,rgba(9,30,43,0) 44%,rgba(9,30,43,.4) 54%,rgba(9,30,43,.8) 64%,rgba(9,30,43,.97) 74%,rgba(9,30,43,1) 84%,rgba(9,30,43,1) 100%);}
.hero .wrap{position:relative;}
.hero .eyebrow{color:#a9e2f2;text-shadow:0 1px 10px rgba(0,0,0,.65);}
.hero h1{color:#fff;font-size:34px;max-width:740px;margin:14px 0 24px;text-shadow:0 2px 18px rgba(0,0,0,.75);}
.hero h1 .a{color:#a9e2f2;} .hero h1 .w{color:#a3d3f5;} .hero h1 .c{color:#8fe9ca;}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.btn{font-family:'Manrope';font-weight:700;font-size:14px;padding:12px 20px;border-radius:10px;display:inline-block;transition:transform .15s,box-shadow .15s;cursor:pointer;}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28);}
.btn-primary{background:#fff;color:var(--accent);}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.6);}
.btn-solid{background:var(--accent);color:#fff;}
.hero .social{margin-left:auto;display:flex;gap:8px;}
.hero .social a{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;}
/* small caption under the hero buttons, identifying the group photo as a real,
   specific moment rather than generic stock-style imagery */
.hero-caption{color:#a9c6d4;font-size:12px;margin-top:20px;letter-spacing:.2px;}

/* HOME: credibility stats strip right under the hero (founded/team/pubs/citations) */
#home-stats{padding:26px 0 4px;}

/* HOME: featured publication cards - capped/centred width so 1-2 flagship
   results read as a highlight rather than a stretched-out full-width row */
.hl-grid-duo{max-width:820px;margin:0 auto;}
/* HOME: casual provenance note folded into the venue line (e.g. "Nature Energy
   2025 · from his postdoc") - overrides the venue's bold/uppercase/accent
   styling so it reads as a soft aside, not a second shouted label */
.hl-venue .hl-source{font-family:'Inter';font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);}

/* HOME: single real testimonial reused from the Join page's testimonials list */
.testi-solo{max-width:640px;margin:28px auto 0;text-align:center;}
.testi-solo .testi-quote{font-size:15px;}
/* HOME: "More from the team" CTA - a real pill button (matching the site's other
   pill links, e.g. mem-homepage) instead of a bare text link, since it sits right
   before the join pitch and deserves to read as a button, not an afterthought */
.testi-more{display:inline-flex;align-items:center;gap:4px;margin-top:16px;font-family:'Manrope';font-size:11.5px;font-weight:800;letter-spacing:.2px;color:var(--accent);text-decoration:none;padding:8px 18px;border-radius:20px;border:1px solid var(--line);background:#fff;transition:transform .14s,box-shadow .14s,background .14s,color .14s;}
.testi-more:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 16px rgba(14,42,59,.16);}

/* PAGE BANNER (used on every page except home) */
.page-hero{background:linear-gradient(150deg,#0e2a3b,#0c6d8b);color:#fff;padding:46px 0;}
.page-hero .crumb{font-size:12.5px;color:#a9e2f2;margin-bottom:6px;}
.page-hero .crumb a{color:#a9e2f2;font-weight:600;}
.page-hero .crumb a:hover{color:#fff;}
.page-hero h1{font-size:28px;color:#fff;}
.page-hero p{color:#cfe6f2;font-size:14px;margin-top:8px;max-width:640px;}

/* SECTION SHELL */
/* scroll-margin-top keeps any section that's a jump-link target (e.g. the
   publications-page group links, or "More from the team →" linking to
   join.html#join-testimonials) from landing right under the sticky header,
   which would hide its top edge - applied here once so it covers every
   section/anchor target on the site rather than each one needing its own rule. */
section{padding:56px 0;scroll-margin-top:80px;}
section.alt{background:var(--soft);}
.sec-head{margin-bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;}
.sec-head h2{font-size:26px;}
.sec-head p{color:var(--muted);font-size:14.5px;margin-top:6px;max-width:720px;}
.sec-head .more{font-family:'Manrope';font-weight:800;font-size:13px;white-space:nowrap;}

/* PI TEASER (home page) */
.pi-strip{display:flex;align-items:center;gap:36px;}
.pi-photo{flex:none;width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,#cfe6f4,#d3f0e6) center/cover;box-shadow:0 10px 26px rgba(14,42,59,.14);}
.pi-body h2{font-size:23px;margin:2px 0 2px;}
.pi-role{font-size:13.5px;color:var(--accent);font-weight:700;}
.pi-blurb{font-size:14px;color:var(--muted);margin-top:10px;max-width:640px;line-height:1.6;}
.pi-body .more{display:inline-block;margin-top:12px;}
@media(max-width:640px){.pi-strip{flex-direction:column;text-align:center;gap:18px;} .pi-blurb{max-width:none;}}

/* RESEARCH */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px;}
.card{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff;transition:transform .16s,box-shadow .16s;overflow:hidden;}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,42,59,.12);}
.card.air{border-top:4px solid var(--air);} .card.chem{border-top:4px solid var(--chem);}
.card.fuel{border-top:4px solid var(--fuel);} .card.water{border-top:4px solid var(--water);}
.card .r-img{margin:-22px -22px 14px;height:140px;overflow:hidden;}
.card .r-img img{width:100%;height:100%;object-fit:cover;display:block;}
.card .ic{font-size:28px;}
.card h3{font-size:17px;margin:10px 0 7px;}
.card.air h3{color:var(--air);} .card.chem h3{color:var(--chem);} .card.fuel h3{color:var(--fuel);} .card.water h3{color:var(--water);}
.card p{font-size:13px;color:var(--muted);}
.card .rint{list-style:none;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);}
.card .rint li{font-size:12.5px;color:#40606f;padding-left:15px;position:relative;margin-bottom:5px;}
.card .rint li::before{content:"›";position:absolute;left:0;color:var(--accent);font-weight:800;}
.card .more-muted{display:inline-block;margin-top:10px;color:var(--muted);font-size:13px;font-style:italic;}
.collab{margin-top:34px;}
.collab-lbl{font-family:'Manrope';font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:12px;}
.collab-row{display:flex;gap:12px;flex-wrap:wrap;}
.collab-chip{border:1px solid var(--line);border-radius:10px;padding:12px 16px;background:var(--soft);}
.collab-chip .cn{display:block;font-family:'Manrope';font-weight:800;font-size:13.5px;}
.collab-chip .co{display:block;font-size:12px;color:var(--muted);margin-top:2px;}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;}
.about-intro p{font-size:15px;color:#33505f;}
.about-intro p+p{margin-top:14px;}
.stats-row.compact{padding:22px 0 6px;gap:0;}
.stats-row.compact .stat{padding:0 26px;border-right:1px solid var(--line);}
.stats-row.compact .stat:first-child{padding-left:0;}
.stats-row.compact .stat:last-child{border-right:none;padding-right:0;}
.stats-row.compact .stat-num{font-size:21px;}
.stats-row.compact .stat-lbl{font-size:10.5px;letter-spacing:.4px;}
.stat-alumni{font-size:12.5px;color:var(--muted);margin-top:2px;}
.stat-alumni strong{color:var(--ink);font-weight:800;}
.about-collabs{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);}
.about-collabs h5{font-family:'Manrope';font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.about-collabs ul{list-style:none;}
.about-collabs li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;}
.about-collabs li:last-child{border-bottom:none;}
.about-collabs .cn{font-weight:700;color:var(--ink);}
.about-collabs .co{color:var(--muted);text-align:right;}
.pi-card{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff;text-align:center;}
.pi-card .avatar{width:110px;height:110px;border-radius:50%;margin:0 auto 14px;border:4px solid #fff;box-shadow:0 4px 16px rgba(14,42,59,.18);background:linear-gradient(135deg,#cfe6f4,#d3f0e6) center/cover;display:flex;align-items:center;justify-content:center;font-size:40px;}
.pi-card .name{font-family:'Manrope';font-weight:800;font-size:19px;}
.pi-card .role{font-size:12.5px;color:var(--muted);margin:4px 0 12px;}
.pi-card .bio{font-size:12.5px;color:#40606f;text-align:left;line-height:1.6;margin-bottom:14px;}
.pi-card .links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.pi-card .links a{font-family:'Manrope';font-size:12px;font-weight:800;}

/* TEAM */
.team-group{margin-bottom:40px;}
.tg-title{font-family:'Manrope';font-weight:800;font-size:13px;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.member{position:relative;z-index:1;text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 16px 18px;transition:transform .16s,box-shadow .16s,border-color .16s;}
.member:hover,.member:focus-within,.member:focus{transform:translateY(-4px);box-shadow:0 14px 28px rgba(14,42,59,.1);border-color:transparent;z-index:60;}
.member.has-bio{cursor:help;}
.ph-wrap{position:relative;width:fit-content;margin:0 auto;}
.member .ph{width:160px;height:160px;margin:0 auto;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#cfe6f4,#d3f0e6);display:flex;align-items:center;justify-content:center;font-size:52px;color:#7fa6bd;background-size:cover;background-position:center;box-shadow:0 0 0 4px #f3f8fa;}
.pub-dot{position:absolute;top:2px;right:2px;z-index:10;min-width:24px;height:24px;padding:0 5px;border-radius:50%;background:#bfe0ed;color:var(--accent);font-family:'Manrope';font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 9px rgba(12,109,139,.3);border:2px solid #fff;transition:transform .15s ease,box-shadow .15s ease;}
.pub-dot:hover{z-index:70;transform:scale(1.15);box-shadow:0 6px 14px rgba(12,109,139,.38);}
.pub-dot-tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(3px);background:#fff;color:var(--ink);font-family:'Manrope';font-size:10.5px;font-weight:700;white-space:nowrap;padding:6px 11px;border-radius:8px;border:1px solid var(--line);box-shadow:0 12px 26px rgba(14,42,59,.24);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .08s ease,transform .08s ease,visibility .08s;}
.pub-dot-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#fff;}
.pub-dot:hover .pub-dot-tip,.pub-dot:focus .pub-dot-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.role-badge{display:block;width:fit-content;margin:12px auto 0;font-family:'Manrope';font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:4px 10px;line-height:1.3;}
.member .nm{font-family:'Manrope';font-weight:800;font-size:15px;margin-top:10px;}
.member.has-bio .nm-txt{border-bottom:1px dotted var(--accent);}
.bio-tip{position:absolute;left:100%;top:50%;transform:translateY(-50%) translateX(4px);width:240px;max-width:min(60vw,260px);background:var(--ink);color:#fff;font-size:11.5px;font-weight:400;font-style:normal;line-height:1.55;text-align:left;padding:12px 14px;border-radius:10px;box-shadow:0 14px 28px rgba(14,42,59,.28);opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease;pointer-events:none;z-index:30;}
.member.has-bio:hover .bio-tip,.member.has-bio:focus .bio-tip,.member.has-bio:focus-within .bio-tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(10px);}
.team-grid .member:nth-child(4n) .bio-tip{left:auto;right:100%;transform:translateY(-50%) translateX(-4px);}
.team-grid .member:nth-child(4n).has-bio:hover .bio-tip,.team-grid .member:nth-child(4n).has-bio:focus .bio-tip,.team-grid .member:nth-child(4n).has-bio:focus-within .bio-tip{transform:translateY(-50%) translateX(-10px);}
@media(max-width:1100px){ .bio-tip{left:auto;right:100%;transform:translateY(-50%) translateX(-4px);} .member.has-bio:hover .bio-tip,.member.has-bio:focus .bio-tip,.member.has-bio:focus-within .bio-tip{transform:translateY(-50%) translateX(-10px);} }
.member .fc{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4;}
.member .mi{font-size:11.5px;color:var(--accent);margin-top:8px;line-height:1.4;font-style:italic;padding-top:8px;border-top:1px dashed var(--line);}
/* secondary details shown inside the bio-tip hover (since/skills/co-author credit) */
.bt-extra{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.18);}
.bt-since{font-size:10.5px;color:#a9c6d4;}
.bt-skills-label{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#a9c6d4;margin-top:2px;}
.bt-skills{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.bt-skill{font-family:'Manrope';font-size:9.5px;font-weight:700;color:#eaf6fb;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:11px;padding:2px 8px;line-height:1.3;}
.bio-tip .pub-credit{display:block;margin-top:8px;font-size:11px;font-weight:800;color:#8fd0e6;}
.bio-tip .pub-credit:hover{color:#fff;}
.member .mem{font-size:11.5px;display:inline-block;margin-top:8px;word-break:break-all;color:var(--accent);}
.mem-links-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;}
.mem-homepage{display:inline-flex;align-items:center;gap:4px;font-family:'Manrope';font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--accent);text-decoration:none;padding:5px 12px;border-radius:20px;border:1px solid var(--line);background:var(--soft);transition:transform .14s,box-shadow .14s,background .14s;}
.mem-homepage::after{content:"→";transition:transform .14s;}
.mem-homepage:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 16px rgba(14,42,59,.16);}
.mem-homepage:hover::after{transform:translateX(2px);}
.mem-icon-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;font-family:'Manrope';font-size:11px;font-weight:800;text-decoration:none;text-transform:lowercase;transition:transform .14s,box-shadow .14s;}
.mem-icon-link:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 8px 16px rgba(14,42,59,.2);}
.mem-icon-linkedin{background:#0a66c2;color:#fff;border:1px solid #0a66c2;}
.mem-icon-linkedin:hover{background:#084a8c;border-color:#084a8c;}
.mem-icon-scholar{background:#4285f4;color:#fff;border:1px solid #4285f4;}
.mem-icon-scholar:hover{background:#2f68c9;border-color:#2f68c9;}
.mem-icon-other,.mem-icon-website,.mem-icon-profile,.mem-icon-github{background:var(--soft);color:var(--accent);border:1px solid var(--line);}
.member .mlinks{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap;}
.mlink{display:inline-flex;align-items:center;font-family:'Manrope';font-size:11px;font-weight:800;padding:6px 13px;border-radius:20px;text-decoration:none;transition:transform .14s,box-shadow .14s;letter-spacing:.2px;}
.mlink:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(14,42,59,.2);}
.mlink-linkedin{background:#0a66c2;color:#fff;}
.mlink-scholar{background:#4285f4;color:#fff;}
.mlink-profile{background:var(--accent);color:#fff;}
.mlink-github{background:#1b1f24;color:#fff;}
.mlink-website{background:var(--soft);color:var(--accent);border:1px solid var(--accent);}
.mlink-other{background:var(--soft);color:var(--accent);border:1px solid var(--line);}
@media(max-width:600px){ .team-grid{grid-template-columns:repeat(2,1fr);gap:14px;} .member{padding:18px 10px 14px;} }

/* ALUMNI (deliberately quieter/smaller than the current-team section above) */
#alumni{padding-top:8px;padding-bottom:36px;}
.alumni-h{font-family:'Manrope';font-weight:700;font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.alumni-sub{font-size:12.5px;color:var(--muted);margin:8px 0 16px;}
.alumni-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.alum{position:relative;text-align:center;background:transparent;border:1px dashed var(--line);border-radius:12px;padding:12px 8px 10px;opacity:.85;transition:opacity .16s;}
.alum:hover,.alum:focus-within,.alum:focus{opacity:1;z-index:60;}
.alum.has-bio{cursor:help;}
.alum .ph{width:66px;height:66px;margin:0 auto;aspect-ratio:1;border-radius:50%;background:#eef2f4;display:flex;align-items:center;justify-content:center;font-size:26px;color:#a7b8c4;background-size:cover;background-position:center;filter:grayscale(35%);}
.alum .nm{font-family:'Manrope';font-weight:700;font-size:12px;margin-top:8px;color:var(--muted);}
.alum .fc{font-size:10.5px;color:#a3b1ba;margin-top:2px;line-height:1.3;}
/* alumni bio-tip/testi-tip weren't actually reachable before (only ".member.has-bio"
   had a hover trigger, and .alum never carries a "member" class) - these give the
   alumni card its own trigger, driving both the plain bio-tip and the new comic-
   bubble testi-tip below */
.alum.has-bio:hover .bio-tip,.alum.has-bio:focus .bio-tip,.alum.has-bio:focus-within .bio-tip,
.alum.has-bio:hover .testi-tip,.alum.has-bio:focus .testi-tip,.alum.has-bio:focus-within .testi-tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(10px);}
/* comic-style speech-bubble tooltip quoting an alumnus's own testimonial - white
   fill (unlike the dark .bio-tip) with a pointer tail, so it visually reads as
   "them talking" rather than a plain info tooltip; font matches .bio-tip */
.testi-tip{position:absolute;left:100%;top:50%;transform:translateY(-50%) translateX(4px);width:250px;max-width:min(65vw,270px);background:#fff;color:var(--ink);font-size:11.5px;font-weight:400;font-style:normal;line-height:1.55;text-align:left;padding:14px 16px;border-radius:18px;border:1px solid var(--line);box-shadow:0 14px 28px rgba(14,42,59,.2);opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease;pointer-events:none;z-index:30;}
.testi-tip::after{content:'';position:absolute;top:50%;left:-9px;transform:translateY(-50%);width:16px;height:16px;background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 0 4px;clip-path:polygon(0 0,100% 100%,0 100%);}
.testi-tip-quote{margin:0;}
@media(max-width:1100px){
  .testi-tip{left:auto;right:100%;transform:translateY(-50%) translateX(-4px);}
  .alum.has-bio:hover .testi-tip,.alum.has-bio:focus .testi-tip,.alum.has-bio:focus-within .testi-tip{transform:translateY(-50%) translateX(-10px);}
  .testi-tip::after{left:auto;right:-9px;transform:translateY(-50%) rotate(180deg);}
}
@media(max-width:900px){ .alumni-grid{grid-template-columns:repeat(4,1fr);} }
@media(max-width:600px){ .alumni-grid{grid-template-columns:repeat(3,1fr);gap:10px;} .alum{padding:10px 6px 8px;} }

/* PUBLICATIONS: HIGHLIGHTS */
.hl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.hl-card{display:flex;flex-direction:column;border:1px solid var(--line);border-top:4px solid var(--hl-accent,var(--accent));border-radius:14px;padding:22px;background:#fff;transition:transform .16s,box-shadow .16s;}
.hl-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,42,59,.12);}
.hl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.hl-link{display:block;}
.hl-venue{font-family:'Manrope';font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);}
.hl-card h3{font-size:16px;line-height:1.4;margin:0 0 10px;color:var(--ink);font-weight:800;}
.hl-card p{font-size:13.5px;color:#33505f;line-height:1.65;}
.hl-more{display:inline-block;margin-top:14px;font-family:'Manrope';font-weight:800;font-size:12.5px;color:var(--accent);}
.hl-link:hover .hl-more{text-decoration:underline;}
.hl-cite{flex:none;font-family:'Manrope';font-size:10.5px;font-weight:800;color:#fff;background:var(--hl-accent,var(--accent));border-radius:20px;padding:4px 10px;white-space:nowrap;}
/* right side of a highlight card's header can carry both the citation-count pill
   (hl-cite) and a Hot Article pill (hl-hot) at once, so they're grouped in their
   own flex row rather than fighting hl-head's own space-between for the slot. */
.hl-right{flex:none;display:flex;align-items:center;gap:6px;}
.hl-hot{flex:none;font-family:'Manrope';font-size:10.5px;font-weight:800;color:#fff;background:#e2481b;border-radius:20px;padding:4px 10px;white-space:nowrap;}

/* PUBLICATIONS */
.stats-row{display:flex;gap:0;flex-wrap:wrap;align-items:center;padding:30px 0;}
.stat{padding:0 34px;border-right:1px solid var(--line);}
.stat:first-child{padding-left:0;}
.stat-num{font-family:'Manrope';font-weight:800;font-size:26px;color:var(--ink);}
.stat-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-top:2px;white-space:nowrap;line-height:1.5;}
.stat-link{border-right:none;margin-left:auto;font-family:'Manrope';font-weight:800;font-size:13px;padding-left:34px;}
.pub-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px;}
.pub-search{width:100%;max-width:420px;display:block;padding:11px 16px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;font-family:'Inter';margin-bottom:0;background:#fff;}
.pub-search:focus{outline:2px solid var(--accent);outline-offset:1px;}
.pub-sort{display:flex;gap:6px;background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:3px;}
.pub-sort button{font-family:'Manrope';font-size:11.5px;font-weight:800;color:var(--muted);background:none;border:none;border-radius:16px;padding:6px 14px;cursor:pointer;transition:background .12s,color .12s;}
.pub-sort button.active{background:#fff;color:var(--accent);box-shadow:0 2px 6px rgba(14,42,59,.1);}
.pub-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.chip{font-family:'Manrope';font-size:11.5px;font-weight:800;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 14px;cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
.chip:hover{border-color:var(--accent);}
.chip.active{color:#fff;border-color:transparent;}
.chip-all.active{background:var(--ink);}
.chip-air.active{background:var(--air);} .chip-chem.active{background:var(--chem);}
.chip-fuel.active{background:var(--fuel);} .chip-water.active{background:var(--water);}
.pub-jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
.pub-jump a{font-family:'Manrope';font-size:12px;font-weight:700;color:var(--accent);background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:6px 14px;white-space:nowrap;}
.pub-jump a:hover{background:#fff;}
.pub-group{margin-bottom:30px;scroll-margin-top:80px;}
.pg-title{font-size:14px;color:var(--accent);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.pg-count{font-family:'Inter';font-size:11px;font-weight:600;color:var(--muted);background:var(--soft);border-radius:10px;padding:1px 8px;text-transform:none;letter-spacing:0;}
.pub{display:flex;align-items:flex-start;gap:14px;padding:15px 0 15px 12px;border-bottom:1px solid var(--line);border-left:3px solid var(--pub-accent,var(--line));transition:background .12s;}
.pub:hover{background:var(--soft);}
.pub-num{flex:none;font-family:'Manrope';font-weight:800;font-size:12px;color:var(--muted);width:24px;padding-top:2px;}
.pub .body{flex:1;min-width:0;}
.pub .ti{font-weight:700;font-size:14.5px;line-height:1.4;}
.pub .au{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5;}
.pub .au .au-me{color:var(--ink);font-weight:700;}
.au-student{color:var(--accent);font-weight:700;}
.pub .ve{font-size:12.5px;font-style:italic;color:#40606f;margin-top:4px;}
.au-toggle{background:none;border:none;padding:0;font-family:'Manrope';font-size:11.5px;font-weight:800;color:var(--accent);cursor:pointer;text-decoration:underline;}
.pub-badge{display:inline-block;font-style:normal;font-family:'Manrope';font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;background:var(--soft);color:var(--accent);border:1px solid var(--line);border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:middle;}
.pub-badge-cover{background:#fff3d6;color:#8a5a00;border-color:#f0dca3;}
/* "Hot Article" is a genuine editorial highlight (journal-selected, not just a
   self-described tag like "preprint"), so it gets a solid warm fill rather than
   the soft/outlined default badge - reads as a real distinction at a glance,
   same visual weight class as pub-badge-first below. */
.pub-badge-hot{background:#e2481b;color:#fff;border-color:#e2481b;}
.pub-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-top:2px;}
.pub-cite{font-family:'Manrope';font-weight:800;font-size:13px;color:var(--pub-accent,var(--accent));white-space:nowrap;}
.pub-cite span{display:block;font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.pub-cite-btn{font-family:'Manrope';font-size:10.5px;font-weight:800;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 10px;cursor:pointer;white-space:nowrap;}
.pub-cite-btn:hover{border-color:var(--accent);color:var(--accent);}
.pub-cite-btn.copied{color:#fff;background:var(--accent);border-color:var(--accent);}

/* NEWS */
.news-grid{display:flex;gap:16px 34px;align-items:flex-start;}
.news-col{flex:1 1 0;display:flex;flex-direction:column;gap:16px;min-width:0;}
/* homepage preview (#newsGridPreview): its 3 .nitem cards sit directly in the
   grid with no .news-col wrapper (unlike the full news page), so the shared
   .news-grid flex row above gave them no width constraint and let them
   overflow/squash together in a single unconstrained row. A dedicated wrapping
   grid fixes that without touching the full news page's two-column layout. */
#newsGridPreview{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px 28px;align-items:start;}
.nitem{display:flex;gap:12px;align-items:flex-start;border-left:3px solid var(--line);padding:2px 0 2px 14px;}
.nitem.air{border-left-color:var(--air);} .nitem.chem{border-left-color:var(--chem);}
.nitem.fuel{border-left-color:var(--fuel);} .nitem.water{border-left-color:var(--water);}
/* small thumbnail per entry: a real photo when the item has one, otherwise a
   soft category-tinted icon box (reusing the research theme's own emoji) so
   every row still carries a visual without needing a placeholder image */
.nitem-thumb{flex:none;width:40px;height:40px;border-radius:10px;background-size:cover;background-position:center;background-color:var(--soft);margin-top:1px;}
.nitem-thumb-icon{display:flex;align-items:center;justify-content:center;font-size:17px;}
.nitem.air .nitem-thumb-icon{background:rgba(43,138,198,.12);}
.nitem.chem .nitem-thumb-icon{background:rgba(21,159,118,.12);}
.nitem.fuel .nitem-thumb-icon{background:rgba(194,106,31,.12);}
.nitem.water .nitem-thumb-icon{background:rgba(20,112,182,.12);}
.nitem-body{flex:1;min-width:0;}
.nitem .dt{font-family:'Manrope';font-size:10.5px;font-weight:800;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;}
.nitem .tx{font-size:13.5px;margin-top:2px;}

/* JOIN */
.join-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:start;}
.openings{list-style:none;margin:14px 0 20px;display:flex;gap:10px;flex-wrap:wrap;}
.openings li{background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:12.5px;font-weight:700;color:var(--accent);}
.aud{margin-bottom:14px;}
.aud-who{font-family:'Manrope';font-weight:800;font-size:14px;}
.aud-detail{font-size:13px;color:#40606f;margin-top:3px;}
.join-cta{text-align:center;background:var(--soft);border-radius:12px;padding:26px;position:sticky;top:80px;}
.join-cta p{font-size:13px;color:var(--muted);margin-bottom:14px;}

/* PARTNERS */
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;}
.partner-group .pg-label{font-family:'Manrope';font-size:11.5px;font-weight:800;letter-spacing:.4px;color:var(--accent);margin-bottom:12px;}
.partner-chips{display:flex;flex-wrap:wrap;gap:8px;}
.partner-chip{display:inline-block;font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 14px;color:#33505f;}
.partner-chip-logo{display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:14px;}
.partner-logo{height:44px;width:44px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px;box-sizing:border-box;flex-shrink:0;}
.chip{background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 18px;font-size:12.5px;color:var(--muted);font-weight:700;}

/* FOOTER */
footer.site{background:var(--ink);color:#c9dce7;}
footer .rule{height:4px;background:linear-gradient(90deg,var(--air),var(--chem),var(--fuel),var(--water));}
footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:34px;padding:44px 0 28px;}
footer a{color:#c9dce7;} footer a:hover{color:#fff;}
footer .fbrand .l{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
footer .fbrand .nm{font-family:'Manrope';font-weight:800;font-size:17px;color:#fff;}
footer .fbrand p{font-size:13px;color:#9fb8c7;max-width:380px;}
footer .addr{font-size:12.5px;margin-top:12px;line-height:1.7;}
footer .addr a{color:#8fd0e6;}
footer h5{font-family:'Manrope';font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#7f9db0;margin-bottom:14px;}
footer ul{list-style:none;} footer li{margin-bottom:9px;font-size:13px;}
footer .fnav a.active{color:#fff;}
footer #fProfiles{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none;}
footer #fProfiles li{margin:0;}
footer #fProfiles li:first-child{flex-basis:100%;margin-bottom:2px;}
footer #fProfiles .mlink{display:inline-flex;background:transparent!important;border:1px solid rgba(255,255,255,.28);color:#e4f0f5!important;padding:6px 12px;}
footer #fProfiles .mlink:hover{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.5);}
footer #fProfiles .mlink-lab-linkedin{background:#0a66c2!important;border-color:#0a66c2!important;color:#fff!important;font-size:12.5px;padding:8px 16px;}
footer #fProfiles .mlink-lab-linkedin:hover{background:#0958a5!important;border-color:#0958a5!important;}
footer .bar{border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#7f9db0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:16px 0;}

/* JOIN: FEATURED VIDEO */
.video-card{display:flex;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:transform .16s,box-shadow .16s;}
.video-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(14,42,59,.12);}
.video-thumb{position:relative;flex:0 0 42%;aspect-ratio:16/9;background:linear-gradient(150deg,#0e2a3b,#0c6d8b) center/cover;display:flex;align-items:center;justify-content:center;}
.video-thumb .play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 6px 20px rgba(0,0,0,.3);}
.video-body{padding:22px 26px;display:flex;flex-direction:column;justify-content:center;}
.video-body h3{font-size:18px;margin:8px 0 8px;color:var(--ink);}
.video-body p{font-size:13.5px;color:var(--muted);}

/* JOIN: TESTIMONIALS */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.testi{border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff;}
.testi-quote{font-size:14px;color:#33505f;font-style:italic;line-height:1.6;}
.testi-who{font-family:'Manrope';font-weight:800;font-size:12.5px;color:var(--accent);margin-top:12px;}

/* JOIN: FAQ */
.faq-item{border-bottom:1px solid var(--line);padding:14px 0;}
.faq-item summary{cursor:pointer;font-family:'Manrope';font-weight:700;font-size:14.5px;color:var(--ink);list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:"+ ";color:var(--accent);font-weight:800;}
.faq-item[open] summary::before{content:"– ";}
.faq-item p{font-size:13.5px;color:#40606f;margin-top:10px;line-height:1.6;}

/* BIO PAGE */
.bio-photo{width:100%;max-width:340px;aspect-ratio:700/1159;border-radius:16px;background:linear-gradient(135deg,#cfe6f4,#d3f0e6) center/contain no-repeat;box-shadow:0 10px 30px rgba(14,42,59,.15);margin:0 auto;}
.bio-narrative p{font-size:14.5px;color:#33505f;margin-bottom:14px;}
.bio-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:34px;align-items:start;}
.exp-item{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);}
.exp-ph{width:56px;height:56px;border-radius:10px;flex:none;background:linear-gradient(135deg,#cfe6f4,#d3f0e6) center/cover;}
.exp-role{font-family:'Manrope';font-weight:800;font-size:14.5px;}
.exp-org{font-size:12.5px;color:var(--muted);margin-top:2px;}
.exp-period{font-size:11.5px;color:#8aa2b2;margin-top:2px;}
.dist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:18px;}
.dist-item{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;}
.dist-ph{width:44px;height:44px;border-radius:8px;flex:none;background:linear-gradient(135deg,#cfe6f4,#d3f0e6) center/cover;margin-top:1px;}
.dist-title{font-size:12.5px;font-weight:700;color:#33505f;}
.dist-org{font-size:11.5px;color:var(--muted);margin-top:2px;}

/* GALLERY / SNIPPETS PAGE */
.gph{width:100%;aspect-ratio:4/3;object-fit:cover;background:linear-gradient(135deg,#cfe6f4,#d3f0e6);display:block;}
.album-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;}
.album-block{margin:0;}
.album-cover{position:relative;display:block;width:100%;padding:0 0 14px;border:none;background:none;cursor:pointer;text-align:left;font:inherit;}
.stack-layer{position:absolute;top:0;left:0;right:0;aspect-ratio:4/3;border-radius:12px;background:#eef4f7;border:1px solid var(--line);}
.stack-layer.l1{transform:rotate(-3.5deg) translate(7px,5px);}
.stack-layer.l2{transform:rotate(3deg) translate(-6px,7px);}
.album-cover .gph-box{position:relative;z-index:2;transition:transform .16s,box-shadow .16s;box-shadow:0 2px 8px rgba(14,42,59,.08);}
.album-cover:hover .gph-box{transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,42,59,.16);}
.album-cover-count{position:absolute;z-index:3;right:10px;bottom:10px;font-family:'Manrope';font-size:10.5px;font-weight:800;letter-spacing:.2px;color:#fff;background:rgba(9,30,43,.72);border-radius:20px;padding:4px 10px;backdrop-filter:blur(2px);}
.album-head{margin-top:2px;}
.album-block h3{font-family:'Manrope';font-size:16px;font-weight:800;color:var(--ink);}
.album-sub{font-size:12.5px;color:var(--muted);margin-top:3px;}
.gph-box{position:relative;width:100%;aspect-ratio:4/3;background:var(--soft);border-radius:12px;overflow:hidden;}
.gph-box .gph{width:100%;height:100%;object-fit:cover;display:block;}
.gph-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--line);border-radius:12px;background:repeating-linear-gradient(135deg,var(--soft),var(--soft) 10px,#eef4f7 10px,#eef4f7 20px);color:#93aab8;text-align:center;padding:10px;}
.gph-icon{font-size:24px;opacity:.6;}
.gph-hint{font-size:11px;line-height:1.5;}
/* member.html: placeholder/real photo grid on an individual member's page */
.mg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;}
/* member pages: hero contact row (email + Scholar/LinkedIn pills on the dark hero) */
.mem-hero.page-hero{padding:28px 0;}
.mem-focus{font-size:13.5px;color:#cfe6f2;margin-top:6px;}
/* "open to" status banner - the recruiter-facing equivalent of a LinkedIn open-to-work
   badge, deliberately more prominent than the plain contact pills below it */
.mem-status{display:inline-block;margin-top:12px;font-family:'Manrope';font-weight:800;font-size:12.5px;letter-spacing:.2px;border-radius:20px;padding:8px 16px;}
.mem-status-live{color:#fff;background:var(--chem);box-shadow:0 4px 14px rgba(0,0,0,.2);}
.mem-status-ph{color:#cfe6f2;background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.4);font-style:italic;font-weight:600;}
.mem-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.mem-hero-meta a{font-family:'Manrope';font-size:11.5px;font-weight:700;color:#eaf6fb;text-decoration:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);border-radius:20px;padding:6px 14px;transition:background .14s,transform .14s;}
.mem-hero-meta a:hover{background:rgba(255,255,255,.24);transform:translateY(-2px);}
/* CV download pill: brighter/solid so it stands out from the plain contact links */
.mem-hero-meta a.mem-cv-btn{background:#fff;color:var(--accent);border-color:#fff;}
.mem-hero-meta a.mem-cv-btn:hover{background:#eaf6fb;}
.mem-hero-meta .mem-cv-btn-ph{font-family:'Manrope';font-size:11.5px;font-weight:600;color:#cfe6f2;background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.4);border-radius:20px;padding:6px 14px;font-style:italic;}
/* "Next member" nav - sits on the breadcrumb line, right-aligned, styled like
   the crumb links themselves (muted teal, brightens on hover) rather than a
   standout button, since it's a quiet page-to-page nav control, not a CTA */
.crumb-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;}
.crumb-row .crumb{margin-bottom:0;}
#memberNext{display:flex;align-items:center;gap:16px;}
.mem-next-top,.mem-prev-top{font-size:12.5px;font-weight:600;color:#a9e2f2;text-decoration:none;white-space:nowrap;}
.mem-next-top:hover,.mem-prev-top:hover{color:#fff;}
.mem-prev-top{padding-right:16px;border-right:1px solid rgba(255,255,255,.25);}
@media(max-width:600px){ .mem-prev-top{padding-right:10px;} #memberNext{gap:10px;} }
/* member pages: compact CV-style two-column layout (sidebar + one main column),
   so the whole profile reads with minimal scrolling instead of stacked sections */
.profile-grid{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:start;}
/* top offset must clear the sticky header (64px tall) with some breathing room,
   otherwise the photo/skills sidebar slides up underneath it while scrolling -
   80px matches the offset already used for .join-cta and anchor scroll-margin */
.profile-side{position:sticky;top:80px;z-index:5;}
.profile-side .mem-skills{margin-top:14px;padding-top:12px;}
/* sidebar quick-stats: papers/citations/tenure at a glance, right under the photo -
   scannable numbers before a recruiter reads a single word of the narrative */
.mem-quickstats{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;}
.mem-qs-item{display:flex;align-items:baseline;gap:7px;}
.mem-qs-num{font-family:'Manrope';font-weight:800;font-size:18px;color:var(--ink);white-space:nowrap;}
.mem-qs-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
/* labeled skill clusters (e.g. Characterization / Electrochemical) - just spacing
   between groups; each group reuses the existing bt-skills-label/bt-skills styles */
.mem-skill-group + .mem-skill-group{margin-top:12px;}
/* small closing meta line at the bottom of the CV column (references note,
   last-updated date) - quiet, not another section with its own heading */
.mem-page-meta{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);font-style:italic;line-height:1.6;}
.profile-main .bio-narrative p{font-size:14px;margin-bottom:10px;}
.pf-h{font-family:'Manrope';font-size:15px;font-weight:800;letter-spacing:.3px;margin:24px 0 2px;padding-bottom:6px;border-bottom:2px solid var(--line);}
.profile-main .exp-item{padding:9px 0;}
/* member photos are square (1:1) unlike the tall PI bio photo, so crop accordingly */
.mem-photo{aspect-ratio:1/1;max-width:220px;background-size:cover;background-position:center top;}
/* members with a full-length "photoFull" portrait (set in content.js) show it uncropped
   on their own page; ratio matches the 700x822 exported portrait */
.mem-photo-full{aspect-ratio:700/822;max-width:280px;}
/* optional third line under an education/experience entry (thesis, project detail) */
.exp-detail{font-size:12.5px;color:#57707e;margin-top:4px;max-width:640px;line-height:1.5;}
/* bracketed "[Placeholder — ...]" data renders muted italic until filled in */
.ph{font-style:italic;color:#95a9b6;font-weight:500;}
/* member pages: publications reuse the main Publications page's own pub-group/
   pub/body/ti/au/ve/pub-side classes (see "PUBLICATIONS" above), just tuned down
   for the plain CV column: no per-topic accent border/colour (education and
   experience above have no colour coding either, so four bright topic colours
   here would clash rather than match) and a muted, quieter group heading. */
.profile-main .pub-group{margin-bottom:22px;}
.profile-main .pg-title{margin:16px 0 4px;font-size:11px;color:var(--muted);}
.profile-main .pg-title:first-child{margin-top:0;}
.profile-main .pub{border-left:none;padding-left:0;}
/* de-accent the badges on this page only: same info, but in muted tones rather
   than the bright accent teal used on the main Publications page, so a pub row
   doesn't outweigh the plain text rows above it (education, experience) which
   have no colour or buttons at all. */
.profile-main .pub-badge{color:var(--muted);}
.profile-main .pub-badge-cover{color:#8a5a00;}
/* "First author" is a genuine credential worth a recruiter's attention, so it
   gets a solid-fill pill rather than the muted outline used for plain tags
   like "preprint" - same visual language as the "open to" status pill in the
   hero (.mem-status-live), which is this page's existing pattern for a real
   highlight vs. a passive label. */
.profile-main .pub-badge-first{background:var(--accent);color:#fff;border-color:var(--accent);}
/* Hot Article gets the same solid-fill exemption as "First author" above - a
   journal-selected distinction, not a plain descriptive tag, so it should stay
   loud even on this otherwise de-accented page. */
.profile-main .pub-badge-hot{background:#e2481b;color:#fff;border-color:#e2481b;}
/* single stacked column, matching the one-column rhythm every other section on
   this page uses (education, experience, awards...) - no cite-count/view-button
   side column at all; the title itself is the link through to the paper. */
.profile-main .pub{display:block;padding:14px 0;}
.profile-main .pub .body{width:100%;}
/* match the type used elsewhere on this page: item titles are Manrope, semi-bold
   so they still read as the lead line of each entry (this is the only remaining
   click target since the cite-count/view-button column was removed, so the
   title keeps the sitewide link colour rather than plain ink); the third meta
   line (venue) matches .exp-period's size/colour/upright style instead of the
   main Publications page's larger italic venue text. */
.profile-main .pub .ti{font-family:'Manrope';font-weight:600;}
.profile-main .pub .ti a{color:var(--accent);}
.profile-main .pub .ti a:hover{text-decoration:underline;}
.profile-main .pub .ve{font-size:11.5px;font-style:normal;color:#8aa2b2;}
/* generic muted small-text utility (used e.g. by the member page's "No
   publications linked yet" message, which isn't nested in .member/.alum) */
.fc{font-size:12px;color:var(--muted);line-height:1.4;}
/* member.html: clearly mark not-yet-written "about" copy as a placeholder, so it
   reads as "to be filled in" rather than looking like finished, oddly-worded text */
/* first-person "about" statement on member pages: normal body text (italics were a
   leftover from the placeholder era), with a left accent line to set it apart from
   the CV sections below */
.mem-about{border-left:3px solid var(--line);padding-left:16px;margin-bottom:18px;}
.mem-about p{color:#33505f;}
.mem-about p+p{margin-top:10px;}
.mem-bio{padding-top:4px;}
.mem-skills{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.mem-skills .bt-skills-label{color:var(--muted);}
.mem-skills .bt-skills{margin-top:8px;}
.mem-skill.has-full{position:relative;}
.skill-full{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:170px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:600;line-height:1.35;text-align:left;padding:6px 10px;border-radius:8px;box-shadow:0 14px 28px rgba(14,42,59,.28);opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease;pointer-events:none;z-index:120;}
.skill-full::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink);}
.mem-skill.has-full:hover .skill-full,.mem-skill.has-full:focus .skill-full{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.mem-skill{color:var(--ink);background:var(--soft);border-color:var(--line);font-size:10.5px;font-weight:800;padding:3px 10px;cursor:help;}
.press-year{font-family:'Manrope';font-size:13px;font-weight:800;letter-spacing:.4px;color:var(--muted);margin:28px 0 14px;}
.press-year:first-child{margin-top:0;}
.press-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:6px;}
.press-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:transform .16s,box-shadow .16s;}
.press-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,42,59,.12);}
.press-card.press-featured{border-color:var(--chem);background:linear-gradient(180deg,#fff,var(--soft));}
.press-card.press-featured::after{content:"Journal feature";position:absolute;top:12px;right:14px;font-family:'Manrope';font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--chem);}
.press-outlet-badge{font-family:'Manrope';font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:20px;padding:3px 10px;}
.press-date{font-size:11.5px;color:var(--muted);}
.press-text{font-size:14px;font-weight:600;color:var(--ink);line-height:1.45;padding-right:6px;}
.press-more{font-size:12.5px;font-weight:700;color:var(--accent);margin-top:2px;}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;background:rgba(10,20,28,.92);display:none;align-items:center;justify-content:center;flex-direction:column;z-index:200;padding:40px 20px;}
.lightbox.open{display:flex;}
.lightbox-body{display:flex;align-items:center;justify-content:center;gap:16px;max-width:100%;}
/* Fixed-size frame (not content-sized) so every photo, regardless of its
   native aspect ratio, occupies the same clickable region. Without this,
   narrower/shorter photos left a smaller click target and stray taps in the
   surrounding backdrop would close the lightbox unexpectedly. */
.lightbox-stage{position:relative;display:flex;align-items:center;justify-content:center;width:min(820px,80vw);height:min(78vh,620px);background:rgba(255,255,255,.04);border-radius:12px;}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.4);display:block;}
.lightbox-placeholder{display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:88%;height:88%;border-radius:10px;border:1px dashed rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#cfe6f2;text-align:center;padding:20px;}
.lightbox-placeholder .gph-icon{font-size:32px;}
.lightbox-placeholder .gph-hint{font-size:13px;color:#cfe6f2;}
.lightbox-caption{color:#e7f0f5;font-size:13.5px;margin-top:14px;text-align:center;}
.lightbox-counter{color:#9fc1d1;font-size:11.5px;margin-top:6px;letter-spacing:.3px;}
.lightbox-close{position:absolute;top:20px;right:26px;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1;padding:6px;}
.lightbox-close:hover{opacity:.7;}
.lightbox-nav{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;width:42px;height:42px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;flex:none;}
.lightbox-nav:hover{background:rgba(255,255,255,.22);}
@media(max-width:640px){
  .lightbox{padding:20px 8px;}
  .lightbox-body{gap:6px;}
  .lightbox-nav{width:32px;height:32px;font-size:17px;}
}

/* RESPONSIVE */
@media(max-width:900px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:760px){
  .wrap{padding:0 20px;}
  .navlinks{display:flex;flex-direction:column;position:absolute;top:76px;left:12px;right:12px;z-index:46;
    background:#fff;border-radius:16px;padding:8px;gap:2px;
    box-shadow:0 20px 44px rgba(14,42,59,.2),0 2px 10px rgba(14,42,59,.08);border:1px solid var(--line);
    opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
    max-height:calc(100vh - 96px);overflow:auto;}
  .navlinks.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
  .navlinks a{font-size:14.5px;color:var(--ink);font-weight:700;padding:13px 14px;border-radius:10px;border-bottom:0;}
  .navlinks a:hover{background:var(--soft);color:var(--accent);}
  .navlinks a.active{color:var(--accent);background:linear-gradient(135deg,rgba(43,138,198,.1),rgba(21,159,118,.1));}
  .navlinks a:not(:last-child){border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
  .hero h1{font-size:25px;} .hero{min-height:540px;background-position:center 30%;} .hero .social{margin-left:0;width:100%;}
  .about-grid,.join-box,footer .cols,.bio-grid,.profile-grid{grid-template-columns:1fr;}
  .news-grid{flex-direction:column;}
  .profile-side{position:static;}
  .join-cta{position:static;}
  .page-hero h1{font-size:22px;}
  .video-card{flex-direction:column;}
  .video-thumb{flex:none;aspect-ratio:16/9;}
  .stat{border-right:none;padding:0 0 10px;width:50%;}
  .stat-link{margin-left:0;padding-left:0;width:100%;}
  .stats-row.compact{flex-wrap:wrap;}
  .stats-row.compact .stat{border-right:none;width:50%;padding:0 0 12px;}
  .about-collabs li{flex-direction:column;gap:2px;}
  .about-collabs .co{text-align:left;}
  .role-badge{font-size:8.5px;padding:3px 8px;white-space:normal;max-width:95%;line-height:1.3;}
  .member .ph{width:120px;height:120px;font-size:40px;}
  footer #fProfiles{flex-direction:row;}
  /* On narrow screens the team grid is 2 columns, so the side-anchored bio-tip has no
     room to open left/right without spilling off the edge of the screen. Switch it to
     open centered above the card instead, which stays within the viewport regardless
     of which column the card is in. */
  .bio-tip,.team-grid .member:nth-child(4n) .bio-tip{
    left:50%; right:auto; top:auto; bottom:calc(100% + 8px);
    transform:translateX(-50%) translateY(4px);
    width:200px; max-width:calc(100vw - 32px);
  }
  .member.has-bio:hover .bio-tip,.member.has-bio:focus .bio-tip,.member.has-bio:focus-within .bio-tip,
  .team-grid .member:nth-child(4n).has-bio:hover .bio-tip,.team-grid .member:nth-child(4n).has-bio:focus .bio-tip,.team-grid .member:nth-child(4n).has-bio:focus-within .bio-tip{
    transform:translateX(-50%) translateY(0);
  }
  /* Alumni cards sit in a narrow 3-4 column grid on mobile, so the side-anchored
     bio-tip/testi-tip (built for a wide desktop layout, opening 250px to the
     left/right) has nowhere to go and spills off the edge of the screen -
     the "clipped hover" alumni bug. Center them above the card instead, same
     fix already applied to .member just above, and drop the testi-tip's side
     arrow since it no longer points at anything once centered. */
  .alum .bio-tip,.alum .testi-tip{
    left:50%; right:auto; top:auto; bottom:calc(100% + 8px);
    transform:translateX(-50%) translateY(4px);
    width:200px; max-width:calc(100vw - 32px);
  }
  .alum.has-bio:hover .bio-tip,.alum.has-bio:focus .bio-tip,.alum.has-bio:focus-within .bio-tip,
  .alum.has-bio:hover .testi-tip,.alum.has-bio:focus .testi-tip,.alum.has-bio:focus-within .testi-tip{
    transform:translateX(-50%) translateY(0);
  }
  .testi-tip::after{display:none;}
  /* pub-dot-tip is nowrap/unbounded-width by design (fine on desktop, where the
     dot always has open space to its sides); on a narrow phone column that can
     push the tooltip past the edge of the screen, so let it wrap onto a second
     line within a capped width instead. */
  .pub-dot-tip{white-space:normal;max-width:150px;text-align:center;}
}
@media(max-width:400px){
  .team-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .member{padding:14px 8px 12px;}
}

/* PRINT: any page prints as a clean black-on-white document - nav/footer/hover
   chrome and the dark hero gradient (which most browsers won't print anyway
   without "background graphics" enabled) all drop out. Written generically so
   it helps every page, not just member profiles, but it's what lets a personal
   page like sudipta-nayak.html double as an interim printable CV. */
@media print{
  header.nav,.nav-toggle,.nav-backdrop,footer.site,.lightbox,.pub-dot,.pub-cite-btn,
  .au-toggle,.mem-cv-btn,.mem-next-btn,.mem-homepage,.bio-tip,.testi-tip{display:none!important;}
  body{color:#000;background:#fff;}
  a{color:#000;text-decoration:underline;}
  .page-hero,.mem-hero.page-hero,.hero{background:#fff!important;color:#000!important;padding:10px 0!important;min-height:0!important;}
  .page-hero::before,.hero::before{display:none!important;}
  .page-hero .crumb,.page-hero .crumb a,.page-hero h1,.page-hero p,.mem-hero-meta a,
  .mem-focus,.mem-status,.hero-caption,.hero .eyebrow,.hero h1,.hero h1 *{color:#000!important;text-shadow:none!important;}
  .mem-status-live,.mem-status-ph,.mem-hero-meta a{background:none!important;border:1px solid #000!important;box-shadow:none!important;}
  section{padding:14px 0!important;}
  .profile-side{position:static!important;}
  .card:hover,.hl-card:hover,.member:hover,.press-card:hover{transform:none!important;box-shadow:none!important;}
}