.footer {
  background: var(--color-surface-dark);
  color: rgba(255,255,255,0.7);
  padding: var(--space-2xl) var(--gutter) var(--space-lg);
}

/* Brand · four link columns · Monika. The brand block no longer gets
   double width — with four columns of links there isn't room for it. */
.footer__inner {
  max-width: var(--content-width);
  margin: 0 auto var(--space-xl);
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)) auto;
  gap: var(--space-xl);
  align-items: start;
}

.footer__brand .nav__logo {
  margin-bottom: var(--space-lg);
  color: white;
}
.footer__brand p {
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 280px;
  font-weight: 300;
}

.footer__links h4 {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: white;
  margin-bottom: var(--space-lg);
}
.footer__links ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.footer__links a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  transition: color var(--duration-base);
}
.footer__links a:hover {
  color: white;
}

.footer__monika-wrap {
  --monika-size: 110px;
  --monika-glow: rgba(155, 45, 110, 0.45);
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
}

.footer__monika-wrap .monika-wrapper {
  /* fade into the dark footer */
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 80%);
          mask-image: linear-gradient(to bottom, black 20%, transparent 80%);
  opacity: 0.9;
}


.footer__social {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity var(--duration-base);
}
.footer__social a:hover {
  opacity: 1;
}

.footer__bottom {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer__bottom p {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.03em;
}

/* ── Responsive — breakpoints mirror --bp-lg / --bp-md / --bp-sm ── */
@media (max-width: 1200px) {
  .footer__inner {
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
  }
  .footer__monika { display: none; }
}

@media (max-width: 1024px) {
  .footer__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-lg);
  }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 480px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}