/* Multi-column city list inside a prose block. Crawlable <ul>, no
   regional headers. 2 cols mobile, 3 at 640, 4 at 960.

   Grid, not CSS `columns`. Multi-column balances fractional heights, which
   left alternating columns sitting ~15px lower than their neighbours. It went
   unnoticed while Seattle's 25 entries filled every column evenly, and showed
   immediately on Tri-Cities with 9. Grid also flows row-wise, so a list
   ordered by prominence now reads left to right in that order. */
.city-list{
  list-style:disc;
  padding:0 0 0 1.2em;
  margin:1.6rem 0 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:2rem;
}
.city-list li{
  font-family:var(--body);
  font-size:1.02rem;
  line-height:1.8;
  color:#555;
  padding-bottom:.25rem;
}
@media(min-width:640px){.city-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px){.city-list{grid-template-columns:repeat(4,minmax(0,1fr))}}