/* Long-form pages — terms, privacy, contact. Gallery white, one column, set for
   reading rather than scanning. */
.legal{
  max-width: 68ch;
  margin-inline: auto;   /* the reading column sits centred, like the storefront */
  padding-block: var(--s6) var(--s9);
}

.legal__back{ display: inline-block; margin-bottom: var(--s7); }

.legal h1{
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  margin-bottom: var(--s3);
}

.legal__updated{ margin: 0 0 var(--s8); }

.legal h2{
  font-size: var(--t-title);
  margin: var(--s8) 0 var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--hair);
}
.legal h2:first-of-type{ border-top: 0; padding-top: 0; }

.legal p,
.legal li{ margin: 0 0 var(--s3); }

.legal ul{ padding-left: 1.1em; margin: 0 0 var(--s4); }
.legal li{ margin-bottom: var(--s2); }

.legal a{ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal a:hover{ text-decoration-thickness: 2px; }

.legal__lede{ font-size: var(--t-lead); line-height: 1.45; margin-bottom: var(--s7); }

/* Contact — the mail address gets the weight of a heading, because it is the
   whole point of the page. */
.contact-card{
  margin: var(--s6) 0 var(--s7);
  padding: var(--s6);
  border: 1px solid var(--hair);
}
.contact-card__label{ display: block; margin-bottom: var(--s3); }
.contact-card__mail{
  display: inline-block;
  font: 700 clamp(1.25rem, 3.5vw, 2.25rem)/1.1 var(--f-display);
  letter-spacing: var(--tracking-loud);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  word-break: break-word;
}
.contact-card__mail:hover{ color: var(--ink); }
.contact-card__note{ margin: var(--s4) 0 0; color: var(--ink-2); }

.legal-foot{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* matches the storefront footer */
  gap: var(--s5);
  padding-top: var(--s5);
  margin-top: var(--s8);
  border-top: 1px solid var(--hair);
}