/* Site footer (components/_footer.html). Phones keep it short; the tab bar does the work. */
.site-footer { margin-top: var(--space-8); padding-block: var(--space-7) var(--space-6); background: var(--cmu-ink); color: var(--cmu-paper); }
.site-footer .logo { color: var(--cmu-paper); }
.site-footer .line { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; margin: 14px 0 6px; }
.site-footer p, .site-footer small { color: var(--on-ink-muted); }
.site-footer h4 { color: var(--cmu-paper); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; font-family: var(--font-body); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--cmu-paper); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .legal { border-top: 1px solid rgba(246, 244, 250, .12); margin-top: var(--space-6); padding-top: var(--space-4);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
@media (max-width: 991.98px) { body.has-tabbar .site-footer { padding-bottom: calc(var(--tabbar-h) + var(--space-6)); } }