.logo-slot {
  display: inline-grid;
  grid-template-areas:
    "art"
    "credit";
  align-items: center;
  justify-items: center;
  color: inherit;
  text-decoration: none;
}

.logo-slot__fallback,
.logo-slot__art {
  grid-area: art;
}

.logo-slot__fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  transition: opacity .16s ease;
}

.logo-slot__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .16s ease;
}

.logo-slot__credit {
  grid-area: credit;
  align-self: start;
  min-height: 1em;
  color: var(--ink-dim);
  font: 600 10px/1.2 var(--sans);
  letter-spacing: .04em;
  text-align: center;
}

.logo-slot.is-ready .logo-slot__fallback {
  opacity: 0;
}

.logo-slot.is-ready .logo-slot__art {
  opacity: 1;
}

.logo-slot--hero {
  /* BLOCK-level, unlike the base .logo-slot and the nav variant, which stay
     inline-grid so they can sit beside other things. The hero is the only line
     on its row, and while it was inline the Alpha badge that follows it flowed
     up alongside the artwork instead of below it. The credit lives in this
     grid's second row, so going block puts the badge under both. */
  display: grid;
  width: min(100%, 460px);
  grid-template-rows: clamp(130px, 24vw, 180px) 16px;
  margin: 0 auto 6px;
}

.logo-slot--hero .logo-slot__fallback {
  font: 700 clamp(52px, 13vw, 92px)/1 var(--mono);
  letter-spacing: -.03em;
}

.logo-slot--nav {
  width: 124px;
  flex: none;
  grid-template-rows: 38px 13px;
}

.logo-slot--nav .logo-slot__fallback {
  font: 800 22px/1 var(--mono);
  letter-spacing: -.04em;
}

.logo-slot--nav .logo-slot__credit {
  font-size: 8px;
}

@media (max-width: 560px) {
  .logo-slot--hero {
    width: min(100%, 360px);
    grid-template-rows: 130px 15px;
  }

  .logo-slot--nav {
    width: 104px;
    grid-template-rows: 34px 12px;
  }

  .logo-slot--nav .logo-slot__credit {
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-slot__fallback,
  .logo-slot__art {
    transition: none;
  }
}