/* Text is anchored to the current 2373 × 1335 hero, not the previous artwork. */
@media (min-width: 901px) {
  .landing {
    --art-width: max(100vw, 177.752809dvh);
    --art-height: max(100dvh, 56.257902vw);
    --panel-inset: .225;
    --panel-copy-width: min(20vw, calc(50vw - var(--art-width) * var(--panel-inset) - 24px));
  }
  .introduction, .connection {
    top: calc(50% - var(--art-height) * .089);
    width: var(--panel-copy-width);
    transform: translateY(-50%);
    container-type: inline-size;
  }
  .introduction {
    left: auto;
    right: calc(50% + var(--art-width) * var(--panel-inset));
  }
  .connection {
    left: calc(50% + var(--art-width) * var(--panel-inset));
    right: auto;
  }
  .introduction h1 {font-size: max(18px, 9.5cqw); line-height: 1.06;}
  .description, .announcement {font-size: max(12px, 5cqw); line-height: 1.3;}
  .description {margin-top: 5cqw;}
  .announcement {margin-top: 7cqw;}
  .desktop-break {display: none;}
  .signoff {width: 100%; gap: 5cqw; justify-content: center;}
  .signoff img {width: 42cqw; flex: 0 0 42cqw;}
  .signoff p {font-size: 10cqw; line-height: 1.15;}
  .socials {gap: 3cqw; margin-top: 5cqw;}
  .socials a, .socials button {width: 16cqw; height: 16cqw; min-width: 0; min-height: 0; padding: 3cqw;}
  .socials svg {width: 8cqw; height: 8cqw; min-width: 0; min-height: 0;}
  .brand {left: 50%; transform: translateX(-50%);}
}
/* On very wide windows, keep the portrait's head below the wordmark. */
@media (min-width: 901px) and (min-aspect-ratio: 2/1) {
  .hero img {object-position: center top;}
  .introduction, .connection {top: calc(var(--art-height) * .411);}
  .brand {top: 24px;}
}