/*
 * SULSYS.
 *
 * The company's real mark, set once, at the top left of every page, and again
 * at full heritage size in the footer. V2 drew a wordmark here because no
 * vector of the identity existed; this is the identity.
 *
 * The sizes are the whole craft of this file. The mark has to survive a 375 px
 * phone header that already owns two 44 px tap targets, and it has to not look
 * like a sticker at 1440 px. So --mark-h is set per breakpoint rather than
 * scaled fluidly: a logo that resizes continuously with the viewport is a logo
 * that is the wrong size at most widths.
 *
 * No ring here. The ring is the product's mark and lives with the product.
 */

.lockup {
  display: inline-flex;
  align-items: center;
  /* The header row is 44 px minimum so the home link is a legal tap target. */
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}

/* ---- Header size -------------------------------------------------------- */

.lockup {
  --mark-h: 26px;
}

/*
 * The focus ring has to clear the artwork rather than cut through the blades,
 * which overhang their own baseline on the right.
 */
.lockup:focus-visible {
  outline-offset: 4px;
}

/* ---- Large: the footer signature, tagline and all ----------------------- */

.large {
  --lockup-w: 220px;
  align-items: flex-start;
}

/* ---- Responsive --------------------------------------------------------- */

@media (min-width: 1024px) {
  .lockup {
    --mark-h: 30px;
  }
}

@media (max-width: 767px) {
  /*
   * 22 px of symbol makes the whole lockup about 139 px wide. At 375 px, with
   * a 16 px gutter either side and two 44 px icon buttons on the right, that
   * leaves roughly 100 px of slack — enough that the Macedonian header, which
   * is the same width, never has to compress.
   */
  .lockup {
    --mark-h: 22px;
  }

  .large {
    --lockup-w: 180px;
  }
}