/* Simple long-form content pages: 404, privacy, terms. */

.content {
  max-width: 84rem;
  margin: 0 auto;
  padding: 16rem var(--sp-5) var(--sp-7);
}
.content h1 {
  font: 700 4.8rem/1.05 var(--font-display);
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: var(--sp-2);
}
.content .content__updated {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--bone-mute);
  margin-bottom: var(--sp-5);
}
.content h2 {
  font: 700 2.2rem/1.3 var(--font-body);
  color: var(--bone);
  margin: var(--sp-5) 0 var(--sp-2);
}
.content p, .content li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--bone-dim);
  margin-bottom: var(--sp-2);
}
.content ul, .content ol {
  padding-left: 2.2rem;
  margin-bottom: var(--sp-3);
}
.content a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.content a:hover { color: var(--bone); }

.credit-lockup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  border: 1px solid var(--void-line-hi);
  background: var(--void-raised);
}
.credit-lockup img { display: block; width: 9.6rem; height: 9.6rem; }
.credit-lockup p:first-child { margin-top: 0; }
.credit-lockup p:last-child { margin-bottom: 0; }

/* 404 */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-5);
  gap: var(--sp-2);
}
.error-page__code {
  font: 700 12rem/1 var(--font-display);
  color: var(--signal);
  letter-spacing: -0.02em;
}
.error-page__title {
  font: 700 2.4rem/1.2 var(--font-display);
  text-transform: uppercase;
  color: var(--bone);
}
.error-page__desc {
  font-family: var(--font-body);
  color: var(--bone-dim);
  font-size: var(--text-base);
  max-width: 44rem;
  margin: var(--sp-1) 0 var(--sp-4);
}
.error-page .btn { text-decoration: none; }

@media (max-width: 600px) {
  .content { padding-top: 12rem; }
  .content h1 { font-size: 3.2rem; }
  .credit-lockup { grid-template-columns: 1fr; }
  .error-page__code { font-size: 8rem; }
}