/* KiTH — official SVG wordmark. Uses currentColor: inherits text (dark on light UI, light on dark). */
.kith {
  display: inline-block;
  position: relative;
  line-height: 0;
  vertical-align: -0.22em; /* line up with surrounding body/heading text */
  color: inherit;
  max-width: 100%;
  box-sizing: border-box;
  font: inherit; /* for em sizing; SVG scales from context */
}

.kith[role="img"] {
  max-width: 100%;
}

/* Match word height to type; viewBox 760×220 → width ≈ 3.45× height */
.kith__svg {
  display: block;
  width: auto;
  height: 0.9em; /* size with text */
  max-width: min(100%, 3.4em);
  aspect-ratio: 760 / 220;
}

@supports not (aspect-ratio: 1) {
  .kith__svg {
    width: 3.1em; /* 0.9 * 760/220 */
    height: 0.9em;
  }
}