/* ==========================================================================
   BRAND — "Nexoss IA" wordmark
   Markup:  <span class="wordmark" aria-hidden="true">
              <span class="wordmark__name">Nexoss</span><span class="wordmark__tag">IA</span>
            </span>
   Size is driven by --wordmark-size (set per placement: header, footer…).
   The name inherits the text colour (works on light and dark sections);
   the "IA" tag is the brand accent block.

   DEFINITIVE LOGO: save it as assets/brand/logo.svg (or logo-light / logo-dark)
   and replace each
   <span class="wordmark"> with
     <img class="wordmark wordmark--image" src="/assets/brand/logo.svg" alt="" width="…" height="…">
   (see docs/BRANDING.md). The header and footer live in site/templates/: change
   them there and run npm run build. The same --wordmark-size keeps its height.
   ========================================================================== */

.wordmark {
  --wordmark-size: 2.6rem;
  display: inline-flex;
  align-items: center;
  gap: .22em;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: var(--wordmark-size);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}

.wordmark__tag {
  display: inline-block;
  padding: .14em .22em .12em .24em;
  border-radius: .16em;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: .62em;
  letter-spacing: .02em;
  line-height: 1;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

/* On the yellow section the tag flips to ink so it stays visible */
[data-theme="accent"] .wordmark__tag {
  background: var(--ink-950);
  color: var(--color-accent);
}

.wordmark--image {
  width: auto;
  height: var(--wordmark-size);
}