/* ============================================================
   Michy — legal pages (impressum, privacy)

   Compact masthead + a reading column. Type and gutter come from
   base.css; this sheet only sets the measure and the document
   rhythm. Nothing is positioned.
   ============================================================ */

.legal-hero {
  padding-block: 40px 48px;
}

.legal-hero__title {
  margin-top: 12px;
  max-width: 18ch;
  font: 500 var(--fs-title)/1.3 var(--font-display);
  letter-spacing: -0.03em;
}

.legal-hero__note {
  margin-top: 16px;
  max-width: 40rem;
  font: 400 var(--fs-body)/1.5 var(--font-sans);
  letter-spacing: -0.005em;
  opacity: 0.75;
}

.legal {
  padding-block: 48px 96px;
}

.legal > * {
  max-width: 42rem;
}

.legal h2 {
  font: 500 var(--fs-h2)/1.3 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.legal h3 {
  margin-top: 28px;
  font: 600 var(--fs-body)/1.4 var(--font-label);
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

.legal p,
.legal address,
.legal li {
  margin-top: 16px;
  font: 400 var(--fs-body)/1.5 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--text-secondary);
}

.legal address { font-style: normal; }

.legal h2 + p,
.legal h2 + address { margin-top: 14px; }

.legal p + h2,
.legal address + h2 { margin-top: 40px; }

.legal a {
  color: var(--text-brand);
  text-underline-offset: 3px;
}

.legal ul {
  margin: 16px 0 0;
  padding-left: 1.2em;
}

@media (min-width: 1024px) {
  .legal-hero { padding-block: 72px 64px; }
  .legal { padding-block: 64px 120px; }
  .legal p + h2,
  .legal address + h2 { margin-top: 52px; }
}