/* The sealed marketing export and its React remount use the same static lockup.
   Keep this override after the export's styles; no font request on first paint.
   The 2026-11-01 lockup (docs/handoffs/2026-11-01-brand-lockup.md): the kit's horizontal lockup, mark + redrawn wordmark
   (nav cut, 677.61 x 100, so 6.7761 : 100), drawn at a whole-px height so the mark lands on the pixel grid: 149.07 x 22
   px in a 150 x 44 header link and 176.18 x 26 px in a 180 x 44 footer link, left center (tops at 11 and 9 px). No
   byline here (the site's own POWERED BY CHARACTR line is the site lane's), and on phones the kit's hinted ink tile
   (its 32 px grid).
   The classic icon set (flag off) is in /brand/classic/. */
.wr a.hd-mark,
a.wordmark {
  display: inline-flex !important;
  flex: 0 0 150px !important;
  width: 150px !important;
  min-height: 44px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
a.wordmark {
  color: transparent !important;
  background: url('/brand/v2/lockup-horizontal.svg') left center / 149.07px 22px no-repeat !important;
}
.wr a.hd-mark > *,
a.wordmark > * { display: none !important; }
/* The WR chrome (www.character.app/make, /about, /vs, guides) draws the same file as a mask over the link's own ink
   (currentColor, which the site sets to its POWERED BY CHARACTR byline's ink): as a background image the file's
   currentColor resolves to black, not the byline's #111. On a pseudo-element, so the mask never clips the link's
   focus ring; the geometry is the background's. */
.wr a.hd-mark {
  position: relative !important;
  color: inherit !important;
  background: none !important;
}
.wr a.hd-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url('/brand/v2/lockup-horizontal.svg') left center / 149.07px 22px no-repeat;
  mask: url('/brand/v2/lockup-horizontal.svg') left center / 149.07px 22px no-repeat;
  pointer-events: none;
}
.wr .ft a.hd-mark,
.footer a.wordmark {
  flex-basis: 180px !important;
  width: 180px !important;
}
.footer a.wordmark {
  background-image: url('/brand/v2/lockup-horizontal.svg') !important;
  background-size: 176.18px 26px !important;
}
.wr .ft a.hd-mark::after {
  -webkit-mask-size: 176.18px 26px;
  mask-size: 176.18px 26px;
}
/* The older SEO header also carries Sign in, Create and the menu on phones. */
@media (max-width: 430px) {
  .header > a.wordmark {
    flex-basis: 32px !important;
    width: 32px !important;
    background-image: url('/brand/v2/favicon-tile.svg') !important;
    background-size: 32px 32px !important;
  }
}