/* ============================================================
   Galleries. The page borrows the whole of home.css -- the bar,
   the drawer, the bands, the rails, the footer -- and adds only
   what nothing else has: a contents list in the head, and a way
   of telling four rails of identical cards apart at a glance.
   ============================================================ */

/* The four collections named in the order they appear, so the head is
   also the contents -- and on a phone, where each rail is a screen tall,
   the only way to see that there are four without scrolling past them. */
.pagehead__jump {
  display: flex; flex-wrap: wrap; gap: var(--sc-3);
  margin: var(--sc-7) 0 0; padding: 0; list-style: none;
}
.pagehead__jump a {
  display: inline-block; padding: 0.5rem 0.95rem;
  border-radius: var(--sc-r-pill); text-decoration: none;
  font-size: var(--sc-t-xs); font-weight: 500;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
  box-shadow: inset 0 0 0 1px var(--sc-hairline);
  transition: color var(--sc-d-fast) var(--sc-ease-out),
              background var(--sc-d-fast) var(--sc-ease-out),
              box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.pagehead__jump a:hover,
.pagehead__jump a:focus-visible {
  color: var(--sc-accent-ink); background: var(--sc-accent);
  box-shadow: 0 6px 20px rgba(79, 176, 255, 0.3);
}

/* A count beside each kicker. Four rails of the same card in the same
   frame otherwise blur into one long scroll, and the number is also the
   answer to the question the page is really being asked: how much have
   you actually done. */
.band__count {
  display: inline-block; margin-left: var(--sc-3);
  padding: 0.12rem 0.5rem; border-radius: var(--sc-r-pill);
  font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--sc-ink-soft);
  box-shadow: inset 0 0 0 1px var(--sc-hairline);
}