/* Give the brand mark and every navigation control its own space. */
.sidebar .brand{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px}
.sidebar .brand img{width:44px;height:44px;object-fit:contain}
.footer-identity{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer-wordmark{font:600 28px/1 var(--sans);letter-spacing:-1px;color:var(--paper)}
.content-footer{align-items:center;flex-wrap:wrap}
@media(max-width:760px){
  .sidebar{padding:8px 12px;gap:8px}
  .sidebar .brand{display:flex;width:44px;height:44px;flex:0 0 44px}
  .sidebar .brand img{width:37px;height:37px}
  .sidebar .sidebar-body{flex:1;min-width:0;margin:0}
  .sidebar-body nav{display:flex;justify-content:flex-end;gap:0;margin:0}
  .sidebar-body nav a{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:10px}
  .sidebar-body nav .theme-toggle{flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:11px}
  .footer-identity{gap:12px}
  .content-footer{gap:16px}
}
/* 44px mark + six 44px controls + 12px outer padding fits a 320px screen. */
@media(max-width:359px){.sidebar{padding-left:6px;padding-right:6px;gap:0}.footer-identity{align-items:flex-start;flex-direction:column}}