.credits { position: relative; padding-top: var(--space-6); border-top: var(--border-w) solid var(--paper-border); }
.big-word { overflow: hidden; margin-bottom: var(--space-6); }
.big-word span {
  display: block; width: max-content;
  font-family: var(--font-body); font-weight: 800; font-style: italic;
  font-size: var(--fs-mega); line-height: 0.9; letter-spacing: -0.05em;
  white-space: nowrap; translate: var(--shift, 0) 0;
}
.credits-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-5); }
.credits-head .eyebrow { margin: 0; }
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.credit-list { border-top: var(--border-w) solid var(--paper-fg); }
.credit {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1.5fr) minmax(0, 1fr) 4rem;
  gap: var(--space-4); align-items: baseline;
  padding: var(--space-4) var(--space-2);
  border-bottom: var(--border-w) solid var(--paper-border);
  transition: background-color var(--dur-fast), padding var(--dur-med) var(--ease-out);
}
.credit:hover { background: var(--paper-2); padding-inline: var(--space-4); }
.credit-n { color: var(--paper-muted); }
.credit-title { font-style: italic; font-weight: 800; font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.credit-role { display: block; font-style: normal; font-weight: 500; font-size: var(--fs-small); letter-spacing: 0; color: var(--paper-muted); margin-top: var(--space-1); }
.credit-net { font-size: var(--fs-small); color: var(--paper-fg); }
.credit-y { text-align: right; color: var(--paper-fg); }
.credit.is-hidden { display: none; }
.credits-foot { margin-top: var(--space-5); color: var(--paper-muted); font-size: var(--fs-small); }
.credits-foot a { color: var(--paper-fg); font-weight: 600; text-underline-offset: 4px; }
.credits-foot a:hover { text-decoration-thickness: 2px; }

.credit-peek {
  position: fixed; top: 0; left: 0; z-index: var(--z-peek);
  width: 260px; border-radius: var(--radius-md); overflow: hidden;
  pointer-events: none; opacity: 0; scale: 0.85;
  box-shadow: 0 24px 50px var(--shadow);
  transition: opacity var(--dur-fast), scale var(--dur-med) var(--ease-spring);
}
.credit-peek.is-on { opacity: 1; scale: 1; }
.credit-peek img { width: 100%; height: auto; }

@media (max-width: 760px) {
  .credit { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .credit-net { grid-column: 2; grid-row: 2; }
  .credit-y { grid-column: 3; grid-row: 1; }
  .credit-peek { display: none; }
}
.credit-kind { color: var(--paper-muted); }