/* =====================================================================
   site-logo.css · corner logo in the shared header
   ---------------------------------------------------------------------
   WHERE: append to the END of the main stylesheet (NOT journal.css),
          because the header is shared by the landing page and the journal.
          Put the image at assets/juni-logo.png, or fix the url() below
          so it is correct relative to the stylesheet's own location.
   HOW:   CSS-only swap, so no HTML edits are needed. The original
          "JUNI" link text stays in the DOM for screen readers and SEO but
          is moved off-screen, and the small mono tag beside it is hidden.
   TO LIMIT TO THE JOURNAL ONLY: prefix each selector below with
          `.journey-page ` (e.g. `.journey-page .site-header .wordmark`).
   ===================================================================== */

.site-header .wordmark {
  display: block;
  flex: 0 0 auto;
  width: clamp(88px, 9vw, 118px);
  aspect-ratio: 593 / 236;                 /* the logo's native proportions */
  overflow: hidden;
  background: url("assets/juni-logo.png") center / contain no-repeat;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;                    /* hide text, keep it accessible */
  white-space: nowrap;
}
.site-header .wordmark span { display: none; }

/* The logo is black/gray on a transparent background, so on the dark theme
   it would vanish. Inverting a grayscale PNG keeps it crisp and leaves the
   transparency (alpha) untouched. */
:root[data-theme="dark"] .site-header .wordmark { filter: invert(1); }

@media (max-width: 620px) {
  .site-header .wordmark { width: 84px; }
}