/* ============================================================
   RETROGEN Lab — design system
   Colors & type derived from the lab logo.
   Organized as: tokens → base → layout → components → sections
   ============================================================ */

/* ---------- 1. Design tokens (CSS custom properties) ---------- */
:root {
  /* Brand palette (sampled from the RETROGEN logo) */
  --navy:        #204c96;   /* deep blue — primary: buttons, headings, RETRO (logo) */
  --navy-deep:   #16315e;   /* dark blue — dark sections / footer */
  --blue:        #3e94db;   /* azure — links / secondary          */
  --blue-bright: #2097e9;   /* vivid azure — bright accent / gradient blue stop */
  --blue-light:  #cac3e5;   /* light indigo — soft fills / borders */
  --purple:      #723473;   /* purple — gradient midpoint, "and"  */
  --maroon:      #a53a7b;   /* magenta — GEN / eyebrows / accent (logo) */
  --maroon-deep: #7f2a5d;   /* deeper magenta                     */

  /* Neutrals */
  --ink:    #1a1c2b;        /* body text (navy-tinted near-black) */
  --muted:  #5b6178;        /* secondary text                     */
  --line:   #e6e9f2;        /* hairline borders                   */
  --bg:     #ffffff;        /* page background                    */
  --bg-soft:#f2e9ef;        /* soft pink/mauve — bottom stop of the smooth section gradient */

  /* Signature gradient — the DNA helix, blue → purple → maroon */
  --grad: linear-gradient(100deg, var(--blue-bright) 0%, var(--purple) 55%, var(--maroon) 100%);

  /* Typography */
  --font-head: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;

  /* Spacing & sizing */
  --row:       1032px;   /* shared width of the homepage tile row and team row */
  --content:   1200px;   /* text column on content pages — used inline as max-width:var(--content) */
  --container: calc(var(--content) + 2 * var(--gutter));   /* the container includes its side padding, so this lets the column reach --content */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 6px 24px rgba(35, 33, 89, 0.08);
  --shadow-lg: 0 18px 50px rgba(35, 33, 89, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Base / reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: #204c96;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }

a { color: var(--blue); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--maroon); }

img { max-width: 100%; display: block; }

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--soft { background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%); }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 0.9rem;
}

.center { text-align: center; margin-inline: auto; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 600; font-size: .96rem; line-height: 1.2;
  padding: .8rem 1.5rem; border-radius: 100px; cursor: pointer;
  border: 1.5px solid transparent; transition: all .22s var(--ease); white-space: nowrap;
}

/* ---------- 5. Header / navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.brand { display: flex; align-items: center; font-family: var(--font-head); letter-spacing: -0.02em; }

.brand__logo { width: auto; flex: none; display: block; height: 70px; }

.brand .gen   { color: var(--maroon); }
.brand .lab   { color: var(--muted); font-weight: 600; }
.brand:hover .gen { color: var(--maroon); }

.nav-links { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--font-head); font-weight: 500;
  color: var(--ink); position: relative; padding-block: .3rem; white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--grad); transition: width .25s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--navy); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: .25s var(--ease); }

/* ---------- 7. Cards & grids ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Research theme card — numbered */

/* ---------- 11. Footer ---------- */
/* Consolidated 2026-09-10: the base rules plus the former override sections
   43, 44, 51 (footer half) and 52 are now one block, and the dead selectors
   .footer__cta / .footer__connect-h (no longer in any page) are gone.
   Section 50 still sets the footer's base font (Inter). */
.site-footer { background: var(--navy-deep); color: #b7bedd; padding-block: 3.2rem 2rem; font-size: .93rem; }
.site-footer a { color: #d7ddf2; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 2.5rem clamp(3rem, 6vw, 7rem); margin-bottom: 2.5rem; }   /* brand takes the remaining width; Explore + Contact sit against the frame's right edge */
.footer-grid h4 { color: #fff; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-grid > div:nth-child(2) ul { grid-template-columns: 1fr 1fr; column-gap: 2.4rem; }   /* Explore (2nd column): its seven links in two sub-columns */

/* brand row — the full lockup knocked out to white with the magenta kept
   (logo-retrogen-footer.png, all white), no box, no text wordmark: the logo already
   carries the name. .footer__brand stays in the markup but is hidden. */
.footer__brandrow { display: inline-flex; align-items: center; gap: .9rem; width: fit-content; }
.footer__logos { display: flex; gap: 1rem; align-items: center; width: fit-content; }
.footer__logos img { height: 84px; }
.footer__brand { display: none; }

/* bottom bar — copyright left, "Stay connected" + social right */
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: #8f97bd; }
.footer__connect { display: flex; align-items: center; gap: .85rem; }
.footer__connect-label { font-weight: 500; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: #8f97bd; }
.footer__social { display: flex; align-items: center; gap: .9rem; }
.footer__social a { position: relative; color: #cbd3ea; display: inline-flex; transition: color .3s var(--ease); }
.footer__social a:hover, .footer__social a:focus-visible { color: #fff; outline: none; }
/* hover label, same pill as the member-page icons, placed above so the footer edge never clips it */
.footer__social a::after { content: attr(data-txt); position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px); white-space: nowrap; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; padding: 3px 12px; border-radius: 20px; background: #30343e; color: #fff; opacity: 0; visibility: hidden; transition: .5s ease-out; pointer-events: none; }
.footer__social a:hover::after, .footer__social a:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, -14px); }
.footer__social svg { display: block; width: 19px; height: 19px; }

@media (max-width: 560px) { .footer__logos img { height: 68px; } }

/* ---------- 12. Scroll-reveal animation (progressive enhancement) ---------- */
/* Content is visible by default; only hidden once JS confirms it can reveal it. */
.reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 13. Responsive ---------- */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  
}
@media (max-width: 900px) {
  .nav-links {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column;
    background: #fff; border-bottom: 1px solid var(--line); padding: 1rem var(--gutter) 1.5rem;
    transform: translateY(-140%); transition: transform .3s var(--ease); box-shadow: var(--shadow);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav-links a::after { display: none; }
  .nav-links .btn { margin-top: .8rem; justify-content: center; }
  .nav-toggle { display: block; }
}
@media (max-width: 680px) {
  .grid--3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; }
}

/* ---------- 14. Accessibility ---------- */
:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 15. Interior-page components ---------- */

.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.6rem; color: var(--maroon); }

/* research themes */

/* people */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.person { text-align: center; }

.person h3 { margin: 0 0 .15rem; font-size: 1.12rem; }
.person .role { color: var(--maroon); font-family: var(--font-head); font-weight: 600; font-size: .84rem; }
.person p { color: var(--muted); font-size: .92rem; margin: .55rem 0 .6rem; }
.person .links { display: flex; gap: .8rem; justify-content: center; font-size: .85rem; font-family: var(--font-head); font-weight: 500; }

/* PI feature */
.pi { display: grid; grid-template-columns: 150px 1fr; gap: 1.9rem; align-items: start; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; margin-bottom: 2.8rem; }

.pi h3 { margin: 0 0 .1rem; font-size: 1.4rem; }
.pi .role { color: var(--maroon); font-family: var(--font-head); font-weight: 600; margin-bottom: .6rem; }
.pi p { color: var(--muted); margin: 0 0 .8rem; }
.pi .links { display: flex; gap: 1rem; font-family: var(--font-head); font-weight: 500; font-size: .9rem; flex-wrap: wrap; }

/* contact */

.form label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .85rem; margin: 1rem 0 .35rem; }
.form input, .form textarea { width: 100%; padding: .75rem .9rem; font-family: var(--font-body); font-size: 1rem; background: #fff; }
.form textarea { min-height: 130px; resize: vertical; }
.form .btn { margin-top: 1.2rem; cursor: pointer; }

.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); line-height: 0; margin-top: 1.4rem; }
.map iframe { width: 100%; height: 320px; border: 0; }

.note { background: #fff7f2; border: 1px solid #f0d9cb; border-left: 4px solid var(--maroon); border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-size: .92rem; color: #855b48; }
.note strong { color: var(--maroon); }

@media (max-width: 760px) {
  .people { grid-template-columns: repeat(2, 1fr); }
  .pi { grid-template-columns: 1fr; text-align: center; }
  
  .pi .links { justify-content: center; }
  
}
@media (max-width: 520px) { .people { grid-template-columns: 1fr; } }

/* ---------- 16. Header wordmark + hero brand/affiliation + button fixes ---------- */

/* Contact Us nav button: keep text white on hover and when it is the current page; no underline */
.nav-links a.btn::after { display: none; }

/* Hero ghost button on the dark background — always legible */

/* Hero brand line (RETROGEN Lab · The Singh Lab) */

/* Hero affiliation logos */

/* ---------- 17. Feschotte-style wordmark, hero logo badge, wider nav-collapse ---------- */
.brand__name { letter-spacing: -0.01em; white-space: nowrap; font-family: 'Poppins', var(--font-head), sans-serif; font-weight: 500; color: #204c96; }

@media (max-width: 1200px) {
  .nav-links.open { transform: translateY(0); }
  .nav-links li { width: 100%; }
  .nav-toggle { display: block; }
}

/* ---------- 24. primary buttons: azure default, magenta on hover ---------- */

/* ---------- 25. header fit: smaller logo + brand, no wrapping ---------- */
.brand { flex-shrink: 0; gap: .55rem; }

/* ---------- 27. header: text-only wordmark + crossed-helix mark (logo image removed) ---------- */

/* ---------- 29. Feschotte-matched type: Poppins, deep navy #1B1B66 ---------- */
/* Header wordmark: bigger, Poppins medium, navy (matches Feschotte wordmark) */
/* Hero statement: Poppins 500 in #1B1B66 (the Feschotte hero-line style) */

/* ---------- 30. HOMEPAGE: connected section-by-section flow (Feschotte-style) ---------- */
/* 1 · Research / hero */

.home-hero__statement { font-family: 'Poppins', sans-serif; font-weight: 500; color: #16315e; font-size: clamp(1.18rem, 2vw, 1.55rem); line-height: 1.45; max-width: 640px; margin: 1.5rem auto 0; }
.home-hero__cta { margin-top: 2rem; }

/* larger button for the two primary CTAs */

/* 2 · Diversity — "In this lab, we believe": see section 34 */

/* 3 · Our Team — photo + text */
   /* same width as the text column on content pages */

/* publications figure (generated single-cell map) */

/* 7 · Contact band */
.contact-home { background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%); }

/* ---------- 31. header fit with 8 nav items (Collaborations added) ---------- */
/* Let the header span wider than the narrow content column so it uses the empty
   corner space instead of cramming brand + nav into 1160px. */
.site-header .container { max-width: 1360px; }
.nav { gap: 1.6rem; }
.nav-links { gap: 1.05rem; }
.nav-links a { font-size: .94rem; }
.nav-links .btn { font-size: .94rem; }
.nav-links a.btn { padding: .5rem 1.2rem; }   /* header Contact Us stays compact; content buttons remain uniform */

/* ---------- 33. header: centered group + taller (Feschotte-like), wordmark & nav closer ---------- */
.site-header .nav { justify-content: center; gap: 2.6rem; }
.brand__name { font-size: clamp(1.05rem, 1.5vw, 1.38rem); }

/* ---------- 34. Homepage "We believe" — In this lab, + captioned picture tiles ---------- */
/* Consolidated 2026-09-10 from the former sections 30 (believe part), 34, 42,
   45 and 46. Dead selectors dropped: .believe__kicker, .believe__title,
   .believe__ph, .believe__list, .believe__attr (none used in index.html).
   NB: index.html's own <style> block overrides the figcaption font/colour and
   the round-overlay sizes — page-specific tweaks live there, per the README. */
.believe__intro { font-family: 'Poppins', sans-serif; font-weight: 500; color: #204c96; font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.2; margin: 0 0 .15rem; }
.believe .believe__lead { margin-bottom: 1.4rem; text-transform: uppercase; letter-spacing: .03em; }
.believe__grid { --bgap: clamp(2.2rem, 5.2vw, 4.75rem); display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--bgap) * 1.15) var(--bgap); max-width: var(--row); margin: 0 auto 1.6rem; align-items: flex-start; }   /* --row is the shared width of the homepage rows: the tiles and the member circles end on the same two vertical lines */   /* spans the shared content width; the tiles keep their size and the extra space falls between them */
.believe__item { margin: 0; flex: 0 0 260px; max-width: 260px; }
.believe__item figcaption { margin-top: .8rem; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--maroon); line-height: 1.25; }
.believe__photo { position: relative; }
.believe__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; display: block; }
.believe__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; padding: .85rem .9rem; border-radius: 14px; color: #fff; background: linear-gradient(to top, rgba(12,22,52,.88) 0%, rgba(12,22,52,.55) 34%, rgba(12,22,52,0) 62%); }
.believe__overlay strong { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(.9rem, 1.5vw, 1.1rem); line-height: 1.12; }
.believe__overlay span { font-family: 'Poppins', sans-serif; font-size: clamp(.62rem, .95vw, .74rem); line-height: 1.25; color: #e4e8f5; margin-top: .22rem; }
@media (max-width: 1100px) { .believe__grid { justify-content: center; } }
@media (max-width: 620px) { .believe__item { flex: 0 1 calc((100% - var(--bgap)) / 2); max-width: none; } }

/* ---------- 35 + 36. affiliation logos: own slim band below the hero ---------- */
.affil-band { background: #ffffff; border-top: 1px solid var(--line); padding: 1.9rem 0; }
.affil-band .container { display: flex; align-items: center; justify-content: center; gap: clamp(1.4rem, 3.5vw, 3rem); flex-wrap: wrap; }
.affil-band__label { font-family: var(--font-head); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.affil-band__logos { display: flex; align-items: center; gap: clamp(1.6rem, 3.5vw, 2.8rem); }
.affil-band__logos img { height: 64px; width: auto; display: block; }
.affil-band__logos a { display: inline-flex; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.affil-band__logos a:hover { opacity: .8; transform: translateY(-1px); }
@media (max-width: 560px) { .affil-band__logos img { height: 46px; } }

/* ---------- 37. Headings in Poppins — one type voice across the site ----------
   Collapses the last two-font seam: section headings now match the hero
   statement + wordmark (and the Feschotte 100%-Poppins reference). Uses only
   the Poppins weights already loaded (600 / 700), so no font-link change. */
h1, h2, h3, h4 { font-family: 'Poppins', 'Montserrat', sans-serif; }
h2, h3, h4 { font-weight: 600; }
h1 { font-weight: 700; }

/* ---------- 38. Contact section statement — matches the hero statement voice ---------- */
.contact-home__statement { font-family: 'Poppins', sans-serif; font-weight: 500; color: #204c96; font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.45; max-width: 44rem; margin: .4rem auto 0; }

/* ---------- 40. Round emblem logo (Université Paris Cité) — optical size bump ---------- */
.affil-band__logos img.affil-band__logo--round { height: 78px; }
@media (max-width: 560px) { .affil-band__logos img.affil-band__logo--round { height: 56px; } }

/* ---------- 47. Contact page — form + map two-col; stacks on mobile ---------- */
.contact-2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: stretch; }
.form-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .contact-2col { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .form-name-row { grid-template-columns: 1fr; } }

/* ---- 50. Header & footer keep Inter; page content uses Poppins ---- */
.site-header, .site-footer { font-family: "Inter", system-ui, -apple-system, sans-serif; }
.footer__connect-label { font-family: "Inter", system-ui, -apple-system, sans-serif; }

/* ---- 51. Brand logo sizing: header (the footer logo is matched in section 11) ---- */
@media (max-width: 900px) { .brand__logo { height: 48px; } }

/* ---- 53. Header and footer share one wide frame on desktop ---- */
/* The centered header cluster (33) floated on wide screens: at 1920px it left
   ~400px of nothing either side. From 1201px up, header and footer now span the
   same 1580px frame with the same gutter, so their outer edges line up: brand
   hard left, nav hard right, footer columns and bottom bar to the same limits.
   Capped so the two ends don't drift apart on very wide monitors. Below 1201px
   (collapsed nav) nothing changes. */
@media (min-width: 1201px) {
  .site-header .container,
  .site-footer .container { max-width: 1580px; padding-inline: clamp(2.5rem, 3.2vw, 3.75rem); }
  .site-header .nav { justify-content: space-between; }
}

/* ---- 54. Content pages: one shared column width (--content) ---- */
/* Research, Diversity, Join, Collaborations, News, Publications intro, Team and the
   four member pages all set their column inline as max-width:var(--content), so the
   width is changed in one place (section 1). Was 820px / 640px / 760px per page. */
.prose { max-width: var(--content); }

/* ---- 55. Header: brand hairlines, top and bottom ---- */
/* Two navy→magenta lines framing the header — the logo's own colour story. The
   bottom one replaces the plain grey border-bottom from section 5; ::after sits on
   the border box, so the 1px line underneath is turned off here. */
.site-header { border-bottom: 0; }
.site-header::before,
.site-header::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #204c96 0%, #204c96 45%, #d31374 100%); pointer-events: none; }
.site-header::before { top: 0; }
.site-header::after { bottom: 0; }

/* ---- 56. Content pages: no trailing margin before the footer ---- */
/* The last paragraph/list in a content column used to carry its own bottom margin
   (research 123px, join 120px above the footer vs 104px elsewhere). Now the gap
   before the footer is the section padding alone, on every page. */
.prose > :last-child, .rp > :last-child { margin-bottom: 0; }

/* ---- 57. Skip-to-content link + team portraits colour on hover ---- */
/* The skip link is the first focusable element on every page: invisible until a
   keyboard user tabs to it, then it drops in under the header and jumps to #main. */
.skip-link { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 100; background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .9rem; padding: .6rem 1.1rem; border-radius: 0 0 10px 10px; text-decoration: none; transition: top .2s var(--ease); }
.skip-link:focus { top: 0; outline: 3px solid var(--maroon); outline-offset: 2px; }
/* Team page: greyscale portraits come into colour on hover, like the affiliation logos */
.tm-card img { filter: grayscale(100%); transition: filter .45s ease-in-out; }   /* colour fades in gently, and back out on leaving */
.tm-card:hover img, .tm-card:focus-within img { filter: none; }

/* ---- 58. Header: room inside the hairlines ---- */
/* The lockup sat 10px from each hairline; the desktop nav is taller so it breathes. */
@media (min-width: 1201px) { .site-header .nav { height: 112px; } }

/* ---- 59. Sticky footer ---- */
/* On short pages (thank-you, 404, a page whose content does not fill the screen) the
   footer used to stop mid-viewport with white space beneath it. Every page already
   repeated these two rules inline; here they apply site-wide. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* ==========================================================================
   60 — Floating page tools (previous page / top of page)
   One capsule holding both arrows; the hovered half fills navy.
   ========================================================================== */
.ptools { position: fixed; right: clamp(.9rem, 2vw, 1.6rem); bottom: clamp(1.1rem, 3vw, 2rem); z-index: 90; display: flex; flex-direction: column; border: 1px solid var(--blue-light); border-radius: 22px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 4px 18px rgba(32,76,150,.10); }
.ptool { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 40px; border: 0; background: transparent; color: #204c96; padding: 0; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease); }
.ptool + .ptool { border-top: 1px solid var(--blue-light); }
.ptool:first-child { border-radius: 22px 22px 0 0; }
.ptool:last-child { border-radius: 0 0 22px 22px; }
.ptool svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ptool:hover, .ptool:focus-visible { background: #204c96; color: #fff; outline: none; }
.ptool::after { content: attr(data-txt); position: absolute; right: 100%; top: 50%; transform: translate(-6px, -50%); white-space: nowrap; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; padding: 3px 12px; border-radius: 20px; background: #30343e; color: #fff; opacity: 0; visibility: hidden; transition: .5s ease-out; pointer-events: none; }
.ptool:hover::after, .ptool:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-14px, -50%); }
@media (max-width: 700px) { .ptool { width: 38px; height: 36px; } .ptool svg { width: 15px; height: 15px; } .ptool::after { display: none; } }
@media print { .ptools { display: none; } }

/* ==========================================================================
   61 — Buttons: solid navy, magenta on hover
   ========================================================================== */
.btn--primary, .nav-links .btn, .nav-links a.btn { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--primary:hover, .btn--primary:focus-visible, .nav-links .btn:hover, .nav-links a.btn:hover, .nav-links a.btn[aria-current="page"] { background: var(--maroon); color: #fff; border-color: var(--maroon); }

/* ==========================================================================
   62 — Homepage team row (circular portraits, colour on hover)
   ========================================================================== */
.th-row { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: var(--row); margin: 2.4rem auto 2.6rem; gap: 4rem; }
.th-mem { position: relative; width: 210px; text-align: center; text-decoration: none; color: inherit; }
.th-pic { width: 190px; height: 190px; border-radius: 50%; overflow: hidden; margin: 0 auto; background: #eef1f8; }
.th-pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter .45s ease-in-out; }
.th-mem:hover .th-pic img, .th-mem:focus-visible .th-pic img { filter: none; }
.th-badge { position: absolute; top: -8px; left: 4px; z-index: 2; background: var(--navy); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 12px; border-radius: 20px; transition: background .4s; }
.th-name { font-size: 16.5px; font-weight: 500; line-height: 1.35; margin-top: .85rem; color: var(--navy); }
.th-role { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.5; margin-top: .3rem; }
@media (max-width: 700px) { .th-row { gap: 1.9rem; } .th-mem { width: 136px; } .th-pic { width: 118px; height: 118px; } .th-name { font-size: 15px; } }

/* ==========================================================================
   63 — Publication timeline (publications.html and the homepage "Recent work")
   ========================================================================== */
.tl { list-style: none; margin: 0; padding: 0; position: relative; max-width: var(--content); }
.tl::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 22px; width: 1px; background: var(--blue-light); }
.tl li { display: flex; align-items: flex-start; position: relative; padding: 0 0 1.7rem; }
.tl li:last-child { padding-bottom: 0; }
.tl-year { flex: none; width: 45px; height: 45px; border-radius: 50%; border: 1px solid #204c96; color: #204c96; background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 13px; position: relative; z-index: 1; transition: color .4s, border-color .4s; }
.tl-group { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.tl-row { display: block; text-decoration: none; color: var(--muted); }
.tl-row:hover, .tl-row:focus-visible { color: var(--muted); }   /* holds off the site-wide a:hover, so the author list keeps its colour and only the title and year ring change */
.tl-text { font-size: 15px; line-height: 1.7; padding-top: 10px; margin-left: 1.3rem; transition: margin-left .4s, color .4s; }
.tl-title { font-weight: 600; color: #204c96; transition: color .4s; }
.tl .labauthor { border: 1px solid var(--blue-light); border-radius: 6px; padding: 0 .35em; color: #204c96; transition: color .4s, border-color .4s; }
.tl-row:hover .tl-text, .tl-row:focus-visible .tl-text { margin-left: calc(1.3rem + 5px); }   /* the row still slides, but the author list keeps its colour */
.tl-row:hover .tl-title, .tl-row:focus-visible .tl-title { color: var(--maroon); }   /* only the title turns magenta, with the year ring */
.tl li:has(.tl-row:hover) .tl-year, .tl li:focus-within .tl-year { color: var(--maroon); border-color: var(--maroon); }
.tl-row:focus-visible { outline: none; }
@media (max-width: 600px) { .tl::before { left: 17px; } .tl-year { width: 35px; height: 35px; font-size: 11.5px; } .tl-text { margin-left: .9rem; } .tl-row:hover .tl-text { margin-left: calc(.9rem + 5px); } }

/* ==========================================================================
   64 — Contact form: navy outline fields, magenta on focus (same ring as buttons and icons)
   ========================================================================== */
.form label { color: var(--navy); }
.form input, .form textarea { border: 1px solid var(--navy); border-radius: 10px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.form input:focus, .form textarea:focus { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(165, 58, 123, .13); outline: none; }

/* ==========================================================================
   65 — Homepage banner (capsid image, lab identity) + light intro under it
   ========================================================================== */
.home-banner { position: relative; overflow: hidden; background: #0f1f45; color: #fff; text-align: center; display: flex; align-items: center; height: 440px; }
.home-banner__bg { position: absolute; inset: 0; }
.home-banner__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.home-banner__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,31,69,.3) 0%, rgba(15,31,69,.25) 100%); }
.home-banner .container { position: relative; z-index: 2; max-width: var(--content); width: 100%; }
.home-banner__eyebrow { font-family: var(--font-head); font-weight: 600; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 1rem; display: inline-flex; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: center; }
.home-banner__eyebrow .sep { display: inline-block; width: 34px; height: 1px; background: #fff; opacity: .8; }
.home-banner__eyebrow .dim { opacity: .8; font-weight: 500; }
.home-banner__title { margin: 0; }
.home-banner__mark { display: block; font-family: var(--font-body); font-weight: 700; font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 1; letter-spacing: .01em; color: #fff; }
.home-banner__lab { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: .45rem; }   /* "Lab" between two rules, as in the logo */
.home-banner__lab i { flex: 1 1 auto; max-width: 260px; height: 1px; background: #fff; opacity: .75; display: block; }
.home-banner__lab b { font-family: var(--font-body); font-weight: 600; font-size: clamp(1rem, 1.8vw, 1.35rem); letter-spacing: .22em; text-transform: none; color: #fff; }
   /* single-line wordmark, for pages that do not use the logo lockup */
.home-banner__sub { font-family: var(--font-body); font-weight: 400; font-size: 1.12rem; letter-spacing: 0; text-transform: none; color: #fff; opacity: .92; margin: .95rem 0 0; }
.home-banner__sub b { font-weight: 600; }
.home-intro { text-align: center; background: linear-gradient(180deg, #f6f8fd 0%, #ffffff 100%); padding-block: clamp(2.6rem, 5vw, 4rem); }
.home-intro .container { max-width: 800px; }
.home-intro .home-hero__statement { margin-top: 0; }
@media (max-width: 700px) { .home-banner { height: 300px; } .home-banner__eyebrow { font-size: .7rem; gap: .5rem; } .home-banner__sub { font-size: .92rem; } .home-banner__lab i { max-width: 90px; } }

/* ==========================================================================
   66 — Inner-page banner
   A slim band of the lab image carrying THIS page's name. The homepage keeps
   its full-height banner (section 65); every other page gets this one, so the
   image runs through the site without repeating the lab's name on each page.
   ========================================================================== */
.page-banner { position: relative; overflow: hidden; background: #0f1f45; height: 120px; }   /* a strip of the lab image only: the page title stays below it, on white, as on every other page */
.page-banner__bg { position: absolute; inset: 0; }
.page-banner__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.page-banner__veil { position: absolute; inset: 0; }
@media (max-width: 700px) { .page-banner { height: 84px; } }

/* ---- 67. Collapsed nav: the panel no longer sweeps across the header ---- */
/* The header carries backdrop-filter, which makes it the containing block AND the
   stacking context for the fixed .nav-links panel — so the panel paints on top of
   the header's own background. With transform: translateY(-140%) the panel travelled
   ~794px downward on open, crossing the 72px header band on the way: for ~100ms the
   white menu covered the logo and the burger, with the bottom hairline drawn across
   its middle. That was the "header on top of the header" effect.
   Fix: stop moving the panel at all. It stays parked at top:72px (right under the
   header) and is revealed by animating its own clip from the top edge down, so no
   pixel of it is ever painted over the header. box-shadow would be cut off by the
   clip, so the shadow moves to a drop-shadow filter, which is applied after clipping
   and therefore follows the revealing edge. */
@media (max-width: 1200px) {
  .nav-links.open {
    clip-path: inset(0 0 0 0);
  }
}

/* ---- 68. Collapsed header: room for the logo, and a normal-sized Contact button ---- */
/* Two faults in the collapsed band (<=1200px, where the nav is behind the burger):
   1. The logo is 70px inside a 72px nav, so the two 3px brand hairlines — which sit
      on the header's top and bottom edges — cut 2px into it top and bottom. Above
      1201px the nav is 112px and the logo breathes (21px each side); below 900px the
      logo already drops to 48px. Only 901-1200px was wrong. The band now stands at
      88px with a 56px logo: 16px clear of both hairlines, at every collapsed width.
      The dropdown panel is parked on the header's bottom edge, so its top moves too.
   2. "Contact Us" became a full-width pill, because .nav-links li is width:100% and
      the button centres itself in it. It now sits at its natural width on the left,
      the same size as the header button on desktop. */
@media (max-width: 1200px) {
  .site-header .nav { height: 88px; }
  .brand__logo { height: 56px; }
  .nav-links { inset-block-start: 88px; }

  .nav-links .btn,
  .nav-links a.btn { border-bottom: 1px solid var(--navy);
  }
  .nav-links a.btn:hover { border-bottom-color: var(--maroon); }
}

/* ---- 69. Collapsed menu, variant B: full-screen overlay ---- */
/* Replaces the white drop panel below 1201px. The menu now takes the whole viewport
   in the lab navy, the burger turns into a cross and the logo steps aside, so the
   only things on screen are the eight destinations.
   One structural note: .nav-links is a child of .site-header, and the header's
   backdrop-filter made it the containing block for the fixed panel — inset:0 would
   have resolved to the 88px header box, not the viewport. Below 1201px the header
   therefore drops the blur and takes a solid white background instead (on a phone the
   blur was invisible anyway), which hands the panel back to the viewport. */
@media (max-width: 1200px) {
  .site-header { background: #fff; backdrop-filter: none; transition: background .25s var(--ease); }

  .nav-links {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: .1rem; padding: 88px var(--gutter) 2rem;
    overflow-y: auto; overscroll-behavior: contain;
    background: radial-gradient(90% 70% at 80% 0%, #2a5cb0 0%, #143a7d 55%, #0f2c60 100%);
    border-bottom: 0; box-shadow: none; filter: none;
    transform: none; clip-path: none;
    opacity: 0; visibility: hidden;
    transition: opacity .38s var(--ease), visibility 0s linear .38s;
  }
  .nav-links.open {
    opacity: 1; visibility: visible;
    transition: opacity .38s var(--ease), visibility 0s linear 0s;
  }

  .nav-links a {
    display: block; border-bottom: 0; padding: .3rem 0;
    color: #fff; font-family: var(--font-head);
    font-size: clamp(1.15rem, 5.2vw, 1.6rem); font-weight: 600; letter-spacing: -.01em;
    opacity: 0; transform: translateY(14px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), color .2s var(--ease);
  }
  .nav-links.open a { opacity: 1; transform: none; }
  .nav-links a:hover, .nav-links a:focus-visible { color: #f4a8d4; }
  .nav-links a[aria-current="page"] { color: #f4a8d4; }
  .nav-links a::after { display: none; }

  /* the links arrive one after another, top to bottom */
  .nav-links.open li:nth-child(1) a { transition-delay: .10s }
  .nav-links.open li:nth-child(2) a { transition-delay: .15s }
  .nav-links.open li:nth-child(3) a { transition-delay: .20s }
  .nav-links.open li:nth-child(4) a { transition-delay: .25s }
  .nav-links.open li:nth-child(5) a { transition-delay: .30s }
  .nav-links.open li:nth-child(6) a { transition-delay: .35s }
  .nav-links.open li:nth-child(7) a { transition-delay: .40s }
  .nav-links.open li:last-child  a { transition-delay: .46s }

  /* Contact Us: a white pill on the navy, natural width */
  .nav-links li:last-child { margin-top: 1.2rem; display: flex; }
  .nav-links .btn,
  .nav-links a.btn,
  .nav-links a.btn[aria-current="page"] {
    display: inline-flex; width: auto; justify-content: center;
    margin-top: 0; padding: .6rem 1.6rem; font-size: .95rem;
    background: #fff; color: var(--navy) !important; border-color: #fff;
  }
  .nav-links .btn:hover,
  .nav-links a.btn:hover {
    background: #f4a8d4; color: #12275a !important; border-color: #f4a8d4;
  }

  /* while the overlay is up: header see-through, hairlines and logo out of the way */
  .site-header:has(.nav-links.open) { background: transparent; }
  .site-header:has(.nav-links.open)::before,
  .site-header:has(.nav-links.open)::after { opacity: 0; }
  .site-header:has(.nav-links.open) .brand { opacity: 0; pointer-events: none; }
  .site-header::before, .site-header::after { transition: opacity .25s var(--ease); }
  .brand { transition: opacity .25s var(--ease); }

  /* the burger stays above the overlay and becomes a cross */
  .nav-toggle { position: relative; z-index: 2; }
  .nav-toggle span { transition: transform .28s var(--ease), opacity .2s var(--ease), background .25s var(--ease); }
  .site-header:has(.nav-links.open) .nav-toggle span { background: #fff; }
  .site-header:has(.nav-links.open) .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header:has(.nav-links.open) .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header:has(.nav-links.open) .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* the page underneath does not scroll while the overlay is open */
html.nav-open, html.nav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-links a, .nav-toggle span { transition-duration: .01ms !important; }
  .nav-links.open a { transition-delay: 0s !important; }
}
/* the floating back / top buttons would sit on top of the overlay */
html.nav-open .ptools { opacity: 0; pointer-events: none; }
.ptools { transition: opacity .25s var(--ease); }

/* ---- 70. Publication entries justified, like every other paragraph ---- */
/* Research, Join and the News entries are all text-align: justify; the publication
   rows on the home page and on Publications were left-aligned with a ragged right
   edge, so their right side never lined up with the column like the other pages. */
.tl-text { text-align: justify; }

/* ---- 71. Floating back / top buttons: desktop only ---- */
/* On a phone they floated at the right edge, mid-screen, over the body copy. A phone
   has its own back control, and the page is short enough to flick to the top. */
@media (max-width: 700px) { .ptools { display: none; } }

/* ---- 72. Inner-page banner: the title sits in the strip ---- */
/* Section 66 put a 120px strip of the lab image above every inner page and left the
   title below it on white, so each page opened with a header, 130px of white, then a
   second header. The title now sits in the strip in white, one header, and the content
   starts 130px sooner. The veil is a touch darker so white type reads over the image. */
.page-banner { display: flex; align-items: center; justify-content: center; }
.page-banner__veil { background: linear-gradient(180deg, rgba(15,31,69,.55) 0%, rgba(15,31,69,.45) 100%); }
.page-banner__title { position: relative; z-index: 2; margin: 0; padding: 0 var(--gutter); text-align: center;
  color: #fff; font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; line-height: 1.12;
  font-size: clamp(1.9rem, 3.6vw, 2.4rem); text-shadow: 0 2px 14px rgba(0,0,0,.35); }
@media (max-width: 700px) { .page-banner__title { font-size: 1.5rem; } }