/* ─────────────────────────────────────────────────────────────
   iubito — legal pages (shop-redesign)
   Loads AFTER styles.css; article layout only. Header, footer
   and tokens come from the shared design system.
   ───────────────────────────────────────────────────────────── */

.legal-main {
  max-width: 780px;
  margin-inline: auto;
  padding: 128px var(--wrap-pad) 96px;
}

.legal-main .back {
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--ink-2);
  margin-bottom: 34px;
}
.legal-main .back:hover { color: var(--wine); }

/* page H1: the same step every non-homepage H1 uses (gallery / product / order) */
.legal-main h1 {
  font-size: var(--fs-peak);
  line-height: 1.14;
  margin-bottom: 14px;
}

.legal-main .lede {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  max-width: 58ch;
  margin-bottom: 14px;
}

.legal-main .updated {
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: clamp(36px, 5vw, 56px);
}

/* numbered section headings: the system's h3 step, same as the order-page cards */
.legal-main h2 {
  font-size: var(--fs-h3);
  margin: clamp(36px, 5vw, 52px) 0 12px;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}
.legal-main h2 span {
  font-style: italic;
  font-weight: 400;
  color: var(--wine);
  margin-right: 12px;
}

.legal-main p,
.legal-main li {
  color: var(--ink);
  max-width: 68ch;
  margin-bottom: 12px;
}
.legal-main li { margin-bottom: 6px; }
.legal-main ul { padding-left: 22px; margin-bottom: 14px; }
.legal-main b { font-weight: 600; }

.legal-main .note {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 22px 26px;
  margin: 30px 0;
}
.legal-main .note b { font-family: var(--serif); font-weight: 500; font-size: var(--fs-lead); }
.legal-main .note p { margin-bottom: 0; }

@media (max-width: 560px) {
  .legal-main { padding-top: 108px; padding-bottom: 72px; }
}