/* ============================================================
   Content pages — About, legal documents and the 404 page.
   Same tokens, header and footer as the home page.
   ============================================================ */

.page {
  padding-block: clamp(3rem, 7vw, 6rem) 0;
}

.page-title {
  font-size: clamp(var(--fs-44), 5vw + 0.75rem, 5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.page-lead {
  margin-top: var(--sp-8);
  max-width: 40rem;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-20), 1vw + 1rem, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
}

/* ── Prose (About + legal) ─────────────────────────────────── */

.prose {
  max-width: 46rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  overflow-wrap: break-word; /* long words and addresses never widen the page */
}
.prose h2 {
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
  font-size: clamp(var(--fs-24), 1.4vw + 1rem, var(--fs-32));
  letter-spacing: -0.03em;
}
.prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.prose h3 {
  margin-top: var(--sp-8);
  font-size: var(--fs-20);
  letter-spacing: -0.02em;
}
.prose p,
.prose li {
  margin-top: var(--sp-4);
  color: var(--ink-2);
}
.prose--serif p {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  line-height: 1.5;
}
.prose strong {
  color: var(--ink);
  font-weight: 600;
}
.prose ul {
  margin-top: var(--sp-2);
  padding-left: var(--sp-6);
  list-style: disc;
}
.prose li {
  margin-top: var(--sp-2);
  padding-left: var(--sp-1);
}
.prose a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}
.prose a:hover {
  color: var(--accent);
}

/* Legal notice — a plain rounded box. */
.legal-warning {
  margin-bottom: var(--sp-12);
  padding: var(--sp-6) var(--sp-8);
  background: var(--accent-tint);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: var(--fs-15);
  line-height: 1.6;
}

/* ── About ─────────────────────────────────────────────────── */

.facts {
  max-width: 46rem;
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line-strong);
}
.fact {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.fact dt {
  color: var(--muted);
}
.fact dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 600;
}
.fact a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}
.page-cta {
  margin-top: var(--sp-12);
}

/* ── 404 ───────────────────────────────────────────────────── */

/* The whole block (number, heading, text, button) is sized from one fluid
   unit, --u, so it always fits the first screen: --u is capped by the width
   AND by the height left under the sticky header. Bigger screen, bigger
   block; smaller screen, smaller block; the button never falls below the
   fold. */
.notfound {
  --avail: calc(100vh - var(--header-h));
  --avail: calc(100dvh - var(--header-h));
  --u: min(100vw / 46, var(--avail) / 60, 1.5rem);
  min-height: var(--avail);
  padding-block: 0;
  display: flex;
  align-items: center;
}
.notfound .container {
  padding-block: calc(var(--u) * 3);
}
.notfound p.notfound-code {
  margin: 0;
  font-family: var(--font-sans);
  font-size: calc(var(--u) * 18);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
.notfound h1 {
  margin-top: var(--u);
  font-size: max(var(--fs-32), calc(var(--u) * 6.5));
  letter-spacing: -0.04em;
}
.notfound p {
  margin-top: calc(var(--u) * 2);
  max-width: calc(var(--u) * 52);
  font-family: var(--font-serif);
  font-size: max(var(--fs-17), calc(var(--u) * 2.3));
  line-height: 1.4;
  color: var(--ink);
}
.notfound .btn {
  --bh: max(2.75rem, calc(var(--u) * 5.5));
  margin-top: calc(var(--u) * 3);
  min-height: var(--bh);
  padding-left: calc(var(--u) * 2.75);
  font-size: max(var(--fs-15), calc(var(--u) * 2));
}
.notfound .btn-icon {
  width: calc(var(--bh) - 0.5rem - 2px);
  height: calc(var(--bh) - 0.5rem - 2px);
}