:root {
  /* Palette sampled from the client's new logo lockup and hero artwork (2026 rebuild) */
  --ink: #1d2830;
  --muted: #3c4750;
  --line: #e7e0d5;
  --paper: #ffffff;
  --soft: #faf6ee;
  --soft-2: #f3ece1;
  --accent: #b75b42;
  --bright: #c9663f;
  --deep: #3f5d73;
  --gray: #4a5560;
  --slate: #577388;
  --sage: #7f9773;
  --gold: #c39a4c;
  --teal: #7e9e9d;
  --steel: #577388;
  --sky: #577388;
  --olive: #7f9773;
  --footer-gray: #7b8790;
  --light-sub: #f3ece1;
  --pub-teal: #c9d5cd;
  --hero-black: #1d2830;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 132px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--deep);
  text-decoration: none;
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: inherit;
  font-weight: 400;
  line-height: 28.8px;
}

p {
  margin: 0 0 20px;
  color: var(--muted);
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: normal;
  text-transform: none;
}

em,
i {
  color: var(--muted);
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  line-height: 28.8px;
}

strong,
b {
  color: var(--deep);
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}

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

.site-header {
  position: sticky;
  z-index: 301;
  top: 0;
  min-height: 90px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0;
  background: var(--soft);
}

.header-social {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 55px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  margin: 0 5px;
  color: var(--deep);
  font-size: 16px;
  line-height: 1;
}

.header-social a:hover {
  color: var(--accent);
}

.header-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  vertical-align: middle;
}

.search-trigger {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1c1d22;
  cursor: pointer;
}

.search-trigger:hover {
  color: var(--accent);
}

.search-trigger svg {
  width: 14.85px;
  height: 16px;
  fill: currentColor;
}

.search-overlay {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: none;
  background: rgba(0, 0, 0, 0.94);
}

.search-overlay.is-open {
  display: block;
}

.search-overlay-inner {
  position: relative;
  width: min(800px, calc(100% - 60px));
  margin: 70px auto 0;
  color: #ffffff;
}

.search-overlay-label {
  display: block;
  margin: 0 0 30px;
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  color: #ffffff;
  text-transform: none;
}

.search-overlay-form {
  width: 100%;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.search-overlay-input {
  width: 100%;
  height: 82px;
  padding: 20px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 35px;
  font-weight: 400;
  outline: none;
}

.search-overlay-close {
  position: fixed;
  top: 70px;
  right: 50px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.brand img {
  display: block;
  width: 240px;
  height: auto;
  max-height: 66px;
  padding: 0 26px;
  object-fit: contain;
}

.nav {
  display: flex;
  align-items: center;
  min-width: 0;
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nav-left {
  justify-content: flex-end;
}

.nav-right {
  justify-content: flex-start;
}

.nav a {
  display: inline-block;
  height: 120px;
  padding: 2px 16px 0;
  color: rgb(28, 29, 34);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 120px;
  text-transform: uppercase;
}.site-header {
  overflow: hidden;
}.site-header.is-sticky-shrunk {
  min-height: 55px;
  transition: min-height 200ms ease;
}.site-header.is-sticky-shrunk .brand img {
  width: 244px;
  max-height: 55px;
  transition: width 200ms ease, max-height 200ms ease;
}.site-header.is-sticky-shrunk .nav a {
  height: 55px;
  line-height: 55px;
}

.site-header.is-sticky-shrunk .header-social a {
  height: auto;
}

.nav a:hover,
.nav a.is-active {
  color: var(--accent);
}

.menu-toggle,
.mobile-menu {
  display: none;
}

.outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 240px;
  max-width: 100%;
  min-height: 54px;
  padding: 18px 28px;
  border: 2px solid var(--deep);
  border-radius: 3px;
  color: var(--deep);
  background-color: transparent;
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 2px;
  text-transform: none;
}

.outline-button:hover {
  background: var(--deep);
  color: var(--paper);
}

.band {
  padding: 60px clamp(24px, 6vw, 82px);
  scroll-margin-top: 132px;
}

.research-list article {
  scroll-margin-top: 144px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(300px, 1.4fr);
  gap: clamp(36px, 7vw, 96px);
  max-width: 1160px;
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 13px;
  color: var(--accent);
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

h2 {
  margin: 0 0 18px;
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 62.4px;
  color: var(--gray);
}

h3 {
  margin: 0 0 10px;
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 28.6px;
  color: var(--deep);
  text-transform: capitalize;
}

.copy p,
.profile-copy p,
.research-list p,
.publication-list,
.team-grid p {
  color: var(--muted);
}

.section-head {
  max-width: 980px;
  margin: 0 auto 40px;
}

.research {
  background: var(--soft);
}

.research-list {
  max-width: 1160px;
  margin: 0 auto;
  border-top: 1px solid #dcdcd8;
}

.research-list article {
  display: grid;
  grid-template-columns: 90px minmax(190px, 280px) 1fr;
  gap: 30px;
  padding: 34px 0;
  border-bottom: 1px solid #dcdcd8;
}

.research-list span {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}

.research-list p {
  margin: 0;
}

.profile {
  display: grid;
  grid-template-columns: minmax(260px, 400px) minmax(300px, 640px);
  gap: clamp(34px, 6vw, 78px);
  justify-content: center;
  align-items: center;
}

.profile-image img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}

.role {
  font-size: 18px;
  color: var(--deep);
}

.contact-line {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 24px;
  font-weight: 700;
  color: var(--accent);
}

.publications {
  background: #fafafa;
}

.publication-layout {
  display: grid;
  grid-template-columns: minmax(260px, 450px) minmax(300px, 620px);
  gap: clamp(34px, 6vw, 74px);
  align-items: start;
  max-width: 1160px;
  margin: 0 auto;
}

.publication-layout img {
  width: 100%;
  border: 1px solid var(--line);
}

.publication-list ol {
  margin: 18px 0 0;
  padding-left: 20px;
}

.publication-list li + li {
  margin-top: 16px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1160px;
  margin: 0 auto;
  background: var(--line);
  border: 1px solid var(--line);
}

.team-grid article {
  min-height: 145px;
  padding: 24px;
  background: var(--paper);
}

.team-grid p {
  margin: 0;
  overflow-wrap: anywhere;
}

.news {
  background: var(--soft);
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 20px clamp(24px, 6vw, 82px) 0;
  color: #000000;
  background: transparent;
  border-top: 2px solid var(--steel);
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 26px;
}

.footer-addresses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 56px;
}

.footer-address-label {
  display: block;
  color: var(--footer-gray);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.footer-address {
  margin: 0;
  color: #000000;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
  color: #000000;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.footer-contact a {
  color: var(--deep);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.footer-legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  margin: 28px calc(clamp(24px, 6vw, 82px) * -1) 0;
  padding: 25px clamp(24px, 6vw, 82px) 20px;
}

.credit {
  margin: 0;
  color: var(--footer-gray);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1px;
}

.credit a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(123, 135, 144, 0.45);
  text-underline-offset: 3px;
}

.credit a:hover {
  color: var(--accent);
}

.copyright {
  margin: 0;
  color: var(--footer-gray);
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1px;
}

.top-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.page-main {
  background: var(--paper);
}

.split-hero {
  position: relative;
  min-height: 440px;
  display: grid;
  grid-template-columns: 50% 50%;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.split-hero:has(.pi-hero),
.split-hero:has(.contact-hero),
.split-hero:has(.research-hero) {
  min-height: 600px;
}

.split-hero:has(.pi-hero) .split-image {
  background-size: cover;
  background-position: center top;
}

.split-image {
  min-height: 0;
  background-image: var(--split-bg);
  background-size: cover;
  background-position: center;
}

.split-copy {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px clamp(44px, 7vw, 110px) 68px;
  background: var(--soft);
  color: var(--ink);
}

.split-copy h1 {
  margin: 0 0 18px;
  padding-bottom: 10px;
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.16;
  color: var(--ink);
  text-transform: none;
}

.split-copy p {
  max-width: 630px;
  margin: 0 0 20px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
}

.split-copy .small-title {
  margin: 0 0 18px;
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 36.4px;
  letter-spacing: 0;
  color: #f7f7f7;
  text-transform: none;
}

.split-copy.black-hero {
  padding: 100px clamp(44px, 7vw, 110px) 100px;
}

.split-copy.black-hero h1 {
  margin: 0 0 30px;
  padding-bottom: 20px;
  font-size: 48px;
  line-height: 62.4px;
}

.split-copy.black-hero p {
  max-width: 540px;
  margin: 0 0 28px;
  color: #ffffff;
}

.split-copy.black-hero .outline-button {
  margin: 0 0 15px;
}

.pi-hero h1 {
  margin: 0 0 40px;
  padding-bottom: 20px;
  font-size: 56px;
  line-height: 72.8px;
  letter-spacing: 1px;
  text-transform: none;
}

.pi-hero .pi-credentials {
  margin: 0 0 40px;
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 28.6px;
  letter-spacing: 1px;
  color: #ffffff;
}

.pi-hero .pi-role {
  margin: 0 0 40px;
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1px;
  color: #ffffff;
}

.pi-hero .pi-contact {
  margin: 0;
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
  color: #ffffff;
}

.pi-hero .pi-contact a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fixed-button {
  width: 300px;
  max-width: 100%;
  margin: 0 0 15px;
}

.skip-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  bottom: 0;
  width: 50px;
  height: 50px;
  margin: -26px 0 26px -26px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0);
  opacity: 0.9;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease-out;
  text-decoration: none;
  text-align: center;
  box-sizing: content-box;
}

.skip-next svg {
  width: 14px !important;
  height: 14px !important;
  transform: translateY(2px);
  transition: all 0.2s ease-out;
}

.skip-next svg path {
  fill: #ffffff;
}

.skip-next:hover {
  opacity: 1;
}

.skip-next:hover svg {
  transform: translateY(5px);
}

.accordion-section {
  width: min(1140px, calc(100% - 48px));
  margin: 0 auto;
  padding: 40px 0 60px;
}

.accordion-section details {
  margin: 0 0 20px;
  border-bottom: 1px solid #eeeeee;
}

.accordion-section details:first-child {
  border-top: 1px solid #eeeeee;
}

.accordion-section details:last-child {
  margin-bottom: 0;
}

.accordion-section summary {
  position: relative;
  display: block;
  padding: 14px 20px 14px 46px;
  cursor: pointer;
  color: var(--gray);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 18px;
  list-style: none;
  text-transform: uppercase;
}

.accordion-section summary::-webkit-details-marker {
  display: none;
}

.accordion-section summary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background:
    linear-gradient(var(--gray), var(--gray)) center / 12px 2px no-repeat,
    linear-gradient(var(--gray), var(--gray)) center / 2px 12px no-repeat;
}

.accordion-section details[open] summary::before {
  background: linear-gradient(var(--gray), var(--gray)) center / 12px 2px no-repeat;
}

.accordion-body {
  padding: 14px 20px 20px;
  color: var(--muted);
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
  max-width: none;
}

.accordion-body a {
  color: var(--deep);
  text-decoration: none;
  text-underline-offset: 3px;
}

.accordion-body p {
  margin: 0 0 20px;
}

.accordion-body ol {
  margin: 16px 0 0;
  padding-left: 22px;
}

.accordion-body li,
.accordion-body em,
.accordion-body i {
  color: var(--muted);
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
}

.accordion-body li + li {
  margin-top: 8px;
}

.single-column {
  width: min(900px, calc(100% - 48px));
}

.page-hero {
  color: #ffffff;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.blue-hero {
  background: var(--steel);
}

.black-hero {
  background: var(--hero-black);
}

.black-hero h1 {
  font-size: 48px;
  line-height: 62.4px;
}

.news-hero {
  background: var(--sky);
}

.split-copy.news-hero h1 {
  font-size: 48px;
  line-height: 62.4px;
  padding-bottom: 20px;
}

.contact-hero {
  background: var(--olive);
}

.split-copy.contact-hero h1 {
  letter-spacing: 1px;
  padding-bottom: 40px;
  text-transform: none;
}

.split-copy.contact-hero .contact-hero-info,
.split-copy.contact-hero .contact-hero-info a {
  color: #ffffff;
  text-decoration: none;
}

.split-copy.contact-hero .contact-hero-info {
  margin: 0 0 20px;
}

.contact-page p,
.contact-page p a {
  color: var(--muted);
  text-decoration: none;
}

.publication-hero {
  background: var(--pub-teal);
}

.split-copy.publication-hero .pub-link {
  margin: 0 0 18px;
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 29px;
  font-weight: 400;
  line-height: 37.7px;
  color: var(--bright);
}

.split-copy.publication-hero .pub-link a {
  color: var(--bright);
  font-size: 29px;
  line-height: 37.7px;
}

.page-grid {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
  padding: 74px 0 96px;
}



.page-content {
  width: min(1140px, calc(100% - 48px));
  margin: 0 auto;
  padding: 60px 0 60px;
}

.publication-section {
  width: min(1140px, calc(100% - 48px));
  margin: 0 auto;
  padding: 100px 0 100px;
}

.publication-intro {
  max-width: 860px;
  margin: 0 0 60px;
}

.publication-intro h2 {
  margin: 0 0 18px;
  color: var(--teal);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 36.4px;
  letter-spacing: 2px;
  text-transform: none;
}

.publication-year h2 {
  margin: 0 0 20px;
  padding-top: 40px;
  padding-bottom: 20px;
  color: var(--teal);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 46.8px;
  letter-spacing: 2px;
  text-transform: none;
}

.publication-intro p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 18px;
  line-height: 28.8px;
}

.publication-year {
  margin: 0 0 60px;
}

.publication-year:last-child {
  margin-bottom: 0;
}

.publication-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

.publication-row:last-child {
  border-bottom: 1px solid var(--line);
}

.publication-mark {
  min-height: 86px;
  display: grid;
  place-items: center;
  background: #f5f5f5;
  color: var(--teal);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 36.4px;
  letter-spacing: 2px;
}

.publication-row p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
}

.news-feed-section {
  width: min(1140px, calc(100% - 48px));
  min-height: 430px;
  margin: 0 auto;
  padding: 60px 0 60px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
}

.news-panel {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.news-panel p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 18px;
  line-height: 28.8px;
}

.news-panel h2 {
  margin: 0 0 18px;
  padding-top: 5px;
  color: var(--deep);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 18.2px;
  letter-spacing: 0;
  text-transform: capitalize;
}

.research-page,
.publications-page {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px;
}

.side-nav {
  position: sticky;
  top: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.side-nav a {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  color: #444444;
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 13px;
  text-transform: uppercase;
}

.side-nav a:hover {
  color: var(--accent);
}

.article-stack article {
  padding: 0 0 32px;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--line);
}

.article-stack article:last-child {
  margin-bottom: 0;
}

.article-stack h2,
.simple-page h2,
.contact-page h2 {
  margin: 0 0 12px;
  padding-bottom: 5px;
  color: var(--gray);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 36.4px;
  letter-spacing: 0;
}

.article-stack p,
.article-stack li,
.simple-page p,
.contact-page p {
  color: var(--muted);
  font-size: 18px;
  line-height: 28.8px;
}

.pi-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 48px;
}

.pi-photo {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
}

.publication-art img {
  width: 100%;
  border: 1px solid var(--line);
}

.pub-list {
  margin: 0;
  padding-left: 18px;
}

.pub-list li + li {
  margin-top: 14px;
}

.people-content,
.simple-page,
.contact-page {
  width: min(1140px, calc(100% - 48px));
  margin: 0 auto;
  padding: 60px 0 60px;
}

.people-content > h2 {
  text-align: center;
  padding: 20px 0 40px;
  color: var(--gray);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 46.8px;
  letter-spacing: 0;
  text-transform: none;
}

.people-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 36px;
  margin: 0 0 40px;
}

.people-grid.lead {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.people-grid article {
  flex: 0 1 320px;
  min-height: 150px;
  text-align: center;
}

.people-grid img {
  width: 250px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  margin: 0 auto 24px;
  border-radius: 50%;
}

.people-grid h3 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  color: var(--gray);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  padding: 0 14.4px;
}

.people-grid h3::before,
.people-grid h3::after {
  content: "";
  height: 1px;
  background: #054d8c;
}

.people-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 28.8px;
  overflow-wrap: anywhere;
}

.simple-page {
  min-height: 430px;
  text-align: center;
}

.contact-page {
  min-height: 430px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

@media (max-width: 767px) {

  .site-header {
    min-height: 90px;
    grid-template-columns: auto 1fr auto;
    padding: 0 24px;
  }

  .header-social,
  .search-trigger {
    display: none;
  }

  .home-mobile-header {
    position: fixed !important;
    z-index: 55;
    left: 0;
    right: 0;
    bottom: 0 !important;
    top: auto !important;
  }

  .brand {
    justify-self: start;
  }

  .brand img {
    width: 220px;
  }

  .nav {
    display: none;
  }.menu-toggle {
    display: inline-grid !important;
  }

  .menu-toggle {
    gap: 5px;
    width: 42px;
    padding: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle span {
    height: 2px;
    background: #222222;
  }

  .mobile-menu {
    position: fixed;
    z-index: 60;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: var(--line);
    border-top: 1px solid var(--line);
  }

  .mobile-menu.is-open {
    display: grid;
  }

  .mobile-menu a {
    padding: 20px 16px;
    background: var(--paper);
    color: var(--accent);
    font-family: Nunito, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }

  .split-hero,
  .content-grid,
  .profile,
  .publication-layout,
  .research-page,
  .publications-page,
  .pi-layout,
  .contact-page,
  .publication-row,
  .news-feed-section {
    grid-template-columns: 1fr;
  }

  .split-hero,
  .split-image,
  .split-copy {
    min-height: auto;
  }

  .split-image {
    min-height: 330px;
  }

  .split-copy {
    padding: 40px 60px;
  }

  .split-copy h1 {
    font-size: 50px;
    line-height: 65px;
    text-align: center;
  }

  .side-nav {
    position: static;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .people-grid {
    gap: 42px 28px;
  }}


@media (min-width: 768px) and (max-width: 1279px) {}


@media (max-width: 720px) {

  .band {
    padding: 66px 22px;
  }

  .research-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .team-grid,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .footer-contact {
    text-align: left;
  }}

/* ============================================================
   PAN 2026 rebuild — new components
   ============================================================ */

.band {
  padding: 96px 56px;
}

.section-head {
  max-width: 860px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head .eyebrow {
  margin-bottom: 14px;
}

.section-head h2 {
  margin: 0 0 18px;
}

.lede {
  color: var(--muted);
  font-size: 20.5px;
  line-height: 34px;
}

.text-button {
  display: inline-block;
  color: var(--accent);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.text-button:hover {
  color: var(--deep);
}

.pending {
  display: inline-block;
  padding: 6px 14px;
  border: 1px dashed var(--gold);
  border-radius: 2px;
  color: var(--gold);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.empty-note {
  padding: 26px 28px;
  border: 1px dashed var(--line);
  background: var(--soft);
  color: var(--footer-gray);
  font-style: italic;
}

/* ---------- home hero ---------- */

.home-hero {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--soft);
}

.home-hero-art img {
  width: 100%;
  height: clamp(280px, 42vw, 560px);
  object-fit: cover;
  object-position: center 42%;
}

.home-hero-copy {
  max-width: 1080px;
  margin: 0 auto;
  padding: 54px 56px 66px;
  text-align: center;
}

.home-hero-copy h1 {
  margin: 0 0 22px;
  color: var(--ink);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.5px;
}

.home-hero-lede {
  max-width: 780px;
  margin: 0 auto 38px;
  font-size: 21px;
  line-height: 35px;
}

/* ---------- pipeline + chain ---------- */

.pipeline,
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 8px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.chain {
  margin: 26px 0 0;
  justify-content: flex-start;
}

.pipeline li,
.chain li {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--deep);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.pipeline li.arrow,
.chain li.arrow {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0;
}

.chain li {
  border-color: transparent;
  background: var(--soft-2);
  font-size: 11px;
  letter-spacing: 1.4px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 22px;
}

/* ---------- philosophy ---------- */

.philosophy {
  background: var(--paper);
}

.streams {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1180px;
  margin: 0 auto;
  background: var(--line);
  border: 1px solid var(--line);
}

.streams article {
  padding: 34px 30px 38px;
  background: var(--paper);
}

.streams h3 {
  margin: 0 0 18px;
  color: var(--accent);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.streams ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.streams li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 17px;
}

.streams li:last-child {
  border-bottom: 0;
}

.philosophy .chain {
  justify-content: center;
  max-width: 1180px;
  margin: 34px auto 0;
}

/* ---------- questions ---------- */

.questions-band {
  background: var(--soft);
}

.question-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.question-list li {
  padding: 30px 30px 34px;
  background: var(--paper);
}

.question-list h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.question-list p {
  margin: 0;
  color: var(--footer-gray);
  font-size: 17px;
  line-height: 27px;
}

.band-cta {
  margin: 38px 0 0;
  text-align: center;
}

/* ---------- platform cards + journey links ---------- */

.platforms-band {
  background: var(--paper);
}

.platform-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}

.platform-card {
  display: block;
  padding: 32px 32px 28px;
  border: 1px solid var(--line);
  background: var(--soft);
  transition: border-color 200ms ease, transform 200ms ease;
}

.platform-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.platform-card h3 {
  margin: 0 0 14px;
  color: var(--deep);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.platform-card p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 28px;
}

.platform-card-link {
  color: var(--accent);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.journeys-band {
  background: var(--soft-2);
}

.journey-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.journey-links a {
  display: block;
  height: 100%;
  padding: 24px 24px 26px;
  border-left: 3px solid var(--gold);
  background: var(--paper);
  transition: border-color 200ms ease;
}

.journey-links a:hover {
  border-left-color: var(--accent);
}

.journey-n {
  display: block;
  margin-bottom: 8px;
  color: var(--footer-gray);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.journey-t {
  display: block;
  color: var(--ink);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3;
}

/* ---------- cover art strip ---------- */

.cover-strip {
  padding: 84px 0 96px;
  background: var(--ink);
  overflow: hidden;
}

.cover-strip-head {
  max-width: 860px;
  margin: 0 auto 44px;
  padding: 0 24px;
  text-align: center;
}

.cover-strip-head .eyebrow {
  color: var(--gold);
}

.cover-strip-head h2 {
  margin: 12px 0 0;
  color: #ffffff;
}

.cover-track {
  display: flex;
  width: max-content;
  gap: 22px;
  animation: cover-scroll 90s linear infinite;
}

.cover-track:hover {
  animation-play-state: paused;
}

.cover-run {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cover-run img {
  width: 260px;
  height: 330px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  filter: saturate(0.92);
  transition: transform 260ms ease, filter 260ms ease;
}

.cover-run img:hover {
  transform: scale(1.04);
  filter: saturate(1.05);
}

@keyframes cover-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 11px)); }
}

/* ---------- research platforms page ---------- */

.platform-stack {
  display: grid;
  gap: 72px;
}

.platform h2 {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.platform-body {
  max-width: 68ch;
  font-size: 20.5px;
  line-height: 34px;
}

.platform-label {
  margin: 30px 0 14px;
  color: var(--footer-gray);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chiplist li {
  padding: 8px 15px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: 15px;
  line-height: 21px;
}

.pub-count {
  display: inline-block;
  min-width: 24px;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--soft-2);
  color: var(--footer-gray);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
}

.pub-group {
  border-top: 1px solid var(--line);
}

.pub-group:last-child {
  border-bottom: 1px solid var(--line);
}

.pub-group summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 4px 16px 30px;
  color: var(--deep);
  cursor: pointer;
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  list-style: none;
  text-transform: uppercase;
}

.pub-group summary::-webkit-details-marker {
  display: none;
}

.pub-group summary::before {
  content: "+";
  position: absolute;
  margin-left: -30px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 400;
}

.pub-group[open] summary::before {
  content: "–";
}

.pub-list-new {
  margin: 0 0 22px;
  padding: 0 0 0 30px;
  list-style: none;
}

.pub-item {
  padding: 14px 0;
  border-top: 1px dotted var(--line);
}

.pub-item:first-child {
  border-top: 0;
}

.pub-title {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 28px;
}

.pub-title a {
  color: var(--ink);
  line-height: 26px;
}

.pub-title a:hover {
  color: var(--accent);
}

.pub-meta,
.pub-source {
  margin: 0;
  color: var(--footer-gray);
  font-size: 15px;
  line-height: 23px;
}

.pub-source {
  font-style: italic;
}

.side-nav-out {
  margin-top: 14px;
  color: var(--accent) !important;
}

/* ---------- questions page ---------- */

.question-page {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.question-stack {
  display: grid;
  gap: 44px;
}

.question-block h2 {
  margin: 0 0 18px;
  font-size: 27px;
  line-height: 1.3;
}

.question-n {
  margin: 0 0 8px;
  color: var(--gold);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.whatif {
  position: sticky;
  top: 130px;
  padding: 32px 30px;
  background: var(--soft);
  border-left: 3px solid var(--gold);
}

.whatif h2 {
  margin: 0 0 18px;
  font-size: 20px;
}

.whatif-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.whatif-list li {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--footer-gray);
  font-size: 16px;
  line-height: 25px;
}

.whatif-list li:first-child {
  border-top: 0;
}

.whatif-list strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 24px;
}

/* ---------- journeys ---------- */

.journeys-list {
  max-width: 1180px;
  margin: 0 auto;
  padding: 76px 56px 96px;
}

.journey {
  border-top: 1px solid var(--line);
}

.journey:last-child {
  border-bottom: 1px solid var(--line);
}

.journey summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding: 26px 4px 26px 38px;
  cursor: pointer;
  list-style: none;
}

.journey summary::-webkit-details-marker {
  display: none;
}

.journey summary::before {
  content: "+";
  position: absolute;
  margin-left: -38px;
  color: var(--accent);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.1;
}

.journey[open] summary::before {
  content: "–";
}

.journey summary .journey-t {
  font-size: 25px;
}

.journey-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  padding: 0 0 40px 38px;
}

.journey-question {
  color: var(--deep);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 30px;
}

.journey-figure {
  margin: 0;
}

.journey-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

/* ---------- people ---------- */

.people-group {
  margin-bottom: 64px;
}

.people-group h2 {
  margin: 0 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 38px 26px;
}

.people-grid.lead {
  grid-template-columns: minmax(0, 280px);
}

.person {
  text-align: left;
}

.person-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 14px;
  background: var(--soft-2);
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.35), filter 320ms ease;
}

.person:hover .person-photo img,
.person:focus-within .person-photo img {
  transform: scale(1.09) translateY(-4px);
  filter: saturate(1.06);
}

.people-initials {
  display: grid;
  place-content: center;
  height: 100%;
  color: var(--slate);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 2px;
}

.person h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.people-role {
  margin: 0 0 4px;
  color: var(--footer-gray);
  font-size: 15px;
  line-height: 23px;
}

.people-mail {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
}

.people-mail a {
  color: var(--accent);
  font-size: 14px;
  line-height: 22px;
}

.alumni-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.alumni-list li {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: 6px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.alum-name {
  color: var(--ink);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 600;
}

.alum-name a {
  color: var(--deep);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.alum-name a:hover {
  color: var(--accent);
}

.alum-role {
  color: var(--footer-gray);
  font-size: 16px;
  line-height: 25px;
}

/* ---------- news ---------- */

.news-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin-bottom: 64px;
}

.news-card {
  padding: 30px 28px 32px;
  border: 1px solid var(--line);
  background: var(--soft);
}

.news-card h2 {
  margin: 0 0 14px;
  font-size: 20px;
}

.news-card p {
  font-size: 17px;
  line-height: 27px;
}

.news-card p:last-child {
  margin-bottom: 0;
}

.news-stream h2 {
  margin: 0 0 20px;
}

/* A news list reads as a dated index, not as cards — the date is the thing the
   eye looks for, so it leads and the headline hangs off it. */
.news-list {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  border-top: 1px solid var(--line);
}

.news-entry {
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
}

.news-entry h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  /* The global h3 rule capitalises every word, which is right for the short
     labels it was written for and wrong for a headline written as a sentence. */
  text-transform: none;
}

.news-entry h3 a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.news-entry h3 a:hover,
.news-entry h3 a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.news-date {
  margin: 0 0 6px;
  color: var(--footer-gray);
  font-size: 12.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.news-entry-summary {
  margin: 0;
  max-width: 68ch;
  font-size: 17px;
  line-height: 27px;
}

.news-year {
  margin-bottom: 40px;
}

.news-year > h2 {
  margin: 0 0 4px;
  font-size: 15px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--footer-gray);
}

/* ---------- a single news item ---------- */

.news-single {
  max-width: 74ch;
}

.news-single h1 {
  margin: 0 0 18px;
  font-size: 40px;
  line-height: 48px;
}

.news-lede {
  font-size: 20px;
  line-height: 32px;
  color: var(--ink);
  margin-bottom: 22px;
}

.news-single p {
  font-size: 17px;
  line-height: 28px;
}

.news-single h3,
.news-single h4 {
  margin: 32px 0 10px;
  /* Same reason as the list: sub-headings inside a story are sentences. */
  text-transform: none;
}

.news-single ul,
.news-single ol {
  font-size: 17px;
  line-height: 28px;
  padding-left: 22px;
}

.news-single li {
  margin-bottom: 8px;
}

.news-single blockquote {
  margin: 26px 0;
  padding-left: 22px;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--deep);
}

.news-figure {
  margin: 0 0 26px;
}

.news-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.news-archived-note {
  display: inline-block;
  margin: 0 0 20px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--footer-gray);
  font-size: 12.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .news-single h1 {
    font-size: 30px;
    line-height: 38px;
  }

  .news-lede {
    font-size: 18px;
    line-height: 29px;
  }
}

/* ---------- join ---------- */

.join-page {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.join-blocks {
  display: grid;
  gap: 40px;
}

.join-block h2 {
  margin: 0 0 14px;
  font-size: 23px;
  line-height: 1.3;
}

.join-block p {
  max-width: 66ch;
}

.join-contact {
  position: sticky;
  top: 130px;
  padding: 32px 30px;
  background: var(--soft);
  border-left: 3px solid var(--slate);
}

.join-contact h2 {
  margin: 0 0 18px;
  font-size: 20px;
}

.join-contact p {
  font-size: 17px;
  line-height: 28px;
}

/* ---------- about ---------- */

.about-stack {
  display: grid;
  gap: 64px;
}

.about-block h2 {
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.about-block h3 {
  margin: 30px 0 14px;
}

.plain-list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.plain-list li {
  padding: 9px 0 9px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 17px;
  line-height: 27px;
  position: relative;
}

.plain-list li::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--gold);
}

.spinouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.spinout {
  padding: 24px 22px;
  border-top: 3px solid var(--sage);
  background: var(--soft);
}

.spinout h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.spinout p {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .question-page,
  .join-page {
    grid-template-columns: 1fr;
  }

  .whatif,
  .join-contact {
    position: static;
  }

  .journey-body {
    grid-template-columns: 1fr;
  }

  .journey-figure {
    order: -1;
  }
}

@media (max-width: 900px) {
  .band {
    padding: 68px 24px;
  }

  .streams,
  .question-list,
  .platform-cards,
  .journey-links,
  .news-cards,
  .spinouts {
    grid-template-columns: 1fr;
  }

  .home-hero-copy {
    padding: 44px 24px 64px;
  }

  .journeys-list {
    padding: 56px 24px 72px;
  }

  .cover-run img {
    width: 190px;
    height: 240px;
  }

  .alumni-list li {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover-track {
    animation: none;
  }

  .person-photo img,
  .platform-card,
  .cover-run img {
    transition: none;
  }
}

/* buttons sitting on a dark band keep the original inverted treatment */
.on-dark .outline-button,
.black-hero .outline-button {
  border-color: #ffffff;
  color: #ffffff;
}

.on-dark .outline-button:hover,
.black-hero .outline-button:hover {
  background: #ffffff;
  color: var(--ink);
}

/* split hero image fills its half (pages now use a real <img>, not --split-bg) */
.split-image img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center;
}

.split-copy > p {
  max-width: 46ch;
  color: var(--muted);
  font-size: 19px;
  line-height: 31px;
}

.about-hero-wrap .split-image img {
  object-position: center 20%;
}

@media (max-width: 900px) {
  .split-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .split-image img {
    height: 260px;
  }

  .page-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 48px 0 68px;
  }
}

/* people cards: circular portraits, no legacy rule decorations */
.people-grid .person {
  flex: initial;
  text-align: center;
}

.person-photo {
  width: 100%;
  max-width: 220px;
  margin: 0 auto 16px;
  border-radius: 50%;
}

.people-grid.lead .person-photo {
  max-width: 260px;
}

.people-grid .person h3 {
  display: block;
  padding: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 26px;
  text-transform: none;
}

.people-grid .person h3::before,
.people-grid .person h3::after {
  content: none;
}

.people-grid .person-photo img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  object-position: center top;
}

.people-grid .person p {
  font-size: 14px;
  line-height: 22px;
}

/* long single-word titles must not widen the grid on small screens */
.split-image,
.split-copy {
  min-width: 0;
}

.split-copy h1 {
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  .split-copy {
    padding: 44px 26px 48px;
  }

  .split-copy h1 {
    font-size: 38px;
  }

  .home-hero-copy h1 {
    font-size: 32px;
  }
}

h1, h2, h3 {
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  .people-group h2,
  .about-block h2,
  .platform h2 {
    font-size: 28px;
    line-height: 1.25;
  }

  .question-block h2,
  .join-block h2 {
    font-size: 22px;
  }

  .journey summary .journey-t {
    font-size: 20px;
  }
}

@media (max-width: 620px) {
  .outline-button {
    min-width: 0;
    width: 100%;
    padding: 16px 18px;
  }

  .news-card {
    padding: 24px 20px 26px;
  }
}

.people-grid {
  justify-content: start;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.person h3 a {
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.person h3 a:hover {
  color: var(--accent);
}

/* the lab group photo must show everyone — no cover-crop on the People hero */
.people-hero-wrap .split-image {
  display: flex;
  align-items: center;
  background: var(--soft-2);
}

.people-hero-wrap .split-image img {
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.pub-sub + .pub-sub {
  margin-top: 22px;
}

.pub-sub-label {
  margin: 0 0 6px;
  color: var(--deep);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.pub-sub .pub-list-new {
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--line);
}

/* ---------- home hero art now sits on the client's white artwork ---------- */
.home-hero-art {
  background: #ffffff;
}

/* ---------- funders ---------- */

.funders {
  padding: 72px 56px 84px;
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.funders-head {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.funders-note {
  margin: 12px 0 0;
  color: var(--footer-gray);
  font-size: 17px;
}

.funder-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 26px 46px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.funder-grid img {
  width: auto;
  height: 66px;
  max-width: 230px;
  object-fit: contain;
  filter: saturate(0.9);
  opacity: 0.92;
  transition: opacity 200ms ease, filter 200ms ease;
}

.funder-grid img:hover {
  filter: saturate(1);
  opacity: 1;
}

.funder-grid li.square img {
  height: 92px;
}

.funder-grid .funder-name {
  padding: 10px 18px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- in-house sensors ---------- */

.sensor-block {
  margin-top: 34px;
  padding: 26px 26px 28px;
  background: var(--soft);
  border-left: 3px solid var(--sage);
}

.sensor-block .platform-label {
  margin-top: 0;
}

.sensor-body {
  max-width: 62ch;
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 27px;
}

.sensor-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sensor-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform 260ms ease;
}

.sensor-gallery img:hover {
  transform: scale(1.02);
}

/* ---------- institutional links on News ---------- */

.affil-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.affil-list li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.affil-list li:first-child {
  border-top: 0;
}

.affil-list a {
  color: var(--deep);
  font-size: 16px;
  line-height: 24px;
}

.affil-list a:hover {
  color: var(--accent);
}

@media (max-width: 900px) {
  .funders {
    padding: 56px 24px 64px;
  }

  .funder-grid img {
    height: 52px;
  }

  .funder-grid li.square img {
    height: 72px;
  }

  .sensor-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sensor-gallery img,
  .funder-grid img {
    transition: none;
  }
}

/* ---------- the lab's molecule → impact flowchart (home hero) ---------- */

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr) auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto 40px;
  padding: 0;
  list-style: none;
}

.flow img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
}

.flow .flow-arrow {
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
}

/* ---------- a hero with copy only (About, until the lab sends a new image) ---------- */

.solo-hero {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.solo-hero .split-copy {
  max-width: 1240px;
  margin: 0 auto;
  padding: 76px clamp(24px, 5vw, 60px) 80px;
  background: transparent;
}

@media (max-width: 900px) {
  .flow {
    gap: 8px;
  }

  .flow .flow-arrow {
    font-size: 13px;
  }
}

@media (max-width: 620px) {
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 380px;
  }

  .flow .flow-arrow {
    display: none;
  }
}

/* spin-out cards carry the company's own logo and link (their deck, 4 Sep) */
.spinout-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 64px;
  margin-bottom: 16px;
}

.spinout-logo img {
  max-width: 190px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.spinout h3 a {
  color: var(--deep);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.spinout h3 a:hover {
  color: var(--accent);
}

/* ============================================================
   Round 5 — word webs, slideshow, alumni page, larger type
   ============================================================ */

/* ---------- philosophy: hub-and-spoke word webs ---------- */

.streams {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: transparent;
  border: 0;
  gap: 20px;
}

.streams .web {
  padding: 0;
  background: transparent;
}

.web-plot {
  position: relative;
  width: min(100%, 366px);
  margin: 0 auto;
  aspect-ratio: 1 / 1.04;
}

.web-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.web-lines line {
  stroke: var(--gold);
  stroke-width: 0.4;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  opacity: 0.75;
}

.is-in .web-lines line {
  animation: web-draw 620ms ease forwards;
  animation-delay: calc(var(--i) * 140ms);
}

@keyframes web-draw {
  to { stroke-dashoffset: 0; }
}

.web-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-content: center;
  width: 40%;
  aspect-ratio: 1;
  margin: 0;
  transform: translate(-50%, -50%) scale(0.94);
  border-radius: 50%;
  background: var(--deep);
  color: #ffffff;
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.6px;
  text-align: center;
  padding: 0 8px;
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 320ms ease;
}

.is-in .web-hub {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.web-nodes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-nodes li {
  padding: 0;
  border: 0;
}

.web-node {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: max-content;
  /* Never wider than half the web, so the two pills at the bottom cannot meet
     in the middle however long the lab makes their labels. */
  max-width: min(190px, 46%);
  z-index: 2;
  --tx: -50%;
  --ty: -50%;
  transform: translate(var(--tx), var(--ty)) scale(0.9);
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 320ms ease;
  transition-delay: calc(var(--i) * 140ms + 220ms);
}

/* A pill centred on an anchor 11% in from the edge hangs half its width outside
   the web, and the columns are close enough that it lands on the neighbour's
   pill. The ones at the sides are anchored to this web's own edge instead and
   grow inward, so a web can never spill into the one beside it. */
.web-node.is-left {
  left: 0;
  --tx: 0;
}

.web-node.is-right {
  left: auto;
  right: 0;
  --tx: 0;
}

/* Hangs from the anchor instead of straddling it, so a two-line label grows
   down into open space rather than up over the hub. */
.web-node.is-below {
  --ty: 0;
}

.is-in .web-node {
  transform: translate(var(--tx), var(--ty)) scale(1);
  opacity: 1;
}

.web-node span {
  display: inline-block;
  max-width: 190px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(29, 40, 48, 0.05);
  transition: border-color 200ms ease, transform 200ms ease;
}

.web-node:hover span {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ---------- slideshow (translational journeys) ---------- */

.journey-show {
  padding: 56px 56px 8px;
}

.slideshow {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--soft);
}

.slides {
  position: relative;
  aspect-ratio: 16 / 9;
}

.slides .slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease, visibility 700ms ease;
}

.slides .slide.is-active {
  opacity: 1;
  visibility: visible;
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slides figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 28px 20px;
  background: linear-gradient(to top, rgba(29, 40, 48, 0.72), rgba(29, 40, 48, 0));
}

.slides figcaption .journey-n {
  color: rgba(255, 255, 255, 0.78);
}

.slides figcaption a {
  color: #ffffff;
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 23px;
  font-weight: 300;
  line-height: 1.25;
}

.slides figcaption a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.slide-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.slide-nav:hover {
  background: #ffffff;
}

.slide-nav.prev { left: 14px; }
.slide-nav.next { right: 14px; }

.slide-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.slide-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.slide-dots button[aria-selected="true"] {
  background: #ffffff;
  transform: scale(1.25);
}

/* ---------- alumni ---------- */

.alumni-teaser {
  max-width: 60ch;
}

.alumni-page .alumni-list {
  margin-top: 22px;
}

@media (max-width: 900px) {
  .streams {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .web-plot {
    max-width: 420px;
    margin: 0 auto;
  }

  .journey-show {
    padding: 40px 20px 4px;
  }

  .slides figcaption a {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-hub {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: none;
  }

  .web-node {
    opacity: 1;
    transform: translate(var(--tx), var(--ty));
    transition: none;
  }

  .web-lines line {
    stroke-dashoffset: 0;
    animation: none;
  }

  .slides .slide {
    transition: none;
  }
}

/* On a narrow phone the web cannot hold its geometry without overflowing, so it
   degrades to the hub as a pill with its topics beneath — same content, no scroll. */
@media (max-width: 620px) {
  .web-plot {
    width: auto;
    aspect-ratio: auto;
    text-align: center;
  }

  .web-lines {
    display: none;
  }

  .web-hub {
    position: static;
    display: inline-block;
    width: auto;
    aspect-ratio: auto;
    padding: 11px 22px;
    border-radius: 999px;
    transform: none;
    opacity: 1;
  }

  .web-nodes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }

  .web-node {
    position: static;
    max-width: none;
    transform: none;
    opacity: 1;
  }

  .web-node.is-left,
  .web-node.is-right {
    left: auto;
    right: auto;
  }

  .streams .web {
    padding: 6px 0 18px;
  }
}

/* the lab asked for a bigger footer (11 Sep) */
.footer-address,
.footer-contact a {
  font-size: 15px;
  line-height: 26px;
}

.copyright,
.credit,
.credit a {
  font-size: 12.5px;
  line-height: 18px;
}

@media (max-width: 900px) {
  .footer-addresses {
    gap: 14px 32px;
  }
}

/* ---------- one type system, applied consistently ----------
   Audit (11 Sep) found controls falling back to Arial and four different sizes
   doing the same "small label" job. Buttons take the UI face; every uppercase
   micro-label shares one size; secondary text shares one size. */

button,
input,
select,
textarea {
  font-family: Nunito, Arial, Helvetica, sans-serif;
}

.slide-nav,
.search-overlay-close {
  font-family: Lato, Arial, Helvetica, sans-serif;
}

.eyebrow,
.platform-label,
.pub-sub-label,
.journey-n,
.question-n,
.footer-address-label,
.platform-card-link,
.web-hub {
  font-size: 12.5px;
  letter-spacing: 1.8px;
}

.text-button,
.pending {
  font-size: 13px;
  letter-spacing: 1.8px;
}

/* secondary text: one size, not 14 / 15 / 16 depending on the block */
.people-role,
.pub-meta,
.pub-source,
.alum-role,
.chiplist li,
.web-node span,
.spinout p,
.affil-list a,
.whatif-list li,
.whatif-list strong {
  font-size: 15.5px;
  line-height: 24px;
}

/* card and panel copy: one size */
.platform-card p,
.news-card p,
.join-contact p,
.sensor-body,
.funders-note,
.plain-list li,
.streams li,
.alumni-teaser {
  font-size: 17px;
  line-height: 27px;
}

/* the two that specificity was still overriding */
.people-grid .person .people-role,
.people-grid .person .people-mail,
.people-grid .person .people-mail a {
  font-size: 15.5px;
  line-height: 24px;
}

.pipeline li,
.chain li,
.pub-count {
  font-size: 12.5px;
  letter-spacing: 1.6px;
}