.maintenance {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;

  // The same light as the hero, so this reads as the same site rather than an
  // error page from somewhere else — but centred behind the message instead of
  // washing the top of the viewport.
  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 34rem;
    height: 34rem;
    transform: translate(-50%, -55%);
    border-radius: 50%;
    opacity: 0.35;
    filter: blur(70px);
    background: radial-gradient(
      closest-side,
      var(--pi-color-accent),
      transparent
    );
    pointer-events: none;
  }
}

.maintenance__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

// Pinned to the top rather than stacked with the message: the notice should
// sit in the middle of the viewport, not be pushed down by the wordmark.
.maintenance__brand {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
}

// The only branding on this page, so it gets more room than in the header.
.maintenance__mark {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.maintenance__title {
  margin: 1rem 0 0;
}

.maintenance__message {
  max-width: 40ch;
  margin: 1rem 0 0;
}

.maintenance__until {
  margin-top: 1.5rem;
}