/* ============================================================
   BIRD Lab — Design System
   Plain CSS (no build step). Edit variables below to retheme.
   ============================================================ */

:root {
  /* Palette, derived from the lab logo (navy / slate / blue-grey).
     These values are the single source of truth and meet WCAG 2.1 AA
     in the pairings used across the site; check contrast before changing. */
  --c-ink:        #1b2733;   /* near-black text */
  --c-ink-soft:   #414242;   /* logo gray */
  --c-navy:       #14284f;   /* deep navy (logo body) */
  --c-blue-700:   #34567f;   /* slate, darkened for contrast */
  --c-blue-600:   #4f7094;   /* slate (logo mid-wing) */
  --c-blue-500:   #7d97b6;   /* light slate */
  --c-sky:        #e9eef5;
  --c-sky-2:      #f4f7fb;
  --c-gold:       #9aa7bd;   /* muted slate accent (logo has no gold) */
  --c-on-navy:    #dbe6f1;   /* body text on navy backgrounds (hero, footer) */

  --c-paper:      #ffffff;
  --c-bg:         #fbfcfd;
  --c-line:       #d9e1ea;
  --c-muted:      #586573;

  /* Functional */
  --link:         #234f7e;
  --link-hover:   #14284f;
  --focus:        #4f7094;

  /* Typography */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Scale (fluid) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.7vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.8vw, 4rem);

  /* Layout */
  --maxw: 1140px;
  --maxw-prose: 72ch;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(4,51,82,.06), 0 8px 24px rgba(4,51,82,.07);
  --shadow-lg: 0 12px 40px rgba(4,51,82,.14);
  --gap: clamp(1rem, 2vw, 1.6rem);
  --section-y: clamp(3rem, 6vw, 6rem);
  --header-h: 74px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Long unbreakable strings (DOIs, URLs, emails) wrap instead of being clipped
     on narrow screens. Only kicks in when a word would otherwise overflow. */
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.2em; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--c-navy); letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); margin-top: 0; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p, li { font-size: var(--step-0); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
strong { font-weight: 650; }
.eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .14em; font-size: var(--step--1); font-weight: 700; color: var(--c-blue-600); }
.lead { font-size: var(--step-1); color: var(--c-ink-soft); line-height: 1.55; }
.muted { color: var(--c-muted); }

/* ---------- Accessibility helpers ---------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 999;
  background: var(--c-navy); color: #fff; padding: 10px 16px; border-radius: 6px;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; color:#fff; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.prose { max-width: var(--maxw-prose); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--c-sky-2); border-block: 1px solid var(--c-line); }
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.nav { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.nav__brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--c-navy); text-decoration: none; }
.nav__brand img { height: 30px; width: auto; }
.nav__brand span { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .02em; }
.nav__links { display: flex; gap: .15rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav__links a {
  color: var(--c-ink); text-decoration: none; padding: .5rem .7rem; border-radius: 8px;
  font-size: .95rem; font-weight: 550; line-height: 1;
}
.nav__links a:hover { background: var(--c-sky); color: var(--c-navy); }
.nav__links a[aria-current="page"] { color: var(--c-blue-700); box-shadow: inset 0 -2px 0 var(--c-blue-500); border-radius: 0; }
.nav__cta {
  background: var(--c-navy); color: #fff !important; border-radius: 999px; padding: .5rem 1rem !important;
}
.nav__cta:hover { background: var(--c-blue-700); }
.nav__toggle { display: none; background: none; border: 1px solid var(--c-line); border-radius: 8px; padding: .5rem .6rem; cursor: pointer; }
.nav__toggle svg { width: 22px; height: 22px; }

@media (max-width: 920px) {
  .nav__toggle { display: inline-flex; margin-left: auto; }
  .nav__links {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--c-line); padding: .5rem;
    box-shadow: var(--shadow); display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: .8rem .7rem; }
  .nav__cta { text-align: center; margin-top: .4rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-weight: 600; font-size: var(--step-0); text-decoration: none;
  padding: .7rem 1.25rem; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .1s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-navy); color: #fff; }
.btn--primary:hover { background: var(--c-blue-700); color:#fff; box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--c-navy); border-color: var(--c-navy); }
.btn--ghost:hover { background: var(--c-navy); color: #fff; }
.btn--light { background: #fff; color: var(--c-navy); }
.btn--light:hover { background: var(--c-sky); }

/* ---------- Cards ---------- */
.card {
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow); height: 100%;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--c-blue-500); }
.card h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.card a { text-decoration: none; }
.card__tag { display: inline-block; font-size: var(--step--1); font-weight: 700; color: var(--c-blue-700); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: #fff; }  /* gradient set in the components section below */
.hero__inner { display: grid; grid-template-columns: 1.5fr 0.7fr; gap: 2rem; align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }
.hero h1 { color: #fff; }
.hero__art { position: relative;   justify-self: end;}
.hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero__stats { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; }
.hero__stats .num { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; display: block; line-height: 1; }
.hero__stats .lbl { font-size: var(--step--1); color: var(--c-on-navy); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 860px) { .hero__inner { grid-template-columns: 1fr; } .hero__art { order: -1; max-width: 340px; } }

/* animated morphing wing strokes */
.wing path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4; }
.wing .accent { stroke: var(--c-gold); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .wing .pulse { animation: dash 6s ease-in-out infinite alternate; }
}
@keyframes dash { from { stroke-dashoffset: 30; opacity:.5 } to { stroke-dashoffset: 0; opacity:1 } }

/* ---------- People ---------- */
.person { text-align: center; }
.person .avatar {
  width: 110px; height: 110px; border-radius: 50%; margin: 0 auto .7rem; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--c-line), var(--shadow);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 2rem; color: #fff;
  background: linear-gradient(150deg, var(--c-blue-700), var(--c-blue-500));
}
.person h3 { font-size: var(--step-1); margin: 0; }
.person .role { color: var(--c-muted); font-size: var(--step--1); }
.person .links { display: flex; gap: .6rem; justify-content: center; margin-top: .4rem; flex-wrap: wrap; }
.person .links a { font-size: var(--step--1); text-decoration: none; }
.people-group { margin-top: 2.4rem; }
.people-group > h2 { border-bottom: 2px solid var(--c-line); padding-bottom: .4rem; margin-bottom: 1.6rem; }
.alumni-list { columns: 3 200px; gap: 1.5rem; }
.alumni-list li { break-inside: avoid; margin-bottom: .35rem; }


/* ---------- Publications ---------- */
.pub-controls { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.6rem; }
.pub-controls input, .pub-controls select {
  font: inherit; padding: .6rem .8rem; border: 1px solid var(--c-line); border-radius: 8px; background: #fff;
}
.pub-controls input { flex: 1 1 260px; }
.pub-year { font-family: var(--font-display); color: var(--c-blue-700); margin: 2rem 0 .6rem; font-size: var(--step-2); }
.pub { padding: 1rem 0; border-bottom: 1px solid var(--c-line); }
.pub__title { font-weight: 600; color: var(--c-navy); }
.pub__title a { text-decoration: none; }
.pub__meta { color: var(--c-muted); font-size: var(--step--1); margin-top: .15rem; }
/* Lab members / alumni are marked in the author list (see publications.html):
   underlined rather than bold, so they don't compete with the bold title. */
.pub__meta strong { font-weight: 400; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.pub__venue { font-style: italic; }
.badge {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 999px; background: var(--c-sky); color: var(--c-blue-700); vertical-align: middle;
}
.badge--paper { background: #e6f3ea; color: #2e6b43; }

/* ---------- News ---------- */
.press-list a { display: block; padding: .55rem 0; border-bottom: 1px solid var(--c-line); text-decoration: none; }
.press-list a:hover { padding-left: .4rem; }
.press-list .src { color: var(--c-muted); font-size: var(--step--1); }

/* ---------- Wiki (Lab Guide) ---------- */
.wiki-layout { display: grid; grid-template-columns: 250px 1fr; gap: 2.5rem; align-items: start; }
.wiki-side { position: sticky; top: calc(var(--header-h) + 1rem); }
.wiki-side input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--c-line); border-radius: 8px; font: inherit; margin-bottom: 1rem; }
.wiki-side__label { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--c-muted); margin: 1.2rem 0 .4rem; }
.wiki-side ul { list-style: none; padding: 0; }
.wiki-side li a { display: block; padding: .3rem .5rem; border-radius: 6px; text-decoration: none; color: var(--c-ink); font-size: .92rem; }
.wiki-side li a:hover, .wiki-side li a[aria-current="page"] { background: var(--c-sky); color: var(--c-blue-700); }
.wiki-content h2 { margin-top: 2rem; font-size: var(--step-2); }
.wiki-content > * + * { margin-top: 1rem; }
.callout { background: var(--c-sky-2); border: 1px solid var(--c-line); border-left: 4px solid var(--c-blue-500); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }
.callout--warn { border-left-color: var(--c-gold); background: #fdf8ec; }
.callout--stop { border-left-color: #c0392b; background: #fdeeec; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--c-line); font-size: .95rem; }
th { background: var(--c-sky-2); font-family: var(--font-body); }
/* Uncertainty-budget table (lab guide): first column sized to its content so
   source names never wrap; the narrow middle column hugs the A/B letter; the
   last column takes the remaining width. */
.table-budget th:first-child, .table-budget td:first-child { width: 1%; white-space: nowrap; }
.table-budget th:nth-child(2), .table-budget td:nth-child(2) { width: 1%; text-align: center; white-space: nowrap; padding-inline: .9rem; }
blockquote { border-left: 4px solid var(--c-blue-500); padding-left: 1rem; color: var(--c-ink-soft); font-style: italic; }
@media (max-width: 820px) { .wiki-layout { grid-template-columns: 1fr; } .wiki-side { position: static; } }

/* ---------- Misc ---------- */
.pill { background: var(--c-sky); color: var(--c-blue-700); border-radius: 999px; padding: .3rem .8rem; font-size: var(--step--1); font-weight: 600; }
.note { background: var(--c-sky-2); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.note p { margin: 0; }
.divider { height: 1px; background: var(--c-line); border: 0; margin: var(--gap) 0; }
.breadcrumbs { font-size: var(--step--1); color: var(--c-muted); margin-bottom: 1rem; }
.breadcrumbs a { text-decoration: none; }

/* page header band */
.page-head { background: linear-gradient(160deg, var(--c-sky-2), var(--c-sky)); border-bottom: 1px solid var(--c-line); padding-block: clamp(2.5rem, 5vw, 4rem); }
.page-head h1 { color: var(--c-navy); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-navy); color: var(--c-on-navy); margin-top: var(--section-y); }
.site-footer a { color: var(--c-on-navy); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-block: 3rem; }
/* Rendered as h2 so the heading outline never skips a level (h4 looked the same
   but followed an h2 on most pages); styled small to keep the visual design. */
.site-footer h2 { color: #fff; font-family: var(--font-body); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .8rem; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: .4rem; font-size: .95rem; }
.site-footer .brandmark { display:flex; align-items:center; gap:.6rem; margin-bottom: .8rem; }
.site-footer .brandmark img { height: 34px; }
.site-footer .brandmark strong { color:#fff; font-family: var(--font-display); font-size: 1.2rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-block: 1.2rem; font-size: var(--step--1); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* Authorship credit: sits on its own quiet line under the copyright row. */
.footer-credit { flex-basis: 100%; opacity: .75; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }


/* ============================================================
   Components & theme details (formerly overrides.css).
   Order matters: rules below intentionally refine rules above,
   exactly as they did when this lived in a second stylesheet.
   ============================================================ */

/* Accessible placeholder text: pin the colour (browsers default to a low-contrast
   grey, and Firefox halves the opacity) so search fields meet WCAG AA (5.9:1). */
::placeholder { color: var(--c-muted); opacity: 1; }

/* On-dark text/controls. Kept here in the palette (not inline in templates) so
   contrast stays centrally controlled. Use over the hero, field-band, and
   facility flagship, which all sit on a dark navy wash. */
.eyebrow.eyebrow--on-dark { color: #bfe0f4; }  /* light sky, AA on the navy wash; two classes so it beats the later .eyebrow color rule */
.btn--on-dark     { color: #fff; border-color: rgba(255,255,255,.6); }

/* Hero + dark sections retuned to the logo navy→slate ramp */
.hero { background: linear-gradient(158deg, #11203f 0%, #2c4a72 62%, var(--c-blue-600) 128%); }
.wing .accent { stroke: #b3c1d0; }
.hero .lead { color: var(--c-on-navy); }
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 2; }   /* text above video */
.hero .section-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* brand-tinted wash keeps the white text readable over the footage.
   Deepened so white/near-white hero text holds >=4.5:1 even over the
   brightest video frame; the text column sits where the wash is darkest. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(11,22,45,.90), rgba(28,49,80,.76) 60%, rgba(54,80,116,.68));
}
/* Belt-and-suspenders legibility for any single bright frame */
.hero h1, .hero .lead, .hero .eyebrow, .hero .hero__stats {
  text-shadow: 0 1px 14px rgba(7,14,30,.55);
}
@media (prefers-reduced-motion: reduce) {
  .hero .section-bg { display: none; }
  .hero .video-toggle { display: none; }
}

.hero__inner {
    position: relative;
}

.hero__logo {
    position: absolute;
    top: 2rem;
    right: 0;
    width: clamp(220px, 22vw, 340px);
    opacity: 1;
    pointer-events: none;
    user-select: none;

    z-index: 1;
}
@media (max-width: 900px) {
    .hero__logo {
        display: none;
    }
}
/* Small screens: a shorter hero so the video band doesn't dominate the first
   screen (roughly half an inch trimmed off the bottom on a phone), and the
   footage anchors to the top of the frame so it's the bottom of the shot that
   gets cropped away. */
@media (max-width: 500px) {
  .hero__inner { padding-block: 1.6rem 1.1rem; }
  /* Anchor the footage to the top and zoom it so the lower part of the shot
     (including the cardboard box on the floor) is cropped off on phones.
     .hero has overflow:hidden, so the extra height below the fold is clipped. */
  .hero .section-bg {
    height: 130%; bottom: auto;
    /* Two tuning knobs for the phone framing:
       - object-position X: 50% = centered, higher % pans toward the RIGHT of
         the shot to bring the perch into view (lower % if the perch is left).
       - translateY: nudges the footage UP to show more of the bird flight;
         more negative shows more but eventually reveals the cardboard box, so
         keep it small. */
    object-position: 38% top;
    transform: translateY(-10%);
  }
  /* Keep the three stats on a single row (they were wrapping 2 + 1). Equal
     flexible columns; labels wrap inside their own column if needed. */
  .hero__stats { margin-top: 1.2rem; flex-wrap: nowrap; gap: 1rem; }
  .hero__stats > div { flex: 1 1 0; min-width: 0; }
  .hero__stats .num { font-size: var(--step-2); }
}

/* ---------- Hero video pause/play control (WCAG 2.2.2) ---------- */
.hero .video-toggle {
  position: absolute; z-index: 3; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(11,22,45,.62); border: 1.5px solid rgba(255,255,255,.7);
  color: #fff; transition: background .15s ease, transform .15s ease;
}
.hero .video-toggle:hover { background: rgba(11,22,45,.85); transform: translateY(-1px); }
.hero .video-toggle:focus-visible { outline: 3px solid #bfe0f4; outline-offset: 2px; }
.hero .video-toggle svg, .hero .video-toggle img { width: 20px; height: 20px; fill: currentColor; }
.hero .video-toggle .icon-play { display: none; }
.hero .video-toggle.is-paused .icon-pause { display: none; }
.hero .video-toggle.is-paused .icon-play { display: block; }

/* Brand / logo lockups */
.nav__brand img.nav__logo { height: 40px; }
@media (max-width: 520px){ .nav__brand img.nav__logo { height: 40px; } }
/* Footer logo size — edit `height` here to make it bigger/smaller.
   The extra selectors make this win over the base rule in style.css. */
.site-footer .brandmark img.footer-logo { height: 120px; width: auto; opacity: 1; }

/* Footer on mobile: the brand block (logo + name + address) spans the full width,
   so Explore and Connect sit as an even two-column row beneath it instead of
   Connect dropping under the tall brand column. The logo also shrinks. */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.25rem; padding-block: 2.25rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .site-footer .brandmark img.footer-logo { height: 84px; }
  .footer-bottom { flex-direction: column; gap: .35rem; }
}

/* ---------- Alumni table ---------- */
.alumni-table { width: 100%; border-collapse: collapse; margin-top: 1.2rem; }
.alumni-table caption { text-align: left; color: var(--c-muted); font-size: var(--step--1); margin-bottom: .6rem; }
.alumni-table th {
  text-align: left; padding: .55rem .8rem; border-bottom: 2px solid var(--c-line);
  font-family: var(--font-body); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted);
}
.alumni-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--c-line); vertical-align: top; font-size: .95rem; }
.alumni-table tbody tr:hover td { background: var(--c-sky-2); }
.alumni-table .nm { font-weight: 650; color: var(--c-navy); white-space: nowrap; }
.alumni-table .now-unknown { color: var(--c-muted); }
.alum-linkedin { text-decoration: none; margin-left: .15rem; }
.alum-linkedin img { width: 15px; height: 15px; vertical-align: -2px; opacity: .8; transition: opacity .15s ease; }
.alum-linkedin:hover img, .alum-linkedin:focus-visible img { opacity: 1; }
@media (max-width: 620px){
  .alumni-table thead { display:none; }
  .alumni-table, .alumni-table tbody, .alumni-table tr, .alumni-table td { display:block; width:100%; }
  .alumni-table tr { border:1px solid var(--c-line); border-radius:10px; margin-bottom:.8rem; padding:.4rem .2rem; }
  .alumni-table td { border:0; padding:.25rem .8rem; }
  .alumni-table td::before { content: attr(data-label) ": "; font-weight:700; color:var(--c-muted); font-size: .75rem; text-transform:uppercase; letter-spacing:.05em; }
  .alumni-table .nm::before { content:""; }
  .alumni-table .nm { font-size:1.05rem; }
}

/* ---------- Eyebrow label contrast (WCAG 1.4.3) ----------
   #4f7094 on light is ~3.9:1 (fails AA for small text). Use the darkened
   slate (#34567f, ~4.8:1). Hero eyebrow keeps its light inline color. */
.eyebrow { color: var(--c-blue-700); }

/* Research — mission as a centered, boxless editorial statement.
   No card: just an eyebrow, the statement in the display serif at a
   comfortable measure, and a single short rule as the only ornament. */
.mission-statement {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  margin: 0;
}
.mission-statement .eyebrow { margin: 0; }
.mission-statement__text {
  font-family: var(--font-display); font-weight: 500; color: var(--c-navy);
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.15rem); line-height: 1.38;
  letter-spacing: -0.01em; max-width: 38ch; margin: .9rem auto 0;
  text-wrap: balance;
}
.mission-statement__rule {
  display: block; width: 44px; height: 3px; margin: 1.6rem auto 0;
  background: var(--c-gold);
}
/* Emphasis: Spectral's true italic in a softer slate — flags the two domains
   (animal flight / engineered systems) without shouting. */
.mission-statement em { color: var(--c-blue-600); font-style: italic; }

/* Research — value cards (icon inline with the title, like the home cards) */
.value-card .value-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 12px; background: var(--c-sky); color: var(--c-navy);
}
.value-card .value-icon svg, .value-card .value-icon img { width: 28px; height: 28px; }

/* Research — auto "recent paper" line on project cards */
.proj-paper { font-size: var(--step--1); margin-top: .7rem; line-height: 1.45; }
.proj-paper__label {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-blue-700); background: var(--c-sky);
  border-radius: 999px; padding: .08rem .5rem; margin-right: .35rem; vertical-align: middle;
}

/* Publications — colour-coded pills, each colour a distinct meaning:
   TYPE   journal article = green (peer-reviewed) · conference paper = violet ·
          presentation / poster = gray (informal).
   FLAGS  in the news = blue (press) · award = gold (🏆) · correction = red (caveat). */
.pub__type { margin-right: .15rem; }
.badge--conf { background: #ece7fb; color: #533a97; }   /* conference paper — violet */
.badge--minor { background: #eceff2; color: var(--c-ink-soft); }  /* presentation/poster — gray */

/* Publications — "in the news" coverage-count badge */
.pub-press {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-blue-700); background: var(--c-sky); border-radius: 999px;
  padding: .1rem .55rem; text-decoration: none;
}
.pub-press:hover, .pub-press:focus-visible { background: var(--c-blue-600); color: #fff; }

/* Publications — award pill (manual, from pub_links.yml) */
.pub-award {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #6e5206; background: #f7e9c4; border: 1px solid #e2c876; border-radius: 999px; padding: .1rem .55rem;
}

/* Publications — "Correction / Corrigendum" pill (manual, from pub_links.yml) */
.pub-correction {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #a42a2a; background: #fdeeec; border-radius: 999px; padding: .1rem .55rem; text-decoration: none;
}
.pub-correction:hover, .pub-correction:focus-visible { background: #c0392b; color: #fff; }

/* Publications — hand-curated extras (figure thumbnail + data/code chips) */
.pub--rich { display: flex; gap: 1rem; align-items: flex-start; }
/* The search hides non-matches with the [hidden] attribute; this must beat
   .pub--rich's display:flex, or thumbnailed papers stay visible when filtered. */
.pub[hidden] { display: none; }
.pub__thumb { width: 108px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-line); flex: none; background: var(--c-sky-2); }
.pub__main { flex: 1 1 auto; min-width: 0; }
.pub__extras { margin-top: .45rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.pub-resource {
  display: inline-flex; align-items: center; gap: .3rem; font-size: var(--step--1); font-weight: 600;
  color: var(--c-blue-700); background: var(--c-sky-2); border: 1px solid var(--c-line);
  border-radius: 999px; padding: .1rem .6rem; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.pub-resource:hover, .pub-resource:focus-visible { background: var(--c-sky); border-color: var(--c-blue-500); }
@media (max-width: 480px) { .pub__thumb { width: 76px; height: 56px; } }

/* ---------- Body-link affordance (WCAG 1.4.1: not by color alone) ----------
   Links inside running text carry a subtle persistent underline so they are
   distinguishable without relying on color; hover/focus deepens it. Buttons,
   nav, and card links manage their own affordances and are excluded. */
.wiki-content a:not(.btn), .callout a:not(.btn) {
  text-decoration: underline;
  text-decoration-color: var(--c-blue-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.wiki-content a:not(.btn):hover, .wiki-content a:not(.btn):focus-visible,
.callout a:not(.btn):hover, .callout a:not(.btn):focus-visible {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.callout strong, .wiki-content .callout strong {
  text-decoration: underline;
  text-decoration-color: var(--c-blue-600);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Guide content: slightly narrower measure keeps lines readable and leaves
   room in the right margin for margin notes on wide screens. */
.wiki-content { max-width: 66ch; }

/* Subheadings: base CSS sizes h3 the same as h2, so shrink h3 inside guide
   content to make the hierarchy legible. */
.wiki-content h3 { font-size: var(--step-1); margin-top: 1.6rem; }

/* "On this page" sits in a tinted card so it reads as distinct from the plain
   guide-page navigation below it. */
.wiki-toc {
  background: var(--c-sky-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem .8rem;
  margin-bottom: 1.4rem;
}
.wiki-toc .wiki-side__label { margin-top: 0; }

/* Nested H3 entries in the "On this page" list: indented and lighter so they
   read as children of their H2. */
.wiki-toc ul ul { margin: .1rem 0 .4rem .55rem; padding-left: .6rem; border-left: 1px solid var(--c-line); }
.wiki-toc ul ul a { font-size: .82rem; color: var(--c-muted); padding-top: .18rem; padding-bottom: .18rem; }

/* Let the guide sidebar scroll on its own when it is taller than the viewport,
   so you don't have to scroll the whole page to reach the bottom of the nav.
   Desktop only; on mobile the sidebar is static and stacks above the content. */
@media (min-width: 821px) {
  .wiki-side {
    max-height: calc(100vh - var(--header-h) - 2rem);
    overflow-y: auto; padding-right: .4rem;
    scrollbar-width: thin; scrollbar-color: transparent transparent;
  }
  .wiki-side:hover, .wiki-side:focus-within { scrollbar-color: var(--c-line) transparent; }
  .wiki-side::-webkit-scrollbar { width: 8px; }
  .wiki-side::-webkit-scrollbar-track { background: transparent; }
  .wiki-side::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
  .wiki-side:hover::-webkit-scrollbar-thumb,
  .wiki-side:focus-within::-webkit-scrollbar-thumb { background: var(--c-line); }
}

/* Guide sidebar fold: on small screens the sidebar collapses to a single
   "Guide menu" button so the article starts near the top of the page. The
   <details> ships open; main.js closes it below 820px. On desktop the summary
   is hidden and the sidebar renders exactly as before. */
@media (min-width: 821px) {
  .wiki-fold__summary { display: none; }
}
@media (max-width: 820px) {
  .wiki-fold__summary {
    display: block; cursor: pointer;
    list-style: none;
    font-family: var(--font-body); font-weight: 600; font-size: .95rem;
    color: var(--c-blue-700);
    background: var(--c-sky-2); border: 1px solid var(--c-line);
    border-radius: var(--radius-sm); padding: .65rem .9rem;
  }
  .wiki-fold__summary::-webkit-details-marker { display: none; }
  .wiki-fold__summary::after { content: " ▾"; }
  .wiki-fold[open] .wiki-fold__summary { margin-bottom: 1rem; }
  .wiki-fold[open] .wiki-fold__summary::after { content: " ▴"; }
}

/* Guide tables: lift the header row so by-role tables scan at a glance. */
.wiki-content table { margin: 1.2rem 0; }
.wiki-content thead th {
  background: var(--c-sky); color: var(--c-navy);
  font-family: var(--font-display); font-weight: 600;
}
/* Channel table: give the "You need" column room, keep "Use" tight so Notes
   has space. */
.channel-table td:first-child, .channel-table th:first-child { width: 32%; }
.channel-table td:nth-child(2), .channel-table th:nth-child(2) { width: 14%; }
/* Leave notice table: balance the four columns so none gets crushed. Length,
   notice, and how-to-report stay compact; "Before you go" takes the remainder. */
   .leave-table td:nth-child(1), .leave-table th:nth-child(1) { width: 17%; }
.leave-table td:nth-child(2), .leave-table th:nth-child(2) { width: 20%; }
.leave-table td:nth-child(3), .leave-table th:nth-child(3) { width: 21%; }
/* Safety recurring schedule: keep the cadence column tight. */
.sched-table td:last-child, .sched-table th:last-child { width: 26%; white-space: nowrap; }
/* Small muted note under the leave table, styled like a figcaption. */
.table-note { font-size: var(--step--1); color: var(--c-muted); margin-top: -0.4rem; line-height: 1.4; }

/* Checklist: a plain markdown list tagged {: .checklist} renders each item with
   an empty check box. The box is drawn in CSS, so non-technical editors just
   write a normal list and add the class line, the same way the tables work. */
.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 1.9em; margin-bottom: .4em; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: .2em;
  width: 1.05em; height: 1.05em;
  border: 2px solid var(--c-blue-600); border-radius: 4px;
}

/* Start-guide onboarding blocks: welcome panel, first-weeks roadmap, at-a-glance
   grid, and step cards. Thin HTML wrappers around normal markdown, so editors
   mostly write markdown; each wrapper appears once (or once per step). */
.guide-welcome {
  background: var(--c-navy); color: #fff;
  border-radius: var(--radius); padding: 1.4rem 1.6rem; margin: 0 0 1.6rem;
}
.guide-welcome p { margin: 0; color: var(--c-on-navy); }
.guide-welcome .eyebrow { display: block; color: #bfe0f4; margin-bottom: .35rem; }
.guide-welcome a { color: #bfe0f4; }
/* Three start-guide block types, three distinct visual roles so the page reads
   as journey → facts → actions instead of one wall of identical boxes.

   1. Roadmap = the JOURNEY. Numbered phase cards with a top accent and an emoji
      disc, so the three phases read as an ordered path (the number badge keeps
      the sequence clear whether the cards sit in a row or stack on mobile). */
.guide-roadmap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .6rem; margin: 0 0 1.8rem; counter-reset: phase;
}
.guide-roadmap > div {
  position: relative; counter-increment: phase;
  background: #fff; border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-blue-500);
  border-radius: var(--radius-sm); padding: .85rem .95rem;
}
.guide-roadmap > div::before {
  content: counter(phase);
  position: absolute; top: .6rem; right: .65rem;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--c-navy); color: #fff;
  font-family: var(--font-body); font-size: .75rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.guide-roadmap .i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--c-sky); font-size: 1.05rem; margin-bottom: .4rem;
}
.guide-roadmap .k {
  display: block; font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: .09em; font-weight: 700; color: var(--c-blue-700);
}
.guide-roadmap .t { display: block; font-weight: 600; color: var(--c-navy); }

/* 2. At a glance = the FACTS. A compact spec sheet: tinted cells with an
      uppercase label above each value. No borders, so it never competes with
      the step cards below it. */
.guide-glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .5rem; margin: .6rem 0 1.6rem;
}
.guide-glance > div {
  background: var(--c-sky-2); border-radius: var(--radius-sm);
  padding: .75rem .95rem;
}
.guide-glance .k {
  display: block; font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700; color: var(--c-blue-700);
  margin-bottom: .2rem;
}

/* 3. Steps = the ACTIONS. White cards on a left rail; the tight stack makes the
      rails line up into a spine so the numbered steps read as one sequence. */
.guide-step {
  background: #fff; border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-blue-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .9rem 1.1rem; margin: .5rem 0;
}
.guide-step > :first-child { margin-top: 0; }
.guide-step > :last-child { margin-bottom: 0; }
.guide-step > p:first-child strong { color: var(--c-navy); }

/* Section headers on the start guides: a clear chunking rule, with the phase
   descriptor as an inline pill instead of a dropped muted line. Scoped with
   :has(.when) so only start-guide section headers are affected; every other
   guide page's h2 is untouched. */
.wiki-content h2:has(.when) {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
  padding-bottom: .4rem; border-bottom: 2px solid var(--c-line);
}
.wiki-content h2 .when {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--c-blue-700);
  background: var(--c-sky); border-radius: 999px; padding: .12rem .6rem;
}
/* Inline info note for the start guides: full-width, in-flow, led by an info
   glyph. Authored as a normal paragraph tagged {: .guide-info}. */
.guide-info {
  background: var(--c-sky-2); border-left: 3px solid var(--c-blue-500);
  border-radius: var(--radius-sm); padding: .55rem .8rem; margin: .85rem 0 0;
  font-size: var(--step--1); color: var(--c-ink-soft);
}
.guide-info::before { content: "ⓘ  "; color: var(--c-blue-600); font-weight: 700; }

/* Lab operations roles: "at a glance" map tints the role-name column, reusing
   the AA-verified navy-on-sky pair. Cells stay plain text so non-technical
   editors just type the word. */
.roles-map tbody td:first-child {
  background: var(--c-sky-2); color: var(--c-navy);
  font-family: var(--font-display); font-weight: 600;
}

/* Lab operations roles: split two-panel cards. Left panel = identity (role name,
   purpose, Owns, Can); right panel = cadence deliverables + Avoids/Handoff. The
   Markdown inside each panel stays plain (heading, paragraphs, table) so editors
   never touch the layout. Field labels (Owns/Can/Avoids/Handoff) are the leading
   <strong> of a paragraph; CSS lifts them into small navy captions. */
.role-card {
  display: grid;
  grid-template-columns: 218px 1fr;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1rem 0 1.25rem;
}
.role-card__side {
  background: var(--c-sky-2);
  border-right: 1px solid var(--c-line);
  padding: 1rem 1.15rem;
}
.role-card__main { padding: 1rem 1.25rem; }
.role-card h2 {
  font-size: var(--step-1);
  margin: 0 0 .35rem;
  color: var(--c-navy);
}
.role-card__side > p { font-size: var(--step--1); color: var(--c-ink-soft); margin: 0 0 .7rem; }
.role-card__main > p { font-size: var(--step--1); margin: .7rem 0 0; }
/* Divider between the deliverables list and the Owns/Can/Avoids/Handoff block. */
.role-card__main table + p { border-top: 1px solid var(--c-line); margin-top: .9rem; padding-top: .85rem; }
.role-card p strong:first-child {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step--1); color: var(--c-muted);
}
/* Deliverables render as a clean "cadence tag + task" list: drop the header,
   turn the cadence cell into a rounded navy-on-sky tag. */
.role-card__main table {
  border-collapse: separate; border-spacing: 0 5px; margin: 0; width: 100%;
}
.role-card__main thead { display: none; }
.role-card__main tbody td { padding: .3rem .55rem; vertical-align: top; font-size: var(--step--1); }
.role-card__main tbody td:first-child {
  background: var(--c-sky); color: var(--c-navy);
  font-family: var(--font-display); font-weight: 600;
  white-space: nowrap; width: 1%; border-radius: 8px;
}
@media (max-width: 640px) {
  .role-card { grid-template-columns: 1fr; }
  .role-card__side { border-right: 0; border-bottom: 1px solid var(--c-line); }
}

/* Margin notes — short asides authored as
   <aside class="marginnote" markdown="1">…</aside> right after the paragraph
   they relate to (so screen readers meet them in context). By default they sit
   inline as a tidy block; on wide screens they float into the right margin to
   cut scrolling. Nested inside <article>, <aside> is not a landmark, so these
   don't clutter the landmark list. */
.marginnote {
  background: var(--c-sky-2);
  border-left: 3px solid var(--c-blue-500);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
  margin: 1.1rem 0;
  font-size: var(--step--1);
  color: var(--c-ink-soft);
  line-height: 1.45;
}
.marginnote > * + * { margin-top: .5rem; }
.marginnote--warn { background: #fdf8ec; border-left-color: var(--c-gold); }
.marginnote--stop { background: #fdeeec; border-left-color: #c0392b; }
@media (min-width: 1200px) {
  .marginnote {
    float: right;
    clear: right;
    width: 16.5rem;
    margin: .3rem -18rem 1rem 1.5rem;
  }
}

/* ---------- Partners / affiliations strip ---------- */
.partners { text-align: center; }
.partners .eyebrow { color: var(--c-blue-700); }
.partners-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem 1.5rem; align-items: stretch; margin-top: 1.5rem;
}
.partner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.1rem 1rem; border: 1px solid var(--c-line); border-radius: 12px; background: #fff;
  text-decoration: none; color: var(--c-navy); min-height: 96px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.partner:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c-blue-500); }
.partner img { max-height: 46px; max-width: 130px; width: auto; object-fit: contain; }

/* Larger funder logos (home "Supported by" band). Fixed-height logo box centers
   each logo vertically; names then start at the same line across all cards. */
.partners-grid--lg { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.partners-grid--lg .partner { min-height: 0; padding: 1.4rem 1.2rem; gap: .9rem; justify-content: flex-start; }
.partners-grid--lg .partner img { height: 124px; max-height: 124px; width: 100%; max-width: 220px; object-fit: contain; }
.partner .pname { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.15; text-align: center; }
.partner .psub { font-size: var(--step--1); color: var(--c-muted); }

/* ---------- Research / figure cards ---------- */
.proj-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.proj-card .proj-fig {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--c-sky-2);
  border-bottom: 1px solid var(--c-line); display: block;
}
.proj-card .proj-body { padding: 1.3rem 1.4rem; }
.proj-card h3 { margin-top: .3rem; }
.figure { margin: 0; }
.figure img { width: 100%; border-radius: 12px; border: 1px solid var(--c-line); box-shadow: var(--shadow); background:#fff; }
.figure figcaption { font-size: var(--step--1); color: var(--c-muted); margin-top: .5rem; }

/* ---------- News: featured coverage cards ---------- */
.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); gap: var(--gap); margin-top: 1.5rem; }
.feature {
  display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: 14px;
  overflow: hidden; background: #fff; text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.feature img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--c-sky-2); }
.feature .feature-body { padding: 1rem 1.1rem 1.2rem; }
.feature .src { display:block; font-size: var(--step--1); color: var(--c-blue-600); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.feature h3 { font-size: 1.1rem; line-height: 1.25; color: var(--c-navy); }

/* ---------- Readable rhythm for prose pages (Join, Contact, Portal) ---------- */
.prose > * + * { margin-top: 1.15em; }      /* space between stacked blocks */
.prose p { line-height: 1.7; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.7rem; }
.prose h2 + p, .prose h3 + p { margin-top: .5rem; }   /* heading hugs its first line */
.prose ul, .prose ol { margin-top: 1em; padding-left: 1.3em; }
.prose li + li { margin-top: .45rem; }
.prose hr { margin: 2.2rem 0; }

/* give the callout boxes interior breathing room too */
.callout > * + * { margin-top: .7rem; }
.callout { padding: 1.15rem 1.3rem; }

/* ---------- Prose pages: match site width + left-align ---------- */
.container.prose { max-width: var(--maxw); }        /* use the full site container, like the header */
.container.prose > * { max-width: 62rem; }  /* keep a readable line length, left-aligned */

/* Page-head band — compact, since pages use only eyebrow + title (no subtitle) */
.page-head { padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }
.page-head .eyebrow { margin-bottom: .35rem; }

/* Anchor cards (open-science grid, lab-guide hub): make the whole card a link */
a.card--link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
a.card--link h3 { color: var(--c-navy); }

/* "Why it matters" plain-language line on theme cards */
.why { margin-top: .8rem; font-size: var(--step--1); color: var(--c-ink); }
.why__label {
  display: block; font-weight: 700; font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-blue-700); margin-bottom: .15rem;
}

/* Signature idea — condensed two-column: intro text left, card stack right */
.framework-section {
  display: grid; grid-template-columns: 6fr 5fr;
  gap: clamp(1.5rem, 4vw, 3.2rem); align-items: start;
}
.framework-section .framework-flow { margin-top: 0; }
@media (max-width: 820px) { .framework-section { grid-template-columns: 1fr; } }

/* Signature framework — vertical 1→3 stack: words on the left, large icon right */
.framework-flow { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.6rem; }
.framework-card {
  display: flex; align-items: center; gap: 1.4rem;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow);
  border-left: 4px solid var(--c-blue-600);
}
.framework-card__body { flex: 1; min-width: 0; }
.framework-card__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .35rem; }
.framework-card__head h3 { margin: 0; font-size: var(--step-1); color: var(--c-navy); line-height: 1.2; }
.framework-card__num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--c-navy); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 1.05rem;
}
.framework-card p { margin: 0; color: var(--c-muted); font-size: var(--step--1); }
.fw-icon { flex: none; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; color: var(--c-navy); }
.fw-icon svg, .fw-icon img { width: 52px; height: 52px; }

/* Logo-style icon badges for research themes + open-science cards */
.theme-icon, .os-icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  border-radius: 14px; background: var(--c-sky); color: var(--c-navy);
}
.theme-icon { width: 54px; height: 54px; }
.theme-icon svg, .theme-icon img { width: 34px; height: 34px; }
.os-icon { width: 48px; height: 48px; border-radius: 12px; }
.os-icon svg, .os-icon img { width: 30px; height: 30px; }

/* Icon-left, title-right header for theme + open-science cards */
.card-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.card-head h3 { margin: 0; }

/* Research Values — three columns across the full width */
.prose .values-grid {
  list-style: none; padding: 0; margin-top: 1.2rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
}
.prose .values-grid li { margin: 0; line-height: 1.6; }
.prose .values-grid strong { display: block; color: var(--c-navy); margin-bottom: .3rem; }
@media (max-width: 760px) { .prose .values-grid { grid-template-columns: 1fr; } }

/* Project status badges + story pages */
.status {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: .12rem .55rem; border-radius: 999px; vertical-align: middle;
}
.status--active { background: #e6f3ea; color: #2e6b43; }
.status--completed { background: var(--c-sky); color: var(--c-blue-700); }
.status--paused { background: #fdf8ec; color: #8a6d1f; }

/* Lab guide landing — search field + category quick-links */
.guide-search { position: relative; max-width: 560px; margin-top: 1.6rem; }
.guide-search__icon { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); font-size: 1rem; opacity: .7; pointer-events: none; }
.guide-search input {
  width: 100%; padding: .8rem 1rem .8rem 2.6rem; font: inherit;
  border: 1px solid var(--c-line); border-radius: 999px; background: #fff;
  box-shadow: var(--shadow); transition: border-color .15s ease, box-shadow .15s ease;
}
.guide-search input:focus-visible { outline: none; border-color: var(--c-blue-500); box-shadow: 0 0 0 3px var(--focus); }
.guide-cats { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.2rem 0 .4rem; }
.guide-cat-chip {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  color: var(--c-blue-700); background: var(--c-sky); border: 1px solid var(--c-line);
  border-radius: 999px; padding: .45rem 1rem; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.guide-cat-chip:hover, .guide-cat-chip:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c-blue-500); }

/* Lab guide landing — hint text, card CTA, portal note, misconfig banner */
.guide-hint { font-size: var(--step--1); margin: .5rem 0 0; }
.card--link .card__more { margin-top: .6rem; color: var(--c-blue-700); font-weight: 600; }
.guide-note { margin-top: 2.5rem; }
.guide-start { margin-top: 1.6rem; }
.guide-start > .muted { margin-top: .3rem; }
.card--start { border-top: 3px solid var(--c-gold); }

/* Emoji badge on lab-guide index cards: a rounded tinted chip beside the title,
   using the same icon-left / title-right card-head layout as the home page's
   research and open-science cards. Decorative, so hidden from screen readers. */
.card-emoji {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  font-size: 1.5rem; line-height: 1;
  background: var(--c-sky); border: 1px solid var(--c-line); border-radius: 12px;
  transition: transform .15s ease, border-color .15s ease;
}
.card--link:hover .card-emoji { transform: translateY(-2px); border-color: var(--c-blue-500); }

/* Guide index stat band: reuses the home hero's serif-number + uppercase-label
   pattern, recoloured for a light background (number navy, label muted). */
.guide-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 1.6rem 0 .4rem; }
.guide-stats .num {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 600;
  color: var(--c-navy); display: block; line-height: 1;
}
.guide-stats .lbl {
  font-size: var(--step--1); color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .08em;
}

/* Category band heading: give the title room above its card grid. The bands
   themselves (alternating .section / .section--tint) carry the separation, so
   no underline is needed here. */
.guide-cat > .container > h2 { margin: 0 0 1.5rem; }

/* Lab safety: requirement tables + audience badges (colors reuse verified pills). */
.req-group-label { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--c-muted); margin: 1.3rem 0 .3rem; }
.req-table { width: 100%; border-collapse: collapse; margin: .3rem 0 1rem; }
.req-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--c-line); vertical-align: top; font-size: .95rem; }
.req-table td:last-child { text-align: right; white-space: nowrap; width: 1%; }
.req-note { display: block; color: var(--c-muted); font-size: var(--step--1); margin-top: .15rem; }
.aud { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; padding: .18rem .55rem; border-radius: 999px; white-space: nowrap; }
.aud--base { background: var(--c-sky); color: var(--c-blue-700); }
.aud--care { background: #fdf8ec; color: #8a6d1f; }
.aud--addon { background: var(--c-sky-2); color: var(--c-ink-soft); border: 1px solid var(--c-line); }
/* Narrow screens: the nowrap badge column crushes the requirement names (and can
   clip), so stack each row: name first, its badge underneath. Same pattern as
   the alumni table at this breakpoint. */
@media (max-width: 620px) {
  .req-table tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--c-line); }
  .req-table td { display: block; width: auto; border: 0; padding: .12rem .2rem; text-align: left; white-space: normal; }
}
.note--warn { background: #fdf8ec; border-color: var(--c-gold); border-left: 3px solid var(--c-gold); }
.note--warn code { background: #fff; padding: .05em .35em; border-radius: 4px; }

/* Lab guide — "needs review" band (shown by _includes/guide-review-banner.html
   when a page hasn't been reviewed or edited within the past year). */
.guide-stale {
  background: #fdf8ec; border: 1px solid var(--c-line); border-left: 3px solid var(--c-gold);
  border-radius: var(--radius); padding: .8rem 1.1rem; margin: 0 0 1.5rem;
  font-size: var(--step--1); color: var(--c-ink);
}
.guide-stale p { margin: 0; }

/* Lab guide — fellowships table (framed, with level pills + preview toggle) */
.fund-table-wrap {
  margin-top: 1.4rem; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue-600);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #fff;
}
.fund-table { width: 100%; border-collapse: collapse; }
.fund-table thead th {
  text-align: left; font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  color: var(--c-navy); background: var(--c-sky); padding: .75rem 1rem; border-bottom: 1px solid var(--c-line);
}
.fund-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--c-line); vertical-align: middle; font-size: .95rem; }
.fund-table tbody tr:last-child td { border-bottom: 0; }
.fund-table tbody tr:hover td { background: var(--c-sky-2); }
.fund-name a { font-weight: 600; color: var(--c-blue-700); text-decoration: none; }
.fund-name a:hover, .fund-name a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.fund-ext { font-size: .8em; opacity: .65; }
.fund-pill {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-blue-700); background: var(--c-sky); border: 1px solid var(--c-line);
  border-radius: 999px; padding: .12rem .5rem; margin: .12rem .18rem .12rem 0; white-space: nowrap;
}
.fund-elig { color: var(--c-muted); font-size: var(--step--1); }
.fund-any { color: var(--c-muted); }
.fund-toggle { margin-top: 1rem; }
.fund-row[hidden] { display: none; }
@media (max-width: 620px) {
  .fund-table thead { display: none; }
  .fund-table, .fund-table tbody, .fund-table tr, .fund-table td { display: block; width: 100%; }
  .fund-table tr { border-bottom: 1px solid var(--c-line); padding: .5rem .2rem; }
  .fund-table tbody tr:last-child { border-bottom: 0; }
  .fund-table td { border: 0; padding: .25rem 1rem; }
  .fund-table td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--c-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; margin-right: .3rem; }
  .fund-name::before { content: ""; }
}

/* Contact — primary contact card */
.contact-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; margin-top: 1.4rem; padding: 1.4rem 1.6rem;
  background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue-600);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.contact-card__info > * { margin: 0; }
.contact-card__info > * + * { margin-top: .3rem; }
.contact-card__name { font-family: var(--font-display); font-weight: 600; color: var(--c-navy); font-size: var(--step-1); }
.contact-card__btn { flex: none; }

/* Join — "Openings right now" cards */
.openings { margin-top: 1.5rem; }
.openings .card { display: flex; flex-direction: column; }
.openings .card .status { align-self: flex-start; margin-bottom: .7rem; }
.openings .card h3 { margin-bottom: .5rem; }
.openings .card p { margin-bottom: .7rem; }
.openings .card .btn { align-self: flex-start; margin-top: auto; }
.proj-tags { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0 0 .2rem; }
.project-meta { color: var(--c-muted); margin-top: .4rem; }
.project-page .story-step { margin-top: 1.8rem; }
.project-page .story-step h2 { font-size: var(--step-1); color: var(--c-navy); margin-bottom: .3rem; }
.project-page > * { max-width: 64rem; }

/* Facilities — alternating photo + text rows */
.facility-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 4vw, 2.6rem); align-items: center; margin-top: 1.2rem;
}
.facility-photo { margin: 0; }
.facility-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid var(--c-line); box-shadow: var(--shadow);
  background: var(--c-sky-2);
}
.facility-photo__note { margin-top: .5rem; font-size: var(--step--1); color: var(--c-muted); font-style: italic; }
.facility--flip .facility-photo { order: 2; }
@media (max-width: 760px) {
  .facility-grid { grid-template-columns: 1fr; }
  .facility--flip .facility-photo { order: 0; }
}
.facility-body > h2 { margin-top: 0; }
.facility-tagline { font-size: var(--step-1); color: var(--c-ink-soft); line-height: 1.4; margin-top: .25rem; }
.facility-meta { margin-top: .4rem; }

/* Facilities — flagship band (contained hero for the featured facility) */
.facility-flagship {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--c-line); box-shadow: var(--shadow-lg);
}
.facility-flagship__img {
  display: block; width: 100%; height: clamp(300px, 42vw, 500px);
  object-fit: cover; object-position: center 35%; background: var(--c-sky-2);
}
.facility-flagship__body {
  position: absolute; inset-inline: 0; bottom: 0; color: #fff;
  padding: clamp(1.4rem, 4vw, 2.8rem);
  background: linear-gradient(180deg, transparent 0%, rgba(11,22,45,.5) 42%, rgba(11,22,45,.88) 100%);
}
.facility-flagship__kicker {
  display: inline-block; background: rgba(4,51,82,.85); color: #fff;
  padding: .3rem .85rem; border-radius: 999px;
  box-shadow: 0 1px 10px rgba(7,14,30,.35);
}
.facility-funder {
  position: absolute; top: clamp(.8rem, 2vw, 1.3rem); right: clamp(.8rem, 2vw, 1.3rem);
  display: flex; flex-direction: column; align-items: flex-end; gap: .3rem;
  background: rgba(255,255,255,.93); border: 1px solid rgba(255,255,255,.6);
  border-radius: 12px; padding: .55rem .75rem; text-decoration: none;
  box-shadow: 0 2px 12px rgba(7,14,30,.28); max-width: 220px;
}
.facility-funder:hover, .facility-funder:focus-visible { background: #fff; }
.facility-funder__note { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); text-align: right; line-height: 1.25; }
.facility-funder img { height: 30px; width: auto; max-width: 170px; object-fit: contain; display: block; }
.facility-flagship__title { color: #fff; font-size: var(--step-3); line-height: 1.12; margin: .15rem 0 0; text-shadow: 0 1px 14px rgba(7,14,30,.6); }
.facility-flagship__tagline { max-width: 54ch; margin: .55rem 0 0; font-size: var(--step-1); line-height: 1.4; text-shadow: 0 1px 14px rgba(7,14,30,.6); }
.facility-flagship__meta { margin: .55rem 0 0; font-size: var(--step--1); color: var(--c-on-navy); }
.facility-flagship .hero__cta { margin-top: 1.15rem; }
.facility-flagship-copy { margin-top: clamp(1.5rem, 4vw, 2.2rem); }
.facility-flagship-copy > * { max-width: 68ch; }
/* Narrow screens: the bottom-anchored overlay grows taller than the photo
   (multi-line title, tagline, and wrapped buttons), and the container's
   overflow: hidden clips it. Let the text flow below the photo on a solid
   navy panel instead; the container keeps the rounded corners. */
@media (max-width: 640px) {
  .facility-flagship__img { height: 230px; }
  .facility-flagship__body {
    position: static;
    background: var(--c-navy);
    padding: 1.3rem 1.2rem 1.5rem;
  }
}

/* Facilities — big-number spec tiles (echo hero stats + recognition cards) */
.spec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap); margin-top: 1.5rem;
}
.spec {
  background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue-600);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow);
}
.spec__value { display: block; font-family: var(--font-display); font-weight: 600; color: var(--c-navy); font-size: var(--step-3); line-height: 1; }
.spec__label { display: block; margin-top: .4rem; font-size: var(--step--1); color: var(--c-muted); line-height: 1.35; }
.spec-grid--compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.spec-grid--compact .spec { padding: .85rem 1rem; }
.spec-grid--compact .spec__value { font-size: var(--step-2); }

/* Facilities — capability chips */
.facility-features {
  list-style: none; padding: 0; margin: 1.1rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.facility-features li {
  font-size: var(--step--1); font-weight: 600; color: var(--c-blue-700);
  background: var(--c-sky); border-radius: 999px; padding: .35rem .85rem;
}

/* Home: lab photo replacing the old "Get involved" card */
.home-photo {
  display: block; position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--c-line); box-shadow: var(--shadow); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.home-photo:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.home-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-sky-2); }
.home-photo__cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1.6rem .95rem .8rem;
  font-size: var(--step--1); font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(11,22,45,.84));
}

/* Recognition + media strips */
.recognition-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr));
  gap: var(--gap); margin-top: 1.5rem;
}
.recognition {
  display: flex; align-items: flex-start; gap: .9rem;
  border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue-600);
  border-radius: var(--radius); background: #fff; padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.recognition:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.recognition__medal {
  flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--c-sky); color: var(--c-navy);
}
.recognition__medal svg, .recognition__medal img { width: 24px; height: 24px; }
.recognition .r-body { display: flex; flex-direction: column; }
.recognition .r-award { font-family: var(--font-display); font-weight: 600; color: var(--c-navy); line-height: 1.2; }
.recognition .r-meta { font-size: var(--step--1); color: var(--c-muted); margin-top: .25rem; }

/* "Featured in" prestige chips */
.media-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.1rem; }
.media-chip {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--c-navy);
  background: #fff; border: 1px solid var(--c-line); border-radius: 999px; padding: .42rem 1.05rem;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.media-chip:hover, .media-chip:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c-blue-500); color: var(--c-blue-700); }
.media-more { font-weight: 600; color: var(--c-blue-700); text-decoration: none; margin-left: .4rem; }
.media-more:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Home: Recent publications (primary) + Honors & awards (compact sidebar) */
.home-highlights {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.recognition-grid--stack { grid-template-columns: 1fr; gap: .7rem; margin-top: 1rem; }
.recognition--compact { padding: .7rem .85rem; gap: .65rem; }
.recognition--compact .recognition__medal { width: 30px; height: 30px; }
.recognition--compact .recognition__medal svg,
.recognition--compact .recognition__medal img { width: 18px; height: 18px; }
.recognition--compact .r-award { font-size: .95rem; }
.recognition--compact .r-meta { font-size: .8rem; margin-top: .15rem; }
/* Footer row under the highlights grid: All-publications button + Featured in */
.home-highlights__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.home-highlights__foot .home-featured { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; }
.home-highlights__foot .media-row { margin-top: 0; }
@media (max-width: 820px) { .home-highlights { grid-template-columns: 1fr; } }

/* Home: partner-organization tiles ("In partnership with") */
.partner-orgs { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.2rem, 4vw, 2.6rem); margin-top: 1.6rem; }
.partner-org { display: flex; flex-direction: column; align-items: center; gap: .55rem; width: 188px; text-decoration: none; color: var(--c-navy); }
.partner-org img {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: #fff;
  border: 1px solid var(--c-line); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.partner-org:hover img, .partner-org:focus-visible img { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.partner-org__name { font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.2; }
.partner-org__sub { font-size: var(--step--1); color: var(--c-muted); }

/* Home section header with an action on the right */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
.section-head h2 { margin: 0; }

/* Home news + team-photo row. Two columns on desktop; on mobile it stacks and
   the team photo moves above the news scroll (order:-1). */
.home-news-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
@media (max-width: 820px) {
  .home-news-row { grid-template-columns: 1fr; }
  .home-news-row .home-photo { order: -1; }
}
/* Home news column: fill to the height of the photo beside it, then scroll */
.home-news { display: flex; flex-direction: column; min-height: 0; }
/* flex-basis:0 keeps the (tall) list from inflating the grid row — the photo
   sets the height, and this box fills to it and scrolls. */
.mini-scroll { flex: 1 1 0; min-height: 8rem; overflow-y: auto; overflow-x: hidden; padding-left: 6px; margin-top: 1.1rem; }
@media (max-width: 860px) { .mini-scroll { flex: 0 1 auto; max-height: 60vh; } }
.mini-scroll .news-year:first-child { margin-top: 0; }
.mini-scroll { scrollbar-width: thin; scrollbar-color: var(--c-blue-500) transparent; }
.mini-scroll::-webkit-scrollbar { width: 8px; }
.mini-scroll::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 999px; }
.mini-scroll::-webkit-scrollbar-thumb:hover { background: var(--c-blue-500); }

/* News page — cap the milestones timeline in a scroll box so the press section stays reachable */
.news-scroll {
  max-height: 60vh; margin-top: 1.2rem; padding: 1.1rem 1.3rem;
  border: 1px solid var(--c-line); border-radius: var(--radius);
}
.news-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* News archive rows: title + source on its own line, optional "Paper" DOI pill */
.news-press__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--c-line);
}
.news-press__link {
  flex: 1 1 auto; min-width: 0; display: block; padding: .6rem 0;
  text-decoration: none; transition: padding-left .15s ease;
}
.news-press__link:hover, .news-press__link:focus-visible { padding-left: .4rem; }
.news-press__title { color: var(--c-navy); font-weight: 600; }
.news-press__src { display: block; margin-top: .12rem; font-size: var(--step--1); color: var(--c-muted); }
.news-press__doi {
  flex: none; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-blue-700); background: var(--c-sky); border: 1px solid var(--c-line);
  border-radius: 999px; padding: .2rem .6rem; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.news-press__doi:hover, .news-press__doi:focus-visible { background: var(--c-blue-600); color: #fff; border-color: var(--c-blue-600); }
/* Reason tag on non-paper entries. Paper-linked rows use the blue "Paper" pill
   instead, so a row shows at most one chip. Each reason gets a meaningful colour +
   emoji: Center = institutional blue, Award = gold, Funding = green (money),
   Profile = violet (person), Feature = teal (news). */
.news-press__tag {
  flex: none; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-ink-soft); background: #eceff2; border: 1px solid var(--c-line);
  border-radius: 999px; padding: .2rem .6rem; white-space: nowrap;
}
.news-press__tag[data-tag="Center"]  { background: #e9eef5; color: #34567f; border-color: #cddcec; }
/* Award text darkened from #8a6a1e (4.32:1 — below the 4.5:1 AA minimum) to
   #755914 (5.62:1), bringing it in line with the other tags, which sit between
   5.2:1 and 7.2:1. Darkening the text rather than lightening the background
   keeps the badge's visual weight. If you restyle these, check contrast. */
.news-press__tag[data-tag="Award"]   { background: #f7edcf; color: #755914; border-color: #ecdca6; }
.news-press__tag[data-tag="Funding"] { background: #e6f3ea; color: #2e6b43; border-color: #cde6d6; }
.news-press__tag[data-tag="Profile"] { background: #ece7fb; color: #533a97; border-color: #dcd2f3; }
.news-press__tag[data-tag="Feature"] { background: #e2f0f2; color: #2b6b73; border-color: #c7e2e5; }

/* News — "Watch & listen" media cards (link-outs, no embeds) */
.media-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--gap); margin-top: 1.4rem;
}
/* Wrapper so a video card can carry a "Paper"/reason chip as a badge on the
   thumbnail without nesting a second anchor inside the card link. */
.media-card { position: relative; display: flex; flex-direction: column; }
.media-card__foot { position: absolute; top: .6rem; left: .6rem; z-index: 2; display: flex; }
.media-card__foot .news-press__doi,
.media-card__foot .news-press__tag { box-shadow: 0 1px 5px rgba(4, 51, 82, .3); }
.media-item {
  display: flex; flex-direction: column; text-decoration: none; color: var(--c-navy);
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.media-item:hover, .media-item:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.media-item__thumb {
  position: relative; aspect-ratio: 16 / 9; background: var(--c-sky-2);
  display: flex; align-items: center; justify-content: center;
}
.media-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-item__play {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(4,51,82,.82); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 1.1rem; padding-left: 3px;
}
.media-item:hover .media-item__play { background: var(--c-blue-600); }
.media-item__icon { font-size: 2.4rem; }
.media-item__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.media-item__kind { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-blue-700); }
/* Compact rows for media without a thumbnail (podcasts, 3D models): same
   pattern as the press-coverage rows, so nothing looks like an empty card. */
.media-lines { margin-top: 1.2rem; }
/* Row wraps the link + an optional "Paper"/reason chip as siblings, so the chip
   is its own link (anchors can't nest) — same structure as the press rows. */
.media-line-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--c-line);
}
.media-line {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: .6rem .2rem;
  text-decoration: none; transition: padding-left .15s ease;
}
.media-line:hover, .media-line:focus-visible { padding-left: .5rem; }
.media-line__kind {
  flex: none; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-blue-700);
  background: var(--c-sky); border-radius: 999px; padding: .2rem .6rem;
}
.media-line__title { color: var(--c-navy); font-weight: 600; }
.media-line__meta { color: var(--c-muted); font-size: var(--step--1); margin-left: auto; }
.media-item__title { font-family: var(--font-display); font-weight: 600; line-height: 1.25; }
.media-item__meta { font-size: var(--step--1); color: var(--c-muted); }

/* News page — milestones grouped by month (a dot per month) */
.news-year { font-family: var(--font-display); font-size: var(--step-2); color: var(--c-navy); margin: 1.8rem 0 .6rem; }
.news-months { list-style: none; margin: 0; padding: 0 0 0 1.35rem; border-left: 2px solid var(--c-line); }
.news-month { position: relative; padding: 0 0 1.15rem 0; }
.news-month:last-child { padding-bottom: 0; }
.news-month::before {
  content: ""; position: absolute; left: calc(-1.35rem - 6px); top: .3rem;
  width: 11px; height: 11px; border-radius: 50%; background: var(--c-blue-600); box-shadow: 0 0 0 3px #fff;
}
.news-month__label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-blue-700); margin-bottom: .4rem; }
.news-timeline { max-width: none; }
.news-events { list-style: none; margin: 0; padding: 0; }
.news-events li { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .6rem; }
.news-events li:last-child { margin-bottom: 0; }
.news-events .ev-icon {
  flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--c-sky); font-size: 1.02rem; line-height: 1;
}
.ev-text { flex: 1; font-size: var(--step--1); line-height: 1.5; color: var(--c-ink); }
/* Base emoji sizing for event icons (emitted by the update-icon include). */
.ev-icon { font-size: 1.05rem; }

/* PI feature block (home) */
.pi-feature { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.4rem,4vw,2.6rem); align-items: start; }
.pi-feature__aside { display: flex; flex-direction: column; gap: .9rem; }
.pi-feature__photo {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 16px;
  border: 1px solid var(--c-line); box-shadow: var(--shadow); background: var(--c-sky-2);
}
.pi-feature__placeholder {
  width: 100%; aspect-ratio: 1/1; border-radius: 16px; border: 1px dashed var(--c-blue-500);
  background: var(--c-sky-2); display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--c-muted); font-size: var(--step--1); padding: 1rem;
}
.pi-feature .links a { margin-right: 1rem; }
@media (max-width: 640px){ .pi-feature { grid-template-columns: 1fr; } .pi-feature__photo, .pi-feature__placeholder { max-width: 220px; } }

/* Bird-of-a-role badge on people avatars */
.avatar-wrap { position: relative; display: inline-block; }
.person .avatar-wrap { display: block; width: 110px; margin: 0 auto; }
.role-pip {
  position: absolute; right: 2px; bottom: .7rem;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow);
  font-size: 1rem; line-height: 1;
}
/* Discipline / field tags (engineering vs biology mix) */
.field-tags { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin: .3rem 0 0; }
.field-tag {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: .12rem .55rem; border-radius: 999px;
  background: var(--c-sky); color: var(--c-blue-700); border: 1px solid var(--c-line);
}

/* Awards on a person card — one 🏆 for the whole list, awards stacked beside it */
.person-awards { display: flex; gap: .45rem; justify-content: center; align-items: flex-start; margin: .4rem 0 0; }
.award__icon { flex: none; font-size: 1.05rem; line-height: 1.35; }
.award__list { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.award { font-size: var(--step--1); font-weight: 600; color: var(--c-blue-700); line-height: 1.3; }

/* People card: link to that member's research project */
.person-project { margin: .35rem 0 0; }
.person-project a { font-size: var(--step--1); font-weight: 600; color: var(--c-blue-700); text-decoration: none; }
.person-project a:hover, .person-project a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* Contact/profile links as icon buttons (team cards + PI feature) */
.person .links, .pi-feature .links { gap: .5rem; }
.pi-feature .links--left { justify-content: flex-start; }
.person .links a, .pi-feature .links a {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--c-sky-2); border: 1px solid var(--c-line);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.person .links a:hover, .person .links a:focus-visible,
.pi-feature .links a:hover, .pi-feature .links a:focus-visible { background: var(--c-sky); border-color: var(--c-blue-500); transform: translateY(-1px); }
.person .links img, .pi-feature .links img { width: 17px; height: 17px; }

/* Team grid: uniform card structure so items line up across columns.
   Avatars + names align at the top; the icon links pin to a shared bottom row. */
#team-grid .person { display: flex; flex-direction: column; height: 100%; }
#team-grid .person h3 { min-height: 2.7em; display: flex; align-items: center; justify-content: center; margin-bottom: .15rem; }
#team-grid .person .field-tags { justify-content: center; }
#team-grid .person .links { margin-top: auto; padding-top: .7rem; }

/* Research projects: arriving at #project-<lead> highlights it and greys the rest
   (mirrors the People hover effect). */
.projects-grid .proj-card { transition: opacity .2s ease, transform .18s ease, box-shadow .18s ease; }
.projects-grid:has(.proj-card:target) .proj-card { opacity: .35; }
.projects-grid .proj-card:target { opacity: 1; transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--c-blue-500); }

/* Milestone text links (News + home timeline) */
.ev-text a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.ev-text a:hover { color: var(--link-hover); }
/* Fallback link, used only when a milestone has a URL but no words to link.
   Quieter than an inline link so it reads as an affordance, not part of the
   sentence; `white-space: nowrap` keeps "Details ↗" from breaking across lines. */
.ev-text a.ev-link {
  white-space: nowrap; margin-left: .3rem; font-size: .92em;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* Role key / legend (People page): sticky header with the bird-taxonomy chips,
   plus the hover/focus highlight that dims non-matching members (see main.js). */
.team-section { position: relative; }
.people-header {
  position: sticky; top: calc(var(--header-h)); z-index: 20;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--c-line); padding: .75rem 0;
}
.people-header__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.role-key { display: flex; gap: 1.2rem; }
.role-chip {
  display: flex; flex-direction: column; align-items: center;
  min-width: 66px; cursor: pointer; transition: transform .18s ease;
}
.role-chip:hover { transform: translateY(-2px); }
.role-chip .bird { font-size: 1.05rem; margin-bottom: .18rem; }
.role-chip .role-label { font-size: .75rem; letter-spacing: .1em; font-weight: 700; text-transform: uppercase; color: var(--c-muted); }
.role-count {
  font-size: .75rem; font-weight: 700; color: var(--c-blue-700);
  min-height: .95em;   /* reserve space so the chip doesn't jump */
  line-height: 1; margin-top: .1rem;
}
.role-chip.active .role-label { color: var(--c-blue-700); }
#team-grid.filtering .person { opacity: .45; transition: opacity .18s ease, transform .18s ease; }
#team-grid.filtering .person.highlight { opacity: 1; transform: translateY(-4px); }
@media (max-width: 900px) {
  .people-header { flex-direction: column; align-items: flex-start; }
  .role-key {
    width: 100%; justify-content: center; margin-top: 1rem;
    flex-wrap: wrap;   /* let the bird chips wrap instead of running off the right edge */
    gap: .7rem 1rem;
  }
}
.person { transition: transform .18s ease, box-shadow .18s ease; }
.person.highlight { transform: translateY(-4px); }
.role-pip { transition: transform .18s ease, box-shadow .18s ease; }
.role-pip.highlight { transform: scale(1.12); }
.person.highlight .role { color: var(--c-blue-700); }

/* Cinematic "In the field" band (Home, under hero) */
/* Full-bleed banner: force viewport width even inside a constrained/padded parent.
   `main` clips the overflow (clip, not hidden, so the People sticky header still works). */
main { overflow-x: clip; }
.field-band {
  position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw);
}
.field-band__img {
  display: block; width: 100%; max-width: none; height: clamp(320px, 44vw, 600px);
  object-fit: cover; object-position: center 32%;   /* crop the ceiling at the top */
}
.field-band__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,22,45,.18) 0%, rgba(11,22,45,.20) 45%, rgba(11,22,45,.78) 100%);
}
.field-band__caption { position: absolute; inset-inline: 0; bottom: clamp(1rem, 4vw, 2.4rem); color: #fff; }
.field-band__line {
  font-family: var(--font-display); font-weight: 600; color: inherit;
  font-size: var(--step-2); line-height: 1.2; max-width: none; margin: .3rem 0 0;
  text-shadow: 0 1px 14px rgba(7,14,30,.6);
}
.field-band__caption p { text-shadow: 0 1px 14px rgba(7,14,30,.6); max-width: 60ch; }

/* "Scenes from the lab" trio (People) */
.scenes-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr));
  gap: var(--gap); margin-top: 1rem;
}
.scene { margin: 0; }
.scene img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid var(--c-line); box-shadow: var(--shadow); background: var(--c-sky-2);
}
.scene figcaption { margin-top: .55rem; font-size: var(--step--1); color: var(--c-muted); line-height: 1.4; }

/* Lab-culture moment (Join): compact, floated beside the intro */
.culture-shot { float: right; width: min(320px, 42%); margin: .2rem 0 1rem 1.8rem; }
.culture-shot img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid var(--c-line); box-shadow: var(--shadow);
}
.culture-shot figcaption {
  margin-top: .5rem; font-style: italic; color: var(--c-muted); font-size: var(--step--1);
}
/* keep the following section from wrapping up beside the float */
.culture-shot ~ h2 { clear: both; }
@media (max-width: 640px) { .culture-shot { float: none; width: 100%; margin: 1.4rem 0; } }

/* Join page: the culture photo floats to the full container's right edge, so let
   the intro text and the openings cards span the full width too (instead of the
   default readable-width cap). Everything then shares one right edge with the
   photo. Scoped to Join via the per-page <body> class. */
.page--join-the-lab .container.prose > * { max-width: none; }

/* Lab group photo band */
.lab-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; border: 1px solid var(--c-line); box-shadow: var(--shadow); display: block; }

/* Instagram follow card (home "Latest news" column; link also in the footer
   and on Contact). The icon tile uses Instagram's brand gradient; the card
   itself stays on the site palette. */
.insta-card {
  display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem;
  padding: .85rem 1rem; border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-paper); text-decoration: none; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.insta-card:hover, .insta-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.insta-card__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px; color: #fff;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 52%, #6228d7); /* Instagram brand gradient */
}
.insta-card__icon svg { width: 24px; height: 24px; }
.insta-card__title { display: block; font-weight: 650; color: var(--c-navy); }
.insta-card__handle { display: block; font-size: var(--step--1); color: var(--c-muted); }
.insta-card__cta { margin-left: auto; color: var(--c-blue-700); font-weight: 600; }

/* Compact Instagram chip (News page section head); groups with the existing
   "Jump to press" button via .head-actions. */
.head-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.insta-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .8rem .3rem .35rem; border: 1px solid var(--c-line);
  border-radius: 999px; background: var(--c-paper); text-decoration: none;
  color: var(--c-navy); font-weight: 600; font-size: var(--step--1);
  transition: transform .15s ease, box-shadow .15s ease;
}
.insta-pill:hover, .insta-pill:focus-visible { transform: translateY(-1px); box-shadow: var(--shadow); }
.insta-pill__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 7px; color: #fff;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 52%, #6228d7);
}
.insta-pill__icon svg { width: 13px; height: 13px; }

/* In-page anchor jumps land below the sticky header, not under it */
[id] { scroll-margin-top: calc(var(--header-h) + 1.2rem); }

/* Collapsible details — keeps long reference blocks (alumni list, past press,
   guide code samples and lookup tables) from stretching a page. To collapse
   something in a guide page, wrap it in
   <details class="guide-details" markdown="1"> with a <summary>, and keep a
   blank line before any Markdown inside. */
.alumni-details, .press-details, .guide-details { margin-top: 1rem; }
.alumni-details > summary, .press-details > summary, .guide-details > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; width: fit-content;
  font-weight: 650; color: var(--c-navy); padding: .55rem 1rem;
  border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-sky-2);
}
.alumni-details > summary:hover, .press-details > summary:hover, .guide-details > summary:hover { border-color: var(--c-blue-500); }
.alumni-details > summary:focus-visible, .press-details > summary:focus-visible, .guide-details > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.alumni-details > summary::-webkit-details-marker, .press-details > summary::-webkit-details-marker, .guide-details > summary::-webkit-details-marker { display: none; }
.alumni-details > summary::before, .press-details > summary::before, .guide-details > summary::before { content: "▸"; color: var(--c-blue-600); font-size: .8em; }
.alumni-details[open] > summary::before, .press-details[open] > summary::before, .guide-details[open] > summary::before { content: "▾"; }

/* Open guide folds render as a panel. Closed, the summary is a pill; open, that
   pill would float above unbounded body text sitting straight on the page
   background, which reads as broken. Scoped to .guide-details so the alumni and
   press lists keep their existing look. */
.guide-details[open] {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 0 1.35rem 1.35rem;
}
.guide-details[open] > summary {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  padding: 1rem 0 .8rem;
}
.guide-details[open] > summary:hover { border-color: transparent; border-bottom-color: var(--c-blue-500); }

/* Vertical rhythm inside a fold. `.wiki-content > * + *` only spaces DIRECT
   children of the article, so anything nested in <details> was rendering with no
   gaps between paragraphs. */
.guide-details > * + * { margin-top: 1rem; }
.guide-details > summary + * { margin-top: 1.15rem; }

/* Brand palette swatches (Logos & branding guide page). The chip background is
   the colour being documented, so it stays inline in the markup; every text
   colour comes from the tokens above so contrast stays centrally controlled. */
.brand-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.swatch {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-paper);
}
.swatch__chip {
  display: block;
  height: 72px;
  border-bottom: 1px solid var(--c-line);
}
.swatch__body { display: block; padding: .7rem .8rem .85rem; }
.swatch__name { display: block; font-weight: 600; color: var(--c-ink); }
.swatch__hex {
  display: inline-block;
  margin: .15rem 0 .35rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--c-muted);
  text-transform: uppercase;
}
.swatch__use { display: block; font-size: var(--step--1); color: var(--c-muted); }

/* Home "Our research": two aligned columns (What we study | Why it matters)
   sharing one row style, with a central spine divider. Both columns use the
   same icon chip + title + one-line format, so the two halves read as a
   consistent, vertically aligned pair rather than two different components. */
.research-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 5vw, 3.5rem); margin-top: 2rem; position: relative;
}
/* thin vertical rule between the columns — echoes the bio-informed "spine" */
@media (min-width: 761px) {
  .research-split::before {
    content: ""; position: absolute; top: .3rem; bottom: .3rem; left: 50%;
    width: 1px; background: var(--c-line); transform: translateX(-50%);
  }
}
.research-col__label {
  font-family: var(--font-display); font-weight: 600; color: var(--c-navy);
  font-size: var(--step-1); margin: 0;
}
.research-col__label::after {
  content: ""; display: block; width: 2.2rem; height: 3px; border-radius: 3px;
  background: var(--c-blue-500); margin-top: .5rem;
}
.rlist { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 1.15rem; }
.rlist__item { display: flex; gap: .85rem; align-items: flex-start; }
.rlist__icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--c-sky); display: flex; align-items: center; justify-content: center;
}
.rlist__icon img, .rlist__icon svg { width: 26px; height: 26px; }
.rlist__body { display: block; }
.rlist__title {
  display: block; font-family: var(--font-display); font-weight: 600;
  color: var(--c-navy); font-size: var(--step-0); line-height: 1.25; text-decoration: none;
}
a.rlist__title:hover, a.rlist__title:focus-visible { text-decoration: underline; }
.rlist__line { display: block; margin-top: .25rem; font-size: var(--step--1); color: var(--c-muted); line-height: 1.5; }
@media (max-width: 760px) { .research-split { grid-template-columns: 1fr; } }

/* ---------- Lab Guide: copyable section-link anchors ----------
   A small "#" button appended to each guide H2/H3 with an id. Hidden until the
   heading is hovered or the button is focused, so it never clutters the page but
   is always keyboard-reachable. Clicking copies the section's deep link. */
.wiki-content h2, .wiki-content h3 { position: relative; }
.anchor-link {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--c-blue-600);
  opacity: 0;
  padding: 0 .35em;
  margin-left: .1em;
  line-height: 1;
  transition: opacity .12s ease;
}
.wiki-content h2:hover .anchor-link,
.wiki-content h3:hover .anchor-link,
.anchor-link:focus-visible { opacity: 1; }
.anchor-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.anchor-link.copied { opacity: 1; color: #2e6b43; }
.anchor-link.copied::after {
  content: " link copied";
  font-size: var(--step--1);
  font-weight: 600;
}
/* Touch devices can't hover: keep the anchors visible but faint. */
@media (hover: none) {
  .anchor-link { opacity: .5; }
}

/* ---------- Lab Guide: quiet "improve this page" footer note ----------
   Deliberately understated so it reads as a page utility, not a content
   callout: no fill, no colored bar, just small muted text with inline links. */
.guide-edit {
  margin: 1.4rem 0 .2rem;
  font-size: var(--step--1);
  color: var(--c-muted);
  line-height: 1.5;
}
.guide-edit__icon { margin-right: .3rem; opacity: .8; }
/* Put the actions on their own line, kept together, so they never split
   awkwardly against the sentence above. Each action and its separator stay
   glued so a "·" never starts a line. */
.guide-edit__links { display: block; margin-top: .35rem; }
.guide-edit__links a { white-space: nowrap; }
.guide-edit__links a:not(:last-child)::after {
  content: " ·";
  color: var(--c-muted);
}
.guide-edit a {
  color: var(--c-blue-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.guide-edit a:hover, .guide-edit a:focus-visible {
  color: var(--c-blue-700);
  border-bottom-color: currentColor;
}

/* ---------- Lab Guide sidebar: "Your journey" mini-path ---------- */
.wiki-journey { margin-top: 1.2rem; }
.journey--side {
  list-style: none;
  padding: 0;
  margin: .3rem 0 0;
  counter-reset: journey;
}
.journey--side > li {
  counter-increment: journey;
  position: relative;
  padding-left: 1.6rem;
  margin: 0;
}
/* the connecting line of the path */
.journey--side > li::after {
  content: "";
  position: absolute;
  left: .58rem;
  top: 1.5rem;
  bottom: -.15rem;
  width: 2px;
  background: var(--c-line);
}
.journey--side > li:last-child::after { display: none; }
/* The step label. Either a link (step 1 jumps to #start-here) or plain text
   when the step covers several guides, which are listed in .journey__links. */
.journey--side > li > a,
.journey--side > li > .journey__step {
  display: block;
  position: relative;
  padding: .28rem .4rem .1rem 0;
  font-size: .85rem;
  color: var(--c-ink);
  text-decoration: none;
  border-radius: 6px;
}
/* The number badge lives on the <li>, not on the label, so a step can hold
   several links without each one picking up its own numbered disc. */
.journey--side > li::before {
  content: counter(journey);
  position: absolute;
  left: 0;
  top: .2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--c-sky);
  color: var(--c-blue-700);
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.journey--side > li > a:hover, .journey--side > li > a:focus-visible { color: var(--c-blue-700); text-decoration: underline; }
.journey--side > li > a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The guides each step covers. */
.journey__links {
  display: block;
  padding: 0 .4rem .4rem 0;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--c-muted);
}
.journey__links a { color: var(--c-blue-700); text-decoration: none; }
.journey__links a:hover, .journey__links a:focus-visible { text-decoration: underline; }
.journey__links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Lab Guide hub: demoted stat line (was a prominent big-number bar up top) */
.guide-stats-line { margin-top: .8rem; font-size: var(--step--1); }

/* ---------- Lab Guide hub: two-column top with journey sidebar ---------- */
/* Tighten the hub's own vertical padding so the search/chips sit closer to the
   category results below. The journey panel and chips already give separation,
   so the full section rhythm isn't needed here. */
.guide-hub-section { padding-top: clamp(1.75rem, 3vw, 2.75rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
/* Pull the first category band up so results sit near the search box. */
.guide-hub-section + .section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* While searching, the chips are hidden (see below), so drop the hub's bottom
   padding too and let the results band sit right under the search box. */
.guide-hub-section:has(.guide-hub-top.is-searching) { padding-bottom: 0; }
.guide-hub-top { display: block; }
/* Searching state: hide navigation (journey panel + category chips) so only the
   search box and its hint remain, and the matching results rise up beneath it. */
.guide-hub-top.is-searching .guide-cats,
.guide-hub-top.is-searching .guide-hub-top__side { display: none; }
@media (min-width: 900px) {
  .guide-hub-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16.5rem;
    gap: 2.5rem;
    align-items: start;
  }
  .guide-hub-top__side { position: sticky; top: calc(var(--header-h) + 1rem); }
  /* Single column while searching, since the journey panel is hidden. */
  .guide-hub-top.is-searching { grid-template-columns: 1fr; }
}
.guide-journey-panel {
  background: var(--c-sky-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
  margin-top: 1.5rem;
}
@media (min-width: 900px) { .guide-journey-panel { margin-top: 0; } }
.guide-journey-panel h2 { font-size: var(--step-1); margin: 0 0 .2rem; }
.guide-journey-panel .muted { font-size: var(--step--1); margin: 0 0 .6rem; }

/* ---------- Lab Guide sidebar: nicer "All guide pages" list ---------- */
.wiki-nav li a { display: flex; align-items: center; gap: .55rem; }
.wiki-nav__i {
  flex: none;
  width: 1.25rem;
  text-align: center;
  font-size: .95rem;
  line-height: 1;
  opacity: .9;
}
.wiki-nav__t { min-width: 0; }
/* current page: a subtle left marker plus the existing tint */
.wiki-nav li a[aria-current="page"] {
  box-shadow: inset 2px 0 0 var(--c-blue-500);
  font-weight: 600;
}

/* ---------- Utilities ----------------------------------------------------
   Single home for the small spacing/type tweaks that used to live as inline
   style= on the page templates. Values map to the design scale and tokens, so
   moving a style here never changes how a page looks. Prefer an existing
   component class when one fits; reach for a utility only for one-off spacing.
   Naming: u-mt-NN = margin-top, u-my-NN = margin block (top+bottom),
   NN is the rem value x10 (12 = 1.2rem); "fluid" = the clamp() page rhythm. */
.u-fs-sm { font-size: var(--step--1); }
.u-fs-md { font-size: var(--step-1); }
.u-fs-lg { font-size: var(--step-2); }

.u-mt-02 { margin-top: .2rem; }
.u-mt-06 { margin-top: .6rem; }
.u-mt-09 { margin-top: .9rem; }
.u-mt-10 { margin-top: 1rem; }
.u-mt-11 { margin-top: 1.1rem; }
.u-mt-12 { margin-top: 1.2rem; }
.u-mt-14 { margin-top: 1.4rem; }
.u-mt-15 { margin-top: 1.5rem; }
.u-mt-16 { margin-top: 1.6rem; }
.u-mt-18 { margin-top: 1.8rem; }
.u-mt-24 { margin-top: 2.4rem; }
.u-mt-fluid { margin-top: clamp(2.5rem, 6vw, 4rem); }

.u-my-15 { margin: 1.5rem 0; }
.u-my-16 { margin: 1.6rem 0; }
.u-my-30 { margin: 3rem 0; }
.u-my-32 { margin: 3.2rem 0; }
.u-my-fluid { margin: clamp(2.5rem, 6vw, 4rem) 0; }
.u-mrow-24 { margin: 2.4rem 0 1.2rem; }
.u-mrow-16 { margin: 1.6rem 0 .4rem; }

.u-m0 { margin: 0; }
.u-mb0 { margin-bottom: 0; }
.u-mi-auto { margin-inline: auto; }
.u-self-start { align-self: start; }
.u-justify-start { justify-content: flex-start; }

.u-pb-30 { padding-block: 3rem; }
.u-pb-fluid { padding-block: clamp(1.5rem, 3vw, 2.75rem); }

/* Small variant of a button (the "Ask the lead" ghost button on Research). */
.btn--sm { padding: .4rem .9rem; font-size: var(--step--1); }

/* ---------- Print ----------
   Without this block the printed page silently LOSES content: .marginnote is
   floated with a negative right margin, so it lands off the paper, and any
   collapsed <details> stays collapsed. A student printing a Lab Guide page was
   getting neither. Here we strip the site chrome, un-float the margin notes back
   into the flow, and let the folds print open (main.js opens them on beforeprint,
   since CSS alone cannot reliably force a closed <details> to render). */
@media print {
  /* Site chrome that means nothing on paper. */
  .site-header, .site-footer, .wiki-side, .wiki-toc, .guide-edit,
  .breadcrumbs, .skip-link, .theme-toggle, .video-controls { display: none !important; }

  /* One full-width column. */
  .wiki-layout { display: block !important; grid-template-columns: 1fr !important; }
  .container { max-width: none; width: auto; padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }

  /* THE FIX: margin notes rejoin the text instead of floating off the sheet. */
  .marginnote {
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: .9rem 0 !important;
    page-break-inside: avoid; break-inside: avoid;
  }

  /* Folded sections print open, and lose the clickable pill styling. */
  details, .guide-details, .alumni-details, .press-details { display: block !important; }
  details > summary {
    border: 0 !important; background: none !important; padding: 0 0 .4rem !important;
    font-weight: 700; list-style: none;
  }
  details > summary::before { content: "" !important; }

  /* Don't split things that only make sense whole. */
  .callout, .marginnote, table, tr, figure, pre, .katex-display,
  mjx-container[display="true"] { page-break-inside: avoid; break-inside: avoid; }
  h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; }

  /* Keep the callout colour bars legible in greyscale. */
  .callout { border: 1px solid #999 !important; border-left-width: 4px !important; }
  a { color: #000; text-decoration: underline; }
}

/* ---------- Announcement bar (one-off notices; driven by _data/announcement.yml) ----------
   Sits just below the sticky header on every page and scrolls away with the
   content. Colours reuse the navy/on-navy pairing from the hero and footer,
   and the green pill matches .status--active, both already WCAG AA. */
.announce { background: var(--c-navy); color: var(--c-on-navy); border-bottom: 1px solid var(--c-blue-700); }
.announce__inner { display: flex; align-items: center; gap: .8rem; padding-block: .6rem; }
.announce__text { margin: 0; font-size: var(--step--1); line-height: 1.5; }
.announce__pill {
  display: inline-block; background: #e6f3ea; color: #2e6b43;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: .1rem .55rem; margin-right: .35rem; vertical-align: middle;
}
.announce__link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; margin-left: .25rem; }
.announce__link:hover { color: var(--c-sky); }
.announce__close {
  margin-left: auto; flex: none; background: none; border: 0; cursor: pointer;
  color: var(--c-on-navy); padding: .4rem; border-radius: 6px; line-height: 0;
}
.announce__close:hover { background: var(--c-blue-700); color: #fff; }
.announce__close svg { width: 15px; height: 15px; }

/* Join — featured one-off opening (anchor target of the announcement bar) */
.opening-featured {
  display: grid; grid-template-columns: 1fr auto; gap: 1.2rem 1.8rem; align-items: start;
  margin-top: 1.5rem; padding: 1.5rem 1.6rem;
  background: var(--c-paper); border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue-600);
  border-radius: var(--radius); box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.opening-featured .status { margin-bottom: .2rem; }
.opening-featured h3 { margin: .35rem 0 .5rem; font-size: var(--step-1); }
.opening-featured p { margin-bottom: .8rem; }
.opening-featured__deadline { font-weight: 600; color: var(--c-navy); }
.opening-featured__flyer { margin: 0; max-width: 250px; }
.opening-featured__flyer img { width: 100%; height: auto; border: 1px solid var(--c-line); border-radius: 8px; box-shadow: var(--shadow); }
.opening-featured__flyer figcaption { font-size: var(--step--1); color: var(--c-muted); margin-top: .4rem; text-align: center; }
@media (max-width: 700px) {
  .opening-featured { grid-template-columns: 1fr; }
  .opening-featured__flyer { max-width: 320px; margin-inline: auto; }
}
@media print { .announce { display: none !important; } }

/* ---------- Guide: staged protocol diagram (e.g. Zuur data-exploration steps) ---------- */
/* Real text, not an image: screen-reader readable, searchable, and sharp at any zoom.
   Add or reword a step by editing the markup in the guide page. */
.protocol-fig { margin: 1.6rem 0; }
.protocol-fig figcaption { font-size: var(--step--1); color: var(--c-muted); margin-top: .5rem; }
.protocol {
  margin: 0; border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-paper); box-shadow: var(--shadow); overflow: hidden;
}
.protocol__stage { display: grid; grid-template-columns: 3rem 1fr; align-items: stretch; }
.protocol__stage + .protocol__stage { border-top: 1px solid var(--c-line); }
.protocol__num {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 600;
  color: var(--c-muted); background: var(--c-sky); border-right: 1px solid var(--c-line);
}
.protocol__body { padding: 1rem 1.2rem; }
.protocol__stage--main .protocol__body { padding-bottom: 1.2rem; }
.protocol__title {
  font-family: var(--font-display); font-weight: 600; color: var(--c-navy);
  font-size: var(--step-0); margin: 0;
}
.protocol__stage--main .protocol__title { font-size: var(--step-1); margin-bottom: .7rem; }
.protocol__steps { list-style: none; margin: 0; padding: 0; counter-reset: protostep; }
/* Exactly three grid items per row: the ::before counter, .what and .tool.
   Any bare text node inside the <li> would become a fourth (anonymous) item
   and wrap the row, so both label and tool must stay wrapped in spans. */
.protocol__steps li {
  display: grid; grid-template-columns: 1.6rem minmax(8ch, 1fr) minmax(0, auto);
  gap: .15rem .9rem; align-items: baseline; padding: .45rem 0; font-size: var(--step--1);
}
.protocol__steps li + li { border-top: 1px dashed var(--c-line); }
.protocol__steps li::before {
  counter-increment: protostep; content: counter(protostep) ".";
  color: var(--c-muted); font-variant-numeric: tabular-nums;
}
.protocol__steps .what { text-wrap: pretty; }
.protocol__steps b { font-weight: 600; color: var(--c-ink); }
.protocol__steps .tool {
  color: var(--c-muted); font-style: italic; text-align: right; text-wrap: pretty;
}
@media (max-width: 640px) {
  .protocol__steps li { grid-template-columns: 1.6rem 1fr; gap: .1rem .6rem; }
  .protocol__steps .tool { grid-column: 2; text-align: left; }
}