/* A gentle blue-to-lavender blend, retaining the supplied wordmark. */
:root {
  --brand-mid: #5279e8;
  --brand-end: #8074d6;
}
html[data-theme="dark"] {
  --brand-mid: #698de8;
  --brand-end: #a395e4;
}
.brand.brand-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 144px;
  height: 30px;
  gap: 0;
  flex-shrink: 0;
  line-height: 1;
}
.brand.brand-wordmark img {
  display: block;
  width: 144px;
  height: auto;
  max-width: 100%;
}
@media (max-width: 539px) {
  .header-inner > .brand.brand-wordmark {
    width: 124px;
    height: 28px;
  }
  .header-inner > .brand.brand-wordmark img {
    width: 124px;
    height: auto;
  }
}
@media (max-width: 359px) {
  .header-inner > .brand.brand-wordmark,
  .header-inner > .brand.brand-wordmark img {
    width: 100px;
  }
}

@supports (mask-image: url("/assets/images/revogram-wordmark.svg")) or
  (-webkit-mask-image: url("/assets/images/revogram-wordmark.svg")) {
  .brand.brand-wordmark {
    position: relative;
  }
  .brand.brand-wordmark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      #007bff 0%,
      #007bff 20%,
      var(--brand-mid) 60%,
      var(--brand-end) 100%
    );
    -webkit-mask: url("/assets/images/revogram-wordmark.svg") center / contain
      no-repeat;
    mask: url("/assets/images/revogram-wordmark.svg") center / contain no-repeat;
    pointer-events: none;
  }
  .brand.brand-wordmark img {
    opacity: 0;
  }
}
.brand-palette-stop {
  stop-color: var(--brand-end);
}

.brand-palette-mid {
  stop-color: var(--brand-mid);
}