/* The full site footer: company identity, navigation, and the legal shelf.
   A separate file so it can be added to a page without touching main.css, which is where the
   page design lives. Extends .footer from main.css; overrides nothing. */

.footer-grid {
  display: grid; gap: 40px 32px; align-items: start;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr));
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }

.footer-col h3 {
  font-size: 11px; font-weight: 400; letter-spacing: .18em; color: var(--ink3);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a {
  font-weight: 300; font-size: 13.5px; color: var(--ink2); text-decoration: none;
  transition: color .3s var(--ease);
}
.footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.footer-about .footer-tag { margin-block: 12px 18px; max-width: 34ch; line-height: 1.6; }
.footer-entity { display: grid; gap: 5px; font-size: 12px; color: var(--ink3); line-height: 1.6; }
.footer-entity .mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }

/* A single brass dot before the live-status line: the one place colour carries meaning here. */
.footer-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink3); }
.footer-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 6px;
}

.footer-bottom {
  margin-block-start: 46px; padding-block-start: 22px; border-block-start: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; justify-content: space-between;
}
.footer-bottom p { font-size: 12px; color: var(--ink3); margin: 0; }
.footer-bottom .legal-line { max-width: 62ch; line-height: 1.6; }
.footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom nav a { font-size: 12px; color: var(--ink3); text-decoration: none; }
.footer-bottom nav a:hover { color: var(--ink); }