/* Phone masthead (v1): the header wordmark is typeset in Plus Jakarta Sans 800 instead of the
   system UI face, MODE in the sampled brand blue and the exclamation in the sampled brand pink.
   Phone only — the desktop header keeps the supplied brand JPEG untouched. The font is a
   1 KB Google-Fonts subset of just M, O, D, E and !, self-hosted so CSP needs no font host.
   New filename because hCDN pins CSS for a week and ignores query strings. */

@font-face {
  font-family: "MODE Wordmark";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mode-wordmark-800-v1.woff2") format("woff2");
  unicode-range: U+21, U+44-45, U+4D, U+4F;
}

@media (max-width: 640px) {
  .mtv-header .mtv-mobile-wordmark {
    font-family: "MODE Wordmark", var(--mtv-font-ui);
    font-style: normal;
    font-weight: 800;
    font-size: 25px;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--mtv-navy);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    white-space: nowrap;
  }

  .mtv-header .mtv-mobile-wordmark .mtv-wordmark__bang {
    color: var(--mtv-magenta);
    letter-spacing: 0;
    margin-left: .09em;
  }

  :root[data-theme="dark"] .mtv-header .mtv-mobile-wordmark { color: #fff; }
  :root[data-theme="dark"] .mtv-header .mtv-mobile-wordmark .mtv-wordmark__bang {
    color: var(--dk-pink-text, #FF87AC);
  }
}