/* Legal notice: an administrative form, filled in by hand, ticked, signed and stamped.
   Centred on the sheet, clear of the glasses on the desk's left. */

.legal { max-width: 46rem; margin: 30px auto 0; }
.legal h1 { margin: 0; font-size: 2.3rem; }

.legal-form {
  position: relative;
  margin-top: 28px;
  padding: 26px 28px 30px;
  border: 2px solid var(--paper-ink);
  font: .95rem/1.5 var(--f-ui);
}
.legal-form__ref { position: absolute; top: -.75em; right: 18px; margin: 0; padding: 0 8px; background: var(--paper); color: var(--paper-muted); font-size: .68rem; letter-spacing: .1em; }
.legal-form__block { margin: 0 0 22px; padding: 0; border: 0; }
.legal-form__block legend { display: flex; gap: 10px; align-items: center; padding: 0; margin-bottom: 8px; font: 700 .78rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.legal-form__number { display: grid; place-items: center; width: 1.7em; height: 1.7em; background: var(--paper-ink); color: var(--paper); }
.legal-form__field { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: baseline; margin: 0; padding: 6px 0 2px; border-bottom: 1px dotted var(--paper-muted); }
.legal-form__label { flex: 0 0 13rem; color: var(--paper-muted); font-size: .78rem; }
.legal-form__value { flex: 1; font-size: 1.1rem; }
.legal-form__checks { margin: 0 0 14px; padding: 0; list-style: none; }
.legal-form__checks li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 5px 0; border-bottom: 1px dotted var(--paper-muted); }
.legal-form__box { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; }
.legal-form__box::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--paper-ink); }
.legal-form__box--ticked::before { content: "×"; display: grid; place-items: center; color: var(--pen); font: 600 1.35rem/0 var(--f-hand); }
.legal-form__detail { flex-basis: 100%; padding-left: calc(13rem + 14px); color: var(--paper-muted); font-size: .95rem; }
.legal-form__text { font: 1rem/1.6 var(--f-body); }
.legal-form__sign { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 10px; }
.legal-form__sign .status-stamp { margin: 0; max-width: 16rem; font-size: .85rem; line-height: 1.3; text-align: center; }
.legal-form__sign .home__signature { width: 220px; margin: 0; }

@media (max-width: 640px) {
  .legal-form { padding: 22px 16px; }
  .legal-form__label { flex-basis: 100%; }
  .legal-form__detail { padding-left: 0; }
  .legal-form__sign { flex-direction: column; }
}