.hero {
  flex: 1;
}

.hero-mark {
  top: 50%;
  left: 50%;
  width: 100%; /* of .hero, not 100vw: .hero is inset by main's padding and clips overflow */
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  pointer-events: none;
}

.hero-content {
  width: min(68.75rem, 90vw, 100%); /* 100%: rem padding grows with enlarged text */
  min-width: 0;
  gap: 0.75rem;
}

.hero-nav a {
  color: var(--black); /* sets currentColor for the shared focus ring */
}

/* stretches the tap target to 44px tall (the wordmarks are 28px on mobile)
   without growing the focus ring, which the hero's overflow would clip */
.hero-nav a::after {
  content: "";
  position: absolute;
  inset: -0.5rem 0;
}

/* 1.75rem, unless enlarged text would push the three wordmarks (each up to
   4x as wide as tall) past the clipped hero: then they shrink to fit */
.hero-nav img {
  width: auto;
  height: min(1.75rem, calc((100vw - 2 * var(--page-padding-mobile) - 1rem) / 12));
}

.logo {
  height: auto;
  mix-blend-mode: multiply;
}

/* mobile: out of flow, so the logo alone centers on the watermark; the quote
   centers in the band between the watermark's bottom edge (the hero's center
   plus half the watermark, which is the hero's width at 1376:790) and the
   bottom-pinned nav (0.5rem inset + 1.75rem wordmarks) */
.press {
  top: calc(50% + (100vw - 2 * var(--page-padding-mobile)) * 790 / 1376 / 2);
  bottom: 2.25rem;
}

.press-quote {
  font-size: 0.85rem; /* 15% under the inherited 1rem, at both breakpoints */
}

.press-logo {
  width: 26vw; /* scales with the 90vw wordmark on mobile */
  height: auto;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .hero-mark {
    width: 69vw;
  }

  .hero-content {
    width: min(85vw, 100%);
  }

  .hero-nav {
    padding: 0 4px;
  }

  .hero-nav img {
    height: 2.6vw; /* scales with the 85vw wordmark so the proportions match the mock at any width */
  }

  .press {
    margin-top: 3.25rem; /* 4rem from the logo, with .hero-content's 0.75rem gap */
  }

  .press-logo {
    width: 12.5rem;
  }
}