/* Clause 04: twelve rows, each name fitted to the row width. Rows keep their full height. */
.rows { margin-top: 32px; }
.row { border-top: 1px solid var(--ink); padding: 14px 0 18px; display: grid; grid-template-columns: minmax(0, 1fr); }
.row:last-child { border-bottom: 1px solid var(--ink); }
.row__n { display: flex; align-items: center; gap: 12px; }
.row__name {
  display: block; margin: 6px 0 10px; white-space: nowrap; font-stretch: var(--w-poster); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.86; font-size: 11vw;
  transform-origin: 0 50%;
}
.row__name.is-live { will-change: transform; } /* set by twelve.js only while the scrub runs */
.row__rule { max-width: 30em; }
.found-tag { background: var(--hi); color: var(--ink); padding: 3px 8px; font-weight: 700; }
.found-tag[hidden] { display: none; }
@media (min-width: 900px) {
  .rows { margin-top: 64px; }
  .row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding: 20px 0 24px; align-items: end; }
  .row__n { grid-column: 1 / -1; }
  .row__name { grid-column: 1 / 10; margin: 8px 0 0; font-size: 7vw; }
  .row__rule { grid-column: 10 / 13; padding-bottom: 2px; font-size: 17px; line-height: 1.3; }
}