/* Vox9 brand mark and tagline.
   One file rather than the same rules copied into 23 inline stylesheets, so the
   next brand change is one edit.

   The lockup ships as two files with identical geometry: the wordmark is white
   for the dark theme and black for light mode, and the cyan microphone is the
   same in both. They were cropped to a shared box, so nothing shifts position
   when a visitor toggles the theme.

   Light mode swaps via `content`, which every current engine supports on an
   <img>. If it ever fails the page keeps the white mark, which is wrong on a
   light ground but still legible against the cyan icon, rather than showing
   nothing. Kept as a light-mode-only override for that reason: the default
   comes from the element's own src. */
body.light-mode img[src*="vox9-lockup"] {
    content: url("vox9-lockup-black.webp");
}

/* Tagline. Sits beside the mark in page chrome.
   Hidden under 1024px: the lockup already reads "VOX9 AUDIOBOOKS", so on a
   narrow bar this is the third line of brand text competing with the controls
   people actually came for. It stays in the footer at every width. */
.vox9-tagline {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.01em;
    color: #9898a8;
    white-space: nowrap;
    align-self: center;
    margin-left: 2px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

body.light-mode .vox9-tagline {
    color: #5a5a6a;
    border-left-color: rgba(0, 0, 0, 0.14);
}

@media (max-width: 1023px) {
    .vox9-tagline { display: none; }
}