/* Environmental images share the page surface. Source assets stay replaceable. */
:root {
  --image-light-rgb: 250, 247, 239;
  --image-hero-rgb: 242, 242, 228;
  --image-filter: saturate(.92) brightness(1.015);
}

/* Home: a continuous photographic field behind the introduction. */
.home-hero { position: relative; isolation: isolate; }
.home-hero::before { display: none; }
.home-hero-grid {
  position: static;
  display: block;
  min-height: 790px;
  padding-block: 110px 135px;
}
.hero-copy { width: 57%; max-width: 730px; position: relative; z-index: 2; }
.hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-image-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 52%;
  filter: var(--image-filter);
}
.hero-image-wrap::after {
  position: absolute;
  inset: 0;
  content: '';
  box-shadow: none;
  background:
    linear-gradient(90deg,
      var(--hero-surface) 0%,
      var(--hero-surface) 28%,
      rgba(var(--image-hero-rgb), .98) 40%,
      rgba(var(--image-hero-rgb), .79) 51%,
      rgba(var(--image-hero-rgb), .32) 68%,
      rgba(var(--image-hero-rgb), .08) 88%),
    linear-gradient(180deg,
      rgba(var(--image-hero-rgb), .42) 0%,
      rgba(var(--image-hero-rgb), .12) 27%,
      rgba(var(--image-hero-rgb), .12) 63%,
      rgba(var(--image-hero-rgb), .76) 90%,
      var(--hero-surface) 100%);
  pointer-events: none;
}
.hero-visual figcaption {
  position: absolute;
  z-index: 1;
  right: max(var(--gutter), calc((100% - var(--max)) / 2));
  bottom: 42px;
  width: 32%;
  max-width: 440px;
  padding: 0;
  color: #60664f;
}
.hero-figure-number { color: #60664f; }

/* All four inner-page lead images fade toward the copy and page edges. */
.document-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 650px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}
.document-hero__copy {
  position: relative;
  z-index: 2;
  display: block;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--max);
  margin-inline: auto;
  padding-block: 84px 100px;
  border: 0;
}
.document-hero__copy .eyebrow { margin-bottom: 30px; }
.document-hero__copy h1 {
  max-width: 58%;
  font-size: clamp(46px, 5.2vw, 76px);
  line-height: 1.08;
}
.document-hero__copy > p:last-child {
  width: 44%;
  max-width: 510px;
  margin-top: 30px;
  padding: 0;
}
.document-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
}
.document-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 52%;
  filter: var(--image-filter);
}
.document-hero__image::after {
  position: absolute;
  content: '';
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--paper) 0%,
      var(--paper) 27%,
      rgba(var(--image-light-rgb), .98) 39%,
      rgba(var(--image-light-rgb), .87) 49%,
      rgba(var(--image-light-rgb), .36) 66%,
      rgba(var(--image-light-rgb), .03) 88%),
    linear-gradient(180deg,
      var(--paper) 0%,
      rgba(var(--image-light-rgb), .45) 13%,
      rgba(var(--image-light-rgb), 0) 34%,
      rgba(var(--image-light-rgb), .06) 61%,
      rgba(var(--image-light-rgb), .65) 84%,
      var(--paper) 100%);
  pointer-events: none;
}
body[data-page=journey] .document-hero__image img { object-position: 72% 55%; }
body[data-page=focus] .document-hero__image img { object-position: 68% 52%; }
body[data-page=method] .document-hero__image img { object-position: 68% 65%; }

/* The former rectangular body image is now a full-width editorial scene. */
.research-image {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--paper);
}
.research-image figure {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 560px;
}
.research-image img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 56%;
  filter: var(--image-filter);
}
.research-image figure::after {
  position: absolute;
  content: '';
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      var(--paper) 0%,
      var(--paper) 20%,
      rgba(var(--image-light-rgb), .97) 32%,
      rgba(var(--image-light-rgb), .75) 45%,
      rgba(var(--image-light-rgb), .20) 66%,
      rgba(var(--image-light-rgb), .02) 90%),
    linear-gradient(180deg,
      var(--paper) 0%,
      rgba(var(--image-light-rgb), .60) 15%,
      rgba(var(--image-light-rgb), .03) 37%,
      rgba(var(--image-light-rgb), .05) 65%,
      rgba(var(--image-light-rgb), .64) 85%,
      var(--paper) 100%);
  pointer-events: none;
}
.research-image figcaption {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--max);
  min-height: 560px;
  margin-inline: auto;
  padding-block: 80px;
}
.research-image figcaption span:first-child {
  max-width: 430px;
  width: 40%;
  font: clamp(36px, 4vw, 55px)/1.18 var(--serif);
  color: var(--primary);
  letter-spacing: -.035em;
  text-transform: none;
}
.research-image figcaption span:last-child {
  display: block;
  order: -1;
  font: 10px/1.65 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 1050px) and (min-width: 761px) {
  .home-hero-grid { min-height: 700px; padding-block: 85px 125px; }
  .document-hero { min-height: 610px; }
  .document-hero__copy { padding-block: 70px 90px; }
  .document-hero__copy h1 { max-width: 61%; }
  .document-hero__copy > p:last-child { width: 48%; }
  .research-image figcaption span:first-child { width: 44%; }
}

/* Narrow screens use the same fading treatment, vertically below the copy. */
@media (max-width: 760px) {
  .home-hero-grid { min-height: 0; padding-block: 54px 320px; }
  .hero-copy { width: 100%; max-width: none; padding: 0; }
  .hero-visual { top: auto; bottom: 0; height: 400px; }
  .hero-image-wrap { max-height: none; aspect-ratio: auto; }
  .hero-image-wrap img { object-position: 62% 56%; }
  .hero-image-wrap::after {
    background:
      linear-gradient(180deg,
        var(--hero-surface) 0%,
        rgba(var(--image-hero-rgb), .98) 17%,
        rgba(var(--image-hero-rgb), .62) 35%,
        rgba(var(--image-hero-rgb), .16) 56%,
        rgba(var(--image-hero-rgb), .28) 73%,
        rgba(var(--image-hero-rgb), .95) 94%,
        var(--hero-surface) 100%),
      linear-gradient(90deg, rgba(var(--image-hero-rgb), .35), rgba(var(--image-hero-rgb), .04) 75%);
  }
  .hero-visual figcaption { left: var(--gutter); right: var(--gutter); bottom: 24px; width: auto; max-width: none; }
  .document-hero { display: block; min-height: 0; }
  .document-hero__copy { padding-block: 48px 340px; }
  .document-hero__copy .eyebrow { margin-bottom: 24px; }
  .document-hero__copy h1 { max-width: 100%; font-size: clamp(44px, 7.5vw, 62px); }
  .document-hero__copy > p:last-child { width: 100%; max-width: 580px; margin-top: 24px; }
  .document-hero__image { top: auto; bottom: 0; height: 390px; }
  .document-hero__image img { height: 100%; }
  .document-hero__image::after {
    background:
      linear-gradient(180deg,
        var(--paper) 0%,
        rgba(var(--image-light-rgb), .98) 18%,
        rgba(var(--image-light-rgb), .58) 38%,
        rgba(var(--image-light-rgb), .05) 61%,
        rgba(var(--image-light-rgb), .14) 75%,
        var(--paper) 100%),
      linear-gradient(90deg, rgba(var(--image-light-rgb), .27), rgba(var(--image-light-rgb), .02));
  }
  .research-image figure { min-height: 530px; }
  .research-image img { top: auto; bottom: 0; height: 380px; }
  .research-image figcaption { min-height: 530px; padding-block: 48px 320px; justify-content: flex-start; }
  .research-image figcaption span:first-child { width: 100%; max-width: 450px; font-size: 37px; }
  .research-image figcaption span:last-child { display: block; font-size: 9px; }
  .research-image figure::after {
    inset: auto 0 0;
    height: 380px;
    background:
      linear-gradient(180deg,
        var(--paper) 0%,
        rgba(var(--image-light-rgb), .97) 15%,
        rgba(var(--image-light-rgb), .53) 34%,
        rgba(var(--image-light-rgb), .04) 58%,
        rgba(var(--image-light-rgb), .18) 76%,
        var(--paper) 100%),
      linear-gradient(90deg, rgba(var(--image-light-rgb), .22), rgba(var(--image-light-rgb), .02));
  }
}

@media print {
  .hero-visual, .document-hero__image, .research-image img, .research-image figure::after { display: none; }
  .hero-copy { width: 100%; }
  .home-hero-grid { min-height: 0; padding-block: 35px; }
  .document-hero { min-height: 0; background: white; }
  .document-hero__copy { padding-block: 35px; }
  .document-hero__copy h1, .document-hero__copy > p:last-child { width: 100%; max-width: none; }
  .research-image, .research-image figure { background: white; min-height: 0; }
  .research-image figcaption { min-height: 0; padding-block: 35px; }
}