/* The bar's wordmark or mark. Never nowrap: only the measured bar re-pins it,
 * and min-width lets the box narrow past its longest word when compact. */

.sk-el-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--kit-font-brand);
  font-size: var(--sk-text-brand-size);
  font-weight: var(--kit-weight-brand);
  letter-spacing: calc(var(--kit-track-brand) * 1em);
  text-transform: var(--kit-caps-brand);
  text-decoration: none;
  color: var(--sk-ink);
}
/* An inline-svg mark inherits the brand ink via currentColor. */
.sk-el-logo-mark {
  display: inline-flex;
  line-height: 0;
}
.sk-el-logo-mark > svg {
  width: calc(var(--sk-text-brand-size) * 1.15);
  height: calc(var(--sk-text-brand-size) * 1.15);
}
/* A RASTER logo cannot take the bar's ink the way an inline mark does, so both
 * files sit stacked in one cell, each tagged by the ink it is DRAWN in, and
 * the bar's current ink picks which one shows. */
.sk-el-logo-img {
  display: inline-grid;
  line-height: 0;
}
.sk-el-logo-img > img {
  grid-area: 1 / 1;
  height: calc(var(--sk-logo-h-n, 40) * 1px * var(--sk-logo-scale, 1));
  width: auto;
  max-width: 50vw;
  object-fit: contain;
  object-position: left center;
}
.sk-el-logo-img > img[data-fg="dark"] {
  opacity: calc(1 - var(--sk-ink-on-dark));
}
.sk-el-logo-img > img[data-fg="light"] {
  opacity: var(--sk-ink-on-dark);
}
.sk-el-logo-img > img:only-child {
  opacity: 1;
}