/* Text pages (about, terms and privacy) and error pages. */

.content-hero { padding: var(--page-top) 0 var(--space-9); }
.content-hero h1 {
  max-width: 16ch;
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display-serif);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
.content-hero h1 em { font-style: italic; font-weight: var(--weight-medium); color: var(--color-green-ink); }
.content-hero p { margin-top: var(--space-5); max-width: 52ch; font-size: var(--text-lg); color: var(--color-ink-2); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--space-9); font-size: var(--text-2xl); letter-spacing: var(--tracking-display-serif); scroll-margin-top: 96px; }
.prose h3 { margin-top: var(--space-6); font-size: var(--text-lg); }
.prose p,
.prose ul { margin-top: var(--space-4); color: var(--color-ink-2); line-height: 1.65; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2); }
.prose strong { color: var(--color-ink); }
.prose-meta { font-size: var(--text-sm); color: var(--color-ink-3); }

.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(var(--space-6), 5vw, var(--space-11)); align-items: start; }
.legal-toc { position: sticky; top: 96px; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.legal-toc strong { margin-bottom: var(--space-2); }
.legal-toc a { color: var(--color-ink-2); text-decoration: none; }
.legal-toc a:hover { color: var(--color-ink); text-decoration: underline; }

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-4);
  margin: var(--space-9) 0;
}
.value {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px rgb(10 25 11 / .05);
}
.value h2 { font-size: var(--text-lg); }
.value p { color: var(--color-ink-2); }

.about-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-6), 5vw, var(--space-11)); align-items: center; }
.about-film { aspect-ratio: 4 / 5; border-radius: 28px; box-shadow: var(--shadow-lg); --film-focus: 50% 30%; }

/* error pages: a garment that slipped off its hanger */
.error-page {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  min-height: 70vh;
  align-content: center;
  padding: var(--space-10) 0;
  text-align: center;
}
.error-code { font-size: clamp(5rem, 3rem + 10vw, 11rem); font-weight: var(--weight-black); letter-spacing: -0.06em; line-height: .9; color: var(--color-green); }
.error-page h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-display-serif); }
.error-page p { max-width: 44ch; color: var(--color-ink-2); }
.error-art { position: relative; width: 220px; height: 150px; }
.error-art img { position: absolute; width: 120px; filter: var(--shadow-garment); }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

@media (max-width: 860px) {
  .legal,
  .about-split { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
}

/* sitemap */
.sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-5); padding-bottom: var(--space-10); }
.sitemap section { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: 0 0 0 1px rgb(10 25 11 / .05); }
.sitemap h2 { margin-bottom: var(--space-4); font-size: var(--text-lg); }
.sitemap ul { display: grid; gap: var(--space-3); padding: 0; margin: 0; list-style: none; }
.sitemap li { display: grid; gap: 2px; }
.sitemap a { font-weight: var(--weight-semibold); }
.sitemap span { font-size: var(--text-sm); color: var(--color-ink-3); }