/* The approved Letter Stack mark, shared by every website entry point. */
.brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  flex: none;
  object-fit: cover;
  border-radius: 22.4%;
}
.mast { border: 0; border-radius: 22.4%; }
.mast .brand-logo { width: 36px; height: 36px; }
.account-brand { display: inline-flex; align-items: center; gap: 12px; }

/* A thumb needs a target 44 pixels high, and the mark and the links round the edge of
   every page are set small: the footer links were 12 to 24 high on a phone. On a touch
   screen their boxes grow to 44 with the words left at the size they were, centred in
   the taller box, so a row of them only gains line height. Links inside a sentence keep
   the sentence's own lines. A mouse keeps the tighter page. */
@media (pointer: coarse) {
  .brand, .account-brand { min-height: 44px; }
  footer > a, footer nav a, .aside a, .home a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }
}