/* Header logo: titles stacked in one grid cell, crossfaded by assets/js/header.js.
   The cell takes the width of the longest title, so the header doesn't shift. */
.site-logo {
  display: grid;
  margin-inline-end: auto;
  text-transform: uppercase;
  user-select: none;
}

.site-logo-title {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--transition);

  &.is-active {
    opacity: 1;
  }
}

/* Above the open mobile menu (site-nav.css) */
@media (width < 768px) {
  .site-logo {
    position: relative;
    z-index: 2;
  }
}