.logo {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1; flex-shrink: 0; color: var(--k-ink);
}
.logo__name {
  font-family: var(--k-serif); font-weight:300; font-size: 26px;
  letter-spacing: .01em; line-height: .9; display: inline-flex; align-items: flex-end;
}
.logo__dot {
  width: .2em; height: .2em; border-radius: 50%;
  background: var(--k-crimson); margin: 0 0 .06em .1em;
}
.logo__sub {
  font-family: var(--k-serif); font-weight:300; font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--k-mid); margin-top: 3px;
}
.logo--sm .logo__name { font-size: 22px; }
.logo--sm .logo__sub { font-size: 8px; }

.logo--dark { color: var(--k-white); }
.logo--dark .logo__dot { background: var(--k-blush); }
.logo--dark .logo__sub { color: rgba(255, 255, 255, .7); }