@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap");

:root{color-scheme:light;--ink:#233847;--muted:#465e70;--accent:#315d78;--rule:#d8e6ef;--heading:"Dosis","Avenir Next Condensed","Arial Narrow",sans-serif}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:1.0625rem/1.65 "Source Sans 3","Source Sans Pro",system-ui,sans-serif;background:#fff}
a{color:inherit;text-underline-offset:.25em}
a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.skip{position:absolute;left:1rem;top:-5rem;background:white;padding:.5rem}
.skip:focus{top:1rem;z-index:1}
.wrap{width:min(1120px,calc(100% - 3rem));margin-inline:auto}
.top,nav{display:flex;align-items:center;gap:.65rem 1.55rem;flex-wrap:wrap}
.top{justify-content:space-between;padding-block:1.45rem}
nav{font-family:var(--heading);font-size:.93rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.brand{font-size:1.55rem;font-weight:800;letter-spacing:-.055em}
.brand-group{margin-left:.4rem;color:var(--muted);font-size:.55em;font-weight:600;letter-spacing:0;white-space:nowrap}
.brand sup{font-size:.62rem;color:var(--accent);margin-left:.25rem;letter-spacing:.08em}
header a{text-decoration:none}
header a:hover{text-decoration:underline}
.hero{background:#f1f7fa}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);align-items:center;gap:clamp(1rem,4vw,3rem);padding-block:clamp(1.4rem,3vw,2.5rem)}
.hero-art{display:block;width:100%;height:auto;opacity:.33;filter:saturate(.8);mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent)}
@media(min-width:681px){
  .hero{overflow:hidden}
  .hero-inner{position:relative;isolation:isolate}
  .hero-art{position:absolute;z-index:-1;width:94%;right:-18%;top:50%;transform:translateY(-50%);pointer-events:none}
}
@media(max-width:680px){.hero-inner{grid-template-columns:1fr}}
.hero .eyebrow{color:#315d78}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-family:var(--heading);line-height:1.18;margin:0 0 .7rem}
h1,h2{font-weight:600;text-transform:uppercase;letter-spacing:.065em}
h1{font-size:clamp(2.1rem,5.4vw,4.3rem)}
h2{font-size:clamp(1.75rem,3vw,2.45rem);margin-bottom:1rem}
h3{font-size:1.125rem;font-weight:700;text-transform:uppercase;letter-spacing:.045em}
.hero-lab-name{color:var(--accent);font-weight:700;line-height:1.35;margin:0 0 .65rem}
.hero-headline{font-size:clamp(1.85rem,3.4vw,3rem);text-transform:uppercase;letter-spacing:.045em}
.hero-tagline{color:var(--accent);font-size:clamp(1.15rem,2.7vw,1.65rem);font-weight:600;margin:.65rem 0}
.hero-focus{color:var(--muted);font-size:clamp(.85rem,1.8vw,1rem);margin:0 auto 1.5rem}
.intro{max-width:42rem;margin:0 auto 1.6rem;color:var(--muted)}
.button{display:inline-block;border:1px solid var(--accent);padding:.55rem .95rem;text-decoration:none;color:var(--accent);font-weight:650;background:#fff}
.button:hover{background:var(--accent);color:white}
main>.wrap>section{padding-block:clamp(3.2rem,7vw,5.5rem);border-bottom:1px solid var(--rule);text-align:center}
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:1.8rem;text-align:left}
#contact .themes{align-items:start}
@media(min-width:651px){#contact .themes{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
article{background:#f2f7fb;padding:1.35rem 1.5rem}
.research-grid article{border-top:2px solid #9bbfd6}
article p,dd,.pending{color:var(--muted);margin:.4rem 0 0}
footer{background:#eaf3f9;font-size:.85rem}
@media(max-width:650px){.wrap{width:calc(100% - 2rem)}.themes{grid-template-columns:1fr}.top{align-items:flex-start}.top nav{gap:.55rem 1rem}}
.portrait{display:block;width:8rem;aspect-ratio:1;object-fit:cover;object-position:center 35%;border-radius:50%;background:#e2edf5;margin:.7rem 0}
#people .intro{margin-bottom:clamp(2rem,5vw,4rem)}
.people-hint{color:var(--muted);font-size:.9rem;margin:0 0 1rem}
.people-grid{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3rem)/4);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.35rem .35rem 1rem}
.people-grid:focus-visible{outline:2px solid var(--accent)}
.people-grid .person{scroll-snap-align:start;min-width:0}
@media(max-width:750px){.people-grid{grid-auto-columns:calc((100% - 1rem)/2)}}
.person-link{display:inline-block;text-decoration:none;font-size:1.2rem}
.person-link:hover strong{text-decoration:underline}
.person .portrait{width:min(100%,13rem);height:auto;aspect-ratio:1;margin:0 auto 1.1rem}
.person-role,.person-title{color:var(--muted);margin:.45rem 0 0}
.person-title{margin-top:1rem}
.people-directory{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;list-style:none;padding:0;text-align:center}
.people-directory .person .portrait{width:min(100%,7rem);margin-bottom:.7rem}
.people-directory .person-title{font-size:.9rem;margin-top:.4rem}
.academic-collaborators{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem 1.2rem;list-style:none;padding:0;margin:.55rem 0 1.35rem;line-height:1.4}
@media(max-width:650px){.academic-collaborators{grid-template-columns:1fr}}
.profile{display:grid;grid-template-columns:minmax(8rem,11rem) minmax(0,1fr);align-items:start;gap:1.5rem;padding-block:1.5rem}
.profile .portrait{width:100%;height:auto;aspect-ratio:auto;border-radius:0;margin:0}
.profile h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:.3rem}
.profile p,.profile-details p{margin:.35rem 0}
.profile-details{padding-bottom:1.5rem;line-height:1.45}
.profile-details section{padding-block:.9rem;border-top:1px solid var(--rule)}
.profile-details h2{font-size:1.25rem;margin:0 0 .45rem}
.profile-details h2:not(:first-child){margin-top:.8rem}
.profile-details ul{margin:.25rem 0;padding-inline-start:1.2rem}
.profile-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem}
.profile-details .profile-funding{list-style:none;padding:0}
.profile-funding li{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.65rem;padding:.3rem 0}
.profile-funding li+li{border-top:1px solid var(--rule)}
.profile-year,.profile-meta{color:var(--muted);font-size:.92rem}
.profile-meta{display:block}
@media(max-width:650px){.profile,.profile-columns{grid-template-columns:1fr}.profile{gap:.75rem}.profile .portrait{width:8rem}.profile-funding li{grid-template-columns:1fr;gap:.08rem}}

.research-grid article{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem}
.research-icon{width:7rem;height:7rem;padding:.55rem;border-radius:50%;background:#e0edf7;fill:none;stroke:#315d78;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:650px){.research-grid article{grid-template-columns:1fr}.research-icon{justify-self:end}}

.person-link{width:100%}
.person-placeholder{display:grid;place-items:center;background:#e0edf7;color:#315d78;font-size:1.6rem;font-weight:700}


.flow-battery-card,.interface-card,.high-energy-card,.diagnostics-card{position:relative;isolation:isolate;overflow:hidden}
.flow-battery-card::before,.interface-card::before,.high-energy-card::before,.diagnostics-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(var(--card-fade-direction,90deg),#f2f7fb,rgba(242,247,251,.96) 45%,rgba(242,247,251,.79) 66%,rgba(242,247,251,.39)),
    var(--card-art) center/cover no-repeat;
  filter:blur(3px);
}

.flow-battery-card{--card-art:url(flow-cell-background.jpeg)}
.interface-card{--card-art:url(interface-background.jpg)}
.interface-card::before{background-position:center;background-size:100% 100%,contain}



.high-energy-card{--card-art:url(ignition-test-background.png)}

.diagnostics-card{--card-art:url(diagnostics-background.png)}

.research-link{text-decoration:none}
.research-link:hover{text-decoration:underline}
.research-detail{max-width:48rem;margin-inline:auto;padding-block:clamp(2.5rem,7vw,5rem)}
.research-detail h1{font-size:clamp(1.8rem,4.5vw,3.2rem)}
.research-detail h2{font-size:1.2rem;margin-top:2rem}


main:has(>.hero){overflow-x:clip}
main>.wrap>section{position:relative;isolation:isolate}
main>.wrap>section::before{
  content:"";
  position:absolute;
  inset:0 auto auto 50%;
  width:100vw;
  height:clamp(3.5rem,8vw,6rem);
  transform:translateX(-50%);
  z-index:-1;
  pointer-events:none;
  background:url(section-applications.svg) center/100% auto no-repeat;
  filter:blur(7px);
  opacity:.085;
  mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);
}

.interface-card::before,.high-energy-card::before{filter:blur(3px) saturate(.28)}

@media(max-width:650px){.research-grid{--card-fade-direction:180deg}}



.research-keywords,.research-project-note{color:var(--muted);font-size:.9rem}
.research-project-note{margin:0 0 1.25rem}
.research-projects{display:grid;gap:1rem}
.research-project{border-left:3px solid var(--rule)}
.research-project h3{text-transform:none;letter-spacing:0}

main>.research-shared{padding-block:clamp(2.5rem,6vw,4rem)}
.research-shared h2{margin-bottom:1rem}
#funding-title{text-align:center}
.funding-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:2rem}
.funding-logos{flex:0 0 100%;min-width:0;scroll-snap-align:start;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.5rem,4vw,3rem);align-items:center;list-style:none;padding:1rem 0;margin:0}
.funding-logos li{display:grid;place-items:center;min-height:clamp(5rem,14vw,10rem)}
.funding-logos:last-child:has(li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));width:75%;padding-inline:12.5%}
.funding-logos img{display:block;width:auto;max-width:100%;height:auto;max-height:clamp(3.5rem,11vw,7rem);object-fit:contain}
.funding-dots{justify-content:center;gap:.25rem;margin-top:1rem}
.funding-dots a{display:grid;place-items:center;width:1.75rem;height:1.75rem}
.funding-dots a::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
.funding-dots a:hover::before,.funding-dots a:focus-visible::before{width:.65rem;height:.65rem}


.project-publications{margin-top:.9rem;color:var(--muted);font-size:.94rem}
.project-publications summary{width:fit-content;color:var(--accent);cursor:pointer;font-weight:600}
.project-publications h4{margin:1rem 0 .35rem;color:var(--ink)}
.project-publications ol{margin:.35rem 0 0;padding-left:1.4rem}
.project-publications li+li{margin-top:.35rem}

.selected-publications{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3rem)/4);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;padding:0 0 .75rem;margin:1.5rem auto;text-align:left}
.selected-publications:focus-visible{outline:2px solid var(--accent)}
@media(max-width:850px){.selected-publications{grid-auto-columns:calc((100% - 1rem)/2)}}
@media(max-width:480px){.selected-publications{grid-auto-columns:100%}}
.selected-publications li{min-width:0;scroll-snap-align:start;padding:0 0 .85rem;border-bottom:1px solid var(--rule)}
.selected-publications a{display:block;text-decoration:none}
.selected-publications a:hover strong{text-decoration:underline}
.selected-publications span{display:block;color:var(--muted);font-size:.92rem}
.selected-publications p>strong{color:#16365c}
.publication-image{display:grid;place-items:center;aspect-ratio:16/10;margin-bottom:.75rem;background:#f2f7fb;border:1px dashed var(--rule)}
.publication-image img{width:100%;height:100%;object-fit:contain}

@media(prefers-reduced-motion:no-preference){
  main>.wrap>section,.gallery-timeline .timeline-entry{transition:opacity .55s ease-out,transform .55s ease-out}
  :is(main>.wrap>section,.gallery-timeline .timeline-entry).reveal-pending:not(:target):not(:focus-within){opacity:0;transform:translateY(18px)}
}

.publication-years{gap:.5rem 1rem;margin:1.5rem 0;color:var(--accent)}
.publication-list section{border-top:1px solid var(--rule);margin-top:1.5rem}
.publication-list section h2{margin-top:1.3rem}
.publication-list li+li{margin-top:.65rem}

.research-overview{max-width:42rem;margin:1.5rem auto 2rem}
.research-overview img{display:block;width:100%;height:auto}
.research-overview figcaption{margin-top:.65rem;color:var(--muted);font-size:.9rem}

.gallery-preview{display:flex;gap:.65rem;overflow-x:auto;scroll-snap-type:x proximity;max-width:56rem;margin-inline:auto;padding-bottom:.6rem}
.gallery-preview img{display:block;flex:none;width:clamp(9rem,26%,14rem);height:auto;aspect-ratio:4/3;object-fit:cover;scroll-snap-align:start}
.timeline-intro{color:var(--muted)}
.news-timeline p{margin:0 0 .35rem}
.news-timeline .news-name{color:#16365c}
.news-tag{display:inline-block;padding:0 .45em;margin-right:.35em;border:1px solid currentColor;border-radius:.25em;font-size:.8em;line-height:1.4}
.news-tag-funding{color:#a32c2c}
.news-tag-research{color:#246b49}
.news-tag-member{color:#16365c}
.news-tag-teaching{color:#68478c}
.news-timeline img{display:block;width:min(100%,18rem);height:auto;margin-top:.65rem}
.news-photo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;max-width:36rem}
.news-photo-pair figure{margin:0}
.news-photo-pair img{width:100%}
.news-photo-pair .news-poster-crop{aspect-ratio:1280/1707;object-fit:cover;object-position:33% center}
.news-photo-pair figcaption{font-size:.875rem;color:var(--muted);margin-top:.35rem}
.activity-timeline{list-style:none;padding-left:1.2rem;margin:2rem 0 0;border-left:1px solid var(--rule)}
.activity-timeline li+li{margin-top:1rem}
.news-detail{max-width:60rem}
.news-detail .news-timeline li{position:relative}
.news-detail .news-timeline li+li{margin-top:clamp(1.5rem,3.5vw,2.5rem)}
.news-detail .news-timeline li::before{content:"";position:absolute;top:.4rem;left:calc(-1.2rem - 4px);width:7px;height:7px;border-radius:50%;background:var(--accent)}
.timeline-entry{position:relative}
.timeline-entry::before{content:"";position:absolute;top:1.7rem;left:-1.45rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
.timeline-entry h2{margin:.45rem 0 .65rem;text-transform:none;letter-spacing:0}
.timeline-image{display:grid;place-items:center;aspect-ratio:3/1;margin:.75rem 0;border:1px dashed var(--rule);background:#fff;color:var(--muted)}
.gallery-detail{max-width:62rem}
.gallery-timeline figure{display:grid;gap:1rem;margin:0}
.gallery-photo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.gallery-timeline img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.gallery-timeline .gallery-group-photo img{aspect-ratio:16/9}
.gallery-photo-pair img{aspect-ratio:1}
.gallery-photo-pair .gallery-wide-photo{grid-column:1 / -1;aspect-ratio:4/3}
.gallery-timeline li+li{margin-top:clamp(3rem,7vw,6rem)}
@media(min-width:700px){
  .gallery-timeline figure{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:center;gap:2rem}
  .gallery-timeline li:nth-child(even) figure{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .gallery-timeline li:nth-child(even) figcaption{grid-area:1/1}
}
.gallery-group-photo{position:relative;overflow:hidden}
.gallery-group-photo::after{content:"";position:absolute;inset:0 0 auto;height:12%;pointer-events:none;backdrop-filter:blur(4px);mask-image:linear-gradient(#000 35%,transparent)}

.research-overview.native-resolution img{width:auto;max-width:100%;margin-inline:auto}

.flow-research-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.5rem 0 2rem}
.flow-research-figures>*{margin:0;padding:.75rem;border:1px solid var(--rule);background:#fff}
.flow-research-figures img,.flow-research-figures .research-figure-slot{display:block;width:100%;height:auto;aspect-ratio:739/419;object-fit:contain}
.flow-research-figures figcaption{margin-top:.65rem;font-weight:600;text-align:center}
@media(max-width:650px){.flow-research-figures{grid-template-columns:1fr}}

.flow-research-figures>figure{padding:.45rem}
.high-energy-figures img{aspect-ratio:4/3}

.flow-research-figures.interface-figures>figure{padding:.25rem}
.flow-research-figures.interface-figures img{aspect-ratio:auto}

.publication-image img:is([src="featured-selective-membranes.png"],[src="featured-current-collectors.png"],[src="featured-electrolyte-interphases.png"],[src="featured-zinc-interphases.png"],[src="featured-lifetime-prediction.png"],[src="featured-polymer-electrolytes.png"],[src="featured-electrolyte-screening.png"],[src="featured-fire-retardant-separator.png"],[src="featured-materials-screening.png"],[src="featured-hydrogen-evolution.png"],[src="featured-battery-safety.png"]){mix-blend-mode:multiply}

.publication-image img[src="featured-hydrated-micropores.png"]{mix-blend-mode:multiply;clip-path:polygon(0 0,3% 0,3% 10%,8% 10%,8% 0,100% 0,100% 100%,0 100%)}
.publication-image img[src="featured-hydrated-micropores.png"]{width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:930/754}

.publication-image img[src="featured-microporous-membranes.png"]{
  height:auto;
  mix-blend-mode:multiply;
  clip-path:polygon(4% 0,97% 0,97% 15%,100% 15%,100% 100%,0 100%,0 15%,4% 15%);
}