I love how you can see the original less-clickbait headlines of 'Who charges those electric bird scooters?' in the title tag and 'charging-electric-scooters-is-a-cutthroat-business' in the url.
How do you know that the <title> tag contains the "original" headline? It seems to be more tailored for SEO, i.e. to attract the people who wonder (and then Google), "Who charges the electric scooters?"
For a popular article that will earn a lot of links its also a good strategy to change the title multiple times during its viral phase.
Since many people/cm systems link with the title tag it means you get a wider mix of anchor text which can help the article to rank for a more diverse set of key phrases
Not sure what content-management system The Atlantic uses, but WordPress (or at least its popular SEO plugins) allow you to specify different values for <title> and article <h1> headlines. A lot of news orgs are now savvy enough to use varied titles for different formats. For example, this week's New Yorker print issue has a story titled, "Behind the Wall", which works in print because your eyeball can scan the article's entire presentation and see the headline in context with a photo and subhed "As the U.S. abandons diplomacy, an Ambassador resigns in protests".
In the online version, the story's title is "The Diplomat Who Quit the Trump Administration", and the subhed (which is also the <meta> description) contains proper nouns: "For John Feeley, the Ambassador to Panama, moral failings at home seemed to compound tactical failings abroad"
Any decent CMS allows for these to be configured differently for each page because they serve different audiences. Your title tag, open graph title tag, Google metadata title and actual <h1> all serve very different purposes. For Facebook you might want something clickbaity, while for Google a clearer title will usually do better.
For most content this sort of optimization would be a bit much, but for a piece like this it could definitely work.