/* ============================================================
   STYLES.CSS — how the site looks.
   Safe to change: the colors in the block below.
   ============================================================ */

:root{
  /* Palette taken from the lab logo */
  --navy:       #283888;   /* the wordmark blue */
  --navy-deep:  #1B2560;   /* darker navy for headings */
  --scarlet:    #C82828;   /* the scissors red */
  --cyan:       #28A8E8;   /* the bright dot in the protein */

  --paper:      #FCF9F4;   /* warm off-white page */
  --paper-deep: #F3EDE2;   /* cards and wells */
  --ink:        #21243A;   /* body text, warm near-black */
  --slate:      #6E6B7B;   /* secondary text */
  --rule:       #E4DCCE;   /* hairlines */

  --display: "Fraunces", Georgia, serif;
  --body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --measure: 60ch;
  --pad: clamp(1.25rem, 5vw, 4rem);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-variation-settings: "SOFT" 20;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--navy-deep); text-decoration-color: color-mix(in srgb, var(--navy) 30%, transparent); text-underline-offset:3px; }
a:hover{ text-decoration-color: var(--scarlet); }
a:focus-visible, button:focus-visible, .skip:focus{
  outline:2px solid var(--scarlet); outline-offset:3px; border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background: var(--ink); color: var(--paper);
  padding:.6rem 1rem; font-family: var(--mono); font-size:.8rem;
}
.skip:focus{ left:0; }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:.7rem var(--pad);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--rule);
}
.topbar-mark{ text-decoration:none; display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.topbar-logo{ height:38px; width:auto; display:block; }
.topbar-words{ display:flex; flex-direction:column; line-height:1.15; }
.topbar-name{ font-family: var(--display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; color: var(--navy); }
.topbar-inst{ font-family: var(--mono); font-size:.64rem; color: var(--slate); letter-spacing:.05em; text-transform:uppercase; }
.topbar-nav{ display:flex; gap:clamp(.7rem,2.2vw,1.5rem); font-family: var(--mono); font-size:.74rem; letter-spacing:.03em; flex-wrap:wrap; }
.topbar-nav a{ text-decoration:none; color: var(--slate); }
.topbar-nav a:hover{ color: var(--ink); }
.topbar-nav a.is-current{ color: var(--ink); border-bottom:2px solid var(--scarlet); padding-bottom:2px; }

/* ---------- Affiliated institutions (external links, top bar) ---------- */
.topbar-affiliations{
  display:flex; align-items:center; gap:.5rem;
  padding-left:.9rem; margin-left:.4rem;
  border-left:1px solid var(--rule);
}
.affiliate-link{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.32rem .6rem;
  border:1px solid var(--rule); border-radius:999px;
  text-decoration:none;
  font-family: var(--mono); font-size:.66rem; letter-spacing:.02em;
  color: var(--slate);
  white-space:nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.affiliate-link:hover{ border-color: var(--scarlet); color: var(--ink); background: var(--paper-deep); }
.affiliate-logo{ height:16px; width:auto; display:block; }
.affiliate-arrow{ font-size:.8em; opacity:.6; }

/* ---------- Hero ---------- */
.hero{ padding: clamp(2.5rem,8vw,5.5rem) var(--pad) clamp(2rem,5vw,3rem); }

.eyebrow{
  margin:0 0 1.3rem;
  font-family: var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color: var(--slate);
}
.hero-headline{
  font-family: var(--display); font-weight:700;
  font-size: clamp(2.6rem, 9vw, 6rem);
  line-height:.95; letter-spacing:-.04em;
  margin:0 0 clamp(1.8rem,4.5vw,2.8rem);
  max-width:14ch; text-wrap:balance;
}
.motifs{ display:grid; gap:1.1rem; margin:0 0 clamp(1.8rem,4.5vw,2.6rem); }
.motif{ margin:0; --delay:0s; }
.motif-strip{
  display:flex; align-items:center; gap:.15rem; flex-wrap:wrap;
  font-family: var(--mono); font-size:clamp(.82rem,2.2vw,1.1rem); letter-spacing:.05em;
}
.motif-label{
  font-family: var(--mono); font-size:.7rem; letter-spacing:.06em;
  color: var(--slate); width:3.4rem; flex:0 0 3.4rem;
}
.motif-res{
  display:inline-block; padding:.38rem .52rem;
  background: var(--paper-deep); border:1px solid var(--rule); color: var(--ink);
}
.motif-side{ display:inline-flex; gap:.15rem; }
.motif-side.is-before{ animation: slide-left .9s cubic-bezier(.22,1,.36,1) var(--delay) both; }
.motif-side.is-after{  animation: slide-right .9s cubic-bezier(.22,1,.36,1) var(--delay) both; }
.motif-cut{
  color: var(--scarlet); font-family: var(--mono); font-weight:500;
  font-size:1.15em; line-height:1; padding:0 .45rem;
  animation: cut-in .5s ease calc(var(--delay) + .65s) both;
}
@keyframes slide-left { from{ transform:translateX(.9rem); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes slide-right{ from{ transform:translateX(-.9rem); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes cut-in{ from{ opacity:0; transform:translateY(-.4rem) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){
  .motif-side.is-before, .motif-side.is-after, .motif-cut{ animation:none; }
}
.motif-caption{
  margin:.55rem 0 0 4.05rem;
  font-family: var(--mono); font-size:.68rem; letter-spacing:.04em; color: var(--slate);
}
@media (max-width:520px){ .motif-caption{ margin-left:0; } }

.hero-intro{ max-width: var(--measure); font-size:clamp(1.05rem,1rem + .35vw,1.28rem); margin:0; }

/* ---------- Rotating banner ---------- */
.banner{ margin: clamp(1rem,3vw,2rem) 0 0; }
.banner-frame{
  position:relative; overflow:hidden;
  max-width:1800px; margin:0 auto;   /* never scale the photos past their real size */
  background: var(--paper-deep);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.banner-track{
  display:flex;
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce){ .banner-track{ transition:none; } }
.banner-slide{
  flex:0 0 100%; min-width:100%;
  aspect-ratio: 16/9;
  display:block; position:relative;
}
@media (max-width: 700px){ .banner-slide{ aspect-ratio: 4/3; } }
.banner-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.banner-empty{
  width:100%; height:100%;
  display:grid; place-items:center; gap:.5rem;
  background:
    repeating-linear-gradient(45deg,
      var(--paper-deep) 0 14px,
      color-mix(in srgb, var(--paper-deep) 80%, var(--rule)) 14px 28px);
  color: var(--slate); text-align:center; padding:2rem;
}
.banner-empty span{ font-family: var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.banner-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:2.6rem; height:2.6rem;
  border:1px solid var(--rule); background: color-mix(in srgb, var(--paper) 85%, transparent);
  color: var(--ink); font-size:1rem; cursor:pointer; line-height:1;
  display:grid; place-items:center;
}
.banner-arrow:hover{ background: var(--paper); border-color: var(--scarlet); }
.banner-prev{ left: .75rem; }
.banner-next{ right:.75rem; }
.banner-bar{
  max-width:1800px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.85rem var(--pad); flex-wrap:wrap;
}
.banner-caption{ margin:0; font-family: var(--mono); font-size:.72rem; letter-spacing:.04em; color: var(--slate); }
.banner-dots{ display:flex; gap:.45rem; }
.banner-dot{
  width:.55rem; height:.55rem; padding:0; cursor:pointer;
  border:1px solid var(--slate); background:transparent; border-radius:50%;
}
.banner-dot[aria-selected="true"]{ background: var(--scarlet); border-color: var(--scarlet); }

/* ---------- Divider ---------- */
.cut{
  border:0; height:1px; background: var(--rule);
  margin: clamp(2.5rem,6vw,4rem) var(--pad);
  position:relative; overflow:visible;
}
.cut::after{
  content:"\2193";
  position:absolute; left:0; top:50%; transform:translate(-.1rem,-50%);
  background: var(--paper); color: var(--scarlet);
  font-family: var(--mono); font-size:.8rem; line-height:1;
  padding:.15rem .5rem .15rem 0;
}

/* ---------- Page headers (inner pages) ---------- */
.pagehead{ padding: clamp(2.5rem,7vw,4.5rem) var(--pad) clamp(1.5rem,4vw,2.5rem); }
.pagehead-title{
  color: var(--navy-deep);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-family: var(--display); font-weight:800;
  font-size: clamp(2.2rem,6vw,3.6rem); line-height:1;
  letter-spacing:-.035em; margin:0;
}
.pagehead-sub{ margin:.9rem 0 0; max-width: var(--measure); color: var(--slate); }

/* ---------- Sections ---------- */
.section{ padding:0 var(--pad); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.section-title{
  color: var(--navy-deep);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-family: var(--display); font-weight:600;
  font-size: clamp(1.5rem,3.2vw,2.1rem); letter-spacing:-.02em;
  margin:0 0 clamp(1.5rem,3.5vw,2.2rem);
}
.more-link{ font-family: var(--mono); font-size:.75rem; letter-spacing:.04em; color: var(--slate); text-decoration:none; }
.more-link:hover{ color: var(--scarlet); }
.subhead{
  font-family: var(--mono); font-weight:500;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--slate);
  margin: clamp(2.5rem,5vw,3.5rem) 0 1.2rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--rule);
}
.subhead:first-child{ margin-top:0; }
.yearhead{
  color: var(--navy-deep);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-family: var(--display); font-weight:600; font-size:1.25rem; letter-spacing:-.02em;
  color: var(--slate);
  margin: clamp(2rem,4vw,2.8rem) 0 1.1rem; padding-bottom:.5rem;
  border-bottom:1px solid var(--rule);
}
.yearhead:first-of-type{ margin-top:.5rem; }

/* ---------- Research cards (front page) ---------- */
.rcards{ display:grid; gap:1.1rem; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
.rcard{
  display:flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--rule); background: var(--paper-deep);
  transition: border-color .2s ease, transform .2s ease;
}
.rcard:hover{ border-color: var(--scarlet); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .rcard{ transition:none; } .rcard:hover{ transform:none; } }
.rcard-img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; border-bottom:1px solid var(--rule); }
.rcard-text{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.rcard-title{
  color: var(--navy-deep);
  font-variation-settings: "SOFT" 30, "WONK" 1; font-family: var(--display); font-weight:600; font-size:1.05rem; letter-spacing:-.015em; line-height:1.22; margin:0; }
.rcard-blurb{ margin:0; font-size:.92rem; flex:1; }
.rcard-more{ font-family: var(--mono); font-size:.7rem; letter-spacing:.06em; color: var(--scarlet); }

/* ---------- Research page ---------- */
.research-list{ display:grid; gap: clamp(2.5rem,5vw,3.5rem); }
.research-item{
  display:grid; gap:1rem; grid-template-columns:1fr;
  padding-top:2rem; border-top:1px solid var(--rule);
  scroll-margin-top:5.5rem;
}
.research-item:first-child{ border-top:0; padding-top:0; }
@media (min-width: 900px){
  .research-item{ grid-template-columns: minmax(0,22ch) minmax(0,1fr); gap: clamp(2rem,5vw,4rem); }
}
.research-title{
  color: var(--navy-deep);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-family: var(--display); font-weight:600;
  font-size:1.3rem; letter-spacing:-.02em; line-height:1.15; margin:0;
}
.research-main{ max-width: var(--measure); }
.research-body{ margin:0; }
.research-qlabel{
  font-family: var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--slate); margin:1.5rem 0 .6rem;
}
.research-questions{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.research-questions li{ padding-left:1.4rem; position:relative; font-size:.95rem; }
.research-questions li::before{
  content:"\2193"; position:absolute; left:0; top:.05rem;
  color: var(--scarlet); font-family: var(--mono); font-size:.78rem;
}
.research-more{ margin-top:1.2rem; }
.research-more summary{
  cursor:pointer; font-family: var(--mono); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color: var(--slate);
}
.research-more summary:hover{ color: var(--ink); }
.research-more p{ margin:.9rem 0 0; font-size:.96rem; }
.research-figure{ margin:1.4rem 0 0; }
.research-figure img, .research-figure svg{ width:100%; height:auto; display:block; border:1px solid var(--rule); }

/* ---------- People ---------- */
.people-list{ display:grid; gap: clamp(1.5rem,3.5vw,2.25rem); }
.person{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width: 620px){
  .person{ grid-template-columns: 280px minmax(0,1fr); gap:1.75rem; align-items:start; }
}
.person-media{ max-width:280px; }
.person-portrait, .person-initials{
  width:100%; aspect-ratio:4/5; display:block;
  background: var(--paper-deep); border:1px solid var(--rule);
}
.person-portrait{ object-fit:cover; }
.person-initials{ display:grid; place-items:center; font-family: var(--mono); font-size:2.1rem; color: var(--slate); letter-spacing:.1em; }
.person-text{ max-width: var(--measure); display:flex; flex-direction:column; gap:.45rem; }
.person-name{
  color: var(--navy-deep);
  font-variation-settings: "SOFT" 30, "WONK" 1; font-family: var(--display); font-weight:600; font-size:1.12rem; letter-spacing:-.015em; margin:0; }
.person-role{ font-family: var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--scarlet); margin:0; }
.person-bio{ margin:.3rem 0 0; font-size:.95rem; }
.person-bio s{ color: var(--slate); text-decoration-thickness:1px; }
.person-links{ font-family: var(--mono); font-size:.72rem; display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.25rem; }

.alumni{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; max-width:80ch; }
.alumni li{ display:flex; gap:.55rem; flex-wrap:wrap; align-items:baseline; font-size:.95rem; }
.alumni-name{ font-weight:600; }
.alumni-role{ font-family: var(--mono); font-size:.72rem; color: var(--slate); }
.alumni-now{ color: var(--slate); font-size:.92rem; }

/* ---------- Lab news ---------- */
.labnews{ display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); }
.labnews-item{ border:1px solid var(--rule); background: var(--paper-deep); display:flex; flex-direction:column; }
.labnews-item img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; border-bottom:1px solid var(--rule); }
.labnews-text{ padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.4rem; }
.labnews-date{ font-family: var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--scarlet); margin:0; }
.labnews-title{
  color: var(--navy-deep);
  font-variation-settings: "SOFT" 30, "WONK" 1; font-family: var(--display); font-weight:600; font-size:1.02rem; letter-spacing:-.015em; line-height:1.25; margin:0; }
.labnews-body{ margin:0; font-size:.92rem; }

.press{ list-style:none; padding:0; margin:0; max-width:80ch; display:grid; gap:1rem; }
.press li{ display:grid; grid-template-columns:6rem 1fr; gap:1rem; align-items:baseline; font-size:.96rem; }
.press-date{ font-family: var(--mono); font-size:.72rem; color: var(--slate); }
.press-outlet{ font-family: var(--mono); font-size:.72rem; color: var(--slate); display:block; margin-top:.15rem; }
@media (max-width:560px){ .press li{ grid-template-columns:1fr; gap:.2rem; } }

/* ---------- Publications ---------- */
.pubs{ list-style:none; padding:0; margin:0; max-width:82ch; display:grid; gap:1.15rem; }
.pub{ padding-left:1.5rem; position:relative; }
.pub.is-lead::before{
  content:"\2193"; position:absolute; left:0; top:.15rem;
  color: var(--scarlet); font-family: var(--mono); font-size:.82rem;
}
.pub-title{ font-weight:600; font-size:1rem; display:block; }
.pub-meta{ font-size:.85rem; color: var(--slate); display:block; margin-top:.2rem; }
.pub-journal{ font-family: var(--mono); font-size:.74rem; color: var(--slate); display:block; margin-top:.2rem; }
.pubs-note{ margin:0 0 1rem; font-family: var(--mono); font-size:.76rem; color: var(--slate); }
.pubs-links{ display:inline-flex; gap:1rem; margin-left:.5rem; }
.pubs-links a{ color: var(--slate); }
.pubs-key{ font-family: var(--mono); font-size:.72rem; color: var(--slate); margin:0 0 .5rem; }
.pubs-key-mark{ color: var(--scarlet); }

/* ---------- Join ---------- */
.join-intro{ max-width: var(--measure); margin:0 0 clamp(1.75rem,4vw,2.5rem); font-size:1.08rem; }
.tracks{ display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); align-items:start; }
.track{ border:1px solid var(--rule); border-top:3px solid var(--scarlet); padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.75rem; }
.track-audience{
  color: var(--navy-deep);
  font-variation-settings: "SOFT" 30, "WONK" 1; font-family: var(--display); font-weight:600; font-size:1.12rem; letter-spacing:-.015em; margin:0; }
.track-status{ font-family: var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--slate); margin:0; }
.track-status.is-open{ color: var(--scarlet); }
.track-body{ margin:0; font-size:.94rem; }
.track-positions{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.track-positions li{ font-family: var(--mono); font-size:.76rem; line-height:1.45; padding:.55rem .7rem; background: var(--paper-deep); }
.track-apply{ margin:0; font-size:.92rem; }
.track-email{ font-family: var(--mono); font-size:.78rem; margin:0; }

/* ---------- Contact ---------- */
.contact{ font-style:normal; display:grid; gap:.15rem; font-size:1rem; }
.contact-map{
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 640px;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  aspect-ratio: 4 / 3;
}
.contact-map iframe{
  width:100%; height:100%; border:0; display:block;
}
@media (min-width: 640px){
  .contact-map{ aspect-ratio: 16 / 9; }
}

/* ---------- Footer ---------- */
.footer{
  margin-top: clamp(3.5rem,8vw,5.5rem);
  padding: clamp(2rem,5vw,3rem) var(--pad) clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--rule);
}
.footer-funding-label{ font-family: var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: var(--slate); margin:0 0 .8rem; }
.footer-funding{ list-style:none; padding:0; margin:0 0 2rem; display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; font-size:.88rem; color: var(--slate); max-width:80ch; }
.footer-legal{ font-family: var(--mono); font-size:.68rem; color: var(--slate); margin:0; }

/* ============================================================
   MOTION + UI  (added for polish)
   ============================================================ */

/* ---------- Hero: two columns with the protein graphic ---------- */
.hero{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (min-width:960px){
  .hero{ grid-template-columns: minmax(0,1fr) minmax(300px,420px); }
}
.hero-figure{ display:none; }
@media (min-width:960px){ .hero-figure{ display:block; } }

.protein{ width:100%; height:auto; display:block; overflow:visible; }
.protein-dot{
  animation: drift var(--t,7s) ease-in-out var(--d,0s) infinite alternate;
  transform-box: fill-box; transform-origin: center;
}
@keyframes drift{
  from{ transform: translate(0,0) scale(1); }
  to  { transform: translate(3px,-4px) scale(1.05); }
}
.protein-half{ transform-box: view-box; transform-origin:center; }
.protein-half.is-left  { animation: cut-left  9s cubic-bezier(.6,0,.2,1) 1.2s infinite; }
.protein-half.is-right { animation: cut-right 9s cubic-bezier(.6,0,.2,1) 1.2s infinite; }
@keyframes cut-left{
  0%,26%{ transform: translateX(0) }
  38%,62%{ transform: translateX(-16px) }
  86%,100%{ transform: translateX(0) }
}
@keyframes cut-right{
  0%,26%{ transform: translateX(0) }
  38%,62%{ transform: translateX(16px) }
  86%,100%{ transform: translateX(0) }
}
.protein-blade{
  stroke: var(--scarlet); stroke-width:2; stroke-linecap:round;
  transform-box: view-box; transform-origin:center;
  animation: blade 9s cubic-bezier(.6,0,.2,1) 1.2s infinite;
}
@keyframes blade{
  0%,22%   { opacity:0; transform: scaleY(0) }
  30%      { opacity:1; transform: scaleY(1) }
  46%      { opacity:1; transform: scaleY(1) }
  60%,100% { opacity:0; transform: scaleY(1) }
}
@media (prefers-reduced-motion: reduce){
  .protein-dot, .protein-half, .protein-blade{ animation:none; }
  .protein-blade{ opacity:.35; }
}

/* ---------- Sticky header states ---------- */
.topbar{ transition: box-shadow .25s ease, padding .25s ease; }
.topbar.is-stuck{
  box-shadow: 0 1px 0 var(--rule), 0 8px 24px -18px rgba(0,0,0,.45);
  padding-top:.55rem; padding-bottom:.55rem;
}
.topbar-logo{ transition: height .25s ease; }
.topbar.is-stuck .topbar-logo{ height:30px; }
.topbar-nav a{ position:relative; }
.topbar-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background: var(--scarlet); transition: right .22s ease;
}
.topbar-nav a:hover::after{ right:0; }
.topbar-nav a.is-current{ border-bottom:0; padding-bottom:0; }
.topbar-nav a.is-current::after{ right:0; }

/* ---------- Mobile menu ---------- */
.navtoggle{ display:none; }
@media (max-width:820px){
  .navtoggle{
    display:grid; gap:4px; place-content:center;
    width:42px; height:38px; padding:0 9px;
    background:none; border:1px solid var(--rule); cursor:pointer;
  }
  .navtoggle span{ display:block; width:22px; height:2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
  .topbar.is-open .navtoggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .topbar.is-open .navtoggle span:nth-child(2){ opacity:0; }
  .topbar.is-open .navtoggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  .topbar{ position:sticky; }
  .topbar-nav{
    order:3; flex-basis:100%; flex-direction:column; gap:0;
    max-height:0; overflow:hidden; transition: max-height .3s ease;
  }
  .topbar.is-open .topbar-nav{ max-height:60vh; }
  .topbar-nav a{ padding:.7rem 0; border-bottom:1px solid var(--rule); font-size:.85rem; }
  .topbar-nav a::after{ display:none; }
  .topbar.is-open .topbar-nav{ padding-top:.5rem; }

  .topbar-affiliations{
    order:4; flex-basis:100%; max-height:0; overflow:hidden;
    border-left:0; padding-left:0; margin-left:0;
    flex-wrap:wrap; gap:.5rem;
    transition: max-height .3s ease;
  }
  .topbar.is-open .topbar-affiliations{
    max-height:20vh; padding-top:.7rem; margin-top:.2rem;
    border-top:1px solid var(--rule);
  }
}

/* ---------- Banner: progress bar + caption fade ---------- */
.banner-progress{
  position:absolute; left:0; bottom:0; height:3px; width:0;
  background: var(--scarlet); z-index:3;
}
.banner-progress.is-running{ animation: fill var(--dur,6s) linear forwards; }
.banner-progress.is-paused{ animation-play-state: paused; }
@keyframes fill{ from{ width:0 } to{ width:100% } }
.banner-caption{ opacity:0; }
.banner-caption.is-in{ opacity:1; transition: opacity .45s ease .1s; }
.banner-arrow{ opacity:0; transition: opacity .25s ease, background .2s ease, border-color .2s ease; }
.banner:hover .banner-arrow, .banner:focus-within .banner-arrow{ opacity:1; }
@media (hover:none){ .banner-arrow{ opacity:1; } }
.banner-slide img{ transition: transform 7s ease-out; }

/* ---------- Card + link micro-interactions ---------- */
.labnews-item, .track{ transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.labnews-item:hover, .track:hover{
  border-color: var(--scarlet); transform: translateY(-3px);
  box-shadow: 0 14px 28px -22px rgba(0,0,0,.5);
}
.rcard{ box-shadow: 0 0 0 rgba(0,0,0,0); }
.rcard:hover{ box-shadow: 0 16px 32px -24px rgba(0,0,0,.55); }
.rcard-more{ transition: letter-spacing .2s ease; }
.rcard:hover .rcard-more{ letter-spacing:.12em; }
.person{ transition: transform .22s ease; }
.person:hover .person-portrait, .person:hover .person-initials{ border-color: var(--scarlet); }
.person-portrait, .person-initials{ transition: border-color .22s ease; }
.pub{ transition: transform .18s ease; }
.pub:hover{ transform: translateX(3px); }
.pub.is-lead::before{ transition: transform .18s ease; }
.pub:hover.is-lead::before{ transform: translateY(2px); }
.more-link{ transition: transform .2s ease, color .2s ease; display:inline-block; }
.more-link:hover{ transform: translateX(3px); }

/* the divider arrow drops when its section arrives */
.cut::after{ transition: transform .5s cubic-bezier(.22,1,.36,1); }
.section.is-in + .cut::after{ transform: translate(-.1rem,-50%); }

/* ---------- Publications filter ---------- */
.pubfilter{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  margin:0 0 1.75rem; padding-bottom:1.25rem; border-bottom:1px solid var(--rule);
}
.pubsearch{
  flex:1 1 260px; min-width:0;
  font-family: var(--mono); font-size:.82rem; color: var(--ink);
  padding:.65rem .85rem; background: var(--paper);
  border:1px solid var(--rule); border-radius:0;
  transition: border-color .2s ease;
}
.pubsearch:focus{ outline:none; border-color: var(--scarlet); }
.pubsearch::placeholder{ color: var(--slate); }
.pubtoggle{
  font-family: var(--mono); font-size:.74rem; letter-spacing:.04em;
  padding:.6rem .85rem; cursor:pointer; color: var(--slate);
  background: var(--paper); border:1px solid var(--rule);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.pubtoggle:hover{ color: var(--ink); border-color: var(--slate); }
.pubtoggle.is-on{ color: var(--paper); background: var(--ink); border-color: var(--ink); }
.pubtoggle-mark{ color: var(--scarlet); margin-right:.3rem; }
.pubtoggle.is-on .pubtoggle-mark{ color: #FF6B6B; }
.pubcount{ font-family: var(--mono); font-size:.72rem; color: var(--slate); margin:0; margin-left:auto; }
.pubs-empty{ font-family: var(--mono); font-size:.8rem; color: var(--slate); }
.yearblock[hidden]{ display:none; }

/* ---------- Join call to action ---------- */
.join-cta{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  margin:0 0 clamp(2rem,4vw,2.75rem); padding:1.1rem 1.3rem;
  background: var(--paper-deep); border-left:3px solid var(--scarlet);
}
.joincta-note{ font-size:.95rem; }
.joincta-link{
  font-family: var(--mono); font-size:.9rem; font-weight:500;
  text-decoration-color: var(--scarlet);
}

/* ---------- Back to top ---------- */
.totop{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:30;
  width:2.75rem; height:2.75rem; cursor:pointer;
  background: var(--ink); color: var(--paper); border:0;
  font-family: var(--mono); font-size:1rem; line-height:1;
  opacity:0; pointer-events:none; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.totop.is-shown{ opacity:1; pointer-events:auto; transform:none; }
.totop:hover{ background: var(--scarlet); }

/* ============================================================
   MASTHEAD — the full-height home page banner
   ============================================================ */
.masthead{ margin:0; position:relative; }
.masthead .banner-frame{
  max-width:none; margin:0; border-top:0;
  border-bottom:1px solid var(--rule);
}
.masthead .banner-slide{
  aspect-ratio:auto;
  height: clamp(21rem, 59vh, 37rem);
}
.masthead .banner-slide img{ height:100%; }

/* dark wash so the type stays readable over any photo */
.masthead-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, rgba(12,14,32,.86) 0%, rgba(12,14,32,.42) 42%, rgba(12,14,32,.30) 70%, rgba(12,14,32,.55) 100%),
    radial-gradient(120% 80% at 20% 70%, rgba(27,37,96,.55) 0%, rgba(27,37,96,0) 60%);
}

.masthead-inner{
  position:absolute; z-index:3; left:0; right:0; bottom:clamp(4.5rem,10vh,7rem);
  padding:0 var(--pad);
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  text-align:center;
}
.masthead-logo{
  width:clamp(58px,7vw,86px); height:auto; margin-bottom:.9rem;
  padding:.5rem; border-radius:.6rem;
  background:#fff;
  box-shadow: 0 3px 14px rgba(0,0,0,.35);
  animation: mh-rise .9s cubic-bezier(.22,1,.36,1) .1s both;
}
.masthead-name{
  margin:0; color:#fff;
  font-family: var(--display); font-weight:900;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: clamp(3rem, 11vw, 8rem);
  line-height:.92; letter-spacing:-.035em;
  text-shadow: 0 4px 34px rgba(0,0,0,.42);
  animation: mh-rise .9s cubic-bezier(.22,1,.36,1) .18s both;
}
.masthead-tag{
  margin:.5rem 0 0; color:#fff;
  font-family: var(--display); font-weight:400; font-style:italic;
  font-size: clamp(1.25rem, 3.2vw, 2.1rem); letter-spacing:-.01em;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
  animation: mh-rise .9s cubic-bezier(.22,1,.36,1) .3s both;
}
.masthead-tag::before{
  content:""; display:inline-block; vertical-align:middle;
  width:2.2rem; height:2px; margin-right:.8rem;
  background: var(--scarlet);
}
.masthead-unit{
  margin:1rem 0 0; color: rgba(255,255,255,.82);
  font-family: var(--mono); font-size:clamp(.62rem,1.5vw,.74rem);
  letter-spacing:.14em; text-transform:uppercase;
  animation: mh-rise .9s cubic-bezier(.22,1,.36,1) .42s both;
}
@keyframes mh-rise{ from{ opacity:0; transform: translateY(18px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){
  .masthead-logo, .masthead-name, .masthead-tag, .masthead-unit{ animation:none; }
}

/* caption + dots sit over the image, bottom right */
.masthead .banner-bar{
  position:absolute; z-index:3; right:0; bottom:1.1rem; left:auto;
  max-width:none; margin:0; padding:0 var(--pad);
  justify-content:flex-end; gap:1rem;
}
.masthead .banner-caption{ color: rgba(255,255,255,.8); text-align:right; }
.masthead .banner-dot{ border-color: rgba(255,255,255,.7); }
.masthead .banner-dot[aria-selected="true"]{ background: var(--scarlet); border-color: var(--scarlet); }
.masthead .banner-arrow{
  background: rgba(12,14,32,.35); border-color: rgba(255,255,255,.35); color:#fff;
  backdrop-filter: blur(4px);
}
.masthead .banner-arrow:hover{ background: var(--scarlet); border-color: var(--scarlet); }
.masthead .banner-progress{ z-index:4; }

/* scroll cue */
.masthead-cue{
  position:absolute; z-index:3; left:50%; bottom:1.4rem; transform:translateX(-50%);
  width:26px; height:40px; border:1.5px solid rgba(255,255,255,.55); border-radius:14px;
  display:grid; place-items:start center; padding-top:7px;
}
.masthead-cue span{
  display:block; width:3px; height:7px; border-radius:2px; background: rgba(255,255,255,.9);
  animation: cue 1.9s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ transform: translateY(0); opacity:1 } 50%{ transform: translateY(9px); opacity:.35 } }
@media (prefers-reduced-motion: reduce){ .masthead-cue span{ animation:none; } }
@media (max-width:820px){ .masthead-cue{ display:none; } }

/* header floats over the masthead until you scroll */
body[data-page="home"] .topbar{
  position:fixed; top:0; left:0; right:0;
  background:transparent; backdrop-filter:none; border-bottom-color:transparent;
}
body[data-page="home"] .topbar .topbar-name{ color:#fff; }
body[data-page="home"] .topbar .topbar-inst,
body[data-page="home"] .topbar .topbar-nav a{ color: rgba(255,255,255,.85); }
body[data-page="home"] .topbar .topbar-nav a:hover,
body[data-page="home"] .topbar .topbar-nav a.is-current{ color:#fff; }
body[data-page="home"] .topbar .topbar-logo{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
body[data-page="home"] .navtoggle{ border-color: rgba(255,255,255,.5); }
body[data-page="home"] .navtoggle span{ background:#fff; }
body[data-page="home"] .topbar .topbar-affiliations{ border-left-color: rgba(255,255,255,.3); }
body[data-page="home"] .topbar .affiliate-link{ border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.85); }
body[data-page="home"] .topbar .affiliate-link:hover{ border-color:#fff; color:#fff; background: rgba(255,255,255,.1); }

body[data-page="home"] .topbar.is-stuck{
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom-color: var(--rule);
}
body[data-page="home"] .topbar.is-stuck .topbar-name{ color: var(--navy); }
body[data-page="home"] .topbar.is-stuck .topbar-inst,
body[data-page="home"] .topbar.is-stuck .topbar-nav a{ color: var(--slate); }
body[data-page="home"] .topbar.is-stuck .topbar-nav a:hover,
body[data-page="home"] .topbar.is-stuck .topbar-nav a.is-current{ color: var(--ink); }
body[data-page="home"] .topbar.is-stuck .topbar-logo{ filter:none; }
body[data-page="home"] .topbar.is-stuck .navtoggle{ border-color: var(--rule); }
body[data-page="home"] .topbar.is-stuck .navtoggle span{ background: var(--ink); }
body[data-page="home"] .topbar.is-stuck .topbar-affiliations{ border-left-color: var(--rule); }
body[data-page="home"] .topbar.is-stuck .affiliate-link{ border-color: var(--rule); color: var(--slate); }
body[data-page="home"] .topbar.is-stuck .affiliate-link:hover{ border-color: var(--scarlet); color: var(--ink); background: var(--paper-deep); }
body[data-page="home"] .topbar.is-open{ background: var(--paper); }
body[data-page="home"] .topbar.is-open .topbar-name{ color: var(--navy); }
body[data-page="home"] .topbar.is-open .topbar-nav a{ color: var(--slate); }
body[data-page="home"] .topbar.is-open .navtoggle span{ background: var(--ink); }
body[data-page="home"] .topbar.is-open .topbar-affiliations{ border-left-color: var(--rule); }
body[data-page="home"] .topbar.is-open .affiliate-link{ border-color: var(--rule); color: var(--slate); }
body[data-page="home"] .topbar.is-open .affiliate-link:hover{ border-color: var(--scarlet); color: var(--ink); background: var(--paper-deep); }

/* ---------- Intro band under the masthead ---------- */
.intro{ padding-top: clamp(3rem,7vw,5rem); }
.intro-grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (min-width:960px){
  .intro-grid{ grid-template-columns: minmax(0,1fr) minmax(280px,400px); }
}
.intro .hero-intro{
  font-family: var(--body); font-weight:400;
  font-size: clamp(1.08rem,1rem + .4vw,1.32rem); line-height:1.6;
  color: var(--ink); margin:1.75rem 0 0; max-width: var(--measure);
}
.hero-figure{ display:none; }
@media (min-width:960px){ .hero-figure{ display:block; } }

/* motif chips warm up with the new palette */
.motif-res{
  background:#fff; border-color: color-mix(in srgb, var(--navy) 18%, var(--rule));
  color: var(--navy-deep); font-weight:500; border-radius:3px;
}
.motif-label{ color: var(--navy); font-weight:500; }

/* ---------- Colour accents from the logo ---------- */
.person-role{ color: var(--navy); }
.labnews-date{ color: var(--navy); }
.rcard-more{ color: var(--scarlet); }
.pubtoggle.is-on{ background: var(--navy-deep); border-color: var(--navy-deep); }
.totop{ background: var(--navy-deep); }
.totop:hover{ background: var(--scarlet); }
.track{ border-top-color: var(--navy); }
.track:hover{ border-color: var(--navy); }
.labnews-item:hover{ border-color: var(--navy); }
.rcard:hover{ border-color: var(--navy); }
.positions li, .track-positions li{ background:#fff; }
.topbar-nav a::after{ background: var(--scarlet); }
.protein-blade{ stroke: var(--scarlet); }

/* ---------- Masthead corrections ---------- */
/* keep the caption clear of the centred scroll cue */
.masthead .banner-bar{
  bottom:1.5rem;
  max-width:min(48ch, 46vw);
  left:auto; flex-direction:column; align-items:flex-end; gap:.5rem;
}
.masthead .banner-caption{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:.68rem; line-height:1.5;
}
@media (max-width:820px){
  .masthead .banner-bar{ max-width:70vw; bottom:1rem; }
  .masthead .banner-caption{ -webkit-line-clamp:1; }
}
/* header logo also needs the light treatment over the image */
body[data-page="home"] .topbar:not(.is-stuck):not(.is-open) .topbar-logo{ display:none; }
body[data-page="home"] .topbar:not(.is-stuck):not(.is-open) .topbar-mark::before{
  content:""; width:34px; height:34px; flex:0 0 34px;
  background: url("images/logo-light.png") center/contain no-repeat;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
/* Fraunces reads best a touch tighter and softer at display sizes */
.masthead-name{ font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144; }
.masthead-tag{ font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 40; }
.pagehead-title, .section-title{ font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 72; }
.research-title, .rcard-title, .person-name, .labnews-title, .track-audience, .yearhead{
  font-variation-settings: "SOFT" 45, "WONK" 0, "opsz" 24;
}
.topbar-name{ font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 20; }

/* ---------- Final tuning ---------- */
/* body copy: Jakarta reads better slightly larger with more line height */
body{ font-size: clamp(1rem, .97rem + .18vw, 1.075rem); line-height:1.66; }
.person-bio, .research-body, .track-body, .rcard-blurb{ color: #34364A; }

/* motif chips: give them the navy tint so they don't float on the warm paper */
.motif-res{
  background: color-mix(in srgb, var(--navy) 5%, #fff);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--navy) 8%, transparent);
}

/* research cards: warm card face, navy title, red only on the cue */
.rcard{ background: color-mix(in srgb, var(--paper-deep) 70%, #fff); }
.labnews-item{ background: color-mix(in srgb, var(--paper-deep) 70%, #fff); }

/* the divider arrow in the logo red */
.cut::after{ background: var(--paper); }

/* people portraits get a warm frame */
.person-initials{ background: color-mix(in srgb, var(--paper-deep) 85%, #fff); color: var(--navy); opacity:.55; }

/* footer funding list in navy so it reads as links-adjacent, not body copy */
.footer-funding{ color: var(--slate); }

/* mobile: header bar needs a readable backdrop once the menu opens */
@media (max-width:820px){
  .masthead .banner-slide{ height: clamp(19rem, 54vh, 29rem); }
  .masthead-name{ font-size: clamp(2.6rem, 13vw, 4rem); }
}

/* ============================================================
   COLOUR-CYCLED MONOGRAMS + FUN FACTS  (added for personality)
   ============================================================ */

/* ---------- Research: colour-cycled monogram badges ---------- */
.rcard-icon, .research-icon{
  display:grid; place-items:center; flex:0 0 auto;
  font-family: var(--mono); font-weight:600; letter-spacing:.02em;
  color:#fff;
}
.rcard-icon{
  width:100%; aspect-ratio:3/2;
  font-size:1.6rem;
  border-bottom:1px solid var(--rule);
}
.research-head{ display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; }
.research-icon{
  width:3rem; height:3rem; border-radius:50%;
  font-size:1.05rem;
}
.rcard:nth-of-type(4n+1) .rcard-icon, .research-item:nth-of-type(4n+1) .research-icon{ background: var(--navy); }
.rcard:nth-of-type(4n+2) .rcard-icon, .research-item:nth-of-type(4n+2) .research-icon{ background: var(--scarlet); }
.rcard:nth-of-type(4n+3) .rcard-icon, .research-item:nth-of-type(4n+3) .research-icon{ background: color-mix(in srgb, var(--cyan) 88%, var(--navy-deep)); }
.rcard:nth-of-type(4n+4) .rcard-icon, .research-item:nth-of-type(4n+4) .research-icon{ background: color-mix(in srgb, var(--navy) 45%, var(--cyan)); }

/* ---------- People: colour-cycled initials, gentle hover lift ---------- */
.person-initials{ opacity:1; font-weight:600; }
.person:nth-of-type(4n+1) .person-initials{ background: color-mix(in srgb, var(--navy) 14%, var(--paper-deep)); color: var(--navy); }
.person:nth-of-type(4n+2) .person-initials{ background: color-mix(in srgb, var(--scarlet) 13%, var(--paper-deep)); color: var(--scarlet); }
.person:nth-of-type(4n+3) .person-initials{ background: color-mix(in srgb, var(--cyan) 20%, var(--paper-deep)); color: color-mix(in srgb, var(--cyan) 65%, var(--navy-deep)); }
.person:nth-of-type(4n+4) .person-initials{ background: color-mix(in srgb, var(--navy) 10%, var(--cyan) 14%); color: var(--navy-deep); }
.person{ transition: transform .2s ease; }
.person:hover{ transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .person{ transition:none; } .person:hover{ transform:none; } }

/* ---------- Fun fact callout ---------- */
.fun-fact{
  margin:.7rem 0 0; font-size:.88rem; line-height:1.5;
  padding:.55rem .75rem;
  background: color-mix(in srgb, var(--cyan) 9%, var(--paper));
  border-left:2px solid var(--cyan);
}
.fun-fact-label{
  font-family: var(--mono); font-weight:600; font-size:.66rem;
  letter-spacing:.09em; text-transform:uppercase;
  color: var(--navy); margin-right:.35rem;
}

/* ---------- Lab news: colour-cycled top edge for rhythm ---------- */
.labnews-item{ border-top:3px solid var(--rule); }
.labnews-item:nth-of-type(3n+1){ border-top-color: var(--navy); }
.labnews-item:nth-of-type(3n+2){ border-top-color: var(--scarlet); }
.labnews-item:nth-of-type(3n+3){ border-top-color: color-mix(in srgb, var(--cyan) 88%, var(--navy-deep)); }
.labnews-item{ transition: transform .2s ease, border-color .2s ease; }
.labnews-item:hover{ transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .labnews-item{ transition:none; } .labnews-item:hover{ transform:none; } }

/* ============================================================
   THEME HUB — the unifying research statement + aim quick-nav
   ============================================================ */
.theme-diagram{
  margin: 0 0 clamp(2.5rem,6vw,4rem);
  padding: clamp(1.5rem,4vw,2.5rem) clamp(1.5rem,4vw,2.25rem);
  background: var(--paper-deep);
  border:1px solid var(--rule);
  border-left:3px solid var(--navy);
}
.theme-hub-label{
  margin:0 0 .5rem;
  font-family: var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color: var(--slate);
}
.theme-hub-title{
  margin:0 0 clamp(1.25rem,3vw,1.75rem);
  color: var(--navy-deep);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-family: var(--display); font-weight:700;
  font-size: clamp(1.4rem,3vw,1.9rem); letter-spacing:-.02em;
}
.theme-aims{
  display:grid; gap:.75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
}
.theme-aim{
  display:flex; align-items:baseline; gap:.55rem;
  text-decoration:none; padding:.6rem .7rem;
  background:#fff; border:1px solid var(--rule);
  transition: border-color .2s ease, transform .2s ease;
}
.theme-aim:hover{ border-color: var(--scarlet); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce){ .theme-aim{ transition:none; } .theme-aim:hover{ transform:none; } }
.theme-aim-num{
  font-family: var(--mono); font-weight:600; font-size:.72rem;
  color: var(--scarlet); flex:0 0 auto;
}
.theme-aim-title{ font-size:.85rem; color: var(--ink); line-height:1.35; }

/* ---------- Saeed Lab Community ---------- */
.community-note{ margin:0 0 1.25rem; color: var(--slate); max-width: var(--measure); }
.community-row{
  display:flex; gap:1.1rem; overflow-x:auto;
  margin:0 0 clamp(2rem,5vw,3rem);
  padding-bottom:.75rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.community-tile{ margin:0; flex:0 0 auto; width:min(260px, 72vw); scroll-snap-align:start; }
.community-tile img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border:1px solid var(--rule);
}
.community-empty{
  width:100%; aspect-ratio:4/3;
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(45deg,
      var(--paper-deep) 0 14px,
      color-mix(in srgb, var(--paper-deep) 80%, var(--rule)) 14px 28px);
  border:1px solid var(--rule);
}
.community-empty span{
  font-family: var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--slate);
}
.community-caption{
  margin-top:.5rem; font-size:.85rem; color: var(--slate);
}