/* Purpose: 404 screen — one dark panel, oversized figure behind the message. */

/* The dock is a booking CTA and the page has its own; the ground is painted here because the
   404 is the only thing on screen, exactly like the thank-you page. */
body:has(.error404) {
  padding-bottom: 0;
  background: var(--color-navy);
}

.error404 {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--space-64) 0;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-on-dark);
  text-align: center;
}

/* Same yellow bloom the thank-you copy pane uses, centred behind the figure. */
.error404::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size-ty-glow);
  height: var(--size-ty-glow);
  transform: translate(-50%, -60%);
  border-radius: var(--radius-full);
  background: radial-gradient(circle, var(--color-ty-glow), transparent 66%);
  pointer-events: none;
}

.error404__inner {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  justify-items: center;
  gap: var(--space-20);
  max-width: var(--size-error-max);
}

.error404__code {
  font-family: var(--font-heading);
  font-size: var(--fs-error-code);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

.error404__heading {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--weight-black);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-on-dark);
}

.error404__heading b {
  color: var(--color-primary);
  font-weight: inherit;
}

.error404__text {
  margin: 0;
  max-width: var(--size-error-text);
  font-size: var(--fs-lead);
  line-height: var(--leading-card);
  color: var(--color-on-dark-list);
}

.error404__cta {
  margin-top: var(--space-4);
}

.error404__note {
  margin: 0;
  font-size: var(--fs-14-5);
  color: var(--color-text-faint);
}

.error404__note b {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

/* The admin bar eats 32px off the viewport for logged-in users only. */
@media (min-width: 783px) {
  .admin-bar .error404 {
    min-height: calc(100dvh - 32px);
  }
}