/* ==========================================================================
   Greensnake — legal documents
   --------------------------------------------------------------------------
   Long-form reading. The single job here is a comfortable measure and a clear
   heading rhythm; `.prose` in components.css does most of it.
   ========================================================================== */
.legal { background: var(--green-900); }

.legal .page-head { padding-bottom: var(--space-7); }

.legal__body {
  padding-bottom: var(--section-y);
}

.legal .prose {
  max-width: 72ch;
  padding-top: var(--space-7);
  border-top: 1px solid var(--hairline);
}

/* Section headings get room above them and a hairline, so a long document
   scans as a set of parts rather than as one wall. */
.legal .prose h2 {
  margin-top: 2.6em;
  padding-top: 1.1em;
  border-top: 1px solid var(--hairline);
  font-size: var(--step-h3);
}
.legal .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal .prose strong { color: var(--ink); }
.legal .prose ul { padding-left: 1.1em; }
.legal .prose li::marker { color: var(--accent); }

@media (max-width: 560px) {
  .legal .prose { font-size: 1rem; }
}