/* =============================================================================
   FISCH LAB WEBSITE  ·  APPEARANCE
   =============================================================================

   This file controls how the site LOOKS: colours, fonts, spacing, layout.
   It holds no text. To change words, edit build.py instead.

   You do not need to rebuild after editing this file. Save it, then
   reload the page in your browser.

   THE QUICKEST USEFUL EDITS
   -------------------------
   All colours are defined once in the ":root" block just below, then used
   everywhere by name. Change a colour there and it updates across the site.

     --bg          the deep blue page background
     --bg-deep     a darker blue, used behind images and the footer
     --ink         brightest text
     --ink-2       normal body text
     --ink-3       faint text and small labels
     --redline     the red accent (labels, markers, the main button)
     --light       the light blue accent (links, highlights)
     --glass       the frosted panel tint. The last number is how opaque
                   the panels are: lower is more see-through.

   HOW TO READ A RULE
   ------------------
     .btn--red { background: var(--redline) }
      |           |           |
      |           |           a colour from the :root list above
      |           the property being set
      the elements it applies to

   A name starting with a dot applies to every element of that kind, so
   .glass is every frosted panel on the site.

   USEFUL LANDMARKS, IN ORDER DOWN THIS FILE
   -----------------------------------------
     :root            every colour and font
     .ambient         size and position of the background drawings
     .glass           the frosted panels
     .nav             the menu bar
     .btn             buttons
     .slot / .micro   image placeholders
     .hero            the top of the home page
     .pub             publication cards
     .pi              the PI card with the photograph
     .titleblock      the boxed table in the footer
     @media           the phone layout, near the bottom

   clamp(a, b, c) means "scale between a and c depending on screen width".
   ============================================================================= */

/* ==============================================================
   FISCH LAB · shared stylesheet
   Concept: a blueprint drawing set. Graph-paper ground, blurred
   technical sketches drifting behind frosted "liquid glass"
   panels that carry crisp, high-contrast text.
   Single committed dark theme (a blueprint is one visual world).
   ============================================================== */

:root{
  /* ground */
  --bg:#0a2a48;
  --bg-deep:#061b31;
  --grid-minor:rgba(150,198,233,.05);
  --grid-major:rgba(150,198,233,.11);

  /* glass */
  --glass:rgba(9,37,66,.04);
  --glass-strong:rgba(7,30,55,.78);
  --glass-edge:rgba(196,228,255,.20);
  --glass-hi:rgba(255,255,255,.16);

  /* ink */
  --ink:#f3f8fd;
  --ink-2:#d6e6f5;
  --ink-3:#a3c0da;
  --line:#80a9c9;
  --hair:rgba(160,200,232,.20);

  /* signal colors from the biology */
  --redline:#ff6b5b;        /* accent */
  --redline-soft:rgba(255,107,91,.16);
  --light:#5ccbff;          /* accent 2 */
  --light-soft:rgba(92,203,255,.16);

  color-scheme:dark;

  --font-head:"Saira Condensed","Arial Narrow",sans-serif;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Courier New",monospace;

  --radius:18px;
  --radius-sm:10px;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img{max-width:100%;display:block}
[hidden]{display:none!important}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink-2);
  background-color:var(--bg);
  background-image:
    radial-gradient(120% 90% at 50% 0%, transparent 50%, rgba(0,0,0,.38) 100%),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size:cover,28px 28px,28px 28px,140px 140px,140px 140px;
  background-repeat:no-repeat,repeat,repeat,repeat,repeat;
  background-attachment:fixed;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);
  background:var(--bg-deep);z-index:60;
}

a{color:var(--light);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--light);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);margin:0;text-wrap:balance;font-weight:600;letter-spacing:.01em}
p{margin:0}
strong{color:var(--ink);font-weight:600}

.wrap{
  max-width:1180px;margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
}
.page{position:relative;z-index:1}

/* ---------- ambient blurred sketches ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient svg{position:absolute;filter:blur(2.6px);opacity:.26}
.ambient .a1{width:min(460px,60vw);top:9%;right:-5%;transform:rotate(-8deg)}
.ambient .a2{width:min(360px,50vw);bottom:2%;left:-5%;transform:rotate(9deg)}
.ambient .a3{width:min(280px,40vw);top:50%;right:14%;opacity:.17;filter:blur(3.6px);transform:rotate(14deg)}
.ambient .a4{width:min(280px,40vw);top:4%;left:26%;opacity:.19;filter:blur(3.2px);transform:rotate(-12deg)}
@media (max-width:640px){.ambient .a3{display:none}.ambient .a4{top:34%;left:-8%;opacity:.15}}

/* ---------- glass ---------- */
.glass{
  position:relative;
  background:
    linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 38%,rgba(255,255,255,.05)),
    var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--glass-edge);
  border-radius:var(--radius);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 24px 60px -28px rgba(0,0,0,.65);
}
.glass--strong{background:
    linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 40%),
    var(--glass-strong)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--glass-strong)}
}

/* ---------- labels ---------- */
.eyebrow{
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:.7rem;
}
.eyebrow .num{color:var(--redline)}
.eyebrow::after{content:"";height:1px;flex:1;min-width:24px;background:var(--hair)}
.eyebrow--plain::after{display:none}
.mono{font-family:var(--font-mono)}
.ph{color:var(--redline);font-family:var(--font-mono);font-size:.9em;border-bottom:1px dashed rgba(255,107,91,.55)}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding-top:12px}
.nav-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:58px;padding:0 10px 0 20px;border-radius:999px;
}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-head);font-weight:700;
  font-size:1.6rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.brand small{font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:.16em;color:var(--redline);
  padding:.28rem .55rem;border:1px solid rgba(255,107,91,.55);border-radius:999px;background:var(--redline-soft)}
.brand:hover{text-decoration:none}
.nav-links{display:flex;align-items:center;gap:.25rem}
.nav-links a{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding:.55rem .9rem;border-radius:999px;white-space:nowrap}
.nav-links a:hover{text-decoration:none;background:rgba(255,255,255,.07);color:var(--ink)}
.nav-links a[aria-current="page"]{background:rgba(92,203,255,.15);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(92,203,255,.35)}
.nav-toggle{display:none;background:rgba(255,255,255,.06);border:1px solid var(--glass-edge);color:var(--ink);
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.55rem .95rem;border-radius:999px;cursor:pointer}
@media (max-width:860px){
  .nav-toggle{display:inline-block}
  .nav-links{position:absolute;left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));
    top:calc(100% + 8px);flex-direction:column;align-items:stretch;padding:.5rem;border-radius:var(--radius);display:none;
    background:var(--glass-strong);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    border:1px solid var(--glass-edge);box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
  .nav-links[data-open]{display:flex}
  .nav-links a{padding:.85rem 1rem;border-radius:12px}
}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.78rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;padding:.8rem 1.15rem;border-radius:999px;border:1px solid transparent;cursor:pointer}
.btn:hover{text-decoration:none}
.btn--red{background:var(--redline);color:#22070a;box-shadow:0 10px 30px -10px rgba(255,107,91,.7)}
.btn--red:hover{filter:brightness(1.07)}
.btn--glass{background:rgba(255,255,255,.07);color:var(--ink);border-color:var(--glass-edge)}
.btn--glass:hover{background:rgba(255,255,255,.12)}

/* ---------- sections ---------- */
.section{padding-block:clamp(3rem,7vw,5.5rem)}
.section-head{max-width:68ch;margin-bottom:clamp(1.6rem,3.5vw,2.4rem)}
.section-head h2{font-size:clamp(2rem,5vw,3.1rem);text-transform:uppercase;line-height:1;margin:.8rem 0 .7rem}
.section-head p{color:var(--ink-2);font-size:1.1rem;max-width:62ch}

/* page header */
.page-head{padding-top:clamp(2.2rem,6vw,4rem);padding-bottom:clamp(1rem,3vw,2rem)}
.page-head .glass{padding:clamp(1.6rem,4vw,2.6rem)}
.page-head h1{font-size:clamp(2.8rem,9vw,5.6rem);font-weight:700;line-height:.92;text-transform:uppercase;margin:.9rem 0 .9rem}
.page-head p.lead{color:var(--ink);font-size:clamp(1.05rem,2.2vw,1.22rem);max-width:62ch}
.page-head .btns{margin-top:1.4rem}

/* ---------- image slots (placeholders) ---------- */
.slot{
  position:relative;overflow:hidden;border-radius:var(--radius-sm);
  background:
    repeating-linear-gradient(0deg,transparent 0 15px,rgba(150,198,233,.08) 15px 16px),
    repeating-linear-gradient(90deg,transparent 0 15px,rgba(150,198,233,.08) 15px 16px),
    var(--bg-deep);
  border:1px dashed rgba(160,200,232,.38);
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:4/3;max-width:100%;
}
.slot::before,.slot::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--light);opacity:.7}
.slot::before{top:10px;left:10px;border-right:0;border-bottom:0}
.slot::after{bottom:10px;right:10px;border-left:0;border-top:0}
.slot > span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3);padding:1rem;max-width:30ch;line-height:1.5}
.slot > span b{display:block;color:var(--redline);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.64rem;margin-bottom:.35rem}
.slot--wide{aspect-ratio:16/9}
.slot--square{aspect-ratio:1/1}
.slot--portrait{aspect-ratio:4/5}

/* generated microscopy placeholder */
.micro{position:relative;overflow:hidden;background:#02080f}
.micro canvas,.micro > img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.micro-tag{position:absolute;z-index:2;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:rgba(2,10,20,.62);border:1px dashed rgba(160,200,232,.35);padding:.35rem .6rem;border-radius:6px;
  right:12px;bottom:12px}
.micro-tag b{color:var(--redline);font-weight:500}
.scalebar{position:absolute;z-index:2;left:16px;bottom:14px;display:flex;flex-direction:column;gap:4px;
  font-family:var(--font-mono);font-size:.62rem;color:var(--ink)}
.scalebar i{display:block;width:72px;height:3px;background:var(--ink)}

/* ---------- HERO (home) ---------- */
.hero{position:relative;margin-top:-70px;padding-top:calc(70px + clamp(3rem,9vw,7rem));padding-bottom:clamp(3rem,8vw,6rem);overflow:hidden}
.hero > .micro{position:absolute;inset:0;z-index:0}
.hero > .micro::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,27,49,.55) 0%,rgba(6,27,49,.05) 35%,rgba(6,27,49,.15) 70%,var(--bg) 100%)}
.hero .wrap{position:relative;z-index:1}
.hero-panel{max-width:660px;padding:clamp(1.6rem,4.5vw,2.8rem)}
.hero-panel h1{font-size:clamp(3.4rem,11vw,7rem);font-weight:700;line-height:.88;text-transform:uppercase;margin:1rem 0 .4rem}
.hero-panel .sub{font-family:var(--font-head);font-weight:500;font-size:clamp(1.15rem,2.8vw,1.6rem);color:var(--light);margin-bottom:1.1rem;line-height:1.2}
.hero-panel .mission{color:var(--ink);font-size:clamp(1.05rem,2.2vw,1.2rem);line-height:1.65}
.hero-panel .btns{margin-top:1.6rem}
.hero .micro-tag{bottom:calc(clamp(3rem,8vw,6rem) * .35)}

/* ---------- cards ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.6rem)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.4rem)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}

.tcard{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.tcard .micro{aspect-ratio:16/9;border-bottom:1px solid var(--glass-edge)}
.tcard .tbody{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;gap:.75rem;flex:1}
.tcard .kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--redline)}
.tcard h3{font-size:1.75rem;text-transform:uppercase;line-height:1.05}
.tcard p{color:var(--ink-2)}
.tcard .more{margin-top:auto;padding-top:.4rem;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}

/* mini paper card (home) */
.mpaper{padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;min-width:0}
.mpaper .meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mpaper .meta b{color:var(--redline);font-weight:500}
.mpaper h3{font-family:var(--font-body);font-size:1.05rem;font-weight:600;line-height:1.4;text-wrap:pretty}
.mpaper a.more{margin-top:auto;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}

/* band */
.band{position:relative}
.band-panel{display:grid;grid-template-columns:1.3fr 1fr;gap:0;overflow:hidden}
.band-panel .bp-text{padding:clamp(1.6rem,4vw,2.6rem);display:flex;flex-direction:column;gap:1rem;justify-content:center}
.band-panel .bp-text h2{font-size:clamp(1.9rem,4.5vw,2.8rem);text-transform:uppercase;line-height:1}
.band-panel .bp-text p{color:var(--ink)}
.band-panel .micro{min-height:260px;border-left:1px solid var(--glass-edge)}
/* A photograph filling the right-hand column of a band panel. */
.bp-photo{min-height:260px;width:100%;height:100%;object-fit:cover;display:block;border-left:1px solid var(--glass-edge)}
@media (max-width:760px){.band-panel{grid-template-columns:1fr}
  .band-panel .micro,.bp-photo{border-left:0;border-top:1px solid var(--glass-edge);min-height:220px}
  .bp-photo{max-height:240px}}

.photo-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(.8rem,2vw,1.2rem)}
/* The wide cell is twice as wide as the square ones, so a 2:1 crop next to two
   1:1 crops makes all three exactly the same height at any screen width. */
.photo-row > :first-child{aspect-ratio:2/1;object-fit:cover}
.photo-row .slot,.photo-row .photo--sq{aspect-ratio:1/1;min-height:0}
/* A row of four equal squares. Each cell is the same width as a square in the
   row above, so the two rows line up. */
.photo-row--4{grid-template-columns:repeat(4,1fr);margin-top:clamp(.8rem,2vw,1.2rem)}
.photo-row--4 > :first-child{aspect-ratio:1/1}
@media (max-width:760px){.photo-row{grid-template-columns:1fr 1fr}
  .photo-row > :first-child{grid-column:span 2}
  .photo-row--4{grid-template-columns:1fr 1fr}
  .photo-row--4 > :first-child{grid-column:auto}}

/* ---------- RESEARCH ---------- */
.area{display:flex;flex-direction:column;gap:clamp(1rem,2.5vw,1.5rem)}
.area + .area{margin-top:clamp(3rem,7vw,5rem)}
.area-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);overflow:hidden}
.area-hero .ah-text{padding:clamp(1.6rem,4vw,2.6rem);display:flex;flex-direction:column;gap:1rem}
.area-hero .ah-text h2{font-size:clamp(2rem,5vw,3rem);text-transform:uppercase;line-height:1}
.area-hero .micro,.area-hero .ah-vid{min-height:300px;border-left:1px solid var(--glass-edge)}
/* A movie filling the right-hand column. The file keeps a true black
   background; 'screen' makes that black vanish into the panel behind it.
   That is also why the fit is 'contain': the whole frame is shown, and the
   empty space around it disappears instead of showing as letterboxing. */
.ah-vid{position:relative;overflow:hidden;background:var(--bg)}
.ah-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:screen}
@media (max-width:860px){.area-hero{grid-template-columns:1fr}
  .area-hero .micro,.area-hero .ah-vid{border-left:0;border-top:1px solid var(--glass-edge);min-height:240px;order:-1}}
.question{font-family:var(--font-head);font-weight:500;font-size:clamp(1.25rem,2.8vw,1.6rem);line-height:1.25;color:var(--light)}
.question::before{content:"Q.";font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--redline);display:block;margin-bottom:.35rem}

.area-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.4rem)}
@media (max-width:900px){.area-cols{grid-template-columns:1fr}}
.acol{padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;min-width:0}
.acol h3{font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em}
.acol h3 small{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;color:var(--redline);font-weight:500;margin-bottom:.3rem}
.acol p{color:var(--ink-2);font-size:1rem}
.prose{display:flex;flex-direction:column;gap:1rem;max-width:68ch}
.prose p{color:var(--ink)}

.related{padding:1.3rem 1.5rem}
.related h3{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:.8rem}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.4rem}
.related li{font-size:.95rem;line-height:1.45;min-width:0}
.related li .y{font-family:var(--font-mono);font-size:.72rem;color:var(--redline);margin-right:.45rem}
@media (max-width:700px){.related ul{grid-template-columns:1fr}}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--ink);background:rgba(255,255,255,.06);
  border:1px solid var(--glass-edge);padding:.45rem .8rem;border-radius:999px}

/* SVG drafting classes (sketches + figure) */
.d-ln{fill:none;stroke:var(--line);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.d-ln-strong{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.d-con{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:4 4;opacity:.65;stroke-linecap:round}
.d-fill-panel{fill:var(--bg-deep);stroke:var(--line);stroke-width:1.4}
.d-red{fill:var(--redline)}
.d-red-ln{fill:none;stroke:var(--redline);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.d-light-ln{fill:none;stroke:var(--light);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.d-txt{fill:var(--ink-2);font-family:var(--font-mono);font-size:13px}
.d-txt-s{fill:var(--ink-3);font-family:var(--font-mono);font-size:11px}
.d-txt-red{fill:var(--redline);font-family:var(--font-mono);font-size:12px}
.d-txt-light{fill:var(--light);font-family:var(--font-mono);font-size:12px}
.mk-red{fill:var(--redline)}.mk-ink{fill:var(--line)}
@media (max-width:720px){.only-wide{display:none}}

/* ---------- PUBLICATIONS ---------- */
.pub-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;margin-bottom:1.6rem}
.year-jump{display:flex;flex-wrap:wrap;gap:.35rem}
.year-jump a{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-2);padding:.35rem .6rem;border-radius:999px;border:1px solid var(--hair)}
.year-jump a:hover{text-decoration:none;background:rgba(255,255,255,.08);color:var(--ink)}
.legend-line{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.03em}
.pub-group-head{display:flex;align-items:baseline;gap:1rem;margin:2.4rem 0 1rem;scroll-margin-top:110px}
.pub-group-head:first-child{margin-top:0}
.pub-group-head .yr{font-family:var(--font-head);font-weight:700;font-size:2.2rem;color:var(--ink);line-height:1}
.pub-group-head::after{content:"";flex:1;height:1px;background:var(--hair)}
.pubs{display:flex;flex-direction:column;gap:1rem}
.pub{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(1rem,2.5vw,1.6rem);padding:clamp(1rem,2.4vw,1.4rem);scroll-margin-top:110px}
.pub .slot{aspect-ratio:4/3;align-self:start}
.pub-body{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.pub-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;color:var(--ink-3)}
.pub-meta .j{color:var(--ink);font-weight:500}
.badge{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;border:1px solid var(--hair);color:var(--ink-2)}
.badge--first{border-color:rgba(255,107,91,.5);color:var(--redline);background:var(--redline-soft)}
.badge--oa{border-color:rgba(92,203,255,.45);color:var(--light);background:var(--light-soft)}
.pub-title{font-family:var(--font-body);font-size:clamp(1.08rem,2vw,1.22rem);font-weight:600;line-height:1.38;color:var(--ink);text-wrap:pretty}
.pub-authors{font-size:.9rem;color:var(--ink-3);line-height:1.5}
.pub-authors strong{color:var(--ink)}
.pub-summary{color:var(--ink-2);font-size:1rem;max-width:72ch}
.draft-flag{align-self:flex-start;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--redline);
  border:1px dashed rgba(255,107,91,.55);padding:.18rem .5rem;border-radius:6px}
.pub-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
.pl{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.45rem .75rem;border-radius:999px;border:1px solid var(--glass-edge);color:var(--ink);background:rgba(255,255,255,.05)}
.pl:hover{text-decoration:none;background:rgba(255,255,255,.11)}
.pl--oa{border-color:rgba(92,203,255,.5);color:var(--light);background:var(--light-soft)}
.pl--missing{border-style:dashed;border-color:rgba(255,107,91,.5);color:var(--redline);background:transparent;cursor:default}
.published-as{font-size:.95rem;color:var(--ink-2)}
.published-as a{font-weight:500}
@media (max-width:700px){.pub{grid-template-columns:1fr}.pub .slot{aspect-ratio:16/9}}

/* ---------- PEOPLE ---------- */
.pi{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);overflow:hidden}
.pi .slot,.pi-photo{border-radius:0;border:0;border-right:1px solid var(--glass-edge);aspect-ratio:auto;min-height:420px}
.pi-photo{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.pi-body{padding:clamp(1.6rem,4vw,2.6rem);display:flex;flex-direction:column;gap:1rem;min-width:0}
.pi-body .role{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--redline)}
.pi-body h2{font-size:clamp(2.2rem,5vw,3.2rem);text-transform:uppercase;line-height:1}
.pi-body .prose p{color:var(--ink)}
.profile-links{display:flex;flex-wrap:wrap;gap:.5rem}
@media (max-width:820px){.pi{grid-template-columns:1fr}.pi .slot,.pi-photo{border-right:0;border-bottom:1px solid var(--glass-edge);min-height:300px}.pi-photo{max-height:420px;object-position:50% 12%}}

.sub-panel{padding:clamp(1.4rem,3.5vw,2.2rem)}
.sub-panel > h3{font-size:1.5rem;text-transform:uppercase;margin-bottom:1.2rem;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.sub-panel > h3 small{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;color:var(--redline);font-weight:500}

.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--light),var(--line) 70%,transparent)}
.timeline li{position:relative;padding-left:2rem;padding-bottom:1.2rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:0;top:.42rem;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg-deep)}
.timeline li.now::before{border-color:var(--redline);background:var(--redline);box-shadow:0 0 12px var(--redline)}
.timeline .t-yr{font-family:var(--font-mono);font-size:.74rem;color:var(--redline);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.timeline .t-what{color:var(--ink);font-weight:600;display:block;line-height:1.35;margin-top:.1rem}
.timeline .t-where{color:var(--ink-3);font-size:.94rem;display:block;line-height:1.45}

.awards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.awards li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding:.7rem 0;border-top:1px solid var(--hair)}
.awards li:first-child{border-top:0;padding-top:0}
.awards .a-yr{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:.15rem}
.awards .a-what{color:var(--ink);line-height:1.45}
@media (max-width:480px){.awards li{grid-template-columns:1fr;gap:.1rem}}

.member{padding:0;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.member .slot{border-radius:0;border:0;border-bottom:1px dashed rgba(160,200,232,.38);aspect-ratio:1/1}
.member .m-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.45rem}
.member .m-role{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--redline)}
.member h3{font-size:1.35rem;text-transform:uppercase}
.member p{font-size:.95rem;color:var(--ink-2)}
.member a{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.3rem}

.empty-state{padding:clamp(1.6rem,4vw,2.4rem);display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:center}
.empty-state .es-mark{width:64px;height:64px;border-radius:50%;border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3)}
.empty-state h3{font-size:1.4rem;text-transform:uppercase;margin-bottom:.35rem}
.empty-state p{color:var(--ink-2);max-width:62ch}

/* ---------- JOIN ---------- */
.role-card{padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;min-width:0}
.role-card .open{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--redline);display:inline-flex;align-items:center;gap:.45rem}
.role-card .open::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--redline);box-shadow:0 0 8px var(--redline)}
.role-card h3{font-size:1.6rem;text-transform:uppercase;line-height:1}
.role-card p{color:var(--ink-2);font-size:1rem}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.checklist li{position:relative;padding-left:1.8rem;color:var(--ink)}
.checklist li::before{content:"";position:absolute;left:0;top:.45rem;width:12px;height:12px;border:1.5px solid var(--light);border-radius:3px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1rem,2.5vw,1.6rem)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-card{padding:clamp(1.5rem,3.5vw,2.2rem);display:flex;flex-direction:column;gap:1.2rem}
.kv{display:flex;flex-direction:column;gap:.25rem}
.kv .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.kv .v{color:var(--ink);font-size:1.05rem;line-height:1.5;overflow-wrap:anywhere}
.copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.copy-btn{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.07);
  border:1px solid var(--glass-edge);border-radius:999px;padding:.4rem .75rem;cursor:pointer}
.copy-btn:hover{background:rgba(255,255,255,.12)}

/* ---------- FOOTER / title block ---------- */
.foot{padding-block:clamp(2.5rem,6vw,4rem) clamp(2rem,4vw,3rem)}
.foot .glass{padding:clamp(1.2rem,3vw,1.8rem)}
.titleblock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tb{padding:.8rem .95rem;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);min-width:0}
.tb .k{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.25rem}
.tb .v{font-family:var(--font-head);font-weight:500;font-size:1.02rem;color:var(--ink);line-height:1.25}
.tb.w2{grid-column:span 2}
.tb.last-row{border-bottom:0}
.foot-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.foot-small{margin-top:1.1rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;color:var(--ink-3)}
@media (max-width:820px){.titleblock{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.titleblock{grid-template-columns:1fr}.tb.w2{grid-column:span 1}}


/* single open-position card */
.member-open{display:grid;grid-template-columns:210px minmax(0,1fr);overflow:hidden;max-width:720px}
.member-open .mo-portrait{border-right:1px dashed rgba(160,200,232,.38);background:
  repeating-linear-gradient(0deg,transparent 0 15px,rgba(150,198,233,.06) 15px 16px),
  repeating-linear-gradient(90deg,transparent 0 15px,rgba(150,198,233,.06) 15px 16px),
  rgba(4,20,38,.5);
  display:flex;align-items:center;justify-content:center;padding:1.2rem}
.member-open .mo-portrait svg{width:100%;height:auto;max-width:170px;opacity:.75}
.member-open .mo-body{padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.5rem}
.member-open .mo-body h3{font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em}
.member-open .mo-body p{color:var(--ink-2);max-width:48ch}
.member-open .mo-body a{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.35rem}
@media (max-width:620px){.member-open{grid-template-columns:1fr}
  .member-open .mo-portrait{border-right:0;border-bottom:1px dashed rgba(160,200,232,.38);padding:1.4rem}
  .member-open .mo-portrait svg{max-width:130px}}


/* photographs used in place of an image slot
   .photo keeps the picture's own proportions. Add .photo--wide to crop it
   to a 16:9 band instead. */
.photo{display:block;width:100%;height:auto;border-radius:var(--radius-sm);
  border:1px solid var(--glass-edge);box-shadow:0 18px 44px -26px rgba(0,0,0,.7)}
.photo--wide{aspect-ratio:16/9;object-fit:cover}
/* a real figure on a publication card, sized like the placeholder it replaces */
.pub-fig{display:block;width:100%;height:auto;align-self:start;
  border-radius:var(--radius-sm);border:1px solid var(--glass-edge);background:#02080f}
/* preprints show the bioRxiv wordmark on a white tile instead of a figure */
.pub-fig--logo{display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;background:#fff;padding:14% 16%}
.pub-fig--logo img{width:100%;height:auto;display:block}
/* inside the three-across row on the home page the picture fills its column */
.photo-row .photo{height:100%;min-height:220px;object-fit:cover;object-position:50% 50%}
@media (max-width:760px){.photo-row .photo{min-height:160px}}


/* animated panels in the home page photo row (drawn in sketches.py) */
.anim-panel{position:relative;overflow:hidden;border-radius:var(--radius-sm);
  border:1px solid var(--glass-edge);background:#02080f;min-height:220px;min-width:0}
.anim-panel svg{display:block;width:100%;height:100%;position:absolute;inset:0}
@media (max-width:760px){.anim-panel{min-height:160px}}
/* the same panel sitting at the top of a research card on the home page */
.anim-panel--card{aspect-ratio:16/9;min-height:0;border:0;border-radius:0;
  border-bottom:1px solid var(--glass-edge)}

/* utilities */
.stack{display:flex;flex-direction:column;gap:clamp(1rem,2.5vw,1.5rem)}
.mt{margin-top:clamp(1rem,2.5vw,1.5rem)}
.note{font-size:.95rem;color:var(--ink-3)}