/* Collections index (/images). Load site.css first.

   Five bands stacked, one per collection, each the content width at 16:9.
   Every cover is natively 16:9 so nothing is cropped — object-fit:contain is
   a guard, not a crop: if a non-16:9 cover is ever assigned it letterboxes on
   the page ground rather than silently cutting the frame.

   Order is data-driven: `index_order` in tools/collections.json. Ben's order
   is Favorites, Rugged, Arid, Lush, Tidal — Rugged's muted aerial separates
   the two warm desert frames. Do not hardcode it here.

   No page title — content pages carry none.                                 */

:root{
  --band-gap:176px;
  --name-gap:var(--s-4);
  --band-max:1628px;
}

.bands{display:flex;flex-direction:column;align-items:center;gap:var(--band-gap)}

/* The whole band — photograph and name together — is one link. */
.band{display:flex;flex-direction:column;align-items:center;gap:var(--name-gap);
      width:100%;max-width:var(--band-max);
      transition:var(--transition-opacity)}
.band:hover{opacity:var(--hover-opacity)}
.band:active{opacity:var(--press-opacity)}

.band img{width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--surface-page);
          animation:photo-in var(--dur-slow) var(--ease) both}
.band .name{font:var(--w-regular) var(--t-mark)/var(--lh-title) var(--font);color:var(--fg)}

@keyframes photo-in{from{opacity:0}to{opacity:1}}

/* The export had no reduced-motion guard on the fade-in. Five bands fading on
   load is exactly what this setting exists to suppress. */
@media (prefers-reduced-motion:reduce){
  .band img{animation:none}
  .band{transition:none}
}

@media (max-width:1131px){
  :root{--band-gap:var(--s-7);--name-gap:var(--s-3)}
}
@media (max-width:719px){
  :root{--band-gap:var(--s-6)}
}