/* Both words start at the same size; only the descriptor recedes on scroll. */
.hero--connected .connected-headline {
  width: 100%;
  min-width: 0;
  align-self: stretch;
  container-type: inline-size;
  /* Keep a consistent letter shape over both bright walls and dark harbour water. */
  mix-blend-mode: normal;
}

html .hero.hero--connected #hero-title {
  flex-direction: row;
  align-items: baseline;
  gap: .2em;
  font-size: clamp(24px, 11cqi, 198px);
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: rgb(250 252 255 / .95);
  text-shadow: 0 2px 16px rgb(3 22 36 / .12);
}

.hero--connected .connected-title-brand,
.hero--connected .connected-title-descriptor {
  display: block;
  flex: none;
  font-size: 1em;
  line-height: 1;
  letter-spacing: inherit;
}

.hero--connected .connected-title-descriptor {
  transform: scale(var(--descriptor-scale, 1));
  transform-origin: left 86%;
}

/* Small lettering needs a steadier contrast against the detailed photographs. */
@media (max-width: 809px) {
  html .hero.hero--connected #hero-title {
    color: rgb(250 252 255 / .97);
    text-shadow: 0 1px 10px rgb(3 26 45 / .12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--connected .connected-title-descriptor { transform: none; }
}