/* ===========================================================================
   The Highlighter — masthead.
   Deliberately its own file, containing nothing but the wordmark and issue
   marker. It was previously injected by chrome.js, which meant the logo only
   rendered correctly if a JavaScript file parsed and ran. When that did not
   happen the wordmark fell back to a bare underlined browser link.
   Linked directly by every page. No JS, no collisions.
   =========================================================================== */

.wordmark,
a.wordmark,
.masthead .wordmark,
.masthead-row .wordmark,
.hl-shell .wordmark {
  font-family: 'GT Alpina', Georgia, serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ink, #1d2e26) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.wordmark em,
a.wordmark em,
.masthead .wordmark em,
.masthead-row .wordmark em,
.hl-shell .wordmark em {
  font-style: italic !important;
  font-weight: 500 !important;
  font-family: 'GT Alpina', Georgia, serif !important;
  color: inherit !important;
}
.wordmark:hover, a.wordmark:hover { text-decoration: none !important; }

.issue-marker,
.hl-shell .issue-marker {
  font-family: 'GT Alpina Typewriter', 'IBM Plex Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft, rgba(29, 46, 38, 0.78));
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 720px) {
  .wordmark, a.wordmark, .hl-shell .wordmark { font-size: 24px; }
  .issue-marker, .hl-shell .issue-marker { text-align: left; font-size: 10px; }
}