/*
 * CIRN Theme — Design System
 * Ported 1:1 from the HTML prototype.
 * Colors: Deep Ocean #142F70 · Forest Green #2E933C · Cardinal Red #AA1F1F · Charcoal #1C1C1C · cream #F4F3EE
 * Type: Mundial (headings), Inter (body)
 *
 * Layers (top → bottom): reset → tokens → base/typography → layout (l-*)
 * → components (c-*, shared with existing BEM blocks) → page/feature blocks → utilities → responsive.
 */

/* investigators: client-side hide */
.investigator-card.is-hidden,
.investigator-group.is-hidden {
  display: none;
}

/* ── LANGUAGE SYSTEM ── */
[data-lang="en"] .lang-fr {
  display: none !important;
}
[data-lang="fr"] .lang-en {
  display: none !important;
}

/* Block-prose wrappers (cirn_esc_lang_rich) — collapse outer paragraph margins
   so autop'd <p> spacing matches the previous single-block rendering. Scoped to
   div.lang-* so inline span.lang-* content is unaffected. */
div.lang-en > p:first-child,
div.lang-fr > p:first-child {
  margin-top: 0;
}
div.lang-en > p:last-child,
div.lang-fr > p:last-child {
  margin-bottom: 0;
}

/* ── RESET ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── DESIGN TOKENS ── */
:root {
  --navy: #142f70;
  --green: #2e933c;
  --red: #aa1f1f;
  --char: #1c1c1c;
  --white: #ffffff;
  --cream: #f4f3ee;
  --border: #ddddd7;

  /* Heading ink — navy on light surfaces; dark surfaces reset this to white */
  --heading-color: var(--navy);

  --green-light: color-mix(in oklch, var(--green) 65%, white);
  --red-light: color-mix(in oklch, var(--red) 65%, white);
  /* Pale tints — for subtle fills, tag backgrounds, hover surfaces */
  --navy-pale: color-mix(in oklch, var(--navy) 10%, white);
  --green-pale: color-mix(in oklch, var(--green) 10%, white);
  --red-pale: color-mix(in oklch, var(--red) 10%, white);
  /* Dark shades — for hover/active on solid-color elements */
  --navy-dark: color-mix(in oklch, var(--navy) 85%, black);
  /* Hero / page-header scrim base (see DESIGN.md) */
  --navy-deep: color-mix(in oklch, var(--navy) 80%, black);
  --green-dark: color-mix(in oklch, var(--green) 85%, black);
  --red-dark: color-mix(in oklch, var(--red) 85%, black);
  --navy-12: rgba(20, 47, 112, 0.12);
  --navy-24: rgba(20, 47, 112, 0.24);
  --white-72: rgba(255, 255, 255, 0.72);
  --white-88: rgba(255, 255, 255, 0.88);

  --g: 64px;
  /* Served by Adobe Fonts (Typekit): https://use.typekit.net/pxk5uhd.css */
  --fh: "mundial", sans-serif;
  --fb:
    "inter-18pt", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --nav-h: 66px;
  /* WP admin bar height — html gets margin-top; fixed nav must match */
  --wp-admin-bar: 0px;
  /* Typography / UI text */
  --text-body: #555;
  --text-muted: #666;
  --text-soft: #777;
  --text-faint: #888;
  --text-placeholder: #999;
  --leading-snug: 1.6;
  --leading-body: 1.65;
  --leading-relaxed: 1.68;
  --leading-loose: 1.7;
  /* Card surface system */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --card-radius: 16px;
  --card-gap: 18px;
  --card-pad: clamp(20px, 2.4vw, 28px);
  --card-border-color: color-mix(in oklch, var(--navy) 8%, transparent);
  --card-shadow: 0 18px 44px -22px
    color-mix(in oklch, var(--navy) 40%, transparent);
  --card-shadow-hover: 0 28px 54px -22px
    color-mix(in oklch, var(--navy) 50%, transparent);
}
body.admin-bar {
  --wp-admin-bar: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar {
    --wp-admin-bar: 46px;
  }
}

/* ── BASE ── */
html {
  font-size: 16px;
}
body {
  font-family: var(--fb);
  color: var(--char);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── TYPOGRAPHY ── */
h1,
h2,
h3,
h4 {
  font-family: var(--fh);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--heading-color);
}
p {
  line-height: 1.68;
}
a {
  color: inherit;
  text-decoration: none;
}

.label {
  font-family: var(--fb);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.label--navy {
  color: var(--navy);
}
.label--green {
  color: var(--green);
}
.label--ghost {
  color: rgba(255, 255, 255, 0.45);
}
.label--muted {
  color: var(--text-placeholder);
}

/* ── LAYOUT — content shell (max width + horizontal gutter) ── */
.wrap,
.l-shell,
.nav__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--g);
}

/*
 * Semantic alias classes (use alongside existing BEM blocks in PHP):
 * .c-section — vertical section band (with .sec)
 * .c-section--cream | --navy | --green | --char — surface modifiers (with .sec--*)
 * .l-shell — max-width + horizontal gutter (with .wrap or .nav__inner)
 * .c-card / .c-card-grid — rounded soft card surface + gapped grid (see docs/design/card-surface-system.md)
 * .c-page-intro — two-column intro block (with .studies-intro / .pub-intro)
 * .c-sec-hd — section header row (with .sec__hd)
 * .c-editorial-split — full-bleed or contained image + copy split (with .editorial-split)
 */

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  top: -999px;
  left: 0;
  background: var(--navy);
  color: var(--white);
  padding: 8px 16px;
  font-size: 13px;
  /* Above fixed nav + Leaflet when focused */
  z-index: 20000;
}
.skip-link:focus {
  top: var(--wp-admin-bar);
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.nav {
  position: fixed;
  top: var(--wp-admin-bar);
  left: 0;
  right: 0;
  /* Leaflet map panes use high z-index; keep site chrome above them */
  z-index: 5000;
  height: var(--nav-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.nav__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav__logo img {
  display: block;
  height: 36px;
  width: auto;
  max-width: min(300px, 46vw);
  object-fit: contain;
}
/* The full lockup carries the spelled-out name, so it only goes in once the bar
   is wide enough to seat it beside the links — below that the acronym lockup
   takes over rather than pushing the links onto a second row. The threshold is
   set by French, which runs both the wider mark and the longer link labels; one
   breakpoint for both languages keeps them showing the same lockup at the same
   window size. */
.nav__logo .cirn-logo--full {
  display: none;
}
@media (min-width: 1400px) {
  .nav__logo .cirn-logo--short {
    display: none;
  }
  .nav__logo .cirn-logo--full {
    display: block;
    max-width: none;
  }
}
.nav__links {
  display: flex;
  list-style: none;
  align-items: center;
}
.nav__links li a {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 16px;
  position: relative;
  transition: color 0.15s;
  letter-spacing: 0.01em;
}
.nav__links li a:hover,
.nav__links li a.active {
  color: var(--navy);
}
/* Top-level singleton links only (dropdown triggers use .nav-dd__toggle + ::before caret / ::after bar) */
.nav__links > li:not(.nav-dd) > a.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--navy);
}

/* Dropdown nav (hover + keyboard focus) */
.nav__links .nav-dd {
  position: relative;
}
.nav__links .nav-dd__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Caret (must not use ::after — it conflicts with section-active underline on the same anchor) */
.nav__links .nav-dd__toggle::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  transform: translateY(1px);
  flex-shrink: 0;
  order: 1;
}
/* Same 2px bar as plain nav links: current section, or while menu is hovered / focus-within */
.nav__links .nav-dd__toggle.active::after,
.nav__links .nav-dd:hover > .nav-dd__toggle::after,
.nav__links .nav-dd:focus-within > .nav-dd__toggle::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--navy);
}
.nav__links .nav-dd__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  margin: 0;
  padding: 8px 0;
  list-style: none;
  z-index: 6000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s linear 0.16s;
}
.nav__links .nav-dd__menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav__links .nav-dd:hover > .nav-dd__menu,
.nav__links .nav-dd:focus-within > .nav-dd__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.nav__links .nav-dd__menu li a {
  padding: 10px 14px;
  color: var(--char);
  font-weight: 500;
}
.nav__links .nav-dd__menu li a:hover {
  background: var(--cream);
}
.nav__links .nav-dd__menu--sub {
  top: -8px;
  left: calc(100% - 6px);
  min-width: 220px;
}
.nav__links .nav-dd__group {
  position: relative;
}
.nav__links .nav-dd__group > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.nav__links .nav-dd__group > a::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  opacity: 0.55;
}
.nav__links .nav-dd__group:hover > .nav-dd__menu--sub,
.nav__links .nav-dd__group:focus-within > .nav-dd__menu--sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 4px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  color: var(--navy);
  flex-shrink: 0;
}
.nav__burger:hover {
  background: var(--cream);
}
.nav__burger-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}
.nav__burger-bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    top 0.2s ease;
}
.nav__burger-bars span:nth-child(1) {
  top: 0;
}
.nav__burger-bars span:nth-child(2) {
  top: 5px;
}
.nav__burger-bars span:nth-child(3) {
  top: 10px;
}
.nav.is-open .nav__burger-bars span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
.nav.is-open .nav__burger-bars span:nth-child(2) {
  opacity: 0;
}
.nav.is-open .nav__burger-bars span:nth-child(3) {
  top: 5px;
  transform: rotate(-45deg);
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.lang-sw {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  overflow: hidden;
}
.lang-sw button {
  padding: 5px 11px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--fb);
  letter-spacing: 0.06em;
  color: #aaa;
  transition:
    background 0.15s,
    color 0.15s;
}
.lang-sw button.on {
  background: var(--navy);
  color: var(--white);
}
.lang-sw button:not(.on):hover {
  background: var(--cream);
  color: var(--char);
}

/* page offset for fixed nav */
.page-wrap {
  padding-top: var(--nav-h);
  flex: 1;
}
html.nav-locked,
html.nav-locked body {
  overflow: hidden;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 600;
  padding: 15px 26px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    transform 0.15s var(--ease);
  text-decoration: none;
}
.btn svg {
  width: 16px;
  height: 16px;
}
.btn--white {
  background: var(--white);
  color: var(--navy);
}
.btn--white:hover {
  background: var(--cream);
  transform: translateY(-2px);
}
.btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}
.btn--ghost:hover {
  border-color: var(--white);
  color: var(--white);
  transform: translateY(-2px);
}
.btn--navy {
  background: var(--navy);
  color: var(--white);
}
.btn--navy:hover {
  background: var(--navy-dark);
  transform: translateY(-2px);
}
.btn--green {
  background: var(--green);
  color: var(--white);
}
.btn--green:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
}
.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--outline:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}
.btn--primary {
  background: var(--red);
  color: var(--white);
}
.btn--primary:hover {
  background: color-mix(in oklch, var(--red) 88%, black);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════
   HOME HERO — full-bleed photograph + navy scrim
   (taught from docs/design/examples/cirn-home-fullbleed-hero.html)
══════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  --heading-color: var(--white);
  min-height: clamp(560px, 84vh, 860px);
  display: flex;
  align-items: center;
  background: var(--navy-deep);
}
/* full-bleed documentary photograph — ::before sits under the img while it loads */
.hero:has(.hero__bg)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--navy-deep);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 28%;
  background-color: var(--navy-deep);
}
/* navy scrim: solid on the left for white text, clearing to reveal the
   subject on the right; a floor gradient seats the docked pathway tray */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      96deg,
      color-mix(in oklch, var(--navy-deep) 94%, transparent) 0%,
      color-mix(in oklch, var(--navy-deep) 86%, transparent) 24%,
      color-mix(in oklch, var(--navy) 52%, transparent) 46%,
      transparent 66%
    ),
    linear-gradient(
      0deg,
      color-mix(in oklch, var(--navy-deep) 72%, transparent) 0%,
      transparent 26%
    );
}
.hero__inner {
  max-width: 1360px;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--g);
  padding-block: clamp(56px, 7vw, 92px) clamp(96px, 9vw, 132px);
  position: relative;
  z-index: 2;
}
.hero__copy {
  max-width: 33rem;
}
.hero__h1 {
  font-family: var(--fh);
  font-size: clamp(42px, 5.4vw, 68px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 15ch;
  text-wrap: balance;
  text-shadow: 0 1px 30px color-mix(in oklch, var(--navy-deep) 60%, transparent);
}
.hero__h1 em {
  font-style: normal;
  font-weight: 600;
  color: var(--green-light);
}
/* D1: full reversed CIRN logo as the hero mark (replaces the wordmark text,
   which is retained visually-hidden for SEO / screen readers). */
.hero__h1--logo {
  margin: 0;
  max-width: none;
  text-shadow: none;
}
.hero__logo {
  display: block;
  width: clamp(300px, 42vw, 480px);
  height: auto;
  aspect-ratio: 500 / 140.5;
  filter: drop-shadow(
    0 2px 34px color-mix(in oklch, var(--navy-deep) 55%, transparent)
  );
}
@media (max-width: 600px) {
  .hero__logo {
    width: clamp(240px, 76vw, 360px);
  }
}
.hero__slogan {
  margin-top: 18px;
  font-family: var(--fh);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}
.hero__p {
  margin-top: 22px;
  max-width: 42ch;
  font-size: 17px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.92);
}
.hero__btns {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero__btns .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__btns .btn svg {
  width: 18px;
  height: 18px;
}

/* ── Pathways: rounded inset tray docked into the hero floor ── */
.pathways {
  position: relative;
  z-index: 3;
  background: var(--cream);
}
.pathways__tray {
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--g);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  transform: translateY(-44px);
  margin-bottom: -24px;
}
.ptile {
  background: var(--white);
  border: 1px solid color-mix(in oklch, var(--navy) 8%, transparent);
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 18px 44px -22px
    color-mix(in oklch, var(--navy) 40%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 196px;
  text-decoration: none;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.ptile:hover,
.ptile:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 28px 54px -22px
    color-mix(in oklch, var(--navy) 50%, transparent);
}
.ptile:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--navy) 40%, transparent);
  outline-offset: 2px;
}
.ptile__ic {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  color: var(--white);
}
.ptile__ic svg {
  width: 21px;
  height: 21px;
}
.ptile__ic--navy {
  background: var(--navy);
}
.ptile__ic--green {
  background: var(--green);
}
.ptile__k {
  font-family: var(--fh);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 22px);
  color: var(--navy);
  letter-spacing: -0.01em;
}
.ptile__d {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.5;
  flex: 1;
}
.ptile__go {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.ptile__go svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease);
}
.ptile:hover .ptile__go svg,
.ptile:focus-visible .ptile__go svg {
  transform: translateX(4px);
}

/* ── Home hero responsive ── */
@media (max-width: 980px) {
  .pathways__tray {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  /* subject sits behind the text: deepen scrim to a full navy wash, pull the
     subject up, and push copy below it so the photo still reads */
  .hero {
    min-height: clamp(480px, 78vh, 640px);
  }
  .hero__bg {
    object-position: 70% 18%;
  }
  .hero__scrim {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--navy-deep) 50%, transparent) 0%,
      color-mix(in oklch, var(--navy-deep) 82%, transparent) 52%,
      var(--navy-deep) 100%
    );
  }
  .hero__inner {
    padding-block: clamp(180px, 38vw, 280px) clamp(72px, 14vw, 104px);
  }
  .hero__copy {
    max-width: none;
  }
}
@media (max-width: 560px) {
  .pathways__tray {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════
   SECTIONS — COMMON
   (.c-* are semantic aliases used alongside .sec / .sec__*)
══════════════════════════════════════ */
.sec,
.c-section {
  padding: clamp(64px, 8.5vw, 112px) 0;
}
.sec--sm,
.c-section--sm {
  padding: clamp(48px, 6vw, 80px) 0;
}
.sec--lg,
.c-section--lg {
  padding: clamp(80px, 11vw, 148px) 0;
}
.sec:has(.partners-g) {
  padding: clamp(48px, 6vw, 80px) 0;
}
.sec--cream,
.c-section--cream {
  background: var(--cream);
}
.sec--navy,
.c-section--navy {
  background: var(--navy);
  color: var(--white);
  --heading-color: var(--white);
}
.sec--green,
.c-section--green {
  background: var(--green);
  color: var(--white);
  --heading-color: var(--white);
}
.sec--char,
.c-section--char {
  background: var(--char);
  color: var(--white);
  --heading-color: var(--white);
}

.sec__hd,
.c-sec-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.sec__title {
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 46px);
  max-width: 580px;
}
.sec__lead {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-soft);
  max-width: 420px;
  line-height: var(--leading-snug);
}
.sec__lead--lt {
  color: rgba(255, 255, 255, 0.6);
}

/* ══════════════════════════════════════
   EDITORIAL SPLIT — image + copy column
   (.editorial-split / .c-editorial-split)
══════════════════════════════════════ */
.editorial-split,
.c-editorial-split {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: stretch;
}
.c-editorial-split--flush {
  min-height: min(580px, 72vh);
}
.c-editorial-split--contained {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.c-editorial-split--media-right {
  grid-template-columns: minmax(0, 56%) minmax(0, 44%);
}
.c-editorial-split--media-right .editorial-split__media {
  order: 2;
}
.c-editorial-split--media-right .editorial-split__content {
  order: 1;
}
.editorial-split__media {
  position: relative;
  min-height: 360px;
}
.c-editorial-split--contained .editorial-split__media {
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
}
.editorial-split__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.c-editorial-split--contained .editorial-split__img {
  aspect-ratio: 4 / 3;
  min-height: 0;
  height: auto;
}
.editorial-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: clamp(56px, 6vw, 96px) clamp(48px, 5.5vw, 88px);
  max-width: none;
}
.c-editorial-split--contained .editorial-split__content {
  padding: 0;
}
.editorial-split__headline {
  font-family: var(--fh);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.24;
  color: var(--navy);
  text-wrap: pretty;
  letter-spacing: -0.02em;
  margin: 0 0 1.75rem;
}
.editorial-split__headline.sec__title {
  max-width: none;
}
.editorial-split__body {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.75;
  max-width: 42em;
}
.editorial-split__body p {
  margin: 0 0 1.25rem;
}
.editorial-split__body p:last-child {
  margin-bottom: 0;
}
.editorial-split__cta {
  align-self: flex-start;
  margin-top: 2rem;
}
.c-editorial-split--no-media,
.c-editorial-split--media-only {
  grid-template-columns: 1fr;
}
.c-editorial-split--no-media .editorial-split__content {
  max-width: 760px;
  margin: 0 auto;
  padding-left: var(--g);
  padding-right: var(--g);
}
.c-editorial-split--section-gap {
  margin-bottom: 56px;
}
.home-about.sec {
  padding: clamp(48px, 5vw, 72px) 0 clamp(64px, 7vw, 92px);
}

/* Home: section headings sit on white/cream — render them navy */
.home .sec__title,
.home .editorial-split__headline {
  color: var(--navy);
}

/* ══════════════════════════════════════
   CARD SURFACE SYSTEM — rounded soft cards on a gapped grid
   (.c-card-grid lays out; .c-card is the surface. Replaces the old
   inset-tray / hairline-grid "tactile" system.)
══════════════════════════════════════ */
.c-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
  min-width: 0;
}
.c-card-grid--2up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.c-card-grid--3up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.c-card-grid--4up {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.c-card-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}

/* Single-column stack of full-width .c-card items (vs. the multi-column
   .c-card-grid above) — for directories where each entry carries too much
   per-item information for a grid cell (Studies, Publications). */
.c-card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  min-width: 0;
}

.c-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: var(--card-pad);
  background: var(--white);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  color: var(--char);
  text-align: left;
  text-decoration: none;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
a.c-card:hover,
a.c-card:focus-visible,
button.c-card:hover,
button.c-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
}
.c-card:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--navy) 40%, transparent);
  outline-offset: 2px;
}

/* Sentence-case chip (not a tracked uppercase eyebrow) */
.c-card__tag {
  align-self: flex-start;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  background: color-mix(in oklch, var(--navy) 8%, var(--white));
  border-radius: 999px;
  padding: 4px 11px;
}
.c-card__title {
  font-family: var(--fh);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.c-card__body {
  flex: 1 1 auto;
  font-family: var(--fb);
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
  text-wrap: balance;
}
.c-card__more {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.c-card__more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease);
}
.c-card:hover .c-card__more svg,
.c-card:focus-visible .c-card__more svg {
  transform: translateX(4px);
}

/* On-navy variant: translucent white cards */
.c-card--on-navy {
  background: color-mix(in oklch, var(--white) 8%, transparent);
  border-color: color-mix(in oklch, var(--white) 18%, transparent);
  box-shadow: none;
  color: var(--white);
}
.c-card--on-navy .c-card__title {
  color: var(--white);
}
.c-card--on-navy .c-card__body {
  color: rgba(255, 255, 255, 0.72);
}
.c-card--on-navy .c-card__tag {
  color: var(--green-light);
  background: color-mix(in oklch, var(--white) 12%, transparent);
}
.c-card--on-navy .c-card__more {
  color: var(--green-light);
}
.c-card--on-navy:hover,
.c-card--on-navy:focus-visible {
  background: color-mix(in oklch, var(--white) 12%, transparent);
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.5);
}

@media (max-width: 980px) {
  .c-card-grid--4up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .c-card-grid--3up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .c-card-grid--2up,
  .c-card-grid--3up,
  .c-card-grid--4up {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-card,
  .c-card__more svg,
  .btn {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════
   HOME — EDIA
══════════════════════════════════════ */
.edia-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.edia-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 36px 32px 40px;
  display: flex;
  flex-direction: column;
}
.edia-card__ghost-n {
  display: none;
}
.edia-card__title {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.edia-card__body {
  font-size: 15px;
  color: var(--text-body);
  line-height: var(--leading-body);
}

/* ══════════════════════════════════════
   HOME — SITES
══════════════════════════════════════ */
.home-sites-tray {
  margin-bottom: 40px;
}
.sites-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 64px;
}
.site-card {
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.18s;
}
.site-card__prov {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.site-card__name {
  font-family: var(--fh);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}
.site-card__uni {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
  line-height: 1.4;
}

/* ══════════════════════════════════════
   HOME — PARTNERS
══════════════════════════════════════ */
.partners-g {
  grid-template-columns: repeat(6, 1fr);
  background: transparent;
  border: none;
  gap: 32px;
}
.partner-slot {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  min-height: 80px;
}
.partner-slot img {
  max-width: 120px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition:
    filter 0.22s ease,
    opacity 0.22s ease;
}
.partner-slot:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* ── Partners page: funders band, featured NMO, directory ── */
.partners-logo__fallback {
  font-family: var(--fh);
  font-weight: 600;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.3;
  text-wrap: balance;
}

/* Funders: cream credibility band — copy left, logo chips right. */
.partners-funders {
  border-bottom: 1px solid var(--border);
}
.partners-funders__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.partners-funders__title {
  max-width: none;
  margin: 0 0 12px;
  font-size: clamp(24px, 2.8vw, 36px);
}
.partners-funders__intro {
  max-width: 46ch;
  color: var(--text-body);
  font-size: 16.5px;
  line-height: 1.65;
}
.partners-funders__intro p {
  margin: 0;
}
.partners-funders__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.partners-funder-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
a.partners-funder-chip:hover,
a.partners-funder-chip:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}
a.partners-funder-chip:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.partners-funder-chip__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
}
.partners-funder-chip__mark img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 860px) {
  .partners-funders__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .partners-funders__logos {
    max-width: 520px;
  }
}
@media (max-width: 560px) {
  .partners-funders__logos {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

/* NMO: one featured card — role tag, compact logo, readable body. */
.partners-nmo {
  padding-block: clamp(48px, 6vw, 80px);
}
.partners-nmo__card {
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
}
.partners-nmo__grid {
  display: grid;
  grid-template-columns: minmax(120px, 168px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.partners-nmo__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: 18px 16px;
  background: color-mix(in oklch, var(--navy) 5%, var(--cream));
  border-radius: calc(var(--card-radius) - 4px);
}
.partners-nmo__logo img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.partners-nmo__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}
.partners-nmo__name {
  font-family: var(--fh);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 14px;
  line-height: 1.2;
  text-wrap: balance;
}
.partners-nmo__desc {
  color: var(--text-body);
  font-size: 16.5px;
  line-height: 1.68;
  max-width: 68ch;
}
.partners-nmo__desc p {
  margin: 0 0 0.85em;
}
.partners-nmo__desc p:last-child {
  margin-bottom: 0;
}
.partners-nmo__cta {
  display: inline-flex;
  margin-top: 20px;
}
@media (max-width: 680px) {
  .partners-nmo__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .partners-nmo__logo {
    max-width: 200px;
  }
}

/* Research partners: stacked editorial rows (better for long copy). */
.partners-list__hd {
  align-items: flex-end;
  gap: 20px 40px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.partners-list__lead {
  margin: 0;
  max-width: 36ch;
}
@media (max-width: 680px) {
  .partners-list__hd {
    flex-direction: column;
    align-items: flex-start;
  }
  .partners-list__lead {
    max-width: 46ch;
  }
}
.partners-dir {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}
.partners-dir__item {
  display: grid;
  grid-template-columns: minmax(112px, 148px) minmax(0, 1fr);
  gap: clamp(18px, 2.8vw, 32px);
  align-items: start;
  text-decoration: none;
  color: inherit;
  height: auto;
}
a.partners-dir__item {
  cursor: pointer;
}
.partners-dir__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 14px;
  background: color-mix(in oklch, var(--navy) 5%, var(--white));
  border-radius: calc(var(--card-radius) - 4px);
}
.partners-list.sec--cream .partners-dir__logo {
  background: color-mix(in oklch, var(--navy) 6%, var(--cream));
}
.partners-dir__logo img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.partners-dir__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.partners-dir__name {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.2;
  text-wrap: balance;
}
.partners-dir__desc {
  margin: 0;
  flex: 1;
  max-width: 58ch;
  text-wrap: pretty;
}
.partners-dir__desc p {
  margin: 0 0 0.75em;
}
.partners-dir__desc p:last-child {
  margin-bottom: 0;
}
.partners-dir__item .c-card__more {
  margin-top: 4px;
}
@media (max-width: 680px) {
  .partners-dir__item {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .partners-dir__logo {
    max-width: 180px;
    min-height: 72px;
  }
}

/* ══════════════════════════════════════
   HOME — NETWORKS (editorial index)
══════════════════════════════════════ */
#research-networks .c-sec-hd {
  justify-content: center;
  text-align: center;
}
#research-networks .edir-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 40px;
}
/* center vertical rule between the two columns */
#research-networks .edir-row:nth-child(odd) {
  border-right: 1px solid var(--border);
}
/* drop the bottom rule on the final row (two cells, even network count) */
#research-networks .edir-row:nth-last-child(-n + 2) {
  border-bottom: none;
}
/* odd network count: the trailing lone cell sits in the left column, so its
   inter-column right rule would dangle into empty space — clear it. */
#research-networks .edir-row:nth-child(odd):last-child {
  border-right: none;
}
#research-networks > .wrap > .btn {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}
@media (max-width: 860px) {
  #research-networks .edir-index {
    grid-template-columns: 1fr;
  }
  #research-networks .edir-row:nth-child(odd) {
    border-right: none;
  }
  /* single column: only the very last row drops its rule (global), so restore
     the second-to-last that the 2-col rule above had cleared */
  #research-networks .edir-row:nth-last-child(2) {
    border-bottom: 1px solid var(--border);
  }
}
.networks-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.network-card {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 28px 24px 32px;
  transition: background 0.18s;
  display: flex;
  flex-direction: column;
}
.network-card:hover {
  background: color-mix(in oklch, var(--cream) 70%, var(--border));
}
a.network-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.network-card:hover {
  background: color-mix(in oklch, var(--cream) 70%, var(--border));
}
a.network-card:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}
.network-card__abbr {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 28px;
  color: var(--navy);
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.network-card__name {
  font-family: var(--fh);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--char);
  margin-bottom: 12px;
  line-height: 1.3;
}
.network-card__body {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}
.network-card__body p {
  margin-bottom: 0;
}

/* ══════════════════════════════════════
   HOME — OPEN STUDIES + LATEST
   Two live-content bands between Networks and Sites. Both reuse existing
   surfaces rather than inventing new ones: Open Studies is a plain
   .c-card-grid--3up of link cards carrying the Studies page's enrollment
   badge, and Latest is a two-column split whose left column reuses
   .pub-card (Publications) and right column reuses .ne-item (News &
   Events). Only the layout glue and the narrow-column adjustments live here.
══════════════════════════════════════ */

/* Section-header action (right side of .c-sec-hd). Bottom-aligned with the
   lede rather than top-aligned with the heading, so it sits on the same
   optical baseline as the copy block it belongs to. */
.c-sec-hd__action {
  flex: none;
  align-self: flex-end;
}

.home-study-card .c-card__title {
  text-wrap: balance;
}
/* Push the "View study" link to the card floor so the three cards' actions
   line up regardless of teaser length. */
.home-study-card .c-card__more {
  margin-top: auto;
  padding-top: 14px;
}

/* Columns stretch (rather than align to start) so the two "All …" buttons land
   on a shared floor via the margin-top:auto below, however unevenly the two
   lists run. */
.home-latest__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
}
.home-latest__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.home-latest__ctitle {
  font-family: var(--fh);
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 18px;
}
/* Two-class selector: .pub-list's `margin: 0` is declared later in the file and
   would otherwise win on source order. */
.home-latest__col .home-latest__list {
  margin-bottom: 24px;
}
.home-latest__cta {
  align-self: flex-start;
  margin-top: auto;
}

/* Compact .ne-item for the half-width column: the News & Events page gives the
   date rail 92px and up to 38px of gutter, which costs too much of a measure
   this narrow. */
.ne-item--compact {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
}
.ne-item--compact .ne-item__rail {
  padding: 10px 6px;
}
.ne-item--compact .ne-item__title {
  font-size: clamp(17px, 1.5vw, 19px);
}

/* Neither column carries an abstract or DOI on the home page, so the citation
   cards can sit tighter than on the Publications directory. */
.home-pub-card {
  gap: 6px;
}

@media (max-width: 980px) {
  .home-latest__cols {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Stacked columns no longer need the mid-column CTA pinned to a shared
     floor, and margin-top:auto would strand it at the section bottom. */
  .home-latest__cta {
    margin-top: 0;
  }
  /* Back to the full-width rail treatment now that the column is full width. */
  .ne-item--compact {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 38px);
  }
}

@media (max-width: 860px) {
  /* Heading, lede, and action stack rather than compete for one row. Scoped to
     this band, not .c-sec-hd globally, so other section headers keep their
     current behaviour. */
  .home-open-studies .c-sec-hd {
    flex-direction: column;
    gap: 22px;
  }
  .home-open-studies .c-sec-hd__action {
    align-self: flex-start;
  }
}

@media (max-width: 560px) {
  /* The site-wide "3up collapses to one column at 560px" rule (in the card
     surface system block above) is currently overridden by a later, unscoped
     `@media (max-width: 1100px) { .c-card-grid--3up { 2 columns } }`, which
     wins on source order and pins every 3up grid to two columns right down to
     the narrowest phone. Restated here with a two-class selector so this band
     collapses as intended; the unscoped rule is a pre-existing site-wide issue
     to fix separately. */
  .home-open-studies .c-card-grid--3up {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  /* Matches the base .ne-item rule at this breakpoint: the rail becomes a
     horizontal date line above the title. Restated here because the two-class
     .ne-item--compact selectors above outrank the single-class base rules. */
  .ne-item--compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .ne-item--compact .ne-item__rail {
    min-height: 0;
    padding: 9px 13px;
  }
}

/* ══════════════════════════════════════
   SHARED — CARD CTA LINK
══════════════════════════════════════ */
.c-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--navy);
  margin-top: auto;
  padding-top: 20px;
  transition: color 0.15s;
  text-decoration-color: color-mix(in oklch, var(--navy) 40%, transparent);
}
.c-card-cta:hover {
  text-decoration-color: var(--navy);
}
.c-card-cta svg {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-5px);
  transition:
    opacity 0.2s ease-out,
    transform 0.22s ease-out;
}
.network-card:hover .c-card-cta svg,
.edia-card:hover .c-card-cta svg,
.mem-cat:hover .c-card-cta svg {
  opacity: 1;
  transform: translateX(0);
}

/* ══════════════════════════════════════
   PAGE HEADER — compact navy strip for internal pages.
   Text-only by default; --media adds an optional framed image.
   See DESIGN.md "Internal-page header" + cirn_page_header().
══════════════════════════════════════ */
.page-header {
  position: relative;
  overflow: hidden;
  color: var(--white);
  --heading-color: var(--white);
  background: linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);
}
/* same fine institutional paper grain as the home hero — not a glow */
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page-header__inner {
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--g);
  padding-block: clamp(38px, 4.6vw, 62px);
  position: relative;
  z-index: 2;
}
/* media variant: text + small framed image */
.page-header--media .page-header__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: center;
}
.page-header--media-left .page-header__inner {
  grid-template-columns: 0.85fr 1.15fr;
}
.page-header--media-left .page-header__text {
  order: 2;
}
.page-header__text {
  max-width: 54ch;
}
.page-header--media .page-header__text {
  max-width: none;
}
/* optional breadcrumb — institutional "where am I" cue (no tracked eyebrow) */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 14px;
}
.crumbs a {
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.crumbs a:hover {
  color: var(--white);
}
.crumbs .sep {
  opacity: 0.5;
}
.crumbs [aria-current="page"] {
  color: var(--white);
}
.page-header__h1 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  max-width: 18ch;
  text-wrap: balance;
  color: var(--white);
}
.page-header--media .page-header__h1 {
  max-width: 14ch;
}
/* emphasis word: color, not italic */
.page-header__h1 em {
  font-style: normal;
  font-weight: 600;
  color: var(--green-light);
}
/* short green title rule — a deliberate institutional accent (full bar, not a side stripe) */
.page-header__rule {
  width: 52px;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
  margin-top: 18px;
}
.page-header__lede {
  margin-top: 16px;
  max-width: 56ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.85);
}
.page-header__lede p {
  margin: 0 0 0.6em;
  color: inherit;
}
.page-header__lede p:last-child {
  margin-bottom: 0;
}
/* logo lockup (network records) */
.page-header__logo {
  margin-bottom: 18px;
}
.page-header__logo img {
  height: 48px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}
/* CIRN designation bar — a full-bleed deep-green cap on the navy hero stating formal
   standing (Network Co-Lead, Champion, Principal Investigator). Opt-in via the
   status_flags arg; records without a designation render no bar. The brand green is
   darkened toward a forest tone so the white label clears AA contrast at this size,
   while the inner content tracks the same shell + gutter as .page-header__inner. */
.page-header__status {
  position: relative;
  z-index: 3;
  background: color-mix(in oklch, var(--green) 76%, black);
}
.page-header__status-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding-inline: var(--g);
  padding-block: 9px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  color: var(--white);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.page-header__status-sep {
  opacity: 0.5;
  font-weight: 400;
}
/* metadata chips (entity type, PI, network abbr) — sentence-case pills, not tracked eyebrows */
.page-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.page-header__chip {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
/* meta line (date, journal, role, linked institution) */
.page-header__meta {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.page-header__meta a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.page-header__meta a:hover {
  color: var(--white);
  text-decoration-color: rgba(255, 255, 255, 0.75);
}
/* Member profile role list — CIRN standing vs academic titles, each line split at the
   first comma so long affiliations wrap as title + context instead of one dense block. */
.page-header__roles {
  margin: 4px 0 0;
  max-width: 58ch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.page-header__roles-group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-header__roles-group--affiliation {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.page-header__roles-group--cirn + .page-header__roles-group--affiliation {
  margin-top: -2px;
}
.page-header__role {
  display: block;
}
.page-header__role-primary,
.page-header__role-detail {
  display: block;
}
.page-header__roles-group--cirn .page-header__role-primary {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--white);
}
.page-header__roles-group--cirn .page-header__role-detail {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
.page-header__roles-group--affiliation .page-header__role-primary {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}
.page-header__roles-group--affiliation .page-header__role-detail {
  margin-top: 1px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.76);
}
.page-header__roles-group--affiliation .page-header__role--single .page-header__role-primary {
  color: rgba(255, 255, 255, 0.84);
}
/* postal address block on the institution header (street line + locality line) */
.page-header__address {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.55;
}
.page-header__address-line {
  display: block;
}
/* action buttons on the navy surface (uses .btn--ghost) */
.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
/* portrait media (a person): taller frame, narrower column */
.page-header--portrait .page-header__inner {
  grid-template-columns: 1.35fr 0.65fr;
}
.page-header--portrait .ph-frame {
  max-width: 300px;
  border-radius: 12px;
}
.page-header--portrait .ph-frame img {
  aspect-ratio: 3 / 4;
  object-position: center top;
}
/* optional framed image — the network-hero media frame, sized down */
.ph-frame {
  margin: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  max-width: 460px;
  margin-inline: auto;
  background: color-mix(in oklch, var(--navy) 70%, black);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 30px 60px -34px rgba(0, 0, 0, 0.55),
    inset 0 0 0 5px rgba(255, 255, 255, 0.05);
}
.ph-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ph-frame img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 60% 30%;
}
@media (max-width: 860px) {
  .page-header--media .page-header__inner,
  .page-header--media-left .page-header__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .page-header--media-left .page-header__text {
    order: 0;
  }
  .ph-frame {
    max-width: 520px;
  }
  .page-header--portrait .ph-frame {
    max-width: 320px;
  }
}

/* ── Institution logo hero (D11) ──
   A plain near-white header panel with the institution logo framed on the right
   (uses the --media grid). Overrides the default navy strip to a light surface so
   colour/dark-text logos read cleanly. Logo-less institutions get the same light
   panel with no frame (graceful fallback). */
.page-header--logo {
  color: var(--char);
  --heading-color: var(--navy);
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.page-header--logo::before {
  opacity: 0.025; /* keep only a whisper of the paper grain on the light surface */
}
.page-header--logo .page-header__h1 {
  color: var(--navy);
}
.page-header--logo .crumbs,
.page-header--logo .crumbs a {
  color: color-mix(in oklch, var(--char) 60%, transparent);
}
.page-header--logo .crumbs a:hover,
.page-header--logo .crumbs [aria-current="page"] {
  color: var(--navy);
}
.page-header--logo .crumbs .sep {
  opacity: 0.4;
}
.page-header--logo .page-header__meta {
  color: color-mix(in oklch, var(--char) 72%, transparent);
}
.page-header--logo .page-header__meta a {
  color: var(--navy);
  text-decoration-color: var(--navy-24);
}
.page-header--logo .page-header__meta a:hover {
  color: var(--navy-dark);
  text-decoration-color: var(--navy);
}
.page-header--logo .page-header__address {
  color: color-mix(in oklch, var(--char) 68%, transparent);
}
/* Website action: dark-on-light ghost button */
.page-header--logo .btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: color-mix(in oklch, var(--navy) 32%, transparent);
}
.page-header--logo .btn--ghost:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
/* logo frame: white card, contained logo, no crop */
.page-header--logo .ph-frame {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px -30px rgba(20, 47, 112, 0.35);
  max-width: 380px;
  padding: clamp(22px, 3vw, 40px);
}
.page-header--logo .ph-frame::after {
  box-shadow: none;
}
.page-header--logo .ph-frame img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  object-position: center;
}

/* ── Full-bleed photographic hero variant (top-level pages) ──
   Mirrors the home hero: an edge-to-edge photo seated under a navy scrim,
   with the header text composed into the image's left negative space.
   Falls back to the navy field (and keeps the paper grain) when no photo. */
.page-header--hero {
  min-height: clamp(440px, 62vh, 680px);
  display: flex;
  align-items: center;
  background: var(--navy-deep);
}
.page-header--hero.page-header--has-intro {
  min-height: clamp(480px, 72vh, 760px);
}
.page-header__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 28%;
  background-color: var(--navy-deep);
}
/* Mirror hero photos whose subject sits under the left scrim (partners, champions). */
.page-header--flip-bg .page-header__bg {
  transform: scaleX(-1);
}
/* navy scrim: solid left column for white text, clearing to reveal the photo
   on the right — matches the home hero side wash (no floor wash) */
.page-header__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    96deg,
    color-mix(in oklch, var(--navy-deep) 94%, transparent) 0%,
    color-mix(in oklch, var(--navy-deep) 88%, transparent) 28%,
    color-mix(in oklch, var(--navy-deep) 72%, transparent) 48%,
    color-mix(in oklch, var(--navy) 38%, transparent) 58%,
    transparent 72%
  );
}
/* navy field under the photo while it loads (replaces the paper-grain ::before) */
.page-header--has-photo::before {
  opacity: 1;
  z-index: 0;
  background: var(--navy-deep);
  background-image: none;
}
.page-header--hero .page-header__inner {
  width: 100%;
  padding-block: clamp(48px, 5vw, 72px) clamp(56px, 6vw, 88px);
}
.page-header--hero.page-header--has-intro .page-header__inner {
  padding-block: clamp(56px, 7vw, 92px) clamp(64px, 7vw, 96px);
}
.page-header--hero .page-header__text {
  max-width: 46ch;
}
.page-header--hero .page-header__copy {
  max-width: 33rem;
}
.page-header--hero .page-header__h1 {
  font-size: clamp(34px, 4.4vw, 56px);
  max-width: 16ch;
  text-shadow: 0 1px 24px color-mix(in oklch, var(--navy-deep) 55%, transparent);
}
/* full-bleed copy stack — mirrors .hero__copy / .hero__slogan / .hero__p */
.page-header--hero .page-header__slogan {
  margin-top: 18px;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 20px color-mix(in oklch, var(--navy-deep) 50%, transparent);
}
.page-header--hero .page-header__lede--hero {
  margin-top: 22px;
  max-width: 42ch;
  font-size: 17px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 16px color-mix(in oklch, var(--navy-deep) 45%, transparent);
}
.page-header--hero .page-header__lede--hero p {
  margin: 0;
  color: inherit;
}
.page-header--hero .page-header__copy .page-header__actions {
  margin-top: 36px;
}
/* entity record hero (e.g. networks): the lede is a descriptive paragraph, not a
   marketing slogan, so give it a wider measure than the home-style hero copy */
.page-header--record.page-header--hero .page-header__copy {
  max-width: 44rem;
}
.page-header--record.page-header--hero .page-header__lede--hero {
  max-width: 60ch;
}
/* record ledes run to multiple paragraphs (network descriptions); the home-style
   hero lede zeroes p margins for its single line, so restore the rhythm here */
.page-header--record.page-header--hero .page-header__lede--hero p + p {
  margin-top: 1.1em;
}
/* outbound links inside a hero lede (e.g. the CANVAS network website) sit on the
   navy scrim, where the body colour alone reads as plain text — underline them */
.page-header--hero .page-header__lede--hero a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 140ms ease;
}
.page-header--hero .page-header__lede--hero a:hover,
.page-header--hero .page-header__lede--hero a:focus-visible {
  opacity: 0.75;
}

/* ── Article / content header — smaller h1, wider measure ──
   Directory landings (publications, studies, events, resources) and article singles.
   Same full-bleed scrim DNA when a photo is present; editorial type scale. */
.page-header--article .page-header__h1 {
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: min(52ch, 100%);
}
.page-header--hero.page-header--article .page-header__h1 {
  text-shadow: 0 1px 20px color-mix(in oklch, var(--navy-deep) 50%, transparent);
}
/* Singles without a marketing intro stack: shorter editorial band */
.page-header--article.page-header--hero:not(.page-header--has-intro) {
  min-height: clamp(220px, 34vh, 360px);
}
.page-header--article.page-header--hero:not(.page-header--has-intro) .page-header__inner {
  padding-block: clamp(36px, 4.2vw, 52px);
}
.page-header--article.page-header--hero:not(.page-header--has-intro) .page-header__text,
.page-header--article.page-header--hero:not(.page-header--has-intro) .page-header__copy {
  max-width: min(52ch, 100%);
}
.page-header--article:not(.page-header--hero) .page-header__inner {
  padding-block: clamp(32px, 3.8vw, 48px);
}
.page-header--article .page-header__meta {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.page-header--article.page-header--has-photo .page-header__scrim {
  background: linear-gradient(
    96deg,
    color-mix(in oklch, var(--navy-deep) 96%, transparent) 0%,
    color-mix(in oklch, var(--navy-deep) 90%, transparent) 32%,
    color-mix(in oklch, var(--navy-deep) 78%, transparent) 52%,
    color-mix(in oklch, var(--navy) 42%, transparent) 62%,
    transparent 76%
  );
}

@media (max-width: 720px) {
  /* subject sits behind the text on narrow screens: deepen the scrim to a
     vertical navy wash and lift the focal point so the photo still reads */
  .page-header--article.page-header--hero:not(.page-header--has-intro) {
    min-height: clamp(200px, 42vh, 320px);
  }
  .page-header--article.page-header--has-photo .page-header__scrim {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--navy-deep) 62%, transparent) 0%,
      color-mix(in oklch, var(--navy-deep) 90%, transparent) 48%,
      var(--navy-deep) 100%
    );
  }
  .page-header--hero.page-header--has-intro {
    min-height: clamp(440px, 78vh, 640px);
  }
  .page-header--hero.page-header--has-intro .page-header__inner {
    padding-block: clamp(36px, 8vw, 56px) clamp(48px, 7vw, 64px);
  }
  .page-header--hero.page-header--has-intro .page-header__copy {
    max-width: none;
  }
  .page-header--has-photo .page-header__bg {
    object-position: 68% 22%;
  }
  .page-header--has-photo .page-header__scrim {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--navy-deep) 58%, transparent) 0%,
      color-mix(in oklch, var(--navy-deep) 88%, transparent) 52%,
      var(--navy-deep) 100%
    );
  }
}
.res-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  margin-bottom: 40px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.res-back::before {
  content: "\2190";
}
.res-back:hover {
  opacity: 1;
}
.res-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}
.res-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(20, 47, 112, 0.07);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.res-link:hover {
  background: var(--navy);
  color: var(--white);
}

/* ── Investigator profile two-column layout ── */
.res-profile-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 0 64px;
  align-items: start;
}
.res-sidebar-section {
  margin-bottom: 2rem;
}
.res-sidebar-hd {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--navy);
  opacity: 0.45;
  margin: 0 0 0.65rem;
}
.res-inst-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.res-inst-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  line-height: 1.4;
}
a.res-inst-card__name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.res-inst-card__loc {
  margin: 0;
  font-size: 13px;
  color: var(--char);
  opacity: 0.55;
}
@media (max-width: 860px) {
  .res-profile-grid {
    grid-template-columns: 1fr;
  }
  .res-sidebar {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 40px;
    margin-bottom: 2rem;
  }
}

/* ══════════════════════════════════════
   INVESTIGATORS — MAP DIRECTORY
══════════════════════════════════════ */
#investigators-page {
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.investigators-tabs {
  position: sticky;
  top: var(--nav-h);
  /* Below fixed nav, above Leaflet map tiles/panes when scrolling */
  z-index: 4500;
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

/* Network pages: keep the sticky bar full-width, but align tab content to shell gutters. */
.investigators-tabs-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 4500;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.investigators-tabs-bar .investigators-tabs {
  position: static;
  top: auto;
  z-index: auto;
  border-bottom: 0;
  background: transparent;
}
.investigators-tab {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 16px 18px;
  font-family: var(--fb);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  white-space: nowrap;
}
.investigators-tab:hover {
  color: var(--char);
}
.investigators-tab.is-active {
  color: var(--navy);
}
.investigators-tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: transparent;
}
.investigators-tab.is-active::after {
  background: var(--active-tab, var(--tab, var(--navy)));
}
#investigators-list {
  position: relative;
  z-index: 1;
  background: var(--white);
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.investigators-list-header {
  padding: 22px 24px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.investigators-list-header__copy {
  min-width: 0;
}
.investigators-list-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
.investigators-list-title {
  font-family: var(--fh);
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--navy);
}
.investigators-list-lead {
  margin: 12px 0 0;
  max-width: 40rem;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.investigators-list-lead a {
  color: var(--navy);
  font-weight: 600;
  text-underline-offset: 2px;
}
.investigators-list-lead a:hover {
  color: var(--green);
}
.investigators-list-meta {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  padding-top: 22px;
}
.investigators-search-row {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.investigators-search {
  width: 100%;
  border: 1.5px solid var(--border);
  padding: 12px 12px;
  font-family: var(--fb);
  font-size: 13.5px;
  outline: none;
}
.investigators-search:focus {
  border-color: rgba(60, 74, 118, 0.55);
  box-shadow: 0 0 0 3px rgba(60, 74, 118, 0.1);
}

.investigators-cards {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.investigator-group {
  display: flex;
  flex-direction: column;
}
.investigator-group + .investigator-group {
  border-top: 2px solid var(--border);
}
.investigator-group-hd {
  padding: 8px 14px 6px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(244, 243, 238, 0.92);
  border-bottom: 1px solid rgba(221, 221, 215, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.investigator-group-hd__name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 47, 112, 0.72);
}
.investigator-group-hd__loc {
  font-size: 10px;
  color: var(--text-placeholder);
  margin-top: 2px;
  letter-spacing: 0.03em;
}
.investigator-group > .investigator-card {
  border-left: none;
  border-right: none;
  border-top: none;
}
.investigator-group > .investigator-card + .investigator-card {
  border-top: 1px solid var(--border);
}
.investigator-card {
  width: 100%;
  display: block;
  padding: 16px 16px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.investigator-card:hover {
  background: var(--cream);
  border-color: rgba(60, 74, 118, 0.22);
}
.investigator-card.is-highlighted {
  background: #fff7d6;
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(60, 74, 118, 0.35);
  transition:
    background 0.6s ease,
    box-shadow 0.6s ease,
    border-color 0.6s ease;
}
.investigator-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.investigator-card__name {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.investigator-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.investigator-card__tags .investigator-tag {
  padding: 4px 8px;
  font-size: 10.5px;
}
.investigator-card__tags .investigator-tag::before {
  width: 7px;
  height: 7px;
  margin-right: 6px;
}
.investigator-card__role {
  font-size: 13px;
  color: var(--text-body);
  margin-top: 5px;
  line-height: 1.45;
}
.investigator-card__inst {
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0 0;
  line-height: 1.4;
}
.investigator-card__inst-sep {
  color: var(--text-placeholder);
}
.investigator-card__loc-inline {
  color: var(--text-placeholder);
}
.investigator-card__loc {
  font-size: 11px;
  color: var(--text-placeholder);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.investigator-card__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(75, 111, 87, 0.1);
  padding: 4px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.investigator-tag {
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.02);
  color: var(--navy);
  position: relative;
}
.investigator-tag::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--tag, var(--navy));
  margin-right: 8px;
  vertical-align: middle;
}
a.investigator-tag--link {
  text-decoration: none;
  color: inherit;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
a.investigator-tag--link:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}

/* Network labels: plain underlined text (no pill / colored dot). */
.cirn-network-ref {
  display: inline;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--fb);
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  letter-spacing: normal;
  text-transform: none;
  border: none;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
a.cirn-network-ref {
  cursor: pointer;
}
a.cirn-network-ref:hover {
  color: var(--char);
}
.investigator-card__tags .cirn-network-ref {
  font-size: 11px;
  font-weight: 600;
}

/* Investigator references: same plain-underline treatment as network labels,
   used inline (lead lists on studies, author lists on publications). */
.cirn-investigator-ref {
  display: inline;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--fb);
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  letter-spacing: normal;
  text-transform: none;
  border: none;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
a.cirn-investigator-ref {
  cursor: pointer;
}
a.cirn-investigator-ref:hover {
  color: var(--char);
}

/* Container for inline investigator refs: comma-separated, wraps naturally. */
.investigator-ref-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline;
}
.investigator-ref-list li {
  display: inline;
}
.investigator-ref-list li + li::before {
  content: ", ";
  color: var(--char);
  text-decoration: none;
  font-weight: 400;
}

/* ══════════════════════════════════════
   STUDIES
══════════════════════════════════════ */
.studies-intro,
.pub-intro,
.c-page-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 80px;
  margin: 0 auto;
  text-align: center;
}
.c-page-intro--single {
  grid-template-columns: 1fr;
  max-width: 42rem;
}
.studies-intro h2,
.pub-intro h2,
.c-page-intro h2 {
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 20px;
}
.studies-intro p,
.pub-intro p,
.c-page-intro p {
  font-size: 15.5px;
  color: var(--text-body);
  line-height: var(--leading-loose);
  margin-bottom: 20px;
}
/* Catalog toolbar — search + sort (studies + publications) */
.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--border);
}
.catalog-toolbar__search {
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 440px;
}
.catalog-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.catalog-search {
  width: 100%;
  padding: 11px 16px;
  font-family: var(--fb);
  font-size: 0.9375rem;
  color: var(--char);
  background: var(--white);
  border: 1.5px solid var(--border);
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.catalog-search:focus {
  border-color: var(--navy);
}
.catalog-search:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.catalog-search::placeholder {
  color: var(--text-placeholder);
}
.catalog-toolbar__sort {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 0 0 auto;
}
.catalog-sort-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: var(--fb);
}
.catalog-sort {
  min-width: 200px;
  padding: 10px 36px 10px 14px;
  font-family: var(--fb);
  font-size: 0.9375rem;
  color: var(--char);
  background: var(--white);
  border: 1.5px solid var(--border);
  outline: none;
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231C1C1C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.catalog-sort:focus {
  border-color: var(--navy);
}
.catalog-sort:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.catalog-list-meta {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--fb);
  padding: 14px 0 0;
}
.catalog-list-meta strong {
  font-weight: 600;
  color: var(--navy);
}

/* Filter bar — shared by studies + publications */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--border);
}
.filter-bar__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: var(--fb);
  margin-right: 6px;
}
button.filter-chip {
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  cursor: pointer;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.filter-chip:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-pale);
}
.filter-chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.filter-chip__count {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.65;
}
.filter-chip.is-active .filter-chip__count {
  opacity: 0.8;
}

/* Study list container */
.study-list {
  border-top: 1px solid var(--border);
}
.study-list__empty {
  padding: 40px 0;
  color: var(--text-muted);
  font-size: 15px;
}

/* Study list rows */
.study-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition:
    background 0.15s,
    padding 0.15s,
    margin 0.15s;
}
.study-row:hover {
  background: var(--cream);
  margin: 0 -32px;
  padding-left: 32px;
  padding-right: 32px;
}
.study-row__body {
  flex: 1;
  min-width: 0;
}
.study-row__title {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 6px;
  transition: color 0.15s;
}
.study-row:hover .study-row__title {
  color: var(--green);
}
.study-row__teaser {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.study-row__date {
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--fb);
  margin-top: 6px;
  letter-spacing: 0.01em;
}
.study-row__arrow {
  flex-shrink: 0;
  color: var(--text-faint);
  transition:
    color 0.15s,
    transform 0.15s;
}
.study-row:hover .study-row__arrow {
  color: var(--green);
  transform: translateX(4px);
}

/* ══════════════════════════════════════
   GOVERNANCE
══════════════════════════════════════ */
/* The rail + roster system below is shared with the Members page's "Network
   Leadership" block (.mlead-*, page-members.php). Governance owns the naming
   because it got here first; the paired selectors keep one set of rules rather
   than a second copy under a different prefix. */
.gov-layout,
.mlead-layout {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.gov-main,
.mlead-main {
  min-width: 0;
}
.gov-sidebar,
.mlead-rail {
  position: sticky;
  top: calc(var(--nav-h) + var(--wp-admin-bar) + 20px);
}
.gov-sidebar__label,
.mlead-rail__label {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.gov-sidebar__toc,
.mlead-rail__toc {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gov-sidebar__toc li,
.mlead-rail__toc li {
  border-top: 1px solid var(--border);
}
.gov-sidebar__toc li a,
.mlead-rail__toc li a {
  display: block;
  padding: 11px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-soft);
  border-radius: 4px;
  transition:
    color 0.15s ease-out,
    background-color 0.15s ease-out;
}
.gov-sidebar__toc li a:hover,
.mlead-rail__toc li a:hover {
  color: var(--navy);
  background: color-mix(in oklch, var(--navy) 4%, transparent);
}
.gov-sidebar__toc li.is-current a,
.gov-sidebar__toc li a.is-active,
.mlead-rail__toc li.is-current a,
.mlead-rail__toc li a.is-active {
  color: var(--navy);
  font-weight: 600;
  background: color-mix(in oklch, var(--green) 10%, var(--cream));
}
.gov-sidebar__toc li:last-child,
.mlead-rail__toc li:last-child {
  border-bottom: 1px solid var(--border);
}

.gov-group,
.mlead-group {
  border-top: 1px solid var(--border);
  padding: clamp(28px, 4vw, 40px) 0;
  scroll-margin-top: calc(var(--nav-h) + var(--wp-admin-bar) + 24px);
}
.gov-group__title,
.mlead-group__title {
  font-family: var(--fh);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 clamp(20px, 3vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.gov-members-g,
.mlead-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px 28px;
}
.gov-group--leadership .gov-members-g,
.mlead-group--lead .mlead-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px 36px;
}
.gov-member,
.mlead-person {
  position: relative;
  font-size: 14px;
  line-height: 1.45;
}
.gov-member--linked,
.mlead-person--linked {
  border-radius: 10px;
  transition:
    background 0.15s var(--ease),
    margin 0.15s var(--ease),
    padding 0.15s var(--ease);
}
.gov-member--linked:hover,
.gov-member--linked:focus-within,
.mlead-person--linked:hover,
.mlead-person--linked:focus-within {
  background: var(--cream);
  margin: -10px -14px;
  padding: 10px 34px 10px 14px;
}
.gov-member--linked .gov-member__link::after,
.mlead-person--linked .mlead-person__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.gov-member__arrow,
.mlead-person__arrow {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 14px;
  height: 14px;
  color: var(--green);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition:
    opacity 0.15s var(--ease),
    transform 0.15s var(--ease);
  pointer-events: none;
}
.gov-member--linked:hover .gov-member__arrow,
.gov-member--linked:focus-within .gov-member__arrow,
.mlead-person--linked:hover .mlead-person__arrow,
.mlead-person--linked:focus-within .mlead-person__arrow {
  opacity: 1;
  transform: translate(0, 0);
}
.gov-group--leadership .gov-member__name,
.mlead-group--lead .mlead-person__name {
  font-size: 17px;
  letter-spacing: -0.01em;
}
.gov-member__name,
.mlead-person__name {
  font-family: var(--fh);
  font-weight: 600;
  color: var(--char);
  margin-bottom: 4px;
}
.gov-member__link,
.mlead-person__link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size 0.2s var(--ease), color 0.2s var(--ease);
}
.gov-member__link:hover,
.gov-member__link:focus-visible,
.mlead-person__link:hover,
.mlead-person__link:focus-visible {
  color: var(--navy);
  background-size: 100% 1.5px;
}
.gov-member__role,
.mlead-person__role {
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 3px;
  line-height: 1.4;
}
.gov-member__inst,
.mlead-person__inst {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.gov-group__cta,
.mlead-group__cta {
  margin-top: 20px;
}

/* Committees (editorial list, not card grid) */
.committees-sec {
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--nav-h) + var(--wp-admin-bar) + 24px);
}
.committees-sec__title {
  font-family: var(--fh);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin: 0 0 clamp(24px, 4vw, 36px);
  line-height: 1.12;
}
.committees-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.committee-item {
  padding: clamp(24px, 3vw, 32px) 0;
  border-top: 1px solid var(--border);
}
.committee-item:last-child {
  padding-bottom: 0;
}
.committee-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 20px;
  margin-bottom: 12px;
}
.committee-item__abbr {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}
.committee-item__title {
  margin: 0;
  font-family: var(--fh);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.2;
}
.committee-item__body {
  font-size: 14.5px;
  color: var(--char);
  line-height: 1.68;
  max-width: 62ch;
}
.committee-item__body p {
  margin: 0 0 0.65em;
}
.committee-item__body p:last-child {
  margin-bottom: 0;
}
.nmo-staff {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nmo-staff li {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
.nmo-staff strong {
  color: var(--white);
  font-weight: 600;
}
.nmo-blk {
  background: var(--navy);
  color: var(--white);
  --heading-color: var(--white);
  padding: clamp(36px, 5vw, 56px);
  margin-top: clamp(48px, 7vw, 72px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(28px, 4vw, 48px);
  align-items: end;
  scroll-margin-top: calc(var(--nav-h) + var(--wp-admin-bar) + 24px);
}
.nmo-blk__title {
  font-family: var(--fh);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  line-height: 1.15;
}
.nmo-blk__cta {
  align-self: end;
}
.nmo-blk__body {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.68;
}

/* ══════════════════════════════════════
   CHAMPIONS — team page
   One roster grid of large portrait cards (all champions, regardless of
   mandate-area size), then a numbered open definition list of mandate-area
   blurbs. The roster deliberately breaks from the generic card surface —
   no border/shadow box, just a rounded photo + identity underneath, so the
   page reads as a masthead rather than a teaser grid. Mandate blurbs stay
   surface-free too: index + typography only (cards imply interaction).
══════════════════════════════════════ */
.team-grid {
  display: grid;
  gap: clamp(28px, 3.4vw, 40px) var(--card-gap);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.team-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--char);
  text-decoration: none;
}
.team-card--static {
  cursor: default;
}

.team-card__frame {
  display: block;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 4 / 5;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s var(--ease);
}
a.team-card:hover .team-card__frame,
a.team-card:focus-visible .team-card__frame {
  box-shadow: var(--card-shadow-hover);
}
.team-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--navy);
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
  transition: transform 0.4s var(--ease);
}
a.team-card:hover .team-card__photo,
a.team-card:focus-visible .team-card__photo {
  transform: scale(1.045);
}
.team-card__photo--empty {
  display: grid;
  place-items: center;
  background-image:
    linear-gradient(
      150deg,
      color-mix(in oklch, var(--navy) 92%, black),
      var(--navy)
    );
}
.team-card__initials {
  font-family: var(--fh);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 46px);
  letter-spacing: 0.01em;
  color: color-mix(in oklch, var(--green-light) 88%, white);
}

.team-card__name {
  margin-top: clamp(16px, 2vw, 22px);
  font-family: var(--fh);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.team-card__role {
  margin-top: 5px;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--green);
}
.team-card__inst {
  margin-top: 2px;
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-soft);
}
.team-card__more {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.team-card__more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease);
}
.team-card:hover .team-card__more svg,
.team-card:focus-visible .team-card__more svg {
  transform: translateX(4px);
}

/* Mandate-area open definitions — numbered, no card chrome */
.team-mandates__intro {
  margin: 0 0 clamp(28px, 3.2vw, 40px);
}
.team-mandates__h2 {
  font-family: var(--fh);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}
.team-mandates__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4.5vw, 56px) clamp(40px, 5vw, 72px);
}
.team-mandate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 18px;
  align-items: start;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.team-mandate__index {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  padding-top: 0.35em;
}
.team-mandate__title {
  margin: 0 0 12px;
  font-family: var(--fh);
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--navy);
  text-wrap: balance;
}
.team-mandate__body {
  font-family: var(--fb);
  font-size: 15.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-width: 52ch;
}
.team-mandate__body p {
  margin: 0 0 1rem;
}
.team-mandate__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .team-mandates__list {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }
}

@media (max-width: 980px) {
  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 440px) {
  .team-grid {
    grid-template-columns: 1fr;
    max-width: 200px;
    margin-inline: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .team-card__frame,
  .team-card__photo,
  .team-card__more svg {
    transition: none;
  }
}

/* ══════════════════════════════════════
   TRAINING — numbered open definitions
   Same surface-free pattern as Champions mandate areas: index + typography.
   CTA buttons stay; card chrome and the green fill variant are gone.
══════════════════════════════════════ */
.tp-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4.5vw, 56px) clamp(40px, 5vw, 72px);
}
.tp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 18px;
  align-items: start;
}
.tp__index {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  padding-top: 0.35em;
}
.tp__title {
  margin: 0 0 12px;
  font-family: var(--fh);
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--navy);
  text-wrap: balance;
}
.tp__body {
  font-family: var(--fb);
  font-size: 15.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-width: 52ch;
}
.tp__body p {
  margin: 0 0 1rem;
}
.tp__body p:last-child {
  margin-bottom: 0;
}
.tp__body a {
  color: var(--green);
  text-decoration: underline;
}
.tp__body + .btn,
.tp__title + .btn {
  margin-top: 20px;
}

@media (max-width: 720px) {
  .tp-list {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }
}

/* Training programs with photos — numbered editorial splits */
.tp-programs .tp-program__index {
  display: block;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.tp-programs .editorial-split__headline {
  color: var(--navy);
}
.tp-programs .editorial-split__cta {
  margin-top: 20px;
}

/* ══════════════════════════════════════
   MEMBERSHIP
══════════════════════════════════════ */

/* Shared section header for membership body sections */
.mbr-head {
  max-width: 64ch;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.mbr-head__title {
  font-family: var(--fh);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}
.mbr-head__lede {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-width: 56ch;
}

/* Mission — page intro lede directly beneath the hero */
.membership-mission {
  max-width: 62ch;
}
.membership-mission p {
  margin: 0;
}
/* Lead-off lede — large navy opening statement set directly below a hero.
   Reusable via .c-page-lede; auto-applies to the membership mission's first
   paragraph. The .c-page-intro selector raises specificity so the lede type
   wins inside the centered page-intro block (e.g. the studies note). */
.c-page-lede,
.c-page-intro p.c-page-lede,
.membership-mission p:first-child {
  font-family: var(--fh);
  font-weight: 500;
  font-size: clamp(21px, 2.5vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--navy);
  text-wrap: balance;
}
.membership-mission p:first-child {
  max-width: 26ch;
}
.membership-mission p:last-child {
  margin-top: 22px;
  font-family: var(--fb);
  font-weight: 400;
  font-size: 16.5px;
  line-height: var(--leading-relaxed);
  letter-spacing: 0;
  color: var(--text-body);
  max-width: 62ch;
}

/* Member categories — soft card surfaces (photo-top) */
.mem-cats {
  margin: 0;
}
/* One shared next step under the three category cards: the process is the
   same for all three, so it is stated once rather than as three CTAs. */
.mem-cats__next {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: .95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--char) 78%, #fff);
}
.mem-cats__next a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mem-cats__next a:hover { color: var(--green); }
.mem-cat {
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: var(--white);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.mem-cat:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
}
.mem-cat__photo {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  aspect-ratio: 16 / 10;
  background: var(--navy-pale);
}
.mem-cat__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mem-cat__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 28px);
}
.mem-cat__title {
  font-family: var(--fh);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0;
}
.mem-cat__body {
  flex: 1 1 auto;
  font-size: 15.5px;
  color: var(--text-body);
  line-height: 1.6;
}
.mem-cat__body p {
  margin: 0;
}
.mem-cat__body a {
  color: var(--green);
  text-decoration: underline;
}
.mem-cat .c-card-cta {
  margin-top: 4px;
}

/* Benefits — check list inside the editorial split */
.mbr-benefits-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.mbr-benefits-list li {
  position: relative;
  padding-left: 32px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-body);
}
.mbr-benefits-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.6 6.3 5 8.6 9.4 3.6' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* Requirements — readable measure */
.membership-requirements__body {
  max-width: 68ch;
  font-size: 16.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.membership-requirements__body p {
  margin: 0 0 1em;
}
.membership-requirements__body p:last-child {
  margin-bottom: 0;
}
.membership-requirements__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 72ch;
}
.membership-requirements__body li {
  position: relative;
  padding-left: 26px;
  font-size: 16.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.membership-requirements__body li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* How to join — cream call-to-action panel */
.seminar-blk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: clamp(32px, 4vw, 52px);
}
.seminar-blk__title {
  font-family: var(--fh);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.seminar-blk__body {
  font-size: 16.5px;
  color: var(--text-body);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
}
.seminar-blk__body p {
  margin: 0 0 12px;
}
.seminar-blk__body p:last-child {
  margin-bottom: 0;
}
.seminar-blk .btn {
  white-space: nowrap;
}

/* Closing note + policy links */
.membership-closing {
  max-width: 68ch;
  font-size: 16.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.membership-closing p {
  margin: 0 0 1em;
}
.membership-closing p:last-child {
  margin-bottom: 0;
}
.membership-policies {
  max-width: 68ch;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.membership-policies__links {
  margin: 0;
  font-size: 15px;
  color: var(--text-soft);
}
.membership-policies__links a {
  color: var(--navy);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.seminar-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.seminar-meta__lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
.seminar-meta__val {
  font-size: 15px;
  font-weight: 500;
  color: var(--char);
}
.seminar-meta__val a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══════════════════════════════════════
   PUBLICATIONS
══════════════════════════════════════ */
.pub-db {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 80px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 280px;
}
.pub-db-icon {
  width: 56px;
  height: 56px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub-db-icon svg {
  color: var(--navy);
}
.pub-db__title {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.pub-db__body {
  font-size: 14px;
  color: var(--text-soft);
  max-width: 320px;
  line-height: var(--leading-snug);
}

/* ══════════════════════════════════════
   CONTACT
══════════════════════════════════════ */
.contact-g {
  grid-template-columns: 1fr 1fr 1fr;
}

/* ── Event cards (.study-card in the events card grid) ──
   NAME RESERVED: this is the Events teaser (title + type badge + date/location).
   The Studies-directory card (badge + title + byline + teaser + priorities +
   two actions) is a different shape — it must use `.study-index-card` (or
   similar), never `.study-card`, to avoid colliding with this component. */
.study-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--card-pad);
  background: var(--white);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.study-card:hover,
.study-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}
.study-card__title {
  font-family: var(--fh);
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.study-card__title a {
  color: var(--navy);
  text-decoration: none;
}
.study-card__title a:hover {
  color: var(--green);
}
.study-card__body {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp {
  background: var(--white);
  padding: clamp(30px, 3.2vw, 48px);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.cp--navy {
  background: var(--navy);
  color: var(--white);
}
.cp__type {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.cp--navy .cp__type {
  color: rgba(255, 255, 255, 0.38);
}
.cp__name {
  font-family: var(--fh);
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}
.cp-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cp-detail__key {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #bbb;
  margin-bottom: 2px;
}
.cp--navy .cp-detail__key {
  color: rgba(255, 255, 255, 0.32);
}
.cp-detail__val {
  font-size: 14px;
  color: #444;
}
.cp--navy .cp-detail__val {
  color: rgba(255, 255, 255, 0.82);
}
.cp-detail__val a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cp--navy .cp-detail__val a {
  color: rgba(255, 255, 255, 0.85);
}
.cp-address {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.85;
}
.cp--navy .cp-address {
  color: rgba(255, 255, 255, 0.65);
}
.cp-media-note {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: var(--leading-body);
}

/* ── Contact form ───────────────────────────────────────────────────────
   The office's address and phone used to be published as live mailto:/tel:
   links; they are now a form, so the inbox is not in the page source. Control
   styling follows .agm-form, the theme's other hand-rolled form. */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.contact-form__h2 {
  font-family: var(--fh);
  color: var(--navy);
  margin: 0 0 8px;
}
.contact-form__lede {
  margin: 0 0 28px;
  max-width: 58ch;
  color: var(--text-soft);
  line-height: var(--leading-body);
}
.contact-form {
  display: grid;
  gap: 20px;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.contact-field label {
  font-family: var(--fh);
  color: var(--navy);
}
.contact-opt {
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--char);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.2s var(--ease);
}
.contact-field textarea {
  resize: vertical;
  line-height: var(--leading-snug);
}
.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--navy) 40%, transparent);
  outline-offset: 1px;
  border-color: var(--navy);
}
.contact-submit {
  justify-self: start;
}
.contact-privacy {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: var(--leading-body);
}

/* Honeypot. Moved out of view rather than display:none — some bots skip fields
   that are display:none, which would defeat the point. aria-hidden and
   tabindex="-1" in the markup keep it away from real users. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-notice {
  padding: 18px 20px;
  margin-bottom: 28px;
  border-radius: 12px;
  border-left: 3px solid var(--navy);
  background: var(--navy-pale);
  color: var(--char);
  line-height: var(--leading-snug);
}
.contact-notice--ok {
  border-left-color: var(--green);
  background: var(--green-pale);
}

.contact-aside {
  display: grid;
  gap: 24px;
}
.contact-aside .cp-media-note {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 560px) {
  .contact-row {
    grid-template-columns: 1fr;
  }
}

/* ── News & Events page: dated stream ── */
/* The page is chronological, so it splits by *when* (Upcoming / Latest), not
   by post type. Each row is a full-width .c-card carrying a date rail, which
   makes the date the organising axis instead of the 13px grey afterthought it
   used to be. Rows sit in a .c-card-stack; no hairline rules (see DESIGN.md). */

.ne-section--upcoming {
  background: var(--white);
}
.ne-section--latest {
  background: var(--cream);
}

.ne-stream {
  margin-top: 32px;
}

/* Row: date rail + content. Overrides .c-card's flex column. */
.ne-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 38px);
}

/* Date rail */
.ne-item__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Sized to the smaller date type above: at 92px the tile was mostly padding. */
  min-height: 74px;
  padding: 12px 8px;
  border-radius: 12px;
  background: var(--navy-pale);
  color: var(--navy);
  text-align: center;
}
/* Month / day / year read as one date, not as a giant number with two labels.
   The day still leads (it is the part being scanned) but at ~1.5x the month and
   year rather than the 2.4x it used to be, and all three share one muted navy
   so no part drops out of the group. */
.ne-item__mon {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: color-mix(in oklch, var(--navy) 74%, var(--white));
}
.ne-item__day {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}
.ne-item__yr {
  font-family: var(--fb);
  font-size: 13px;
  line-height: 1;
  color: color-mix(in oklch, var(--navy) 74%, var(--white));
}

/* Announced, date to follow. Green so it reads as forthcoming rather than as
   missing data — this is the state the AGM sits in for most of the year. */
.ne-item__rail--tba {
  background: var(--green-pale);
}
.ne-item__tba {
  font-family: var(--fb);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--green-dark);
}

/* Content column */
.ne-item__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
/* Sentence case, not a tracked uppercase eyebrow (DESIGN.md). */
.ne-item__kind {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  color: var(--green-dark);
}
.ne-item__title {
  font-size: clamp(19px, 1.9vw, 23px);
  text-wrap: balance;
}
.ne-item__where {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--text-soft);
}
.ne-item__excerpt {
  font-family: var(--fb);
  font-size: 15px;
  line-height: var(--leading-body);
  color: var(--text-body);
  max-width: 68ch;
}
.ne-item .c-card__more {
  margin-top: 6px;
}

@media (max-width: 640px) {
  /* The rail turns into a horizontal date line above the title: a 92px column
     costs too much of a narrow measure. */
  .ne-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .ne-item__rail {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 7px;
    min-height: 0;
    padding: 9px 13px;
    /* justify-self, not align-self: in a single-column grid the rail would
       otherwise stretch the full card width instead of hugging its date. */
    justify-self: start;
  }
}

/* Empty state. Says what the section will hold rather than only that it is
   empty, so a quiet period does not read as an abandoned site. */
.ne-empty {
  margin-top: 28px;
  padding: 26px 28px;
  border-radius: var(--card-radius);
  background: color-mix(in oklch, var(--navy) 4%, var(--white));
  font-family: var(--fb);
  font-size: 15px;
  line-height: var(--leading-body);
  color: var(--text-body);
  max-width: 62ch;
}


/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer {
  background: var(--char);
  color: var(--white);
  --heading-color: var(--white);
  padding: 80px 0 40px;
  margin-top: auto;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(260px, 300px) 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 60px;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__brand-logo {
  display: flex;
  align-items: center;
}
.footer__brand-logo img {
  display: block;
  height: 40px;
  width: auto;
  /* The French full lockup is the wider of the two; the brand column is sized
     to seat it, so both languages can share one height and sit on one baseline. */
  max-width: 100%;
  object-fit: contain;
  opacity: 0.85;
}
.footer__tag {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.55;
  max-width: 200px;
}
.footer__col-hd {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 18px;
}
.footer__nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer__nav li a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.15s;
}
.footer__nav li a:hover {
  color: var(--white);
}
.footer__info {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.85;
}
.footer__info a {
  color: rgba(255, 255, 255, 0.75);
}
.footer__logos {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}
.footer__logos img {
  max-height: 44px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}
.footer__btm {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}

/* ══════════════════════════════════════
   UTILITIES
══════════════════════════════════════ */
.mt-8 {
  margin-top: 8px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-24 {
  margin-top: 24px;
}
.mt-32 {
  margin-top: 32px;
}
.mt-48 {
  margin-top: 48px;
}
.mt-64 {
  margin-top: 64px;
}
.mt-80 {
  margin-top: 80px;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1100px) {
  :root {
    --g: 40px;
  }
  .partners-g {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .gov-layout,
  .mlead-layout {
    grid-template-columns: 1fr;
  }
  .gov-sidebar,
  .mlead-rail {
    position: static;
  }
}
@media (max-width: 860px) {
  :root {
    --g: 28px;
  }
  .editorial-split,
  .c-editorial-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .c-editorial-split--flush {
    min-height: 0;
  }
  .c-editorial-split--media-right .editorial-split__media,
  .c-editorial-split--media-right .editorial-split__content {
    order: unset;
  }
  .editorial-split__media {
    min-height: 280px;
    max-height: 42vh;
  }
  .c-editorial-split--contained .editorial-split__media {
    max-width: 520px;
    max-height: none;
  }
  .editorial-split__content {
    max-width: none;
    padding: 48px var(--g) 64px;
  }
  .c-editorial-split--contained .editorial-split__content {
    padding: 0;
  }
  .studies-intro,
  .pub-intro,
  .c-page-intro,
  .nmo-blk,
  .contact-g,
  .mem-cats {
    grid-template-columns: 1fr;
  }
  .catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .catalog-toolbar__search {
    max-width: none;
  }
  .catalog-sort {
    width: 100%;
  }
  .filter-bar {
    gap: 6px;
    padding: 16px 0 18px;
  }
  .filter-chip {
    font-size: 12px;
    padding: 5px 11px;
  }
  .study-row {
    padding: 22px 0;
  }
  .study-row:hover {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .study-row__title {
    font-size: 16px;
  }
  .gov-members-g,
  .mlead-grid {
    grid-template-columns: 1fr 1fr;
  }
  .seminar-meta {
    grid-template-columns: 1fr 1fr;
  }
  .nav__burger {
    display: inline-flex;
  }
  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0 24px;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0s linear 0.18s;
    z-index: 5500;
  }
  .nav.is-open .nav__links {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav__links > li {
    width: 100%;
    border-bottom: 1px solid var(--border);
  }
  .nav__links > li > a,
  .nav__links .nav-dd__toggle {
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--char);
  }
  .nav__links > li:not(.nav-dd) > a.active::after,
  .nav__links .nav-dd__toggle.active::after {
    left: 24px;
    right: auto;
    width: 24px;
    bottom: 6px;
  }
  /* Inline submenus on mobile — no hover needed */
  .nav__links .nav-dd {
    position: static;
  }
  .nav__links .nav-dd__toggle::before {
    display: none;
  }
  .nav__links .nav-dd__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px;
    min-width: 0;
    background: var(--cream);
  }
  .nav__links .nav-dd__menu::before {
    display: none;
  }
  .nav__links .nav-dd__menu li a {
    padding: 10px 24px 10px 40px;
    font-size: 14px;
    font-weight: 400;
  }
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .footer__logos {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .nmo-blk {
    padding: 40px;
  }
  .mem-cat__inner {
    padding: 24px 22px 28px;
  }
  .seminar-blk {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
    padding: 36px;
  }
  .seminar-blk .btn {
    justify-self: start;
  }
  #investigators-list {
    min-height: 0;
  }
  .investigators-list-header {
    flex-direction: column;
    align-items: stretch;
  }
  .investigators-list-meta {
    padding-top: 0;
  }
}
@media (max-width: 540px) {
  :root {
    --g: 20px;
  }
  .seminar-meta {
    grid-template-columns: 1fr;
  }
  .contact-g {
    grid-template-columns: 1fr;
  }
  .partners-g {
    grid-template-columns: repeat(2, 1fr);
  }
}

.entity-sec-hd {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 1.25rem;
  color: var(--navy);
  margin: 2.5rem 0 1rem;
}
.entity-sec-hd:first-child {
  margin-top: 0;
}
.entity-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}
.entity-list a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}

/* Event photo gallery (single-cirn_event) --------------------------------- */
.event-gallery__caption {
  margin: -0.35rem 0 1rem;
  max-width: 62ch;
  color: color-mix(in srgb, var(--char) 72%, transparent);
  font-size: 0.94rem;
  line-height: 1.55;
}

.event-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--card-gap);
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.event-gallery__item {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: var(--cream);
}
.event-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.entity-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--navy);
}
.entity-desc {
  display: block;
  margin-bottom: 2rem;
  padding-bottom: 0;
  border-bottom: none;
  text-align: left;
}
.entity-logo {
  max-width: 220px;
  height: auto;
  object-fit: contain;
}
.entity-meta-line .entity-badge {
  margin-right: 0.5rem;
}
.institutions-grid {
  margin-bottom: 2.5rem;
}
.entity-count {
  font-size: 0.875rem;
  color: var(--char);
  opacity: 0.85;
  margin-top: 0.35rem;
}

/* ══════════════════════════════════════
   INSTITUTIONS DIRECTORY
══════════════════════════════════════ */
.inst-controls {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 2rem;
}

.inst-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.inst-search-wrap {
  position: relative;
  flex: 1 1 460px;
  min-width: 260px;
}

.inst-search {
  width: 100%;
  max-width: 440px;
  padding: 11px 16px;
  font-family: var(--fb);
  font-size: 0.9375rem;
  color: var(--char);
  background: var(--white);
  border: 1.5px solid var(--border);
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.inst-search:focus {
  border-color: var(--navy);
}

.inst-search::placeholder {
  color: var(--text-placeholder);
}

.inst-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  flex: 0 1 auto;
}

.inst-filter-pill {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    border-color 0.14s,
    color 0.14s,
    background 0.14s;
  border-radius: 0;
}

.inst-filter-pill:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.inst-filter-pill.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.inst-province-group {
  margin-top: 3.25rem;
}
.inst-province-hd {
  margin-top: 3.25rem;
}

.inst-province-group:first-child .inst-province-hd {
  margin-top: 0;
}

.inst-rows,
.entity-rows {
  border-top: 1px solid var(--border);
}

.inst-row,
.entity-row {
  border-bottom: 1px solid var(--border);
}

.inst-row__link,
.entity-row__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 0;
  color: inherit;
  text-decoration: none;
}

.inst-row__link:hover .inst-row__name,
.entity-row__link:hover .entity-row__name {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inst-row__name,
.entity-row__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  flex: 1;
  min-width: 0;
}

.inst-row__meta,
.entity-row__meta {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.inst-row__loc,
.entity-row__loc {
  font-size: 0.8125rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.inst-row__count,
.entity-row__count {
  font-size: 0.8125rem;
  color: var(--text-faint);
  min-width: 96px;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

.inst-row--dim .inst-row__name {
  color: var(--text-soft);
  font-weight: 500;
}

.inst-row--dim .inst-row__count {
  color: var(--text-placeholder);
}

/* ══════════════════════════════════════
   STUDIES DIRECTORY — index card stack
   Uses the .c-card surface with a bespoke internal layout (per
   docs/design/card-surface-system.md "Bespoke panels"), prefixed
   .study-index-card — never .study-card, which is reserved for the
   Events teaser above.
══════════════════════════════════════ */

/* Enrollment-priority group sections (Currently Enrolling / By Referral /
   Other Studies). Plain content divider, not a card surface — the cards
   underneath already carry the surface weight. */
.study-group + .study-group {
  margin-top: 48px;
}
.study-group__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--fh, "Mundial"), sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.study-group__count {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-faint);
}

.study-index-card {
  align-items: stretch;
  gap: 12px;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.study-index-card:hover,
.study-index-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

.study-index-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.study-index-card__meta {
  font-size: 13px;
  color: var(--text-faint);
  margin-left: auto;
}

/* Enrollment pill: small-radius sentence-case (never a full 999px pill), per
   DESIGN.md badge-shape discipline. Visual weight follows the design spec:
   enrolling = solid green, by_referral = navy outline, closed states = muted. */
.study-enroll-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 11px;
  border-radius: 8px;
  white-space: nowrap;
}
.study-enroll-badge--enrolling {
  background: var(--green);
  color: var(--white);
}
.study-enroll-badge--referral {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--navy);
}
.study-enroll-badge--closed {
  background: var(--cream);
  color: var(--text-soft);
}
.study-index-card__enroll-text {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
}

.study-index-card__title {
  font-family: var(--fh);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.study-index-card__title a {
  color: var(--navy);
  text-decoration: none;
}
.study-index-card__title a:hover,
.study-index-card__title a:focus-visible {
  color: var(--green);
}

.study-index-card__by {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
}

.study-index-card__teaser {
  font-size: 15px;
  color: var(--text-body);
  line-height: var(--leading-relaxed);
}

.study-index-card__priorities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.study-index-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 4px;
}
.study-index-card__ask.btn {
  padding: 10px 20px;
  font-size: 13.5px;
}
.study-index-card__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.study-index-card__view svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease);
}
.study-index-card__view:hover,
.study-index-card__view:focus-visible {
  color: var(--green);
}
.study-index-card__view:hover svg,
.study-index-card__view:focus-visible svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .study-index-card,
  .study-index-card__view svg {
    transition: none;
  }
}

/* ══════════════════════════════════════
   STUDY SINGLE PAGE
══════════════════════════════════════ */

.study-main-section {
  padding: 64px 0 80px;
}

.study-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.study-back-link:hover {
  color: #fff;
}

/* Status badge */
.study-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 100px;
}
.study-status-badge::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.study-status-badge--active {
  background: var(--green-pale);
  color: var(--green-dark);
}
.study-status-badge--completed {
  background: var(--navy-pale);
  color: var(--navy);
}
.study-status-badge--planned {
  background: color-mix(in oklch, #f59e0b 14%, white);
  color: #92400e;
}

/* Two-column grid */
.study-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 80px;
  align-items: start;
}

/* Left: body */
.study-body__heading {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1.25rem;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--green);
}

.study-body__desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--char);
}
.study-body__desc p {
  margin: 0 0 1.25em;
}
.study-body__desc p:last-child {
  margin-bottom: 0;
}
.study-body__desc ul,
.study-body__desc ol {
  margin: 0 0 1.25em;
  padding-left: 1.4em;
}
.study-body__desc li {
  margin-bottom: 0.4em;
}
.study-body__desc a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.study-body__desc a:hover {
  color: var(--green);
}

/* Right: sidebar — Participation card (real ask, state-specific copy + action;
   see cirn_study_participation_copy()). Sits above .study-details-card as the
   first sidebar child, so it also lands first on narrow viewports where
   .study-sidebar gets order:-1 and stacks above the body (see the media query
   near the end of this section) — no separate "mirrored" markup needed. */
.study-participation-card {
  background: var(--white);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 24px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.study-participation-card__copy {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: var(--leading-relaxed);
}
.study-participation-card__action.btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Right: sidebar card */
.study-details-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  position: sticky;
  top: calc(var(--nav-h) + 28px);
}

.study-details-card__title {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.study-details-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.study-details-item:first-of-type {
  padding-top: 0;
}
.study-details-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.study-details-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(28, 28, 28, 0.45);
  margin-bottom: 7px;
}

.study-details-value {
  font-size: 14px;
  color: var(--char);
  line-height: 1.5;
}
.study-details-sub {
  margin-top: 2px;
  font-size: 13px;
  color: color-mix(in oklch, var(--char) 70%, white);
}

.study-details-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.study-details-links li + li {
  margin-top: 5px;
}
.study-details-links a,
.study-details-link {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 14px;
  transition: color 0.15s;
}
.study-details-links a:hover,
.study-details-link:hover {
  color: var(--green);
}

.study-details-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Research-priority pills (sidebar) — soft chips, not links */
.study-priority-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.study-priority-pill {
  display: inline-block;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
  background: color-mix(in srgb, var(--green) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--green) 28%, #fff);
  border-radius: 999px;
  padding: 4px 10px;
}

/* External-links rich block — keep link list tight */
.study-body__links ul {
  margin: 0;
  padding-left: 1.1rem;
}
.study-body__links a {
  word-break: break-word;
}

/* Section headings below fold */
.study-section-hd {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1.5rem;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--green);
}

/* Responsive */
@media (max-width: 1100px) {
  .study-layout {
    grid-template-columns: 1fr 300px;
    gap: 48px;
  }
}
@media (max-width: 860px) {
  .study-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .study-sidebar {
    order: -1;
    margin-bottom: 40px;
  }
  .study-details-card {
    position: static;
  }
}

/* ============================================================
   Investigator profile — affiliation fact-bar + about
   Layered single-column layout. Each fact-bar cell renders only
   when populated and flexes to fill the row; the band reads as
   finished even with a single cell (the typical investigator has
   no bio/photo). See single-cirn_investigator.php.
   ============================================================ */
.investigator-factbar {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.investigator-factbar__inner {
  display: flex;
  flex-wrap: wrap;
}
.investigator-factbar__cell {
  flex: 1 1 220px;
  min-width: 0;
  padding: 28px 36px;
  border-left: 1px solid var(--border);
}
.investigator-factbar__cell:first-child {
  border-left: none;
  padding-left: 0;
}
.investigator-factbar__cell:last-child {
  padding-right: 0;
}
.investigator-factbar__label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--char) 50%, white);
  margin-bottom: 10px;
}
.investigator-factbar__value {
  font-size: 15px;
  line-height: 1.5;
  color: var(--char);
}
.investigator-factbar__value > a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.investigator-factbar__value > a:hover {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.investigator-factbar__sub {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in oklch, var(--char) 70%, white);
}
.investigator-factbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.investigator-factbar__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.investigator-factbar__links li + li {
  margin-top: 5px;
}
.investigator-factbar__links a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 14px;
  transition: color 0.15s;
}
.investigator-factbar__links a:hover {
  color: var(--green);
}
.investigator-factbar__institutions {
  list-style: none;
  margin: 0;
  padding: 0;
}
.investigator-factbar__institutions li + li {
  margin-top: 8px;
}
.investigator-factbar__institutions a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.investigator-factbar__institutions a:hover {
  color: var(--green);
}
.investigator-factbar__institutions .investigator-factbar__sub {
  display: block;
}
/* About + Areas: two-column split on desktop (About prose left, Areas of
   Interest column right), collapsing to a single stack below 860px. */
.member-bio-cols--split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 0;
  align-items: start;
}
.member-bio-cols__main {
  min-width: 0;
}
/* Areas column lands in the final third and matches the fact-bar's 36px cell
   gutter, so its left edge lines up under the Links cell above (both live in
   the same .l-shell). */
.member-bio-cols__aside {
  padding-left: 36px;
}
.member-areas__hd.study-section-hd {
  margin-top: 0;
}
@media (max-width: 860px) {
  .member-bio-cols--split {
    display: block;
  }
  .member-bio-cols--split .member-bio-cols__aside {
    padding-left: 0;
    margin-top: clamp(28px, 6vw, 40px);
  }
}
.member-areas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 64ch;
}
.member-areas__item {
  position: relative;
  padding-left: 1.4em;
  margin: 0.4em 0;
  line-height: 1.45;
}
.member-areas__item::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* About: constrain prose to a readable measure. Reuses
   .study-section-hd (green-underlined heading) and
   .study-body__desc (prose) for visual consistency. */
.investigator-about__measure {
  max-width: 64ch;
}

/* Champion callout: a tasteful navy-tinted card reusing the About measure +
   champion badge, shown on a champion's profile when a statement is seeded. */
.investigator-champion__card {
  max-width: 72ch;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--card-border-color, var(--border));
  border-left: 3px solid var(--navy);
  border-radius: 8px;
  background: color-mix(in oklch, var(--navy) 4%, white);
}
.investigator-champion__badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 12px;
}
.investigator-champion__hd.study-section-hd {
  margin-top: 0;
}

@media (max-width: 760px) {
  .investigator-factbar__inner {
    flex-direction: column;
  }
  .investigator-factbar__cell {
    flex: 1 1 auto;
    padding: 20px 0;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .investigator-factbar__cell:first-child {
    border-top: none;
    padding-top: 24px;
  }
}

/* Entity row: badges sit beside the name cleanly; override shared flex: 1 */
.entity-row__name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.entity-row__name .investigator-card__badge {
  flex-shrink: 0;
}

.inst-empty {
  padding: 3.5rem 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

@media (max-width: 860px) {
  .inst-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .inst-filters {
    justify-content: flex-start;
  }

  .inst-search {
    max-width: 100%;
  }

  .inst-row__meta,
  .entity-row__meta {
    gap: 16px;
  }

  .inst-row__loc,
  .entity-row__loc {
    display: none;
  }

  .inst-row__count,
  .entity-row__count {
    min-width: auto;
  }
}

@media (max-width: 600px) {
  .inst-row__link,
  .entity-row__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 11px 0;
  }

  .inst-row__meta,
  .entity-row__meta {
    gap: 10px;
  }

  .inst-row__loc,
  .entity-row__loc {
    display: block;
  }

  .inst-row__count,
  .entity-row__count {
    text-align: left;
    min-width: auto;
  }
}

/* ══════════════════════════════════════
   INSTITUTION DETAIL
══════════════════════════════════════ */
.inst-detail-logo {
  margin-bottom: 2rem;
}

.inst-detail-sec-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2.5rem 0 1.25rem;
}

.inst-detail-sec-hd:first-child {
  margin-top: 0;
}

.inst-detail-count {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-placeholder);
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}

.inst-res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  margin-bottom: 1rem;
}

.inst-res-card {
  text-decoration: none;
  color: inherit;
}

@media (max-width: 600px) {
  .inst-res-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════
   NETWORK DETAIL
══════════════════════════════════════ */
.net-inst-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 12px;
  text-decoration: none;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.net-inst-pill:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.inst-res-card--lead .investigator-card__badge {
  background: var(--green);
  color: #fff;
}

/* ══════════════════════════════════════
   NETWORKS DIRECTORY — net-card built on .c-card
══════════════════════════════════════ */

/* Banner bleeds to the card edges, so its negative margin uses --card-pad */
.net-card.c-card {
  padding: var(--card-pad);
  gap: 0;
  overflow: hidden;
  /* full-width banner bleed + eyebrow spread need stretched children
     (base .c-card aligns children to flex-start) */
  align-items: stretch;
}

.net-card__eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.net-card__banner {
  height: 160px;
  background-color: var(--nc, var(--navy));
  background-size: cover;
  background-position: center;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--card-gap);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.net-card__name {
  font-family: var(--fh);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 auto;
  padding-bottom: 16px;
}

@media (max-width: 1100px) {
  .c-card-grid--3up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Page banner image (below the page header, above content) — legacy fallback */
.page-hero-img {
  margin: 0;
  overflow: hidden;
}
.page-hero-img__img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

/* Membership category photo */
.tp__photo {
  margin-top: 1.25rem;
  border-radius: 6px;
  overflow: hidden;
}
.tp__photo-img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Section banner image */
.sec-banner {
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
}
.sec-banner__img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
}

/* About page — section helpers */
.sec__lede {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-soft);
  max-width: 680px;
  line-height: var(--leading-snug);
  margin-top: 1.25rem;
}
.sec__prose {
  max-width: 760px;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--char);
}
.sec__prose p {
  margin: 0 0 1rem;
}
.sec__prose p:last-child {
  margin-bottom: 0;
}

/* About page — who we are / what we do columns */
.about-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  margin-top: 0;
}
.about-col {
  padding-top: 2rem;
  border-top: 3px solid var(--navy);
}
.about-col__title {
  font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  margin: 0 0 1rem;
}
.about-col__body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--char);
}
.about-col__body p {
  margin: 0 0 1rem;
}
.about-col__body p:last-child {
  margin-bottom: 0;
}
.about-col__img {
  margin-top: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
}
.about-col__img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.about-col .btn {
  margin-top: 1.5rem;
}
.about-col__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5rem;
}
.about-col__actions .btn {
  margin-top: 0;
}
@media (max-width: 860px) {
  .about-cols {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* About page — tighter section rhythm */
.page-template-page-about .sec {
  padding: 88px 0;
}
.page-template-page-about .sec:first-of-type {
  padding-top: 100px;
}

/* About page — timeline (marker rail) */
.timeline {
  --tl-rail-x: 7px; /* centre of the spine, from the left edge */
  --tl-node: 15px; /* node marker diameter */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2.25rem 0 0;
  padding-left: calc(var(--tl-rail-x) + 1.75rem);
}
/* The spine — fades out before the last node so the rail "ends" cleanly. */
.timeline::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 1.5rem;
  left: var(--tl-rail-x);
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    var(--navy) 0%,
    var(--navy) 88%,
    color-mix(in oklch, var(--navy) 0%, transparent) 100%
  );
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  background: var(--white);
  border: 1px solid color-mix(in oklch, var(--navy) 8%, transparent);
  border-radius: 14px;
  padding: 1rem 1.25rem 1.1rem;
  box-shadow: 0 14px 36px -24px
    color-mix(in oklch, var(--navy) 40%, transparent);
  transition:
    transform 0.45s var(--ease),
    opacity 0.45s var(--ease),
    box-shadow 0.2s var(--ease);
}
/* Node marker, centred on the spine and vertically aligned to the year. */
.timeline__marker {
  position: absolute;
  top: 1.2rem;
  left: calc(-1.75rem - var(--tl-node) / 2);
  width: var(--tl-node);
  height: var(--tl-node);
  border-radius: 50%;
  background: var(--green);
  box-shadow:
    0 0 0 4px var(--cream),
    0 0 0 5px color-mix(in oklch, var(--green) 35%, transparent);
  transition:
    box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.timeline__item:hover {
  box-shadow: 0 22px 46px -24px
    color-mix(in oklch, var(--navy) 50%, transparent);
}
.timeline__item:hover .timeline__marker {
  transform: scale(1.12);
  box-shadow:
    0 0 0 4px var(--cream),
    0 0 0 6px color-mix(in oklch, var(--green) 55%, transparent);
}
.timeline__year {
  font-family: var(--fh);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.timeline__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--char);
}

/* Subtle scroll reveal (progressive enhancement — see assets/js/timeline.js).
   Hidden state only applies once JS has tagged the rail as ready. */
.timeline[data-timeline-ready] .timeline__item {
  opacity: 0;
  transform: translateY(12px);
}
.timeline[data-timeline-ready] .timeline__item.is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .timeline__item {
    transition: box-shadow 0.2s var(--ease);
  }
  .timeline[data-timeline-ready] .timeline__item {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 540px) {
  .timeline__year {
    font-size: 1.25rem;
  }
  .timeline {
    padding-left: calc(var(--tl-rail-x) + 1.35rem);
  }
  .timeline__marker {
    left: calc(-1.35rem - var(--tl-node) / 2);
  }
}

/* About page — priority grid */
.priorities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.priority-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.priority-card__img {
  line-height: 0;
}
.priority-card__img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.priority-card__num {
  font-family: var(--fh);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
  padding: 1.25rem 1.5rem 0;
}
.priority-card__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--char);
  padding: 0 1.5rem 1.5rem;
}
@media (max-width: 1100px) {
  .priorities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .priorities-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   INVESTIGATORS DIRECTORY — layout, filter rail, leadership badges
   ======================================================================== */

.investigators-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px 80px;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .investigators-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

#investigators-list {
  min-width: 0;
}

.investigators-cards {
  display: flex;
  flex-direction: column;
}

.investigator-group {
  padding: 16px 0;
}
.investigator-group-hd {
  padding: 8px 24px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.investigator-group-hd__name {
  font-family: var(--fh);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--navy);
}
.investigator-group-hd__loc {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.investigator-card {
  display: block;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--char);
}
.investigator-card:hover {
  background: rgba(244, 243, 238, 0.55);
}
.investigator-card:hover .investigator-card__name {
  color: var(--green);
}
.investigator-card__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
}
.investigator-card__name {
  font-family: var(--fh);
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
}
.investigator-card__role {
  color: #444;
  font-size: 13px;
  margin-top: 2px;
}
.investigator-card__inst {
  color: #666;
  font-size: 13px;
  margin: 4px 0 0;
}

.investigator-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.r-badge {
  font-family: var(--fh);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
}
.r-badge--pi {
  background: var(--navy);
  color: #fff;
}
.r-badge--lead {
  background: var(--badge-color, var(--navy));
  color: #fff;
}
.r-badge--lead-more {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
}
.r-badge--champion {
  background: var(--cream);
  color: var(--navy);
  border: 1px solid var(--navy);
}

/* Filter rail */
.investigators-filters {
  position: sticky;
  top: calc(var(--nav-h) + 60px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: var(--fb);
  font-size: 13px;
  color: var(--char);
}
@media (max-width: 1100px) {
  .investigators-filters {
    position: static;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    background: var(--cream);
  }
}
.investigators-filters__group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.investigators-filters__group legend {
  font-family: var(--fh);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: var(--navy);
  margin-bottom: 6px;
}
.investigators-filters__group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.investigators-filters__group label input {
  margin: 0;
}
.facet-count {
  color: #777;
  font-size: 11px;
}

.investigators-filters__inst-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
}
.investigators-filters__inst-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.inst-chip {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}
.investigators-filters__inst-suggest {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  max-height: 200px;
  overflow-y: auto;
}
.investigators-filters__inst-suggest li {
  padding: 6px 10px;
  cursor: pointer;
}
.investigators-filters__inst-suggest li:hover {
  background: var(--cream);
}

.investigators-filters__clear {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font: inherit;
}

.investigators-empty {
  padding: 32px 0;
  color: #666;
  text-align: center;
}

/* ══════════════════════════════════════
   CIRN SITES — interactive Canada map synced to a site list
   (taught from docs/design/examples/cirn-home-fullbleed-hero.html)

   Navy band: a callback to the full-bleed hero / page-header scrim — same
   168deg navy→navy-deep gradient + fine paper grain. The map figure and site
   list are restyled for the dark surface (translucent-white panels, white
   text). Heading colour overrides the `.home .sec__title { navy }` rule. */
.cirn-sites {
  position: relative;
  overflow: hidden;
  color: var(--white);
  --heading-color: var(--white);
  background: linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.cirn-sites::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cirn-sites > .wrap {
  position: relative;
  z-index: 1;
}
.cirn-sites .sec__title {
  color: var(--white);
}
.cirn-sites__head {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.cirn-sites__head p {
  margin-top: 12px;
  font-size: 16.5px;
  color: var(--white-72);
  line-height: 1.6;
}
/* Two-column split: map left (1.35fr), site directory right (1fr).
   `.cirn-map` is the grid wrapper around the figure + list; the SVG pins it
   contains keep working with the `.cirn-map .pin` JS selector. */
.cirn-map {
  margin-top: clamp(32px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.cirn-map__fig {
  /* No card on navy — the map sits directly on the band. */
  padding: 0;
}
.cirn-map__svg {
  width: 100%;
  height: auto;
}
.cirn-map .land {
  fill: rgba(255, 255, 255, 0.1);
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 0.7;
  transition: fill 0.3s var(--ease);
}
.cirn-map .pin {
  cursor: pointer;
}
.cirn-map .pin .dot {
  fill: var(--green);
  stroke: var(--white);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s var(--ease);
}
.cirn-map .pin .ring {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.cirn-map .pin .lbl {
  font: 600 19px var(--fb);
  fill: var(--white);
  text-anchor: middle;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
  paint-order: stroke;
  stroke: var(--navy-deep);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.cirn-map .pin:hover .dot,
.cirn-map .pin.is-active .dot {
  transform: scale(1.55);
}
.cirn-map .pin:hover .ring,
.cirn-map .pin.is-active .ring {
  opacity: 0.6;
}
.cirn-map .pin:hover .lbl,
.cirn-map .pin.is-active .lbl {
  opacity: 1;
}
.cirn-sites__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cirn-siterow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 11px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--fb);
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}
a.cirn-siterow:hover,
a.cirn-siterow:focus-visible {
  color: inherit;
}
.cirn-siterow:hover,
.cirn-siterow.is-active,
.cirn-siterow:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.5);
  outline: none;
}
.cirn-siterow__city {
  font-weight: 600;
  color: var(--white);
  font-size: 15.5px;
  min-width: 104px;
}
.cirn-siterow__inst {
  font-size: 14px;
  color: var(--white-72);
}
.cirn-siterow__inst a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}
.cirn-siterow__inst a:hover,
.cirn-siterow__inst a:focus-visible {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.55);
  outline: none;
}
.cirn-siterow__sep {
  opacity: 0.7;
}
.cirn-sites__note {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 16px;
  padding-left: 14px;
}
.cirn-sites .btn {
  display: flex;
  width: fit-content;
  margin-top: clamp(32px, 4vw, 44px);
  margin-inline: auto;
}

/* ══════════════════════════════════════
   OUR PARTNERS — paused-on-hover logo marquee
══════════════════════════════════════ */
.cirn-partners {
  background: var(--white);
  border-top: 1px solid var(--border);
}
.cirn-partners__head {
  text-align: center;
}
/* D3: Partners navigational button below the logo marquee. */
.cirn-partners__foot {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}
.cirn-marquee {
  /* The track is `width: max-content` (~5000px). Without containment, that
     intrinsic width propagates up the auto-width chain (section -> main ->
     .page-wrap flex item in the column-flex <body>) and forces page-wide
     horizontal overflow. `contain: inline-size` makes this element size from its
     containing block and contribute 0 to ancestor intrinsic sizing, so the track
     is clipped here and nothing upstream is inflated. Kept entirely local so the
     global page wrapper and other templates are untouched. */
  contain: inline-size;
  max-width: 1360px;
  margin: 40px auto 0;
  padding-inline: var(--g);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
}
.cirn-marquee__track {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: cirn-marquee 50s linear infinite;
}
.cirn-marquee:hover .cirn-marquee__track,
.cirn-marquee:focus-within .cirn-marquee__track {
  animation-play-state: paused;
}
@keyframes cirn-marquee {
  to {
    transform: translateX(-50%);
  }
}
.cirn-logo {
  flex: 0 0 auto;
  height: 78px;
  min-width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  background: var(--cream);
  border: 1px solid color-mix(in oklch, var(--navy) 8%, transparent);
  border-radius: 14px;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.cirn-logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px
    color-mix(in oklch, var(--navy) 45%, transparent);
}
.cirn-logo img {
  max-height: 44px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.72);
  transition: filter 0.25s var(--ease);
}
.cirn-logo:hover img {
  filter: grayscale(0) opacity(1);
}
/* PHAC / CIHR: light wordmarks — darkened SVG fills + edge shadow on cream cards */
.cirn-logo--light-mark img {
  filter: grayscale(1) opacity(0.88)
    drop-shadow(0 0 0.6px rgba(28, 28, 28, 0.55))
    drop-shadow(0 1px 2px rgba(28, 28, 28, 0.35))
    drop-shadow(0 2px 6px rgba(20, 47, 112, 0.14));
}
.cirn-logo--light-mark:hover img {
  filter: grayscale(0) opacity(1) drop-shadow(0 0 0.5px rgba(28, 28, 28, 0.4))
    drop-shadow(0 2px 8px rgba(20, 47, 112, 0.18));
}

@media (max-width: 980px) {
  .cirn-map {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: stretch;
  }
  .cirn-map__fig {
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }
  .cirn-sites__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 32px;
  }
}
@media (max-width: 560px) {
  .cirn-sites__list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .cirn-logo {
    height: 66px;
    min-width: 150px;
    padding: 0 22px;
  }
  .cirn-logo img {
    max-height: 36px;
    max-width: 120px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cirn-marquee__track {
    animation: none;
  }
  .cirn-map .land,
  .cirn-map .pin .dot,
  .cirn-map .pin .ring,
  .cirn-map .pin .lbl,
  .cirn-siterow,
  .cirn-logo {
    transition: none;
  }
}

/* ═══════════════════════════ ENTITY DIRECTORY INDEX (editorial rows) ═══════════════════════════ */
/* Namespaced .edir-* to avoid collision with the pre-existing .entity-row list
   used by single-cirn_institution / single-cirn_network. */
/* entity-directory.js filters by toggling the `hidden` attribute on items. The
   rows/cards set an explicit display (flex/grid), and author styles beat the UA
   [hidden]{display:none} rule regardless of specificity — so without this, the
   result count updated but rows never disappeared. Force-hide filtered items. */
[data-edir-item][hidden] {
  display: none !important;
}
.edir-index {
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--navy) 10%, transparent);
  border-radius: 16px;
  overflow: hidden;
}
/* Grouped lists (e.g. Institutions by province) get sticky group headers. Swap
   the card clip to overflow:clip so it still rounds the corners without trapping
   the sticky headers in a scroll container (overflow:hidden would pin them). */
.edir-index.is-grouped {
  overflow: clip;
}
.edir-group {
  position: sticky;
  top: calc(var(--nav-h, 66px) + var(--edir-bar-h, 60px) + 6px);
  z-index: 4;
  display: flex;
  align-items: center;
  padding: 11px 30px;
  background: color-mix(in oklch, var(--navy) 5%, #fff);
  border-bottom: 1px solid var(--border);
  font-family: var(--fh, "Mundial"), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}
.edir-group + .edir-row {
  border-top: none;
}
/* Nested sub-header (e.g. city within an Institutions province group): lighter
   weight than the province banner and not sticky of its own — stacking two
   sticky bands reads busier, not clearer, so only the top tier pins. */
.edir-group--sub {
  position: static;
  top: auto;
  z-index: auto;
  padding: 9px 30px 9px 42px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #888;
}
@media (max-width: 600px) {
  .edir-group {
    padding: 9px 20px;
  }
  .edir-group--sub {
    padding: 8px 20px 8px 32px;
  }
}
.edir-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.25s var(--ease);
}
.edir-row:last-child {
  border-bottom: none;
}
/* hover scrim: white on the left so the heading stays legible, navy-deep on the
   right so the white "View network" CTA + arrow have contrast over the photo */
.edir-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    #fff 18%,
    rgba(255, 255, 255, 0) 44%,
    color-mix(in oklch, var(--navy-deep) 0%, transparent) 50%,
    color-mix(in oklch, var(--navy-deep) 60%, transparent) 72%,
    color-mix(in oklch, var(--navy-deep) 92%, transparent) 100%
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.edir-row__lead {
  position: relative;
  z-index: 2;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.edir-row__primary {
  font-family: var(--fh, "Mundial"), sans-serif;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
  transition: color 0.25s var(--ease);
}
.edir-row--abbr .edir-row__primary {
  font-size: clamp(30px, 3.4vw, 44px);
}
.edir-row--name .edir-row__primary {
  font-size: 21px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.edir-row__secondary {
  font-size: 15px;
  color: #555;
  margin-top: 9px;
  max-width: 42ch;
}
.edir-row__meta {
  position: relative;
  z-index: 2;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.edir-row__meta b {
  color: var(--green);
  font-family: var(--fh, "Mundial"), sans-serif;
  font-size: 17px;
  font-weight: 600;
}
.edir-row__metric-wrap {
  display: contents;
}
/* hover call-to-action revealed before the arrow (e.g. "View network") */
.edir-row__cta {
  opacity: 0;
  transform: translateX(6px);
  font-weight: 600;
  color: inherit;
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.edir-row:hover .edir-row__cta {
  opacity: 1;
  transform: none;
}
.edir-row__arrow {
  width: 20px;
  height: 20px;
  color: var(--green);
  transition: transform 0.25s var(--ease);
}
/* hover photo-peek: fades in from the right, masked to dissolve into white */
.edir-row__peek {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%);
  mask-image: linear-gradient(90deg, transparent, #000 58%);
}
.edir-row:hover {
  background: var(--navy-pale);
}
.edir-row:hover .edir-row__primary {
  color: var(--green);
}
.edir-row:hover .edir-row__arrow {
  transform: translateX(5px);
}
.edir-row:has(.edir-row__peek):hover .edir-row__peek {
  opacity: 1;
  transform: translateX(0);
}
.edir-row:has(.edir-row__peek):hover::after {
  opacity: 1;
}
/* over the photo, the right-side CTA + arrow read in white (no pill); a soft
   navy shadow keeps them legible even when a network's photo is light */
.edir-row:has(.edir-row__peek):hover .edir-row__meta,
.edir-row:has(.edir-row__peek):hover .edir-row__arrow {
  color: #fff;
}
.edir-row:has(.edir-row__peek):hover .edir-row__meta {
  text-shadow: 0 1px 6px color-mix(in oklch, var(--navy-deep) 78%, transparent);
}
.edir-row:has(.edir-row__peek):hover .edir-row__arrow {
  filter: drop-shadow(
    0 1px 4px color-mix(in oklch, var(--navy-deep) 78%, transparent)
  );
}
/* Home Networks grid only: on hover the left fills navy and the body text
   reverses to white, with the photo peeking from the right. Overrides the
   shared white-left / photo-right scrim used on the directory pages.
   The far-right edge ramps back to navy-deep so the white "View network" CTA
   and arrow keep contrast over bright photos (e.g. a white-sky hospital shot),
   while a clear window in the middle still lets the photo peek through. */
#research-networks .edir-row::after {
  background: linear-gradient(
    90deg,
    var(--navy) 0%,
    var(--navy) 36%,
    color-mix(in oklch, var(--navy) 0%, transparent) 54%,
    color-mix(in oklch, var(--navy) 0%, transparent) 60%,
    color-mix(in oklch, var(--navy-deep) 90%, transparent) 78%,
    color-mix(in oklch, var(--navy-deep) 94%, transparent) 100%
  );
}
#research-networks .edir-row:hover {
  background: var(--navy);
}
#research-networks .edir-row:hover .edir-row__primary {
  color: #fff;
}
#research-networks .edir-row:hover .edir-row__secondary,
#research-networks .edir-row:hover .edir-row__teaser {
  color: color-mix(in oklch, #fff 80%, var(--navy));
}
#research-networks .edir-row:hover .edir-row__meta,
#research-networks .edir-row:hover .edir-row__arrow {
  color: #fff;
}
.edir-row:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

/* ── Network Leads: always-visible inline avatar, before the meta/arrow ──
   Used on the network single (CIRN-42). Sits to the right of the text and
   left of the "View profile" CTA + arrow, above the hover scrim/peek. */
.edir-row__avatar {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--navy-pale, color-mix(in oklch, var(--navy) 6%, #fff));
  background-size: cover;
  background-position: center top;
  box-shadow: 0 0 0 1px var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.edir-row__avatar--placeholder {
  background: color-mix(in oklch, var(--navy) 8%, #fff);
}
.edir-row__avatar-initials {
  font-family: var(--fh, "Mundial"), sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--navy);
}
/* Institution directory: logos are wordmarks/marks, not headshots — fixed
   height so every mark lines up; width scales freely within a soft max. 56px
   (not 36px) because several are square crests (BC CDC, BCCHRI, IWK, Centre
   Muraz, IRESSEF) carrying fine text/detail that reads as a blur any smaller;
   the row has ~55px of vertical headroom before the logo forces it to grow. */
.edir-row__logo {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 200px;
}
.edir-row__logo img {
  display: block;
  height: 56px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
/* keep the avatar readable over the navy-deep hover scrim on the right */
.edir-row:hover .edir-row__avatar {
  box-shadow: 0 0 0 1px color-mix(in oklch, #fff 55%, transparent);
}
/* the lead list never uses the hover photo-peek — the avatar is the imagery */
.edir-index--leads .edir-row__peek {
  display: none;
}
/* avatar/logo already pushed to the right by the flex-grow lead column, so the
   meta cluster (CTA + arrow) sits snug beside it rather than gapped by margin-auto */
.edir-row__avatar + .edir-row__meta,
.edir-row__logo + .edir-row__meta {
  margin-left: 0;
}
/* spacing when the Investigators heading stacks below the Leads list */
.inst-detail-sec-hd--stacked {
  margin-top: 40px;
}

@media (max-width: 600px) {
  .edir-row {
    padding: 22px 20px;
    gap: 14px;
  }
  .edir-row__peek {
    display: none;
  }
  .edir-row--abbr .edir-row__primary {
    font-size: 30px;
  }
  .edir-row__avatar {
    width: 44px;
    height: 44px;
  }
  .edir-row__avatar-initials {
    font-size: 14px;
  }
  .edir-row__logo {
    max-width: 140px;
  }
  .edir-row__logo img {
    height: 44px;
    max-width: 140px;
  }
  .inst-detail-sec-hd--stacked {
    margin-top: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .edir-row,
  .edir-row__primary,
  .edir-row__arrow,
  .edir-row__peek {
    transition: none;
  }
  .edir-row__peek {
    display: none;
  }
}

/* ── shared filter bar (approved: filter-bar.html) ── */
.edir-bar {
  position: sticky;
  top: var(--nav-h, 66px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 18px;
}
.edir-bar__search {
  flex: 1 1 200px;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 12px;
  background: var(--cream);
  border-radius: 9px;
}
.edir-bar__search svg {
  width: 16px;
  height: 16px;
  color: #999;
  flex: none;
}
.edir-bar__search input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--char);
}
.edir-bar__search input:focus {
  outline: none;
}
.edir-drop {
  position: relative;
}
.edir-drop__btn {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
}
.edir-drop__btn svg {
  width: 13px;
  height: 13px;
  color: #888;
  transition: transform 0.18s var(--ease);
}
.edir-drop.is-open .edir-drop__btn {
  border-color: color-mix(in oklch, var(--navy) 40%, white);
}
.edir-drop.is-open .edir-drop__btn svg {
  transform: rotate(180deg);
}
.edir-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 200px;
  max-height: 320px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 16px 40px rgba(20, 47, 112, 0.16);
  padding: 8px;
  display: none;
}
.edir-drop.is-open .edir-menu {
  display: block;
}
.edir-menu label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--char);
  cursor: pointer;
}
.edir-menu label:hover {
  background: var(--navy-pale);
}
.edir-menu input {
  accent-color: var(--navy);
}
.edir-bar__spacer {
  flex: 1;
}
.edir-bar__count {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
}
.edir-bar__count b {
  color: var(--navy);
  font-family: var(--fh, "Mundial"), sans-serif;
}
.edir-seg {
  display: flex;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.edir-seg button {
  border: 0;
  background: transparent;
  padding: 8px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.edir-seg button svg {
  width: 14px;
  height: 14px;
}
.edir-seg button.on {
  background: var(--navy);
  color: #fff;
}
.edir-seg button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* active filter chips */
.edir-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.edir-chips:empty {
  display: none;
}
.edir-chip-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--navy-pale);
  color: var(--navy);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 6px 5px 11px;
  border-radius: 20px;
}
.edir-chip-active__x {
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(20, 47, 112, 0.14);
  color: var(--navy);
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edir-chip-active__x:hover {
  background: rgba(20, 47, 112, 0.26);
}
.edir-clear {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  cursor: pointer;
}

/* view switching */
[data-edir-active-view="rows"] .edir-gallery {
  display: none;
}
[data-edir-active-view="gallery"] .edir-index {
  display: none;
}

/* typographic gallery */
.edir-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.edir-tcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--navy) 10%, transparent);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(20, 47, 112, 0.07);
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.edir-tcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(20, 47, 112, 0.14);
}
.edir-tcard:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.edir-tcard__tile {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  color: #fff;
  font-family: var(--fh, "Mundial"), sans-serif;
  font-weight: 600;
  font-size: 40px;
}
.edir-tcard__name {
  font-family: var(--fh, "Mundial"), sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
  line-height: 1.15;
  padding: 14px 16px 0;
}
.edir-tcard__meta {
  font-size: 12.5px;
  color: #666;
  padding: 6px 16px 0;
}
.edir-tcard__metric {
  font-size: 12px;
  color: #888;
  padding: 8px 16px 16px;
  margin-top: auto;
}
.edir-tcard__metric b {
  color: var(--green);
  font-family: var(--fh, "Mundial"), sans-serif;
  font-size: 15px;
}

@media (max-width: 980px) {
  .edir-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .edir-bar {
    position: static;
  }
  .edir-gallery {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .edir-tcard {
    transition: none;
  }
}

/* ── badges + network tags (rows + cards) ── */
/* Role labels: typographic + brand-coloured (no pill). Champion = navy,
   network lead = green accent, PI = muted navy. Dot-separated when stacked. */
.edir-badge {
  display: inline-block;
  font-family: var(--fb), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--navy);
  white-space: nowrap;
}
.edir-badge--pi {
  color: color-mix(in oklch, var(--navy) 50%, white);
}
.edir-badge--lead {
  color: var(--green);
}
.edir-badge--champion {
  color: var(--navy);
}
/* Institution type: a small-radius background chip (not the typographic-only
   role labels above, not a fully-rounded .c-card__tag pill) — per DESIGN.md's
   "avoid fully-rounded pills, prefer a small radius" guidance. Used on the
   Institutions directory row (badges_html) and its Type facet menu. */
.edir-badge--type {
  font-weight: 600;
  letter-spacing: 0;
  color: var(--navy);
  background: var(--navy-pale);
  border-radius: 8px;
  padding: 3px 9px;
}
.edir-badge--type-unclassified {
  color: #767676;
  background: var(--cream);
  border: 1px solid var(--border);
}
.edir-row__badges .edir-badge + .edir-badge::before,
.edir-pcard__badges .edir-badge + .edir-badge::before {
  content: "B7";
  margin-right: 8px;
  font-weight: 400;
  letter-spacing: 0;
  color: color-mix(in oklch, var(--navy) 32%, white);
}
.edir-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(20, 47, 112, 0.07);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.edir-row__badges {
  display: inline-flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ── Members: Network Leadership (page-members.php) ──
   Sticky rail + role-grouped roster, sharing the Governance rules above
   (.mlead-* is paired into every .gov-* selector in the GOVERNANCE block).
   Replaced ten per-network .c-card-grid sections that each held one to three
   cards: same ~20 people, roughly a third of the height, no dead gutter.
   Only the deltas from the Governance shell live here. */

/* The section title already sits in .sec__hd, so the first group's hairline
   would double up with it. */
.members-leadership .mlead-group:first-child {
  border-top: 0;
  padding-top: 0;
}
.members-leadership .mlead-group:last-child {
  padding-bottom: 0;
}

/* ── Members: "Not yet assigned to a network" index ──
   A second, statically-rendered .edir-index below the JS-grouped one (see
   page-members.php header comment for why it isn't merged into the grouped
   container). Reuses .edir-index chrome; only the heading above it is new. */
.members-unassigned {
  margin-top: 24px;
}
/* entity-directory.js only toggles `hidden` on individual rows — this static
   section's own heading has no JS driving it, so hide the whole block once
   search/filters leave nothing visible inside it (mirrors how the JS-driven
   .edir-group headers above only ever render for groups with a visible row). */
.members-unassigned:not(:has([data-edir-item]:not([hidden]))) {
  display: none;
}
.members-unassigned__heading {
  font-family: var(--fh, "Mundial"), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 12px;
}

/* ── contributor (person) gallery card — portrait-left, locked ~3:4 frame ── */
.edir-gallery--people {
  grid-template-columns: repeat(2, 1fr);
}
.edir-pcard {
  display: flex;
  height: 188px;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--navy) 10%, transparent);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(20, 47, 112, 0.07);
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.edir-pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(20, 47, 112, 0.14);
}
.edir-pcard:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.edir-pcard__photo {
  width: 142px;
  flex: none;
  background-color: #eceae3;
  background-size: cover;
  background-position: top center;
}
.edir-pcard__photo--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  color: #fff;
  font-family: var(--fh, "Mundial"), sans-serif;
  font-weight: 600;
  font-size: 40px;
}
.edir-pcard__body {
  flex: 1;
  min-width: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}
.edir-pcard__name {
  font-family: var(--fh, "Mundial"), sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--navy);
  line-height: 1.1;
}
.edir-pcard__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.edir-pcard__role {
  font-size: 12.5px;
  color: #555;
  line-height: 1.5;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.edir-pcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.edir-pcard__inst {
  font-size: 12px;
  color: #777;
  margin-top: auto;
  padding-top: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edir-sort {
  height: 38px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
}
@media (max-width: 760px) {
  .edir-gallery--people {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .edir-pcard {
    transition: none;
  }
}

/* ══════════════════════════════════════
   PUBLICATIONS DIRECTORY — citation card (.pub-list / .pub-card)
   Bespoke panel on the .c-card surface, like .study-card / .net-card (see
   docs/design/card-surface-system.md's "richer panel" pattern). A citation
   reads top-to-bottom, not as a tile, so the list is a single-column stack
   (.c-card-stack) — never .edir-index, which carries its own white/bordered/
   rounded container chrome that would nest card-inside-card (DESIGN.md: never
   nest cards). Reuses the shared .edir-bar/.edir-drop/.edir-menu/.edir-chips
   toolbar chrome as-is; only the list/card shape below is new.
══════════════════════════════════════ */
.pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pub-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--card-pad);
  background: var(--white);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition:
    box-shadow 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.pub-card:hover,
.pub-card:focus-within {
  box-shadow: var(--card-shadow-hover);
}
.pub-card__title {
  font-family: var(--fh);
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-decoration: none;
}
.pub-card__title:hover,
.pub-card__title:focus-visible {
  color: var(--green);
}
.pub-card__byline {
  margin: 0;
  font-family: var(--fb);
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.5;
}
.pub-card__meta {
  margin: 0;
  font-family: var(--fb);
  font-size: 14px;
  color: color-mix(in oklch, var(--char) 55%, transparent);
  line-height: 1.5;
}
.pub-card__extra {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}
.pub-card__abstract {
  margin: 0;
  font-family: var(--fb);
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
}
.pub-card__doi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.pub-card__doi:hover,
.pub-card__doi:focus-visible {
  text-decoration: underline;
}
.pub-card__doi-arrow {
  width: 12px;
  height: 12px;
  flex: none;
}
.pub-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}
/* Sentence-case chip, small radius — never the fully-rounded 999px pill. */
.pub-card__tag {
  display: inline-block;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  background: color-mix(in oklch, var(--navy) 8%, var(--white));
  border-radius: 8px;
  padding: 3px 9px;
}
@media (max-width: 600px) {
  .pub-card {
    padding: clamp(18px, 4vw, 24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pub-card {
    transition: none;
  }
}

/* Partners page */
.partners-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1.5rem;
	align-items: center;
}
.partners-grid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	padding: 1rem;
}
.partners-grid__item img {
	max-width: 100%;
	height: auto;
	max-height: 72px;
}
.partners-grid__name {
	font-weight: 600;
	color: var(--navy);
	text-align: center;
}
.partners-empty {
	color: color-mix(in srgb, var(--char) 65%, transparent);
}

/* ── VIEW TRANSITIONS (same-document only; DESIGN.md motion) ──
   Cross-document navigation is off — animating between scroll positions on
   full page loads reads as disorienting scroll movement on desktop. */
@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.vt-lang::view-transition-old(root) {
    animation: vt-fade-out 0.22s var(--ease) both;
  }

  html.vt-lang::view-transition-new(root) {
    animation: vt-fade-in 0.22s var(--ease) both;
  }

  html.vt-edir-view [data-edir-list] {
    view-transition-name: edir-results;
  }

  ::view-transition-old(edir-results) {
    animation: vt-fade-out 0.26s var(--ease) both;
  }

  ::view-transition-new(edir-results) {
    animation: vt-fade-in 0.26s var(--ease) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
}

/* ===== Map page ===== */
/* Cap width on ultrawide/2K so the canvas stays a focused composition, not edge-to-edge sprawl. */
body:has(.map-page) {
  background: var(--cream);
}
.map-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-h));
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  background: #fff;
  border-inline: 1px solid var(--border);
  box-sizing: border-box;
}
.map-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 14px 22px; border-bottom: 1px solid var(--border); background: #fff; }
.map-title { font-family: var(--fh); color: var(--navy); font-size: 1.25rem; margin: 0; }
.map-stats { margin: 2px 0 0; font-size: .8rem; color: color-mix(in srgb, var(--char) 65%, #fff); }
.map-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.map-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.map-chip { font: 600 .72rem/1 var(--fb); padding: 6px 11px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--cream); color: var(--navy); cursor: pointer; }
.map-chip[style*="--net"]::before { content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--net); margin-right: 6px; vertical-align: middle; }
.map-chip.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.map-leadership, .map-reset { font: 600 .72rem/1 var(--fb); padding: 6px 12px; border-radius: 99px;
  border: 1px solid var(--border); background: #fff; color: var(--navy); cursor: pointer; }
.map-leadership.is-on { background: var(--green); color: #fff; border-color: var(--green); }

.map-body { display: grid; grid-template-columns: 1fr 330px; flex: 1; min-height: 0; }
.map-canvas-wrap { position: relative; min-height: 0; min-width: 0; }
.map-canvas { width: 100%; height: 100%; min-height: 480px; }
.map-legend {
  position: absolute;
  left: 52px;
  top: 12px;
  bottom: auto;
  z-index: 1000;
  max-width: min(280px, calc(100% - 72px));
  padding: 10px 12px;
  background: color-mix(in srgb, #fff 94%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--navy) 12%, transparent);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.map-legend-title {
  margin: 0 0 8px;
  font: 700 .68rem/1.2 var(--fb);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}
.map-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--char) 78%, #fff);
}
.map-legend-swatch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 52px;
}
.map-legend-swatch--star {
  color: var(--green);
  font-size: 1rem;
  line-height: 1;
  text-shadow: 0 0 2px #fff;
}
.map-legend-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--fb);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--navy) 35%, #fff);
}
.map-legend-dot--sm { width: 14px; height: 14px; font-size: 0.5rem; }
.map-legend-dot--md { width: 18px; height: 18px; font-size: 0.5625rem; }
.map-legend-dot--lg { width: 22px; height: 22px; font-size: 0.625rem; }
.map-legend-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(
    #142F70 0deg 90deg,
    #2E933C 90deg 180deg,
    #C45C26 180deg 270deg,
    #5B7C99 270deg 360deg
  );
  box-shadow: inset 0 0 0 5px #fff, 0 0 0 1px color-mix(in srgb, var(--border) 70%, #fff);
}
.map-panel {
  border-left: 1px solid var(--border);
  background: #fff;
  overflow-y: auto;
  padding: 18px 20px;
  transition: background-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.map-panel.is-selected {
  background: #fff;
}
.map-panel-intro { color: var(--char); font-size: .9rem; }
.map-panel-back {
  background: none; border: 0; color: var(--navy); font-weight: 600; cursor: pointer;
  padding: 0 0 8px; font-family: var(--fb); font-size: .82rem;
}
.map-panel-back:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px;
}
.map-panel-city-head,
.map-panel-network-head,
.map-panel-mode-head {
  background: var(--navy);
  color: #fff;
  margin: -18px -20px 16px;
  padding: 14px 20px 16px;
}
.map-panel.is-selected .map-panel-back { color: rgba(255, 255, 255, 0.88); }
.map-panel.is-selected .map-panel-back:hover,
.map-panel.is-selected .map-panel-back:focus-visible { color: #fff; }
.map-panel.is-selected .map-panel-back:focus-visible {
  outline-color: #fff;
}
.map-panel-a11y {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 10px;
}
.map-panel-a11y button {
  background: none;
  border: 0;
  padding: 0;
  font: 600 .72rem/1.2 var(--fb);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.map-panel-a11y button:hover,
.map-panel-a11y button:focus-visible { color: #fff; }
.map-panel-a11y button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}
.map-panel-city h2,
.map-panel-city [data-map-panel-title],
.map-panel-network h2,
.map-panel-network [data-map-panel-title] {
  font-family: var(--fh);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 2px 0 6px;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
}
.map-panel-city [data-map-panel-title]:focus,
.map-panel-network [data-map-panel-title]:focus { outline: none; }
.map-panel-city [data-map-panel-title]:focus-visible,
.map-panel-network [data-map-panel-title]:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px;
}
.map-panel-abbr {
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 .72rem/1 var(--fb);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}
.map-panel-abbr::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--net, var(--navy));
  flex: none;
}
.map-panel-counts {
  font-size: .8rem;
  color: color-mix(in srgb, var(--char) 65%, #fff);
  margin: 0 0 14px;
}
.map-panel.is-selected .map-panel-counts {
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.map-panel-purpose {
  margin: 10px 0 0;
  font-size: .82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}
.map-panel-city.is-entering,
.map-panel-network.is-entering {
  animation: map-panel-enter 0.28s var(--ease) both;
}
@keyframes map-panel-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.map-net-section { margin: 0 0 18px; }
.map-net-section h3 {
  font-family: var(--fh);
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.map-net-champions {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.map-net-champions li { font-size: .82rem; line-height: 1.4; }
.map-net-champions a { color: inherit; }
.map-net-champ-loc {
  color: color-mix(in srgb, var(--char) 55%, #fff);
  font-size: .75rem;
}
.map-net-cities {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.map-net-empty {
  margin: 0;
  font-size: .82rem;
  color: color-mix(in srgb, var(--char) 60%, #fff);
}
.map-net-more { margin: 4px 0 0; font-size: .82rem; }
.map-net-more a { color: var(--navy); font-weight: 600; }
.map-inst { border-top: 1px solid var(--border); padding: 12px 0; }
.map-inst:first-child { border-top: 0; padding-top: 0; }
.map-inst h3 { font-size: .92rem; color: var(--navy); margin: 0 0 6px; }
.map-inst h3 a { color: inherit; }
.map-inst-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.map-inst-people li { font-size: .82rem; line-height: 1.4; }
.map-inst-people li a { color: inherit; text-decoration: none; }
.map-inst-people li a:hover { text-decoration: underline; text-underline-offset: 2px; }
.map-badge { font-size: .62rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; vertical-align: middle; }
.map-badge-pi { background: var(--green); color: #fff; }
.map-badge-champ { color: var(--green); }
.map-nettag { display: inline-flex; align-items: center; gap: 4px; font-size: .6rem;
  padding: 1px 5px; border-radius: 3px; margin: 1px 1px 0 0;
  color: var(--char); border: 1px solid color-mix(in srgb, var(--net) 45%, #fff); }
.map-nettag::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--net); flex: none; }

/* markers */
.cirn-marker {
  position: relative;
  width: calc(var(--core) + 12px);
  height: calc(var(--core) + 12px);
  transition: transform 0.22s var(--ease);
}
.cirn-marker-ring { position: absolute; inset: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--navy) 55%, #fff);
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 1px 4px rgba(20,47,112,.35);
  transition: box-shadow 0.22s var(--ease); }
.cirn-marker-core { position: absolute; top: 6px; left: 6px; width: var(--core); height: var(--core);
  border-radius: 50%; background: var(--navy);
  display: flex; align-items: center; justify-content: center; }
.cirn-marker-count {
  color: #fff;
  font-family: var(--fb);
  font-weight: 700;
  font-size: clamp(0.6875rem, calc(var(--core) * 0.48), 0.875rem);
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
}
/* Multi-city Leaflet clusters: same navy core + count, solid ring (no network pie). */
.cirn-marker-badge { position: absolute; top: -5px; right: -5px; font-size: 13px; color: var(--green);
  text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.cirn-marker-wrap.is-selected { z-index: 600 !important; }
.cirn-marker-wrap.is-selected .cirn-marker { transform: scale(1.22); }
.cirn-marker-wrap.is-selected .cirn-marker-ring {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 7px var(--navy),
    0 0 0 12px color-mix(in srgb, var(--navy) 28%, transparent),
    0 4px 14px color-mix(in srgb, var(--navy) 35%, transparent);
}
.cirn-marker-wrap.is-dimmed { opacity: .3; transition: opacity .2s ease; }

@media (max-width: 860px) {
  .map-body { grid-template-columns: 1fr; }
  .map-canvas { height: 56vh; min-height: 360px; }
  .map-legend { left: 8px; top: auto; bottom: 8px; padding: 8px 10px; max-width: min(240px, calc(100% - 16px)); }
  .map-legend-item { font-size: .68rem; }
  .map-panel { border-left: 0; border-top: 1px solid var(--border); max-height: 44vh; }
  .map-controls { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .map-panel { transition: none; }
  .map-panel-city.is-entering,
  .map-panel-network.is-entering { animation: none; }
  .cirn-marker,
  .cirn-marker-ring { transition: none; }
  .cirn-marker-wrap.is-dimmed { transition: none; }
}
.map-panel-list { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.map-list-hint { font-size: .78rem; color: color-mix(in srgb, var(--char) 60%, #fff); margin: 0 0 8px; }
.map-panel-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.map-list-city { width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font: 500 .82rem/1.3 var(--fb); color: var(--navy); padding: 6px 8px; border-radius: 6px; display: flex; justify-content: space-between; }
.map-list-city:hover, .map-list-city:focus-visible { background: var(--cream); }
.map-list-count { color: color-mix(in srgb, var(--char) 55%, #fff); font-weight: 600; }

/* ── Network member grid ──
   Non-lead members on a network single. Replaces one full-width .edir-row per
   person: REVivED alone carries 100+, which at row height ran ~8000px and buried
   the institutions/publications below it. Names only, four across, capped and
   searchable — the row treatment is kept for Leads, where the photo earns it.
   Deliberately borderless: per DESIGN.md, 1px rules are reserved for nav,
   buttons, tables and forms, and the retired hairline-grid must not return. */
.netgrid {
  margin-bottom: 8px;
}
.netgrid .edir-bar--slim {
  position: static;
  max-width: 420px;
  margin-bottom: 18px;
}
.netgrid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  column-gap: 8px;
  row-gap: 2px;
}
.netgrid__link {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.14s ease;
}
.netgrid__link:hover {
  background: var(--cream);
}
.netgrid__link:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  background: var(--cream);
}
.netgrid__name {
  display: block;
  font-family: var(--fb), sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}
.netgrid__badge {
  display: block;
  margin-top: 1px;
}
.netgrid__inst {
  display: block;
  margin-top: 2px;
  font-family: var(--fb), sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-soft);
}
.netgrid__empty {
  margin: 0;
  padding: 20px 12px;
  font-size: 14px;
  color: var(--text-soft);
}
.netgrid__more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px auto 0;
  padding: 0 18px;
  height: 38px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.netgrid__more:hover {
  background: var(--cream);
}
.netgrid__more svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.16s ease;
}
.netgrid__more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .netgrid__link,
  .netgrid__more svg {
    transition: none;
  }
}

/* ── Network featured studies ──
   The three most recently updated studies as card surfaces above the compact
   row list. Six identical rows read as an index; the scale break is what makes
   the section read as the network's work. Reuses .c-card / .c-card-grid--3up,
   so no new grid or responsive rules are needed here. */
.net-study-grid {
  margin-bottom: 14px;
}
.net-study-card {
  gap: 9px;
}
/* Study titles run long (full research-question sentences); the default card
   title scale overflows a three-up cell. */
.net-study-card__title {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.net-study-card .c-card__body {
  font-size: 14px;
  line-height: 1.55;
  text-wrap: initial;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.net-study-card__updated {
  font-family: var(--fb), sans-serif;
  font-size: 12.5px;
  color: var(--text-soft);
}
.net-study-card .c-card__more {
  margin-top: 4px;
  font-size: 13.5px;
}
.net-study-more-hd {
  margin: 22px 0 10px;
  font-family: var(--fb), sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ── Network record — section proximity ──
   One .c-section holds every block; spacing must do the grouping work:
   tight heading→content, generous section→section, subheads tucked under
   their parent section. Scoped to network singles only. */
body.single-cirn_network .net-record {
  /* Tabs already separate hero from content; full section pad reads as a hole. */
  padding-top: clamp(32px, 4vw, 48px);
  padding-bottom: clamp(64px, 8.5vw, 112px);
}
body.single-cirn_network .net-record .inst-detail-sec-hd {
  margin-top: 0;
  margin-bottom: 0.875rem;
}
body.single-cirn_network .net-record .inst-detail-sec-hd--stacked {
  margin-top: clamp(40px, 5vw, 56px);
}
/* Heading sits close to the list/grid it introduces. */
body.single-cirn_network .net-record .inst-detail-sec-hd + .edir-index,
body.single-cirn_network .net-record .inst-detail-sec-hd + .net-study-grid,
body.single-cirn_network .net-record .inst-detail-sec-hd + .netgrid {
  margin-top: 0;
}
/* Studies: featured cards and the compact "more" list read as one section. */
body.single-cirn_network .net-record .net-study-grid {
  margin-bottom: 0;
}
body.single-cirn_network .net-record .net-study-more-hd {
  margin-top: clamp(20px, 2.5vw, 28px);
  margin-bottom: 0.625rem;
}
/* Members: search field belongs to the name grid, not the section heading. */
body.single-cirn_network .net-record .netgrid {
  margin-bottom: 0;
}
body.single-cirn_network .net-record .netgrid .edir-bar--slim {
  margin-top: 0;
  margin-bottom: 14px;
}
@media (max-width: 600px) {
  body.single-cirn_network .net-record .inst-detail-sec-hd--stacked {
    margin-top: 32px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   AGM — Annual General Meeting section
   Landing page, submission forms, and the virtual poster showcase.
   Built entirely from existing tokens; introduces no new palette.
   ══════════════════════════════════════════════════════════════════════ */

/* Layout revision, 2026-08-17. The first build gave every section one shape --
   heading, prose, optional list -- in a 682px column inside a 1232px content
   area, alternating cream and white. Eight repeats of that read as a single
   column with a permanently empty right half. What follows keeps the same
   tokens and the same copy, and varies the structure instead: a two-column
   hero, editorial splits (About / Showcase / Future), a full-width agenda, a
   photo band, a question grid, paired action cards, and a navy close.
   See page-agm.php. */

/* ── Hero ───────────────────────────────────────────────────────────── */

/* Still typographic, per docs/adr/0001: no photograph of a room for a virtual
   meeting. The right column is not decoration filling a gap -- it holds the
   date, time, format and the register control, which are the four things a
   visitor needs before they can decide anything. */
.agm-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, var(--navy), var(--navy-deep));
  color: var(--white);
}
.agm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    118% 88% at 14% 0%,
    color-mix(in oklch, var(--navy) 56%, white) 0%,
    transparent 60%
  );
  opacity: 0.26;
}
.agm-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
  padding-block: clamp(52px, 7vw, 100px) clamp(52px, 7vw, 92px);
}
.agm-hero__h1 {
  margin: 18px 0 0;
  max-width: 15ch;
  font-family: var(--fh);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--white);
}
.agm-hero__theme {
  margin-top: 20px;
  max-width: 26ch;
  font-family: var(--fh);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.32;
  color: var(--green-light);
}
.agm-hero__lede {
  margin-top: 22px;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.88);
}
.agm-hero__lede p {
  margin: 0;
  color: inherit;
}
.agm-hero__lede p + p {
  margin-top: 0.85em;
}

/* Meeting fact card. Translucent-on-navy is the theme's own .c-card--on-navy
   surface; no drop shadow, because there is no light source on a flat field. */
.agm-meet {
  align-self: end;
  padding: clamp(22px, 2.4vw, 30px);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--card-radius);
}
.agm-meet__facts {
  margin: 0;
}
.agm-meet__row {
  display: grid;
  gap: 3px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.agm-meet__row:first-child {
  padding-top: 0;
  border-top: 0;
}
.agm-meet__k {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.64);
}
.agm-meet__v {
  margin: 0;
  font-family: var(--fh);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.agm-meet__cta {
  margin-top: 22px;
  width: 100%;
  justify-content: center;
}
/* Registration is not open yet. Rendering nothing here (the previous
   behaviour) hid the page's primary action and explained nothing; a dashed
   placeholder in the slot the button will occupy states the situation and
   keeps the card from reflowing when the URL arrives. */
.agm-meet__pending {
  margin-top: 22px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.38);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
}

/* ── Sticky jump bar ────────────────────────────────────────────────── */

/* Seven sections is more scroll than a visitor should have to survey blind.
   Built in PHP from the sections that actually rendered, so it can never
   point at a section the content did not fill. */
.agm-jump {
  position: sticky;
  top: calc(var(--nav-h) + var(--wp-admin-bar));
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
/* Fades whichever edge is hiding content, so the bar never ends on a cleanly
   clipped label that reads as the last one. agm-jump.js sets the classes. */
.agm-jump__inner {
  --jump-fade-start: 0px;
  --jump-fade-end: 0px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Contained so a horizontal swipe on the bar cannot chain into the page's
     own scroll or the browser's back gesture. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: var(--g);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--jump-fade-start),
    #000 calc(100% - var(--jump-fade-end)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--jump-fade-start),
    #000 calc(100% - var(--jump-fade-end)),
    transparent 100%
  );
}
.agm-jump.has-start .agm-jump__inner {
  --jump-fade-start: 26px;
}
.agm-jump.has-end .agm-jump__inner {
  --jump-fade-end: 26px;
}
.agm-jump__inner::-webkit-scrollbar {
  display: none;
}
.agm-jump__link {
  position: relative;
  flex: 0 0 auto;
  padding: 15px 14px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-body);
  transition: color 0.2s var(--ease);
}
/* Same green underline that scales in from the left as the site nav. */
.agm-jump__link::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.agm-jump__link:hover,
.agm-jump__link:focus-visible {
  color: var(--navy);
}
.agm-jump__link:hover::after,
.agm-jump__link:focus-visible::after {
  transform: scaleX(1);
}
/* Section currently in view. Same underline the hover state draws, so the two
   never read as different mechanisms -- but held, and in navy, so a pointer
   resting elsewhere on the bar cannot be mistaken for your position in it. */
.agm-jump__link.is-active {
  color: var(--navy);
}
.agm-jump__link.is-active::after {
  transform: scaleX(1);
  background: var(--navy);
}
.agm-jump__link.is-active:hover::after,
.agm-jump__link.is-active:focus-visible::after {
  background: var(--green);
}
/* Clear the fixed nav and the sticky bar when a jump link lands. */
.agm [id] {
  scroll-margin-top: calc(var(--nav-h) + var(--wp-admin-bar) + 58px);
}

/* ── Sections ───────────────────────────────────────────────────────── */

.agm-section {
  padding: clamp(56px, 7vw, 104px) 0;
}
.agm-section--white {
  background: var(--white);
}
.agm-section--cream {
  background: var(--cream);
}
.agm-section--navy {
  background: linear-gradient(168deg, var(--navy), var(--navy-deep));
  color: rgba(255, 255, 255, 0.88);
  --heading-color: var(--white);
}

.agm-h {
  margin: 0;
  font-family: var(--fh);
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--heading-color);
}
h3.agm-h {
  font-size: clamp(21px, 2.1vw, 26px);
  letter-spacing: -0.015em;
}
.agm-rule {
  width: 52px;
  height: 3px;
  margin-top: 16px;
  background: var(--green);
}
h3.agm-h + .agm-rule {
  width: 38px;
  height: 2px;
  margin-top: 12px;
}
/* Further from the title than the section rules are: at hero scale a 24px gap
   reads as an underline on the last word rather than as a separate mark. */
.agm-rule--hero {
  width: 56px;
  margin-top: 30px;
}

/* Paragraph rhythm. The previous build set no margin between paragraphs, so
   three separate thoughts rendered as one unbroken grey block. */
/* 58ch, not the wider measure the old build used: ch is the width of a zero,
   which in Inter runs well ahead of the average glyph, so 64ch was setting
   lines of 80-plus characters. This lands around 70. */
.agm-prose {
  max-width: 58ch;
  margin-top: 22px;
  font-size: 16.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.agm-prose p {
  margin: 0;
  color: inherit;
}
.agm-prose p + p {
  margin-top: 0.95em;
}
.agm-prose strong {
  font-weight: 600;
  color: var(--navy);
}
.agm-prose--lead {
  font-size: 18px;
  line-height: 1.62;
}
.agm-section--navy .agm-prose,
.agm-band .agm-prose {
  color: rgba(255, 255, 255, 0.88);
}
.agm-section--navy .agm-prose strong,
.agm-band .agm-prose strong {
  color: var(--white);
}

.agm-section__cta {
  margin-top: 28px;
}
.agm-empty {
  max-width: 60ch;
  color: var(--text-muted);
}
.agm-subsection {
  margin-top: clamp(48px, 6vw, 80px);
}

/* ── Hanging rail (heading left, prose right) ───────────────────────── */

/* The measure stays at ~64ch because that is what reads well; the rail spends
   the leftover width on the heading instead of leaving it blank. */
/* The prose column is sized to its measure rather than to the leftover track,
   and space-between pushes the slack into the gutter. Both blocks then sit on
   the shell edges instead of leaving a ragged margin on the right. */
.agm-rail {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 40rem);
  justify-content: space-between;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.agm-rail__head .agm-h {
  margin-top: -0.14em;
}
.agm-rail__body > .agm-prose:first-child {
  margin-top: 0;
}
.agm-rail--intro {
  margin-bottom: clamp(36px, 4.5vw, 60px);
}

/* ── Program: numbered agenda across the full width ─────────────────── */

/* The numbers are the content: without published times, the running order is
   the only thing the list says beyond the eight session names. */
/* Multi-column rather than a two-track grid, because grid fills row-major:
   a two-column grid puts 01 and 02 side by side, so the left column reads
   01, 03, 05, 07 and the running order stops being readable by column.
   Multicol fills down the first column before starting the second, and it
   does that for any number of sessions without the count being hard-coded. */
.agm-agenda {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--border);
}
.agm-agenda__item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  break-inside: avoid;
}
/* --green-dark, not --green: brand green on cream measures 3.5:1, and these
   numerals are 14px, so they need the 4.5 floor rather than the large-text one. */
.agm-agenda__n {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--green-dark);
}
.agm-agenda__label {
  font-family: var(--fh);
  font-size: clamp(16px, 1.5vw, 18.5px);
  font-weight: 500;
  line-height: 1.32;
  color: var(--navy);
}

/* Published schedule. Supersedes the agenda above the moment it has a row. */
.agm-programme {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.agm-programme__item {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 40px);
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.agm-programme__time {
  margin: 0;
  font-family: var(--fh);
  font-size: 15.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}
.agm-programme__detail {
  min-width: 0;
}
.agm-programme__title {
  margin: 0;
  font-family: var(--fh);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 600;
  line-height: 1.28;
  color: var(--navy);
}
.agm-programme__desc {
  max-width: 62ch;
  margin: 8px 0 0;
  line-height: var(--leading-snug);
  color: var(--text-body);
}
.agm-programme__speaker {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ── Editorial split (About, Showcase, Future intro) ────────────────── */

.agm-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
}
/* Copy first, photograph second -- used on Future so About/Showcase and
   Future alternate left/right media and the page does not read as one
   repeated photo-left rhythm. */
.agm-split--media-end {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
}
.agm-split--no-media {
  grid-template-columns: minmax(0, 1fr);
}
.agm-split--intro {
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.agm-split__copy > .agm-prose {
  max-width: 56ch;
}
.agm-figure {
  margin: 0;
}
.agm-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
/* Documentary photographs are from a previous, in-person meeting. The year is
   part of the picture, not a footnote: without it the image would imply a
   format the 2026 meeting does not have. */
/* --text-muted rather than --text-soft: #777 lands at 4.48:1 on white, just
   under the floor for text this size. */
.agm-figure__cap {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text-muted);
}

/* Award categories attendees vote on. Green cap rather than a bullet -- the
   same rule that marks every heading, turned into a plaque edge. */
.agm-plaques {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--card-gap);
}
.agm-plaque {
  padding: 20px 24px 22px;
  background: var(--cream);
  border-top: 3px solid var(--green);
  border-radius: 0 0 12px 12px;
  font-family: var(--fh);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

/* Award winners, populated only after the meeting. */
.agm-winners {
  max-width: 68ch;
  margin-top: clamp(28px, 3.5vw, 44px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
.agm-winners__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.agm-winners__category {
  color: var(--text-muted);
}
.agm-winners__name {
  font-weight: 600;
  color: var(--navy);
}

/* ── Poster band: full-bleed photograph under the navy scrim ────────── */

.agm-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(420px, 56vh, 600px);
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.88);
  --heading-color: var(--white);
}
.agm-band--flat {
  min-height: 0;
}
.agm-band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source is 4:3 in a wide band, so the vertical crop is what matters: hold
     the poster boards and the people, drop the carpet. */
  object-position: 50% 42%;
}
/* Holds nearly solid across the copy column and only clears in the last third.
   The hallway underneath is bright and busy, so the wash that works on the home
   hero (clearing by two thirds) would leave this text sitting on detail. */
.agm-band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    96deg,
    color-mix(in oklch, var(--navy-deep) 96%, transparent) 0%,
    color-mix(in oklch, var(--navy-deep) 92%, transparent) 38%,
    color-mix(in oklch, var(--navy-deep) 74%, transparent) 58%,
    color-mix(in oklch, var(--navy) 36%, transparent) 72%,
    transparent 87%
  );
}
.agm-band__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(56px, 7vw, 96px);
}
.agm-band__copy {
  max-width: 46ch;
}
.agm-band .agm-h {
  text-shadow: 0 1px 24px color-mix(in oklch, var(--navy-deep) 55%, transparent);
}
.agm-band .agm-prose {
  max-width: 46ch;
}
.agm-actions {
  margin: 30px 0 0;
}
.agm-band__credit {
  margin: 32px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
}

/* ── Future of CIRN: questions as a grid ────────────────────────────── */

.agm-questions {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* Explicitly two, not auto-fit: with four questions and a 1232px field,
     auto-fit resolves to three tracks and leaves one question orphaned on a
     second row. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
}
.agm-question {
  padding: 26px 28px 28px;
  background: var(--white);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  font-family: var(--fh);
  font-size: clamp(17px, 1.6vw, 19.5px);
  font-weight: 500;
  line-height: 1.36;
  text-wrap: pretty;
  color: var(--navy);
}
.agm-note {
  max-width: 62ch;
  margin: clamp(24px, 3vw, 36px) 0 0;
  font-family: var(--fh);
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}

/* ── Take part: the two submission asks, side by side ───────────────── */

/* These were two consecutive sections of identical shape, each ending in a
   green button. They are one ask -- send us something before the meeting --
   so they are one section holding two parallel cards. */
.agm-asks {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--card-gap);
}
.agm-ask {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  background: var(--cream);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
}
.agm-ask .agm-prose {
  max-width: none;
}
/* auto pushes both buttons to the card floor so they align across the pair
   regardless of how much copy each card carries. */
.agm-ask__cta {
  margin: auto 0 0;
  padding-top: 26px;
}

.agm-ticks {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.agm-ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--char);
}
.agm-ticks li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 14px;
  height: 2px;
  background: var(--green);
}

/* ── Joining: navy close ────────────────────────────────────────────── */

.agm-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.agm-close__aside {
  padding: clamp(24px, 2.6vw, 32px);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--card-radius);
}
.agm-prose--closing {
  max-width: none;
  margin-top: 0;
  font-family: var(--fh);
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 500;
  line-height: 1.42;
  color: var(--white);
}
.agm-close__cta {
  margin-top: 24px;
  width: 100%;
  justify-content: center;
}
.agm-close__pending {
  margin-top: 22px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.38);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
}

/* ── Browser surfaces ───────────────────────────────────────────────── */

.agm ::selection {
  background: color-mix(in oklch, var(--green) 28%, white);
  color: var(--navy);
}
.agm-hero ::selection,
.agm-band ::selection,
.agm-section--navy ::selection {
  background: color-mix(in oklch, var(--green) 62%, var(--navy));
  color: var(--white);
}
.agm a:focus-visible,
.agm .btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}
.agm-hero a:focus-visible,
.agm-band a:focus-visible,
.agm-section--navy a:focus-visible {
  outline-color: var(--white);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .agm-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }
  .agm-meet {
    max-width: 26rem;
  }
  .agm-rail,
  .agm-close {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .agm-rail__head .agm-h {
    margin-top: 0;
  }
  .agm-close {
    gap: 36px;
  }
  .agm-close__aside {
    max-width: 30rem;
  }
  .agm-split,
  .agm-split--media-end {
    grid-template-columns: minmax(0, 1fr);
  }
  .agm-figure {
    max-width: 32rem;
  }
}

@media (max-width: 980px) {
  /* Below this the session names wrap inside both columns and the row rules
     stop lining up across the gutter, which reads as a broken table. */
  .agm-agenda {
    columns: 1;
  }
}

@media (max-width: 720px) {
  .agm-questions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .agm-programme__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .agm-winners__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

@media (max-width: 620px) {
  .agm-hero__inner {
    padding-block: 44px 48px;
  }
  /* The bar always overflows at this width, so the chips are tightened to fit
     more of the next label on screen -- the clearest signal that it scrolls.
     Vertical padding is held: these stay 48px tall for the thumb. */
  .agm-jump__link {
    padding-inline: 11px;
    font-size: 14px;
  }
  .agm-jump__link::after {
    right: 11px;
    left: 11px;
  }
  .agm-band {
    min-height: 0;
  }
  /* The subject now sits behind the copy rather than beside it, so the side
     wash becomes a vertical one -- the same recomposition the home hero makes
     at its narrow breakpoint. */
  .agm-band__scrim {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--navy-deep) 68%, transparent) 0%,
      color-mix(in oklch, var(--navy-deep) 90%, transparent) 42%,
      color-mix(in oklch, var(--navy-deep) 96%, transparent) 100%
    );
  }
  .agm-band__bg {
    object-position: 50% 30%;
  }
  .agm-band__copy {
    max-width: none;
  }
  .agm-band__inner {
    padding-block: clamp(180px, 44vw, 260px) 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agm-jump__link,
  .agm-jump__link::after {
    transition: none;
  }
}

/* ── Poster showcase grid ───────────────────────────────────────────── */

.agm-poster-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}
.agm-poster-card {
  min-width: 0;
  display: flex;
}
.agm-poster-card__link {
  width: 100%;
  gap: 14px;
}

/* Fixed 3:4 frame with object-fit: contain. Posters arrive mostly portrait but
   the occasional landscape or square has to sit in the same grid — letterboxing
   onto a neutral ground reads as deliberate, whereas cropping would cut off the
   title block that makes a poster identifiable at thumbnail size. */
.agm-poster-card__frame {
  width: 100%;
  margin: 0;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: calc(var(--card-radius) - 8px);
}
.agm-poster-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.agm-poster-card__title {
  font-size: 17px;
  line-height: 1.35;
}
.agm-poster-card__presenters {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
}

/* ── Poster single ──────────────────────────────────────────────────── */

.agm-poster__label {
  margin: 0 0 10px;
  font-family: var(--fh);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.agm-poster__presenter-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.agm-poster__presenter {
  color: var(--char);
}
.agm-poster__affiliation {
  color: var(--text-muted);
}
.agm-poster__affiliation::before {
  content: " — ";
  color: var(--border);
}
.agm-poster__network {
  margin: 20px 0 0;
}
.agm-poster__figure {
  margin: 32px 0 0;
}
.agm-poster__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--white);
}
.agm-poster__caption {
  margin-top: 10px;
  font-size: 15px;
  color: var(--text-muted);
}
.agm-poster__abstract {
  max-width: 72ch;
  margin-top: 40px;
  color: var(--text-body);
  line-height: var(--leading-snug);
}

/* ── Submission forms ───────────────────────────────────────────────── */

.agm-form {
  max-width: 640px;
  display: grid;
  gap: 22px;
}
.agm-form__row {
  display: grid;
  gap: 8px;
}
.agm-form__label {
  font-family: var(--fh);
  color: var(--navy);
}
.agm-form__req {
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
.agm-form__input,
.agm-form__textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--char);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.2s var(--ease);
}
.agm-form__input:focus-visible,
.agm-form__textarea:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--navy) 40%, transparent);
  outline-offset: 1px;
  border-color: var(--navy);
}
.agm-form__textarea {
  resize: vertical;
  line-height: var(--leading-snug);
}
.agm-form__note {
  font-size: 15px;
  color: var(--text-muted);
}
.agm-form__actions {
  margin-top: 4px;
}

/* Honeypot. Moved out of view rather than display:none — some bots skip fields
   that are display:none, which would defeat the point. aria-hidden and
   tabindex="-1" in the markup keep it away from real users. */
.agm-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Notices ────────────────────────────────────────────────────────── */

.agm-notice {
  max-width: 68ch;
  padding: 18px 20px;
  margin-bottom: 28px;
  border-radius: 12px;
  border-left: 3px solid var(--navy);
  background: var(--navy-pale);
  color: var(--char);
  line-height: var(--leading-snug);
}
.agm-notice > div > :first-child {
  margin-top: 0;
}
.agm-notice > div > :last-child {
  margin-bottom: 0;
}
.agm-notice--success {
  border-left-color: var(--green);
  background: var(--green-pale);
}
.agm-notice--error {
  border-left-color: var(--red);
  background: var(--red-pale);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .agm-poster-grid.c-card-grid--3up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .agm-programme__item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .agm-winners__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .agm-poster-grid.c-card-grid--3up {
    grid-template-columns: 1fr;
  }
}