/* =============================================================================
   css/pages/legal.css — privacy.html: 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;
  align-items: center;
  gap: 10px 24px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  margin-bottom: clamp(44px, 7vw, 80px);
}

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

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

.legal__end {
  display: flex;
  align-items: center;
  gap: 16px;
}

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

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

.legal__h {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
  border-top: 1px solid var(--color-line);
  padding-top: 22px;
  margin: 38px 0 12px;
}

.legal__body code {
  font-family: ui-monospace, Menlo, monospace;
  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);
  padding-top: 20px;
  margin-top: clamp(48px, 7vw, 80px);
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1;
  color: var(--color-text-dim);
}

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

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

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