@import url("../site.css");

/* Legal pages: the landing page's tokens, a calm reading column. */
.top { position: static; background: var(--page-deep); border-bottom-color: var(--line-faint); }
.top > .brand { display: flex; max-width: var(--container-narrow); height: var(--header-height); margin: 0 auto; padding: 0 var(--gutter); }
.legal { max-width: var(--container-narrow); padding-bottom: var(--space-10); }
.legal h1 { font-size: var(--display-section); margin-bottom: var(--space-2); }
.legal h2 { font-size: var(--text-2xl); margin: var(--space-7) 0 var(--space-3); color: var(--accent-strong); }
.legal p, .legal li { color: var(--text-muted); }
.legal p + p { margin-top: var(--space-3); }
.legal ul { list-style: disc; padding-left: var(--space-6); }
.legal li { margin-bottom: var(--space-2); }
.legal .fine { font-size: var(--text-sm); color: var(--text-faint); margin-bottom: var(--space-6); }
.draft {
  margin-bottom: var(--space-6); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: var(--border) dashed var(--red-400); background: var(--fill-draft); color: var(--text);
}
.footer { padding: var(--space-7) var(--gutter); display: grid; gap: var(--space-2); justify-items: center; text-align: center; }
.footer nav { display: flex; gap: var(--space-6); }
.footer a { color: var(--cream-300); }
.footer p { color: var(--text-faint); font-size: var(--text-sm); }