/*
 * Temporary VFPREP / CROSSROADS wordmark trial.
 * Kept isolated so the previous title treatment can be restored cleanly.
 */
.brand {
  position: absolute;
  top: 26px;
  left: calc(50% + 15px);
  display: flex;
  width: max-content;
  align-items: center;
  flex-direction: row;
  gap: 16px;
  color: #dbe4ec;
  font-family: "Crossroad Latin", "Bahnschrift Condensed", "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: rotate(90deg);
  transform-origin: top left;
}

.brand-primary,
.brand-subtitle {
  display: block;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
}

.brand-primary {
  font-family: "Crossroad Latin", "Bahnschrift Condensed", "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  font-size: 23px;
  font-weight: 650;
  font-stretch: condensed;
  line-height: 1;
  letter-spacing: .13em;
}

.brand strong {
  color: #6ecdf5;
  font-weight: 650;
  text-shadow: 0 0 9px rgba(110, 205, 245, .2);
}

.brand-subtitle {
  width: auto;
  color: #8a97a2;
  font: 500 9px/1 "Crossroad Latin", "Bahnschrift Condensed", "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .58em;
}

@media (max-width: 760px) {
  header .brand {
    position: static;
    width: auto;
    min-height: 44px;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    margin-right: auto;
    font-size: inherit;
    letter-spacing: normal;
    transform: none;
  }

  .brand-primary,
  .brand-subtitle {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }

  .brand-primary {
    font-size: 16px;
    letter-spacing: .2em;
  }

  .brand-subtitle {
    width: auto;
    font-size: 7px;
    letter-spacing: .42em;
  }
}