/* Show the work: shelf (work-show/shelf.js; tokens.css, --work-show). The six covers in a row along the foot of the first
   screen, each whole at its own shape and --work-shelf-height tall, its name and date under it in caption size. The scene
   moves up to make room and the chevron goes: the shelf is the cue. Over one, the cover lifts --work-shelf-lift and
   leans toward the pointer (--work-shelf-lean); a click glides to its project (--work-glide). On a phone the row swipes
   sideways, the next cover cut off at the card's edge. */
html[data-work-show="shelf"] .hero {
  --scene-y: -80px;
}

html[data-work-show="shelf"] .hero .down {
  display: none;
}

html[data-work-show="shelf"] .ws-shelf {
  position: absolute;
  bottom: 40px;
  left: 50%;
  display: flex;
  align-items: flex-start;
  gap: var(--cover-gap, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
  translate: -50% 0;
}

html[data-work-show="shelf"] .ws-item {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html[data-work-show="shelf"] .ws-item:focus-visible {
  outline: none;
}

html[data-work-show="shelf"] .ws-item:focus-visible .ws-pic {
  box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--ink-nav);
}

html[data-work-show="shelf"] .ws-thumb {
  display: block;
}

/* The cover at the picture's own shape (--a, its width and height): never cropped. A small box gets a smaller corner:
   8px against the cards' 20px (a guess). The press is on the picture, the lift and lean on .ws-thumb (shelf.js). */
html[data-work-show="shelf"] .ws-pic {
  --dark-grain-radius: 8px;
  position: relative;
  display: block;
  height: var(--work-shelf-height);
  aspect-ratio: var(--a);
  overflow: clip;
  border-radius: 8px;
  background: #ffffff;
  isolation: isolate;
  transition: scale var(--motion-fast) var(--motion-ease-out);
}

html[data-work-show="shelf"] .ws-pic picture {
  display: contents;
}

html[data-work-show="shelf"] .ws-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

/* The covers' 1px line inside the edge (projects.css, .cover::after). */
html[data-work-show="shelf"] .ws-pic::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid #f4f4f4;
  border-radius: inherit;
  pointer-events: none;
}

html[data-work-show="shelf"] .ws-pic:has(picture.dark-grain)::after {
  border-color: rgb(244 244 244 / var(--cover-line-dark));
}

html[data-work-show="shelf"].print-art .ws-pic {
  filter: url(#print-cover);
}

html[data-work-show="shelf"] .ws-item:active .ws-pic {
  scale: var(--press-scale);
}

/* Name and date, as a project's title has them, at caption size. */
html[data-work-show="shelf"] .ws-cap {
  padding-inline: 2px;
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: -0.06px;
  white-space: nowrap;
}

html[data-work-show="shelf"] .ws-cap-name {
  color: #111111;
  font-weight: 350;
}

html[data-work-show="shelf"] .ws-cap-date {
  color: #a19898;
  transition: color var(--jot-hover-fade, 150ms) ease;
}

@media (hover: hover) and (pointer: fine) {
  html[data-work-show="shelf"] .ws-item:hover .ws-cap-date {
    color: var(--project-date-hover);
  }
}

@media (max-width: 560px) {
  html[data-work-show="shelf"] .hero {
    --scene-y: -90px;
  }

  html[data-work-show="shelf"] .ws-shelf {
    right: 0;
    bottom: 28px;
    left: 0;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding: 6px 16px 0;
    scrollbar-width: none;
    translate: none;
  }

  html[data-work-show="shelf"] .ws-shelf::-webkit-scrollbar {
    display: none;
  }

  html[data-work-show="shelf"] .ws-shelf::after {
    content: '';
    flex: none;
    width: 4px;
  }

  html[data-work-show="shelf"] .ws-item {
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-work-show="shelf"] :is(.ws-pic, .ws-cap-date) {
    transition: none;
  }
}