/* The guide's title block (footer.html): whose the guide is, who made it, and where
   else to follow the work, as the fields of a drawing's title block are (ISO 7200:
   "Legal owner", "Created by"). It sits on Enclose's own page (export/page.css) and
   uses that page's colours, insets and type, so that it reads as part of it.

   Beside the model it is one line along the foot of the window, at the right, its
   fields ruled off from each other as a compact title block's are. It is where the
   model is not: the model is framed to the middle 78% of its room, which is the whole
   height of the window here, so that the bottom 11% of it is clear once the model is
   at rest (checked at every step at 1745x706, 1280x720 and 844x390). On its way from
   one step's view to the next it can pass under the block, as under the page's own
   round button. */

/* the signature's script, cut down to the letters it writes (see README) */
@font-face {
  font-family: "Pinyon Script";
  font-style: normal;
  font-weight: 400;
  /* a script is not swapped in for a sans: the line waits for it (it is tiny, and preloaded) */
  font-display: block;
  src: url("fonts/PinyonScript-Regular.woff2") format("woff2");
}

.brand {
  position: fixed;
  z-index: 3;
  /* only the links are the block's to be pressed: the rest of it is the model's */
  pointer-events: none;
}
/* (with no weight of its own, so that each part's own margins below win over it) */
:where(.brand p, .brand ul) {
  margin: 0;
}

/* MEROË: its mark beside its wordmark, as the MEROË site sets them side by side
   (mark 26 : wordmark 23.5 : gap 10) */
.brand__owner {
  display: flex;
  align-items: center;
  color: var(--ink);
}
.brand__word {
  width: auto;
}

/* The signature: the name in ink, and what it is said more quietly, as the cover says
   what the guide is in ink and what kind of thing it is more quietly. */
.brand__credit {
  color: var(--ink);
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  /* (a script joins its letters: no extra space between them, and its own forms) */
  letter-spacing: 0;
  font-feature-settings: normal;
  white-space: nowrap;
}
.brand__by {
  color: var(--quiet);
}

/* Where else to follow the work: each mark in white, as each brand allows on a dark
   ground, with half its size clear on every side of it. The row is drawn out to the
   right by that clear space, so that the last mark lines up with what is beside it. */
.brand__links {
  display: flex;
  padding: 0;
  list-style: none;
}
.brand__links a {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  pointer-events: auto;
  transition: background-color 0.15s;
}
/* (as the page's own round button is, under a pointer, and in focus) */
.brand__links a:hover {
  background: rgb(38 38 38 / 0.8);
}
.brand__links a:focus-visible {
  outline: 2px solid var(--quiet);
  outline-offset: 2px;
}
.brand__links svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* Beside the model: the one line, at the right of the foot. */
@media (min-width: 821px) {
  .brand {
    right: var(--inset);
    /* as far up from the foot as the cover is down from the top; lower, in a window too
       short for that to be clear of the model (its 2rem, and a little more, in 11%) */
    bottom: clamp(0.5rem, calc(11vh - 2.125rem), 1.625rem);
    display: flex;
    align-items: center;
  }
  .brand__owner {
    gap: 0.53rem;
  }
  .brand__mark {
    width: 1.375rem;
    height: 1.375rem;
  }
  .brand__word {
    height: 1.25rem;
  }
  /* each field after the first is ruled off from the one before it */
  .brand__credit {
    margin-left: 1.25rem;
    padding-left: 1.25rem;
    border-left: 1px solid var(--faint);
    font-size: 1.75rem;
    line-height: 2rem;
  }
  .brand__links {
    margin: 0 -0.5rem 0 1.25rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--faint);
  }
  .brand__links a {
    width: 2rem;
    height: 2rem;
  }
}

/* (where the steps and the model are close to too narrow to be beside each other, the
   line is set smaller, so that it stays clear of the steps' column: at 821px it is
   439px long, in the 473 there is) */
@media (min-width: 821px) and (max-width: 1023px) {
  .brand__owner {
    gap: 0.48rem;
  }
  .brand__mark {
    width: 1.24rem;
    height: 1.24rem;
  }
  .brand__word {
    height: 1.125rem;
  }
  .brand__credit {
    margin-left: 0.875rem;
    padding-left: 0.875rem;
    font-size: 1.375rem;
  }
  .brand__links {
    margin-left: 0.875rem;
    padding-left: 0.375rem;
  }
}

/* Too narrow for the steps to be beside the model, the steps are under it, to the foot
   of the window, where they go back into nothing over its last 88px. The block is
   there, within those 88px, on the ground of the page: MEROË and the links across the
   top of it, and the signature the width of it under them. Nothing that is to be read
   is under it. */
@media (max-width: 820px) {
  .brand {
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "owner links"
      "credit credit";
    justify-content: space-between;
    align-content: end;
    align-items: center;
    row-gap: 0.125rem;
    /* (as tall as the foot the steps go back into nothing over: 5.5rem in page.css) */
    box-sizing: border-box;
    height: 5.5rem;
    padding: 0 var(--inset) 0.5rem;
    /* what is going back into nothing goes into the ground, before the block begins */
    background: linear-gradient(to bottom, transparent, var(--ground) 1.75rem);
    /* (its ground is in front of the steps going back into nothing: a press on it is not theirs) */
    pointer-events: auto;
  }
  .brand__owner {
    grid-area: owner;
    gap: 0.425rem;
  }
  .brand__mark {
    width: 1.1rem;
    height: 1.1rem;
  }
  .brand__word {
    height: 1rem;
  }
  .brand__credit {
    grid-area: credit;
    font-size: 1.375rem;
    line-height: 1.15;
  }
  .brand__links {
    grid-area: links;
    margin: 0 -0.5rem 0 0;
  }
  /* (each as big as a finger needs, past its row into the clear space over and under it:
     the signature under them is not so long as to come out that far) */
  .brand__links a {
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.375rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand__links a {
    transition: none;
  }
}