@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');:root{--ink:#112b2b;--muted:#637574;--cream:#f3f4ee;--paper:#fafaf7;--green:#b9ed70;--teal:#145c58;--line:#dce3dc;--orange:#ed8e59}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}
.site-header{height:88px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(250,250,247,.94);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:11px;font:700 16px 'DM Mono',monospace;letter-spacing:.08em}
.brand small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:5px;letter-spacing:.07em}
.brand-mark{height:36px;width:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--green);font:700 17px Manrope}
.nav{display:flex;gap:30px;align-items:center}
.nav a{font-size:16px;color:#49605d;transition:.2s}
.nav a:hover,.nav a.active{color:var(--ink);font-weight:700}
.menu-toggle{display:none;border:0;background:none;font-size:22px;color:var(--ink)}.hero{padding:90px 9vw 82px;display:grid;grid-template-columns:1fr .9fr;gap:5vw;align-items:center;min-height:565px;background:var(--cream)}.eyebrow{font:500 10px 'DM Mono',monospace;letter-spacing:.14em;color:#678079;margin:0 0 18px}.hero h1,
.page-hero h1{font:600 clamp(42px,5.7vw,77px)/1.02 Manrope,sans-serif;letter-spacing:-.065em;margin:0;max-width:690px}
.lede{font-size:17px;line-height:1.7;color:#556966;max-width:550px;margin:24px 0 0}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:33px}
.button{display:inline-flex;align-items:center;gap:28px;background:var(--ink);color:white;padding:15px 19px;font-size:12px;border-radius:3px;transition:.2s}
.button:hover{background:var(--teal);transform:translateY(-2px)}.button span,
.text-link span,.under-link span{font-size:16px}
.text-link,.under-link{font-size:12px;font-weight:700;border-bottom:1px solid #9ab7a8;padding-bottom:5px}
.hero-note{margin-top:58px;font:10px 'DM Mono',monospace;color:#6d817a;letter-spacing:.04em}
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8fc846;margin-right:8px;box-shadow:0 0 0 4px #dfeccd}
.hero-art{height:405px;border-radius:48% 48% 45% 45%;position:relative;overflow:hidden;background:radial-gradient(ellipse at 52% 42%,#3e8170 0,#245c59 35%,#143e41 69%,#102d32 100%);box-shadow:inset 0 0 60px #092326}
.hero-art{background: transparent !important;box-shadow: none !important;}
.hero-art:before{content:'';position:absolute;inset:0;background:linear-gradient(130deg,transparent 20%,#ffffff13 45%,transparent 65%)}
.hero-art img { position: relative !important;  inset: auto !important;  width: 100% !important;  height: auto !important;object-fit: contain !important;}
.orbit{position:absolute;border:1px solid #c2e7c568;border-radius:50%;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-28deg)}
.orbit-one{width:230px;height:330px}
.orbit-two{width:330px;height:260px;transform:translate(-50%,-50%) rotate(44deg)}
.orbit-three{width:390px;height:130px;transform:translate(-50%,-50%) rotate(-10deg)}
.particle{position:absolute;border-radius:50%;background:#dbff9b;box-shadow:0 0 24px 5px #c6ff8466}
.p1{width:14px;height:14px;top:27%;left:37%}
.p2{width:9px;height:9px;top:62%;left:67%}
.p3{width:7px;height:7px;top:48%;left:25%}
.p4{width:11px;height:11px;top:72%;left:43%}
.p5{width:6px;height:6px;top:30%;left:70%}
.art-label{position:absolute;left:9%;bottom:17%;color:#f0ffe0;font:11px 'DM Mono';letter-spacing:.06em}
.art-label span{margin-left:20px}
.art-caption{position:absolute;right:8%;top:13%;writing-mode:vertical-rl;color:#d4e6d383;font:9px 'DM Mono';letter-spacing:.18em}
.ticker{height:58px;background:var(--green);display:flex;align-items:center;justify-content:center;gap:4vw;font:10px 'DM Mono';letter-spacing:.15em}
.ticker i{font-style:normal;color:#4b7739}.section{padding:94px 9vw}
.intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw;align-items:start}
.section h2,.join-row h2{font:600 clamp(30px,4vw,48px)/1.08 Manrope;letter-spacing:-.055em;margin:0}
.body-large{font-size:18px;line-height:1.75;color:#516562;margin:0 0 24px}
.focus-section{background:#f1f4ed}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:35px}
.section-heading h2{margin-top:0}
.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.focus-card{height:270px;border-radius:4px;padding:24px;position:relative;overflow:hidden;color:#f4f5ee;display:flex;flex-direction:column;justify-content:space-between}
.card-index{font:10px 'DM Mono';letter-spacing:.1em;opacity:.7}
.focus-card h3{font:600 27px/1.08 Manrope;letter-spacing:-.04em;z-index:2}
.card-dark{background:#193d3e}
.card-blue{background:#4d7770}
.card-ochre{background:#c98355}
.card-arrow{position:absolute;bottom:23px;right:24px;font-size:20px;z-index:2}
.rings{position:absolute;width:230px;height:230px;border:1px solid #c5ee845c;border-radius:50%;right:-66px;top:44px;box-shadow:0 0 0 24px #c5ee8414,0 0 0 49px #c5ee8410}
.wave{position:absolute;width:220px;height:190px;border:1px solid #d7ffb545;border-radius:48%;right:-30px;top:85px;transform:rotate(-30deg);box-shadow:0 0 0 17px #d7ffb51a,0 0 0 38px #d7ffb514}
.molecule{position:absolute;right:32px;top:67px;font:800 98px Manrope;color:#ffe3c344}
.quote-band{padding:78px 12vw;background:#183d3c;color:#f2f5ee;text-align:center}
.quote-band p{font:500 clamp(24px,3vw,37px)/1.3 Manrope;letter-spacing:-.04em;max-width:820px;margin:0 auto 22px}
.quote-band span{font:10px 'DM Mono';letter-spacing:.14em;color:#bddeaf}
.join-row{background:var(--green);display:flex;align-items:center;justify-content:space-between;padding-top:60px;padding-bottom:60px}
.join-row h2{font-size:35px}.button-light{background:var(--ink)}
.footer{padding:29px 6vw;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:11px;color:#71817b}
.footer-brand{color:var(--ink)}
.footer-brand .brand-mark{width:30px;height:30px;font-size:14px}
.page-hero{padding:96px 12vw 82px;background:var(--cream)}
.page-hero h1{font-size:clamp(45px,6.2vw,78px)}
.page-hero .lede{max-width:640px}

.research-list{padding-top:24px;padding-bottom:30px}
.research-item{padding:48px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:65px 1fr 380px;gap:25px;align-items:center}
.research-num{align-self:start;padding-top:4px;color:#91a39a;font:12px 'DM Mono'}
.research-item h2{font-size:30px;margin:0 0 13px}
.research-item p:not(.eyebrow){color:#63736e;max-width:720px;line-height:1.7;font-size:14px}.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.tag-row span{padding:6px 9px;background:#edf1e9;color:#62766c;font:9px 'DM Mono';border-radius:2px}
.research-art{height:180px;border-radius:0;display:grid;place-items:center;position:relative;overflow:hidden}
.research-art>span{font:700 29px Manrope;z-index:2;color:#fff}
.research-art i{position:absolute;width:88px;height:120px;border:1px solid #ffffff70;border-radius:50%;transform:rotate(42deg)}
.research-art i:nth-of-type(2){transform:rotate(-42deg);width:130px}
.research-art i:nth-of-type(3){width:175px;height:80px;transform:rotate(10deg)}

.art-amber{background:radial-gradient(circle,#e3ae70,#b96d45)}
.art-blue{background:radial-gradient(circle,#87c6ad,#397c79)}
.art-green{background:radial-gradient(circle,#bedc76,#668950)}
.art-purple{background:radial-gradient(circle,#b4a2cf,#665a82)}
.group-lead{display:grid;grid-template-columns:270px 1fr;gap:7vw;align-items:center}
.portrait-placeholder{height:325px;background:linear-gradient(150deg,#d8e4d4,#94b6a1);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;color:#32655b}
.portrait-placeholder span{font:700 90px Manrope;opacity:.65}
.portrait-placeholder small{font:9px 'DM Mono';letter-spacing:.12em}
.group-lead h2{margin-bottom:10px}.role{font-size:14px;color:var(--teal);margin-bottom:22px}
.group-lead p:not(.eyebrow){line-height:1.7;color:#5e706b;font-size:14px}

.small-note{font-size:11px!important;color:#89958f!important;line-height:1.6}
.group-section{background:#f1f4ed}.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.person-card{background:#fafbf8;padding:16px 16px 23px}
.person-photo{height:220px;display:grid;place-items:center;color:#fff;font-size:34px;margin-bottom:21px}
.photo-one{background:linear-gradient(145deg,#58857b,#c1cb99)}
.photo-two{background:linear-gradient(145deg,#66868d,#d4a576)}

.person-card h3{font:600 21px Manrope;margin:0 0 8px}
.person-card p:not(.eyebrow){color:#71807b;font-size:13px;line-height:1.6}
.person-card .eyebrow{font-size:9px}.join-card{background:#173e3d;color:#f2f6ee;padding:28px}

.join-card p:not(.eyebrow){color:#bed0c5}
.join-card a{display:inline-block;margin-top:12px;color:var(--green);font-size:12px}
.join-symbol{font-size:27px;color:var(--green);margin:5px 0 26px}

.pub-list{padding-top:40px}.pub-tools{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--ink);font:10px 'DM Mono';letter-spacing:.1em}
.pub-item{display:grid;grid-template-columns:90px 1fr 45px;gap:15px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.pub-year{font:12px 'DM Mono';color:#889890}.pub-item h3{font:600 22px Manrope;margin:0 0 8px;letter-spacing:-.03em}
.pub-item p:not(.eyebrow){font-size:13px;color:#75817b;margin:0}
.pub-open{font-size:20px;justify-self:end}

.gallery-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px 18px;padding-bottom:35px}
.gallery-tile{margin:0}.tile-wide{grid-column:span 2}.gallery-art{height:230px;display:grid;place-items:center;border-radius:3px;position:relative;overflow:hidden}
.gallery-art span{font:10px 'DM Mono';letter-spacing:.14em;color:#ffffffc5}.tile-wide
.gallery-art{height:290px}
.art-landscape{background:linear-gradient(170deg,#acc3b2 0 30%,#587b69 31% 55%,#344e4a 56% 100%)}
.art-landscape:after{content:'';position:absolute;bottom:0;left:0;right:0;height:38%;background:linear-gradient(165deg,transparent 25%,#1e4340 26% 47%,transparent 48%),linear-gradient(20deg,#193f3b 0 52%,transparent 53%)}
.art-instrument{background:linear-gradient(130deg,#c1c9bc,#526c66)}
.art-sky{background:linear-gradient(#e6b779,#e88b5d 50%,#596f6a)}
.art-team{background:linear-gradient(135deg,#7a9485,#c3c68e)}
.art-particles{background:radial-gradient(circle at 40% 40%,#e8da94 0 2px,transparent 3px),radial-gradient(circle at 70% 60%,#b9e889 0 3px,transparent 4px),radial-gradient(circle at 55% 70%,#f7b363 0 2px,transparent 3px),#275452;background-size:32px 32px,43px 43px,28px 28px,auto}
.gallery-tile figcaption{display:flex;justify-content:space-between;gap:8px;margin-top:12px;font-size:12px}
.gallery-tile figcaption span{font-size:10px;color:#89958f}
.contact-hero{padding-bottom:100px}.contact-hero .button{margin-top:30px}.contact-hero .small-note{margin-top:15px}

.contact-details{display:grid;grid-template-columns:1fr 1fr;gap:6vw}
.contact-details h2{font-size:28px}
.contact-details p:not(.eyebrow){color:#61726d;line-height:1.8;font-size:14px}
.contact-details a{border-bottom:1px solid #b9c7bc}
.contact-details a:hover{color:var(--teal)}@media(max-width:850px){.site-header{padding:0 5vw}.nav{gap:16px}.hero{padding:70px 7vw;grid-template-columns:1fr 0.8fr}.hero-art{height:330px}.section{padding:72px 7vw}.page-hero{padding:75px 8vw}
                                                                  
.research-item{grid-template-columns:40px 1fr 170px}
.research-art{height:135px}.gallery-grid{grid-template-columns:1fr 1fr}.tile-wide{grid-column:span 2}}@media(max-width:650px){.site-header{height:72px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:71px;left:0;right:0;background:var(--paper);padding:18px 6vw 24px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.nav.is-open{display:flex}

.hero{grid-template-columns:1fr;padding:60px 7vw 50px;gap:38px}
.hero h1{font-size:49px}
.hero-art{height:300px;width:min(100%,370px);justify-self:center}
.hero-note{margin-top:35px}.ticker{gap:3vw;font-size:8px}
.ticker span:last-child{display:none}
.intro-grid{grid-template-columns:1fr;gap:25px}
.focus-grid{grid-template-columns:1fr}
.focus-card{height:220px}
.section-heading{align-items:start;gap:18px;flex-direction:column}
.join-row{align-items:flex-start;gap:28px;flex-direction:column}
.join-row h2{font-size:30px}
.footer{align-items:flex-start;gap:16px;flex-direction:column}
.page-hero{padding:62px 7vw}
.page-hero h1{font-size:49px}
.research-item{grid-template-columns:35px 1fr;gap:15px;padding:35px 0}
.research-art{grid-column:2;width:100%;max-width:230px}
.research-item h2{font-size:25px}
.group-lead{grid-template-columns:1fr;gap:35px}
.portrait-placeholder{height:300px;max-width:300px}
.people-grid{grid-template-columns:1fr}
.person-photo{height:250px}
.pub-item{grid-template-columns:55px 1fr 25px;gap:10px}
.pub-item h3{font-size:18px}
.pub-tools{gap:20px;align-items:flex-start;flex-direction:column}
.gallery-grid{grid-template-columns:1fr}
.tile-wide{grid-column:auto}
.gallery-art,.tile-wide .gallery-art{height:230px}
.contact-details{grid-template-columns:1fr}}

.group-lead .role {margin-bottom: 8px;}
.group-lead .role + p {margin-top: 0;}

.molecule-logo {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.molecule-logo .viewer_3Dmoljs {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gallery-art {position: relative;overflow: hidden;}
.gallery-art img {display: block;width: 100%;height: 100%;object-fit: cover;}

.gallery-art img.van-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #e8ece7;
}

/* Air-pollution section only: heading left, compact cards right. */
section.ap-burden {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) !important;
  gap:16px 32px;
  align-items:center;
}
section.ap-burden > .ap-heading {
  grid-column:1 !important;
  grid-row:1 !important;
  min-width:0;
}
section.ap-burden > .ap-grid {
  grid-column:2 !important;
  grid-row:1 !important;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  width:100%;
  max-width:none !important;
  margin:0 !important;
  min-width:0;
}
section.ap-burden .ap-card { padding:18px; min-width:0; }
section.ap-burden .ap-region { font-size:16px; }
section.ap-burden .ap-number { font-size:clamp(22px,2.5vw,34px); }
section.ap-burden > .ap-note,
section.ap-burden > details,
section.ap-burden > noscript { grid-column:1 / -1; }
@media(max-width:700px) {
  section.ap-burden { grid-template-columns:1fr !important; }
  section.ap-burden > .ap-heading { grid-column:1 !important; grid-row:1 !important; }
  section.ap-burden > .ap-grid { grid-column:1 !important; grid-row:2 !important; }
  section.ap-burden .ap-card { padding:16px; }
}
@media(max-width:420px) {
  section.ap-burden > .ap-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .molecule-logo {
    /* Rotation is controlled by JavaScript, not CSS. */
  }
}

/* Let the container follow the image's height */
.hero-art {
  height: auto !important;
}

.hero-art img {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Enlarge the artwork on desktop */
@media (min-width: 851px) {
  .hero {
    grid-template-columns: 1fr 1.2fr;
    gap: 3vw;
  }
}

/* Research cards with image backgrounds */
.focus-card {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

/* Dark overlay for readable titles */
.focus-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(4, 24, 30, 0.65),
    rgba(4, 24, 30, 0.1)
  );
  z-index: -1;
  pointer-events: none;
}

/* Keep text and arrows above the images */
.focus-card .card-index,
.focus-card h3,
.focus-card .card-arrow {
  position: relative;
  z-index: 1;
  color: #fff;
}

/* Hide the old decorative graphics */
.focus-card .rings,
.focus-card .wave,
.focus-card .molecule {
  display: none;
}

/* Fit complete research images */
.focus-grid > .focus-card {
  height: auto !important;
  aspect-ratio: 3 / 2;
  box-sizing: border-box;

  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Remove original decorative shapes */
.focus-card .rings,
.focus-card .wave,
.focus-card .molecule {
  display: none !important;
}
