/* page style: collections */
body[data-site-route] .collection-page .hero {
  justify-items: start;
  text-align: left;
}

body[data-site-route] .collection-intro {
  display: grid;
  gap: var(--space-sm);
}

body[data-site-route] .collection-intro h2 {
  font-size: var(--heading-two-size);
  line-height: var(--heading-two-line);
}

body[data-site-route] .collection-intro p {
  color: var(--muted);
  font-size: var(--text-size);
  line-height: var(--text-line);
  max-width: 62ch;
}

body[data-site-route] .collection-list {
  display: grid;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

body[data-site-route] .collection-list > li {
  list-style: none;
}

body[data-site-route] .collection-item {
  align-items: baseline;
  color: inherit;
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  text-decoration: none;
}

body[data-site-route] .collection-item:hover strong,
body[data-site-route] .collection-item:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-site-route] .collection-item strong {
  font-size: var(--text-size);
  line-height: var(--text-line);
}

body[data-site-route] .collection-description,
body[data-site-route] .collection-index {
  color: var(--muted);
}

body[data-site-route] .collection-description {
  font-size: var(--text-size);
  line-height: var(--text-line);
  text-wrap: pretty;
}

body[data-site-route] .collection-index {
  font: var(--meta-size)/var(--meta-line) var(--mono);
}