/* footer.css */

.footer {
  padding: var(--space-8) 0 max(var(--space-7), env(safe-area-inset-bottom));
  background: var(--bg);
  box-shadow: 0 -1px 0 var(--line);
  position: relative;
  z-index: 1;
}
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.footer__links { display: flex; gap: var(--space-5); }
.footer__link { font-size: var(--fs-callout); font-weight: 500; color: var(--text-2); transition: color 200ms ease; }
.footer__link:hover { color: var(--accent); }
/* Email: just a step larger than the LinkedIn / GitHub links (15px), no pill.
   The copy and mail icons sit at the same scale. Tap areas stay 44px tall. */
.footer__email { display: inline-flex; align-items: center; gap: 2px; margin-top: var(--space-1); }
.email {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);           /* 17px */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.email .icon { width: 15px; height: 15px; color: var(--accent); }
.email-open {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--accent);
}
.email-open .icon { width: 18px; height: 18px; }
.email:hover, .email-open:hover, .email:focus-visible, .email-open:focus-visible {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.footer__location { font-size: var(--fs-footnote); color: var(--text-2); }
.footer__copy { font-size: var(--fs-caption); color: var(--text-3); }