/* ==========================================================================
   JETT — Brand mark rendering
   The wordmark is JETT's own PNG. It is used as a CSS mask so the identical
   artwork can be inked in white (on navy/photography) or navy (on light),
   without redrawing it and without shipping a second file.
   ========================================================================== */

.brandmark {
  display: inline-block;
  -webkit-mask-image: url('../assets/img/jett-logo.png');
  mask-image: url('../assets/img/jett-logo.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #fff;
  flex: 0 0 auto;
}

.brandmark[data-tone='navy'] { background-color: var(--jett-navy); }
.brandmark[data-tone='light'] { background-color: #fff; }

/* Browsers without mask support still get the original white artwork. */
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .brandmark {
    background: url('../assets/img/jett-logo.png') center / contain no-repeat;
  }
}