:root {
  --differ-yellow: #FDC100;
  --differ-black: #0F1411;
  --differ-offwhite: #F5F3EE;
}
.differ-logo {
  --logo-h: 40px;              /* the one knob: total lockup height */
  display: inline-flex;
  align-items: flex-start;     /* badge top edge flush with DIFFER's cap line */
  gap: calc(var(--logo-h) * 0.18);
  height: var(--logo-h);
  color: var(--differ-black);
  text-decoration: none;
}
.differ-logo__mark { flex: none; width: var(--logo-h); height: var(--logo-h); display: block; }
.differ-logo__type {
  display: flex; flex-direction: column;
  justify-content: space-between;   /* DIFFER to the top, SOLAR to the badge bottom */
  height: var(--logo-h);
  width: calc(var(--logo-h) * 1.76);
}
.differ-logo__wordmark { display: block; width: 100%; height: auto; fill: currentColor; }
.differ-logo__solar {
  display: flex; justify-content: space-between;   /* tracks SOLAR to the logotype width */
  font-family: Archivo, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: calc(var(--logo-h) * 0.51);
  line-height: 0.8;
  color: currentColor;
  /* line-height leaves Archivo's descent below the S-O-L-A-R baseline; pull it back so
     the baseline — not the font box — lands on the badge's bottom edge, matching the
     standalone SVGs (text y = badge bottom). Tuned to Archivo 500 metrics. */
  margin-bottom: calc(var(--logo-h) * -0.038);
}
.differ-logo--ondark { color: var(--differ-offwhite); }