/* Align the existing speaker cards as credentials wrap across different widths. */
#speakers .roster .person {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: 0;
}
#speakers .roster .person .role { min-height: 0; text-wrap: pretty; }
#speakers .person.johnny .credential-phrase,
.profile-dialog .credential-phrase { display: inline-block; max-width: 100%; }
#speakers .person.johnny .role { line-break: strict; }

/* Use the supplied portrait unchanged; crop only its framing in the page. */
.hero .person.johnny .portrait img {
  width: 200%;
  height: auto;
  max-width: none;
  left: 50%;
  top: calc(14px - 18cqw);
  bottom: auto;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center top;
}