.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}

.brand-duck {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .34));
  transition: transform .25s ease;
}

.brand:hover .brand-duck,
.brand:focus-visible .brand-duck {
  transform: rotate(-5deg) translateY(-2px);
}

.brand .brand-name {
  color: #fff;
  font-size: .82rem;
  white-space: nowrap;
}

footer {
  position: relative;
}

.footer-duck {
  width: clamp(128px, 14vw, 190px);
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .32));
}

@media (max-width: 680px) {
  .brand-duck {
    width: 44px;
    height: 44px;
  }

  .footer-duck {
    width: 136px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-duck {
    transition: none;
  }
}

.publisher-mark {
  display: grid;
  grid-template-columns: 112px minmax(170px, 1fr);
  gap: 1rem;
  align-items: center;
  min-width: 330px;
  padding: 1rem;
  border: 1px solid rgba(73, 215, 208, .22);
  background: #091619;
  text-align: left;
}

.publisher-logo { display: block; background: #fff; line-height: 0; }
.publisher-logo img { display: block; width: 112px; height: auto; }
.publisher-mark div { display: flex; flex-direction: column; align-items: flex-start; }
.publisher-mark span { color: #8da2a0; font: 500 .65rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.publisher-mark div > a { color: #fff; font-weight: 700; text-decoration: none; }
.publisher-mark div > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.publisher-mark small { margin-top: .25rem; color: #8da2a0; font-size: .7rem; line-height: 1.45; }

@media (max-width: 900px) {
  footer { flex-wrap: wrap; }
  .publisher-mark { order: 3; width: 100%; }
}

@media (max-width: 480px) {
  .publisher-mark { grid-template-columns: 88px 1fr; min-width: 0; }
  .publisher-logo img { width: 88px; }
}