body {
  max-width: 720px;
  margin: 40px 28px;
  background: white;
  color: #222;
  font: 17px/1.6 Helvetica, Arial, sans-serif;
}

h1 { margin: 0 0 16px; font-size: 20px; }
h2 { margin: 0 0 16px; font-size: 17px; }
p { max-width: 480px; margin: 0 0 16px; }
a { color: #0000ee; }

.cool-stuff-page, .cool-stuff-page p { max-width: none; }
.cool-stuff-page main p { margin-bottom: 24px; }

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 28px;
}

nav a[aria-current="page"] { font-weight: bold; }

.social-links p { margin-bottom: 0; }

.weekly-music { text-transform: lowercase; }

.album-collage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 2;
  max-width: 680px;
  margin-bottom: 20px;
  background: #f1f1ee;
}

.album-collage a { display: block; min-width: 0; min-height: 0; }
.album-collage a:first-child { grid-column: span 2; grid-row: span 2; }
.album-collage a:focus-visible { outline: 2px solid #0000ee; outline-offset: -3px; }

.album-chart {
  display: grid;
  gap: 10px;
  max-width: 680px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  line-height: 1.45;
}

.album-chart li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
}

.album-rank {
  color: #666;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.album-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #eee;
}

.album-name {
  color: #0000ee;
  font-size: 17px;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.album-artist {
  color: #555;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.album-plays {
  color: #666;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.music-updated { font-size: 13px; color: #666; }

@media (max-width: 520px) {
  .album-chart li { grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; }
  .album-plays { grid-column: 2; }
}