/* Series list: one row per series — title, places, dates, count, a strip of its frames */
.list-in{padding:calc(110px + var(--safe-t)) var(--gut) 80px;max-width:1500px}

.srow{display:grid;grid-template-columns:minmax(150px,1.1fr) 170px 130px 44px minmax(0,2.6fr);gap:18px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.srows>.srow:first-child{border-top:0} /* the docked line of the page title already sits above the first row */
.srows{margin-bottom:36px}
.srow-t{font-size:clamp(20px,2.1vw,32px);font-weight:520;font-stretch:85%;letter-spacing:-.01em}
.srow-where,.srow-dates,.srow-n{color:var(--mute)}
.srow-strip{display:flex;gap:4px;height:58px;overflow:hidden;opacity:1;transition:opacity .35s var(--ease)}
.srow-strip img{height:100%;width:auto;max-width:none;display:block;flex:none;cursor:pointer}

@media (hover:hover){
  /* every strip is fully visible; hovering one row fades the others back */
  .srows:has(.srow:hover) .srow-strip{opacity:.45}
  .srows .srow:hover .srow-strip{opacity:1}
  .srow:hover .srow-t{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
}
/* phones: the list reads ~20% larger, strips scroll sideways under the row */
@media (hover:none),(max-width:760px){
  .srow{gap:4px 12px}
  .srow-t{font-size:24px}
  .srow .mono{font-size:14px}
  .srow-strip{grid-column:1/-1;overflow-x:auto;height:77px;scrollbar-width:none}
  .srow-strip::-webkit-scrollbar{display:none}
}
@media (max-width:760px){.srow{grid-template-columns:1fr auto auto}}
/* desktop: the places sit under the series name, which frees the width for larger strips */
@media (min-width:761px) and (hover:hover){
  .srow{grid-template-columns:minmax(240px,1fr) 120px 44px minmax(0,3.6fr);grid-template-areas:"t d n s" "y d n s";row-gap:6px;column-gap:24px;padding:14px 0}
  .srow-t{grid-area:t;align-self:end}
  .srow-where{grid-area:y;align-self:start}
  .srow-dates{grid-area:d}
  .srow-n{grid-area:n}
  .srow-strip{grid-area:s;height:clamp(84px,7.5vw,128px);gap:6px}
}