:root{--cells-hero:url('assets/watercolor/cells-in-context-hero.webp');--cells-context:url('assets/watercolor/cells-in-context-border.webp')}
/* HHMI watercolor visual system: original artwork, quiet paper, restrained washes. */
:root{--ink:#343639;--muted:#5b6065;--paper:#eeece7;--line:#d9d9ce;--mint:#e9e7e1;--red:#91394d;--sage:#617f97;--blue:#617f97}
body{background:var(--paper)}
main{overflow:clip}
header{background:rgba(238,236,231,.97);backdrop-filter:blur(12px)}
.institution{background:#343639;color:#f4f4eb}
h1 em,h2 em{color:var(--red)}
.category{color:#617f97}
.button{background:#963c53;border-color:#963c53}
.button:hover{background:#743044}
nav{gap:24px}
.hero{position:relative;isolation:isolate;grid-template-columns:.9fr 1.1fr;gap:35px;min-height:690px;padding-block:85px 80px;align-items:center}
.hero::before{content:'';position:absolute;inset:0 calc((min(1240px,100vw - 112px) - 100vw)/2);z-index:-1;background:linear-gradient(90deg,rgba(250,248,243,.7),rgba(250,248,243,.3)),var(--cells-context) center/cover;opacity:.65;pointer-events:none}
.hero-copy{position:relative;z-index:1}
.hero h1{font-size:clamp(43px,4.5vw,65px)}
.hero-science.watercolor-hero{max-width:none;width:100%;margin:0;padding:0;justify-self:stretch;align-self:center}
.watercolor-art-link{display:block;mix-blend-mode:multiply;transition:transform .25s ease}
.watercolor-art-link:hover{transform:translateY(-4px)}
.watercolor-art-link img{width:100%;height:auto}
.hero-science figcaption{font-size:11px;margin-top:24px;line-height:1.7;text-align:center;color:#55645b}
.hero-science figcaption span{display:block;margin:0 0 6px;font-size:8px;color:var(--red);letter-spacing:.16em}
.art-caption-link{display:block;width:fit-content;margin:12px auto 0;font-size:10px;color:#6d766c;border-bottom:1px solid #bdc5b7;padding-bottom:2px}
.art-caption-link span{margin-left:10px}
.mission-band{background:#e8ede2;background-image:linear-gradient(90deg,#e8ede2ed,#f7f7edbf),var(--cells-context);background-size:cover;background-position:center 75%}
.mission-band p{font-size:25px}
.intro{position:relative}
.intro h2 em{color:var(--sage)}
.heritage{position:relative;isolation:isolate;border-block:1px solid var(--line);background:#f1f0e9}
.heritage::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.14;background:var(--cells-context) left bottom/cover;pointer-events:none}
.heritage-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:start}
.heritage-intro h2{font-size:clamp(36px,3.7vw,51px)}
.heritage-intro .lead{font-size:20px;margin-top:30px;color:#41464b}
.heritage-intro>p:not(.lead){font-size:14px;color:var(--muted);margin-top:22px;max-width:470px}
.heritage-intro>.text-link{margin-top:27px}
.heritage-timeline{padding:0;margin:5px 0 0;list-style:none}
.heritage-timeline li{display:grid;grid-template-columns:73px minmax(0,1fr);gap:23px;position:relative;padding:0 0 33px}
.heritage-timeline li:not(:last-child)::before{content:'';position:absolute;left:81px;top:15px;bottom:-8px;border-left:1px solid #c3cbbe}
.heritage-timeline li::after{content:'';position:absolute;left:78px;top:9px;width:7px;height:7px;background:#9c5d66;border-radius:50%;box-shadow:0 0 0 5px #f1f0e9}
.heritage-year{font:15px Georgia,serif;color:var(--red);line-height:1.6;white-space:nowrap}
.heritage-timeline h3{font:23px/1.25 Georgia,serif;margin-bottom:12px;letter-spacing:-.02em}
.heritage-timeline p{font-size:13px;line-height:1.8;color:#596068}
.heritage-sources{display:flex;flex-wrap:wrap;gap:7px 17px;margin-top:14px;font-size:10px;color:#526d71}
.heritage-sources a{border-bottom:1px solid #b2c4c5}
.heritage-now{padding-bottom:0!important}
.heritage-now .heritage-year{font:10px/2 Arial,sans-serif;letter-spacing:.1em}
.heritage-now .text-link{margin-top:14px;font-size:10px}
.research{background:#fbfaf6;position:relative;isolation:isolate}
.research::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.13;background:var(--cells-context) center top/100% auto repeat-y;pointer-events:none}
.story-art-frame::before{content:'';position:absolute;inset:-19px -22px;border-radius:50%;z-index:-1;background:var(--cells-context) center/cover;opacity:.52;mask-image:radial-gradient(ellipse,#000 30%,transparent 72%)}
.story-copy{border-color:#d1d8ca}
.story-copy p{color:#596068}
.story-prompt{color:#617f97}
.circuits{background:#faf8f3;border-bottom:1px solid var(--line)}
.circuits .section-heading{margin-bottom:24px}
.circuits .section-heading>p{max-width:340px}
.circuits-figure{max-width:1000px;margin:0 auto}
.circuits-figure img{width:100%;mix-blend-mode:multiply}
.circuits-figure figcaption{text-align:center;font-size:11px;color:#657066;margin-top:10px}
.circuits-key{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;max-width:1000px;margin:36px auto 0;border-top:1px solid var(--line);padding-top:27px}
.circuits-key>div{position:relative;padding-left:30px}
.circuits-key h3{font:21px Georgia,serif;margin-bottom:9px}
.circuits-key p{font-size:12px;color:var(--muted);max-width:240px}
.paint-mark{position:absolute;top:4px;left:0;width:14px;height:14px;border-radius:43% 57% 39% 61%;box-shadow:2px 2px 0 2px #ffffff44}
.paint-mark.burgundy{background:#ad5264}.paint-mark.charcoal{background:#343639}.paint-mark.blue{background:#8eb6d2}
.approach{background:#eaf0ed;color:var(--ink);position:relative;isolation:isolate}
.approach::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.11;background:var(--cells-context) center/cover}
.approach .eyebrow{color:#617f97}.approach h2 em{color:#637f91}.approach .lead{color:#596068}
.context-tabs{border-color:#b9c9c1}.context-tabs button{color:#61717f}.context-tabs button[aria-selected=true]{color:#343639}.context-tabs button[aria-selected=true]:after{background:#8d4759}
.context-panel p{color:#596068}.approach .text-link{color:#49687f;border-color:#a3b5c3}
.approach-figure{position:relative}.approach-figure img{border:8px solid #f7f8f0;outline:1px solid #bacbc2;box-shadow:15px 18px 0 #d4e0d350}
.approach-figure figcaption,.approach-figure figcaption span{color:#61717f}
.publication.featured{background:#eef0e5}
.people{background:linear-gradient(110deg,#edf0e9ea,#faf8f3ef),var(--cells-context) center/cover}
.pi>img,.person>img{border:6px solid #fafaf5;outline:1px solid #c8d2c4;box-shadow:9px 12px 0 #d7dfd240}
.contact{color:var(--ink);background:linear-gradient(90deg,#faf8f3ee,#faf8f3b3),var(--cells-context) center/cover;border-block:1px solid #d6dacc}
.contact h2 em{color:var(--red)}.contact .eyebrow{color:#617f97}.contact p{color:#596068}.contact-details{border-color:#b7c3cb}
.contact .button.light{background:#963c53;border-color:#963c53;color:#fff}.contact .button.light:hover{background:#743044}
@media(min-width:1500px){.hero{gap:45px}.hero h1{font-size:68px}}
@media(max-width:1100px){nav{gap:18px}.hero{gap:25px}.hero h1{font-size:53px}.heritage-grid{gap:55px}.hero::before{inset-inline:-36px}}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:35px;padding-block:50px;min-height:0}.hero-copy{max-width:600px}.hero h1{font-size:55px}.hero h1 br:first-of-type{display:none}.hero-science.watercolor-hero{max-width:650px;width:100%;margin-inline:auto}.hero::before{inset-inline:-24px}.heritage-grid{grid-template-columns:1fr;gap:45px}.heritage-intro>p:not(.lead){max-width:680px}.heritage-timeline{max-width:680px}.circuits-key{gap:25px}.approach-grid{gap:35px}}
@media(max-width:600px){.hero h1{font-size:44px}.hero .actions{gap:24px}.hero-science figcaption{font-size:10px}.hero-science figcaption span{display:block;margin:0 0 6px}.hero-science.watercolor-hero{width:calc(100% + 24px);max-width:none;margin-left:-12px}.mission-band p{font-size:22px}.heritage-intro h2{font-size:38px}.heritage-intro .lead{font-size:19px}.heritage-timeline li{grid-template-columns:63px minmax(0,1fr);gap:20px}.heritage-timeline li:not(:last-child)::before{left:68px}.heritage-timeline li::after{left:65px}.heritage-year{font-size:13px}.heritage-timeline h3{font-size:22px}.circuits-key{grid-template-columns:1fr;gap:23px;margin-top:25px}.circuits-key p{max-width:100%}.circuits-figure{width:calc(100% + 24px);margin-left:-12px}.circuits-figure figcaption{padding-inline:15px;font-size:10px}.contact-details{border-color:#b7c3cb}.story-art-frame::before{inset:-12px}}
@media(prefers-reduced-motion:reduce){.watercolor-art-link:hover{transform:none}}
@media print{.hero::before,.heritage::before,.research::before,.approach::before,.story-art-frame::before{display:none}.heritage-grid{display:block}.heritage-timeline{margin-top:30px}.circuits-figure{max-width:550px}.contact,.people,.mission-band{background:#fff}.heritage-timeline li{break-inside:avoid}}

/* Cells in different contexts, painted into a light grey-beige ground. */
.hero-cell-background{display:block;min-height:720px;padding-block:90px 85px}
.hero-cell-background .hero-copy{max-width:540px;width:47%}
.hero-cell-background::before{background:linear-gradient(90deg,#eeece7 0%,#eeece7e6 20%,#eeece700 45%),var(--cells-hero) right center/auto 100% no-repeat;opacity:.88}
.hero-cell-background .hero-copy>p{color:#555e65}
.mission-band{background:#e6e4de}
.heritage{background:#eeece7}
.heritage::before{opacity:.22;background-size:100% auto;background-repeat:no-repeat;background-position:center top}
.heritage-timeline li::after{box-shadow:0 0 0 5px #eeece7}
.research{background:#f0eee9}
.research::before{opacity:.23;background-size:100% auto;background-position:center top;background-repeat:repeat-y}
.story-art-frame::before{opacity:.38}
.circuits{background:#eeece7}
.approach{background:#e8e7e1}
.approach::before{opacity:.22;background-size:cover}
.people{background:linear-gradient(110deg,#eeece7bd,#eeece7d9),var(--cells-context) center/cover}
.publication.featured{background:#e7e5de}
.publication:hover{background:#e9e7e1}
.pi>img,.person>img{border-color:#efede7;outline-color:#c9cac0;box-shadow:9px 12px 0 #d9d7cd66}
.approach-figure img{border-color:#efede7}
.contact{background:linear-gradient(90deg,#eeece7eb,#eeece7a6),var(--cells-context) center/cover}
.story-dialog{background:#f1efea}
@media(min-width:1500px){.hero-cell-background{min-height:760px}.hero-cell-background::before{background-size:auto,auto 100%}}
@media(max-width:1100px) and (min-width:801px){.hero-cell-background{min-height:690px}.hero-cell-background .hero-copy{width:48%}.hero-cell-background::before{background-position:center,right -110px center;background-image:linear-gradient(90deg,#eeece7 0%,#eeece7e0 28%,#eeece700 52%),var(--cells-hero)}}
@media(max-width:800px){.hero-cell-background{min-height:0;padding-block:55px 360px}.hero-cell-background .hero-copy{max-width:600px;width:100%}.hero-cell-background::before{background:linear-gradient(180deg,#eeece7 0%,#eeece7 48%,#eeece700 65%),var(--cells-hero) right bottom/auto 430px no-repeat;opacity:.88}.heritage::before{background-size:auto 700px;opacity:.16}.research::before{background-size:auto 850px;opacity:.16}.people{background:linear-gradient(110deg,#eeece7d9,#eeece7e0),var(--cells-context) center/auto 100%}.contact{background:linear-gradient(90deg,#eeece7e8,#eeece7c7),var(--cells-context) center/cover}}
@media(max-width:600px){.hero-cell-background{padding-block:45px 320px}.hero-cell-background::before{background-size:auto,auto 360px;background-position:center,right -35px bottom}.hero-cell-background .hero-copy>p{font-size:15px}.heritage{background:#eeece7}.research{background:#f0eee9}}
@media print{.hero-cell-background{min-height:0;padding-block:30px}.hero-cell-background .hero-copy{width:100%}.people,.contact,.mission-band,.heritage,.research,.approach,.circuits{background:#fff}}

/* Quiet cell vignettes carry the visual language between the major sections. */
.intro,.publications,.news{position:relative;isolation:isolate}
.intro::before,.publications::before,.news::before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0 calc((min(1240px,100vw - 112px) - 100vw)/2);background-repeat:no-repeat}
.intro::before{background-image:var(--cells-context);background-size:100% auto;background-position:left bottom;opacity:.22;mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 53%)}
.publications::before{background-image:var(--cells-hero);background-size:auto 100%;background-position:right center;opacity:.19;mask-image:linear-gradient(90deg,transparent 20%,#000 78%)}
.news::before{background-image:var(--cells-context);background-size:100% auto;background-position:center 68%;opacity:.22}
.research::before{background-size:100% auto;opacity:.26}
.people{background:linear-gradient(110deg,#eeece7b5,#eeece7ce),var(--cells-context) center/cover}
.contact{background:linear-gradient(90deg,#eeece7e6,#eeece78c),var(--cells-context) center/cover}
.publication.featured{background:#e7e5dedb}
.publication:hover{background:#e9e7e1ed}
.story-copy p,.pi p,.person p,.news-grid p{color:#555e65}
@media(max-width:1100px){.intro::before,.publications::before,.news::before{inset-inline:-36px}}
@media(max-width:800px){.intro::before,.publications::before,.news::before{inset-inline:-24px}.intro::before{background-size:auto 700px;opacity:.15;mask-image:linear-gradient(180deg,#000,transparent 70%)}.publications::before{background-size:auto 850px;opacity:.13}.news::before{background-size:auto 100%;opacity:.17}.research::before{background-size:auto 850px;opacity:.17}.people{background:linear-gradient(110deg,#eeece7cf,#eeece7db),var(--cells-context) center/auto 100%}.contact{background:linear-gradient(90deg,#eeece7e0,#eeece7bd),var(--cells-context) center/cover}}
@media print{.intro::before,.publications::before,.news::before{display:none}}

/* Compact academic lineage within Kevin’s biography. */
.nav-contact,.text-link{border-color:#a8b7c2}
.pi>img{align-self:start}
.kevin-lineage{margin-top:25px;padding:20px 0 0;border-top:1px solid #c4cbd0;max-width:760px}
.lineage-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.lineage-heading h4{font:23px/1.2 Georgia,serif;margin:0;color:var(--ink)}
.lineage-heading>a{font-size:11px;color:var(--blue);white-space:nowrap;border-bottom:1px solid #a8b7c2}
.pi .lineage-guide{font-size:11px;margin:9px 0 18px;color:var(--muted)}
.lineage-columns{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:20px}
.lineage-branch{--branch:#617f97;min-width:0}.lineage-black{--branch:#343639}.lineage-red{--branch:#963c53}
.lineage-training{display:block;font-size:8px;line-height:1.6;letter-spacing:.08em;color:var(--muted)}
.lineage-branch h5{font:19px/1.25 Georgia,serif;margin:5px 0 10px;color:var(--branch)}
.lineage-branch ul{list-style:none;margin:0 0 0 3px;padding:0 0 0 12px;border-left:1px solid #b8c0c5}
.lineage-branch li{position:relative;font-size:11px;line-height:1.6;padding:2px 0;color:var(--branch)}
.lineage-branch li:before{content:'';position:absolute;left:-12px;top:11px;width:7px;border-top:1px solid #b8c0c5}
.lineage-branch li>ul{margin-top:3px}.lineage-branch strong{font-weight:500;color:var(--branch)}
.pi .lineage-credit{font-size:9px;line-height:1.6;margin:17px 0 0;max-width:100%;color:var(--muted)}
.lineage-credit a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:1100px){.lineage-columns{gap:12px}.lineage-branch h5{font-size:17px}.lineage-training{font-size:7px}}
@media(max-width:800px){.lineage-columns{grid-template-columns:1fr;gap:19px}.lineage-branch h5{font-size:19px}.lineage-branch li{font-size:12px}.lineage-training{font-size:8px}.lineage-heading h4{font-size:22px}}

/* Let the connected-cell painting sit directly on the page's paper ground. */
.mission-band{border-bottom:0}
.circuits{background:linear-gradient(180deg,#e6e4de 0,var(--paper) 110px);border-bottom:0}
.circuits-figure{mix-blend-mode:multiply}
.circuits-figure img{mix-blend-mode:normal;mask-image:linear-gradient(transparent,#000 3% 97%,transparent),linear-gradient(90deg,transparent,#000 2.5% 97.5%,transparent);mask-composite:intersect}
@media print{.circuits{background:#fff}.circuits-figure{mix-blend-mode:normal}}