/*
 * The brand lockup in the shared header: the logo's gap and the wordmark beside
 * it, including the gradient rule under the words.
 *
 * It sits in its own file rather than in assets/css/site-chrome.css because the
 * wordmark needs Plus Jakarta Sans, which only the pages that link
 * assets/css/fonts.css have — and because there were three lockups here until
 * every page family moved to one header (see scripts/lib/site-nav.mjs).
 */

.dejourney-brand {
  gap: 0.35rem;
}

.dejourney-brand-name {
  display: block;
  max-width: 6rem;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.57rem;
  font-weight: 800;
  font-synthesis: none;
  font-kerning: normal;
  font-optical-sizing: auto;
  letter-spacing: 0.045em;
  line-height: 1.25;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dejourney-brand-name::after {
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.35rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #e95d24, #65b7c7);
  content: "";
}

@media (min-width: 640px) {
  .dejourney-brand {
    gap: 0.8rem;
  }

  .dejourney-brand-name {
    max-width: 13rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 520px) {
  .dejourney-brand-name {
    display: none;
  }
}