/* ==========================================================================================
   What the law asks of every page of the site, shared by the one page (reverie.html), Privacy
   (privacy.html) and the page a wrong address finds (404.html): the legal lines at the foot.
   (There is no notice about cookies: the site keeps nothing in a visitor's browser.)

   It sets nothing of its own: every size, colour, curve and margin is a token the pages already
   name (the one page's, copied into shared/page.css at their values at rest), so the lines
   follow the ground of the moment, as the header does.
   ========================================================================================== */

/* ------------------------------------------------------------------------------ the legal lines

   Under the foot's row, a quiet echo of it on the same grid: the copyright under the wordmark,
   at the margin; the company's registration and its registered office from column 5, under the
   address, one to a line; Privacy at the right margin, under the way back up. Interface text
   in the labels' strength. Under 900px it stacks from the margin: the copyright, the two lines
   of the registration, then Privacy. (The one page's script sets the block 24px under the row's
   last line, wherever that falls; on the quiet pages the stylesheet does.) */
.foot__legal {
  display: flex;
  align-items: flex-start;
  gap: var(--s16) var(--s48);
  margin-top: calc(var(--s24) - var(--s48));
  padding-bottom: var(--s48);
}

.foot__registered {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: var(--col5) minmax(0, 1fr);
  margin: 0;
  color: var(--quiet);
}

.foot__registered > span {
  display: block;
}

/* The number and the postcode are never broken across two lines. */
.foot__keep {
  white-space: nowrap;
}

.foot__copy {
  grid-column: 1;
  grid-row: 1;
}

.foot__company,
.foot__office {
  grid-column: 2;
}

/* A line every 22px, as the address under Contact and in the foot's row. */
.foot__office {
  margin-top: var(--link-under);
}

.foot__legal > .link {
  flex: none;
  padding-top: 0;
}

/* The copyright sign. The trial faces of Die Grotesk hold only the site's own characters, so on
   the owner's machine that one sign is set in the free twin of the sans, which is drawn to match.
   It is the one character outside the trial set in the copy, by decision, and is marked for the
   kit's audit to pass over. The bought faces have it: on the published site (data-fonts-licensed,
   set by scripts/release.py) the sign is the line's own Die Grotesk. */
:root[data-fonts="premium"] .c-mark {
  font-family: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

:root[data-fonts="premium"][data-fonts-licensed] .c-mark {
  font-family: inherit;
}

@media (max-width: 899px) {
  .foot__legal {
    flex-direction: column;
  }

  /* Here a line may wrap: a line every 22px within it, as in the address. */
  .foot .foot__registered {
    display: block;
    line-height: calc(var(--lead-ui) + var(--link-under));
  }

  /* The same step between the three: a line of 22px and 8px of air. */
  .foot__company,
  .foot__office {
    margin-top: var(--s8);
  }
}