/* tokens/fonts.css */
/* Biosceptre — webfonts.
   The website loads both families from Google Fonts. No self-hosted binaries were
   supplied with the source material, so this design system loads them the same way.
   If Biosceptre licenses self-hosted copies, drop the .woff2 files into
   assets/fonts/ and replace this import with @font-face rules. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* tokens/colors.css */
/* Biosceptre — colour tokens
   Base values taken verbatim from the website stylesheet; semantic aliases added
   by this design system so consumers reference intent, not hex. */

:root {
  /* ---- Base palette ---- */
  --navy: #0F2C57;        /* primary brand navy — headings, buttons, footer, strip */
  --navy-900: #0A1F3E;    /* pressed / hover state for navy surfaces */
  --navy-050: #EDF1F7;    /* tinted navy wash — nav hover, table head, quiet sections */
  --blue: #40B1DE;        /* accent cyan — the only bright colour in the system */
  --blue-050: #E8F5FB;    /* accent wash — callouts, hero glow */
  --blue-100: #D2ECF6;    /* accent chip fill — hero overline */
  --logo-blue: #3376BD;   /* wordmark blue, as supplied in the deck lock-up */

  --charcoal: #44474D;    /* body copy inside cards and captions */
  --ink: #16181D;         /* default body text */
  --muted: #6B7079;       /* qualifiers, kickers, metadata */

  --paper: #FAFAF7;       /* page background — warm off-white, not pure grey */
  --card: #FFFFFF;        /* raised surface */
  --rule: #E4E6EA;        /* hairline borders, table rules */
  --rule-strong: #C7CBD1; /* pill borders, breadcrumb separators */

  --accent-amber: #B85400; /* flags, review notices */
  --accent-green: #2E7D5B; /* confirmed in vivo, positive outcome */

  /* ---- Semantic aliases ---- */
  --text-body: var(--ink);
  --text-secondary: var(--charcoal);
  --text-muted: var(--muted);
  --text-heading: var(--navy);
  --text-accent: var(--blue);
  --text-on-navy: #FFFFFF;
  --text-on-navy-muted: #C9D3E4;
  --text-on-navy-quiet: #A9B4C7;

  --surface-page: var(--paper);
  --surface-card: var(--card);
  --surface-quiet: var(--navy-050);
  --surface-accent: var(--blue-050);
  --surface-inverse: var(--navy);

  --border-default: var(--rule);
  --border-strong: var(--rule-strong);
  --border-inverse: rgba(255, 255, 255, 0.15);

  --action-bg: var(--navy);
  --action-bg-hover: var(--navy-900);
  --action-fg: #FFFFFF;
  --action-ghost-fg: var(--navy);
  --action-ghost-bg-hover: var(--navy-050);

  --focus-ring: var(--blue);
  --link-underline: var(--blue);

  /* ---- Status colours: programme stage ---- */
  --stage-discovery-bg: #F1F2F5;        --stage-discovery-fg: #4A4E56;        --stage-discovery-border: #D8DBE0;
  --stage-platform-bg: #EFF1F7;         --stage-platform-fg: #4A5D8A;         --stage-platform-border: #C7D2E4;
  --stage-preclinical-bg: #E8F5FB;      --stage-preclinical-fg: #245C7B;      --stage-preclinical-border: #B7DCEE;
  --stage-poc-bg: #EAF3EC;              --stage-poc-fg: #275C41;              --stage-poc-border: #BFDCC7;
  --stage-phase1-bg: #FFF3E1;           --stage-phase1-fg: #7A4A00;           --stage-phase1-border: #F1D2A2;

  /* ---- Status colours: adaptor status ---- */
  --adaptor-invitro-bg: #E8F5FB;        --adaptor-invitro-fg: #245C7B;        --adaptor-invitro-border: #B7DCEE;
  --adaptor-invivo-bg: #EAF3EC;         --adaptor-invivo-fg: #275C41;         --adaptor-invivo-border: #BFDCC7;
  --adaptor-indev-bg: #F1F2F5;          --adaptor-indev-fg: #4A4E56;          --adaptor-indev-border: #D8DBE0;

  /* ---- Review flag ---- */
  --flag-bg: #FFF3E1;
  --flag-fg: var(--accent-amber);
  --flag-border: #F1D2A2;
  --flag-surface: #FFF6EA;

  /* ---- Scientific diagram palette (figures only, never UI) ---- */
  --dia-tcell-fill: #EAF3FB;
  --dia-tcell-line: #245C7B;
  --dia-tumour-fill: #F4C7C1;
  --dia-tumour-line: #B84A3A;
  --dia-membrane: #DDE4EE;
  --dia-membrane-alt: #F4DDD9;
}

/* tokens/typography.css */
/* Biosceptre — typography tokens
   Two families only: Inter for everything, JetBrains Mono for labels and metadata.
   The mono face is a signalling device, not a code face — see readme.md. */

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Semantic aliases */
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-label: var(--font-mono);   /* kickers, pills, qualifiers, table heads */

  /* Fluid scale — clamp() pairs, verbatim from the website stylesheet */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem); /* @kind other */ /* qualifiers, kickers */
  --step-0:  clamp(0.94rem, 0.90rem + 0.20vw, 1.02rem); /* @kind other */ /* body */
  --step-1:  clamp(1.10rem, 1.03rem + 0.35vw, 1.24rem); /* @kind other */ /* lede, h4 */
  --step-2:  clamp(1.32rem, 1.20rem + 0.60vw, 1.55rem); /* @kind other */ /* h3 */
  --step-3:  clamp(1.62rem, 1.42rem + 1.00vw, 2.05rem); /* @kind other */ /* h2, stat value */
  --step-4:  clamp(2.00rem, 1.70rem + 1.50vw, 2.80rem); /* @kind other */ /* inner-page h1 */
  --step-5:  clamp(2.50rem, 2.00rem + 2.50vw, 3.75rem); /* @kind other */ /* home h1 */

  /* Weights — 700 exists in the webfont but is not used in UI */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-heading: 1.15;
  --leading-lede: 1.5;
  --leading-body: 1.55;
  --leading-tight: 1.4;

  /* Tracking */
  --tracking-display: -0.025em;  /* h1 */
  --tracking-heading: -0.015em;  /* h2–h4 */
  --tracking-label: 0.08em;      /* uppercase mono kickers */
  --tracking-label-tight: 0.06em;/* uppercase mono table heads */
  --tracking-pill: 0.04em;

  /* Measure */
  --measure-body: 68ch;
  --measure-lede: 62ch;
  --measure-heading: 22ch;
}

/* tokens/spacing.css */
/* Biosceptre — spacing and layout tokens.
   The site spaces vertically with a five-step "stack" scale and one fluid gutter.
   There is no 4/8px grid; use these names rather than raw values. */

:root {
  --gutter: clamp(1rem, 2vw, 2rem); /* @kind spacing */ /* page inset, both sides of .wrap */

  --stack-s: 0.5rem;   /* label to value */
  --stack-m: 1rem;     /* paragraph rhythm, action rows */
  --stack-l: 2rem;     /* block to block inside a section */
  --stack-xl: 4rem;    /* section padding, top and bottom */
  --stack-xxl: 6rem;   /* page tail before the footer */

  /* Container widths */
  --measure-page: 1200px;
  --measure-page-narrow: 820px;
  --rail-width: 220px;      /* anchor nav rail */
  --sticky-offset: 74px;    /* sticky nav height, for anchor-nav top */
  --scroll-margin: 80px;    /* scroll-margin-top on anchored sections */

  /* Component padding (as used, not rounded) */
  --pad-card: 1.25rem;
  --pad-cell: 0.9rem 1rem;         /* table cell */
  --pad-button: 0.75rem 1.1rem;
  --pad-nav-item: 0.55rem 0.75rem;
  --pad-pill: 0.2rem 0.55rem;
  --pad-figure: 1.5rem;
}

/* tokens/elevation.css */
/* Biosceptre — borders, radii, shadow and motion tokens.
   The system is border-led: almost every surface is defined by a 1px hairline,
   not by a shadow. Shadows exist but are barely used on the website. */

:root {
  --radius: 4px;         /* buttons, nav items, inputs, flags */
  --radius-lg: 8px;      /* cards, tables, figures, callouts */
  --radius-pill: 999px;  /* status pills, hero overline */
  --radius-xs: 3px;      /* inline flags, stage bar dots */

  --border-width: 1px;
  --border-accent-width: 3px; /* callout left edge */

  --shadow-1: 0 1px 2px rgba(15, 44, 87, 0.06), 0 1px 3px rgba(15, 44, 87, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 44, 87, 0.08);
  --shadow-none: none;

  /* Blur — used only on the sticky top bar */
  --backdrop-topbar: saturate(160%) blur(8px); /* @kind other */
  --topbar-bg: rgba(250, 250, 247, 0.94);

  /* Motion — short, linear-ish, no bounce anywhere in the system */
  --ease: ease; /* @kind other */
  --duration-fast: 0.15s; /* @kind other */
  --transition-nudge: transform 0.15s ease; /* @kind other */ /* arrow glyph on button hover */

  /* Focus */
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* base/reset.css */
/* Biosceptre design system — reset
   Extracted verbatim from the Biosceptre website stylesheet (build 1, August 2026). */

/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
/* base/typography.css */
/* Biosceptre design system — base typography
   Extracted verbatim from the Biosceptre website stylesheet (build 1, August 2026). */

/* -------- Base -------- */
body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  font-weight: 600;
}
h1 { font-size: var(--step-5); letter-spacing: -0.025em; font-weight: 500; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1em; max-width: 68ch; }
p.lede { font-size: var(--step-1); color: var(--charcoal); max-width: 62ch; line-height: 1.5; }

a { color: var(--navy); text-decoration-color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--blue); }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--stack-l) 0; }

code, kbd { font-family: var(--font-mono); font-size: 0.9em; color: var(--charcoal); }
/* base/layout.css */
/* Biosceptre design system — layout
   Extracted verbatim from the Biosceptre website stylesheet (build 1, August 2026). */

/* -------- Layout -------- */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: 820px; }

section { padding: var(--stack-xl) 0; }
section + section { border-top: 1px solid var(--rule); }
.section-title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: var(--stack-l);
}
.section-title .kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.grid { display: grid; gap: var(--stack-l); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--stack-xl);
  align-items: start;
}
@media (max-width: 780px) {
  .two-col { grid-template-columns: 1fr; gap: var(--stack-l); }
}
/* base/components.css */
/* Biosceptre design system — component classes
   Extracted verbatim from the Biosceptre website stylesheet (build 1, August 2026). */

/* -------- Top nav -------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar-inner {
  display: flex; align-items: center; gap: 2rem;
  padding: 0.85rem 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--navy);
  font-weight: 600; letter-spacing: -0.01em;
}
.brand svg { width: 26px; height: 26px; }
.brand-name { font-size: 1.02rem; }

.nav {
  display: flex; gap: 0.25rem; margin-left: auto;
  flex-wrap: wrap;
}
.nav a {
  padding: 0.55rem 0.75rem;
  text-decoration: none;
  color: var(--charcoal);
  font-size: 0.93rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.nav a:hover { color: var(--navy); background: var(--navy-050); }
.nav a[aria-current="page"] {
  color: var(--navy);
  background: var(--navy-050);
  border-color: var(--rule);
}
.nav-cta {
  margin-left: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff !important;
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
}
.nav-cta:hover { background: var(--navy-900); }

.nav-toggle {
  display: none;
  margin-left: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  padding: 0.4rem 0.6rem;
  color: var(--navy);
}
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card); border-bottom: 1px solid var(--rule);
    padding: 1rem var(--gutter);
    gap: 0.25rem;
  }
  .nav.is-open a { padding: 0.7rem 0.75rem; }
  .nav.is-open .nav-cta { margin: 0.5rem 0 0; }
}

/* -------- Hero (home) -------- */
.hero {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0 var(--stack-xl);
  border-bottom: 1px solid var(--rule);
  background: #0A1F3E url("assets/imagery/hero-tcell-tumour-blue.jpg") center / cover no-repeat;
  color: #FFFFFF;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,31,62,0.92) 0%, rgba(10,31,62,0.86) 42%, rgba(10,31,62,0.40) 78%, rgba(10,31,62,0.10) 100%);
}
.hero .overline {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: #FFFFFF;
  background: rgba(255,255,255,0.14);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
}
.hero h1 { max-width: 20ch; margin-bottom: 0.4em; color: #FFFFFF; }
.hero .lede { max-width: 62ch; color: #C9D3E4; }

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-top: var(--stack-m);
}
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
}
.btn:hover { background: var(--navy-900); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy-050); color: var(--navy); }
.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(2px); }
.hero .btn { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
.hero .btn:hover { background: #D2ECF6; color: var(--navy); }
.hero .btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.45); }
.hero .btn--ghost:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; }

/* -------- Page header (non-home) -------- */
.pageheader {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 var(--stack-l);
  border-bottom: 1px solid var(--rule);
  background: #0A1F3E url("assets/imagery/hero-tcell-tumour-blue.jpg") center / cover no-repeat;
  color: #FFFFFF;
  isolation: isolate;
}
.pageheader::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,31,62,0.92) 0%, rgba(10,31,62,0.86) 42%, rgba(10,31,62,0.40) 78%, rgba(10,31,62,0.10) 100%);
}
.pageheader .kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: #D2ECF6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.pageheader h1 { font-size: var(--step-4); max-width: 22ch; color: #FFFFFF; }
.pageheader .lede { color: #C9D3E4; }
.pageheader .breadcrumbs,
.pageheader .breadcrumbs a { color: #9FB4D4; }
.pageheader .breadcrumbs a:hover { color: #FFFFFF; }
.pageheader .breadcrumbs span { color: rgba(255,255,255,0.35); }
.breadcrumbs {
  font-size: 0.88rem; color: var(--muted); margin-bottom: 0.75rem;
}
.breadcrumbs a { text-decoration: none; color: var(--muted); }
.breadcrumbs a:hover { color: var(--navy); }
.breadcrumbs span { color: var(--rule-strong); margin: 0 0.4rem; }

/* -------- Stage strip (home) -------- */
.strip {
  background: var(--navy);
  color: #fff;
  padding: 1.1rem 0;
}
.strip-inner {
  display: flex; gap: 1.5rem;
  align-items: center; flex-wrap: wrap;
  font-size: 0.95rem;
}
.strip .strip-label {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.78rem; color: var(--blue-100);
}
.strip a { color: #fff; }

/* -------- Cards / boxes -------- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.25rem;
}
.card h3, .card h4 { margin-bottom: 0.35em; }
.card p { color: var(--charcoal); }

.card-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.card-list li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.card-list li:last-child { border-bottom: 0; }

/* -------- Stat proof rows -------- */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}
.proof > div {
  padding: 1.2rem 1.25rem;
  border-right: 1px solid var(--rule);
}
.proof > div:last-child { border-right: 0; }
@media (max-width: 700px) {
  .proof > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .proof > div:last-child { border-bottom: 0; }
}
.proof .val {
  font-size: var(--step-3);
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.proof .meta {
  color: var(--charcoal);
  font-size: 0.92rem;
  line-height: 1.45;
}
.proof .qual {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: 0.5rem;
  display: block;
  line-height: 1.4;
}

/* -------- Table (pipeline, adaptor library) -------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.95rem;
}
.data-table th, .data-table td {
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.data-table thead th {
  background: var(--navy-050);
  font-weight: 500;
  color: var(--navy);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--navy-050); }
.data-table td a { text-decoration: none; }
.data-table td a:hover { text-decoration: underline; }

/* Responsive table -> cards on narrow */
@media (max-width: 720px) {
  .data-table thead { display: none; }
  .data-table tr {
    display: block;
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem 0;
  }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table td {
    display: block; padding: 0.35rem 1rem; border: 0;
  }
  .data-table td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 8rem;
    font-family: var(--font-mono); font-size: 0.75rem;
    text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em;
    margin-right: 0.5rem;
  }
}

/* -------- Status pills -------- */
.pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  border: 1px solid var(--rule-strong);
  color: var(--charcoal);
  background: var(--card);
  white-space: nowrap;
}
.pill--discovery       { background: #F1F2F5; color: #4A4E56; border-color: #D8DBE0; }
.pill--platform-rd     { background: #EFF1F7; color: #4A5D8A; border-color: #C7D2E4; }
.pill--preclinical     { background: #E8F5FB; color: #245C7B; border-color: #B7DCEE; }
.pill--proof-of-concept{ background: #EAF3EC; color: #275C41; border-color: #BFDCC7; }
.pill--phase-1-ready   { background: #FFF3E1; color: #7A4A00; border-color: #F1D2A2; }

.pill--in-vitro        { background: #E8F5FB; color: #245C7B; border-color: #B7DCEE; }
.pill--in-vivo         { background: #EAF3EC; color: #275C41; border-color: #BFDCC7; }
.pill--in-development  { background: #F1F2F5; color: #4A4E56; border-color: #D8DBE0; }

/* -------- Stage progress bar (pipeline row) -------- */
.stagebar {
  display: flex; gap: 3px; align-items: center;
  min-width: 140px;
}
.stagebar .dot {
  width: 22px; height: 6px; background: var(--rule);
  border-radius: 3px;
}
.stagebar .dot.on { background: var(--blue); }
.stagebar .dot.on.lead { background: var(--navy); }

/* -------- Figure captions -------- */
figure {
  margin: 0 0 var(--stack-l);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
figure .figure-body {
  padding: 1rem 1rem 0.25rem;
}
figure .figure-svg-frame,
figure .figure-placeholder {
  padding: 1.5rem;
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--rule);
}
figure .figure-svg-frame { background: #FFFFFF; }
figure .figure-placeholder {
  background: repeating-linear-gradient(-45deg, #F5F6F9, #F5F6F9 8px, #EEF0F4 8px, #EEF0F4 16px);
}
figure svg,
figure img { max-width: 100%; height: auto; }
figure figcaption {
  padding: 0.85rem 1rem 1.1rem;
  font-size: 0.9rem;
  color: var(--charcoal);
  border-top: 1px solid var(--rule);
  background: transparent;
}
figure figcaption .fig-num {
  font-family: var(--font-mono); font-weight: 600; color: var(--navy);
  margin-right: 0.5rem;
}
figure figcaption .meta-line {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
}
figure figcaption .flag {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.15rem 0.45rem;
  background: #FFF3E1;
  color: var(--accent-amber);
  border: 1px solid #F1D2A2;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  border-radius: 3px;
}

/* Placeholder for data figures awaiting scientific review */
.figure-placeholder .placeholder-inner {
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  max-width: 40ch;
  line-height: 1.5;
}
.figure-placeholder .placeholder-inner strong {
  display: block; color: var(--navy);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

/* -------- Diagram frame (mechanism diagrams, no data) -------- */
.diagram {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  overflow: hidden;
}

/* -------- Anchor nav (platform-page left rail) -------- */
.anchor-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--stack-xl);
  align-items: start;
}
@media (max-width: 900px) {
  .anchor-layout { grid-template-columns: 1fr; gap: var(--stack-l); }
}
.anchor-nav {
  position: sticky;
  top: 74px;
  border-left: 1px solid var(--rule);
  padding: 0.25rem 0 0.25rem 0.9rem;
}
.anchor-nav .anchor-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.anchor-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.anchor-nav a {
  display: block; text-decoration: none;
  color: var(--charcoal); font-size: 0.92rem;
  padding: 0.2rem 0;
}
.anchor-nav a:hover { color: var(--navy); }
@media (max-width: 900px) {
  .anchor-nav {
    position: static; border-left: 0;
    padding: 0 0 var(--stack-m);
    border-bottom: 1px solid var(--rule);
  }
  .anchor-nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .anchor-nav a { padding: 0.35rem 0.7rem; border: 1px solid var(--rule); border-radius: 999px; }
}

.section-block { padding-top: var(--stack-l); scroll-margin-top: 80px; }
.section-block + .section-block { margin-top: var(--stack-xl); border-top: 1px solid var(--rule); }

/* -------- Feature list (three-column) -------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1.5rem;
  margin: var(--stack-m) 0;
}
.feature {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
}
.feature .fnum {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--blue); letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.feature h4 { margin-bottom: 0.3em; }
.feature p { margin: 0; color: var(--charcoal); font-size: 0.94rem; }

/* -------- People (leadership, SAB) -------- */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.25rem;
}
.person {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem 1.35rem;
  background: var(--card);
}
.person:hover, .person:focus-within { border-color: var(--blue); }
.person .name { font-weight: 600; color: var(--navy); font-size: 1.3rem; line-height: 1.25; }
.person .title { color: var(--charcoal); font-size: 1.02rem; margin-top: 0.3rem; }
.person .bio {
  margin: 0;
  color: var(--charcoal);
  font-size: 0.92rem;
  line-height: 1.55;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
}
.person:hover .bio, .person:focus-within .bio { max-height: 26em; opacity: 1; margin-top: 0.85rem; }
.person .xref {
  display: inline-block; margin-top: 0.75rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--muted);
}

/* -------- Callout / notice -------- */
.callout {
  border-left: 3px solid var(--blue);
  background: var(--blue-050);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--charcoal);
  font-size: 0.94rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout--warn {
  border-left-color: var(--accent-amber);
  background: #FFF6EA;
}
.callout--muted {
  border-left-color: var(--rule-strong);
  background: var(--card);
}

.flag-inline {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  background: #FFF3E1;
  color: var(--accent-amber);
  border: 1px solid #F1D2A2;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  border-radius: 3px;
  vertical-align: middle;
}

/* -------- Publications -------- */
.pub-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.pub-list li {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}
.pub-list .pub-meta {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 0.3rem;
}
.pub-list .pub-title { color: var(--navy); font-weight: 500; }
.pub-list .pub-authors { color: var(--charcoal); font-size: 0.92rem; margin-top: 0.25rem; }
.pub-list .pub-doi { color: var(--muted); font-family: var(--font-mono); font-size: 0.82rem; margin-top: 0.3rem; }

/* -------- Contact -------- */
.contact-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.contact-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.contact-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.contact-card p { margin: 0 0 0.4rem; font-size: 0.94rem; color: var(--charcoal); }
.contact-card a { font-family: var(--font-mono); font-size: 0.92rem; }

/* -------- Footer -------- */
footer.site-footer {
  margin-top: var(--stack-xxl);
  background: var(--navy);
  color: #C9D3E4;
  padding: var(--stack-xl) 0 var(--stack-l);
  font-size: 0.92rem;
  line-height: 1.55;
}
footer.site-footer a { color: #FFFFFF; text-decoration-color: var(--blue); }
footer.site-footer h4 {
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--stack-l);
  margin-bottom: var(--stack-l);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.footer-grid ul a { text-decoration: none; }
.footer-grid ul a:hover { text-decoration: underline; }

.footnotes {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: var(--stack-l);
  color: #A9B4C7;
  font-size: 0.82rem;
  line-height: 1.6;
}
.footnotes h4 { color: #FFFFFF; margin-bottom: 0.5rem; }
.footnotes ol { padding-left: 1.2rem; margin: 0; display: grid; gap: 0.35rem; }
.footnotes code { color: #FFFFFF; }

.legal {
  margin-top: var(--stack-l);
  padding-top: var(--stack-m);
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.8rem;
  color: #A9B4C7;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
}
/* base/utilities.css */
/* Biosceptre design system — focus, skip link, utilities
   Extracted verbatim from the Biosceptre website stylesheet (build 1, August 2026). */

/* -------- Focus states -------- */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -------- Skip link -------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  padding: 0.6rem 1rem; background: var(--navy); color: #fff; z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* -------- Utility -------- */
.text-muted { color: var(--muted); }
.text-mono { font-family: var(--font-mono); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-l { margin-top: var(--stack-l); }
.mt-xl { margin-top: var(--stack-xl); }
/* -------- Mono label carrying a product mark --------
   BRiDGECAR and BRiDGE must keep their literal casing, so any kicker, label or
   overline containing a product mark takes this modifier instead of uppercase. */
.kicker--mark, .anchor-label--mark,
.pageheader .kicker--mark, .hero .overline--mark,
.anchor-nav .anchor-label--mark, .section-title .kicker--mark { text-transform: none; letter-spacing: 0.06em; }

/* -------- Person card post-nominals --------
   Honours and qualifications sit under the role in mono, one step quieter. */
.person .post-nominals { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.5; color: var(--muted); margin-top: 0.35rem; }