/* Stable Nevets identity. Critical properties use !important because the
   page loads the broader layout stylesheet after first paint. */
.brand {
  gap: 10px;
}

.brand-symbol {
  display: block !important;
  position: relative !important;
  width: 42px !important;
  height: 38px !important;
  flex: 0 0 42px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("./nevets-mark.svg?v=4") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 8px rgba(222, 164, 55, .14)) !important;
  color: transparent !important;
  font-size: 0 !important;
}

.brand-symbol::before,
.brand-symbol::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.brand > span:last-child {
  min-width: 0 !important;
  display: grid;
  align-content: center;
  line-height: 1;
}

.brand strong {
  color: #e9b548 !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 540 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(216, 161, 51, .09);
}

.brand small {
  display: block !important;
  margin-top: 5px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  white-space: nowrap;
}

.brand small::after {
  content: "E K O S I S T E M" !important;
  display: block !important;
  color: #d9dce0 !important;
  font-family: var(--sans) !important;
  font-size: 7px !important;
  font-weight: 520 !important;
  letter-spacing: .32em !important;
  white-space: nowrap;
}

.chat-identity > span,
.message-avatar,
.composer-mark {
  color: transparent !important;
  font-size: 0 !important;
  background-color: rgba(6, 8, 10, .9) !important;
  background-image: url("./nevets-mark.svg?v=4") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 57% !important;
}

.chat-identity > span::before,
.chat-identity > span::after,
.message-avatar::before,
.message-avatar::after,
.composer-mark::before,
.composer-mark::after {
  content: none !important;
  display: none !important;
}

.hero-core strong {
  display: block !important;
  width: 86px !important;
  height: 76px !important;
  margin: 8px auto 7px !important;
  background: transparent url("./nevets-mark.svg?v=4") center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  filter: drop-shadow(0 0 17px rgba(222, 164, 55, .18)) !important;
}

.hero-core strong::before,
.hero-core strong::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 620px) {
  .brand {
    gap: 8px;
  }

  .brand-symbol {
    width: 38px !important;
    height: 34px !important;
    flex-basis: 38px !important;
  }

  .brand strong {
    font-size: 13px !important;
  }

  .brand small {
    margin-top: 4px !important;
  }

  .brand small::after {
    font-size: 6px !important;
    letter-spacing: .27em !important;
  }

  .hero-core strong {
    width: 64px !important;
    height: 57px !important;
    margin-block: 6px !important;
  }
}