.art-credits { display: grid; gap: 48px; min-width: 0; }
.credits-intro { display: grid; gap: 20px; max-width: 46rem; }
.eyebrow { color: var(--accent); font-weight: 800; letter-spacing: 0.08em; }
.credits-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.icon-credit { display: flex; align-items: center; gap: 20px; }
.icon-credit img { border-radius: 16px; flex: none; }
.art-credits section { scroll-margin-top: 24px; min-width: 0; }
.art-list { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.art-credits code, .credit-record { overflow-wrap: anywhere; }
.credit-search { display: grid; gap: 8px; max-width: 32rem; }
.credit-search label { font-weight: 700; }
.credit-search input {
  width: 100%; min-width: 0; padding: 12px 16px;
  font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
}
.credit-search input::placeholder { color: var(--hint); }
.credit-search input:focus-visible, .credit-group summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px;
}
.art-credits [hidden] { display: none !important; }
.book-credits { display: grid; gap: 10px; }
.credit-group {
  min-width: 0; padding: 18px 22px;
  background: var(--card); border-radius: var(--radius-card);
}
.credit-group summary { cursor: pointer; font-weight: 700; }
.credit-group summary .muted { font-size: 0.9rem; font-weight: 400; margin-left: 8px; }
.credit-entry { display: grid; gap: 10px; padding: 24px 0; border-top: 1px solid var(--border); }
.credit-entry:first-of-type { margin-top: 20px; }
.credit-entry:last-child { padding-bottom: 0; }
.credit-record { display: grid; gap: 12px; font-size: 1rem; }
.credit-group > .credit-record { margin-top: 20px; }
@media (max-width: 480px) {
  .credit-group { padding: 16px; }
  .credit-group summary .muted { display: block; margin-left: 18px; }
}