/* ==========================================================================
   Page: 404 (site/404.html)
   ========================================================================== */

.not-found {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: center;
  gap: 48px 72px;
  padding-block: clamp(64px, 10vw, 144px);
}

/* Message ------------------------------------------------------------------ */
.not-found__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.not-found__title {
  font: 400 clamp(56px, 8vw, 120px)/.98 var(--font-serif);
  letter-spacing: -.035em;
}

.not-found__lead {
  max-width: 460px;
  font: 400 19px/1.55 var(--font-sans);
  color: var(--ink-2);
}

/* Closest matches (machine surface) ---------------------------------------- */
.closest-matches {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--machine-tint);
}

.closest-matches__title {
  font: 500 11px/1 var(--font-mono);
  color: var(--machine-ink);
}

.closest-matches__item {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--machine-line);
  border-radius: var(--radius-control);
  background: var(--surface);
  font: 500 15px/1.3 var(--font-sans);
  text-decoration: none;
}

.closest-matches__score {
  font: 400 12px/1 var(--font-mono);
  color: var(--ink-2);
}

.closest-matches__note {
  font: 400 12px/1.4 var(--font-mono);
  color: var(--ink-2);
}