/* =========================================================
   Component — Brand lockup

   The mark is raster artwork (the owner's logo, keyed to
   transparency), so its colour is fixed and cannot follow the
   theme. That is correct: a logo that changes colour with the
   interface is no longer a logo. Only the wordmark beside it
   takes a token, because it is type, not artwork.
   ========================================================= */
.brand {
  --brand-mark: 38px;
  --brand-word: 1rem;

  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}

.brand__mark {
  height: var(--brand-mark);
  width: auto;
  flex: none;
  /* The artwork was drawn to sit on a dark ground; on paper it keeps
     its own weight, so it gets no filter — only a hair of contrast
     lift so the deepest blues do not muddy against warm white. */
  transition: transform var(--dur-base) var(--ease-out);
}
.brand:hover .brand__mark { transform: translateY(-1px); }

/* Latin wordmark. Wide tracking and a heavy weight, matching the
   lockup the owner supplied. Solid, never gradient. */
.brand__wordmark {
  font-family: var(--font-latin);
  font-size: var(--brand-word);
  font-weight: var(--fw-bold);
  letter-spacing: 0.17em;
  line-height: 1;
  color: var(--color-text);
  /* the tracking adds a trailing gap; pull it back so the lockup
     stays optically centred */
  margin-inline-end: -0.17em;
}

.brand--mark .brand__wordmark { display: none; }

.brand--sm { --brand-mark: 30px; --brand-word: 0.82rem; }
.brand--lg { --brand-mark: 60px; --brand-word: 1.45rem; }

@media (max-width: 420px) {
  .brand { --brand-mark: 32px; --brand-word: 0.86rem; }
}

/* The mark is the way home from every page. On a phone it is also
   a 32px target sitting beside a 48px burger. */
@media (pointer: coarse) {
  a.brand { min-block-size: 44px; }
}