/* legal.css: privacy.html, terms.html, 404.html. Tokens only, no raw sizes/colors.
   Plain documents: narrow measure, clear h2 outline, calm. Piece stays in `frame` only. */

.legal-measure{ max-width:38rem }

.legal-head{
  padding:calc(var(--nav-h) + var(--space-8)) 0 var(--space-6);
}
.legal-head .lbl{ margin-bottom:var(--space-4) }
.legal-head h1{ margin-top:var(--space-2) }
.legal-head .lead{ margin-top:var(--space-5) }

/* the body is one long frame-block with a clear h2 outline, generous rhythm
   between sections so the document reads calmly rather than as a wall of text */
.legal-body{ padding-top:0 }
.legal-body h2{
  font-size:var(--step-2);
  margin-top:var(--space-9);
  margin-bottom:var(--space-4);
}
.legal-body h2:first-child{ margin-top:0 }
.legal-body p{ max-width:none }
.legal-body p + h2{ margin-top:var(--space-9) }
.legal-body ul{
  margin:0 0 var(--space-4);
  padding-left:1.1em;
  max-width:var(--measure);
}
.legal-body li{ margin-bottom:var(--space-3) }
.legal-body li:last-child{ margin-bottom:0 }
.legal-body a.tlink{ display:inline; }

/* 404: no h2 outline, just a page head shape reused as the whole page since
   there is nothing else to say. Extra top padding stands in for the missing
   nav-adjacent head block on other pages. */
.legal-404{
  padding-top:calc(var(--nav-h) + var(--space-9));
  padding-bottom:var(--space-10);
}
.legal-404 h1{ margin-top:var(--space-2) }
.legal-404 .lead{ margin-top:var(--space-5) }
.legal-404 p{ margin-top:var(--space-4); color:var(--muted) }
.legal-404 .meta{ margin-top:var(--space-6) }

@media (max-width:640px){
  .legal-head{ padding-top:calc(var(--nav-h) + var(--space-6)) }
  .legal-404{ padding-top:calc(var(--nav-h) + var(--space-7)) }
  .legal-body h2{ margin-top:var(--space-8) }
}