/* Show the work: index (work-show/index.js; tokens.css, --work-show). The first screen splits: a designer's index of the
   projects on the left, --work-index-width of the card (name, one short line, date), and the scene on the right. Over a
   row its cover takes the scene's place, whole at its own shape; a click opens the case study. On a phone the index sits
   under a smaller scene (the rock and the raccoon: wind.js leaves the sign and the red bush out when the hero is short).
   The hero itself narrows, so the wind scene fits itself to its half as it does to the whole card. */
html[data-work-show="index"] {
  --scene-scale: 1;
}

html[data-work-show="index"] .hero {
  width: calc(100% - var(--work-index-width));
  margin-left: auto;
}

/* The index fills the first screen's left part, its rows level with the scene's middle (--scene-y). It scrolls away
   with the panel. */
html[data-work-show="index"] .ws-index {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: var(--work-index-width);
  height: 100%;
  padding: 0 16px 0 52px;
}

html[data-work-show="index"] .ws-index-in {
  width: 100%;
  translate: 0 var(--scene-y);
}

html[data-work-show="index"] .ws-label {
  margin: 0 0 8px;
  padding-inline: 12px;
  color: var(--mute);
  font: inherit;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.135px;
}

html[data-work-show="index"] .ws-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A row: name, line and date, one line each, at the projects' text size; the tones do the work. */
html[data-work-show="index"] .ws-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: baseline;
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  color: inherit;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--jot-hover-fade, 150ms) ease, scale var(--motion-fast) var(--motion-ease-out);
}

html[data-work-show="index"] .ws-row-name {
  color: #111111;
  font-weight: 350;
  letter-spacing: -0.15px;
  white-space: nowrap;
}

html[data-work-show="index"] .ws-row-line {
  overflow: hidden;
  color: var(--mute);
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* The row in hand, or the one whose cover shows: the projects' hover grey, no jelly. */
html[data-work-show="index"] .ws-row.on {
  background: var(--project-hover-color);
}

html[data-work-show="index"] .ws-row.on .ws-row-date {
  color: var(--project-date-hover);
}

html[data-work-show="index"] .ws-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--ink-nav);
}

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

/* The covers, one at a time where the scene is: in the scene's half, at the scene's middle, whole at its own shape.
   index.js fades them (--work-index-in, --work-index-out). */
html[data-work-show="index"] .ws-preview {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

html[data-work-show="index"] .ws-cover {
  --dark-grain-radius: var(--cover-radius, 20px);
  position: absolute;
  top: calc(50% + var(--scene-y));
  left: 50%;
  width: min(78%, 600px);
  aspect-ratio: var(--a);
  overflow: clip;
  border-radius: var(--cover-radius, 20px);
  background: #ffffff;
  isolation: isolate;
  opacity: 0;
  translate: -50% -50%;
}

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

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

html[data-work-show="index"] .ws-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid #f4f4f4;
  border-radius: inherit;
  pointer-events: none;
}

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

/* While a cover shows, the scene steps back (its sign's words follow its fade: wind.js, mirror) and the sign's boards
   take no clicks. It goes as the cover comes in (--work-index-in's time and curve) and comes back as it goes out
   (--work-index-out's): CSS, so the scene never carries a style of this version's own. */
html[data-work-show="index"] .hero .scene {
  transition: opacity var(--work-index-out-duration) cubic-bezier(var(--work-index-out-curve));
}

html[data-work-show="index"] .hero.ws-showing .scene {
  opacity: 0;
  transition: opacity var(--work-index-in-duration) cubic-bezier(var(--work-index-in-curve));
}

html[data-work-show="index"] .hero.ws-showing .sign-links {
  visibility: hidden;
}

@media (max-width: 560px) {
  html[data-work-show="index"] .hero {
    --scene-y: 26.5px;
    width: auto;
    height: 340px;
    margin-left: 0;
  }

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

  html[data-work-show="index"] .ws-index {
    position: static;
    display: block;
    width: auto;
    height: auto;
    padding: 0 16px;
  }

  html[data-work-show="index"] .ws-index-in {
    translate: none;
  }

  html[data-work-show="index"] .ws-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 2px;
    padding: 9px 12px;
  }

  html[data-work-show="index"] .ws-row-name { grid-column: 1; grid-row: 1; }
  html[data-work-show="index"] .ws-row-date { grid-column: 2; grid-row: 1; }
  html[data-work-show="index"] .ws-row-line { grid-column: 1 / -1; grid-row: 2; white-space: normal; }

  html[data-work-show="index"] .ws-preview {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-work-show="index"] :is(.ws-row, .ws-row-date, .hero .scene, .hero.ws-showing .scene) {
    transition: none;
  }
}