/* ==========================================================================
   Photos (/photography/) and each album (/photography/<slug>/). Tokens only.
   The index shows albums as small stacks of prints: the cover on top, two
   more photos from the album peeking out behind it.
   ========================================================================== */

.albums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-8) var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 29.99rem) {
  .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-4); }
}

.album-card a {
  display: grid;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}

/* The stack. Prints are white-bordered like photographs, one radius. */
.album-card__stack {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  margin: var(--space-3) var(--space-3) var(--space-4);
}
.album-card__print {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 4%;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 0 0 var(--hairline) var(--line), 0 10px 22px -14px var(--page-shade);
  transition: transform var(--dur-slow) var(--ease);
}
.album-card__print img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.album-card__print--1 { z-index: 3; }
.album-card__print--2 { z-index: 2; transform: rotate(-4deg) translate(-3%, 1%); }
.album-card__print--3 { z-index: 1; transform: rotate(5deg) translate(4%, 2%); }

/* On hover the stack fans out a little, like picking it up. */
.album-card a:hover .album-card__print--1,
.album-card a:focus-visible .album-card__print--1 { transform: translateY(calc(var(--rise) * -1)); }
.album-card a:hover .album-card__print--2,
.album-card a:focus-visible .album-card__print--2 { transform: rotate(-8deg) translate(-8%, 0); }
.album-card a:hover .album-card__print--3,
.album-card a:focus-visible .album-card__print--3 { transform: rotate(9deg) translate(9%, 1%); }

.album-card__title {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: var(--leading-tight);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.album-card a:hover .album-card__title { color: var(--accent); }
.album-card__meta { color: var(--gold-ink); }
.album-card__note {
  color: var(--ink-3);
  font-size: var(--step-n1);
  line-height: var(--leading-snug);
}

/* One album. */
.album-meta { color: var(--gold-ink); }
.album-back__icon { transform: rotate(180deg); }
.album-back:hover .album-back__icon { transform: rotate(180deg) translateX(3px); }
.album { padding-bottom: var(--space-8); }
.album-empty { max-width: var(--measure); color: var(--ink-3); }

.album-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: var(--hairline) solid var(--line);
}
.album-pager a { display: grid; gap: var(--space-1); padding-block: var(--space-3); color: var(--ink); text-decoration: none; }
.album-pager__next { text-align: right; }
.album-pager__title { font-family: var(--font-serif); font-size: var(--step-1); transition: color var(--dur-fast) var(--ease); }
.album-pager a:hover .album-pager__title { color: var(--accent); }

/* The albums follow the intro closely. */
.page-title + .section { padding-top: var(--space-2); }