/* The footer: hairline top, everything centered: nav, contact row, fine print. */

.site-footer {
  view-transition-name: site-footer;   /* its own group across pages (styles/transitions.css) */
  padding: var(--xl) 0 var(--2xl);
  border-top: var(--hair);
  font-size: var(--small);
  color: var(--text-2);
  text-align: center;
}

.foot-nav {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  font-size: var(--tiny);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}

.foot-nav a { color: var(--text); opacity: 0.75; font-weight: var(--regular); }
.foot-nav a:hover { opacity: 1; color: var(--accent); text-decoration: none; }
.foot-nav a.on { opacity: 1; color: var(--accent); text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 1px; }

.foot-contact {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: var(--md) 0;
}

.foot-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
  font-weight: var(--regular);
}

.foot-contact a:hover { color: var(--accent); text-decoration: none; }

.foot-fine { font-size: var(--tiny); }
.foot-legal { margin-top: 0.4rem; }
.foot-legal a { color: var(--text-2); font-weight: var(--regular); }
.foot-legal a:hover { color: var(--accent); text-decoration: none; }