/* Share the preceding Investigator card's exact responsive typography.
   Both headings and lead paragraphs use the same values at each breakpoint. */
.home .portfolio-story {
  --story-heading-size: clamp(36px, 3.85vw, 58px);
  --story-heading-line: 1.12;
  --story-heading-tracking: -.055em;
  --story-heading-margin: 16px;
  --story-lead-size: 18px;
}
.home #about .about-title h2 {
  font-family: var(--sans);
  font-size: var(--story-heading-size);
  font-weight: 500;
  line-height: var(--story-heading-line);
  letter-spacing: var(--story-heading-tracking);
  margin-top: var(--story-heading-margin);
}
.home #about .about-copy > p.lead { font-size: var(--story-lead-size); }
@media screen and (min-width: 901px) {
  .home .portfolio-story {
    --story-heading-size: clamp(27.36px, 2.7vw, 39.6px);
    --story-heading-margin: 13.3px;
    --story-lead-size: 16.2px;
  }
}
@media (max-width: 900px) {
  .home .portfolio-story { --story-heading-size: clamp(36px, 5.6vw, 50px); }
}
@media (max-width: 760px) {
  .home .portfolio-story {
    --story-heading-size: clamp(34px, 8.4vw, 43px);
    --story-heading-line: 1.13;
    --story-heading-tracking: -.05em;
  }
}

/* Continue the surrounding page's typography and accent palette. */
.home .research {
  --research-emphasis: var(--ink);
  --research-step-ink: #7d62aa;
  --research-art-pad: var(--gutter);
  max-width: 1600px;
  margin: 0 auto;
  padding: 42px var(--gutter) 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
html[data-theme=dark] .home .research { --research-step-ink: #ccbdf3; }
.research-heading .micro {
  display: block;
  font: 400 12px/1.6 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.research-heading h2 {
  margin-top: var(--story-heading-margin);
  font-family: var(--sans);
  font-size: var(--story-heading-size);
  font-weight: 500;
  letter-spacing: var(--story-heading-tracking);
  line-height: var(--story-heading-line);
  text-wrap: balance;
}
.research strong { color: var(--research-emphasis); font-weight: 700; }
.research-heading h2 strong { color: var(--accent); font-weight: inherit; }
.research-intro {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  column-gap: 44px;
  margin-top: 24px;
}
.research-intro p { font-size: 16px; font-weight: 400; line-height: 1.65; letter-spacing: 0; text-wrap: pretty; color: var(--muted); }
.research-intro p:first-child { font-size: var(--story-lead-size); line-height: 1.6; letter-spacing: -.015em; }
.research-intro p + p { margin: 0; padding-left: 36px; border-left: 1px solid var(--line); }

/* Caption centers at 18%, 50% and 82% align with the visible artwork stages. */
.research-evidence {
  margin-top: 36px;
  overflow: hidden;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.research-evidence > img { display: block; width: 100%; height: auto; background: #0c1428; }
.research-captions {
  display: grid;
  grid-template-columns: 36% 28% 36%;
  gap: 0;
  padding: 30px 0 32px;
  text-align: center;
}
.research-captions > div { min-width: 0; padding-inline: 20px; }
.research-captions > div + div { border-left: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.research-captions h3 { font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -.035em; text-wrap: balance; }
.research-captions p { max-width: 29ch; margin: 8px auto 0; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* Four compact, equally sized cards give the process a clear rhythm. */
.research-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
}
.research-steps > li {
  min-width: 0;
  padding: 24px 20px 26px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft));
}
.research-phase { display: flex; align-items: center; gap: 10px; }
.research-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--research-step-ink) 11%, transparent);
  color: var(--research-step-ink);
  font: 400 12px/1 var(--sans);
}
.research-step-label { display: block; font: 400 12px/1.6 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--research-step-ink); }
.research-steps h3 { min-height: 1.3em; margin-top: 18px; font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -.035em; text-wrap: pretty; }
.research-steps p { margin-top: 12px; font-size: 16px; font-weight: 400; line-height: 1.65; text-wrap: pretty; color: var(--muted); }
.research-closing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.research-closing > span:first-child { color: var(--ink); }

/* One continuous card follows a deliberate pause in the narrative. */
.home .portfolio-story .research + .work {
  --work-entry-pad: var(--gutter);
  margin-top: clamp(72px, 6vw, 104px);
  padding-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme=dark] .home .portfolio-story .research + .work {
  background: transparent;
  box-shadow: none;
}
.home .portfolio-story .research + .work::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -42px;
  height: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  pointer-events: none;
}
/* A quiet, complete outline and soft elevation define the overview itself. */
.portfolio-overview {
  --overview-line: color-mix(in srgb, var(--line) 85%, var(--surface));
  margin: 0 calc(-1 * var(--work-entry-pad)) 34px;
  padding: 32px var(--work-entry-pad) 30px;
  border: 1px solid var(--overview-line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 14px 40px -28px rgb(22 34 57 / .22), 0 1px 3px rgb(22 34 57 / .025);
}
html[data-theme=dark] .portfolio-overview {
  --overview-line: var(--line);
  box-shadow: 0 18px 42px -28px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .025);
}
.portfolio-overview .impact-metric + .impact-metric { border-color: var(--overview-line); }
.home .portfolio-story .research + .work .portfolio-overview > .section-head {
  display: grid;
  grid-template-columns: minmax(0, .405fr) minmax(0, .595fr);
  align-items: center;
  gap: 0;
  padding-bottom: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--overview-line);
}
.portfolio-overview .section-head h2 {
  margin: 0;
  padding-right: 24px;
  font-size: clamp(32px, 3.1vw, 48px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.portfolio-overview .section-head > p {
  max-width: none;
  margin: 0;
  padding: 4px 0 4px 34px;
  border-left: 1px solid var(--overview-line);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}
.home .portfolio-story .research + .work .portfolio-overview > .portfolio-impact {
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 901px) {
  .home .research { --research-art-pad: var(--desktop-pad); width: var(--desktop-frame); max-width: none; padding-inline: var(--desktop-pad); }
  .research-evidence { width: calc(100% + 2 * var(--desktop-pad)); max-width: none; margin-inline: calc(-1 * var(--desktop-pad)); }
  .home .portfolio-story .research + .work { --work-entry-pad: var(--desktop-pad); }
}
@media (min-width: 761px) and (max-width: 1300px) {
  .research-steps h3 { min-height: 2.6em; }
}
@media (max-width: 1100px) {
  .research-intro { column-gap: 28px; }
  .research-intro p + p { padding-left: 28px; }
  .research-captions > div { padding-inline: 16px; }
  .research-captions h3 { font-size: 20px; }
  .research-steps { gap: 12px; }
  .research-steps > li { padding: 20px 14px 22px; }
  .research-phase { gap: 7px; }
  .research-step-number { flex-basis: 22px; height: 22px; font-size: 11px; }
  .research-step-label { font-size: 11px; letter-spacing: .04em; }
  .research-steps h3 { font-size: 19px; }
}
@media (max-width: 760px) {
  .home .research { padding-top: 32px; }
  .research-heading h2 { text-wrap: initial; }
  .research-intro { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
  .research-intro p + p { padding: 0; border: 0; }
  .research-evidence { width: calc(100% + 2 * var(--gutter)); margin: 28px calc(-1 * var(--gutter)) 0; border-inline: 0; border-radius: 0; }
  .research-captions { padding-block: 22px 24px; }
  .research-captions > div { padding-inline: 8px; }
  .research-captions h3 { min-height: 2.6em; font-size: 16px; }
  .research-captions p { margin-top: 8px; font-size: 14px; line-height: 1.55; }
  .research-steps { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .research-steps > li { padding: 22px 24px 24px; }
  .research-phase { gap: 10px; }
  .research-step-number { flex-basis: 28px; height: 28px; font-size: 12px; }
  .research-step-label { font-size: 12px; letter-spacing: .07em; }
  .research-steps h3 { min-height: 0; margin-top: 16px; font-size: 21px; }
  .research-steps p { margin-top: 10px; }
  .research-closing { grid-template-columns: 1fr; gap: 5px; margin-top: 26px; padding-top: 22px; }
  .home .portfolio-story .research + .work { margin-top: 64px; }
  .home .portfolio-story .research + .work::before { top: -32px; }
  .portfolio-overview {
    margin-inline: calc(12px - var(--work-entry-pad));
    padding-inline: calc(var(--work-entry-pad) - 12px);
    padding-block: 26px;
    margin-bottom: 28px;
    border-radius: 18px;
  }
  .home .portfolio-story .research + .work .portfolio-overview > .section-head { grid-template-columns: 1fr; gap: 18px; padding-bottom: 24px; margin-bottom: 22px; }
  .portfolio-overview .section-head h2 { padding: 0; font-size: clamp(30px, 8vw, 38px); }
  .portfolio-overview .section-head > p { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--overview-line); }
}
@media print {
  .home .research { --research-step-ink: #59477f; break-inside: auto; }
  .research-evidence { break-inside: avoid; background: white; }
  .research-steps > li { break-inside: avoid; }
  .home .portfolio-story .research + .work { margin-top: 48px; background: white; }
}