/* Portfolio identity mark */

.brand {
  width: 2.15rem;
  height: 2.15rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: .72rem;
  transition:
    transform 260ms cubic-bezier(.2, .8, .2, 1),
    filter 260ms ease;
}

.brand-mark {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(80, 92, 188, .2));
}

.brand:hover,
.brand:focus-visible {
  outline: none;
  transform: translateY(-1px) rotate(-3deg) scale(1.04);
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .brand {
    transition: none;
  }
}