/* ==========================================================================
   CRAVE · FOOTER
   Shared across all pages.
   ========================================================================== */

.footer {
  background: var(--color-ink-900);
  color: var(--color-ink-300);
  padding-block: var(--space-16);
}
.footer a {
  color: var(--color-ink-300);
  transition: color var(--duration-fast) var(--ease);
}
.footer a:hover { color: var(--text-inverse); }

.footer__grid {
  display: grid;
  gap: var(--space-10);
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
}

.footer__brand img {
  height: 32px;
  width: auto;
  margin-bottom: var(--space-4);
}
.footer__brand p {
  color: var(--color-ink-400);
  font-size: var(--fs-sm);
  max-width: 36ch;
  line-height: var(--lh-relaxed);
}

.footer__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-inverse);
  margin-bottom: var(--space-4);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-ink-400);
}