/* Same mark, typeface and wordmark treatment as the RevANT application. */
@font-face {
  font-family: "RevANT Display";
  src: url("assets/brand-font.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

a.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  flex-shrink: 0;
  line-height: 1;
  text-decoration: none;
}

a.brand > .brand-symbol {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px #0006);
}

.brand > .brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  flex: 0 0 auto;
  line-height: 1;
  transform: skewX(-7deg);
  transform-origin: left center;
}

.brand .brand-wordmark > .rev,
.brand .brand-wordmark > .ant {
  font-family: "RevANT Display", sans-serif;
  font-size: 26px;
  font-weight: 620;
  letter-spacing: -.02em;
  margin: 0;
  background: linear-gradient(175deg, #f5fbff 7%, #a1b0b9 36%, #eef6fa 47%, #61727b 52%, #b9cbd0 85%, #8cf3c5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #000);
}

.brand .brand-wordmark > .ant { font-weight: 900; }
.demo-sidebar > a.brand { gap: 7px; }
.demo-sidebar > a.brand > .brand-symbol { width: 38px; height: 38px; flex-basis: 38px; }
.demo-sidebar .brand .brand-wordmark > span { font-size: 21px; }
.micro-logo > img { width: 30px; height: 30px; object-fit: contain; }
.modal-eyebrow > img { width: 36px; height: 36px; object-fit: contain; }

@media (max-width: 1000px) and (min-width: 701px) {
  .sidebar > a.brand { gap: 6px; }
  .sidebar > a.brand > .brand-symbol { width: 38px; height: 38px; flex-basis: 38px; }
  .sidebar .brand .brand-wordmark > span { font-size: 22px; }
}

@media (max-width: 820px) {
  .demo-sidebar > a.brand { gap: 5px; padding-left: 0; }
  .demo-sidebar > a.brand > .brand-symbol { width: 34px; height: 34px; flex-basis: 34px; }
  .demo-sidebar .brand .brand-wordmark > span { font-size: 20px; }
}

@media (max-width: 640px) {
  a.brand { gap: 7px; }
  a.brand > .brand-symbol { width: 40px; height: 40px; flex-basis: 40px; }
  .brand .brand-wordmark > .rev,
  .brand .brand-wordmark > .ant { font-size: 23px; }
  .demo-sidebar > a.brand { display: none; }
}

@media (forced-colors: active) {
  .brand .brand-wordmark > .rev,
  .brand .brand-wordmark > .ant {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    filter: none;
  }
}