/* ---------- eng credits (plain A-Z index) ---------- */
.lead{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.plat{display:flex;align-items:center;justify-content:center;gap:10px;width:220px;padding:9px 18px;border:1px solid var(--line);border-radius:3px;font-size:11px;letter-spacing:.04em;color:var(--ink);transition:background .15s ease,color .15s ease,border-color .15s ease}
.plat:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plat svg{width:14px;height:14px;flex:none;fill:currentColor}

.index{width:100%;max-width:900px;list-style:none;margin:40px auto 0;padding:0 0 0 26px;columns:4 150px;column-gap:20px;border-top:1px solid var(--line);padding-top:22px}
.index li{break-inside:avoid;position:relative;padding:3px 0;line-height:1.35;font-size:12px;letter-spacing:.01em}
.index li.first::before{content:attr(data-l);position:absolute;left:-26px;top:3px;font-size:11px;color:var(--muted);line-height:1.5}

/* soft fade-in on load, opacity only; the delay per letter group is set in eng-credits.js.
   site.css turns animations off under reduced motion, so the list just appears there. */
@keyframes credit-in{from{opacity:0}to{opacity:1}}
.index li{animation:credit-in .45s ease both}

/* desktop: four columns, each only as wide as its longest name, centred as a group.
   Equal-width columns left empty space after the last column's shorter names, which
   made the list sit left of centre. The 26px left padding matches the letter gutter,
   so the letters on the left and the names on the right end up the same distance
   from the edges. --rows is set in eng-credits.js from the number of names. */
@media (min-width:810px){
  .index{columns:auto;display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows, 25),auto);grid-auto-columns:max-content;justify-content:center;column-gap:80px}
}

@media (max-width:809px){
  .index{columns:2 130px;column-gap:14px}
  .index li{padding:4px 0}
}