.index-head { padding: 62px 0 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 390px); align-items: end; gap: 48px; border-bottom: 1px solid var(--line); }
.index-head h1 { max-width: 720px; }
.index-summary { margin: 0; color: var(--muted); line-height: 1.8; }
.directory { margin: 0; padding: 20px 0 0; list-style: none; }
.directory li { border-bottom: 1px solid var(--line); }
.directory > li > a { min-height: 124px; padding: 24px 0; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(360px, 1.5fr) minmax(150px, .5fr) 28px; align-items: center; gap: 32px; text-decoration: none; }
.directory > li > a:hover .directory-title { color: var(--cyan-dark); }
.directory-number { color: var(--coral); font: 700 13px Georgia, serif; }
.directory-title { margin: 4px 0 0; font: 700 27px Georgia, "Yu Mincho", serif; }
.directory-description { color: var(--muted); line-height: 1.75; }
.directory-metric { color: var(--cyan-dark); text-align: right; font-size: 12px; line-height: 1.6; }
.directory-arrow { color: var(--cyan); font-size: 26px; }
.youtube-attribution { padding: 0 0 18px; display: flex; justify-content: flex-end; }
.youtube-attribution a { flex: 0 0 auto; max-width: 100%; display: block; background: #fff; line-height: 0; }
.youtube-attribution-logo { width: 298px; max-width: 100%; height: auto; display: block; aspect-ratio: 1705 / 573; object-fit: contain; }

@media (max-width: 820px) {
  .index-head { grid-template-columns: 1fr; gap: 22px; }
  .directory > li > a { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; }
  .directory-description, .directory-metric { grid-column: 1; text-align: left; }
  .directory-arrow { grid-column: 2; grid-row: 1 / span 3; }
}

@media (max-width: 620px) {
  .youtube-attribution { margin-inline: -5px; }
}