/* Compact credits layout; shared website styles remain unchanged. */
body.credits-page { background: #081625; color: #f5f3ed; }
.credits-content {
  width: min(820px, calc(100% - 48px));
  margin: 0 auto;
  padding: 48px 0;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.credits-content h1,
.credits-content h2,
.credits-content h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-transform: none;
}
.credits-content h1 { font-size: 48px; margin: 0 0 18px; }
.credits-content p { line-height: 1.5; }
.credits-intro { color: #c2cddc; }
.credit-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid #465568; }
.credits-content h2 { font-size: 28px; margin: 0 0 16px; color: #e8bf62; }
.credits-content h3 { font-size: 21px; margin: 20px 0 10px; }
.photo-credits, .music-credits { margin: 0; padding-left: 20px; }
.photo-credits li, .music-credits li { padding-left: 3px; margin-bottom: 10px; }
.photo-credits li::marker, .music-credits li::marker { color: #e8bf62; }
.photo-credits em, .music-credits em { font-style: italic; }
.credits-content strong { font-weight: 600; }
.credits-content a { color: #e8bf62; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.credits-content a:hover { color: #fff0c8; }
.credits-content a:focus-visible { outline: 3px solid #e8bf62; outline-offset: 4px; border-radius: 2px; }
.credits-content .other-images { color: #b7c4d4; font-size: 13px; margin-top: 8px; }
.credits-closing { margin-top: 28px; padding-top: 24px; border-top: 1px solid #465568; }
.credits-closing p { color: #c2cddc; }
.credits-content .last-updated { margin-top: 18px; font-size: 13px; color: #b7c4d4; }
.credits-footer { padding-bottom: 32px; }
.credits-page .footer { border-top: 1px solid #465568; color: #a5b3c6; }
.skip-link { position: absolute; left: 24px; top: -150px; z-index: 10; padding: 12px 18px; background: #e8bf62; color: #081625; }
.skip-link:focus { top: 12px; }
@media (max-width: 760px) {
  .credits-content { padding: 32px 0 36px; }
  .credits-content h1 { font-size: 36px; margin-bottom: 16px; }
  .credits-content h2 { font-size: 26px; }
  .credit-section { margin-top: 28px; padding-top: 22px; }
  .credits-footer { padding-bottom: 28px; }
}
@media (max-width: 360px) {
  .credits-page .nav { gap: 10px; }
  .credits-page .brand-logo { width: 128px; }
}