/* Parker Lab -- layout: a dark confocal field for the opening, then clean glass-slide pages.
   One committed look (brand site), so every colour is declared explicitly. */
:root{
  color-scheme:light;
  --void:#070b1c;        /* unstained background */
  --ink:#111a38;         /* deep navy for dark bands and body text */
  --slide:#f2f4fa;       /* pale slide grey */
  --paper:#ffffff;
  --line:#d6dce9;
  --muted:#58628044;
  --text-muted:#555f7d;
  --pale:#a9b3d2;
  --gfp:#3fe29a;         /* GFP */
  --tom:#ff4f73;         /* tdTomato */
  --dapi:#7a9bff;        /* DAPI */
  --gfp-ink:#09714a;
  --tom-ink:#c01a43;
  --dapi-ink:#2742bd;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gl:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font:400 17px/1.62 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--void)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gfp);outline-offset:3px}
img{display:block}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
@media(min-width:800px){.wrap{padding-left:max(36px,env(safe-area-inset-left,0px));padding-right:max(36px,env(safe-area-inset-right,0px))}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(7,11,28,.92);backdrop-filter:blur(12px);color:#fff;border-bottom:1px solid rgba(169,179,210,.16)}
.nav-in{display:flex;align-items:center;gap:18px;min-height:60px}
.mini{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.mini img{height:37px;width:auto}
.mini span{font:400 20px/1 var(--serif);letter-spacing:.01em}
.nav ul{display:flex;gap:1px;list-style:none;margin:0 0 0 auto;padding:0}
.nav li a{display:block;padding:7px 10px;font-size:14px;text-decoration:none;color:#d8def1;border-radius:4px;white-space:nowrap}
.nav li a:hover{color:var(--gfp)}
.nav li a.on{color:var(--gfp)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid rgba(169,179,210,.42);border-radius:4px;padding:6px 13px;font-size:14px;cursor:pointer}
@media(max-width:1060px){
  .menu-btn{display:block}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--void);flex-direction:column;padding:6px var(--gr) 16px var(--gl);border-bottom:1px solid rgba(169,179,210,.2)}
  .nav ul.open{display:flex}
  .nav li a{padding:11px 4px;font-size:16.5px}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--void);color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:min(86vh,820px)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(95deg,rgba(7,11,28,.95) 0,rgba(7,11,28,.78) 36%,rgba(7,11,28,.12) 66%,rgba(7,11,28,0) 100%)}
@media(max-width:860px){.hero-scrim{background:linear-gradient(180deg,rgba(7,11,28,.93) 0,rgba(7,11,28,.86) 62%,rgba(7,11,28,.3) 100%)}}
.hero-in{position:relative;z-index:3;width:100%;padding-block:46px 40px;pointer-events:none}
.hero-in a,.hero-in button{pointer-events:auto}

.lockup{display:inline-flex;align-items:center;gap:clamp(10px,1.7vw,22px);background:none;border:0;cursor:pointer;color:#fff;padding:6px 0 6px 2.4em;margin-left:-2.4em;overflow:hidden}
.lockup img{height:clamp(104px,16.5vw,215px);width:auto;position:relative;z-index:2;flex:none}
.lockup .word{font:400 clamp(46px,8.2vw,104px)/1 var(--serif);letter-spacing:-.004em;white-space:nowrap;position:relative;z-index:1;will-change:transform,opacity}
.lockup.go img{animation:markpulse 1.5s .55s both}
@keyframes markpulse{0%,100%{filter:none}45%{filter:drop-shadow(0 0 16px rgba(63,226,154,.75))}}

.hero h1{font-size:clamp(26px,3.2vw,41px);max-width:16.5em;margin-top:24px}
.hero .about{max-width:33em;margin-top:15px;color:#d2d9ef;font-size:clamp(16px,1.3vw,18px)}
.stages{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.stages button{background:rgba(7,11,28,.62);border:1px solid rgba(169,179,210,.42);color:#fff;padding:9px 16px;border-radius:999px;font:500 14px/1.2 var(--sans);cursor:pointer;display:flex;align-items:center;gap:8px}
.stages button i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 9px var(--c)}
.stages button[aria-pressed=true]{border-color:var(--c);background:rgba(17,26,56,.96)}
.play{background:var(--gfp);color:var(--void);border:0;padding:9px 18px;border-radius:999px;font:600 14px/1.2 var(--sans);cursor:pointer}
.stage-note{margin-top:14px;font:400 12.5px/1.55 var(--mono);color:var(--pale);max-width:44em;min-height:3.1em}

/* ---------- sections ---------- */
section.pg{background:var(--slide);padding-block:clamp(58px,8vw,100px);scroll-margin-top:60px}
section.pg.paper{background:var(--paper)}
section.pg.dark{background:var(--ink);color:#edf0fa}
.sec-h{display:grid;gap:11px;margin-bottom:clamp(30px,4.4vw,48px);max-width:42em}
.sec-h h2{font-size:clamp(37px,5.1vw,60px);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sec-h p{color:var(--text-muted)}
.dark .sec-h p{color:var(--pale)}
.sec-edit{font:500 13px/1 var(--sans);background:none;border:1px solid var(--line);color:var(--text-muted);border-radius:999px;padding:6px 13px;cursor:pointer;align-self:center}
.sec-edit:hover{border-color:var(--gfp-ink);color:var(--gfp-ink)}
.dark .sec-edit{border-color:rgba(169,179,210,.4);color:var(--pale)}
.dark .sec-edit:hover{border-color:var(--gfp);color:var(--gfp)}

/* research */
.proj{display:grid;gap:clamp(44px,6vw,80px)}
.proj article{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center}
.proj article:nth-child(even) .vis{order:2}
.vis{aspect-ratio:16/10;background:var(--void);overflow:hidden;position:relative;border-radius:3px;max-width:100%}
.vis canvas,.vis img{width:100%;height:100%;object-fit:cover}
.proj h3{font-size:clamp(27px,3vw,38px)}
.proj .tz{margin-top:13px}
.more{margin-top:13px;color:var(--text-muted);font-size:16px}
.more summary{cursor:pointer;color:var(--dapi-ink);font-weight:500}
.more p{margin-top:9px}
@media(max-width:780px){.proj article{grid-template-columns:minmax(0,1fr)}.proj article:nth-child(even) .vis{order:0}}

/* strategies */
.scale{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.scale>div{padding:13px 18px 22px 0;display:flex;flex-direction:column;gap:5px;position:relative}
.scale>div::before{content:"";position:absolute;top:-9px;left:0;width:2px;height:16px;background:var(--ink)}
.scale .u{font:500 12px/1.3 var(--mono);color:var(--text-muted);letter-spacing:.06em;margin-bottom:7px}
.scale .u b{display:block;font:400 25px/1.15 var(--serif);text-transform:none;letter-spacing:0;color:var(--ink);margin-top:2px}
.tech{background:none;border:0;border-bottom:1px solid var(--line);text-align:left;padding:9px 2px;cursor:pointer;font-size:16px;line-height:1.3}
.tech:hover{color:var(--dapi-ink)}
.tech[aria-pressed=true]{color:var(--dapi-ink);font-weight:600;border-bottom-color:var(--dapi-ink)}
.tech-d{margin-top:20px;background:var(--ink);color:#edf0fa;padding:22px 26px;border-radius:3px;max-width:46em;min-height:6.4em}
.tech-d h3{font-size:25px;margin-bottom:6px}
@media(max-width:780px){.scale{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* publications */
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;align-items:center}
.chip{background:none;border:1px solid var(--line);padding:5px 14px;border-radius:999px;font-size:14px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tools input{margin-left:auto;padding:7px 12px;border:1px solid var(--line);border-radius:4px;background:#fff;width:240px;max-width:100%;min-width:0}
.pub{padding:17px 0;border-top:1px solid var(--line)}
.cite{font-size:16px;line-height:1.55;color:var(--text-muted);max-width:62em}
.cite .au b{color:var(--ink);font-weight:600}
.cite .ti{color:var(--ink);font-weight:500}
.cite .ti a{text-decoration:none}
.cite .ti a:hover{text-decoration:underline}
.cite .pid{font:400 14px/1.5 var(--mono);color:var(--text-muted);overflow-wrap:anywhere}
.pub-sub{font-size:27px;margin:44px 0 2px;color:var(--text-muted)}
.gapline{font:500 11.5px/1.3 var(--mono);color:var(--dapi-ink);border:1px dashed var(--line);border-radius:3px;padding:4px 7px;display:inline-block;margin-top:8px}
.allp{display:inline-block;margin-top:22px;font-weight:500;color:var(--dapi-ink)}

/* lab fun */





.btn{background:var(--gfp);color:var(--void);border:0;padding:9px 17px;border-radius:4px;font-weight:600;font-size:15px;cursor:pointer}
.fun h3{font-size:28px;margin-bottom:18px;color:var(--pale)}
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:26px 22px;align-items:start}
.act{margin:0;display:grid;gap:10px}
.act img,.act-ph{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:3px;display:block;background:rgba(169,179,210,.1)}
.act-ph{display:flex;align-items:center;justify-content:center;border:1px dashed rgba(169,179,210,.35);font:500 12.5px var(--mono);color:var(--pale)}
.act figcaption{display:grid;gap:3px}
.act b{font:400 22px/1.2 var(--serif);color:#fff}
.act time{font:500 12px/1.3 var(--mono);color:var(--gfp);letter-spacing:.04em}
.act figcaption span{color:var(--pale);line-height:1.5;font-size:15.5px}
/* Cool Images — a figure grid inside Research */
.cool{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:24px 20px;align-items:start}
.cool-i{margin:0;display:grid;gap:9px}
.cool-b{padding:0;border:0;background:none;cursor:zoom-in;display:block;width:100%;border-radius:3px;overflow:hidden}
.cool-b img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--void)}
.cool-b:hover img{opacity:.88}
.cool-i figcaption{font-size:15px;line-height:1.45;color:var(--text-muted)}
.cool-i .act-ph{aspect-ratio:4/3}
.lightbox img{width:100%;max-height:72vh;object-fit:contain;border-radius:3px;background:var(--void)}
.lightbox .cap{margin-top:12px;color:var(--text-muted);font-size:15.5px;line-height:1.5}
.soon{margin-top:26px;color:var(--pale);font-size:15px}


/* mascots */
.pets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,56px)}
.pet{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:22px;align-items:center}
.boop{background:var(--ink);border:0;padding:0;border-radius:50%;aspect-ratio:1;width:100%;cursor:pointer;overflow:hidden;position:relative}
.boop svg,.boop img{width:100%;height:100%;object-fit:cover}
.boop .ear{transform-box:fill-box;transform-origin:50% 100%;transition:transform .14s}
.boop:hover .ear{transform:rotate(-9deg)}
.boop.hit{animation:bp .32s}
@keyframes bp{40%{transform:scale(.93)}}
.pet h4{font:400 29px/1.1 var(--serif);margin:0}
.pet .r{font:500 12.5px/1.4 var(--mono);color:var(--text-muted);margin:4px 0 9px}
.pet .c{font:400 13px var(--mono);color:var(--dapi-ink);margin-top:8px;min-height:1.5em;font-variant-numeric:tabular-nums}

/* the menagerie -- shared pet wall */
.menagerie{margin-top:clamp(42px,6vw,66px);padding-top:24px;border-top:1px solid var(--line)}
.men-h{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.men-empty{color:var(--text-muted);font-size:16px;max-width:40em}
.men-h:not(:empty){margin-bottom:20px}
.men-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(45%,186px),1fr));gap:22px 18px;align-items:start}
.men-card{margin:0;display:grid;gap:9px}
.men-card img,.men-ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;background:var(--ink);display:block;overflow:hidden}
.men-ph svg{width:100%;height:100%;opacity:.5}
.men-card figcaption{display:grid;gap:2px}
.men-card strong{font:400 20px/1.2 var(--serif)}
.men-k{font:500 12px/1.4 var(--mono);color:var(--gfp-ink)}
.men-n{font-size:14.5px;line-height:1.4;color:var(--text-muted)}
.men-x{justify-self:start;margin-top:5px;background:none;border:1px solid var(--line);border-radius:4px;padding:3px 9px;font-size:12.5px;color:var(--tom-ink);cursor:pointer}

/* pet form + simple dialog */
.dlg.one{grid-template-columns:minmax(0,1fr)}
.petform input[type=text]{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:4px;font:400 15px var(--sans)}
.petform label{display:block;font:600 12.5px/1.6 var(--sans);color:var(--text-muted);margin-top:12px}
.petform input[type=file]{margin-top:4px;font-size:14px}
.pf-s{font-size:13px;color:var(--text-muted);margin-top:14px;min-height:1.4em}
.pf-row{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}

/* opportunities */
.ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 30px;margin-bottom:30px}
.ops div{border-top:2px solid var(--ink);padding:15px 0 22px}
.ops h3{font-size:27px;margin-bottom:7px}
.ops p{font-size:16px;color:var(--text-muted)}
.apply{background:var(--ink);color:#fff;padding:24px 26px;border-radius:3px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.apply p{flex:1 1 320px;min-width:0}
.apply small{color:var(--pale)}
.apply .em{font:500 15px var(--mono);color:var(--gfp);overflow-wrap:anywhere;user-select:all}

/* people */
.ppl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(45%,195px),1fr));gap:28px 20px;align-items:start}
.person{background:none;border:0;padding:0;text-align:left;display:block;width:100%;align-self:start}
button.person{cursor:pointer}
button.person:hover .av{outline:2px solid var(--gfp);outline-offset:2px}
.av{aspect-ratio:5/6;background:var(--void);display:block;width:100%;border-radius:3px;overflow:hidden}
.av svg,.av img{width:100%;height:100%;object-fit:cover}
.person strong{display:block;font:400 21px/1.18 var(--serif);margin-top:10px}
.person small{display:block;font-size:14px;line-height:1.35;color:var(--text-muted);margin-top:3px}
.person small.now{color:var(--gfp-ink);font-weight:500}
.person small.gap{margin-top:6px;font:500 11.5px/1.3 var(--mono);color:var(--dapi-ink);border:1px dashed var(--line);border-radius:3px;padding:3px 6px;display:inline-block}
.alum{margin-top:clamp(42px,6vw,66px);padding-top:24px;border-top:1px solid var(--line)}
.alum h3{font-size:25px;margin-bottom:20px;color:var(--text-muted);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.alum .sub{margin:-12px 0 20px;color:var(--text-muted);font-size:16px;max-width:42em}
.ppl.text{grid-template-columns:repeat(auto-fill,minmax(min(100%,255px),1fr));gap:20px 28px}
.ppl.text .person{padding-top:13px;border-top:1px solid var(--line)}
.ppl.text strong{margin-top:0;font-size:20px}
dialog{border:0;border-radius:4px;padding:0;max-width:min(680px,calc(100vw - 32px));width:100%;background:#fff;color:var(--ink)}
dialog::backdrop{background:rgba(7,11,28,.76)}
.dlg{display:grid;grid-template-columns:185px minmax(0,1fr);gap:24px;padding:26px}
.dlg h3{font-size:30px}
.dlg .r{color:var(--text-muted);font-size:15px;margin:4px 0 13px}
.dlg .x{margin-top:16px;background:none;border:1px solid var(--line);padding:7px 15px;border-radius:4px;cursor:pointer}
@media(max-width:560px){.dlg{grid-template-columns:minmax(0,1fr)}.dlg .av{max-width:148px}}

/* updates */
.ups{list-style:none;margin:0;padding:0;position:relative;max-width:48em}
.ups::before{content:"";position:absolute;left:5px;top:10px;bottom:12px;width:1px;background:var(--line)}
.ups li{position:relative;padding:0 0 28px 32px}
.ups li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:50%;background:var(--gfp-ink)}
.ups time,.ups .t{font:500 12.5px/1.4 var(--mono);color:var(--text-muted)}
.ups .t{color:var(--dapi-ink);margin-left:11px}
.ups p{margin-top:4px}
.ups a{color:var(--dapi-ink)}
.ups.clip>li:nth-child(n+11){display:none}
.ups.clip>li:nth-child(10){padding-bottom:10px}
.more-btn{margin-top:4px;background:none;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font:500 14.5px var(--sans);color:var(--ink);cursor:pointer}
.more-btn:hover{border-color:var(--gfp-ink);color:var(--gfp-ink)}

/* footer */
footer{background:var(--void);color:#d2d9ef;padding-block:40px;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:center}
footer p{white-space:pre-line;min-width:0}
footer img{height:54px;width:auto;opacity:.92}
footer .em{overflow-wrap:anywhere}

/* migration rail (scroll progress) */
.rail{position:fixed;right:max(9px,env(safe-area-inset-right,0px));top:76px;bottom:20px;width:2px;background:rgba(128,143,190,.3);z-index:30;pointer-events:none}
.rail i{position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--gfp);box-shadow:0 0 0 2px rgba(7,11,28,.5),0 0 10px rgba(63,226,154,.8)}
.rail i::after{content:"";position:absolute;left:4px;bottom:9px;width:2px;height:20px;background:linear-gradient(0deg,rgba(63,226,154,.85),rgba(63,226,154,0))}
@media(max-width:920px){.rail{display:none}}

/* ---------- editor ---------- */
.edit-open{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--gfp);color:var(--void);border:0;border-radius:999px;padding:11px 19px;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 3px 16px rgba(0,0,0,.4)}
.ed{position:fixed;top:0;right:0;bottom:0;width:min(450px,100vw);z-index:70;background:#fff;color:var(--ink);display:flex;flex-direction:column;box-shadow:-10px 0 34px rgba(7,11,28,.38);font-size:15px;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.ed-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.ed-h strong{font:400 23px var(--serif)}
.ed-x{background:none;border:0;cursor:pointer;font-size:14px;color:var(--text-muted)}
.ed .sec{margin:13px 16px 2px;padding:9px;border:1px solid var(--line);border-radius:4px;background:#fff}
.ed-b{flex:1;overflow:auto;padding:10px 16px 20px;min-height:0}
.ed-it{border:1px solid var(--line);border-radius:4px;margin-bottom:9px;background:#fff}
.ed-it>summary{padding:10px 12px;cursor:pointer;font-weight:500;overflow-wrap:anywhere}
.ed-f{padding:2px 12px 13px;display:grid;gap:11px}
.ed label{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--text-muted);letter-spacing:.01em}
.ed input[type=text],.ed input[type=url],.ed input[type=month],.ed select.f,.ed textarea{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:4px;font:400 15px/1.45 var(--sans);color:var(--ink);background:#fff}
.ed textarea{min-height:96px;resize:vertical}
.ed .thumb{width:86px;height:86px;object-fit:cover;border-radius:3px;margin-bottom:5px;background:var(--slide)}
.ed-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ed-row button,.ed-add,.ed .file{background:#fff;border:1px solid var(--line);border-radius:4px;padding:6px 11px;font-size:13px;cursor:pointer}
.ed-row .del{color:var(--tom-ink);margin-left:auto}
.ed-add{width:100%;padding:10px;font-weight:600;border-style:dashed;margin-top:4px;font-size:14px}
.ed-f2{border-top:1px solid var(--line);padding:13px 16px;display:grid;gap:9px}
.ed-f2 .pri{background:var(--ink);color:#fff;border:0;border-radius:4px;padding:11px;font-weight:600;cursor:pointer}
.ed-f2 .pri[disabled]{opacity:.5;cursor:default}
.ed-f2 .two{display:flex;gap:9px}
.ed-f2 .two button{flex:1;background:#fff;border:1px solid var(--line);border-radius:4px;padding:9px;cursor:pointer;font-size:14px}
.ed-s{font-size:13px;line-height:1.45;color:var(--text-muted);min-height:1.5em}
.ed-hint{font-size:12.5px;color:var(--text-muted);margin:0 0 10px;line-height:1.5}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}