/* Not found: one screen, an empty parking stall under the line. */

.view--notfound {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--space-9) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.nf__inner { position: relative; z-index: 1; display: grid; gap: var(--space-6); justify-items: start; }
.nf__title { max-width: 11ch; }
.nf__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Stall lines painted on the floor, in perspective. Decorative. */
.nf__lot {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 140vw;
  height: 34vh;
  transform: translateX(-50%) perspective(420px) rotateX(58deg);
  transform-origin: 50% 100%;
  pointer-events: none;
  opacity: 0.55;
}
.nf__lot span {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 3px;
  background: rgb(var(--gist-cream-rgb) / 0.32);
}
.nf__lot span:nth-child(1) { left: 22%; }
.nf__lot span:nth-child(2) { left: 34%; }
.nf__lot span:nth-child(3) { left: 46%; }
.nf__lot span:nth-child(4) { left: 58%; background: var(--color-accent); }
.nf__lot span:nth-child(5) { left: 70%; }
.nf__lot span:nth-child(6) { left: 82%; }
.nf__lot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: rgb(var(--gist-cream-rgb) / 0.32);
}
@media (max-width: 700px) { .nf__lot { height: 24vh; width: 200vw; } }