/* Use the original wordmarks without cropping, recoloring or distortion. */
.gateway-wordmark {
  display: block;
  width: 100%;
  aspect-ratio: 1398 / 190;
}
.gateway-wordmark > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.gateway-wordmark > .gateway-wordmark__outlined { display: none; }
.gateway-wordmark--inverse > .gateway-wordmark__outlined,
html[data-theme="dark"] .gateway-wordmark > .gateway-wordmark__outlined { display: block; }
html[data-theme="dark"] .gateway-wordmark > .gateway-wordmark__plain { display: none; }

.school-brand:has(.gateway-wordmark) { background: transparent; }
.brand.brand--wordmark {
  width: 260px;
  max-width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.brand--wordmark > .brand__product { margin: 0; }
.site-header__inner--portal .brand.brand--wordmark { flex: 0 1 260px; }

/* Keep the complete wordmark legible beside mobile navigation controls. */
@media (max-width: 520px) {
  .school-header .school-brand:has(.gateway-wordmark) { align-self: flex-start; }
  .site-header__inner.site-header__inner--portal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
  }
  .site-header__inner--portal .brand.brand--wordmark {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .site-header__inner--portal > .tool-sidebar__toggle { justify-self: start; }
  .site-header__inner--portal > .display-trigger { grid-column: 2; }
  .site-header__inner--portal > .account-menu { grid-column: 3; }
}

/* With scripting unavailable, match the public page's unchanged light palette.
   In OS forced colors, retain a contrasting backing for the chosen image. */
@media (forced-colors: active) {
  .gateway-wordmark { forced-color-adjust: none; background: #fff; }
  html[data-theme="dark"] .gateway-wordmark,
  .gateway-wordmark--inverse { background: #121820; }
}