.site-footer{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
 gap:16px 24px;min-height:48px;margin:0;padding:16px 0;
 border-top:1px solid #dedbd3;color:#686761;
 font:400 10px/1.5 Inter,sans-serif;letter-spacing:.05em;
}
.site-footer .footer-name{font-size:10px;white-space:nowrap}
.site-footer .footer-links{display:flex;align-items:center;gap:24px;margin-left:auto;font:inherit}
.site-footer .footer-links a{white-space:nowrap}
.site-footer .footer-links a:hover,.site-footer .footer-links a[aria-current="page"]{color:#e24a1a}
.site-footer .footer-links a:focus-visible{outline:2px solid #e24a1a;outline-offset:5px}
.sink-scene .site-footer{position:absolute;bottom:16px;left:var(--pad);right:var(--pad)}
/* Reserve real space for the passing title so adjacent content moves with it. */
.site-footer .music-title-clip{
 position:relative;right:auto;top:auto;transform:none;flex:0 0 auto;
 width:0;margin-right:0;height:28px;background:none;
 transition:width .65s cubic-bezier(.2,.7,.2,1),margin-right .65s cubic-bezier(.2,.7,.2,1);
}
.site-footer .music-console.show-title .music-title-clip,
.site-footer .music-console:hover .music-title-clip,
.site-footer .music-console:has(:focus-visible) .music-title-clip{width:180px;margin-right:12px}
.site-footer:has(.music-console) .music-console{margin-left:auto}
.site-footer:has(.music-console) .footer-links{margin-left:0}
@media(max-width:700px){
 .site-footer{gap:10px 16px;padding:12px 0}
 .site-footer .footer-links{gap:16px}
 .site-footer:has(.music-console) .footer-name{flex-basis:100%}
 .site-footer:has(.music-console) .footer-links{display:none}
 .site-footer .music-console{margin-left:auto;flex-basis:auto}
 .site-footer .music-console.show-title .music-title-clip,
 .site-footer .music-console:hover .music-title-clip,
 .site-footer .music-console:has(:focus-visible) .music-title-clip{width:70px;margin-right:4px}
 .sink-scene .site-footer{bottom:12px}
}
@media(prefers-reduced-motion:reduce){.site-footer .music-title-clip{transition:none}}
/* On mobile, give archive playback text the space beside its controls. */
@media(max-width:700px){
 .site-footer:has(.music-console) .footer-name{display:none}
 .site-footer:has(.music-console) .music-console{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;
  align-items:center;gap:4px;width:100%;min-width:0;margin-left:0;
 }
 .site-footer .music-console .music-title-clip,
 .site-footer .music-console.show-title .music-title-clip,
 .site-footer .music-console:hover .music-title-clip,
 .site-footer .music-console:has(:focus-visible) .music-title-clip{
  width:auto;min-width:0;height:auto;min-height:28px;margin-right:8px;
  justify-content:flex-start;transition:none;
 }
 .site-footer .music-console #music-title{
  width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;
  text-align:left;font-size:10px;line-height:1.5;
 }
}

/* Touch hover/focus must not keep a timed playback credit visible forever. */
@media(max-width:700px),(hover:none){
 .site-footer .music-console:not(.show-title) #music-title{
  opacity:0;transform:translateX(110%);
 }
}