:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-400-normal.woff2) format('woff2')}@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-600-normal.woff2) format('woff2')}@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-700-normal.woff2) format('woff2')}@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-400-normal.woff2) format('woff2')}@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-500-normal.woff2) format('woff2')}@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-400-normal.woff2) format('woff2')}@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-400-italic.woff2) format('woff2')}
:root{--bg:#080a09;--paper:#f1f0e9;--ink:#101311;--acid:#c9ff42;--muted:#9da39d;--line:#2b302d;--mono:"DM Mono",monospace;--sans:"Manrope",sans-serif;--serif:"Newsreader",Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--paper);font-family:var(--sans);font-size:16px}a{color:inherit;text-decoration:none}.nav{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:#080a09eF;backdrop-filter:blur(14px);z-index:20}.brand{display:flex;gap:7px;align-items:baseline;letter-spacing:-.06em;font-size:19px}.brand span{font-weight:500}.brand b{font-weight:800}.brand i{font-family:var(--mono);font-size:11px;color:var(--acid);font-style:normal;letter-spacing:.08em}nav{display:flex;gap:34px;align-items:center;font-size:15px}nav>a:not(.join){color:#bfc3bd;padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}nav>a:not(.join):hover{color:white}nav>a.active{color:var(--acid)!important;border-bottom-color:var(--acid)}.join{border:1px solid #6d756d;padding:10px 15px;border-radius:100px}.join span{color:var(--acid);margin-left:8px}
.hero{min-height:calc(100vh - 78px);display:grid;grid-template-columns:1.02fr .98fr;overflow:hidden}.hero-copy{padding:13vh 7vw 10vh 8vw;display:flex;flex-direction:column;justify-content:center}.eyebrow{font:500 11px var(--mono);letter-spacing:.16em;color:var(--acid);text-transform:uppercase;margin:0 0 28px}.hero h1{font-size:clamp(64px,8.7vw,145px);line-height:.88;letter-spacing:-.075em;margin:0;max-width:850px}.hero h1 em,.join-section h2 em{font-family:var(--serif);font-weight:400;color:var(--acid)}.lede{font-size:20px;line-height:1.45;color:#c4c8c2;max-width:560px;margin:42px 0}.actions{display:flex;align-items:center;gap:28px}.button{background:var(--acid);color:var(--ink);padding:16px 20px;border-radius:100px;font-weight:700;font-size:13px;display:inline-flex;gap:20px}.textlink{font-size:13px;border-bottom:1px solid #606660;padding-bottom:5px}.hero-art{position:relative;min-height:700px;background:#151a17;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-art img{width:76%;height:76%;object-fit:contain;filter:grayscale(1) contrast(1.2);mix-blend-mode:screen;opacity:.72;position:relative;z-index:2}.hero-art:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 25%,#080a09 78%);z-index:3}.caption{position:absolute;bottom:25px;left:30px;font:11px var(--mono);color:#89908a;z-index:4}.orb{position:absolute;border-radius:50%;filter:blur(50px);opacity:.45}.orb1{width:300px;height:300px;background:#c9ff42;top:18%;right:20%}.orb2{width:240px;height:240px;background:#38a9ff;bottom:18%;left:10%}
.statement{background:var(--paper);color:var(--ink);padding:13vw 12vw}.statement .eyebrow{color:#536020}.statement h2{font-size:clamp(42px,6vw,90px);line-height:.95;letter-spacing:-.065em;max-width:1200px;margin:0 0 55px}.statement h2 span{font-family:var(--serif);font-weight:400}.statement>p:last-child{font-size:18px;line-height:1.6;max-width:650px;color:#50554e}
.research{padding:12vw 8vw}.section-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:70px}.section-head h2{font-size:clamp(45px,6vw,86px);line-height:.9;letter-spacing:-.065em;margin:0;width:65%}
.visual-break{height:75vh;min-height:560px;position:relative;overflow:hidden;background:#0d0f0e}.visual-break img{width:100%;height:100%;object-fit:cover;opacity:.25;filter:grayscale(1) contrast(1.5)}.big-type{position:absolute;z-index:2;left:8vw;top:50%;transform:translateY(-50%);font-size:clamp(70px,13vw,210px);line-height:.78;letter-spacing:-.09em;font-weight:800}.big-type span{font-family:var(--serif);font-weight:400;color:var(--acid)}
.people{padding:12vw 8vw;background:#e8e7df;color:var(--ink)}.people .eyebrow{color:#536020}.people .section-head{margin-bottom:55px}.people-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#bbbdb7}.person{background:#e8e7df;padding:18px 18px 28px}.avatar{height:290px;background:#b7b9b1;display:flex;align-items:center;justify-content:center;font:700 48px var(--mono);letter-spacing:-.08em;margin-bottom:24px;filter:grayscale(1)}.person.featured{grid-column:span 1}.person h3{font-size:18px;letter-spacing:-.03em;margin:0 0 5px}.person p{font:11px var(--mono);color:#60655f;margin:0 0 24px}.person span{font-size:12px;line-height:1.45;color:#666b64}.avatar.photo{padding:0;overflow:hidden;filter:grayscale(1) contrast(1.08)}.avatar.photo svg{width:100%;height:100%;display:block}.note{font:11px var(--mono);color:#777b75;margin-top:35px}
.papers{padding:12vw 8vw}.paper{display:grid;grid-template-columns:100px 1fr 50px;gap:30px;padding:28px 0;border-top:1px solid var(--line);align-items:center}.paper span{font:11px var(--mono);color:var(--acid)}.paper h3{font-size:25px;letter-spacing:-.035em;margin:0 0 8px}.paper p{font:11px var(--mono);color:#727970;margin:0}.paper>a{color:var(--acid);display:flex;justify-content:flex-end}.paper-more{border-top:1px solid var(--line);padding-top:30px;margin-top:20px}.paper-more a{font:12px var(--mono)}
.join-section{background:var(--acid);color:var(--ink);padding:10vw 8vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw}.join-section .eyebrow{color:#44520e}.join-section h2{font-size:clamp(60px,8vw,125px);line-height:.84;letter-spacing:-.08em;margin:0}.join-copy{padding-top:45px}.join-copy>p:first-child{font-size:22px;line-height:1.4;max-width:570px}.button.light{background:var(--ink);color:white;margin-top:20px}.tiny{font:11px var(--mono);line-height:1.7;margin-top:45px}
footer{padding:50px 8vw;display:flex;justify-content:space-between;align-items:flex-start;color:#7f877f;font-size:11px;line-height:1.6}footer .brand{color:white}footer>a{color:var(--acid)}
@media(max-width:850px){html{scroll-padding-top:120px}.nav{height:auto;flex-wrap:wrap;padding:14px 5vw 0;row-gap:6px}nav{width:100%;gap:0;justify-content:space-between;font-size:12px;overflow-x:auto}nav>a{padding:10px 0!important}nav .join{border:0;padding:10px 0!important;color:var(--acid)}.hero{grid-template-columns:1fr}.hero-copy{padding:80px 7vw 70px}.hero-art{min-height:55vh}.statement,.research,.people,.papers,.join-section{padding:80px 7vw}.section-head{display:block}.section-head h2{width:100%;margin-top:20px}.people-grid{grid-template-columns:repeat(2,1fr)}.avatar{height:240px}.join-section{grid-template-columns:1fr;gap:0}.join-copy{padding-top:40px}.visual-break{height:55vh}.paper{grid-template-columns:60px 1fr 30px}.paper h3{font-size:19px}footer{display:block;padding:40px 7vw}footer p,footer>a{display:block;margin-top:25px}}
@media(max-width:520px){.people-grid{grid-template-columns:1fr}.hero h1{font-size:65px}.lede{font-size:17px}.actions{align-items:flex-start;flex-direction:column;gap:20px}}

.nav{top:env(safe-area-inset-top,0px)}
.ph{position:relative;z-index:2;font:11px var(--mono);color:#89908a;border:1px dashed #3a403c;padding:120px 40px;text-align:center;max-width:76%}
.grn{margin:26px 0 8px}.grn svg{width:100%;max-width:440px;height:auto;display:block}.grn figcaption{font:11px var(--mono);color:#69716a;letter-spacing:.06em;margin-top:8px}.grn figcaption b{font-weight:500;color:var(--acid)}.grn figcaption i{font-style:normal;color:#ff7a6b}
.where{padding:12vw 8vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:start;border-top:1px solid var(--line)}.where h2{font-size:clamp(45px,6vw,86px);line-height:.9;letter-spacing:-.065em;margin:0 0 40px}.where h2 em{font-family:var(--serif);font-weight:400;color:var(--acid)}.where address{font-style:normal;font-size:17px;line-height:1.6;color:#c4c8c2}.where address b{color:var(--paper);font-weight:700}.where .textlink{display:inline-block;margin-top:30px}.map{position:relative;aspect-ratio:4/3;background:#151a17;border:1px solid var(--line);overflow:hidden}.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:850px){.where{grid-template-columns:1fr;padding:80px 7vw;gap:40px}}

.people-grid{grid-template-columns:repeat(4,1fr)}
.person{display:flex;flex-direction:column}
.avatar{height:230px}
.person span{flex:1}
.person .mail{display:block;font:11px var(--mono);color:#415c28;margin-top:16px;word-break:break-all;border-bottom:1px solid #c2c4bd;padding-bottom:10px}
.person .emo{font-size:13px;margin-top:12px;line-height:1.5}
.person.lula .avatar{height:140px;font-size:34px}
.alumni{margin-top:60px;border-top:1px solid #bbbdb7;padding-top:28px}
.alumni h3{font:500 12px var(--mono);letter-spacing:.1em;margin:0 0 18px;color:#4a4f48}
.alumni ul{list-style:none;padding:0;margin:0;columns:2;column-gap:44px;font-size:13px;line-height:1.85;color:#565b54}
@media(max-width:850px){.people-grid{grid-template-columns:repeat(2,1fr)}.alumni ul{columns:1}}
@media(max-width:520px){.people-grid{grid-template-columns:1fr}}

.avatar.photo img{width:100%;height:100%;object-fit:cover;display:block}
.person.lula .avatar.lulapic{height:auto;aspect-ratio:640/518;background:#b7b9b1}
.person.lula .avatar.lulapic img{height:auto;object-fit:contain}

.person.lula{grid-column:1/-1;flex-direction:row;gap:28px;align-items:flex-start;padding-top:28px}
.person.lula .avatar.lulapic{width:300px;flex:0 0 300px;aspect-ratio:640/518;margin-bottom:0}
.person.lula .lula-text{display:flex;flex-direction:column}
@media(max-width:620px){.person.lula{flex-direction:column}.person.lula .avatar.lulapic{width:100%;flex:none}}

.maplink{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:var(--acid);transition:background .25s}
.maplink:hover{background:#1a211c}
.maplink b{font-size:15px;font-weight:600}
.maplink em{font:11px var(--mono);font-style:normal;color:#89908a;letter-spacing:.06em;max-width:260px;line-height:1.6}

/* hero: the image itself now carries transparency, so nothing behind it can read as a panel */
.hero-art{background:#080a09}
.hero-art img.hero-img{filter:none;mix-blend-mode:normal;opacity:1;width:94%;height:94%}
.hero-art:after{display:none}

.dfig{margin:0 0 4px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.dfig img{height:clamp(190px,26vh,260px);width:auto;max-width:100%}
.dfig figcaption{font:11px var(--mono);color:#69716a;letter-spacing:.06em;line-height:1.6;max-width:320px}

.vfig{margin:0 0 4px;display:flex;flex-direction:column;gap:10px}
.vfig video{width:100%;max-width:440px;height:auto;border:1px solid var(--line);background:#000}
.vfig figcaption{font:11px var(--mono);color:#69716a;letter-spacing:.06em;line-height:1.6;max-width:340px}

.vfig{position:relative}
.vtoggle{align-self:flex-start;background:transparent;border:1px solid #3a413c;color:#aeb3ad;font:11px var(--mono);letter-spacing:.08em;padding:5px 11px;border-radius:100px;cursor:pointer}
.vtoggle:hover{color:var(--acid);border-color:var(--acid)}

#allpapers .paper p{line-height:1.7}
.paper-more button{background:transparent;border:1px solid #3a413c;color:var(--paper);font:12px var(--mono);letter-spacing:.06em;padding:11px 20px;border-radius:100px;cursor:pointer;transition:border-color .2s,color .2s}
.paper-more button:hover{color:var(--acid);border-color:var(--acid)}
.pnote{font:11px var(--mono);color:#69716a;line-height:1.8;margin:26px 0 0}

.funders{background:var(--paper);color:var(--ink);padding:70px 8vw}
.funders .eyebrow{color:#536020;margin-bottom:18px}
.funders .ftext{font-size:15px;line-height:1.65;max-width:62ch;color:#50554e;margin:0 0 34px}
.flogos{width:100%;max-width:1100px;height:auto;display:block}
@media(max-width:850px){.funders{padding:56px 7vw}}

/* the green glow sat directly behind the specimen; pushed to the corners and dimmed */
.hero-art .orb{opacity:.16;filter:blur(80px)}
.hero-art .orb1{width:230px;height:230px;top:4%;right:4%}
.hero-art .orb2{width:200px;height:200px;bottom:6%;left:4%;opacity:.13}

/* one soft halo centred behind the specimen, kept faint so the centre stays clean */
.hero-art .orb1{width:min(58%,430px);height:min(58%,430px);top:50%;right:auto;left:50%;transform:translate(-50%,-50%);opacity:.13;filter:blur(90px)}
.hero-art .orb2{display:none}

.dfig{align-items:center;text-align:center}
.dfig img{margin-inline:auto}
.dfig figcaption{margin-inline:auto}

.grn{display:flex;flex-direction:column;align-items:center;text-align:center}
.grn svg{margin-inline:auto}
.grn figcaption{margin-inline:auto}

/* eight portraits in a three-column grid leave one empty cell; the grid's own
   background was showing through it as a grey square. Hairlines now come from
   the cards themselves, so an empty cell shows nothing. */
.people-grid{background:transparent;gap:0;border-top:1px solid #bbbdb7;border-left:1px solid #bbbdb7}
.person{border-right:1px solid #bbbdb7;border-bottom:1px solid #bbbdb7}

/* no glow behind the hero at all */
.hero-art .orb{display:none}

.person .cvlink{display:inline-block;font:11px var(--mono);letter-spacing:.06em;color:#415c28;border-bottom:1px solid #9aa38c;padding-bottom:2px;margin-top:14px;align-self:flex-start}
.person .cvlink:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* CV link sits directly under the bio rather than being pushed to the card foot */
.person .cvlink{display:block;width:fit-content;margin-top:10px}

.person .cvlink{margin-top:28px}

.joindetail{background:var(--paper);color:var(--ink);padding:9vw 8vw}
.joindetail .eyebrow{color:#536020}
.jd-lead{font-size:19px;line-height:1.55;max-width:58ch;margin:0 0 60px;color:#3d423b}
.jd-lead a{color:#415c28;border-bottom:1px solid #9aa38c}
.jd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;border-top:1px solid #c5c7c0;padding-top:40px}
.jd-grid h3,.jd-env h3{font-size:19px;letter-spacing:-.02em;margin:0 0 16px}
.jd-grid p,.jd-env p{font-size:14px;line-height:1.7;color:#50554e;margin:0 0 14px;max-width:46ch}
.jd-note{font:11px var(--mono);color:#6d7268;margin-top:18px}
.jd-link{display:inline-block;font:11px var(--mono);letter-spacing:.06em;color:#415c28;border-bottom:1px solid #9aa38c;padding-bottom:3px;margin-top:8px}
.jd-link:hover{color:var(--ink);border-bottom-color:var(--ink)}
.jd-env{display:grid;grid-template-columns:1.25fr 1fr;gap:46px;margin-top:64px;border-top:1px solid #c5c7c0;padding-top:40px}
@media(max-width:900px){.joindetail{padding:70px 7vw}.jd-grid{grid-template-columns:1fr;gap:38px}.jd-env{grid-template-columns:1fr;gap:34px}}

.grn,.vfig,.dfig{min-width:0;max-width:100%}
.grn svg,.vfig video,.dfig img{max-width:100%;height:auto}

/* section headings: label above the heading, both flush left, matching the rest of the page */
.section-head{display:block}
.section-head h2{width:auto;max-width:20ch;margin-top:16px}

/* the accent colour is this band's background, so the emphasised word was invisible */
.join-section h2 em{color:#1d2a06}

/* recruiting sentence now sits in the green band, under the heading */
.join-section .jd-lead{color:#25310c;font-size:17px;line-height:1.6;max-width:44ch;margin:26px 0 0;text-align:left}
.join-section .jd-lead a{color:#25310c;border-bottom:1px solid #6d8a2e}
.join-section .jd-lead a:hover{border-bottom-color:#25310c}

/* wider text column; the button sits out at the right of the band */
.join-section{grid-template-columns:1.6fr 1fr;gap:5vw}
.join-section .jd-lead{max-width:58ch}
.join-copy{display:flex;justify-content:flex-end;align-items:flex-start}
@media(max-width:850px){.join-section{grid-template-columns:1fr}.join-copy{justify-content:flex-start}}

.join-section .jd-lead{max-width:none;padding-right:2vw}

/* keep the recruiting line to two lines on narrower desktops too */
@media(min-width:851px) and (max-width:1200px){.join-section .jd-lead{font-size:15.5px}}

@media(min-width:851px) and (max-width:1200px){
  .join-section .jd-lead{font-size:15px;line-height:1.55;padding-right:0}
  .join-section{grid-template-columns:1.9fr 1fr;gap:3.5vw}
}

/* one green family: both darks rebuilt at the accent's own hue (77°) */
.person .mail, .jd-link, .person .cvlink{color:#526525}
.jd-lead a{color:#526525;border-bottom-color:#9aa38c}
.join-section h2 em{color:#212c07}
.join-section .jd-lead{color:#212c07}
.join-section .jd-lead a{color:#212c07;border-bottom-color:#6d8a2e}
/* publication years are data, not actions — green is reserved for things you can click */
.paper > span{color:#7f877f}

/* Join band joins the section below it: one pale block instead of a green slab */
.join-section{background:var(--paper);color:var(--ink);padding-bottom:0}
.join-section h2 em{color:#526525}
.join-section .jd-lead{color:#3d423b}
.join-section .jd-lead a{color:#526525;border-bottom-color:#9aa38c}
.join-section .button.light{background:var(--acid);color:var(--ink)}
.joindetail{padding-top:70px}

/* heading green: brightest step of the family that still holds contrast on pale */
.join-section h2 em{color:#6d8f12}

/* the whole recruitment block on acid: heading, positions and facilities as one green section */
.join-section,.joindetail{background:var(--acid);color:var(--ink)}
.join-section h2 em{color:#212c07}
.join-section .jd-lead{color:#25310c}
.join-section .jd-lead a{color:#25310c;border-bottom-color:#6d8a2e}
.join-section .button.light{background:var(--ink);color:#fff}
.joindetail .jd-grid,.joindetail .jd-env{border-top-color:#a8d431}
.joindetail h3{color:var(--ink)}
.joindetail p{color:#2c3a10}
.joindetail .jd-note{color:#3f4f18}
.joindetail .jd-link{color:#25310c;border-bottom-color:#6d8a2e}
.joindetail .jd-link:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* acid on the heading band only; the positions and facilities stay pale */
.join-section{background:var(--acid);color:var(--ink);padding-bottom:9vw}
.join-section h2 em{color:#212c07}
.join-section .jd-lead{color:#25310c}
.join-section .jd-lead a{color:#25310c;border-bottom-color:#6d8a2e}
.join-section .button.light{background:var(--ink);color:#fff}
.joindetail{background:var(--paper);color:var(--ink);padding-top:9vw}
.joindetail .jd-grid,.joindetail .jd-env{border-top-color:#c5c7c0}
.joindetail p{color:#50554e}
.joindetail .jd-note{color:#6d7268}
.joindetail .jd-link{color:#526525;border-bottom-color:#9aa38c}
@media(max-width:900px){.join-section{padding-bottom:56px}.joindetail{padding-top:56px}}

.join-section{padding-bottom:4.5vw}
.joindetail{padding-top:6vw}
@media(max-width:900px){.join-section{padding-bottom:44px}.joindetail{padding-top:48px}}

/* research overview: the lab's position, ahead of the four projects */
.rlead{max-width:66ch;margin:0 0 64px}
.rlead p{font-size:18px;line-height:1.65;color:#c4c8c2;margin:0 0 18px}
.rlead p:first-child{font-size:21px;color:var(--paper);line-height:1.5}
.rlead p:last-child{margin-bottom:0;color:#aeb3ad}
@media(max-width:850px){.rlead{margin-bottom:46px}.rlead p{font-size:16px}.rlead p:first-child{font-size:18px}}

/* team portraits are square photos: a square frame shows each one whole instead of cropping heads */
.person:not(.lula) .avatar.photo{height:auto;aspect-ratio:1/1}

/* hero specimen a little smaller, so it sits inside the dark field rather than filling it */
.hero-art img.hero-img{width:76%;height:76%}

/* team tools: each tool opens in a full-height panel, in its own frame, so its styles and scripts stay separate from the site's */
.tools{padding:12vw 8vw;background:#e8e7df;color:var(--ink)}
.tools .section-head{margin-bottom:24px}
.tools-lede{font-size:18px;line-height:1.6;max-width:60ch;color:#50554e;margin:0 0 56px}
.tool{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px 48px;align-items:center;padding:32px 0;border-top:1px solid #bbbdb7;border-bottom:1px solid #bbbdb7}
.tool h3{font-size:25px;letter-spacing:-.035em;margin:0 0 10px}
.tool p{font-size:15px;line-height:1.6;color:#50554e;margin:0;max-width:62ch}
.tool-open{background:var(--ink);color:#fff;border:0;border-radius:100px;padding:16px 20px;font:700 13px var(--sans);cursor:pointer;display:inline-flex;gap:20px;white-space:nowrap}
.tool-open:hover{background:#26302a}
.tool-open:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tool-dialog{position:fixed;inset:0;margin:0 auto;padding:0;border:0;width:min(1080px,100%);max-width:100%;height:100%;max-height:100%;background:#f6f7f5;color:var(--ink);overflow:hidden}
.tool-dialog[open]{display:flex;flex-direction:column}
.tool-dialog::backdrop{background:rgba(8,10,9,.86)}
.tool-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(12px + env(safe-area-inset-top,0px)) 18px 12px;background:var(--bg);color:var(--paper);border-bottom:1px solid var(--line)}
.tool-bar span{font:500 11px var(--mono);letter-spacing:.12em;color:#aeb3ad}
.tool-close{background:transparent;border:1px solid #6d756d;color:var(--paper);border-radius:100px;padding:9px 15px;font:600 12px var(--sans);cursor:pointer}
.tool-close:hover{border-color:var(--paper)}
.tool-close:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.tool-dialog iframe{flex:1;min-height:0;width:100%;border:0;background:#f6f7f5}
@media(max-width:850px){.tools{padding:80px 7vw}.tools-lede{font-size:16px;margin-bottom:40px}.tool{grid-template-columns:minmax(0,1fr)}.tool-open{justify-self:start}}

.person.lula{border-right:0;border-bottom:0}

.person.lula{margin-left:-1px}

.person.lula{border:1px solid #bbbdb7;margin-left:-1px;margin-top:-1px}

.person.lula{margin-top:22px}

/* Lula sits a little apart from the grid; this covers the 1px of grid border that
   would otherwise run through the gap */
.person.lula{position:relative}
.person.lula::before{content:"";position:absolute;left:-1px;top:-23px;width:1px;height:23px;background:#e8e7df}

.funders .ftext{max-width:90ch}

/* research overview: use the full column width, two columns rather than long lines */
.rlead{max-width:1140px;columns:46ch 2;column-gap:64px}
.rlead p:first-child{column-span:all;max-width:46ch;margin-bottom:26px}
.rlead p{break-inside:avoid}
@media(max-width:850px){.rlead{column-count:1;max-width:66ch}}

/* award films */
.jd-watch{margin-top:44px;border-top:1px solid #c5c7c0;padding-top:34px}
.jd-watch h3{font-size:19px;letter-spacing:-.02em;margin:0 0 16px}
.vidlink{display:inline-flex;align-items:center;gap:16px;max-width:600px;padding:14px 20px 14px 16px;border:1px solid #c5c7c0;background:#edece4;color:var(--ink);text-decoration:none;transition:background .25s,border-color .25s}
.vidlink:hover{background:#e3e1d7;border-color:#9aa38c}
.vidlink:focus-visible{outline:2px solid #526525;outline-offset:3px}
.vidlink .vplay{flex:none;width:34px;height:34px;border-radius:50%;background:var(--acid);color:#101311;display:flex;align-items:center;justify-content:center;font-size:13px;padding-left:2px}
.vidlink b{display:block;font-size:15px;letter-spacing:-.01em}
.vidlink em{display:block;font:11px var(--mono);font-style:normal;color:#60655f;letter-spacing:.06em;line-height:1.6;margin-top:5px}
.flink{margin-top:26px}
@media(max-width:520px){.vidlink{align-items:flex-start}}

/* in-page film player */
button.vidlink{font:inherit;text-align:left;cursor:pointer}
button.flink{background:none;border:0;border-bottom:1px solid #9aa38c;cursor:pointer;font:11px var(--mono);letter-spacing:.06em;color:#526525;padding:0 0 3px;margin-top:26px;display:inline-block}
button.flink:hover{color:var(--ink);border-bottom-color:var(--ink)}
.vdialog{position:fixed;inset:0;margin:auto;padding:0;border:0;width:min(1000px,92vw);max-width:92vw;background:#0d110d;color:var(--paper);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vdialog[open]{display:flex;flex-direction:column}
.vdialog::backdrop{background:rgba(8,10,9,.88)}
.vbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px 12px 18px;border-bottom:1px solid #27302a}
.vdtitle{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#aeb3ad}
.vclose{background:transparent;border:1px solid #6d756d;color:var(--paper);border-radius:100px;padding:7px 14px;font:600 12px var(--sans);cursor:pointer}
.vclose:hover{border-color:var(--paper)}
.vframe{position:relative;aspect-ratio:16/9;background:#000}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vfallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:0;padding:24px;text-align:center;font-size:14px;color:#aeb3ad}
.vfallback a{color:var(--acid)}

/* films section */
.films{padding:9vw 8vw;border-top:1px solid var(--line)}
.films .section-head{margin-bottom:46px}
.film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1140px}
.filmcard{display:flex;align-items:flex-start;gap:18px;text-align:left;font:inherit;cursor:pointer;padding:24px 26px;background:#111611;border:1px solid var(--line);color:var(--paper);transition:background .25s,border-color .25s,transform .25s}
.filmcard:hover{background:#161c16;border-color:#3b453c;transform:translateY(-3px)}
.filmcard:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.filmcard .vplay{flex:none;width:38px;height:38px;border-radius:50%;background:var(--acid);color:#101311;display:flex;align-items:center;justify-content:center;font-size:14px;padding-left:3px}
.filmcard b{display:block;font-size:17px;letter-spacing:-.02em}
.filmcard em{display:block;font:11px var(--mono);font-style:normal;color:#8d968e;letter-spacing:.06em;line-height:1.7;margin-top:7px}
@media(max-width:850px){.films{padding:70px 7vw}.film-grid{grid-template-columns:1fr}}

.vbar-right{display:flex;align-items:center;gap:14px}
.vout{font:600 12px var(--sans);color:var(--acid);text-decoration:none;border-bottom:1px solid rgba(201,255,66,.45)}
.vout:hover{border-bottom-color:var(--acid)}

/* films band: deep green, distinct from the research band above */
.films{background:#0e1a0d}
.films .filmcard{background:#132314;border-color:#27432a}
.films .filmcard:hover{background:#172b18;border-color:#3b6340}

/* films band opens with the same thin grey line as the other dark sections */
.films{border-top:1px solid var(--line)}

.brand b{font-weight:500}

/* one tool, so a single rule introducing the list rather than a box around it */
.tools .tool{border-bottom:0;border-top-color:#d2d1c9}

.mfig{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.mpanels{display:flex;gap:18px;width:100%;max-width:520px}
.mpanels svg{flex:1 1 0;min-width:0;height:auto;display:block;overflow:visible}
.mfig figcaption{font:11px var(--mono);color:#69716a;letter-spacing:.06em;line-height:1.7;text-align:center;max-width:56ch}
.mfig figcaption b{font-weight:500;color:var(--acid)}
.mfig figcaption .gm{color:#8fbf9f}.mfig figcaption .pm{color:#d395ad}

@media(max-width:620px){.mpanels{flex-direction:column;align-items:center;gap:26px}.mpanels svg{flex:none;width:100%;max-width:300px}}

/* funders: separate logos, one row on wide screens, even 4- and 2-column rows below;
   multiply lets white logo backgrounds take the band's own colour */
.flist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,auto);justify-content:space-between;align-items:center;gap:30px 24px;max-width:1210px}
.flist li{display:flex;align-items:center;min-width:0}
.flist img{display:block;height:var(--h);width:auto;max-width:100%;mix-blend-mode:multiply}
@media(max-width:1280px){.flist{grid-template-columns:repeat(4,auto);max-width:860px}}
@media(max-width:620px){.flist{grid-template-columns:repeat(2,auto);justify-content:start;gap:26px 40px}.flist img{height:calc(var(--h)*.9)}}
/* method lines: one step smaller than captions so they hold one line, and wrap evenly when they must */

/* team tools on the deep green of the films band: green marks the two "extras" sections,
   and the pale recruitment block above no longer meets a second, near-identical pale */
.tools{background:#0e1a0d;color:var(--paper)}
.tools .tools-lede{color:#b9c0b6}
.tools .tool{border-top-color:#27432a}
.tools .tool p{color:#aeb3ad}
.tools .tool-open{background:var(--acid);color:var(--ink)}
.tools .tool-open:hover{background:#dcff7d}
.tools .tool-open:focus-visible{outline-color:var(--acid)}

/* Join us: lime outline and text so the recruiting link stands out in the header
   without competing with the filled lime button in the hero; it fills on hover */
.nav .join{border-color:var(--acid);color:var(--acid);transition:background .2s,color .2s}
@media(min-width:851px){.nav .join:hover,.nav .join:focus-visible{background:var(--acid);color:var(--ink)}}

/* the header no longer marks the section in view; links only brighten on hover */

/* Contact section: contact line under the address, name then email in lime as in the footer */
.where .contact{font-size:17px;line-height:1.6;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline}
.where .contact b{color:var(--paper);font-weight:700}
.where .contact a{color:var(--acid);overflow-wrap:anywhere}
.where .contact a:hover{border-bottom:1px solid var(--acid)}

/* Contact section: photograph of the institute building in place of the map panel */
.bfig{margin:0;min-width:0;border:1px solid var(--line);background:#0d0f0e}
.bfig img{display:block;width:100%;height:auto}

/* lab name set like the hero headline: bold sans for the name, lime serif italic for "Lab" */
.brand{gap:6px}
.brand span{font-family:var(--sans);font-weight:700;letter-spacing:-.05em}
.brand i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;letter-spacing:-.02em;color:var(--acid)}

/* statement band starts on the same left edge as the hero and the section headings */
@media(min-width:851px){.statement{padding-inline:8vw}}
/* the wider line left one word alone on the second line; balance the two lines instead */
.statement h2{text-wrap:balance}

/* The lead was laid out with CSS multi-columns, which let the browser decide where to
   break. At some widths that pushed "We work on this..." below "Each step...", so the
   right-hand column no longer started level with "Variation appears at every scale".
   An explicit two-column grid places each paragraph instead of letting it flow:
   the opening line spans both columns, paragraphs 2 and 3 sit in the left column,
   paragraph 4 in the right, and the two columns start on the same line at every width. */
@media(min-width:851px){
  .rlead{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;row-gap:0;
         align-content:start;align-items:start;max-width:none;columns:auto}
  .rlead>p:nth-child(1){grid-column:1/-1;max-width:calc(50% - 40px)}
  .rlead>p:nth-child(2){grid-column:1;grid-row:2}
  .rlead>p:nth-child(3){grid-column:1;grid-row:3}
  .rlead>p:nth-child(4){grid-column:2;grid-row:2/4}
}
@media(min-width:851px) and (max-width:1099px){.rlead{column-gap:56px}}

/* research lines: one topic per row, stacked down the page. The title has a line of
   its own across the row; under it the text sits in the left column and its figure
   faces it in the right column, both starting on the same line. The columns share
   the 80px gutter of the introduction above. Every row has the same height, set by
   the fullest one. */
.rlines{border-top:1px solid var(--line)}
.rline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px;row-gap:26px;align-items:start;align-content:start;min-height:480px;padding-block:56px;border-bottom:1px solid var(--line)}
.rline:last-child{border-bottom:0}
/* narrower windows wrap the text onto more lines, so the shared height is taller there */
@media(min-width:851px) and (max-width:999px){.rline{min-height:505px}}
@media(min-width:851px){.research{padding-bottom:calc(12vw - 56px)}}
.rline>h3{grid-column:1/-1;font-size:clamp(30px,3.1vw,44px);line-height:1.05;letter-spacing:-.045em;margin:0;text-wrap:balance}
.rtext{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.rtext>p{font-size:18px;line-height:1.6;color:#aeb3ad;margin:0 0 18px;max-width:52ch}
.rtext>p a{color:var(--acid);text-decoration:none;border-bottom:1px solid rgba(201,255,66,.45)}
.rtext>p a:hover{border-bottom-color:var(--acid)}
.rtext>p.collab{font:11px var(--mono);color:#8d968e;letter-spacing:.04em;line-height:1.6;margin:8px 0 14px}
.rtext small{font:10px var(--mono);color:#69716a;letter-spacing:.08em;line-height:1.7;margin-top:8px}
/* 4px down: the first line of text has that much space above its letters, and the drawings
   carry about as much inside their own frame; the film has none, so it gets 8px */
.rline>figure{margin:4px 0 0;min-width:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;text-align:center}
.rline>figure.vfig{margin-top:8px}
.rline>figure figcaption{margin:0;max-width:48ch}
.rline .grn svg{width:100%;max-width:520px;height:auto}
.rline .dfig img{width:auto;height:auto;max-width:100%;max-height:225px}
.rline .dfig figcaption,.rline .vfig figcaption{max-width:none}
.rline .vfig video{width:100%;max-width:420px;height:auto}
.rline .vfig .vtoggle{align-self:center}
.rline .mpanels{max-width:540px}
@media(max-width:850px){
  .rline{grid-template-columns:minmax(0,1fr);row-gap:20px;min-height:0;padding-block:52px}
  .rline:last-child{padding-bottom:0}
  .rline>h3{font-size:28px}
  .rline>figure,.rline>figure.vfig{margin-top:14px}
  .rtext>p{font-size:16px}
}

/* header shares the page's side margins, so the lab name starts on the same left edge
   as the hero headline and the section headings, and "Join us" ends on their right edge */
.nav{padding-inline:8vw}
@media(max-width:850px){.nav{padding-inline:7vw}}

/* nav links at 14px: between 851 and 1023px the bar runs out of room and the lab name
   and the recruiting button were each wrapping onto two lines. Tighten the gaps there
   only; above 1024px the original 34px spacing is kept. */
@media(min-width:851px) and (max-width:1023px){header.nav nav{gap:20px}}

/* team: four portraits per row at every desktop width, as asked. The 851-1199px
   band used to drop to three; it no longer does. */

/* alumni: label and entries a step up from the small sizes they were set at.
   break-inside stops a two-line entry being split across the column break. */
.alumni h3{font-size:17px}
.alumni ul{font-size:15px;line-height:1.8}
.alumni li{break-inside:avoid}

/* profile bios at the alumni size. 15px over a 265px column needs more leading
   than 1.45 gave at 12px. */
.person span{font-size:15px;line-height:1.55}

/* method lines set as capitals throughout. Done in CSS, not in the markup, so the
   source stays readable and a screen reader does not spell the words out letter by
   letter. Capitals need a little more tracking than lower case. */
.rtext small{text-transform:uppercase;letter-spacing:.1em}

/* panel captions: even out the last line instead of leaving one or two words stranded */
.rline>figure figcaption{text-wrap:balance;letter-spacing:.04em}

/* panel descriptions all at the research panels' size: the recruitment positions,
   the facilities and the tool were at 14 and 15px. */
.jd-grid p:not(.jd-note),.jd-env p:not(.jd-note),.tool p{font-size:18px;line-height:1.6}
/* .jd-note asks for 11px monospace but has always lost to the .jd-grid p rule above it,
   so these two notes have been rendering at the body size since the panels were built.
   This restores the size every other small mono note on the page uses. */
.jd-grid p.jd-note,.jd-env p.jd-note{font-size:11px;line-height:1.7}

/* the collaboration credits inherited the 52ch cap meant for the body text above them,
   which is narrower than the line needs, so "Stowers Institute, Kansas City" was being
   split across two lines. They are one short credit each; let them use the column. */
.rtext>p.collab{max-width:none}

/* ============================================================================
   TYPE SCALE PASS
   Every element that does the same job now uses the same size, and where two
   sizes were in use for one job the larger one wins. Sizes are only those that
   were already somewhere on the page: 12, 15, 18, 19, 21 for the sans, 12 for
   the small monospace labels. Display sizes are untouched.
   ========================================================================= */

/* 1. section lead paragraph - was 21 (research), 20 (hero), 18 (tools), 17 (join) */
.lede{font-size:21px;line-height:1.45}
.tools .tools-lede{font-size:21px;line-height:1.5}
.join-section .jd-lead{font-size:21px;line-height:1.45}
@media(min-width:851px) and (max-width:1200px){.join-section .jd-lead{font-size:21px;line-height:1.45}}

/* 2. body prose - was 18 (research, panels, tools) and 15 (bios, funders, alumni),
      plus 17 in the contact block */
.person span{font-size:18px;line-height:1.5}
.funders .ftext{font-size:18px;line-height:1.6}
.alumni ul{font-size:18px;line-height:1.7}
.where address,.where .contact{font-size:18px;line-height:1.6}

/* 3. card and panel headings - was 19 (recruitment, facilities) and 18 (people), 17 (films) */
.person h3,.lula-text h3{font-size:19px}
.filmcard b{font-size:19px}

/* 4. buttons - was 15 on the recruiting pill in the bar and 13 everywhere else */
.button,.tool-open{font-size:15px}

/* 5. small monospace labels - was 12 (view all publications), 11 (most), 10 (method lines) */
.eyebrow,.rtext>p.collab,.person .mail,.person p,.person .cvlink,.jd-link,.jd-note,
.jd-grid p.jd-note,.jd-env p.jd-note,.grn figcaption,.dfig figcaption,.vfig figcaption,
.mfig figcaption,.rline>figure figcaption,.paper p,.paper>span,.pnote,.filmcard em,
.tool-bar span,.vdtitle,.alumni ul li .nothing{font-size:12px}
.rtext small{font-size:12px}
footer{font-size:12px}

/* 6. remaining one-off sizes folded onto the 15px UI step: the Google Maps link
      (13), the film-card play glyph (14), the player's fallback notice (14) and
      the emoji row (13) were each the only element at their size. */
.textlink{font-size:15px}
.filmcard .vplay,.vidlink .vplay{font-size:15px}
.vfallback,.vfallback a{font-size:15px}
.person .emo{font-size:15px}

/* long proper nouns held together by no-break spaces must still be able to break
   on a very narrow phone rather than widening the page */
.jd-lead,.lede,.ftext,.rtext>p,.person span,.alumni li{overflow-wrap:break-word}


/* research panels: the title keeps its place at the top of the row; the text and its
   figure are centred in the height left under it. The second grid row takes the free
   space and both items centre inside it. Desktop only - below 851px the panel is a
   single column with no spare height to centre in. */
@media(min-width:851px){
  .rline{grid-template-rows:auto 1fr;align-content:stretch;align-items:center}
  .rline>h3{align-self:start}
  .rline>figure,.rline>figure.vfig{margin-top:0}
}

/* the film is a denser object than the line drawings beside it, so at the same width
   it read as heavier. 360px brings its height to 184px, matching the mate-copying
   panels and sitting just under the two diagrams. */
.rline .vfig video{max-width:360px}

/* the mate-copying caption was capped at 48ch, two characters short of holding its
   first sentence, so "pink." fell to a line of its own. 56ch fits it; the no-break
   spaces around "or" keep "green or pink" together if a narrow column still wraps. */
.rline>figure.mfig figcaption{max-width:56ch}
/* at 15px two columns are too narrow below ~1100px: ten of the fourteen entries
   wrapped. One column there instead. */
@media(max-width:1099px){.alumni ul{columns:1}}