:root {
  --footer-sep:          rgba(0,0,0,.1);
  --footer-copy:         rgba(0,0,0,.4);
  --footer-title:        rgba(0,0,0,.72);
  --footer-link:         rgba(0,0,0,.42);
  --footer-link-hover:   rgba(0,0,0,.78);
  --footer-brand-border: rgba(0,0,0,.08);
  --footer-col-border:   rgba(0,0,0,.06);
  --footer-focus:        rgba(0,100,120,.6);
}
[data-theme="dark"] {
  --footer-sep:          rgba(255,255,255,.1);
  --footer-copy:         rgba(255,255,255,.32);
  --footer-title:        rgba(255,255,255,.68);
  --footer-link:         rgba(255,255,255,.36);
  --footer-link-hover:   rgba(255,255,255,.82);
  --footer-brand-border: rgba(255,255,255,.08);
  --footer-col-border:   rgba(255,255,255,.06);
}

.credits-separator { height:1px; background:var(--footer-sep); border:none; margin:0 1rem; }

.credits-body {
  display:grid; grid-template-columns:1fr repeat(3,auto);
  gap:2rem; padding:2rem; align-items:start;
}

.credits-brand { display:flex; flex-direction:column; gap:.75rem; }
.credits-logo-large { width:168px; height:48px; display:block; flex-shrink:0; }
[data-theme="dark"] .credits-logo-large { filter:brightness(0) invert(1); }
.credits-copy { font-size:.875rem; color:var(--footer-copy); margin:0; width:168px; line-height:1.5; }

.credits-column { display:flex; flex-direction:column; gap:.75rem; min-width:120px; }
.credits-column-title { font-size:.875rem; font-weight:600; color:var(--footer-title); margin:0; letter-spacing:.01em; }
.credits-column-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.credits-column-links a {
  font-size:.8125rem; color:var(--footer-link); text-decoration:none; display:inline-block;
  transition:color 160ms ease;
}
.credits-column-links a:hover { color:var(--footer-link-hover); }
.credits-column-links a:focus-visible {
  outline:2px solid var(--footer-focus); outline-offset:2px; border-radius:3px;
}
@media (prefers-reduced-motion:reduce) { .credits-column-links a { transition:none; } }

@media (max-width:768px) {
  .credits-separator { margin:0 .75rem; }
  .credits-body { grid-template-columns:1fr; padding:1.5rem 1rem; gap:1.5rem; }
  .credits-logo-large { display:none; }
  .credits-brand { order:10; align-items:center; padding-top:1.25rem; border-top:1px solid var(--footer-brand-border); }
  .credits-copy  { width:auto; text-align:center; }
  .credits-column { padding-bottom:1rem; border-bottom:1px solid var(--footer-col-border); min-width:unset; }
  .credits-column:last-of-type { border-bottom:none; padding-bottom:0; }
}