/* 404 Generator inherits the Footer Generator visual system. */
.generator-heading h1 {
  margin: 34px 0 30px;
  color: #f5f3ef;
  font-size: clamp(46px, 5.35vw, 68px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.02em;
}

#generator404Form { width: min(100%, 920px); margin: 0 auto; }
.g404-auto-note { margin: 27px 0 0; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.5; text-align: center; }
#generate404Button:disabled { opacity: .55; cursor: wait; transform: none; }

.g404-results-heading { margin-top: 0; }
.g404-concept .concept-description { min-height: 3.1em; }
.g404-concept .concept-actions { align-items: center; }

.g404-visual {
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,.13);
}
.g404-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #030303;
  transition: transform 220ms ease;
}
.g404-visual:hover img { transform: scale(1.008); }

.g404-dialog figure { width: min(96vw, calc(90vh * 16 / 9)); aspect-ratio: 16 / 9; margin: 0; }
.g404-dialog figure img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 720px) {
  .generator-heading { margin-bottom: 48px; }
  .brief-fields { grid-template-columns: 1fr; }
  .text-field-large { grid-column: auto; }
  .g404-concept .concept-description { min-height: 0; }
  .g404-dialog figure { width: 100%; }
}