footer {
  padding: clamp(56px, 8vw, 96px) var(--gutter) clamp(40px, 6vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(36px, 7vw, 108px);
  border-top: 3px solid var(--black);
  background: var(--pink);
  color: var(--black);
  font-weight: 700;
}
.footer-main { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 28px; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; font-family: var(--display); font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 900; line-height: 1; letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.footer-brand img { width: 44px; height: 44px; object-fit: cover; }
.footer-tagline { max-width: 14ch; margin: 0; font-family: var(--display); font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 900; line-height: .95; letter-spacing: -.035em; text-wrap: balance; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; font-family: var(--display); font-size: .95rem; font-weight: 800; letter-spacing: .012em; }
.footer-links a { text-decoration: none; border-bottom: 3px solid var(--black); }
.footer-links a:hover { border-bottom-color: var(--white); }
.footer-maker { display: flex; width: 180px; flex: 0 0 180px; flex-direction: column; align-items: center; gap: 20px; }
.powered-badge { display: block; width: 100%; color: var(--black); text-decoration: none; transform: rotate(10deg); transition: color .2s ease, transform .2s ease; }
.powered-badge svg { display: block; width: 100%; height: auto; overflow: visible; }
.powered-badge text { font-family: var(--body); font-size: 16px; font-weight: 800; letter-spacing: .14em; }
.powered-badge:hover { color: var(--white); transform: rotate(12deg); }
.powered-badge:focus-visible { outline: 3px solid var(--black); outline-offset: 5px; border-radius: 50%; }
.footer-credit { width: 100%; margin: 0; font-family: var(--display); font-size: .9rem; font-weight: 800; letter-spacing: .025em; text-align: center; white-space: nowrap; }
@media (max-width: 700px) {
  footer { align-items: flex-start; flex-direction: column; }
  .footer-maker { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .powered-badge { transition: none; }
}