/* Scroll-responsive colour atmosphere on the three editorial heroes. */
.research-hero.hero-gradient {
  --hero-accent: 255, 56, 92;
  background-color: #111316;
  background-image:
    radial-gradient(ellipse at 30% 40%, rgba(var(--hero-accent), .19), transparent 62%),
    radial-gradient(ellipse at 75% 65%, rgba(var(--hero-accent), .10), transparent 58%),
    linear-gradient(135deg, #111316, #0d1015);
  background-size: 160% 160%, 145% 145%, 100% 100%;
  background-position: var(--hero-glow-x, 35%) var(--hero-glow-y, 45%), var(--hero-glow-other-x, 75%) var(--hero-glow-other-y, 65%), center;
}
.research-hero.hero-gradient--blue { --hero-accent: 77, 166, 255; }
.research-hero.hero-gradient--violet { --hero-accent: 168, 117, 255; }
.research-hero.hero-gradient {
  overflow: hidden;
  background-image: linear-gradient(135deg, #111316, #0d1015);
}
.hero-gradient > .hero-gradient__spot {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hero-accent), .32) 0%, rgba(var(--hero-accent), .13) 35%, transparent 70%);
  pointer-events: none;
  will-change: transform;
}

.hero-gradient > .hero-gradient__spot--tiny {
  background: radial-gradient(circle, rgba(var(--hero-accent), .65), rgba(var(--hero-accent), .28) 30%, transparent 70%);
}
@media (max-width: 430px) {
  .research-hero.hero-gradient { padding-top: 80px; padding-bottom: 112px; gap: 5vw; }
}

.hero-gradient .research-hero__page-title {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #fff;
  text-shadow: none;
}
.hero-gradient .research-hero__page-title {
  position: relative;
  -webkit-text-stroke: 0;
}
.hero-title-outline__source { visibility: hidden; }
.hero-title-outline__svg {
  position: absolute; inset: 0; width: 100%; height: 1.25em; overflow: visible;
  font: inherit; letter-spacing: inherit;
  -webkit-text-fill-color: #fff;
}
.hero-title-outline__svg text { fill: #fff; stroke: none; }