/* Precision corrections for the Bluescreen Labs mark and status panel. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 12px/1 "JetBrains Mono", monospace;
  letter-spacing: -0.7px;
}

.brand-mark {
  position: relative;
  display: inline-block;
  flex: none;
  width: 21px;
  height: 19px;
}

.brand-mark .face-colon,
.brand-mark .face-curve {
  position: absolute;
  color: var(--blue-light);
  font: 400 18px/1 "JetBrains Mono", monospace;
  letter-spacing: -4px;
}

.face-colon { top: -2.5px; left: 0; }
.face-curve { top: -1px; left: 8px; }

.brand-name {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--paper);
  font-size: 12px;
  line-height: 10px;
  letter-spacing: -0.7px;
}

.brand-name span { display: block; }

.brand .brand-name span {
  color: var(--paper);
  font-size: 12px;
  line-height: 10px;
  letter-spacing: -0.7px;
}

.spec-status dd { color: #008f36; }

.about-mark {
  display: flex;
  align-items: center;
  height: 62px;
}

.about-mark .brand-mark {
  transform: scale(3);
  transform-origin: left center;
}

@media (max-width: 720px) {
  .about-mark { height: 42px; }
  .about-mark .brand-mark { transform: scale(2.2); }
}