/* Suspects (the lineup) test page (stage 3, 9 Oct 2026). Page-only styles on top of shared/ratc.css.
   Her illustrated mugshots from the live /suspects/ page, her line for each person, and a generated count of
   the pieces on each person's page. An investigation button leaves only the people in it. Motion: the shared
   print-in on each picture as it scrolls in; a card lifts on hover. */

.lu-open { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.lu-open__inner { display: grid; gap: 28px; align-items: center; }
.lu-open__text { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.lu-open__art { margin: 0; width: 100%; }  /* the lineup picture, 11 Oct 2026; under the text on phones */
@media (min-width: 900px) { .lu-open__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 64px); } .lu-chips { grid-column: 1 / -1; } }
.lu-kicker, .lu-title { margin: 0; }
.lu-kicker a { color: var(--label); text-decoration-color: var(--accent); text-underline-offset: .25em; }
.lu-line { margin: 0; max-width: 40ch; font: 700 var(--fs-h3)/1.4 var(--font-body); color: var(--text); text-wrap: pretty; }
.lu-count { margin: 0 0 6px; }
.lu-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lu-chip { min-height: 40px; }

.lu-wall__h { margin: 0 0 1.5rem; }
.lu-wall__h--poi { margin-top: 4rem; }
.lu-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 24px; }
.lu-card[hidden] { display: none; }
.lu-card__a {
  display: grid; gap: 8px; height: 100%; padding: 10px 10px 16px;
  border: 2px solid var(--dusk-violet); background: var(--ink-plum);
  color: var(--text); text-decoration: none;
  transition: border-color 180ms var(--ease-out), transform 220ms var(--ease-out);
}
.lu-card__art { margin: 0 0 4px; aspect-ratio: 3 / 2; }
.lu-card__art > img { width: 100%; height: 100%; object-fit: cover; }
.lu-card__name { padding-inline: 6px; font: 400 clamp(1.25rem, 1.05rem + .5vw, 1.625rem)/1.02 var(--font-display); text-transform: uppercase; color: var(--display); }
.lu-card__n { padding-inline: 6px; }
.lu-card__blurb { padding-inline: 6px; font-size: .9375rem; line-height: 1.45; }
.lu-card__a:hover, .lu-card__a:focus-visible { border-color: var(--bone); }
.lu-card__a:hover .lu-card__name { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: .1em; }
.lu-none { margin: 2rem 0 0; }
.lu-grid:not(:has(.lu-card:not([hidden]))) { display: none; }
.lu-wall__h:has(+ .lu-grid:not(:has(.lu-card:not([hidden])))) { display: none; }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="still"]) .lu-card__a:hover { transform: translateY(-4px); }
}
@media (max-width: 899px) {
  .lu-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .lu-chip { flex: none; }
  .lu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .lu-card__a { padding: 6px 6px 12px; }
  .lu-card__blurb { display: none; }   /* on a phone the card is picture, name and count; the line is on the person's page */
}