/* =============================================================================
   css/pages/legal.css — the privacy policy page (privacy.php): a narrow
   reading column, a top bar with the back link and the date, a bottom bar.
   ========================================================================== */
.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(48px, 6vw, 80px);
}

.legal__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: clamp(44px, 7vw, 80px);
}

.legal__back { color: var(--color-text); }

.legal__back:hover { color: var(--color-accent); }

.legal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.legal__lead { margin-bottom: clamp(36px, 5vw, 56px); }

.legal__h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  border-top: 1px solid var(--color-rule-hair);
  padding-top: 22px;
  margin: 38px 0 12px;
}

.legal__body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-text);
}

.legal__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  border-top: 1px solid var(--color-line-soft);
  padding-top: 20px;
  margin-top: clamp(48px, 7vw, 80px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.legal__bar-links { display: flex; flex-wrap: wrap; gap: 20px; }

.legal__bar a { color: var(--color-text-muted); }

.legal__bar a:hover { color: var(--color-accent); }